@wordpress/block-library 8.11.0 → 8.12.1

package/build/search/edit.js

@@ -43,18 +43,16 @@ var _utils = require("./utils.js");
 // Used to calculate border radius adjustment to avoid "fat" corners when
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
-
-function SearchEdit(_ref) {
-  var _style$border;
-
-  let {
-    className,
-    attributes,
-    setAttributes,
-    toggleSelection,
-    isSelected,
-    clientId
-  } = _ref;
+const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';
+
+function SearchEdit({
+  className,
+  attributes,
+  setAttributes,
+  toggleSelection,
+  isSelected,
+  clientId
+}) {
   const {
     label,
     showLabel,
@@ -65,16 +63,16 @@ function SearchEdit(_ref) {
     buttonText,
     buttonPosition,
     buttonUseIcon,
+    buttonBehavior,
+    isSearchFieldHidden,
     style
   } = attributes;
   const insertedInNavigationBlock = (0, _data.useSelect)(select => {
-    var _getBlockParentsByBlo;
-
     const {
       getBlockParentsByBlockName,
       wasBlockJustInserted
     } = select(_blockEditor.store);
-    return !!((_getBlockParentsByBlo = getBlockParentsByBlockName(clientId, 'core/navigation')) !== null && _getBlockParentsByBlo !== void 0 && _getBlockParentsByBlo.length) && wasBlockJustInserted(clientId);
+    return !!getBlockParentsByBlockName(clientId, 'core/navigation')?.length && wasBlockJustInserted(clientId);
   }, [clientId]);
   const {
     __unstableMarkNextChangeAsNotPersistent
@@ -90,7 +88,7 @@ function SearchEdit(_ref) {
       buttonPosition: 'button-inside'
     });
   }, [insertedInNavigationBlock]);
-  const borderRadius = style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border.radius;
+  const borderRadius = style?.border?.radius;
   const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes); // Check for old deprecated numerical border radius. Done as a separate
   // check so that a borderRadius style won't overwrite the longhand
   // per-corner styles.
@@ -107,7 +105,7 @@ function SearchEdit(_ref) {
       fluid: fluidTypographySettings
     },
     layout: {
-      wideSize: layout === null || layout === void 0 ? void 0 : layout.wideSize
+      wideSize: layout?.wideSize
     }
   });
   const unitControlInstanceId = (0, _compose.useInstanceId)(_components.__experimentalUnitControl);
@@ -116,6 +114,8 @@ function SearchEdit(_ref) {
   const isButtonPositionOutside = 'button-outside' === buttonPosition;
   const hasNoButton = 'no-button' === buttonPosition;
   const hasOnlyButton = 'button-only' === buttonPosition;
+  const searchFieldRef = (0, _element.useRef)();
+  const buttonRef = (0, _element.useRef)();
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: ['%', 'px'],
     defaultValues: {
@@ -123,9 +123,26 @@ function SearchEdit(_ref) {
       px: _utils.PX_WIDTH_DEFAULT
     }
   });
