@wordpress/components 26.0.2 → 27.0.0

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

@@ -0,0 +1,82 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { createContext, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+import * as Styled from './styles';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
+export const CustomSelectContext = createContext(undefined);
+function defaultRenderSelectedValue(value) {
+  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
+  if (isValueEmpty) {
+    return __('Select an item');
+  }
+  if (Array.isArray(value)) {
+    return value.length === 1 ? value[0] :
+    // translators: %s: number of items selected (it will always be 2 or more items)
+    sprintf(__('%s items selected'), value.length);
+  }
+  return value;
+}
+const UnconnectedCustomSelectButton = props => {
+  const {
+    renderSelectedValue,
+    size = 'default',
+    store,
+    ...restProps
+  } = useContextSystem(props, 'CustomSelectControlButton');
+  const {
+    value: currentValue
+  } = store.useState();
+  const computedRenderSelectedValue = useMemo(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
+  return createElement(Styled.Select, {
+    ...restProps,
+    size: size,
+    hasCustomRenderProp: !!renderSelectedValue,
+    store: store
+    // to match legacy behavior where using arrow keys
+    // move selection rather than open the popover
+    ,
+    showOnKeyDown: false
+  }, createElement("div", null, computedRenderSelectedValue(currentValue)), createElement(Icon, {
+    icon: chevronDown,
+    size: 18
+  }));
+};
+const CustomSelectButton = contextConnectWithoutRef(UnconnectedCustomSelectButton, 'CustomSelectControlButton');
+function _CustomSelect(props) {
+  const {
+    children,
+    hideLabelFromVision = false,
+    label,
+    store,
+    ...restProps
+  } = props;
+  return createElement(Fragment, null, hideLabelFromVision ?
+  // TODO: Replace with BaseControl
+  createElement(VisuallyHidden, {
+    as: "label"
+  }, label) : createElement(Styled.SelectLabel, {
+    store: store
+  }, label), createElement(CustomSelectButton, {
+    ...restProps,
+    store: store
+  }), createElement(Styled.SelectPopover, {
+    gutter: 12,
+    store: store,
+    sameWidth: true
+  }, createElement(CustomSelectContext.Provider, {
+    value: {
+      store
+    }
+  }, children)));
+}
+export default _CustomSelect;
+//# sourceMappingURL=custom-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useMemo","__","sprintf","Icon","chevronDown","VisuallyHidden","Styled","contextConnectWithoutRef","useContextSystem","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","UnconnectedCustomSelectButton","props","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","createElement","Select","hasCustomRenderProp","showOnKeyDown","icon","CustomSelectButton","_CustomSelect","children","hideLabelFromVision","label","Fragment","as","SelectLabel","SelectPopover","gutter","sameWidth","Provider"],"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';\nimport { Icon, chevronDown } from '@wordpress/icons';\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\t_CustomSelectProps,\n} from './types';\nimport {\n\tcontextConnectWithoutRef,\n\tuseContextSystem,\n\ttype WordPressComponentProps,\n} from '../context';\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 UnconnectedCustomSelectButton = (\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tCustomSelectButtonProps & CustomSelectStore,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t'onChange'\n\t>\n) => {\n\tconst {\n\t\trenderSelectedValue,\n\t\tsize = 'default',\n\t\tstore,\n\t\t...restProps\n\t} = useContextSystem( props, 'CustomSelectControlButton' );\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<div>{ computedRenderSelectedValue( currentValue ) }</div>\n\t\t\t<Icon icon={ chevronDown } size={ 18 } />\n\t\t</Styled.Select>\n\t);\n};\n\nconst CustomSelectButton = contextConnectWithoutRef(\n\tUnconnectedCustomSelectButton,\n\t'CustomSelectControlButton'\n);\n\nfunction _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\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<CustomSelectButton { ...restProps } store={ store } />\n\t\t\t<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.SelectPopover>\n\t\t</>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from '../custom-select';
+function CustomSelect(props) {
+  const {
+    defaultValue,
+    onChange,
+    value,
+    ...restProps
+  } = props;
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    setValue: nextValue => onChange?.(nextValue),
+    defaultValue,
+    value
+  });
+  return createElement(_CustomSelect, {
+    ...restProps,
+    store: store
+  });
+}
+export default CustomSelect;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Ariakit","_CustomSelect","CustomSelect","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue","createElement"],"sources":["@wordpress/components/src/custom-select-control-v2/default-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport type { CustomSelectProps } from '../types';\n\nfunction CustomSelect( props: CustomSelectProps ) {\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\nexport default CustomSelect;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;AAG5C,SAASC,YAAYA,CAAEC,KAAwB,EAAG;EACjD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGR,OAAO,CAACS,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,OAAOM,aAAA,CAACX,aAAa;IAAA,GAAMM,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAEA,eAAeN,YAAY"}

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

@@ -1,78 +1,6 @@
-import { createElement, Fragment } from "react";
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import * as Styled from './styles';
-export const CustomSelectContext = createContext(undefined);
-function defaultRenderSelectedValue(value) {
-  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
-  if (isValueEmpty) {
-    return __('Select an item');
-  }
-  if (Array.isArray(value)) {
-    return value.length === 1 ? value[0] :
-    // translators: %s: number of items selected (it will always be 2 or more items)
-    sprintf(__('%s items selected'), value.length);
-  }
-  return value;
-}
-export function CustomSelect({
-  children,
-  defaultValue,
-  label,
-  onChange,
-  size = 'default',
-  value,
-  renderSelectedValue,
-  ...props
-}) {
-  const store = Ariakit.useSelectStore({
-    setValue: nextValue => onChange?.(nextValue),
-    defaultValue,
-    value,
-    // fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917
-    virtualFocus: false
-  });
-  const {
-    value: currentValue
-  } = store.useState();
-  const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
-  return createElement(Fragment, null, createElement(Styled.CustomSelectLabel, {
-    store: store
-  }, label), createElement(Styled.CustomSelectButton, {
-    ...props,
-    size: size,
-    hasCustomRenderProp: !!renderSelectedValue,
-    store: store
-  }, computedRenderSelectedValue(currentValue), createElement(Ariakit.SelectArrow, null)), createElement(Styled.CustomSelectPopover, {
-    gutter: 12,
-    store: store,
-    sameWidth: true
-  }, createElement(CustomSelectContext.Provider, {
-    value: {
-      store
-    }
-  }, children)));
-}
-export function CustomSelectItem({
-  children,
-  ...props
-}) {
-  const customSelectContext = useContext(CustomSelectContext);
-  return createElement(Styled.CustomSelectItem, {
-    store: customSelectContext?.store,
-    ...props
-  }, children !== null && children !== void 0 ? children : props.value, createElement(Ariakit.SelectItemCheck, null));
-}
+export { default as CustomSelect } from './legacy-adapter';
+export { default as CustomSelectItem } from './custom-select-item';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","createContext","useContext","__","sprintf","Styled","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelect","children","defaultValue","label","onChange","size","renderSelectedValue","props","store","useSelectStore","setValue","nextValue","virtualFocus","currentValue","useState","computedRenderSelectedValue","createElement","Fragment","CustomSelectLabel","CustomSelectButton","hasCustomRenderProp","SelectArrow","CustomSelectPopover","gutter","sameWidth","Provider","CustomSelectItem","customSelectContext","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectProps,\n\tCustomSelectItemProps,\n\tCustomSelectContext as CustomSelectContextType,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {\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\nexport function CustomSelect( {\n\tchildren,\n\tdefaultValue,\n\tlabel,\n\tonChange,\n\tsize = 'default',\n\tvalue,\n\trenderSelectedValue,\n\t...props\n}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t\t// fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917\n\t\tvirtualFocus: false,\n\t} );\n\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue =\n\t\trenderSelectedValue ?? defaultRenderSelectedValue;\n\n\treturn (\n\t\t<>\n\t\t\t<Styled.CustomSelectLabel store={ store }>\n\t\t\t\t{ label }\n\t\t\t</Styled.CustomSelectLabel>\n\t\t\t<Styled.CustomSelectButton\n\t\t\t\t{ ...props }\n\t\t\t\tsize={ size }\n\t\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\t\tstore={ store }\n\t\t\t>\n\t\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t\t\t<Ariakit.SelectArrow />\n\t\t\t</Styled.CustomSelectButton>\n\t\t\t<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.CustomSelectPopover>\n\t\t</>\n\t);\n}\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.CustomSelectItem\n\t\t\tstore={ customSelectContext?.store }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? props.value }\n\t\t\t<Ariakit.SelectItemCheck />\n\t\t</Styled.CustomSelectItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,SAASC,aAAa,EAAEC,UAAU,QAAQ,oBAAoB;AAC9D,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,UAAU;AAQlC,OAAO,MAAMC,mBAAmB,GAC/BL,aAAa,CAA6BM,SAAU,CAAC;AAEtD,SAASC,0BAA0BA,CAAEC,KAAmC,EAAG;EAC1E,MAAMC,YAAY,GAAGC,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,GACxCA,KAAK,CAACI,MAAM,KAAK,CAAC,GAClBJ,KAAK,KAAKF,SAAS,IAAIE,KAAK,KAAK,IAAI;EAExC,IAAKC,YAAY,EAAG;IACnB,OAAOP,EAAE,CAAE,gBAAiB,CAAC;EAC9B;EAEA,IAAKQ,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACI,MAAM,KAAK,CAAC,GACtBJ,KAAK,CAAE,CAAC,CAAE;IACV;IACAL,OAAO,CAAED,EAAE,CAAE,mBAAoB,CAAC,EAAEM,KAAK,CAACI,MAAO,CAAC;EACtD;EAEA,OAAOJ,KAAK;AACb;AAEA,OAAO,SAASK,YAAYA,CAAE;EAC7BC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBV,KAAK;EACLW,mBAAmB;EACnB,GAAGC;AAC2D,CAAC,EAAG;EAClE,MAAMC,KAAK,GAAGtB,OAAO,CAACuB,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMP,QAAQ,GAAIO,SAAU,CAAC;IAClDT,YAAY;IACZP,KAAK;IACL;IACAiB,YAAY,EAAE;EACf,CAAE,CAAC;EAEH,MAAM;IAAEjB,KAAK,EAAEkB;EAAa,CAAC,GAAGL,KAAK,CAACM,QAAQ,CAAC,CAAC;EAEhD,MAAMC,2BAA2B,GAChCT,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAIZ,0BAA0B;EAElD,OACCsB,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACzB,MAAM,CAAC2B,iBAAiB;IAACV,KAAK,EAAGA;EAAO,GACtCL,KACuB,CAAC,EAC3Ba,aAAA,CAACzB,MAAM,CAAC4B,kBAAkB;IAAA,GACpBZ,KAAK;IACVF,IAAI,EAAGA,IAAM;IACbe,mBAAmB,EAAG,CAAC,CAAEd,mBAAqB;IAC9CE,KAAK,EAAGA;EAAO,GAEbO,2BAA2B,CAAEF,YAAa,CAAC,EAC7CG,aAAA,CAAC9B,OAAO,CAACmC,WAAW,MAAE,CACI,CAAC,EAC5BL,aAAA,CAACzB,MAAM,CAAC+B,mBAAmB;IAACC,MAAM,EAAG,EAAI;IAACf,KAAK,EAAGA,KAAO;IAACgB,SAAS;EAAA,GAClER,aAAA,CAACxB,mBAAmB,CAACiC,QAAQ;IAAC9B,KAAK,EAAG;MAAEa;IAAM;EAAG,GAC9CP,QAC2B,CACH,CAC3B,CAAC;AAEL;AAEA,OAAO,SAASyB,gBAAgBA,CAAE;EACjCzB,QAAQ;EACR,GAAGM;AAC4D,CAAC,EAAG;EACnE,MAAMoB,mBAAmB,GAAGvC,UAAU,CAAEI,mBAAoB,CAAC;EAC7D,OACCwB,aAAA,CAACzB,MAAM,CAACmC,gBAAgB;IACvBlB,KAAK,EAAGmB,mBAAmB,EAAEnB,KAAO;IAAA,GAC/BD;EAAK,GAERN,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIM,KAAK,CAACZ,KAAK,EACzBqB,aAAA,CAAC9B,OAAO,CAAC0C,eAAe,MAAE,CACF,CAAC;AAE5B"}
+{"version":3,"names":["default","CustomSelect","CustomSelectItem"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { default as CustomSelect } from './legacy-adapter';\nexport { default as CustomSelectItem } from './custom-select-item';\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,YAAY,QAAQ,kBAAkB;AAC1D,SAASD,OAAO,IAAIE,gBAAgB,QAAQ,sBAAsB"}

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

@@ -0,0 +1,21 @@
+import { createElement } from "react";
+/**
+ * Internal dependencies
+ */
+import _LegacyCustomSelect from './legacy-component';
+import _NewCustomSelect from './default-component';
+function isLegacy(props) {
+  return typeof props.options !== 'undefined';
+}
+function CustomSelect(props) {
+  if (isLegacy(props)) {
+    return createElement(_LegacyCustomSelect, {
+      ...props
+    });
+  }
+  return createElement(_NewCustomSelect, {
+    ...props
+  });
+}
+export default CustomSelect;
+//# sourceMappingURL=legacy-adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_LegacyCustomSelect","_NewCustomSelect","isLegacy","props","options","CustomSelect","createElement"],"sources":["@wordpress/components/src/custom-select-control-v2/legacy-adapter.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport _LegacyCustomSelect from './legacy-component';\nimport _NewCustomSelect from './default-component';\nimport type { CustomSelectProps, LegacyCustomSelectProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction isLegacy( props: any ): props is LegacyCustomSelectProps {\n\treturn typeof props.options !== 'undefined';\n}\n\nfunction CustomSelect(\n\tprops:\n\t\t| LegacyCustomSelectProps\n\t\t| WordPressComponentProps< CustomSelectProps, 'button', false >\n) {\n\tif ( isLegacy( props ) ) {\n\t\treturn <_LegacyCustomSelect { ...props } />;\n\t}\n\n\treturn <_NewCustomSelect { ...props } />;\n}\n\nexport default CustomSelect;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,mBAAmB,MAAM,oBAAoB;AACpD,OAAOC,gBAAgB,MAAM,qBAAqB;AAIlD,SAASC,QAAQA,CAAEC,KAAU,EAAqC;EACjE,OAAO,OAAOA,KAAK,CAACC,OAAO,KAAK,WAAW;AAC5C;AAEA,SAASC,YAAYA,CACpBF,KAEgE,EAC/D;EACD,IAAKD,QAAQ,CAAEC,KAAM,CAAC,EAAG;IACxB,OAAOG,aAAA,CAACN,mBAAmB;MAAA,GAAMG;IAAK,CAAI,CAAC;EAC5C;EAEA,OAAOG,aAAA,CAACL,gBAAgB;IAAA,GAAME;EAAK,CAAI,CAAC;AACzC;AAEA,eAAeE,YAAY"}

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

@@ -0,0 +1,111 @@
+import { createElement, Fragment } from "react";
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from '../custom-select';
+import { CustomSelectItem } from '..';
+import * as Styled from '../styles';
+import { ContextSystemProvider } from '../../context';
+function CustomSelect(props) {
+  const {
+    __experimentalShowSelectedHint,
+    __next40pxDefaultSize = false,
+    options,
+    onChange,
+    size = 'default',
+    value,
+    ...restProps
+  } = props;
+
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    async setValue(nextValue) {
+      if (!onChange) return;
+
+      // Executes the logic in a microtask after the popup is closed.
+      // This is simply to ensure the isOpen state matches that in Downshift.
+      await Promise.resolve();
+      const state = store.getState();
+      const changeObject = {
+        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),
+        inputValue: '',
+        isOpen: state.open,
+        selectedItem: {
+          name: nextValue,
+          key: nextValue
+        },
+        type: ''
+      };
+      onChange(changeObject);
+    }
+  });
+  const children = options.map(({
+    name,
+    key,
+    __experimentalHint,
+    ...rest
+  }) => {
+    const withHint = createElement(Styled.WithHintWrapper, null, createElement("span", null, name), createElement(Styled.ExperimentalHintItem, {
+      className: "components-custom-select-control__item-hint"
+    }, __experimentalHint));
+    return createElement(CustomSelectItem, {
+      key: key,
+      value: name,
+      children: __experimentalShowSelectedHint ? withHint : name,
+      ...rest
+    });
+  });
+  const renderSelectedValueHint = () => {
+    const {
+      value: currentValue
+    } = store.getState();
+    const currentHint = options?.find(({
+      name
+    }) => currentValue === name);
+    return createElement(Fragment, null, currentValue, createElement(Styled.SelectedExperimentalHintItem, {
+      className: "components-custom-select-control__hint"
+    }, currentHint?.__experimentalHint));
+  };
+
+  // translate legacy button sizing
+  const contextSystemValue = useMemo(() => {
+    let selectedSize;
+    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {
+      selectedSize = 'default';
+    } else if (!__next40pxDefaultSize && size === 'default') {
+      selectedSize = 'compact';
+    } else {
+      selectedSize = size;
+    }
+    return {
+      CustomSelectControlButton: {
+        _overrides: {
+          size: selectedSize
+        }
+      }
+    };
+  }, [__next40pxDefaultSize, size]);
+  const translatedProps = {
+    'aria-describedby': props.describedBy,
+    children,
+    renderSelectedValue: __experimentalShowSelectedHint ? renderSelectedValueHint : undefined,
+    ...restProps
+  };
+  return createElement(ContextSystemProvider, {
+    value: contextSystemValue
+  }, createElement(_CustomSelect, {
+    ...translatedProps,
+    store: store
+  }));
+}
+export default CustomSelect;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Ariakit","useMemo","_CustomSelect","CustomSelectItem","Styled","ContextSystemProvider","CustomSelect","props","__experimentalShowSelectedHint","__next40pxDefaultSize","options","onChange","size","value","restProps","store","useSelectStore","setValue","nextValue","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","item","inputValue","isOpen","open","selectedItem","name","key","type","children","map","__experimentalHint","rest","withHint","createElement","WithHintWrapper","ExperimentalHintItem","className","renderSelectedValueHint","currentValue","currentHint","find","Fragment","SelectedExperimentalHintItem","contextSystemValue","selectedSize","CustomSelectControlButton","_overrides","translatedProps","describedBy","renderSelectedValue","undefined"],"sources":["@wordpress/components/src/custom-select-control-v2/legacy-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport type { LegacyCustomSelectProps } from '../types';\nimport { CustomSelectItem } from '..';\nimport * as Styled from '../styles';\nimport { ContextSystemProvider } from '../../context';\n\nfunction CustomSelect( props: LegacyCustomSelectProps ) {\n\tconst {\n\t\t__experimentalShowSelectedHint,\n\t\t__next40pxDefaultSize = false,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tif ( ! onChange ) return;\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 that in Downshift.\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: {\n\t\t\t\t\tname: nextValue as string,\n\t\t\t\t\tkey: nextValue as string,\n\t\t\t\t},\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t} );\n\n\tconst children = options.map(\n\t\t( { name, key, __experimentalHint, ...rest } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.ExperimentalHintItem className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t{ __experimentalHint }\n\t\t\t\t\t</Styled.ExperimentalHintItem>\n\t\t\t\t</Styled.WithHintWrapper>\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={\n\t\t\t\t\t\t__experimentalShowSelectedHint ? withHint : name\n\t\t\t\t\t}\n\t\t\t\t\t{ ...rest }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst currentHint = options?.find(\n\t\t\t( { name } ) => currentValue === name\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ currentValue }\n\t\t\t\t<Styled.SelectedExperimentalHintItem className=\"components-custom-select-control__hint\">\n\t\t\t\t\t{ currentHint?.__experimentalHint }\n\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t</>\n\t\t);\n\t};\n\n\t// translate legacy button sizing\n\tconst contextSystemValue = useMemo( () => {\n\t\tlet selectedSize;\n\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\tselectedSize = 'default';\n\t\t} else if ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\tselectedSize = 'compact';\n\t\t} else {\n\t\t\tselectedSize = size;\n\t\t}\n\n\t\treturn {\n\t\t\tCustomSelectControlButton: { _overrides: { size: selectedSize } },\n\t\t};\n\t}, [ __next40pxDefaultSize, size ] );\n\n\tconst translatedProps = {\n\t\t'aria-describedby': props.describedBy,\n\t\tchildren,\n\t\trenderSelectedValue: __experimentalShowSelectedHint\n\t\t\t? renderSelectedValueHint\n\t\t\t: undefined,\n\t\t...restProps,\n\t};\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<_CustomSelect { ...translatedProps } store={ store } />\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default CustomSelect;\n"],"mappings":"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"}