@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { SvgCalendar, isBefore, useId } from '../../../../utils/index.js';
+import { DatePicker } from '../../../DatePicker/DatePicker.js';
+import { InputGrid } from '../../../InputGrid/InputGrid.js';
+import { Label } from '../../../Label/Label.js';
+import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
+import { Popover } from '../../../Popover/Popover.js';
+export const DatePickerInput = React.forwardRef((props, forwardedRef)=>{
+    let uid = useId();
+    let { onChange, date, parseInput, formatDate, label, required, disabled, isFromOrTo, selectedDate, wrapperProps, labelProps, inputWrapperProps, id = uid, localizedNames, showYearSelection, ...rest } = props;
+    let isDateDisabled = (date)=>{
+        if ('to' === isFromOrTo) return isBefore(date, selectedDate);
+        return isBefore(selectedDate, date);
+    };
+    let buttonRef = React.useRef(null);
+    let [inputValue, setInputValue] = React.useState('');
+    React.useEffect(()=>{
+        if (date && !isNaN(date.valueOf())) setInputValue(formatDate(date));
+    }, [
+        date,
+        formatDate
+    ]);
+    let [isVisible, setIsVisible] = React.useState(false);
+    let close = React.useCallback(()=>setIsVisible(false), []);
+    let onDateSelected = React.useCallback((date)=>{
+        onChange(date);
+        close();
+        buttonRef.current?.focus();
+    }, [
+        close,
+        onChange
+    ]);
+    let onInputChange = React.useCallback((event)=>{
+        let value = event.target.value;
+        setInputValue(value);
+        if (!value) onChange(void 0);
+        let parsedDate = parseInput(value);
+        if (parsedDate && !isNaN(parsedDate.valueOf())) onChange(parsedDate);
+    }, [
+        onChange,
+        parseInput
+    ]);
+    return React.createElement(InputGrid, {
+        labelPlacement: "inline",
+        ...wrapperProps
+    }, React.createElement(Label, {
+        as: "label",
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps
+    }, label), React.createElement(InputWithDecorations, inputWrapperProps, React.createElement(InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest
+    }), React.createElement(Popover, {
+        content: React.createElement(DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+            applyBackground: false,
+            showDatesOutsideMonth: false,
+            showYearSelection: showYearSelection
+        }),
+        placement: "bottom-end",
+        visible: isVisible,
+        onVisibleChange: setIsVisible,
+        closeOnOutsideClick: true,
+        applyBackground: true
+    }, React.createElement(InputWithDecorations.Button, {
+        "aria-label": "Date picker",
+        ref: buttonRef
+    }, React.createElement(SvgCalendar, null)))));
+});

package/DEV-esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useGlobals } from '../../../../utils/index.js';
+import { FilterButtonBar } from '../FilterButtonBar.js';
+import { BaseFilter } from '../BaseFilter.js';
+import { DatePickerInput } from './DatePickerInput.js';
+let defaultStrings = {
+    from: 'From',
+    to: 'To'
+};
+let defaultFormatDate = (date)=>{
+    let formatter = new Intl.DateTimeFormat('en-us', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+    });
+    return formatter.format(date);
+};
+let defaultParseInput = (text)=>{
+    if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) return new Date(text);
+    return new Date('');
+};
+export const DateRangeFilter = (props)=>{
+    let { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', showYearSelection } = props;
+    useGlobals();
+    let translatedStrings = {
+        ...defaultStrings,
+        ...translatedLabels
+    };
+    let [from, setFrom] = React.useState(column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : void 0);
+    let inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (inputRef.current) inputRef.current.focus();
+    }, []);
+    let onFromChange = React.useCallback((date)=>{
+        setFrom((prevDate)=>{
+            if (prevDate || !date) return date;
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        });
+    }, []);
+    let [to, setTo] = React.useState(column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : void 0);
+    let onToChange = React.useCallback((date)=>{
+        setTo((prevDate)=>{
+            if (prevDate || !date) return date;
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+        });
+    }, []);
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        if ('Enter' === event.key) setFilter([
+            from,
+            to
+        ]);
+    };
+    return React.createElement(BaseFilter, null, React.createElement(DatePickerInput, {
+        ref: inputRef,
+        label: translatedStrings.from,
+        date: from,
+        onChange: onFromChange,
+        formatDate: formatDate,
+        parseInput: parseInput,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
+        selectedDate: to,
+        isFromOrTo: "from",
+        localizedNames: translatedStrings.datePicker,
+        showYearSelection: showYearSelection
+    }), React.createElement(DatePickerInput, {
+        label: translatedStrings.to,
+        date: to,
+        onChange: onToChange,
+        formatDate: formatDate,
+        parseInput: parseInput,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
+        selectedDate: from,
+        isFromOrTo: "to",
+        localizedNames: translatedStrings.datePicker,
+        showYearSelection: showYearSelection
+    }), React.createElement(FilterButtonBar, {
+        setFilter: ()=>setFilter([
+                from,
+                to
+            ]),
+        clearFilter: clearFilter,
+        translatedLabels: translatedLabels
+    }));
+};

