@perses-dev/components 0.55.0-beta.3 → 0.55.0-beta.7

package/dist/cjs/Table/InnerTable.js

@@ -1,47 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "InnerTable", {
-    enumerable: true,
-    get: function() {
-        return InnerTable;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme })=>({
-        // This value is needed to have a consistent table layout when scrolling.
-        tableLayout: 'fixed',
-        borderCollapse: 'separate',
-        backgroundColor: theme.palette.background.default
-    }));
-const TABLE_DENSITY_CONFIG = {
-    compact: 'small',
-    standard: 'medium',
-    comfortable: 'medium'
-};
-const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density, ...otherProps }, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTable, {
-        ...otherProps,
-        tabIndex: -1,
-        size: TABLE_DENSITY_CONFIG[density],
-        ref: ref,
-        sx: {
-            width: '100%'
-        }
-    });
-});

package/dist/cjs/Table/Table.js

@@ -1,222 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Table", {
-    enumerable: true,
-    get: function() {
-        return Table;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _reacttable = require("@tanstack/react-table");
-const _react = require("react");
-const _useFuzzySearch = require("./hooks/useFuzzySearch");
-const _tablemodel = require("./model/table-model");
-const _TableCheckbox = require("./TableCheckbox");
-const _VirtualizedTable = require("./VirtualizedTable");
-const DEFAULT_GET_ROW_ID = (data, index)=>{
-    return `${index}`;
-};
-// Setting these defaults one enables them to be consistent across renders instead
-// of being recreated every time, which can be important for perf because react
-// does not do deep equality checking for objects and arrays.
-const DEFAULT_ROW_SELECTION = {};
-const DEFAULT_SORTING = [];
-function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', getSubRows, hiddenColumns, tableToolbarConfig, columnResizeMode = 'onChange', defaultColumnConfig, ...otherProps }) {
-    const theme = (0, _material.useTheme)();
-    const hasSubRows = !!getSubRows;
-    const [expanded, setExpanded] = (0, _react.useState)({});
-    const { globalFilter, setGlobalFilter, fuzzySearchOptions } = (0, _useFuzzySearch.useFuzzySearch)(tableToolbarConfig?.isSearchEnabled, tableToolbarConfig?.fuzzyMatchThreshold ?? 'CONTAINS', expanded, setExpanded);
-    const [columnVisibility, setColumnVisibility] = (0, _react.useState)(hiddenColumns?.reduce((acc, columnId)=>({
-            ...acc,
-            [columnId]: false
-        }), {}) ?? {});
-    const handleRowSelectionChange = (rowSelectionUpdater)=>{
-        const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
-        onRowSelectionChange?.(newRowSelection);
-    };
-    const handleRowSelectionEvent = (0, _react.useCallback)((table, row, isModified)=>{
-        if (rowSelectionVariant === 'standard' || isModified) {
-            row.toggleSelected();
-        } else {
-            // Legend variant (when action not modified with shift/meta key).
-            // Note that this behavior needs to be kept in sync with behavior in
-            // the Legend component for list-based legends.
-            if (row.getIsSelected() && !table.getIsAllRowsSelected()) {
-                // Row was already selected. Revert to select all.
-                table.toggleAllRowsSelected();
-            } else {
-                // Focus the selected row.
-                onRowSelectionChange?.({
-                    [row.id]: true
-                });
-            }
-        }
-    }, [
-        onRowSelectionChange,
-        rowSelectionVariant
-    ]);
-    const handleCheckboxChange = (0, _react.useCallback)((e, table, row)=>{
-        const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
-        const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;
-        handleRowSelectionEvent(table, row, isModifed);
-    }, [
-        handleRowSelectionEvent
-    ]);
-    const handleSortingChange = (sortingUpdater)=>{
-        const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
-        onSortingChange?.(newSorting);
-    };
-    const actionsColumn = (0, _react.useMemo)(()=>{
-        return {
-            id: 'itemActions',
-            header: 'Actions',
-            cell: ({ row })=>{
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                    direction: "row",
-                    alignItems: "center",
-                    children: getItemActions?.({
-                        id: row.id,
-                        data: row.original
-                    })
-                });
-            },
-            enableSorting: false,
-            enableResizing: false
-        };
-    }, [
-        getItemActions
-    ]);
-    const checkboxColumn = (0, _react.useMemo)(()=>{
-        return {
-            id: 'checkboxRowSelect',
-            size: 28,
-            header: ({ table })=>{
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
-                    checked: table.getIsAllRowsSelected(),
-                    indeterminate: table.getIsSomeRowsSelected(),
-                    onChange: table.getToggleAllRowsSelectedHandler(),
-                    color: theme.palette.text.primary,
-                    density: density
-                });
-            },
-            cell: ({ row, table })=>{
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
-                    checked: row.getIsSelected(),
-                    indeterminate: row.getIsSomeSelected(),
-                    onChange: (e)=>{
-                        handleCheckboxChange(e, table, row);
-                    },
-                    color: getCheckboxColor?.(row.original),
-                    density: density
-                });
-            },
-            enableSorting: false,
-            enableResizing: false
-        };
-    }, [
-        theme.palette.text.primary,
-        density,
-        getCheckboxColor,
-        handleCheckboxChange
-    ]);
-    const tableColumns = (0, _react.useMemo)(()=>{
-        const initTableColumns = (0, _tablemodel.persesColumnsToTanstackColumns)(columns, defaultColumnConfig);
-        if (hasItemActions) {
-            initTableColumns.unshift(actionsColumn);
-        }
-        if (checkboxSelection) {
-            initTableColumns.unshift(checkboxColumn);
-        }
-        return initTableColumns;
-    }, [
-        columns,
-        defaultColumnConfig,
-        hasItemActions,
-        checkboxSelection,
-        actionsColumn,
-        checkboxColumn
-    ]);
-    const table = (0, _reacttable.useReactTable)({
-        data,
-        columns: tableColumns,
-        getRowId: getRowId,
-        getCoreRowModel: (0, _reacttable.getCoreRowModel)(),
-        getSortedRowModel: (0, _reacttable.getSortedRowModel)(),
-        getPaginationRowModel: pagination ? (0, _reacttable.getPaginationRowModel)() : undefined,
-        // without this setting, the getPaginationRowModel setting persists and it is not possible to switch from paginated to unpaginated
-        // can be removed once https://github.com/TanStack/table/pull/5974 is merged
-        manualPagination: !pagination,
-        enableRowSelection: !!checkboxSelection,
-        onRowSelectionChange: handleRowSelectionChange,
-        onSortingChange: handleSortingChange,
-        onColumnVisibilityChange: setColumnVisibility,
-        getSubRows: getSubRows,
-        getExpandedRowModel: hasSubRows ? (0, _reacttable.getExpandedRowModel)() : undefined,
-        ...fuzzySearchOptions,
-        // For now, defaulting to sort by descending first. We can expose the ability
-        // to customize it if/when we have use cases for it.
-        sortDescFirst: true,
-        columnResizeMode,
-        onExpandedChange: setExpanded,
-        state: {
-            rowSelection,
-            sorting,
-            globalFilter: tableToolbarConfig?.isSearchEnabled ? globalFilter : undefined,
-            columnVisibility,
-            ...pagination ? {
-                pagination
-            } : {},
-            expanded
-        }
-    });
-    const handleRowClick = (0, _react.useCallback)((e, rowId)=>{
-        const row = table.getRow(rowId);
-        const isModifiedClick = e.metaKey || e.shiftKey;
-        handleRowSelectionEvent(table, row, isModifiedClick);
-    }, [
-        handleRowSelectionEvent,
-        table
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VirtualizedTable.VirtualizedTable, {
-        ...otherProps,
-        density: density,
-        defaultColumnWidth: defaultColumnWidth,
-        defaultColumnHeight: defaultColumnHeight,
-        onRowClick: handleRowClick,
-        rows: table.getRowModel().rows,
-        columns: table.getVisibleFlatColumns(),
-        columnSizing: table.getState().columnSizing,
-        columnSizingInfo: table.getState().columnSizingInfo,
-        headers: table.getHeaderGroups(),
-        cellConfigs: cellConfigs,
-        pagination: pagination,
-        onPaginationChange: onPaginationChange,
-        rowCount: table.getRowCount(),
-        toolbarConfig: {
-            isSearchEnabled: tableToolbarConfig?.isSearchEnabled,
-            globalFilter,
-            onGlobalFilterChange: setGlobalFilter,
-            isColumnFilterEnabled: tableToolbarConfig?.isColumnFilterEnabled,
-            columns: table.getAllColumns(),
-            columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight,
-            isExpandAllEnabled: hasSubRows,
-            isAllExpanded: table.getIsAllRowsExpanded(),
-            onExpandAllChange: table.getToggleAllRowsExpandedHandler()
-        }
-    });
-}

