@itwin/itwinui-react 3.12.1 → 3.13.0

package/DEV-esm/core/Table/hooks/useResizeColumns.js

@@ -0,0 +1,259 @@
+import { actions, makePropGetter, useGetLatest } from 'react-table';
+export const useResizeColumns = (ownerDocument)=>(hooks)=>{
+        hooks.getResizerProps = [
+            defaultGetResizerProps(ownerDocument)
+        ];
+        hooks.stateReducers.push(reducer);
+        hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+    };
+let isTouchEvent = (event)=>'touchstart' === event.type;
+let defaultGetResizerProps = (ownerDocument)=>(props, { instance, header, nextHeader })=>{
+        let { dispatch } = instance;
+        let onResizeStart = (e, header)=>{
+            if (isTouchEvent(e) && e.touches && e.touches.length > 1) return;
+            let headerIdWidths = getLeafHeaders(header).map((d)=>[
+                    d.id,
+                    getHeaderWidth(d)
+                ]);
+            let nextHeaderIdWidths = nextHeader ? getLeafHeaders(nextHeader).map((d)=>[
+                    d.id,
+                    getHeaderWidth(d)
+                ]) : [];
+            let clientX = isTouchEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
+            let dispatchMove = (clientXPos)=>dispatch({
+                    type: actions.columnResizing,
+                    clientX: clientXPos
+                });
+            let dispatchEnd = ()=>dispatch({
+                    type: actions.columnDoneResizing
+                });
+            let handlersAndEvents = {
+                mouse: {
+                    moveEvent: 'mousemove',
+                    moveHandler: (e)=>dispatchMove(e.clientX),
+                    upEvent: 'mouseup',
+                    upHandler: ()=>{
+                        ownerDocument.current?.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                        ownerDocument.current?.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                        ownerDocument.current?.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
+                        dispatchEnd();
+                    }
+                },
+                touch: {
+                    moveEvent: 'touchmove',
+                    moveHandler: (e)=>{
+                        if (e.cancelable) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                        dispatchMove(e.touches[0].clientX);
+                    },
+                    upEvent: 'touchend',
+                    upHandler: ()=>{
+                        ownerDocument.current?.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                        ownerDocument.current?.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                        dispatchEnd();
+                    }
+                }
+            };
+            let events = isTouchEvent(e) ? handlersAndEvents.touch : handlersAndEvents.mouse;
+            let passiveIfSupported = !!passiveEventSupported() && {
+                passive: false
+            };
+            ownerDocument.current?.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+            ownerDocument.current?.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+            if (!isTouchEvent(e)) ownerDocument.current?.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+            dispatch({
+                type: actions.columnStartResizing,
+                columnId: header.id,
+                columnWidth: getHeaderWidth(header),
+                nextColumnWidth: getHeaderWidth(nextHeader),
+                headerIdWidths,
+                nextHeaderIdWidths,
+                clientX
+            });
+        };
+        return [
+            props,
+            {
+                onClick: (e)=>{
+                    e.stopPropagation();
+                },
+                onMouseDown: (e)=>{
+                    e.persist();
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onResizeStart(e, header);
+                },
+                onTouchStart: (e)=>{
+                    e.persist();
+                    e.preventDefault();
+                    onResizeStart(e, header);
+                },
+                style: {
+                    cursor: 'col-resize'
+                },
+                draggable: false,
+                role: 'separator'
+            }
+        ];
+    };
+useResizeColumns.pluginName = 'useResizeColumns';
+let reducer = (newState, action, previousState, instance)=>{
+    if (action.type === actions.init) return {
+        ...newState,
+        columnResizing: {
+            columnWidths: {}
+        }
+    };
+    if (action.type === actions.resetResize) return {
+        ...newState,
+        columnResizing: {
+            columnWidths: {}
+        }
+    };
+    if (action.type === actions.columnStartResizing) {
+        let { clientX, columnId, columnWidth, nextColumnWidth, headerIdWidths, nextHeaderIdWidths } = action;
+        return {
+            ...newState,
+            columnResizing: {
+                ...newState.columnResizing,
+                startX: clientX,
+                columnWidth,
+                nextColumnWidth,
+                headerIdWidths,
+                nextHeaderIdWidths,
+                isResizingColumn: columnId
+            }
+        };
+    }
+    if (action.type === actions.columnResizing) {
+        let { clientX } = action;
+        let { startX = 0, columnWidth = 1, nextColumnWidth = 1, headerIdWidths = [], nextHeaderIdWidths = [] } = newState.columnResizing;
+        if (!instance) return newState;
+        let deltaX = clientX - startX;
+        let newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
+        let isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) < instance.tableWidth;
+        let newNextColumnWidths = instance?.columnResizeMode === 'fit' || instance?.columnResizeMode === 'expand' && isTableWidthDecreasing ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth) : {};
+        if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) || !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) || !isNewTableWidthValid({
+            ...newColumnWidths,
+            ...newNextColumnWidths
+        }, instance)) return newState;
+        instance?.flatHeaders.forEach((h)=>{
+            if (!h.width) h.width = h.resizeWidth;
+        });
+        return {
+            ...newState,
+            columnResizing: {
+                ...newState.columnResizing,
+                columnWidths: {
+                    ...newState.columnResizing.columnWidths,
+                    ...newColumnWidths,
+                    ...newNextColumnWidths
+                }
+            }
+        };
+    }
+    if (action.type === actions.columnDoneResizing) return {
+        ...newState,
+        columnResizing: {
+            ...newState.columnResizing,
+            startX: void 0,
+            isResizingColumn: void 0
+        }
+    };
+    return newState;
+};
+let getColumnWidths = (headerIdWidths, deltaPercentage)=>{
+    let columnWidths = {};
+    headerIdWidths.forEach(([headerId, headerWidth])=>{
+        columnWidths[headerId] = Math.max(headerWidth + headerWidth * deltaPercentage, 0);
+    });
+    return columnWidths;
+};
+let isNewColumnWidthsValid = (columnWidths, headers)=>{
+    if (Object.values(columnWidths).some((width)=>width <= 1)) return false;
+    for (let [headerId, width] of Object.entries(columnWidths)){
+        let header = headers?.find((h)=>h.id === headerId);
+        if (!header) continue;
+        let minWidth = header.minWidth || 0;
+        let maxWidth = header.maxWidth || 1 / 0;
+        if (width < minWidth || width > maxWidth) return false;
+    }
+    return true;
+};
+let isNewTableWidthValid = (columnWidths, instance)=>{
+    if ('fit' === instance.columnResizeMode) return true;
+    let newTableWidth = 0;
+    for (let header of instance.flatHeaders)newTableWidth += columnWidths[header.id] ? columnWidths[header.id] : getHeaderWidth(header);
+    if (Math.round(newTableWidth) < instance.tableWidth) return false;
+    return true;
+};
+let useInstanceBeforeDimensions = (instance)=>{
+    let { flatHeaders, getHooks, state: { columnResizing }, columnResizeMode } = instance;
+    let getInstance = useGetLatest(instance);
+    flatHeaders.forEach((header, index)=>{
+        let resizeWidth = columnResizing.columnWidths[header.id];
+        header.width = resizeWidth || header.width || header.originalWidth;
+        header.isResizing = columnResizing.isResizingColumn === header.id;
+        let headerToResize = header.disableResizing && 'fit' === columnResizeMode ? getPreviousResizableHeader(header, instance) : header;
+        let nextResizableHeader = 'expand' === columnResizeMode && index === flatHeaders.length - 1 ? getPreviousResizableHeader(header, instance) : getNextResizableHeader(header, instance);
+        header.canResize = null == header.disableResizing || !header.disableResizing;
+        if ('fit' === columnResizeMode) header.isResizerVisible = header.canResize && !!nextResizableHeader || headerToResize && !!instance.flatHeaders[index + 1]?.canResize;
+        else header.isResizerVisible = header.canResize && !!headerToResize;
+        header.getResizerProps = makePropGetter(getHooks().getResizerProps, {
+            instance: getInstance(),
+            header: headerToResize,
+            nextHeader: nextResizableHeader
+        });
+    });
+};
+let getPreviousResizableHeader = (headerColumn, instance)=>{
+    let headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible })=>isVisible);
+    let headerIndex = headersList.findIndex((h)=>h.id === headerColumn.id);
+    return [
+        ...headersList
+    ].slice(0, headerIndex).reverse().find((h)=>!h.disableResizing);
+};
+let getNextResizableHeader = (headerColumn, instance)=>{
+    let headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible })=>isVisible);
+    let headerIndex = headersList.findIndex((h)=>h.id === headerColumn.id);
+    return [
+        ...headersList
+    ].slice(headerIndex + 1).find((h)=>!h.disableResizing);
+};
+function getLeafHeaders(header) {
+    let leafHeaders = [];
+    let recurseHeader = (header)=>{
+        if (header.columns && header.columns.length) header.columns.map(recurseHeader);
+        leafHeaders.push(header);
+    };
+    recurseHeader(header);
+    return leafHeaders;
+}
+let getHeaderWidth = (header)=>{
+    if (!header) return 0;
+    return 'string' == typeof header.width && Number.isNaN(Number(header.width)) ? Number(header.resizeWidth || 0) : Number(header.width || header.resizeWidth || 0);
+};
+let calculateTableWidth = (columnWidths, headers)=>{
+    let newTableWidth = 0;
+    for (let header of headers)newTableWidth += columnWidths[header.id] ? columnWidths[header.id] : getHeaderWidth(header);
+    return newTableWidth;
+};
+let passiveSupported = null;
+let passiveEventSupported = ()=>{
+    if (null != passiveSupported) return passiveSupported;
+    try {
+        let options = {
+            once: true,
+            get passive () {
+                passiveSupported = true;
+                return false;
+            }
+        };
+        window.addEventListener('test', ()=>{}, options);
+    } catch  {
+        passiveSupported = false;
+    }
+    return passiveSupported;
+};