package/DEV-esm/core/Table/filters/FilterButtonBar.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, useGlobals } from '../../../utils/index.js';
+import { Button } from '../../Buttons/Button.js';
+let defaultStrings = {
+    filter: 'Filter',
+    clear: 'Clear'
+};
+export const FilterButtonBar = (props)=>{
+    let { children, setFilter, clearFilter, translatedLabels, className, style, id } = props;
+    let translatedStrings = {
+        ...defaultStrings,
+        ...translatedLabels
+    };
+    useGlobals();
+    return React.createElement(Box, {
+        className: cx('iui-button-bar', className),
+        style: style,
+        id: id
+    }, children, React.createElement(Button, {
+        styleType: "high-visibility",
+        onClick: setFilter
+    }, translatedStrings.filter), React.createElement(Button, {
+        onClick: clearFilter
+    }, translatedStrings.clear));
+};

package/DEV-esm/core/Table/filters/FilterToggle.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useGlobals, SvgFilterHollow, SvgFilter } from '../../../utils/index.js';
+import { IconButton } from '../../Buttons/IconButton.js';
+import { Popover } from '../../Popover/Popover.js';
+export const FilterToggle = (props)=>{
+    let { column, className, ...rest } = props;
+    useGlobals();
+    let [isVisible, setIsVisible] = React.useState(false);
+    let close = React.useCallback(()=>setIsVisible(false), []);
+    let setFilter = React.useCallback((filterValue)=>{
+        column.setFilter(filterValue);
+        close();
+    }, [
+        close,
+        column
+    ]);
+    let clearFilter = React.useCallback(()=>{
+        column.setFilter(void 0);
+        close();
+    }, [
+        close,
+        column
+    ]);
+    let isColumnFiltered = null != column.filterValue && '' !== column.filterValue;
+    return React.createElement(React.Fragment, null, column.canFilter && column.Filter && React.createElement(Popover, {
+        content: column.render('Filter', {
+            close,
+            setFilter,
+            clearFilter
+        }),
+        placement: "bottom-start",
+        visible: isVisible,
+        onVisibleChange: setIsVisible,
+        closeOnOutsideClick: true,
+        applyBackground: true
+    }, React.createElement(IconButton, {
+        styleType: "borderless",
+        isActive: isVisible || isColumnFiltered,
+        className: cx('iui-table-filter-button', className),
+        "aria-label": "Filter",
+        onClick: (e)=>{
+            e.stopPropagation();
+        },
+        "data-iui-shift": "left",
+        ...rest
+    }, isColumnFiltered ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))));
+};

