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

package/dist/cjs/FormEditor/index.js

@@ -1,30 +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("./FormActions"), 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/FormatControls/FormatControls.js

@@ -1,119 +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, "FormatControls", {
-    enumerable: true,
-    get: function() {
-        return FormatControls;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _model = require("../model");
-const _OptionsEditorLayout = require("../OptionsEditorLayout");
-const _SettingsAutocomplete = require("../SettingsAutocomplete");
-const _UnitSelector = require("./UnitSelector");
-const DECIMAL_PLACES_OPTIONS = [
-    {
-        id: 'default',
-        label: 'Default',
-        decimalPlaces: undefined
-    },
-    {
-        id: '0',
-        label: '0',
-        decimalPlaces: 0
-    },
-    {
-        id: '1',
-        label: '1',
-        decimalPlaces: 1
-    },
-    {
-        id: '2',
-        label: '2',
-        decimalPlaces: 2
-    },
-    {
-        id: '3',
-        label: '3',
-        decimalPlaces: 3
-    },
-    {
-        id: '4',
-        label: '4',
-        decimalPlaces: 4
-    }
-];
-function getOptionByDecimalPlaces(decimalPlaces) {
-    return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimalPlaces === decimalPlaces);
-}
-function FormatControls({ value, onChange, disabled = false }) {
-    const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
-    const hasShortValues = (0, _model.isUnitWithShortValues)(value);
-    const handleUnitChange = (newValue)=>{
-        onChange(newValue || {
-            unit: 'decimal'
-        }); // Fallback to 'decimal' if undefined
-    };
-    const handleDecimalPlacesChange = ({ decimalPlaces })=>{
-        if (hasDecimalPlaces) {
-            onChange({
-                ...value,
-                decimalPlaces: decimalPlaces
-            });
-        }
-    };
-    const handleShortValuesChange = (_, checked)=>{
-        if (hasShortValues) {
-            onChange({
-                ...value,
-                shortValues: checked
-            });
-        }
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
-                label: "Short values",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: hasShortValues ? (0, _model.shouldShortenValues)(value.shortValues) : false,
-                    onChange: handleShortValuesChange,
-                    disabled: !hasShortValues
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
-                label: "Unit",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnitSelector.UnitSelector, {
-                    value: value,
-                    onChange: handleUnitChange,
-                    disabled: disabled
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
-                label: "Decimals",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
-                    value: getOptionByDecimalPlaces(value.decimalPlaces),
-                    options: DECIMAL_PLACES_OPTIONS,
-                    getOptionLabel: (o)=>o.label,
-                    onChange: (_, value)=>handleDecimalPlacesChange(value),
-                    disabled: !hasDecimalPlaces,
-                    disableClearable: true
-                })
-            })
-        ]
-    });
-}

package/dist/cjs/FormatControls/UnitSelector.js

@@ -1,55 +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, "UnitSelector", {
-    enumerable: true,
-    get: function() {
-        return UnitSelector;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _model = require("../model");
-const _SettingsAutocomplete = require("../SettingsAutocomplete");
-const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
-    return {
-        ...config,
-        id: id,
-        group: config.group || 'Decimal'
-    };
-}).filter((config)=>!config.disableSelectorOption);
-function UnitSelector({ value, onChange, disabled = false, ...otherProps }) {
-    const unitConfig = _model.UNIT_CONFIG[value?.unit || 'decimal'];
-    const handleChange = (_, newValue)=>{
-        if (newValue === null) {
-            onChange(undefined);
-        } else {
-            onChange({
-                unit: newValue.id
-            });
-        }
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
-        value: value ? {
-            id: value.unit || 'decimal',
-            ...unitConfig
-        } : null,
-        options: KIND_OPTIONS,
-        groupBy: (option)=>option.group ?? 'Decimal',
-        onChange: handleChange,
-        disabled: disabled,
-        ...otherProps
-    });
-}