package/DEV-esm/core/Table/hooks/useScrollToRow.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export function useScrollToRow({ data, enableVirtualization, page, paginatorRenderer, scrollToRow }) {
+    let rowRefs = React.useRef({});
+    let pageRef = React.useRef(page);
+    pageRef.current = page;
+    let dataRef = React.useRef(data);
+    dataRef.current = data;
+    let scrollToIndex = React.useMemo(()=>{
+        if (!scrollToRow || paginatorRenderer) return;
+        let index = scrollToRow(pageRef.current, dataRef.current);
+        return index < 0 ? void 0 : index;
+    }, [
+        paginatorRenderer,
+        scrollToRow
+    ]);
+    React.useEffect(()=>{
+        if (enableVirtualization || null == scrollToIndex || scrollToIndex < 0) return;
+        rowRefs.current[pageRef.current[scrollToIndex]?.id]?.scrollIntoView();
+    }, [
+        enableVirtualization,
+        scrollToIndex
+    ]);
+    let tableRowRef = React.useCallback((row)=>(element)=>{
+            rowRefs.current[row.id] = element;
+        }, []);
+    return {
+        scrollToIndex,
+        tableRowRef
+    };
+}

package/DEV-esm/core/Table/hooks/useSelectionCell.js

@@ -0,0 +1,11 @@
+import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js';
+export const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default')=>(hooks)=>{
+        if (!isSelectable) return;
+        hooks.allColumns.push((columns)=>'single' === selectionMode || columns.find((c)=>c.id === SELECTION_CELL_ID) ? columns : [
+                SelectionColumn({
+                    isDisabled: isRowDisabled,
+                    density: density
+                }),
+                ...columns
+            ]);
+    };

