@perses-dev/components 0.55.0-beta.2 → 0.55.0-beta.6

package/dist/cjs/Table/hooks/useFuzzySearch.js

@@ -1,67 +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, "useFuzzySearch", {
-    enumerable: true,
-    get: function() {
-        return useFuzzySearch;
-    }
-});
-const _reacttable = require("@tanstack/react-table");
-const _matchsorterutils = require("@tanstack/match-sorter-utils");
-const _react = require("react");
-const getFuzzyFilterFunction = (threshold)=>(row, columnId, value, addMeta)=>{
-        const itemRank = (0, _matchsorterutils.rankItem)(row.getValue(columnId), value, {
-            threshold: _matchsorterutils.rankings[threshold]
-        });
-        addMeta({
-            itemRank
-        });
-        return itemRank.passed;
-    };
-function useFuzzySearch(isSearchEnabled, threshold, expanded, setExpanded) {
-    const [globalFilter, setGlobalFilter] = (0, _react.useState)('');
-    const [prevExpandedState, setPrevExpandedState] = (0, _react.useState)(expanded);
-    // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared
-    const handleGlobalFilterChange = (0, _react.useCallback)((value)=>{
-        setGlobalFilter((prev)=>{
-            if (!prev) {
-                setPrevExpandedState(expanded);
-                setExpanded(true);
-            } else if (prev && !value) {
-                setExpanded(prevExpandedState);
-            }
-            return value;
-        });
-    }, [
-        expanded,
-        prevExpandedState,
-        setExpanded
-    ]);
-    return {
-        globalFilter,
-        setGlobalFilter: handleGlobalFilterChange,
-        fuzzySearchOptions: {
-            filterFns: {
-                fuzzy: getFuzzyFilterFunction(threshold)
-            },
-            globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,
-            getFilteredRowModel: isSearchEnabled ? (0, _reacttable.getFilteredRowModel)() : undefined,
-            filterFromLeafRows: isSearchEnabled,
-            onGlobalFilterChange: handleGlobalFilterChange
-        }
-    };
-}

package/dist/cjs/Table/hooks/useTableKeyboardNav.js

@@ -1,108 +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, "useTableKeyboardNav", {
-    enumerable: true,
-    get: function() {
-        return useTableKeyboardNav;
-    }
-});
-const _react = require("react");
-const DEFAULT_ACTIVE_CELL = {
-    row: 0,
-    column: 0
-};
-const ARROW_KEYS = [
-    'ArrowRight',
-    'ArrowLeft',
-    'ArrowUp',
-    'ArrowDown'
-];
-function isArrowKey(key) {
-    return ARROW_KEYS.includes(key);
-}
-function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
-    const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
-    const [isActive, setIsActive] = (0, _react.useState)(false);
-    const handleCellFocus = (cellPosition)=>{
-        if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
-            return;
-        }
-        setIsActive(true);
-        setActiveCell(cellPosition);
-    };
-    const handleKeyDown = (0, _react.useCallback)((e)=>{
-        // Including some of the basic a11y keyboard interaction patterns from:
-        // https://www.w3.org/WAI/ARIA/apg/patterns/grid/
-        // TODO: add other keyboard combos.
-        const key = e.key;
-        if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {
-            setActiveCell((curActiveCell)=>{
-                let nextRow = curActiveCell.row;
-                let nextColumn = curActiveCell.column;
-                if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {
-                    e.preventDefault();
-                    nextColumn += 1;
-                } else if (key === 'ArrowLeft' && nextColumn > 0) {
-                    e.preventDefault();
-                    nextColumn -= 1;
-                } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {
-                    e.preventDefault();
-                    nextRow += 1;
-                } else if (key === 'ArrowUp' && nextRow > 0) {
-                    e.preventDefault();
-                    nextRow -= 1;
-                } else if (key === 'Home') {
-                    e.preventDefault();
-                    nextRow = 0;
-                    nextColumn = 0;
-                } else if (key === 'End') {
-                    e.preventDefault();
-                    nextRow = maxRows - 1;
-                    nextColumn = maxColumns - 1;
-                }
-                const defaultNewPosition = {
-                    column: nextColumn,
-                    row: nextRow
-                };
-                const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
-                if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
-                    // Return original to avoid creating a new object if nothing
-                    // changed.
-                    return curActiveCell;
-                }
-                return newPosition;
-            });
-        }
-    }, [
-        maxColumns,
-        maxRows,
-        onActiveCellChange
-    ]);
-    const handleTableBlur = (0, _react.useCallback)((e)=>{
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            setIsActive(false);
-            setActiveCell(DEFAULT_ACTIVE_CELL);
-        }
-    }, []);
-    return {
-        activeCell,
-        isActive,
-        onTableKeyDown: handleKeyDown,
-        onCellFocus: handleCellFocus,
-        onTableBlur: handleTableBlur
-    };
-}

