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

package/DEV-esm/core/Table/hooks/useResizeColumns.js

@@ -1,354 +0,0 @@
-import { actions, makePropGetter, useGetLatest } from 'react-table';
-export const useResizeColumns = (ownerDocument) => (hooks) => {
-  hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
-  hooks.stateReducers.push(reducer);
-  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
-};
-let isTouchEvent = (event) => 'touchstart' === event.type;
-let defaultGetResizerProps =
-  (ownerDocument) =>
-  (props, { instance, header, nextHeader }) => {
-    let { dispatch } = instance;
-    let onResizeStart = (e, header) => {
-      if (isTouchEvent(e) && e.touches && e.touches.length > 1) return;
-      let headerIdWidths = getLeafHeaders(header).map((d) => [
-        d.id,
-        getHeaderWidth(d),
-      ]);
-      let nextHeaderIdWidths = nextHeader
-        ? getLeafHeaders(nextHeader).map((d) => [d.id, getHeaderWidth(d)])
-        : [];
-      let clientX = isTouchEvent(e)
-        ? Math.round(e.touches[0].clientX)
-        : e.clientX;
-      let dispatchMove = (clientXPos) =>
-        dispatch({
-          type: actions.columnResizing,
-          clientX: clientXPos,
-        });
-      let dispatchEnd = () =>
-        dispatch({
-          type: actions.columnDoneResizing,
-        });
-      let handlersAndEvents = {
-        mouse: {
-          moveEvent: 'mousemove',
-          moveHandler: (e) => dispatchMove(e.clientX),
-          upEvent: 'mouseup',
-          upHandler: () => {
-            ownerDocument.current?.removeEventListener(
-              'mousemove',
-              handlersAndEvents.mouse.moveHandler,
-            );
-            ownerDocument.current?.removeEventListener(
-              'mouseup',
-              handlersAndEvents.mouse.upHandler,
-            );
-            ownerDocument.current?.removeEventListener(
-              'mouseleave',
-              handlersAndEvents.mouse.upHandler,
-            );
-            dispatchEnd();
-          },
-        },
-        touch: {
-          moveEvent: 'touchmove',
-          moveHandler: (e) => {
-            if (e.cancelable) {
-              e.preventDefault();
-              e.stopPropagation();
-            }
-            dispatchMove(e.touches[0].clientX);
-          },
-          upEvent: 'touchend',
-          upHandler: () => {
-            ownerDocument.current?.removeEventListener(
-              handlersAndEvents.touch.moveEvent,
-              handlersAndEvents.touch.moveHandler,
-            );
-            ownerDocument.current?.removeEventListener(
-              handlersAndEvents.touch.upEvent,
-              handlersAndEvents.touch.moveHandler,
-            );
-            dispatchEnd();
-          },
-        },
-      };
-      let events = isTouchEvent(e)
-        ? handlersAndEvents.touch
-        : handlersAndEvents.mouse;
-      let passiveIfSupported = !!passiveEventSupported() && {
-        passive: false,
-      };
-      ownerDocument.current?.addEventListener(
-        events.moveEvent,
-        events.moveHandler,
-        passiveIfSupported,
-      );
-      ownerDocument.current?.addEventListener(
-        events.upEvent,
-        events.upHandler,
-        passiveIfSupported,
-      );
-      if (!isTouchEvent(e))
-        ownerDocument.current?.addEventListener(
-          'mouseleave',
-          handlersAndEvents.mouse.upHandler,
-          passiveIfSupported,
-        );
-      dispatch({
-        type: actions.columnStartResizing,
-        columnId: header.id,
-        columnWidth: getHeaderWidth(header),
-        nextColumnWidth: getHeaderWidth(nextHeader),
-        headerIdWidths,
-        nextHeaderIdWidths,
-        clientX,
-      });
-    };
-    return [
-      props,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-        },
-        onMouseDown: (e) => {
-          e.persist();
-          e.preventDefault();
-          e.stopPropagation();
-          onResizeStart(e, header);
-        },
-        onTouchStart: (e) => {
-          e.persist();
-          e.preventDefault();
-          onResizeStart(e, header);
-        },
-        style: {
-          cursor: 'col-resize',
-        },
-        draggable: false,
-        role: 'separator',
-      },
-    ];
-  };
-useResizeColumns.pluginName = 'useResizeColumns';
-let reducer = (newState, action, previousState, instance) => {
-  if (action.type === actions.init)
-    return {
-      ...newState,
-      columnResizing: {
-        columnWidths: {},
-      },
-    };
-  if (action.type === actions.resetResize)
-    return {
-      ...newState,
-      columnResizing: {
-        columnWidths: {},
-      },
-    };
-  if (action.type === actions.columnStartResizing) {
-    let {
-      clientX,
-      columnId,
-      columnWidth,
-      nextColumnWidth,
-      headerIdWidths,
-      nextHeaderIdWidths,
-    } = action;
-    return {
-      ...newState,
-      columnResizing: {
-        ...newState.columnResizing,
-        startX: clientX,
-        columnWidth,
-        nextColumnWidth,
-        headerIdWidths,
-        nextHeaderIdWidths,
-        isResizingColumn: columnId,
-      },
-    };
-  }
-  if (action.type === actions.columnResizing) {
-    let { clientX } = action;
-    let {
-      startX = 0,
-      columnWidth = 1,
-      nextColumnWidth = 1,
-      headerIdWidths = [],
-      nextHeaderIdWidths = [],
-    } = newState.columnResizing;
-    if (!instance) return newState;
-    let deltaX = clientX - startX;
-    let newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
-    let isTableWidthDecreasing =
-      calculateTableWidth(newColumnWidths, instance.flatHeaders) <
-      instance.tableWidth;
-    let newNextColumnWidths =
-      instance?.columnResizeMode === 'fit' ||
-      (instance?.columnResizeMode === 'expand' && isTableWidthDecreasing)
-        ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
-        : {};
-    if (
-      !isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
-      !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) ||
-      !isNewTableWidthValid(
-        {
-          ...newColumnWidths,
-          ...newNextColumnWidths,
-        },
-        instance,
-      )
-    )
-      return newState;
-    instance?.flatHeaders.forEach((h) => {
-      if (!h.width) h.width = h.resizeWidth;
-    });
-    return {
-      ...newState,
-      columnResizing: {
-        ...newState.columnResizing,
-        columnWidths: {
-          ...newState.columnResizing.columnWidths,
-          ...newColumnWidths,
-          ...newNextColumnWidths,
-        },
-      },
-    };
-  }
-  if (action.type === actions.columnDoneResizing)
-    return {
-      ...newState,
-      columnResizing: {
-        ...newState.columnResizing,
-        startX: void 0,
-        isResizingColumn: void 0,
-      },
-    };
-  return newState;
-};
-let getColumnWidths = (headerIdWidths, deltaPercentage) => {
-  let columnWidths = {};
-  headerIdWidths.forEach(([headerId, headerWidth]) => {
-    columnWidths[headerId] = Math.max(
-      headerWidth + headerWidth * deltaPercentage,
-      0,
-    );
-  });
-  return columnWidths;
-};
-let isNewColumnWidthsValid = (columnWidths, headers) => {
-  if (Object.values(columnWidths).some((width) => width <= 1)) return false;
-  for (let [headerId, width] of Object.entries(columnWidths)) {
-    let header = headers?.find((h) => h.id === headerId);
-    if (!header) continue;
-    let minWidth = header.minWidth || 0;
-    let maxWidth = header.maxWidth || 1 / 0;
-    if (width < minWidth || width > maxWidth) return false;
-  }
-  return true;
-};
-let isNewTableWidthValid = (columnWidths, instance) => {
-  if ('fit' === instance.columnResizeMode) return true;
-  let newTableWidth = 0;
-  for (let header of instance.flatHeaders)
-    newTableWidth += columnWidths[header.id]
-      ? columnWidths[header.id]
-      : getHeaderWidth(header);
-  if (Math.round(newTableWidth) < instance.tableWidth) return false;
-  return true;
-};
-let useInstanceBeforeDimensions = (instance) => {
-  let {
-    flatHeaders,
-    getHooks,
-    state: { columnResizing },
-    columnResizeMode,
-  } = instance;
-  let getInstance = useGetLatest(instance);
-  flatHeaders.forEach((header, index) => {
-    let resizeWidth = columnResizing.columnWidths[header.id];
-    header.width = resizeWidth || header.width || header.originalWidth;
-    header.isResizing = columnResizing.isResizingColumn === header.id;
-    let headerToResize =
-      header.disableResizing && 'fit' === columnResizeMode
-        ? getPreviousResizableHeader(header, instance)
-        : header;
-    let nextResizableHeader =
-      'expand' === columnResizeMode && index === flatHeaders.length - 1
-        ? getPreviousResizableHeader(header, instance)
-        : getNextResizableHeader(header, instance);
-    header.canResize =
-      null == header.disableResizing || !header.disableResizing;
-    if ('fit' === columnResizeMode)
-      header.isResizerVisible =
-        (header.canResize && !!nextResizableHeader) ||
-        (headerToResize && !!instance.flatHeaders[index + 1]?.canResize);
-    else header.isResizerVisible = header.canResize && !!headerToResize;
-    header.getResizerProps = makePropGetter(getHooks().getResizerProps, {
-      instance: getInstance(),
-      header: headerToResize,
-      nextHeader: nextResizableHeader,
-    });
-  });
-};
-let getPreviousResizableHeader = (headerColumn, instance) => {
-  let headersList = (
-    headerColumn.parent?.columns || instance.flatHeaders
-  ).filter(({ isVisible }) => isVisible);
-  let headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
-  return [...headersList]
-    .slice(0, headerIndex)
-    .reverse()
-    .find((h) => !h.disableResizing);
-};
-let getNextResizableHeader = (headerColumn, instance) => {
-  let headersList = (
-    headerColumn.parent?.columns || instance.flatHeaders
-  ).filter(({ isVisible }) => isVisible);
-  let headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
-  return [...headersList]
-    .slice(headerIndex + 1)
-    .find((h) => !h.disableResizing);
-};
-function getLeafHeaders(header) {
-  let leafHeaders = [];
-  let recurseHeader = (header) => {
-    if (header.columns && header.columns.length)
-      header.columns.map(recurseHeader);
-    leafHeaders.push(header);
-  };
-  recurseHeader(header);
-  return leafHeaders;
-}
-let getHeaderWidth = (header) => {
-  if (!header) return 0;
-  return 'string' == typeof header.width && Number.isNaN(Number(header.width))
-    ? Number(header.resizeWidth || 0)
-    : Number(header.width || header.resizeWidth || 0);
-};
-let calculateTableWidth = (columnWidths, headers) => {
-  let newTableWidth = 0;
-  for (let header of headers)
-    newTableWidth += columnWidths[header.id]
-      ? columnWidths[header.id]
-      : getHeaderWidth(header);
-  return newTableWidth;
-};
-let passiveSupported = null;
-let passiveEventSupported = () => {
-  if (null != passiveSupported) return passiveSupported;
-  try {
-    let options = {
-      once: true,
-      get passive() {
-        passiveSupported = true;
-        return false;
-      },
-    };
-    window.addEventListener('test', () => {}, options);
-  } catch {
-    passiveSupported = false;
-  }
-  return passiveSupported;
-};