package/DEV-esm/core/Table/hooks/useStickyColumns.js

@@ -0,0 +1,47 @@
+import { actions } from 'react-table';
+actions.setScrolledLeft = 'setScrolledLeft';
+actions.setScrolledRight = 'setScrolledRight';
+export const useStickyColumns = (hooks)=>{
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
+};
+let reducer = (newState, action)=>{
+    if (action.type === actions.init) return {
+        ...newState,
+        sticky: {}
+    };
+    if (action.type === actions.setScrolledLeft && newState.sticky?.isScrolledToLeft !== action.value) return {
+        ...newState,
+        sticky: {
+            ...newState.sticky,
+            isScrolledToLeft: action.value
+        }
+    };
+    if (action.type === actions.setScrolledRight && newState.sticky?.isScrolledToRight !== action.value) return {
+        ...newState,
+        sticky: {
+            ...newState.sticky,
+            isScrolledToRight: action.value
+        }
+    };
+    return newState;
+};
+let useInstance = (instance)=>{
+    let { flatHeaders } = instance;
+    flatHeaders.forEach((header)=>{
+        if (!header.originalSticky) header.originalSticky = header.sticky ?? 'none';
+        header.sticky = 'none' === header.originalSticky ? void 0 : header.originalSticky;
+    });
+    let hasLeftStickyColumn = false;
+    [
+        ...flatHeaders
+    ].reverse().forEach((header)=>{
+        if ('left' === header.sticky) hasLeftStickyColumn = true;
+        if (hasLeftStickyColumn) header.sticky = 'left';
+    });
+    let hasRightStickyColumn = false;
+    flatHeaders.forEach((header)=>{
+        if ('right' === header.sticky) hasRightStickyColumn = true;
+        if (hasRightStickyColumn) header.sticky = 'right';
+    });
+};

