@wordpress/components 28.2.0 → 28.4.0

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

@@ -4,199 +4,150 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StableCustomSelectControl = StableCustomSelectControl;
-exports.default = CustomSelectControl;
-var _downshift = require("downshift");
+exports.default = void 0;
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _icons = require("@wordpress/icons");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _visuallyHidden = require("../visually-hidden");
-var _selectControlStyles = require("../select-control/styles/select-control-styles");
-var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
-var _baseControlStyles = require("../base-control/styles/base-control-styles");
-var _useDeprecatedProps = require("../utils/use-deprecated-props");
-var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
+var _customSelect = _interopRequireDefault(require("../custom-select-control-v2/custom-select"));
+var _item = _interopRequireDefault(require("../custom-select-control-v2/item"));
+var Styled = _interopRequireWildcard(require("../custom-select-control-v2/styles"));
 var _jsxRuntime = require("react/jsx-runtime");
-// @ts-nocheck
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * External dependencies
  */
 
-/**
- * WordPress dependencies
- */
-
 /**
  * Internal dependencies
  */
 
-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 _downshift.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 _downshift.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;
-  }
-};
+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 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
-  } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
-  const {
-    getLabelProps,
-    getToggleButtonProps,
-    getMenuProps,
-    getItemProps,
-    isOpen,
-    highlightedIndex,
-    selectedItem
-  } = (0, _downshift.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 (0, _i18n.__)('No selection');
-    }
+    value,
+    className: classNameProp,
+    showSelectedHint = false,
+    ...restProps
+  } = useDeprecatedProps(props);
 
-    // translators: %s: The selected option.
-    return (0, _i18n.sprintf)((0, _i18n.__)('Currently selected: %s'), selectedItem.name);
-  }
-  let menuProps = getMenuProps({
-    className: 'components-custom-select-control__menu',
-    'aria-hidden': !isOpen
-  });
-  const onKeyDownHandler = (0, _element.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__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _clsx.default)('components-custom-select-control', className),
-    children: [hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
-      as: "label",
-      ...getLabelProps(),
-      children: label
-    }) :
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-    (0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
-      ...getLabelProps({
-        className: 'components-custom-select-control__label'
-      }),
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_inputBase.default, {
-      __next40pxDefaultSize: __next40pxDefaultSize,
-      size: size,
-      suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chevronDown.default, {}),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_selectControlStyles.Select, {
-        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__*/(0, _jsxRuntime.jsx)("span", {
-          className: "components-custom-select-control__hint",
-          children: selectedItem.__experimentalHint
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "components-custom-select-control__menu-wrapper",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-          ...menuProps,
-          onKeyDown: onKeyDownHandler,
-          children: isOpen && items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            ...getItemProps({
-              item,
-              index,
-              className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)("span", {
-              className: "components-custom-select-control__item-hint",
-              children: item.__experimentalHint
-            }), item === selectedItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-              icon: _icons.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__*/(0, _jsxRuntime.jsxs)(Styled.WithHintItemWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.WithHintItemHint, {
+        // Keeping the classname for legacy reasons
+        className: "components-custom-select-control__item-hint",
+        children: hint
       })]
-    })]
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+      value: name,
+      children: hint ? withHint : name,
+      style: style,
+      className: (0, _clsx.default)(className,
+      // Keeping the classnames for legacy reasons
+      'components-custom-select-control__item', {
+        'has-hint': hint
+      })
+    }, key);
   });
-}
-function StableCustomSelectControl(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectControl, {
-    ...props,
-    __experimentalShowSelectedHint: false
+  const renderSelectedValueHint = () => {
+    const {
+      value: currentValue
+    } = store.getState();
+    const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({
+      name
+    }) => currentValue === name)?.hint;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Styled.SelectedExperimentalHintWrapper, {
+      children: [currentValue, selectedOptionHint && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
+    "aria-describedby": describedBy,
+    renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
+    size: translatedSize,
+    store: store,
+    className: (0, _clsx.default)(
+    // Keeping the classname for legacy reasons
+    'components-custom-select-control', classNameProp),
+    isLegacy: true,
+    ...restProps,
+    children: children
   });
 }
+var _default = exports.default = CustomSelectControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_downshift","require","_clsx","_interopRequireDefault","_icons","_i18n","_element","_visuallyHidden","_selectControlStyles","_chevronDown","_baseControlStyles","_useDeprecatedProps","_inputBase","_jsxRuntime","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","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","useDeprecated36pxDefaultSizeProp","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","getDescribedBy","__","sprintf","menuProps","onKeyDownHandler","useCallback","e","stopPropagation","onKeyDown","startsWith","ariaActivedescendant","restMenuProps","jsxs","clsx","children","jsx","VisuallyHidden","as","StyledLabel","default","suffix","Select","selectSize","__experimentalHint","map","index","style","Icon","icon","check","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","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_customSelect","_item","Styled","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","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","jsxs","WithHintItemWrapper","jsx","WithHintItemHint","clsx","renderSelectedValueHint","currentValue","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","renderSelectedValue","undefined","isLegacy","_default","exports"],"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":[]}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/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 */\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":[]}

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

