@itwin/itwinui-react 3.5.0 → 3.6.0

package/esm/core/Select/Select.d.ts

@@ -1,54 +1,193 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
-export type ItemRendererProps = {
+/**
+ * Select component to select value from options.
+ * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
+ * @example
+ * <caption>Basic select.</caption>
+ * <Select
+ *  options={[
+ *    { value: '1', label: 'Option 1' },
+ *    { value: '2', label: 'Option 2' },
+ *    { value: '3', label: 'Option 3' },
+ *  ]}
+ * />
+ * @example
+ * <caption>Native select.</caption>
+ * <Select
+ *  native
+ *  options={[
+ *    { value: '1', label: 'Option 1' },
+ *    { value: '2', label: 'Option 2' },
+ *    { value: '3', label: 'Option 3' },
+ *  ]}
+ * />
+ * @example
+ * <caption>Disabled select with placeholder.</caption>
+ * <Select
+ *   disabled={true}
+ *   placeholder='Placeholder text'
+ *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
+ * />
+ * @example
+ * <caption>Select with selected value and change handler.</caption>
+ * <Select
+ *   value={selectedValue}
+ *   onChange={(value) => setSelectedValue(value)}
+ *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
+ * />
+ * @example
+ * <caption>Select using custom renderers for menu items and selected value.</caption>
+ * <Select
+ *   options={[
+ *     { value: 'yellow', label: 'Yellow' },
+ *     { value: 'green', label: 'Green' },
+ *     { value: 'red', label: 'Red' },
+ *   ]}
+ *   value={selectedValue}
+ *   placeholder='Placeholder text'
+ *   itemRenderer={(option, itemProps) => (
+ *     <MenuItem
+ *       style={{ color: option.value }}
+ *       isSelected={itemProps.isSelected}
+ *       onClick={() => {
+ *         setSelectedValue(option.value);
+ *         itemProps.close();
+ *       }}
+ *       role='option'
+ *       ref={(el) => itemProps.isSelected && el?.scrollIntoView()}
+ *     >
+ *       {option.label}
+ *     </MenuItem>
+ *   )}
+ *   selectedItemRenderer={(option) => (
+ *     <span style={{ backgroundColor: option.value }}>{option.label}</span>
+ *   )}
+ * />
+ */
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) => JSX.Element;
+export type SelectProps<T> = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'placeholder' | 'value' | 'defaultValue'> & (({
     /**
-     * Close handler that closes the dropdown.
+     * If true, the native `<select>` element will be rendered.
+     *
+     * Extra props, such as `name` can be passed to the `<select>` using `triggerProps`.
+     *
+     * @default false
      */
-    close: () => void;
+    native: true;
+} & NativeSelectProps) | ({
+    native?: false;
+} & CustomSelectProps<T> & {
     /**
-     * Indicates whether an item is selected.
+     * styleType is only supported for `<Select native>`.
      */
-    isSelected: boolean;
-};
-export type SelectOption<T> = {
+    styleType?: never;
+}));
+type NativeSelectProps = SelectCommonProps & {
     /**
-     * Label of the item used in dropdown list and when selected.
+     * Selected option value.
+     *
+     * Must be a string, because it is passed as an attribute to the native <select>.
+     *
+     * Alternatively, pass `null` to reset the value.
      */
-    label: string;
+    value?: string | null;
     /**
-     * Sublabel of the item shown below the label.
+     * Callback invoked when the selected value changes.
      */
-    sublabel?: React.ReactNode;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLSelectElement>) => void;
     /**
-     * Modify height of the item.
-     * Use 'large' when any of the select options have `sublabel`.
+     * Array of options that populates the select menu.
      *
-     * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
+     * The `value` property of each option must be a string.
      */
-    size?: 'default' | 'large';
+    options: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
     /**
-     * Value of the item.
+     * Default value that is selected on initial render. This is useful when you don't want to
+     * maintain your own state but still want to control the initial value.
+     *
+     * If not passed, the first option (or placeholder) will be automatically selected.
      */
-    value: T;
+    defaultValue?: string;
     /**
-     * @deprecated Use startIcon
-     * SVG icon component shown on the left.
+     * Props to pass to the select element.
      */
