@itwin/itwinui-react 3.10.1 → 3.11.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 3.11.1
+
+### Patch Changes
+
+- [#2074](https://github.com/iTwin/iTwinUI/pull/2074): Fixed indentation of `Tree` nodes to be aligned regardless of the presence of expander button.
+- [#2064](https://github.com/iTwin/iTwinUI/pull/2064): Adjusted `Dialog` and `ExpandableBlock` to round some CSS `transform` values. This helps avoid blurry text on Windows in some cases.
+- [#2055](https://github.com/iTwin/iTwinUI/pull/2055): Fixed an issue in `Breadcrumbs.Item` where using a custom link component (e.g. `as={Link}` for client side routing) would break the CSS styling.
+- [#2071](https://github.com/iTwin/iTwinUI/pull/2071): Fixed a minor issue in `ComboBox` where a `label` attribute was accidentally being added to options in the DOM.
+- [#2068](https://github.com/iTwin/iTwinUI/pull/2068): Fixed `EditableCell` so that it correctly merges `className` and `style` props with the corresponding internal props.
+- [#2073](https://github.com/iTwin/iTwinUI/pull/2073): Fixed CommonJS types exports for the `/react-table` entrypoint.
+- [#2055](https://github.com/iTwin/iTwinUI/pull/2055): Fixed a regression from `v3.10.0` where non-button and non-link `Breadcrumbs.Item`s were getting a hover styling as if it were a button.
+
+## 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

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/Breadcrumbs/Breadcrumbs.js

@@ -102,9 +102,19 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(index_js_1.SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children, className, ...rest } = props;
-    const defaultAs = !!props.href ? Anchor_js_1.Anchor : !!props.onClick ? 'button' : 'span';
-    return (React.createElement(Button_js_1.Button, { as: defaultAs, className: (0, classnames_1.default)('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
+    const { as: asProp, ...rest } = props;
+    const commonProps = {
+        ...rest,
+        className: (0, classnames_1.default)('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef,
+    };
+    if (String(asProp) === 'span' ||
+        (props.href == null && props.onClick == null && asProp == null)) {
+        return React.createElement(index_js_1.Box, { as: 'span', ...commonProps });
+    }
+    return (React.createElement(Button_js_1.Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
+            ? Anchor_js_1.Anchor
+            : asProp), styleType: 'borderless', ...commonProps }));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------

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/ComboBox.js

@@ -264,7 +264,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
-        const { icon, startIcon: startIconProp, ...restOptions } = option;
+        const { icon, startIcon: startIconProp, label, ...restOptions } = option;
         const startIcon = startIconProp ?? icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
@@ -291,7 +291,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
             }),
         })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
-            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
+            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, label));
     }, [
         enableVirtualization,
         focusedIndex,

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/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/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/Table/cells/EditableCell.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.EditableCell = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -30,6 +33,7 @@ exports.EditableCell = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -41,7 +45,7 @@ const index_js_1 = require("../../../utils/index.js");
  * }
  */
 const EditableCell = (props) => {
-    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
     isDisabled; // To omit and prevent eslint error.
     const sanitizeString = (text) => {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
@@ -52,7 +56,7 @@ const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState((0, index_js_1.getRandomValue)(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
+    return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), style: { ...cellElementStyle, ...style }, onInput: (e) => {
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
             props.onInput?.(e);

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;

package/cjs/core/Tooltip/Tooltip.js

@@ -35,10 +35,22 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("@floating-ui/react");
 const index_js_1 = require("../../utils/index.js");
+// ----------------------------------------------------------------------------
 const useTooltip = (options = {}) => {
     const uniqueId = (0, index_js_1.useId)();
     const { placement = 'top', visible, onVisibleChange, middleware = { flip: true, shift: true }, autoUpdateOptions = {}, reference, ariaStrategy = 'description', id = uniqueId, ...props } = options;
     const [open, onOpenChange] = (0, index_js_1.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 = (0, react_1.useFloating)({
         placement,
         open,
@@ -121,19 +133,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.