@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/build-module/dropdown-menu-v2/index.js

@@ -2,189 +2,236 @@ import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef, createContext, useContext, useMemo } from '@wordpress/element';
+import { forwardRef, createContext, useContext, useMemo, cloneElement, isValidElement, useCallback } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
+import { check, chevronRightSmall } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnectWithoutRef } from '../context';
-import { useSlot } from '../slot-fill';
+import { useContextSystem, contextConnect } from '../context';
 import Icon from '../icon';
-import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
-import * as DropdownMenuStyled from './styles';
-// Menu content's side padding + 4px
-const SUB_MENU_OFFSET_SIDE = 16;
-// Opposite amount of the top padding of the menu item
-const SUB_MENU_OFFSET_ALIGN = -8;
-const DropdownMenuPrivateContext = createContext({
-  variant: undefined,
-  portalContainer: null
-});
-const UnconnectedDropdownMenu = props => {
-  const {
-    // Root props
-    defaultOpen,
-    open,
-    onOpenChange,
-    modal = true,
-    // Content positioning props
-    side = 'bottom',
-    sideOffset = 0,
-    align = 'center',
-    alignOffset = 0,
-    // Render props
-    children,
-    trigger,
-    // From internal components context
-    variant
-  } = useContextSystem(props, 'DropdownMenu');
-
-  // Render the portal in the default slot used by the legacy Popover component.
-  const slot = useSlot(POPOVER_DEFAULT_SLOT_NAME);
-  const portalContainer = slot.ref?.current;
-  const privateContextValue = useMemo(() => ({
-    variant,
-    portalContainer
-  }), [variant, portalContainer]);
-  return createElement(DropdownMenuPrimitive.Root, {
-    defaultOpen: defaultOpen,
-    open: open,
-    onOpenChange: onOpenChange,
-    modal: modal,
-    dir: isRTL() ? 'rtl' : 'ltr'
-  }, createElement(DropdownMenuPrimitive.Trigger, {
-    asChild: true
-  }, trigger), createElement(DropdownMenuPrimitive.Portal, {
-    container: portalContainer
-  }, createElement(DropdownMenuStyled.Content, {
-    side: side,
-    align: align,
-    sideOffset: sideOffset,
-    alignOffset: alignOffset,
-    loop: true,
-    variant: variant
-  }, createElement(DropdownMenuPrivateContext.Provider, {
-    value: privateContextValue
-  }, children))));
-};
-
-/**
- * `DropdownMenu` displays a menu to the user (such as a set of actions
- * or functions) triggered by a button.
- */
-export const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');
-export const DropdownSubMenuTrigger = ({
-  prefix,
-  suffix = createElement(DropdownMenuStyled.SubmenuRtlChevronIcon, {
-    icon: chevronRightSmall,
-    size: 24
-  }),
-  children
-}) => {
-  return createElement(Fragment, null, prefix && createElement(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
-};
-export const DropdownSubMenu = ({
-  // Sub props
-  defaultOpen,
-  open,
-  onOpenChange,
-  // Sub trigger props
-  disabled,
-  textValue,
-  // Render props
-  children,
-  trigger
-}) => {
-  const {
-    variant,
-    portalContainer
-  } = useContext(DropdownMenuPrivateContext);
-  return createElement(DropdownMenuPrimitive.Sub, {
-    defaultOpen: defaultOpen,
-    open: open,
-    onOpenChange: onOpenChange
-  }, createElement(DropdownMenuStyled.SubTrigger, {
-    disabled: disabled,
-    textValue: textValue
-  }, trigger), createElement(DropdownMenuPrimitive.Portal, {
-    container: portalContainer
-  }, createElement(DropdownMenuStyled.SubContent, {
-    loop: true,
-    sideOffset: SUB_MENU_OFFSET_SIDE,
-    alignOffset: SUB_MENU_OFFSET_ALIGN,
-    variant: variant
-  }, children)));
-};
-export const DropdownMenuLabel = props => createElement(DropdownMenuStyled.Label, {
-  ...props
-});
-export const DropdownMenuGroup = props => createElement(DropdownMenuPrimitive.Group, {
-  ...props
-});
-export const DropdownMenuItem = forwardRef(({
-  children,
+import * as Styled from './styles';
+export const DropdownMenuContext = createContext(undefined);
+export const DropdownMenuItem = forwardRef(function DropdownMenuItem({
   prefix,
   suffix,
+  children,
+  hideOnClick = true,
   ...props
-}, forwardedRef) => {
-  return createElement(DropdownMenuStyled.Item, {
+}, ref) {
+  const dropdownMenuContext = useContext(DropdownMenuContext);
+  return createElement(Styled.DropdownMenuItem, {
+    ref: ref,
     ...props,
-    ref: forwardedRef
-  }, prefix && createElement(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
+    accessibleWhenDisabled: true,
+    hideOnClick: hideOnClick,
+    store: dropdownMenuContext?.store
+  }, createElement(Styled.ItemPrefixWrapper, null, prefix), createElement(Styled.DropdownMenuItemContentWrapper, null, createElement(Styled.DropdownMenuItemChildrenWrapper, null, children), suffix && createElement(Styled.ItemSuffixWrapper, null, suffix)));
 });
-export const DropdownMenuCheckboxItem = ({
-  children,
-  checked = false,
+export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({
   suffix,
+  children,
+  hideOnClick = false,
   ...props
-}) => {
-  return createElement(DropdownMenuStyled.CheckboxItem, {
+}, ref) {
+  const dropdownMenuContext = useContext(DropdownMenuContext);
+  return createElement(Styled.DropdownMenuCheckboxItem, {
+    ref: ref,
     ...props,
-    checked: checked
-  }, createElement(DropdownMenuStyled.ItemPrefixWrapper, null, createElement(DropdownMenuStyled.ItemIndicator, null, (checked === 'indeterminate' || checked === true) && createElement(Icon, {
-    icon: checked === 'indeterminate' ? lineSolid : check,
+    accessibleWhenDisabled: true,
+    hideOnClick: hideOnClick,
+    store: dropdownMenuContext?.store
+  }, createElement(Ariakit.MenuItemCheck, {
+    store: dropdownMenuContext?.store,
+    render: createElement(Styled.ItemPrefixWrapper, null)
+    // Override some ariakit inline styles
+    ,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    }
+  }, createElement(Icon, {
+    icon: check,
     size: 24
-  }))), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
-};
-export const DropdownMenuRadioGroup = props => createElement(DropdownMenuPrimitive.RadioGroup, {
-  ...props
+  })), createElement(Styled.DropdownMenuItemContentWrapper, null, createElement(Styled.DropdownMenuItemChildrenWrapper, null, children), suffix && createElement(Styled.ItemSuffixWrapper, null, suffix)));
 });
-const radioDot = createElement(SVG, {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
+const radioCheck = createElement(SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
 }, createElement(Circle, {
   cx: 12,
   cy: 12,
-  r: 3,
-  fill: "currentColor"
+  r: 3
 }));
-export const DropdownMenuRadioItem = ({
-  children,
+export const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem({
   suffix,
+  children,
+  hideOnClick = false,
   ...props
-}) => {
-  return createElement(DropdownMenuStyled.RadioItem, {
-    ...props
-  }, createElement(DropdownMenuStyled.ItemPrefixWrapper, null, createElement(DropdownMenuStyled.ItemIndicator, null, createElement(Icon, {
-    icon: radioDot,
-    size: 22
-  }))), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
-};
-export const DropdownMenuSeparator = props => {
+}, ref) {
+  const dropdownMenuContext = useContext(DropdownMenuContext);
+  return createElement(Styled.DropdownMenuRadioItem, {
+    ref: ref,
+    ...props,
+    accessibleWhenDisabled: true,
+    hideOnClick: hideOnClick,
+    store: dropdownMenuContext?.store
+  }, createElement(Ariakit.MenuItemCheck, {
+    store: dropdownMenuContext?.store,
+    render: createElement(Styled.ItemPrefixWrapper, null)
+    // Override some ariakit inline styles
+    ,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    }
+  }, createElement(Icon, {
+    icon: radioCheck,
+    size: 24
+  })), createElement(Styled.DropdownMenuItemContentWrapper, null, createElement(Styled.DropdownMenuItemChildrenWrapper, null, children), suffix && createElement(Styled.ItemSuffixWrapper, null, suffix)));
+});
+export const DropdownMenuGroup = forwardRef(function DropdownMenuGroup(props, ref) {
+  const dropdownMenuContext = useContext(DropdownMenuContext);
+  return createElement(Styled.DropdownMenuGroup, {
+    ref: ref,
+    ...props,
+    store: dropdownMenuContext?.store
+  });
+});
+const UnconnectedDropdownMenu = (props, ref) => {
+  var _props$placement;
   const {
+    // Store props
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    placement,
+    // Menu trigger props
+    trigger,
+    // Menu props
+    gutter,
+    children,
+    shift,
+    modal = true,
+    // From internal components context
+    variant,
+    // Rest
+    ...otherProps
+  } = useContextSystem(props, 'DropdownMenu');
+  const parentContext = useContext(DropdownMenuContext);
+  const computedDirection = isRTL() ? 'rtl' : 'ltr';
+
+  // If an explicit value for the `placement` prop is not passed,
+  // apply a default placement of `bottom-start` for the root dropdown,
+  // and of `right-start` for nested dropdowns.
+  let computedPlacement = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : parentContext?.store ? 'right-start' : 'bottom-start';
+  // Swap left/right in case of RTL direction
+  if (computedDirection === 'rtl') {
+    if (/right/.test(computedPlacement)) {
+      computedPlacement = computedPlacement.replace('right', 'left');
+    } else if (/left/.test(computedPlacement)) {
+      computedPlacement = computedPlacement.replace('left', 'right');
+    }
+  }
+  const dropdownMenuStore = Ariakit.useMenuStore({
+    parent: parentContext?.store,
+    open,
+    defaultOpen,
+    placement: computedPlacement,
+    focusLoop: true,
+    setOpen(willBeOpen) {
+      onOpenChange?.(willBeOpen);
+    },
+    rtl: computedDirection === 'rtl'
+  });
+  const contextValue = useMemo(() => ({
+    store: dropdownMenuStore,
     variant
-  } = useContext(DropdownMenuPrivateContext);
-  return createElement(DropdownMenuStyled.Separator, {
+  }), [dropdownMenuStore, variant]);
+
+  // Extract the side from the applied placement — useful for animations.
+  const appliedPlacementSide = dropdownMenuStore.useState('placement').split('-')[0];
+  if (dropdownMenuStore.parent && !(isValidElement(trigger) && DropdownMenuItem === trigger.type)) {
+    // eslint-disable-next-line no-console
+    console.warn('For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.');
+  }
+  const hideOnEscape = useCallback(event => {
+    // Pressing Escape can cause unexpected consequences (ie. exiting
+    // full screen mode on MacOs, close parent modals...).
+    event.preventDefault();
+    // Returning `true` causes the menu to hide.
+    return true;
+  }, []);
+  const wrapperProps = useMemo(() => ({
+    dir: computedDirection,
+    style: {
+      direction: computedDirection
+    }
+  }), [computedDirection]);
+  return createElement(Fragment, null, createElement(Ariakit.MenuButton, {
+    ref: ref,
+    store: dropdownMenuStore,
+    render: dropdownMenuStore.parent ? cloneElement(trigger, {
+      // Add submenu arrow, unless a `suffix` is explicitly specified
+      suffix: createElement(Fragment, null, trigger.props.suffix, createElement(Styled.SubmenuChevronIcon, {
+        "aria-hidden": "true",
+        icon: chevronRightSmall,
+        size: 24,
+        preserveAspectRatio: "xMidYMid slice"
+      }))
+    }) : trigger
+  }), createElement(Styled.DropdownMenu, {
+    ...otherProps,
+    modal: modal,
+    store: dropdownMenuStore
+    // Root menu has an 8px distance from its trigger,
+    // otherwise 0 (which causes the submenu to slightly overlap)
+    ,
+    gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 0 : 8
+    // Align nested menu by the same (but opposite) amount
+    // as the menu container's padding.
+    ,
+    shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -4 : 0,
+    hideOnHoverOutside: false,
+    "data-side": appliedPlacementSide,
+    variant: variant,
+    wrapperProps: wrapperProps,
+    hideOnEscape: hideOnEscape,
+    unmountOnHide: true
+  }, createElement(DropdownMenuContext.Provider, {
+    value: contextValue
+  }, children)));
+};
+export const DropdownMenu = contextConnect(UnconnectedDropdownMenu, 'DropdownMenu');
+export const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator(props, ref) {
+  const dropdownMenuContext = useContext(DropdownMenuContext);
+  return createElement(Styled.DropdownMenuSeparator, {
+    ref: ref,
     ...props,
-    variant: variant
+    store: dropdownMenuContext?.store,
+    variant: dropdownMenuContext?.variant
   });
-};
+});
+export const DropdownMenuItemLabel = forwardRef(function DropdownMenuItemLabel(props, ref) {
+  return createElement(Styled.DropdownMenuItemLabel, {
+    numberOfLines: 1,
+    ref: ref,
+    ...props
+  });
+});
+export const DropdownMenuItemHelpText = forwardRef(function DropdownMenuItemHelpText(props, ref) {
+  return createElement(Styled.DropdownMenuItemHelpText, {
+    numberOfLines: 2,
+    ref: ref,
+    ...props
+  });
+});
 //# sourceMappingURL=index.js.map

package/build-module/dropdown-menu-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["DropdownMenuPrimitive","forwardRef","createContext","useContext","useMemo","isRTL","check","chevronRightSmall","lineSolid","SVG","Circle","useContextSystem","contextConnectWithoutRef","useSlot","Icon","SLOT_NAME","POPOVER_DEFAULT_SLOT_NAME","DropdownMenuStyled","SUB_MENU_OFFSET_SIDE","SUB_MENU_OFFSET_ALIGN","DropdownMenuPrivateContext","variant","undefined","portalContainer","UnconnectedDropdownMenu","props","defaultOpen","open","onOpenChange","modal","side","sideOffset","align","alignOffset","children","trigger","slot","ref","current","privateContextValue","createElement","Root","dir","Trigger","asChild","Portal","container","Content","loop","Provider","value","DropdownMenu","DropdownSubMenuTrigger","prefix","suffix","SubmenuRtlChevronIcon","icon","size","Fragment","ItemPrefixWrapper","ItemSuffixWrapper","DropdownSubMenu","disabled","textValue","Sub","SubTrigger","SubContent","DropdownMenuLabel","Label","DropdownMenuGroup","Group","DropdownMenuItem","forwardedRef","Item","DropdownMenuCheckboxItem","checked","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","radioDot","viewBox","xmlns","cx","cy","r","fill","DropdownMenuRadioItem","RadioItem","DropdownMenuSeparator","Separator"],"sources":["@wordpress/components/src/dropdown-menu-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n} from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { check, chevronRightSmall, lineSolid } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnectWithoutRef } from '../context';\nimport { useSlot } from '../slot-fill';\nimport Icon from '../icon';\nimport { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';\nimport * as DropdownMenuStyled from './styles';\nimport type {\n\tDropdownMenuProps,\n\tDropdownSubMenuProps,\n\tDropdownMenuItemProps,\n\tDropdownMenuLabelProps,\n\tDropdownMenuGroupProps,\n\tDropdownMenuCheckboxItemProps,\n\tDropdownMenuRadioGroupProps,\n\tDropdownMenuRadioItemProps,\n\tDropdownMenuSeparatorProps,\n\tDropdownSubMenuTriggerProps,\n\tDropdownMenuInternalContext,\n\tDropdownMenuPrivateContext as DropdownMenuPrivateContextType,\n} from './types';\n\n// Menu content's side padding + 4px\nconst SUB_MENU_OFFSET_SIDE = 16;\n// Opposite amount of the top padding of the menu item\nconst SUB_MENU_OFFSET_ALIGN = -8;\n\nconst DropdownMenuPrivateContext =\n\tcreateContext< DropdownMenuPrivateContextType >( {\n\t\tvariant: undefined,\n\t\tportalContainer: null,\n\t} );\n\nconst UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {\n\tconst {\n\t\t// Root props\n\t\tdefaultOpen,\n\t\topen,\n\t\tonOpenChange,\n\t\tmodal = true,\n\t\t// Content positioning props\n\t\tside = 'bottom',\n\t\tsideOffset = 0,\n\t\talign = 'center',\n\t\talignOffset = 0,\n\t\t// Render props\n\t\tchildren,\n\t\ttrigger,\n\n\t\t// From internal components context\n\t\tvariant,\n\t} = useContextSystem<\n\t\t// Adding `className` to the context type to avoid a TS error\n\t\tDropdownMenuProps & DropdownMenuInternalContext & { className?: string }\n\t>( props, 'DropdownMenu' );\n\n\t// Render the portal in the default slot used by the legacy Popover component.\n\tconst slot = useSlot( POPOVER_DEFAULT_SLOT_NAME );\n\tconst portalContainer = slot.ref?.current;\n\n\tconst privateContextValue = useMemo(\n\t\t() => ( {\n\t\t\tvariant,\n\t\t\tportalContainer,\n\t\t} ),\n\t\t[ variant, portalContainer ]\n\t);\n\n\treturn (\n\t\t<DropdownMenuPrimitive.Root\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\topen={ open }\n\t\t\tonOpenChange={ onOpenChange }\n\t\t\tmodal={ modal }\n\t\t\tdir={ isRTL() ? 'rtl' : 'ltr' }\n\t\t>\n\t\t\t<DropdownMenuPrimitive.Trigger asChild>\n\t\t\t\t{ trigger }\n\t\t\t</DropdownMenuPrimitive.Trigger>\n\t\t\t<DropdownMenuPrimitive.Portal container={ portalContainer }>\n\t\t\t\t<DropdownMenuStyled.Content\n\t\t\t\t\tside={ side }\n\t\t\t\t\talign={ align }\n\t\t\t\t\tsideOffset={ sideOffset }\n\t\t\t\t\talignOffset={ alignOffset }\n\t\t\t\t\tloop={ true }\n\t\t\t\t\tvariant={ variant }\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuPrivateContext.Provider\n\t\t\t\t\t\tvalue={ privateContextValue }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</DropdownMenuPrivateContext.Provider>\n\t\t\t\t</DropdownMenuStyled.Content>\n\t\t\t</DropdownMenuPrimitive.Portal>\n\t\t</DropdownMenuPrimitive.Root>\n\t);\n};\n\n/**\n * `DropdownMenu` displays a menu to the user (such as a set of actions\n * or functions) triggered by a button.\n */\nexport const DropdownMenu = contextConnectWithoutRef(\n\tUnconnectedDropdownMenu,\n\t'DropdownMenu'\n);\n\nexport const DropdownSubMenuTrigger = ( {\n\tprefix,\n\tsuffix = (\n\t\t<DropdownMenuStyled.SubmenuRtlChevronIcon\n\t\t\ticon={ chevronRightSmall }\n\t\t\tsize={ 24 }\n\t\t/>\n\t),\n\tchildren,\n}: DropdownSubMenuTriggerProps ) => {\n\treturn (\n\t\t<>\n\t\t\t{ prefix && (\n\t\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t\t{ prefix }\n\t\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t{ suffix && (\n\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t{ suffix }\n\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport const DropdownSubMenu = ( {\n\t// Sub props\n\tdefaultOpen,\n\topen,\n\tonOpenChange,\n\t// Sub trigger props\n\tdisabled,\n\ttextValue,\n\t// Render props\n\tchildren,\n\ttrigger,\n}: DropdownSubMenuProps ) => {\n\tconst { variant, portalContainer } = useContext(\n\t\tDropdownMenuPrivateContext\n\t);\n\n\treturn (\n\t\t<DropdownMenuPrimitive.Sub\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\topen={ open }\n\t\t\tonOpenChange={ onOpenChange }\n\t\t>\n\t\t\t<DropdownMenuStyled.SubTrigger\n\t\t\t\tdisabled={ disabled }\n\t\t\t\ttextValue={ textValue }\n\t\t\t>\n\t\t\t\t{ trigger }\n\t\t\t</DropdownMenuStyled.SubTrigger>\n\t\t\t<DropdownMenuPrimitive.Portal container={ portalContainer }>\n\t\t\t\t<DropdownMenuStyled.SubContent\n\t\t\t\t\tloop\n\t\t\t\t\tsideOffset={ SUB_MENU_OFFSET_SIDE }\n\t\t\t\t\talignOffset={ SUB_MENU_OFFSET_ALIGN }\n\t\t\t\t\tvariant={ variant }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownMenuStyled.SubContent>\n\t\t\t</DropdownMenuPrimitive.Portal>\n\t\t</DropdownMenuPrimitive.Sub>\n\t);\n};\n\nexport const DropdownMenuLabel = ( props: DropdownMenuLabelProps ) => (\n\t<DropdownMenuStyled.Label { ...props } />\n);\n\nexport const DropdownMenuGroup = ( props: DropdownMenuGroupProps ) => (\n\t<DropdownMenuPrimitive.Group { ...props } />\n);\n\nexport const DropdownMenuItem = forwardRef(\n\t(\n\t\t{ children, prefix, suffix, ...props }: DropdownMenuItemProps,\n\t\tforwardedRef: React.ForwardedRef< any >\n\t) => {\n\t\treturn (\n\t\t\t<DropdownMenuStyled.Item { ...props } ref={ forwardedRef }>\n\t\t\t\t{ prefix && (\n\t\t\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t\t\t{ prefix }\n\t\t\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ suffix && (\n\t\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t) }\n\t\t\t</DropdownMenuStyled.Item>\n\t\t);\n\t}\n);\n\nexport const DropdownMenuCheckboxItem = ( {\n\tchildren,\n\tchecked = false,\n\tsuffix,\n\t...props\n}: DropdownMenuCheckboxItemProps ) => {\n\treturn (\n\t\t<DropdownMenuStyled.CheckboxItem { ...props } checked={ checked }>\n\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t<DropdownMenuStyled.ItemIndicator>\n\t\t\t\t\t{ ( checked === 'indeterminate' || checked === true ) && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\tchecked === 'indeterminate' ? lineSolid : check\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenuStyled.ItemIndicator>\n\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t{ children }\n\t\t\t{ suffix && (\n\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t{ suffix }\n\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t) }\n\t\t</DropdownMenuStyled.CheckboxItem>\n\t);\n};\n\nexport const DropdownMenuRadioGroup = (\n\tprops: DropdownMenuRadioGroupProps\n) => <DropdownMenuPrimitive.RadioGroup { ...props } />;\n\nconst radioDot = (\n\t<SVG viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 } fill=\"currentColor\"></Circle>\n\t</SVG>\n);\n\nexport const DropdownMenuRadioItem = ( {\n\tchildren,\n\tsuffix,\n\t...props\n}: DropdownMenuRadioItemProps ) => {\n\treturn (\n\t\t<DropdownMenuStyled.RadioItem { ...props }>\n\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t<DropdownMenuStyled.ItemIndicator>\n\t\t\t\t\t<Icon icon={ radioDot } size={ 22 } />\n\t\t\t\t</DropdownMenuStyled.ItemIndicator>\n\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t{ children }\n\t\t\t{ suffix && (\n\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t{ suffix }\n\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t) }\n\t\t</DropdownMenuStyled.RadioItem>\n\t);\n};\n\nexport const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => {\n\tconst { variant } = useContext( DropdownMenuPrivateContext );\n\treturn <DropdownMenuStyled.Separator { ...props } variant={ variant } />;\n};\n"],"mappings":"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"}
+{"version":3,"names":["Ariakit","forwardRef","createContext","useContext","useMemo","cloneElement","isValidElement","useCallback","isRTL","check","chevronRightSmall","SVG","Circle","useContextSystem","contextConnect","Icon","Styled","DropdownMenuContext","undefined","DropdownMenuItem","prefix","suffix","children","hideOnClick","props","ref","dropdownMenuContext","createElement","accessibleWhenDisabled","store","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuCheckboxItem","MenuItemCheck","render","style","width","height","icon","size","radioCheck","xmlns","viewBox","cx","cy","r","DropdownMenuRadioItem","DropdownMenuGroup","UnconnectedDropdownMenu","_props$placement","open","defaultOpen","onOpenChange","placement","trigger","gutter","shift","modal","variant","otherProps","parentContext","computedDirection","computedPlacement","test","replace","dropdownMenuStore","useMenuStore","parent","focusLoop","setOpen","willBeOpen","rtl","contextValue","appliedPlacementSide","useState","split","type","console","warn","hideOnEscape","event","preventDefault","wrapperProps","dir","direction","Fragment","MenuButton","SubmenuChevronIcon","preserveAspectRatio","DropdownMenu","hideOnHoverOutside","unmountOnHide","Provider","value","DropdownMenuSeparator","DropdownMenuItemLabel","numberOfLines","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n\tcloneElement,\n\tisValidElement,\n\tuseCallback,\n} from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { check, chevronRightSmall } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\nimport type {\n\tDropdownMenuContext as DropdownMenuContextType,\n\tDropdownMenuProps,\n\tDropdownMenuGroupProps,\n\tDropdownMenuItemProps,\n\tDropdownMenuCheckboxItemProps,\n\tDropdownMenuRadioItemProps,\n\tDropdownMenuSeparatorProps,\n} from './types';\nimport * as Styled from './styles';\n\nexport const DropdownMenuContext = createContext<\n\tDropdownMenuContextType | undefined\n>( undefined );\n\nexport const DropdownMenuItem = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< DropdownMenuItemProps, 'div', false >\n>( function DropdownMenuItem(\n\t{ prefix, suffix, children, hideOnClick = true, ...props },\n\tref\n) {\n\tconst dropdownMenuContext = useContext( DropdownMenuContext );\n\n\treturn (\n\t\t<Styled.DropdownMenuItem\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\taccessibleWhenDisabled\n\t\t\thideOnClick={ hideOnClick }\n\t\t\tstore={ dropdownMenuContext?.store }\n\t\t>\n\t\t\t<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>\n\n\t\t\t<Styled.DropdownMenuItemContentWrapper>\n\t\t\t\t<Styled.DropdownMenuItemChildrenWrapper>\n\t\t\t\t\t{ children }\n\t\t\t\t</Styled.DropdownMenuItemChildrenWrapper>\n\n\t\t\t\t{ suffix && (\n\t\t\t\t\t<Styled.ItemSuffixWrapper>\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t</Styled.ItemSuffixWrapper>\n\t\t\t\t) }\n\t\t\t</Styled.DropdownMenuItemContentWrapper>\n\t\t</Styled.DropdownMenuItem>\n\t);\n} );\n\nexport const DropdownMenuCheckboxItem = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< DropdownMenuCheckboxItemProps, 'div', false >\n>( function DropdownMenuCheckboxItem(\n\t{ suffix, children, hideOnClick = false, ...props },\n\tref\n) {\n\tconst dropdownMenuContext = useContext( DropdownMenuContext );\n\n\treturn (\n\t\t<Styled.DropdownMenuCheckboxItem\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\taccessibleWhenDisabled\n\t\t\thideOnClick={ hideOnClick }\n\t\t\tstore={ dropdownMenuContext?.store }\n\t\t>\n\t\t\t<Ariakit.MenuItemCheck\n\t\t\t\tstore={ dropdownMenuContext?.store }\n\t\t\t\trender={ <Styled.ItemPrefixWrapper /> }\n\t\t\t\t// Override some ariakit inline styles\n\t\t\t\tstyle={ { width: 'auto', height: 'auto' } }\n\t\t\t>\n\t\t\t\t<Icon icon={ check } size={ 24 } />\n\t\t\t</Ariakit.MenuItemCheck>\n\n\t\t\t<Styled.DropdownMenuItemContentWrapper>\n\t\t\t\t<Styled.DropdownMenuItemChildrenWrapper>\n\t\t\t\t\t{ children }\n\t\t\t\t</Styled.DropdownMenuItemChildrenWrapper>\n\n\t\t\t\t{ suffix && (\n\t\t\t\t\t<Styled.ItemSuffixWrapper>\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t</Styled.ItemSuffixWrapper>\n\t\t\t\t) }\n\t\t\t</Styled.DropdownMenuItemContentWrapper>\n\t\t</Styled.DropdownMenuCheckboxItem>\n\t);\n} );\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\nexport const DropdownMenuRadioItem = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >\n>( function DropdownMenuRadioItem(\n\t{ suffix, children, hideOnClick = false, ...props },\n\tref\n) {\n\tconst dropdownMenuContext = useContext( DropdownMenuContext );\n\n\treturn (\n\t\t<Styled.DropdownMenuRadioItem\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\taccessibleWhenDisabled\n\t\t\thideOnClick={ hideOnClick }\n\t\t\tstore={ dropdownMenuContext?.store }\n\t\t>\n\t\t\t<Ariakit.MenuItemCheck\n\t\t\t\tstore={ dropdownMenuContext?.store }\n\t\t\t\trender={ <Styled.ItemPrefixWrapper /> }\n\t\t\t\t// Override some ariakit inline styles\n\t\t\t\tstyle={ { width: 'auto', height: 'auto' } }\n\t\t\t>\n\t\t\t\t<Icon icon={ radioCheck } size={ 24 } />\n\t\t\t</Ariakit.MenuItemCheck>\n\n\t\t\t<Styled.DropdownMenuItemContentWrapper>\n\t\t\t\t<Styled.DropdownMenuItemChildrenWrapper>\n\t\t\t\t\t{ children }\n\t\t\t\t</Styled.DropdownMenuItemChildrenWrapper>\n\n\t\t\t\t{ suffix && (\n\t\t\t\t\t<Styled.ItemSuffixWrapper>\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t</Styled.ItemSuffixWrapper>\n\t\t\t\t) }\n\t\t\t</Styled.DropdownMenuItemContentWrapper>\n\t\t</Styled.DropdownMenuRadioItem>\n\t);\n} );\n\nexport const DropdownMenuGroup = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< DropdownMenuGroupProps, 'div', false >\n>( function DropdownMenuGroup( props, ref ) {\n\tconst dropdownMenuContext = useContext( DropdownMenuContext );\n\treturn (\n\t\t<Styled.DropdownMenuGroup\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tstore={ dropdownMenuContext?.store }\n\t\t/>\n\t);\n} );\n\nconst UnconnectedDropdownMenu = (\n\tprops: WordPressComponentProps< DropdownMenuProps, 'div', false >,\n\tref: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst {\n\t\t// Store props\n\t\topen,\n\t\tdefaultOpen = false,\n\t\tonOpenChange,\n\t\tplacement,\n\n\t\t// Menu trigger props\n\t\ttrigger,\n\n\t\t// Menu props\n\t\tgutter,\n\t\tchildren,\n\t\tshift,\n\t\tmodal = true,\n\n\t\t// From internal components context\n\t\tvariant,\n\n\t\t// Rest\n\t\t...otherProps\n\t} = useContextSystem<\n\t\ttypeof props & Pick< DropdownMenuContextType, 'variant' >\n\t>( props, 'DropdownMenu' );\n\n\tconst parentContext = useContext( DropdownMenuContext );\n\n\tconst computedDirection = isRTL() ? 'rtl' : 'ltr';\n\n\t// If an explicit value for the `placement` prop is not passed,\n\t// apply a default placement of `bottom-start` for the root dropdown,\n\t// and of `right-start` for nested dropdowns.\n\tlet computedPlacement =\n\t\tprops.placement ??\n\t\t( parentContext?.store ? 'right-start' : 'bottom-start' );\n\t// Swap left/right in case of RTL direction\n\tif ( computedDirection === 'rtl' ) {\n\t\tif ( /right/.test( computedPlacement ) ) {\n\t\t\tcomputedPlacement = computedPlacement.replace(\n\t\t\t\t'right',\n\t\t\t\t'left'\n\t\t\t) as typeof computedPlacement;\n\t\t} else if ( /left/.test( computedPlacement ) ) {\n\t\t\tcomputedPlacement = computedPlacement.replace(\n\t\t\t\t'left',\n\t\t\t\t'right'\n\t\t\t) as typeof computedPlacement;\n\t\t}\n\t}\n\n\tconst dropdownMenuStore = Ariakit.useMenuStore( {\n\t\tparent: parentContext?.store,\n\t\topen,\n\t\tdefaultOpen,\n\t\tplacement: computedPlacement,\n\t\tfocusLoop: true,\n\t\tsetOpen( willBeOpen ) {\n\t\t\tonOpenChange?.( willBeOpen );\n\t\t},\n\t\trtl: computedDirection === 'rtl',\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( { store: dropdownMenuStore, variant } ),\n\t\t[ dropdownMenuStore, variant ]\n\t);\n\n\t// Extract the side from the applied placement — useful for animations.\n\tconst appliedPlacementSide = dropdownMenuStore\n\t\t.useState( 'placement' )\n\t\t.split( '-' )[ 0 ];\n\n\tif (\n\t\tdropdownMenuStore.parent &&\n\t\t! ( isValidElement( trigger ) && DropdownMenuItem === trigger.type )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.'\n\t\t);\n\t}\n\n\tconst hideOnEscape = useCallback(\n\t\t( event: React.KeyboardEvent< Element > ) => {\n\t\t\t// Pressing Escape can cause unexpected consequences (ie. exiting\n\t\t\t// full screen mode on MacOs, close parent modals...).\n\t\t\tevent.preventDefault();\n\t\t\t// Returning `true` causes the menu to hide.\n\t\t\treturn true;\n\t\t},\n\t\t[]\n\t);\n\n\tconst wrapperProps = useMemo(\n\t\t() => ( {\n\t\t\tdir: computedDirection,\n\t\t\tstyle: {\n\t\t\t\tdirection:\n\t\t\t\t\tcomputedDirection as React.CSSProperties[ 'direction' ],\n\t\t\t},\n\t\t} ),\n\t\t[ computedDirection ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Menu trigger */ }\n\t\t\t<Ariakit.MenuButton\n\t\t\t\tref={ ref }\n\t\t\t\tstore={ dropdownMenuStore }\n\t\t\t\trender={\n\t\t\t\t\tdropdownMenuStore.parent\n\t\t\t\t\t\t? cloneElement( trigger, {\n\t\t\t\t\t\t\t\t// Add submenu arrow, unless a `suffix` is explicitly specified\n\t\t\t\t\t\t\t\tsuffix: (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{ trigger.props.suffix }\n\t\t\t\t\t\t\t\t\t\t<Styled.SubmenuChevronIcon\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ chevronRightSmall }\n\t\t\t\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid slice\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t  } )\n\t\t\t\t\t\t: trigger\n\t\t\t\t}\n\t\t\t/>\n\n\t\t\t{ /* Menu popover */ }\n\t\t\t<Styled.DropdownMenu\n\t\t\t\t{ ...otherProps }\n\t\t\t\tmodal={ modal }\n\t\t\t\tstore={ dropdownMenuStore }\n\t\t\t\t// Root menu has an 8px distance from its trigger,\n\t\t\t\t// otherwise 0 (which causes the submenu to slightly overlap)\n\t\t\t\tgutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }\n\t\t\t\t// Align nested menu by the same (but opposite) amount\n\t\t\t\t// as the menu container's padding.\n\t\t\t\tshift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }\n\t\t\t\thideOnHoverOutside={ false }\n\t\t\t\tdata-side={ appliedPlacementSide }\n\t\t\t\tvariant={ variant }\n\t\t\t\twrapperProps={ wrapperProps }\n\t\t\t\thideOnEscape={ hideOnEscape }\n\t\t\t\tunmountOnHide\n\t\t\t>\n\t\t\t\t<DropdownMenuContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownMenuContext.Provider>\n\t\t\t</Styled.DropdownMenu>\n\t\t</>\n\t);\n};\nexport const DropdownMenu = contextConnect(\n\tUnconnectedDropdownMenu,\n\t'DropdownMenu'\n);\n\nexport const DropdownMenuSeparator = forwardRef<\n\tHTMLHRElement,\n\tWordPressComponentProps< DropdownMenuSeparatorProps, 'hr', false >\n>( function DropdownMenuSeparator( props, ref ) {\n\tconst dropdownMenuContext = useContext( DropdownMenuContext );\n\treturn (\n\t\t<Styled.DropdownMenuSeparator\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tstore={ dropdownMenuContext?.store }\n\t\t\tvariant={ dropdownMenuContext?.variant }\n\t\t/>\n\t);\n} );\n\nexport const DropdownMenuItemLabel = forwardRef<\n\tHTMLSpanElement,\n\tWordPressComponentProps< { children: React.ReactNode }, 'span', true >\n>( function DropdownMenuItemLabel( props, ref ) {\n\treturn (\n\t\t<Styled.DropdownMenuItemLabel\n\t\t\tnumberOfLines={ 1 }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n} );\n\nexport const DropdownMenuItemHelpText = forwardRef<\n\tHTMLSpanElement,\n\tWordPressComponentProps< { children: React.ReactNode }, 'span', true >\n>( function DropdownMenuItemHelpText( props, ref ) {\n\treturn (\n\t\t<Styled.DropdownMenuItemHelpText\n\t\t\tnumberOfLines={ 2 }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n} );\n"],"mappings":"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"}