@itwin/itwinui-react 2.0.2 → 2.1.0

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

@@ -1,13 +1,26 @@
 import React from 'react';
 import { SelectOption } from '../Select/Select';
-declare type ComboBoxAction = 'open' | 'close' | 'select' | 'focus';
+declare type ComboBoxAction = {
+    type: 'multiselect';
+    value: number[];
+} | {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'select';
+    value: number;
+} | {
+    type: 'focus';
+    value: number | undefined;
+};
 export declare const comboBoxReducer: (state: {
     isOpen: boolean;
-    selectedIndex: number;
+    selected: number | number[];
     focusedIndex: number;
-}, [type, value]: [ComboBoxAction] | [ComboBoxAction, number | undefined]) => {
+}, action: ComboBoxAction) => {
     isOpen: boolean;
-    selectedIndex: number;
+    selected: number | number[];
     focusedIndex: number;
 };
 export declare const ComboBoxRefsContext: React.Context<{
@@ -24,9 +37,11 @@ declare type ComboBoxStateContextProps<T = unknown> = {
     minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
+    onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: number;
+    multiple?: boolean;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
-export declare const ComboBoxActionContext: React.Context<((x: [ComboBoxAction] | [ComboBoxAction, number]) => void) | undefined>;
+export declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;
 export {};

package/cjs/core/ComboBox/helpers.js

@@ -9,9 +9,9 @@ exports.ComboBoxActionContext = exports.ComboBoxStateContext = exports.ComboBoxR
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
-const comboBoxReducer = (state, [type, value]) => {
-    var _a;
-    switch (type) {
+const comboBoxReducer = (state, action) => {
+    var _a, _b, _c, _d, _e;
+    switch (action.type) {
         case 'open': {
             return { ...state, isOpen: true };
         }
@@ -19,14 +19,32 @@ const comboBoxReducer = (state, [type, value]) => {
             return { ...state, isOpen: false };
         }
         case 'select': {
+            if (Array.isArray(state.selected)) {
+                return { ...state };
+            }
             return {
                 ...state,
-                selectedIndex: value !== null && value !== void 0 ? value : state.selectedIndex,
-                focusedIndex: value !== null && value !== void 0 ? value : state.focusedIndex,
+                selected: (_a = action.value) !== null && _a !== void 0 ? _a : state.selected,
+                focusedIndex: (_b = action.value) !== null && _b !== void 0 ? _b : state.focusedIndex,
             };
         }
+        case 'multiselect': {
+            if (!Array.isArray(state.selected)) {
+                return { ...state };
+            }
+            return { ...state, selected: action.value };
+        }
         case 'focus': {
-            return { ...state, focusedIndex: (_a = value !== null && value !== void 0 ? value : state.selectedIndex) !== null && _a !== void 0 ? _a : -1 };
+            if (Array.isArray(state.selected)) {
+                return {
+                    ...state,
+                    focusedIndex: (_c = action.value) !== null && _c !== void 0 ? _c : -1,
+                };
+            }
+            return {
+                ...state,
+                focusedIndex: (_e = (_d = action.value) !== null && _d !== void 0 ? _d : state.selected) !== null && _e !== void 0 ? _e : -1,
+            };
         }
         default: {
             return state;

package/cjs/core/Select/Select.js

@@ -15,6 +15,7 @@ const MenuItem_1 = require("../Menu/MenuItem");
 const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/select.css");
 const SelectTag_1 = __importDefault(require("./SelectTag"));
+const SelectTagContainer_1 = __importDefault(require("./SelectTagContainer"));
 const isMultipleEnabled = (variable, multiple) => {
     return multiple;
 };
@@ -204,17 +205,11 @@ const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRendere
         }
         return selectedItems.map((item) => tagRenderer(item));
     }, [selectedItems, tagRenderer]);
-    const [containerRef, visibleCount] = (0, utils_1.useOverflow)(selectedItemsElements);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         selectedItems &&
             selectedItemsRenderer &&
             selectedItemsRenderer(selectedItems),
         selectedItems && !selectedItemsRenderer && (react_1.default.createElement("span", { className: 'iui-content' },
-            react_1.default.createElement("div", { className: 'iui-select-tag-container', ref: containerRef },
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    visibleCount < selectedItemsElements.length
-                        ? selectedItemsElements.slice(0, visibleCount - 1)
-                        : selectedItemsElements,
-                    visibleCount < selectedItemsElements.length && (react_1.default.createElement(SelectTag_1.default, { label: `+${selectedItemsElements.length - visibleCount + 1} item(s)` }))))))));
+            react_1.default.createElement(SelectTagContainer_1.default, { tags: selectedItemsElements })))));
 };
 exports.default = exports.Select;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare type SelectTagContainerProps = {
+    /**
+     * Select tags.
+     */
+    tags: React.ReactNode[];
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+/**
+ */
+export declare const SelectTagContainer: React.ForwardRefExoticComponent<{
+    /**
+     * Select tags.
+     */
+    tags: React.ReactNode[];
+} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export default SelectTagContainer;

package/cjs/core/Select/SelectTagContainer.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectTagContainer = 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 classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const SelectTag_1 = __importDefault(require("./SelectTag"));
+/**
+ */
+exports.SelectTagContainer = react_1.default.forwardRef((props, ref) => {
+    const { tags, className, ...rest } = props;
+    (0, utils_1.useTheme)();
+    const [containerRef, visibleCount] = (0, utils_1.useOverflow)(tags);
+    const refs = (0, utils_1.useMergedRefs)(ref, containerRef);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-select-tag-container', className), ref: refs, ...rest },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
+            visibleCount < tags.length && (react_1.default.createElement(SelectTag_1.default, { label: `+${tags.length - visibleCount + 1} item(s)` })))));
+});
+exports.default = exports.SelectTagContainer;

