@itwin/itwinui-react 3.11.2 → 3.12.0

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

@@ -0,0 +1,641 @@
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
+import {
+  ActionColumn,
+  Table,
+  TablePaginator,
+  tableFilters,
+  EditableCell,
+  DefaultCell,
+  SelectionColumn,
+  ExpanderColumn,
+} from '../core/Table/index.js';
+import React from 'react';
+import {
+  Anchor,
+  DropdownMenu,
+  IconButton,
+  Input,
+  MenuItem,
+  Text,
+  Tooltip,
+} from '../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 _jsx(Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+      columns: [
+        {
+          Header: 'Header 2',
+          accessor: 'header2',
+        },
+      ],
+    },
+  ];
+};
+() => {
+  const cellRenderer = React.useCallback((props) => {
+    return _jsx('div', {
+      children: props.cellProps.row.original.header1,
+    });
+  }, []);
+  const columns = [
+    {
+      Header: 'Header 1',
+      accessor: 'header1',
+      cellRenderer: cellRenderer,
+    },
+    {
+      Header: 'Header 2',
+      accessor: 'header2',
+      Cell: (props) =>
+        _jsx('div', {
+          children: props.row.original.header2,
+        }),
+    },
+  ];
+  const data = [
+    {
+      header1: 'row1',
+      header2: 'row1',
+    },
+    {
+      header1: 'row2',
+      header2: 'row2',
+    },
+  ];
+  return _jsx(Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const Cell = React.useCallback((props) => {
+    return _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 _jsx(Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const columns = React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: 'Name',
+        Filter: tableFilters.TextFilter(),
+        accessor: 'name',
+      },
+      {
+        id: 'description',
+        Header: 'Description',
+        accessor: 'description',
+        maxWidth: 200,
+      },
+    ],
+    [],
+  );
+  const data = React.useMemo(() => {
+    return [
+      {
+        name: 'Name1',
+        description: 'description',
+      },
+      {
+        name: 'Name2',
+        description: 'description',
+      },
+      {
+        name: 'Name3',
+        description: 'description',
+      },
+    ];
+  }, []);
+  return _jsx(Table, {
+    columns: columns,
+    emptyTableContent: 'No data.',
+    data: data,
+  });
+};
+() => {
+  const translatedLabels = React.useMemo(
+    () => ({
+      filter: 'Filter',
+      clear: 'Clear',
+      from: 'From',
+      to: 'To',
+    }),
+    [],
+  );
+  const formatter = React.useMemo(
+    () =>
+      new Intl.DateTimeFormat('en-us', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    [],
+  );
+  const formatDate = React.useCallback(
+    (date) => {
+      return formatter.format(date);
+    },
+    [formatter],
+  );
+  const menuItems = React.useCallback((close) => {
+    return [
+      _jsx(
+        MenuItem,
+        {
+          onClick: () => close(),
+          children: 'Edit',
+        },
+        1,
+      ),
+      _jsx(
+        MenuItem,
+        {
+          onClick: () => close(),
+          children: 'Delete',
+        },
+        2,
+      ),
+    ];
+  }, []);
+  const isRowDisabled = React.useCallback((rowData) => {
+    return rowData.name === 'Name2';
+  }, []);
+  const isCheckboxDisabled = React.useCallback((rowData) => {
+    return rowData.name === 'Name1';
+  }, []);
+  const isExpanderDisabled = React.useCallback((rowData) => {
+    return rowData.name === 'Name2';
+  }, []);
+  const isCellDisabled = React.useCallback((rowData) => {
+    return rowData.name === 'Name3';
+  }, []);
+  const onCellEdit = React.useCallback((columnId, value, rowData) => {
+    console.log({
+      columnId,
+      value,
+      rowData,
+    });
+  }, []);
+  const cellRenderer = React.useCallback(
+    (props) =>
+      _jsx(_Fragment, {
+        children:
+          !isRowDisabled(props.cellProps.row.original) &&
+          props.cellProps.value !== 'Fetching...'
+            ? _jsx(EditableCell, {
+                ...props,
+                onCellEdit: onCellEdit,
+              })
+            : _jsx(DefaultCell, {
+                ...props,
+                status:
+                  props.cellProps.value === 'Fetching...'
+                    ? undefined
+                    : 'positive',
+                isDisabled: (rowData) =>
+                  isCellDisabled(rowData) || isRowDisabled(rowData),
+              }),
+      }),
+    [isCellDisabled, isRowDisabled, onCellEdit],
+  );
+  const expandedSubComponent = React.useCallback(
+    (row) =>
+      _jsxs('div', {
+        style: {
+          padding: 16,
+        },
+        children: [
+          _jsx(Text, {
+            variant: 'leading',
+            children: 'Extra information',
+          }),
+          _jsx('pre', {
+            children: _jsx('code', {
+              children: JSON.stringify(
+                {
+                  values: row.values,
+                },
+                null,
+                2,
+              ),
+            }),
+          }),
+        ],
+      }),
+    [],
+  );
+  const onClickHandler = React.useCallback(
+    (props) => console.log(props.row.original.name),
+    [],
+  );
+  const columns = React.useMemo(
+    () => [
+      SelectionColumn({
+        isDisabled: isCheckboxDisabled,
+      }),
+      ExpanderColumn({
+        subComponent: expandedSubComponent,
+        isDisabled: isExpanderDisabled,
+      }),
+      {
+        id: 'index',
+        Header: '#',
+        accessor: 'index',
+        width: 80,
+        fieldType: 'number',
+        Filter: tableFilters.NumberRangeFilter(translatedLabels),
+        filter: 'between',
+        disableToggleVisibility: true,
+        sticky: 'left',
+      },
+      {
+        id: 'name',
+        Header: 'Name',
+        accessor: 'name',
+        fieldType: 'text',
+        cellRenderer,
+        Filter: tableFilters.TextFilter(translatedLabels),
+        disableReordering: true,
+      },
+      {
+        id: 'description',
+        Header: 'Description',
+        accessor: 'description',
+        fieldType: 'text',
+        Filter: tableFilters.TextFilter(translatedLabels),
+        maxWidth: 200,
+      },
+      {
+        id: 'ids',
+        Header: 'IDs (enter one of the IDs in the filter)',
+        accessor: 'ids',
+        Cell: (props) => {
+          return _jsx(_Fragment, {
+            children: props.row.original.ids.join(', '),
+          });
+        },
+        Filter: tableFilters.TextFilter(translatedLabels),
+        filter: 'includes',
+        minWidth: 200,
+      },
+      {
+        id: 'startDate',
+        Header: 'Start date',
+        accessor: 'startDate',
+        Cell: (props) => {
+          return _jsx(_Fragment, {
+            children: formatDate(props.row.original.startDate),
+          });
+        },
+        Filter: tableFilters.DateRangeFilter({
+          translatedLabels,
+        }),
+        filter: 'betweenDate',
+      },
+      {
+        id: 'endDate',
+        Header: 'End date',
+        accessor: (rowData) => new Date(rowData.endDate),
+        Cell: (props) => {
+          return _jsx(_Fragment, {
+            children: formatDate(new Date(props.row.original.endDate)),
+          });
+        },
+        Filter: tableFilters.DateRangeFilter({
+          translatedLabels,
+        }),
+        filter: 'betweenDate',
+      },
+      {
+        id: 'click-me',
+        Header: 'Click',
+        width: 100,
+        Cell: (props) => {
+          return _jsx(Anchor, {
+            as: 'button',
+            onClick: (e) => {
+              e.stopPropagation();
+              console.log(props.row.original.name);
+              onClickHandler(props);
+            },
+            children: 'Click me!',
+          });
+        },
+        disableResizing: true,
+      },
+      {
+        ...ActionColumn({
+          columnManager: true,
+        }),
+        Cell: (props) =>
+          _jsx(DropdownMenu, {
+            menuItems: menuItems,
+            children: _jsx(IconButton, {
+              styleType: 'borderless',
+              onClick: (e) => e.stopPropagation(),
+              disabled: isRowDisabled(props.row.original),
+              children: _jsx('svg', {}),
+            }),
+          }),
+        sticky: 'right',
+      },
+    ],
+    [
+      isCheckboxDisabled,
+      expandedSubComponent,
+      isExpanderDisabled,
+      translatedLabels,
+      cellRenderer,
+      formatDate,
+      onClickHandler,
+      menuItems,
+      isRowDisabled,
+    ],
+  );
+  const data = React.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.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.useCallback(
+    (rows, state) =>
+      console.log(
+        `Selected rows: ${JSON.stringify(rows)}, Table state: ${JSON.stringify(
+          state,
+        )}`,
+      ),
+    [],
+  );
+  const onRowClick = React.useCallback(
+    (event, row) => console.log(`Row clicked: ${JSON.stringify(row.original)}`),
+    [],
+  );
+  const onSort = React.useCallback(
+    (state) =>
+      console.log(`Sort changed. Table state: ${JSON.stringify(state)}`),
+    [],
+  );
+  const onExpand = React.useCallback(
+    (rows, state) =>
+      console.log(
+        `Expanded rows: ${JSON.stringify(rows)}. Table state: ${JSON.stringify(
+          state,
+        )}`,
+      ),
+    [],
+  );
+  const onRowInViewport = React.useCallback((rowData) => {
+    console.log(`Row in view: ${JSON.stringify(rowData)}`);
+  }, []);
+  const rowProps = React.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.useMemo(() => [10, 25, 50], []);
+  const paginator = React.useCallback(
+    (props) =>
+      _jsx(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.useState('');
+  const tableInstance = React.useRef();
+  const [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
+  const [rowRefMap, setRowRefMap] = React.useState({});
+  return _jsxs('div', {
+    children: [
+      _jsx(Input, {
+        placeholder: 'Search...',
+        value: globalFilter,
+        onInput: (e) => setGlobalFilter(e.target.value),
+      }),
+      _jsx(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.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.useCallback(
+          (rows, data) => rows.findIndex((row) => row.original.index === 1),
+          [],
+        ),
+      }),
+      _jsx(Tooltip, {
+        reference: rowRefMap[hoveredRowIndex],
+        content: `Hovered over ${data[hoveredRowIndex].name}.`,
+        placement: 'bottom',
+      }),
+    ],
+  });
+};

package/esm/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/esm/styles.js

@@ -1,15 +1,14 @@
-const t = new Proxy(
+const t = '3.12.0';
+const u = new Proxy(
   {},
   {
     get(e, i) {
-      if (typeof i == "string" && i.startsWith("iui-"))
-        return i.replace("iui-", "_iui3-");
+      if (typeof i == 'string' && i.startsWith('iui-'))
+        return i.replace('iui-', '_iui3-');
     },
     has(e, i) {
-      return typeof i == "string" && i.startsWith("iui-");
-    }
-  }
+      return typeof i == 'string' && i.startsWith('iui-');
+    },
+  },
 );
-export {
-  t as default
-};
+export { u as styles, t as version };