usePropControlledStateV2

editor/src/uuiui/radix-components.tsx

@@ -11,6 +11,7 @@ import { Icons, SmallerIcons } from './icons'
 import { when } from '../utils/react-conditionals'
 import { Icn, type IcnProps } from './icn'
 import { forceNotNull } from '../core/shared/optional-utils'
+import { usePropControlledStateV2 } from '../components/inspector/common/inspector-utils'
 
 // Keep this in sync with the radix-components-portal div in index.html.
 export const RadixComponentsPortalId = 'radix-components-portal'
@@ -104,7 +105,7 @@ export const DropdownMenu = React.memo<DropdownMenuProps>((props) => {
   }, [])
   const onEscapeKeyDown = React.useCallback((e: KeyboardEvent) => e.stopPropagation(), [])
 
-  const [open, setOpen] = useIsDropdownMenuOpen(props.isOpen ?? null)
+  const [open, setOpen] = usePropControlledStateV2(props.isOpen || false)
 
   const shouldShowCheckboxes = props.items.some(
     (i) => !isSeparatorDropdownMenuItem(i) && i.checked != null,
@@ -409,15 +410,3 @@ export const RadixSelect = React.memo(
   },
 )
 RadixSelect.displayName = 'RadixSelect'
-
-function useIsDropdownMenuOpen(isOpenFromProps: boolean | null) {
-  const state = React.useState(isOpenFromProps || false)
-  const [, setOpen] = state
-
-  // If the `isOpen` value coming from props changes, update the state.
-  React.useEffect(() => {
-    setOpen(isOpenFromProps || false)
-  }, [setOpen, isOpenFromProps])
-
-  return state
-}