package/DEV-esm/core/Table/hooks/useScrollToRow.js

@@ -1,34 +0,0 @@
-import * as React from 'react';
-export function useScrollToRow({
-  data,
-  enableVirtualization,
-  page,
-  paginatorRenderer,
-  scrollToRow,
-}) {
-  let rowRefs = React.useRef({});
-  let pageRef = React.useRef(page);
-  pageRef.current = page;
-  let dataRef = React.useRef(data);
-  dataRef.current = data;
-  let scrollToIndex = React.useMemo(() => {
-    if (!scrollToRow || paginatorRenderer) return;
-    let index = scrollToRow(pageRef.current, dataRef.current);
-    return index < 0 ? void 0 : index;
-  }, [paginatorRenderer, scrollToRow]);
-  React.useEffect(() => {
-    if (enableVirtualization || null == scrollToIndex || scrollToIndex < 0)
-      return;
-    rowRefs.current[pageRef.current[scrollToIndex]?.id]?.scrollIntoView();
-  }, [enableVirtualization, scrollToIndex]);
-  let tableRowRef = React.useCallback(
-    (row) => (element) => {
-      rowRefs.current[row.id] = element;
-    },
-    [],
-  );
-  return {
-    scrollToIndex,
-    tableRowRef,
-  };
-}

