@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -1,55 +1,75 @@
 import * as React from 'react';
 import { Box, getRandomValue } from '../../../utils/index.js';
 import cx from 'classnames';
-export const EditableCell = (props)=>{
-    let { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
-    let sanitizeString = (text)=>text.replace(/(\r\n|\n|\r)+/gm, ' ');
-    let [value, setValue] = React.useState(()=>sanitizeString(cellProps.value));
-    React.useEffect(()=>{
-        setValue(sanitizeString(cellProps.value));
-    }, [
-        cellProps.value
-    ]);
-    let [key, setKey] = React.useState(getRandomValue(10));
-    let [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 ('Enter' === e.key) 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);
+export const EditableCell = (props) => {
+  let {
+    cellElementProps: {
+      className: cellElementClassName,
+      style: cellElementStyle,
+      ...cellElementProps
+    },
+    cellProps,
+    onCellEdit,
+    children,
+    isDisabled,
+    className,
+    style,
+    ...rest
+  } = props;
+  let sanitizeString = (text) => text.replace(/(\r\n|\n|\r)+/gm, ' ');
+  let [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
+  React.useEffect(() => {
+    setValue(sanitizeString(cellProps.value));
+  }, [cellProps.value]);
+  let [key, setKey] = React.useState(getRandomValue(10));
+  let [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 ('Enter' === e.key) 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,
+  );
 };
 EditableCell.displayName = 'EditableCell';

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

@@ -9,62 +9,84 @@ import { Popover } from '../../Popover/Popover.js';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
 import { Flex } from '../../Flex/Flex.js';
 let ACTION_CELL_ID = 'iui-table-action';
-export const ActionColumn = ({ columnManager = false } = {})=>({
-        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 })=>{
-            let buttonRef = React.useRef(null);
-            if (!columnManager) return null;
-            let defaultColumnIds = [
-                SELECTION_CELL_ID,
-                EXPANDER_CELL_ID,
-                ACTION_CELL_ID
-            ];
-            let headerCheckBoxes = ()=>allColumns.filter(({ id })=>!defaultColumnIds.includes(id)).map((column)=>{
-                    let { checked } = column.getToggleHiddenProps();
-                    let onChange = ()=>{
-                        column.toggleHidden(checked);
-                        if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
-                        dispatch({
-                            type: tableResizeStartAction
-                        });
-                        queueMicrotask(()=>{
-                            buttonRef.current?.scrollIntoView({
-                                block: 'nearest'
-                            });
-                        });
-                    };
-                    return React.createElement(Checkbox, {
-                        key: column.id,
-                        checked: checked,
-                        disabled: column.disableToggleVisibility,
-                        onChange: onChange,
-                        label: column.render('Header')
-                    });
-                });
-            let popoverProps = 'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
-            return React.createElement(Popover, {
-                applyBackground: true,
-                content: React.createElement(Flex, {
-                    as: FieldsetBase,
-                    className: "iui-table-column-manager",
-                    flexDirection: "column",
-                    alignItems: "flex-start"
-                }, React.createElement(VisuallyHidden, {
-                    as: "legend"
-                }, "Show/hide columns"), headerCheckBoxes()),
-                ...popoverProps
-            }, React.createElement(IconButton, {
-                styleType: "borderless",
-                ref: buttonRef,
-                label: "Column manager"
-            }, React.createElement(SvgColumnManager, null)));
-        }
-    });
+export const ActionColumn = ({ columnManager = false } = {}) => ({
+  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 }) => {
+    let buttonRef = React.useRef(null);
+    if (!columnManager) return null;
+    let defaultColumnIds = [
+      SELECTION_CELL_ID,
+      EXPANDER_CELL_ID,
+      ACTION_CELL_ID,
+    ];
+    let headerCheckBoxes = () =>
+      allColumns
+        .filter(({ id }) => !defaultColumnIds.includes(id))
+        .map((column) => {
+          let { checked } = column.getToggleHiddenProps();
+          let onChange = () => {
+            column.toggleHidden(checked);
+            if (0 === Object.keys(state.columnResizing.columnWidths).length)
+              return;
+            dispatch({
+              type: tableResizeStartAction,
+            });
+            queueMicrotask(() => {
+              buttonRef.current?.scrollIntoView({
+                block: 'nearest',
+              });
+            });
+          };
+          return React.createElement(Checkbox, {
+            key: column.id,
+            checked: checked,
+            disabled: column.disableToggleVisibility,
+            onChange: onChange,
+            label: column.render('Header'),
+          });
+        });
+    let popoverProps =
+      'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
+    return React.createElement(
+      Popover,
+      {
+        applyBackground: true,
+        content: React.createElement(
+          Flex,
+          {
+            as: FieldsetBase,
+            className: 'iui-table-column-manager',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+          },
+          React.createElement(
+            VisuallyHidden,
+            {
+              as: 'legend',
+            },
+            'Show/hide columns',
+          ),
+          headerCheckBoxes(),
+        ),
+        ...popoverProps,
+      },
+      React.createElement(
+        IconButton,
+        {
+          styleType: 'borderless',
+          ref: buttonRef,
+          label: 'Column manager',
+        },
+        React.createElement(SvgColumnManager, null),
+      ),
+    );
+  },
+});

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