package/DEV-esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useGlobals } from '../../../../utils/index.js';
+import { FilterButtonBar } from '../FilterButtonBar.js';
+import { BaseFilter } from '../BaseFilter.js';
+import { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
+let defaultStrings = {
+    from: 'From',
+    to: 'To'
+};
+export const NumberRangeFilter = (props)=>{
+    let { column, translatedLabels, setFilter, clearFilter } = props;
+    useGlobals();
+    let translatedStrings = {
+        ...defaultStrings,
+        ...translatedLabels
+    };
+    let inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (inputRef.current) inputRef.current.focus();
+    }, []);
+    let [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
+    let [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
+    let parseInputValue = (value)=>!value || isNaN(Number(value)) ? void 0 : Number(value);
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        if ('Enter' === event.key) setFilter([
+            parseInputValue(from),
+            parseInputValue(to)
+        ]);
+    };
+    return React.createElement(BaseFilter, null, React.createElement(LabeledInput, {
+        ref: inputRef,
+        label: translatedStrings.from,
+        value: from,
+        onChange: (e)=>setFrom(e.target.value),
+        onKeyDown: onKeyDown,
+        type: "number",
+        displayStyle: "inline"
+    }), React.createElement(LabeledInput, {
+        label: translatedStrings.to,
+        value: to,
+        onChange: (e)=>setTo(e.target.value),
+        type: "number",
+        displayStyle: "inline",
+        onKeyDown: onKeyDown
+    }), React.createElement(FilterButtonBar, {
+        setFilter: ()=>setFilter([
+                parseInputValue(from),
+                parseInputValue(to)
+            ]),
+        clearFilter: clearFilter,
+        translatedLabels: translatedLabels
+    }));
+};

package/DEV-esm/core/Table/filters/TextFilter/TextFilter.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useGlobals } from '../../../../utils/index.js';
+import { Input } from '../../../Input/Input.js';
+import { FilterButtonBar } from '../FilterButtonBar.js';
+import { BaseFilter } from '../BaseFilter.js';
+export const TextFilter = (props)=>{
+    let { column, translatedLabels, setFilter, clearFilter } = props;
+    useGlobals();
+    let [text, setText] = React.useState(column.filterValue ?? '');
+    let inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (inputRef.current) inputRef.current.focus();
+    }, []);
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        if ('Enter' === event.key) setFilter(text);
+    };
+    return React.createElement(BaseFilter, null, React.createElement(Input, {
+        ref: inputRef,
+        value: text,
+        onChange: (e)=>setText(e.target.value),
+        onKeyDown: onKeyDown
+    }), React.createElement(FilterButtonBar, {
+        setFilter: ()=>setFilter(text),
+        clearFilter: clearFilter,
+        translatedLabels: translatedLabels
+    }));
+};

package/DEV-esm/core/Table/filters/customFilterFunctions.js

@@ -0,0 +1,15 @@
+let isValidDate = (date)=>!!date && !isNaN(date.valueOf());
+let betweenDate = (rows, ids, filterValue)=>{
+    let [min, max] = filterValue || [];
+    let MAX_DATE_VALUE = 8640000000000000;
+    let minValue = isValidDate(min) ? min : new Date(-MAX_DATE_VALUE);
+    let maxValue = isValidDate(max) ? max : new Date(MAX_DATE_VALUE);
+    return rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue.valueOf() >= minValue.valueOf() && rowValue.valueOf() <= maxValue.valueOf();
+        }));
+};
+betweenDate.autoRemove = (val)=>!val || !isValidDate(val[0]) && !isValidDate(val[1]);
+export const customFilterFunctions = {
+    betweenDate
+};

package/DEV-esm/core/Table/filters/defaultFilterFunctions.js

