@wordpress/components 24.0.0 → 25.0.0

package/build-style/style.css

@@ -96,7 +96,7 @@
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -310,16 +310,11 @@
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
-  background: var(--wp-components-color-gray-300, #ddd);
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: none;
 }
-.components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
-}
 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
-  color: #828282;
-  background: #eaeaea;
+  color: #949494;
+  background: transparent;
   transform: none;
   opacity: 1;
   box-shadow: none;
@@ -340,10 +335,10 @@
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
 }
-.components-button.is-tertiary:hover:not(:disabled) {
+.components-button.is-tertiary:hover:not(:disabled, [aria-disabled=true]) {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.components-button.is-tertiary:active:not(:disabled) {
+.components-button.is-tertiary:active:not(:disabled, [aria-disabled=true]) {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
 .components-button.is-tertiary .dashicon {
@@ -396,7 +391,7 @@ p + .components-button.is-tertiary {
 .components-button.is-link:focus {
   border-radius: 2px;
 }
-.components-button:not([aria-disabled=true]):active {
+.components-button:not(:disabled, [aria-disabled=true]):active {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
@@ -2734,7 +2729,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
 See https://bugs.webkit.org/show_bug.cgi?id=187903. */
-@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+@media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {
     .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
@@ -2888,10 +2883,12 @@ body.lockscroll {
 .components-search-control__icon {
   position: absolute;
   top: 0;
+  width: 24px;
   right: 12px;
   bottom: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .components-search-control__icon > svg {
   margin: 8px 0;
@@ -3405,11 +3402,11 @@ div.components-toolbar > div + div.has-left-divider::before {
 }
 
 .components-tooltip .components-popover__content {
-  background: var(--wp-components-color-foreground, #1e1e1e);
+  background: #000;
   border-radius: 2px;
   border-width: 0;
   outline: none;
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: #f0f0f0;
   white-space: nowrap;
   text-align: center;
   line-height: 1.4;

package/build-types/color-picker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/styles.ts"],"names":[],"mappings":";AAsBA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;UAIhC,CAAC;AAEF,eAAO,MAAM,aAAa;;UAMzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGxB,CAAC;AASF,eAAO,MAAM,6BAA6B;;;yGAKzC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;;UAG9C,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;UAK7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGA6C3B,CAAC;AAEF,eAAO,MAAM,UAAU;;UAStB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/styles.ts"],"names":[],"mappings":";AAsBA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;UAIhC,CAAC;AAEF,eAAO,MAAM,aAAa;;UAWzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGxB,CAAC;AASF,eAAO,MAAM,6BAA6B;;;yGAKzC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;;UAG9C,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;UAK7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGA6C3B,CAAC;AAEF,eAAO,MAAM,UAAU;;UAStB,CAAC"}

package/build-types/date-time/date-time/index.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * Internal dependencies
+ */
 import { default as DatePicker } from '../date';
 import { default as TimePicker } from '../time';
 export { DatePicker, TimePicker };
@@ -19,8 +22,6 @@ export { DatePicker, TimePicker };
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
  *       is12Hour
- *       __nextRemoveHelpButton
- *       __nextRemoveResetButton
  *     />
  *   );
  * };
@@ -28,8 +29,6 @@ export { DatePicker, TimePicker };
  */
 export declare const DateTimePicker: import("react").ForwardRefExoticComponent<Omit<import("../types").DatePickerProps, "onChange"> & Omit<import("../types").TimePickerProps, "onChange" | "currentTime"> & {
     onChange?: ((date: string | null) => void) | undefined;
-    __nextRemoveHelpButton?: boolean | undefined;
-    __nextRemoveResetButton?: boolean | undefined;
 } & import("react").RefAttributes<any>>;
 export default DateTimePicker;
 //# sourceMappingURL=index.d.ts.map

package/build-types/date-time/date-time/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-time/date-time/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,SAAS,CAAC;AAOhD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AAwKlC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,cAAc;;;;uCAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-time/date-time/index.tsx"],"names":[],"mappings":";AAWA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,SAAS,CAAC;AAIhD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AAqClC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,cAAc;;uCAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}

package/build-types/date-time/date-time/styles.d.ts

@@ -7,8 +7,4 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<Omit<imp
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const CalendarHelp: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/date-time/date-time/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/date-time/date-time/styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,OAAO;;;;;;;UAEnB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAExB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/date-time/date-time/styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,OAAO;;;;;;;UAEnB,CAAC"}

package/build-types/date-time/stories/date-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-time.d.ts","sourceRoot":"","sources":["../../../src/date-time/stories/date-time.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,cAAc,MAAM,cAAc,CAAC;AAG1C,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,cAAc,CAW/C,CAAC;AACF,eAAe,IAAI,CAAC;AAuBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,cAAc,CAE1D,CAAC;AAMF,eAAO,MAAM,UAAU,EAAE,cAAc,CAAE,OAAO,cAAc,CAC1C,CAAC;AAWrB,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAE,OAAO,cAAc,CAChD,CAAC"}
+{"version":3,"file":"date-time.d.ts","sourceRoot":"","sources":["../../../src/date-time/stories/date-time.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,cAAc,MAAM,cAAc,CAAC;AAG1C,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,cAAc,CAW/C,CAAC;AACF,eAAe,IAAI,CAAC;AAuBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,cAAc,CAE1D,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAAc,CAAE,OAAO,cAAc,CAC1C,CAAC;AAWrB,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAE,OAAO,cAAc,CAChD,CAAC"}

package/build-types/date-time/types.d.ts

@@ -62,19 +62,5 @@ export type DateTimePickerProps = Omit<DatePickerProps, 'onChange'> & Omit<TimeP
      * passed the date and time as an argument.
      */
     onChange?: (date: string | null) => void;
-    /**
-     * Start opting in to not displaying a Help button which will become the
-     * default in a future version.
-     *
-     * @default false
-     */
-    __nextRemoveHelpButton?: boolean;
-    /**
-     * Start opting in to not displaying a Reset button which will become
-     * the default in a future version.
-     *
-     * @default false
-     */
-    __nextRemoveResetButton?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/date-time/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/date-time/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAE5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAEpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IAE1C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAE5C;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAE3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAE,eAAe,EAAE,UAAU,CAAE,GACpE,IAAI,CAAE,eAAe,EAAE,aAAa,GAAG,UAAU,CAAE,GAAG;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,GAAG,IAAI,KAAM,IAAI,CAAC;IAE3C;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/date-time/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAE5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAEpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IAE1C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAE5C;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAE3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAE,eAAe,EAAE,UAAU,CAAE,GACpE,IAAI,CAAE,eAAe,EAAE,aAAa,GAAG,UAAU,CAAE,GAAG;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,GAAG,IAAI,KAAM,IAAI,CAAC;CAC3C,CAAC"}

package/build-types/dropdown-menu/index.d.ts

@@ -1,3 +1,85 @@
+/// <reference types="react" />
+import type { DropdownMenuProps } from './types';
+/**
+ *
+ * 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>
+ * );
+ * ```
+ *
+ */
+declare function DropdownMenu(dropdownMenuProps: DropdownMenuProps): JSX.Element | null;
 export default DropdownMenu;
-declare function DropdownMenu(dropdownMenuProps: any): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/build-types/dropdown-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dropdown-menu/index.js"],"names":[],"mappings":";AA4CA,0EA0JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dropdown-menu/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,SAAS,CAAC;AAwBjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,iBAAS,YAAY,CAAE,iBAAiB,EAAE,iBAAiB,sBAmK1D;AAED,eAAe,YAAY,CAAC"}

package/build-types/dropdown-menu/stories/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import DropdownMenu from '..';
+declare const meta: ComponentMeta<typeof DropdownMenu>;
+export default meta;
+export declare const Default: ComponentStory<typeof DropdownMenu>;
+export declare const WithChildren: ComponentStory<typeof DropdownMenu>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/dropdown-menu/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dropdown-menu/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE;;GAEG;AACH,OAAO,YAAY,MAAM,IAAI,CAAC;AAgB9B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,YAAY,CAc7C,CAAC;AACF,eAAe,IAAI,CAAC;AAQpB,eAAO,MAAM,OAAO,qCAAsB,CAAC;AAoB3C,eAAO,MAAM,YAAY,qCAAsB,CAAC"}

package/build-types/dropdown-menu/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/dropdown-menu/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dropdown-menu/test/index.tsx"],"names":[],"mappings":""}

package/build-types/dropdown-menu/types.d.ts

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+import type { WordPressComponentProps } from '../ui/context';
+import type { DropdownProps } from '../dropdown/types';
+import type { Props as IconProps } from '../icon';
+import type { NavigableMenuProps } from '../navigable-container/types';
+export type DropdownOption = {
+    /**
+     * The Dashicon icon slug to be shown for the option.
+     */
+    icon?: IconProps['icon'];
+    /**
+     * A human-readable title to display for the option.
+     */
+    title: string;
+    /**
+     * Whether or not the option is disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * A callback function to invoke when the option is selected.
+     */
+    onClick?: () => void;
+    /**
+     * Whether or not the control is currently active.
+     */
+    isActive?: boolean;
+    /**
+     * Text to use for the internal `Button` component's tooltip.
+     */
+    label?: string;
+    /**
+     * The role to apply to the option's HTML element
+     */
+    role?: HTMLElement['role'];
+};
+type DropdownCallbackProps = {
+    isOpen: boolean;
+    onToggle: () => void;
+    onClose: () => void;
+};
+type ToggleProps = Partial<Omit<WordPressComponentProps<ButtonAsButtonProps, 'button', false>, 'label' | 'text'>> & {
+    as?: React.ElementType | keyof JSX.IntrinsicElements;
+};
+export type DropdownMenuProps = {
+    /**
+     * The Dashicon icon slug to be shown in the collapsed menu button.
+     *
+     * @default "menu"
+     */
+    icon?: IconProps['icon'] | null;
+    /**
+     * A human-readable label to present as accessibility text on the focused
+     * collapsed menu button.
+     */
+    label: string;
+    /**
+     * A class name to apply to the dropdown menu's toggle element wrapper.
+     */
+    className?: string;
+    /**
+     * Properties of `popoverProps` object will be passed as props to the nested
+     * `Popover` component.
+     * Use this object to modify props available for the `Popover` component that
+     * are not already exposed in the `DropdownMenu` component, e.g.: the
+     * direction in which the popover should open relative to its parent node
+     * set with `position` prop.
+     */
+    popoverProps?: DropdownProps['popoverProps'];
+    /**
+     * Properties of `toggleProps` object will be passed as props to the nested
+     * `Button` component in the `renderToggle` implementation of the `Dropdown`
+     * component used internally.
+     * Use this object to modify props available for the `Button` component that
+     * are not already exposed in the `DropdownMenu` component, e.g.: the tooltip
+     * text displayed on hover set with `tooltip` prop.
+     */
+    toggleProps?: ToggleProps;
+    /**
+     * Properties of `menuProps` object will be passed as props to the nested
+     * `NavigableMenu` component in the `renderContent` implementation of the
+     * `Dropdown` component used internally.
+     * Use this object to modify props available for the `NavigableMenu`
+     * component that are not already exposed in the `DropdownMenu` component,
+     * e.g.: the orientation of the menu set with `orientation` prop.
+     */
+    menuProps?: Omit<Partial<NavigableMenuProps>, 'children'>;
+    /**
+     * In some contexts, the arrow down key used to open the dropdown menu might
+     * need to be disabled—for example when that key is used to perform another
+     * action.
+     *
+     * @default false
+     */
+    disableOpenOnArrowDown?: boolean;
+    /**
+     * Text to display on the nested `Button` component in the `renderToggle`
+     * implementation of the `Dropdown` component used internally.
+     */
+    text?: string;
+    /**
+     * Whether or not `no-icons` should be added to the menu's `className`.
+     */
+    noIcons?: boolean;
+    /**
+     * A [function render prop](https://reactjs.org/docs/render-props.html#using-props-other-than-render)
+     * which should return an element or elements valid for use in a DropdownMenu:
+     * `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. Its first argument is a
+     * props object including the same values as given to a `Dropdown`'s
+     * `renderContent` (`isOpen`, `onToggle`, `onClose`).
+     *
+     * A valid DropdownMenu must specify a `controls` or `children` prop, or both.
+     */
+    children?: (callbackProps: DropdownCallbackProps) => ReactNode;
+    /**
+     * An array or nested array of objects describing the options to be shown in
+     * the expanded menu. Each object should include an `icon` Dashicon slug
+     * string, a human-readable `title` string, `isDisabled` boolean flag, and
+     * an `onClick` function callback to invoke when the option is selected.
+     *
+     * A valid DropdownMenu must specify a `controls` or `children` prop, or both.
+     */
+    controls?: DropdownOption[] | DropdownOption[][];
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/dropdown-menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dropdown-menu/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAE,MAAM,CAAE,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAE,MAAM,CAAE,CAAC;CAC7B,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAIF,KAAK,WAAW,GAAG,OAAO,CACzB,IAAI,CACH,uBAAuB,CAAE,mBAAmB,EAAE,QAAQ,EAAE,KAAK,CAAE,EAC/D,OAAO,GAAG,MAAM,CAChB,CACD,GAAG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAE,MAAM,CAAE,GAAG,IAAI,CAAC;IAClC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,aAAa,CAAE,cAAc,CAAE,CAAC;IAC/C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,IAAI,CAAE,OAAO,CAAE,kBAAkB,CAAE,EAAE,UAAU,CAAE,CAAC;IAC9D;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAE,aAAa,EAAE,qBAAqB,KAAM,SAAS,CAAC;IACjE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,EAAE,CAAC;CACjD,CAAC"}

package/build-types/dropdown-menu-v2/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { DropdownMenuProps, DropdownSubMenuProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuGroupProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownSubMenuTriggerProps } from './types';
+/**
+ * `DropdownMenu` displays a menu to the user (such as a set of actions
+ * or functions) triggered by a button.
+ */
+export declare const DropdownMenu: ({ defaultOpen, open, onOpenChange, modal, side, sideOffset, align, alignOffset, children, trigger, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownSubMenuTrigger: ({ prefix, suffix, children, }: DropdownSubMenuTriggerProps) => JSX.Element;
+export declare const DropdownSubMenu: ({ defaultOpen, open, onOpenChange, disabled, textValue, children, trigger, }: DropdownSubMenuProps) => JSX.Element;
+export declare const DropdownMenuLabel: (props: DropdownMenuLabelProps) => JSX.Element;
+export declare const DropdownMenuGroup: (props: DropdownMenuGroupProps) => JSX.Element;
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<any>>;
+export declare const DropdownMenuCheckboxItem: ({ children, checked, suffix, ...props }: DropdownMenuCheckboxItemProps) => JSX.Element;
+export declare const DropdownMenuRadioGroup: (props: DropdownMenuRadioGroupProps) => JSX.Element;
+export declare const DropdownMenuRadioItem: ({ children, suffix, ...props }: DropdownMenuRadioItemProps) => JSX.Element;
+export declare const DropdownMenuSeparator: (props: DropdownMenuSeparatorProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build-types/dropdown-menu-v2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dropdown-menu-v2/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,KAAK,EACX,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACtB,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,2BAA2B,EAC3B,MAAM,SAAS,CAAC;AAOjB;;;GAGG;AACH,eAAO,MAAM,YAAY,yGActB,iBAAiB,gBAyBnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,kCAShC,2BAA2B,gBAgB7B,CAAC;AAEF,eAAO,MAAM,eAAe,iFAWzB,oBAAoB,gBAwBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAY,sBAAsB,gBAE/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAY,sBAAsB,gBAE/D,CAAC;AAEF,eAAO,MAAM,gBAAgB,uGAqB5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,4CAKlC,6BAA6B,gBAuB/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAC3B,2BAA2B,gBACmB,CAAC;AAQvD,eAAO,MAAM,qBAAqB,mCAI/B,0BAA0B,gBAgB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAY,0BAA0B,gBAEvE,CAAC"}

package/build-types/dropdown-menu-v2/stories/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { DropdownMenu } from '..';
+declare const meta: ComponentMeta<typeof DropdownMenu>;
+export default meta;
+export declare const Default: ComponentStory<({ defaultOpen, open, onOpenChange, modal, side, sideOffset, align, alignOffset, children, trigger, }: import("../types").DropdownMenuProps) => JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/dropdown-menu-v2/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dropdown-menu-v2/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGtE;;GAEG;AACH,OAAO,EACN,YAAY,EAUZ,MAAM,IAAI,CAAC;AAcZ,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,YAAY,CAmC7C,CAAC;AACF,eAAe,IAAI,CAAC;AA6DpB,eAAO,MAAM,OAAO,6KAAsB,CAAC"}

package/build-types/dropdown-menu-v2/styles.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+export declare const ItemPrefixWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ItemSuffixWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SubContent: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Item: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CheckboxItem: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const RadioItem: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SubTrigger: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Separator: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ItemIndicator: import("@emotion/styled").StyledComponent<DropdownMenu.DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SubmenuRtlChevronIcon: import("@emotion/styled").StyledComponent<import("../icon").Props & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/build-types/dropdown-menu-v2/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/dropdown-menu-v2/styles.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAyI9D,eAAO,MAAM,iBAAiB;;;2GAE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAE7B,CAAC;AA+CF,eAAO,MAAM,OAAO;;UAEnB,CAAC;AACF,eAAO,MAAM,UAAU;;UAEtB,CAAC;AAEF,eAAO,MAAM,IAAI;;UAEhB,CAAC;AACF,eAAO,MAAM,YAAY;;UAExB,CAAC;AACF,eAAO,MAAM,SAAS;;UAErB,CAAC;AACF,eAAO,MAAM,UAAU;;UAQtB,CAAC;AAEF,eAAO,MAAM,KAAK;;UAgBjB,CAAC;AAEF,eAAO,MAAM,SAAS;;UAMrB,CAAC;AAEF,eAAO,MAAM,aAAa;;UAIzB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;UASjC,CAAC"}

package/build-types/dropdown-menu-v2/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/dropdown-menu-v2/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dropdown-menu-v2/test/index.tsx"],"names":[],"mappings":""}