@wordpress/components 28.3.0 → 28.5.0

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

@@ -1,194 +1,168 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
-import { useSelect } from 'downshift';
+import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { Icon, check } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
 
 /**
  * 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 { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
-import SelectControlChevronDown from '../select-control/chevron-down';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import InputBase from '../input-control/input-base';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const itemToString = item => item?.name;
-// This is needed so that in Windows, where
-// the menu does not necessarily open on
-// key up/down, you can still switch between
-// options with the menu closed.
-const stateReducer = ({
-  selectedItem
-}, {
-  type,
-  changes,
-  props: {
-    items
-  }
-}) => {
-  switch (type) {
-    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
-      // If we already have a selected item, try to select the next one,
-      // without circular navigation. Otherwise, select the first item.
-      return {
-        selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0]
-      };
-    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-      // If we already have a selected item, try to select the previous one,
-      // without circular navigation. Otherwise, select the last item.
-      return {
-        selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1]
-      };
-    default:
-      return changes;
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function useDeprecatedProps({
+  __experimentalShowSelectedHint,
+  ...otherProps
+}) {
+  return {
+    showSelectedHint: __experimentalShowSelectedHint,
+    ...otherProps
+  };
+}
+
+// The removal of `__experimentalHint` in favour of `hint` doesn't happen in
+// the `useDeprecatedProps` hook in order not to break consumers that rely
+// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)
+function applyOptionDeprecations({
+  __experimentalHint,
+  ...rest
+}) {
+  return {
+    hint: __experimentalHint,
+    ...rest
+  };
+}
+function getDescribedBy(currentValue, describedBy) {
+  if (describedBy) {
+    return describedBy;
   }
-};
-export default function CustomSelectControl(props) {
+
+  // translators: %s: The selected option.
+  return sprintf(__('Currently selected: %s'), currentValue);
+}
+function CustomSelectControl(props) {
   const {
-    /** Start opting into the larger default height that will become the default size in a future version. */
     __next40pxDefaultSize = false,
-    className,
-    hideLabelFromVision,
-    label,
     describedBy,
-    options: items,
-    onChange: onSelectedItemChange,
-    /** @type {import('../select-control/types').SelectControlProps.size} */
+    options,
+    onChange,
     size = 'default',
-    value: _selectedItem,
-    onMouseOver,
-    onMouseOut,
-    onFocus,
-    onBlur,
-    __experimentalShowSelectedHint = false
-  } = useDeprecated36pxDefaultSizeProp(props);
-  const {
-    getLabelProps,
-    getToggleButtonProps,
-    getMenuProps,
-    getItemProps,
-    isOpen,
-    highlightedIndex,
-    selectedItem
-  } = useSelect({
-    initialSelectedItem: items[0],
-    items,
-    itemToString,
-    onSelectedItemChange,
-    ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? {
-      selectedItem: _selectedItem
-    } : undefined),
-    stateReducer
-  });
-  function getDescribedBy() {
-    if (describedBy) {
-      return describedBy;
-    }
-    if (!selectedItem) {
-      return __('No selection');
-    }
+    value,
+    className: classNameProp,
+    showSelectedHint = false,
+    ...restProps
+  } = useDeprecatedProps(props);
+  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');
 
