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

package/esm/core/Table/TableCell.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { Cell, CellProps, TableInstance } from '../../react-table/react-table.js';
-export type TableCellProps<T extends Record<string, unknown>> = {
-    cell: Cell<T>;
-    cellIndex: number;
-    isDisabled: boolean;
-    tableHasSubRows: boolean;
-    tableInstance: TableInstance<T>;
-    expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
-    density?: 'default' | 'condensed' | 'extra-condensed';
-};
-export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => React.JSX.Element;

package/esm/core/Table/TableCell.js

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
-import { SubRowExpander } from './SubRowExpander.js';
-import { SELECTION_CELL_ID } from './columns/index.js';
-import { DefaultCell } from './cells/index.js';
-import { Box } from '../../utils/index.js';
-export const TableCell = (props) => {
-  let {
-    cell,
-    cellIndex,
-    isDisabled,
-    tableHasSubRows,
-    tableInstance,
-    expanderCell,
-    density,
-  } = props;
-  let hasSubRowExpander =
-    cellIndex ===
-    cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
-  let cellElementProps = cell.getCellProps({
-    className: cx('iui-table-cell', cell.column.cellClassName, {
-      'iui-table-cell-sticky': !!cell.column.sticky,
-    }),
-    style: {
-      ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
-      ...(tableHasSubRows &&
-        hasSubRowExpander &&
-        getSubRowStyle({
-          density,
-          depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
-        })),
-      ...getStickyStyle(cell.column, tableInstance.visibleColumns),
-    },
-  });
-  let cellProps = {
-    ...tableInstance,
-    cell,
-    row: cell.row,
-    value: cell.value,
-    column: cell.column,
-  };
-  let cellContent = React.createElement(
-    React.Fragment,
-    null,
-    tableHasSubRows &&
-      hasSubRowExpander &&
-      cell.row.canExpand &&
-      React.createElement(SubRowExpander, {
-        cell: cell,
-        isDisabled: isDisabled,
-        cellProps: cellProps,
-        expanderCell: expanderCell,
-        density: density,
-        slot: 'start',
-      }),
-    cell.render('Cell'),
-  );
-  let cellRendererProps = {
-    cellElementProps,
-    cellProps,
-    children: React.createElement(
-      React.Fragment,
-      null,
-      cellContent,
-      'left' === cell.column.sticky &&
-        tableInstance.state.sticky.isScrolledToRight &&
-        React.createElement(Box, {
-          className: 'iui-table-cell-shadow-right',
-          slot: 'shadows',
-        }),
-      'right' === cell.column.sticky &&
-        tableInstance.state.sticky.isScrolledToLeft &&
-        React.createElement(Box, {
-          className: 'iui-table-cell-shadow-left',
-          slot: 'shadows',
-        }),
-    ),
-  };
-  return React.createElement(
-    React.Fragment,
-    null,
-    cell.column.cellRenderer
-      ? cell.column.cellRenderer({
-          ...cellRendererProps,
-          isDisabled: () => isDisabled,
-        })
-      : React.createElement(DefaultCell, {
-          ...cellRendererProps,
-          isDisabled: () => isDisabled,
-        }),
-  );
-};

package/esm/core/Table/TableExpandableContentMemoized.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { VirtualItem } from '@tanstack/react-virtual';
-type TableExpandableContentProps = {
-    children: React.ReactNode;
-    virtualItem?: VirtualItem<Element>;
-    isDisabled?: boolean;
-};
-export declare const TableExpandableContentMemoized: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", TableExpandableContentProps>>;
-export {};

package/esm/core/Table/TableExpandableContentMemoized.js

