@itwin/itwinui-react 1.20.0 → 1.21.0

package/cjs/core/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./functions"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./props"), exports);

package/esm/core/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/alert.css';
 export declare type AlertProps = {
     /**

package/esm/core/Alert/Alert.js

@@ -27,10 +27,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, StatusIconMap } from '../utils';
 import '@itwin/itwinui-css/css/alert.css';
 import { IconButton } from '../Buttons/IconButton';
-import { StatusIconMap } from '../utils/common';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example

package/esm/core/Badge/Badge.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils/props';
+import { CommonProps, SoftBackgrounds } from '../utils';
 import '@itwin/itwinui-css/css/badge.css';
-import { SoftBackgrounds } from '../utils/common';
 export declare type BadgeProps = {
     /**
      * Background color of the badge.

package/esm/core/Badge/Badge.js

@@ -26,9 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, getWindow, isSoftBackground, SoftBackgrounds, } from '../utils';
 import '@itwin/itwinui-css/css/badge.css';
-import { getWindow, isSoftBackground, SoftBackgrounds } from '../utils/common';
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
 export declare type BreadcrumbsProps = {
     /**

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -26,11 +26,9 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, useMergedRefs, useOverflow } from '../utils';
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
-import { useMergedRefs } from '../utils/hooks/useMergedRefs';
-import { useOverflow } from '../utils/hooks/useOverflow';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonGroupProps = {
     /**

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
-import { useOverflow } from '../utils/hooks/useOverflow';
+import { useTheme, useOverflow } from '../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Group buttons together for common actions.

package/esm/core/Buttons/Button/Button.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Generic button component

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -30,8 +30,7 @@ import { Button } from '../Button';
 import { DropdownMenu } from '../../DropdownMenu';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
-import { useTheme } from '../../utils/hooks/useTheme';
-import { useMergedRefs } from '../../utils/hooks/useMergedRefs';
+import { useTheme, useMergedRefs } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Button that opens a DropdownMenu.

package/esm/core/Buttons/IconButton/IconButton.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Icon button

package/esm/core/Buttons/IdeasButton/IdeasButton.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import SvgSmileyHappy from '@itwin/itwinui-icons-react/cjs/icons/SmileyHappy';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import { Button } from '../Button';
 /**
  * Ideas button

package/esm/core/Buttons/SplitButton/SplitButton.js

@@ -31,7 +31,7 @@ import { IconButton } from '../IconButton';
 import { DropdownMenu } from '../../DropdownMenu';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Split button component with a DropdownMenu.

package/esm/core/Checkbox/Checkbox.js

@@ -27,8 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { ProgressRadial } from '../ProgressIndicators';
-import { useMergedRefs } from '../utils/hooks/useMergedRefs';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useMergedRefs, useTheme } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Simple input checkbox

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

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { InputProps } from '../Input';
+import { SelectOption } from '../Select';
+import { PopoverProps, CommonProps } from '../utils';
+import 'tippy.js/animations/shift-away.css';
+export declare type ComboBoxProps<T> = {
+    /**
+     * Array of options that populate the dropdown list.
+     */
+    options: SelectOption<T>[];
+    /**
+     * Controlled value of ComboBox.
+     */
+    value?: T;
+    /**
+     * Callback fired when selected value changes.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Function to customize the default filtering logic.
+     */
+    filterFunction?: (options: SelectOption<T>[], inputValue: string) => SelectOption<T>[];
+    /**
+     * Native input element props.
+     */
+    inputProps?: Omit<InputProps, 'setFocus'>;
+    /**
+     * Props to customize dropdown menu behavior.
+     */
+    dropdownMenuProps?: PopoverProps;
+    /**
+     * Message shown when no options are available.
+     * @default 'No options found'
+     */
+    emptyStateMessage?: string;
+} & 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.
+ * @example
+ * <ComboBox
+ *   options={[
+ *     { label: 'Item 1', value: 1 },
+ *     { label: 'Item 2', value: 2 },
+ *     { label: 'Item 3', value: 3 },
+ *   ]}
+ *   onChange={() => {}}
+ * />
+ */
+export declare const ComboBox: <T>(props: ComboBoxProps<T>) => JSX.Element;
+export default ComboBox;

package/esm/core/ComboBox/ComboBox.js