+  (0, _element.useEffect)(() => {
+    if (hasOnlyButton && !isSelected) {
+      setAttributes({
+        isSearchFieldHidden: true
+      });
+    }
+  }, [hasOnlyButton, isSelected, setAttributes]); // Show the search field when width changes.
+
+  (0, _element.useEffect)(() => {
+    if (!hasOnlyButton || !isSelected) {
+      return;
+    }
+
+    setAttributes({
+      isSearchFieldHidden: false
+    });
+  }, [hasOnlyButton, isSelected, setAttributes, width]);
 
   const getBlockClassNames = () => {
-    return (0, _classnames.default)(className, isButtonPositionInside ? 'wp-block-search__button-inside' : undefined, isButtonPositionOutside ? 'wp-block-search__button-outside' : undefined, hasNoButton ? 'wp-block-search__no-button' : undefined, hasOnlyButton ? 'wp-block-search__button-only' : undefined, !buttonUseIcon && !hasNoButton ? 'wp-block-search__text-button' : undefined, buttonUseIcon && !hasNoButton ? 'wp-block-search__icon-button' : undefined);
+    return (0, _classnames.default)(className, isButtonPositionInside ? 'wp-block-search__button-inside' : undefined, isButtonPositionOutside ? 'wp-block-search__button-outside' : undefined, hasNoButton ? 'wp-block-search__no-button' : undefined, hasOnlyButton ? 'wp-block-search__button-only' : undefined, !buttonUseIcon && !hasNoButton ? 'wp-block-search__text-button' : undefined, buttonUseIcon && !hasNoButton ? 'wp-block-search__icon-button' : undefined, hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ? 'wp-block-search__button-behavior-expand' : undefined, hasOnlyButton && isSearchFieldHidden ? 'wp-block-search__searchfield-hidden' : undefined);
   };
 
   const buttonPositionControls = [{
@@ -135,7 +152,8 @@ function SearchEdit(_ref) {
     icon: _icons2.buttonOutside,
     onClick: () => {
       setAttributes({
-        buttonPosition: 'button-outside'
+        buttonPosition: 'button-outside',
+        isSearchFieldHidden: false
       });
     }
   }, {
@@ -145,7 +163,8 @@ function SearchEdit(_ref) {
     icon: _icons2.buttonInside,
     onClick: () => {
       setAttributes({
-        buttonPosition: 'button-inside'
+        buttonPosition: 'button-inside',
+        isSearchFieldHidden: false
       });
     }
   }, {
@@ -155,7 +174,19 @@ function SearchEdit(_ref) {
     icon: _icons2.noButton,
     onClick: () => {
       setAttributes({
-        buttonPosition: 'no-button'
+        buttonPosition: 'no-button',
+        isSearchFieldHidden: false
+      });
+    }
+  }, {
+    role: 'menuitemradio',
+    title: (0, _i18n.__)('Button only'),
+    isActive: buttonPosition === 'button-only',
+    icon: _icons2.buttonOnly,
+    onClick: () => {
+      setAttributes({
+        buttonPosition: 'button-only',
+        isSearchFieldHidden: true
       });
     }
   }];
@@ -208,7 +239,8 @@ function SearchEdit(_ref) {
       value: placeholder,
       onChange: event => setAttributes({
         placeholder: event.target.value
-      })
+      }),
+      ref: searchFieldRef
     });
   };
 
@@ -221,11 +253,22 @@ function SearchEdit(_ref) {
         borderRadius
       } : borderProps.style)
     };
+
+    const handleButtonClick = () => {
+      if (hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior) {
+        setAttributes({
+          isSearchFieldHidden: !isSearchFieldHidden
+        });
+      }
+    };
+
     return (0, _element.createElement)(_element.Fragment, null, buttonUseIcon && (0, _element.createElement)("button", {
       type: "button",
       className: buttonClasses,
       style: buttonStyles,
-      "aria-label": buttonText ? (0, _dom.__unstableStripHTML)(buttonText) : (0, _i18n.__)('Search')
+      "aria-label": buttonText ? (0, _dom.__unstableStripHTML)(buttonText) : (0, _i18n.__)('Search'),
+      onClick: handleButtonClick,
+      ref: buttonRef
     }, (0, _element.createElement)(_icons.Icon, {
       icon: _icons.search
     })), !buttonUseIcon && (0, _element.createElement)(_blockEditor.RichText, {
@@ -237,7 +280,8 @@ function SearchEdit(_ref) {
       value: buttonText,
       onChange: html => setAttributes({
         buttonText: html
-      })
+      }),
+      onClick: handleButtonClick
     }));
   };
 
