@itwin/itwinui-react 3.0.4 → 3.0.5

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

@@ -15,75 +15,46 @@ import { Box, getRandomValue } from '../../utils/index.js';
  * }
  */
 export const EditableCell = (props) => {
-  const {
-    cellElementProps,
-    cellProps,
-    onCellEdit,
-    children,
-    isDisabled,
-    ...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,
-      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, cellProps, onCellEdit, children, isDisabled, ...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, 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));
 };
 export default EditableCell;

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

@@ -31,90 +31,60 @@ const ACTION_CELL_ID = 'iui-table-action';
  *   ),
  * },
  */
-export const ActionColumn = ({ columnManager = false } = {}) => {
-  return {
-    id: ACTION_CELL_ID,
-    disableResizing: true,
-    disableGroupBy: true,
-    minWidth: 48,
-    width: 48,
-    maxWidth: 48,
-    columnClassName: 'iui-slot',
-    cellClassName: 'iui-slot',
-    disableReordering: true,
-    Header: ({ allColumns, dispatch, state }) => {
-      const [isOpen, setIsOpen] = React.useState(false);
-      const buttonRef = React.useRef(null);
-      if (!columnManager) {
-        return null;
-      }
-      const defaultColumnIds = [
-        SELECTION_CELL_ID,
-        EXPANDER_CELL_ID,
-        ACTION_CELL_ID,
-      ];
-      const headerCheckBoxes = () =>
-        allColumns
-          //Filters out any default columns made such as selection and expansion
-          .filter(({ id }) => !defaultColumnIds.includes(id))
-          .map((column) => {
-            const { checked } = column.getToggleHiddenProps();
-            const onClick = () => {
-              column.toggleHidden(checked);
-              // If no column was resized then leave table resize handling to the flexbox
-              if (Object.keys(state.columnResizing.columnWidths).length === 0) {
-                return;
-              }
-              // Triggers an update to resize the widths of all visible columns
-              dispatch({ type: tableResizeStartAction });
-              // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
-              // 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(() => {
-                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,
-              },
-              React.createElement(
-                'div',
-                { id: `iui-column-${column.id}` },
-                column.render('Header'),
-              ),
-            );
-          });
-      const dropdownMenuProps =
-        typeof columnManager !== 'boolean'
-          ? columnManager.dropdownMenuProps
-          : {};
-      return React.createElement(
-        DropdownMenu,
-        {
-          ...dropdownMenuProps,
-          menuItems: headerCheckBoxes,
-          onVisibleChange: (open) => {
-            setIsOpen(open);
-            dropdownMenuProps?.onVisibleChange?.(open);
-          },
+export const ActionColumn = ({ columnManager = false, } = {}) => {
+    return {
+        id: ACTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        disableReordering: true,
+        Header: ({ allColumns, dispatch, state }) => {
+            const [isOpen, setIsOpen] = React.useState(false);
+            const buttonRef = React.useRef(null);
+            if (!columnManager) {
+                return null;
+            }
+            const defaultColumnIds = [
+                SELECTION_CELL_ID,
+                EXPANDER_CELL_ID,
+                ACTION_CELL_ID,
+            ];
+            const headerCheckBoxes = () => allColumns
+                //Filters out any default columns made such as selection and expansion
+                .filter(({ id }) => !defaultColumnIds.includes(id))
+                .map((column) => {
+                const { checked } = column.getToggleHiddenProps();
+                const onClick = () => {
+                    column.toggleHidden(checked);
+                    // If no column was resized then leave table resize handling to the flexbox
+                    if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                        return;
+                    }
+                    // Triggers an update to resize the widths of all visible columns
+                    dispatch({ type: tableResizeStartAction });
+                    // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+                    // 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(() => {
+                        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 },
+                    React.createElement("div", { id: `iui-column-${column.id}` }, column.render('Header'))));
+            });
+            const dropdownMenuProps = typeof columnManager !== 'boolean'
+                ? columnManager.dropdownMenuProps
+                : {};
+            return (React.createElement(DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onVisibleChange: (open) => {
+                    setIsOpen(open);
+                    dropdownMenuProps?.onVisibleChange?.(open);
+                } },
+                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
+                    React.createElement(SvgColumnManager, null))));
         },
-        React.createElement(
-          IconButton,
-          { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
-          React.createElement(SvgColumnManager, null),
-        ),
-      );
-    },
-  };
+    };
 };

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

