@itwin/itwinui-react 2.10.0 → 2.11.0

package/cjs/core/Select/Select.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,13 +31,13 @@ exports.Select = 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 utils_1 = require("../utils");
+const index_js_1 = require("../Menu/index.js");
+const index_js_2 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/select.css");
-const SelectTag_1 = __importDefault(require("./SelectTag"));
-const SelectTagContainer_1 = __importDefault(require("./SelectTagContainer"));
+const SelectTag_js_1 = __importDefault(require("./SelectTag.js"));
+const SelectTagContainer_js_1 = __importDefault(require("./SelectTagContainer.js"));
 const isMultipleEnabled = (variable, multiple) => {
     return multiple;
 };
@@ -73,30 +96,31 @@ const isSingleOnChange = (onChange, multiple) => {
  */
 const Select = (props) => {
     var _a;
-    const uid = (0, utils_1.useId)();
+    const uid = (0, index_js_2.useId)();
     const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, triggerProps, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const [isOpenState, setIsOpen] = react_1.default.useState(false);
+    (0, index_js_2.useTheme)();
+    const [isOpenState, setIsOpen] = React.useState(false);
     const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
-    const [minWidth, setMinWidth] = react_1.default.useState(0);
-    const selectRef = react_1.default.useRef(null);
-    const toggleButtonRef = react_1.default.useRef(null);
-    const onShowHandler = react_1.default.useCallback((instance) => {
+    const [minWidth, setMinWidth] = React.useState(0);
+    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+    const selectRef = React.useRef(null);
+    const toggleButtonRef = React.useRef(null);
+    const onShowHandler = React.useCallback((instance) => {
         setIsOpen(true);
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
     }, [onShow]);
-    const onHideHandler = react_1.default.useCallback((instance) => {
+    const onHideHandler = React.useCallback((instance) => {
         var _a;
         setIsOpen(false);
         (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // move focus back to select button
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (selectRef.current && !disabled && setFocus) {
             selectRef.current.focus();
         }
     }, [setFocus, disabled]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (selectRef.current) {
             setMinWidth(selectRef.current.offsetWidth);
         }
@@ -117,15 +141,15 @@ const Select = (props) => {
                 break;
         }
     };
-    const menuItems = react_1.default.useMemo(() => {
+    const menuItems = React.useMemo(() => {
         return options.map((option, index) => {
             var _a;
             const isSelected = isMultipleEnabled(value, multiple)
                 ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
                 : value === option.value;
-            const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (react_1.default.createElement(Menu_1.MenuItem, null, option.label));
+            const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(index_js_1.MenuItem, null, option.label));
             const { label, ...restOption } = option;
-            return react_1.default.cloneElement(menuItem, {
+            return React.cloneElement(menuItem, {
                 key: `${label}-${index}`,
                 isSelected,
                 onClick: () => {
@@ -139,6 +163,18 @@ const Select = (props) => {
                     else {
                         onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
                     }
+                    // update live region
+                    if (isMultipleEnabled(value, multiple)) {
+                        const prevSelectedValue = value || [];
+                        const newSelectedValue = isSelected
+                            ? prevSelectedValue.filter((i) => option.value !== i)
+                            : [...prevSelectedValue, option.value];
+                        setLiveRegionSelection(options
+                            .filter((i) => newSelectedValue.includes(i.value))
+                            .map((item) => item.label)
+                            .filter(Boolean)
+                            .join(', '));
+                    }
                 },
                 ref: (el) => {
                     if (isSelected && !multiple) {
@@ -151,7 +187,7 @@ const Select = (props) => {
             });
         });
     }, [itemRenderer, multiple, onChange, options, value]);
-    const selectedItems = react_1.default.useMemo(() => {
+    const selectedItems = React.useMemo(() => {
         if (value == null) {
             return undefined;
         }
@@ -159,11 +195,11 @@ const Select = (props) => {
             ? options.filter((option) => value.some((val) => val === option.value))
             : options.find((option) => option.value === value);
     }, [multiple, options, value]);
-    const tagRenderer = react_1.default.useCallback((item) => {
-        return react_1.default.createElement(SelectTag_1.default, { key: item.label, label: item.label });
+    const tagRenderer = React.useCallback((item) => {
+        return React.createElement(SelectTag_js_1.default, { key: item.label, label: item.label });
     }, []);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest },
-        react_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(Menu_1.Menu, { role: 'listbox', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: {
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest },
+        React.createElement(index_js_2.Popover, { content: React.createElement(index_js_1.Menu, { role: 'listbox', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: {
                     minWidth,
                     maxWidth: `min(${minWidth * 2}px, 90vw)`,
                     ...menuStyle,
@@ -173,44 +209,45 @@ const Select = (props) => {
                     setIsOpen(false);
                 }
             } },
-            react_1.default.createElement("div", { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: (0, classnames_1.default)('iui-select-button', {
+            React.createElement("div", { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: (0, classnames_1.default)('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
                 }, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.className) },
-                (!selectedItems || selectedItems.length === 0) && (react_1.default.createElement("span", { className: 'iui-content' }, placeholder)),
-                isMultipleEnabled(selectedItems, multiple) ? (react_1.default.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (react_1.default.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
-        react_1.default.createElement("span", { "aria-hidden": true, ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
+                (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
+                isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
+        React.createElement("span", { "aria-hidden": true, ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
             }), onClick: () => !disabled && setIsOpen((o) => !o) },
-            react_1.default.createElement(utils_1.SvgCaretDownSmall, null))));
+            React.createElement(index_js_2.SvgCaretDownSmall, null)),
+        multiple ? (React.createElement(index_js_2.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null));
 };
 exports.Select = Select;
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         selectedItem &&
             selectedItemRenderer &&
             selectedItemRenderer(selectedItem),
-        selectedItem && !selectedItemRenderer && (react_1.default.createElement(react_1.default.Fragment, null,
+        selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
             selectedItem.icon &&
-                react_1.default.cloneElement(selectedItem.icon, {
+                React.cloneElement(selectedItem.icon, {
                     className: (0, classnames_1.default)(selectedItem.icon.props.className, 'iui-icon'),
                 }),
-            react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
+            React.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
 };
 const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
-    const selectedItemsElements = react_1.default.useMemo(() => {
+    const selectedItemsElements = React.useMemo(() => {
         if (!selectedItems) {
             return [];
         }
         return selectedItems.map((item) => tagRenderer(item));
     }, [selectedItems, tagRenderer]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         selectedItems &&
             selectedItemsRenderer &&
             selectedItemsRenderer(selectedItems),
-        selectedItems && !selectedItemsRenderer && (react_1.default.createElement("span", { className: 'iui-content' },
-            react_1.default.createElement(SelectTagContainer_1.default, { tags: selectedItemsElements })))));
+        selectedItems && !selectedItemsRenderer && (React.createElement("span", { className: 'iui-content' },
+            React.createElement(SelectTagContainer_js_1.default, { tags: selectedItemsElements })))));
 };
 exports.default = exports.Select;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/select.css';
 export declare type SelectTagProps = {
     /**

package/cjs/core/Select/SelectTag.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,8 +32,8 @@ exports.SelectTag = 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 React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/select.css");
 /**
  * Tag for showing selected value in `Select`.
@@ -18,9 +41,9 @@ require("@itwin/itwinui-css/css/select.css");
  */
 const SelectTag = (props) => {
     const { className, label, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-select-tag', className), ...rest },
-        react_1.default.createElement("span", { className: 'iui-select-tag-label' }, label)));
+    (0, index_js_1.useTheme)();
+    return (React.createElement("span", { className: (0, classnames_1.default)('iui-select-tag', className), ...rest },
+        React.createElement("span", { className: 'iui-select-tag-label' }, label)));
 };
 exports.SelectTag = SelectTag;
 exports.default = exports.SelectTag;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare type SelectTagContainerProps = {
     /**
      * Select tags.

package/cjs/core/Select/SelectTagContainer.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.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 React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../utils");
-const SelectTag_1 = __importDefault(require("./SelectTag"));
+const index_js_1 = require("../utils/index.js");
+const SelectTag_js_1 = __importDefault(require("./SelectTag.js"));
 /**
  */
-exports.SelectTagContainer = react_1.default.forwardRef((props, ref) => {
+exports.SelectTagContainer = React.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,
+    (0, index_js_1.useTheme)();
+    const [containerRef, visibleCount] = (0, index_js_1.useOverflow)(tags);
+    const refs = (0, index_js_1.useMergedRefs)(ref, containerRef);
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-select-tag-container', className), ref: refs, ...rest },
+        React.createElement(React.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)` })))));
+            visibleCount < tags.length && (React.createElement(SelectTag_js_1.default, { label: `+${tags.length - visibleCount + 1} item(s)` })))));
 });
 exports.default = exports.SelectTagContainer;

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

@@ -1,4 +1,4 @@
-export { Select } from './Select';
-export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select';
+export { Select } from './Select.js';
+export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select.js';
 declare const _default: "./Select";
 export default _default;

package/cjs/core/Select/index.js

@@ -5,6 +5,6 @@ exports.Select = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Select_1 = require("./Select");
-Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var Select_js_1 = require("./Select.js");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_js_1.Select; } });
 exports.default = './Select';

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SideNavigationProps = {
     /**

package/cjs/core/SideNavigation/SideNavigation.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,11 +31,11 @@ exports.SideNavigation = 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 utils_1 = require("../utils");
-const Buttons_1 = require("../Buttons");
-const Tooltip_1 = require("../Tooltip");
+const index_js_1 = require("../utils/index.js");
+const index_js_2 = require("../Buttons/index.js");
+const index_js_3 = require("../Tooltip/index.js");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Left side navigation menu component.
@@ -30,27 +53,27 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 const SideNavigation = (props) => {
     const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const [_isExpanded, _setIsExpanded] = react_1.default.useState(isExpanded);
-    react_1.default.useEffect(() => {
+    (0, index_js_1.useTheme)();
+    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
+    React.useEffect(() => {
         _setIsExpanded(isExpanded);
     }, [isExpanded]);
-    const ExpandButton = (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-sidenav-button iui-expand', onClick: react_1.default.useCallback(() => {
+    const ExpandButton = (React.createElement(index_js_2.IconButton, { className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
             _setIsExpanded((expanded) => !expanded);
             onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
         }, [onExpanderClick]) },
-        react_1.default.createElement(utils_1.SvgChevronRight, null)));
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-wrapper', className), ...rest },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation', {
+        React.createElement(index_js_1.SvgChevronRight, null)));
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-wrapper', className), ...rest },
+        React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation', {
                 'iui-expanded': _isExpanded,
                 'iui-collapsed': !_isExpanded,
             }) },
             expanderPlacement === 'top' && ExpandButton,
-            react_1.default.createElement("div", { className: 'iui-sidenav-content' },
-                react_1.default.createElement("div", { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                react_1.default.createElement("div", { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
+            React.createElement("div", { className: 'iui-sidenav-content' },
+                React.createElement("div", { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
+                React.createElement("div", { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
             expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (react_1.default.createElement(utils_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+        submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
 };
 exports.SideNavigation = SideNavigation;
 exports.default = exports.SideNavigation;

package/cjs/core/SideNavigation/SidenavButton.d.ts

@@ -1,5 +1,5 @@
-import { PolymorphicForwardRefComponent } from '../utils';
-import { ButtonProps } from '../Buttons';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { ButtonProps } from '../Buttons/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavButtonProps = {
     /**

package/cjs/core/SideNavigation/SidenavButton.js

@@ -3,24 +3,47 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidenavButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
-const Buttons_1 = require("../Buttons");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const index_js_2 = require("../Buttons/index.js");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
-exports.SidenavButton = react_1.default.forwardRef((props, ref) => {
+exports.SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Buttons_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', {
+    (0, index_js_1.useTheme)();
+    return (React.createElement(index_js_2.Button, { className: (0, classnames_1.default)('iui-sidenav-button', {
             'iui-submenu-open': isSubmenuOpen,
         }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
 });

package/cjs/core/SideNavigation/SidenavSubmenu.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavSubmenuProps = {
     /**

package/cjs/core/SideNavigation/SidenavSubmenu.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,8 +32,8 @@ exports.SidenavSubmenu = 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 React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
@@ -20,10 +43,10 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  *   <div> ... </div>
  * </SidenavSubmenu>
  */
-exports.SidenavSubmenu = react_1.default.forwardRef((props, ref) => {
+exports.SidenavSubmenu = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref, ...rest },
-        react_1.default.createElement("div", { className: 'iui-side-navigation-submenu-content' }, children)));
+    (0, index_js_1.useTheme)();
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref, ...rest },
+        React.createElement("div", { className: 'iui-side-navigation-submenu-content' }, children)));
 });
 exports.default = exports.SidenavSubmenu;

package/cjs/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavSubmenuHeaderProps = {
     /**