@itwin/itwinui-react 3.11.2 → 3.12.0

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,628 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _jsxruntime = require('react/jsx-runtime');
+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 (0, _jsxruntime.jsx)(_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 (0, _jsxruntime.jsx)('div', {
+      children: props.cellProps.row.original.header1,
+    });
+  }, []);
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+      cellRenderer: cellRenderer,
+    },
+    {
+      Header: 'Header 2',
+      accessor: 'header2',
+      Cell: (props) =>
+        (0, _jsxruntime.jsx)('div', {
+          children: props.row.original.header2,
+        }),
+    },
+  ];
+  const data = [
+    {
+      header1: 'row1',
+      header2: 'row1',
+    },
+    {
+      header1: 'row2',
+      header2: 'row2',
+    },
+  ];
+  return (0, _jsxruntime.jsx)(_index.Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const Cell = _react.default.useCallback((props) => {
+    return (0, _jsxruntime.jsx)('div', {
+      children: 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 (0, _jsxruntime.jsx)(_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 (0, _jsxruntime.jsx)(_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 [
+      (0, _jsxruntime.jsx)(
+        _index1.MenuItem,
+        {
+          onClick: () => close(),
+          children: 'Edit',
+        },
+        1,
+      ),
+      (0, _jsxruntime.jsx)(
+        _index1.MenuItem,
+        {
+          onClick: () => close(),
+          children: 'Delete',
+        },
+        2,
+      ),
+    ];
+  }, []);
+  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) =>
+      (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children:
+          !isRowDisabled(props.cellProps.row.original) &&
+          props.cellProps.value !== 'Fetching...'
+            ? (0, _jsxruntime.jsx)(_index.EditableCell, {
+                ...props,
+                onCellEdit: onCellEdit,
+              })
+            : (0, _jsxruntime.jsx)(_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) =>
+      (0, _jsxruntime.jsxs)('div', {
+        style: {
+          padding: 16,
+        },
+        children: [
+          (0, _jsxruntime.jsx)(_index1.Text, {
+            variant: 'leading',
+            children: 'Extra information',
+          }),
+          (0, _jsxruntime.jsx)('pre', {
+            children: (0, _jsxruntime.jsx)('code', {
+              children: 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 (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: props.row.original.ids.join(', '),
+          });
+        },
+        Filter: _index.tableFilters.TextFilter(translatedLabels),
+        filter: 'includes',
+        minWidth: 200,
+      },
+      {
+        id: 'startDate',
+        Header: 'Start date',
+        accessor: 'startDate',
+        Cell: (props) => {
+          return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: 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 (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: formatDate(new Date(props.row.original.endDate)),
+          });
+        },
+        Filter: _index.tableFilters.DateRangeFilter({
+          translatedLabels,
+        }),
+        filter: 'betweenDate',
+      },
+      {
+        id: 'click-me',
+        Header: 'Click',
+        width: 100,
+        Cell: (props) => {
+          return (0, _jsxruntime.jsx)(_index1.Anchor, {
+            as: 'button',
+            onClick: (e) => {
+              e.stopPropagation();
+              console.log(props.row.original.name);
+              onClickHandler(props);
+            },
+            children: 'Click me!',
+          });
+        },
+        disableResizing: true,
+      },
+      {
+        ...(0, _index.ActionColumn)({
+          columnManager: true,
+        }),
+        Cell: (props) =>
+          (0, _jsxruntime.jsx)(_index1.DropdownMenu, {
+            menuItems: menuItems,
+            children: (0, _jsxruntime.jsx)(_index1.IconButton, {
+              styleType: 'borderless',
+              onClick: (e) => e.stopPropagation(),
+              disabled: isRowDisabled(props.row.original),
+              children: (0, _jsxruntime.jsx)('svg', {}),
+            }),
+          }),
+        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) =>
+      (0, _jsxruntime.jsx)(_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 (0, _jsxruntime.jsxs)('div', {
+    children: [
+      (0, _jsxruntime.jsx)(_index1.Input, {
+        placeholder: 'Search...',
+        value: globalFilter,
+        onInput: (e) => setGlobalFilter(e.target.value),
+      }),
+      (0, _jsxruntime.jsx)(_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),
+          [],
+        ),
+      }),
+      (0, _jsxruntime.jsx)(_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.0';
+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;