@@ -3,36 +3,42 @@ import { SvgChevronRight } from '../../../utils/index.js';
 import { IconButton } from '../../Buttons/IconButton.js';
 import { DefaultCell } from '../cells/index.js';
 export const EXPANDER_CELL_ID = 'iui-table-expander';
-export const ExpanderColumn = (props = {})=>{
-    let { 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)=>{
-            let { row } = props;
-            if (subComponent?.(row)) 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));
-            return null;
-        },
-        cellRenderer: (props)=>React.createElement(DefaultCell, {
-                ...props,
-                isDisabled: (rowData)=>!!isDisabled?.(rowData)
-            })
-    };
+export const ExpanderColumn = (props = {}) => {
+  let { 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) => {
+      let { row } = props;
+      if (subComponent?.(row))
+        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),
+        );
+      return null;
+    },
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

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

@@ -2,47 +2,67 @@ import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
-export const SelectionColumn = (props = {})=>{
-    let { isDisabled, density } = props;
-    let densityWidth = 'condensed' === density ? 42 : 'extra-condensed' === density ? 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, preFilteredFlatRows, state })=>{
-            let disabled = preFilteredFlatRows.every((row)=>isDisabled?.(row.original));
-            let checked = preFilteredFlatRows.every((row)=>state.selectedRowIds[row.id] || isDisabled?.(row.original));
-            let indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
-            return React.createElement(Checkbox, {
-                ...getToggleAllRowsSelectedProps(),
-                style: {},
-                title: "",
-                checked: checked && !disabled,
-                indeterminate: indeterminate,
-                disabled: disabled,
-                onChange: ()=>toggleAllRowsSelected(!rows.some((row)=>row.isSelected))
-            });
+export const SelectionColumn = (props = {}) => {
+  let { isDisabled, density } = props;
+  let densityWidth =
+    'condensed' === density ? 42 : 'extra-condensed' === density ? 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,
+      preFilteredFlatRows,
+      state,
+    }) => {
+      let disabled = preFilteredFlatRows.every((row) =>
+        isDisabled?.(row.original),
+      );
+      let checked = preFilteredFlatRows.every(
+        (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
+      );
+      let indeterminate =
+        !checked && Object.keys(state.selectedRowIds).length > 0;
+      return React.createElement(Checkbox, {
+        ...getToggleAllRowsSelectedProps(),
+        style: {},
+        title: '',
+        checked: checked && !disabled,
+        indeterminate: indeterminate,
+        disabled: disabled,
+        onChange: () =>
+          toggleAllRowsSelected(!rows.some((row) => row.isSelected)),
+      });
+    },
+    Cell: ({ row, selectSubRows = true }) =>
+      React.createElement(Checkbox, {
+        ...row.getToggleRowSelectedProps(),
+        style: {},
+        title: '',
+        disabled: isDisabled?.(row.original),
+        onClick: (e) => e.stopPropagation(),
+        onChange: () => {
+          if (row.subRows.length > 0 && selectSubRows)
+            row.toggleRowSelected(
+              !row.subRows.every(
+                (subRow) => subRow.isSelected || isDisabled?.(subRow.original),
+              ),
+            );
+          else row.toggleRowSelected(!row.isSelected);
         },
-        Cell: ({ row, selectSubRows = true })=>React.createElement(Checkbox, {
-                ...row.getToggleRowSelectedProps(),
-                style: {},
-                title: "",
-                disabled: isDisabled?.(row.original),
-                onClick: (e)=>e.stopPropagation(),
-                onChange: ()=>{
-                    if (row.subRows.length > 0 && selectSubRows) row.toggleRowSelected(!row.subRows.every((subRow)=>subRow.isSelected || isDisabled?.(subRow.original)));
-                    else row.toggleRowSelected(!row.isSelected);
-                }
-            }),
-        cellRenderer: (props)=>React.createElement(DefaultCell, {
-                ...props,
-                isDisabled: (rowData)=>!!isDisabled?.(rowData)
-            })
-    };
+      }),
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

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

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, useGlobals } from '../../../utils/index.js';
-export const BaseFilter = (props)=>{
-    let { children, className, style, id } = props;
-    useGlobals();
-    return React.createElement(Box, {
-        className: cx('iui-table-column-filter', className),
-        style: style,
-        onClick: (e)=>{
-            e.stopPropagation();
-        },
-        id: id
-    }, children);
-};
+import { Box, mergeEventHandlers } from '../../../utils/index.js';
+export const BaseFilter = React.forwardRef((props, forwardedRef) =>
+  React.createElement(Box, {
+    as: 'form',
+    ...props,
+    ref: forwardedRef,
+    className: cx('iui-table-column-filter', props.className),
+    onSubmit: (e) => {
+      e.preventDefault();
+      props.onSubmit?.(e);
+    },
+    onClick: mergeEventHandlers(props.onClick, (e) => {
+      e.stopPropagation();
+    }),
+  }),
+);

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

