@procore/core-react/dist/Search/Search.js

React library of Procore Design Guidelines

var _excluded = ["onChange", "onClear", "onSubmit", "usingHook", "value", "error", "variant"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { Clear, Search as SearchIcon } from '@procore/core-icons/dist';
import { mergeProps } from '@react-aria/utils';
import React from 'react';
import { useI18nContext } from '../_hooks/I18n';
import { mergeRefs } from '../_utils/mergeRefs';
import { usingHookOrDefault } from '../_utils/usingHookOrDefault';
import { useSearch } from './Search.hooks';
import { StyledClearButton, StyledInput, StyledSearch, StyledSearchButton } from './Search.styles';
/**

 Our users use search to find items on a tool’s landing page or, in forms, users
 use a search typeahead to find information to associate with the form.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-search--demo)

 @see [Design Guidelines](https://design.procore.com/search-component)

 */
export var Search = /*#__PURE__*/React.forwardRef(function Search(_ref, ref) {
  var _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    _ref$onClear = _ref.onClear,
    onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
    _ref$onSubmit = _ref.onSubmit,
    onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit,
    usingHook = _ref.usingHook,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value,
    error = _ref.error,
    variant = _ref.variant,
    props = _objectWithoutProperties(_ref, _excluded);
  var i18n = useI18nContext();
  var search = usingHookOrDefault(usingHook, useSearch)({
    initialValue: value,
    onChange: onChange,
    onClear: onClear,
    onSubmit: onSubmit
  });
  var inputRef = React.useRef(null);
  var setFocusToInput = function setFocusToInput() {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
  return /*#__PURE__*/React.createElement(StyledSearch, null, /*#__PURE__*/React.createElement(StyledInput, _extends({
    "aria-label": i18n.t('core.search.label')
  }, mergeProps(props, search.domHandlers), {
    "data-qa": "core-search-input",
    ref: mergeRefs(ref, inputRef),
    type: "search",
    value: search.value,
    $error: error,
    $variant: variant
  })), !search.isEmpty && /*#__PURE__*/React.createElement(StyledClearButton, {
    "aria-label": i18n.t('core.search.clear'),
    "data-qa": "core-search-clear-icon",
    icon: /*#__PURE__*/React.createElement(Clear, null),
    size: "sm",
    variant: "tertiary",
    disabled: props.disabled,
    onClick: function onClick() {
      search.clear();
      setFocusToInput();
    },
    tabIndex: -1 // TODO revisit this accessibility
  }), /*#__PURE__*/React.createElement(StyledSearchButton, {
    "aria-label": i18n.t('core.search.goSearch'),
    "data-qa": "core-search-search-icon",
    icon: /*#__PURE__*/React.createElement(SearchIcon, null),
    size: "sm",
    variant: "tertiary",
    disabled: props.disabled,
    onClick: function onClick() {
      search.submit();
      setFocusToInput();
    },
    tabIndex: -1 // TODO revisit this accessibility
  }));
});

Search.displayName = 'Search';
//# sourceMappingURL=Search.js.map