@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,491 @@
+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';
+()=>{
+    let columns = [
+        {
+            Header: 'Header 1',
+            accessor: 'header1'
+        },
+        {
+            Header: 'Header 2',
+            accessor: 'header2'
+        }
+    ];
+    let data = [
+        {
+            header1: 'row1',
+            header2: 'row1'
+        },
+        {
+            header1: 'row2',
+            header2: 'row2'
+        }
+    ];
+    return React.createElement(Table, {
+        columns: columns,
+        data: data,
+        emptyTableContent: "No data."
+    });
+};
+()=>{
+    let columns = [
+        {
+            Header: 'Header 1',
+            accessor: 'header1',
+            columns: [
+                {
+                    Header: 'Header 2',
+                    accessor: 'header2'
+                }
+            ]
+        }
+    ];
+};
+()=>{
+    let cellRenderer = React.useCallback((props)=>React.createElement("div", null, props.cellProps.row.original.header1), []);
+    let columns = [
+        {
+            Header: 'Header 1',
+            accessor: 'header1',
+            cellRenderer: cellRenderer
+        },
+        {
+            Header: 'Header 2',
+            accessor: 'header2',
+            Cell: (props)=>React.createElement("div", null, props.row.original.header2)
+        }
+    ];
+    let data = [
+        {
+            header1: 'row1',
+            header2: 'row1'
+        },
+        {
+            header1: 'row2',
+            header2: 'row2'
+        }
+    ];
+    return React.createElement(Table, {
+        columns: columns,
+        data: data,
+        emptyTableContent: "No data."
+    });
+};
+()=>{
+    let Cell = React.useCallback((props)=>React.createElement("div", null, props.row.original.header1), []);
+    let columns = [
+        {
+            Header: 'Header 1',
+            accessor: 'header1',
+            Cell: Cell
+        },
+        {
+            Header: 'Header 2',
+            accessor: 'header2'
+        }
+    ];
+    let data = [
+        {
+            header1: 'row1',
+            header2: 'row1'
+        },
+        {
+            header1: 'row2',
+            header2: 'row2'
+        }
+    ];
+    return React.createElement(Table, {
+        columns: columns,
+        data: data,
+        emptyTableContent: "No data."
+    });
+};
+()=>{
+    let columns = React.useMemo(()=>[
+            {
+                id: 'name',
+                Header: 'Name',
+                Filter: tableFilters.TextFilter(),
+                accessor: 'name'
+            },
+            {
+                id: 'description',
+                Header: 'Description',
+                accessor: 'description',
+                maxWidth: 200
+            }
+        ], []);
+    let data = React.useMemo(()=>[
+            {
+                name: 'Name1',
+                description: 'description'
+            },
+            {
+                name: 'Name2',
+                description: 'description'
+            },
+            {
+                name: 'Name3',
+                description: 'description'
+            }
+        ], []);
+    return React.createElement(Table, {
+        columns: columns,
+        emptyTableContent: "No data.",
+        data: data
+    });
+};
+()=>{
+    let translatedLabels = React.useMemo(()=>({
+            filter: 'Filter',
+            clear: 'Clear',
+            from: 'From',
+            to: 'To'
+        }), []);
+    let formatter = React.useMemo(()=>new Intl.DateTimeFormat('en-us', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        }), []);
+    let formatDate = React.useCallback((date)=>formatter.format(date), [
+        formatter
+    ]);
+    let menuItems = React.useCallback((close)=>[
+            React.createElement(MenuItem, {
+                key: 1,
+                onClick: ()=>close()
+            }, "Edit"),
+            React.createElement(MenuItem, {
+                key: 2,
+                onClick: ()=>close()
+            }, "Delete")
+        ], []);
+    let isRowDisabled = React.useCallback((rowData)=>'Name2' === rowData.name, []);
+    let isCheckboxDisabled = React.useCallback((rowData)=>'Name1' === rowData.name, []);
+    let isExpanderDisabled = React.useCallback((rowData)=>'Name2' === rowData.name, []);
+    let isCellDisabled = React.useCallback((rowData)=>'Name3' === rowData.name, []);
+    let onCellEdit = React.useCallback((columnId, value, rowData)=>{
+        console.log({
+            columnId,
+            value,
+            rowData
+        });
+    }, []);
+    let cellRenderer = React.useCallback((props)=>React.createElement(React.Fragment, null, isRowDisabled(props.cellProps.row.original) || 'Fetching...' === props.cellProps.value ? React.createElement(DefaultCell, {
+            ...props,
+            status: 'Fetching...' === props.cellProps.value ? void 0 : 'positive',
+            isDisabled: (rowData)=>isCellDisabled(rowData) || isRowDisabled(rowData)
+        }) : React.createElement(EditableCell, {
+            ...props,
+            onCellEdit: onCellEdit
+        })), [
+        isCellDisabled,
+        isRowDisabled,
+        onCellEdit
+    ]);
+    let 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)))), []);
+    let onClickHandler = React.useCallback((props)=>console.log(props.row.original.name), []);
+    let 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)=>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)=>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)=>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)=>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
+    ]);
+    let 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: []
+            }
+        ], []);
+    let 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}`);
+    }, []);
+    let onSelect = React.useCallback((rows, state)=>console.log(`Selected rows: ${JSON.stringify(rows)}, Table state: ${JSON.stringify(state)}`), []);
+    let onRowClick = React.useCallback((event, row)=>console.log(`Row clicked: ${JSON.stringify(row.original)}`), []);
+    let onSort = React.useCallback((state)=>console.log(`Sort changed. Table state: ${JSON.stringify(state)}`), []);
+    let onExpand = React.useCallback((rows, state)=>console.log(`Expanded rows: ${JSON.stringify(rows)}. Table state: ${JSON.stringify(state)}`), []);
+    let onRowInViewport = React.useCallback((rowData)=>{
+        console.log(`Row in view: ${JSON.stringify(rowData)}`);
+    }, []);
+    let rowProps = React.useCallback((row)=>({
+            onMouseEnter: ()=>{
+                console.log(`Hovered over ${row.original.name}`);
+                setHoveredRowIndex(row.index);
+            },
+            ref: (el)=>{
+                if (el) setRowRefMap((r)=>{
+                    r[row.index] = el;
+                    return r;
+                });
+            }
+        }), []);
+    let pageSizeList = React.useMemo(()=>[
+            10,
+            25,
+            50
+        ], []);
+    let 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 ${1 === totalSelectedRowsCount ? 'row' : 'rows'} selected`
+            }
+        }), [
+        pageSizeList
+    ]);
+    let [globalFilter, setGlobalFilter] = React.useState('');
+    let tableInstance = React.useRef();
+    let [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
+    let [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)=>1 === row.original.index), [])
+    }), React.createElement(Tooltip, {
+        reference: rowRefMap[hoveredRowIndex],
+        content: `Hovered over ${data[hoveredRowIndex].name}.`,
+        placement: "bottom"
+    }));
+};

package/DEV-esm/styles.js

@@ -0,0 +1,17 @@
+const t = "3.13.0";
+const u = new Proxy(
+  {},
+  {
+    get(e, i) {
+      if (typeof i == "string" && i.startsWith("iui-"))
+        return i.replace("iui-", `_iui${t.replace(/\./g, "")}-`);
+    },
+    has(e, i) {
+      return typeof i == "string" && i.startsWith("iui-");
+    }
+  }
+);
+export {
+  u as styles,
+  t as version
+};