package/cjs/core/Table/Table.js

@@ -150,7 +150,7 @@ const Table = (props) => {
             case react_table_1.actions.toggleRowSelected:
             case react_table_1.actions.toggleAllRowsSelected:
             case react_table_1.actions.toggleAllPageRowsSelected: {
-                (0, actionHandlers_1.onSelectHandler)(newState, instance, onSelect, 
+                (0, actionHandlers_1.onToggleHandler)(newState, action, instance, onSelect, 
                 // If it has manual selection column, then we can't check whether row is disabled
                 hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
@@ -209,6 +209,7 @@ const Table = (props) => {
     const showSortButton = (column) => data.length !== 0 && column.canSort;
     const onRowClickHandler = react_1.default.useCallback((event, row) => {
         const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+        const ctrlPressed = event.ctrlKey || event.metaKey;
         if (!isDisabled) {
             onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
         }
@@ -220,10 +221,11 @@ const Table = (props) => {
                 dispatch({
                     type: shiftRowSelectedAction,
                     id: row.id,
+                    ctrlPressed: ctrlPressed,
                 });
             }
             else if (!row.isSelected &&
-                (selectionMode === 'single' || !event.ctrlKey)) {
+                (selectionMode === 'single' || !ctrlPressed)) {
                 dispatch({
                     type: singleRowSelectedAction,
                     id: row.id,

package/cjs/core/Table/actionHandlers/index.d.ts

@@ -1,4 +1,4 @@
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler';
+export { onToggleHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler';
 export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

package/cjs/core/Table/actionHandlers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onTableResizeEnd = exports.onTableResizeStart = exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onSelectHandler = exports.onFilterHandler = exports.onExpandHandler = void 0;
+exports.onTableResizeEnd = exports.onTableResizeStart = exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleHandler = exports.onFilterHandler = exports.onExpandHandler = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "onExpandHandler", { enumerable: true, get: funct
 var filterHandler_1 = require("./filterHandler");
 Object.defineProperty(exports, "onFilterHandler", { enumerable: true, get: function () { return filterHandler_1.onFilterHandler; } });
 var selectHandler_1 = require("./selectHandler");
-Object.defineProperty(exports, "onSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onSelectHandler; } });
+Object.defineProperty(exports, "onToggleHandler", { enumerable: true, get: function () { return selectHandler_1.onToggleHandler; } });
 Object.defineProperty(exports, "onSingleSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onSingleSelectHandler; } });
 Object.defineProperty(exports, "onShiftSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onShiftSelectHandler; } });
 var resizeHandler_1 = require("./resizeHandler");

package/cjs/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,8 +1,8 @@
 import { ActionType, TableInstance, TableState } from 'react-table';
 /**
- * Handles selection when clicked on a checkbox.
+ * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
-export declare const onSelectHandler: <T extends Record<string, unknown>>(newState: TableState<T>, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => void;
+export declare const onToggleHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => void;
 /**
  * Handles selection when clicked on a row.
  */

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onSelectHandler = void 0;
+exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleHandler = void 0;
 /**
- * Handles selection when clicked on a checkbox.
+ * Handles subrow selection and validation.
+ * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
+ * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
@@ -36,7 +38,15 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     newState.selectedRowIds = newSelectedRowIds;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
 };
-exports.onSelectHandler = onSelectHandler;
+/**
+ * Handles selection when toggling a row (Ctrl click or checkbox click)
+ */
+const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled) => {
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
+    newState.lastSelectedRowId = action.id;
+};
+exports.onToggleHandler = onToggleHandler;
 /**
  * Handles selection when clicked on a row.
  */
@@ -55,7 +65,7 @@ const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled)
         selectedRowIds,
     };
     // Passing to `onSelectHandler` to handle filtered sub-rows
-    (0, exports.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
     return newState;
 };
 exports.onSingleSelectHandler = onSingleSelectHandler;
@@ -73,7 +83,11 @@ const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled)
         startIndex = endIndex;
         endIndex = temp;
     }
-    const selectedRowIds = {};
+    // If ctrl + shift click, do not lose previous selection
+    // If shift click, start new selection
+    const selectedRowIds = !!action.ctrlPressed
+        ? state.selectedRowIds
+        : {};
     // 1. Select all rows between start and end
     instance.flatRows
         .slice(startIndex, endIndex + 1)
@@ -91,7 +105,7 @@ const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled)
     };
     // 3.1 Deselect all selected disabled rows and their children
     // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
-    (0, exports.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
     return newState;
 };
 exports.onShiftSelectHandler = onShiftSelectHandler;

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -3,7 +3,7 @@ import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOp
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;
-declare type ThemeProviderOwnProps = {
+declare type RootProps = {
     /**
      * Theme to be applied. Can be 'light' or 'dark' or 'os'.
      *
@@ -14,8 +14,21 @@ declare type ThemeProviderOwnProps = {
      * @default 'light'
      */
     theme?: ThemeType;
-} & ({
-    themeOptions?: Pick<ThemeOptions, 'highContrast'>;
+    themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
+        /**
+         * Whether or not the element should apply the recommended `background-color` on itself.
+         *
+         * When not specified, the default behavior is to apply a background-color only
+         * if it is the topmost `ThemeProvider` in the tree. Nested `ThemeProvider`s will
+         * be detected using React Context and will not apply a background-color.
+         *
+         * When set to true or false, it will override the default behavior.
+         */
+        applyBackground?: boolean;
+    };
+};
+declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
+    themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
 } | {
     themeOptions?: ThemeOptions;
@@ -26,10 +39,11 @@ declare type ThemeProviderOwnProps = {
  * that it is wrapping around. The `theme` prop is optional and defaults to the
  * light theme.
  *
- * If you want to theme the entire app, you should use this component at the root.
- * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ * If you want to theme the entire app, you should use this component at the root. You can also
+ * use this component to apply a different theme to only a part of the tree.
  *
- * You can also use this component to apply a different theme to only a part of the tree.
+ * By default, the topmost `ThemeProvider` in the tree will apply the recommended
+ * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
  *
  * @example
  * <ThemeProvider theme='os'>
@@ -40,6 +54,11 @@ declare type ThemeProviderOwnProps = {
  * <ThemeProvider as='body'>
  *   <App />
  * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
+ *  <App />
+ * </ThemeProvider>
  */
 export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", ThemeProviderOwnProps>;
 export default ThemeProvider;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -18,10 +18,11 @@ require("@itwin/itwinui-variables/index.css");
  * that it is wrapping around. The `theme` prop is optional and defaults to the
  * light theme.
  *
- * If you want to theme the entire app, you should use this component at the root.
- * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ * If you want to theme the entire app, you should use this component at the root. You can also
+ * use this component to apply a different theme to only a part of the tree.
  *
- * You can also use this component to apply a different theme to only a part of the tree.
+ * By default, the topmost `ThemeProvider` in the tree will apply the recommended
+ * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
  *
  * @example
  * <ThemeProvider theme='os'>
@@ -32,26 +33,42 @@ require("@itwin/itwinui-variables/index.css");
  * <ThemeProvider as='body'>
  *   <App />
  * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
+ *  <App />
+ * </ThemeProvider>
  */
 exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
-    var _a;
-    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const { theme, children, themeOptions, ...rest } = props;
     const rootRef = react_1.default.useRef(null);
     const mergedRefs = (0, utils_1.useMergedRefs)(rootRef, ref);
     const hasChildren = react_1.default.Children.count(children) > 0;
     const parentContext = react_1.default.useContext(exports.ThemeContext);
+    const contextValue = react_1.default.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
+    // if no children, then fallback to this wrapper component which calls useTheme
+    if (!hasChildren) {
+        return (react_1.default.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+    }
+    // now that we know there are children, we can render the root and provide the context value
+    return (react_1.default.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
+        react_1.default.createElement(exports.ThemeContext.Provider, { value: contextValue }, children)));
+});
+exports.default = exports.ThemeProvider;
+exports.ThemeContext = react_1.default.createContext(undefined);
+const Root = react_1.default.forwardRef((props, forwardedRef) => {
+    var _a, _b, _c;
+    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const ref = react_1.default.useRef(null);
+    const mergedRefs = (0, utils_1.useMergedRefs)(ref, forwardedRef);
     const prefersDark = (0, utils_1.useMediaQuery)('(prefers-color-scheme: dark)');
     const prefersHighContrast = (0, utils_1.useMediaQuery)('(prefers-contrast: more)');
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
     const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
-    // only provide context if wrapped around children
-    return hasChildren ? (react_1.default.createElement(exports.ThemeContext.Provider, { value: { theme, themeOptions, rootRef } },
-        react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children))) : (
-    // otherwise just apply theme on the root using this wrapper component
-    react_1.default.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+    const isThemeAlreadySet = (0, utils_1.useIsThemeAlreadySet)((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });
-exports.default = exports.ThemeProvider;
-exports.ThemeContext = react_1.default.createContext(undefined);
 const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     (0, utils_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null);

package/cjs/core/utils/components/Popover.d.ts

@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "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<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "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<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/cjs/core/utils/hooks/index.d.ts

@@ -9,3 +9,4 @@ export * from './useMediaQuery';
 export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
+export * from './useIsThemeAlreadySet';

package/cjs/core/utils/hooks/index.js

@@ -29,3 +29,4 @@ __exportStar(require("./useMediaQuery"), exports);
 __exportStar(require("./useSafeContext"), exports);
 __exportStar(require("./useLatestRef"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
+__exportStar(require("./useIsThemeAlreadySet"), exports);

package/cjs/core/utils/hooks/useIsThemeAlreadySet.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Hook that returns a boolean ref which is true if either:
+ * - There is a parent `ThemeProvider` in the tree, or
+ * - The <body> element has data-iui-theme attribute
+ */
+export declare const useIsThemeAlreadySet: (ownerDocument?: Document | undefined) => React.MutableRefObject<boolean>;

package/cjs/core/utils/hooks/useIsThemeAlreadySet.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsThemeAlreadySet = 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 ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+const functions_1 = require("../functions");
+/**
+ * Hook that returns a boolean ref which is true if either:
+ * - There is a parent `ThemeProvider` in the tree, or
+ * - The <body> element has data-iui-theme attribute
+ */
+const useIsThemeAlreadySet = (ownerDocument = (0, functions_1.getDocument)()) => {
+    const parentContext = react_1.default.useContext(ThemeProvider_1.ThemeContext);
+    const isThemeAlreadySet = react_1.default.useRef(!!parentContext || !!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.dataset.iuiTheme));
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
+        if (parentContext ||
+            (ownerDocument && !!ownerDocument.body.dataset.iuiTheme)) {
+            isThemeAlreadySet.current = true;
+        }
+        return () => {
+            isThemeAlreadySet.current = false;
+        };
+    }, [parentContext, ownerDocument]);
+    return isThemeAlreadySet;
+};
+exports.useIsThemeAlreadySet = useIsThemeAlreadySet;

package/cjs/core/utils/hooks/useTheme.js

@@ -1,17 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = 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 ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
 const functions_1 = require("../functions");
 const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+const useIsThemeAlreadySet_1 = require("./useIsThemeAlreadySet");
 require("@itwin/itwinui-css/css/global.css");
 require("@itwin/itwinui-variables/index.css");
 /**
@@ -25,11 +21,10 @@ require("@itwin/itwinui-variables/index.css");
  */
 const useTheme = (theme, themeOptions) => {
     var _a;
-    const themeContext = react_1.default.useContext(ThemeProvider_1.ThemeContext);
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
+    const isThemeAlreadySet = (0, useIsThemeAlreadySet_1.useIsThemeAlreadySet)(ownerDocument);
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
-        // exit early if theme was already set by provider or is present on <body>
-        if (themeContext || !ownerDocument || ownerDocument.body.dataset.iuiTheme) {
+        if (!ownerDocument || isThemeAlreadySet.current) {
             return;
         }
         ownerDocument.body.classList.toggle('iui-root', true);
@@ -47,7 +42,7 @@ const useTheme = (theme, themeOptions) => {
                 return;
             }
         }
-    }, [theme, themeContext, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
+    }, [theme, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
 };
 exports.useTheme = useTheme;
 /**

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

@@ -3,24 +3,41 @@ import { InputProps } from '../Input';
 import { SelectOption } from '../Select';
 import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
 import 'tippy.js/animations/shift-away.css';
-export declare type ComboBoxProps<T> = {
+declare type ActionType = 'added' | 'removed';
+declare type MultipleOnChangeProps<T> = {
+    value: T;
+    type: ActionType;
+};
+export declare type ComboboxMultipleTypeProps<T> = {
     /**
-     * Array of options that populate the dropdown list.
+     * Enable multiple selection.
+     * @default false
      */
-    options: SelectOption<T>[];
+    multiple?: false;
     /**
      * Controlled value of ComboBox.
+     * If `multiple` is enabled, it is an array of values.
      */
     value?: T;
+    /**
+     * Callback fired when selected value changes.
+     */
+    onChange?: (value: T) => void;
+} | {
+    multiple: true;
+    value?: T[];
+    onChange?: (value: T[], event: MultipleOnChangeProps<T>) => void;
+};
+export declare type ComboBoxProps<T> = {
+    /**
+     * Array of options that populate the dropdown list.
+     */
+    options: SelectOption<T>[];
     /**
      * Message shown below the combobox.
      * Use `StatusMessage` component.
      */
     message?: React.ReactNode;
-    /**
-     * Callback fired when selected value changes.
-     */
-    onChange?: (value: T) => void;
     /**
      * Function to customize the default filtering logic.
      */
@@ -67,7 +84,7 @@ export declare type ComboBoxProps<T> = {
      * Callback fired when dropdown menu is closed.
      */
     onHide?: () => void;
-} & Pick<InputContainerProps, 'status'> & Omit<CommonProps, 'title'>;
+} & ComboboxMultipleTypeProps<T> & Pick<InputContainerProps, 'status'> & Omit<CommonProps, 'title'>;
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
  * Values can be selected either using mouse clicks or using the Enter key.