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

package/build/search-control/index.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SearchControl = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
 var _button = _interopRequireDefault(require("../button"));
-var _baseControl = _interopRequireDefault(require("../base-control"));
+var _context = require("../context");
+var _styles = require("./styles");
 /**
  * External dependencies
  */
@@ -24,67 +26,84 @@ var _baseControl = _interopRequireDefault(require("../base-control"));
  * Internal dependencies
  */
 
+function SuffixItem({
+  searchRef,
+  value,
+  onChange,
+  onClose
+}) {
+  if (!onClose && !value) {
+    return (0, _react.createElement)(_icons.Icon, {
+      icon: _icons.search
+    });
+  }
+  const onReset = () => {
+    onChange('');
+    searchRef.current?.focus();
+  };
+  return (0, _react.createElement)(_button.default, {
+    size: "small",
+    icon: _icons.closeSmall,
+    label: onClose ? (0, _i18n.__)('Close search') : (0, _i18n.__)('Reset search'),
+    onClick: onClose !== null && onClose !== void 0 ? onClose : onReset
+  });
+}
 function UnforwardedSearchControl({
-  __nextHasNoMarginBottom,
+  __nextHasNoMarginBottom = false,
   className,
   onChange,
-  onKeyDown,
   value,
-  label,
+  label = (0, _i18n.__)('Search'),
   placeholder = (0, _i18n.__)('Search'),
   hideLabelFromVision = true,
-  help,
   onClose,
+  size = 'default',
   ...restProps
 }, forwardedRef) {
-  const searchRef = (0, _element.useRef)();
-  const instanceId = (0, _compose.useInstanceId)(SearchControl);
-  const id = `components-search-control-${instanceId}`;
-  const renderRightButton = () => {
-    if (onClose) {
-      return (0, _element.createElement)(_button.default, {
-        icon: _icons.closeSmall,
-        label: (0, _i18n.__)('Close search'),
-        onClick: onClose
-      });
+  // @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 = (0, _element.useRef)(null);
+  const instanceId = (0, _compose.useInstanceId)(SearchControl, 'components-search-control');
+  const contextValue = (0, _element.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
     }
-    if (!!value) {
-      return (0, _element.createElement)(_button.default, {
-        icon: _icons.closeSmall,
-        label: (0, _i18n.__)('Reset search'),
-        onClick: () => {
-          onChange('');
-          searchRef.current?.focus();
-        }
-      });
-    }
-    return (0, _element.createElement)(_icons.Icon, {
-      icon: _icons.search
-    });
-  };
-  return (0, _element.createElement)(_baseControl.default, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    label: label,
-    id: id,
+  }), [__nextHasNoMarginBottom]);
+  return (0, _react.createElement)(_context.ContextSystemProvider, {
+    value: contextValue
+  }, (0, _react.createElement)(_styles.StyledInputControl, {
+    __next40pxDefaultSize: true,
+    id: instanceId,
     hideLabelFromVision: hideLabelFromVision,
-    help: help,
-    className: (0, _classnames.default)(className, 'components-search-control')
-  }, (0, _element.createElement)("div", {
-    className: "components-search-control__input-wrapper"
-  }, (0, _element.createElement)("input", {
-    ...restProps,
+    label: label,
     ref: (0, _compose.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: (0, _classnames.default)('components-search-control', className),
+    onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),
     autoComplete: "off",
-    value: value || ''
-  }), (0, _element.createElement)("div", {
-    className: "components-search-control__icon"
-  }, renderRightButton())));
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : '',
+    suffix: (0, _react.createElement)(_styles.SuffixItemWrapper, {
+      size: size
+    }, (0, _react.createElement)(SuffixItem, {
+      searchRef: searchRef,
+      value: value,
+      onChange: onChange,
+      onClose: onClose
+    })),
+    ...restProps
+  }));
 }
 
 /**
@@ -99,6 +118,7 @@ function UnforwardedSearchControl({
  *
  *   return (
  *     <SearchControl
+ *       __nextHasNoMarginBottom
  *       value={ searchInput }
  *       onChange={ setSearchInput }
  *     />
@@ -106,8 +126,6 @@ function UnforwardedSearchControl({
  * }
  * ```
  */