package/dist/cjs/FormatControls/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("./FormatControls"), exports);
-_export_star(require("./UnitSelector"), 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/InfoTooltip/InfoTooltip.js

@@ -1,86 +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, "InfoTooltip", {
-    enumerable: true,
-    get: function() {
-        return InfoTooltip;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
-    // Wrap children in a span to cover the following use cases:
-    //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
-    //  - Non-element tooltip children (e.g. text). The tooltip needs something that
-    //   can have a ref as a child.
-    // We wrap in a `span` and not a `div` to minimize the impact on page layout
-    // and styles.
-    const wrappedChildren = /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-        children: children
-    });
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
-        arrow: true,
-        id: id,
-        placement: placement ?? 'top',
-        title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
-            title: title,
-            description: description
-        }),
-        enterDelay: enterDelay ?? 500,
-        enterNextDelay: enterNextDelay ?? 500,
-        children: wrappedChildren
-    });
-};
-const TooltipContent = ({ title, description })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                variant: "body2",
-                sx: (theme)=>({
-                        color: theme.palette.text.primary,
-                        fontWeight: theme.typography.fontWeightMedium
-                    }),
-                children: title
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                variant: "caption",
-                sx: (theme)=>({
-                        color: theme.palette.text.primary,
-                        whiteSpace: 'pre-line'
-                    }),
-                children: description
-            })
-        ]
-    });
-};
-const StyledTooltip = (0, _material.styled)(({ className, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-        ...props,
-        classes: {
-            popper: className
-        }
-    }))(({ theme })=>({
-        [`& .${_material.tooltipClasses.tooltip}`]: {
-            backgroundColor: theme.palette.background.tooltip,
-            color: theme.palette.text.primary,
-            maxWidth: '300px',
-            padding: theme.spacing(1),
-            boxShadow: theme.shadows[1]
-        },
-        [`& .${_material.tooltipClasses.arrow}`]: {
-            color: theme.palette.background.tooltip
-        }
-    }));

package/dist/cjs/InfoTooltip/index.js

@@ -1,30 +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("./InfoTooltip"), 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/JSONEditor.js

@@ -1,69 +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, "JSONEditor", {
-    enumerable: true,
-    get: function() {
-        return JSONEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _langjson = require("@codemirror/lang-json");
-const _lint = require("@codemirror/lint");
-const _material = require("@mui/material");
-const _reactcodemirror = /*#__PURE__*/ _interop_require_default(require("@uiw/react-codemirror"));
-const _react = require("react");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function JSONEditor(props) {
-    const theme = (0, _material.useTheme)();
-    const isDarkMode = theme.palette.mode === 'dark';
-    const [value, setValue] = (0, _react.useState)(()=>JSON.stringify(props.value, null, 2));
-    const [lastProcessedValue, setLastProcessedValue] = (0, _react.useState)(value);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
-        ...props,
-        style: {
-            border: `1px solid ${theme.palette.divider}`
-        },
-        theme: isDarkMode ? 'dark' : 'light',
-        extensions: [
-            (0, _langjson.json)(),
-            (0, _lint.linter)((0, _langjson.jsonParseLinter)()),
-            (0, _lint.lintGutter)()
-        ],
-        value: value,
-        onChange: (newValue)=>{
-            setValue(newValue);
-            // Trigger the provided onChange callback in real-time
-            if (props.onChange) {
-                props.onChange(newValue);
-            }
-        },
-        onBlur: ()=>{
-            // Don't trigger the provided onChange if the last processed value is equal to the current value.
-            // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded
-            // find & replace interface to close immediately.
-            if (lastProcessedValue !== value && props.onChange !== undefined) {
-                props.onChange(value);
-                setLastProcessedValue(value);
-            }
-        },
-        placeholder: props.placeholder
-    });
-}

package/dist/cjs/Legend/CompactLegend.js

@@ -1,56 +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, "CompactLegend", {
-    enumerable: true,
-    get: function() {
-        return CompactLegend;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _legendmodel = require("./legend-model");
-const _ListLegendItem = require("./ListLegendItem");
-function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        component: "ul",
-        sx: {
-            width: '100%',
-            height,
-            padding: [
-                0,
-                1,
-                0,
-                0
-            ],
-            overflowY: 'scroll',
-            margin: 0
-        },
-        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ListLegendItem.ListLegendItem, {
-                item: item,
-                index: index,
-                isVisuallySelected: (0, _legendmodel.isLegendItemVisuallySelected)(item, selectedItems),
-                onMouseOver: onItemMouseOver,
-                onMouseOut: onItemMouseOut,
-                onClick: onLegendItemClick,
-                sx: {
-                    width: 'auto',
-                    float: 'left',
-                    paddingRight: 1.5
-                }
-            }, item.id))
-    });
-}

