@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/esm/core/ComboBox/ComboBox.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -38,9 +16,9 @@ import { ComboBoxInputContainer } from './ComboBoxInputContainer';
 import { ComboBoxMenu } from './ComboBoxMenu';
 import { ComboBoxMenuItem } from './ComboBoxMenuItem';
 /** Returns either `option.id` or derives a stable id using `idPrefix` and `option.label` (without whitespace) */
-var getOptionId = function (option, idPrefix) {
+const getOptionId = (option, idPrefix) => {
     var _a;
-    return (_a = option.id) !== null && _a !== void 0 ? _a : "".concat(idPrefix, "-option-").concat(option.label.replace(/\s/g, '-'));
+    return (_a = option.id) !== null && _a !== void 0 ? _a : `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
 };
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
@@ -55,47 +33,47 @@ var getOptionId = function (option, idPrefix) {
  *   onChange={() => {}}
  * />
  */
-export var ComboBox = function (props) {
+export const ComboBox = (props) => {
     var _a, _b;
-    var options = props.options, valueProp = props.value, onChange = props.onChange, filterFunction = props.filterFunction, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _c = props.emptyStateMessage, emptyStateMessage = _c === void 0 ? 'No options found' : _c, itemRenderer = props.itemRenderer, _d = props.enableVirtualization, enableVirtualization = _d === void 0 ? false : _d, onShow = props.onShow, onHide = props.onHide, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer", "enableVirtualization", "onShow", "onHide"]);
+    const { options, value: valueProp, onChange, filterFunction, inputProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, onShow, onHide, ...rest } = props;
     // Generate a stateful random id if not specified
-    var id = React.useState(function () {
+    const [id] = React.useState(() => {
         var _a, _b;
-        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && "".concat(inputProps.id, "-cb"))) !== null && _b !== void 0 ? _b : "iui-cb-".concat(getRandomValue(10));
-    })[0];
+        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && `${inputProps.id}-cb`)) !== null && _b !== void 0 ? _b : `iui-cb-${getRandomValue(10)}`;
+    });
     useTheme();
     // Refs get set in subcomponents
-    var inputRef = React.useRef(null);
-    var menuRef = React.useRef(null);
-    var toggleButtonRef = React.useRef(null);
-    var mounted = React.useRef(false);
-    var valuePropRef = useLatestRef(valueProp);
-    var onChangeProp = useLatestRef(onChange);
-    var optionsRef = useLatestRef(options);
+    const inputRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const toggleButtonRef = React.useRef(null);
+    const mounted = React.useRef(false);
+    const valuePropRef = useLatestRef(valueProp);
+    const onChangeProp = useLatestRef(onChange);
+    const optionsRef = useLatestRef(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
-    var optionsExtraInfoRef = React.useRef({});
+    const optionsExtraInfoRef = React.useRef({});
     // Clear the extra info when the options change so that it can be reinitialized below
-    React.useEffect(function () {
+    React.useEffect(() => {
         optionsExtraInfoRef.current = {};
     }, [options]);
     // Initialize the extra info only if it is not already initialized
     if (options.length > 0 &&
         Object.keys(optionsExtraInfoRef.current).length === 0) {
-        options.forEach(function (option, index) {
+        options.forEach((option, index) => {
             optionsExtraInfoRef.current[getOptionId(option, id)] = {
                 __originalIndex: index,
             };
         });
     }
     // Reducer where all the component-wide state is stored
-    var _e = React.useReducer(comboBoxReducer, {
+    const [{ isOpen, selectedIndex, focusedIndex }, dispatch] = React.useReducer(comboBoxReducer, {
         isOpen: false,
         selectedIndex: valueProp
-            ? optionsRef.current.findIndex(function (option) { return option.value === valueProp; })
+            ? optionsRef.current.findIndex((option) => option.value === valueProp)
             : -1,
         focusedIndex: -1,
-    }), _f = _e[0], isOpen = _f.isOpen, selectedIndex = _f.selectedIndex, focusedIndex = _f.focusedIndex, dispatch = _e[1];
-    React.useLayoutEffect(function () {
+    });
+    React.useLayoutEffect(() => {
         var _a, _b;
         // When the dropdown opens
         if (isOpen) {
@@ -114,20 +92,18 @@ export var ComboBox = function (props) {
         }
     }, [isOpen, optionsRef, selectedIndex]);
     // Set min-width of menu to be same as input
-    var _g = React.useState(0), minWidth = _g[0], setMinWidth = _g[1];
-    React.useEffect(function () {
+    const [minWidth, setMinWidth] = React.useState(0);
+    React.useEffect(() => {
         if (inputRef.current) {
             setMinWidth(inputRef.current.offsetWidth);
         }
     }, [isOpen]);
     // Update filtered options to the latest value options according to input value
-    var _h = React.useState(options), filteredOptions = _h[0], setFilteredOptions = _h[1];
-    React.useEffect(function () {
+    const [filteredOptions, setFilteredOptions] = React.useState(options);
+    React.useEffect(() => {
         var _a;
         if (inputValue) {
-            setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, inputValue)) !== null && _a !== void 0 ? _a : options.filter(function (option) {
-                return option.label.toLowerCase().includes(inputValue.toLowerCase());
-            }));
+            setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, inputValue)) !== null && _a !== void 0 ? _a : options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase())));
         }
         else {
             setFilteredOptions(options);
@@ -137,45 +113,43 @@ export var ComboBox = function (props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
     // Filter options based on input value
-    var _j = React.useState((_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''), inputValue = _j[0], setInputValue = _j[1];
-    var handleOnInput = React.useCallback(function (event) {
+    const [inputValue, setInputValue] = React.useState((_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '');
+    const handleOnInput = React.useCallback((event) => {
         var _a, _b;
-        var value = event.currentTarget.value;
+        const { value } = event.currentTarget;
         setInputValue(value);
         dispatch(['open']); // reopen when typing
-        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter(function (option) {
-            return option.label.toLowerCase().includes(value.toLowerCase());
-        }));
+        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter((option) => option.label.toLowerCase().includes(value.toLowerCase())));
         if (focusedIndex != -1) {
             dispatch(['focus', -1]);
         }
         (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
     }, [filterFunction, focusedIndex, inputProps, optionsRef]);
     // When the value prop changes, update the selectedIndex
-    React.useEffect(function () {
+    React.useEffect(() => {
         dispatch([
             'select',
-            options.findIndex(function (option) { return option.value === valueProp; }),
+            options.findIndex((option) => option.value === valueProp),
         ]);
     }, [options, valueProp]);
     // Call user-defined onChange when the value actually changes
-    React.useEffect(function () {
+    React.useEffect(() => {
         var _a, _b;
         // Prevent user-defined onChange to be called on mount
         if (!mounted.current) {
             mounted.current = true;
             return;
         }
-        var currentValue = (_a = optionsRef.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        const currentValue = (_a = optionsRef.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
         if (currentValue === valuePropRef.current || selectedIndex === -1) {
             return;
         }
         (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, currentValue);
     }, [onChangeProp, optionsRef, selectedIndex, valuePropRef]);
-    var getMenuItem = React.useCallback(function (option, filteredIndex) {
-        var optionId = getOptionId(option, id);
-        var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;
-        var customItem = itemRenderer
+    const getMenuItem = React.useCallback((option, filteredIndex) => {
+        const optionId = getOptionId(option, id);
+        const { __originalIndex } = optionsExtraInfoRef.current[optionId];
+        const customItem = itemRenderer
             ? itemRenderer(option, {
                 isFocused: focusedIndex === __originalIndex,
                 isSelected: selectedIndex === __originalIndex,
@@ -184,7 +158,7 @@ export var ComboBox = function (props) {
             })
             : null;
         return customItem ? (React.cloneElement(customItem, {
-            onClick: function (e) {
+            onClick: (e) => {
                 var _a, _b;
                 dispatch(['select', __originalIndex]);
                 dispatch(['close']);
@@ -197,33 +171,33 @@ export var ComboBox = function (props) {
             }),
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
-            ref: mergeRefs(customItem.props.ref, function (el) {
+            ref: mergeRefs(customItem.props.ref, (el) => {
                 if (!enableVirtualization && focusedIndex === __originalIndex) {
                     el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
                 }
             }),
-        })) : (React.createElement(ComboBoxMenuItem, __assign({ key: optionId, id: optionId }, option, { isSelected: selectedIndex === __originalIndex, onClick: function () {
+        })) : (React.createElement(ComboBoxMenuItem, { key: optionId, id: optionId, ...option, isSelected: selectedIndex === __originalIndex, onClick: () => {
                 dispatch(['select', __originalIndex]);
                 dispatch(['close']);
-            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }), option.label));
+            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
     }, [enableVirtualization, focusedIndex, id, itemRenderer, selectedIndex]);
-    var emptyContent = React.useMemo(function () { return (React.createElement(React.Fragment, null, React.isValidElement(emptyStateMessage) ? (emptyStateMessage) : (React.createElement(MenuExtraContent, null,
-        React.createElement(Text, { isMuted: true }, emptyStateMessage))))); }, [emptyStateMessage]);
-    return (React.createElement(ComboBoxRefsContext.Provider, { value: { inputRef: inputRef, menuRef: menuRef, toggleButtonRef: toggleButtonRef, optionsExtraInfoRef: optionsExtraInfoRef } },
+    const emptyContent = React.useMemo(() => (React.createElement(React.Fragment, null, React.isValidElement(emptyStateMessage) ? (emptyStateMessage) : (React.createElement(MenuExtraContent, null,
+        React.createElement(Text, { isMuted: true }, emptyStateMessage))))), [emptyStateMessage]);
+    return (React.createElement(ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
         React.createElement(ComboBoxActionContext.Provider, { value: dispatch },
             React.createElement(ComboBoxStateContext.Provider, { value: {
-                    id: id,
-                    minWidth: minWidth,
-                    isOpen: isOpen,
-                    focusedIndex: focusedIndex,
-                    enableVirtualization: enableVirtualization,
-                    filteredOptions: filteredOptions,
-                    getMenuItem: getMenuItem,
+                    id,
+                    minWidth,
+                    isOpen,
+                    focusedIndex,
+                    enableVirtualization,
+                    filteredOptions,
+                    getMenuItem,
                 } },
-                React.createElement(ComboBoxInputContainer, __assign({ disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled }, rest),
-                    React.createElement(ComboBoxInput, __assign({ value: inputValue }, inputProps, { onChange: handleOnInput })),
+                React.createElement(ComboBoxInputContainer, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, ...rest },
+                    React.createElement(ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput }),
                     React.createElement(ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen })),
-                React.createElement(ComboBoxDropdown, __assign({}, dropdownMenuProps, { onShow: onShow, onHide: onHide }),
+                React.createElement(ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
                     React.createElement(ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization
                         ? filteredOptions.map(getMenuItem)
                         : emptyContent))))));

package/esm/core/ComboBox/ComboBoxDropdown.d.ts

@@ -3,5 +3,5 @@ import { PopoverProps } from '../utils';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "className" | "role" | "children" | "plugins" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "className" | "role" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
 export {};

package/esm/core/ComboBox/ComboBoxDropdown.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -27,23 +5,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Popover, useSafeContext } from '../utils';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers';
-export var ComboBoxDropdown = React.forwardRef(function (props, forwardedRef) {
-    var children = props.children, rest = __rest(props, ["children"]);
-    var isOpen = useSafeContext(ComboBoxStateContext).isOpen;
-    var dispatch = useSafeContext(ComboBoxActionContext);
-    var _a = useSafeContext(ComboBoxRefsContext), inputRef = _a.inputRef, toggleButtonRef = _a.toggleButtonRef;
+export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
+    const { children, ...rest } = props;
+    const { isOpen } = useSafeContext(ComboBoxStateContext);
+    const dispatch = useSafeContext(ComboBoxActionContext);
+    const { inputRef, toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
     // sync internal isOpen state with user's visible prop
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (props.visible != undefined) {
             dispatch([props.visible ? 'open' : 'close']);
         }
     }, [dispatch, props.visible]);
-    return (React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: React.useCallback(function (_, _a) {
-            var _b;
-            var target = _a.target;
-            if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+    return (React.createElement(Popover, { placement: 'bottom-start', visible: isOpen, onClickOutside: React.useCallback((_, { target }) => {
+            var _a;
+            if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
                 dispatch(['close']);
             }
-        }, [dispatch, toggleButtonRef]), animation: 'shift-away', duration: 200, reference: inputRef, ref: forwardedRef, content: children }, rest)));
+        }, [dispatch, toggleButtonRef]), animation: 'shift-away', duration: 200, reference: inputRef, ref: forwardedRef, content: children, ...rest }));
 });
 ComboBoxDropdown.displayName = 'ComboBoxDropdown';

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -28,20 +6,20 @@ import cx from 'classnames';
 import React from 'react';
 import { useSafeContext, useMergedRefs, SvgCaretDownSmall } from '../utils';
 import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers';
-export var ComboBoxEndIcon = React.forwardRef(function (props, forwardedRef) {
-    var className = props.className, children = props.children, onClickProp = props.onClick, disabled = props.disabled, isOpen = props.isOpen, rest = __rest(props, ["className", "children", "onClick", "disabled", "isOpen"]);
-    var dispatch = useSafeContext(ComboBoxActionContext);
-    var toggleButtonRef = useSafeContext(ComboBoxRefsContext).toggleButtonRef;
-    var refs = useMergedRefs(toggleButtonRef, forwardedRef);
-    return (React.createElement("span", __assign({ ref: refs, className: cx('iui-end-icon', {
+export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
+    const { className, children, onClick: onClickProp, disabled, isOpen, ...rest } = props;
+    const dispatch = useSafeContext(ComboBoxActionContext);
+    const { toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
+    const refs = useMergedRefs(toggleButtonRef, forwardedRef);
+    return (React.createElement("span", { ref: refs, className: cx('iui-end-icon', {
             'iui-actionable': !disabled,
             'iui-disabled': disabled,
             'iui-open': isOpen,
-        }, className), onClick: function (e) {
+        }, className), onClick: (e) => {
             onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
             if (!e.isDefaultPrevented()) {
                 dispatch([isOpen ? 'close' : 'open']);
             }
-        } }, rest), children !== null && children !== void 0 ? children : React.createElement(SvgCaretDownSmall, { "aria-hidden": true })));
+        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCaretDownSmall, { "aria-hidden": true })));
 });
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/esm/core/ComboBox/ComboBoxInput.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -28,24 +6,24 @@ import React from 'react';
 import { Input } from '../Input';
 import { useSafeContext, useMergedRefs } from '../utils';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers';
-export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
-    var onKeyDownProp = props.onKeyDown, onFocusProp = props.onFocus, rest = __rest(props, ["onKeyDown", "onFocus"]);
-    var _a = useSafeContext(ComboBoxStateContext), isOpen = _a.isOpen, id = _a.id, focusedIndex = _a.focusedIndex, enableVirtualization = _a.enableVirtualization;
-    var dispatch = useSafeContext(ComboBoxActionContext);
-    var _b = useSafeContext(ComboBoxRefsContext), inputRef = _b.inputRef, menuRef = _b.menuRef, optionsExtraInfoRef = _b.optionsExtraInfoRef;
-    var refs = useMergedRefs(inputRef, forwardedRef);
-    var focusedIndexRef = React.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
-    React.useEffect(function () {
+export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, ...rest } = props;
+    const { isOpen, id, focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
+    const dispatch = useSafeContext(ComboBoxActionContext);
+    const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
+    const refs = useMergedRefs(inputRef, forwardedRef);
+    const focusedIndexRef = React.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
+    React.useEffect(() => {
         focusedIndexRef.current = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1;
     }, [focusedIndex]);
-    var getIdFromIndex = function (index) {
+    const getIdFromIndex = (index) => {
         var _a, _b, _c;
-        return ((_c = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-iui-index=\"".concat(index, "\"]"))) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
+        return ((_c = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-iui-index="${index}"]`)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
     };