@@ -0,0 +1,73 @@
+let text = (rows, ids, filterValue)=>{
+    rows = rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return String(rowValue).toLowerCase().includes(String(filterValue).toLowerCase());
+        }));
+    return rows;
+};
+text.autoRemove = (val)=>!val;
+let exactText = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return void 0 === rowValue || String(rowValue).toLowerCase() === String(filterValue).toLowerCase();
+        }));
+exactText.autoRemove = (val)=>!val;
+let exactTextCase = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return void 0 === rowValue || String(rowValue) === String(filterValue);
+        }));
+exactTextCase.autoRemove = (val)=>!val;
+let includes = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue.includes(filterValue);
+        }));
+includes.autoRemove = (val)=>!val || !val.length;
+let includesAll = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue && rowValue.length && filterValue.every((val)=>rowValue.includes(val));
+        }));
+includesAll.autoRemove = (val)=>!val || !val.length;
+let includesSome = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue && rowValue.length && filterValue.some((val)=>rowValue.includes(val));
+        }));
+includesSome.autoRemove = (val)=>!val || !val.length;
+let includesValue = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return filterValue.includes(rowValue);
+        }));
+includesValue.autoRemove = (val)=>!val || !val.length;
+let exact = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue === filterValue;
+        }));
+exact.autoRemove = (val)=>void 0 === val;
+let equals = (rows, ids, filterValue)=>rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue == filterValue;
+        }));
+equals.autoRemove = (val)=>null == val;
+let between = (rows, ids, filterValue)=>{
+    let [min, max] = filterValue || [];
+    min = 'number' == typeof min ? min : -1 / 0;
+    max = 'number' == typeof max ? max : 1 / 0;
+    if (min > max) {
+        let temp = min;
+        min = max;
+        max = temp;
+    }
+    return rows.filter((row)=>ids.some((id)=>{
+            let rowValue = row.values[id];
+            return rowValue >= min && rowValue <= max;
+        }));
+};
+between.autoRemove = (val)=>!val || 'number' != typeof val[0] && 'number' != typeof val[1];
+export const defaultFilterFunctions = {
+    text,
+    exactText,
+    exactTextCase,
+    includes,
+    includesAll,
+    includesSome,
+    includesValue,
+    between
+};

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

@@ -0,0 +1,4 @@
+export { BaseFilter } from './BaseFilter.js';
+export { tableFilters } from './tableFilters.js';
+export { FilterButtonBar } from './FilterButtonBar.js';
+export { FilterToggle } from './FilterToggle.js';

package/DEV-esm/core/Table/filters/tableFilters.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DateRangeFilter } from './DateRangeFilter/DateRangeFilter.js';
+import { NumberRangeFilter } from './NumberRangeFilter/NumberRangeFilter.js';
+import { TextFilter } from './TextFilter/TextFilter.js';
+export const tableFilters = {
+    TextFilter: (translatedLabels)=>(props)=>React.createElement(TextFilter, {
+                ...props,
+                translatedLabels: translatedLabels
+            }),
+    DateRangeFilter: (options)=>(props)=>React.createElement(DateRangeFilter, {
+                ...props,
+                ...options
+            }),
+    NumberRangeFilter: (translatedLabels)=>(props)=>React.createElement(NumberRangeFilter, {
+                ...props,
+                translatedLabels: translatedLabels
+            })
+};

package/DEV-esm/core/Table/filters/types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,8 @@
+export { useExpanderCell } from './useExpanderCell.js';
+export { useSelectionCell } from './useSelectionCell.js';
+export { useSubRowFiltering } from './useSubRowFiltering.js';
+export { useSubRowSelection } from './useSubRowSelection.js';
+export { useResizeColumns } from './useResizeColumns.js';
+export { useColumnDragAndDrop } from './useColumnDragAndDrop.js';
+export { useScrollToRow } from './useScrollToRow.js';
+export { useStickyColumns } from './useStickyColumns.js';

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