package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -1,89 +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, "useVirtualizedTableKeyboardNav", {
-    enumerable: true,
-    get: function() {
-        return useVirtualizedTableKeyboardNav;
-    }
-});
-const _useTableKeyboardNav = require("./useTableKeyboardNav");
-function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns }) {
-    const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
-        maxRows,
-        maxColumns,
-        onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
-            const key = e.key;
-            const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
-            const nextRow = defaultNewPosition?.row ?? currentPosition.row;
-            if (key === 'ArrowDown' && defaultValueChanged) {
-                // Use default cell position. Shift the virtual table scroll position
-                // when needed to make the active cell visible.
-                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
-                    virtualTable.current?.scrollToIndex({
-                        index: nextRow - 1,
-                        align: 'end'
-                    });
-                }
-            } else if (key === 'ArrowUp' && defaultValueChanged) {
-                // Use default cell position. Shift the virtual table scroll position
-                // when needed to make the active cell visible.
-                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
-                    virtualTable.current?.scrollToIndex({
-                        index: nextRow - 1,
-                        align: 'start'
-                    });
-                }
-            } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
-                // Use default cell position. Shift the virtual table scroll position
-                // when needed to make the active cell visible.
-                virtualTable.current?.scrollToIndex({
-                    index: Math.max(nextRow - 1, 0),
-                    align: 'start'
-                });
-            } else if (key === 'PageDown') {
-                // Full handling of logic for `PageDown` because there is no default.
-                e.preventDefault();
-                let nextRow = currentPosition.row;
-                // Add 1 to account for header
-                nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
-                virtualTable.current?.scrollToIndex({
-                    index: nextRow - 1,
-                    align: 'start'
-                });
-                return {
-                    row: nextRow,
-                    column: currentPosition.column
-                };
-            } else if (key === 'PageUp') {
-                // Full handling of logic for `PageUp` because there is no default.
-                let nextRow = currentPosition.row;
-                // Minus 1 to account for header
-                nextRow = Math.max(0, visibleRange.current.startIndex - 1);
-                virtualTable.current?.scrollToIndex({
-                    index: nextRow - 1,
-                    align: 'end'
-                });
-                return {
-                    row: nextRow,
-                    column: currentPosition.column
-                };
-            }
-            return defaultNewPosition;
-        }
-    });
-    return baseKeyboard;
-}

package/dist/cjs/Table/index.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
-});
-_export_star(require("./Table"), exports);
-_export_star(require("./model/table-model"), exports);
-function _export_star(from, to) {
-    Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
-            Object.defineProperty(to, k, {
-                enumerable: true,
-                get: function() {
-                    return from[k];
-                }
-            });
-        }
-    });
-    return from;
-}

package/dist/cjs/Table/model/table-model.js