-    var handleKeyDown = React.useCallback(function (event) {
+    const handleKeyDown = React.useCallback((event) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
-        var length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
+        const length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
         switch (event.key) {
             case 'ArrowDown': {
                 event.preventDefault();
@@ -56,7 +34,7 @@ export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
                     return;
                 }
                 if (focusedIndexRef.current === -1) {
-                    var currentElement = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-iui-index]');
+                    const currentElement = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-iui-index]');
                     return dispatch([
                         'focus',
                         Number((_c = currentElement === null || currentElement === void 0 ? void 0 : currentElement.getAttribute('data-iui-index')) !== null && _c !== void 0 ? _c : 0),
@@ -64,13 +42,13 @@ export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
                 }
                 // If virtualization is enabled, dont let round scrolling
                 if (enableVirtualization &&
-                    !((_e = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector("[data-iui-index=\"".concat(focusedIndexRef.current, "\"]"))) === null || _e === void 0 ? void 0 : _e.nextElementSibling)) {
+                    !((_e = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)) === null || _e === void 0 ? void 0 : _e.nextElementSibling)) {
                     return;
                 }
-                var nextIndex = focusedIndexRef.current;
+                let nextIndex = focusedIndexRef.current;
                 do {
-                    var currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector("[data-iui-index=\"".concat(nextIndex, "\"]"));
-                    var nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
+                    const currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector(`[data-iui-index="${nextIndex}"]`);
+                    const nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
                     nextIndex = Number(nextElement === null || nextElement === void 0 ? void 0 : nextElement.getAttribute('data-iui-index'));
                     if ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.ariaDisabled) !== 'true') {
                         return dispatch(['focus', nextIndex]);
@@ -88,7 +66,7 @@ export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
                 }
                 // If virtualization is enabled, dont let round scrolling
                 if (enableVirtualization &&
-                    !((_k = (_j = menuRef.current) === null || _j === void 0 ? void 0 : _j.querySelector("[data-iui-index=\"".concat(focusedIndexRef.current, "\"]"))) === null || _k === void 0 ? void 0 : _k.previousElementSibling)) {
+                    !((_k = (_j = menuRef.current) === null || _j === void 0 ? void 0 : _j.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)) === null || _k === void 0 ? void 0 : _k.previousElementSibling)) {
                     return;
                 }
                 if (focusedIndexRef.current === -1) {
@@ -97,10 +75,10 @@ export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
                         (_m = (_l = Object.values(optionsExtraInfoRef.current)) === null || _l === void 0 ? void 0 : _l[length - 1].__originalIndex) !== null && _m !== void 0 ? _m : -1,
                     ]);
                 }