@@ -1,33 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-let TableExpandableContent = React.forwardRef((props, ref) => {
-  let { children, className, style, isDisabled, virtualItem, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-table-row', 'iui-table-expanded-content', className),
-      style: {
-        flex: '0 0 auto',
-        minWidth: '100%',
-        ...(null != virtualItem
-          ? {
-              transform: `translateY(${virtualItem.start}px)`,
-            }
-          : {}),
-        ...style,
-      },
-      'aria-disabled': isDisabled,
-      'data-iui-index': virtualItem?.index,
-      ...(null != virtualItem && {
-        'data-iui-virtualizer': 'item',
-      }),
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-export const TableExpandableContentMemoized = React.memo(
-  TableExpandableContent,
-);

package/esm/core/Table/TablePaginator.d.ts

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
-import type { TablePaginatorRendererProps } from './Table.js';
-export type TablePaginatorProps = {
-    /**
-     * Control whether focusing tabs (using arrow keys) should automatically select them.
-     * Use 'manual' if tab panel content is not preloaded.
-     * @default 'manual'
-     */
-    focusActivationMode?: 'auto' | 'manual';
-    /**
-     * Array of possible page size options. When provided then shows the range of rows within the current page and page size selection.
-     * @example
-     * <TablePaginator
-     *   // ...
-     *   pageSizeList={[10, 25, 50]}
-     * />
-     */
-    pageSizeList?: number[];
-    /**
-     * Object of labels and functions used for pagination localization.
-     */
-    localization?: {
-        /**
-         * Function that returns a label for the page size selector.
-         * @default (size: number) => `${size} per page`
-         */
-        pageSizeLabel?: (size: number) => string;
-        /**
-         * Function that returns a label for the range of rows within the current page and the length of the whole data.
-         * @default
-         *  (startIndex, endIndex, totalRows, isLoading) =>
-         *    isLoading
-         *      ? `${startIndex}-${endIndex}…`
-         *      : `${startIndex}-${endIndex} of ${totalRows}`;
-         */
-        rangeLabel?: (startIndex: number, endIndex: number, totalRows: number, isLoading: boolean) => string;
-        /**
-         * A label for previous page button. Used for accessibility attribute.
-         * @default 'Previous page'
-         */
-        previousPage?: string;
-        /**
-         * A label for next page button. Used for accessibility attribute.
-         * @default 'Next page'
-         */
-        nextPage?: string;
-        /**
-         * Function that returns a label for page selector buttons. Used for accessibility attribute.
-         * @default (page: number) => `Go to page ${page}`
-         */
-        goToPageLabel?: (page: number) => string;
-        /**
-         * A label shown next to the page size selector. Use `null` to hide.
-         * @default 'Rows per page'
-         */
-        rowsPerPageLabel?: string | null;
-        /**
-         * Function that returns a label shown in the bottom left to notify how many rows are selected.
-         * Only used if multi-selection mode is enabled.
-         * @default (totalSelectedRowsCount: number) => `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`;
-         */
-        rowsSelectedLabel?: (totalSelectedRowsCount: number) => string;
-    };
-} & TablePaginatorRendererProps & Omit<CommonProps, 'title'>;
-/**
- * Table paginator component. Recommended to pass to the `Table` as `paginatorRenderer` prop.
- * Passing `props` from `paginatorRenderer` handles all state management and is enough for basic use-cases.
- * @example
- * <Table
- *   // ...
- *   paginatorRenderer={(props) => <TablePaginator {...props} />}
- * />
- */
-export declare const TablePaginator: (props: TablePaginatorProps) => React.JSX.Element | null;

package/esm/core/Table/TablePaginator.js

@@ -1,356 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { IconButton } from '../Buttons/IconButton.js';
-import { Button } from '../Buttons/Button.js';
-import { DropdownButton } from '../Buttons/DropdownButton.js';
-import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { MenuItem } from '../Menu/MenuItem.js';
-import {
-  getBoundedValue,
-  useGlobals,
-  useContainerWidth,
-  SvgChevronLeft,
-  SvgChevronRight,
-  Box,
-  OverflowContainer,
-  useLayoutEffect,
-} from '../../utils/index.js';
-import { styles } from '../../styles.js';
-let defaultLocalization = {
-  pageSizeLabel: (size) => `${size} per page`,
-  rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
-    isLoading
-      ? `${startIndex}-${endIndex}…`
-      : `${startIndex}-${endIndex} of ${totalRows}`,
-  previousPage: 'Previous page',
-  nextPage: 'Next page',
-  goToPageLabel: (page) => `Go to page ${page}`,
-  rowsPerPageLabel: 'Rows per page',
-  rowsSelectedLabel: (totalSelectedRowsCount) =>
-    `${totalSelectedRowsCount} ${
-      1 === totalSelectedRowsCount ? 'row' : 'rows'
-    } selected`,
-};
-export const TablePaginator = (props) => {
-  let {
-    currentPage,
-    totalRowsCount,
-    pageSize,
-    onPageChange,
-    totalSelectedRowsCount = 0,
-    focusActivationMode = 'manual',
-    isLoading = false,
-    size = 'default',
-    pageSizeList,
-    onPageSizeChange,
-    localization: userLocalization,
-    className,
-    ...rest
-  } = props;
-  useGlobals();
-  let localization = React.useMemo(
-    () => ({
-      ...defaultLocalization,
-      ...userLocalization,
-    }),
-    [userLocalization],
-  );
-  let pageListRef = React.useRef(null);
-  let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
-  useLayoutEffect(() => {
-    setFocusedIndex(currentPage);
-  }, [currentPage]);
-  let needFocus = React.useRef(false);
-  let isMounted = React.useRef(false);
-  React.useEffect(() => {
-    if (isMounted.current && needFocus.current) {
-      let buttonToFocus = Array.from(
-        pageListRef.current?.querySelectorAll(
-          `.${styles['iui-table-paginator-page-button']}`,
-        ) ?? [],
-      ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
-      buttonToFocus?.focus();
-      needFocus.current = false;
-    }
-    isMounted.current = true;
-  }, [focusedIndex]);
-  let buttonSize = 'default' != size ? 'small' : void 0;
-  let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    let focusPage = (delta) => {
-      let newFocusedIndex = getBoundedValue(
-        focusedIndex + delta,
-        0,
-        totalPagesCount - 1,
-      );
-      needFocus.current = true;
-      if ('auto' === focusActivationMode) onPageChange(newFocusedIndex);
-      else setFocusedIndex(newFocusedIndex);
-    };
-    switch (event.key) {
-      case 'ArrowRight':
-        focusPage(1);
-        event.preventDefault();
-        break;
-      case 'ArrowLeft':
-        focusPage(-1);
-        event.preventDefault();
-        break;
-      case 'Enter':
-      case ' ':
-      case 'Spacebar':
-        if ('manual' === focusActivationMode) onPageChange(focusedIndex);
-        break;
-      default:
-        break;
-    }
-  };
-  let [paginatorResizeRef, paginatorWidth] = useContainerWidth();
-  let showPagesList = totalPagesCount > 1 || isLoading;
-  let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-  let hasNoRows = 0 === totalPagesCount;
-  let noRowsContent = React.createElement(
-    React.Fragment,
-    null,
-    isLoading
-      ? React.createElement(ProgressRadial, {
-          indeterminate: true,
-          size: 'small',
-        })
-      : React.createElement(
-          Button,
-          {
-            styleType: 'borderless',
-            disabled: true,
-            size: buttonSize,
-          },
-          '1',
-        ),
-  );
-  if (!showPagesList && !showPageSizeList) return null;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-table-paginator', className),
-      ref: paginatorResizeRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        className: 'iui-left',
-      },
-      totalSelectedRowsCount > 0 &&
-        React.createElement(
-          'span',
-          null,
-          localization.rowsSelectedLabel(totalSelectedRowsCount),
-        ),
-    ),
-    showPagesList &&
-      React.createElement(
-        OverflowContainer,
-        {
-          className: 'iui-center',
-          itemsCount: totalPagesCount,
-        },
-        React.createElement(
-          IconButton,
-          {
-            styleType: 'borderless',
-            disabled: 0 === currentPage,
-            onClick: () => onPageChange(currentPage - 1),
-            size: buttonSize,
-            'aria-label': localization.previousPage,
-          },
-          React.createElement(SvgChevronLeft, null),
-        ),
-        React.createElement(
-          Box,
-          {
-            as: 'span',
-            className: 'iui-table-paginator-pages-group',
-            onKeyDown: onKeyDown,
-            ref: pageListRef,
-          },
-          hasNoRows
-            ? noRowsContent
-            : React.createElement(TablePaginatorPageButtons, {
-                size: size,
-                focusedIndex: focusedIndex,
-                setFocusedIndex: setFocusedIndex,
-                totalPagesCount: totalPagesCount,
-                onPageChange: onPageChange,
-                currentPage: currentPage,
-                localization: localization,
-                isLoading: isLoading,
-              }),
-        ),
-        React.createElement(
-          IconButton,
-          {
-            styleType: 'borderless',
-            disabled: currentPage === totalPagesCount - 1 || hasNoRows,
-            onClick: () => onPageChange(currentPage + 1),
-            size: buttonSize,
-            'aria-label': localization.nextPage,
-          },
-          React.createElement(SvgChevronRight, null),
-        ),
-      ),
-    React.createElement(
-      Box,
-      {
-        className: 'iui-right',
-      },
-      showPageSizeList &&
-        React.createElement(
-          React.Fragment,
-          null,
-          null !== localization.rowsPerPageLabel &&
-            paginatorWidth >= 1024 &&
-            React.createElement(
-              Box,
-              {
-                as: 'span',
-                className: 'iui-table-paginator-page-size-label',
-              },
-              localization.rowsPerPageLabel,
-            ),
-          React.createElement(
-            DropdownButton,
-            {
-              styleType: 'borderless',
-              size: buttonSize,
-              menuItems: (close) =>
-                pageSizeList.map((size) =>
-                  React.createElement(
-                    MenuItem,
-                    {
-                      key: size,
-                      isSelected: size === pageSize,
-                      onClick: () => {
-                        close();
-                        onPageSizeChange(size);
-                      },
-                    },
-                    localization.pageSizeLabel(size),
-                  ),
-                ),
-            },
-            localization.rangeLabel(
-              currentPage * pageSize + 1,
-              Math.min(totalRowsCount, (currentPage + 1) * pageSize),
-              totalRowsCount,
-              isLoading,
-            ),
-          ),
-        ),
-    ),
-  );
-};
-let TablePaginatorPageButtons = (props) => {
-  let {
-    focusedIndex,
-    setFocusedIndex,
-    totalPagesCount,
-    onPageChange,
-    currentPage,
-    localization,
-    isLoading,
-    size,
-  } = props;
-  let { visibleCount } = OverflowContainer.useContext();
-  let buttonSize = 'default' != size ? 'small' : void 0;
-  let pageButton = React.useCallback(
-    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
-      React.createElement(
-        Button,
-        {
-          key: index,
-          className: 'iui-table-paginator-page-button',
-          styleType: 'borderless',
-          size: buttonSize,
-          'data-iui-active': index === currentPage,
-          onClick: () => {
-            setFocusedIndex(index);
-            onPageChange(index);
-          },
-          'aria-current': index === currentPage,
-          'aria-label': localization.goToPageLabel?.(index + 1),
-          tabIndex: tabIndex,
-        },
-        index + 1,
-      ),
-    [
-      focusedIndex,
-      buttonSize,
-      currentPage,
-      localization,
-      setFocusedIndex,
-      onPageChange,
-    ],
-  );
-  let pageList = React.useMemo(
-    () =>
-      new Array(totalPagesCount)
-        .fill(null)
-        .map((_, index) => pageButton(index)),
-    [pageButton, totalPagesCount],
-  );
-  let halfVisibleCount = Math.floor(visibleCount / 2);
-  let startPage = focusedIndex - halfVisibleCount;
-  let endPage = focusedIndex + halfVisibleCount + 1;
-  if (startPage < 0) {
-    endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage));
-    startPage = 0;
-  }
-  if (endPage > totalPagesCount) {
-    startPage = Math.max(0, startPage - (endPage - totalPagesCount));
-    endPage = totalPagesCount;
-  }
-  let ellipsis = React.createElement(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-table-paginator-ellipsis', {
-        'iui-table-paginator-ellipsis-small': 'small' === size,
-      }),
-    },
-    '…',
-  );
-  if (1 === visibleCount) return pageButton(focusedIndex);
-  let showStartEllipsis = startPage > 1;
-  let showEndEllipsis = endPage < totalPagesCount - 1;
-  return React.createElement(
-    React.Fragment,
-    null,
-    0 !== startPage &&
-      React.createElement(
-        React.Fragment,
-        null,
-        pageButton(0, 0),
-        showStartEllipsis ? ellipsis : null,
-      ),
-    pageList.slice(startPage, endPage),
-    endPage !== totalPagesCount &&
-      !isLoading &&
-      React.createElement(
-        React.Fragment,
-        null,
-        showEndEllipsis ? ellipsis : null,
-        pageButton(totalPagesCount - 1, 0),
-      ),
-    isLoading &&
-      React.createElement(
-        React.Fragment,
-        null,
-        ellipsis,
-        React.createElement(ProgressRadial, {
-          indeterminate: true,
-          size: 'small',
-        }),
-      ),
-  );
-};