package/DEV-esm/core/Table/hooks/useSelectionCell.js

@@ -1,18 +0,0 @@
-import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js';
-export const useSelectionCell =
-  (isSelectable, selectionMode, isRowDisabled, density = 'default') =>
-  (hooks) => {
-    if (!isSelectable) return;
-    hooks.allColumns.push((columns) =>
-      'single' === selectionMode ||
-      columns.find((c) => c.id === SELECTION_CELL_ID)
-        ? columns
-        : [
-            SelectionColumn({
-              isDisabled: isRowDisabled,
-              density: density,
-            }),
-            ...columns,
-          ],
-    );
-  };

package/DEV-esm/core/Table/hooks/useStickyColumns.js

@@ -1,55 +0,0 @@
-import { actions } from 'react-table';
-actions.setScrolledLeft = 'setScrolledLeft';
-actions.setScrolledRight = 'setScrolledRight';
-export const useStickyColumns = (hooks) => {
-  hooks.stateReducers.push(reducer);
-  hooks.useInstance.push(useInstance);
-};
-let reducer = (newState, action) => {
-  if (action.type === actions.init)
-    return {
-      ...newState,
-      sticky: {},
-    };
-  if (
-    action.type === actions.setScrolledLeft &&
-    newState.sticky?.isScrolledToLeft !== action.value
-  )
-    return {
-      ...newState,
-      sticky: {
-        ...newState.sticky,
-        isScrolledToLeft: action.value,
-      },
-    };
-  if (
-    action.type === actions.setScrolledRight &&
-    newState.sticky?.isScrolledToRight !== action.value
-  )
-    return {
-      ...newState,
-      sticky: {
-        ...newState.sticky,
-        isScrolledToRight: action.value,
-      },
-    };
-  return newState;
-};
-let useInstance = (instance) => {
-  let { flatHeaders } = instance;
-  flatHeaders.forEach((header) => {
-    if (!header.originalSticky) header.originalSticky = header.sticky ?? 'none';
-    header.sticky =
-      'none' === header.originalSticky ? void 0 : header.originalSticky;
-  });
-  let hasLeftStickyColumn = false;
-  [...flatHeaders].reverse().forEach((header) => {
-    if ('left' === header.sticky) hasLeftStickyColumn = true;
-    if (hasLeftStickyColumn) header.sticky = 'left';
-  });
-  let hasRightStickyColumn = false;
-  flatHeaders.forEach((header) => {
-    if ('right' === header.sticky) hasRightStickyColumn = true;
-    if (hasRightStickyColumn) header.sticky = 'right';
-  });
-};