package/dist/cjs/Legend/Legend.js

@@ -1,131 +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, "Legend", {
-    enumerable: true,
-    get: function() {
-        return Legend;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _immer = require("immer");
-const _model = require("../model");
-const _CompactLegend = require("./CompactLegend");
-const _ListLegend = require("./ListLegend");
-const _TableLegend = require("./TableLegend");
-// When the number of items to display is above this number, it is likely to
-// cause performance issues in the browser. The legend will be displayed in a
-// format (list) that allows for virtualization to minimize the performance impact.
-// Set this number based on testing, but it may need to be tuned a bit on the
-// future as people test this out on different machines.
-const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps }) {
-    const onLegendItemClick = (e, seriesId)=>{
-        const isModifiedClick = e.metaKey || e.shiftKey;
-        const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
-            if (draft === 'ALL') {
-                return {
-                    [seriesId]: true
-                };
-            }
-            const isSelected = !!draft[seriesId];
-            // Clicks with modifier key can select multiple items.
-            if (isModifiedClick) {
-                if (isSelected) {
-                    // Modified click on already selected item. Remove that item.
-                    delete draft[seriesId];
-                } else {
-                    // Modified click on not-selected item. Add it.
-                    draft[seriesId] = true;
-                }
-                return draft;
-            }
-            if (isSelected) {
-                // Clicked item was already selected. Unselect it and return to
-                // ALL state.
-                return 'ALL';
-            }
-            // Select clicked item.
-            return {
-                [seriesId]: true
-            };
-        });
-        onSelectedItemsChange(newSelected);
-    };
-    const mode = (0, _model.getLegendMode)(options.mode);
-    // The bottom legend is displayed as a list when the number of items is too
-    // large and requires virtualization. Otherwise, it is rendered more compactly.
-    // We do not need this check for the right-side legend because it is always
-    // a virtualized list.
-    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
-    const commonLegendProps = {
-        height,
-        items: data,
-        selectedItems,
-        onLegendItemClick,
-        onItemMouseOver,
-        onItemMouseOut
-    };
-    let legendContent;
-    if (mode === 'table') {
-        legendContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLegend.TableLegend, {
-            ...commonLegendProps,
-            onSelectedItemsChange: onSelectedItemsChange,
-            width: width,
-            ...tableProps
-        });
-    } else if (options.position === 'right' || needsVirtualization) {
-        legendContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListLegend.ListLegend, {
-            ...commonLegendProps,
-            width: width,
-            onLegendItemClick: onLegendItemClick
-        });
-    } else {
-        legendContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CompactLegend.CompactLegend, {
-            ...commonLegendProps,
-            onLegendItemClick: onLegendItemClick
-        });
-    }
-    if (options.position === 'right') {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            style: {
-                width: width,
-                height: height
-            },
-            sx: {
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                backgroundColor: (theme)=>`${theme.palette.background.default}`
-            },
-            children: legendContent
-        });
-    }
-    // Position bottom
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        style: {
-            width: width,
-            height: height
-        },
-        sx: {
-            position: 'absolute',
-            bottom: 0,
-            backgroundColor: (theme)=>`${theme.palette.background.default}`
-        },
-        children: legendContent
-    });
-}

package/dist/cjs/Legend/LegendColorBadge.js

@@ -1,39 +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, "LegendColorBadge", {
-    enumerable: true,
-    get: function() {
-        return LegendColorBadge;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _utils = require("../utils");
-const LegendColorBadge = /*#__PURE__*/ (0, _react.memo)(function LegendColorBadge({ color, sx, ...others }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        ...others,
-        sx: (0, _utils.combineSx)({
-            height: 4,
-            width: 16,
-            margin: (theme)=>theme.spacing(0.5)
-        }, sx),
-        style: {
-            backgroundColor: color
-        }
-    });
-});