TreeView: Allow expanded state to be controlled

[colebemis]

Summary

Allows the expanded state of tree items to be controlled (as requested by @jdrush89 from Repos). Example:

function ControlledTreeItem() {
  const [expanded, setExpanded] = useState(false)
  return <TreeView.Item expanded={expanded} onExpandedChange={setExpanded} ... />
}

// Uncontrolled version for comparison:
function UncontrolledTreeItem() {
    return <TreeView.Item ... />
}

I created a new story to demonstrate how you might use the controlled behavior:

👉 Try it out

CleanShot.2022-09-26.at.13.35.41.mp4

Shoutouts

Shoutout to @joshblack for writing the useControllableState hook 💖

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4750160

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	77.1 KB (0%)
dist/browser.umd.js	77.71 KB (0%)

[joshblack]

Is there a good rule of thumb to follow for when to use on<State>Change(value), as in onExpandedChange(), versus onChange(state)?

[joshblack]

Looks great! Left a couple comments around ideas for refactoring if they're helpful, totally get if not 👍

[joshblack]

With setContainsCurrentItem coming from React.useState(), we might be able to rely on that being stable instead of having to create a stable reference.

[joshblack]

I bet we could update useControllableState to provide a stable reference for the state setter to match useState() if that would help out here with not having to mess around with stable refs

[joshblack]

Idea from the stable state setter comment, this might be able to become:

const savedOnChange = React.useRef(onChange);

React.useEffect(() => {
  savedOnChange.current = onChange;
});

const setState = React.useCallback((stateOrUpdater: T | ((prevState: T) => T)) => {
  const value =
    typeof stateOrUpdater === 'function'
      ? // @ts-ignore stateOrUpdater is a function
        stateOrUpdater(state)
      : stateOrUpdater

  if (controlled.current === false) {
    internalSetState(value)
  }

  if (onChange) {
    savedOnChange.current?.(value)
  }
}, [state]);

// --snip--

return [state, setState];

It'd be great to also get rid of state from the dep array but I didn't see a quick way to do so 🤔

[colebemis]

This is great feedback. Thank you! Is this what you had in mind? eeaf486