@itwin/itwinui-react/cjs/core/SearchBox/SearchBox.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'SearchBox', {
  enumerable: true,
  get: function () {
    return SearchBox;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const SearchBoxContext = _react.createContext(void 0);
const SearchBoxComponent = _react.forwardRef((props, ref) => {
  let {
    size,
    expandable = false,
    isDisabled = false,
    onCollapse: onCollapseProp,
    onExpand: onExpandProp,
    isExpanded: isExpandedProp,
    children,
    inputProps,
    className,
    ...rest
  } = props;
  let uid = (0, _index.useId)();
  let [inputId, setInputId] = _react.useState(uid);
  let inputRef = _react.useRef(null);
  let openButtonRef = _react.useRef(null);
  let [localExpanded, setLocalExpanded] = _react.useState(isExpandedProp);
  let isExpanded = isExpandedProp ?? localExpanded;
  let onCollapse = () => {
    setLocalExpanded(false);
    onCollapseProp?.();
    queueMicrotask(() =>
      openButtonRef.current?.focus({
        preventScroll: true,
      }),
    );
  };
  let onExpand = () => {
    setLocalExpanded(true);
    onExpandProp?.();
    queueMicrotask(() =>
      inputRef.current?.focus({
        preventScroll: true,
      }),
    );
  };
  return _react.createElement(
    SearchBoxContext.Provider,
    {
      value: {
        size,
        isDisabled,
        onCollapse,
        onExpand,
        inputRef,
        inputId,
        setInputId,
        openButtonRef,
        isExpanded,
        expandable,
      },
    },
    _react.createElement(
      _index.InputFlexContainer,
      {
        ref: ref,
        className: (0, _classnames.default)(
          'iui-searchbox',
          {
            'iui-expandable-searchbox': expandable,
          },
          className,
        ),
        size: size,
        isDisabled: isDisabled,
        'data-iui-expanded': isExpanded,
        ...rest,
      },
      children ??
        _react.createElement(
          _react.Fragment,
          null,
          _react.createElement(
            SearchBoxCollapsedState,
            null,
            _react.createElement(SearchBoxExpandButton, null),
          ),
          _react.createElement(
            SearchBoxExpandedState,
            null,
            _react.createElement(SearchBoxIcon, null),
            _react.createElement(SearchBoxInput, inputProps),
            expandable
              ? _react.createElement(SearchBoxCollapseButton, null)
              : null,
          ),
        ),
    ),
  );
});
const SearchBoxCollapsedState = ({ children }) => {
  let { isExpanded, expandable } = (0, _index.useSafeContext)(SearchBoxContext);
  if (!expandable || isExpanded) return null;
  return _react.createElement(
    _react.Fragment,
    null,
    children ?? _react.createElement(SearchBoxExpandButton, null),
  );
};
if ('development' === process.env.NODE_ENV)
  SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
const SearchBoxExpandedState = ({ children }) => {
  let { isExpanded, expandable } = (0, _index.useSafeContext)(SearchBoxContext);
  if (expandable && !isExpanded) return null;
  return _react.createElement(_react.Fragment, null, children);
};
if ('development' === process.env.NODE_ENV)
  SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
const SearchBoxIcon = _react.forwardRef((props, ref) => {
  let { className, children, ...rest } = props;
  return _react.createElement(
    _index.InputFlexContainerIcon,
    {
      'aria-hidden': true,
      className: (0, _classnames.default)('iui-search-icon', className),
      ref: ref,
      ...rest,
    },
    children ?? _react.createElement(_index.SvgSearch, null),
  );
});
if ('development' === process.env.NODE_ENV)
  SearchBoxIcon.displayName = 'SearchBox.Icon';
const SearchBoxInput = _react.forwardRef((props, ref) => {
  let { className, id: idProp, ...rest } = props;
  let { inputId, setInputId, isDisabled, inputRef } = (0,
  _index.useSafeContext)(SearchBoxContext);
  _react.useEffect(() => {
    if (idProp && idProp !== inputId) setInputId(idProp);
  }, [idProp, inputId, setInputId]);
  return _react.createElement(_index.Box, {
    as: 'input',
    id: idProp ?? inputId,
    ref: (0, _index.useMergedRefs)(ref, inputRef),
    role: 'searchbox',
    type: 'text',
    className: (0, _classnames.default)('iui-search-input', className),
    disabled: isDisabled,
    ...rest,
  });
});
if ('development' === process.env.NODE_ENV)
  SearchBoxInput.displayName = 'SearchBox.Input';
const SearchBoxButton = _react.forwardRef((props, ref) => {
  let { children, ...rest } = props;
  let { size: sizeContext, isDisabled } = (0, _index.useSafeContext)(
    SearchBoxContext,
  );
  return _react.createElement(
    _index.InputFlexContainerButton,
    {
      size: sizeContext,
      ref: ref,
      disabled: isDisabled,
      ...rest,
    },
    children ?? _react.createElement(_index.SvgSearch, null),
  );
});
if ('development' === process.env.NODE_ENV)
  SearchBoxButton.displayName = 'SearchBox.Button';
const SearchBoxCollapseButton = _react.forwardRef((props, ref) => {
  let { children, onClick: onClickProp, ...rest } = props;
  let {
    onCollapse,
    size: sizeContext,
    isDisabled,
  } = (0, _index.useSafeContext)(SearchBoxContext);
  return _react.createElement(
    SearchBoxButton,
    {
      ref: ref,
      'aria-label': 'Close searchbox',
      size: sizeContext,
      disabled: isDisabled,
      onClick: (0, _index.mergeEventHandlers)(onClickProp, onCollapse),
      ...rest,
    },
    children ?? _react.createElement(_index.SvgCloseSmall, null),
  );
});
if ('development' === process.env.NODE_ENV)
  SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
const SearchBoxExpandButton = _react.forwardRef((props, ref) => {
  let { children, onClick: onClickProp, ...rest } = props;
  let {
    onExpand,
    size: sizeContext,
    isDisabled,
    openButtonRef,
  } = (0, _index.useSafeContext)(SearchBoxContext);
  return _react.createElement(
    SearchBoxButton,
    {
      ref: (0, _index.useMergedRefs)(ref, openButtonRef),
      'aria-label': 'Expand searchbox',
      size: sizeContext,
      disabled: isDisabled,
      onClick: (0, _index.mergeEventHandlers)(onClickProp, onExpand),
      styleType: 'default',
      ...rest,
    },
    children ?? _react.createElement(_index.SvgSearch, null),
  );
});
if ('development' === process.env.NODE_ENV)
  SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
const SearchBox = Object.assign(SearchBoxComponent, {
  Icon: SearchBoxIcon,
  Input: SearchBoxInput,
  Button: SearchBoxButton,
  CollapseButton: SearchBoxCollapseButton,
  ExpandButton: SearchBoxExpandButton,
  ExpandedState: SearchBoxExpandedState,
  CollapsedState: SearchBoxCollapsedState,
});
if ('development' === process.env.NODE_ENV) SearchBox.displayName = 'SearchBox';