@wordpress/components 28.4.0 → 28.6.0

package/build-module/composite/index.js

@@ -1,8 +1,286 @@
-// Originally this pointed at a Reakit implementation of
-// `Composite`, but we are removing Reakit entirely from the
-// codebase. We will continue to support the Reakit API
-// through the 'legacy' version, which uses Ariakit under
-// the hood.
+/**
+ * Composite is a component that may contain navigable items represented by
+ * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
 
-export * from './legacy';
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+import { CompositeContext, useCompositeContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Creates a composite store.
+ *
+ * @example
+ * ```jsx
+ * import { Composite, useCompositeStore } from '@wordpress/components';
+ *
+ * const store = useCompositeStore();
+ * <Composite store={store}>
+ *   <Composite.Item>Item</Composite.Item>
+ *   <Composite.Item>Item</Composite.Item>
+ *   <Composite.Item>Item</Composite.Item>
+ * </Composite>
+ * ```
+ */
+export function useCompositeStore({
+  focusLoop = false,
+  focusWrap = false,
+  focusShift = false,
+  virtualFocus = false,
+  orientation = 'both',
+  rtl = false,
+  ...props
+} = {}) {
+  return Ariakit.useCompositeStore({
+    focusLoop,
+    focusWrap,
+    focusShift,
+    virtualFocus,
+    orientation,
+    rtl,
+    ...props
+  });
+}
+const Group = forwardRef(function CompositeGroup(props, ref) {
+  const context = useCompositeContext();
+  return /*#__PURE__*/_jsx(Ariakit.CompositeGroup, {
+    store: context?.store,
+    ...props,
+    ref: ref
+  });
+});
+Group.displayName = 'Composite.Group';
+const GroupLabel = forwardRef(function CompositeGroupLabel(props, ref) {
+  const context = useCompositeContext();
+  return /*#__PURE__*/_jsx(Ariakit.CompositeGroupLabel, {
+    store: context?.store,
+    ...props,
+    ref: ref
+  });
+});
+GroupLabel.displayName = 'Composite.GroupLabel';
+const Item = forwardRef(function CompositeItem(props, ref) {
+  const context = useCompositeContext();
+  return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {
+    store: context?.store,
+    ...props,
+    ref: ref
+  });
+});
+Item.displayName = 'Composite.Item';
+const Row = forwardRef(function CompositeRow(props, ref) {
+  const context = useCompositeContext();
+  return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {
+    store: context?.store,
+    ...props,
+    ref: ref
+  });
+});
+Row.displayName = 'Composite.Row';
+const Hover = forwardRef(function CompositeHover(props, ref) {
+  const context = useCompositeContext();
+  return /*#__PURE__*/_jsx(Ariakit.CompositeHover, {
+    store: context?.store,
+    ...props,
+    ref: ref
+  });
+});
+Hover.displayName = 'Composite.Hover';
+const Typeahead = forwardRef(function CompositeTypeahead(props, ref) {
+  const context = useCompositeContext();
+  return /*#__PURE__*/_jsx(Ariakit.CompositeTypeahead, {
+    store: context?.store,
+    ...props,
+    ref: ref
+  });
+});
+Typeahead.displayName = 'Composite.Typeahead';
+
+/**
+ * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
+ * role, which provides a single tab stop on the page and arrow key navigation
+ * through the focusable descendants.
+ *
+ * @example
+ * ```jsx
+ * import { Composite, useCompositeStore } from '@wordpress/components';
+ *
+ * const store = useCompositeStore();
+ * <Composite store={store}>
+ *   <Composite.Item>Item 1</Composite.Item>
+ *   <Composite.Item>Item 2</Composite.Item>
+ * </Composite>
+ * ```
+ */
+export const Composite = Object.assign(forwardRef(function Composite({
+  children,
+  store,
+  disabled = false,
+  ...props
+}, ref) {
+  const contextValue = useMemo(() => ({
+    store
+  }), [store]);
+  return /*#__PURE__*/_jsx(Ariakit.Composite, {
+    disabled: disabled,
+    store: store,
+    ...props,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(CompositeContext.Provider, {
+      value: contextValue,
+      children: children
+    })
+  });
+}), {
+  displayName: 'Composite',
+  /**
+   * Renders a group element for composite items.
+   *
+   * @example
+   * ```jsx
+   * import { Composite, useCompositeStore } from '@wordpress/components';
+   *
+   * const store = useCompositeStore();
+   * <Composite store={store}>
+   *   <Composite.Group>
+   *     <Composite.GroupLabel>Label</Composite.GroupLabel>
+   *     <Composite.Item>Item 1</Composite.Item>
+   *     <Composite.Item>Item 2</Composite.Item>
+   *   </CompositeGroup>
+   * </Composite>
+   * ```
+   */
+  Group,
+  /**
+   * Renders a label in a composite group. This component must be wrapped with
+   * `Composite.Group` so the `aria-labelledby` prop is properly set on the
+   * composite group element.
+   *
+   * @example
+   * ```jsx
+   * import { Composite, useCompositeStore } from '@wordpress/components';
+   *
+   * const store = useCompositeStore();
+   * <Composite store={store}>
+   *   <Composite.Group>
+   *     <Composite.GroupLabel>Label</Composite.GroupLabel>
+   *     <Composite.Item>Item 1</Composite.Item>
+   *     <Composite.Item>Item 2</Composite.Item>
+   *   </CompositeGroup>
+   * </Composite>
+   * ```
+   */
+  GroupLabel,
+  /**
+   * Renders a composite item.
+   *
+   * @example
+   * ```jsx
+   * import { Composite, useCompositeStore } from '@wordpress/components';
+   *
+   * const store = useCompositeStore();
+   * <Composite store={store}>
+   *   <Composite.Item>Item 1</Composite.Item>
+   *   <Composite.Item>Item 2</Composite.Item>
+   *   <Composite.Item>Item 3</Composite.Item>
+   * </Composite>
+   * ```
+   */
+  Item,
+  /**
+   * Renders a composite row. Wrapping `Composite.Item` elements within
+   * `Composite.Row` will create a two-dimensional composite widget, such as a
+   * grid.
+   *
+   * @example
+   * ```jsx
+   * import { Composite, useCompositeStore } from '@wordpress/components';
+   *
+   * const store = useCompositeStore();
+   * <Composite store={store}>
+   *   <Composite.Row>
+   *     <Composite.Item>Item 1.1</Composite.Item>
+   *     <Composite.Item>Item 1.2</Composite.Item>
+   *     <Composite.Item>Item 1.3</Composite.Item>
+   *   </Composite.Row>
+   *   <Composite.Row>
+   *     <Composite.Item>Item 2.1</Composite.Item>
+   *     <Composite.Item>Item 2.2</Composite.Item>
+   *     <Composite.Item>Item 2.3</Composite.Item>
+   *   </Composite.Row>
+   * </Composite>
+   * ```
+   */
+  Row,
+  /**
+   * Renders an element in a composite widget that receives focus on mouse move
+   * and loses focus to the composite base element on mouse leave. This should
+   * be combined with the `Composite.Item` component.
+   *
+   * @example
+   * ```jsx
+   * import { Composite, useCompositeStore } from '@wordpress/components';
+   *
+   * const store = useCompositeStore();
+   * <Composite store={store}>
+   *   <Composite.Hover render={ <Composite.Item /> }>
+   *     Item 1
+   *   </Composite.Hover>
+   *   <Composite.Hover render={ <Composite.Item /> }>
+   *     Item 2
+   *   </Composite.Hover>
+   * </Composite>
+   * ```
+   */
+  Hover,
+  /**
+   * Renders a component that adds typeahead functionality to composite
+   * components. Hitting printable character keys will move focus to the next
+   * composite item that begins with the input characters.
+   *
+   * @example
+   * ```jsx
+   * import { Composite, useCompositeStore } from '@wordpress/components';
+   *
+   * const store = useCompositeStore();
+   * <Composite store={store} render={ <CompositeTypeahead /> }>
+   *   <Composite.Item>Item 1</Composite.Item>
+   *   <Composite.Item>Item 2</Composite.Item>
+   * </Composite>
+   * ```
+   */
+  Typeahead,
+  /**
+   * The React context used by the composite components. It can be used by
+   * to access the composite store, and to forward the context when composite
+   * sub-components are rendered across portals (ie. `SlotFill` components)
+   * that would not otherwise forward the context to the `Fill` children.
+   *
+   * @example
+   * ```jsx
+   * import { Composite } from '@wordpress/components';
+   * import { useContext } from '@wordpress/element';
+   *
+   * const compositeContext = useContext( Composite.Context );
+   * ```
+   */
+  Context: CompositeContext
+});
 //# sourceMappingURL=index.js.map

