@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/SearchBox/SearchBox.js

@@ -1,184 +1,221 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchBox = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.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))))));
+Object.defineProperty(exports, 'SearchBox', {
+  enumerable: true,
+  get: function () {
+    return SearchBox;
+  },
 });
-// ----------------------------------------------------------------------------
-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 _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.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.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 (0, _jsxruntime.jsx)(SearchBoxContext.Provider, {
+    value: {
+      size,
+      isDisabled,
+      onCollapse,
+      onExpand,
+      inputRef,
+      inputId,
+      setInputId,
+      openButtonRef,
+      isExpanded,
+      expandable,
+    },
+    children: (0, _jsxruntime.jsx)(_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:
+        children ??
+        (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+          children: [
+            (0, _jsxruntime.jsx)(SearchBoxCollapsedState, {
+              children: (0, _jsxruntime.jsx)(SearchBoxExpandButton, {}),
+            }),
+            (0, _jsxruntime.jsxs)(SearchBoxExpandedState, {
+              children: [
+                (0, _jsxruntime.jsx)(SearchBoxIcon, {}),
+                (0, _jsxruntime.jsx)(SearchBoxInput, {
+                  ...inputProps,
+                }),
+                expandable
+                  ? (0, _jsxruntime.jsx)(SearchBoxCollapseButton, {})
+                  : null,
+              ],
+            }),
+          ],
+        }),
+    }),
+  });
+});
+const SearchBoxCollapsedState = ({ children }) => {
+  const { isExpanded, expandable } = (0, _index.useSafeContext)(
+    SearchBoxContext,
+  );
+  if (!expandable || isExpanded) {
+    return null;
+  }
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: children ?? (0, _jsxruntime.jsx)(SearchBoxExpandButton, {}),
+  });
 };
 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.useSafeContext)(
+    SearchBoxContext,
+  );
+  if (expandable && !isExpanded) {
+    return null;
+  }
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: children,
+  });
 };
 SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
-// ----------------------------------------------------------------------------
-const SearchBoxIcon = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(index_js_1.InputFlexContainerIcon, { "aria-hidden": true, className: (0, classnames_1.default)('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
+const SearchBoxIcon = _react.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  return (0, _jsxruntime.jsx)(_index.InputFlexContainerIcon, {
+    'aria-hidden': true,
+    className: (0, _classnames.default)('iui-search-icon', className),
+    ref: ref,
+    ...rest,
+    children: children ?? (0, _jsxruntime.jsx)(_index.SvgSearch, {}),
+  });
 });
 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 SearchBoxInput = _react.forwardRef((props, ref) => {
+  const { className, id: idProp, ...rest } = props;
+  const { inputId, setInputId, isDisabled, inputRef } = (0,
+  _index.useSafeContext)(SearchBoxContext);
+  _react.useEffect(() => {
+    if (idProp && idProp !== inputId) {
+      setInputId(idProp);
+    }
+  }, [idProp, inputId, setInputId]);
+  return (0, _jsxruntime.jsx)(_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) => {
-    const { children, ...rest } = props;
-    const { size: sizeContext, isDisabled } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(index_js_1.InputFlexContainerButton, { size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
+const SearchBoxButton = _react.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const { size: sizeContext, isDisabled } = (0, _index.useSafeContext)(
+    SearchBoxContext,
+  );
+  return (0, _jsxruntime.jsx)(_index.InputFlexContainerButton, {
+    size: sizeContext,
+    ref: ref,
+    disabled: isDisabled,
+    ...rest,
+    children: children ?? (0, _jsxruntime.jsx)(_index.SvgSearch, {}),
+  });
 });
 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 SearchBoxCollapseButton = _react.forwardRef((props, ref) => {
+  const { children, onClick: onClickProp, ...rest } = props;
+  const {
+    onCollapse,
+    size: sizeContext,
+    isDisabled,
+  } = (0, _index.useSafeContext)(SearchBoxContext);
+  return (0, _jsxruntime.jsx)(SearchBoxButton, {
+    ref: ref,
+    'aria-label': 'Close searchbox',
+    size: sizeContext,
+    disabled: isDisabled,
+    onClick: (0, _index.mergeEventHandlers)(onClickProp, onCollapse),
+    ...rest,
+    children: children ?? (0, _jsxruntime.jsx)(_index.SvgCloseSmall, {}),
+  });
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
-// ----------------------------------------------------------------------------
-const SearchBoxExpandButton = React.forwardRef((props, ref) => {
-    const { children, 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), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand), styleType: 'default', ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
+const SearchBoxExpandButton = _react.forwardRef((props, ref) => {
+  const { children, onClick: onClickProp, ...rest } = props;
+  const {
+    onExpand,
+    size: sizeContext,
+    isDisabled,
+    openButtonRef,
+  } = (0, _index.useSafeContext)(SearchBoxContext);
+  return (0, _jsxruntime.jsx)(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: children ?? (0, _jsxruntime.jsx)(_index.SvgSearch, {}),
+  });
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
-// ----------------------------------------------------------------------------
-/**
- * SearchBox component.
- * Can be used to implement search functionality for pages, tables and more.
- * @example
- *  <SearchBox inputProps={{ placeholder: 'Basic search' }}/>
- *
- * @example
- * <SearchBox expandable inputProps={{ placeholder: 'Expandable search' }}/>
- *
- * @example
- * <SearchBox>
- *   <SearchBox.CollapsedState />
- *   <SearchBox.ExpandedState>
- *     <SearchBox.Icon />
- *     <SearchBox.Input />
- *     <SearchBox.CollapseButton />
- *   </SearchBox.ExpandedState>
- * </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,
+const SearchBox = Object.assign(SearchBoxComponent, {
+  Icon: SearchBoxIcon,
+  Input: SearchBoxInput,
+  Button: SearchBoxButton,
+  CollapseButton: SearchBoxCollapseButton,
+  ExpandButton: SearchBoxExpandButton,
+  ExpandedState: SearchBoxExpandedState,
+  CollapsedState: SearchBoxCollapsedState,
 });
-exports.SearchBox.displayName = 'SearchBox';
+SearchBox.displayName = 'SearchBox';

package/cjs/core/Select/Select.d.ts

@@ -67,7 +67,7 @@ import { usePopover } from '../Popover/Popover.js';
  * />
  */
 export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
+    ref?: React.ForwardedRef<HTMLElement>;
 }) => JSX.Element;
 export type SelectProps<T> = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'placeholder' | 'value' | 'defaultValue'> & (({
     /**