package/esm/core/Table/TableRowMemoized.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import type { CellProps, Row, TableInstance, TableState } from '../../react-table/react-table.js';
-import type { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
-/**
- * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
- * Using `isLast` here instead of passing data length to avoid re-renders of all rows when more data is added. Now only the last row re-renders.
- * Although state is not used it is needed for `React.memo` to check state that changes row state e.g. selection.
- * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
- */
-export declare const TableRow: <T extends Record<string, unknown>>(props: {
-    row: Row<T>;
-    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<"div"> & {
-        status?: "positive" | "warning" | "negative";
-        isLoading?: boolean;
-    };
-    isLast: boolean;
-    onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
-    onBottomReached: React.MutableRefObject<(() => void) | undefined>;
-    intersectionMargin: number;
-    state: TableState<T>;
-    onClick?: (event: React.MouseEvent, row: Row<T>) => void;
-    subComponent?: (row: Row<T>) => React.ReactNode;
-    isDisabled: boolean;
-    tableHasSubRows: boolean;
-    tableInstance: TableInstance<T>;
-    expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
-    scrollContainerRef: HTMLDivElement | null;
-    tableRowRef?: React.Ref<HTMLDivElement>;
-    density?: "default" | "condensed" | "extra-condensed";
-    virtualItem?: VirtualItem<Element>;
-    virtualizer?: Virtualizer<Element, Element>;
-}) => React.JSX.Element;
-export declare const TableRowMemoized: typeof TableRow;