@itwin/itwinui-react 2.10.1 → 2.11.0

package/cjs/core/ColorPicker/index.d.ts

@@ -1,12 +1,12 @@
-export { ColorPicker } from './ColorPicker';
-export type { ColorPickerProps } from './ColorPicker';
+export { ColorPicker } from './ColorPicker.js';
+export type { ColorPickerProps } from './ColorPicker.js';
 declare const _default: "./ColorPicker";
 export default _default;
-export { ColorSwatch } from './ColorSwatch';
-export type { ColorSwatchProps } from './ColorSwatch';
-export { ColorPalette } from './ColorPalette';
-export type { ColorPaletteProps } from './ColorPalette';
-export { ColorBuilder } from './ColorBuilder';
-export type { ColorBuilderProps } from './ColorBuilder';
-export { ColorInputPanel } from './ColorInputPanel';
-export type { ColorInputPanelProps } from './ColorInputPanel';
+export { ColorSwatch } from './ColorSwatch.js';
+export type { ColorSwatchProps } from './ColorSwatch.js';
+export { ColorPalette } from './ColorPalette.js';
+export type { ColorPaletteProps } from './ColorPalette.js';
+export { ColorBuilder } from './ColorBuilder.js';
+export type { ColorBuilderProps } from './ColorBuilder.js';
+export { ColorInputPanel } from './ColorInputPanel.js';
+export type { ColorInputPanelProps } from './ColorInputPanel.js';

package/cjs/core/ColorPicker/index.js

@@ -5,14 +5,14 @@ exports.ColorInputPanel = exports.ColorBuilder = exports.ColorPalette = exports.
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ColorPicker_1 = require("./ColorPicker");
-Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
+var ColorPicker_js_1 = require("./ColorPicker.js");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_js_1.ColorPicker; } });
 exports.default = './ColorPicker';
-var ColorSwatch_1 = require("./ColorSwatch");
-Object.defineProperty(exports, "ColorSwatch", { enumerable: true, get: function () { return ColorSwatch_1.ColorSwatch; } });
-var ColorPalette_1 = require("./ColorPalette");
-Object.defineProperty(exports, "ColorPalette", { enumerable: true, get: function () { return ColorPalette_1.ColorPalette; } });
-var ColorBuilder_1 = require("./ColorBuilder");
-Object.defineProperty(exports, "ColorBuilder", { enumerable: true, get: function () { return ColorBuilder_1.ColorBuilder; } });
-var ColorInputPanel_1 = require("./ColorInputPanel");
-Object.defineProperty(exports, "ColorInputPanel", { enumerable: true, get: function () { return ColorInputPanel_1.ColorInputPanel; } });
+var ColorSwatch_js_1 = require("./ColorSwatch.js");
+Object.defineProperty(exports, "ColorSwatch", { enumerable: true, get: function () { return ColorSwatch_js_1.ColorSwatch; } });
+var ColorPalette_js_1 = require("./ColorPalette.js");
+Object.defineProperty(exports, "ColorPalette", { enumerable: true, get: function () { return ColorPalette_js_1.ColorPalette; } });
+var ColorBuilder_js_1 = require("./ColorBuilder.js");
+Object.defineProperty(exports, "ColorBuilder", { enumerable: true, get: function () { return ColorBuilder_js_1.ColorBuilder; } });
+var ColorInputPanel_js_1 = require("./ColorInputPanel.js");
+Object.defineProperty(exports, "ColorInputPanel", { enumerable: true, get: function () { return ColorInputPanel_js_1.ColorInputPanel; } });

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { InputProps } from '../Input';
-import { SelectOption } from '../Select';
-import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
+import * as React from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { SelectOption } from '../Select/index.js';
+import type { PopoverProps, CommonProps, InputContainerProps } from '../utils/index.js';
 import 'tippy.js/animations/shift-away.css';
 declare type ActionType = 'added' | 'removed';
 declare type MultipleOnChangeProps<T> = {

package/cjs/core/ComboBox/ComboBox.js

@@ -1,4 +1,27 @@
 "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;
+});
+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 };
 };
