@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/react-table/react-table.js

@@ -1,9 +1,4 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-empty-interface */
-/* eslint-disable @typescript-eslint/ban-types */
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});

package/cjs/react-table/react-table.types-test.js

@@ -0,0 +1,653 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _index = require('../core/Table/index.js');
+const _react = _interop_require_default._(require('react'));
+const _index1 = require('../index.js');
+() => {
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+    },
+    {
+      Header: 'Header 2',
+      accessor: 'header2',
+    },
+  ];
+  const data = [
+    {
+      header1: 'row1',
+      header2: 'row1',
+    },
+    {
+      header1: 'row2',
+      header2: 'row2',
+    },
+  ];
+  return _react.default.createElement(_index.Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+      columns: [
+        {
+          Header: 'Header 2',
+          accessor: 'header2',
+        },
+      ],
+    },
+  ];
+};
+() => {
+  const cellRenderer = _react.default.useCallback((props) => {
+    return _react.default.createElement(
+      'div',
+      null,
+      props.cellProps.row.original.header1,
+    );
+  }, []);
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+      cellRenderer: cellRenderer,
+    },
+    {
+      Header: 'Header 2',
+      accessor: 'header2',
+      Cell: (props) =>
+        _react.default.createElement('div', null, props.row.original.header2),
+    },
+  ];
+  const data = [
+    {
+      header1: 'row1',
+      header2: 'row1',
+    },
+    {
+      header1: 'row2',
+      header2: 'row2',
+    },
+  ];
+  return _react.default.createElement(_index.Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const Cell = _react.default.useCallback((props) => {
+    return _react.default.createElement(
+      'div',
+      null,
+      props.row.original.header1,
+    );
+  }, []);
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+      Cell: Cell,
+    },
+    {
+      Header: 'Header 2',
+      accessor: 'header2',
+    },
+  ];
+  const data = [
+    {
+      header1: 'row1',
+      header2: 'row1',
+    },
+    {
+      header1: 'row2',
+      header2: 'row2',
+    },
+  ];
+  return _react.default.createElement(_index.Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const columns = _react.default.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: 'Name',
+        Filter: _index.tableFilters.TextFilter(),
+        accessor: 'name',
+      },
+      {
+        id: 'description',
+        Header: 'Description',
+        accessor: 'description',
+        maxWidth: 200,
+      },
+    ],
+    [],
+  );
+  const data = _react.default.useMemo(() => {
+    return [
+      {
+        name: 'Name1',
+        description: 'description',
+      },
+      {
+        name: 'Name2',
+        description: 'description',
+      },
+      {
+        name: 'Name3',
+        description: 'description',
+      },
+    ];
+  }, []);
+  return _react.default.createElement(_index.Table, {
+    columns: columns,
+    emptyTableContent: 'No data.',
+    data: data,
+  });
+};
+() => {
+  const translatedLabels = _react.default.useMemo(
+    () => ({
+      filter: 'Filter',
+      clear: 'Clear',
+      from: 'From',
+      to: 'To',
+    }),
+    [],
+  );
+  const formatter = _react.default.useMemo(
+    () =>
+      new Intl.DateTimeFormat('en-us', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    [],
+  );
+  const formatDate = _react.default.useCallback(
+    (date) => {
+      return formatter.format(date);
+    },
+    [formatter],
+  );
+  const menuItems = _react.default.useCallback((close) => {
+    return [
+      _react.default.createElement(
+        _index1.MenuItem,
+        {
+          key: 1,
+          onClick: () => close(),
+        },
+        'Edit',
+      ),
+      _react.default.createElement(
+        _index1.MenuItem,
+        {
+          key: 2,
+          onClick: () => close(),
+        },
+        'Delete',
+      ),
+    ];
+  }, []);
+  const isRowDisabled = _react.default.useCallback((rowData) => {
+    return rowData.name === 'Name2';
+  }, []);
+  const isCheckboxDisabled = _react.default.useCallback((rowData) => {
+    return rowData.name === 'Name1';
+  }, []);
+  const isExpanderDisabled = _react.default.useCallback((rowData) => {
+    return rowData.name === 'Name2';
+  }, []);
+  const isCellDisabled = _react.default.useCallback((rowData) => {
+    return rowData.name === 'Name3';
+  }, []);
+  const onCellEdit = _react.default.useCallback((columnId, value, rowData) => {
+    console.log({
+      columnId,
+      value,
+      rowData,
+    });
+  }, []);
+  const cellRenderer = _react.default.useCallback(
+    (props) =>
+      _react.default.createElement(
+        _react.default.Fragment,
+        null,
+        !isRowDisabled(props.cellProps.row.original) &&
+          props.cellProps.value !== 'Fetching...'
+          ? _react.default.createElement(_index.EditableCell, {
+              ...props,
+              onCellEdit: onCellEdit,
+            })
+          : _react.default.createElement(_index.DefaultCell, {
+              ...props,
+              status:
+                props.cellProps.value === 'Fetching...'
+                  ? undefined
+                  : 'positive',
+              isDisabled: (rowData) =>
+                isCellDisabled(rowData) || isRowDisabled(rowData),
+            }),
+      ),
+    [isCellDisabled, isRowDisabled, onCellEdit],
+  );
+  const expandedSubComponent = _react.default.useCallback(
+    (row) =>
+      _react.default.createElement(
+        'div',
+        {
+          style: {
+            padding: 16,
+          },
+        },
+        _react.default.createElement(
+          _index1.Text,
+          {
+            variant: 'leading',
+          },
+          'Extra information',
+        ),
+        _react.default.createElement(
+          'pre',
+          null,
+          _react.default.createElement(
+            'code',
+            null,
+            JSON.stringify(
+              {
+                values: row.values,
+              },
+              null,
+              2,
+            ),
+          ),
+        ),
+      ),
+    [],
+  );
+  const onClickHandler = _react.default.useCallback(
+    (props) => console.log(props.row.original.name),
+    [],
+  );
+  const columns = _react.default.useMemo(
+    () => [
+      (0, _index.SelectionColumn)({
+        isDisabled: isCheckboxDisabled,
+      }),
+      (0, _index.ExpanderColumn)({
+        subComponent: expandedSubComponent,
+        isDisabled: isExpanderDisabled,
+      }),
+      {
+        id: 'index',
+        Header: '#',
+        accessor: 'index',
+        width: 80,
+        fieldType: 'number',
+        Filter: _index.tableFilters.NumberRangeFilter(translatedLabels),
+        filter: 'between',
+        disableToggleVisibility: true,
+        sticky: 'left',
+      },
+      {
+        id: 'name',
+        Header: 'Name',
+        accessor: 'name',
+        fieldType: 'text',
+        cellRenderer,
+        Filter: _index.tableFilters.TextFilter(translatedLabels),
+        disableReordering: true,
+      },
+      {
+        id: 'description',
+        Header: 'Description',
+        accessor: 'description',
+        fieldType: 'text',
+        Filter: _index.tableFilters.TextFilter(translatedLabels),
+        maxWidth: 200,
+      },
+      {
+        id: 'ids',
+        Header: 'IDs (enter one of the IDs in the filter)',
+        accessor: 'ids',
+        Cell: (props) => {
+          return _react.default.createElement(
+            _react.default.Fragment,
+            null,
+            props.row.original.ids.join(', '),
+          );
+        },
+        Filter: _index.tableFilters.TextFilter(translatedLabels),
+        filter: 'includes',
+        minWidth: 200,
+      },
+      {
+        id: 'startDate',
+        Header: 'Start date',
+        accessor: 'startDate',
+        Cell: (props) => {
+          return _react.default.createElement(
+            _react.default.Fragment,
+            null,
+            formatDate(props.row.original.startDate),
+          );
+        },
+        Filter: _index.tableFilters.DateRangeFilter({
+          translatedLabels,
+        }),
+        filter: 'betweenDate',
+      },
+      {
+        id: 'endDate',
+        Header: 'End date',
+        accessor: (rowData) => new Date(rowData.endDate),
+        Cell: (props) => {
+          return _react.default.createElement(
+            _react.default.Fragment,
+            null,
+            formatDate(new Date(props.row.original.endDate)),
+          );
+        },
+        Filter: _index.tableFilters.DateRangeFilter({
+          translatedLabels,
+        }),
+        filter: 'betweenDate',
+      },
+      {
+        id: 'click-me',
+        Header: 'Click',
+        width: 100,
+        Cell: (props) => {
+          return _react.default.createElement(
+            _index1.Anchor,
+            {
+              as: 'button',
+              onClick: (e) => {
+                e.stopPropagation();
+                console.log(props.row.original.name);
+                onClickHandler(props);
+              },
+            },
+            'Click me!',
+          );
+        },
+        disableResizing: true,
+      },
+      {
+        ...(0, _index.ActionColumn)({
+          columnManager: true,
+        }),
+        Cell: (props) =>
+          _react.default.createElement(
+            _index1.DropdownMenu,
+            {
+              menuItems: menuItems,
+            },
+            _react.default.createElement(
+              _index1.IconButton,
+              {
+                styleType: 'borderless',
+                onClick: (e) => e.stopPropagation(),
+                disabled: isRowDisabled(props.row.original),
+              },
+              _react.default.createElement('svg', null),
+            ),
+          ),
+        sticky: 'right',
+      },
+    ],
+    [
+      isCheckboxDisabled,
+      expandedSubComponent,
+      isExpanderDisabled,
+      translatedLabels,
+      cellRenderer,
+      formatDate,
+      onClickHandler,
+      menuItems,
+      isRowDisabled,
+    ],
+  );
+  const data = _react.default.useMemo(
+    () => [
+      {
+        index: 1,
+        name: 'Name1',
+        description: 'Description1',
+        ids: ['1'],
+        startDate: new Date('May 1, 2021'),
+        endDate: '2021-05-31T21:00:00.000Z',
+        subRows: [
+          {
+            index: 11,
+            name: 'Name11',
+            description: 'Description11',
+            ids: ['11'],
+            startDate: new Date('May 11, 2021'),
+            endDate: '2021-05-31T21:00:00.000Z',
+            subRows: [
+              {
+                index: 111,
+                name: 'Name111',
+                description: 'Description111',
+                ids: ['111'],
+                startDate: new Date('May 11, 2021'),
+                endDate: '2021-05-31T21:00:00.000Z',
+                subRows: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        index: 2,
+        name: 'Name2',
+        description: 'Description2',
+        ids: ['2', '3', '4'],
+        startDate: new Date('May 2, 2021'),
+        endDate: '2021-06-01T21:00:00.000Z',
+        subRows: [
+          {
+            index: 21,
+            name: 'Name21',
+            description: 'Description21',
+            ids: ['21'],
+            startDate: new Date('May 21, 2021'),
+            endDate: '2021-06-01T21:00:00.000Z',
+            subRows: [],
+          },
+          {
+            index: 22,
+            name: 'Name22',
+            description: 'Description22',
+            ids: ['22'],
+            startDate: new Date('May 22, 2021'),
+            endDate: '2021-06-01T21:00:00.000Z',
+            subRows: [],
+          },
+        ],
+      },
+      {
+        index: 3,
+        name: 'Name3',
+        description: 'Description3',
+        ids: ['3', '4'],
+        startDate: new Date('May 3, 2021'),
+        endDate: '2021-06-02T21:00:00.000Z',
+        subRows: [],
+      },
+    ],
+    [],
+  );
+  const onFilter = _react.default.useCallback(
+    (filters, state, filteredData) => {
+      let rowInfo = '[';
+      filteredData?.forEach((row) => {
+        rowInfo += `${JSON.stringify(row.original)},`;
+      });
+      rowInfo = rowInfo.slice(0, rowInfo.length - 1);
+      rowInfo += ']';
+      console.log(
+        `Filter changed. Filters: ${JSON.stringify(
+          filters,
+        )}, State: ${JSON.stringify(state)}, Rows: ${rowInfo}`,
+      );
+    },
+    [],
+  );
+  const onSelect = _react.default.useCallback(
+    (rows, state) =>
+      console.log(
+        `Selected rows: ${JSON.stringify(rows)}, Table state: ${JSON.stringify(
+          state,
+        )}`,
+      ),
+    [],
+  );
+  const onRowClick = _react.default.useCallback(
+    (event, row) => console.log(`Row clicked: ${JSON.stringify(row.original)}`),
+    [],
+  );
+  const onSort = _react.default.useCallback(
+    (state) =>
+      console.log(`Sort changed. Table state: ${JSON.stringify(state)}`),
+    [],
+  );
+  const onExpand = _react.default.useCallback(
+    (rows, state) =>
+      console.log(
+        `Expanded rows: ${JSON.stringify(rows)}. Table state: ${JSON.stringify(
+          state,
+        )}`,
+      ),
+    [],
+  );
+  const onRowInViewport = _react.default.useCallback((rowData) => {
+    console.log(`Row in view: ${JSON.stringify(rowData)}`);
+  }, []);
+  const rowProps = _react.default.useCallback((row) => {
+    return {
+      onMouseEnter: () => {
+        console.log(`Hovered over ${row.original.name}`);
+        setHoveredRowIndex(row.index);
+      },
+      ref: (el) => {
+        if (el) {
+          setRowRefMap((r) => {
+            r[row.index] = el;
+            return r;
+          });
+        }
+      },
+    };
+  }, []);
+  const pageSizeList = _react.default.useMemo(() => [10, 25, 50], []);
+  const paginator = _react.default.useCallback(
+    (props) =>
+      _react.default.createElement(_index.TablePaginator, {
+        ...props,
+        pageSizeList: pageSizeList,
+        localization: {
+          pageSizeLabel: (size) => `${size} per localized page`,
+          rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
+            isLoading
+              ? `${startIndex}-${endIndex} localized`
+              : `${startIndex}-${endIndex} of localized ${totalRows}`,
+          previousPage: 'Previous localized page',
+          nextPage: 'Next localized page',
+          goToPageLabel: (page) => `Go to localized page ${page}`,
+          rowsPerPageLabel: 'Rows per localized page',
+          rowsSelectedLabel: (totalSelectedRowsCount) =>
+            `${totalSelectedRowsCount} localized ${
+              totalSelectedRowsCount === 1 ? 'row' : 'rows'
+            } selected`,
+        },
+      }),
+    [pageSizeList],
+  );
+  const [globalFilter, setGlobalFilter] = _react.default.useState('');
+  const tableInstance = _react.default.useRef();
+  const [hoveredRowIndex, setHoveredRowIndex] = _react.default.useState(0);
+  const [rowRefMap, setRowRefMap] = _react.default.useState({});
+  return _react.default.createElement(
+    'div',
+    null,
+    _react.default.createElement(_index1.Input, {
+      placeholder: 'Search...',
+      value: globalFilter,
+      onInput: (e) => setGlobalFilter(e.target.value),
+    }),
+    _react.default.createElement(_index.Table, {
+      columns: columns,
+      data: data,
+      emptyTableContent: 'No data.',
+      onFilter: onFilter,
+      globalFilterValue: globalFilter,
+      onSelect: onSelect,
+      isSelectable: true,
+      isSortable: true,
+      isResizable: true,
+      enableColumnReordering: true,
+      onSort: onSort,
+      onRowClick: onRowClick,
+      onExpand: onExpand,
+      subComponent: expandedSubComponent,
+      onRowInViewport: onRowInViewport,
+      selectionMode: 'multi',
+      isRowDisabled: isRowDisabled,
+      initialState: {
+        filters: [
+          {
+            id: 'name',
+            value: '1',
+          },
+        ],
+        selectedRowIds: {
+          0: true,
+          1: true,
+          4: true,
+          5: true,
+        },
+      },
+      stateReducer: _react.default.useCallback(
+        (newState, action, prevState, instance) => {
+          tableInstance.current = instance;
+          return newState;
+        },
+        [],
+      ),
+      rowProps: rowProps,
+      paginatorRenderer: paginator,
+      density: 'condensed',
+      autoResetFilters: false,
+      autoResetSortBy: false,
+      columnResizeMode: 'expand',
+      styleType: 'zebra-rows',
+      enableVirtualization: true,
+      scrollToRow: _react.default.useCallback(
+        (rows, data) => rows.findIndex((row) => row.original.index === 1),
+        [],
+      ),
+    }),
+    _react.default.createElement(_index1.Tooltip, {
+      reference: rowRefMap[hoveredRowIndex],
+      content: `Hovered over ${data[hoveredRowIndex].name}.`,
+      placement: 'bottom',
+    }),
+  );
+};

package/cjs/styles.d.ts

@@ -2,4 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export default styles as Record<string, string>;
+export declare const styles: Record<string, string>;
+export declare const version: string;

package/cjs/styles.js

@@ -1 +1,17 @@
-"use strict";const t=new Proxy({},{get(e,i){if(typeof i=="string"&&i.startsWith("iui-"))return i.replace("iui-","_iui3-")},has(e,i){return typeof i=="string"&&i.startsWith("iui-")}});module.exports=t;
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const t = '3.12.1';
+const u = new Proxy(
+  {},
+  {
+    get(e, i) {
+      if (typeof i == 'string' && i.startsWith('iui-'))
+        return i.replace('iui-', '_iui3-');
+    },
+    has(e, i) {
+      return typeof i == 'string' && i.startsWith('iui-');
+    },
+  },
+);
+exports.styles = u;
+exports.version = t;