@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

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

@@ -1,59 +1,54 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyColumns = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_table_1 = require("react-table");
+const react_table_1 = require("react-table");
 react_table_1.actions.setScrolledLeft = 'setScrolledLeft';
 react_table_1.actions.setScrolledRight = 'setScrolledRight';
-var useStickyColumns = function (hooks) {
+const useStickyColumns = (hooks) => {
     hooks.stateReducers.push(reducer);
     hooks.useInstance.push(useInstance);
 };
 exports.useStickyColumns = useStickyColumns;
-var reducer = function (newState, action) {
+const reducer = (newState, action) => {
     var _a, _b;
     if (action.type === react_table_1.actions.init) {
-        return __assign(__assign({}, newState), { sticky: {} });
+        return {
+            ...newState,
+            sticky: {},
+        };
     }
     if (action.type === react_table_1.actions.setScrolledLeft &&
         ((_a = newState.sticky) === null || _a === void 0 ? void 0 : _a.isScrolledToLeft) !== action.value // Prevents unnecessary re-render
     ) {
-        return __assign(__assign({}, newState), { sticky: __assign(__assign({}, newState.sticky), { isScrolledToLeft: action.value }) });
+        return {
+            ...newState,
+            sticky: {
+                ...newState.sticky,
+                isScrolledToLeft: action.value,
+            },
+        };
     }
     if (action.type === react_table_1.actions.setScrolledRight &&
         ((_b = newState.sticky) === null || _b === void 0 ? void 0 : _b.isScrolledToRight) !== action.value // Prevents unnecessary re-render
     ) {
-        return __assign(__assign({}, newState), { sticky: __assign(__assign({}, newState.sticky), { isScrolledToRight: action.value }) });
+        return {
+            ...newState,
+            sticky: {
+                ...newState.sticky,
+                isScrolledToRight: action.value,
+            },
+        };
     }
     return newState;
 };
-var useInstance = function (instance) {
-    var flatHeaders = instance.flatHeaders;
+const useInstance = (instance) => {
+    const { flatHeaders } = instance;
     // Edge case. Saving original sticky state in case sticky columns are reordered.
-    flatHeaders.forEach(function (header) {
+    flatHeaders.forEach((header) => {
         var _a;
         if (!header.originalSticky) {
             header.originalSticky = (_a = header.sticky) !== null && _a !== void 0 ? _a : 'none';
@@ -62,8 +57,8 @@ var useInstance = function (instance) {
             header.originalSticky === 'none' ? undefined : header.originalSticky;
     });
     // If there is a column that is sticked to the left, make every column prior to that sticky too.
-    var hasLeftStickyColumn = false;
-    __spreadArray([], flatHeaders, true).reverse().forEach(function (header) {
+    let hasLeftStickyColumn = false;
+    [...flatHeaders].reverse().forEach((header) => {
         if (header.sticky === 'left') {
             hasLeftStickyColumn = true;
         }
@@ -72,8 +67,8 @@ var useInstance = function (instance) {
         }
     });
     // If there is a column that is sticked to the right, make every column after to that sticky too.
-    var hasRightStickyColumn = false;
-    flatHeaders.forEach(function (header) {
+    let hasRightStickyColumn = false;
+    flatHeaders.forEach((header) => {
         if (header.sticky === 'right') {
             hasRightStickyColumn = true;
         }

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

@@ -1,24 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 };
 };
@@ -28,18 +8,18 @@ exports.useSubRowFiltering = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var defaultFilterFunctions_1 = require("../filters/defaultFilterFunctions");
-var useSubRowFiltering = function (hasAnySubRows) { return function (hooks) {
+const react_1 = __importDefault(require("react"));
+const defaultFilterFunctions_1 = require("../filters/defaultFilterFunctions");
+const useSubRowFiltering = (hasAnySubRows) => (hooks) => {
     hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
-}; };
+};
 exports.useSubRowFiltering = useSubRowFiltering;
-var useInstance = function (hasAnySubRows, instance) {
+const useInstance = (hasAnySubRows, instance) => {
     // There is a bug in react-table that filtered out sub-rows won't be shown after clearing the filter.
     // Therefore saving original sub-rows separately.
     // Related issue: https://github.com/tannerlinsley/react-table/issues/2928
-    var setInitialSubRows = function (rows) {
-        rows.forEach(function (row) {
+    const setInitialSubRows = (rows) => {
+        rows.forEach((row) => {
             if (!row.initialSubRows) {
                 row.initialSubRows = row.subRows;
             }
@@ -47,71 +27,71 @@ var useInstance = function (hasAnySubRows, instance) {
         });
     };
     setInitialSubRows(instance.initialRows);
-    var _a = react_1.default.useMemo(function () {
+    const { filteredRows = instance.filteredRows, filteredFlatRows = instance.filteredFlatRows, filteredRowsById = instance.filteredRowsById, } = react_1.default.useMemo(() => {
         if (!hasAnySubRows) {
             return {};
         }
         // Restore original sub-rows
-        var setSubRows = function (rows) {
-            rows.forEach(function (row) {
+        const setSubRows = (rows) => {
+            rows.forEach((row) => {
                 var _a;
                 row.subRows = (_a = row.initialSubRows) !== null && _a !== void 0 ? _a : [];
                 setSubRows(row.subRows);
             });
         };
         setSubRows(instance.initialRows);
-        var currentlyFilteredRows = __spreadArray([], instance.initialRows, true);
-        instance.state.filters.forEach(function (_a) {
-            var _b;
-            var columnId = _a.id, filterValue = _a.value;
-            var column = instance.allColumns.find(function (c) { return c.id === columnId; });
+        let currentlyFilteredRows = [...instance.initialRows];
+        instance.state.filters.forEach(({ id: columnId, value: filterValue }) => {
+            var _a;
+            const column = instance.allColumns.find((c) => c.id === columnId);
             if (!column) {
                 return;
             }
-            var filterTypes = __assign(__assign({}, defaultFilterFunctions_1.defaultFilterFunctions), instance.filterTypes);
-            var filterFn = typeof column.filter === 'function'
+            const filterTypes = {
+                ...defaultFilterFunctions_1.defaultFilterFunctions,
+                ...instance.filterTypes,
+            };
+            const filterFn = typeof column.filter === 'function'
                 ? column.filter
-                : filterTypes[(_b = column.filter) !== null && _b !== void 0 ? _b : 'text'];
-            currentlyFilteredRows = currentlyFilteredRows.filter(function (row) {
-                return handleRowFiltering(row, filterFn, columnId, filterValue);
-            });
+                : filterTypes[(_a = column.filter) !== null && _a !== void 0 ? _a : 'text'];
+            currentlyFilteredRows = currentlyFilteredRows.filter((row) => handleRowFiltering(row, filterFn, columnId, filterValue));
         });
-        var filteredRows = [];
-        var filteredFlatRows = [];
-        var filteredRowsById = {};
+        const filteredRows = [];
+        const filteredFlatRows = [];
+        const filteredRowsById = {};
         // Setting rows here helps to keep them ordered.
-        var populateRows = function (row) {
+        const populateRows = (row) => {
             if (row.depth === 0) {
                 filteredRows.push(row);
             }
             filteredFlatRows.push(row);
             filteredRowsById[row.id] = row;
             if (row.subRows.length) {
-                row.subRows.forEach(function (r) { return populateRows(r); });
+                row.subRows.forEach((r) => populateRows(r));
             }
         };
-        currentlyFilteredRows.forEach(function (row) { return populateRows(row); });
-        return { filteredRows: filteredRows, filteredFlatRows: filteredFlatRows, filteredRowsById: filteredRowsById };
+        currentlyFilteredRows.forEach((row) => populateRows(row));
+        return { filteredRows, filteredFlatRows, filteredRowsById };
     }, [
         instance.allColumns,
         instance.filterTypes,
         instance.initialRows,
         instance.state.filters,
         hasAnySubRows,
-    ]), _b = _a.filteredRows, filteredRows = _b === void 0 ? instance.filteredRows : _b, _c = _a.filteredFlatRows, filteredFlatRows = _c === void 0 ? instance.filteredFlatRows : _c, _d = _a.filteredRowsById, filteredRowsById = _d === void 0 ? instance.filteredRowsById : _d;
+    ]);
     Object.assign(instance, {
-        filteredRows: filteredRows,
-        filteredFlatRows: filteredFlatRows,
-        filteredRowsById: filteredRowsById,
+        filteredRows,
+        filteredFlatRows,
+        filteredRowsById,
         rows: filteredRows,
         flatRows: filteredFlatRows,
         rowsById: filteredRowsById,
     });
 };
-var handleRowFiltering = function (row, filterFn, columnId, filterValue) {
-    var hasFilteredSubRows = false;
-    row.subRows = row.initialSubRows.filter(function (subRow) {
-        var result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
+const handleRowFiltering = (row, filterFn, columnId, filterValue) => {
+    let hasFilteredSubRows = false;
+    row.subRows = row.initialSubRows.filter((subRow) => {
+        const result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
         if (result) {
             hasFilteredSubRows = true;
         }
@@ -122,6 +102,6 @@ var handleRowFiltering = function (row, filterFn, columnId, filterValue) {
     if (hasFilteredSubRows) {
         return true;
     }
-    var result = filterFn([row], [columnId], filterValue);
+    const result = filterFn([row], [columnId], filterValue);
     return !!result.length;
 };

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

@@ -8,17 +8,17 @@ exports.useSubRowSelection = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var useSubRowSelection = function (hooks) {
+const react_1 = __importDefault(require("react"));
+const useSubRowSelection = (hooks) => {
     hooks.useInstance.push(useInstance);
 };
 exports.useSubRowSelection = useSubRowSelection;
-var useInstance = function (instance) {
-    var selectedFlatRows = react_1.default.useMemo(function () {
-        var selectedFlatRows = [];
-        var setSelectionState = function (row, selectedRowIds) {
-            var isSomeSubRowsSelected = false;
-            row.subRows.forEach(function (subRow) {
+const useInstance = (instance) => {
+    const selectedFlatRows = react_1.default.useMemo(() => {
+        const selectedFlatRows = [];
+        const setSelectionState = (row, selectedRowIds) => {
+            let isSomeSubRowsSelected = false;
+            row.subRows.forEach((subRow) => {
                 setSelectionState(subRow, selectedRowIds);
                 if (subRow.isSelected || subRow.isSomeSelected) {
                     isSomeSubRowsSelected = true;
@@ -34,12 +34,10 @@ var useInstance = function (instance) {
                 row.isSomeSelected = isSomeSubRowsSelected;
             }
         };
-        instance.rows.forEach(function (row) {
-            return setSelectionState(row, instance.state.selectedRowIds);
-        });
+        instance.rows.forEach((row) => setSelectionState(row, instance.state.selectedRowIds));
         return selectedFlatRows;
     }, [instance.rows, instance.state.selectedRowIds]);
     Object.assign(instance, {
-        selectedFlatRows: selectedFlatRows,
+        selectedFlatRows,
     });
 };

package/cjs/core/Table/utils.js

@@ -1,61 +1,50 @@
 "use strict";
-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));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStickyStyle = exports.getCellStyle = void 0;
-var getCellStyle = function (column, isTableResizing) {
-    var style = {};
-    style.flex = "1 1 145px";
+const getCellStyle = (column, isTableResizing) => {
+    const style = {};
+    style.flex = `1 1 145px`;
     if (column.width) {
-        var width = typeof column.width === 'string' ? column.width : "".concat(column.width, "px");
+        const width = typeof column.width === 'string' ? column.width : `${column.width}px`;
         style.width = width;
         // This allows flexbox to handle the width of the column on table resize
         if (isTableResizing && column.canResize) {
-            style.flex = "".concat(Number(column.width), " ").concat(Number(column.width), " ").concat(width);
+            style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
         }
         else {
-            style.flex = "0 0 ".concat(width);
+            style.flex = `0 0 ${width}`;
         }
     }
     if (column.maxWidth) {
-        style.maxWidth = "".concat(column.maxWidth, "px");
+        style.maxWidth = `${column.maxWidth}px`;
     }
     if (column.minWidth) {
-        style.minWidth = "".concat(column.minWidth, "px");
+        style.minWidth = `${column.minWidth}px`;
     }
     return style;
 };
 exports.getCellStyle = getCellStyle;
-var getStickyStyle = function (column, columnList) {
+const getStickyStyle = (column, columnList) => {
     if (!column.sticky) {
         return {};
     }
-    var left = 0;
-    for (var _i = 0, columnList_1 = columnList; _i < columnList_1.length; _i++) {
-        var col = columnList_1[_i];
+    let left = 0;
+    for (const col of columnList) {
         if (col.id === column.id) {
             break;
         }
         left += Number(col.width || col.resizeWidth || 0);
     }
-    var right = 0;
-    for (var _a = 0, _b = __spreadArray([], columnList, true).reverse(); _a < _b.length; _a++) {
-        var col = _b[_a];
+    let right = 0;
+    for (const col of [...columnList].reverse()) {
         if (col.id === column.id) {
             break;
         }
         right += Number(col.width || col.resizeWidth || 0);
     }
     return {
-        '--iui-table-sticky-left': column.sticky === 'left' ? "".concat(left, "px") : undefined,
-        '--iui-table-sticky-right': column.sticky === 'right' ? "".concat(right, "px") : undefined,
+        '--iui-table-sticky-left': column.sticky === 'left' ? `${left}px` : undefined,
+        '--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
     };
 };
 exports.getStickyStyle = getStickyStyle;

package/cjs/core/Tabs/Tab.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.Tab = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tabs.css");
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
@@ -42,10 +20,10 @@ require("@itwin/itwinui-css/css/tabs.css");
  *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
  */
-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"]);
+const Tab = (props) => {
+    const { label, sublabel, startIcon, children, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("button", __assign({ className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: -1 }, rest),
+    return (react_1.default.createElement("button", { 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

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,11 +8,11 @@ exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tabs.css");
-var Tab_1 = require("./Tab");
+const Tab_1 = require("./Tab");
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -62,69 +40,69 @@ var Tab_1 = require("./Tab");
  * ];
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
-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, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
+const Tabs = (props) => {
+    const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
     (0, utils_1.useTheme)();
-    var tablistRef = react_1.default.useRef(null);
-    var _e = (0, utils_1.useContainerWidth)(type !== 'default'), tablistSizeRef = _e[0], tabsWidth = _e[1];
-    var refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
-    var _f = react_1.default.useState(function () {
-        return activeIndex != null
-            ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
-            : 0;
-    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
-    react_1.default.useLayoutEffect(function () {
+    const tablistRef = react_1.default.useRef(null);
+    const [tablistSizeRef, tabsWidth] = (0, utils_1.useContainerWidth)(type !== 'default');
+    const refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
+    const [currentActiveIndex, setCurrentActiveIndex] = react_1.default.useState(() => activeIndex != null
+        ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
+        : 0);
+    react_1.default.useLayoutEffect(() => {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     // CSS custom properties to place the active stripe
-    var _g = react_1.default.useState({}), stripeProperties = _g[0], setStripeProperties = _g[1];
-    react_1.default.useLayoutEffect(function () {
+    const [stripeProperties, setStripeProperties] = react_1.default.useState({});
+    react_1.default.useLayoutEffect(() => {
         if (type !== 'default' && tablistRef.current != undefined) {
-            var activeTab = tablistRef.current.children[currentActiveIndex];
-            var activeTabRect = activeTab.getBoundingClientRect();
-            setStripeProperties(__assign(__assign({}, (orientation === 'horizontal' && {
-                '--stripe-width': "".concat(activeTabRect.width, "px"),
-                '--stripe-left': "".concat(activeTab.offsetLeft, "px"),
-            })), (orientation === 'vertical' && {
-                '--stripe-height': "".concat(activeTabRect.height, "px"),
-                '--stripe-top': "".concat(activeTab.offsetTop, "px"),
-            })));
+            const activeTab = tablistRef.current.children[currentActiveIndex];
+            const activeTabRect = activeTab.getBoundingClientRect();
+            setStripeProperties({
+                ...(orientation === 'horizontal' && {
+                    '--stripe-width': `${activeTabRect.width}px`,
+                    '--stripe-left': `${activeTab.offsetLeft}px`,
+                }),
+                ...(orientation === 'vertical' && {
+                    '--stripe-height': `${activeTabRect.height}px`,
+                    '--stripe-top': `${activeTab.offsetTop}px`,
+                }),
+            });
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _h = react_1.default.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
-    react_1.default.useEffect(function () {
+    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
+    react_1.default.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
-            var tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
+            const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
             tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
-    var _j = react_1.default.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
-    react_1.default.useLayoutEffect(function () {
+    const [hasSublabel, setHasSublabel] = react_1.default.useState(false); // used for setting size
+    react_1.default.useLayoutEffect(() => {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
             !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));
     }, [type]);
-    var onTabClick = function (index) {
+    const onTabClick = (index) => {
         if (onTabSelected) {
             onTabSelected(index);
         }
         setCurrentActiveIndex(index);
     };
-    var onKeyDown = function (event) {
+    const onKeyDown = (event) => {
         // alt + arrow keys are used by browser / assistive technologies
         if (event.altKey) {
             return;
         }
-        var isTabDisabled = function (index) {
-            var tab = labels[index];
+        const isTabDisabled = (index) => {
+            const tab = labels[index];
             return react_1.default.isValidElement(tab) && tab.props.disabled;
         };
-        var newIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : currentActiveIndex;
+        let newIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : currentActiveIndex;
         /** focus next tab if delta is +1, previous tab if -1 */
-        var focusTab = function (delta) {
-            if (delta === void 0) { delta = +1; }
+        const focusTab = (delta = +1) => {
             do {
                 newIndex = (newIndex + delta + labels.length) % labels.length;
             } while (isTabDisabled(newIndex) && newIndex !== focusedIndex);
@@ -173,13 +151,13 @@ var Tabs = function (props) {
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-".concat(orientation), wrapperClassName), style: stripeProperties },
-        react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-".concat(type), {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
+        react_1.default.createElement("ul", { className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default',
                 'iui-large': hasSublabel,
-            }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
-            var onClick = function () {
+            }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => {
+            const onClick = () => {
                 setFocusedIndex(index);
                 onTabClick(index);
             };
@@ -191,7 +169,7 @@ var Tabs = function (props) {
                 }),
                 'aria-selected': index === currentActiveIndex,
                 tabIndex: index === currentActiveIndex ? 0 : -1,
-                onClick: function (args) {
+                onClick: (args) => {
                     var _a, _b;
                     onClick();
                     (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
@@ -213,7 +191,7 @@ exports.Tabs = Tabs;
  * ];
  * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
  */
-var HorizontalTabs = function (props) { return (react_1.default.createElement(exports.Tabs, __assign({ orientation: 'horizontal' }, props))); };
+const HorizontalTabs = (props) => (react_1.default.createElement(exports.Tabs, { orientation: 'horizontal', ...props }));
 exports.HorizontalTabs = HorizontalTabs;
 /**
  * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
@@ -227,6 +205,6 @@ exports.HorizontalTabs = HorizontalTabs;
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */
-var VerticalTabs = function (props) { return (react_1.default.createElement(exports.Tabs, __assign({ orientation: 'vertical' }, props))); };
+const VerticalTabs = (props) => (react_1.default.createElement(exports.Tabs, { orientation: 'vertical', ...props }));
 exports.VerticalTabs = VerticalTabs;
 exports.default = exports.Tabs;