@@ -31,43 +31,29 @@ export const EXPANDER_CELL_ID = 'iui-table-expander';
  * ], [isExpanderDisabled, subComponent]);
  */
 export const ExpanderColumn = (props = {}) => {
-  const { subComponent, isDisabled } = props;
-  return {
-    id: EXPANDER_CELL_ID,
-    disableResizing: true,
-    disableGroupBy: true,
-    disableReordering: true,
-    minWidth: 48,
-    width: 48,
-    maxWidth: 48,
-    columnClassName: 'iui-slot',
-    cellClassName: 'iui-slot',
-    Cell: (props) => {
-      const { row } = props;
-      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?.(props.row.original),
-            'aria-expanded': row.isExpanded,
-          },
-          React.createElement(SvgChevronRight, null),
-        );
-      }
-    },
-    cellRenderer: (props) =>
-      React.createElement(DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!isDisabled?.(rowData),
-      }),
-  };
+    const { subComponent, isDisabled } = props;
+    return {
+        id: EXPANDER_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Cell: (props) => {
+            const { row } = props;
+            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?.(props.row.original), "aria-expanded": row.isExpanded }, React.createElement(SvgChevronRight, null)));
+            }
+        },
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
+    };
 };

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

@@ -19,55 +19,27 @@ export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  * ], [isCheckboxDisabled]);
  */
 export const SelectionColumn = (props = {}) => {
-  const { isDisabled, density } = props;
-  const densityWidth =
-    density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
-  return {
-    id: SELECTION_CELL_ID,
-    disableResizing: true,
-    disableGroupBy: true,
-    disableReordering: true,
-    minWidth: densityWidth,
-    width: densityWidth,
-    maxWidth: densityWidth,
-    columnClassName: 'iui-slot',
-    cellClassName: 'iui-slot',
-    Header: ({
-      getToggleAllRowsSelectedProps,
-      toggleAllRowsSelected,
-      rows,
-      initialRows,
-      state,
-    }) => {
-      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?.(row.original),
-        onClick: (e) => e.stopPropagation(),
-      }),
-    cellRenderer: (props) =>
-      React.createElement(DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!isDisabled?.(rowData),
-      }),
-  };
+    const { isDisabled, density } = props;
+    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
+    return {
+        id: SELECTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: densityWidth,
+        width: densityWidth,
+        maxWidth: densityWidth,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
+            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?.(row.original), onClick: (e) => e.stopPropagation() })),
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
+    };
 };

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

@@ -20,19 +20,11 @@ import { Box, useGlobals } from '../../utils/index.js';
  * </BaseFilter>
  */
 export const BaseFilter = (props) => {
-  const { children, className, style, id } = props;
-  useGlobals();
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-table-column-filter', className),
-      style: style,
-      // Prevents from triggering sort
-      onClick: (e) => {
-        e.stopPropagation();
-      },
-      id: id,
-    },
-    children,
-  );
+    const { children, className, style, id } = props;
+    useGlobals();
+    return (React.createElement(Box, { className: cx('iui-table-column-filter', className), style: style, 
+        // Prevents from triggering sort
+        onClick: (e) => {
+            e.stopPropagation();
+        }, id: id }, children));
 };

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