package/build-module/composite/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/composite/index.ts"],"sourcesContent":["// Originally this pointed at a Reakit implementation of\n// `Composite`, but we are removing Reakit entirely from the\n// codebase. We will continue to support the Reakit API\n// through the 'legacy' version, which uses Ariakit under\n// the hood.\n\nexport * from './legacy';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,cAAc,UAAU","ignoreList":[]}
+{"version":3,"names":["Ariakit","useMemo","forwardRef","CompositeContext","useCompositeContext","jsx","_jsx","useCompositeStore","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","props","Group","CompositeGroup","ref","context","store","displayName","GroupLabel","CompositeGroupLabel","Item","CompositeItem","Row","CompositeRow","Hover","CompositeHover","Typeahead","CompositeTypeahead","Composite","Object","assign","children","disabled","contextValue","Provider","value","Context"],"sources":["@wordpress/components/src/composite/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { CompositeContext, useCompositeContext } from './context';\nimport type {\n\tCompositeStoreProps,\n\tCompositeProps,\n\tCompositeGroupProps,\n\tCompositeGroupLabelProps,\n\tCompositeItemProps,\n\tCompositeRowProps,\n\tCompositeHoverProps,\n\tCompositeTypeaheadProps,\n} from './types';\n\n/**\n * Creates a composite store.\n *\n * @example\n * ```jsx\n * import { Composite, useCompositeStore } from '@wordpress/components';\n *\n * const store = useCompositeStore();\n * <Composite store={store}>\n *   <Composite.Item>Item</Composite.Item>\n *   <Composite.Item>Item</Composite.Item>\n *   <Composite.Item>Item</Composite.Item>\n * </Composite>\n * ```\n */\nexport function useCompositeStore( {\n\tfocusLoop = false,\n\tfocusWrap = false,\n\tfocusShift = false,\n\tvirtualFocus = false,\n\torientation = 'both',\n\trtl = false,\n\t...props\n}: CompositeStoreProps = {} ) {\n\treturn Ariakit.useCompositeStore( {\n\t\tfocusLoop,\n\t\tfocusWrap,\n\t\tfocusShift,\n\t\tvirtualFocus,\n\t\torientation,\n\t\trtl,\n\t\t...props,\n\t} );\n}\n\nconst Group = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeGroupProps, 'div', false >\n>( function CompositeGroup( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeGroup\n\t\t\tstore={ context?.store }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\nGroup.displayName = 'Composite.Group';\n\nconst GroupLabel = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeGroupLabelProps, 'div', false >\n>( function CompositeGroupLabel( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeGroupLabel\n\t\t\tstore={ context?.store }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\nGroupLabel.displayName = 'Composite.GroupLabel';\n\nconst Item = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< CompositeItemProps, 'button', false >\n>( function CompositeItem( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeItem\n\t\t\tstore={ context?.store }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\nItem.displayName = 'Composite.Item';\n\nconst Row = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeRowProps, 'div', false >\n>( function CompositeRow( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeRow\n\t\t\tstore={ context?.store }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\nRow.displayName = 'Composite.Row';\n\nconst Hover = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeHoverProps, 'div', false >\n>( function CompositeHover( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeHover\n\t\t\tstore={ context?.store }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\nHover.displayName = 'Composite.Hover';\n\nconst Typeahead = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeTypeaheadProps, 'div', false >\n>( function CompositeTypeahead( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeTypeahead\n\t\t\tstore={ context?.store }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\nTypeahead.displayName = 'Composite.Typeahead';\n\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite, useCompositeStore } from '@wordpress/components';\n *\n * const store = useCompositeStore();\n * <Composite store={store}>\n *   <Composite.Item>Item 1</Composite.Item>\n *   <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(\n\tforwardRef<\n\t\tHTMLDivElement,\n\t\tWordPressComponentProps< CompositeProps, 'div', false >\n\t>( function Composite(\n\t\t{ children, store, disabled = false, ...props },\n\t\tref\n\t) {\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( {\n\t\t\t\tstore,\n\t\t\t} ),\n\t\t\t[ store ]\n\t\t);\n\n\t\treturn (\n\t\t\t<Ariakit.Composite\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tstore={ store }\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<CompositeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CompositeContext.Provider>\n\t\t\t</Ariakit.Composite>\n\t\t);\n\t} ),\n\t{\n\t\tdisplayName: 'Composite',\n\t\t/**\n\t\t * Renders a group element for composite items.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite, useCompositeStore } from '@wordpress/components';\n\t\t *\n\t\t * const store = useCompositeStore();\n\t\t * <Composite store={store}>\n\t\t *   <Composite.Group>\n\t\t *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t *     <Composite.Item>Item 1</Composite.Item>\n\t\t *     <Composite.Item>Item 2</Composite.Item>\n\t\t *   </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroup,\n\t\t/**\n\t\t * Renders a label in a composite group. This component must be wrapped with\n\t\t * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n\t\t * composite group element.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite, useCompositeStore } from '@wordpress/components';\n\t\t *\n\t\t * const store = useCompositeStore();\n\t\t * <Composite store={store}>\n\t\t *   <Composite.Group>\n\t\t *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t *     <Composite.Item>Item 1</Composite.Item>\n\t\t *     <Composite.Item>Item 2</Composite.Item>\n\t\t *   </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroupLabel,\n\t\t/**\n\t\t * Renders a composite item.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite, useCompositeStore } from '@wordpress/components';\n\t\t *\n\t\t * const store = useCompositeStore();\n\t\t * <Composite store={store}>\n\t\t *   <Composite.Item>Item 1</Composite.Item>\n\t\t *   <Composite.Item>Item 2</Composite.Item>\n\t\t *   <Composite.Item>Item 3</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tItem,\n\t\t/**\n\t\t * Renders a composite row. Wrapping `Composite.Item` elements within\n\t\t * `Composite.Row` will create a two-dimensional composite widget, such as a\n\t\t * grid.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite, useCompositeStore } from '@wordpress/components';\n\t\t *\n\t\t * const store = useCompositeStore();\n\t\t * <Composite store={store}>\n\t\t *   <Composite.Row>\n\t\t *     <Composite.Item>Item 1.1</Composite.Item>\n\t\t *     <Composite.Item>Item 1.2</Composite.Item>\n\t\t *     <Composite.Item>Item 1.3</Composite.Item>\n\t\t *   </Composite.Row>\n\t\t *   <Composite.Row>\n\t\t *     <Composite.Item>Item 2.1</Composite.Item>\n\t\t *     <Composite.Item>Item 2.2</Composite.Item>\n\t\t *     <Composite.Item>Item 2.3</Composite.Item>\n\t\t *   </Composite.Row>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tRow,\n\t\t/**\n\t\t * Renders an element in a composite widget that receives focus on mouse move\n\t\t * and loses focus to the composite base element on mouse leave. This should\n\t\t * be combined with the `Composite.Item` component.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite, useCompositeStore } from '@wordpress/components';\n\t\t *\n\t\t * const store = useCompositeStore();\n\t\t * <Composite store={store}>\n\t\t *   <Composite.Hover render={ <Composite.Item /> }>\n\t\t *     Item 1\n\t\t *   </Composite.Hover>\n\t\t *   <Composite.Hover render={ <Composite.Item /> }>\n\t\t *     Item 2\n\t\t *   </Composite.Hover>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tHover,\n\t\t/**\n\t\t * Renders a component that adds typeahead functionality to composite\n\t\t * components. Hitting printable character keys will move focus to the next\n\t\t * composite item that begins with the input characters.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite, useCompositeStore } from '@wordpress/components';\n\t\t *\n\t\t * const store = useCompositeStore();\n\t\t * <Composite store={store} render={ <CompositeTypeahead /> }>\n\t\t *   <Composite.Item>Item 1</Composite.Item>\n\t\t *   <Composite.Item>Item 2</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tTypeahead,\n\t\t/**\n\t\t * The React context used by the composite components. It can be used by\n\t\t * to access the composite store, and to forward the context when composite\n\t\t * sub-components are rendered across portals (ie. `SlotFill` components)\n\t\t * that would not otherwise forward the context to the `Fill` children.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t * import { useContext } from '@wordpress/element';\n\t\t *\n\t\t * const compositeContext = useContext( Composite.Context );\n\t\t * ```\n\t\t */\n\t\tContext: CompositeContext,\n\t}\n);\n"],"mappings":"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A;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMW,SAAS,GAAGC,MAAM,CAACC,MAAM,CACrC/B,UAAU,CAGP,SAAS6B,SAASA,CACpB;EAAEG,QAAQ;EAAEf,KAAK;EAAEgB,QAAQ,GAAG,KAAK;EAAE,GAAGrB;AAAM,CAAC,EAC/CG,GAAG,EACF;EACD,MAAMmB,YAAY,GAAGnC,OAAO,CAC3B,OAAQ;IACPkB;EACD,CAAC,CAAE,EACH,CAAEA,KAAK,CACR,CAAC;EAED,oBACCb,IAAA,CAACN,OAAO,CAAC+B,SAAS;IACjBI,QAAQ,EAAGA,QAAU;IACrBhB,KAAK,EAAGA,KAAO;IAAA,GACVL,KAAK;IACVG,GAAG,EAAGA,GAAK;IAAAiB,QAAA,eAEX5B,IAAA,CAACH,gBAAgB,CAACkC,QAAQ;MAACC,KAAK,EAAGF,YAAc;MAAAF,QAAA,EAC9CA;IAAQ,CACgB;EAAC,CACV,CAAC;AAEtB,CAAE,CAAC,EACH;EACCd,WAAW,EAAE,WAAW;EACxB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEL,KAAK;EACL;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,UAAU;EACV;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,IAAI;EACJ;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,GAAG;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,KAAK;EACL;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,SAAS;EACT;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEU,OAAO,EAAEpC;AACV,CACD,CAAC","ignoreList":[]}

