@itwin/itwinui-react 3.10.0 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 3.11.0
+
+### Minor Changes
+
+- [#2058](https://github.com/iTwin/iTwinUI/pull/2058): Added new `loading` prop to `Button`. This is useful when you want to display a brief loading state after the user clicks the button.
+
+  ```jsx
+  <Button loading={isProcessing}>Click me</Button>
+  ```
+
+- [#2057](https://github.com/iTwin/iTwinUI/pull/2057): Updated warning and negative background colors to better match the rest of the color palette.
+- [#2060](https://github.com/iTwin/iTwinUI/pull/2060): Updated `Tooltip` to automatically use the [`popover` API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) in supported browsers. This ensures that tooltips appear in the top layer, avoiding stacking context issues.
+- [#2022](https://github.com/iTwin/iTwinUI/pull/2022): Added optional props to `TreeNode` for customization: `nodeProps`, `contentProps`, `labelProps`, `titleProps`, `sublabelProps`, `checkboxProps`, `iconProps`, `expanderProps` and `subTreeProps`.
+
+### Patch Changes
+
+- [#2042](https://github.com/iTwin/iTwinUI/pull/2042): Fixed `Table` empty state horizontal alignment when table is very narrow.
+- [#2054](https://github.com/iTwin/iTwinUI/pull/2054): Removed unnecessary gap below the inline `<InputGrid>` when no secondary line (`StatusMessage`) is present. Some other affected components: `LabeledInput`, `LabeledSelect`, `LabeledTextarea`.
+- [#2049](https://github.com/iTwin/iTwinUI/pull/2049): Adjusted disabled controls' borders to slightly increase color contrast.
+- [#2043](https://github.com/iTwin/iTwinUI/pull/2043): Adjusted the behavior of buttons so that double tapping them doesn't zoom the viewport on iOS.
+- [#2044](https://github.com/iTwin/iTwinUI/pull/2044): Fixed a rare hydration error in `Surface` caused by using an empty string inside the `style` attribute.
+
+## 3.10.1
+
+### Patch Changes
+
+- [#2031](https://github.com/iTwin/iTwinUI/pull/2031): Fixed an issue where popovers and dropdown menus used with `SidenavButton` were showing up inside a tooltip.
+- [#2030](https://github.com/iTwin/iTwinUI/pull/2030): Fixed a visual bug where items in a `ButtonGroup` were displaying a double border when an associated `Popover` was opened.
+- [#2026](https://github.com/iTwin/iTwinUI/pull/2026): Submenus within a `DropdownMenu` will now consistently require less precision when moving the mouse between the parent item and the submenu.
+
 ## 3.10.0
 
 ### Minor Changes

package/cjs/core/Alert/Alert.d.ts

@@ -60,7 +60,7 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
          * Type of the alert.
          * @default 'informational'
          */
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;

package/cjs/core/Buttons/Button.d.ts

@@ -38,6 +38,10 @@ export type ButtonProps = {
      * This is useful on narrow containers and mobile views.
      */
     stretched?: boolean;
+    /**
+     * Specify a loading state for the button.
+     */
+    loading?: boolean;
 } & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 /**
  * Generic button component

package/cjs/core/Buttons/Button.js

@@ -34,6 +34,7 @@ exports.Button = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
+const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
 /**
  * Generic button component
  * @example
@@ -44,12 +45,13 @@ const index_js_1 = require("../../utils/index.js");
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 exports.Button = React.forwardRef((props, ref) => {
-    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, ...rest } = props;
-    return (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', 'iui-field', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest, style: {
+    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, loading: loading, disabled: disabledProp, ...rest } = props;
+    return (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', 'iui-field', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-loading": loading ? 'true' : undefined, disabled: disabledProp || loading, ...rest, style: {
             '--_iui-width': stretched ? '100%' : undefined,
             ...props.style,
         } },
         startIcon && (React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...startIconProps, className: (0, classnames_1.default)('iui-button-icon', startIconProps?.className) }, startIcon)),
-        children && React.createElement("span", { ...labelProps }, children),
-        endIcon && (React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: (0, classnames_1.default)('iui-button-icon', endIconProps?.className) }, endIcon))));
+        children && (React.createElement(index_js_1.Box, { as: 'span', ...labelProps, className: (0, classnames_1.default)('iui-button-label', labelProps?.className) }, children)),
+        endIcon && (React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: (0, classnames_1.default)('iui-button-icon', endIconProps?.className) }, endIcon)),
+        loading && (React.createElement(ProgressRadial_js_1.ProgressRadial, { size: size === 'small' ? 'x-small' : 'small', className: 'iui-button-spinner', "aria-hidden": true }))));
 });

package/cjs/core/Carousel/Carousel.d.ts

@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -105,7 +105,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -72,7 +72,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -39,10 +39,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
     const refs = (0, index_js_1.useMergedRefs)(inputRef, popover.refs.setReference, forwardedRef);
-    const focusedIndexRef = React.useRef(focusedIndex ?? -1);
-    React.useEffect(() => {
-        focusedIndexRef.current = focusedIndex ?? -1;
-    }, [focusedIndex]);
+    const focusedIndexRef = (0, index_js_1.useLatestRef)(focusedIndex ?? -1);
     const getIdFromIndex = (index) => {
         return (menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '');
     };
@@ -140,6 +137,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     }, [
         dispatch,
         enableVirtualization,
+        focusedIndexRef,
         isOpen,
         menuRef,
         onClickHandler,

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.ComboBoxMenu = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -29,9 +32,10 @@ exports.ComboBoxMenu = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const Menu_js_1 = require("../Menu/Menu.js");
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
 const helpers_js_1 = require("./helpers.js");
+const List_js_1 = require("../List/List.js");
 const VirtualizedComboBoxMenu = (props) => {
     const { children, ...rest } = props;
     const { filteredOptions, getMenuItem, focusedIndex } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
@@ -58,12 +62,12 @@ const VirtualizedComboBoxMenu = (props) => {
         React.createElement("div", { ...innerProps, ref: innerProps.ref }, visibleChildren)));
 };
 exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-    const { children, style, ...rest } = props;
+    const { className, children, style, ...rest } = props;
     const { id, enableVirtualization, popover } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const { menuRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
     const refs = (0, index_js_1.useMergedRefs)(popover.refs.setFloating, forwardedRef, menuRef);
     return (popover.open && (React.createElement(index_js_1.Portal, { portal: true },
-        React.createElement(Menu_js_1.Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: refs, ...popover.getFloatingProps({
+        React.createElement(List_js_1.List, { as: 'div', className: (0, classnames_1.default)('iui-menu', className), id: `${id}-list`, role: 'listbox', ref: refs, ...popover.getFloatingProps({
                 style: !enableVirtualization
                     ? style
                     : {

package/cjs/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -107,7 +107,7 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -32,7 +32,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      */
     Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     } & {
         as?: "button" | undefined;

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -131,7 +131,7 @@ export declare const LabeledSelect: <T>(props: ({
      * Status of the select.
      * @default ''
      */
-    status?: "negative" | "positive" | "warning" | undefined;
+    status?: "positive" | "negative" | "warning" | undefined;
     /**
      * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
      *
@@ -173,7 +173,7 @@ export declare const LabeledSelect: <T>(props: ({
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
@@ -183,7 +183,7 @@ export declare const LabeledSelect: <T>(props: ({
 } & {
     disabled?: boolean | undefined;
     size?: "small" | "large" | undefined;
-    status?: "negative" | "positive" | "warning" | undefined;
+    status?: "positive" | "negative" | "warning" | undefined;
 } & {
     value?: string | null | undefined;
     onChange?: ((value: string, event: React.ChangeEvent<HTMLSelectElement>) => void) | undefined;
@@ -237,7 +237,7 @@ export declare const LabeledSelect: <T>(props: ({
      * Status of the select.
      * @default ''
      */
-    status?: "negative" | "positive" | "warning" | undefined;
+    status?: "positive" | "negative" | "warning" | undefined;
     /**
      * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
      *
@@ -279,7 +279,7 @@ export declare const LabeledSelect: <T>(props: ({
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
@@ -289,7 +289,7 @@ export declare const LabeledSelect: <T>(props: ({
 } & {
     disabled?: boolean | undefined;
     size?: "small" | "large" | undefined;
-    status?: "negative" | "positive" | "warning" | undefined;
+    status?: "positive" | "negative" | "warning" | undefined;
 } & {
     placeholder?: React.ReactNode;
     options: import("../Select/Select.js").SelectOption<T>[];
@@ -378,7 +378,7 @@ export declare const LabeledSelect: <T>(props: ({
      * Status of the select.
      * @default ''
      */
-    status?: "negative" | "positive" | "warning" | undefined;
+    status?: "positive" | "negative" | "warning" | undefined;
     /**
      * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
      *
@@ -420,7 +420,7 @@ export declare const LabeledSelect: <T>(props: ({
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
@@ -430,7 +430,7 @@ export declare const LabeledSelect: <T>(props: ({
 } & {
     disabled?: boolean | undefined;
     size?: "small" | "large" | undefined;
-    status?: "negative" | "positive" | "warning" | undefined;
+    status?: "positive" | "negative" | "warning" | undefined;
 } & {
     placeholder?: React.ReactNode;
     options: import("../Select/Select.js").SelectOption<T>[];

package/cjs/core/Menu/MenuItem.js

@@ -83,7 +83,12 @@ exports.MenuItem = React.forwardRef((props, forwardedRef) => {
     const popover = (0, Popover_js_1.usePopover)({
         nodeId,
         visible: isSubmenuVisible,
-        onVisibleChange: setIsSubmenuVisible,
+        onVisibleChange: React.useCallback((visible) => {
+            if (!visible) {
+                setHasFocusedNodeInSubmenu(false);
+            }
+            setIsSubmenuVisible(visible);
+        }, []),
         placement: 'right-start',
         interactions: !disabled
             ? {
@@ -128,7 +133,11 @@ exports.MenuItem = React.forwardRef((props, forwardedRef) => {
         }
     };
     const onFocus = () => {
-        parent.setHasFocusedNodeInSubmenu?.(true);
+        // Set hasFocusedNodeInSubmenu in a microtask to ensure the submenu stays open reliably.
+        // E.g. Even when hovering into it rapidly.
+        queueMicrotask(() => {
+            parent.setHasFocusedNodeInSubmenu?.(true);
+        });
         tree?.events.emit('onNodeFocused', {
             nodeId,
             parentId,

package/cjs/core/Popover/Popover.js

@@ -90,7 +90,10 @@ const usePopover = (options) => {
         (0, react_1.useHover)(floating.context, {
             enabled: !!mergedInteractions.hover,
             delay: 100,
-            handleClose: (0, react_1.safePolygon)({ buffer: 1, requireIntent: false }),
+            handleClose: (0, react_1.safePolygon)({
+                buffer: 1,
+                blockPointerEvents: true,
+            }),
             move: false,
             ...mergedInteractions.hover,
         }),

package/cjs/core/Select/Select.js

@@ -33,13 +33,14 @@ exports.Select = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Menu_js_1 = require("../Menu/Menu.js");
 const MenuItem_js_1 = require("../Menu/MenuItem.js");
 const index_js_1 = require("../../utils/index.js");
 const SelectTag_js_1 = require("./SelectTag.js");
 const SelectTagContainer_js_1 = require("./SelectTagContainer.js");
 const Icon_js_1 = require("../Icon/Icon.js");
 const Popover_js_1 = require("../Popover/Popover.js");
+const List_js_1 = require("../List/List.js");
+const react_1 = require("@floating-ui/react");
 // ----------------------------------------------------------------------------
 /**
  * Select component to select value from options.
@@ -216,6 +217,16 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
             ? options.filter((option) => value.some((val) => val === option.value))
             : options.find((option) => option.value === value);
     }, [multiple, options, value]);
+    const defaultFocusedIndex = React.useMemo(() => {
+        let index = 0;
+        if (Array.isArray(value) && value.length > 0) {
+            index = options.findIndex((option) => option.value === value[0]);
+        }
+        else if (value) {
+            index = options.findIndex((option) => option.value === value);
+        }
+        return index >= 0 ? index : 0;
+    }, [options, value]);
     const tagRenderer = React.useCallback((item) => {
         return React.createElement(SelectTag_js_1.SelectTag, { key: item.label, label: item.label });
     }, []);
@@ -236,7 +247,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
             React.createElement(SelectEndIcon, { disabled: disabled, isOpen: isOpen }),
             multiple ? (React.createElement(index_js_1.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
         popover.open && (React.createElement(index_js_1.Portal, null,
-            React.createElement(Menu_js_1.Menu, { role: 'listbox', className: menuClassName, id: `${uid}-menu`, key: `${uid}-menu`, ...popover.getFloatingProps({
+            React.createElement(SelectListbox, { defaultFocusedIndex: defaultFocusedIndex, className: menuClassName, id: `${uid}-menu`, key: `${uid}-menu`, ...popover.getFloatingProps({
                     style: menuStyle,
                     onKeyDown: ({ key }) => {
                         if (key === 'Tab') {
@@ -291,3 +302,18 @@ const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRendere
         selectedItems && !selectedItemsRenderer && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-content' },
             React.createElement(SelectTagContainer_js_1.SelectTagContainer, { tags: selectedItemsElements })))));
 };
+// ----------------------------------------------------------------------------
+const SelectListbox = React.forwardRef((props, forwardedRef) => {
+    const { defaultFocusedIndex = 0, autoFocus = true, children: childrenProp, className, ...rest } = props;
+    const [focusedIndex, setFocusedIndex] = React.useState(defaultFocusedIndex);
+    const autoFocusRef = React.useCallback((element) => {
+        queueMicrotask(() => {
+            const firstFocusable = element?.querySelector('[tabindex="0"]');
+            firstFocusable?.focus();
+        });
+    }, []);
+    const children = React.useMemo(() => {
+        return React.Children.map(childrenProp, (child, index) => React.isValidElement(child) ? (React.createElement(react_1.CompositeItem, { key: index, render: child, ref: child.props.ref || child.ref })) : (child));
+    }, [childrenProp]);
+    return (React.createElement(react_1.Composite, { render: React.createElement(List_js_1.List, { as: 'div', className: (0, classnames_1.default)('iui-menu', className) }), orientation: 'vertical', role: 'listbox', activeIndex: focusedIndex, onNavigate: setFocusedIndex, ref: (0, index_js_1.useMergedRefs)(forwardedRef, autoFocus ? autoFocusRef : undefined), ...rest }, children));
+});

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+export declare const SidenavExpandedContext: React.Context<boolean | undefined>;
 type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/cjs/core/SideNavigation/SideNavigation.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SideNavigation = void 0;
+exports.SideNavigation = exports.SidenavExpandedContext = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -35,7 +35,8 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
-const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+// ----------------------------------------------------------------------------
+exports.SidenavExpandedContext = React.createContext(undefined);
 /**
  * Left side navigation menu component.
  * @example
@@ -51,25 +52,23 @@ const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
  * />
  */
 exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": _isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    const [isExpanded, setIsExpanded] = (0, index_js_1.useControlledState)(false, isExpandedProp);
+    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
+            setIsExpanded((expanded) => !expanded);
             onExpanderClick?.();
-        }, [onExpanderClick]) },
+        }, [onExpanderClick, setIsExpanded]) },
         React.createElement(index_js_1.SvgChevronRight, null)));
-    return (React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-        React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }, className), ...rest },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
-                React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+    return (React.createElement(exports.SidenavExpandedContext.Provider, { value: isExpanded },
+        React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
+            React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
+                    'iui-expanded': isExpanded,
+                    'iui-collapsed': !isExpanded,
+                }, className), ...rest },
+                expanderPlacement === 'top' && ExpandButton,
+                React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
+                    React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items),
+                    React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems)),
+                expanderPlacement === 'bottom' && ExpandButton),
+            submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
 });

