@itwin/itwinui-react 1.18.0 → 1.19.0

package/cjs/core/Slider/Track.js

@@ -1,8 +1,12 @@
 "use strict";
-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));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -39,9 +43,9 @@ function generateSegments(values, min, max) {
  */
 var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = react_1.default.useState(__spreadArray([], values).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = react_1.default.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
     react_1.default.useEffect(function () {
-        var newValues = __spreadArray([], values);
+        var newValues = __spreadArray([], values, true);
         newValues.sort(function (a, b) { return a - b; });
         setCurrentValues(newValues);
     }, [values]);

package/cjs/core/Table/Table.js

@@ -91,7 +91,7 @@ var singleRowSelectedAction = 'singleRowSelected';
 var Table = function (props) {
     var _a;
     var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _h = react_1.default.useState(), ownerDocument = _h[0], setOwnerDocument = _h[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
@@ -111,20 +111,20 @@ var Table = function (props) {
                 onSort === null || onSort === void 0 ? void 0 : onSort(newState);
                 break;
             case react_table_1.actions.setFilter:
-                actionHandlers_1.onFilterHandler(newState, action, previousState, instance, onFilter);
+                (0, actionHandlers_1.onFilterHandler)(newState, action, previousState, instance, onFilter);
                 break;
             case react_table_1.actions.toggleRowExpanded:
             case react_table_1.actions.toggleAllRowsExpanded:
-                actionHandlers_1.onExpandHandler(newState, instance, onExpand);
+                (0, actionHandlers_1.onExpandHandler)(newState, instance, onExpand);
                 break;
             case singleRowSelectedAction: {
-                newState = selectHandler_1.onSingleSelectHandler(newState, action, instance, onSelect, isRowDisabled);
+                newState = (0, selectHandler_1.onSingleSelectHandler)(newState, action, instance, onSelect, isRowDisabled);
                 break;
             }
             case react_table_1.actions.toggleRowSelected:
             case react_table_1.actions.toggleAllRowsSelected:
             case react_table_1.actions.toggleAllPageRowsSelected: {
-                actionHandlers_1.onSelectHandler(newState, instance, onSelect, isRowDisabled);
+                (0, actionHandlers_1.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
                 break;
             }
             default:
@@ -140,11 +140,7 @@ var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = react_table_1.useTable(__assign(__assign({}, props), { columns: columns,
-        defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes,
-        selectSubRows: selectSubRows,
-        data: data,
-        getSubRows: getSubRows }), react_table_1.useFlexLayout, react_table_1.useFilters, hooks_1.useSubRowFiltering(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.useRowSelect, hooks_1.useSubRowSelection, hooks_1.useExpanderCell(subComponent, expanderCell, isRowDisabled), hooks_1.useSelectionCell(isSelectable, isRowDisabled));
+    var instance = (0, react_table_1.useTable)(__assign(__assign({}, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows }), react_table_1.useFlexLayout, react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.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];
@@ -170,7 +166,7 @@ var Table = function (props) {
         !isDisabled && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row));
     }, [dispatch, isSelectable, onRowClick, isRowDisabled]);
     return (react_1.default.createElement("div", __assign({ ref: function (element) { return setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument); }, id: id }, getTableProps({
-        className: classnames_1.default('iui-table', (_a = {}, _a["iui-" + density] = density !== 'default', _a), className),
+        className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-" + density] = density !== 'default', _a), className),
         style: style,
     }), ariaDataAttributes),
         react_1.default.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
@@ -178,7 +174,7 @@ var Table = function (props) {
                 className: 'iui-row',
             });
             return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column) {
-                var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: classnames_1.default('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, utils_1.getCellStyle(column)) }));
+                var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_1.getCellStyle)(column)) }));
                 return (react_1.default.createElement("div", __assign({}, columnProps, { key: columnProps.key, title: undefined }),
                     column.render('Header'),
                     !isLoading && (data.length != 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),

package/cjs/core/Table/TableCell.js

@@ -40,8 +40,8 @@ var TableCell = function (props) {
         };
     };
     var cellElementProps = cell.getCellProps({
-        className: classnames_1.default('iui-cell', cell.column.cellClassName),
-        style: __assign(__assign({}, utils_1.getCellStyle(cell.column)), getSubRowStyle()),
+        className: (0, classnames_1.default)('iui-cell', cell.column.cellClassName),
+        style: __assign(__assign({}, (0, utils_1.getCellStyle)(cell.column)), getSubRowStyle()),
     });
     var cellProps = __assign(__assign({}, tableInstance), { cell: cell, row: cell.row, value: cell.value, column: cell.column });
     var cellContent = (react_1.default.createElement(react_1.default.Fragment, null,

package/cjs/core/Table/TableRowMemoized.js

@@ -38,19 +38,19 @@ var TableRow = function (props) {
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
-    var rowRef = useIntersection_1.useIntersection(onIntersect, {
+    var rowRef = (0, useIntersection_1.useIntersection)(onIntersect, {
         rootMargin: intersectionMargin + "px",
     });
     var expandedHeight = react_1.default.useRef(0);
     var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
     var mergedProps = __assign(__assign(__assign({}, row.getRowProps()), userRowProps), {
-        className: classnames_1.default('iui-row', {
+        className: (0, classnames_1.default)('iui-row', {
             'iui-selected': row.isSelected,
             'iui-row-expanded': row.isExpanded && subComponent,
             'iui-disabled': isDisabled,
         }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
-    var refs = useMergedRefs_1.useMergedRefs(rowRef, mergedProps.ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(rowRef, mergedProps.ref);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
                 var _a;

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -63,7 +63,7 @@ var onSingleSelectHandler = function (state, action, instance, onSelect, isRowDi
     }
     var newState = __assign(__assign({}, state), { selectedRowIds: selectedRowIds });
     // Passing to `onSelectHandler` to handle filtered sub-rows
-    exports.onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    (0, exports.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
     return newState;
 };
 exports.onSingleSelectHandler = onSingleSelectHandler;

package/cjs/core/Table/filters/BaseFilter.js

@@ -28,8 +28,8 @@ var useTheme_1 = require("../../utils/hooks/useTheme");
  */
 var BaseFilter = function (props) {
     var children = props.children, className = props.className, style = props.style, id = props.id;
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("div", { className: classnames_1.default('iui-column-filter', className), style: style, onClick: function (e) {
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-column-filter', className), style: style, onClick: function (e) {
             e.stopPropagation();
         }, id: id }, children));
 };

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -47,7 +47,7 @@ var defaultParseInput = function (text) {
 var DateRangeFilter = function (props) {
     var _a, _b, _c, _d;
     var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter, _e = props.formatDate, formatDate = _e === void 0 ? defaultFormatDate : _e, _f = props.parseInput, parseInput = _f === void 0 ? defaultParseInput : _f, _g = props.placeholder, placeholder = _g === void 0 ? 'MMM dd, yyyy' : _g;
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _h = react_1.default.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined), from = _h[0], setFrom = _h[1];
     var _j = react_1.default.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined), to = _j[0], setTo = _j[1];

package/cjs/core/Table/filters/FilterButtonBar.js

@@ -36,8 +36,8 @@ var defaultStrings = {
 var FilterButtonBar = function (props) {
     var children = props.children, setFilter = props.setFilter, clearFilter = props.clearFilter, translatedLabels = props.translatedLabels, className = props.className, style = props.style, id = props.id;
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("div", { className: classnames_1.default('iui-button-bar', className), style: style, id: id },
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
         children,
         react_1.default.createElement(Buttons_1.Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
         react_1.default.createElement(Buttons_1.Button, { onClick: clearFilter }, translatedStrings.clear)));

package/cjs/core/Table/filters/FilterToggle.js

@@ -43,8 +43,8 @@ var Buttons_1 = require("../../Buttons");
  * Handles showing filter icon and opening filter component.
  */
 var FilterToggle = function (props) {
-    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? common_1.getDocument() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
-    useTheme_1.useTheme();
+    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? (0, common_1.getDocument)() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
+    (0, useTheme_1.useTheme)();
     var _b = react_1.default.useState(false), isVisible = _b[0], setIsVisible = _b[1];
     var close = react_1.default.useCallback(function () { return setIsVisible(false); }, []);
     var setFilter = react_1.default.useCallback(function (filterValue) {
@@ -56,7 +56,7 @@ var FilterToggle = function (props) {
         close();
     }, [close, column]);
     return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(Popover_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: classnames_1.default('iui-filter-button', className), onClick: function (e) {
+        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 e.stopPropagation();
                 setIsVisible(function (v) { return !v; });
             } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -32,7 +32,7 @@ var defaultStrings = {
 var NumberRangeFilter = function (props) {
     var _a, _b, _c, _d;
     var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter;
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _e = react_1.default.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''), from = _e[0], setFrom = _e[1];
     var _f = react_1.default.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : ''), to = _f[0], setTo = _f[1];

package/cjs/core/Table/filters/TextFilter/TextFilter.js

@@ -17,7 +17,7 @@ var BaseFilter_1 = require("../BaseFilter");
 var TextFilter = function (props) {
     var _a;
     var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter;
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _b = react_1.default.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : ''), text = _b[0], setText = _b[1];
     var onKeyDown = function (event) {
         if (event.key === 'Enter') {

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

@@ -1,8 +1,12 @@
 "use strict";
-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));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -47,6 +51,6 @@ var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { ret
                 }
             },
         }
-    ], columns); });
+    ], columns, true); });
 }; };
 exports.useExpanderCell = useExpanderCell;

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

@@ -10,10 +10,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));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -55,7 +59,7 @@ var useSelectionCell = function (isSelectable, isRowDisabled) { return function
                     react_1.default.createElement(Checkbox_1.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/cjs/core/Table/hooks/useSubRowFiltering.js

@@ -10,10 +10,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));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -56,7 +60,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/cjs/core/Tabs/Tab.js

@@ -44,8 +44,8 @@ require("@itwin/itwinui-css/css/tabs.css");
  */
 var Tab = function (props) {
     var label = props.label, sublabel = props.sublabel, startIcon = props.startIcon, children = props.children, className = props.className, rest = __rest(props, ["label", "sublabel", "startIcon", "children", "className"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("button", __assign({ className: classnames_1.default('iui-tab', className), role: 'tab', tabIndex: -1 }, rest),
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("button", __assign({ className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: -1 }, rest),
         startIcon &&
             react_1.default.cloneElement(startIcon, {
                 className: 'iui-tab-icon',

package/cjs/core/Tabs/Tabs.js

@@ -64,23 +64,23 @@ var common_1 = require("../utils/common");
  */
 var Tabs = function (props) {
     var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var tablistRef = react_1.default.useRef(null);
     var _e = react_1.default.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _e[0], setTabsWidth = _e[1];
     var updateTabsWidth = react_1.default.useCallback(function (_a) {
         var width = _a.width;
         return setTabsWidth(width);
     }, []);
-    var tablistSizeRef = useResizeObserver_1.useResizeObserver(updateTabsWidth)[0];
-    var refs = useMergedRefs_1.useMergedRefs(tablistRef, tablistSizeRef);
+    var tablistSizeRef = (0, useResizeObserver_1.useResizeObserver)(updateTabsWidth)[0];
+    var refs = (0, useMergedRefs_1.useMergedRefs)(tablistRef, tablistSizeRef);
     var _f = react_1.default.useState(function () {
         return activeIndex != null
-            ? common_1.getBoundedValue(activeIndex, 0, labels.length - 1)
+            ? (0, common_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
             : 0;
     }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
     react_1.default.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
-            setCurrentActiveIndex(common_1.getBoundedValue(activeIndex, 0, labels.length - 1));
+            setCurrentActiveIndex((0, common_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     var _g = react_1.default.useState({}), stripeStyle = _g[0], setStripeStyle = _g[1];
@@ -182,8 +182,8 @@ var Tabs = function (props) {
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: classnames_1.default('iui-tabs-wrapper', "iui-" + orientation) },
-        react_1.default.createElement("ul", __assign({ className: classnames_1.default('iui-tabs', "iui-" + type, {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-" + orientation) },
+        react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-" + type, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default',
                 'iui-large': hasSublabel,
@@ -192,10 +192,10 @@ var Tabs = function (props) {
                 setFocusedIndex(index);
                 onTabClick(index);
             };
-            return (react_1.default.createElement("li", { key: index }, !react_1.default.isValidElement(label) ? (react_1.default.createElement(Tab_1.Tab, { label: label, className: classnames_1.default({
+            return (react_1.default.createElement("li", { key: index }, !react_1.default.isValidElement(label) ? (react_1.default.createElement(Tab_1.Tab, { label: label, className: (0, classnames_1.default)({
                     'iui-active': index === currentActiveIndex,
                 }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (react_1.default.cloneElement(label, {
-                className: classnames_1.default(label.props.className, {
+                className: (0, classnames_1.default)(label.props.className, {
                     'iui-active': index === currentActiveIndex,
                 }),
                 'aria-selected': index === currentActiveIndex,
@@ -208,7 +208,7 @@ var Tabs = function (props) {
             }))));
         })),
         type !== 'default' && (react_1.default.createElement("div", { className: 'iui-tab-stripe', style: stripeStyle })),
-        children && (react_1.default.createElement("div", { className: classnames_1.default('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
+        children && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;
 /**

package/cjs/core/Tag/Tag.js

@@ -44,8 +44,8 @@ var Buttons_1 = require("../Buttons");
  */
 var Tag = function (props) {
     var className = props.className, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, onRemove = props.onRemove, rest = __rest(props, ["className", "variant", "children", "onRemove"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("span", __assign({ className: classnames_1.default('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
         react_1.default.createElement("span", { className: 'iui-label' }, children),
         onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag' },
             react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true })))));

package/cjs/core/Tag/TagContainer.js

@@ -43,8 +43,8 @@ require("@itwin/itwinui-css/css/tag.css");
 var TagContainer = function (props) {
     var _a;
     var className = props.className, children = props.children, overflow = props.overflow, _b = props.background, background = _b === void 0 ? 'none' : _b, rest = __rest(props, ["className", "children", "overflow", "background"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-tag-container', (_a = {},
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tag-container', (_a = {},
             _a["iui-" + overflow] = !!overflow,
             _a['iui-visible'] = background !== 'none',
             _a), className) }, rest), children));

package/cjs/core/Textarea/Textarea.js

@@ -43,14 +43,14 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.Textarea = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.rows, rows = _a === void 0 ? 3 : _a, _b = props.setFocus, setFocus = _b === void 0 ? false : _b, rest = __rest(props, ["className", "rows", "setFocus"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var textAreaRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(ref, textAreaRef);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, textAreaRef);
     react_1.default.useEffect(function () {
         if (textAreaRef.current && setFocus) {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("textarea", __assign({ className: classnames_1.default('iui-textarea', className), rows: rows, ref: refs }, rest)));
+    return (react_1.default.createElement("textarea", __assign({ className: (0, classnames_1.default)('iui-textarea', className), rows: rows, ref: refs }, rest)));
 });
 exports.default = exports.Textarea;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -15,7 +15,7 @@ var useTheme_1 = require("../utils/hooks/useTheme");
  */
 var ThemeProvider = function (props) {
     var theme = props.theme, children = props.children, themeOptions = props.themeOptions;
-    useTheme_1.useTheme(theme, themeOptions);
+    (0, useTheme_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 };
 exports.ThemeProvider = ThemeProvider;

package/cjs/core/Tile/Tile.js

@@ -58,16 +58,16 @@ var Buttons_1 = require("../Buttons");
  */
 var Tile = function (props) {
     var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _b = react_1.default.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
     var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
         react_1.default.createElement("div", { className: 'iui-thumbnail' },
             typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
                 className: 'iui-picture',
             })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
-                className: classnames_1.default('iui-thumbnail-icon', thumbnail.props.className),
+                className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
             })) : (thumbnail),
             leftIcon &&
                 react_1.default.cloneElement(leftIcon, {
@@ -80,8 +80,8 @@ var Tile = function (props) {
             badge && react_1.default.createElement("div", { className: 'iui-badge-container' }, badge)),
         react_1.default.createElement("div", { className: 'iui-content' },
             react_1.default.createElement("div", { className: 'iui-name' },
-                isSelected && (react_1.default.createElement(Checkmark_1.default, { className: classnames_1.default('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
-                isNew && (react_1.default.createElement(New_1.default, { className: classnames_1.default('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
+                isSelected && (react_1.default.createElement(Checkmark_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
+                isNew && (react_1.default.createElement(New_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
                 react_1.default.createElement("span", { className: 'iui-name-label' }, name)),
             description != undefined && (react_1.default.createElement("div", { className: 'iui-description' }, description)),
             metadata != undefined && (react_1.default.createElement("div", { className: 'iui-metadata' }, metadata)),
@@ -97,14 +97,14 @@ var Tile = function (props) {
                         });
                     });
                 } },
-                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: classnames_1.default('iui-more-options', {
+                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: (0, classnames_1.default)('iui-more-options', {
                         'iui-visible': isMenuVisible,
                     }), "aria-label": 'More options' },
                     react_1.default.createElement(More_1.default, null)))),
             children),
         buttons && (react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons.map(function (button) {
             return react_1.default.cloneElement(button, {
-                className: classnames_1.default('iui-tile-button', button.props.className),
+                className: (0, classnames_1.default)('iui-tile-button', button.props.className),
             });
         })))));
 };

package/cjs/core/TimePicker/TimePicker.js

@@ -72,7 +72,7 @@ var TimePicker = function (props) {
     } : _h, _j = props.secondRenderer, secondRenderer = _j === void 0 ? function (date) {
         return date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
     } : _j, _k = props.meridiemRenderer, meridiemRenderer = _k === void 0 ? function (meridiem) { return meridiem; } : _k, className = props.className, rest = __rest(props, ["date", "onChange", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "setFocusHour", "hourRenderer", "minuteRenderer", "secondRenderer", "meridiemRenderer", "className"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _l = react_1.default.useState(date), selectedTime = _l[0], setSelectedTime = _l[1];
     var _m = react_1.default.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date()), focusedTime = _m[0], setFocusedTime = _m[1];
     var _o = react_1.default.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined), meridiem = _o[0], setMeridiem = _o[1];
@@ -158,7 +158,7 @@ var TimePicker = function (props) {
             return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i);
         }, secondStep);
     }, [secondStep, selectedTime]);
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-time-picker', className) }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-time-picker', className) }, rest),
         react_1.default.createElement(TimePickerColumn, { data: hours, isSameFocused: function (val) {
                 return isSameHour(val, focusedTime, use12Hours ? meridiem : undefined);
             }, isSameSelected: function (val) {
@@ -213,7 +213,7 @@ var TimePickerColumn = function (props) {
             var isSameFocus = isSameFocused(value);
             return (react_1.default.createElement("li", { onKeyDown: function (event) {
                     handleTimeKeyDown(event, data.length - 1, function (index) { return onFocusChange(data[index]); }, function (index) { return onSelectChange(data[index]); }, index);
-                }, className: classnames_1.default({
+                }, className: (0, classnames_1.default)({
                     'iui-selected': isSameSelected(value),
                 }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: function (ref) {
                     scrollIntoView(ref, isSameFocus);

package/cjs/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