@@ -1,138 +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
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get DEFAULT_COLUMN_HEIGHT () {
-        return DEFAULT_COLUMN_HEIGHT;
-    },
-    get DEFAULT_COLUMN_MAX_WIDTH () {
-        return DEFAULT_COLUMN_MAX_WIDTH;
-    },
-    get DEFAULT_COLUMN_MIN_WIDTH () {
-        return DEFAULT_COLUMN_MIN_WIDTH;
-    },
-    get DEFAULT_COLUMN_WIDTH () {
-        return DEFAULT_COLUMN_WIDTH;
-    },
-    get getTableCellLayout () {
-        return getTableCellLayout;
-    },
-    get persesColumnsToTanstackColumns () {
-        return persesColumnsToTanstackColumns;
-    }
-});
-const DEFAULT_COLUMN_WIDTH = 150;
-const DEFAULT_COLUMN_MIN_WIDTH = 60;
-const DEFAULT_COLUMN_MAX_WIDTH = 1000;
-const DEFAULT_COLUMN_HEIGHT = 40;
-function calculateTableCellHeight(lineHeight, paddingY) {
-    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
-    // heights based on customization of cell contents.
-    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;
-    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
-    return lineHeightNum + verticalPaddingNum * 2;
-}
-function getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight } = {}) {
-    // Density Standard
-    let paddingY = theme.spacing(1);
-    let basePaddingX = theme.spacing(1.25);
-    let edgePaddingX = theme.spacing(2);
-    let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-    let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-    let lineHeight = theme.typography.body1.lineHeight;
-    let fontSize = theme.typography.body1.fontSize;
-    if (density === 'compact') {
-        paddingY = theme.spacing(0.5);
-        basePaddingX = theme.spacing(0.5);
-        edgePaddingX = theme.spacing(1);
-        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        lineHeight = theme.typography.body2.lineHeight;
-        fontSize = theme.typography.body2.fontSize;
-    }
-    if (density === 'comfortable') {
-        paddingY = theme.spacing(2);
-        basePaddingX = theme.spacing(1.5);
-        edgePaddingX = theme.spacing(2);
-        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        lineHeight = theme.typography.body1.lineHeight;
-        fontSize = theme.typography.body1.fontSize;
-    }
-    const height = isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto' ? calculateTableCellHeight(lineHeight, paddingY) : defaultColumnHeight;
-    return {
-        padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
-        height: height,
-        fontSize: fontSize,
-        lineHeight: lineHeight
-    };
-}
-function persesColumnsToTanstackColumns(columns, defaultColumnConfig) {
-    return columns.map(({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps })=>{
-        const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;
-        const sizeProps = width === 'auto' || width === undefined ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth) : getUserProvidedSizeProps(isResizingEnabled, width, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth);
-        return {
-            ...otherProps,
-            ...sizeProps,
-            // Default sorting to false, so it is very explicitly set per column.
-            enableSorting: !!enableSorting,
-            enableResizing: isResizingEnabled,
-            // Open-ended store for extra metadata in TanStack Table, so you can bake
-            // in your own features.
-            meta: {
-                align,
-                headerDescription,
-                cellDescription,
-                dataLink
-            }
-        };
-    });
-}
-function getUserProvidedSizeProps(isResizingEnabled, width, minWidth, maxWidth) {
-    // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.
-    return isResizingEnabled ? {
-        size: width,
-        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
-        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH
-    } : {
-        size: width
-    };
-}
-function getDefaultSizeProps(isResizingEnabled, minWidth, maxWidth) {
-    return isResizingEnabled ? {
-        // When resizing is enabled, we need to set a default size for the column
-        // so that relative value can be calculated when resizing and column is visible.
-        size: DEFAULT_COLUMN_WIDTH,
-        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
-        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH
-    } : // the space in a table. We translate our custom "auto" setting to 0 size
-    // for these columns, so it is easy to fall back to auto when rendering.
-    // Taking from a recommendation in this github discussion:
-    // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
-    {
-        // All zero values are used as shorthand for "auto" when rendering
-        // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
-        size: 0,
-        minSize: 0,
-        maxSize: 0
-    };
-}

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -1,80 +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, "ThresholdInput", {
-    enumerable: true,
-    get: function() {
-        return ThresholdInput;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
-    const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        flex: 1,
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
-                label: label,
-                color: color,
-                onColorChange: onColorChange
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormLabel, {
-                htmlFor: label,
-                children: label
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                id: label,
-                inputRef: inputRef,
-                type: "number",
-                value: value === 0 ? '' : value,
-                placeholder: "0",
-                onChange: onChange,
-                onBlur: onBlur,
-                onKeyDown: (e)=>{
-                    if (e.key === 'Enter') {
-                        onBlur();
-                        setKey(key + 1);
-                    }
-                },
-                InputProps: {
-                    endAdornment: mode === 'percent' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        paddingX: 1,
-                        children: "%"
-                    }) : undefined
-                }
-            }, key),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                "aria-label": `delete threshold ${label}`,
-                size: "small",
-                onClick: onDelete,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
-            })
-        ]
-    });
-}