@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-cjs/core/SearchBox/SearchBox.js

@@ -1,154 +1,227 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "SearchBox", {
-    enumerable: true,
-    get: function() {
-        return SearchBox;
-    }
+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 = _interop_require_wildcard._(require("react"));
-const _classnames = _interop_require_default._(require("classnames"));
-const _index = require("../../utils/index.js");
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _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, {
+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),
+        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))));
+        '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));
+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),
+  );
 };
 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);
+const SearchBoxExpandedState = ({ children }) => {
+  let { isExpanded, expandable } = (0, _index.useSafeContext)(SearchBoxContext);
+  if (expandable && !isExpanded) return null;
+  return _react.createElement(_react.Fragment, null, children);
 };
 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));
+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),
+  );
 });
 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
-    });
+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,
+  });
 });
 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));
+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),
+  );
 });
 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));
+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),
+  );
 });
 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));
+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),
+  );
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 const SearchBox = Object.assign(SearchBoxComponent, {
-    Icon: SearchBoxIcon,
-    Input: SearchBoxInput,
-    Button: SearchBoxButton,
-    CollapseButton: SearchBoxCollapseButton,
-    ExpandButton: SearchBoxExpandButton,
-    ExpandedState: SearchBoxExpandedState,
-    CollapsedState: SearchBoxCollapsedState
+  Icon: SearchBoxIcon,
+  Input: SearchBoxInput,
+  Button: SearchBoxButton,
+  CollapseButton: SearchBoxCollapseButton,
+  ExpandButton: SearchBoxExpandButton,
+  ExpandedState: SearchBoxExpandedState,
+  CollapsedState: SearchBoxCollapsedState,
 });
 SearchBox.displayName = 'SearchBox';