@itwin/itwinui-react 3.11.3 → 3.12.1

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

@@ -1,119 +1,123 @@
-/**
- * Handles subrow selection and validation.
- * - Calls onSelect() with selected data
- * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
- * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
- */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-    if (!instance?.rows.length) {
-        onSelect?.([], newState);
-        return;
+  if (!instance?.rows.length) {
+    onSelect?.([], newState);
+    return;
+  }
+  const newSelectedRowIds = {};
+  const handleRow = (row) => {
+    if (isRowDisabled?.(row.original)) {
+      return false;
     }
-    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;
-};
-/**
- * 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));
-        };
-        handleRow(instance.rowsById[action.id]);
+    let isAllSubSelected = true;
+    row.initialSubRows.forEach((subRow) => {
+      const result = handleRow(subRow);
+      if (!result) {
+        isAllSubSelected = false;
+      }
+    });
+    if (
+      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
+      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
+      (row.initialSubRows.length && isAllSubSelected)
+    ) {
+      newSelectedRowIds[row.id] = true;
     }
-    const newState = {
-        ...state,
-        lastSelectedRowId: action.id,
-        selectedRowIds,
-    };
-    // Passing to `onSelectHandler` to handle filtered sub-rows
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    return newState;
+    return !!newSelectedRowIds[row.id];
+  };
+  instance.initialRows.forEach((row) => handleRow(row));
+  const selectedData = getSelectedData(newSelectedRowIds, instance);
+  newState.selectedRowIds = newSelectedRowIds;
+  onSelect?.(selectedData, 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)
+export const onToggleHandler = (
+  newState,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  newState.lastSelectedRowId = action.id;
+};
+export const onSingleSelectHandler = (
+  state,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  const selectedRowIds = {
+    [action.id]: true,
+  };
+  if (instance?.selectSubRows) {
     const handleRow = (row) => {
-        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
-        row.subRows.forEach((r) => handleRow(r));
-    };
-    handleRow(instance.flatRows[endIndex]);
-    const newState = {
-        ...state,
-        selectedRowIds,
+      selectedRowIds[row.id] = true;
+      row.subRows.forEach((r) => handleRow(r));
     };
-    // 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;
+    handleRow(instance.rowsById[action.id]);
+  }
+  const newState = {
+    ...state,
+    lastSelectedRowId: action.id,
+    selectedRowIds,
+  };
+  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 ||
+    !!state.selectedRowIds[state.lastSelectedRowId];
+  const selectedRowIds = !!action.ctrlPressed
+    ? {
+        ...state.selectedRowIds,
+      }
+    : {};
+  instance.flatRows
+    .slice(startIndex, endIndex + 1)
+    .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
+  const handleRow = (row) => {
+    selectedRowIds[row.id] = isLastSelectedRowIdSelected;
+    row.subRows.forEach((r) => handleRow(r));
+  };
+  handleRow(instance.flatRows[endIndex]);
+  const newState = {
+    ...state,
+    selectedRowIds,
+  };
+  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

@@ -1,36 +1,84 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
 import { TableColumnsContext } from '../utils.js';
-/**
- * Default cell.
- * It should be passed to `cellRenderer`.
- * It can can be used to pass native HTML attributes to the cell container.
- * @example
- * {
- *   Header: 'Name',
- *   accessor: 'name',
- *   cellRenderer: (props) => <DefaultCell {...props} />,
- * }
- */
 export const DefaultCell = (props) => {
-    const columnsProp = React.useContext(TableColumnsContext);
-    const isCustomCell = React.useMemo(() => columnsProp
+  const columnsProp = React.useContext(TableColumnsContext);
+  const isCustomCell = React.useMemo(
+    () =>
+      columnsProp
         .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'), [props.cellProps.column.id, columnsProp]);
-    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = typeof cellProps.value === 'string' && !isCustomCell, ...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 } },
-        React.createElement(ShadowRoot, null,
-            React.createElement("slot", { name: 'start' }),
-            clamp ? (React.createElement(LineClamp, null,
-                React.createElement("slot", null))) : (React.createElement("slot", null)),
-            React.createElement("slot", { name: 'end' }),
-            React.createElement("slot", { name: 'shadows' })),
-        startIcon && (React.createElement(Box, { className: 'iui-table-cell-start-icon', slot: 'start' }, startIcon)),
-        children,
-        endIcon && (React.createElement(Box, { className: 'iui-table-cell-end-icon', slot: 'end' }, endIcon))));
+        ?.hasOwnProperty('Cell'),
+    [props.cellProps.column.id, columnsProp],
+  );
+  const {
+    cellElementProps: {
+      className: cellElementClassName,
+      style: cellElementStyle,
+      ...cellElementProps
+    },
+    children,
+    startIcon,
+    endIcon,
+    cellProps,
+    isDisabled,
+    className,
+    style,
+    status,
+    clamp = typeof cellProps.value === 'string' && !isCustomCell,
+    ...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,
+      },
+    },
+    React.createElement(
+      ShadowRoot,
+      null,
+      React.createElement('slot', {
+        name: 'start',
+      }),
+      clamp
+        ? React.createElement(
+            LineClamp,
+            null,
+            React.createElement('slot', null),
+          )
+        : React.createElement('slot', null),
+      React.createElement('slot', {
+        name: 'end',
+      }),
+      React.createElement('slot', {
+        name: 'shadows',
+      }),
+    ),
+    startIcon &&
+      React.createElement(
+        Box,
+        {
+          className: 'iui-table-cell-start-icon',
+          slot: 'start',
+        },
+        startIcon,
+      ),
+    children,
+    endIcon &&
+      React.createElement(
+        Box,
+        {
+          className: 'iui-table-cell-end-icon',
+          slot: 'end',
+        },
+        endIcon,
+      ),
+  );
 };

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