-const SearchControl = (0, _element.forwardRef)(UnforwardedSearchControl);
-exports.SearchControl = SearchControl;
-var _default = SearchControl;
-exports.default = _default;
+const SearchControl = exports.SearchControl = (0, _element.forwardRef)(UnforwardedSearchControl);
+var _default = exports.default = SearchControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_i18n","_icons","_button","_baseControl","UnforwardedSearchControl","__nextHasNoMarginBottom","className","onChange","onKeyDown","value","label","placeholder","__","hideLabelFromVision","help","onClose","restProps","forwardedRef","searchRef","useRef","instanceId","useInstanceId","SearchControl","id","renderRightButton","createElement","default","icon","closeSmall","onClick","current","focus","Icon","search","classnames","ref","useMergeRefs","type","event","target","autoComplete","forwardRef","exports","_default"],"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":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_i18n","_icons","_element","_button","_context","_styles","SuffixItem","searchRef","value","onChange","onClose","_react","createElement","Icon","icon","search","onReset","current","focus","default","size","closeSmall","label","__","onClick","UnforwardedSearchControl","__nextHasNoMarginBottom","className","placeholder","hideLabelFromVision","restProps","forwardedRef","disabled","useRef","instanceId","useInstanceId","SearchControl","contextValue","useMemo","BaseControl","_overrides","InputBase","isBorderless","ContextSystemProvider","StyledInputControl","__next40pxDefaultSize","id","ref","useMergeRefs","type","classnames","nextValue","autoComplete","suffix","SuffixItemWrapper","exports","forwardRef","_default"],"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/search-control/index.native.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
@@ -135,16 +136,16 @@ function SearchControl({
     'search-control__right-icon': rightIconStyle
   } = currentStyles;
   function renderLeftButton() {
-    const button = !isIOS && isActive ? (0, _element.createElement)(_components.Button, {
+    const button = !isIOS && isActive ? (0, _react.createElement)(_components.Button, {
       label: (0, _i18n.__)('Cancel search'),
       icon: _icons.arrowLeft,
       onClick: onCancel,
       style: iconStyle
-    }) : (0, _element.createElement)(_icons.Icon, {
+    }) : (0, _react.createElement)(_icons.Icon, {
       icon: _components.Gridicons.search,
       fill: iconStyle?.color
     });
-    return (0, _element.createElement)(_reactNative.View, {
+    return (0, _react.createElement)(_reactNative.View, {
       style: [inputButtonStyle, inputButtonLeftStyle]
     }, button);
   }
@@ -153,17 +154,17 @@ function SearchControl({
 
     // Add a View element to properly center the input placeholder via flexbox.
     if (isIOS && !isActive) {
-      button = (0, _element.createElement)(_reactNative.View, null);
+      button = (0, _react.createElement)(_reactNative.View, null);
     }
     if (!!value) {
-      button = (0, _element.createElement)(_components.Button, {
+      button = (0, _react.createElement)(_components.Button, {
         label: (0, _i18n.__)('Clear search'),
         icon: isIOS ? _icons.cancelCircleFilled : _icons.close,
         onClick: clearInput,
         style: [iconStyle, rightIconStyle]
       });
     }
-    return (0, _element.createElement)(_reactNative.View, {
+    return (0, _react.createElement)(_reactNative.View, {
       style: [inputButtonStyle, inputButtonRightStyle]
     }, button);
   }
@@ -171,9 +172,9 @@ function SearchControl({
     if (!isIOS) {
       return null;
     }
-    return (0, _element.createElement)(_reactNative.View, {
+    return (0, _react.createElement)(_reactNative.View, {
       style: cancelButtonStyle
-    }, (0, _element.createElement)(_reactNative.Text, {
+    }, (0, _react.createElement)(_reactNative.Text, {
       onPress: onCancel,
       style: cancelButtonTextStyle,
       accessible: true,
@@ -182,15 +183,15 @@ function SearchControl({
       accessibilityHint: (0, _i18n.__)('Cancel search')
     }, (0, _i18n.__)('Cancel')));
   }
-  return (0, _element.createElement)(_reactNative.TouchableOpacity, {
+  return (0, _react.createElement)(_reactNative.TouchableOpacity, {
     style: containerStyle,
     onPress: onPress,
     activeOpacity: 1
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: innerContainerStyle
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: inputContainerStyle
-  }, renderLeftButton(), (0, _element.createElement)(_reactNative.TextInput, {
+  }, renderLeftButton(), (0, _react.createElement)(_reactNative.TextInput, {
     ref: inputRef,
     style: formInputStyle,
     placeholderTextColor: placeholderStyle?.color,
@@ -200,6 +201,5 @@ function SearchControl({
     placeholder: placeholder
   }), renderRightButton()), isActive && renderCancel()));
 }
-var _default = SearchControl;
-exports.default = _default;
+var _default = exports.default = SearchControl;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_i18n","_components","_icons","_style","_interopRequireDefault","_platformStyle","baseStyles","allStyles","selector","platformStyles","selectModifiedStyles","styles","modifier","modifierMatcher","RegExp","modifierSelectors","Object","keys","filter","match","reduce","modifiedStyles","modifierSelector","blockElementSelector","split","mergeStyles","updateStyles","selectors","forEach","SearchControl","value","onChange","placeholder","__","isActive","setIsActive","useState","currentStyles","setCurrentStyles","isDark","useColorScheme","inputRef","useRef","onCancelTimer","isIOS","Platform","OS","darkStyles","useMemo","activeStyles","activeDarkStyles","useEffect","futureStyles","mergeFutureStyles","shouldUseConditions","shouldUseModified","every","should","updatedStyles","clearInput","useCallback","onPress","current","focus","onFocus","onCancel","clearTimeout","setTimeout","blur","onKeyboardDidHide","keyboardHideSubscription","Keyboard","addListener","remove","containerStyle","innerContainerStyle","inputContainerStyle","formInputStyle","placeholderStyle","inputButtonStyle","inputButtonLeftStyle","inputButtonRightStyle","cancelButtonStyle","cancelButtonTextStyle","iconStyle","rightIconStyle","renderLeftButton","button","createElement","Button","label","icon","arrowLeftIcon","onClick","style","Icon","Gridicons","search","fill","color","View","renderRightButton","cancelCircleFilledIcon","closeIcon","renderCancel","Text","accessible","accessibilityRole","accessibilityLabel","accessibilityHint","TouchableOpacity","activeOpacity","TextInput","ref","placeholderTextColor","onChangeText","_default","exports","default"],"sources":["@wordpress/components/src/search-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tTextInput,\n\tText,\n\tView,\n\tTouchableOpacity,\n\tPlatform,\n\tuseColorScheme,\n\tKeyboard,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseRef,\n\tuseMemo,\n\tuseEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Button, Gridicons } from '@wordpress/components';\nimport {\n\tIcon,\n\tcancelCircleFilled as cancelCircleFilledIcon,\n\tarrowLeft as arrowLeftIcon,\n\tclose as closeIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport allStyles from './style.scss';\nimport platformStyles from './platform-style.scss';\n\n// Merge platform specific styles with the default styles.\nconst baseStyles = { ...allStyles };\nfor ( const selector in platformStyles ) {\n\tbaseStyles[ selector ] = {\n\t\t...baseStyles[ selector ],\n\t\t...platformStyles[ selector ],\n\t};\n}\n\nfunction selectModifiedStyles( styles, modifier ) {\n\tconst modifierMatcher = new RegExp( `--${ modifier }$` );\n\tconst modifierSelectors = Object.keys( styles ).filter( ( selector ) =>\n\t\tselector.match( modifierMatcher )\n\t);\n\n\treturn modifierSelectors.reduce( ( modifiedStyles, modifierSelector ) => {\n\t\tconst blockElementSelector = modifierSelector.split( '--' )[ 0 ];\n\t\tmodifiedStyles[ blockElementSelector ] = styles[ modifierSelector ];\n\t\treturn modifiedStyles;\n\t}, {} );\n}\n\nfunction mergeStyles( styles, updateStyles, selectors ) {\n\tselectors.forEach( ( selector ) => {\n\t\tstyles[ selector ] = {\n\t\t\t...styles[ selector ],\n\t\t\t...updateStyles[ selector ],\n\t\t};\n\t} );\n\n\treturn styles;\n}\n\nfunction SearchControl( {\n\tvalue,\n\tonChange,\n\tplaceholder = __( 'Search blocks' ),\n} ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst [ currentStyles, setCurrentStyles ] = useState( baseStyles );\n\n\tconst isDark = useColorScheme() === 'dark';\n\tconst inputRef = useRef();\n\tconst onCancelTimer = useRef();\n\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst darkStyles = useMemo( () => {\n\t\treturn selectModifiedStyles( baseStyles, 'dark' );\n\t}, [] );\n\n\tconst activeStyles = useMemo( () => {\n\t\treturn selectModifiedStyles( baseStyles, 'active' );\n\t}, [] );\n\n\tconst activeDarkStyles = useMemo( () => {\n\t\treturn selectModifiedStyles( baseStyles, 'active-dark' );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tlet futureStyles = { ...baseStyles };\n\n\t\tfunction mergeFutureStyles( modifiedStyles, shouldUseConditions ) {\n\t\t\tconst shouldUseModified = shouldUseConditions.every(\n\t\t\t\t( should ) => should\n\t\t\t);\n\n\t\t\tconst updatedStyles = shouldUseModified\n\t\t\t\t? modifiedStyles\n\t\t\t\t: futureStyles;\n\n\t\t\tconst selectors = Object.keys( modifiedStyles );\n\n\t\t\tfutureStyles = mergeStyles(\n\t\t\t\tfutureStyles,\n\t\t\t\tupdatedStyles,\n\t\t\t\tselectors\n\t\t\t);\n\t\t}\n\n\t\tmergeFutureStyles( activeStyles, [ isActive ] );\n\t\tmergeFutureStyles( darkStyles, [ isDark ] );\n\t\tmergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );\n\n\t\tsetCurrentStyles( futureStyles );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ isActive, isDark ] );\n\n\tconst clearInput = useCallback( () => {\n\t\tonChange( '' );\n\t}, [ onChange ] );\n\n\tconst onPress = useCallback( () => {\n\t\tsetIsActive( true );\n\t\tinputRef.current?.focus();\n\t}, [] );\n\n\tconst onFocus = useCallback( () => {\n\t\tsetIsActive( true );\n\t}, [] );\n\n\tconst onCancel = useCallback( () => {\n\t\tclearTimeout( onCancelTimer.current );\n\t\tonCancelTimer.current = setTimeout( () => {\n\t\t\tinputRef.current?.blur();\n\t\t\tclearInput();\n\t\t\tsetIsActive( false );\n\t\t}, 0 );\n\t}, [ clearInput ] );\n\n\tconst onKeyboardDidHide = useCallback( () => {\n\t\tif ( ! isIOS ) {\n\t\t\tonCancel();\n\t\t}\n\t}, [ isIOS, onCancel ] );\n\n\tuseEffect( () => {\n\t\tconst keyboardHideSubscription = Keyboard.addListener(\n\t\t\t'keyboardDidHide',\n\t\t\tonKeyboardDidHide\n\t\t);\n\t\treturn () => {\n\t\t\tclearTimeout( onCancelTimer.current );\n\t\t\tkeyboardHideSubscription.remove();\n\t\t};\n\t}, [ onKeyboardDidHide ] );\n\n\tconst {\n\t\t'search-control__container': containerStyle,\n\t\t'search-control__inner-container': innerContainerStyle,\n\t\t'search-control__input-container': inputContainerStyle,\n\t\t'search-control__form-input': formInputStyle,\n\t\t'search-control__form-input-placeholder': placeholderStyle,\n\t\t'search-control__input-button': inputButtonStyle,\n\t\t'search-control__input-button-left': inputButtonLeftStyle,\n\t\t'search-control__input-button-right': inputButtonRightStyle,\n\t\t'search-control__cancel-button': cancelButtonStyle,\n\t\t'search-control__cancel-button-text': cancelButtonTextStyle,\n\t\t'search-control__icon': iconStyle,\n\t\t'search-control__right-icon': rightIconStyle,\n\t} = currentStyles;\n\n\tfunction renderLeftButton() {\n\t\tconst button =\n\t\t\t! isIOS && isActive ? (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Cancel search' ) }\n\t\t\t\t\ticon={ arrowLeftIcon }\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t\tstyle={ iconStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Icon icon={ Gridicons.search } fill={ iconStyle?.color } />\n\t\t\t);\n\n\t\treturn (\n\t\t\t<View style={ [ inputButtonStyle, inputButtonLeftStyle ] }>\n\t\t\t\t{ button }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tfunction renderRightButton() {\n\t\tlet button;\n\n\t\t// Add a View element to properly center the input placeholder via flexbox.\n\t\tif ( isIOS && ! isActive ) {\n\t\t\tbutton = <View />;\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\tbutton = (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Clear search' ) }\n\t\t\t\t\ticon={ isIOS ? cancelCircleFilledIcon : closeIcon }\n\t\t\t\t\tonClick={ clearInput }\n\t\t\t\t\tstyle={ [ iconStyle, rightIconStyle ] }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<View style={ [ inputButtonStyle, inputButtonRightStyle ] }>\n\t\t\t\t{ button }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tfunction renderCancel() {\n\t\tif ( ! isIOS ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ cancelButtonStyle }>\n\t\t\t\t<Text\n\t\t\t\t\tonPress={ onCancel }\n\t\t\t\t\tstyle={ cancelButtonTextStyle }\n\t\t\t\t\taccessible={ true }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ __( 'Cancel search' ) }\n\t\t\t\t\taccessibilityHint={ __( 'Cancel search' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tstyle={ containerStyle }\n\t\t\tonPress={ onPress }\n\t\t\tactiveOpacity={ 1 }\n\t\t>\n\t\t\t<View style={ innerContainerStyle }>\n\t\t\t\t<View style={ inputContainerStyle }>\n\t\t\t\t\t{ renderLeftButton() }\n\t\t\t\t\t<TextInput\n\t\t\t\t\t\tref={ inputRef }\n\t\t\t\t\t\tstyle={ formInputStyle }\n\t\t\t\t\t\tplaceholderTextColor={ placeholderStyle?.color }\n\t\t\t\t\t\tonChangeText={ onChange }\n\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</View>\n\t\t\t\t{ isActive && renderCancel() }\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default SearchControl;\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_element","_i18n","_components","_icons","_style","_interopRequireDefault","_platformStyle","baseStyles","allStyles","selector","platformStyles","selectModifiedStyles","styles","modifier","modifierMatcher","RegExp","modifierSelectors","Object","keys","filter","match","reduce","modifiedStyles","modifierSelector","blockElementSelector","split","mergeStyles","updateStyles","selectors","forEach","SearchControl","value","onChange","placeholder","__","isActive","setIsActive","useState","currentStyles","setCurrentStyles","isDark","useColorScheme","inputRef","useRef","onCancelTimer","isIOS","Platform","OS","darkStyles","useMemo","activeStyles","activeDarkStyles","useEffect","futureStyles","mergeFutureStyles","shouldUseConditions","shouldUseModified","every","should","updatedStyles","clearInput","useCallback","onPress","current","focus","onFocus","onCancel","clearTimeout","setTimeout","blur","onKeyboardDidHide","keyboardHideSubscription","Keyboard","addListener","remove","containerStyle","innerContainerStyle","inputContainerStyle","formInputStyle","placeholderStyle","inputButtonStyle","inputButtonLeftStyle","inputButtonRightStyle","cancelButtonStyle","cancelButtonTextStyle","iconStyle","rightIconStyle","renderLeftButton","button","_react","createElement","Button","label","icon","arrowLeftIcon","onClick","style","Icon","Gridicons","search","fill","color","View","renderRightButton","cancelCircleFilledIcon","closeIcon","renderCancel","Text","accessible","accessibilityRole","accessibilityLabel","accessibilityHint","TouchableOpacity","activeOpacity","TextInput","ref","placeholderTextColor","onChangeText","_default","exports","default"],"sources":["@wordpress/components/src/search-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tTextInput,\n\tText,\n\tView,\n\tTouchableOpacity,\n\tPlatform,\n\tuseColorScheme,\n\tKeyboard,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseRef,\n\tuseMemo,\n\tuseEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Button, Gridicons } from '@wordpress/components';\nimport {\n\tIcon,\n\tcancelCircleFilled as cancelCircleFilledIcon,\n\tarrowLeft as arrowLeftIcon,\n\tclose as closeIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport allStyles from './style.scss';\nimport platformStyles from './platform-style.scss';\n\n// Merge platform specific styles with the default styles.\nconst baseStyles = { ...allStyles };\nfor ( const selector in platformStyles ) {\n\tbaseStyles[ selector ] = {\n\t\t...baseStyles[ selector ],\n\t\t...platformStyles[ selector ],\n\t};\n}\n\nfunction selectModifiedStyles( styles, modifier ) {\n\tconst modifierMatcher = new RegExp( `--${ modifier }$` );\n\tconst modifierSelectors = Object.keys( styles ).filter( ( selector ) =>\n\t\tselector.match( modifierMatcher )\n\t);\n\n\treturn modifierSelectors.reduce( ( modifiedStyles, modifierSelector ) => {\n\t\tconst blockElementSelector = modifierSelector.split( '--' )[ 0 ];\n\t\tmodifiedStyles[ blockElementSelector ] = styles[ modifierSelector ];\n\t\treturn modifiedStyles;\n\t}, {} );\n}\n\nfunction mergeStyles( styles, updateStyles, selectors ) {\n\tselectors.forEach( ( selector ) => {\n\t\tstyles[ selector ] = {\n\t\t\t...styles[ selector ],\n\t\t\t...updateStyles[ selector ],\n\t\t};\n\t} );\n\n\treturn styles;\n}\n\nfunction SearchControl( {\n\tvalue,\n\tonChange,\n\tplaceholder = __( 'Search blocks' ),\n} ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst [ currentStyles, setCurrentStyles ] = useState( baseStyles );\n\n\tconst isDark = useColorScheme() === 'dark';\n\tconst inputRef = useRef();\n\tconst onCancelTimer = useRef();\n\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst darkStyles = useMemo( () => {\n\t\treturn selectModifiedStyles( baseStyles, 'dark' );\n\t}, [] );\n\n\tconst activeStyles = useMemo( () => {\n\t\treturn selectModifiedStyles( baseStyles, 'active' );\n\t}, [] );\n\n\tconst activeDarkStyles = useMemo( () => {\n\t\treturn selectModifiedStyles( baseStyles, 'active-dark' );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tlet futureStyles = { ...baseStyles };\n\n\t\tfunction mergeFutureStyles( modifiedStyles, shouldUseConditions ) {\n\t\t\tconst shouldUseModified = shouldUseConditions.every(\n\t\t\t\t( should ) => should\n\t\t\t);\n\n\t\t\tconst updatedStyles = shouldUseModified\n\t\t\t\t? modifiedStyles\n\t\t\t\t: futureStyles;\n\n\t\t\tconst selectors = Object.keys( modifiedStyles );\n\n\t\t\tfutureStyles = mergeStyles(\n\t\t\t\tfutureStyles,\n\t\t\t\tupdatedStyles,\n\t\t\t\tselectors\n\t\t\t);\n\t\t}\n\n\t\tmergeFutureStyles( activeStyles, [ isActive ] );\n\t\tmergeFutureStyles( darkStyles, [ isDark ] );\n\t\tmergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );\n\n\t\tsetCurrentStyles( futureStyles );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ isActive, isDark ] );\n\n\tconst clearInput = useCallback( () => {\n\t\tonChange( '' );\n\t}, [ onChange ] );\n\n\tconst onPress = useCallback( () => {\n\t\tsetIsActive( true );\n\t\tinputRef.current?.focus();\n\t}, [] );\n\n\tconst onFocus = useCallback( () => {\n\t\tsetIsActive( true );\n\t}, [] );\n\n\tconst onCancel = useCallback( () => {\n\t\tclearTimeout( onCancelTimer.current );\n\t\tonCancelTimer.current = setTimeout( () => {\n\t\t\tinputRef.current?.blur();\n\t\t\tclearInput();\n\t\t\tsetIsActive( false );\n\t\t}, 0 );\n\t}, [ clearInput ] );\n\n\tconst onKeyboardDidHide = useCallback( () => {\n\t\tif ( ! isIOS ) {\n\t\t\tonCancel();\n\t\t}\n\t}, [ isIOS, onCancel ] );\n\n\tuseEffect( () => {\n\t\tconst keyboardHideSubscription = Keyboard.addListener(\n\t\t\t'keyboardDidHide',\n\t\t\tonKeyboardDidHide\n\t\t);\n\t\treturn () => {\n\t\t\tclearTimeout( onCancelTimer.current );\n\t\t\tkeyboardHideSubscription.remove();\n\t\t};\n\t}, [ onKeyboardDidHide ] );\n\n\tconst {\n\t\t'search-control__container': containerStyle,\n\t\t'search-control__inner-container': innerContainerStyle,\n\t\t'search-control__input-container': inputContainerStyle,\n\t\t'search-control__form-input': formInputStyle,\n\t\t'search-control__form-input-placeholder': placeholderStyle,\n\t\t'search-control__input-button': inputButtonStyle,\n\t\t'search-control__input-button-left': inputButtonLeftStyle,\n\t\t'search-control__input-button-right': inputButtonRightStyle,\n\t\t'search-control__cancel-button': cancelButtonStyle,\n\t\t'search-control__cancel-button-text': cancelButtonTextStyle,\n\t\t'search-control__icon': iconStyle,\n\t\t'search-control__right-icon': rightIconStyle,\n\t} = currentStyles;\n\n\tfunction renderLeftButton() {\n\t\tconst button =\n\t\t\t! isIOS && isActive ? (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Cancel search' ) }\n\t\t\t\t\ticon={ arrowLeftIcon }\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t\tstyle={ iconStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Icon icon={ Gridicons.search } fill={ iconStyle?.color } />\n\t\t\t);\n\n\t\treturn (\n\t\t\t<View style={ [ inputButtonStyle, inputButtonLeftStyle ] }>\n\t\t\t\t{ button }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tfunction renderRightButton() {\n\t\tlet button;\n\n\t\t// Add a View element to properly center the input placeholder via flexbox.\n\t\tif ( isIOS && ! isActive ) {\n\t\t\tbutton = <View />;\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\tbutton = (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Clear search' ) }\n\t\t\t\t\ticon={ isIOS ? cancelCircleFilledIcon : closeIcon }\n\t\t\t\t\tonClick={ clearInput }\n\t\t\t\t\tstyle={ [ iconStyle, rightIconStyle ] }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<View style={ [ inputButtonStyle, inputButtonRightStyle ] }>\n\t\t\t\t{ button }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tfunction renderCancel() {\n\t\tif ( ! isIOS ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ cancelButtonStyle }>\n\t\t\t\t<Text\n\t\t\t\t\tonPress={ onCancel }\n\t\t\t\t\tstyle={ cancelButtonTextStyle }\n\t\t\t\t\taccessible={ true }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ __( 'Cancel search' ) }\n\t\t\t\t\taccessibilityHint={ __( 'Cancel search' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tstyle={ containerStyle }\n\t\t\tonPress={ onPress }\n\t\t\tactiveOpacity={ 1 }\n\t\t>\n\t\t\t<View style={ innerContainerStyle }>\n\t\t\t\t<View style={ inputContainerStyle }>\n\t\t\t\t\t{ renderLeftButton() }\n\t\t\t\t\t<TextInput\n\t\t\t\t\t\tref={ inputRef }\n\t\t\t\t\t\tstyle={ formInputStyle }\n\t\t\t\t\t\tplaceholderTextColor={ placeholderStyle?.color }\n\t\t\t\t\t\tonChangeText={ onChange }\n\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</View>\n\t\t\t\t{ isActive && renderCancel() }\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default SearchControl;\n"],"mappings":"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"}

package/build/search-control/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SuffixItemWrapper = exports.StyledInputControl = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _space = require("../utils/space");
+var _inputControl = _interopRequireDefault(require("../input-control"));
+var _utils = require("../utils");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const inlinePadding = ({
+  size
+}) => {
+  return (0, _space.space)(size === 'compact' ? 1 : 2);
+};
+const SuffixItemWrapper = exports.SuffixItemWrapper = (0, _base.default)("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== */"));
+const StyledInputControl = exports.StyledInputControl = ( /*#__PURE__*/0, _base.default)(_inputControl.default, 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:", _utils.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/search-control/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_space","require","_inputControl","_interopRequireDefault","_utils","inlinePadding","size","space","SuffixItemWrapper","exports","_base","default","process","env","NODE_ENV","target","label","StyledInputControl","InputControl","COLORS","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":";;;;;;;;AAQA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,MAAMI,aAAa,GAAGA,CAAE;EACvBC;AAC+C,CAAC,KAAM;EACtD,OAAO,IAAAC,YAAK,EAAED,IAAI,KAAK,SAAS,GAAG,CAAC,GAAG,CAAE,CAAC;AAC3C,CAAC;AAEM,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,OAAAE,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,uCAENX,aAAa,gCAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA,ooDAKpC;AAEM,MAAMG,kBAAkB,GAAAR,OAAA,CAAAQ,kBAAA,GAAG,kBAAAP,KAAA,CAAAC,OAAA,EAAQO,qBAAY,EAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,+OAWjBG,aAAM,CAACC,KAAK,CAACC,IAAI,CAAE,GAAG,CAAE,UAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA,ooDAE9D"}

package/build/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/select-control/chevron-down.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _icons = require("@wordpress/icons");
 var _selectControlStyles = require("./styles/select-control-styles");
 /**
@@ -16,11 +16,10 @@ var _selectControlStyles = require("./styles/select-control-styles");
  */
 
 const SelectControlChevronDown = () => {
-  return (0, _element.createElement)(_selectControlStyles.InputControlSuffixWrapperWithClickThrough, null, (0, _element.createElement)(_selectControlStyles.DownArrowWrapper, null, (0, _element.createElement)(_icons.Icon, {
+  return (0, _react.createElement)(_selectControlStyles.InputControlSuffixWrapperWithClickThrough, null, (0, _react.createElement)(_selectControlStyles.DownArrowWrapper, null, (0, _react.createElement)(_icons.Icon, {
     icon: _icons.chevronDown,
     size: _selectControlStyles.chevronIconSize
   })));
 };
-var _default = SelectControlChevronDown;
-exports.default = _default;
+var _default = exports.default = SelectControlChevronDown;
 //# sourceMappingURL=chevron-down.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_selectControlStyles","SelectControlChevronDown","_element","createElement","InputControlSuffixWrapperWithClickThrough","DownArrowWrapper","Icon","icon","chevronDown","size","chevronIconSize","_default","exports","default"],"sources":["@wordpress/components/src/select-control/chevron-down.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { chevronDown, Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tchevronIconSize,\n\tDownArrowWrapper,\n\tInputControlSuffixWrapperWithClickThrough,\n} from './styles/select-control-styles';\n\nconst SelectControlChevronDown = () => {\n\treturn (\n\t\t<InputControlSuffixWrapperWithClickThrough>\n\t\t\t<DownArrowWrapper>\n\t\t\t\t<Icon icon={ chevronDown } size={ chevronIconSize } />\n\t\t\t</DownArrowWrapper>\n\t\t</InputControlSuffixWrapperWithClickThrough>\n\t);\n};\n\nexport default SelectControlChevronDown;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,oBAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,MAAME,wBAAwB,GAAGA,CAAA,KAAM;EACtC,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACH,oBAAA,CAAAI,yCAAyC,QACzC,IAAAF,QAAA,CAAAC,aAAA,EAACH,oBAAA,CAAAK,gBAAgB,QAChB,IAAAH,QAAA,CAAAC,aAAA,EAACL,MAAA,CAAAQ,IAAI;IAACC,IAAI,EAAGC,kBAAa;IAACC,IAAI,EAAGC;EAAiB,CAAE,CACpC,CACwB,CAAC;AAE9C,CAAC;AAAC,IAAAC,QAAA,GAEaV,wBAAwB;AAAAW,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_icons","require","_selectControlStyles","SelectControlChevronDown","_react","createElement","InputControlSuffixWrapperWithClickThrough","DownArrowWrapper","Icon","icon","chevronDown","size","chevronIconSize","_default","exports","default"],"sources":["@wordpress/components/src/select-control/chevron-down.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { chevronDown, Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tchevronIconSize,\n\tDownArrowWrapper,\n\tInputControlSuffixWrapperWithClickThrough,\n} from './styles/select-control-styles';\n\nconst SelectControlChevronDown = () => {\n\treturn (\n\t\t<InputControlSuffixWrapperWithClickThrough>\n\t\t\t<DownArrowWrapper>\n\t\t\t\t<Icon icon={ chevronDown } size={ chevronIconSize } />\n\t\t\t</DownArrowWrapper>\n\t\t</InputControlSuffixWrapperWithClickThrough>\n\t);\n};\n\nexport default SelectControlChevronDown;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,oBAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,MAAME,wBAAwB,GAAGA,CAAA,KAAM;EACtC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACH,oBAAA,CAAAI,yCAAyC,QACzC,IAAAF,MAAA,CAAAC,aAAA,EAACH,oBAAA,CAAAK,gBAAgB,QAChB,IAAAH,MAAA,CAAAC,aAAA,EAACL,MAAA,CAAAQ,IAAI;IAACC,IAAI,EAAGC,kBAAa;IAACC,IAAI,EAAGC;EAAiB,CAAE,CACpC,CACwB,CAAC;AAE9C,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,wBAAwB"}

package/build/select-control/index.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SelectControl = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _baseControl = _interopRequireDefault(require("../base-control"));
 var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
 var _selectControlStyles = require("./styles/select-control-styles");
 var _chevronDown = _interopRequireDefault(require("./chevron-down"));
+var _useDeprecatedProps = require("../utils/use-deprecated-props");
 /**
  * External dependencies
  */
@@ -49,10 +51,10 @@ function UnforwardedSelectControl(props, ref) {
     children,
     prefix,
     suffix,
-    __next36pxDefaultSize = false,
+    __next40pxDefaultSize = false,
     __nextHasNoMarginBottom = false,
     ...restProps
-  } = props;
+  } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
   const [isFocused, setIsFocused] = (0, _element.useState)(false);
   const id = useUniqueId(idProp);
   const helpId = help ? `${id}__help` : undefined;
@@ -85,11 +87,11 @@ function UnforwardedSelectControl(props, ref) {
     });
   };
   const classes = (0, _classnames.default)('components-select-control', className);
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.createElement)(_baseControl.default, {
     help: help,
     id: id,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, (0, _element.createElement)(_inputBase.default, {
+  }, (0, _react.createElement)(_inputBase.default, {
     className: classes,
     disabled: disabled,
     hideLabelFromVision: hideLabelFromVision,
@@ -97,13 +99,13 @@ function UnforwardedSelectControl(props, ref) {
     isFocused: isFocused,
     label: label,
     size: size,
-    suffix: suffix || !multiple && (0, _element.createElement)(_chevronDown.default, null),
+    suffix: suffix || !multiple && (0, _react.createElement)(_chevronDown.default, null),
     prefix: prefix,
     labelPosition: labelPosition,
-    __next36pxDefaultSize: __next36pxDefaultSize
-  }, (0, _element.createElement)(_selectControlStyles.Select, {
+    __next40pxDefaultSize: __next40pxDefaultSize
+  }, (0, _react.createElement)(_selectControlStyles.Select, {
     ...restProps,
-    __next36pxDefaultSize: __next36pxDefaultSize,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     "aria-describedby": helpId,
     className: "components-select-control__input",
     disabled: disabled,
@@ -117,7 +119,7 @@ function UnforwardedSelectControl(props, ref) {
     value: valueProp
   }, children || options.map((option, index) => {
     const key = option.id || `${option.label}-${option.value}-${index}`;
-    return (0, _element.createElement)("option", {
+    return (0, _react.createElement)("option", {
       key: key,
       value: option.value,
       disabled: option.disabled,
@@ -152,8 +154,6 @@ function UnforwardedSelectControl(props, ref) {
  * };
  * ```
  */
-const SelectControl = (0, _element.forwardRef)(UnforwardedSelectControl);
-exports.SelectControl = SelectControl;
-var _default = SelectControl;
-exports.default = _default;
+const SelectControl = exports.SelectControl = (0, _element.forwardRef)(UnforwardedSelectControl);
+var _default = exports.default = SelectControl;
 //# sourceMappingURL=index.js.map