@perses-dev/components 0.55.0-beta.0 → 0.55.0-beta.10

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'
-                        })
-                })
-            })
-        ]
-    });
-}

package/dist/cjs/Table/TableRow.js

@@ -1,37 +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, "TableRow", {
-    enumerable: true,
-    get: function() {
-        return TableRow;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const TableRow = /*#__PURE__*/ (0, _react.forwardRef)(function TableRow(props, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
-        ...props,
-        ref: ref,
-        sx: {
-            backgroundColor: (theme)=>theme.palette.background.default,
-            '&:hover': {
-                backgroundColor: (theme)=>(0, _material.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-            }
-        }
-    });
-});

package/dist/cjs/Table/TableToolbar.js

@@ -1,151 +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, "TableToolbar", {
-    enumerable: true,
-    get: function() {
-        return TableToolbar;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
-const _ViewColumn = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ViewColumn"));
-const _UnfoldMoreHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldMoreHorizontal"));
-const _UnfoldLessHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldLessHorizontal"));
-const _controls = require("../controls");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400, isExpandAllEnabled, isAllExpanded, onExpandAllChange }) {
-    const [colMenuAnchor, setColMenuAnchor] = (0, _react.useState)(null);
-    const colMenuOpen = Boolean(colMenuAnchor);
-    const [searchResetKey, setSearchResetKey] = (0, _react.useState)(0);
-    const handleSearchClear = (0, _react.useCallback)(()=>{
-        onGlobalFilterChange('');
-        setSearchResetKey((prev)=>prev + 1);
-    }, [
-        onGlobalFilterChange
-    ]);
-    if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {
-        return null;
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        direction: "row",
-        gap: 1,
-        alignItems: "center",
-        justifyContent: "flex-end",
-        width: width,
-        padding: "0.5rem",
-        sx: {
-            backgroundColor: (theme)=>theme.palette.background.default
-        },
-        children: [
-            isSearchEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_controls.TextField, {
-                placeholder: "Search...",
-                value: globalFilter,
-                onChange: onGlobalFilterChange,
-                variant: "standard",
-                slotProps: {
-                    htmlInput: {
-                        'aria-label': 'search table'
-                    },
-                    input: {
-                        startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
-                            position: "start",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {
-                                fontSize: "small"
-                            })
-                        }),
-                        endAdornment: globalFilter !== '' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
-                            position: "end",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                onClick: handleSearchClear,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {
-                                    fontSize: "small"
-                                })
-                            })
-                        })
-                    }
-                },
-                sx: {
-                    flexGrow: 1
-                }
-            }, searchResetKey),
-            isExpandAllEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                title: isAllExpanded ? 'Collapse all' : 'Expand all',
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    onClick: onExpandAllChange,
-                    color: "info",
-                    "aria-label": isAllExpanded ? 'collapse all rows' : 'expand all rows',
-                    children: isAllExpanded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldLessHorizontal.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldMoreHorizontal.default, {})
-                })
-            }),
-            isColumnFilterEnabled && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                        onClick: (e)=>setColMenuAnchor(e.currentTarget),
-                        "aria-haspopup": "listbox",
-                        "aria-expanded": colMenuOpen,
-                        color: "info",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewColumn.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
-                        anchorEl: colMenuAnchor,
-                        open: colMenuOpen,
-                        onClose: ()=>setColMenuAnchor(null),
-                        slotProps: {
-                            list: {
-                                dense: true
-                            }
-                        },
-                        sx: {
-                            maxHeight: columnFilterMenuMaxHeight
-                        },
-                        children: columns.map((column)=>{
-                            const header = column.columnDef.header;
-                            const label = typeof header === 'string' ? header : column.id;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                                disabled: !column.getCanHide(),
-                                onClick: column.getCanHide() ? column.getToggleVisibilityHandler() : undefined,
-                                dense: true,
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        checked: column.getIsVisible(),
-                                        disabled: !column.getCanHide(),
-                                        size: "small",
-                                        disableRipple: true,
-                                        sx: {
-                                            p: 0,
-                                            mr: 1
-                                        }
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
-                                        primary: label
-                                    })
-                                ]
-                            }, column.id);
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}