-    icon?: JSX.Element;
+    triggerProps?: Omit<React.ComponentPropsWithRef<'select'>, 'size'>;
+    required?: boolean;
+    multiple?: never;
+} & NativeSelectStyleTypeProps;
+type NativeSelectStyleTypeProps = {
     /**
-     * SVG icon component shown on the left.
+     * Style of the select.
+     * Use 'borderless' to hide outline.
+     * @default 'default'
      */
-    startIcon?: JSX.Element;
+    styleType?: 'default';
     /**
-     * Item is disabled.
+     * Placeholder for when no item is selected.
+     *
+     * Will be rendered as a disabled option at the top of the list, and automatically
+     * selected when no `value` or `defaultValue` is provided.
+     *
+     * Not allowed when `styleType` is `borderless`.
+     */
+    placeholder?: string;
+} | {
+    styleType: 'borderless';
+    placeholder?: never;
+};
+type SelectCommonProps = {
+    /**
+     * Disables select.
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Any other props.
+     * Modify size of select.
      */
-    [key: string]: unknown;
-} & CommonProps;
+    size?: 'small' | 'large';
+    /**
+     * Status of select.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+};
+export type CustomSelectProps<T> = SelectCommonProps & {
+    /**
+     * Placeholder when no item is selected.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Array of options that populates the select menu.
+     */
+    options: SelectOption<T>[];
+    /**
+     * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
+     */
+    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
+    /**
+     * Custom class for menu.
+     */
+    menuClassName?: string;
+    /**
+     * Custom style for menu.
+     */
+    menuStyle?: React.CSSProperties;
+    /**
+     * Props to customize Popover behavior.
+     */
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
+    /**
+     * Props to pass to the select button (trigger) element.
+     */
+    triggerProps?: React.ComponentPropsWithRef<'div'>;
+} & SelectMultipleTypeProps<T> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 export type SelectValueChangeEvent = 'added' | 'removed';
 export type SelectMultipleTypeProps<T> = {
     /**
@@ -78,98 +217,52 @@ export type SelectMultipleTypeProps<T> = {
     value?: T[];
     onChange?: (value: T, event: SelectValueChangeEvent) => void;
 };
-export type SelectProps<T> = {
+export type ItemRendererProps = {
     /**
-     * Array of options that populates the select menu.
+     * Close handler that closes the dropdown.
      */
-    options: SelectOption<T>[];
+    close: () => void;
     /**
-     * Placeholder when no item is selected.
+     * Indicates whether an item is selected.
      */
-    placeholder?: React.ReactNode;
+    isSelected: boolean;
+};
+export type SelectOption<T> = {
     /**
-     * Disables select.
-     * @default false
+     * Label of the item used in dropdown list and when selected.
      */
-    disabled?: boolean;
+    label: string;
     /**
-     * Modify size of select.
+     * Sublabel of the item shown below the label.
      */
-    size?: 'small' | 'large';
+    sublabel?: React.ReactNode;
     /**
-     * Status of select.
+     * Modify height of the item.
+     * Use 'large' when any of the select options have `sublabel`.
+     *
+     * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
      */
-    status?: 'positive' | 'warning' | 'negative';
+    size?: 'default' | 'large';
     /**
-     * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
+     * Value of the item.
      */
-    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
+    value: T;
     /**
-     * Custom class for menu.
+     * @deprecated Use startIcon
+     * SVG icon component shown on the left.
      */
-    menuClassName?: string;
+    icon?: JSX.Element;
     /**
-     * Custom style for menu.
+     * SVG icon component shown on the left.
      */
-    menuStyle?: React.CSSProperties;
+    startIcon?: JSX.Element;
     /**
-     * Props to customize Popover behavior.
+     * Item is disabled.
      */
-    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
+    disabled?: boolean;
     /**
-     * Props to pass to the select button (trigger) element.
+     * Any other props.
      */
-    triggerProps?: React.ComponentPropsWithRef<'div'>;
-} & SelectMultipleTypeProps<T> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
-/**
- * Select component to select value from options.
- * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
- * @example
- * <caption>Basic select.</caption>
- * <Select<number> options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]} />
- * @example
- * <caption>Disabled select with placeholder.</caption>
- * <Select
- *   disabled={true}
- *   placeholder='Placeholder text'
- *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
- * />
- * @example
- * <caption>Select with selected value and change handler.</caption>
- * <Select<number>
- *   value={selectedValue}
- *   onChange={(value) => setSelectedValue(value)}
- *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
- * />
- * @example
- * <caption>Select using custom renderers for menu items and selected value.</caption>
- * <Select<string>
- *   options={[
- *     { value: 'yellow', label: 'Yellow' },
- *     { value: 'green', label: 'Green' },
- *     { value: 'red', label: 'Red' },
- *   ]}
- *   value={selectedValue}
- *   placeholder='Placeholder text'
- *   itemRenderer={(option, itemProps) => (
- *     <MenuItem
- *       style={{ color: option.value }}
- *       isSelected={itemProps.isSelected}
- *       onClick={() => {
- *         setSelectedValue(option.value);
- *         itemProps.close();
- *       }}
- *       role='option'
- *       ref={(el) => itemProps.isSelected && el?.scrollIntoView()}
- *     >
- *       {option.label}
- *     </MenuItem>
- *   )}
- *   selectedItemRenderer={(option) => (
- *     <span style={{ backgroundColor: option.value }}>{option.label}</span>
- *   )}
- * />
- */
-export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
-}) => JSX.Element;
+    [key: string]: unknown;
+} & CommonProps;
+export {};