package/DEV-esm/core/Table/hooks/useSubRowFiltering.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js';
+export const useSubRowFiltering = (hasAnySubRows)=>(hooks)=>{
+        hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
+    };
+let useInstance = (hasAnySubRows, instance)=>{
+    let setInitialSubRows = (rows)=>{
+        rows.forEach((row)=>{
+            if (!row.initialSubRows) row.initialSubRows = row.subRows;
+            setInitialSubRows(row.subRows);
+        });
+    };
+    setInitialSubRows(instance.initialRows);
+    let { filteredRows = instance.filteredRows, filteredFlatRows = instance.filteredFlatRows, filteredRowsById = instance.filteredRowsById } = React.useMemo(()=>{
+        if (!hasAnySubRows) return {};
+        let setSubRows = (rows)=>{
+            rows.forEach((row)=>{
+                row.subRows = row.initialSubRows ?? [];
+                setSubRows(row.subRows);
+            });
+        };
+        setSubRows(instance.initialRows);
+        let currentlyFilteredRows = [
+            ...instance.initialRows
+        ];
+        instance.state.filters.forEach(({ id: columnId, value: filterValue })=>{
+            let column = instance.allColumns.find((c)=>c.id === columnId);
+            if (!column) return;
+            let filterTypes = {
+                ...defaultFilterFunctions,
+                ...instance.filterTypes
+            };
+            let filterFn = 'function' == typeof column.filter ? column.filter : filterTypes[column.filter ?? 'text'];
+            currentlyFilteredRows = currentlyFilteredRows.filter((row)=>handleRowFiltering(row, filterFn, columnId, filterValue));
+        });
+        let filteredRows = [];
+        let filteredFlatRows = [];
+        let filteredRowsById = {};
+        let populateRows = (row)=>{
+            if (0 === row.depth) filteredRows.push(row);
+            filteredFlatRows.push(row);
+            filteredRowsById[row.id] = row;
+            if (row.subRows.length) row.subRows.forEach((r)=>populateRows(r));
+        };
+        currentlyFilteredRows.forEach((row)=>populateRows(row));
+        return {
+            filteredRows,
+            filteredFlatRows,
+            filteredRowsById
+        };
+    }, [
+        instance.allColumns,
+        instance.filterTypes,
+        instance.initialRows,
+        instance.state.filters,
+        hasAnySubRows
+    ]);
+    Object.assign(instance, {
+        filteredRows,
+        filteredFlatRows,
+        filteredRowsById,
+        rows: filteredRows,
+        flatRows: filteredFlatRows,
+        rowsById: filteredRowsById
+    });
+};
+let handleRowFiltering = (row, filterFn, columnId, filterValue)=>{
+    let hasFilteredSubRows = false;
+    row.subRows = row.initialSubRows.filter((subRow)=>{
+        let result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
+        if (result) hasFilteredSubRows = true;
+        return result;
+    });
+    if (hasFilteredSubRows) return true;
+    let result = filterFn([
+        row
+    ], [
+        columnId
+    ], filterValue);
+    return !!result.length;
+};

