Support uncontrolled open

Author: hectahertz

packages/react/src/SelectPanel/SelectPanel.stories.tsx

@@ -15,51 +15,35 @@ const meta: Meta<typeof SelectPanel> = {
 
 export default meta
 
-function getColorCircle(color: string) {
-  return function () {
-    return (
-      <Box
-        sx={{
-          backgroundColor: color,
-          borderColor: color,
-          width: 14,
-          height: 14,
-          borderRadius: 10,
-          margin: 'auto',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-        }}
-      />
-    )
-  }
-}
-
 const items: ItemInput[] = [
   {
-    leadingVisual: getColorCircle('#a2eeef'),
     text: 'enhancement',
-    description: 'New feature or request',
-    descriptionVariant: 'block',
     id: 1,
   },
   {
-    leadingVisual: getColorCircle('#d73a4a'),
     text: 'bug',
-    description: "Something isn't working",
-    descriptionVariant: 'block',
     id: 2,
   },
   {
-    leadingVisual: getColorCircle('#0cf478'),
     text: 'good first issue',
-    description: 'Good for newcomers',
-    descriptionVariant: 'block',
     id: 3,
   },
-  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
-  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
-  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
-  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+  {
+    text: 'design',
+    id: 4,
+  },
+  {
+    text: 'blocker',
+    id: 5,
+  },
+  {
+    text: 'backend',
+    id: 6,
+  },
+  {
+    text: 'frontend',
+    id: 7,
+  },
 ]
 
 export const Default = () => {
@@ -80,7 +64,6 @@ export const Default = () => {
     if (!aIsSelected && bIsSelected) return 1
     return 0
   })
-  const [open, setOpen] = useState(false)
 
   return (
     <FormControl>
@@ -94,8 +77,6 @@ export const Default = () => {
             {children}
           </Button>
         )}
-        open={open}
-        onOpenChange={setOpen}
         items={selectedItemsSortedFirst}
         selected={selected}
         onSelectedChange={setSelected}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -27,6 +27,8 @@ import {clsx} from 'clsx'
 import {heightMap} from '../Overlay/Overlay'
 import {debounce} from '@github/mini-throttle'
 
+type Gesture = 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection'
+
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const SHORT_DELAY_MS = 500
 const LONG_DELAY_MS = 1000
@@ -72,10 +74,8 @@ interface SelectPanelBaseProps {
   // TODO: Make `title` required in the next major version
   title?: string | React.ReactElement
   subtitle?: string | React.ReactElement
-  onOpenChange: (
-    open: boolean,
-    gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection',
-  ) => void
+  open?: boolean
+  onOpenChange?: (open: boolean, gesture: Gesture) => void
   placeholder?: string
   // TODO: Make `inputLabel` required in next major version
   inputLabel?: string
@@ -97,7 +97,7 @@ interface SelectPanelBaseProps {
 
 export type SelectPanelProps = SelectPanelBaseProps &
   Omit<FilteredActionListProps, 'selectionVariant'> &
-  Pick<AnchoredOverlayProps, 'open' | 'height' | 'width'> &
+  Pick<AnchoredOverlayProps, 'height' | 'width'> &
   AnchoredOverlayWrapperAnchorProps &
   (SelectPanelSingleSelection | SelectPanelMultiSelection)
 
@@ -122,9 +122,28 @@ const doesItemsIncludeItem = (items: ItemInput[], item: ItemInput) => {
   return items.some(i => areItemsEqual(i, item))
 }
 
+// We can't use the `useProvidedStateOrCreate` hook here because we need to handle the gesture
+// separately from the open state. So, we have to use a separate state and a callback to update
+// the open state.
+function useProvidedOnOpenOrCreate(
+  externalOpen: boolean | undefined,
+  externalOnOpenChange: ((open: boolean, gesture: Gesture) => void) | undefined,
+) {
+  const [internalOpen, setInternalOpen] = useState<boolean>(false)
+  const open = externalOpen ?? internalOpen
+  const onOpenChange = useCallback(
+    (newOpen: boolean, gesture: Gesture) => {
+      setInternalOpen(newOpen)
+      if (externalOnOpenChange) externalOnOpenChange(open, gesture)
+    },
+    [open, externalOnOpenChange],
+  )
+  return [open, onOpenChange] as const
+}
+
 export function SelectPanel({
-  open,
-  onOpenChange,
+  open: externalOpen,
+  onOpenChange: externalOnOpenChange,
   renderAnchor = props => {
     const {children, ...rest} = props
     return (
@@ -183,6 +202,8 @@ export function SelectPanel({
     [needsNoItemsAnnouncement],
   )
 
+  const [open, onOpenChange] = useProvidedOnOpenOrCreate(externalOpen, externalOnOpenChange)
+
   const onInputRefChanged = useCallback(
     (ref: React.RefObject<HTMLInputElement>) => {
       setInputRef(ref)
@@ -307,9 +328,8 @@ export function SelectPanel({
     [onOpenChange],
   )
   const onClose = useCallback(
-    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | 'selection' | 'escape') => {
-      onOpenChange(false, gesture)
-    },
+    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | 'selection' | 'escape') =>
+      onOpenChange(false, gesture),
     [onOpenChange],
   )