package/build-module/composite/legacy/index.js

@@ -5,6 +5,11 @@
  * tab stop for the whole Composite element. This means that it can behave as
  * a roving tabindex or aria-activedescendant container.
  *
+ * This file aims at providing components that are as close as possible to the
+ * original `reakit`-based implementation (which was removed from the codebase),
+ * although it is recommended that consumers of the package switch to the stable,
+ * un-prefixed, `ariakit`-based version of `Composite`.
+ *
  * @see https://ariakit.org/components/composite
  */
 
@@ -16,7 +21,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import * as Current from '../current';
+import { Composite as Current, useCompositeStore } from '..';
 import { useInstanceId } from '@wordpress/compose';
 
 // Legacy composite components can either provide state through a
@@ -79,19 +84,18 @@ const unproxiedCompositeGroup = forwardRef(({
   role,
   ...props
 }, ref) => {
-  const Component = role === 'row' ? Current.CompositeRow : Current.CompositeGroup;
+  const Component = role === 'row' ? Current.Row : Current.Group;
   return /*#__PURE__*/_jsx(Component, {
     ref: ref,
     role: role,
     ...props
   });
 });
-unproxiedCompositeGroup.displayName = 'CompositeGroup';
-export const Composite = proxyComposite(Current.Composite, {
+export const Composite = proxyComposite(Current, {
   baseId: 'id'
 });
 export const CompositeGroup = proxyComposite(unproxiedCompositeGroup);
-export const CompositeItem = proxyComposite(Current.CompositeItem, {
+export const CompositeItem = proxyComposite(Current.Item, {
   focusable: 'accessibleWhenDisabled'
 });
 export function useCompositeState(legacyStateOptions = {}) {
@@ -108,7 +112,7 @@ export function useCompositeState(legacyStateOptions = {}) {
   } = legacyStateOptions;
   return {
     baseId: useInstanceId(Composite, 'composite', baseId),
-    store: Current.useCompositeStore({
+    store: useCompositeStore({
       defaultActiveId,
       rtl,
       orientation,

package/build-module/composite/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","Current","useInstanceId","jsx","_jsx","mapLegacyStatePropsToComponentProps","legacyProps","state","rest","store","props","proxyComposite","ProxiedComponent","propMap","displayName","Component","id","baseId","Object","entries","forEach","from","to","hasOwnProperty","assign","unproxiedCompositeGroup","role","ref","CompositeRow","CompositeGroup","Composite","CompositeItem","focusable","useCompositeState","legacyStateOptions","currentId","defaultActiveId","orientation","rtl","loop","focusLoop","wrap","focusWrap","shift","focusShift","unstable_virtual","virtualFocus","useCompositeStore"],"sources":["@wordpress/components/src/composite/legacy/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as Current from '../current';\nimport { useInstanceId } from '@wordpress/compose';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport interface LegacyStateOptions {\n\t/**\n\t * ID that will serve as a base for all the items IDs.\n\t */\n\tbaseId?: string;\n\t/**\n\t * Determines how next and previous functions will behave. If `rtl` is set\n\t * to `true`, they will be inverted. This only affects the composite widget\n\t * behavior. You still need to set `dir=\"rtl\"` on HTML/CSS.\n\t *\n\t * @default false\n\t */\n\trtl?: boolean;\n\t/**\n\t * Defines the orientation of the composite widget. If the composite has a\n\t * single row or column (one-dimensional), the orientation value determines\n\t * which arrow keys can be used to move focus.\n\t */\n\torientation?: Orientation;\n\t/**\n\t * The current focused item `id`.\n\t */\n\tcurrentId?: string;\n\t/**\n\t * Determines how focus moves from the start and end of rows and columns.\n\t *\n\t * @default false\n\t */\n\tloop?: boolean | Orientation;\n\t/**\n\t * If enabled, moving to the next item from the last one in a row or column\n\t * will focus the first item in the next row or column and vice-versa.\n\t *\n\t * ** Has effect only on two-dimensional composites. **\n\t *\n\t * @default false\n\t */\n\twrap?: boolean | Orientation;\n\t/**\n\t * If enabled, moving up or down when there's no next item or the next item\n\t * is disabled will shift to the item right before it.\n\t *\n\t * ** Has effect only on two-dimensional composites. **\n\t *\n\t * @default false\n\t */\n\tshift?: boolean;\n\tunstable_virtual?: boolean;\n}\n\ntype Component = React.FunctionComponent< any >;\n\ntype CompositeStore = ReturnType< typeof Current.useCompositeStore >;\ntype CompositeStoreState = { store: CompositeStore };\nexport type CompositeState = CompositeStoreState &\n\tRequired< Pick< LegacyStateOptions, 'baseId' > >;\n\n// Legacy composite components can either provide state through a\n// single `state` prop, or via individual props, usually through\n// spreading the state generated by `useCompositeState`.\n// That is, `<Composite* { ...state }>`.\nexport type CompositeStateProps =\n\t| { state: CompositeState }\n\t| ( CompositeState & { state?: never } );\ntype ComponentProps< C extends Component > = React.ComponentPropsWithRef< C >;\nexport type CompositeProps< C extends Component > = ComponentProps< C > &\n\tCompositeStateProps;\ntype CompositeComponent< C extends Component > = (\n\tprops: CompositeProps< C >\n) => React.ReactElement;\ntype CompositeComponentProps = CompositeState &\n\t(\n\t\t| ComponentProps< typeof Current.CompositeGroup >\n\t\t| ComponentProps< typeof Current.CompositeItem >\n\t\t| ComponentProps< typeof Current.CompositeRow >\n\t);\n\nfunction mapLegacyStatePropsToComponentProps(\n\tlegacyProps: CompositeStateProps\n): CompositeComponentProps {\n\t// If a `state` prop is provided, we unpack that; otherwise,\n\t// the necessary props are provided directly in `legacyProps`.\n\tif ( legacyProps.state ) {\n\t\tconst { state, ...rest } = legacyProps;\n\t\tconst { store, ...props } =\n\t\t\tmapLegacyStatePropsToComponentProps( state );\n\t\treturn { ...rest, ...props, store };\n\t}\n\n\treturn legacyProps;\n}\n\nfunction proxyComposite< C extends Component >(\n\tProxiedComponent: C | React.ForwardRefExoticComponent< C >,\n\tpropMap: Record< string, string > = {}\n): CompositeComponent< C > {\n\tconst displayName = ProxiedComponent.displayName;\n\tconst Component = ( legacyProps: CompositeStateProps ) => {\n\t\tconst { store, ...rest } =\n\t\t\tmapLegacyStatePropsToComponentProps( legacyProps );\n\t\tconst props = rest as ComponentProps< C >;\n\t\tprops.id = useInstanceId( store, props.baseId, props.id );\n\n\t\tObject.entries( propMap ).forEach( ( [ from, to ] ) => {\n\t\t\tif ( props.hasOwnProperty( from ) ) {\n\t\t\t\tObject.assign( props, { [ to ]: props[ from ] } );\n\t\t\t\tdelete props[ from ];\n\t\t\t}\n\t\t} );\n\n\t\tdelete props.baseId;\n\n\t\treturn <ProxiedComponent { ...props } store={ store } />;\n\t};\n\tComponent.displayName = displayName;\n\treturn Component;\n}\n\n// The old `CompositeGroup` used to behave more like the current\n// `CompositeRow`, but this has been split into two different\n// components. We handle that difference by checking on the\n// provided role, and returning the appropriate component.\nconst unproxiedCompositeGroup = forwardRef<\n\tany,\n\tReact.ComponentPropsWithoutRef<\n\t\ttypeof Current.CompositeGroup | typeof Current.CompositeRow\n\t>\n>( ( { role, ...props }, ref ) => {\n\tconst Component =\n\t\trole === 'row' ? Current.CompositeRow : Current.CompositeGroup;\n\treturn <Component ref={ ref } role={ role } { ...props } />;\n} );\nunproxiedCompositeGroup.displayName = 'CompositeGroup';\n\nexport const Composite = proxyComposite( Current.Composite, { baseId: 'id' } );\nexport const CompositeGroup = proxyComposite( unproxiedCompositeGroup );\nexport const CompositeItem = proxyComposite( Current.CompositeItem, {\n\tfocusable: 'accessibleWhenDisabled',\n} );\n\nexport function useCompositeState(\n\tlegacyStateOptions: LegacyStateOptions = {}\n): CompositeState {\n\tconst {\n\t\tbaseId,\n\t\tcurrentId: defaultActiveId,\n\t\torientation,\n\t\trtl = false,\n\t\tloop: focusLoop = false,\n\t\twrap: focusWrap = false,\n\t\tshift: focusShift = false,\n\t\t// eslint-disable-next-line camelcase\n\t\tunstable_virtual: virtualFocus,\n\t} = legacyStateOptions;\n\n\treturn {\n\t\tbaseId: useInstanceId( Composite, 'composite', baseId ),\n\t\tstore: Current.useCompositeStore( {\n\t\t\tdefaultActiveId,\n\t\t\trtl,\n\t\t\torientation,\n\t\t\tfocusLoop,\n\t\t\tfocusShift,\n\t\t\tfocusWrap,\n\t\t\tvirtualFocus,\n\t\t} ),\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","Composite","Current","useCompositeStore","useInstanceId","jsx","_jsx","mapLegacyStatePropsToComponentProps","legacyProps","state","rest","store","props","proxyComposite","ProxiedComponent","propMap","displayName","Component","id","baseId","Object","entries","forEach","from","to","hasOwnProperty","assign","unproxiedCompositeGroup","role","ref","Row","Group","CompositeGroup","CompositeItem","Item","focusable","useCompositeState","legacyStateOptions","currentId","defaultActiveId","orientation","rtl","loop","focusLoop","wrap","focusWrap","shift","focusShift","unstable_virtual","virtualFocus"],"sources":["@wordpress/components/src/composite/legacy/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * This file aims at providing components that are as close as possible to the\n * original `reakit`-based implementation (which was removed from the codebase),\n * although it is recommended that consumers of the package switch to the stable,\n * un-prefixed, `ariakit`-based version of `Composite`.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Composite as Current, useCompositeStore } from '..';\nimport { useInstanceId } from '@wordpress/compose';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport interface LegacyStateOptions {\n\t/**\n\t * ID that will serve as a base for all the items IDs.\n\t */\n\tbaseId?: string;\n\t/**\n\t * Determines how next and previous functions will behave. If `rtl` is set\n\t * to `true`, they will be inverted. This only affects the composite widget\n\t * behavior. You still need to set `dir=\"rtl\"` on HTML/CSS.\n\t *\n\t * @default false\n\t */\n\trtl?: boolean;\n\t/**\n\t * Defines the orientation of the composite widget. If the composite has a\n\t * single row or column (one-dimensional), the orientation value determines\n\t * which arrow keys can be used to move focus.\n\t */\n\torientation?: Orientation;\n\t/**\n\t * The current focused item `id`.\n\t */\n\tcurrentId?: string;\n\t/**\n\t * Determines how focus moves from the start and end of rows and columns.\n\t *\n\t * @default false\n\t */\n\tloop?: boolean | Orientation;\n\t/**\n\t * If enabled, moving to the next item from the last one in a row or column\n\t * will focus the first item in the next row or column and vice-versa.\n\t *\n\t * ** Has effect only on two-dimensional composites. **\n\t *\n\t * @default false\n\t */\n\twrap?: boolean | Orientation;\n\t/**\n\t * If enabled, moving up or down when there's no next item or the next item\n\t * is disabled will shift to the item right before it.\n\t *\n\t * ** Has effect only on two-dimensional composites. **\n\t *\n\t * @default false\n\t */\n\tshift?: boolean;\n\tunstable_virtual?: boolean;\n}\n\ntype Component = React.FunctionComponent< any >;\n\ntype CompositeStore = ReturnType< typeof useCompositeStore >;\ntype CompositeStoreState = { store: CompositeStore };\nexport type CompositeState = CompositeStoreState &\n\tRequired< Pick< LegacyStateOptions, 'baseId' > >;\n\n// Legacy composite components can either provide state through a\n// single `state` prop, or via individual props, usually through\n// spreading the state generated by `useCompositeState`.\n// That is, `<Composite* { ...state }>`.\nexport type CompositeStateProps =\n\t| { state: CompositeState }\n\t| ( CompositeState & { state?: never } );\ntype ComponentProps< C extends Component > = React.ComponentPropsWithRef< C >;\nexport type CompositeProps< C extends Component > = ComponentProps< C > &\n\tCompositeStateProps;\ntype CompositeComponent< C extends Component > = (\n\tprops: CompositeProps< C >\n) => React.ReactElement;\ntype CompositeComponentProps = CompositeState &\n\t(\n\t\t| ComponentProps< typeof Current.Group >\n\t\t| ComponentProps< typeof Current.Item >\n\t\t| ComponentProps< typeof Current.Row >\n\t);\n\nfunction mapLegacyStatePropsToComponentProps(\n\tlegacyProps: CompositeStateProps\n): CompositeComponentProps {\n\t// If a `state` prop is provided, we unpack that; otherwise,\n\t// the necessary props are provided directly in `legacyProps`.\n\tif ( legacyProps.state ) {\n\t\tconst { state, ...rest } = legacyProps;\n\t\tconst { store, ...props } =\n\t\t\tmapLegacyStatePropsToComponentProps( state );\n\t\treturn { ...rest, ...props, store };\n\t}\n\n\treturn legacyProps;\n}\n\nfunction proxyComposite< C extends Component >(\n\tProxiedComponent: C | React.ForwardRefExoticComponent< C >,\n\tpropMap: Record< string, string > = {}\n): CompositeComponent< C > {\n\tconst displayName = ProxiedComponent.displayName;\n\tconst Component = ( legacyProps: CompositeStateProps ) => {\n\t\tconst { store, ...rest } =\n\t\t\tmapLegacyStatePropsToComponentProps( legacyProps );\n\t\tconst props = rest as ComponentProps< C >;\n\t\tprops.id = useInstanceId( store, props.baseId, props.id );\n\n\t\tObject.entries( propMap ).forEach( ( [ from, to ] ) => {\n\t\t\tif ( props.hasOwnProperty( from ) ) {\n\t\t\t\tObject.assign( props, { [ to ]: props[ from ] } );\n\t\t\t\tdelete props[ from ];\n\t\t\t}\n\t\t} );\n\n\t\tdelete props.baseId;\n\n\t\treturn <ProxiedComponent { ...props } store={ store } />;\n\t};\n\tComponent.displayName = displayName;\n\treturn Component;\n}\n\n// The old `CompositeGroup` used to behave more like the current\n// `CompositeRow`, but this has been split into two different\n// components. We handle that difference by checking on the\n// provided role, and returning the appropriate component.\nconst unproxiedCompositeGroup = forwardRef<\n\tany,\n\tReact.ComponentPropsWithoutRef< typeof Current.Group | typeof Current.Row >\n>( ( { role, ...props }, ref ) => {\n\tconst Component = role === 'row' ? Current.Row : Current.Group;\n\treturn <Component ref={ ref } role={ role } { ...props } />;\n} );\n\nexport const Composite = proxyComposite( Current, { baseId: 'id' } );\nexport const CompositeGroup = proxyComposite( unproxiedCompositeGroup );\nexport const CompositeItem = proxyComposite( Current.Item, {\n\tfocusable: 'accessibleWhenDisabled',\n} );\n\nexport function useCompositeState(\n\tlegacyStateOptions: LegacyStateOptions = {}\n): CompositeState {\n\tconst {\n\t\tbaseId,\n\t\tcurrentId: defaultActiveId,\n\t\torientation,\n\t\trtl = false,\n\t\tloop: focusLoop = false,\n\t\twrap: focusWrap = false,\n\t\tshift: focusShift = false,\n\t\t// eslint-disable-next-line camelcase\n\t\tunstable_virtual: virtualFocus,\n\t} = legacyStateOptions;\n\n\treturn {\n\t\tbaseId: useInstanceId( Composite, 'composite', baseId ),\n\t\tstore: useCompositeStore( {\n\t\t\tdefaultActiveId,\n\t\t\trtl,\n\t\t\torientation,\n\t\t\tfocusLoop,\n\t\t\tfocusShift,\n\t\t\tfocusWrap,\n\t\t\tvirtualFocus,\n\t\t} ),\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/composite/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/composite/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/composite/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as Ariakit from '@ariakit/react';\n\nexport type CompositeContextProps =\n\t| {\n\t\t\t/**\n\t\t\t * Object returned by the `useCompositeStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.CompositeStore;\n\t  }\n\t| undefined;\n\nexport type CompositeStoreProps = {\n\t/**\n\t * The current active item `id`. The active item is the element within the\n\t * composite widget that has either DOM or virtual focus (in case\n\t * the `virtualFocus` prop is enabled).\n\t * - `null` represents the base composite element (the one with a [composite\n\t *   role](https://w3c.github.io/aria/#composite)). Users will be able to\n\t *   navigate out of it using arrow keys.\n\t * - If `activeId` is initially set to `null`, the base composite element\n\t *   itself will have focus and users will be able to navigate to it using\n\t *   arrow keys.\n\t */\n\tactiveId?: Ariakit.CompositeStoreProps[ 'activeId' ];\n\t/**\n\t * The composite item id that should be active by default when the composite\n\t * widget is rendered. If `null`, the composite element itself will have focus\n\t * and users will be able to navigate to it using arrow keys. If `undefined`,\n\t * the first enabled item will be focused.\n\t */\n\tdefaultActiveId?: Ariakit.CompositeStoreProps[ 'defaultActiveId' ];\n\t/**\n\t * A callback that gets called when the `activeId` state changes.\n\t */\n\tsetActiveId?: Ariakit.CompositeStoreProps[ 'setActiveId' ];\n\t/**\n\t * Determines how the focus behaves when the user reaches the end of the\n\t * composite widget.\n\t *\n\t * On one-dimensional composite widgets:\n\t * - `true` loops from the last item to the first item and vice-versa.\n\t * - `horizontal` loops only if `orientation` is `horizontal` or not set.\n\t * - `vertical` loops only if `orientation` is `vertical` or not set.\n\t * - If `activeId` is initially set to `null`, the composite element will\n\t *   be focused in between the last and first items.\n\t *\n\t * On two-dimensional composite widgets (ie. when using `CompositeRow`):\n\t * - `true` loops from the last row/column item to the first item in the same\n\t *   row/column and vice-versa. If it's the last item in the last row, it\n\t *   moves to the first item in the first row and vice-versa.\n\t * - `horizontal` loops only from the last row item to the first item in the\n\t *   same row.\n\t * - `vertical` loops only from the last column item to the first item in the\n\t *   column row.\n\t * - If `activeId` is initially set to `null`, vertical loop will have no\n\t *   effect as moving down from the last row or up from the first row will\n\t *   focus on the composite element.\n\t * - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the\n\t *   last item in the last row or column and the first item in the first row or\n\t *   column and vice-versa.\n\t *\n\t * @default false\n\t */\n\tfocusLoop?: Ariakit.CompositeStoreProps[ 'focusLoop' ];\n\t/**\n\t * **Works only on two-dimensional composite widgets**.\n\t *\n\t * If enabled, moving to the next item from the last one in a row or column\n\t * will focus on the first item in the next row or column and vice-versa.\n\t * - `true` wraps between rows and columns.\n\t * - `horizontal` wraps only between rows.\n\t * - `vertical` wraps only between columns.\n\t * - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the\n\t *   last item in the last row or column and the first item in the first row or\n\t *   column and vice-versa.\n\t *\n\t * @default false\n\t */\n\tfocusWrap?: Ariakit.CompositeStoreProps[ 'focusWrap' ];\n\t/**\n\t * **Works only on two-dimensional composite widgets**.\n\t *\n\t * If enabled, moving up or down when there's no next item or when the next\n\t * item is disabled will shift to the item right before it.\n\t *\n\t * @default false\n\t */\n\tfocusShift?: Ariakit.CompositeStoreProps[ 'focusShift' ];\n\t/**\n\t * If enabled, the composite element will act as an\n\t * [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)\n\t * container instead of [roving\n\t * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).\n\t * DOM focus will remain on the composite element while its items receive\n\t * virtual focus.\n\t *\n\t * In both scenarios, the item in focus will carry the `data-active-item`\n\t * attribute.\n\t *\n\t * @default false\n\t */\n\tvirtualFocus?: Ariakit.CompositeStoreProps[ 'virtualFocus' ];\n\t/**\n\t * Defines the orientation of the composite widget. If the composite has a\n\t * single row or column (one-dimensional), the `orientation` value determines\n\t * which arrow keys can be used to move focus:\n\t * - `both`: all arrow keys work.\n\t * - `horizontal`: only left and right arrow keys work.\n\t * - `vertical`: only up and down arrow keys work.\n\t *\n\t * It doesn't have any effect on two-dimensional composites.\n\t *\n\t * @default \"both\"\n\t */\n\torientation?: Ariakit.CompositeStoreProps[ 'orientation' ];\n\t/**\n\t * Determines how the `store`'s `next` and `previous` functions will behave.\n\t * If `rtl` is set to `true`, they will be inverted.\n\t *\n\t * This only affects the composite widget behavior. You still need to set\n\t * `dir=\"rtl\"` on HTML/CSS.\n\t *\n\t * @default false\n\t */\n\trtl?: Ariakit.CompositeStoreProps[ 'rtl' ];\n};\n\nexport type CompositeProps = {\n\t/**\n\t * Object returned by the `useCompositeStore` hook.\n\t */\n\tstore: Ariakit.CompositeStore;\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeProps[ 'render' ];\n\t/**\n\t * Makes the component a focusable element. When this element gains keyboard\n\t * focus, it gets a `data-focus-visible` attribute and triggers the\n\t * `onFocusVisible` prop.\n\t * The component supports the `disabled` prop even for those elements not\n\t * supporting the native `disabled` attribute. Disabled elements may be\n\t * still accessible via keyboard by using the the `accessibleWhenDisabled`\n\t * prop.\n\t * Non-native focusable elements will lose their focusability entirely.\n\t * However, native focusable elements will retain their inherent focusability.\n\t */\n\tfocusable?: Ariakit.CompositeProps[ 'focusable' ];\n\t/**\n\t * Determines if the element is disabled. This sets the `aria-disabled`\n\t * attribute accordingly, enabling support for all elements, including those\n\t * that don't support the native `disabled` attribute.\n\t *\n\t * This feature can be combined with the `accessibleWhenDisabled` prop to\n\t * make disabled elements still accessible via keyboard.\n\t *\n\t * **Note**: For this prop to work, the `focusable` prop must be set to\n\t * `true`, if it's not set by default.\n\t *\n\t * @default false\n\t */\n\tdisabled?: Ariakit.CompositeProps[ 'disabled' ];\n\t/**\n\t * Indicates whether the element should be focusable even when it is\n\t * `disabled`.\n\t *\n\t * This is important when discoverability is a concern. For example:\n\t *\n\t * > A toolbar in an editor contains a set of special smart paste functions\n\t * that are disabled when the clipboard is empty or when the function is not\n\t * applicable to the current content of the clipboard. It could be helpful to\n\t * keep the disabled buttons focusable if the ability to discover their\n\t * functionality is primarily via their presence on the toolbar.\n\t *\n\t * Learn more on [Focusability of disabled\n\t * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\t */\n\taccessibleWhenDisabled?: Ariakit.CompositeProps[ 'accessibleWhenDisabled' ];\n\t/**\n\t * Custom event handler invoked when the element gains focus through keyboard\n\t * interaction or a key press occurs while the element is in focus. This is\n\t * the programmatic equivalent of the `data-focus-visible` attribute.\n\t *\n\t * **Note**: For this prop to work, the `focusable` prop must be set to `true`\n\t * if it's not set by default.\n\t */\n\tonFocusVisible?: Ariakit.CompositeProps[ 'onFocusVisible' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeProps[ 'children' ];\n};\n\nexport type CompositeGroupProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeGroupProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeGroupProps[ 'children' ];\n};\n\nexport type CompositeGroupLabelProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeGroupLabelProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeGroupLabelProps[ 'children' ];\n};\n\nexport type CompositeItemProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeItemProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeItemProps[ 'children' ];\n\t/**\n\t * Indicates whether the element should be focusable even when it is\n\t * `disabled`.\n\t *\n\t * This is important when discoverability is a concern. For example:\n\t *\n\t * > A toolbar in an editor contains a set of special smart paste functions\n\t * that are disabled when the clipboard is empty or when the function is not\n\t * applicable to the current content of the clipboard. It could be helpful to\n\t * keep the disabled buttons focusable if the ability to discover their\n\t * functionality is primarily via their presence on the toolbar.\n\t *\n\t * Learn more on [Focusability of disabled\n\t * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\t */\n\taccessibleWhenDisabled?: Ariakit.CompositeItemProps[ 'accessibleWhenDisabled' ];\n};\n\nexport type CompositeRowProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeRowProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeRowProps[ 'children' ];\n};\n\nexport type CompositeHoverProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeHoverProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeHoverProps[ 'children' ];\n};\n\nexport type CompositeTypeaheadProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeTypeaheadProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeTypeaheadProps[ 'children' ];\n};\n"],"mappings":"","ignoreList":[]}

package/build-module/custom-select-control/index.js

@@ -4,14 +4,22 @@
 import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
 
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import _CustomSelect from '../custom-select-control-v2/custom-select';
 import CustomSelectItem from '../custom-select-control-v2/item';
 import * as Styled from '../custom-select-control-v2/styles';
+import { VisuallyHidden } from '../visually-hidden';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function useDeprecatedProps({
   __experimentalShowSelectedHint,
   ...otherProps
@@ -34,6 +42,14 @@ function applyOptionDeprecations({
     ...rest
   };
 }
+function getDescribedBy(currentValue, describedBy) {
+  if (describedBy) {
+    return describedBy;
+  }
+
+  // translators: %s: The selected option.
+  return sprintf(__('Currently selected: %s'), currentValue);
+}
 function CustomSelectControl(props) {
   const {
     __next40pxDefaultSize = false,
@@ -46,6 +62,7 @@ function CustomSelectControl(props) {
     showSelectedHint = false,
     ...restProps
   } = useDeprecatedProps(props);
+  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');
 
   // Forward props + store from v2 implementation
   const store = Ariakit.useSelectStore({
@@ -103,10 +120,10 @@ function CustomSelectControl(props) {
       })
     }, key);
   });
+  const {
+    value: currentValue
+  } = store.getState();
   const renderSelectedValueHint = () => {
-    const {
-      value: currentValue
-    } = store.getState();
     const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({
       name
     }) => currentValue === name)?.hint;
@@ -127,17 +144,24 @@ function CustomSelectControl(props) {
     }
     return size;
   })();
-  return /*#__PURE__*/_jsx(_CustomSelect, {
-    "aria-describedby": describedBy,
-    renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
-    size: translatedSize,
-    store: store,
-    className: clsx(
-    // Keeping the classname for legacy reasons
-    'components-custom-select-control', classNameProp),
-    isLegacy: true,
-    ...restProps,
-    children: children
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(_CustomSelect, {
+      "aria-describedby": descriptionId,
+      renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
+      size: translatedSize,
+      store: store,
+      className: clsx(
+      // Keeping the classname for legacy reasons
+      'components-custom-select-control', classNameProp),
+      isLegacy: true,
+      ...restProps,
+      children: children
+    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+      children: /*#__PURE__*/_jsx("span", {
+        id: descriptionId,
+        children: getDescribedBy(currentValue, describedBy)
+      })
+    })]
   });
 }
 export default CustomSelectControl;

package/build-module/custom-select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","clsx","_CustomSelect","CustomSelectItem","Styled","jsx","_jsx","jsxs","_jsxs","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","CustomSelectControl","props","__next40pxDefaultSize","describedBy","options","onChange","size","value","className","classNameProp","restProps","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","WithHintItemWrapper","WithHintItemHint","renderSelectedValueHint","currentValue","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","renderSelectedValue","undefined","isLegacy"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps } from './types';\n\nfunction useDeprecatedProps( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectProps[ 'options' ][ number ] ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction CustomSelectControl( props: CustomSelectProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange || ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<_CustomSelect\n\t\t\taria-describedby={ describedBy }\n\t\t\trenderSelectedValue={\n\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t}\n\t\t\tsize={ translatedSize }\n\t\t\tstore={ store }\n\t\t\tclassName={ clsx(\n\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassNameProp\n\t\t\t) }\n\t\t\tisLegacy\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ children }\n\t\t</_CustomSelect>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","clsx","useInstanceId","__","sprintf","_CustomSelect","CustomSelectItem","Styled","VisuallyHidden","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","getDescribedBy","currentValue","describedBy","CustomSelectControl","props","__next40pxDefaultSize","options","onChange","size","value","className","classNameProp","restProps","descriptionId","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","WithHintItemWrapper","WithHintItemHint","renderSelectedValueHint","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","renderSelectedValue","undefined","isLegacy","id"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps, CustomSelectOption } from './types';\nimport { VisuallyHidden } from '../visually-hidden';\n\nfunction useDeprecatedProps< T extends CustomSelectOption >( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps< T > ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectOption ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction getDescribedBy( currentValue: string, describedBy?: string ) {\n\tif ( describedBy ) {\n\t\treturn describedBy;\n\t}\n\n\t// translators: %s: The selected option.\n\treturn sprintf( __( 'Currently selected: %s' ), currentValue );\n}\n\nfunction CustomSelectControl< T extends CustomSelectOption >(\n\tprops: CustomSelectProps< T >\n) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\tconst descriptionId = useInstanceId(\n\t\tCustomSelectControl,\n\t\t'custom-select-control__description'\n\t);\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore< string >( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange || ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\tconst { value: currentValue } = store.getState();\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<>\n\t\t\t<_CustomSelect\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\trenderSelectedValue={\n\t\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t\t}\n\t\t\t\tsize={ translatedSize }\n\t\t\t\tstore={ store }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t'components-custom-select-control',\n\t\t\t\t\tclassNameProp\n\t\t\t\t) }\n\t\t\t\tisLegacy\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_CustomSelect>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<span id={ descriptionId }>\n\t\t\t\t\t{ getDescribedBy( currentValue, describedBy ) }\n\t\t\t\t</span>\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/custom-select-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\n/**\n * The object structure for the options array.\n */\ntype Option = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\thint?: string;\n\t/**\n\t * Use the `hint` property instead\n\t * @deprecated\n\t * @ignore\n\t */\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/**\n * The object returned from the onChange event.\n */\ntype ChangeObject = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: Option;\n};\n\nexport type CustomSelectProps = {\n\t/**\n\t * Optional classname for the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Hide the label visually, while keeping available to assistive technology.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Description for the select trigger button used by assistive technology.\n\t * If no value is passed, the text \"Currently selected: selectedItem.name\"\n\t * will be used fully translated.\n\t */\n\tdescribedBy?: string;\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t */\n\tonChange?: ( newValue: ChangeObject ) => void;\n\t/**\n\t * A handler for `blur` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `focus` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `mouseout` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `mouseover` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * The list of options that can be chosen from.\n\t */\n\toptions: Array< Option >;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small' | '__unstable-large';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: Option;\n\t/**\n\t * Use the `showSelectedHint` property instead.\n\t * @deprecated\n\t * @ignore\n\t */\n\t__experimentalShowSelectedHint?: boolean;\n\t/**\n\t * Show the hint of the selected item in the trigger button.\n\t *\n\t * @default false\n\t */\n\tshowSelectedHint?: boolean;\n\t/**\n\t * Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t *\n\t * @deprecated\n\t * @ignore\n\t */\n\t__nextUnconstrainedWidth?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\n/**\n * The object structure for the options array.\n */\nexport type CustomSelectOption = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\thint?: string;\n\t/**\n\t * Use the `hint` property instead\n\t * @deprecated\n\t * @ignore\n\t */\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/**\n * The object returned from the onChange event.\n */\ntype CustomSelectChangeObject< T extends CustomSelectOption > = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: T;\n};\n\nexport type CustomSelectProps< T extends CustomSelectOption > = {\n\t/**\n\t * Optional classname for the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Hide the label visually, while keeping available to assistive technology.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Description for the select trigger button used by assistive technology.\n\t * If no value is passed, the text \"Currently selected: selectedItem.name\"\n\t * will be used fully translated.\n\t */\n\tdescribedBy?: string;\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t */\n\tonChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;\n\t/**\n\t * A handler for `blur` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `focus` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `mouseout` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `mouseover` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * The list of options that can be chosen from.\n\t */\n\toptions: ReadonlyArray< T >;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small' | '__unstable-large';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: NoInfer< T >;\n\t/**\n\t * Use the `showSelectedHint` property instead.\n\t * @deprecated\n\t * @ignore\n\t */\n\t__experimentalShowSelectedHint?: boolean;\n\t/**\n\t * Show the hint of the selected item in the trigger button.\n\t *\n\t * @default false\n\t */\n\tshowSelectedHint?: boolean;\n\t/**\n\t * Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t *\n\t * @deprecated\n\t * @ignore\n\t */\n\t__nextUnconstrainedWidth?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n"],"mappings":"","ignoreList":[]}