@itwin/itwinui-react 1.18.0 → 1.19.0

package/esm/core/Footer/Footer.js

@@ -20,10 +20,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -66,7 +70,7 @@ export var Footer = function (props) {
         { title: titles.legalNotices, url: 'https://connect.bentley.com/Legal' },
     ];
     var elements = customElements
-        ? __spreadArray(__spreadArray([], defaultElements), customElements) : defaultElements;
+        ? __spreadArray(__spreadArray([], defaultElements, true), customElements, true) : defaultElements;
     return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
         React.createElement("ul", null,
             React.createElement("li", null,

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -20,10 +20,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -46,9 +50,9 @@ import '@itwin/itwinui-css/css/header.css';
 export var HeaderBreadcrumbs = function (props) {
     var items = props.items, rest = __rest(props, ["items"]);
     useTheme();
-    return (React.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous), [
+    return (React.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
         current,
         index !== items.length - 1 && (React.createElement(SvgChevronRight, { key: "chevron" + index, "aria-hidden": true, className: 'iui-chevron' })),
-    ]); }, [])));
+    ], false); }, [])));
 };
 export default HeaderBreadcrumbs;

package/esm/core/InputGroup/InputGroup.js

@@ -24,10 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import React from 'react';
 import { StatusIconMap } from '../utils/common';
 import { useTheme } from '../utils/hooks/useTheme';
+import { InputContainer } from '../utils/InputContainer';
 import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Group Checkbox/Radio components together
