@perses-dev/dashboards 0.52.0 → 0.53.0-beta.1

package/dist/components/Variables/ListVariableListBox.js

@@ -0,0 +1,141 @@
+// Copyright 2025 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useContext, useMemo } from 'react';
+import { Checkbox, Divider } from '@mui/material';
+import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
+const ListVariableListBoxContext = /*#__PURE__*/ React.createContext(undefined);
+export function useListVariableListBoxContext() {
+    const ctx = useContext(ListVariableListBoxContext);
+    if (!ctx) throw new Error('ListVariableListBoxContext not found');
+    return ctx;
+}
+/*
+ * Handles the logic for toggling the global select checkbox in the ListBox header.
+ *
+ * If all options are selected, it will deselect all options.
+ * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.
+ *
+ * If some options are selected, it will select all filtered options.
+ *
+ * If no options are selected, it will select all filtered options.
+ * Should be not possible since a ListVariable has always at least one value.
+ *
+ * If allowAllValue is true, it will handle the special "All" option logic.
+ * Main difference is if some options are selected and there is no filter, it will select the "All" option
+ */ function handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange) {
+    if (isAllSelected) {
+        if (filteredOptions.length !== options.length) {
+            onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+        } else {
+            onChange([]);
+        }
+        return;
+    }
+    if (isIndeterminate) {
+        if (allowAllValue) {
+            if (filteredOptions.length === options.length) {
+                if (selectedOptions[0]?.value === DEFAULT_ALL_VALUE) {
+                    onChange(options.filter((o)=>o.value !== DEFAULT_ALL_VALUE));
+                } else {
+                    onChange([
+                        {
+                            label: DEFAULT_ALL_VALUE,
+                            value: DEFAULT_ALL_VALUE
+                        }
+                    ]);
+                }
+            } else {
+                if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
+                    onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+                } else {
+                    onChange([
+                        ...selectedOptions,
+                        ...filteredOptions.filter((o)=>o.value !== DEFAULT_ALL_VALUE)
+                    ]);
+                }
+            }
+        } else {
+            if (filteredOptions.length === options.length) {
+                onChange(options);
+            } else {
+                if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
+                    onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+                } else {
+                    onChange([
+                        ...selectedOptions,
+                        ...filteredOptions
+                    ]);
+                }
+            }
+        }
+        return;
+    }
+    // Nothing selected, so select filtered options
+    onChange(filteredOptions);
+}
+export function ListVariableListBoxProvider({ value, children }) {
+    return /*#__PURE__*/ _jsx(ListVariableListBoxContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+export const ListVariableListBox = /*#__PURE__*/ forwardRef(function ListVariableListBox(props, ref) {
+    const { children, ...rest } = props;
+    const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();
+    // Derived selection metadata for context listbox header
+    const selectedCount = useMemo(()=>selectedOptions.length, [
+        selectedOptions
+    ]);
+    const isIndeterminate = useMemo(()=>options.length > 0 && selectedCount > 0 && selectedCount !== options.length, [
+        selectedCount,
+        options
+    ]);
+    const isAllSelected = useMemo(()=>options.length > 0 && selectedCount === options.length, [
+        selectedCount,
+        options
+    ]);
+    return /*#__PURE__*/ _jsxs("ul", {
+        ...rest,
+        ref: ref,
+        role: "listbox",
+        children: [
+            /*#__PURE__*/ _jsxs("li", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Checkbox, {
+                        indeterminate: isIndeterminate,
+                        checked: isAllSelected,
+                        // intentionally not passing event to underlying handler to mimic previous behavior
+                        onChange: ()=>handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange)
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: selectedCount
+                            }),
+                            " Selected"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {}),
+            children
+        ]
+    });
+});
+
+//# sourceMappingURL=ListVariableListBox.js.map