@@ -8,20 +31,20 @@ exports.ComboBox = 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_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Menu_1 = require("../Menu");
-const SelectTag_1 = __importDefault(require("../Select/SelectTag"));
-const Typography_1 = require("../Typography");
-const utils_1 = require("../utils");
+const index_js_1 = require("../Menu/index.js");
+const SelectTag_js_1 = __importDefault(require("../Select/SelectTag.js"));
+const index_js_2 = require("../Typography/index.js");
+const index_js_3 = require("../utils/index.js");
 require("tippy.js/animations/shift-away.css");
-const helpers_1 = require("./helpers");
-const ComboBoxDropdown_1 = require("./ComboBoxDropdown");
-const ComboBoxEndIcon_1 = require("./ComboBoxEndIcon");
-const ComboBoxInput_1 = require("./ComboBoxInput");
-const ComboBoxInputContainer_1 = require("./ComboBoxInputContainer");
-const ComboBoxMenu_1 = require("./ComboBoxMenu");
-const ComboBoxMenuItem_1 = require("./ComboBoxMenuItem");
+const helpers_js_1 = require("./helpers.js");
+const ComboBoxDropdown_js_1 = require("./ComboBoxDropdown.js");
+const ComboBoxEndIcon_js_1 = require("./ComboBoxEndIcon.js");
+const ComboBoxInput_js_1 = require("./ComboBoxInput.js");
+const ComboBoxInputContainer_js_1 = require("./ComboBoxInputContainer.js");
+const ComboBoxMenu_js_1 = require("./ComboBoxMenu.js");
+const ComboBoxMenuItem_js_1 = require("./ComboBoxMenuItem.js");
 // Type guard for enabling multiple
 const isMultipleEnabled = (variable, multiple) => {
     return multiple && (Array.isArray(variable) || variable === undefined);
@@ -52,21 +75,21 @@ const ComboBox = (props) => {
     var _a, _b;
     const { options, value: valueProp, onChange, filterFunction, inputProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow, onHide, ...rest } = props;
     // Generate a stateful random id if not specified
-    const [id] = react_1.default.useState(() => {
+    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) && `${inputProps.id}-cb`)) !== null && _b !== void 0 ? _b : `iui-cb-${(0, utils_1.getRandomValue)(10)}`;
+        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-${(0, index_js_3.getRandomValue)(10)}`;
     });
-    (0, utils_1.useTheme)();
+    (0, index_js_3.useTheme)();
     // Refs get set in subcomponents
-    const inputRef = react_1.default.useRef(null);
-    const menuRef = react_1.default.useRef(null);
-    const toggleButtonRef = react_1.default.useRef(null);
-    const onChangeProp = (0, utils_1.useLatestRef)(onChange);
-    const optionsRef = (0, utils_1.useLatestRef)(options);
+    const inputRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const toggleButtonRef = React.useRef(null);
+    const onChangeProp = (0, index_js_3.useLatestRef)(onChange);
+    const optionsRef = (0, index_js_3.useLatestRef)(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
-    const optionsExtraInfoRef = react_1.default.useRef({});
+    const optionsExtraInfoRef = React.useRef({});
     // Clear the extra info when the options change so that it can be reinitialized below
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         optionsExtraInfoRef.current = {};
     }, [options]);
     // Initialize the extra info only if it is not already initialized
@@ -79,7 +102,7 @@ const ComboBox = (props) => {
         });
     }
     // Get indices of selected elements in options array when we have selected values.
-    const getSelectedIndexes = react_1.default.useCallback(() => {
+    const getSelectedIndexes = React.useCallback(() => {
         if (isMultipleEnabled(valueProp, multiple)) {
             const indexArray = [];
             valueProp === null || valueProp === void 0 ? void 0 : valueProp.forEach((value) => {
@@ -95,12 +118,12 @@ const ComboBox = (props) => {
         }
     }, [multiple, options, valueProp]);
     // Reducer where all the component-wide state is stored
-    const [{ isOpen, selected, focusedIndex }, dispatch] = react_1.default.useReducer(helpers_1.comboBoxReducer, {
+    const [{ isOpen, selected, focusedIndex }, dispatch] = React.useReducer(helpers_js_1.comboBoxReducer, {
         isOpen: false,
         selected: getSelectedIndexes(),
         focusedIndex: -1,
     });
-    (0, utils_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_3.useIsomorphicLayoutEffect)(() => {
         var _a, _b;
         // When the dropdown opens
         if (isOpen) {
@@ -124,15 +147,15 @@ const ComboBox = (props) => {
         }
     }, [isOpen, multiple, optionsRef, selected]);
     // Set min-width of menu to be same as input
-    const [minWidth, setMinWidth] = react_1.default.useState(0);
-    react_1.default.useEffect(() => {
+    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
-    const [filteredOptions, setFilteredOptions] = react_1.default.useState(options);
-    react_1.default.useEffect(() => {
+    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((option) => option.label.toLowerCase().includes(inputValue.toLowerCase())));
@@ -145,8 +168,9 @@ const ComboBox = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
     // Filter options based on input value
-    const [inputValue, setInputValue] = react_1.default.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_1.default.useCallback((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 [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+    const handleOnInput = React.useCallback((event) => {
         var _a, _b;
         const { value } = event.currentTarget;
         setInputValue(value);
@@ -158,7 +182,7 @@ const ComboBox = (props) => {
         (_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 selected index/indices
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (isMultipleEnabled(valueProp, multiple)) {
             if (valueProp) {
                 // If user provided array of selected values
@@ -185,7 +209,7 @@ const ComboBox = (props) => {
             });
         }
     }, [valueProp, options, multiple]);
-    const isMenuItemSelected = react_1.default.useCallback((index) => {
+    const isMenuItemSelected = React.useCallback((index) => {
         if (isMultipleEnabled(selected, multiple)) {
             return !!selected.includes(index);
         }
@@ -194,7 +218,7 @@ const ComboBox = (props) => {
         }
     }, [multiple, selected]);
     // Generates new array when item is added or removed
-    const selectedChangeHandler = react_1.default.useCallback((__originalIndex, action) => {
+    const selectedChangeHandler = React.useCallback((__originalIndex, action) => {
         if (action === 'added') {
             return [...selected, __originalIndex];
         }
@@ -203,7 +227,7 @@ const ComboBox = (props) => {
         }
     }, [selected]);
     // Calls user defined onChange
-    const onChangeHandler = react_1.default.useCallback((__originalIndex, actionType, newArray) => {
+    const onChangeHandler = React.useCallback((__originalIndex, actionType, newArray) => {
         var _a, _b, _c, _d;
         if (isSingleOnChange(onChangeProp.current, multiple)) {
             (_a = onChangeProp.current) === null || _a === void 0 ? void 0 : _a.call(onChangeProp, (_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.value);
@@ -217,7 +241,7 @@ const ComboBox = (props) => {
                 }));
         }
     }, [multiple, onChangeProp, optionsRef]);
-    const onClickHandler = react_1.default.useCallback((__originalIndex) => {
+    const onClickHandler = React.useCallback((__originalIndex) => {
         var _a, _b;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // return focus to input
         if ((_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.disabled) {
@@ -230,6 +254,11 @@ const ComboBox = (props) => {
             const newArray = selectedChangeHandler(__originalIndex, actionType);
             dispatch({ type: 'multiselect', value: newArray });
             onChangeHandler(__originalIndex, actionType, newArray);
+            // update live region
+            setLiveRegionSelection(newArray
+                .map((item) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.label; })
+                .filter(Boolean)
+                .join(', '));
         }
         else {
             dispatch({ type: 'select', value: __originalIndex });
@@ -244,7 +273,7 @@ const ComboBox = (props) => {
         selected,
         optionsRef,
     ]);
-    const getMenuItem = react_1.default.useCallback((option, filteredIndex) => {
+    const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
         const customItem = itemRenderer
@@ -255,7 +284,7 @@ const ComboBox = (props) => {
                 id: optionId,
             })
             : null;
-        return customItem ? (react_1.default.cloneElement(customItem, {
+        return customItem ? (React.cloneElement(customItem, {
             onClick: (e) => {
                 var _a, _b;
                 onClickHandler(__originalIndex);
@@ -268,12 +297,12 @@ const ComboBox = (props) => {
             }),
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
-            ref: (0, utils_1.mergeRefs)(customItem.props.ref, (el) => {
+            ref: (0, index_js_3.mergeRefs)(customItem.props.ref, (el) => {
                 if (!enableVirtualization && focusedIndex === __originalIndex) {
                     el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
                 }
             }),
-        })) : (react_1.default.createElement(ComboBoxMenuItem_1.ComboBoxMenuItem, { key: optionId, id: optionId, ...option, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
+        })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, ...option, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
             }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
     }, [
@@ -285,11 +314,11 @@ const ComboBox = (props) => {
         onClickHandler,
         selected,
     ]);
-    const emptyContent = react_1.default.useMemo(() => (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.isValidElement(emptyStateMessage) ? (emptyStateMessage) : (react_1.default.createElement(Menu_1.MenuExtraContent, null,
-        react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage))))), [emptyStateMessage]);
-    return (react_1.default.createElement(helpers_1.ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
-        react_1.default.createElement(helpers_1.ComboBoxActionContext.Provider, { value: dispatch },
-            react_1.default.createElement(helpers_1.ComboBoxStateContext.Provider, { value: {
+    const emptyContent = React.useMemo(() => (React.createElement(React.Fragment, null, React.isValidElement(emptyStateMessage) ? (emptyStateMessage) : (React.createElement(index_js_1.MenuExtraContent, null,
+        React.createElement(index_js_2.Text, { isMuted: true }, emptyStateMessage))))), [emptyStateMessage]);
+    return (React.createElement(helpers_js_1.ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
+        React.createElement(helpers_js_1.ComboBoxActionContext.Provider, { value: dispatch },
+            React.createElement(helpers_js_1.ComboBoxStateContext.Provider, { value: {
                     id,
                     minWidth,
                     isOpen,
@@ -300,17 +329,18 @@ const ComboBox = (props) => {
                     getMenuItem,
                     multiple,
                 } },
-                react_1.default.createElement(ComboBoxInputContainer_1.ComboBoxInputContainer, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, ...rest },
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(ComboBoxInput_1.ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
+                React.createElement(ComboBoxInputContainer_js_1.ComboBoxInputContainer, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, ...rest },
+                    React.createElement(React.Fragment, null,
+                        React.createElement(ComboBoxInput_js_1.ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
                                 ? selected.map((index) => {
                                     const item = optionsRef.current[index];
-                                    return (react_1.default.createElement(SelectTag_1.default, { key: item.label, label: item.label }));
+                                    return (React.createElement(SelectTag_js_1.default, { key: item.label, label: item.label }));
                                 })
                                 : undefined })),
-                    react_1.default.createElement(ComboBoxEndIcon_1.ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen })),
-                react_1.default.createElement(ComboBoxDropdown_1.ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-                    react_1.default.createElement(ComboBoxMenu_1.ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization
+                    React.createElement(ComboBoxEndIcon_js_1.ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen }),
+                    multiple ? (React.createElement(index_js_3.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
+                React.createElement(ComboBoxDropdown_js_1.ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
+                    React.createElement(ComboBoxMenu_js_1.ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization
                         ? filteredOptions.map(getMenuItem)
                         : emptyContent))))));
 };

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PopoverProps } from '../utils';
+import * as React from 'react';
+import type { PopoverProps } from '../utils/index.js';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
+});
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxDropdown = void 0;
@@ -8,21 +28,21 @@ exports.ComboBoxDropdown = 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_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
-const helpers_1 = require("./helpers");
-exports.ComboBoxDropdown = react_1.default.forwardRef((props, forwardedRef) => {
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const helpers_js_1 = require("./helpers.js");
+exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
     const { children, ...rest } = props;
-    const { isOpen } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
-    const dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
-    const { inputRef, toggleButtonRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
+    const { isOpen } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+    const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
+    const { inputRef, toggleButtonRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
     // sync internal isOpen state with user's visible prop
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (props.visible != undefined) {
             dispatch({ type: props.visible ? 'open' : 'close' });
         }
     }, [dispatch, props.visible]);
-    return (react_1.default.createElement(utils_1.Popover, { placement: 'bottom-start', visible: isOpen, onClickOutside: react_1.default.useCallback((_, { target }) => {
+    return (React.createElement(index_js_1.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({ type: 'close' });

package/cjs/core/ComboBox/ComboBoxEndIcon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ComboBoxEndIcon: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     disabled?: boolean | undefined;
     isOpen?: boolean | undefined;

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -1,4 +1,27 @@
 "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;
+});
+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 };
 };
@@ -9,15 +32,15 @@ exports.ComboBoxEndIcon = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
-const helpers_1 = require("./helpers");
-exports.ComboBoxEndIcon = react_1.default.forwardRef((props, forwardedRef) => {
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const helpers_js_1 = require("./helpers.js");
+exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
     const { className, children, onClick: onClickProp, disabled, isOpen, ...rest } = props;
-    const dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
-    const { toggleButtonRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
-    const refs = (0, utils_1.useMergedRefs)(toggleButtonRef, forwardedRef);
-    return (react_1.default.createElement("span", { ref: refs, className: (0, classnames_1.default)('iui-end-icon', {
+    const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
+    const { toggleButtonRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
+    const refs = (0, index_js_1.useMergedRefs)(toggleButtonRef, forwardedRef);
+    return (React.createElement("span", { ref: refs, className: (0, classnames_1.default)('iui-end-icon', {
             'iui-actionable': !disabled,
             'iui-disabled': disabled,
             'iui-open': isOpen,
@@ -26,6 +49,6 @@ exports.ComboBoxEndIcon = react_1.default.forwardRef((props, forwardedRef) => {
             if (!e.isDefaultPrevented()) {
                 dispatch({ type: isOpen ? 'close' : 'open' });
             }
-        }, ...rest }, children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })));
+        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });
 exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ComboBoxInput: React.ForwardRefExoticComponent<{
     selectTags?: JSX.Element[] | undefined;
 } & {

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
+});
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxInput = void 0;
@@ -8,26 +28,26 @@ exports.ComboBoxInput = 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_1 = __importDefault(require("react"));
-const Input_1 = require("../Input");
-const utils_1 = require("../utils");
-const ComboBoxMultipleContainer_1 = require("./ComboBoxMultipleContainer");
-const helpers_1 = require("./helpers");
-exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
+const React = __importStar(require("react"));
+const index_js_1 = require("../Input/index.js");
+const index_js_2 = require("../utils/index.js");
+const ComboBoxMultipleContainer_js_1 = require("./ComboBoxMultipleContainer.js");
+const helpers_js_1 = require("./helpers.js");
+exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
-    const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
-    const dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
-    const { inputRef, menuRef, optionsExtraInfoRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
-    const refs = (0, utils_1.useMergedRefs)(inputRef, forwardedRef);
-    const focusedIndexRef = react_1.default.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
-    react_1.default.useEffect(() => {
+    const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+    const dispatch = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxActionContext);
+    const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
+    const refs = (0, index_js_2.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]);
     const getIdFromIndex = (index) => {
         var _a, _b, _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 : '');
     };
-    const handleKeyDown = react_1.default.useCallback((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);
         const length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
@@ -126,11 +146,11 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
         onKeyDownProp,
         optionsExtraInfoRef,
     ]);
-    const handleFocus = react_1.default.useCallback((event) => {
+    const handleFocus = React.useCallback((event) => {
         dispatch({ type: 'open' });
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
-    const handleClick = react_1.default.useCallback((e) => {
+    const handleClick = React.useCallback((e) => {
         onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
         if (e.isDefaultPrevented()) {
             return;
@@ -139,11 +159,11 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
             dispatch({ type: 'open' });
         }
     }, [dispatch, isOpen, onClickProp]);
-    const [tagContainerWidthRef, tagContainerWidth] = (0, utils_1.useContainerWidth)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Input_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+    const [tagContainerWidthRef, tagContainerWidth] = (0, index_js_2.useContainerWidth)();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
-                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, ...rest }),
-        multiple && selectTags && (react_1.default.createElement(ComboBoxMultipleContainer_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags }))));
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
+        multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 exports.ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxInputContainer.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { InputContainerProps } from '../utils';
+import * as React from 'react';
+import type { InputContainerProps } from '../utils/index.js';
 declare type ComboBoxInputContainerProps = React.ComponentPropsWithoutRef<'div'> & Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
 export declare const ComboBoxInputContainer: {
     (props: ComboBoxInputContainerProps): JSX.Element;