@@ -0,0 +1,99 @@
+import { actions, makePropGetter, useGetLatest } from 'react-table';
+import { styles } from '../../../styles.js';
+let REORDER_ACTIONS = {
+    columnDragStart: 'columnDragStart',
+    columnDragEnd: 'columnDragEnd'
+};
+export const useColumnDragAndDrop = (isEnabled)=>(hooks)=>{
+        hooks.getDragAndDropProps = [
+            defaultGetDragAndDropProps(isEnabled)
+        ];
+        hooks.stateReducers.push(reducer);
+        hooks.useInstance.push(useInstance);
+    };
+let defaultGetDragAndDropProps = (isEnabled)=>(props, { instance, header })=>{
+        if (!isEnabled || header.disableReordering) return props;
+        let onDragStart = ()=>{
+            instance.dispatch({
+                type: REORDER_ACTIONS.columnDragStart,
+                columnIndex: instance.flatHeaders.indexOf(header)
+            });
+        };
+        let setOnDragColumnStyle = (event, position)=>{
+            let columnElement = event.currentTarget;
+            columnElement.classList.remove(styles['iui-table-reorder-column-right']);
+            columnElement.classList.remove(styles['iui-table-reorder-column-left']);
+            if ('left' === position) columnElement.classList.add(styles['iui-table-reorder-column-left']);
+            else if ('right' === position) columnElement.classList.add(styles['iui-table-reorder-column-right']);
+        };
+        let reorderColumns = (tableColumns, srcIndex, dstIndex)=>{
+            let newTableColumns = [
+                ...tableColumns
+            ];
+            let [removed] = newTableColumns.splice(srcIndex, 1);
+            newTableColumns.splice(dstIndex, 0, removed);
+            return newTableColumns;
+        };
+        let onDragOver = (event)=>{
+            event.preventDefault();
+            let headerIndex = instance.flatHeaders.indexOf(header);
+            if (instance.state.columnReorderStartIndex !== headerIndex) setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex ? 'left' : 'right');
+        };
+        let onDragLeave = (event)=>{
+            setOnDragColumnStyle(event);
+        };
+        let onDrop = (event)=>{
+            event.preventDefault();
+            setOnDragColumnStyle(event);
+            let columnIds = instance.allColumns.map((x)=>x.id);
+            let srcIndex = instance.state.columnReorderStartIndex;
+            let dstIndex = columnIds.findIndex((x)=>x === header.id);
+            if (srcIndex === dstIndex || -1 === srcIndex || -1 === dstIndex) return;
+            instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
+            instance.dispatch({
+                type: REORDER_ACTIONS.columnDragEnd,
+                columnIndex: -1
+            });
+        };
+        return [
+            props,
+            {
+                draggable: true,
+                onDragStart,
+                onDragOver,
+                onDragLeave,
+                onDrop
+            }
+        ];
+    };
+let reducer = (newState, action)=>{
+    switch(action.type){
+        case actions.init:
+            return {
+                ...newState,
+                columnReorderStartIndex: -1
+            };
+        case REORDER_ACTIONS.columnDragStart:
+            return {
+                ...newState,
+                columnReorderStartIndex: action.columnIndex
+            };
+        case REORDER_ACTIONS.columnDragEnd:
+            return {
+                ...newState,
+                columnReorderStartIndex: -1
+            };
+        default:
+            return newState;
+    }
+};
+let useInstance = (instance)=>{
+    let { flatHeaders, getHooks } = instance;
+    let getInstance = useGetLatest(instance);
+    flatHeaders.forEach((header)=>{
+        header.getDragAndDropProps = makePropGetter(getHooks().getDragAndDropProps, {
+            instance: getInstance(),
+            header
+        });
+    });
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js';
+export const useExpanderCell = (subComponent, expanderCell, isRowDisabled)=>(hooks)=>{
+        if (!subComponent) return;
+        hooks.allColumns.push((columns)=>{
+            let hasExpanderColumn = columns.find((c)=>c.id === EXPANDER_CELL_ID);
+            if (hasExpanderColumn) return columns;
+            let expanderColumn = ExpanderColumn({
+                subComponent,
+                isDisabled: isRowDisabled
+            });
+            return [
+                {
+                    ...expanderColumn,
+                    Cell: expanderCell ? (cellProps)=>React.createElement(React.Fragment, null, expanderCell(cellProps)) : expanderColumn.Cell
+                },
+                ...columns
+            ];
+        });
+    };