@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/Table/TableRowMemoized.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRowMemoized = exports.TableRow = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const TableCell_js_1 = require('./TableCell.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const TableCell_js_1 = require("./TableCell.js");
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
  * Using `isLast` here instead of passing data length to avoid re-renders of all rows when more data is added. Now only the last row re-renders.
@@ -17,146 +17,74 @@ const TableCell_js_1 = require('./TableCell.js');
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 const TableRow = (props) => {
-  const {
-    row,
-    rowProps,
-    isLast,
-    onRowInViewport,
-    onBottomReached,
-    intersectionMargin,
-    onClick,
-    subComponent,
-    isDisabled,
-    tableHasSubRows,
-    tableInstance,
-    expanderCell,
-    bodyRef,
-    tableRowRef,
-    density,
-  } = props;
-  const onIntersect = React.useCallback(() => {
-    onRowInViewport.current?.(row.original);
-    isLast && onBottomReached.current?.();
-  }, [isLast, onBottomReached, onRowInViewport, row.original]);
-  const intersectionRoot = React.useMemo(() => {
-    const isTableBodyScrollable =
-      (bodyRef?.scrollHeight ?? 0) > (bodyRef?.offsetHeight ?? 0);
-    // If table body is scrollable, make it the intersection root
-    if (isTableBodyScrollable) {
-      return bodyRef;
-    }
-    // Otherwise, make the viewport the intersection root
-    return undefined;
-  }, [bodyRef]);
-  const intersectionRef = (0, index_js_1.useIntersection)(onIntersect, {
-    rootMargin: `${intersectionMargin}px`,
-    root: intersectionRoot,
-  });
-  const userRowProps = rowProps?.(row) ?? {};
-  const { status, isLoading, ...restUserRowProps } = userRowProps;
-  const mergedProps = {
-    ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
-    ...restUserRowProps,
-    ...{
-      className: (0, classnames_1.default)(
-        'iui-table-row',
-        {
-          'iui-table-row-expanded': row.isExpanded && subComponent,
-          'iui-loading': isLoading,
-        },
-        userRowProps?.className,
-      ),
-      'aria-selected': row.isSelected || undefined,
-      'aria-disabled': isDisabled || undefined,
-      'data-iui-status': status,
-    },
-  };
-  const refs = (0, index_js_1.useMergedRefs)(
-    intersectionRef,
-    mergedProps.ref,
-    tableRowRef,
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      index_js_1.Box,
-      {
-        ...mergedProps,
-        ref: refs,
-        onClick: (event) => {
-          mergedProps?.onClick?.(event);
-          onClick?.(event, row);
+    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
+    const onIntersect = React.useCallback(() => {
+        onRowInViewport.current?.(row.original);
+        isLast && onBottomReached.current?.();
+    }, [isLast, onBottomReached, onRowInViewport, row.original]);
+    const intersectionRoot = React.useMemo(() => {
+        const isTableBodyScrollable = (bodyRef?.scrollHeight ?? 0) > (bodyRef?.offsetHeight ?? 0);
+        // If table body is scrollable, make it the intersection root
+        if (isTableBodyScrollable) {
+            return bodyRef;
+        }
+        // Otherwise, make the viewport the intersection root
+        return undefined;
+    }, [bodyRef]);
+    const intersectionRef = (0, index_js_1.useIntersection)(onIntersect, {
+        rootMargin: `${intersectionMargin}px`,
+        root: intersectionRoot,
+    });
+    const userRowProps = rowProps?.(row) ?? {};
+    const { status, isLoading, ...restUserRowProps } = userRowProps;
+    const mergedProps = {
+        ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
+        ...restUserRowProps,
+        ...{
+            className: (0, classnames_1.default)('iui-table-row', {
+                'iui-table-row-expanded': row.isExpanded && subComponent,
+                'iui-loading': isLoading,
+            }, userRowProps?.className),
+            'aria-selected': row.isSelected || undefined,
+            'aria-disabled': isDisabled || undefined,
+            'data-iui-status': status,
         },
-      },
-      row.cells.map((cell, index) => {
-        return React.createElement(TableCell_js_1.TableCell, {
-          key: cell.getCellProps().key,
-          cell: cell,
-          cellIndex: index,
-          isDisabled: isDisabled,
-          tableHasSubRows: tableHasSubRows,
-          tableInstance: tableInstance,
-          expanderCell: expanderCell,
-          density: density,
-        });
-      }),
-    ),
-    subComponent &&
-      React.createElement(
-        index_js_1.WithCSSTransition,
-        { in: row.isExpanded },
-        React.createElement(
-          index_js_1.Box,
-          {
-            className: (0, classnames_1.default)(
-              'iui-table-row',
-              'iui-table-expanded-content',
-            ),
-            'aria-disabled': isDisabled,
-          },
-          subComponent(row),
-        ),
-      ),
-  );
+    };
+    const refs = (0, index_js_1.useMergedRefs)(intersectionRef, mergedProps.ref, tableRowRef);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.Box, { ...mergedProps, ref: refs, onClick: (event) => {
+                mergedProps?.onClick?.(event);
+                onClick?.(event, row);
+            } }, row.cells.map((cell, index) => {
+            return (React.createElement(TableCell_js_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
+        })),
+        subComponent && (React.createElement(index_js_1.WithCSSTransition, { in: row.isExpanded },
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 exports.TableRow = TableRow;
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
-  if (selectedRowIds?.[row.id]) {
-    return true;
-  }
-  return row.subRows.some((subRow) =>
-    hasAnySelectedSubRow(subRow, selectedRowIds),
-  );
+    if (selectedRowIds?.[row.id]) {
+        return true;
+    }
+    return row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, selectedRowIds));
 };
-exports.TableRowMemoized = React.memo(
-  exports.TableRow,
-  (prevProp, nextProp) =>
-    prevProp.isLast === nextProp.isLast &&
+exports.TableRowMemoized = React.memo(exports.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,
-    ) &&
+        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] &&
+        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.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] &&
+        nextProp.state.expanded?.[nextProp.row.id] &&
     prevProp.subComponent === nextProp.subComponent &&
-    prevProp.row.cells.every(
-      (cell, index) => nextProp.row.cells[index].column === cell.column,
-    ) &&
+    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 &&
@@ -166,8 +94,7 @@ exports.TableRowMemoized = React.memo(
     !nextProp.state.columnResizing.isResizingColumn &&
     prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
     prevProp.state.sticky.isScrolledToLeft ===
-      nextProp.state.sticky.isScrolledToLeft &&
+        nextProp.state.sticky.isScrolledToLeft &&
     prevProp.state.sticky.isScrolledToRight ===
-      nextProp.state.sticky.isScrolledToRight &&
-    prevProp.density === nextProp.density,
-);
+        nextProp.state.sticky.isScrolledToRight &&
+    prevProp.density === nextProp.density);

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

