@itwin/itwinui-react 3.10.1 → 3.11.0

package/cjs/core/Tree/TreeNodeExpander.d.ts

@@ -1,7 +1,9 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton.js';
 type TreeNodeExpanderProps = {
     isExpanded?: boolean;
+    expanderIconProps?: React.ComponentProps<'svg'>;
 } & IconButtonProps;
 export declare const TreeNodeExpander: PolymorphicForwardRefComponent<"button", TreeNodeExpanderProps>;
 export {};

package/cjs/core/Tree/TreeNodeExpander.js

@@ -37,11 +37,11 @@ const index_js_1 = require("../../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
 const TreeContext_js_1 = require("./TreeContext.js");
 exports.TreeNodeExpander = React.forwardRef((props, ref) => {
-    const { isExpanded, ...rest } = props;
+    const { isExpanded, expanderIconProps = {}, ...rest } = props;
     const size = React.useContext(TreeContext_js_1.TreeContext)?.size ?? 'default';
     const ChevronIcon = size === 'small' ? index_js_1.SvgChevronRightSmall : index_js_1.SvgChevronRight;
     return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ref: ref, ...rest },
-        React.createElement(ChevronIcon, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
+        React.createElement(ChevronIcon, { ...expanderIconProps, className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', expanderIconProps?.className, {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 });

package/esm/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/esm/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/esm/core/Buttons/Button.js

@@ -5,6 +5,7 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box, ButtonBase } from '../../utils/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 /**
  * Generic button component
  * @example
@@ -15,12 +16,13 @@ import { Box, ButtonBase } from '../../utils/index.js';
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export const Button = React.forwardRef((props, ref) => {
-    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, ...rest } = props;
-    return (React.createElement(ButtonBase, { ref: ref, className: cx('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(ButtonBase, { ref: ref, className: cx('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(Box, { as: 'span', "aria-hidden": true, ...startIconProps, className: cx('iui-button-icon', startIconProps?.className) }, startIcon)),
-        children && React.createElement("span", { ...labelProps }, children),
-        endIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: cx('iui-button-icon', endIconProps?.className) }, endIcon))));
+        children && (React.createElement(Box, { as: 'span', ...labelProps, className: cx('iui-button-label', labelProps?.className) }, children)),
+        endIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: cx('iui-button-icon', endIconProps?.className) }, endIcon)),
+        loading && (React.createElement(ProgressRadial, { size: size === 'small' ? 'x-small' : 'small', className: 'iui-button-spinner', "aria-hidden": true }))));
 });