@@ -45,22 +45,10 @@ import '@itwin/itwinui-css/css/inputs.css';
  * </InputGroup>
  */
 export var InputGroup = function (props) {
-    var _a;
-    var children = props.children, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
+    var children = props.children, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
     useTheme();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement("div", __assign({ className: cx('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style }, rest),
-        label && (React.createElement("div", { className: cx('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        children,
-        (message || icon) && (React.createElement("div", { className: 'iui-message' },
-            icon,
-            displayStyle === 'default' && message))));
+    return (React.createElement(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? React.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
+        React.createElement("div", { className: 'iui-input-group' }, children)));
 };
 export default InputGroup;

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -15,7 +15,7 @@ export declare type LabeledInputProps = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Custom svg icon. If input has status, default status icon is used instead.
+     * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element;
     /**
@@ -27,10 +27,22 @@ export declare type LabeledInputProps = {
      */
     inputStyle?: React.CSSProperties;
     /**
-     * You can choose between default and inline.
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
     displayStyle?: 'default' | 'inline';
+    /**
+     * Set display style of icon.
+     * Supported values:
+     * - 'block' - icon appears below input.
+     * - 'inline' - icon appears inside input (at the end).
+     *
+     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
+     */
+    iconDisplayStyle?: 'block' | 'inline';
 } & InputProps;
 /**
  * Basic labeled input component
@@ -54,7 +66,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      */
     status?: "positive" | "warning" | "negative" | undefined;
     /**
-     * Custom svg icon. If input has status, default status icon is used instead.
+     * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element | undefined;
     /**
@@ -66,10 +78,22 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      */
     inputStyle?: React.CSSProperties | undefined;
     /**
-     * You can choose between default and inline.
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
     displayStyle?: "default" | "inline" | undefined;
+    /**
+     * Set display style of icon.
+     * Supported values:
+     * - 'block' - icon appears below input.
+     * - 'inline' - icon appears inside input (at the end).
+     *
+     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
+     */
+    iconDisplayStyle?: "inline" | "block" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;

package/esm/core/LabeledInput/LabeledInput.js

@@ -24,11 +24,11 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import React from 'react';
 import { Input } from '../Input/Input';
 import { StatusIconMap } from '../utils/common';
 import { useTheme } from '../utils/hooks/useTheme';
+import { InputContainer } from '../utils/InputContainer';
 import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Basic labeled input component
@@ -39,22 +39,10 @@ import '@itwin/itwinui-css/css/inputs.css';
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
 export var LabeledInput = React.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "style", "inputClassName", "inputStyle", "displayStyle", "required"]);
+    var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "style", "inputClassName", "inputStyle", "displayStyle", "iconDisplayStyle", "required"]);
     useTheme();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement("label", { className: cx('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style },
-        label && (React.createElement("div", { className: cx('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        React.createElement(Input, __assign({ disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref }, rest)),
-        (message || icon) && (React.createElement("div", { className: 'iui-message' },
-            icon,
-            displayStyle === 'default' && message))));
+    return (React.createElement(InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
+        React.createElement(Input, __assign({ disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref }, rest))));
 });
 export default LabeledInput;

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SelectProps } from '../Select/Select';
+import { LabeledInputProps } from '../LabeledInput';
 import '@itwin/itwinui-css/css/inputs.css';
 export declare type LabeledSelectProps<T> = {
     /**
@@ -7,7 +8,7 @@ export declare type LabeledSelectProps<T> = {
      */
     label?: React.ReactNode;
     /**
-     * Message below the select.
+     * Message below the select. Does not apply to 'inline' select.
      */
     message?: React.ReactNode;
     /**
@@ -16,7 +17,7 @@ export declare type LabeledSelectProps<T> = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Custom svg icon. If select has status, default status icon is used instead.
+     * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element;
     /**
@@ -27,17 +28,12 @@ export declare type LabeledSelectProps<T> = {
      * Custom CSS Style for the select element.
      */
     selectStyle?: React.CSSProperties;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: 'default' | 'inline';
     /**
      * If true, shows a red asterisk but does not prevent form submission.
      * @default false
      */
     required?: boolean;
-} & SelectProps<T>;
+} & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T>;
 /**
  * Labeled select component to select value from options.
  * @example

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -25,10 +25,10 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import cx from 'classnames';
 import { Select } from '../Select';
 import { StatusIconMap } from '../utils/common';
 import { useTheme } from '../utils/hooks/useTheme';
+import { InputContainer } from '../utils/InputContainer';
 import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Labeled select component to select value from options.
@@ -64,22 +64,12 @@ import '@itwin/itwinui-css/css/inputs.css';
  * />
  */
 export var LabeledSelect = function (props) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
+    var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
     useTheme();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement("div", { className: cx('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style },
-        label && (React.createElement("div", { className: cx('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        React.createElement(Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest)),
-        displayStyle === 'default' && (message || icon) && (React.createElement("div", { className: 'iui-message' },
-            icon,
-            message))));
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
+            ? React.cloneElement(icon, { 'aria-hidden': true })
+            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+        React.createElement(Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 export default LabeledSelect;

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TextareaProps } from '../Textarea/Textarea';
+import { LabeledInputProps } from '../LabeledInput';
 import '@itwin/itwinui-css/css/inputs.css';
 export declare type LabeledTextareaProps = {
     /**
@@ -7,7 +8,7 @@ export declare type LabeledTextareaProps = {
      */
     label: React.ReactNode;
     /**
-     * Message below the textarea.
+     * Message below the textarea. Does not apply to 'inline' textarea.
      */
     message?: React.ReactNode;
     /**
@@ -22,16 +23,7 @@ export declare type LabeledTextareaProps = {
      * Custom style for textarea.
      */
     textareaStyle?: React.CSSProperties;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: 'default' | 'inline';
-    /**
-     * Custom icon. If textarea has status, default status icon is used instead.
-     */
-    svgIcon?: JSX.Element;
-} & TextareaProps;
+} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle' | 'iconDisplayStyle'> & TextareaProps;
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -59,7 +51,7 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
      */
     label: React.ReactNode;
     /**
-     * Message below the textarea.
+     * Message below the textarea. Does not apply to 'inline' textarea.
      */
     message?: React.ReactNode;
     /**
@@ -74,18 +66,7 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
      * Custom style for textarea.
      */
     textareaStyle?: React.CSSProperties | undefined;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: "default" | "inline" | undefined;
-    /**
-     * Custom icon. If textarea has status, default status icon is used instead.
-     */
-    svgIcon?: JSX.Element | undefined;
-} & {
-    setFocus?: boolean | undefined; /**
-     * Label for the textarea.
-     */
+} & Pick<LabeledInputProps, "svgIcon" | "displayStyle" | "iconDisplayStyle"> & {
+    setFocus?: boolean | undefined;
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export default LabeledTextarea;

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -24,11 +24,11 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import React from 'react';
 import { StatusIconMap } from '../utils/common';
 import { Textarea } from '../Textarea';
 import { useTheme } from '../utils/hooks/useTheme';
+import { InputContainer } from '../utils/InputContainer';
 import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Textarea wrapper that allows for additional styling and labelling
@@ -52,22 +52,10 @@ import '@itwin/itwinui-css/css/inputs.css';
  * />
  */
 export var LabeledTextarea = React.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, style = props.style, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, message = props.message, status = props.status, textareaClassName = props.textareaClassName, textareaStyle = props.textareaStyle, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, svgIcon = props.svgIcon, _d = props.required, required = _d === void 0 ? false : _d, textareaProps = __rest(props, ["className", "style", "disabled", "label", "message", "status", "textareaClassName", "textareaStyle", "displayStyle", "svgIcon", "required"]);
+    var className = props.className, style = props.style, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, textareaClassName = props.textareaClassName, textareaStyle = props.textareaStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, svgIcon = props.svgIcon, _d = props.required, required = _d === void 0 ? false : _d, textareaProps = __rest(props, ["className", "style", "disabled", "label", "message", "status", "textareaClassName", "textareaStyle", "displayStyle", "iconDisplayStyle", "svgIcon", "required"]);
     useTheme();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement("label", { className: cx('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style },
-        label && (React.createElement("div", { className: cx('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        React.createElement(Textarea, __assign({ disabled: disabled, className: textareaClassName, style: textareaStyle, required: required }, textareaProps, { ref: ref })),
-        (message || icon) && (React.createElement("div", { className: 'iui-message' },
-            icon,
-            displayStyle === 'default' && message))));
+    return (React.createElement(InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
+        React.createElement(Textarea, __assign({ disabled: disabled, className: textareaClassName, style: textareaStyle, required: required }, textareaProps, { ref: ref }))));
 });
 export default LabeledTextarea;

package/esm/core/Radio/Radio.js

@@ -54,6 +54,6 @@ export var Radio = React.forwardRef(function (props, ref) {
         React.createElement("span", { className: cx('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
             React.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
                 React.createElement("circle", { cx: '8', cy: '8', r: '6' }))),
-        label && React.createElement("div", { className: 'iui-label' }, label)));
+        label && React.createElement("span", { className: 'iui-label' }, label)));
 });
 export default Radio;

package/esm/core/Slider/Slider.js

@@ -20,10 +20,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -134,7 +138,7 @@ export var Slider = React.forwardRef(function (props, ref) {
             var _a = getAllowableThumbRange(activeThumbIndex), minVal = _a[0], maxVal = _a[1];
             pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
             if (pointerValue !== currentValues[activeThumbIndex]) {
-                var newValues = __spreadArray([], currentValues);
+                var newValues = __spreadArray([], currentValues, true);
                 newValues[activeThumbIndex] = pointerValue;
                 setCurrentValues(newValues);
                 'onChange' === callbackType
@@ -165,7 +169,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         if (currentValues[index] === value) {
             return;
         }
-        var newValues = __spreadArray([], currentValues);
+        var newValues = __spreadArray([], currentValues, true);
         newValues[index] = value;
         setCurrentValues(newValues);
         onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
@@ -190,7 +194,7 @@ export var Slider = React.forwardRef(function (props, ref) {
             if (pointerValue === currentValues[closestValueIndex]) {
                 return;
             }
-            var newValues = __spreadArray([], currentValues);
+            var newValues = __spreadArray([], currentValues, true);
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues);

package/esm/core/Slider/Thumb.js

@@ -66,6 +66,6 @@ export var Thumb = function (props) {
     var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
     var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
-    return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, content: tooltipProps.content, placement: 'top' }, tooltipProps),
+    return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
         React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: leftPercent + "%" }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };

package/esm/core/Slider/Track.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -33,9 +37,9 @@ function generateSegments(values, min, max) {
  */
 export var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = React.useState(__spreadArray([], values).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = React.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
     React.useEffect(function () {
-        var newValues = __spreadArray([], values);
+        var newValues = __spreadArray([], values, true);
         newValues.sort(function (a, b) { return a - b; });
         setCurrentValues(newValues);
     }, [values]);

package/esm/core/Table/Table.js

@@ -134,11 +134,7 @@ export var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = useTable(__assign(__assign({}, props), { columns: columns,
-        defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes,
-        selectSubRows: selectSubRows,
-        data: data,
-        getSubRows: getSubRows }), useFlexLayout, useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled));
+    var instance = useTable(__assign(__assign({}, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows }), useFlexLayout, useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled));
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];

package/esm/core/Table/hooks/useExpanderCell.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -41,5 +45,5 @@ export var useExpanderCell = function (subComponent, expanderCell, isRowDisabled
                 }
             },
         }
-    ], columns); });
+    ], columns, true); });
 }; };

