@itwin/itwinui-react 3.0.3 → 3.0.5

package/esm/core/Table/TableRowMemoized.js

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  Box,
-  useIntersection,
-  useMergedRefs,
-  WithCSSTransition,
-} from '../utils/index.js';
+import { Box, useIntersection, useMergedRefs, WithCSSTransition, } from '../utils/index.js';
 import { TableCell } from './TableCell.js';
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
@@ -18,138 +13,73 @@ 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) => {
-  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 = 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: cx(
-        '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 = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      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 = 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: cx('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, {
-          key: cell.getCellProps().key,
-          cell: cell,
-          cellIndex: index,
-          isDisabled: isDisabled,
-          tableHasSubRows: tableHasSubRows,
-          tableInstance: tableInstance,
-          expanderCell: expanderCell,
-          density: density,
-        });
-      }),
-    ),
-    subComponent &&
-      React.createElement(
-        WithCSSTransition,
-        { in: row.isExpanded },
-        React.createElement(
-          Box,
-          {
-            className: cx('iui-table-row', 'iui-table-expanded-content'),
-            'aria-disabled': isDisabled,
-          },
-          subComponent(row),
-        ),
-      ),
-  );
+    };
+    const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { ...mergedProps, ref: refs, onClick: (event) => {
+                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 }));
+        })),
+        subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
+            React.createElement(Box, { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 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));
 };
-export const TableRowMemoized = React.memo(
-  TableRow,
-  (prevProp, nextProp) =>
-    prevProp.isLast === nextProp.isLast &&
+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,
-    ) &&
+        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 &&
@@ -159,8 +89,7 @@ export const 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/esm/core/Table/actionHandlers/expandHandler.js

@@ -1,13 +1,13 @@
 export 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);
 };

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

@@ -1,24 +1,16 @@
-export 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;
+export 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;
 };

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

@@ -4,9 +4,5 @@
  *--------------------------------------------------------------------------------------------*/
 export { onExpandHandler } from './expandHandler.js';
 export { onFilterHandler } from './filterHandler.js';