@@ -10,112 +10,47 @@ import { Label } from '../../../Label/Label.js';
 import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
 import { Popover } from '../../../Popover/Popover.js';
 const DatePickerInput = React.forwardRef((props, forwardedRef) => {
-  const uid = useId();
-  const {
-    onChange,
-    date,
-    parseInput,
-    formatDate,
-    label,
-    required,
-    disabled,
-    isFromOrTo,
-    selectedDate,
-    wrapperProps,
-    labelProps,
-    inputWrapperProps,
-    id = uid,
-    localizedNames,
-    ...rest
-  } = props;
-  const isDateDisabled = (date) => {
-    if (isFromOrTo === 'to') {
-      return isBefore(date, selectedDate);
-    } else {
-      return isBefore(selectedDate, date);
-    }
-  };
-  const buttonRef = React.useRef(null);
-  const [inputValue, setInputValue] = React.useState('');
-  React.useEffect(() => {
-    if (date && !isNaN(date.valueOf())) {
-      setInputValue(formatDate(date));
-    }
-  }, [date, formatDate]);
-  const [isVisible, setIsVisible] = React.useState(false);
-  const close = React.useCallback(() => setIsVisible(false), []);
-  const onDateSelected = React.useCallback(
-    (date) => {
-      onChange(date);
-      close();
-      buttonRef.current?.focus();
-    },
-    [close, onChange],
-  );
-  const onInputChange = React.useCallback(
-    (event) => {
-      const value = event.target.value;
-      setInputValue(value);
-      if (!value) {
-        onChange(undefined);
-      }
-      const parsedDate = parseInput(value);
-      if (parsedDate && !isNaN(parsedDate.valueOf())) {
-        onChange(parsedDate);
-      }
-    },
-    [onChange, parseInput],
-  );
-  return React.createElement(
-    InputGrid,
-    { labelPlacement: 'inline', ...wrapperProps },
-    React.createElement(
-      Label,
-      {
-        as: 'label',
-        required: required,
-        disabled: disabled,
-        htmlFor: id,
-        ...labelProps,
-      },
-      label,
-    ),
-    React.createElement(
-      InputWithDecorations,
-      { ...inputWrapperProps },
-      React.createElement(InputWithDecorations.Input, {
-        id: id,
-        value: inputValue,
-        onChange: onInputChange,
-        required: required,
-        disabled: disabled,
-        ref: forwardedRef,
-        ...rest,
-      }),
-      React.createElement(
-        Popover,
-        {
-          content: React.createElement(DatePicker, {
-            date: date,
-            onChange: onDateSelected,
-            setFocus: true,
-            isDateDisabled: isDateDisabled,
-            localizedNames: localizedNames,
-            applyBackground: false,
-          }),
-          placement: 'bottom-end',
-          visible: isVisible,
-          onVisibleChange: setIsVisible,
-          closeOnOutsideClick: true,
-          applyBackground: true,
-        },
-        React.createElement(
-          InputWithDecorations.Button,
-          { 'aria-label': 'Date picker', ref: buttonRef },
-          React.createElement(SvgCalendar, null),
-        ),
-      ),
-    ),
-  );
+    const uid = useId();
+    const { onChange, date, parseInput, formatDate, label, required, disabled, isFromOrTo, selectedDate, wrapperProps, labelProps, inputWrapperProps, id = uid, localizedNames, ...rest } = props;
+    const isDateDisabled = (date) => {
+        if (isFromOrTo === 'to') {
+            return isBefore(date, selectedDate);
+        }
+        else {
+            return isBefore(selectedDate, date);
+        }
+    };
+    const buttonRef = React.useRef(null);
+    const [inputValue, setInputValue] = React.useState('');
+    React.useEffect(() => {
+        if (date && !isNaN(date.valueOf())) {
+            setInputValue(formatDate(date));
+        }
+    }, [date, formatDate]);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const close = React.useCallback(() => setIsVisible(false), []);
+    const onDateSelected = React.useCallback((date) => {
+        onChange(date);
+        close();
+        buttonRef.current?.focus();
+    }, [close, onChange]);
+    const onInputChange = React.useCallback((event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        if (!value) {
+            onChange(undefined);
+        }
+        const parsedDate = parseInput(value);
+        if (parsedDate && !isNaN(parsedDate.valueOf())) {
+            onChange(parsedDate);
+        }
+    }, [onChange, parseInput]);
+    return (React.createElement(InputGrid, { labelPlacement: 'inline', ...wrapperProps },
+        React.createElement(Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label),
+        React.createElement(InputWithDecorations, { ...inputWrapperProps },
+            React.createElement(InputWithDecorations.Input, { id: id, value: inputValue, onChange: onInputChange, required: required, disabled: disabled, ref: forwardedRef, ...rest }),
+            React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled, localizedNames: localizedNames, applyBackground: false }), placement: 'bottom-end', visible: isVisible, onVisibleChange: setIsVisible, closeOnOutsideClick: true, applyBackground: true },
+                React.createElement(InputWithDecorations.Button, { "aria-label": 'Date picker', ref: buttonRef },
+                    React.createElement(SvgCalendar, null))))));
 });
 export default DatePickerInput;