@wordpress/components/build/search-control/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SearchControl = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _button = _interopRequireDefault(require("../button"));
var _context = require("../context");
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SuffixItem({
  searchRef,
  value,
  onChange,
  onClose
}) {
  if (!onClose && !value) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      icon: _icons.search
    });
  }
  if (onClose) {
    (0, _deprecated.default)('`onClose` prop in wp.components.SearchControl', {
      since: '6.8'
    });
  }
  const onReset = () => {
    onChange('');
    searchRef.current?.focus();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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 = false,
  className,
  onChange,
  value,
  label = (0, _i18n.__)('Search'),
  placeholder = (0, _i18n.__)('Search'),
  hideLabelFromVision = true,
  onClose,
  size = 'default',
  ...restProps
}, forwardedRef) {
  // @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.
  const {
    disabled,
    ...filteredRestProps
  } = restProps;
  const searchRef = (0, _element.useRef)(null);
  const instanceId = (0, _compose.useInstanceId)(SearchControl, 'components-search-control');
  const contextValue = (0, _element.useMemo)(() => ({
    BaseControl: {
      // Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
      // to provide backwards compatible margin for SearchControl.
      // (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
      _overrides: {
        __nextHasNoMarginBottom
      },
      __associatedWPComponentName: 'SearchControl'
    },
    // `isBorderless` is still experimental and not a public prop for InputControl yet.
    InputBase: {
      isBorderless: true
    }
  }), [__nextHasNoMarginBottom]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ContextSystemProvider, {
    value: contextValue,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledInputControl, {
      __next40pxDefaultSize: true,
      id: instanceId,
      hideLabelFromVision: hideLabelFromVision,
      label: label,
      ref: (0, _compose.useMergeRefs)([searchRef, forwardedRef]),
      type: "search",
      size: size,
      className: (0, _clsx.default)('components-search-control', className),
      onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),
      autoComplete: "off",
      placeholder: placeholder,
      value: value !== null && value !== void 0 ? value : '',
      suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SuffixItemWrapper, {
        size: size,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SuffixItem, {
          searchRef: searchRef,
          value: value,
          onChange: onChange,
          onClose: onClose
        })
      }),
      ...filteredRestProps
    })
  });
}

/**
 * SearchControl components let users display a search control.
 *
 * ```jsx
 * import { SearchControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * function MySearchControl( { className, setState } ) {
 *   const [ searchInput, setSearchInput ] = useState( '' );
 *
 *   return (
 *     <SearchControl
 *       __nextHasNoMarginBottom
 *       value={ searchInput }
 *       onChange={ setSearchInput }
 *     />
 *   );
 * }
 * ```
 */
const SearchControl = exports.SearchControl = (0, _element.forwardRef)(UnforwardedSearchControl);
var _default = exports.default = SearchControl;
//# sourceMappingURL=index.js.map