@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/build-module/search-control/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,74 +10,92 @@ import classnames from 'classnames';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
-import BaseControl from '../base-control';
+import { ContextSystemProvider } from '../context';
+import { StyledInputControl, SuffixItemWrapper } from './styles';
+function SuffixItem({
+  searchRef,
+  value,
+  onChange,
+  onClose
+}) {
+  if (!onClose && !value) {
+    return createElement(Icon, {
+      icon: search
+    });
+  }
+  const onReset = () => {
+    onChange('');
+    searchRef.current?.focus();
+  };
+  return createElement(Button, {
+    size: "small",
+    icon: closeSmall,
+    label: onClose ? __('Close search') : __('Reset search'),
+    onClick: onClose !== null && onClose !== void 0 ? onClose : onReset
+  });
+}
 function UnforwardedSearchControl({
-  __nextHasNoMarginBottom,
+  __nextHasNoMarginBottom = false,
   className,
   onChange,
-  onKeyDown,
   value,
-  label,
+  label = __('Search'),
   placeholder = __('Search'),
   hideLabelFromVision = true,
-  help,
   onClose,
+  size = 'default',
   ...restProps
 }, forwardedRef) {
-  const searchRef = useRef();
-  const instanceId = useInstanceId(SearchControl);
-  const id = `components-search-control-${instanceId}`;
-  const renderRightButton = () => {
-    if (onClose) {
-      return createElement(Button, {
-        icon: closeSmall,
-        label: __('Close search'),
-        onClick: onClose
-      });
-    }
-    if (!!value) {
-      return createElement(Button, {
-        icon: closeSmall,
-        label: __('Reset search'),
-        onClick: () => {
-          onChange('');
-          searchRef.current?.focus();
-        }
-      });
+  // @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
+  // Work with the design team (@WordPress/gutenberg-design) if you need this feature.
+  delete restProps.disabled;
+  const searchRef = useRef(null);
+  const instanceId = useInstanceId(SearchControl, 'components-search-control');
+  const contextValue = useMemo(() => ({
+    // Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
+    // to provide backwards compatibile margin for SearchControl.
+    // (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
+    BaseControl: {
+      _overrides: {
+        __nextHasNoMarginBottom
+      }
+    },
+    // `isBorderless` is still experimental and not a public prop for InputControl yet.
+    InputBase: {
+      isBorderless: true
     }
-    return createElement(Icon, {
-      icon: search
-    });
-  };
-  return createElement(BaseControl, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    label: label,
-    id: id,
+  }), [__nextHasNoMarginBottom]);
+  return createElement(ContextSystemProvider, {
+    value: contextValue
+  }, createElement(StyledInputControl, {
+    __next40pxDefaultSize: true,
+    id: instanceId,
     hideLabelFromVision: hideLabelFromVision,
-    help: help,
-    className: classnames(className, 'components-search-control')
-  }, createElement("div", {
-    className: "components-search-control__input-wrapper"
-  }, createElement("input", {
-    ...restProps,
+    label: label,
     ref: useMergeRefs([searchRef, forwardedRef]),
-    className: "components-search-control__input",
-    id: id,
     type: "search",
-    placeholder: placeholder,
-    onChange: event => onChange(event.target.value),
-    onKeyDown: onKeyDown,
+    size: size,
+    className: classnames('components-search-control', className),
+    onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),
     autoComplete: "off",
-    value: value || ''
-  }), createElement("div", {
-    className: "components-search-control__icon"
-  }, renderRightButton())));
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : '',
+    suffix: createElement(SuffixItemWrapper, {
+      size: size
+    }, createElement(SuffixItem, {
+      searchRef: searchRef,
+      value: value,
+      onChange: onChange,
+      onClose: onClose
+    })),
+    ...restProps
+  }));
 }
 
 /**
@@ -92,6 +110,7 @@ function UnforwardedSearchControl({
  *
  *   return (
  *     <SearchControl
+ *       __nextHasNoMarginBottom
  *       value={ searchInput }
  *       onChange={ setSearchInput }
  *     />

package/build-module/search-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useInstanceId","useMergeRefs","__","Icon","search","closeSmall","forwardRef","useRef","Button","BaseControl","UnforwardedSearchControl","__nextHasNoMarginBottom","className","onChange","onKeyDown","value","label","placeholder","hideLabelFromVision","help","onClose","restProps","forwardedRef","searchRef","instanceId","SearchControl","id","renderRightButton","createElement","icon","onClick","current","focus","ref","type","event","target","autoComplete"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { SearchControlProps } from './types';\nimport type { ForwardedRef } from 'react';\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tclassName,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tvalue,\n\t\tlabel,\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\thelp,\n\t\tonClose,\n\t\t...restProps\n\t}: WordPressComponentProps< SearchControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\tconst searchRef = useRef< HTMLInputElement >();\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst id = `components-search-control-${ instanceId }`;\n\n\tconst renderRightButton = () => {\n\t\tif ( onClose ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close search' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\tsearchRef.current?.focus();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn <Icon icon={ search } />;\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control' ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value || '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,aAAa,EAAEC,YAAY,QAAQ,oBAAoB;AAChE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,MAAM,EAAEC,UAAU,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,WAAW,MAAM,iBAAiB;AAKzC,SAASC,wBAAwBA,CAChC;EACCC,uBAAuB;EACvBC,SAAS;EACTC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,WAAW,GAAGf,EAAE,CAAE,QAAS,CAAC;EAC5BgB,mBAAmB,GAAG,IAAI;EAC1BC,IAAI;EACJC,OAAO;EACP,GAAGC;AAC2D,CAAC,EAChEC,YAA8C,EAC7C;EACD,MAAMC,SAAS,GAAGhB,MAAM,CAAqB,CAAC;EAC9C,MAAMiB,UAAU,GAAGxB,aAAa,CAAEyB,aAAc,CAAC;EACjD,MAAMC,EAAE,GAAI,6BAA6BF,UAAY,EAAC;EAEtD,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;IAC/B,IAAKP,OAAO,EAAG;MACd,OACCQ,aAAA,CAACpB,MAAM;QACNqB,IAAI,EAAGxB,UAAY;QACnBW,KAAK,EAAGd,EAAE,CAAE,cAAe,CAAG;QAC9B4B,OAAO,EAAGV;MAAS,CACnB,CAAC;IAEJ;IAEA,IAAK,CAAC,CAAEL,KAAK,EAAG;MACf,OACCa,aAAA,CAACpB,MAAM;QACNqB,IAAI,EAAGxB,UAAY;QACnBW,KAAK,EAAGd,EAAE,CAAE,cAAe,CAAG;QAC9B4B,OAAO,EAAGA,CAAA,KAAM;UACfjB,QAAQ,CAAE,EAAG,CAAC;UACdU,SAAS,CAACQ,OAAO,EAAEC,KAAK,CAAC,CAAC;QAC3B;MAAG,CACH,CAAC;IAEJ;IAEA,OAAOJ,aAAA,CAACzB,IAAI;MAAC0B,IAAI,EAAGzB;IAAQ,CAAE,CAAC;EAChC,CAAC;EAED,OACCwB,aAAA,CAACnB,WAAW;IACXE,uBAAuB,EAAGA,uBAAyB;IACnDK,KAAK,EAAGA,KAAO;IACfU,EAAE,EAAGA,EAAI;IACTR,mBAAmB,EAAGA,mBAAqB;IAC3CC,IAAI,EAAGA,IAAM;IACbP,SAAS,EAAGb,UAAU,CAAEa,SAAS,EAAE,2BAA4B;EAAG,GAElEgB,aAAA;IAAKhB,SAAS,EAAC;EAA0C,GACxDgB,aAAA;IAAA,GACMP,SAAS;IACdY,GAAG,EAAGhC,YAAY,CAAE,CAAEsB,SAAS,EAAED,YAAY,CAAG,CAAG;IACnDV,SAAS,EAAC,kCAAkC;IAC5Cc,EAAE,EAAGA,EAAI;IACTQ,IAAI,EAAC,QAAQ;IACbjB,WAAW,EAAGA,WAAa;IAC3BJ,QAAQ,EAAKsB,KAAK,IAAMtB,QAAQ,CAAEsB,KAAK,CAACC,MAAM,CAACrB,KAAM,CAAG;IACxDD,SAAS,EAAGA,SAAW;IACvBuB,YAAY,EAAC,KAAK;IAClBtB,KAAK,EAAGA,KAAK,IAAI;EAAI,CACrB,CAAC,EACFa,aAAA;IAAKhB,SAAS,EAAC;EAAiC,GAC7Ce,iBAAiB,CAAC,CAChB,CACD,CACO,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMF,aAAa,GAAGnB,UAAU,CAAEI,wBAAyB,CAAC;AAEnE,eAAee,aAAa"}
+{"version":3,"names":["classnames","useInstanceId","useMergeRefs","__","Icon","search","closeSmall","forwardRef","useMemo","useRef","Button","ContextSystemProvider","StyledInputControl","SuffixItemWrapper","SuffixItem","searchRef","value","onChange","onClose","createElement","icon","onReset","current","focus","size","label","onClick","UnforwardedSearchControl","__nextHasNoMarginBottom","className","placeholder","hideLabelFromVision","restProps","forwardedRef","disabled","instanceId","SearchControl","contextValue","BaseControl","_overrides","InputBase","isBorderless","__next40pxDefaultSize","id","ref","type","nextValue","autoComplete","suffix"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { SearchControlProps, SuffixItemProps } from './types';\nimport type { ForwardedRef } from 'react';\nimport { ContextSystemProvider } from '../context';\nimport { StyledInputControl, SuffixItemWrapper } from './styles';\n\nfunction SuffixItem( {\n\tsearchRef,\n\tvalue,\n\tonChange,\n\tonClose,\n}: SuffixItemProps ) {\n\tif ( ! onClose && ! value ) {\n\t\treturn <Icon icon={ search } />;\n\t}\n\n\tconst onReset = () => {\n\t\tonChange( '' );\n\t\tsearchRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tsize=\"small\"\n\t\t\ticon={ closeSmall }\n\t\t\tlabel={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }\n\t\t\tonClick={ onClose ?? onReset }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tonChange,\n\t\tvalue,\n\t\tlabel = __( 'Search' ),\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: Omit<\n\t\tWordPressComponentProps< SearchControlProps, 'input', false >,\n\t\t// TODO: Background styling currently doesn't support a disabled state. Needs design work.\n\t\t'disabled'\n\t>,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\t// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n\t// Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n\tdelete restProps.disabled;\n\n\tconst searchRef = useRef< HTMLInputElement >( null );\n\tconst instanceId = useInstanceId(\n\t\tSearchControl,\n\t\t'components-search-control'\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\t// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system\n\t\t\t// to provide backwards compatibile margin for SearchControl.\n\t\t\t// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)\n\t\t\tBaseControl: { _overrides: { __nextHasNoMarginBottom } },\n\t\t\t// `isBorderless` is still experimental and not a public prop for InputControl yet.\n\t\t\tInputBase: { isBorderless: true },\n\t\t} ),\n\t\t[ __nextHasNoMarginBottom ]\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t<StyledInputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tid={ instanceId }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\ttype=\"search\"\n\t\t\t\tsize={ size }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-search-control',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tonChange={ ( nextValue?: string ) =>\n\t\t\t\t\tonChange( nextValue ?? '' )\n\t\t\t\t}\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tvalue={ value ?? '' }\n\t\t\t\tsuffix={\n\t\t\t\t\t<SuffixItemWrapper size={ size }>\n\t\t\t\t\t\t<SuffixItem\n\t\t\t\t\t\t\tsearchRef={ searchRef }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SuffixItemWrapper>\n\t\t\t\t}\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       __nextHasNoMarginBottom\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"],"mappings":"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"}

package/build-module/search-control/index.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/search-control/styles.js

@@ -0,0 +1,29 @@
+import _styled from "@emotion/styled/base";
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { space } from '../utils/space';
+import InputControl from '../input-control';
+import { COLORS } from '../utils';
+const inlinePadding = ({
+  size
+}) => {
+  return space(size === 'compact' ? 1 : 2);
+};
+export const SuffixItemWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "effl84m1"
+} : {
+  target: "effl84m1",
+  label: "SuffixItemWrapper"
+})("display:flex;padding-inline-end:", inlinePadding, ";svg{fill:currentColor;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VhcmNoLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWFyY2gtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2VhcmNoQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IGlubGluZVBhZGRpbmcgPSAoIHtcblx0c2l6ZSxcbn06IFJlcXVpcmVkPCBQaWNrPCBTZWFyY2hDb250cm9sUHJvcHMsICdzaXplJyA+ID4gKSA9PiB7XG5cdHJldHVybiBzcGFjZSggc2l6ZSA9PT0gJ2NvbXBhY3QnID8gMSA6IDIgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdWZmaXhJdGVtV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmctaW5saW5lLWVuZDogJHsgaW5saW5lUGFkZGluZyB9O1xuXG5cdHN2ZyB7XG5cdFx0ZmlsbDogY3VycmVudENvbG9yO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0aW5wdXRbdHlwZT0nc2VhcmNoJ10ge1xuXHRcdCY6Oi13ZWJraXQtc2VhcmNoLWRlY29yYXRpb24sXG5cdFx0Jjo6LXdlYmtpdC1zZWFyY2gtY2FuY2VsLWJ1dHRvbixcblx0XHQmOjotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWJ1dHRvbixcblx0XHQmOjotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWRlY29yYXRpb24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xuXHRcdH1cblx0fVxuXG5cdCY6bm90KCA6Zm9jdXMtd2l0aGluICkge1xuXHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1iYWNrZ3JvdW5kOiAkeyBDT0xPUlMudGhlbWUuZ3JheVsgMTAwIF0gfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const StyledInputControl = /*#__PURE__*/_styled(InputControl, process.env.NODE_ENV === "production" ? {
+  target: "effl84m0"
+} : {
+  target: "effl84m0",
+  label: "StyledInputControl"
+})("input[type='search']{&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}}&:not( :focus-within ){--wp-components-color-background:", COLORS.theme.gray[100], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VhcmNoLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCd0QiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWFyY2gtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2VhcmNoQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IGlubGluZVBhZGRpbmcgPSAoIHtcblx0c2l6ZSxcbn06IFJlcXVpcmVkPCBQaWNrPCBTZWFyY2hDb250cm9sUHJvcHMsICdzaXplJyA+ID4gKSA9PiB7XG5cdHJldHVybiBzcGFjZSggc2l6ZSA9PT0gJ2NvbXBhY3QnID8gMSA6IDIgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdWZmaXhJdGVtV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmctaW5saW5lLWVuZDogJHsgaW5saW5lUGFkZGluZyB9O1xuXG5cdHN2ZyB7XG5cdFx0ZmlsbDogY3VycmVudENvbG9yO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0aW5wdXRbdHlwZT0nc2VhcmNoJ10ge1xuXHRcdCY6Oi13ZWJraXQtc2VhcmNoLWRlY29yYXRpb24sXG5cdFx0Jjo6LXdlYmtpdC1zZWFyY2gtY2FuY2VsLWJ1dHRvbixcblx0XHQmOjotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWJ1dHRvbixcblx0XHQmOjotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWRlY29yYXRpb24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xuXHRcdH1cblx0fVxuXG5cdCY6bm90KCA6Zm9jdXMtd2l0aGluICkge1xuXHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1iYWNrZ3JvdW5kOiAkeyBDT0xPUlMudGhlbWUuZ3JheVsgMTAwIF0gfTtcblx0fVxuYDtcbiJdfQ== */"));
+//# sourceMappingURL=styles.js.map

package/build-module/search-control/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["space","InputControl","COLORS","inlinePadding","size","SuffixItemWrapper","_styled","process","env","NODE_ENV","target","label","StyledInputControl","theme","gray"],"sources":["@wordpress/components/src/search-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { space } from '../utils/space';\nimport InputControl from '../input-control';\nimport { COLORS } from '../utils';\nimport type { SearchControlProps } from './types';\n\nconst inlinePadding = ( {\n\tsize,\n}: Required< Pick< SearchControlProps, 'size' > > ) => {\n\treturn space( size === 'compact' ? 1 : 2 );\n};\n\nexport const SuffixItemWrapper = styled.div`\n\tdisplay: flex;\n\tpadding-inline-end: ${ inlinePadding };\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const StyledInputControl = styled( InputControl )`\n\tinput[type='search'] {\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-cancel-button,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration {\n\t\t\t-webkit-appearance: none;\n\t\t}\n\t}\n\n\t&:not( :focus-within ) {\n\t\t--wp-components-color-background: ${ COLORS.theme.gray[ 100 ] };\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,gBAAgB;AACtC,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,SAASC,MAAM,QAAQ,UAAU;AAGjC,MAAMC,aAAa,GAAGA,CAAE;EACvBC;AAC+C,CAAC,KAAM;EACtD,OAAOJ,KAAK,CAAEI,IAAI,KAAK,SAAS,GAAG,CAAC,GAAG,CAAE,CAAC;AAC3C,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,uCAENR,aAAa,gCAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,ooDAKpC;AAED,OAAO,MAAMG,kBAAkB,GAAG,aAAAN,OAAA,CAAQL,YAAY,EAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,+OAWjBT,MAAM,CAACW,KAAK,CAACC,IAAI,CAAE,GAAG,CAAE,UAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,ooDAE9D"}

package/build-module/search-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/search-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type SearchControlProps = Pick<\n\tBaseControlProps,\n\t'__nextHasNoMarginBottom' | 'help' | 'label'\n> & {\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default true\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * A function that receives the value of the input when the value is changed.\n\t */\n\tonChange: ( value: string ) => void;\n\t/**\n\t * When an `onClose` callback is provided, the search control will render a close button\n\t * that will trigger the given callback.\n\t *\n\t * Use this if you want the button to trigger your own logic to close the search field entirely,\n\t * rather than just clearing the input value.\n\t */\n\tonClose?: () => void;\n\t/**\n\t * A placeholder for the input.\n\t *\n\t * @default 'Search'\n\t */\n\tplaceholder?: HTMLAttributes< HTMLInputElement >[ 'placeholder' ];\n\t/**\n\t * The current value of the input.\n\t */\n\tvalue?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/search-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { InputControlProps } from '../input-control/types';\n\nexport type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & {\n\t/**\n\t * @deprecated This is now the default.\n\t * @ignore\n\t */\n\t__next40pxDefaultSize?: InputControlProps[ '__next40pxDefaultSize' ];\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default true\n\t */\n\thideLabelFromVision?: InputControlProps[ 'hideLabelFromVision' ];\n\t/**\n\t * The accessible label for the input.\n\t *\n\t * A label should always be provided as an accessibility best practice,\n\t * even when a placeholder is defined and `hideLabelFromVision` is `true`.\n\t *\n\t * @default 'Search'\n\t */\n\tlabel?: string;\n\t/**\n\t * A function that receives the value of the input when the value is changed.\n\t */\n\tonChange: ( value: string ) => void;\n\t/**\n\t * When an `onClose` callback is provided, the search control will render a close button\n\t * that will trigger the given callback.\n\t *\n\t * Use this if you want the button to trigger your own logic to close the search field entirely,\n\t * rather than just clearing the input value.\n\t */\n\tonClose?: () => void;\n\t/** @ignore */\n\tonDrag?: InputControlProps[ 'onDrag' ];\n\t/** @ignore */\n\tonDragStart?: InputControlProps[ 'onDragStart' ];\n\t/** @ignore */\n\tonDragEnd?: InputControlProps[ 'onDragEnd' ];\n\t/**\n\t * A placeholder for the input.\n\t *\n\t * @default 'Search'\n\t */\n\tplaceholder?: InputControlProps[ 'placeholder' ];\n\t/**\n\t * The size of the component\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'compact';\n};\n\nexport type SuffixItemProps = Pick<\n\tSearchControlProps,\n\t'value' | 'onChange' | 'onClose'\n> & {\n\tsearchRef: React.RefObject< HTMLInputElement >;\n};\n"],"mappings":""}

package/build-module/select-control/chevron-down.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -17,6 +17,7 @@ import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
 import { Select } from './styles/select-control-styles';
 import SelectControlChevronDown from './chevron-down';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 const noop = () => {};
 function useUniqueId(idProp) {
   const instanceId = useInstanceId(SelectControl);
@@ -42,10 +43,10 @@ function UnforwardedSelectControl(props, ref) {
     children,
     prefix,
     suffix,
-    __next36pxDefaultSize = false,
+    __next40pxDefaultSize = false,
     __nextHasNoMarginBottom = false,
     ...restProps
-  } = props;
+  } = useDeprecated36pxDefaultSizeProp(props);
   const [isFocused, setIsFocused] = useState(false);
   const id = useUniqueId(idProp);
   const helpId = help ? `${id}__help` : undefined;
@@ -93,10 +94,10 @@ function UnforwardedSelectControl(props, ref) {
     suffix: suffix || !multiple && createElement(SelectControlChevronDown, null),
     prefix: prefix,
     labelPosition: labelPosition,
-    __next36pxDefaultSize: __next36pxDefaultSize
+    __next40pxDefaultSize: __next40pxDefaultSize
   }, createElement(Select, {
     ...restProps,
-    __next36pxDefaultSize: __next36pxDefaultSize,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     "aria-describedby": helpId,
     className: "components-select-control__input",
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"names":["classNames","useInstanceId","useState","forwardRef","BaseControl","InputBase","Select","SelectControlChevronDown","noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next36pxDefaultSize","__nextHasNoMarginBottom","restProps","isFocused","setIsFocused","helpId","undefined","length","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","createElement","selectSize","option","index","key","hidden"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport InputBase from '../input-control/input-base';\nimport { Select } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonBlur = noop,\n\t\tonChange,\n\t\tonFocus = noop,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\t__next36pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...restProps\n\t} = props;\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) return null;\n\n\tconst handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<InputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t\thidden={ option.hidden }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n * ```\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"],"mappings":"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"}
+{"version":3,"names":["classNames","useInstanceId","useState","forwardRef","BaseControl","InputBase","Select","SelectControlChevronDown","useDeprecated36pxDefaultSizeProp","noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next40pxDefaultSize","__nextHasNoMarginBottom","restProps","isFocused","setIsFocused","helpId","undefined","length","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","createElement","selectSize","option","index","key","hidden"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport InputBase from '../input-control/input-base';\nimport { Select } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonBlur = noop,\n\t\tonChange,\n\t\tonFocus = noop,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) return null;\n\n\tconst handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<InputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t\thidden={ option.hidden }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n * ```\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */