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

package/cjs/core/Table/ColumnHeader.js

@@ -1,187 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'ColumnHeader', {
-  enumerable: true,
-  get: function () {
-    return ColumnHeader;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const _FilterToggle = require('./filters/FilterToggle.js');
-const _utils = require('./utils.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const ColumnHeader = _react.forwardRef((props, forwardedRef) => {
-  let {
-    column,
-    areFiltersSet,
-    isResizable,
-    columnResizeMode,
-    enableColumnReordering,
-    density,
-    columnHasExpanders,
-    isLast,
-    isTableEmpty,
-    ...rest
-  } = props;
-  let isHeaderDirectClick = _react.useRef(false);
-  let instance = _react.useContext(_utils.TableInstanceContext);
-  let COLUMN_MIN_WIDTHS = {
-    default: 72,
-    withExpander: 108,
-  };
-  let showFilterButton = (column) =>
-    (!isTableEmpty || areFiltersSet) && column.canFilter && !!column.Filter;
-  let showSortButton = (column) => !isTableEmpty && column.canSort;
-  let { onClick, ...restSortProps } = column.getSortByToggleProps();
-  if ([void 0, 0].includes(column.minWidth)) {
-    column.minWidth = columnHasExpanders
-      ? COLUMN_MIN_WIDTHS.withExpander
-      : COLUMN_MIN_WIDTHS.default;
-    if ('number' == typeof column.width && column.minWidth > column.width)
-      column.minWidth = column.width;
-  }
-  let columnProps = column.getHeaderProps({
-    ...restSortProps,
-    className: (0, _classnames.default)(
-      'iui-table-cell',
-      {
-        'iui-actionable': column.canSort,
-        'iui-sorted': column.isSorted,
-        'iui-table-cell-sticky': !!column.sticky,
-      },
-      column.columnClassName,
-    ),
-    style: {
-      ...(0, _utils.getCellStyle)(column, !!instance?.state.isTableResizing),
-      ...(columnHasExpanders &&
-        (0, _utils.getSubRowStyle)({
-          density,
-        })),
-      ...(0, _utils.getStickyStyle)(column, instance?.visibleColumns ?? []),
-      flexWrap: 'wrap',
-      columnGap: 'var(--iui-size-xs)',
-    },
-  });
-  return _react.createElement(
-    _index.Box,
-    {
-      ...columnProps,
-      ...rest,
-      key: columnProps.key,
-      title: void 0,
-      ref: (0, _index.useMergedRefs)(
-        _react.useCallback(
-          (el) => {
-            if (el) column.resizeWidth = el.getBoundingClientRect().width;
-          },
-          [column],
-        ),
-        forwardedRef,
-      ),
-      onMouseDown: () => {
-        isHeaderDirectClick.current = true;
-      },
-      onClick: (e) => {
-        if (isHeaderDirectClick.current) {
-          onClick?.(e);
-          isHeaderDirectClick.current = false;
-        }
-      },
-      tabIndex: showSortButton(column) ? 0 : void 0,
-      onKeyDown: (e) => {
-        if ('Enter' == e.key && showSortButton(column)) column.toggleSortBy();
-      },
-    },
-    _react.createElement(
-      _react.Fragment,
-      null,
-      _react.createElement(
-        _index.ShadowRoot,
-        null,
-        'string' == typeof column.Header
-          ? _react.createElement(
-              _index.LineClamp,
-              null,
-              _react.createElement('slot', null),
-            )
-          : _react.createElement('slot', null),
-        _react.createElement('slot', {
-          name: 'actions',
-        }),
-        _react.createElement('slot', {
-          name: 'resizers',
-        }),
-        _react.createElement('slot', {
-          name: 'shadows',
-        }),
-      ),
-      column.render('Header'),
-      (showFilterButton(column) || showSortButton(column)) &&
-        _react.createElement(
-          _index.Box,
-          {
-            className: 'iui-table-header-actions-container',
-            onKeyDown: (e) => e.stopPropagation(),
-            slot: 'actions',
-          },
-          showFilterButton(column) &&
-            _react.createElement(_FilterToggle.FilterToggle, {
-              column: column,
-            }),
-          showSortButton(column) &&
-            _react.createElement(
-              _index.Box,
-              {
-                className: 'iui-table-cell-end-icon',
-              },
-              column.isSortedDesc || (!column.isSorted && column.sortDescFirst)
-                ? _react.createElement(_index.SvgSortDown, {
-                    className: 'iui-table-sort',
-                    'aria-hidden': true,
-                  })
-                : _react.createElement(_index.SvgSortUp, {
-                    className: 'iui-table-sort',
-                    'aria-hidden': true,
-                  }),
-            ),
-        ),
-      isResizable &&
-        column.isResizerVisible &&
-        (!isLast || 'expand' === columnResizeMode) &&
-        _react.createElement(
-          _index.Box,
-          {
-            ...column.getResizerProps(),
-            className: 'iui-table-resizer',
-            slot: 'resizers',
-          },
-          _react.createElement(_index.Box, {
-            className: 'iui-table-resizer-bar',
-          }),
-        ),
-      enableColumnReordering &&
-        !column.disableReordering &&
-        _react.createElement(_index.Box, {
-          className: 'iui-table-reorder-bar',
-          slot: 'resizers',
-        }),
-      'left' === column.sticky &&
-        instance?.state.sticky.isScrolledToRight &&
-        _react.createElement(_index.Box, {
-          className: 'iui-table-cell-shadow-right',
-          slot: 'shadows',
-        }),
-      'right' === column.sticky &&
-        instance?.state.sticky.isScrolledToLeft &&
-        _react.createElement(_index.Box, {
-          className: 'iui-table-cell-shadow-left',
-          slot: 'shadows',
-        }),
-    ),
-  );
-});

package/cjs/core/Table/SubRowExpander.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import type { Cell, CellProps } from '../../react-table/react-table.js';
-export type SubRowExpanderProps<T extends Record<string, unknown>> = {
-    cell: Cell<T>;
-    expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
-    isDisabled: boolean;
-    cellProps: CellProps<T>;
-    density?: 'default' | 'condensed' | 'extra-condensed';
-    [k: string]: unknown;
-};
-export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => React.JSX.Element;

package/cjs/core/Table/SubRowExpander.js

@@ -1,48 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'SubRowExpander', {
-  enumerable: true,
-  get: function () {
-    return SubRowExpander;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const _IconButton = require('../Buttons/IconButton.js');
-const SubRowExpander = (props) => {
-  let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    expanderCell
-      ? expanderCell(cellProps)
-      : _react.createElement(
-          _IconButton.IconButton,
-          {
-            'aria-label': 'Toggle sub row',
-            'aria-expanded': cell.row.isExpanded ? 'true' : 'false',
-            style: {
-              marginInlineEnd:
-                'default' === density || void 0 === density ? 8 : 4,
-            },
-            className: 'iui-table-row-expander',
-            styleType: 'borderless',
-            size: 'small',
-            onClick: (e) => {
-              e.stopPropagation();
-              cell.row.toggleRowExpanded();
-            },
-            disabled: isDisabled,
-            ...rest,
-          },
-          _react.createElement(_index.SvgChevronRight, {
-            style: {
-              transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
-            },
-          }),
-        ),
-  );
-};

package/cjs/core/Table/Table.d.ts

@@ -1,275 +0,0 @@
-import * as React from 'react';
-import type { CellProps, TableOptions, Row, TableState } from '../../react-table/react-table.js';
-import type { CommonProps } from '../../utils/index.js';
-import type { TableFilterValue } from './filters/index.js';
-export declare const tableResizeStartAction = "tableResizeStart";
-export declare const iuiId: unique symbol;
-export type TablePaginatorRendererProps = {
-    /**
-     * The zero-based index of the current page.
-     */
-    currentPage: number;
-    /**
-     * Total number of rows.
-     */
-    totalRowsCount: number;
-    /**
-     * Number of rows per page.
-     */
-    pageSize: number;
-    /**
-     * Callback when page is changed.
-     */
-    onPageChange: (page: number) => void;
-    /**
-     * Callback when page size is changed.
-     */
-    onPageSizeChange: (size: number) => void;
-    /**
-     * Modify the size of the pagination (adjusts the elements size).
-     * @default 'default' if Table density is `default` else `small`
-     */
-    size?: 'default' | 'small';
-    /**
-     * Flag whether data is still loading and total rows count is not known.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Total number of rows selected (for mutli-selection mode only)
-     */
-    totalSelectedRowsCount?: number;
-};
-/**
- * Table props.
- * columns and data must be memoized.
- */
-export type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = Omit<TableOptions<T>, 'disableSortBy'> & {
-    /**
-     * Flag whether data is loading.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Content shown when there is no data.
-     */
-    emptyTableContent: React.ReactNode;
-    /**
-     * Flag whether table rows can be selectable.
-     * @default false
-     */
-    isSelectable?: boolean;
-    /**
-     * Handler for rows selection. Must be memoized.
-     * This is triggered only by user initiated actions (i.e. data change will not call it).
-     */
-    onSelect?: (selectedData: T[] | undefined, tableState?: TableState<T>) => void;
-    /**
-     * Handler for when a row is clicked. Must be memoized.
-     */
-    onRowClick?: (event: React.MouseEvent, row: Row<T>) => void;
-    /**
-     * Modify the selection mode of the table.
-     * The column with checkboxes will not be present with 'single' selection mode.
-     * @default 'multi'
-     */
-    selectionMode?: 'multi' | 'single';
-    /**
-     * Flag whether table columns can be sortable.
-     * @default false
-     */
-    isSortable?: boolean;
-    /**
-     * Callback function when sort changes.
-     * Use with `manualSortBy` to handle sorting yourself e.g. sort in server-side.
-     * Must be memoized.
-     */
-    onSort?: (state: TableState<T>) => void;
-    /**
-     * Callback function when scroll reaches bottom. Can be used for lazy-loading the data.
-     */
-    onBottomReached?: () => void;
-    /**
-     * Callback function when row is in viewport.
-     */
-    onRowInViewport?: (rowData: T) => void;
-    /**
-     * Margin in pixels when row is considered to be already in viewport. Used for `onBottomReached` and `onRowInViewport`.
-     * @default 300
-     */
-    intersectionMargin?: number;
-    /**
-     * A function that will be used for rendering a component for each row if that row is expanded.
-     * Component will be placed right after the row. Can return false/null if row should not be expandable.
-     */
-    subComponent?: (row: Row<T>) => React.ReactNode;
-    /**
-     * A function used for overriding default expander cell. `subComponent` must be present.
-     * Make sure to trigger `cellProps.row.toggleRowExpanded()`.
-     */
-    expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
-    /**
-     * Handler for row expand events. Will trigger when expanding and collapsing rows.
-     */
-    onExpand?: (expandedData: T[] | undefined, tableState?: TableState<T>) => void;
-    /**
-     * Callback function when filters change.
-     * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side.
-     * Must be memoized.
-     */
-    onFilter?: (filters: TableFilterValue<T>[], state: TableState<T>, filteredData?: Row<T>[]) => void;
-    /**
-     * Value used for global filtering.
-     * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side.
-     * Must be memoized.
-     */
-    globalFilterValue?: unknown;
-    /**
-     * Content shown when there is no data after filtering.
-     */
-    emptyFilteredTableContent?: React.ReactNode;
-    /**
-     * Function that should return true if a row is disabled (i.e. cannot be selected or expanded).
-     * If not specified, all rows are enabled.
-     */
-    isRowDisabled?: (rowData: T) => boolean;
-    /**
-     * Function that should return custom props passed to the each row.
-     * Must be memoized.
-     */
-    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
-        status?: 'positive' | 'warning' | 'negative';
-        isLoading?: boolean;
-    };
-    /**
-     * Modify the density of the table (adjusts the row height).
-     * @default 'default'
-     */
-    density?: 'default' | 'condensed' | 'extra-condensed';
-    /**
-     * Flag whether to select a row when clicked anywhere inside of it.
-     * @default true
-     */
-    selectRowOnClick?: boolean;
-    /**
-     * Function that takes `TablePaginatorRendererProps` as an argument and returns pagination component.
-     *
-     * Recommended to use `TablePaginator`. Passing `props` to `TablePaginator` handles all state management and is enough for basic use-cases.
-     * @example
-     * (props: TablePaginatorRendererProps) => (
-     *   <TablePaginator {...props} />
-     * )
-     */
-    paginatorRenderer?: (props: TablePaginatorRendererProps) => React.ReactNode;
-    /**
-     * Number of rows per page.
-     * @default 25
-     */
-    pageSize?: number;
-    /**
-     * Flag whether columns are resizable.
-     * In order to disable resizing for specific column, set `disableResizing: true` for that column.
-     * @default false
-     */
-    isResizable?: boolean;
-    /**
-     * Style of the table.
-     * @default 'default'
-     */
-    styleType?: 'default' | 'zebra-rows';
-    /**
-     * Virtualization is used for the scrollable table body.
-     * Height on the table is required for virtualization to work.
-     * @example
-     * <Table enableVirtualization style={{height: 400}} {...} />
-     * @default false
-     * @beta
-     */
-    enableVirtualization?: boolean;
-    /**
-     * Flag whether columns can be reordered.
-     * @default false
-     */
-    enableColumnReordering?: boolean;
-    /**
-     * Passes props to Table header wrapper.
-     */
-    headerWrapperProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to Table header.
-     */
-    headerProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes custom props to Table body.
-     */
-    bodyProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes custom props to empty table.
-     */
-    emptyTableContentProps?: React.ComponentProps<'div'>;
-    /**
-     * Function that returns index of the row that you want to scroll to.
-     *
-     * When using with lazy-loading table, you need to take care that row is already loaded.
-     * It doesn't work with paginated tables.
-     * @beta
-     * @example
-     * <Table
-     *   scrollToRow={React.useCallback(
-     *     (rows, data) => rows.findIndex((row) => row.original === data[250]),
-     *     []
-     *   )}
-     *   {...restProps}
-     * />
-     * @example
-     * <Table
-     *   scrollToRow={React.useCallback(
-     *     (rows, data) => rows.findIndex((row) => row.original.id === data[250].id),
-     *     []
-     *   )}
-     *   {...restProps}
-     * />
-     */
-    scrollToRow?: (rows: Row<T>[], data: T[]) => number;
-} & Omit<CommonProps, 'title'>;
-/**
- * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
- * @example
- * const columns = React.useMemo(() => [
- *   {
- *     id: 'name',
- *     Header: 'Name',
- *     accessor: 'name',
- *     width: 90,
- *   },
- *   {
- *     id: 'description',
- *     Header: 'description',
- *     accessor: 'description',
- *     maxWidth: 200,
- *   },
- *   {
- *     id: 'view',
- *     Header: 'view',
- *     Cell: () => {
- *       return <span onClick={onViewClick}>View</span>
- *     },
- *   },
- * ], [onViewClick])
- * const data = [
- *  { name: 'Name1', description: 'Description1' },
- *  { name: 'Name2', description: 'Description2' },
- *  { name: 'Name3', description: 'Description3' },
- * ]
- * <Table
- *   columns={columns}
- *   data={data}
- *   emptyTableContent='No data.'
- *   isLoading={false}
- *   isSortable={true}
- * />
- */
-export declare const Table: {
-    <T extends Record<string, unknown> = Record<string, unknown>>(props: TableProps<T>): JSX.Element;
-    displayName: string;
-};