-    // translators: %s: The selected option.
-    return sprintf(__('Currently selected: %s'), selectedItem.name);
-  }
-  let menuProps = getMenuProps({
-    className: 'components-custom-select-control__menu',
-    'aria-hidden': !isOpen
-  });
-  const onKeyDownHandler = useCallback(e => {
-    e.stopPropagation();
-    menuProps?.onKeyDown?.(e);
-  }, [menuProps]);
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    async setValue(nextValue) {
+      const nextOption = options.find(item => item.name === nextValue);
+      if (!onChange || !nextOption) {
+        return;
+      }
 
-  // We need this here, because the null active descendant is not fully ARIA compliant.
-  if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) {
-    const {
-      'aria-activedescendant': ariaActivedescendant,
-      ...restMenuProps
-    } = menuProps;
-    menuProps = restMenuProps;
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    className: clsx('components-custom-select-control', className),
-    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {
-      as: "label",
-      ...getLabelProps(),
-      children: label
-    }) :
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-    _jsx(StyledLabel, {
-      ...getLabelProps({
-        className: 'components-custom-select-control__label'
-      }),
-      children: label
-    }), /*#__PURE__*/_jsxs(InputBase, {
-      __next40pxDefaultSize: __next40pxDefaultSize,
-      size: size,
-      suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),
-      children: [/*#__PURE__*/_jsxs(SelectControlSelect, {
-        onMouseOver: onMouseOver,
-        onMouseOut: onMouseOut,
-        as: "button",
-        onFocus: onFocus,
-        onBlur: onBlur,
-        selectSize: size,
-        __next40pxDefaultSize: __next40pxDefaultSize,
-        ...getToggleButtonProps({
-          // This is needed because some speech recognition software don't support `aria-labelledby`.
-          'aria-label': label,
-          'aria-labelledby': undefined,
-          className: 'components-custom-select-control__button',
-          describedBy: getDescribedBy()
-        }),
-        children: [itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && /*#__PURE__*/_jsx("span", {
-          className: "components-custom-select-control__hint",
-          children: selectedItem.__experimentalHint
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: "components-custom-select-control__menu-wrapper",
-        children: /*#__PURE__*/_jsx("ul", {
-          ...menuProps,
-          onKeyDown: onKeyDownHandler,
-          children: isOpen && items.map((item, index) => /*#__PURE__*/_jsxs("li", {
-            ...getItemProps({
-              item,
-              index,
-              className: clsx(item.className, 'components-custom-select-control__item', {
-                'is-highlighted': index === highlightedIndex,
-                'has-hint': !!item.__experimentalHint,
-                'is-next-40px-default-size': __next40pxDefaultSize
-              }),
-              style: item.style
-            }),
-            children: [item.name, item.__experimentalHint && /*#__PURE__*/_jsx("span", {
-              className: "components-custom-select-control__item-hint",
-              children: item.__experimentalHint
-            }), item === selectedItem && /*#__PURE__*/_jsx(Icon, {
-              icon: check,
-              className: "components-custom-select-control__item-icon"
-            })]
-          }, item.key))
-        })
+      // Executes the logic in a microtask after the popup is closed.
+      // This is simply to ensure the isOpen state matches the one from the
+      // previous legacy implementation.
+      await Promise.resolve();
+      const state = store.getState();
+      const changeObject = {
+        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),
+        inputValue: '',
+        isOpen: state.open,
+        selectedItem: nextOption,
+        type: ''
+      };
+      onChange(changeObject);
+    },
+    value: value?.name,
+    // Setting the first option as a default value when no value is provided
+    // is already done natively by the underlying Ariakit component,
+    // but doing this explicitly avoids the `onChange` callback from firing
+    // on initial render, thus making this implementation closer to the v1.
+    defaultValue: options[0]?.name
+  });
+  const children = options.map(applyOptionDeprecations).map(({
+    name,
+    key,
+    hint,
+    style,
+    className
+  }) => {
+    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: name
+      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {
+        // Keeping the classname for legacy reasons
+        className: "components-custom-select-control__item-hint",
+        children: hint
       })]
-    })]
+    });
+    return /*#__PURE__*/_jsx(CustomSelectItem, {
+      value: name,
+      children: hint ? withHint : name,
+      style: style,
+      className: clsx(className,
+      // Keeping the classnames for legacy reasons
+      'components-custom-select-control__item', {
+        'has-hint': hint
+      })
+    }, key);
   });