package/dist/cjs/Table/TableBody.js

@@ -1,31 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableBody", {
-    enumerable: true,
-    get: function() {
-        return TableBody;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const TableBody = /*#__PURE__*/ (0, _react.forwardRef)(function TableBody(props, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-        ...props,
-        ref: ref
-    });
-});

package/dist/cjs/Table/TableCell.js

@@ -1,153 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableCell", {
-    enumerable: true,
-    get: function() {
-        return TableCell;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _datafieldinterpolation = require("../utils/data-field-interpolation");
-const _tablemodel = require("./model/table-model");
-const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
-        padding: 0,
-        backgroundColor: 'inherit',
-        '&.MuiTableCell-head': {
-            // Important to avoid scrolling behind the header showing through.
-            backgroundColor: theme.palette.background.default
-        },
-        '&:focus-visible': {
-            outline: `solid 1px ${theme.palette.primary.main}`,
-            // Move inward a little to avoid getting cut off when focusing on items
-            // at the edge of the table.
-            outlineOffset: '-1px',
-            borderRadius: 0
-        }
-    }));
-function TableCell({ children, density, variant, width, defaultColumnHeight, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, dataLink, adjacentCellsValuesMap, ...otherProps }) {
-    const theme = (0, _material.useTheme)();
-    const elRef = (0, _react.useRef)();
-    const isHeader = variant === 'head';
-    (0, _react.useEffect)(()=>{
-        if (focusState === 'trigger-focus' && elRef.current) {
-            elRef.current.focus();
-        }
-    }, [
-        focusState
-    ]);
-    const handleFocus = (e)=>{
-        // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = e.currentTarget?.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
-        if (nestedFocusTarget) {
-            // If the cell has a focusable child, focus it instead. Mostly used for
-            // checkbox cells, but could have other uses.
-            nestedFocusTarget.focus();
-        }
-    };
-    const handleInteractionFocusTrigger = (e)=>{
-        // We use `onClick` and `onKeyUp` events instead of `onFocus` because of
-        // some ordering issues with when the browser calls events and how this
-        // plays with the triggering of focus with keyboard interactions.
-        // These report that a focus event happened, so we can adjust the current
-        // tabindex and focuses to the right cell.
-        onFocusTrigger?.(e);
-    };
-    const modifiedDataLink = (0, _react.useMemo)(()=>{
-        if (!dataLink) return undefined;
-        if (adjacentCellsValuesMap && (0, _datafieldinterpolation.hasDataFieldPatterns)(dataLink.url)) {
-            const { text } = (0, _datafieldinterpolation.replaceDataFields)(dataLink.url, adjacentCellsValuesMap, {
-                urlEncode: true
-            });
-            return {
-                ...dataLink,
-                url: text
-            };
-        }
-        return dataLink;
-    }, [
-        dataLink,
-        adjacentCellsValuesMap
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTableCell, {
-        ...otherProps,
-        // Modify the tab index based on the currently focused cell. It's important
-        // to avoid having tabindex 0 on everything because it essentially traps
-        // a keyboard user in the table until they hit "tab" for every single
-        // cell.
-        tabIndex: focusState !== 'none' ? 0 : -1,
-        onFocus: handleFocus,
-        onClick: handleInteractionFocusTrigger,
-        onKeyUp: handleInteractionFocusTrigger,
-        style: {
-            width: width
-        },
-        sx: {
-            position: 'relative',
-            borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,
-            '&:hover #original-cell': {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                zIndex: 10,
-                width: 'fit-content',
-                minWidth: '100%',
-                whiteSpace: 'nowrap',
-                overflow: 'visible',
-                backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,
-                outline: `solid 1px ${theme.palette.info.main}`,
-                outlineOffset: '-1px'
-            }
-        },
-        ref: elRef,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            id: "original-cell",
-            sx: {
-                ...(0, _tablemodel.getTableCellLayout)(theme, density, {
-                    isHeader,
-                    isLastColumn,
-                    isFirstColumn,
-                    defaultColumnHeight
-                }),
-                position: 'relative',
-                // Text truncation. Currently enforced on all cells. We may control
-                // this with a prop on column config in the future.
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                // Need to inherit from the MUI cell because this manages some ordering
-                // that the `TableSortLabel` uses to determine the location of the icon
-                // in headers.
-                flexDirection: 'inherit'
-            },
-            style: {
-                backgroundColor: backgroundColor ?? 'inherit',
-                color: color ?? 'inherit'
-            },
-            title: description,
-            "aria-label": description,
-            textAlign: align,
-            children: modifiedDataLink ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
-                href: modifiedDataLink.url,
-                target: modifiedDataLink.targetBlank ? '_blank' : '_self',
-                rel: modifiedDataLink.targetBlank ? 'noopener noreferrer' : undefined,
-                children: children
-            }) : children
-        })
-    });
-}