-                var prevIndex = focusedIndexRef.current;
+                let prevIndex = focusedIndexRef.current;
                 do {
-                    var currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector("[data-iui-index=\"".concat(prevIndex, "\"]"));
-                    var prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
+                    const currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector(`[data-iui-index="${prevIndex}"]`);
+                    const prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
                     prevIndex = Number(prevElement === null || prevElement === void 0 ? void 0 : prevElement.getAttribute('data-iui-index'));
                     if ((prevElement === null || prevElement === void 0 ? void 0 : prevElement.ariaDisabled) !== 'true') {
                         return dispatch(['focus', prevIndex]);
@@ -136,12 +114,12 @@ export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
         onKeyDownProp,
         optionsExtraInfoRef,
     ]);
-    var handleFocus = React.useCallback(function (event) {
+    const handleFocus = React.useCallback((event) => {
         dispatch(['open']);
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
-    return (React.createElement(Input, __assign({ ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+    return (React.createElement(Input, { ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
             ? getIdFromIndex(focusedIndex)
-            : undefined, role: 'combobox', "aria-controls": isOpen ? "".concat(id, "-list") : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, rest)));
+            : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', ...rest }));
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -28,11 +6,11 @@ import React from 'react';
 import { StatusMessage } from '../StatusMessage';
 import { InputContainer, useSafeContext } from '../utils';
 import { ComboBoxStateContext } from './helpers';
-export var ComboBoxInputContainer = function (props) {
-    var className = props.className, status = props.status, message = props.message, children = props.children, rest = __rest(props, ["className", "status", "message", "children"]);
-    var id = useSafeContext(ComboBoxStateContext).id;
-    return (React.createElement(InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
-            React.cloneElement(message, { status: status })) }, rest, { id: id }),
+export const ComboBoxInputContainer = (props) => {
+    const { className, status, message, children, ...rest } = props;
+    const { id } = useSafeContext(ComboBoxStateContext);
+    return (React.createElement(InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status })), ...rest, id: id },
         React.createElement("div", { className: 'iui-input-with-icon' }, children)));
 };
 ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';