package/esm/core/Select/Select.js

@@ -6,24 +6,34 @@ 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, } from '../utils/index.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';
-const isMultipleEnabled = (variable, multiple) => {
-    return multiple;
-};
-// Type guard for multiple did not work
-const isSingleOnChange = (onChange, multiple) => {
-    return !multiple;
-};
+// ----------------------------------------------------------------------------
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
  * @example
  * <caption>Basic select.</caption>
- * <Select<number> options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]} />
+ * <Select
+ *  options={[
+ *    { value: '1', label: 'Option 1' },
+ *    { value: '2', label: 'Option 2' },
+ *    { value: '3', label: 'Option 3' },
+ *  ]}
+ * />
+ * @example
+ * <caption>Native select.</caption>
+ * <Select
+ *  native
+ *  options={[
+ *    { value: '1', label: 'Option 1' },
+ *    { value: '2', label: 'Option 2' },
+ *    { value: '3', label: 'Option 3' },
+ *  ]}
+ * />
  * @example
  * <caption>Disabled select with placeholder.</caption>
  * <Select
@@ -33,14 +43,14 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  * @example
  * <caption>Select with selected value and change handler.</caption>
- * <Select<number>
+ * <Select
  *   value={selectedValue}
  *   onChange={(value) => setSelectedValue(value)}
  *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
  * />
  * @example
  * <caption>Select using custom renderers for menu items and selected value.</caption>