@@ -1,17 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.onExpandHandler = void 0;
 const onExpandHandler = (newState, instance, onExpand) => {
-  if (!instance?.preFilteredFlatRows.length) {
-    onExpand?.([], newState);
-    return;
-  }
-  const expandedData = [];
-  instance.preFilteredFlatRows.forEach((row) => {
-    if (newState.expanded[row.id]) {
-      expandedData.push(row.original);
+    if (!instance?.preFilteredFlatRows.length) {
+        onExpand?.([], newState);
+        return;
     }
-  });
-  onExpand?.(expandedData, newState);
+    const expandedData = [];
+    instance.preFilteredFlatRows.forEach((row) => {
+        if (newState.expanded[row.id]) {
+            expandedData.push(row.original);
+        }
+    });
+    onExpand?.(expandedData, newState);
 };
 exports.onExpandHandler = onExpandHandler;

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

@@ -1,28 +1,20 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.onFilterHandler = void 0;
-const onFilterHandler = (
-  newState,
-  action,
-  previousState,
-  currentFilter,
-  instance,
-) => {
-  const previousFilter = previousState.filters.find(
-    (f) => f.id === action.columnId,
-  );
-  if (previousFilter?.value != action.filterValue) {
-    const filters = newState.filters.map((f) => {
-      const column = instance?.allColumns.find((c) => c.id === f.id);
-      return {
-        id: f.id,
-        value: f.value,
-        fieldType: column?.fieldType ?? 'text',
-        filterType: column?.filter ?? 'text',
-      };
-    });
-    return filters;
-  }
-  return currentFilter;
+const onFilterHandler = (newState, action, previousState, currentFilter, instance) => {
+    const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
+    if (previousFilter?.value != action.filterValue) {
+        const filters = newState.filters.map((f) => {
+            const column = instance?.allColumns.find((c) => c.id === f.id);
+            return {
+                id: f.id,
+                value: f.value,
+                fieldType: column?.fieldType ?? 'text',
+                filterType: column?.filter ?? 'text',
+            };
+        });
+        return filters;
+    }
+    return currentFilter;
 };
 exports.onFilterHandler = onFilterHandler;

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

@@ -1,60 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.onTableResizeEnd =
-  exports.onTableResizeStart =
-  exports.onShiftSelectHandler =
-  exports.onSingleSelectHandler =
-  exports.onToggleHandler =
-  exports.onFilterHandler =
-  exports.onExpandHandler =
-    void 0;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onTableResizeEnd = exports.onTableResizeStart = exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleHandler = exports.onFilterHandler = exports.onExpandHandler = 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 expandHandler_js_1 = require('./expandHandler.js');
-Object.defineProperty(exports, 'onExpandHandler', {
-  enumerable: true,
-  get: function () {
-    return expandHandler_js_1.onExpandHandler;
-  },
-});
-var filterHandler_js_1 = require('./filterHandler.js');
-Object.defineProperty(exports, 'onFilterHandler', {
-  enumerable: true,
-  get: function () {
-    return filterHandler_js_1.onFilterHandler;
-  },
-});
-var selectHandler_js_1 = require('./selectHandler.js');
-Object.defineProperty(exports, 'onToggleHandler', {
-  enumerable: true,
-  get: function () {
-    return selectHandler_js_1.onToggleHandler;
-  },
-});
-Object.defineProperty(exports, 'onSingleSelectHandler', {
-  enumerable: true,
-  get: function () {
-    return selectHandler_js_1.onSingleSelectHandler;
-  },
-});
-Object.defineProperty(exports, 'onShiftSelectHandler', {
-  enumerable: true,
-  get: function () {
-    return selectHandler_js_1.onShiftSelectHandler;
-  },
-});
-var resizeHandler_js_1 = require('./resizeHandler.js');
-Object.defineProperty(exports, 'onTableResizeStart', {
-  enumerable: true,
-  get: function () {
-    return resizeHandler_js_1.onTableResizeStart;
-  },
-});
-Object.defineProperty(exports, 'onTableResizeEnd', {
-  enumerable: true,
-  get: function () {
-    return resizeHandler_js_1.onTableResizeEnd;
-  },
-});
+var expandHandler_js_1 = require("./expandHandler.js");
+Object.defineProperty(exports, "onExpandHandler", { enumerable: true, get: function () { return expandHandler_js_1.onExpandHandler; } });
+var filterHandler_js_1 = require("./filterHandler.js");
+Object.defineProperty(exports, "onFilterHandler", { enumerable: true, get: function () { return filterHandler_js_1.onFilterHandler; } });
+var selectHandler_js_1 = require("./selectHandler.js");
+Object.defineProperty(exports, "onToggleHandler", { enumerable: true, get: function () { return selectHandler_js_1.onToggleHandler; } });
+Object.defineProperty(exports, "onSingleSelectHandler", { enumerable: true, get: function () { return selectHandler_js_1.onSingleSelectHandler; } });
+Object.defineProperty(exports, "onShiftSelectHandler", { enumerable: true, get: function () { return selectHandler_js_1.onShiftSelectHandler; } });
+var resizeHandler_js_1 = require("./resizeHandler.js");
+Object.defineProperty(exports, "onTableResizeStart", { enumerable: true, get: function () { return resizeHandler_js_1.onTableResizeStart; } });
+Object.defineProperty(exports, "onTableResizeEnd", { enumerable: true, get: function () { return resizeHandler_js_1.onTableResizeEnd; } });

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

@@ -1,20 +1,20 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.onTableResizeEnd = exports.onTableResizeStart = void 0;
 const onTableResizeStart = (state) => {
-  return { ...state, isTableResizing: true };
+    return { ...state, isTableResizing: true };
 };
 exports.onTableResizeStart = onTableResizeStart;
 const onTableResizeEnd = (state, action) => {
-  return {
-    ...state,
-    isTableResizing: false,
-    columnResizing: {
-      ...state.columnResizing,
-      columnWidths: {
-        ...action.columnWidths,
-      },
-    },
-  };
+    return {
+        ...state,
+        isTableResizing: false,
+        columnResizing: {
+            ...state.columnResizing,
+            columnWidths: {
+                ...action.columnWidths,
+            },
+        },
+    };
 };
 exports.onTableResizeEnd = onTableResizeEnd;