@itwin/itwinui-react 3.4.2 → 3.6.0

package/cjs/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> = {
     /**
@@ -64,8 +203,10 @@ export type SelectMultipleTypeProps<T> = {
     /**
      * Selected option value.
      * If `multiple` is enabled, it is an array of values.
+     *
+     * Pass `null` to reset the value.
      */
-    value?: T;
+    value?: T | null;
     /**
      * Callback function handling change event on select.
      */
@@ -76,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/cjs/core/Select/Select.js

@@ -40,19 +40,29 @@ 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 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
@@ -62,14 +72,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' },
@@ -97,12 +107,38 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 exports.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(index_js_1.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: (0, index_js_1.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: (0, index_js_1.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 = (0, index_js_1.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);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const [uncontrolledValue, setUncontrolledValue] = React.useState();
-    const value = valueProp ?? uncontrolledValue;
+    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
     const onChangeRef = (0, index_js_1.useLatestRef)(onChangeProp);
     const selectRef = React.useRef(null);
     const show = React.useCallback(() => {
@@ -190,18 +226,13 @@ exports.Select = React.forwardRef((props, forwardedRef) => {
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(index_js_1.InputWithIcon, { ...rest, ref: (0, index_js_1.useMergedRefs)(popover.refs.setPositionReference, forwardedRef) },
-            React.createElement(index_js_1.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: (0, index_js_1.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference), className: (0, classnames_1.default)('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: (0, index_js_1.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference), className: (0, classnames_1.default)({
+                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
                 }, triggerProps?.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement(index_js_1.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_js_1.Icon, { as: 'span', "aria-hidden": true, className: (0, classnames_1.default)('iui-end-icon', {
-                    'iui-disabled': disabled,
-                    'iui-open': isOpen,
-                }) },
-                React.createElement(index_js_1.SvgCaretDownSmall, null)),
+            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({
@@ -213,6 +244,27 @@ exports.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(index_js_1.Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-select-button', props.className) }));
+});
+// ----------------------------------------------------------------------------
+const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
+    const { disabled, isOpen, ...rest } = props;
+    return (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-end-icon', { 'iui-disabled': disabled, 'iui-open': isOpen }, props.className) },
+        React.createElement(index_js_1.SvgCaretDownSmall, null)));
+});
+// ----------------------------------------------------------------------------
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
     const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
     return (React.createElement(React.Fragment, null,
@@ -223,6 +275,7 @@ const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
             startIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
             React.createElement(index_js_1.Box, { as: 'span', className: 'iui-content' }, selectedItem.label)))));
 };
+// ----------------------------------------------------------------------------
 const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
     const selectedItemsElements = React.useMemo(() => {
         if (!selectedItems) {

package/cjs/core/Table/Table.js

@@ -290,7 +290,8 @@ 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/cjs/core/Tabs/Tabs.js

@@ -71,13 +71,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, } = (0, index_js_1.useSafeContext)(TabsContext);
-    const { tabsWidth } = (0, index_js_1.useSafeContext)(TabListContext);
+    const { tabsWidth, tablistRef } = (0, index_js_1.useSafeContext)(TabListContext);
     const tabRef = React.useRef();
     const isActive = activeValue === value;
     const isActiveRef = (0, index_js_1.useLatestRef)(isActive);
@@ -94,13 +95,27 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     (0, index_js_1.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) {
@@ -112,6 +127,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
         isActive,
         tabsWidth,
         setStripeProperties,
+        tablistRef,
     ]);
     const onKeyDown = (event) => {
         if (event.altKey) {

package/cjs/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/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -17,9 +17,11 @@ type ToggleSwitchProps = {
      */
     size?: 'default';
     /**
-     * Icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     * Custom icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     *
+     * Will override the default checkmark icon.
      */
-    icon?: JSX.Element;
+    icon?: JSX.Element | null;
 } | {
     size: 'small';
     icon?: never;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -53,21 +53,15 @@ const index_js_1 = require("../utils/index.js");
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 exports.ToggleSwitch = React.forwardRef((props, ref) => {
-    let icon;
-    if (props.size !== 'small') {
-        icon = props.icon;
-        props = { ...props };
-        delete props.icon;
-    }
-    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', icon: iconProp, ...rest } = props;
+    // Disallow custom icon for small size, but keep the default checkmark when prop is not passed.
+    const shouldShowIcon = iconProp === undefined || (iconProp !== null && size !== 'small');
     return (React.createElement(index_js_1.Box, { as: label ? 'label' : 'div', className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
             'iui-disabled': disabled,
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',
         }, className), "data-iui-size": size, style: style },
-        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
-        icon && size !== 'small' && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
+        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: ref, ...rest }),
+        shouldShowIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, iconProp || React.createElement(index_js_1.SvgCheckmark, null))),
         label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });