@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.3

package/esm/core/Table/TableRowMemoized.js

@@ -13,16 +13,13 @@ import { TableCell } from './TableCell.js';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export const TableRow = (props) => {
-    var _a;
     const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
     const onIntersect = React.useCallback(() => {
-        var _a, _b;
-        (_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));
+        onRowInViewport.current?.(row.original);
+        isLast && onBottomReached.current?.();
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
     const intersectionRoot = React.useMemo(() => {
-        var _a, _b;
-        const isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+        const isTableBodyScrollable = (bodyRef?.scrollHeight ?? 0) > (bodyRef?.offsetHeight ?? 0);
         // If table body is scrollable, make it the intersection root
         if (isTableBodyScrollable) {
             return bodyRef;
@@ -34,7 +31,7 @@ export const TableRow = (props) => {
         rootMargin: `${intersectionMargin}px`,
         root: intersectionRoot,
     });
-    const userRowProps = (_a = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _a !== void 0 ? _a : {};
+    const userRowProps = rowProps?.(row) ?? {};
     const { status, isLoading, ...restUserRowProps } = userRowProps;
     const mergedProps = {
         ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
@@ -43,7 +40,7 @@ export const TableRow = (props) => {
             className: cx('iui-table-row', {
                 'iui-table-row-expanded': row.isExpanded && subComponent,
                 'iui-loading': isLoading,
-            }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
+            }, userRowProps?.className),
             'aria-selected': row.isSelected || undefined,
             'aria-disabled': isDisabled || undefined,
             'data-iui-status': status,
@@ -52,9 +49,8 @@ export const TableRow = (props) => {
     const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, { ...mergedProps, ref: refs, onClick: (event) => {
-                var _a;
-                (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
-                onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
+                mergedProps?.onClick?.(event);
+                onClick?.(event, row);
             } }, row.cells.map((cell, index) => {
             return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
@@ -62,41 +58,38 @@ export const TableRow = (props) => {
             React.createElement(Box, { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
-    if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
+    if (selectedRowIds?.[row.id]) {
         return true;
     }
     return row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, selectedRowIds));
 };
-export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return prevProp.isLast === nextProp.isLast &&
-        ((_a = prevProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a.length) ===
-            ((_b = nextProp.state.hiddenColumns) === null || _b === void 0 ? void 0 : _b.length) &&
-        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every((column, index) => { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
-        prevProp.onRowInViewport === nextProp.onRowInViewport &&
-        prevProp.onBottomReached === nextProp.onBottomReached &&
-        prevProp.onClick === nextProp.onClick &&
-        prevProp.row.original === nextProp.row.original &&
-        ((_d = prevProp.state.selectedRowIds) === null || _d === void 0 ? void 0 : _d[prevProp.row.id]) ===
-            ((_e = nextProp.state.selectedRowIds) === null || _e === void 0 ? void 0 : _e[nextProp.row.id]) &&
-        // Check if sub-rows selection has changed and whether to show indeterminate state or not
-        prevProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) ===
-            nextProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) &&
-        ((_f = prevProp.state.expanded) === null || _f === void 0 ? void 0 : _f[prevProp.row.id]) ===
-            ((_g = nextProp.state.expanded) === null || _g === void 0 ? void 0 : _g[nextProp.row.id]) &&
-        prevProp.subComponent === nextProp.subComponent &&
-        prevProp.row.cells.every((cell, index) => nextProp.row.cells[index].column === cell.column) &&
-        prevProp.isDisabled === nextProp.isDisabled &&
-        prevProp.rowProps === nextProp.rowProps &&
-        prevProp.expanderCell === nextProp.expanderCell &&
-        prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
-        prevProp.bodyRef === nextProp.bodyRef &&
-        prevProp.state.columnOrder === nextProp.state.columnOrder &&
-        !nextProp.state.columnResizing.isResizingColumn &&
-        prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
-        prevProp.state.sticky.isScrolledToLeft ===
-            nextProp.state.sticky.isScrolledToLeft &&
-        prevProp.state.sticky.isScrolledToRight ===
-            nextProp.state.sticky.isScrolledToRight &&
-        prevProp.density === nextProp.density;
-});
+export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => prevProp.isLast === nextProp.isLast &&
+    prevProp.state.hiddenColumns?.length ===
+        nextProp.state.hiddenColumns?.length &&
+    !!prevProp.state.hiddenColumns?.every((column, index) => nextProp.state.hiddenColumns?.[index] === column) &&
+    prevProp.onRowInViewport === nextProp.onRowInViewport &&
+    prevProp.onBottomReached === nextProp.onBottomReached &&
+    prevProp.onClick === nextProp.onClick &&
+    prevProp.row.original === nextProp.row.original &&
+    prevProp.state.selectedRowIds?.[prevProp.row.id] ===
+        nextProp.state.selectedRowIds?.[nextProp.row.id] &&
+    // Check if sub-rows selection has changed and whether to show indeterminate state or not
+    prevProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) ===
+        nextProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) &&
+    prevProp.state.expanded?.[prevProp.row.id] ===
+        nextProp.state.expanded?.[nextProp.row.id] &&
+    prevProp.subComponent === nextProp.subComponent &&
+    prevProp.row.cells.every((cell, index) => nextProp.row.cells[index].column === cell.column) &&
+    prevProp.isDisabled === nextProp.isDisabled &&
+    prevProp.rowProps === nextProp.rowProps &&
+    prevProp.expanderCell === nextProp.expanderCell &&
+    prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+    prevProp.bodyRef === nextProp.bodyRef &&
+    prevProp.state.columnOrder === nextProp.state.columnOrder &&
+    !nextProp.state.columnResizing.isResizingColumn &&
+    prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
+    prevProp.state.sticky.isScrolledToLeft ===
+        nextProp.state.sticky.isScrolledToLeft &&
+    prevProp.state.sticky.isScrolledToRight ===
+        nextProp.state.sticky.isScrolledToRight &&
+    prevProp.density === nextProp.density);

package/esm/core/Table/actionHandlers/expandHandler.js

@@ -1,6 +1,6 @@
 export const onExpandHandler = (newState, instance, onExpand) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.preFilteredFlatRows.length)) {
-        onExpand === null || onExpand === void 0 ? void 0 : onExpand([], newState);
+    if (!instance?.preFilteredFlatRows.length) {
+        onExpand?.([], newState);
         return;
     }
     const expandedData = [];
@@ -9,5 +9,5 @@ export const onExpandHandler = (newState, instance, onExpand) => {
             expandedData.push(row.original);
         }
     });
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expandedData, newState);
+    onExpand?.(expandedData, newState);
 };

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -1,14 +1,13 @@
 export const onFilterHandler = (newState, action, previousState, currentFilter, instance) => {
     const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
-    if ((previousFilter === null || previousFilter === void 0 ? void 0 : previousFilter.value) != action.filterValue) {
+    if (previousFilter?.value != action.filterValue) {
         const filters = newState.filters.map((f) => {
-            var _a, _b;
-            const column = instance === null || instance === void 0 ? void 0 : instance.allColumns.find((c) => c.id === f.id);
+            const column = instance?.allColumns.find((c) => c.id === f.id);
             return {
                 id: f.id,
                 value: f.value,
-                fieldType: (_a = column === null || column === void 0 ? void 0 : column.fieldType) !== null && _a !== void 0 ? _a : 'text',
-                filterType: (_b = column === null || column === void 0 ? void 0 : column.filter) !== null && _b !== void 0 ? _b : 'text',
+                fieldType: column?.fieldType ?? 'text',
+                filterType: column?.filter ?? 'text',
             };
         });
         return filters;

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

@@ -4,13 +4,13 @@
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect([], newState);
+    if (!instance?.rows.length) {
+        onSelect?.([], newState);
         return;
     }
     const newSelectedRowIds = {};
     const handleRow = (row) => {
-        if (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)) {
+        if (isRowDisabled?.(row.original)) {
             return false;
         }
         let isAllSubSelected = true;
@@ -33,7 +33,7 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     instance.initialRows.forEach((row) => handleRow(row));
     const selectedData = getSelectedData(newSelectedRowIds, instance);
     newState.selectedRowIds = newSelectedRowIds;
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
+    onSelect?.(selectedData, newState);
 };
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
@@ -48,7 +48,7 @@ export const onToggleHandler = (newState, action, instance, onSelect, isRowDisab
  */
 export const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
     const selectedRowIds = { [action.id]: true };
-    if (instance === null || instance === void 0 ? void 0 : instance.selectSubRows) {
+    if (instance?.selectSubRows) {
         const handleRow = (row) => {
             selectedRowIds[row.id] = true;
             row.subRows.forEach((r) => handleRow(r));
@@ -111,6 +111,6 @@ const getSelectedData = (selectedRowIds, instance) => {
         }
         row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
     };
-    instance === null || instance === void 0 ? void 0 : instance.initialRows.forEach((row) => setSelectedData(row));
+    instance?.initialRows.forEach((row) => setSelectedData(row));
     return selectedData;
 };

package/esm/core/Table/cells/DefaultCell.js

@@ -20,7 +20,7 @@ export const DefaultCell = (props) => {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
-    return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
+    return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
         startIcon && (React.createElement(Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
         children,
         endIcon && React.createElement(Box, { className: 'iui-table-cell-end-icon' }, endIcon)));

package/esm/core/Table/cells/EditableCell.js

@@ -27,40 +27,34 @@ export const EditableCell = (props) => {
     const [key, setKey] = React.useState(getRandomValue(10));
     const [isDirty, setIsDirty] = React.useState(false);
     return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
-            var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
-            (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onInput?.(e);
         }, onBlur: (e) => {
-            var _a;
             if (isDirty) {
                 onCellEdit(cellProps.column.id, value, cellProps.row.original);
             }
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onBlur?.(e);
             // Prevents error when text is cleared.
             // New key makes React to reattach with the DOM so it won't complain about deleted text node.
             setKey(getRandomValue(10));
         }, onKeyDown: (e) => {
-            var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press
             if (e.key === 'Enter') {
                 e.preventDefault();
             }
-            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onKeyDown?.(e);
         }, onPaste: (e) => {
-            var _a;
             e.preventDefault();
             document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
-            (_a = props.onPaste) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onPaste?.(e);
         }, onDrop: (e) => {
-            var _a;
             // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
             e.preventDefault();
-            (_a = props.onDrop) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onDrop?.(e);
         }, onClick: (e) => {
-            var _a;
             e.stopPropagation();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onClick?.(e);
         } }, children));
 };
 export default EditableCell;

package/esm/core/Table/columns/actionColumn.js

@@ -71,8 +71,7 @@ export const ActionColumn = ({ columnManager = false, } = {}) => {
                     // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
                     // So for better UX we need to scroll to that dropdown menu.
                     queueMicrotask(() => {
-                        var _a;
-                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        buttonRef.current?.scrollIntoView();
                     });
                 };
                 return (React.createElement(MenuItem, { key: column.id, startIcon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
@@ -82,13 +81,11 @@ export const ActionColumn = ({ columnManager = false, } = {}) => {
                 ? columnManager.dropdownMenuProps
                 : {};
             return (React.createElement(DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onHide: (i) => {
-                    var _a;
                     setIsOpen(false);
-                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                    dropdownMenuProps.onHide?.(i);
                 }, onShow: (i) => {
-                    var _a;
                     setIsOpen(true);
-                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                    dropdownMenuProps.onShow?.(i);
                 }, className: cx('iui-scroll', dropdownMenuProps.className) },
                 React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(SvgColumnManager, null))));

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

@@ -44,16 +44,16 @@ export 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(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(SvgChevronRight, null)));
+                    }, disabled: isDisabled?.(props.row.original) }, React.createElement(SvgChevronRight, null)));
             }
         },
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

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