package/DEV-esm/core/Table/hooks/useSubRowSelection.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export const useSubRowSelection = (hooks)=>{
+    hooks.useInstance.push(useInstance);
+};
+let useInstance = (instance)=>{
+    let selectedFlatRows = React.useMemo(()=>{
+        let selectedFlatRows = [];
+        let setSelectionState = (row, selectedRowIds)=>{
+            let isSomeSubRowsSelected = false;
+            row.initialSubRows.forEach((subRow)=>{
+                setSelectionState(subRow, selectedRowIds);
+                if (subRow.isSelected || subRow.isSomeSelected) isSomeSubRowsSelected = true;
+            });
+            if (selectedRowIds[row.id]) {
+                row.isSelected = true;
+                row.isSomeSelected = false;
+                selectedFlatRows.push(row);
+            } else {
+                row.isSelected = false;
+                row.isSomeSelected = isSomeSubRowsSelected;
+            }
+        };
+        instance.rows.forEach((row)=>setSelectionState(row, instance.state.selectedRowIds));
+        return selectedFlatRows;
+    }, [
+        instance.rows,
+        instance.state.selectedRowIds
+    ]);
+    Object.assign(instance, {
+        selectedFlatRows
+    });
+};

package/DEV-esm/core/Table/index.js

@@ -0,0 +1,5 @@
+export { Table } from './Table.js';
+export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
+export { DefaultCell, EditableCell } from './cells/index.js';
+export { TablePaginator } from './TablePaginator.js';
+export { ActionColumn, ExpanderColumn, SelectionColumn } from './columns/index.js';

package/DEV-esm/core/Table/utils.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+export const getCellStyle = (column, isTableResizing)=>{
+    let style = {};
+    style.flex = "1 1 145px";
+    if (column.width) {
+        let width = 'string' == typeof column.width ? column.width : `${column.width}px`;
+        style.width = width;
+        if (isTableResizing && column.canResize) style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
+        else style.flex = `0 0 ${width}`;
+    }
+    if (column.maxWidth) style.maxWidth = `${column.maxWidth}px`;
+    if (column.minWidth) style.minWidth = `${column.minWidth}px`;
+    return style;
+};
+export const getStickyStyle = (column, columnList)=>{
+    if (!column.sticky) return {};
+    let left = 0;
+    for (let col of columnList){
+        if (col.id === column.id) break;
+        left += Number(col.width || col.resizeWidth || 0);
+    }
+    let right = 0;
+    for (let col of [
+        ...columnList
+    ].reverse()){
+        if (col.id === column.id) break;
+        right += Number(col.width || col.resizeWidth || 0);
+    }
+    return {
+        '--iui-table-sticky-left': 'left' === column.sticky ? `${left}px` : void 0,
+        '--iui-table-sticky-right': 'right' === column.sticky ? `${right}px` : void 0
+    };
+};
+export const getSubRowStyle = ({ density = 'default', depth = 1 })=>{
+    let cellPadding = 16;
+    let expanderMargin = 8;
+    if ('condensed' === density) {
+        cellPadding = 12;
+        expanderMargin = 4;
+    } else if ('extra-condensed' === density) {
+        cellPadding = 8;
+        expanderMargin = 4;
+    }
+    let multiplier = 26 + expanderMargin;
+    return {
+        paddingInlineStart: cellPadding + depth * multiplier
+    };
+};
+export const TableColumnsContext = React.createContext([]);