package/DEV-esm/core/Table/hooks/useSubRowFiltering.js

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js';
-export const useSubRowFiltering = (hasAnySubRows) => (hooks) => {
-  hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
-};
-let useInstance = (hasAnySubRows, instance) => {
-  let setInitialSubRows = (rows) => {
-    rows.forEach((row) => {
-      if (!row.initialSubRows) row.initialSubRows = row.subRows;
-      setInitialSubRows(row.subRows);
-    });
-  };
-  setInitialSubRows(instance.initialRows);
-  let {
-    filteredRows = instance.filteredRows,
-    filteredFlatRows = instance.filteredFlatRows,
-    filteredRowsById = instance.filteredRowsById,
-  } = React.useMemo(() => {
-    if (!hasAnySubRows) return {};
-    let setSubRows = (rows) => {
-      rows.forEach((row) => {
-        row.subRows = row.initialSubRows ?? [];
-        setSubRows(row.subRows);
-      });
-    };
-    setSubRows(instance.initialRows);
-    let currentlyFilteredRows = [...instance.initialRows];
-    instance.state.filters.forEach(({ id: columnId, value: filterValue }) => {
-      let column = instance.allColumns.find((c) => c.id === columnId);
-      if (!column) return;
-      let filterTypes = {
-        ...defaultFilterFunctions,
-        ...instance.filterTypes,
-      };
-      let filterFn =
-        'function' == typeof column.filter
-          ? column.filter
-          : filterTypes[column.filter ?? 'text'];
-      currentlyFilteredRows = currentlyFilteredRows.filter((row) =>
-        handleRowFiltering(row, filterFn, columnId, filterValue),
-      );
-    });
-    let filteredRows = [];
-    let filteredFlatRows = [];
-    let filteredRowsById = {};
-    let populateRows = (row) => {
-      if (0 === row.depth) filteredRows.push(row);
-      filteredFlatRows.push(row);
-      filteredRowsById[row.id] = row;
-      if (row.subRows.length) row.subRows.forEach((r) => populateRows(r));
-    };
-    currentlyFilteredRows.forEach((row) => populateRows(row));
-    return {
-      filteredRows,
-      filteredFlatRows,
-      filteredRowsById,
-    };
-  }, [
-    instance.allColumns,
-    instance.filterTypes,
-    instance.initialRows,
-    instance.state.filters,
-    hasAnySubRows,
-  ]);
-  Object.assign(instance, {
-    filteredRows,
-    filteredFlatRows,
-    filteredRowsById,
-    rows: filteredRows,
-    flatRows: filteredFlatRows,
-    rowsById: filteredRowsById,
-  });
-};
-let handleRowFiltering = (row, filterFn, columnId, filterValue) => {
-  let hasFilteredSubRows = false;
-  row.subRows = row.initialSubRows.filter((subRow) => {
-    let result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
-    if (result) hasFilteredSubRows = true;
-    return result;
-  });
-  if (hasFilteredSubRows) return true;
-  let result = filterFn([row], [columnId], filterValue);
-  return !!result.length;
-};