-export {
-  onToggleHandler,
-  onSingleSelectHandler,
-  onShiftSelectHandler,
-} from './selectHandler.js';
+export { onToggleHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler.js';
 export { onTableResizeStart, onTableResizeEnd } from './resizeHandler.js';

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

@@ -1,15 +1,15 @@
 export const onTableResizeStart = (state) => {
-  return { ...state, isTableResizing: true };
+    return { ...state, isTableResizing: true };
 };
 export const onTableResizeEnd = (state, action) => {
-  return {
-    ...state,
-    isTableResizing: false,
-    columnResizing: {
-      ...state.columnResizing,
-      columnWidths: {
-        ...action.columnWidths,
-      },
-    },
-  };
+    return {
+        ...state,
+        isTableResizing: false,
+        columnResizing: {
+            ...state.columnResizing,
+            columnWidths: {
+                ...action.columnWidths,
+            },
+        },
+    };
 };

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

@@ -5,142 +5,115 @@
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-  if (!instance?.rows.length) {
-    onSelect?.([], newState);
-    return;
-  }
-  const newSelectedRowIds = {};
-  const handleRow = (row) => {
-    if (isRowDisabled?.(row.original)) {
-      return false;
+    if (!instance?.rows.length) {
+        onSelect?.([], newState);
+        return;
     }
-    let isAllSubSelected = true;
-    row.initialSubRows.forEach((subRow) => {
-      const result = handleRow(subRow);
-      if (!result) {
-        isAllSubSelected = false;
-      }
-    });
-    // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
-    // If a row doesn't have sub-rows then check its selection state.
-    // If it has sub-rows then check whether all of them are selected.
-    if (
-      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-      (row.initialSubRows.length && isAllSubSelected)
-    ) {
-      newSelectedRowIds[row.id] = true;
-    }
-    return !!newSelectedRowIds[row.id];
-  };
-  instance.initialRows.forEach((row) => handleRow(row));
-  const selectedData = getSelectedData(newSelectedRowIds, instance);
-  newState.selectedRowIds = newSelectedRowIds;
-  onSelect?.(selectedData, newState);
+    const newSelectedRowIds = {};
+    const handleRow = (row) => {
+        if (isRowDisabled?.(row.original)) {
+            return false;
+        }
+        let isAllSubSelected = true;
+        row.initialSubRows.forEach((subRow) => {
+            const result = handleRow(subRow);
+            if (!result) {
+                isAllSubSelected = false;
+            }
+        });
+        // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
+        // If a row doesn't have sub-rows then check its selection state.
+        // If it has sub-rows then check whether all of them are selected.
+        if ((!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
+            (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
+            (row.initialSubRows.length && isAllSubSelected)) {
+            newSelectedRowIds[row.id] = true;
+        }
+        return !!newSelectedRowIds[row.id];
+    };
+    instance.initialRows.forEach((row) => handleRow(row));
+    const selectedData = getSelectedData(newSelectedRowIds, instance);
+    newState.selectedRowIds = newSelectedRowIds;
+    onSelect?.(selectedData, newState);
 };
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
-export const onToggleHandler = (
-  newState,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
-  newState.lastSelectedRowId = action.id;
+export const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled) => {
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
+    newState.lastSelectedRowId = action.id;
 };
 /**
  * Handles selection when clicked on a row.
  */
-export const onSingleSelectHandler = (
-  state,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  const selectedRowIds = { [action.id]: true };
-  if (instance?.selectSubRows) {
-    const handleRow = (row) => {
-      selectedRowIds[row.id] = true;
-      row.subRows.forEach((r) => handleRow(r));
+export const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
+    const selectedRowIds = { [action.id]: true };
+    if (instance?.selectSubRows) {
+        const handleRow = (row) => {
+            selectedRowIds[row.id] = true;
+            row.subRows.forEach((r) => handleRow(r));
+        };
+        handleRow(instance.rowsById[action.id]);
+    }
+    const newState = {
+        ...state,
+        lastSelectedRowId: action.id,
+        selectedRowIds,
     };
-    handleRow(instance.rowsById[action.id]);
-  }
-  const newState = {
-    ...state,
-    lastSelectedRowId: action.id,
-    selectedRowIds,
-  };
-  // Passing to `onSelectHandler` to handle filtered sub-rows
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  return newState;
+    // Passing to `onSelectHandler` to handle filtered sub-rows
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    return newState;
 };
 /**
  * Handles selection when clicked on a row while shift key is pressed.
  */
-export const onShiftSelectHandler = (
-  state,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  if (instance == null) {
-    return state;
-  }
-  let startIndex = Math.max(
-    0,
-    instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId),
-  );
-  let endIndex = Math.max(
-    0,
-    instance.flatRows.findIndex((row) => row.id === action.id),
-  );
-  if (startIndex > endIndex) {
-    const temp = startIndex;
-    startIndex = endIndex;
-    endIndex = temp;
-  }
-  const isLastSelectedRowIdSelected =
-    state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
-    !!state.selectedRowIds[state.lastSelectedRowId];
-  // If ctrl + shift click, do not lose previous selection
-  // If shift click, start new selection
-  const selectedRowIds = !!action.ctrlPressed
-    ? { ...state.selectedRowIds }
-    : {};
-  // 1. All rows between start and end are assigned the state of the last selected row
-  instance.flatRows
-    .slice(startIndex, endIndex + 1)
-    .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
-  // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
-  // Since lastRow's children come after endIndex + 1 (not selected in step 1)
-  const handleRow = (row) => {
-    selectedRowIds[row.id] = isLastSelectedRowIdSelected;
-    row.subRows.forEach((r) => handleRow(r));
-  };
-  handleRow(instance.flatRows[endIndex]);
-  const newState = {
-    ...state,
-    selectedRowIds,
-  };
-  // 3.1 Deselect all selected disabled rows and their children
-  // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  return newState;
+export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
+    if (instance == null) {
+        return state;
+    }
+    let startIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId));
+    let endIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === action.id));
+    if (startIndex > endIndex) {
+        const temp = startIndex;
+        startIndex = endIndex;
+        endIndex = temp;
+    }
+    const isLastSelectedRowIdSelected = state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
+        !!state.selectedRowIds[state.lastSelectedRowId];
+    // If ctrl + shift click, do not lose previous selection
+    // If shift click, start new selection
+    const selectedRowIds = !!action.ctrlPressed
+        ? { ...state.selectedRowIds }
+        : {};
+    // 1. All rows between start and end are assigned the state of the last selected row
+    instance.flatRows
+        .slice(startIndex, endIndex + 1)
+        .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
+    // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
+    // Since lastRow's children come after endIndex + 1 (not selected in step 1)
+    const handleRow = (row) => {
+        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
+        row.subRows.forEach((r) => handleRow(r));
+    };
+    handleRow(instance.flatRows[endIndex]);
+    const newState = {
+        ...state,
+        selectedRowIds,
+    };
+    // 3.1 Deselect all selected disabled rows and their children
+    // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    return newState;
 };
 const getSelectedData = (selectedRowIds, instance) => {
-  const selectedData = [];
-  const setSelectedData = (row) => {
-    if (selectedRowIds[row.id]) {
-      selectedData.push(row.original);
-    }
-    row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
-  };
-  instance?.initialRows.forEach((row) => setSelectedData(row));
-  return selectedData;
+    const selectedData = [];
+    const setSelectedData = (row) => {
+        if (selectedRowIds[row.id]) {
+            selectedData.push(row.original);
+        }
+        row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
+    };
+    instance?.initialRows.forEach((row) => setSelectedData(row));
+    return selectedData;
 };

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

@@ -17,47 +17,12 @@ import { Box } from '../../utils/index.js';
  * }
  */
 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?.(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,
-      ),
-  );
+    // 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?.(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)));
 };
 export default DefaultCell;