package/dist/cjs/Table/TableCheckbox.js

@@ -1,57 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableCheckbox", {
-    enumerable: true,
-    get: function() {
-        return TableCheckbox;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-function TableCheckbox({ color, density, ...otherProps }) {
-    const isCompact = density === 'compact';
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-        size: isCompact ? 'small' : 'medium',
-        ...otherProps,
-        // Disable ripple and set background color below because of some issues
-        // with re-rendering with the keyboard interactions that causes the ripple
-        // animation to stutter.
-        focusRipple: false,
-        // Tab index is handled by the overall keyboard interactions for the table
-        // to avoid trapping a keyboard user in a table by requiring them to tab
-        // through every single checkbox.
-        tabIndex: -1,
-        sx: {
-            color: color,
-            padding: (theme)=>theme.spacing(isCompact ? 0.25 : 0.5),
-            // Centering.
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            '&.Mui-checked': {
-                color: color
-            },
-            '&.Mui-focusVisible': {
-                background: color ? (0, _material.alpha)(color, 0.5) : undefined
-            },
-            '& .MuiSvgIcon-root': {
-                fontSize: isCompact ? 16 : 18
-            }
-        }
-    });
-}

package/dist/cjs/Table/TableFoot.js

@@ -1,31 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableFoot", {
-    enumerable: true,
-    get: function() {
-        return TableFoot;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const TableFoot = /*#__PURE__*/ (0, _react.forwardRef)(function TableFoot(props, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableFooter, {
-        ...props,
-        ref: ref
-    });
-});