-}
-export function StableCustomSelectControl(props) {
-  return /*#__PURE__*/_jsx(CustomSelectControl, {
-    ...props,
-    __experimentalShowSelectedHint: false
+  const {
+    value: currentValue
+  } = store.getState();
+  const renderSelectedValueHint = () => {
+    const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({
+      name
+    }) => currentValue === name)?.hint;
+    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {
+      children: [currentValue, selectedOptionHint && /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {
+        // Keeping the classname for legacy reasons
+        className: "components-custom-select-control__hint",
+        children: selectedOptionHint
+      })]
+    });
+  };
+  const translatedSize = (() => {
+    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {
+      return 'default';
+    }
+    if (!__next40pxDefaultSize && size === 'default') {
+      return 'compact';
+    }
+    return size;
+  })();
+  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;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useSelect","clsx","Icon","check","__","sprintf","useCallback","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","StyledLabel","useDeprecated36pxDefaultSizeProp","InputBase","jsx","_jsx","jsxs","_jsxs","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","ariaActivedescendant","restMenuProps","children","as","suffix","selectSize","__experimentalHint","map","index","style","icon","key","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport InputBase from '../input-control/input-base';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tlet menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tconst {\n\t\t\t'aria-activedescendant': ariaActivedescendant,\n\t\t\t...restMenuProps\n\t\t} = menuProps;\n\t\tmenuProps = restMenuProps;\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'components-custom-select-control', className ) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t\t<div className=\"components-custom-select-control__menu-wrapper\">\n\t\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t\t\t{ isOpen &&\n\t\t\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tkey={ item.key }\n\t\t\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t\t\t'has-hint':\n\t\t\t\t\t\t\t\t\t\t\t\t\t!! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t\t\t'is-next-40px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize,\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport function StableCustomSelectControl( props ) {\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t{ ...props }\n\t\t\t__experimentalShowSelectedHint={ false }\n\t\t/>\n\t);\n}\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

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

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

@@ -0,0 +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 */\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< 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: Array< 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?: 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":[]}

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

