@itwin/itwinui-react 3.11.3 → 3.12.1

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

@@ -0,0 +1,658 @@
+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 React.createElement(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 React.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.createElement('div', null, props.row.original.header2),
+    },
+  ];
+  const data = [
+    {
+      header1: 'row1',
+      header2: 'row1',
+    },
+    {
+      header1: 'row2',
+      header2: 'row2',
+    },
+  ];
+  return React.createElement(Table, {
+    columns: columns,
+    data: data,
+    emptyTableContent: 'No data.',
+  });
+};
+() => {
+  const Cell = React.useCallback((props) => {
+    return React.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.createElement(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 React.createElement(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 [
+      React.createElement(
+        MenuItem,
+        {
+          key: 1,
+          onClick: () => close(),
+        },
+        'Edit',
+      ),
+      React.createElement(
+        MenuItem,
+        {
+          key: 2,
+          onClick: () => close(),
+        },
+        'Delete',
+      ),
+    ];
+  }, []);
+  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) =>
+      React.createElement(
+        React.Fragment,
+        null,
+        !isRowDisabled(props.cellProps.row.original) &&
+          props.cellProps.value !== 'Fetching...'
+          ? React.createElement(EditableCell, {
+              ...props,
+              onCellEdit: onCellEdit,
+            })
+          : React.createElement(DefaultCell, {
+              ...props,
+              status:
+                props.cellProps.value === 'Fetching...'
+                  ? undefined
+                  : 'positive',
+              isDisabled: (rowData) =>
+                isCellDisabled(rowData) || isRowDisabled(rowData),
+            }),
+      ),
+    [isCellDisabled, isRowDisabled, onCellEdit],
+  );
+  const expandedSubComponent = React.useCallback(
+    (row) =>
+      React.createElement(
+        'div',
+        {
+          style: {
+            padding: 16,
+          },
+        },
+        React.createElement(
+          Text,
+          {
+            variant: 'leading',
+          },
+          'Extra information',
+        ),
+        React.createElement(
+          'pre',
+          null,
+          React.createElement(
+            'code',
+            null,
+            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 React.createElement(
+            React.Fragment,
+            null,
+            props.row.original.ids.join(', '),
+          );
+        },
+        Filter: tableFilters.TextFilter(translatedLabels),
+        filter: 'includes',
+        minWidth: 200,
+      },
+      {
+        id: 'startDate',
+        Header: 'Start date',
+        accessor: 'startDate',
+        Cell: (props) => {
+          return React.createElement(
+            React.Fragment,
+            null,
+            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 React.createElement(
+            React.Fragment,
+            null,
+            formatDate(new Date(props.row.original.endDate)),
+          );
+        },
+        Filter: tableFilters.DateRangeFilter({
+          translatedLabels,
+        }),
+        filter: 'betweenDate',
+      },
+      {
+        id: 'click-me',
+        Header: 'Click',
+        width: 100,
+        Cell: (props) => {
+          return React.createElement(
+            Anchor,
+            {
+              as: 'button',
+              onClick: (e) => {
+                e.stopPropagation();
+                console.log(props.row.original.name);
+                onClickHandler(props);
+              },
+            },
+            'Click me!',
+          );
+        },
+        disableResizing: true,
+      },
+      {
+        ...ActionColumn({
+          columnManager: true,
+        }),
+        Cell: (props) =>
+          React.createElement(
+            DropdownMenu,
+            {
+              menuItems: menuItems,
+            },
+            React.createElement(
+              IconButton,
+              {
+                styleType: 'borderless',
+                onClick: (e) => e.stopPropagation(),
+                disabled: isRowDisabled(props.row.original),
+              },
+              React.createElement('svg', null),
+            ),
+          ),
+        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) =>
+      React.createElement(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 React.createElement(
+    'div',
+    null,
+    React.createElement(Input, {
+      placeholder: 'Search...',
+      value: globalFilter,
+      onInput: (e) => setGlobalFilter(e.target.value),
+    }),
+    React.createElement(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),
+        [],
+      ),
+    }),
+    React.createElement(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.1';
+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 };