package/dist/cjs/Table/TableHead.js

@@ -1,31 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableHead", {
-    enumerable: true,
-    get: function() {
-        return TableHead;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const TableHead = /*#__PURE__*/ (0, _react.forwardRef)(function TableHead(props, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
-        ...props,
-        ref: ref
-    });
-});

package/dist/cjs/Table/TableHeaderCell.js

@@ -1,93 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableHeaderCell", {
-    enumerable: true,
-    get: function() {
-        return TableHeaderCell;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _TableCell = require("./TableCell");
-function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, resizeConfig, ...cellProps }) {
-    const showSortLabel = !!onSort;
-    const headerText = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-        noWrap: true,
-        variant: "inherit",
-        component: "div",
-        color: "inherit",
-        children: children
-    });
-    const isActive = !!sortDirection;
-    const direction = isActive ? sortDirection : nextSortDirection;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_TableCell.TableCell, {
-        ...cellProps,
-        children: [
-            showSortLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
-                onClick: onSort,
-                direction: direction,
-                active: isActive,
-                sx: {
-                    // Overrides a default vertical alignment in the CSS that changes
-                    // the header vertical rhythm in a way that's inconsistent with
-                    // non-sorting headers.
-                    verticalAlign: 'unset',
-                    // Makes it possible to ellipsize the text if it's too long.
-                    maxWidth: '100%',
-                    // Make the arrow visible when focused using the keyboard to assist
-                    // with a11y.
-                    '&:focus-visible': {
-                        [`& .${_material.tableSortLabelClasses.icon}`]: {
-                            opacity: isActive ? 1 : 0.5
-                        }
-                    }
-                },
-                children: headerText
-            }) : headerText,
-            resizeConfig && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                onMouseDown: (e)=>{
-                    if (e.detail === 2) {
-                        resizeConfig.resetSizeHandler();
-                        return;
-                    }
-                    resizeConfig.resizeHandler(e);
-                },
-                onTouchStart: resizeConfig.resizeHandler,
-                sx: {
-                    position: 'absolute',
-                    height: '100%',
-                    top: 0,
-                    right: '4px',
-                    cursor: 'col-resize'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                    flexItem: true,
-                    orientation: "vertical",
-                    sx: (theme)=>({
-                            backgroundColor: resizeConfig.isResizing ? theme.palette.action.active : theme.palette.divider,
-                            borderRadius: '2px',
-                            borderWidth: '2px',
-                            height: '100%',
-                            touchAction: 'none',
-                            transform: 'translateX(4px)',
-                            userSelect: 'none'
-                        })
-                })
-            })
-        ]
-    });
-}