@@ -32,14 +32,14 @@ export 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(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(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(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(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

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

@@ -27,10 +27,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;
@@ -44,8 +43,7 @@ const DatePickerInput = (props) => {
         }
     }, [onChange, parseInput]);
     return (React.createElement(Popover, { content: React.createElement(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/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -27,11 +27,10 @@ const defaultParseInput = (text) => {
     return new Date('');
 };
 export const DateRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
     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) {
@@ -40,7 +39,7 @@ export 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/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -12,12 +12,11 @@ const defaultStrings = {
     to: 'To',
 };
 export const NumberRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     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/esm/core/Table/filters/TextFilter/TextFilter.js

@@ -8,10 +8,9 @@ import { Input } from '../../../Input/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 export const TextFilter = (props) => {
-    var _a;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     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/esm/core/Table/hooks/useResizeColumns.js

@@ -10,7 +10,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;
@@ -35,10 +34,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();
                 },
             },
@@ -53,9 +51,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();
                 },
             },
@@ -66,10 +63,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: actions.columnStartResizing,
@@ -153,8 +150,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) ||
@@ -164,7 +161,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;
             }
@@ -206,7 +203,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;
         }
@@ -238,7 +235,6 @@ const useInstanceBeforeDimensions = (instance) => {
     const { flatHeaders, getHooks, state: { columnResizing }, columnResizeMode, } = instance;
     const getInstance = 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;
@@ -258,7 +254,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 {
@@ -272,8 +268,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)
@@ -281,8 +276,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)
@@ -331,7 +325,7 @@ const passiveEventSupported = () => {
         };
         window.addEventListener('test', () => { }, options);
     }
-    catch (_a) {
+    catch {
         passiveSupported = false;
     }
     return passiveSupported;

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

@@ -23,14 +23,13 @@ export function useScrollToRow({ data, enableVirtualization, page, paginatorRend
     // 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/esm/core/Table/hooks/useStickyColumns.js

@@ -10,7 +10,6 @@ export const useStickyColumns = (hooks) => {
     hooks.useInstance.push(useInstance);
 };
 const reducer = (newState, action) => {
-    var _a, _b;
     if (action.type === actions.init) {
         return {
             ...newState,
@@ -18,7 +17,7 @@ const reducer = (newState, action) => {
         };
     }
     if (action.type === 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,
@@ -29,7 +28,7 @@ const reducer = (newState, action) => {
         };
     }
     if (action.type === 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,
@@ -45,9 +44,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/esm/core/Table/hooks/useSubRowFiltering.js

@@ -27,15 +27,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;
@@ -46,7 +44,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 = [];