- * <Select<string>
+ * <Select
  *   options={[
  *     { value: 'yellow', label: 'Yellow' },
  *     { value: 'green', label: 'Green' },
@@ -68,6 +78,32 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 export const Select = React.forwardRef((props, forwardedRef) => {
+    const { native, ...rest } = props;
+    const Component = native ? NativeSelect : CustomSelect;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return React.createElement(Component, { ...rest, ref: forwardedRef });
+});
+// ----------------------------------------------------------------------------
+const NativeSelect = React.forwardRef((props, forwardedRef) => {
+    const { triggerProps, options, disabled, placeholder, defaultValue: defaultValueProp = placeholder !== undefined ? '' : undefined, value: valueProp, onChange: onChangeProp, size, status, styleType, required, ...rest } = props;
+    return (React.createElement(InputWithIcon, { ...rest, ref: forwardedRef },
+        React.createElement(SelectButton, { as: 'select', size: size, status: status, styleType: styleType, disabled: disabled, defaultValue: valueProp === undefined ? defaultValueProp : undefined, value: valueProp === null ? '' : valueProp, required: required, ...triggerProps, onKeyDown: mergeEventHandlers(triggerProps?.onKeyDown, (event) => {
+                // Firefox does not open the menu on Enter, so we need to do it manually.
+                if (event.key === 'Enter') {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    event.currentTarget.showPicker?.();
+                }
+            }), onChange: mergeEventHandlers(triggerProps?.onChange, (event) => {
+                onChangeProp?.(event.currentTarget.value, event);
+            }) },
+            styleType !== 'borderless' && placeholder !== undefined ? (React.createElement("option", { value: '', disabled: true }, placeholder)) : null,
+            options.map((option) => (React.createElement("option", { key: option.value, ...option }, option.label)))),
+        React.createElement(SelectEndIcon, { disabled: disabled })));
+});
+// ----------------------------------------------------------------------------
+const CustomSelect = React.forwardRef((props, forwardedRef) => {
     const uid = useId();
     const { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, ...rest } = props;
     const [isOpen, setIsOpen] = React.useState(false);
@@ -161,18 +197,13 @@ export const Select = React.forwardRef((props, forwardedRef) => {
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(InputWithIcon, { ...rest, ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef) },
-            React.createElement(Box, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', "data-iui-size": size, "data-iui-status": status, "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, ref: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx('iui-select-button', {
-                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) &&
-                        !!placeholder,
+            React.createElement(SelectButton, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', size: size, status: status, "aria-disabled": disabled ? 'true' : undefined, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, ref: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx({
+                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
                 }, triggerProps?.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement(Box, { as: 'span', className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer }))),
-            React.createElement(Icon, { as: 'span', "aria-hidden": true, className: cx('iui-end-icon', {
-                    'iui-disabled': disabled,
-                    'iui-open': isOpen,
-                }) },
-                React.createElement(SvgCaretDownSmall, null)),
+            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({
@@ -184,6 +215,27 @@ export const Select = React.forwardRef((props, forwardedRef) => {
                     },
                 }), ref: popover.refs.setFloating }, menuItems)))));
 });
+// ----------------------------------------------------------------------------
+// Type guards
+const isMultipleEnabled = (variable, multiple) => {
+    return multiple;
+};
+// Type guard for multiple did not work
+const isSingleOnChange = (onChange, multiple) => {
+    return !multiple;
+};
+// ----------------------------------------------------------------------------
+const SelectButton = React.forwardRef((props, forwardedRef) => {
+    const { size, status, styleType = 'default', ...rest } = props;
+    return (React.createElement(Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: cx('iui-select-button', props.className) }));
+});
+// ----------------------------------------------------------------------------
+const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
+    const { disabled, isOpen, ...rest } = props;
+    return (React.createElement(Icon, { "aria-hidden": true, ...rest, ref: forwardedRef, className: cx('iui-end-icon', { 'iui-disabled': disabled, 'iui-open': isOpen }, props.className) },
+        React.createElement(SvgCaretDownSmall, null)));
+});
+// ----------------------------------------------------------------------------
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
     const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
     return (React.createElement(React.Fragment, null,
@@ -194,6 +246,7 @@ const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
             startIcon && (React.createElement(Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
             React.createElement(Box, { as: 'span', className: 'iui-content' }, selectedItem.label)))));
 };
