@dnb/eufemia/cjs/components/filter/FilterSearch.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _Input = _interopRequireDefault(require("../input/Input.js"));
var _ProgressIndicator2 = _interopRequireDefault(require("../progress-indicator/ProgressIndicator.js"));
var _FilterContext = require("./FilterContext.js");
var _jsxRuntime = require("react/jsx-runtime");
var _ProgressIndicator;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FilterSearch({
  label,
  submitBehavior,
  onChange: onChangeProp,
  className,
  ...rest
}) {
  const context = (0, _react.useContext)(_FilterContext.FilterContext);
  if (!context) {
    throw new Error('Filter.Search must be used inside a Filter.Root.');
  }
  const isManual = submitBehavior === 'manual';
  const isTypingRef = (0, _react.useRef)(false);
  const [localValue, setLocalValue] = (0, _react.useState)(context.state.search);
  const {
    setSearch
  } = context;
  const handleChange = (0, _react.useCallback)(({
    value
  }) => {
    isTypingRef.current = true;
    if (isManual) {
      setLocalValue(value);
      if (value === '') {
        setSearch(value);
      }
    } else {
      setSearch(value);
    }
    onChangeProp?.(value);
  }, [isManual, setSearch, onChangeProp]);
  const handleSubmit = (0, _react.useCallback)(({
    value
  }) => {
    setSearch(value);
  }, [setSearch]);
  const handleClear = (0, _react.useCallback)(() => {
    setLocalValue('');
    setSearch('');
  }, [setSearch]);
  (0, _react.useEffect)(() => {
    if (!context.resultLoading) {
      isTypingRef.current = false;
    }
  }, [context.resultLoading]);
  (0, _react.useEffect)(() => {
    if (!isManual) {
      setLocalValue(context.state.search);
    } else if (context.state.search === '') {
      setLocalValue('');
    }
  }, [isManual, context.state.search]);
  const showIndicator = context.resultLoading && isTypingRef.current;
  return (0, _jsxRuntime.jsx)("div", {
    className: (0, _clsx.clsx)('dnb-filter__search', showIndicator && 'dnb-filter__search--show-indicator', className),
    children: (0, _jsxRuntime.jsx)(_Input.default, {
      ...rest,
      type: "search",
      label: label,
      labelDirection: "vertical",
      value: isManual ? localValue : context.state.search,
      onChange: handleChange,
      ...(isManual ? {
        onSubmit: handleSubmit,
        onClear: handleClear
      } : undefined),
      showSubmitButton: isManual,
      icon: showIndicator ? _ProgressIndicator || (_ProgressIndicator = (0, _jsxRuntime.jsx)(_ProgressIndicator2.default, {
        type: "circular",
        size: "small"
      })) : undefined,
      stretch: true,
      size: "medium",
      showClearButton: true,
      autoCapitalize: "none",
      autoCorrect: "off",
      spellCheck: false
    })
  });
}
var _default = exports.default = FilterSearch;
//# sourceMappingURL=FilterSearch.js.map