package/dist/components/Variables/ListVariableListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/ListVariableListBox.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { ForwardedRef, HTMLAttributes, ReactNode, forwardRef, useContext, useMemo } from 'react';\nimport { Checkbox, Divider } from '@mui/material';\nimport { VariableOption } from '@perses-dev/plugin-system';\nimport { DEFAULT_ALL_VALUE } from '@perses-dev/core';\n\nexport interface ListVariableListBoxContextValue {\n  options: VariableOption[];\n  selectedOptions: VariableOption[];\n  filteredOptions: VariableOption[];\n  allowAllValue: boolean;\n  onChange: (selectedOptions: VariableOption[]) => void;\n}\n\nconst ListVariableListBoxContext = React.createContext<ListVariableListBoxContextValue | undefined>(undefined);\n\nexport function useListVariableListBoxContext(): ListVariableListBoxContextValue {\n  const ctx = useContext(ListVariableListBoxContext);\n  if (!ctx) throw new Error('ListVariableListBoxContext not found');\n  return ctx;\n}\n\n/*\n * Handles the logic for toggling the global select checkbox in the ListBox header.\n *\n * If all options are selected, it will deselect all options.\n * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.\n *\n * If some options are selected, it will select all filtered options.\n *\n * If no options are selected, it will select all filtered options.\n * Should be not possible since a ListVariable has always at least one value.\n *\n * If allowAllValue is true, it will handle the special \"All\" option logic.\n * Main difference is if some options are selected and there is no filter, it will select the \"All\" option\n */\nfunction handleGlobalSelectToggle(\n  options: VariableOption[],\n  selectedOptions: VariableOption[],\n  filteredOptions: VariableOption[],\n  isIndeterminate: boolean,\n  isAllSelected: boolean,\n  allowAllValue: boolean,\n  onChange: (selectedOptions: VariableOption[]) => void\n): void {\n  if (isAllSelected) {\n    if (filteredOptions.length !== options.length) {\n      onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n    } else {\n      onChange([]);\n    }\n    return;\n  }\n\n  if (isIndeterminate) {\n    if (allowAllValue) {\n      if (filteredOptions.length === options.length) {\n        if (selectedOptions[0]?.value === DEFAULT_ALL_VALUE) {\n          onChange(options.filter((o) => o.value !== DEFAULT_ALL_VALUE));\n        } else {\n          onChange([{ label: DEFAULT_ALL_VALUE, value: DEFAULT_ALL_VALUE }]);\n        }\n      } else {\n        if (filteredOptions.every((o) => selectedOptions.includes(o))) {\n          onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n        } else {\n          onChange([...selectedOptions, ...filteredOptions.filter((o) => o.value !== DEFAULT_ALL_VALUE)]);\n        }\n      }\n    } else {\n      if (filteredOptions.length === options.length) {\n        onChange(options);\n      } else {\n        if (filteredOptions.every((o) => selectedOptions.includes(o))) {\n          onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n        } else {\n          onChange([...selectedOptions, ...filteredOptions]);\n        }\n      }\n    }\n    return;\n  }\n\n  // Nothing selected, so select filtered options\n  onChange(filteredOptions);\n}\n\nexport function ListVariableListBoxProvider({\n  value,\n  children,\n}: {\n  value: ListVariableListBoxContextValue;\n  children: ReactNode;\n}): React.ReactElement {\n  return <ListVariableListBoxContext.Provider value={value}>{children}</ListVariableListBoxContext.Provider>;\n}\n\nexport const ListVariableListBox = forwardRef(function ListVariableListBox(\n  props: HTMLAttributes<HTMLUListElement>,\n  ref: ForwardedRef<HTMLUListElement>\n) {\n  const { children, ...rest } = props;\n  const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();\n\n  // Derived selection metadata for context listbox header\n  const selectedCount = useMemo(() => selectedOptions.length, [selectedOptions]);\n  const isIndeterminate = useMemo(\n    () => options.length > 0 && selectedCount > 0 && selectedCount !== options.length,\n    [selectedCount, options]\n  );\n  const isAllSelected = useMemo(() => options.length > 0 && selectedCount === options.length, [selectedCount, options]);\n\n  return (\n    <ul {...rest} ref={ref} role=\"listbox\">\n      <li style={{ display: 'flex', alignItems: 'center' }}>\n        <Checkbox\n          indeterminate={isIndeterminate}\n          checked={isAllSelected}\n          // intentionally not passing event to underlying handler to mimic previous behavior\n          onChange={() =>\n            handleGlobalSelectToggle(\n              options,\n              selectedOptions,\n              filteredOptions,\n              isIndeterminate,\n              isAllSelected,\n              allowAllValue,\n              onChange\n            )\n          }\n        />\n        <span>\n          <strong>{selectedCount}</strong> Selected\n        </span>\n      </li>\n      <Divider />\n      {children}\n    </ul>\n  );\n});\n"],"names":["React","forwardRef","useContext","useMemo","Checkbox","Divider","DEFAULT_ALL_VALUE","ListVariableListBoxContext","createContext","undefined","useListVariableListBoxContext","ctx","Error","handleGlobalSelectToggle","options","selectedOptions","filteredOptions","isIndeterminate","isAllSelected","allowAllValue","onChange","length","filter","o","includes","value","label","every","ListVariableListBoxProvider","children","Provider","ListVariableListBox","props","ref","rest","selectedCount","ul","role","li","style","display","alignItems","indeterminate","checked","span","strong"],"mappings":"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"}

package/dist/components/Variables/Variable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Variable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/Variable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,gBAAgB,EAEhB,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,YAAY,CAWtE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,GAAG,SAAS,EAClC,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA2FA"}
+{"version":3,"file":"Variable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/Variable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAC;AAEhF,OAAO,EAGL,gBAAgB,EAEhB,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAIL,cAAc,EACd,aAAa,EACd,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAKvD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,YAAY,CAWtE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,GAAG,SAAS,EAClC,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA4EA"}

package/dist/components/Variables/Variable.js

@@ -11,12 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { LinearProgress, TextField, Autocomplete, Popper } from '@mui/material';
+import { createElement as _createElement } from "react";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { TextField, Popper, Checkbox, Autocomplete, createFilterOptions, Chip, Box } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
-import { useListVariablePluginValues } from '@perses-dev/plugin-system';
+import { SORT_METHODS, useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';
 import { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';
+import { ListVariableListBoxProvider, ListVariableListBox } from './ListVariableListBox';
 function variableOptionToVariableValue(options) {
     if (options === null) {
         return null;
@@ -73,22 +75,8 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
             ...options
         ] : [];
         if (!sort || sort === 'none') return opts;
-        switch(sort){
-            case 'alphabetical-asc':
-                return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
-            case 'alphabetical-desc':
-                return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
-            case 'numerical-asc':
-                return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
-            case 'numerical-desc':
-                return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
-            case 'alphabetical-ci-asc':
-                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
-            case 'alphabetical-ci-desc':
-                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
-            default:
-                return opts;
-        }
+        const sortMethod = SORT_METHODS[sort];
+        return !sortMethod ? opts : sortMethod.sort(opts);
     }, [
         options,
         sort
@@ -196,6 +184,15 @@ function ListVariable({ name, source }) {
     const title = definition?.spec.display?.name ?? name;
     const allowMultiple = definition?.spec.allowMultiple === true;
     const allowAllValue = definition?.spec.allowAllValue === true;
+    const filterOptions = createFilterOptions({});
+    const filteredOptions = useMemo(()=>filterOptions(viewOptions, {
+            inputValue,
+            getOptionLabel: (o)=>o.label
+        }), [
+        inputValue,
+        viewOptions,
+        filterOptions
+    ]);
     // Update value when changed
     useEffect(()=>{
         if (value) {
@@ -227,64 +224,160 @@ function ListVariable({ name, source }) {
         options,
         source
     ]);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(Autocomplete, {
-                disablePortal: true,
-                disableCloseOnSelect: allowMultiple,
-                multiple: allowMultiple,
-                fullWidth: true,
-                limitTags: 3,
-                size: "small",
-                disableClearable: true,
-                slots: {
-                    popper: StyledPopper
-                },
-                renderInput: (params)=>{
-                    return allowMultiple ? /*#__PURE__*/ _jsx(TextField, {
-                        ...params,
-                        label: title,
-                        onChange: (e)=>setInputValue(e.target.value)
-                    }) : /*#__PURE__*/ _jsx(TextField, {
-                        ...params,
-                        label: title,
-                        style: {
-                            width: `${inputWidth}px`
-                        }
-                    });
-                },
-                sx: {
-                    '& .MuiInputBase-root': {
-                        minHeight: '38px'
-                    },
-                    '& .MuiAutocomplete-tag': {
-                        margin: '1px 2px'
-                    }
-                },
-                value: selectedOptions,
-                onChange: (_, value)=>{
-                    if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
-                        setVariableValue(name, DEFAULT_ALL_VALUE, source);
-                    } else {
-                        setVariableValue(name, variableOptionToVariableValue(value), source);
-                    }
-                },
-                inputValue: allowMultiple ? inputValue : undefined,
-                onInputChange: (_, newInputValue)=>{
-                    if (!allowMultiple) {
-                        setInputWidth(getWidthPx(newInputValue, 'list'));
-                    }
+    const handleGlobalSelect = useCallback((options)=>{
+        setVariableValue(name, variableOptionToVariableValue(options), source);
+    }, [
+        name,
+        setVariableValue,
+        source
+    ]);
+    const listBoxProviderValue = useMemo(()=>({
+            options: viewOptions,
+            selectedOptions: selectedOptions,
+            filteredOptions: filteredOptions,
+            allowAllValue,
+            onChange: handleGlobalSelect
+        }), [
+        allowAllValue,
+        filteredOptions,
+        handleGlobalSelect,
+        selectedOptions,
+        viewOptions
+    ]);
+    const autocompleteComponent = useMemo(()=>{
+        return /*#__PURE__*/ _jsx(Autocomplete, {
+            disablePortal: true,
+            loading: loading,
+            disableCloseOnSelect: allowMultiple,
+            multiple: allowMultiple,
+            fullWidth: true,
+            limitTags: 3,
+            size: "small",
+            disableClearable: true,
+            slotProps: {
+                listbox: {
+                    component: allowMultiple ? ListVariableListBox : undefined
+                }
+            },
+            slots: {
+                popper: StyledPopper
+            },
+            sx: {
+                '& .MuiInputBase-root': {
+                    minHeight: '38px'
                 },
-                onBlur: ()=>{
-                    if (allowMultiple) {
-                        setInputValue('');
+                '& .MuiAutocomplete-tag': {
+                    margin: '1px 2px'
+                }
+            },
+            filterOptions: filterOptions,
+            options: viewOptions,
+            value: selectedOptions,
+            onChange: (_, value)=>{
+                if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
+                    setVariableValue(name, DEFAULT_ALL_VALUE, source);
+                } else {
+                    setVariableValue(name, variableOptionToVariableValue(value), source);
+                }
+            },
+            inputValue: allowMultiple ? inputValue : undefined,
+            onInputChange: (_, newInputValue)=>{
+                if (!allowMultiple) {
+                    setInputWidth(getWidthPx(newInputValue, 'list'));
+                }
+            },
+            onBlur: ()=>{
+                if (allowMultiple) {
+                    setInputValue('');
+                }
+            },
+            renderInput: (params)=>{
+                return allowMultiple ? /*#__PURE__*/ _jsx(TextField, {
+                    ...params,
+                    label: title,
+                    onChange: (e)=>setInputValue(e.target.value)
+                }) : /*#__PURE__*/ _jsx(TextField, {
+                    ...params,
+                    label: title,
+                    style: {
+                        width: `${inputWidth}px`
                     }
-                },
-                options: viewOptions
-            }),
-            loading && /*#__PURE__*/ _jsx(LinearProgress, {})
-        ]
-    });
+                });
+            },
+            renderOption: (props, option, { selected })=>{
+                const { key, ...optionProps } = props;
+                return /*#__PURE__*/ _jsxs("li", {
+                    ...optionProps,
+                    style: {
+                        padding: 0
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Checkbox, {
+                            style: {
+                                marginRight: 8
+                            },
+                            checked: selected
+                        }),
+                        option.label
+                    ]
+                }, key);
+            },
+            renderTags: (value, getTagProps, ownerState)=>{
+                // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)
+                if (ownerState.focused) {
+                    return /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            maxHeight: 200,
+                            overflowY: 'auto'
+                        },
+                        children: value.map((option, index)=>/*#__PURE__*/ _createElement(Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            }))
+                    });
+                }
+                const limitTags = ownerState.limitTags;
+                const numTags = value.length;
+                return /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        value.slice(0, limitTags).map((option, index)=>/*#__PURE__*/ _createElement(Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            })),
+                        limitTags && numTags > limitTags && ` +${numTags - limitTags}`
+                    ]
+                });
+            }
+        });
+    }, [
+        allowAllValue,
+        allowMultiple,
+        filterOptions,
+        inputValue,
+        inputWidth,
+        loading,
+        name,
+        selectedOptions,
+        setVariableValue,
+        source,
+        title,
+        viewOptions
+    ]);
+    if (allowMultiple) {
+        return /*#__PURE__*/ _jsx(ListVariableListBoxProvider, {
+            value: listBoxProviderValue,
+            children: autocompleteComponent
+        });
+    }
+    return autocompleteComponent;
 }
 function TextVariable({ name, source }) {
     const ctx = useVariableDefinitionAndState(name, source);

package/dist/components/Variables/Variable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\n\ntype VariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function Variable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps): ReactElement => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_VARIABLE_WIDTH) {\n    return MIN_VARIABLE_WIDTH;\n  } else if (width > MAX_VARIABLE_WIDTH) {\n    return MAX_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);\n  // Used for multiple value variables, it will not clear variable input when selecting an option\n  const [inputValue, setInputValue] = useState('');\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        slots={{ popper: StyledPopper }}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} onChange={(e) => setInputValue(e.target.value)} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiAutocomplete-tag': {\n            margin: '1px 2px', // Default margin of 2px (Y axis) make min height of the autocomplete 40px\n          },\n        }}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value), source);\n          }\n        }}\n        inputValue={allowMultiple ? inputValue : undefined}\n        onInputChange={(_, newInputValue) => {\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        onBlur={() => {\n          if (allowMultiple) {\n            setInputValue('');\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\n}\n\nfunction TextVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useVariableDefinitionActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      slotProps={{\n        input: {\n          readOnly: definition?.spec.constant ?? false,\n        },\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","variableOptionToVariableValue","options","Array","isArray","map","v","value","Variable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","inputWidth","setInputWidth","setInputValue","title","display","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","slots","popper","renderInput","params","onChange","e","target","style","minHeight","margin","_","undefined","onInputChange","newInputValue","onBlur","tempValue","setTempValue","placeholder","slotProps","input","readOnly","constant","textOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { TextField, Popper, PopperProps, Checkbox, Autocomplete, createFilterOptions, Chip, Box } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport {\n  SORT_METHODS,\n  SortMethodName,\n  useListVariablePluginValues,\n  VariableOption,\n  VariableState,\n} from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\nimport { ListVariableListBoxProvider, ListVariableListBox } from './ListVariableListBox';\n\ntype VariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function Variable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n    const sortMethod = SORT_METHODS[sort as SortMethodName];\n    return !sortMethod ? opts : sortMethod.sort(opts);\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps): ReactElement => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_VARIABLE_WIDTH) {\n    return MIN_VARIABLE_WIDTH;\n  } else if (width > MAX_VARIABLE_WIDTH) {\n    return MAX_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);\n  // Used for multiple value variables, it will not clear variable input when selecting an option\n  const [inputValue, setInputValue] = useState('');\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  const filterOptions = createFilterOptions<VariableOption>({});\n\n  const filteredOptions = useMemo(\n    () => filterOptions(viewOptions, { inputValue, getOptionLabel: (o) => o.label }),\n    [inputValue, viewOptions, filterOptions]\n  );\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  const handleGlobalSelect = useCallback(\n    (options: VariableOption[]): void => {\n      setVariableValue(name, variableOptionToVariableValue(options), source);\n    },\n    [name, setVariableValue, source]\n  );\n\n  const listBoxProviderValue = useMemo(\n    () => ({\n      options: viewOptions,\n      selectedOptions: selectedOptions as VariableOption[], // Only used when allowMultiple is true => selectedOptions is always an array\n      filteredOptions: filteredOptions,\n      allowAllValue,\n      onChange: handleGlobalSelect,\n    }),\n    [allowAllValue, filteredOptions, handleGlobalSelect, selectedOptions, viewOptions]\n  );\n\n  const autocompleteComponent = useMemo(() => {\n    return (\n      <Autocomplete\n        disablePortal\n        loading={loading}\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        slotProps={{ listbox: { component: allowMultiple ? ListVariableListBox : undefined } }}\n        slots={{ popper: StyledPopper }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiAutocomplete-tag': {\n            margin: '1px 2px', // Default margin of 2px (Y axis) make min height of the autocomplete 40px\n          },\n        }}\n        filterOptions={filterOptions}\n        options={viewOptions}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value as VariableOption), source);\n          }\n        }}\n        inputValue={allowMultiple ? inputValue : undefined}\n        onInputChange={(_, newInputValue) => {\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        onBlur={() => {\n          if (allowMultiple) {\n            setInputValue('');\n          }\n        }}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} onChange={(e) => setInputValue(e.target.value)} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        renderOption={(props, option, { selected }) => {\n          const { key, ...optionProps } = props;\n          return (\n            <li key={key} {...optionProps} style={{ padding: 0 }}>\n              <Checkbox style={{ marginRight: 8 }} checked={selected} />\n              {option.label}\n            </li>\n          );\n        }}\n        renderTags={(value, getTagProps, ownerState) => {\n          // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)\n          if (ownerState.focused) {\n            return (\n              <Box sx={{ maxHeight: 200, overflowY: 'auto' }}>\n                {value.map((option, index) => (\n                  <Chip {...getTagProps({ index })} key={index} label={option.label} size=\"small\" />\n                ))}\n              </Box>\n            );\n          }\n\n          const limitTags: number | undefined = ownerState.limitTags;\n          const numTags: number = value.length;\n\n          return (\n            <>\n              {value.slice(0, limitTags).map((option, index) => (\n                <Chip {...getTagProps({ index })} key={index} label={option.label} size=\"small\" />\n              ))}\n\n              {limitTags && numTags > limitTags && ` +${numTags - limitTags}`}\n            </>\n          );\n        }}\n      />\n    );\n  }, [\n    allowAllValue,\n    allowMultiple,\n    filterOptions,\n    inputValue,\n    inputWidth,\n    loading,\n    name,\n    selectedOptions,\n    setVariableValue,\n    source,\n    title,\n    viewOptions,\n  ]);\n\n  if (allowMultiple) {\n    return (\n      <ListVariableListBoxProvider value={listBoxProviderValue}>{autocompleteComponent}</ListVariableListBoxProvider>\n    );\n  }\n\n  return autocompleteComponent;\n}\n\nfunction TextVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useVariableDefinitionActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      slotProps={{\n        input: {\n          readOnly: definition?.spec.constant ?? false,\n        },\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useState","TextField","Popper","Checkbox","Autocomplete","createFilterOptions","Chip","Box","DEFAULT_ALL_VALUE","SORT_METHODS","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","ListVariableListBoxProvider","ListVariableListBox","variableOptionToVariableValue","options","Array","isArray","map","v","value","Variable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","sortMethod","viewOptions","computedOptions","label","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","inputWidth","setInputWidth","setInputValue","title","display","filterOptions","filteredOptions","getOptionLabel","handleGlobalSelect","listBoxProviderValue","onChange","autocompleteComponent","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","slotProps","listbox","component","undefined","slots","popper","minHeight","margin","_","onInputChange","newInputValue","onBlur","renderInput","params","e","target","style","renderOption","option","selected","key","optionProps","li","padding","marginRight","checked","renderTags","getTagProps","ownerState","focused","maxHeight","overflowY","index","numTags","slice","tempValue","setTempValue","placeholder","input","readOnly","constant","textOverflow"],"mappings":"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"}

package/dist/components/Variables/VariableEditor.d.ts

@@ -1,7 +1,6 @@
 import { ReactElement } from 'react';
-import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';
+import { BuiltinVariableDefinition, VariableDefinition, ExternalVariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
-import { ExternalVariableDefinition } from '../../context';
 export declare function VariableEditor(props: {
     variableDefinitions: VariableDefinition[];
     externalVariableDefinitions: ExternalVariableDefinition[];

package/dist/components/Variables/VariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,EAAU,yBAAyB,EAA8B,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUrH,OAAO,EAGL,aAAa,EAId,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,0BAA0B,EAAqD,MAAM,eAAe,CAAC;AAuB9G,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Uf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,EAEL,yBAAyB,EAEzB,kBAAkB,EAClB,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAU1B,OAAO,EAGL,aAAa,EAId,MAAM,2BAA2B,CAAC;AAyBnC,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Uf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}