package/cjs/core/SideNavigation/SidenavButton.js

@@ -34,11 +34,15 @@ exports.SidenavButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Button_js_1 = require("../Buttons/Button.js");
+const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+const SideNavigation_js_1 = require("./SideNavigation.js");
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 exports.SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(Button_js_1.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));
+    const isExpanded = React.useContext(SideNavigation_js_1.SidenavExpandedContext) === true;
+    const sidenavButton = (React.createElement(Button_js_1.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));
+    return !isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
 });

package/cjs/core/Surface/Surface.js

@@ -52,7 +52,7 @@ const getSurfaceElevationValue = (elevation) => {
         case 5:
             return 'var(--iui-shadow-5)';
         default:
-            return '';
+            return undefined;
     }
 };
 /** Returns correct border value based on prop */
@@ -63,7 +63,7 @@ const getBorderValue = (border) => {
     if (border === false) {
         return 'none';
     }
-    return '';
+    return undefined;
 };
 // ----------------------------------------------------------------------------
 // Surface.Header component

package/cjs/core/Table/Table.js

@@ -110,13 +110,8 @@ const Table = (props) => {
         minWidth: 0,
         width: 0,
     }), []);
-    // useRef prevents from rerendering when one of these callbacks changes
-    const onBottomReachedRef = React.useRef(onBottomReached);
-    const onRowInViewportRef = React.useRef(onRowInViewport);
-    React.useEffect(() => {
-        onBottomReachedRef.current = onBottomReached;
-        onRowInViewportRef.current = onRowInViewport;
-    }, [onBottomReached, onRowInViewport]);
+    const onBottomReachedRef = (0, index_js_1.useLatestRef)(onBottomReached);
+    const onRowInViewportRef = (0, index_js_1.useLatestRef)(onRowInViewport);
     const hasManualSelectionColumn = React.useMemo(() => {
         const flatColumns = flattenColumns(columns);
         return flatColumns.some((column) => column.id === index_js_5.SELECTION_CELL_ID);
@@ -386,6 +381,8 @@ const Table = (props) => {
         enableVirtualization,
         tableRowRef,
         density,
+        onBottomReachedRef,
+        onRowInViewportRef,
     ]);
     const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

package/cjs/core/Tabs/Tabs.d.ts

@@ -269,7 +269,7 @@ export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;

package/cjs/core/Tile/Tile.d.ts

@@ -249,7 +249,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -262,6 +262,14 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
                 ancestorScroll?: boolean | undefined;
                 ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
+                /**
+                 * Flag whether the tile is disabled.
+                 *
+                 * Note: This only affects the tile. You need to manually disable
+                 * the buttons and other interactive elements inside the tile.
+                 *
+                 * @default false
+                 */
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;
             } | undefined;
@@ -288,6 +296,14 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
                 ancestorScroll?: boolean | undefined;
                 ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
+                /**
+                 * Flag whether the tile is disabled.
+                 *
+                 * Note: This only affects the tile. You need to manually disable
+                 * the buttons and other interactive elements inside the tile.
+                 *
+                 * @default false
+                 */
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;
             } | undefined;