@@ -5,15 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CustomSelectContext = void 0;
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _ = require("..");
 var Styled = _interopRequireWildcard(require("./styles"));
 var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
 var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
+var _baseControl = _interopRequireDefault(require("../base-control"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -49,11 +55,7 @@ const CustomSelectButton = ({
     ...restProps,
     size: size,
     hasCustomRenderProp: !!renderSelectedValue,
-    store: store
-    // to match legacy behavior where using arrow keys
-    // move selection rather than open the popover
-    ,
-    showOnKeyDown: false,
+    store: store,
     children: computedRenderSelectedValue(currentValue)
   });
 };
@@ -64,39 +66,64 @@ function _CustomSelect(props) {
     label,
     size,
     store,
+    className,
+    isLegacy = false,
     ...restProps
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [hideLabelFromVision ?
+  const onSelectPopoverKeyDown = (0, _element.useCallback)(e => {
+    if (isLegacy) {
+      e.stopPropagation();
+    }
+  }, [isLegacy]);
+  const contextValue = (0, _element.useMemo)(() => ({
+    store,
+    size
+  }), [store, size]);
+  return (
     /*#__PURE__*/
-    // TODO: Replace with BaseControl
-    (0, _jsxRuntime.jsx)(_.VisuallyHidden, {
-      as: "label",
-      children: label
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.SelectLabel, {
-      store: store,
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_inputBase.default, {
-      __next40pxDefaultSize: true,
-      size: size,
-      suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chevronDown.default, {}),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectButton, {
-        ...restProps,
-        size: size,
-        store: store
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.SelectPopover, {
-        gutter: 12,
+    // Where should `restProps` be forwarded to?
+    (0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.SelectLabel, {
         store: store,
-        sameWidth: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectContext.Provider, {
-          value: {
-            store
-          },
-          children: children
-        })
+        render: hideLabelFromVision ?
+        /*#__PURE__*/
+        // @ts-expect-error `children` are passed via the render prop
+        (0, _jsxRuntime.jsx)(_.VisuallyHidden, {}) :
+        /*#__PURE__*/
+        // @ts-expect-error `children` are passed via the render prop
+        (0, _jsxRuntime.jsx)(_baseControl.default.VisualLabel, {
+          as: "div"
+        }),
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_inputBase.default, {
+        __next40pxDefaultSize: true,
+        size: size,
+        suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chevronDown.default, {}),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectButton, {
+          ...restProps,
+          size: size,
+          store: store
+          // Match legacy behavior (move selection rather than open the popover)
+          ,
+          showOnKeyDown: !isLegacy
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.SelectPopover, {
+          gutter: 12,
+          store: store,
+          sameWidth: true,
+          slide: false,
+          onKeyDown: onSelectPopoverKeyDown
+          // Match legacy behavior
+          ,
+          flip: !isLegacy,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectContext.Provider, {
+            value: contextValue,
+            children: children
+          })
+        })]
       })]
-    })]
-  });
+    })
+  );
 }
 var _default = exports.default = _CustomSelect;
 //# sourceMappingURL=custom-select.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_","Styled","_interopRequireWildcard","_inputBase","_interopRequireDefault","_chevronDown","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CustomSelectContext","exports","createContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","__","sprintf","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","useMemo","jsx","Select","hasCustomRenderProp","showOnKeyDown","children","_CustomSelect","props","hideLabelFromVision","label","jsxs","Fragment","VisuallyHidden","as","SelectLabel","__next40pxDefaultSize","suffix","SelectPopover","gutter","sameWidth","Provider","_default"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, 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_CustomSelectProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\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\tWordPressComponentProps<\n\t\tCustomSelectButtonProps & CustomSelectButtonSize & CustomSelectStore,\n\t\t'button',\n\t\tfalse\n\t>,\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\t// to match legacy behavior where using arrow keys\n\t\t\t// move selection rather than open the popover\n\t\t\tshowOnKeyDown={ false }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectProps & CustomSelectStore & CustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\t...restProps\n\t} = props;\n\n\treturn (\n\t\t<>\n\t\t\t{ hideLabelFromVision ? ( // TODO: Replace with BaseControl\n\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t<Styled.SelectLabel store={ store }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Styled.SelectLabel>\n\t\t\t) }\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/>\n\t\t\t\t<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\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</>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_element","_i18n","_","Styled","_inputBase","_interopRequireDefault","_chevronDown","_baseControl","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CustomSelectContext","exports","createContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","__","sprintf","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","useMemo","jsx","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","useCallback","stopPropagation","contextValue","jsxs","SelectLabel","render","VisuallyHidden","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","flip","Provider","_default"],"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/custom-select-control-v2/index.js

@@ -4,11 +4,39 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _defaultComponent.default;
-  }
-});
-var _defaultComponent = _interopRequireDefault(require("./default-component"));
+exports.default = void 0;
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
+var _customSelect = _interopRequireDefault(require("./custom-select"));
+var _item = _interopRequireDefault(require("./item"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+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__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
+    ...restProps,
+    store: store
+  });
+}
+CustomSelectControlV2.Item = _item.default;
+var _default = exports.default = CustomSelectControlV2;
 //# sourceMappingURL=index.js.map