@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/cjs/core/Table/columns/expanderColumn.js

@@ -70,17 +70,17 @@ const ExpanderColumn = (props = {}) => {
         cellClassName: 'iui-slot',
         Cell: (props) => {
             const { row } = props;
-            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
+            if (!subComponent?.(row)) {
                 return null;
             }
             else {
                 return (React.createElement(index_js_2.IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
                         e.stopPropagation();
                         row.toggleRowExpanded();
-                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, React.createElement(index_js_1.SvgChevronRight, null)));
+                    }, disabled: isDisabled?.(props.row.original) }, React.createElement(index_js_1.SvgChevronRight, null)));
             }
         },
-        cellRenderer: (props) => (React.createElement(index_js_3.DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+        cellRenderer: (props) => (React.createElement(index_js_3.DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };
 exports.ExpanderColumn = ExpanderColumn;

package/cjs/core/Table/columns/selectionColumn.js

@@ -58,15 +58,15 @@ const SelectionColumn = (props = {}) => {
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)));
+            const disabled = rows.every((row) => isDisabled?.(row.original));
+            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
             const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(index_js_1.Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
         },
         Cell: ({ row }) => (React.createElement(index_js_1.Checkbox, { ...row.getToggleRowSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-            , disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: (e) => e.stopPropagation() })),
-        cellRenderer: (props) => (React.createElement(index_js_2.DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+            , disabled: isDisabled?.(row.original), onClick: (e) => e.stopPropagation() })),
+        cellRenderer: (props) => (React.createElement(index_js_2.DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };
 exports.SelectionColumn = SelectionColumn;

package/cjs/core/Table/filters/BaseFilter.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type BaseFilterProps = {
     /**

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

@@ -33,7 +33,6 @@ exports.BaseFilter = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../utils/index.js");
 /**
  * Filter wrapper that should be used when creating custom filters.
@@ -52,7 +51,7 @@ const index_js_1 = require("../../utils/index.js");
 const BaseFilter = (props) => {
     const { children, className, style, id } = props;
     (0, index_js_1.useGlobals)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
         onClick: (e) => {
             e.stopPropagation();

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

@@ -52,10 +52,9 @@ const DatePickerInput = (props) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const close = React.useCallback(() => setIsVisible(false), []);
     const onDateSelected = React.useCallback((date) => {
-        var _a;
         onChange(date);
         close();
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        buttonRef.current?.focus();
     }, [close, onChange]);
     const onInputChange = React.useCallback((event) => {
         const value = event.target.value;
@@ -69,8 +68,7 @@ const DatePickerInput = (props) => {
         }
     }, [onChange, parseInput]);
     return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_3.DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
-            var _a;
-            if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (!buttonRef.current?.contains(e.target)) {
                 close();
             }
         }, appendTo: 'parent' },

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type DateRangeTranslation = {
     from: string;
     to: string;

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

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
 const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
 const BaseFilter_js_1 = require("../BaseFilter.js");
-require("@itwin/itwinui-css/css/table.css");
 const DatePickerInput_js_1 = __importDefault(require("./DatePickerInput.js"));
 const defaultStrings = {
     from: 'From',
@@ -57,11 +56,10 @@ const defaultParseInput = (text) => {
     return new Date('');
 };
 const DateRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
     (0, index_js_1.useGlobals)();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.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);
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined);
     const onFromChange = React.useCallback((date) => {
         setFrom((prevDate) => {
             if (prevDate || !date) {
@@ -70,7 +68,7 @@ const DateRangeFilter = (props) => {
             return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
         });
     }, []);
-    const [to, setTo] = React.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);
+    const [to, setTo] = React.useState(column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined);
     const onToChange = React.useCallback((date) => {
         setTo((prevDate) => {
             if (prevDate || !date) {

package/cjs/core/Table/filters/FilterButtonBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterButtonBarTranslation = {
     filter: string;

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

@@ -33,7 +33,6 @@ exports.FilterButtonBar = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../utils/index.js");
 const index_js_2 = require("../../Buttons/index.js");
 const defaultStrings = {
@@ -49,7 +48,7 @@ const FilterButtonBar = (props) => {
     const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     (0, index_js_1.useGlobals)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
         children,
         React.createElement(index_js_2.Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
         React.createElement(index_js_2.Button, { onClick: clearFilter }, translatedStrings.clear)));

package/cjs/core/Table/filters/FilterToggle.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { HeaderGroup } from 'react-table';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;

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

@@ -33,7 +33,6 @@ exports.FilterToggle = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../utils/index.js");
 const index_js_2 = require("../../Buttons/index.js");
 /**

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type NumberRangeTranslation = {
     from: string;
     to: string;

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

@@ -32,19 +32,17 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
 const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
 const BaseFilter_js_1 = require("../BaseFilter.js");
-require("@itwin/itwinui-css/css/table.css");
 const index_js_2 = require("../../../LabeledInput/index.js");
 const defaultStrings = {
     from: 'From',
     to: 'To',
 };
 const NumberRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     (0, index_js_1.useGlobals)();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
-    const [to, setTo] = React.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
+    const [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
     const parseInputValue = (value) => {
         return !value || isNaN(Number(value)) ? undefined : Number(value);
     };

package/cjs/core/Table/filters/TextFilter/TextFilter.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export declare type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {

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

@@ -29,16 +29,14 @@ exports.TextFilter = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../../utils/index.js");
 const index_js_2 = require("../../../Input/index.js");
 const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
 const BaseFilter_js_1 = require("../BaseFilter.js");
 const TextFilter = (props) => {
-    var _a;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     (0, index_js_1.useGlobals)();
-    const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
+    const [text, setText] = React.useState(column.filterValue ?? '');
     const onKeyDown = (event) => {
         if (event.altKey) {
             return;

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

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColumnDragAndDrop = void 0;
 const react_table_1 = require("react-table");
+const styles_js_1 = __importDefault(require("../../../styles.js"));
 const REORDER_ACTIONS = {
     columnDragStart: 'columnDragStart',
     columnDragEnd: 'columnDragEnd',
@@ -24,13 +28,13 @@ const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, })
     };
     const setOnDragColumnStyle = (event, position) => {
         const columnElement = event.currentTarget;
-        columnElement.classList.remove('iui-table-reorder-column-right');
-        columnElement.classList.remove('iui-table-reorder-column-left');
+        columnElement.classList.remove(styles_js_1.default['iui-table-reorder-column-right']);
+        columnElement.classList.remove(styles_js_1.default['iui-table-reorder-column-left']);
         if (position === 'left') {
-            columnElement.classList.add('iui-table-reorder-column-left');
+            columnElement.classList.add(styles_js_1.default['iui-table-reorder-column-left']);
         }
         else if (position === 'right') {
-            columnElement.classList.add('iui-table-reorder-column-right');
+            columnElement.classList.add(styles_js_1.default['iui-table-reorder-column-right']);
         }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {

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

@@ -14,7 +14,6 @@ const isTouchEvent = (event) => {
 const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, nextHeader, }) => {
     const { dispatch } = instance;
     const onResizeStart = (e, header) => {
-        var _a, _b, _c;
         // lets not respond to multiple touches (e.g. 2 or 3 fingers)
         if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
             return;
@@ -39,10 +38,9 @@ const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, ne
                 moveHandler: (e) => dispatchMove(e.clientX),
                 upEvent: 'mouseup',
                 upHandler: () => {
-                    var _a, _b, _c;
-                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
-                    (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
+                    ownerDocument.current?.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    ownerDocument.current?.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    ownerDocument.current?.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
                     dispatchEnd();
                 },
             },
@@ -57,9 +55,8 @@ const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, ne
                 },
                 upEvent: 'touchend',
                 upHandler: () => {
-                    var _a, _b;
-                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                    ownerDocument.current?.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    ownerDocument.current?.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
                     dispatchEnd();
                 },
             },
@@ -70,10 +67,10 @@ const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, ne
         const passiveIfSupported = passiveEventSupported()
             ? { passive: false }
             : false;
-        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        ownerDocument.current?.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        ownerDocument.current?.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
         if (!isTouchEvent(e)) {
-            (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+            ownerDocument.current?.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
         }
         dispatch({
             type: react_table_1.actions.columnStartResizing,
@@ -157,8 +154,8 @@ const reducer = (newState, action, previousState, instance) => {
         const newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
         const isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) <
             instance.tableWidth;
-        const newNextColumnWidths = (instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'fit' ||
-            ((instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'expand' && isTableWidthDecreasing)
+        const newNextColumnWidths = instance?.columnResizeMode === 'fit' ||
+            (instance?.columnResizeMode === 'expand' && isTableWidthDecreasing)
             ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
             : {};
         if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
@@ -168,7 +165,7 @@ const reducer = (newState, action, previousState, instance) => {
         }
         // Setting `width` here because it might take several rerenders until actual column width is set.
         // Also setting after the actual resize happened.
-        instance === null || instance === void 0 ? void 0 : instance.flatHeaders.forEach((h) => {
+        instance?.flatHeaders.forEach((h) => {
             if (!h.width) {
                 h.width = h.resizeWidth;
             }
@@ -210,7 +207,7 @@ const isNewColumnWidthsValid = (columnWidths, headers) => {
         return false;
     }
     for (const [headerId, width] of Object.entries(columnWidths)) {
-        const header = headers === null || headers === void 0 ? void 0 : headers.find((h) => h.id === headerId);
+        const header = headers?.find((h) => h.id === headerId);
         if (!header) {
             continue;
         }
@@ -242,7 +239,6 @@ const useInstanceBeforeDimensions = (instance) => {
     const { flatHeaders, getHooks, state: { columnResizing }, columnResizeMode, } = instance;
     const getInstance = (0, react_table_1.useGetLatest)(instance);
     flatHeaders.forEach((header, index) => {
-        var _a;
         const resizeWidth = columnResizing.columnWidths[header.id];
         header.width = resizeWidth || header.width || header.originalWidth;
         header.isResizing = columnResizing.isResizingColumn === header.id;
@@ -262,7 +258,7 @@ const useInstanceBeforeDimensions = (instance) => {
         if (columnResizeMode === 'fit') {
             header.isResizerVisible =
                 (header.canResize && !!nextResizableHeader) ||
-                    (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+                    (headerToResize && !!instance.flatHeaders[index + 1]?.canResize);
             // When resize mode is `expand` show resizer on the current resizable column.
         }
         else {
@@ -276,8 +272,7 @@ const useInstanceBeforeDimensions = (instance) => {
     });
 };
 const getPreviousResizableHeader = (headerColumn, instance) => {
-    var _a;
-    const headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(({ isVisible }) => isVisible);
+    const headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible }) => isVisible);
     const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
     return [...headersList]
         .slice(0, headerIndex)
@@ -285,8 +280,7 @@ const getPreviousResizableHeader = (headerColumn, instance) => {
         .find((h) => !h.disableResizing);
 };
 const getNextResizableHeader = (headerColumn, instance) => {
-    var _a;
-    const headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(({ isVisible }) => isVisible);
+    const headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible }) => isVisible);
     const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
     return [...headersList]
         .slice(headerIndex + 1)
@@ -335,7 +329,7 @@ const passiveEventSupported = () => {
         };
         window.addEventListener('test', () => { }, options);
     }
-    catch (_a) {
+    catch {
         passiveSupported = false;
     }
     return passiveSupported;

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

@@ -49,14 +49,13 @@ function useScrollToRow({ data, enableVirtualization, page, paginatorRenderer, s
     // For non-virtualized tables, we need to add a ref to each row
     // and scroll to the element
     React.useEffect(() => {
-        var _a;
         if (enableVirtualization ||
             scrollToIndex === undefined ||
             scrollToIndex === null ||
             scrollToIndex < 0) {
             return;
         }
-        (_a = rowRefs.current[pageRef.current[scrollToIndex].id]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        rowRefs.current[pageRef.current[scrollToIndex].id]?.scrollIntoView();
     }, [enableVirtualization, scrollToIndex]);
     const tableRowRef = React.useCallback((row) => {
         return (element) => {

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

@@ -14,7 +14,6 @@ const useStickyColumns = (hooks) => {
 };
 exports.useStickyColumns = useStickyColumns;
 const reducer = (newState, action) => {
-    var _a, _b;
     if (action.type === react_table_1.actions.init) {
         return {
             ...newState,
@@ -22,7 +21,7 @@ const reducer = (newState, action) => {
         };
     }
     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
+        newState.sticky?.isScrolledToLeft !== action.value // Prevents unnecessary re-render
     ) {
         return {
             ...newState,
@@ -33,7 +32,7 @@ const reducer = (newState, action) => {
         };
     }
     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
+        newState.sticky?.isScrolledToRight !== action.value // Prevents unnecessary re-render
     ) {
         return {
             ...newState,
@@ -49,9 +48,8 @@ const useInstance = (instance) => {
     const { flatHeaders } = instance;
     // Edge case. Saving original sticky state in case sticky columns are reordered.
     flatHeaders.forEach((header) => {
-        var _a;
         if (!header.originalSticky) {
-            header.originalSticky = (_a = header.sticky) !== null && _a !== void 0 ? _a : 'none';
+            header.originalSticky = header.sticky ?? 'none';
         }
         header.sticky =
             header.originalSticky === 'none' ? undefined : header.originalSticky;

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

@@ -54,15 +54,13 @@ const useInstance = (hasAnySubRows, instance) => {
         // Restore original sub-rows
         const setSubRows = (rows) => {
             rows.forEach((row) => {
-                var _a;
-                row.subRows = (_a = row.initialSubRows) !== null && _a !== void 0 ? _a : [];
+                row.subRows = row.initialSubRows ?? [];
                 setSubRows(row.subRows);
             });
         };
         setSubRows(instance.initialRows);
         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;
@@ -73,7 +71,7 @@ const useInstance = (hasAnySubRows, instance) => {
             };
             const filterFn = typeof column.filter === 'function'
                 ? column.filter
-                : filterTypes[(_a = column.filter) !== null && _a !== void 0 ? _a : 'text'];
+                : filterTypes[column.filter ?? 'text'];
             currentlyFilteredRows = currentlyFilteredRows.filter((row) => handleRowFiltering(row, filterFn, columnId, filterValue));
         });
         const filteredRows = [];

package/cjs/core/Tabs/Tab.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 declare type TabProps = {
     /**
      * The main label shown in the tab.

package/cjs/core/Tabs/Tab.js

@@ -34,7 +34,6 @@ exports.Tab = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tabs.css");
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example

package/cjs/core/Tabs/Tabs.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
 export declare type OverflowOptions = {
     /**
      * Whether to allow tabs list to scroll when there is overflow,

package/cjs/core/Tabs/Tabs.js

@@ -34,8 +34,8 @@ exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tabs.css");
 const Tab_js_1 = require("./Tab.js");
+const styles_js_1 = __importDefault(require("../../styles.js"));
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -114,23 +114,21 @@ const Tabs = (props) => {
     const [focusedIndex, setFocusedIndex] = React.useState();
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
-            const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
-            tab === null || tab === void 0 ? void 0 : tab.focus();
+            const tab = tablistRef.current.querySelectorAll(`.${styles_js_1.default['iui-tab']}`)[focusedIndex];
+            tab?.focus();
         }
     }, [focusedIndex]);
     const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        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')));
+            !!tablistRef.current?.querySelector(`.${styles_js_1.default['iui-tab-description']}`));
     }, [type]);
     const enableHorizontalScroll = React.useCallback((e) => {
-        var _a;
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
             return;
         }
-        let scrollLeft = (_a = ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        let scrollLeft = ownerDoc?.scrollLeft ?? 0;
         if (e.deltaY > 0 || e.deltaX > 0) {
             scrollLeft += 25;
         }
@@ -145,12 +143,12 @@ const Tabs = (props) => {
         if (ownerDoc === null) {
             return;
         }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) || orientation === 'vertical') {
+        if (!overflowOptions?.useOverflow || orientation === 'vertical') {
             ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
             return;
         }
         ownerDoc.addEventListener('wheel', enableHorizontalScroll);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, orientation, enableHorizontalScroll]);
+    }, [overflowOptions?.useOverflow, orientation, enableHorizontalScroll]);
     const isTabHidden = (activeTab, isVertical) => {
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
@@ -230,9 +228,9 @@ const Tabs = (props) => {
         setTimeout(() => {
             const ownerDoc = tablistRef.current;
             if (ownerDoc !== null &&
-                (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
+                overflowOptions?.useOverflow &&
                 currentActiveIndex !== undefined) {
-                const activeTab = ownerDoc.querySelectorAll('.iui-tab')[currentActiveIndex];
+                const activeTab = ownerDoc.querySelectorAll(`.${styles_js_1.default['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
                 const tabPlacement = isTabHidden(activeTab, isVertical);
                 if (tabPlacement) {
@@ -241,7 +239,7 @@ const Tabs = (props) => {
             }
         }, 50);
     }, [
-        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
+        overflowOptions?.useOverflow,
         currentActiveIndex,
         focusedIndex,
         orientation,
@@ -277,19 +275,19 @@ const Tabs = (props) => {
     }, [orientation, setScrollingPlacement]);
     // apply correct mask when tabs list is resized
     const [resizeRef] = (0, index_js_1.useResizeObserver)(determineScrollingPlacement);
-    resizeRef(tablistRef === null || tablistRef === void 0 ? void 0 : tablistRef.current);
+    resizeRef(tablistRef?.current);
     // check if overflow tabs are scrolled to far edges
     React.useEffect(() => {
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
             return;
         }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow)) {
+        if (!overflowOptions?.useOverflow) {
             ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
             return;
         }
         ownerDoc.addEventListener('scroll', determineScrollingPlacement);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, determineScrollingPlacement]);
+    }, [overflowOptions?.useOverflow, determineScrollingPlacement]);
     const onTabClick = React.useCallback((index) => {
         if (onTabSelected) {
             onTabSelected(index);
@@ -305,7 +303,7 @@ const Tabs = (props) => {
             const tab = labels[index];
             return React.isValidElement(tab) && tab.props.disabled;
         };
-        let newIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : currentActiveIndex;
+        let newIndex = focusedIndex ?? currentActiveIndex;
         /** focus next tab if delta is +1, previous tab if -1 */
         const focusTab = (delta = +1) => {
             do {
@@ -368,9 +366,8 @@ const Tabs = (props) => {
             'aria-selected': index === currentActiveIndex,
             tabIndex: index === currentActiveIndex ? 0 : -1,
             onClick: (args) => {
-                var _a, _b;
                 onClick();
-                (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+                label.props.onClick?.(args);
             },
         }))));
     }, [currentActiveIndex, onTabClick]);
@@ -380,7 +377,7 @@ const Tabs = (props) => {
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
-            }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
+            }, tabsClassName), "data-iui-overflow": overflowOptions?.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
         actions && (React.createElement(index_js_1.Box, { className: 'iui-tabs-actions-wrapper' },
             React.createElement(index_js_1.Box, { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));

package/cjs/core/Tag/Tag.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 declare type TagProps = {
     /**
      * Callback function that handles click on close icon.

package/cjs/core/Tag/Tag.js

@@ -34,7 +34,6 @@ exports.Tag = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tag.css");
 const index_js_2 = require("../Buttons/index.js");
 /**
  * Tag for showing categories, filters etc.