@@ -1,60 +1,82 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box, getRandomValue } from '../../../utils/index.js';
 import cx from 'classnames';
-/**
- * Editable cell.
- * It should be passed to `cellRenderer`.
- * @example
- * {
- *   Header: 'Name',
- *   accessor: 'name',
- *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
- * }
- */
 export const EditableCell = (props) => {
-    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
-    isDisabled; // To omit and prevent eslint error.
-    const sanitizeString = (text) => {
-        return text.replace(/(\r\n|\n|\r)+/gm, ' ');
-    };
-    const [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
-    React.useEffect(() => {
-        setValue(sanitizeString(cellProps.value));
-    }, [cellProps.value]);
-    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, className: cx(cellElementClassName, className), style: { ...cellElementStyle, ...style }, onInput: (e) => {
-            setValue(sanitizeString(e.target.innerText));
-            setIsDirty(true);
-            props.onInput?.(e);
-        }, onBlur: (e) => {
-            if (isDirty) {
-                onCellEdit(cellProps.column.id, value, cellProps.row.original);
-            }
-            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) => {
-            // Prevents from adding HTML elements (div, br) inside a cell on Enter press
-            if (e.key === 'Enter') {
-                e.preventDefault();
-            }
-            props.onKeyDown?.(e);
-        }, onPaste: (e) => {
-            e.preventDefault();
-            document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
-            props.onPaste?.(e);
-        }, onDrop: (e) => {
-            // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
-            e.preventDefault();
-            props.onDrop?.(e);
-        }, onClick: (e) => {
-            e.stopPropagation();
-            props.onClick?.(e);
-        } }, children));
+  const {
+    cellElementProps: {
+      className: cellElementClassName,
+      style: cellElementStyle,
+      ...cellElementProps
+    },
+    cellProps,
+    onCellEdit,
+    children,
+    isDisabled,
+    className,
+    style,
+    ...rest
+  } = props;
+  isDisabled;
+  const sanitizeString = (text) => {
+    return text.replace(/(\r\n|\n|\r)+/gm, ' ');
+  };
+  const [value, setValue] = React.useState(() =>
+    sanitizeString(cellProps.value),
+  );
+  React.useEffect(() => {
+    setValue(sanitizeString(cellProps.value));
+  }, [cellProps.value]);
+  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,
+      className: cx(cellElementClassName, className),
+      style: {
+        ...cellElementStyle,
+        ...style,
+      },
+      onInput: (e) => {
+        setValue(sanitizeString(e.target.innerText));
+        setIsDirty(true);
+        props.onInput?.(e);
+      },
+      onBlur: (e) => {
+        if (isDirty) {
+          onCellEdit(cellProps.column.id, value, cellProps.row.original);
+        }
+        props.onBlur?.(e);
+        setKey(getRandomValue(10));
+      },
+      onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+        }
+        props.onKeyDown?.(e);
+      },
+      onPaste: (e) => {
+        e.preventDefault();
+        document.execCommand(
+          'inserttext',
+          false,
+          sanitizeString(e.clipboardData.getData('text/plain')),
+        );
+        props.onPaste?.(e);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        props.onDrop?.(e);
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        props.onClick?.(e);
+      },
+    },
+    children,
+  );
 };

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

@@ -1,6 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 export { DefaultCell } from './DefaultCell.js';
 export { EditableCell } from './EditableCell.js';

package/esm/core/Table/columns/actionColumn.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { HeaderProps } from '../../../react-table/react-table.js';
-import type { DropdownMenuProps } from '../../DropdownMenu/DropdownMenu.js';
+import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
 type ActionColumnProps = {
     columnManager?: boolean | {
-        dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+        dropdownMenuProps: Omit<React.ComponentPropsWithoutRef<typeof DropdownMenu>, 'menuItems' | 'children'>;
     };
 };
 /**