@@ -0,0 +1,261 @@
+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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { Input } from '../Input';
+import { Menu, MenuItem } from '../Menu';
+import { Text } from '../Typography';
+import { InputContainer, useTheme, Popover, getFocusableElements, getRandomValue, } from '../utils';
+import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
+import 'tippy.js/animations/shift-away.css';
+/**
+ * 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.
+ * @example
+ * <ComboBox
+ *   options={[
+ *     { label: 'Item 1', value: 1 },
+ *     { label: 'Item 2', value: 2 },
+ *     { label: 'Item 3', value: 3 },
+ *   ]}
+ *   onChange={() => {}}
+ * />
+ */
+export var ComboBox = function (props) {
+    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage"]);
+    // Generate a stateful random id if not specified
+    var id = React.useState(function () { var _a, _b; return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) + "-cb") !== null && _b !== void 0 ? _b : "iui-cb-" + getRandomValue(10); })[0];
+    useTheme();
+    /** Generates a memoized id for an option, given the index from original list */
+    var getOptionId = React.useCallback(function (index) {
+        var _a;
+        return (_a = options[index].id) !== null && _a !== void 0 ? _a : id + "-option" + options.findIndex(function (_a) {
+            var value = _a.value;
+            return value === options[index].value;
+        });
+    }, [options, id]);
+    var memoizedItems = React.useMemo(function () {
+        return options.map(function (_a, index) {
+            var label = _a.label, value = _a.value, rest = __rest(_a, ["label", "value"]);
+            return (React.createElement(MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index), value: value, role: 'option', onClick: function (value) {
+                    setSelectedValue(value);
+                    setIsOpen(false);
+                } }, rest), label));
+        });
+    }, [options, getOptionId]);
+    var inputRef = React.useRef(null);
+    var menuRef = React.useRef(null);
+    var toggleButtonRef = React.useRef(null);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    // Set min-width of menu to be same as input
+    var _c = React.useState(0), minWidth = _c[0], setMinWidth = _c[1];
+    React.useEffect(function () {
+        if (inputRef.current) {
+            setMinWidth(inputRef.current.offsetWidth);
+        }
+    }, [isOpen]);
+    var _d = React.useState(options), filteredOptions = _d[0], setFilteredOptions = _d[1];
+    var _e = React.useState(function () {
+        return options.findIndex(function (option) { return value === option.value; });
+    }), focusedIndex = _e[0], setFocusedIndex = _e[1];
+    // Maintain internal selected value state synced with `value` prop
+    var _f = React.useState(), selectedValue = _f[0], setSelectedValue = _f[1];
+    React.useEffect(function () {
+        setSelectedValue(value);
+    }, [value]);
+    // Controlled input value
+    var _g = React.useState(''), inputValue = _g[0], setInputValue = _g[1];
+    var onInput = React.useCallback(function (event) {
+        var _a;
+        setInputValue(event.target.value);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+    }, [inputProps]);
+    // Fire onChange callback and update inputValue every time selected value changes
+    React.useEffect(function () {
+        var _a, _b;
+        if (selectedValue != undefined) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+            setInputValue((_b = (_a = options.find(function (_a) {
+                var value = _a.value;
+                return value === selectedValue;
+            })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '');
+        }
+    }, [selectedValue, onChange, options]);
+    // Filter options and update focus when input value changes
+    React.useEffect(function () {
+        var _a;
+        if (!isOpen) {
+            return;
+        }
+        // if input is empty or same as selected value, show the whole list
+        var selectedOption = options.find(function (_a) {
+            var value = _a.value;
+            return value === selectedValue;
+        });
+        if (!inputValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === inputValue) {
+            setFilteredOptions(options);
+            return;
+        }
+        var _filteredOptions = (_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 === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase());
+        });
+        setFilteredOptions(_filteredOptions);
+        setFocusedIndex(function (previouslyFocusedIndex) {
+            if (_filteredOptions.includes(options[previouslyFocusedIndex])) {
+                return previouslyFocusedIndex;
+            }
+            else if (_filteredOptions.find(function (_a) {
+                var value = _a.value;
+                return value === selectedValue;
+            })) {
+                return options.findIndex(function (_a) {
+                    var value = _a.value;
+                    return value === selectedValue;
+                });
+            }
+            else {
+                return -1; // reset focus if previously focused or selected value is not in filtered list
+            }
+        });
+    }, [inputValue, options, selectedValue, isOpen, filterFunction]);
+    var onKeyDown = React.useCallback(function (event) {
+        var focusableOptions = getFocusableElements(menuRef.current);
+        var focusedIndexInFilteredList = focusableOptions.findIndex(function (_a) {
+            var _b;
+            var id = _a.id;
+            return id === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-activedescendant'));
+        });
+        switch (event.key) {
+            case 'ArrowDown':
+                if (isOpen) {
+                    var nextIndex_1 = Math.min(focusedIndexInFilteredList + 1, focusableOptions.length - 1);
+                    setFocusedIndex(options.findIndex(function (_, index) {
+                        return getOptionId(index) === focusableOptions[nextIndex_1].id;
+                    }));
+                }
+                else {
+                    setIsOpen(true); // reopen menu if closed when typing
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'ArrowUp':
+                if (isOpen) {
+                    var previousIndex_1 = Math.max(focusedIndexInFilteredList - 1, 0);
+                    setFocusedIndex(options.findIndex(function (_, index) {
+                        return getOptionId(index) === focusableOptions[previousIndex_1].id;
+                    }));
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'Enter':
+                if (isOpen) {
+                    setSelectedValue(options[focusedIndex].value);
+                }
+                setIsOpen(function (open) { return !open; });
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'Tab':
+                setIsOpen(false);
+                break;
+            default:
+                if (!isOpen) {
+                    setIsOpen(true); // reopen menu if closed when typing
+                }
+                break;
+        }
+    }, [focusedIndex, isOpen, options, getOptionId]);
+    var menuItems = React.useMemo(function () {
+        if (filteredOptions.length === 0) {
+            return (React.createElement(MenuItem, { className: 'iui-menu-content', role: 'presentation' },
+                React.createElement(Text, { isMuted: true }, emptyStateMessage)));
+        }
+        return filteredOptions.map(function (option) {
+            var index = options.findIndex(function (_a) {
+                var value = _a.value;
+                return option.value === value;
+            });
+            return focusedIndex !== index && selectedValue !== option.value
+                ? memoizedItems[index]
+                : React.cloneElement(memoizedItems[index], {
+                    className: cx({ 'iui-focused': focusedIndex === index }),
+                    isSelected: selectedValue === option.value,
+                    ref: function (el) {
+                        return focusedIndex === index && (el === null || el === void 0 ? void 0 : el.scrollIntoView(false));
+                    },
+                });
+        });
+    }, [
+        filteredOptions,
+        emptyStateMessage,
+        options,
+        focusedIndex,
+        selectedValue,
+        memoizedItems,
+    ]);
+    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true, icon: React.createElement("span", { ref: toggleButtonRef, className: cx('iui-actionable', { 'iui-open': isOpen }), onClick: function () {
+                var _a;
+                if (isOpen) {
+                    setIsOpen(false);
+                }
+                else {
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            } },
+            React.createElement(SvgCaretDownSmall, { "aria-hidden": true })) }, rest, { id: id }),
+        React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
+                var _b;
+                var target = _a.target;
+                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                    setIsOpen(false);
+                }
+            }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                    minWidth: minWidth,
+                    maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
+                    maxHeight: 300,
+                }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
+                var _a;
+                var selectedIndex = options.findIndex(function (_a) {
+                    var value = _a.value;
+                    return value === selectedValue;
+                });
+                setFocusedIndex(selectedIndex);
+                if (selectedIndex > -1) {
+                    setInputValue(options[selectedIndex].label); // update input value to be same as selected value
+                }
+                (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
+            } }),
+            React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1 ? getOptionId(focusedIndex) : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps)))));
+};
+export default ComboBox;

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

