@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

package/build/dropdown/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/dropdown/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/dropdown/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type Popover from '../popover';\nimport type { PopoverProps } from '../popover/types';\n\ntype CallbackProps = {\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n};\n\nexport type DropdownContentWrapperProps = {\n\t/**\n\t * Amount of padding to apply on the dropdown content.\n\t *\n\t * @default 'small'\n\t */\n\tpaddingSize?: 'none' | 'small' | 'medium';\n};\n\nexport type DropdownProps = {\n\t/**\n\t * The className of the global container.\n\t */\n\tclassName?: string;\n\t/**\n\t * If you want to target the dropdown menu for styling purposes,\n\t * you need to provide a contentClassName because it's not being rendered\n\t * as a child of the container node.\n\t */\n\tcontentClassName?: string;\n\t/**\n\t * Opt-in prop to show popovers fullscreen on mobile.\n\t *\n\t * @default false\n\t */\n\texpandOnMobile?: boolean;\n\t/**\n\t * By default, the first tabbable element in the popover will receive focus\n\t * when it mounts. This is the same as setting this prop to \"firstElement\".\n\t * Specifying a true value will focus the container instead.\n\t * Specifying a false value disables the focus handling entirely\n\t * (this should only be done when an appropriately accessible\n\t * substitute behavior exists).\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: 'firstElement' | boolean;\n\t/**\n\t * Set this to customize the text that is shown in the dropdown's header\n\t * when it is fullscreen on mobile.\n\t */\n\theaderTitle?: string;\n\t/**\n\t * A callback invoked when the popover should be closed.\n\t */\n\tonClose?: () => void;\n\t/**\n\t * A callback invoked when the state of the dropdown changes\n\t * from open to closed and vice versa.\n\t */\n\tonToggle?: ( willOpen: boolean ) => void;\n\t/**\n\t * Properties of popoverProps object will be passed as props\n\t * to the Popover component.\n\t * Use this object to access properties/features\n\t * of the Popover component that are not already exposed\n\t * in the Dropdown component,\n\t * e.g.: the ability to have the popover without an arrow.\n\t */\n\tpopoverProps?: Omit<\n\t\tComponentPropsWithoutRef< typeof Popover >,\n\t\t'children'\n\t>;\n\t/**\n\t * A callback invoked to render the content of the dropdown menu.\n\t * Its first argument is the same as the renderToggle prop.\n\t */\n\trenderContent: ( props: CallbackProps ) => ReactNode;\n\t/**\n\t * A callback invoked to render the Dropdown Toggle Button.\n\t *\n\t * The first argument of the callback is an object\n\t * containing the following properties:\n\t *\n\t * - isOpen: whether the dropdown menu is opened or not\n\t * - onToggle: A function switching the dropdown menu's state\n\t * from open to closed and vice versa\n\t * - onClose: A function that closes the menu if invoked\n\t */\n\trenderToggle: ( props: CallbackProps ) => ReactNode;\n\t/**\n\t * The style of the global container.\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * Legacy way to specify the popover's position with respect to its anchor.\n\t * For details about the possible values, see the `Popover` component's docs.\n\t * _Note: this prop is deprecated. Use the `popoverProps.placement` prop\n\t * instead._\n\t *\n\t * @deprecated\n\t */\n\tposition?: PopoverProps[ 'position' ];\n\t/**\n\t * The controlled open state of the dropdown.\n\t * Must be used in conjunction with `onToggle`.\n\t */\n\topen?: boolean;\n\t/**\n\t * The open state of the dropdown when initially rendered.\n\t * Use when you do not need to control its open state. It will be overridden\n\t * by the `open` prop if it is specified on the component's first render.\n\t */\n\tdefaultOpen?: boolean;\n};\n\nexport type DropdownInternalContext = {\n\t/**\n\t * This variant can be used to change the appearance of the component in\n\t * specific contexts, ie. when rendered inside the `Toolbar` component.\n\t */\n\tvariant?: 'toolbar';\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/dropdown/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/dropdown-menu/index.js

@@ -1,48 +1,63 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dropdown_menu_exports = {};
+__export(dropdown_menu_exports, {
+  DropdownMenu: () => DropdownMenu,
+  default: () => dropdown_menu_default
 });
-exports.default = exports.DropdownMenu = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _icons = require("@wordpress/icons");
-var _context = require("../context");
-var _button = _interopRequireDefault(require("../button"));
-var _dropdown = _interopRequireDefault(require("../dropdown"));
-var _navigableContainer = require("../navigable-container");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(dropdown_menu_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_icons = require("@wordpress/icons");
+var import_context = require("../context");
+var import_button = __toESM(require("../button"));
+var import_dropdown = __toESM(require("../dropdown"));
+var import_navigable_container = require("../navigable-container");
+var import_jsx_runtime = require("react/jsx-runtime");
 function mergeProps(defaultProps = {}, props = {}) {
   const mergedProps = {
     ...defaultProps,
     ...props
   };
   if (props.className && defaultProps.className) {
-    mergedProps.className = (0, _clsx.default)(props.className, defaultProps.className);
+    mergedProps.className = (0, import_clsx.default)(props.className, defaultProps.className);
   }
   return mergedProps;
 }
 function isFunction(maybeFunc) {
-  return typeof maybeFunc === 'function';
+  return typeof maybeFunc === "function";
 }
 function UnconnectedDropdownMenu(dropdownMenuProps) {
   const {
     children,
     className,
     controls,
-    icon = _icons.menu,
+    icon = import_icons.menu,
     label,
     popoverProps,
     toggleProps,
@@ -55,63 +70,57 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
     onToggle: onToggleProp,
     // Context
     variant
-  } = (0, _context.useContextSystem)(dropdownMenuProps, 'DropdownMenu');
+  } = (0, import_context.useContextSystem)(dropdownMenuProps, "DropdownMenu");
   if (!controls?.length && !isFunction(children)) {
     return null;
   }
-
-  // Normalize controls to nested array of objects (sets of controls)
   let controlSets;
   if (controls?.length) {
-    // @ts-expect-error The check below is needed because `DropdownMenus`
-    // rendered by `ToolBarGroup` receive controls as a nested array.
     controlSets = controls;
     if (!Array.isArray(controlSets[0])) {
-      // This is not ideal, but at this point we know that `controls` is
-      // not a nested array, even if TypeScript doesn't.
       controlSets = [controls];
     }
   }
   const mergedPopoverProps = mergeProps({
-    className: 'components-dropdown-menu__popover',
+    className: "components-dropdown-menu__popover",
     variant
   }, popoverProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
-    className: className,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.default, {
+    className,
     popoverProps: mergedPopoverProps,
     renderToggle: ({
       isOpen,
       onToggle
     }) => {
       var _toggleProps$showTool;
-      const openOnArrowDown = event => {
+      const openOnArrowDown = (event) => {
         if (disableOpenOnArrowDown) {
           return;
         }
-        if (!isOpen && event.code === 'ArrowDown') {
+        if (!isOpen && event.code === "ArrowDown") {
           event.preventDefault();
           onToggle();
         }
       };
       const {
-        as: Toggle = _button.default,
+        as: Toggle = import_button.default,
         ...restToggleProps
       } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
       const mergedToggleProps = mergeProps({
-        className: (0, _clsx.default)('components-dropdown-menu__toggle', {
-          'is-opened': isOpen
+        className: (0, import_clsx.default)("components-dropdown-menu__toggle", {
+          "is-opened": isOpen
         })
       }, restToggleProps);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Toggle, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
         ...mergedToggleProps,
-        icon: icon,
-        onClick: event => {
+        icon,
+        onClick: (event) => {
           onToggle();
           if (mergedToggleProps.onClick) {
             mergedToggleProps.onClick(event);
           }
         },
-        onKeyDown: event => {
+        onKeyDown: (event) => {
           openOnArrowDown(event);
           if (mergedToggleProps.onKeyDown) {
             mergedToggleProps.onKeyDown(event);
@@ -119,132 +128,55 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
         },
         "aria-haspopup": "true",
         "aria-expanded": isOpen,
-        label: label,
-        text: text,
+        label,
+        text,
         showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true,
         children: mergedToggleProps.children
       });
     },
-    renderContent: props => {
+    renderContent: (props) => {
       const mergedMenuProps = mergeProps({
-        'aria-label': label,
-        className: (0, _clsx.default)('components-dropdown-menu__menu', {
-          'no-icons': noIcons
+        "aria-label": label,
+        className: (0, import_clsx.default)("components-dropdown-menu__menu", {
+          "no-icons": noIcons
         })
       }, menuProps);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigableContainer.NavigableMenu, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigable_container.NavigableMenu, {
         ...mergedMenuProps,
         role: "menu",
-        children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
           __next40pxDefaultSize: true,
-          onClick: event => {
+          onClick: (event) => {
             event.stopPropagation();
             props.onClose();
             if (control.onClick) {
               control.onClick();
             }
           },
-          className: (0, _clsx.default)('components-dropdown-menu__menu-item', {
-            'has-separator': indexOfSet > 0 && indexOfControl === 0,
-            'is-active': control.isActive,
-            'is-icon-only': !control.title
+          className: (0, import_clsx.default)("components-dropdown-menu__menu-item", {
+            "has-separator": indexOfSet > 0 && indexOfControl === 0,
+            "is-active": control.isActive,
+            "is-icon-only": !control.title
           }),
           icon: control.icon,
           label: control.label,
-          "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,
-          role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',
+          "aria-checked": control.role === "menuitemcheckbox" || control.role === "menuitemradio" ? control.isActive : void 0,
+          role: control.role === "menuitemcheckbox" || control.role === "menuitemradio" ? control.role : "menuitem",
           accessibleWhenDisabled: true,
           disabled: control.isDisabled,
           children: control.title
         }, [indexOfSet, indexOfControl].join())))]
       });
     },
-    open: open,
-    defaultOpen: defaultOpen,
+    open,
+    defaultOpen,
     onToggle: onToggleProp
   });
 }
-
-/**
- *
- * The DropdownMenu displays a list of actions (each contained in a MenuItem,
- * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
- * after the user has interacted with an element (a button or icon) or when
- * they perform a specific action.
- *
- * Render a Dropdown Menu with a set of controls:
- *
- * ```jsx
- * import { DropdownMenu } from '@wordpress/components';
- * import {
- * 	more,
- * 	arrowLeft,
- * 	arrowRight,
- * 	arrowUp,
- * 	arrowDown,
- * } from '@wordpress/icons';
- *
- * const MyDropdownMenu = () => (
- * 	<DropdownMenu
- * 		icon={ more }
- * 		label="Select a direction"
- * 		controls={ [
- * 			{
- * 				title: 'Up',
- * 				icon: arrowUp,
- * 				onClick: () => console.log( 'up' ),
- * 			},
- * 			{
- * 				title: 'Right',
- * 				icon: arrowRight,
- * 				onClick: () => console.log( 'right' ),
- * 			},
- * 			{
- * 				title: 'Down',
- * 				icon: arrowDown,
- * 				onClick: () => console.log( 'down' ),
- * 			},
- * 			{
- * 				title: 'Left',
- * 				icon: arrowLeft,
- * 				onClick: () => console.log( 'left' ),
- * 			},
- * 		] }
- * 	/>
- * );
- * ```
- *
- * Alternatively, specify a `children` function which returns elements valid for
- * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
- *
- * ```jsx
- * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
- * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
- *
- * const MyDropdownMenu = () => (
- * 	<DropdownMenu icon={ more } label="Select a direction">
- * 		{ ( { onClose } ) => (
- * 			<>
- * 				<MenuGroup>
- * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
- * 						Move Up
- * 					</MenuItem>
- * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
- * 						Move Down
- * 					</MenuItem>
- * 				</MenuGroup>
- * 				<MenuGroup>
- * 					<MenuItem icon={ trash } onClick={ onClose }>
- * 						Remove
- * 					</MenuItem>
- * 				</MenuGroup>
- * 			</>
- * 		) }
- * 	</DropdownMenu>
- * );
- * ```
- *
- */
-const DropdownMenu = exports.DropdownMenu = (0, _context.contextConnectWithoutRef)(UnconnectedDropdownMenu, 'DropdownMenu');
-var _default = exports.default = DropdownMenu;
-//# sourceMappingURL=index.js.map
+const DropdownMenu = (0, import_context.contextConnectWithoutRef)(UnconnectedDropdownMenu, "DropdownMenu");
+var dropdown_menu_default = DropdownMenu;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DropdownMenu
+});
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_context","_button","_dropdown","_navigableContainer","_jsxRuntime","mergeProps","defaultProps","props","mergedProps","className","clsx","isFunction","maybeFunc","UnconnectedDropdownMenu","dropdownMenuProps","children","controls","icon","menu","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","open","defaultOpen","onToggle","onToggleProp","variant","useContextSystem","length","controlSets","Array","isArray","mergedPopoverProps","jsx","default","renderToggle","isOpen","_toggleProps$showTool","openOnArrowDown","event","code","preventDefault","as","Toggle","Button","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","renderContent","mergedMenuProps","jsxs","NavigableMenu","role","flatMap","controlSet","indexOfSet","map","control","indexOfControl","__next40pxDefaultSize","stopPropagation","onClose","isActive","title","undefined","accessibleWhenDisabled","disabled","isDisabled","join","DropdownMenu","exports","contextConnectWithoutRef","_default"],"sources":["@wordpress/components/src/dropdown-menu/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport type {\n\tDropdownMenuProps,\n\tDropdownOption,\n\tDropdownMenuInternalContext,\n} from './types';\n\nfunction mergeProps<\n\tT extends { className?: string; [ key: string ]: unknown },\n>( defaultProps: Partial< T > = {}, props: T = {} as T ) {\n\tconst mergedProps: T = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = clsx( props.className, defaultProps.className );\n\t}\n\n\treturn mergedProps;\n}\n\nfunction isFunction( maybeFunc: unknown ): maybeFunc is () => void {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\n\t\topen,\n\t\tdefaultOpen,\n\t\tonToggle: onToggleProp,\n\n\t\t// Context\n\t\tvariant,\n\t} = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(\n\t\tdropdownMenuProps,\n\t\t'DropdownMenu'\n\t);\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: DropdownOption[][];\n\tif ( controls?.length ) {\n\t\t// @ts-expect-error The check below is needed because `DropdownMenus`\n\t\t// rendered by `ToolBarGroup` receive controls as a nested array.\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\t// This is not ideal, but at this point we know that `controls` is\n\t\t\t// not a nested array, even if TypeScript doesn't.\n\t\t\tcontrolSets = [ controls as DropdownOption[] ];\n\t\t}\n\t}\n\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t\tvariant,\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ className }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event: React.KeyboardEvent ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: clsx( 'components-dropdown-menu__toggle', {\n\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.MouseEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.KeyboardEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: clsx( 'components-dropdown-menu__menu', {\n\t\t\t\t\t\t\t'no-icons': noIcons,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\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\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\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\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t\topen={ open }\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\tonToggle={ onToggleProp }\n\t\t/>\n\t);\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\nexport const DropdownMenu = contextConnectWithoutRef(\n\tUnconnectedDropdownMenu,\n\t'DropdownMenu'\n);\n\nexport default DropdownMenu;\n"],"mappings":"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K,kBAAkB,IACnCK,OAAO,CAACL,IAAI,KAAK,eAAe,GAC7BK,OAAO,CAACK,QAAQ,GAChBE,SACH;UACDZ,IAAI,EACHK,OAAO,CAACL,IAAI,KAAK,kBAAkB,IACnCK,OAAO,CAACL,IAAI,KAAK,eAAe,GAC7BK,OAAO,CAACL,IAAI,GACZ,UACH;UACDa,sBAAsB;UACtBC,QAAQ,EAAGT,OAAO,CAACU,UAAY;UAAA1D,QAAA,EAE7BgD,OAAO,CAACM;QAAK,GAxCT,CACLR,UAAU,EACVG,cAAc,CACd,CAACU,IAAI,CAAC,CAsCA,CACP,CACH,CAAC;MAAA,CACa,CAAC;IAElB,CAAG;IACHhD,IAAI,EAAGA,IAAM;IACbC,WAAW,EAAGA,WAAa;IAC3BC,QAAQ,EAAGC;EAAc,CACzB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM8C,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,iCAAwB,EACnDhE,uBAAuB,EACvB,cACD,CAAC;AAAC,IAAAiE,QAAA,GAAAF,OAAA,CAAAtC,OAAA,GAEaqC,YAAY","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/dropdown-menu/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction mergeProps(defaultProps = {}, props = {}) {\n  const mergedProps = {\n    ...defaultProps,\n    ...props\n  };\n  if (props.className && defaultProps.className) {\n    mergedProps.className = clsx(props.className, defaultProps.className);\n  }\n  return mergedProps;\n}\nfunction isFunction(maybeFunc) {\n  return typeof maybeFunc === 'function';\n}\nfunction UnconnectedDropdownMenu(dropdownMenuProps) {\n  const {\n    children,\n    className,\n    controls,\n    icon = menu,\n    label,\n    popoverProps,\n    toggleProps,\n    menuProps,\n    disableOpenOnArrowDown = false,\n    text,\n    noIcons,\n    open,\n    defaultOpen,\n    onToggle: onToggleProp,\n    // Context\n    variant\n  } = useContextSystem(dropdownMenuProps, 'DropdownMenu');\n  if (!controls?.length && !isFunction(children)) {\n    return null;\n  }\n\n  // Normalize controls to nested array of objects (sets of controls)\n  let controlSets;\n  if (controls?.length) {\n    // @ts-expect-error The check below is needed because `DropdownMenus`\n    // rendered by `ToolBarGroup` receive controls as a nested array.\n    controlSets = controls;\n    if (!Array.isArray(controlSets[0])) {\n      // This is not ideal, but at this point we know that `controls` is\n      // not a nested array, even if TypeScript doesn't.\n      controlSets = [controls];\n    }\n  }\n  const mergedPopoverProps = mergeProps({\n    className: 'components-dropdown-menu__popover',\n    variant\n  }, popoverProps);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    className: className,\n    popoverProps: mergedPopoverProps,\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => {\n      var _toggleProps$showTool;\n      const openOnArrowDown = event => {\n        if (disableOpenOnArrowDown) {\n          return;\n        }\n        if (!isOpen && event.code === 'ArrowDown') {\n          event.preventDefault();\n          onToggle();\n        }\n      };\n      const {\n        as: Toggle = Button,\n        ...restToggleProps\n      } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};\n      const mergedToggleProps = mergeProps({\n        className: clsx('components-dropdown-menu__toggle', {\n          'is-opened': isOpen\n        })\n      }, restToggleProps);\n      return /*#__PURE__*/_jsx(Toggle, {\n        ...mergedToggleProps,\n        icon: icon,\n        onClick: event => {\n          onToggle();\n          if (mergedToggleProps.onClick) {\n            mergedToggleProps.onClick(event);\n          }\n        },\n        onKeyDown: event => {\n          openOnArrowDown(event);\n          if (mergedToggleProps.onKeyDown) {\n            mergedToggleProps.onKeyDown(event);\n          }\n        },\n        \"aria-haspopup\": \"true\",\n        \"aria-expanded\": isOpen,\n        label: label,\n        text: text,\n        showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true,\n        children: mergedToggleProps.children\n      });\n    },\n    renderContent: props => {\n      const mergedMenuProps = mergeProps({\n        'aria-label': label,\n        className: clsx('components-dropdown-menu__menu', {\n          'no-icons': noIcons\n        })\n      }, menuProps);\n      return /*#__PURE__*/_jsxs(NavigableMenu, {\n        ...mergedMenuProps,\n        role: \"menu\",\n        children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/_jsx(Button, {\n          __next40pxDefaultSize: true,\n          onClick: event => {\n            event.stopPropagation();\n            props.onClose();\n            if (control.onClick) {\n              control.onClick();\n            }\n          },\n          className: clsx('components-dropdown-menu__menu-item', {\n            'has-separator': indexOfSet > 0 && indexOfControl === 0,\n            'is-active': control.isActive,\n            'is-icon-only': !control.title\n          }),\n          icon: control.icon,\n          label: control.label,\n          \"aria-checked\": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,\n          role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',\n          accessibleWhenDisabled: true,\n          disabled: control.isDisabled,\n          children: control.title\n        }, [indexOfSet, indexOfControl].join())))]\n      });\n    },\n    open: open,\n    defaultOpen: defaultOpen,\n    onToggle: onToggleProp\n  });\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\nexport const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');\nexport default DropdownMenu;"],
+  "mappings": "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",
+  "names": ["clsx", "_jsx", "Dropdown", "Button", "_jsxs"]
+}

package/build/dropdown-menu/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/dropdown-menu/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/dropdown-menu/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { HTMLAttributes, ReactNode } from 'react';\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { Props as IconProps } from '../icon';\nimport type { NavigableMenuProps } from '../navigable-container/types';\n\nexport type DropdownOption = {\n\t/**\n\t * The icon to be shown for the option.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * A human-readable title to display for the option.\n\t */\n\ttitle: string;\n\t/**\n\t * Whether or not the option is disabled.\n\t *\n\t * @default false\n\t */\n\tisDisabled?: boolean;\n\t/**\n\t * A callback function to invoke when the option is selected.\n\t */\n\tonClick?: ( event?: React.MouseEvent ) => void;\n\t/**\n\t * Whether or not the control is currently active.\n\t */\n\tisActive?: boolean;\n\t/**\n\t * Text to use for the internal `Button` component's tooltip.\n\t */\n\tlabel?: string;\n\t/**\n\t * The role to apply to the option's HTML element\n\t */\n\trole?: HTMLAttributes< HTMLElement >[ 'role' ];\n};\n\ntype DropdownCallbackProps = {\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n};\n\n// Manually including `as` prop because `WordPressComponentProps` polymorphism\n// creates a union that is too large for TypeScript to handle.\ntype ToggleProps = Partial<\n\tOmit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'label' | 'text'\n\t>\n> & {\n\tas?: React.ElementType | keyof JSX.IntrinsicElements;\n\t'data-toolbar-item'?: boolean;\n};\n\nexport type DropdownMenuProps = {\n\t/**\n\t * The icon to be shown in the collapsed menu button.\n\t *\n\t * @default \"menu\"\n\t */\n\ticon?: IconProps[ 'icon' ] | null;\n\t/**\n\t * A human-readable label to present as accessibility text on the focused\n\t * collapsed menu button.\n\t */\n\tlabel: string;\n\t/**\n\t * A class name to apply to the dropdown menu's toggle element wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * Properties of `popoverProps` object will be passed as props to the nested\n\t * `Popover` component.\n\t * Use this object to modify props available for the `Popover` component that\n\t * are not already exposed in the `DropdownMenu` component, e.g.: the\n\t * direction in which the popover should open relative to its parent node\n\t * set with `position` prop.\n\t */\n\tpopoverProps?: DropdownProps[ 'popoverProps' ];\n\t/**\n\t * Properties of `toggleProps` object will be passed as props to the nested\n\t * `Button` component in the `renderToggle` implementation of the `Dropdown`\n\t * component used internally.\n\t * Use this object to modify props available for the `Button` component that\n\t * are not already exposed in the `DropdownMenu` component, e.g.: the tooltip\n\t * text displayed on hover set with `tooltip` prop.\n\t */\n\ttoggleProps?: ToggleProps;\n\t/**\n\t * Properties of `menuProps` object will be passed as props to the nested\n\t * `NavigableMenu` component in the `renderContent` implementation of the\n\t * `Dropdown` component used internally.\n\t * Use this object to modify props available for the `NavigableMenu`\n\t * component that are not already exposed in the `DropdownMenu` component,\n\t * e.g.: the orientation of the menu set with `orientation` prop.\n\t */\n\tmenuProps?: Omit< Partial< NavigableMenuProps >, 'children' >;\n\t/**\n\t * In some contexts, the arrow down key used to open the dropdown menu might\n\t * need to be disabled—for example when that key is used to perform another\n\t * action.\n\t *\n\t * @default false\n\t */\n\tdisableOpenOnArrowDown?: boolean;\n\t/**\n\t * Text to display on the nested `Button` component in the `renderToggle`\n\t * implementation of the `Dropdown` component used internally.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether or not `no-icons` should be added to the menu's `className`.\n\t */\n\tnoIcons?: boolean;\n\t/**\n\t * A [function render prop](https://reactjs.org/docs/render-props.html#using-props-other-than-render)\n\t * which should return an element or elements valid for use in a DropdownMenu:\n\t * `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. Its first argument is a\n\t * props object including the same values as given to a `Dropdown`'s\n\t * `renderContent` (`isOpen`, `onToggle`, `onClose`).\n\t *\n\t * A valid DropdownMenu must specify a `controls` or `children` prop, or both.\n\t */\n\tchildren?: ( callbackProps: DropdownCallbackProps ) => ReactNode;\n\t/**\n\t * An array or nested array of objects describing the options to be shown in\n\t * the expanded menu. Each object should include an `icon` Dashicon slug\n\t * string, a human-readable `title` string, `isDisabled` boolean flag, and\n\t * an `onClick` function callback to invoke when the option is selected.\n\t *\n\t * A valid DropdownMenu must specify a `controls` or `children` prop, or both.\n\t */\n\tcontrols?: DropdownOption[] | DropdownOption[][];\n\t/**\n\t * The controlled open state of the dropdown menu.\n\t * Must be used in conjunction with `onToggle`.\n\t */\n\topen?: boolean;\n\t/**\n\t * The open state of the dropdown menu when initially rendered.\n\t * Use when you do not need to control its open state. It will be overridden\n\t * by the `open` prop if it is specified on the component's first render.\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * A callback invoked when the state of the dropdown menu changes\n\t * from open to closed and vice versa.\n\t */\n\tonToggle?: ( willOpen: boolean ) => void;\n};\n\nexport type DropdownMenuInternalContext = {\n\t/**\n\t * This variant can be used to change the appearance of the component in\n\t * specific contexts, ie. when rendered inside the `Toolbar` component.\n\t */\n\tvariant?: 'toolbar';\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/dropdown-menu/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/duotone-picker/color-list-picker/index.js

@@ -1,27 +1,45 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_list_picker_exports = {};
+__export(color_list_picker_exports, {
+  default: () => color_list_picker_default
 });
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _i18n = require("@wordpress/i18n");
-var _button = _interopRequireDefault(require("../../button"));
-var _colorPalette = _interopRequireDefault(require("../../color-palette"));
-var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
-var _icon = _interopRequireDefault(require("../../icon"));
-var _compose = require("@wordpress/compose");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(color_list_picker_exports);
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_i18n = require("@wordpress/i18n");
+var import_button = __toESM(require("../../button"));
+var import_color_palette = __toESM(require("../../color-palette"));
+var import_color_indicator = __toESM(require("../../color-indicator"));
+var import_icon = __toESM(require("../../icon"));
+var import_compose = require("@wordpress/compose");
+var import_jsx_runtime = require("react/jsx-runtime");
 function ColorOption({
   label,
   value,
@@ -30,39 +48,39 @@ function ColorOption({
   enableAlpha,
   onChange
 }) {
-  const [isOpen, setIsOpen] = (0, _element.useState)(false);
-  const idRoot = (0, _compose.useInstanceId)(ColorOption, 'color-list-picker-option');
+  const [isOpen, setIsOpen] = (0, import_element.useState)(false);
+  const idRoot = (0, import_compose.useInstanceId)(ColorOption, "color-list-picker-option");
   const labelId = `${idRoot}__label`;
   const contentId = `${idRoot}__content`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
       __next40pxDefaultSize: true,
       className: "components-color-list-picker__swatch-button",
       id: labelId,
-      onClick: () => setIsOpen(prev => !prev),
+      onClick: () => setIsOpen((prev) => !prev),
       "aria-expanded": isOpen,
       "aria-controls": contentId,
-      icon: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_indicator.default, {
         colorValue: value,
         className: "components-color-list-picker__swatch-color"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
-        icon: _icons.swatch
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.default, {
+        icon: import_icons.swatch
       }),
       text: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       role: "group",
       id: contentId,
       "aria-labelledby": labelId,
       "aria-hidden": !isOpen,
-      children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.default, {
-        "aria-label": (0, _i18n.__)('Color options'),
+      children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
+        "aria-label": (0, import_i18n.__)("Color options"),
         className: "components-color-list-picker__color-picker",
-        colors: colors,
-        value: value,
+        colors,
+        value,
         clearable: false,
-        onChange: onChange,
-        disableCustomColors: disableCustomColors,
-        enableAlpha: enableAlpha
+        onChange,
+        disableCustomColors,
+        enableAlpha
       })
     })]
   });
@@ -75,15 +93,15 @@ function ColorListPicker({
   enableAlpha,
   onChange
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: "components-color-list-picker",
-    children: labels.map((label, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorOption, {
-      label: label,
+    children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorOption, {
+      label,
       value: value[index],
-      colors: colors,
-      disableCustomColors: disableCustomColors,
-      enableAlpha: enableAlpha,
-      onChange: newColor => {
+      colors,
+      disableCustomColors,
+      enableAlpha,
+      onChange: (newColor) => {
         const newColors = value.slice();
         newColors[index] = newColor;
         onChange(newColors);
@@ -91,5 +109,5 @@ function ColorListPicker({
     }, index))
   });
 }
-var _default = exports.default = ColorListPicker;
-//# sourceMappingURL=index.js.map
+var color_list_picker_default = ColorListPicker;
+//# sourceMappingURL=index.js.map