+// ----------------------------------------------------------------------------
 const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
     const selectedItemsElements = React.useMemo(() => {
         if (!selectedItems) {

package/esm/core/Table/Table.js

@@ -261,7 +261,8 @@ export const Table = (props) => {
     // This is to avoid the old columnOrder from affecting the new columns' columnOrder
     React.useEffect(() => {
         // Check if columns have changed (by value)
-        if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
+        if (lastPassedColumns.current.length > 0 &&
+            JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
             instance.setColumnOrder([]);
         }
         lastPassedColumns.current = columns;

package/esm/core/Tabs/Tabs.js

@@ -42,13 +42,14 @@ const TabList = React.forwardRef((props, ref) => {
         }, className), role: 'tablist', ref: refs, ...rest },
         React.createElement(TabListContext.Provider, { value: {
                 tabsWidth,
+                tablistRef,
             } }, children)));
 });
 TabList.displayName = 'Tabs.TabList';
 const Tab = React.forwardRef((props, forwardedRef) => {
     const { className, children, value, label, ...rest } = props;
     const { orientation, activeValue, setActiveValue, type, setStripeProperties, idPrefix, focusActivationMode, } = useSafeContext(TabsContext);
-    const { tabsWidth } = useSafeContext(TabListContext);
+    const { tabsWidth, tablistRef } = useSafeContext(TabListContext);
     const tabRef = React.useRef();
     const isActive = activeValue === value;
     const isActiveRef = useLatestRef(isActive);
@@ -65,13 +66,27 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     useLayoutEffect(() => {
         const updateStripe = () => {
             const currentTabRect = tabRef.current?.getBoundingClientRect();
+            const tabslistRect = tablistRef.current?.getBoundingClientRect();
+            // Using getBoundingClientRect() to get decimal granularity.
+            // Not using offsetLeft/offsetTop because they round to the nearest integer.
+            // Even minor inaccuracies in the stripe position can cause unexpected scroll/scrollbar.
+            // See: https://github.com/iTwin/iTwinUI/issues/1870
+            const tabsStripePosition = currentTabRect != null && tabslistRect != null
+                ? {
+                    horizontal: currentTabRect.x - tabslistRect.x,
+                    vertical: currentTabRect.y - tabslistRect.y,
+                }
+                : {
+                    horizontal: 0,
+                    vertical: 0,
+                };
             setStripeProperties({
                 '--iui-tabs-stripe-size': orientation === 'horizontal'
                     ? `${currentTabRect?.width}px`
                     : `${currentTabRect?.height}px`,
                 '--iui-tabs-stripe-position': orientation === 'horizontal'
-                    ? `${tabRef.current?.offsetLeft}px`
-                    : `${tabRef.current?.offsetTop}px`,
+                    ? `${tabsStripePosition.horizontal}px`
+                    : `${tabsStripePosition.vertical}px`,
             });
         };
         if (type !== 'default' && isActive) {
@@ -83,6 +98,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
         isActive,
         tabsWidth,
         setStripeProperties,
+        tablistRef,
     ]);
     const onKeyDown = (event) => {
         if (event.altKey) {

package/esm/core/Tile/Tile.d.ts

@@ -255,7 +255,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -284,7 +284,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/esm/core/utils/components/InputFlexContainer.d.ts

@@ -1,4 +1,6 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { IconProps } from '../../Icon/Icon.js';
+import type { IconButtonProps } from '../../Buttons/IconButton.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
@@ -9,3 +11,26 @@ export type InputFlexContainerProps = {
  * @private
  */
 export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerProps>;
+/**
+ * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
+ * @private
+ */
+export declare const InputFlexContainerButton: PolymorphicForwardRefComponent<"button", Omit<IconButtonProps, "styleType"> & {
+    /**
+     * Style of the button.
+     * Use 'borderless' to hide outline.
+     * @default 'borderless'
+     */
+    styleType?: IconButtonProps['styleType'];
+}>;
+/**
+ * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
+ * @private
+ */
+export declare const InputFlexContainerIcon: PolymorphicForwardRefComponent<"span", Omit<IconProps, "padded"> & {
+    /**
+     * Option to add padding to the icon.
+     * @default true
+     */
+    padded?: IconProps['padded'];
+}>;

package/esm/core/utils/components/InputFlexContainer.js

@@ -5,6 +5,8 @@
 import React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
+import { Icon } from '../../Icon/Icon.js';
+import { IconButton } from '../../Buttons/IconButton.js';
 /**
  * Utility component for input container with display flex abilities.
  * @private
@@ -13,3 +15,19 @@ export const InputFlexContainer = React.forwardRef((props, ref) => {
     const { isDisabled, status, children, className, size, style, ...rest } = props;
     return (React.createElement(Box, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "data-iui-size": size, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
 });
+/**
+ * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
+ * @private
+ */
+export const InputFlexContainerButton = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (React.createElement(IconButton, { ref: ref, className: cx('iui-input-flex-container-icon', className), styleType: 'borderless', ...rest }));
+});
+/**
+ * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
+ * @private
+ */
+export const InputFlexContainerIcon = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (React.createElement(Icon, { ref: ref, className: cx('iui-input-flex-container-icon', className), padded: true, ...rest }));
+});

package/esm/core/utils/components/LineClamp.d.ts

@@ -0,0 +1,5 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+/** @private */
+export declare const LineClamp: PolymorphicForwardRefComponent<"div", {
+    lines?: number | undefined;
+}>;