@@ -0,0 +1,4 @@
+export { ComboBox } from './ComboBox';
+export type { ComboBoxProps } from './ComboBox';
+declare const _default: "./ComboBox";
+export default _default;

package/esm/core/ComboBox/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { ComboBox } from './ComboBox';
+export default './ComboBox';

package/esm/core/DatePicker/DatePicker.js

@@ -28,7 +28,7 @@ import SvgChevronLeft from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeft';
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton';
 import { TimePicker } from '../TimePicker';

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
-import { PopoverProps } from '../utils/Popover';
+import { CommonProps, PopoverProps } from '../utils';
 export declare type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -25,10 +25,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, Popover, mergeRefs, } from '../utils';
 import { Menu } from '../Menu';
-import { Popover } from '../utils/Popover';
-import { mergeRefs } from '../utils/hooks/useMergedRefs';
 /**
  * Dropdown menu component.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

package/esm/core/ErrorPage/ErrorPage.js

@@ -33,7 +33,7 @@ import Svg503 from '@itwin/itwinui-illustrations-react/cjs/illustrations/503';
 import SvgError from '@itwin/itwinui-illustrations-react/cjs/illustrations/Error';
 import React from 'react';
 import { Button } from '../Buttons/Button';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
 /**
  * A stylized display to communicate common http errors.

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/expandable-block.css';
 export declare type ExpandableBlockProps = {
     /**

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -28,9 +28,8 @@ import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import cx from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, StatusIconMap } from '../utils';
 import '@itwin/itwinui-css/css/expandable-block.css';
-import { StatusIconMap } from '../utils/common';
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example

package/esm/core/Fieldset/Fieldset.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/fieldset.css';
 /**

package/esm/core/FileUpload/FileUpload.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/file-upload.css';
 export declare type FileUploadProps = {
     /**
@@ -46,5 +46,5 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     id?: string | undefined;
 } & {
     style?: React.CSSProperties | undefined;
-} & import("../utils/props").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
+} & import("../utils").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
 export default FileUpload;

package/esm/core/FileUpload/FileUpload.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
-import { useMergedRefs } from '../utils/hooks/useMergedRefs';
+import { useTheme, useMergedRefs } from '../utils';
 import '@itwin/itwinui-css/css/file-upload.css';
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/file-upload.css';
 import SvgUpload from '@itwin/itwinui-icons-react/cjs/icons/Upload';
 /**

package/esm/core/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
-import { StylingProps } from '../utils/props';
 export declare type TitleTranslations = {
     termsOfService: string;
     privacy: string;

package/esm/core/Footer/Footer.js

@@ -35,7 +35,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
 var footerTranslations = {
     cookies: 'Cookies',

package/esm/core/Header/Header.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
-import { CommonProps } from '../utils/props';
 export declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.