package/DEV-esm/core/Table/hooks/useSubRowSelection.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-export const useSubRowSelection = (hooks) => {
-  hooks.useInstance.push(useInstance);
-};
-let useInstance = (instance) => {
-  let selectedFlatRows = React.useMemo(() => {
-    let selectedFlatRows = [];
-    let setSelectionState = (row, selectedRowIds) => {
-      let isSomeSubRowsSelected = false;
-      row.initialSubRows.forEach((subRow) => {
-        setSelectionState(subRow, selectedRowIds);
-        if (subRow.isSelected || subRow.isSomeSelected)
-          isSomeSubRowsSelected = true;
-      });
-      if (selectedRowIds[row.id]) {
-        row.isSelected = true;
-        row.isSomeSelected = false;
-        selectedFlatRows.push(row);
-      } else {
-        row.isSelected = false;
-        row.isSomeSelected = isSomeSubRowsSelected;
-      }
-    };
-    instance.rows.forEach((row) =>
-      setSelectionState(row, instance.state.selectedRowIds),
-    );
-    return selectedFlatRows;
-  }, [instance.rows, instance.state.selectedRowIds]);
-  Object.assign(instance, {
-    selectedFlatRows,
-  });
-};

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

@@ -1,9 +0,0 @@
-export { Table } from './Table.js';
-export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
-export { DefaultCell, EditableCell } from './cells/index.js';
-export { TablePaginator } from './TablePaginator.js';
-export {
-  ActionColumn,
-  ExpanderColumn,
-  SelectionColumn,
-} from './columns/index.js';

package/DEV-esm/core/Table/utils.js

@@ -1,50 +0,0 @@
-import * as React from 'react';
-export const getCellStyle = (column, isTableResizing) => {
-  let style = {};
-  style.flex = '1 1 145px';
-  if (column.width) {
-    let width =
-      'string' == typeof column.width ? column.width : `${column.width}px`;
-    style.width = width;
-    if (isTableResizing && column.canResize)
-      style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
-    else style.flex = `0 0 ${width}`;
-  }
-  if (column.maxWidth) style.maxWidth = `${column.maxWidth}px`;
-  if (column.minWidth) style.minWidth = `${column.minWidth}px`;
-  return style;
-};
-export const getStickyStyle = (column, columnList) => {
-  if (!column.sticky) return {};
-  let left = 0;
-  for (let col of columnList) {
-    if (col.id === column.id) break;
-    left += Number(col.width || col.resizeWidth || 0);
-  }
-  let right = 0;
-  for (let col of [...columnList].reverse()) {
-    if (col.id === column.id) break;
-    right += Number(col.width || col.resizeWidth || 0);
-  }
-  return {
-    '--iui-table-sticky-left': 'left' === column.sticky ? `${left}px` : void 0,
-    '--iui-table-sticky-right':
-      'right' === column.sticky ? `${right}px` : void 0,
-  };
-};
-export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
-  let cellPadding = 16;
-  let expanderMargin = 8;
-  if ('condensed' === density) {
-    cellPadding = 12;
-    expanderMargin = 4;
-  } else if ('extra-condensed' === density) {
-    cellPadding = 8;
-    expanderMargin = 4;
-  }
-  let multiplier = 26 + expanderMargin;
-  return {
-    paddingInlineStart: cellPadding + depth * multiplier,
-  };
-};
-export const TableInstanceContext = React.createContext(void 0);