@@ -293,7 +337,7 @@ function SearchEdit(_ref) {
     return (0, _element.createElement)(_components.Button, {
       key: widthValue,
       isSmall: true,
-      variant: `${widthValue}%` === `${width}${widthUnit}` ? 'primary' : undefined,
+      variant: widthValue === width && widthUnit === '%' ? 'primary' : undefined,
       onClick: () => setAttributes({
         width: widthValue,
         widthUnit: '%'
@@ -304,14 +348,12 @@ function SearchEdit(_ref) {
   const padBorderRadius = radius => radius ? `calc(${radius} + ${DEFAULT_INNER_PADDING})` : undefined;
 
   const getWrapperStyles = () => {
-    var _borderProps$style, _borderProps$style2, _borderProps$style3, _borderProps$style4, _borderProps$style5;
-
     const styles = isButtonPositionInside ? borderProps.style : {
-      borderRadius: (_borderProps$style = borderProps.style) === null || _borderProps$style === void 0 ? void 0 : _borderProps$style.borderRadius,
-      borderTopLeftRadius: (_borderProps$style2 = borderProps.style) === null || _borderProps$style2 === void 0 ? void 0 : _borderProps$style2.borderTopLeftRadius,
-      borderTopRightRadius: (_borderProps$style3 = borderProps.style) === null || _borderProps$style3 === void 0 ? void 0 : _borderProps$style3.borderTopRightRadius,
-      borderBottomLeftRadius: (_borderProps$style4 = borderProps.style) === null || _borderProps$style4 === void 0 ? void 0 : _borderProps$style4.borderBottomLeftRadius,
-      borderBottomRightRadius: (_borderProps$style5 = borderProps.style) === null || _borderProps$style5 === void 0 ? void 0 : _borderProps$style5.borderBottomRightRadius
+      borderRadius: borderProps.style?.borderRadius,
+      borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+      borderTopRightRadius: borderProps.style?.borderTopRightRadius,
+      borderBottomLeftRadius: borderProps.style?.borderBottomLeftRadius,
+      borderBottomRightRadius: borderProps.style?.borderBottomRightRadius
     };
     const isNonZeroBorderRadius = borderRadius !== undefined && parseInt(borderRadius, 10) !== 0;
 
@@ -355,7 +397,8 @@ function SearchEdit(_ref) {
     }
   });
   const labelClassnames = (0, _classnames.default)('wp-block-search__label', typographyProps.className);
-  return (0, _element.createElement)("div", blockProps, controls, showLabel && (0, _element.createElement)(_blockEditor.RichText, {
+  return (0, _element.createElement)("div", { ...blockProps
+  }, controls, showLabel && (0, _element.createElement)(_blockEditor.RichText, {
     className: labelClassnames,
     "aria-label": (0, _i18n.__)('Label text'),
     placeholder: (0, _i18n.__)('Add label…'),
@@ -387,6 +430,6 @@ function SearchEdit(_ref) {
       toggleSelection(true);
     },
     showHandle: isSelected
-  }, (isButtonPositionInside || isButtonPositionOutside) && (0, _element.createElement)(_element.Fragment, null, renderTextField(), renderButton()), hasOnlyButton && renderButton(), hasNoButton && renderTextField()));
+  }, (isButtonPositionInside || isButtonPositionOutside || hasOnlyButton) && (0, _element.createElement)(_element.Fragment, null, renderTextField(), renderButton()), hasNoButton && renderTextField()));
 }
 //# sourceMappingURL=edit.js.map

package/build/search/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/search/edit.js"],"names":["DEFAULT_INNER_PADDING","SearchEdit","className","attributes","setAttributes","toggleSelection","isSelected","clientId","label","showLabel","placeholder","width","widthUnit","align","buttonText","buttonPosition","buttonUseIcon","style","insertedInNavigationBlock","select","getBlockParentsByBlockName","wasBlockJustInserted","blockEditorStore","length","__unstableMarkNextChangeAsNotPersistent","borderRadius","border","radius","borderProps","colorProps","fluidTypographySettings","layout","typographyProps","typography","fluid","wideSize","unitControlInstanceId","UnitControl","unitControlInputId","isButtonPositionInside","isButtonPositionOutside","hasNoButton","hasOnlyButton","units","availableUnits","defaultValues","PC_WIDTH_DEFAULT","px","PX_WIDTH_DEFAULT","getBlockClassNames","undefined","buttonPositionControls","role","title","isActive","icon","buttonOutside","onClick","buttonInside","noButton","getButtonPositionIcon","buttonOnly","getResizableSides","right","left","renderTextField","textFieldClasses","textFieldStyles","textDecoration","event","target","value","renderButton","buttonClasses","buttonStyles","search","html","controls","toggleLabel","buttonWithIcon","MIN_WIDTH","MIN_WIDTH_UNIT","newWidth","filteredWidth","parseInt","newUnit","map","widthValue","padBorderRadius","getWrapperStyles","styles","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","isNonZeroBorderRadius","topLeft","topRight","bottomLeft","bottomRight","Number","isInteger","blockProps","labelClassnames","direction","elt","offsetWidth","delta"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tBlockControls,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSetting,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport {\n\tToolbarDropdownMenu,\n\tToolbarGroup,\n\tButton,\n\tButtonGroup,\n\tToolbarButton,\n\tResizableBox,\n\tPanelBody,\n\tBaseControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tbuttonOnly,\n\tbuttonOutside,\n\tbuttonInside,\n\tnoButton,\n\tbuttonWithIcon,\n\ttoggleLabel,\n} from './icons';\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tMIN_WIDTH_UNIT,\n} from './utils.js';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tstyle,\n\t} = attributes;\n\n\tconst insertedInNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tuseEffect( () => {\n\t\tif ( ! insertedInNavigationBlock ) return;\n\t\t// This side-effect should not create an undo level.\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tsetAttributes( {\n\t\t\tshowLabel: false,\n\t\t\tbuttonUseIcon: true,\n\t\t\tbuttonPosition: 'button-inside',\n\t\t} );\n\t}, [ insertedInNavigationBlock ] );\n\tconst borderRadius = style?.border?.radius;\n\tconst borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps.style.borderRadius = `${ borderRadius }px`;\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst fluidTypographySettings = useSetting( 'typography.fluid' );\n\tconst layout = useSetting( 'layout' );\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tconst getBlockClassNames = () => {\n\t\treturn classnames(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'Button outside' ),\n\t\t\tisActive: buttonPosition === 'button-outside',\n\t\t\ticon: buttonOutside,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'Button inside' ),\n\t\t\tisActive: buttonPosition === 'button-inside',\n\t\t\ticon: buttonInside,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'No button' ),\n\t\t\tisActive: buttonPosition === 'no-button',\n\t\t\ticon: noButton,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'no-button',\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t];\n\n\tconst getButtonPositionIcon = () => {\n\t\tswitch ( buttonPosition ) {\n\t\t\tcase 'button-inside':\n\t\t\t\treturn buttonInside;\n\t\t\tcase 'button-outside':\n\t\t\t\treturn buttonOutside;\n\t\t\tcase 'no-button':\n\t\t\t\treturn noButton;\n\t\t\tcase 'button-only':\n\t\t\t\treturn buttonOnly;\n\t\t}\n\t};\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = classnames(\n\t\t\t'wp-block-search__input',\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? { borderRadius }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = classnames(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? { borderRadius }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text…' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\n\tconst controls = (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ttitle={ __( 'Toggle search label' ) }\n\t\t\t\t\t\ticon={ toggleLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: ! showLabel,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tclassName={ showLabel ? 'is-pressed' : undefined }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToolbarDropdownMenu\n\t\t\t\t\t\ticon={ getButtonPositionIcon() }\n\t\t\t\t\t\tlabel={ __( 'Change button position' ) }\n\t\t\t\t\t\tcontrols={ buttonPositionControls }\n\t\t\t\t\t/>\n\t\t\t\t\t{ ! hasNoButton && (\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\ttitle={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\ticon={ buttonWithIcon }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: ! buttonUseIcon,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tbuttonUseIcon ? 'is-pressed' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Display Settings' ) }>\n\t\t\t\t\t<BaseControl\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tid={ unitControlInputId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tid={ unitControlInputId }\n\t\t\t\t\t\t\tmin={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` }\n\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\tconst filteredWidth =\n\t\t\t\t\t\t\t\t\twidthUnit === '%' &&\n\t\t\t\t\t\t\t\t\tparseInt( newWidth, 10 ) > 100\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: newWidth;\n\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\twidth: parseInt( filteredWidth, 10 ),\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t__unstableInputWidth={ '80px' }\n\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\tclassName=\"wp-block-search__components-button-group\"\n\t\t\t\t\t\t\taria-label={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t`${ widthValue }%` ===\n\t\t\t\t\t\t\t\t\t\t\t`${ width }${ widthUnit }`\n\t\t\t\t\t\t\t\t\t\t\t\t? 'primary'\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\t\twidth: widthValue,\n\t\t\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\n\t\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ widthValue }%\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t</BaseControl>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tradius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t  };\n\n\t\tconst isNonZeroBorderRadius =\n\t\t\tborderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;\n\n\t\tif ( isButtonPositionInside && isNonZeroBorderRadius ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst { topLeft, topRight, bottomLeft, bottomRight } =\n\t\t\t\t\tborderRadius;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( topLeft ),\n\t\t\t\t\tborderTopRightRadius: padBorderRadius( topRight ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius( bottomLeft ),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius( bottomRight ),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = classnames(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label…' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: `${ width }${ widthUnit }`,\n\t\t\t\t} }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside || isButtonPositionOutside ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasOnlyButton && renderButton() }\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/search/edit.js"],"names":["DEFAULT_INNER_PADDING","BUTTON_BEHAVIOR_EXPAND","SearchEdit","className","attributes","setAttributes","toggleSelection","isSelected","clientId","label","showLabel","placeholder","width","widthUnit","align","buttonText","buttonPosition","buttonUseIcon","buttonBehavior","isSearchFieldHidden","style","insertedInNavigationBlock","select","getBlockParentsByBlockName","wasBlockJustInserted","blockEditorStore","length","__unstableMarkNextChangeAsNotPersistent","borderRadius","border","radius","borderProps","colorProps","fluidTypographySettings","layout","typographyProps","typography","fluid","wideSize","unitControlInstanceId","UnitControl","unitControlInputId","isButtonPositionInside","isButtonPositionOutside","hasNoButton","hasOnlyButton","searchFieldRef","buttonRef","units","availableUnits","defaultValues","PC_WIDTH_DEFAULT","px","PX_WIDTH_DEFAULT","getBlockClassNames","undefined","buttonPositionControls","role","title","isActive","icon","buttonOutside","onClick","buttonInside","noButton","buttonOnly","getButtonPositionIcon","getResizableSides","right","left","renderTextField","textFieldClasses","textFieldStyles","textDecoration","event","target","value","renderButton","buttonClasses","buttonStyles","handleButtonClick","search","html","controls","toggleLabel","buttonWithIcon","MIN_WIDTH","MIN_WIDTH_UNIT","newWidth","filteredWidth","parseInt","newUnit","map","widthValue","padBorderRadius","getWrapperStyles","styles","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","isNonZeroBorderRadius","topLeft","topRight","bottomLeft","bottomRight","Number","isInteger","blockProps","labelClassnames","direction","elt","offsetWidth","delta"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tBlockControls,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSetting,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tToolbarDropdownMenu,\n\tToolbarGroup,\n\tButton,\n\tButtonGroup,\n\tToolbarButton,\n\tResizableBox,\n\tPanelBody,\n\tBaseControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tbuttonOnly,\n\tbuttonOutside,\n\tbuttonInside,\n\tnoButton,\n\tbuttonWithIcon,\n\ttoggleLabel,\n} from './icons';\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tMIN_WIDTH_UNIT,\n} from './utils.js';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\n\nconst BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tbuttonBehavior,\n\t\tisSearchFieldHidden,\n\t\tstyle,\n\t} = attributes;\n\n\tconst insertedInNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tuseEffect( () => {\n\t\tif ( ! insertedInNavigationBlock ) return;\n\t\t// This side-effect should not create an undo level.\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tsetAttributes( {\n\t\t\tshowLabel: false,\n\t\t\tbuttonUseIcon: true,\n\t\t\tbuttonPosition: 'button-inside',\n\t\t} );\n\t}, [ insertedInNavigationBlock ] );\n\tconst borderRadius = style?.border?.radius;\n\tconst borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps.style.borderRadius = `${ borderRadius }px`;\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst fluidTypographySettings = useSetting( 'typography.fluid' );\n\tconst layout = useSetting( 'layout' );\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( hasOnlyButton && ! isSelected ) {\n\t\t\tsetAttributes( {\n\t\t\t\tisSearchFieldHidden: true,\n\t\t\t} );\n\t\t}\n\t}, [ hasOnlyButton, isSelected, setAttributes ] );\n\n\t// Show the search field when width changes.\n\tuseEffect( () => {\n\t\tif ( ! hasOnlyButton || ! isSelected ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tisSearchFieldHidden: false,\n\t\t} );\n\t}, [ hasOnlyButton, isSelected, setAttributes, width ] );\n\n\tconst getBlockClassNames = () => {\n\t\treturn classnames(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\thasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior\n\t\t\t\t? 'wp-block-search__button-behavior-expand'\n\t\t\t\t: undefined,\n\t\t\thasOnlyButton && isSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'Button outside' ),\n\t\t\tisActive: buttonPosition === 'button-outside',\n\t\t\ticon: buttonOutside,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\tisSearchFieldHidden: false,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'Button inside' ),\n\t\t\tisActive: buttonPosition === 'button-inside',\n\t\t\ticon: buttonInside,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t\t\tisSearchFieldHidden: false,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'No button' ),\n\t\t\tisActive: buttonPosition === 'no-button',\n\t\t\ticon: noButton,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'no-button',\n\t\t\t\t\tisSearchFieldHidden: false,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\trole: 'menuitemradio',\n\t\t\ttitle: __( 'Button only' ),\n\t\t\tisActive: buttonPosition === 'button-only',\n\t\t\ticon: buttonOnly,\n\t\t\tonClick: () => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tbuttonPosition: 'button-only',\n\t\t\t\t\tisSearchFieldHidden: true,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t];\n\n\tconst getButtonPositionIcon = () => {\n\t\tswitch ( buttonPosition ) {\n\t\t\tcase 'button-inside':\n\t\t\t\treturn buttonInside;\n\t\t\tcase 'button-outside':\n\t\t\t\treturn buttonOutside;\n\t\t\tcase 'no-button':\n\t\t\t\treturn noButton;\n\t\t\tcase 'button-only':\n\t\t\t\treturn buttonOnly;\n\t\t}\n\t};\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = classnames(\n\t\t\t'wp-block-search__input',\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? { borderRadius }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = classnames(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? { borderRadius }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\tconst handleButtonClick = () => {\n\t\t\tif ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tisSearchFieldHidden: ! isSearchFieldHidden,\n\t\t\t\t} );\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ handleButtonClick }\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text…' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ handleButtonClick }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\n\tconst controls = (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ttitle={ __( 'Toggle search label' ) }\n\t\t\t\t\t\ticon={ toggleLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: ! showLabel,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tclassName={ showLabel ? 'is-pressed' : undefined }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToolbarDropdownMenu\n\t\t\t\t\t\ticon={ getButtonPositionIcon() }\n\t\t\t\t\t\tlabel={ __( 'Change button position' ) }\n\t\t\t\t\t\tcontrols={ buttonPositionControls }\n\t\t\t\t\t/>\n\t\t\t\t\t{ ! hasNoButton && (\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\ttitle={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\ticon={ buttonWithIcon }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: ! buttonUseIcon,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tbuttonUseIcon ? 'is-pressed' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Display Settings' ) }>\n\t\t\t\t\t<BaseControl\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tid={ unitControlInputId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tid={ unitControlInputId }\n\t\t\t\t\t\t\tmin={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` }\n\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\tconst filteredWidth =\n\t\t\t\t\t\t\t\t\twidthUnit === '%' &&\n\t\t\t\t\t\t\t\t\tparseInt( newWidth, 10 ) > 100\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: newWidth;\n\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\twidth: parseInt( filteredWidth, 10 ),\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t__unstableInputWidth={ '80px' }\n\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\tclassName=\"wp-block-search__components-button-group\"\n\t\t\t\t\t\t\taria-label={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\twidthValue === width &&\n\t\t\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t\t\t? 'primary'\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\t\twidth: widthValue,\n\t\t\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\n\t\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ widthValue }%\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t</BaseControl>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tradius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t  };\n\n\t\tconst isNonZeroBorderRadius =\n\t\t\tborderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;\n\n\t\tif ( isButtonPositionInside && isNonZeroBorderRadius ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst { topLeft, topRight, bottomLeft, bottomRight } =\n\t\t\t\t\tborderRadius;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( topLeft ),\n\t\t\t\t\tborderTopRightRadius: padBorderRadius( topRight ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius( bottomLeft ),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius( bottomRight ),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = classnames(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label…' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: `${ width }${ widthUnit }`,\n\t\t\t\t} }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\n\t\t</div>\n\t);\n}\n"]}

package/build/search/edit.native.js

@@ -9,8 +9,6 @@ exports.default = SearchEdit;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reactNative = require("react-native");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -27,13 +25,23 @@ var _compose = require("@wordpress/compose");
 
 var _style = _interopRequireDefault(require("./style.scss"));
 
-var _styles$widthMargin, _styles$widthMargin2;
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
 
 /**
  * Constants
  */
 const MIN_BUTTON_WIDTH = 75;
-const MARGINS = ((_styles$widthMargin = _style.default.widthMargin) === null || _styles$widthMargin === void 0 ? void 0 : _styles$widthMargin.marginLeft) + ((_styles$widthMargin2 = _style.default.widthMargin) === null || _styles$widthMargin2 === void 0 ? void 0 : _styles$widthMargin2.paddingLeft);
+const MARGINS = _style.default.widthMargin?.marginLeft + _style.default.widthMargin?.paddingLeft;
 const BUTTON_OPTIONS = [{
   value: 'button-inside',
   label: (0, _i18n.__)('Button inside')
@@ -66,18 +74,15 @@ function useIsScreenReaderEnabled() {
   return isScreenReaderEnabled;
 }
 
-function SearchEdit(_ref) {
-  var _style$baseColors, _style$baseColors2, _style$baseColors2$co, _style$baseColors3, _style$baseColors4, _style$baseColors4$co, _style$baseColors5, _style$baseColors5$bl, _style$baseColors5$bl2, _attributes$style, _styles$richTextButto2;
-
-  let {
-    onFocus,
-    isSelected,
-    attributes,
-    setAttributes,
-    className,
-    blockWidth,
-    style
-  } = _ref;
+function SearchEdit({
+  onFocus,
+  isSelected,
+  attributes,
+  setAttributes,
+  className,
+  blockWidth,
+  style
+}) {
   const [isButtonSelected, setIsButtonSelected] = (0, _element.useState)(false);
   const [isLabelSelected, setIsLabelSelected] = (0, _element.useState)(false);
   const [isPlaceholderSelected, setIsPlaceholderSelected] = (0, _element.useState)(false);
@@ -116,13 +121,12 @@ function SearchEdit(_ref) {
     return textInputRef && textInputRef.current;
   };
 
-  const onLayoutButton = _ref2 => {
-    let {
-      nativeEvent
-    } = _ref2;
+  const onLayoutButton = ({
+    nativeEvent
+  }) => {
     const {
       width
-    } = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.layout;
+    } = nativeEvent?.layout;
 
     if (width) {
       setButtonWidth(width);
@@ -180,12 +184,12 @@ function SearchEdit(_ref) {
   })));
   const isButtonInside = buttonPosition === 'button-inside';
   const borderStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.border, _style.default.borderDark);
-  const inputStyle = [!isButtonInside && borderStyle, (0, _compose.usePreferredColorSchemeStyle)(_style.default.plainTextInput, _style.default.plainTextInputDark), (style === null || style === void 0 ? void 0 : (_style$baseColors = style.baseColors) === null || _style$baseColors === void 0 ? void 0 : _style$baseColors.color) && {
-    color: style === null || style === void 0 ? void 0 : (_style$baseColors2 = style.baseColors) === null || _style$baseColors2 === void 0 ? void 0 : (_style$baseColors2$co = _style$baseColors2.color) === null || _style$baseColors2$co === void 0 ? void 0 : _style$baseColors2$co.text
+  const inputStyle = [!isButtonInside && borderStyle, (0, _compose.usePreferredColorSchemeStyle)(_style.default.plainTextInput, _style.default.plainTextInputDark), style?.baseColors?.color && {
+    color: style?.baseColors?.color?.text
   }];
   const placeholderStyle = { ...(0, _compose.usePreferredColorSchemeStyle)(_style.default.plainTextPlaceholder, _style.default.plainTextPlaceholderDark),
-    ...((style === null || style === void 0 ? void 0 : (_style$baseColors3 = style.baseColors) === null || _style$baseColors3 === void 0 ? void 0 : _style$baseColors3.color) && {
-      color: style === null || style === void 0 ? void 0 : (_style$baseColors4 = style.baseColors) === null || _style$baseColors4 === void 0 ? void 0 : (_style$baseColors4$co = _style$baseColors4.color) === null || _style$baseColors4$co === void 0 ? void 0 : _style$baseColors4$co.text
+    ...(style?.baseColors?.color && {
+      color: style?.baseColors?.color?.text
     })
   };
   const searchBarStyle = [_style.default.searchBarContainer, isButtonInside && borderStyle, isLongButton && {
@@ -265,7 +269,7 @@ function SearchEdit(_ref) {
         onFocus();
       },
       onBlur: () => setIsPlaceholderSelected(false),
-      placeholderTextColor: placeholderStyle === null || placeholderStyle === void 0 ? void 0 : placeholderStyle.color
+      placeholderTextColor: placeholderStyle?.color
     }));
   }; // To achieve proper expanding and shrinking `RichText` on Android, there is a need to set
   // a `placeholder` as an empty string when `RichText` is focused,
@@ -273,41 +277,39 @@ function SearchEdit(_ref) {
 
 
   const buttonPlaceholderText = isButtonSelected || !isButtonSelected && buttonText && buttonText !== '' ? '' : (0, _i18n.__)('Add button text');
-  const baseButtonStyles = { ...(style === null || style === void 0 ? void 0 : (_style$baseColors5 = style.baseColors) === null || _style$baseColors5 === void 0 ? void 0 : (_style$baseColors5$bl = _style$baseColors5.blocks) === null || _style$baseColors5$bl === void 0 ? void 0 : (_style$baseColors5$bl2 = _style$baseColors5$bl['core/button']) === null || _style$baseColors5$bl2 === void 0 ? void 0 : _style$baseColors5$bl2.color),
-    ...(attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.color),
-    ...((style === null || style === void 0 ? void 0 : style.color) && {
+  const baseButtonStyles = { ...style?.baseColors?.blocks?.['core/button']?.color,
+    ...attributes?.style?.color,
+    ...(style?.color && {
       text: style.color
     })
   };
-  const richTextButtonContainerStyle = [_style.default.buttonContainer, isLongButton && _style.default.buttonContainerWide, (baseButtonStyles === null || baseButtonStyles === void 0 ? void 0 : baseButtonStyles.background) && {
+  const richTextButtonContainerStyle = [_style.default.buttonContainer, isLongButton && _style.default.buttonContainerWide, baseButtonStyles?.background && {
     backgroundColor: baseButtonStyles.background,
     borderWidth: 0
-  }, (style === null || style === void 0 ? void 0 : style.backgroundColor) && {
+  }, style?.backgroundColor && {
     backgroundColor: style.backgroundColor,
     borderWidth: 0
   }];
   const richTextButtonStyle = { ..._style.default.richTextButton,
-    ...((baseButtonStyles === null || baseButtonStyles === void 0 ? void 0 : baseButtonStyles.text) && {
+    ...(baseButtonStyles?.text && {
       color: baseButtonStyles.text,
       placeholderColor: baseButtonStyles.text
     })
   };
   const iconStyles = { ..._style.default.icon,
-    ...((baseButtonStyles === null || baseButtonStyles === void 0 ? void 0 : baseButtonStyles.text) && {
+    ...(baseButtonStyles?.text && {
       fill: baseButtonStyles.text
     })
   };
 
   const renderButton = () => {
-    var _styles$richTextButto;
-
     return (0, _element.createElement)(_reactNative.View, {
       style: richTextButtonContainerStyle
-    }, buttonUseIcon && (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
-      icon: _icons.search
-    }, iconStyles, {
+    }, buttonUseIcon && (0, _element.createElement)(_components.Icon, {
+      icon: _icons.search,
+      ...iconStyles,
       onLayout: onLayoutButton
-    })), !buttonUseIcon && (0, _element.createElement)(_reactNative.View, {
+    }), !buttonUseIcon && (0, _element.createElement)(_reactNative.View, {
       accessible: true,
       accessibilityRole: "none",
       accessibilityHint: isScreenReaderEnabled ? (0, _i18n.__)('Double tap to edit button text') : undefined,
@@ -335,15 +337,15 @@ function SearchEdit(_ref) {
       onBlur: () => {
         setIsButtonSelected(false);
       },
-      selectionColor: (_styles$richTextButto = _style.default.richTextButtonCursor) === null || _styles$richTextButto === void 0 ? void 0 : _styles$richTextButto.color
+      selectionColor: _style.default.richTextButtonCursor?.color
     })));
   };
 
-  return (0, _element.createElement)(_reactNative.View, (0, _extends2.default)({}, blockProps, {
+  return (0, _element.createElement)(_reactNative.View, { ...blockProps,
     style: _style.default.searchBlockContainer,
     importantForAccessibility: isSelected ? 'yes' : 'no-hide-descendants',
     accessibilityElementsHidden: isSelected ? false : true
-  }), isSelected && controls, showLabel && (0, _element.createElement)(_reactNative.View, {
+  }, isSelected && controls, showLabel && (0, _element.createElement)(_reactNative.View, {
     accessible: true,
     accessibilityRole: "none",
     accessibilityHint: isScreenReaderEnabled ? (0, _i18n.__)('Double tap to edit label text') : undefined,
@@ -367,7 +369,7 @@ function SearchEdit(_ref) {
     onBlur: () => {
       setIsLabelSelected(false);
     },
-    selectionColor: (_styles$richTextButto2 = _style.default.richTextButtonCursor) === null || _styles$richTextButto2 === void 0 ? void 0 : _styles$richTextButto2.color
+    selectionColor: _style.default.richTextButtonCursor?.color
   })), ('button-inside' === buttonPosition || 'button-outside' === buttonPosition) && (0, _element.createElement)(_reactNative.View, {
     style: searchBarStyle
   }, renderTextField(), renderButton()), 'button-only' === buttonPosition && renderButton(), 'no-button' === buttonPosition && renderTextField());