@@ -103,7 +103,10 @@ function _CustomSelect(props) {
           store: store,
           sameWidth: true,
           slide: false,
-          onKeyDown: onSelectPopoverKeyDown,
+          onKeyDown: onSelectPopoverKeyDown
+          // Match legacy behavior
+          ,
+          flip: !isLegacy,
           children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {
             value: contextValue,
             children: children

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","createContext","useCallback","useMemo","__","sprintf","VisuallyHidden","Styled","InputBase","SelectControlChevronDown","BaseControl","jsx","_jsx","jsxs","_jsxs","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","e","stopPropagation","contextValue","SelectLabel","render","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","Provider"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '..';\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\tCustomSelectButtonSize,\n\t_CustomSelectInternalProps,\n\t_CustomSelectProps,\n} from './types';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nconst CustomSelectButton = ( {\n\trenderSelectedValue,\n\tsize = 'default',\n\tstore,\n\t...restProps\n}: Omit<\n\tReact.ComponentProps< typeof Ariakit.Select > &\n\t\tCustomSelectButtonProps &\n\t\tCustomSelectButtonSize &\n\t\tCustomSelectStore,\n\t'onChange'\n> ) => {\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectInternalProps &\n\t\t_CustomSelectProps &\n\t\tCustomSelectStore &\n\t\tCustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\tclassName,\n\t\tisLegacy = false,\n\t\t...restProps\n\t} = props;\n\n\tconst onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\tif ( isLegacy ) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ isLegacy ]\n\t\t);\n\n\tconst contextValue = useMemo( () => ( { store, size } ), [ store, size ] );\n\n\treturn (\n\t\t// Where should `restProps` be forwarded to?\n\t\t<div className={ className }>\n\t\t\t<Ariakit.SelectLabel\n\t\t\t\tstore={ store }\n\t\t\t\trender={\n\t\t\t\t\thideLabelFromVision ? (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<VisuallyHidden />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"div\" />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Ariakit.SelectLabel>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<CustomSelectButton\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\t// Match legacy behavior (move selection rather than open the popover)\n\t\t\t\t\tshowOnKeyDown={ ! isLegacy }\n\t\t\t\t/>\n\t\t\t\t<Styled.SelectPopover\n\t\t\t\t\tgutter={ 12 }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\tsameWidth\n\t\t\t\t\tslide={ false }\n\t\t\t\t\tonKeyDown={ onSelectPopoverKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<CustomSelectContext.Provider value={ contextValue }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t\t</Styled.SelectPopover>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","createContext","useCallback","useMemo","__","sprintf","VisuallyHidden","Styled","InputBase","SelectControlChevronDown","BaseControl","jsx","_jsx","jsxs","_jsxs","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","e","stopPropagation","contextValue","SelectLabel","render","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","flip","Provider"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '..';\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\tCustomSelectButtonSize,\n\t_CustomSelectInternalProps,\n\t_CustomSelectProps,\n} from './types';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nconst CustomSelectButton = ( {\n\trenderSelectedValue,\n\tsize = 'default',\n\tstore,\n\t...restProps\n}: Omit<\n\tReact.ComponentProps< typeof Ariakit.Select > &\n\t\tCustomSelectButtonProps &\n\t\tCustomSelectButtonSize &\n\t\tCustomSelectStore,\n\t'onChange'\n> ) => {\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectInternalProps &\n\t\t_CustomSelectProps &\n\t\tCustomSelectStore &\n\t\tCustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\tclassName,\n\t\tisLegacy = false,\n\t\t...restProps\n\t} = props;\n\n\tconst onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\tif ( isLegacy ) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ isLegacy ]\n\t\t);\n\n\tconst contextValue = useMemo( () => ( { store, size } ), [ store, size ] );\n\n\treturn (\n\t\t// Where should `restProps` be forwarded to?\n\t\t<div className={ className }>\n\t\t\t<Ariakit.SelectLabel\n\t\t\t\tstore={ store }\n\t\t\t\trender={\n\t\t\t\t\thideLabelFromVision ? (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<VisuallyHidden />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"div\" />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Ariakit.SelectLabel>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<CustomSelectButton\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\t// Match legacy behavior (move selection rather than open the popover)\n\t\t\t\t\tshowOnKeyDown={ ! isLegacy }\n\t\t\t\t/>\n\t\t\t\t<Styled.SelectPopover\n\t\t\t\t\tgutter={ 12 }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\tsameWidth\n\t\t\t\t\tslide={ false }\n\t\t\t\t\tonKeyDown={ onSelectPopoverKeyDown }\n\t\t\t\t\t// Match legacy behavior\n\t\t\t\t\tflip={ ! isLegacy }\n\t\t\t\t>\n\t\t\t\t\t<CustomSelectContext.Provider value={ contextValue }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t\t</Styled.SelectPopover>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,31 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-export { default } from './default-component';
+import _CustomSelect from './custom-select';
+import Item from './item';
+import { jsx as _jsx } from "react/jsx-runtime";
+function CustomSelectControlV2(props) {
+  const {
+    defaultValue,
+    onChange,
+    value,
+    ...restProps
+  } = props;
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    setValue: nextValue => onChange?.(nextValue),
+    defaultValue,
+    value
+  });
+  return /*#__PURE__*/_jsx(_CustomSelect, {
+    ...restProps,
+    store: store
+  });
+}
+CustomSelectControlV2.Item = Item;
+export default CustomSelectControlV2;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { default } from './default-component';\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,qBAAqB","ignoreList":[]}
+{"version":3,"names":["Ariakit","_CustomSelect","Item","jsx","_jsx","CustomSelectControlV2","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from './custom-select';\nimport type { CustomSelectProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Item from './item';\n\nfunction CustomSelectControlV2(\n\tprops: WordPressComponentProps< CustomSelectProps, 'button', false >\n) {\n\tconst { defaultValue, onChange, value, ...restProps } = props;\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\treturn <_CustomSelect { ...restProps } store={ store } />;\n}\n\nCustomSelectControlV2.Item = Item;\n\nexport default CustomSelectControlV2;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,iBAAiB;AAG3C,OAAOC,IAAI,MAAM,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1B,SAASC,qBAAqBA,CAC7BC,KAAoE,EACnE;EACD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGX,OAAO,CAACY,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,oBAAOL,IAAA,CAACH,aAAa;IAAA,GAAMS,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAEAN,qBAAqB,CAACH,IAAI,GAAGA,IAAI;AAEjC,eAAeG,qBAAqB","ignoreList":[]}