diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx index 00568db5e82f..d68472776ba8 100644 --- a/editor/src/uuiui/radix-components.tsx +++ b/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((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 -}