@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/Radio/Radio.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Basic radio input component
  * @example
@@ -20,54 +20,12 @@ const index_js_1 = require('../utils/index.js');
  * <Radio status='negative' label='Negative' />
  */
 exports.Radio = React.forwardRef((props, ref) => {
-  const {
-    className,
-    disabled = false,
-    label,
-    status,
-    labelProps,
-    wrapperProps,
-    style,
-    ...rest
-  } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-  const radio = React.createElement(index_js_1.Box, {
-    as: 'input',
-    className: (0, classnames_1.default)('iui-radio', className),
-    style: style,
-    disabled: disabled,
-    type: 'radio',
-    ref: refs,
-    ...rest,
-  });
-  return !label
-    ? radio
-    : React.createElement(
-        index_js_1.Box,
-        {
-          as: 'label',
-          ...wrapperProps,
-          className: (0, classnames_1.default)(
-            'iui-radio-wrapper',
-            { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
-            wrapperProps?.className,
-          ),
-        },
+    const { className, disabled = false, label, status, labelProps, wrapperProps, style, ...rest } = props;
+    const inputElementRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+    const radio = (React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-radio', className), style: style, disabled: disabled, type: 'radio', ref: refs, ...rest }));
+    return !label ? (radio) : (React.createElement(index_js_1.Box, { as: 'label', ...wrapperProps, className: (0, classnames_1.default)('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, wrapperProps?.className) },
         radio,
-        label &&
-          React.createElement(
-            index_js_1.Box,
-            {
-              as: 'span',
-              ...labelProps,
-              className: (0, classnames_1.default)(
-                'iui-radio-label',
-                labelProps?.className,
-              ),
-            },
-            label,
-          ),
-      );
+        label && (React.createElement(index_js_1.Box, { as: 'span', ...labelProps, className: (0, classnames_1.default)('iui-radio-label', labelProps?.className) }, label))));
 });
 exports.default = exports.Radio;

package/cjs/core/RadioTiles/RadioTile.js

@@ -1,93 +1,27 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioTile = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
 exports.RadioTile = React.forwardRef((props, ref) => {
-  const {
-    icon,
-    label,
-    description,
-    className,
-    wrapperProps,
-    iconProps,
-    labelProps,
-    subLabelProps,
-    style,
-    ...rest
-  } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'label',
-      'data-iui-disabled': props.disabled ? 'true' : undefined,
-      ...wrapperProps,
-      className: (0, classnames_1.default)(
-        'iui-radio-tile',
-        wrapperProps?.className,
-      ),
-    },
-    React.createElement(index_js_1.Box, {
-      as: 'input',
-      ref: refs,
-      className: (0, classnames_1.default)('iui-radio-tile-input', className),
-      style: style,
-      type: 'radio',
-      ...rest,
-    }),
-    icon &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          ...iconProps,
-          className: (0, classnames_1.default)(
-            'iui-radio-tile-icon',
-            iconProps?.className,
-          ),
-        },
-        icon,
-      ),
-    label &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...labelProps,
-          className: (0, classnames_1.default)(
-            'iui-radio-tile-label',
-            labelProps?.className,
-          ),
-        },
-        label,
-      ),
-    description &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...subLabelProps,
-          className: (0, classnames_1.default)(
-            'iui-radio-tile-sublabel',
-            subLabelProps?.className,
-          ),
-        },
-        description,
-      ),
-  );
+    const { icon, label, description, className, wrapperProps, iconProps, labelProps, subLabelProps, style, ...rest } = props;
+    const inputElementRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+    return (React.createElement(index_js_1.Box, { as: 'label', "data-iui-disabled": props.disabled ? 'true' : undefined, ...wrapperProps, className: (0, classnames_1.default)('iui-radio-tile', wrapperProps?.className) },
+        React.createElement(index_js_1.Box, { as: 'input', ref: refs, className: (0, classnames_1.default)('iui-radio-tile-input', className), style: style, type: 'radio', ...rest }),
+        icon && (React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...iconProps, className: (0, classnames_1.default)('iui-radio-tile-icon', iconProps?.className) }, icon)),
+        label && (React.createElement(index_js_1.Box, { as: 'div', ...labelProps, className: (0, classnames_1.default)('iui-radio-tile-label', labelProps?.className) }, label)),
+        description && (React.createElement(index_js_1.Box, { as: 'div', ...subLabelProps, className: (0, classnames_1.default)('iui-radio-tile-sublabel', subLabelProps?.className) }, description))));
 });
 exports.default = exports.RadioTile;

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioTileGroup = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const InputGroup_js_1 = require('../InputGroup/InputGroup.js');
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const InputGroup_js_1 = require("../InputGroup/InputGroup.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -18,15 +18,8 @@ const index_js_1 = require('../utils/index.js');
  * </RadioTileGroup>
  */
 exports.RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-  const { children, label, ...rest } = props;
-  return React.createElement(
-    InputGroup_js_1.InputGroup,
-    { label: label, ref: forwardedRef, ...rest },
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-radio-tile-container' },
-      children,
-    ),
-  );
+    const { children, label, ...rest } = props;
+    return (React.createElement(InputGroup_js_1.InputGroup, { label: label, ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-radio-tile-container' }, children)));
 });
 exports.default = exports.RadioTileGroup;

package/cjs/core/SearchBox/SearchBox.js

@@ -1,227 +1,110 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBox = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
-const Icon_js_1 = require('../Icon/Icon.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
+const Icon_js_1 = require("../Icon/Icon.js");
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
-  const {
-    size,
-    expandable = false,
-    isDisabled = false,
-    onCollapse: onCollapseProp,
-    onExpand: onExpandProp,
-    isExpanded: isExpandedProp,
-    children,
-    inputProps,
-    className,
-    ...rest
-  } = props;
-  const uid = (0, index_js_1.useId)();
-  const [inputId, setInputId] = React.useState(uid);
-  const inputRef = React.useRef(null);
-  const openButtonRef = React.useRef(null);
-  const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-  const isExpanded = isExpandedProp ?? localExpanded;
-  const onCollapse = () => {
-    setLocalExpanded(false);
-    onCollapseProp?.();
-    queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
-  };
-  const 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_js_1.InputFlexContainer,
-      {
-        ref: ref,
-        className: (0, classnames_1.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 { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
+    const uid = (0, index_js_1.useId)();
+    const [inputId, setInputId] = React.useState(uid);
+    const inputRef = React.useRef(null);
+    const openButtonRef = React.useRef(null);
+    const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
+    const isExpanded = isExpandedProp ?? localExpanded;
+    const onCollapse = () => {
+        setLocalExpanded(false);
+        onCollapseProp?.();
+        queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
+    };
+    const 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_js_1.InputFlexContainer, { ref: ref, className: (0, classnames_1.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 }) => {
-  const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(
-    SearchBoxContext,
-  );
-  if (!expandable || isExpanded) {
-    return null;
-  }
-  return React.createElement(
-    React.Fragment,
-    null,
-    children ?? React.createElement(SearchBoxExpandButton, null),
-  );
+const SearchBoxCollapsedState = ({ children, }) => {
+    const { isExpanded, expandable } = (0, index_js_1.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 }) => {
-  const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(
-    SearchBoxContext,
-  );
-  if (expandable && !isExpanded) {
-    return null;
-  }
-  return React.createElement(React.Fragment, null, children);
+const SearchBoxExpandedState = ({ children, }) => {
+    const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+    if (expandable && !isExpanded) {
+        return null;
+    }
+    return React.createElement(React.Fragment, null, children);
 };
 SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 // ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    Icon_js_1.Icon,
-    {
-      'aria-hidden': true,
-      className: (0, classnames_1.default)('iui-search-icon', className),
-      ref: ref,
-      ...rest,
-    },
-    children ?? React.createElement(index_js_1.SvgSearch, null),
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, className: (0, classnames_1.default)('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
 // ----------------------------------------------------------------------------
 const SearchBoxInput = React.forwardRef((props, ref) => {
-  const { className, id: idProp, ...rest } = props;
-  const { inputId, setInputId, isDisabled, inputRef } = (0,
-  index_js_1.useSafeContext)(SearchBoxContext);
-  React.useEffect(() => {
-    if (idProp && idProp !== inputId) {
-      setInputId(idProp);
-    }
-  }, [idProp, inputId, setInputId]);
-  return React.createElement(index_js_1.Box, {
-    as: 'input',
-    id: idProp ?? inputId,
-    ref: (0, index_js_1.useMergedRefs)(ref, inputRef),
-    role: 'searchbox',
-    type: 'text',
-    className: (0, classnames_1.default)('iui-search-input', className),
-    disabled: isDisabled,
-    ...rest,
-  });
+    const { className, id: idProp, ...rest } = props;
+    const { inputId, setInputId, isDisabled, inputRef } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+    React.useEffect(() => {
+        if (idProp && idProp !== inputId) {
+            setInputId(idProp);
+        }
+    }, [idProp, inputId, setInputId]);
+    return (React.createElement(index_js_1.Box, { as: 'input', id: idProp ?? inputId, ref: (0, index_js_1.useMergedRefs)(ref, inputRef), role: 'searchbox', type: 'text', className: (0, classnames_1.default)('iui-search-input', className), disabled: isDisabled, ...rest }));
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------
 const SearchBoxButton = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const { size: sizeContext, isDisabled } = (0, index_js_1.useSafeContext)(
-    SearchBoxContext,
-  );
-  return React.createElement(
-    IconButton_js_1.IconButton,
-    {
-      styleType: 'borderless',
-      size: sizeContext,
-      ref: ref,
-      disabled: isDisabled,
-      ...rest,
-    },
-    children ?? React.createElement(index_js_1.SvgSearch, null),
-  );
+    const { children, ...rest } = props;
+    const { size: sizeContext, isDisabled } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
 // ----------------------------------------------------------------------------
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
-  const { children, onClick: onClickProp, ...rest } = props;
-  const {
-    onCollapse,
-    size: sizeContext,
-    isDisabled,
-  } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-  return React.createElement(
-    SearchBoxButton,
-    {
-      ref: ref,
-      'aria-label': 'Close searchbox',
-      size: sizeContext,
-      disabled: isDisabled,
-      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onCollapse),
-      ...rest,
-    },
-    children ?? React.createElement(index_js_1.SvgCloseSmall, null),
-  );
+    const { children, onClick: onClickProp, ...rest } = props;
+    const { onCollapse, size: sizeContext, isDisabled, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onCollapse), ...rest }, children ?? React.createElement(index_js_1.SvgCloseSmall, null)));
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
-  const { children, className, onClick: onClickProp, ...rest } = props;
-  const {
-    onExpand,
-    size: sizeContext,
-    isDisabled,
-    openButtonRef,
-  } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-  return React.createElement(
-    SearchBoxButton,
-    {
-      ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef),
-      className: (0, classnames_1.default)(
-        'iui-searchbox-open-button',
-        className,
-      ),
-      'aria-label': 'Expand searchbox',
-      size: sizeContext,
-      disabled: isDisabled,
-      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand),
-      ...rest,
-    },
-    children ?? React.createElement(index_js_1.SvgSearch, null),
-  );
+    const { children, className, onClick: onClickProp, ...rest } = props;
+    const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+    return (React.createElement(SearchBoxButton, { ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef), className: (0, classnames_1.default)('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand), ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------
@@ -245,35 +128,35 @@ SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
  * </SearchBox>
  */
 exports.SearchBox = Object.assign(SearchBoxComponent, {
-  /**
-   * Icon to be placed within SearchBox.
-   * @default Looking glass icon
-   */
-  Icon: SearchBoxIcon,
-  /**
-   * Input to be placed within SearchBox
-   */
-  Input: SearchBoxInput,
-  /**
-   * Button to be placed within SearchBox. Default has looking glass icon.
-   */
-  Button: SearchBoxButton,
-  /**
-   * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
-   */
-  CollapseButton: SearchBoxCollapseButton,
-  /**
-   * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
-   */
-  ExpandButton: SearchBoxExpandButton,
-  /**
-   * Subcomponent to customise expanded state of the SearchBox
-   */
-  ExpandedState: SearchBoxExpandedState,
-  /**
-   * Subcomponent to customise collapsed state.
-   */
-  CollapsedState: SearchBoxCollapsedState,
+    /**
+     * Icon to be placed within SearchBox.
+     * @default Looking glass icon
+     */
+    Icon: SearchBoxIcon,
+    /**
+     * Input to be placed within SearchBox
+     */
+    Input: SearchBoxInput,
+    /**
+     * Button to be placed within SearchBox. Default has looking glass icon.
+     */
+    Button: SearchBoxButton,
+    /**
+     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
+     */
+    CollapseButton: SearchBoxCollapseButton,
+    /**
+     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
+     */
+    ExpandButton: SearchBoxExpandButton,
+    /**
+     * Subcomponent to customise expanded state of the SearchBox
+     */
+    ExpandedState: SearchBoxExpandedState,
+    /**
+     * Subcomponent to customise collapsed state.
+     */
+    CollapsedState: SearchBoxCollapsedState,
 });
 exports.SearchBox.displayName = 'SearchBox';
 exports.default = exports.SearchBox;