package/esm/core/Table/hooks/useSelectionCell.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -49,7 +53,7 @@ export var useSelectionCell = function (isSelectable, isRowDisabled) { return fu
                     React.createElement(Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original) }))));
             },
         }
-    ], columns); });
+    ], columns, true); });
     hooks.useInstanceBeforeDimensions.push(function (_a) {
         var headerGroups = _a.headerGroups;
         // Fix the parent group of the selection button to not be resizable

package/esm/core/Table/hooks/useSubRowFiltering.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -49,7 +53,7 @@ var useInstance = function (hasAnySubRows, instance) {
             });
         };
         setSubRows(instance.initialRows);
-        var currentlyFilteredRows = __spreadArray([], instance.initialRows);
+        var currentlyFilteredRows = __spreadArray([], instance.initialRows, true);
         instance.state.filters.forEach(function (_a) {
             var _b;
             var columnId = _a.id, filterValue = _a.value;

package/esm/core/Toast/Toast.d.ts

@@ -48,6 +48,14 @@ export declare type ToastProps = {
      * Function called when the toast is all the way closed.
      */
     onRemove?: () => void;
+    /**
+     * Element to which the toast will animate out to.
+     */
+    animateOutTo?: HTMLElement | null;
+    /**
+     * Parent toaster placement position for smoother animation.
+     */
+    placementPosition?: 'top' | 'bottom';
 };
 /**
  * Generic Toast Notification Component