@@ -5,60 +5,88 @@ import { InputGrid } from '../../../InputGrid/InputGrid.js';
 import { Label } from '../../../Label/Label.js';
 import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
 import { Popover } from '../../../Popover/Popover.js';
-export const DatePickerInput = React.forwardRef((props, forwardedRef)=>{
-    let uid = useId();
-    let { onChange, date, parseInput, formatDate, label, required, disabled, isFromOrTo, selectedDate, wrapperProps, labelProps, inputWrapperProps, id = uid, localizedNames, showYearSelection, ...rest } = props;
-    let isDateDisabled = (date)=>{
-        if ('to' === isFromOrTo) return isBefore(date, selectedDate);
-        return isBefore(selectedDate, date);
-    };
-    let buttonRef = React.useRef(null);
-    let [inputValue, setInputValue] = React.useState('');
-    React.useEffect(()=>{
-        if (date && !isNaN(date.valueOf())) setInputValue(formatDate(date));
-    }, [
-        date,
-        formatDate
-    ]);
-    let [isVisible, setIsVisible] = React.useState(false);
-    let close = React.useCallback(()=>setIsVisible(false), []);
-    let onDateSelected = React.useCallback((date)=>{
-        onChange(date);
-        close();
-        buttonRef.current?.focus();
-    }, [
-        close,
-        onChange
-    ]);
-    let onInputChange = React.useCallback((event)=>{
-        let value = event.target.value;
-        setInputValue(value);
-        if (!value) onChange(void 0);
-        let parsedDate = parseInput(value);
-        if (parsedDate && !isNaN(parsedDate.valueOf())) onChange(parsedDate);
-    }, [
-        onChange,
-        parseInput
-    ]);
-    return React.createElement(InputGrid, {
-        labelPlacement: "inline",
-        ...wrapperProps
-    }, React.createElement(Label, {
-        as: "label",
+export const DatePickerInput = React.forwardRef((props, forwardedRef) => {
+  let uid = useId();
+  let {
+    onChange,
+    date,
+    parseInput,
+    formatDate,
+    label,
+    required,
+    disabled,
+    isFromOrTo,
+    selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
+    localizedNames,
+    showYearSelection,
+    ...rest
+  } = props;
+  let isDateDisabled = (date) => {
+    if ('to' === isFromOrTo) return isBefore(date, selectedDate);
+    return isBefore(selectedDate, date);
+  };
+  let buttonRef = React.useRef(null);
+  let [inputValue, setInputValue] = React.useState('');
+  React.useEffect(() => {
+    if (date && !isNaN(date.valueOf())) setInputValue(formatDate(date));
+  }, [date, formatDate]);
+  let [isVisible, setIsVisible] = React.useState(false);
+  let close = React.useCallback(() => setIsVisible(false), []);
+  let onDateSelected = React.useCallback(
+    (date) => {
+      onChange(date);
+      close();
+      buttonRef.current?.focus();
+    },
+    [close, onChange],
+  );
+  let onInputChange = React.useCallback(
+    (event) => {
+      let value = event.target.value;
+      setInputValue(value);
+      if (!value) onChange(void 0);
+      let 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, {
+        ...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, {
+        ...rest,
+      }),
+      React.createElement(
+        Popover,
+        {
+          content: React.createElement(DatePicker, {
             date: date,
             onChange: onDateSelected,
             setFocus: true,
@@ -66,15 +94,23 @@ export const DatePickerInput = React.forwardRef((props, forwardedRef)=>{
             localizedNames: localizedNames,
             applyBackground: false,
             showDatesOutsideMonth: false,
-            showYearSelection: showYearSelection
-        }),
-        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)))));
+            showYearSelection: showYearSelection,
+          }),
+          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),
+        ),
+      ),
+    ),
+  );
 });