package/esm/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/esm/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/esm/core/ComboBox/ComboBoxInput.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, } from '../../utils/index.js';
+import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, useLatestRef, } from '../../utils/index.js';
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
@@ -13,10 +13,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     const dispatch = useSafeContext(ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
     const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
-    const focusedIndexRef = React.useRef(focusedIndex ?? -1);
-    React.useEffect(() => {
-        focusedIndexRef.current = focusedIndex ?? -1;
-    }, [focusedIndex]);
+    const focusedIndexRef = useLatestRef(focusedIndex ?? -1);
     const getIdFromIndex = (index) => {
         return (menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '');
     };
@@ -114,6 +111,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     }, [
         dispatch,
         enableVirtualization,
+        focusedIndexRef,
         isOpen,
         menuRef,
         onClickHandler,

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -3,9 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import cx from 'classnames';
 import { Menu } from '../Menu/Menu.js';
 import { useSafeContext, useMergedRefs, useVirtualization, Portal, Box, } from '../../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
+import { List } from '../List/List.js';
 const VirtualizedComboBoxMenu = (props) => {
     const { children, ...rest } = props;
     const { filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);
@@ -32,12 +34,12 @@ const VirtualizedComboBoxMenu = (props) => {
         React.createElement("div", { ...innerProps, ref: innerProps.ref }, visibleChildren)));
 };
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-    const { children, style, ...rest } = props;
+    const { className, children, style, ...rest } = props;
     const { id, enableVirtualization, popover } = useSafeContext(ComboBoxStateContext);
     const { menuRef } = useSafeContext(ComboBoxRefsContext);
     const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
     return (popover.open && (React.createElement(Portal, { portal: true },
-        React.createElement(Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: refs, ...popover.getFloatingProps({
+        React.createElement(List, { as: 'div', className: cx('iui-menu', className), id: `${id}-list`, role: 'listbox', ref: refs, ...popover.getFloatingProps({
                 style: !enableVirtualization
                     ? style
                     : {

package/esm/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/esm/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/esm/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/esm/core/Select/Select.js

@@ -4,13 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Menu } from '../Menu/Menu.js';
 import { MenuItem } from '../Menu/MenuItem.js';
 import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, InputWithIcon, mergeEventHandlers, } from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
 import { SelectTagContainer } from './SelectTagContainer.js';
 import { Icon } from '../Icon/Icon.js';
 import { usePopover } from '../Popover/Popover.js';
+import { List } from '../List/List.js';
+import { Composite, CompositeItem } from '@floating-ui/react';
 // ----------------------------------------------------------------------------
 /**
  * Select component to select value from options.
@@ -187,6 +188,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, { key: item.label, label: item.label });
     }, []);
@@ -207,7 +218,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
             React.createElement(SelectEndIcon, { disabled: disabled, isOpen: isOpen }),
             multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
         popover.open && (React.createElement(Portal, null,
-            React.createElement(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') {
@@ -262,3 +273,18 @@ const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRendere
         selectedItems && !selectedItemsRenderer && (React.createElement(Box, { as: 'span', className: 'iui-content' },
             React.createElement(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(CompositeItem, { key: index, render: child, ref: child.props.ref || child.ref })) : (child));
+    }, [childrenProp]);
+    return (React.createElement(Composite, { render: React.createElement(List, { as: 'div', className: cx('iui-menu', className) }), orientation: 'vertical', role: 'listbox', activeIndex: focusedIndex, onNavigate: setFocusedIndex, ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : undefined), ...rest }, children));
+});

package/esm/core/Surface/Surface.js

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

package/esm/core/Table/Table.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, } from '../../utils/index.js';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, useLatestRef, } from '../../utils/index.js';
 import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle, } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -81,13 +81,8 @@ export 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 = useLatestRef(onBottomReached);
+    const onRowInViewportRef = useLatestRef(onRowInViewport);
     const hasManualSelectionColumn = React.useMemo(() => {
         const flatColumns = flattenColumns(columns);
         return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
@@ -357,6 +352,8 @@ export const Table = (props) => {
         enableVirtualization,
         tableRowRef,
         density,
+        onBottomReachedRef,
+        onRowInViewportRef,
     ]);
     const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

package/esm/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/esm/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;

package/esm/core/Tooltip/Tooltip.js

@@ -6,10 +6,22 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useInteractions, safePolygon, size, autoPlacement, hide, inline, useDelayGroupContext, useDelayGroup, } from '@floating-ui/react';
 import { Box, Portal, cloneElementWithRef, useControlledState, useId, useMergedRefs, } from '../../utils/index.js';
+// ----------------------------------------------------------------------------
 const useTooltip = (options = {}) => {
     const uniqueId = useId();
     const { placement = 'top', visible, onVisibleChange, middleware = { flip: true, shift: true }, autoUpdateOptions = {}, reference, ariaStrategy = 'description', id = uniqueId, ...props } = options;
     const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
+    const syncWithControlledState = React.useCallback((element) => {
+        // Using a microtask ensures that the popover is mounted before calling togglePopover
+        queueMicrotask(() => {
+            try {
+                element?.togglePopover?.(open);
+            }
+            catch {
+                // Fail silently, to avoid crashing the page
+            }
+        });
+    }, [open]);
     const floating = useFloating({
         placement,
         open,
@@ -92,19 +104,29 @@ const useTooltip = (options = {}) => {
     const getReferenceProps = React.useCallback((userProps) => {
         return interactions.getReferenceProps({ ...userProps, ...ariaProps });
     }, [interactions, ariaProps]);
-    const floatingProps = React.useMemo(() => interactions.getFloatingProps({
-        hidden: !open,
-        'aria-hidden': 'true',
-        ...props,
-        id,
+    const floatingProps = React.useMemo(() => ({
+        ...interactions.getFloatingProps({
+            hidden: !open,
+            'aria-hidden': 'true',
+            ...props,
+            id,
+        }),
+        popover: 'manual',
     }), [interactions, props, id, open]);
     return React.useMemo(() => ({
         getReferenceProps,
         floatingProps,
         ...floating,
+        refs: {
+            ...floating.refs,
+            setFloating: (element) => {
+                floating.refs.setFloating(element);
+                syncWithControlledState(element);
+            },
+        },
         // styles are not relevant when tooltip is not open
         floatingStyles: floating.context.open ? floating.floatingStyles : {},
-    }), [getReferenceProps, floatingProps, floating]);
+    }), [getReferenceProps, floatingProps, floating, syncWithControlledState]);
 };
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.

package/esm/core/Tree/TreeNode.d.ts

@@ -1,28 +1,53 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
+import { TreeNodeExpander } from './TreeNodeExpander.js';
 type TreeNodeProps = {
     /**
      * Unique id of the node.
      * It has to be compatible with HTML id attribute.
      */
     nodeId: string;
+    /**
+     * Props for treeNode
+     */
+    nodeProps?: React.ComponentProps<'div'>;
     /**
      * The main text displayed on the node.
      */
     label: React.ReactNode;
+    /**
+     * Props for TreeNode label(affects both the main and sub label).
+     */
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Props for the TreeNode's main label.
+     */
+    titleProps?: React.ComponentProps<'div'>;
     /**
      * Small note displayed below main label.
      */
     sublabel?: React.ReactNode;
+    /**
+     * Props for TreeNode sublabel
+     */
+    sublabelProps?: React.ComponentProps<'div'>;
     /**
      * Icon shown before label and sublabel content.
      */
     icon?: JSX.Element;
+    /**
+     * Props for TreeNode Icon
+     */
+    iconProps?: React.ComponentProps<'span'>;
     /**
      * Flag whether the node has child sub-nodes. It is used to show expander icon.
      * @default false
      */
     hasSubNodes?: boolean;
+    /**
+     * Props for subTree list(affects all subnodes of this node).
+     */
+    subTreeProps?: React.ComponentProps<'ul'>;
     /**
      * Flag whether the node is disabled.
      * @default false
@@ -54,10 +79,24 @@ type TreeNodeProps = {
      * Recommended to use `Checkbox` component.
      */
     checkbox?: React.ReactNode;
+    /**
+     * Props for TreeNode checkbox.
+     */
+    checkboxProps?: React.ComponentProps<'div'>;
     /**
      * Custom expander element. If `hasSubNodes` is false, it won't be shown.
      */
     expander?: React.ReactNode;
+    /**
+     * Props for the default TreeNodeExpander that is shown when there are sub nodes and no expander is given.
+     */
+    expanderProps?: React.ComponentProps<typeof TreeNodeExpander>;
+    /**
+     * Props for content of the TreeNode.
+     * This affects all passed in children of the node, as well as the label, sublabel, icon, and expander.
+     * Note that this does not affect the checkbox.
+     */
+    contentProps?: React.ComponentProps<'div'>;
     /**
      * Content shown after `TreeNode`.
      */

package/esm/core/Tree/TreeNode.js

@@ -27,7 +27,7 @@ import { useTreeContext } from './TreeContext.js';
   />
  */
 export const TreeNode = (props) => {
-    const { nodeId, label, sublabel, children, className, icon, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, expander, ...rest } = props;
+    const { nodeId, nodeProps = {}, label, labelProps = {}, sublabel, sublabelProps = {}, children, className, icon, iconProps = {}, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, checkboxProps = {}, subTreeProps = {}, contentProps = {}, titleProps = {}, expanderProps = {}, expander, ...rest } = props;
     const { nodeDepth, subNodeIds = [], parentNodeId, scrollToParent, groupSize, indexInGroup, } = useTreeContext();
     const [isFocused, setIsFocused] = React.useState(false);
     const nodeRef = React.useRef(null);
@@ -107,22 +107,22 @@ export const TreeNode = (props) => {
         }, onBlur: () => {
             setIsFocused(false);
         }, ref: nodeRef, onKeyDown: onKeyDown, ...rest },
-        React.createElement(Box, { className: cx('iui-tree-node', {
+        React.createElement(Box, { as: 'div', style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected), ...nodeProps, className: cx('iui-tree-node', {
                 'iui-active': isSelected,
                 'iui-disabled': isDisabled,
-            }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected) },
-            checkbox && (React.createElement(Box, { className: 'iui-tree-node-checkbox' }, React.isValidElement(checkbox)
+            }, nodeProps?.className) },
+            checkbox && (React.createElement(Box, { as: 'div', ...checkboxProps, className: cx('iui-tree-node-checkbox', checkboxProps?.className) }, React.isValidElement(checkbox)
                 ? React.cloneElement(checkbox, {
                     tabIndex: isFocused ? 0 : -1,
                 })
                 : checkbox)),
-            React.createElement(Box, { className: 'iui-tree-node-content' },
+            React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-tree-node-content', contentProps?.className) },
                 hasSubNodes && expander,
-                hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
-                icon && (React.createElement(Box, { as: 'span', className: 'iui-tree-node-content-icon', "aria-hidden": true }, icon)),
-                React.createElement(Box, { className: 'iui-tree-node-content-label' },
-                    React.createElement(Box, { className: 'iui-tree-node-content-title' }, label),
-                    sublabel && (React.createElement(Box, { className: 'iui-tree-node-content-caption' }, sublabel))),
+                hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1, ...expanderProps })),
+                icon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...iconProps, className: cx('iui-tree-node-content-icon', iconProps?.className) }, icon)),
+                React.createElement(Box, { as: 'div', ...labelProps, className: cx('iui-tree-node-content-label', labelProps?.className) },
+                    React.createElement(Box, { as: 'div', ...titleProps, className: cx('iui-tree-node-content-title', titleProps?.className) }, label),
+                    sublabel && (React.createElement(Box, { as: 'div', ...sublabelProps, className: cx('iui-tree-node-content-caption', sublabelProps?.className) }, sublabel))),
                 children)),
-        hasSubNodes && (React.createElement(Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(' ') }))));
+        hasSubNodes && (React.createElement(Box, { as: 'ul', role: 'group', "aria-owns": subNodeIds.join(' '), ...subTreeProps, className: cx('iui-sub-tree', subTreeProps?.className) }))));
 };