@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

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

@@ -1,117 +0,0 @@
-import { iuiId } from '../Table.js';
-let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-  if (!instance?.rows.length) {
-    onSelect?.([], newState);
-    return;
-  }
-  let newSelectedRowIds = {};
-  let handleRow = (row) => {
-    if (isRowDisabled?.(row.original)) return false;
-    let isAllSubSelected = true;
-    if (row.initialSubRows[0]?.original[iuiId] === void 0)
-      row.initialSubRows.forEach((subRow) => {
-        let result = handleRow(subRow);
-        if (!result) isAllSubSelected = false;
-      });
-    if (
-      newState.selectedRowIds[row.id] &&
-      (!instance.selectSubRows ||
-        !row.initialSubRows.length ||
-        isAllSubSelected)
-    )
-      newSelectedRowIds[row.id] = true;
-    return !!newSelectedRowIds[row.id];
-  };
-  instance.initialRows.forEach((row) => handleRow(row));
-  let selectedData = getSelectedData(newSelectedRowIds, instance);
-  newState.selectedRowIds = newSelectedRowIds;
-  onSelect?.(selectedData, newState);
-};
-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,
-) => {
-  let selectedRowIds = {
-    [action.id]: true,
-  };
-  if (instance?.selectSubRows) {
-    let handleRow = (row) => {
-      selectedRowIds[row.id] = true;
-      row.subRows.forEach((r) => handleRow(r));
-    };
-    handleRow(instance.rowsById[action.id]);
-  }
-  let newState = {
-    ...state,
-    lastSelectedRowId: action.id,
-    selectedRowIds,
-  };
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  return newState;
-};
-export const onShiftSelectHandler = (
-  state,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  if (null == instance) 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) {
-    let temp = startIndex;
-    startIndex = endIndex;
-    endIndex = temp;
-  }
-  let isLastSelectedRowIdSelected =
-    null == state.lastSelectedRowId ||
-    !!state.selectedRowIds[state.lastSelectedRowId];
-  let selectedRowIds = action.ctrlPressed
-    ? {
-        ...state.selectedRowIds,
-      }
-    : {};
-  instance.flatRows
-    .slice(startIndex, endIndex + 1)
-    .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
-  let handleRow = (row) => {
-    selectedRowIds[row.id] = isLastSelectedRowIdSelected;
-    row.subRows.forEach((r) => handleRow(r));
-  };
-  handleRow(instance.flatRows[endIndex]);
-  let newState = {
-    ...state,
-    selectedRowIds,
-  };
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  return newState;
-};
-let getSelectedData = (selectedRowIds, instance) => {
-  let selectedData = [];
-  let 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/DEV-esm/core/Table/cells/DefaultCell.js

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { defaultColumn } from 'react-table';
-import cx from 'classnames';
-import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
-import { TableInstanceContext } from '../utils.js';
-export const DefaultCell = (props) => {
-  let instance = React.useContext(TableInstanceContext);
-  let isCustomCell = React.useMemo(
-    () =>
-      instance?.columns.find(({ id }) => props.cellProps.column.id === id)
-        ?.Cell !== defaultColumn.Cell,
-    [instance, props.cellProps.column.id],
-  );
-  let {
-    cellElementProps: {
-      className: cellElementClassName,
-      style: cellElementStyle,
-      ...cellElementProps
-    },
-    children,
-    startIcon,
-    endIcon,
-    cellProps,
-    isDisabled,
-    className,
-    style,
-    status,
-    clamp = 'string' == typeof cellProps.value && !isCustomCell,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      ...cellElementProps,
-      ...rest,
-      className: cx(cellElementClassName, className),
-      'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
-      '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,
-      ),
-  );
-};
-DefaultCell.displayName = 'DefaultCell';

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

@@ -1,75 +0,0 @@
-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,
-  );
-};
-EditableCell.displayName = 'EditableCell';

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

@@ -1,2 +0,0 @@
-export { DefaultCell } from './DefaultCell.js';
-export { EditableCell } from './EditableCell.js';

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

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { Checkbox } from '../../Checkbox/Checkbox.js';
-import { FieldsetBase, SvgColumnManager } from '../../../utils/index.js';
-import { IconButton } from '../../Buttons/IconButton.js';
-import { tableResizeStartAction } from '../Table.js';
-import { SELECTION_CELL_ID } from './selectionColumn.js';
-import { EXPANDER_CELL_ID } from './expanderColumn.js';
-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),
-      ),
-    );
-  },
-});

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

@@ -1,45 +0,0 @@
-import * as React from 'react';
-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,
-          {
-            'aria-label': 'Toggle expandable content',
-            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/index.js

@@ -1,3 +0,0 @@
-export { ActionColumn } from './actionColumn.js';
-export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn.js';
-export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn.js';

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

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { Checkbox } from '../../Checkbox/Checkbox.js';
-import { DefaultCell } from '../cells/index.js';
-import { iuiId } from '../Table.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)),
-      });
-    },
-    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 &&
-            void 0 === row.initialSubRows[0].original[iuiId]
-          )
-            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),
-      }),
-  };
-};

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-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

@@ -1,116 +0,0 @@
-import * as React from 'react';
-import { SvgCalendar, isBefore, useId } from '../../../../utils/index.js';
-import { DatePicker } from '../../../DatePicker/DatePicker.js';
-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',
-        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,
-            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),
-        ),
-      ),
-    ),
-  );
-});