@perses-dev/static-list-variable-plugin 0.6.0 → 0.7.0

package/lib/StaticListVariable.js

@@ -1,46 +1,225 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Autocomplete, TextField } from '@mui/material';
+/* eslint-disable jsx-a11y/no-autofocus */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Chip, IconButton, TextField, Typography } from '@mui/material';
+import { useCallback, useState } from 'react';
+import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
 function StaticListVariableOptionEditor(props) {
-    const value = (props.value.values || []).map((v)=>{
-        if (typeof v === 'string') {
-            return v;
-        } else {
-            return v.value;
+    const { value: { values: variables = [] }, onChange } = props;
+    const [editModeOption, setEditModeOption] = useState('');
+    const onChangeHandler = useCallback((_, value)=>{
+        const newVariable = value.pop();
+        const valueExists = variables.map((v)=>{
+            return typeof v === 'string' ? v : v?.value || '';
+        }).some((v)=>v === newVariable);
+        if (valueExists) return;
+        onChange({
+            values: [
+                ...variables,
+                {
+                    value: String(newVariable),
+                    label: String(newVariable)
+                }
+            ]
+        });
+    }, [
+        onChange,
+        variables
+    ]);
+    const onPasteHandler = useCallback((e)=>{
+        const v = e.clipboardData.getData('text/plain');
+        if (v) {
+            const items = v.split(',').filter((i)=>{
+                const exists = variables.map((v)=>{
+                    return v?.value || String(v);
+                }).some((v)=>v === i);
+                return !exists;
+            }).map((item)=>({
+                    value: item.trim(),
+                    label: ''
+                }));
+            onChange({
+                values: [
+                    ...variables,
+                    ...items
+                ]
+            });
+            e.preventDefault();
         }
-    });
-    const onChange = (__, value)=>{
-        props.onChange({
-            values: value.map((v)=>{
-                return {
-                    value: v,
-                    label: v
+    }, [
+        onChange,
+        variables
+    ]);
+    const tagDeleteHandler = useCallback((option)=>{
+        const filteredVariables = variables.filter((v)=>!(v === option || v?.value === option));
+        onChange({
+            values: [
+                ...filteredVariables
+            ]
+        });
+        setEditModeOption('');
+    }, [
+        variables,
+        onChange
+    ]);
+    const renderTagsHandler = useCallback((tagValue)=>{
+        const updateVariableWithLabel = (optionKey, label)=>{
+            if (!optionKey || !label) return variables;
+            /* Prevent duplicate label */ const labelAlreadyExists = variables.filter((v)=>typeof v !== 'string').some((v)=>v?.label === label);
+            if (labelAlreadyExists) return variables;
+            return variables.map((v)=>{
+                if (typeof v === 'string') return v;
+                const variableOption = v;
+                if (variableOption.value !== optionKey) return variableOption;
+                const updatedVariableOption = {
+                    label,
+                    value: variableOption.value
                 };
-            })
+                return updatedVariableOption;
+            });
+        };
+        return tagValue.map((_, index)=>{
+            const foundVariable = variables[index];
+            if (!foundVariable) return null;
+            const labelObject = {
+                value: '',
+                label: ''
+            };
+            if (typeof foundVariable === 'string') {
+                /* value and label are identical */ labelObject.value = foundVariable;
+                labelObject.label = foundVariable;
+            } else {
+                labelObject.value = foundVariable.value;
+                labelObject.label = foundVariable.label || foundVariable.value;
+            }
+            /* The value and key are the same thing, they can be used interchangeably  */ const optionKey = foundVariable?.value || foundVariable;
+            return /*#__PURE__*/ _jsx(Chip, {
+                sx: {
+                    margin: '4px'
+                },
+                label: editModeOption !== optionKey ? /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: labelObject.value
+                        }),
+                        labelObject?.value !== labelObject?.label && /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            sx: {
+                                backgroundColor: (theme)=>theme.palette.grey[200],
+                                color: (theme)=>theme.palette.text.primary,
+                                padding: '4px 8px',
+                                borderRadius: '4px',
+                                fontWeight: 500
+                            },
+                            children: labelObject.label
+                        }),
+                        typeof foundVariable !== 'string' && labelObject.value === labelObject.label && /*#__PURE__*/ _jsx(IconButton, {
+                            size: "small",
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                setEditModeOption(optionKey);
+                            },
+                            sx: {
+                                color: (theme)=>theme.palette.action.disabled
+                            },
+                            children: /*#__PURE__*/ _jsx(PlusCircleIcon, {
+                                fontSize: "small"
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            children: optionKey
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            defaultValue: labelObject.label,
+                            onBlur: (e)=>{
+                                const { target: { value: input } } = e;
+                                if (input) {
+                                    const updatedVariables = updateVariableWithLabel(optionKey, input);
+                                    onChange({
+                                        values: updatedVariables
+                                    });
+                                }
+                                setEditModeOption('');
+                            },
+                            onKeyDown: (e)=>{
+                                if (e.key === 'Enter') {
+                                    const { value: input } = e.target;
+                                    const updatedVariables = updateVariableWithLabel(optionKey, input);
+                                    onChange({
+                                        values: updatedVariables
+                                    });
+                                    setEditModeOption('');
+                                } else if (e.key === 'Escape') {
+                                    setEditModeOption('');
+                                }
+                            },
+                            size: "small",
+                            autoFocus: true,
+                            sx: {
+                                width: '100%',
+                                padding: 0,
+                                margin: 0,
+                                backgroundColor: (theme)=>theme.palette.background.default,
+                                '& .MuiInputBase-root': {
+                                    fontSize: '0.875rem',
+                                    padding: 0
+                                },
+                                '& .MuiOutlinedInput-notchedOutline': {
+                                    border: 'none'
+                                }
+                            },
+                            inputProps: {
+                                style: {
+                                    padding: 0
+                                }
+                            }
+                        })
+                    ]
+                }),
+                onDelete: ()=>{
+                    tagDeleteHandler(optionKey);
+                }
+            }, optionKey);
         });
-    };
+    }, [
+        variables,
+        tagDeleteHandler,
+        editModeOption,
+        onChange
+    ]);
     return /*#__PURE__*/ _jsx("div", {
         children: /*#__PURE__*/ _jsx(Autocomplete, {
-            onPaste: (e)=>{
-                // Append new values on paste
-                const v = e.clipboardData.getData('text/plain');
-                if (v) {
-                    const values = v.split(',');
-                    onChange(null, value.concat(values));
-                    e.preventDefault();
-                }
-            },
+            onPaste: onPasteHandler,
             multiple: true,
-            value: value,
-            onChange: onChange,
+            value: variables.map((vr)=>typeof vr === 'string' ? vr : vr.label || vr.value),
+            onChange: onChangeHandler,
             options: [],
             freeSolo: true,
             clearOnBlur: true,
             readOnly: props.isReadonly,
+            renderTags: renderTagsHandler,
             renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
                     ...params,
                     label: "Values",
                     placeholder: "Values",
-                    helperText: 'Type new value then press "Enter" to add.'
+                    helperText: 'Type new value then press "Enter" to add. Optionally define a label by clicking on the "+" button.',
+                    onKeyDown: (e)=>{
+                        if (e.key === 'Backspace' && !params.inputProps.value) {
+                            e.stopPropagation();
+                        }
+                    }
                 })
         })
     });

package/lib/StaticListVariable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StaticListVariable.tsx"],"sourcesContent":["import { VariablePlugin, VariableOption, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Autocomplete, TextField } from '@mui/material';\n\ntype StaticListOption = string | VariableOption;\n\ntype StaticListVariableOptions = {\n  values: StaticListOption[];\n};\n\nfunction StaticListVariableOptionEditor(props: OptionsEditorProps<StaticListVariableOptions>) {\n  const value = (props.value.values || []).map((v) => {\n    if (typeof v === 'string') {\n      return v;\n    } else {\n      return v.value;\n    }\n  });\n\n  const onChange = (__: unknown, value: string[]) => {\n    props.onChange({\n      values: value.map((v) => {\n        return { value: v, label: v };\n      }),\n    });\n  };\n\n  return (\n    <div>\n      <Autocomplete\n        onPaste={(e) => {\n          // Append new values on paste\n          const v = e.clipboardData.getData('text/plain');\n          if (v) {\n            const values = v.split(',');\n            onChange(null, value.concat(values));\n            e.preventDefault();\n          }\n        }}\n        multiple\n        value={value}\n        onChange={onChange}\n        options={[]}\n        freeSolo\n        clearOnBlur\n        readOnly={props.isReadonly}\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            label=\"Values\"\n            placeholder=\"Values\"\n            helperText='Type new value then press \"Enter\" to add.'\n          />\n        )}\n      />\n    </div>\n  );\n}\n\nexport const StaticListVariable: VariablePlugin<StaticListVariableOptions> = {\n  getVariableOptions: async (spec) => {\n    const values = spec.values?.map((v) => {\n      if (typeof v === 'string') {\n        return { label: v, value: v };\n      }\n      return v;\n    });\n    return {\n      data: values,\n    };\n  },\n  dependsOn: () => {\n    return { variables: [] };\n  },\n  OptionsEditorComponent: StaticListVariableOptionEditor,\n  createInitialOptions: () => ({ values: [] }),\n};\n"],"names":["Autocomplete","TextField","StaticListVariableOptionEditor","props","value","values","map","v","onChange","__","label","div","onPaste","e","clipboardData","getData","split","concat","preventDefault","multiple","options","freeSolo","clearOnBlur","readOnly","isReadonly","renderInput","params","placeholder","helperText","StaticListVariable","getVariableOptions","spec","data","dependsOn","variables","OptionsEditorComponent","createInitialOptions"],"mappings":";AACA,SAASA,YAAY,EAAEC,SAAS,QAAQ,gBAAgB;AAQxD,SAASC,+BAA+BC,KAAoD;IAC1F,MAAMC,QAAQ,AAACD,CAAAA,MAAMC,KAAK,CAACC,MAAM,IAAI,EAAE,AAAD,EAAGC,GAAG,CAAC,CAACC;QAC5C,IAAI,OAAOA,MAAM,UAAU;YACzB,OAAOA;QACT,OAAO;YACL,OAAOA,EAAEH,KAAK;QAChB;IACF;IAEA,MAAMI,WAAW,CAACC,IAAaL;QAC7BD,MAAMK,QAAQ,CAAC;YACbH,QAAQD,MAAME,GAAG,CAAC,CAACC;gBACjB,OAAO;oBAAEH,OAAOG;oBAAGG,OAAOH;gBAAE;YAC9B;QACF;IACF;IAEA,qBACE,KAACI;kBACC,cAAA,KAACX;YACCY,SAAS,CAACC;gBACR,6BAA6B;gBAC7B,MAAMN,IAAIM,EAAEC,aAAa,CAACC,OAAO,CAAC;gBAClC,IAAIR,GAAG;oBACL,MAAMF,SAASE,EAAES,KAAK,CAAC;oBACvBR,SAAS,MAAMJ,MAAMa,MAAM,CAACZ;oBAC5BQ,EAAEK,cAAc;gBAClB;YACF;YACAC,QAAQ;YACRf,OAAOA;YACPI,UAAUA;YACVY,SAAS,EAAE;YACXC,QAAQ;YACRC,WAAW;YACXC,UAAUpB,MAAMqB,UAAU;YAC1BC,aAAa,CAACC,uBACZ,KAACzB;oBACE,GAAGyB,MAAM;oBACVhB,OAAM;oBACNiB,aAAY;oBACZC,YAAW;;;;AAMvB;AAEA,OAAO,MAAMC,qBAAgE;IAC3EC,oBAAoB,OAAOC;QACzB,MAAM1B,SAAS0B,KAAK1B,MAAM,EAAEC,IAAI,CAACC;YAC/B,IAAI,OAAOA,MAAM,UAAU;gBACzB,OAAO;oBAAEG,OAAOH;oBAAGH,OAAOG;gBAAE;YAC9B;YACA,OAAOA;QACT;QACA,OAAO;YACLyB,MAAM3B;QACR;IACF;IACA4B,WAAW;QACT,OAAO;YAAEC,WAAW,EAAE;QAAC;IACzB;IACAC,wBAAwBjC;IACxBkC,sBAAsB,IAAO,CAAA;YAAE/B,QAAQ,EAAE;QAAC,CAAA;AAC5C,EAAE"}
+{"version":3,"sources":["../../src/StaticListVariable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport { VariablePlugin, VariableOption, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Autocomplete, Chip, IconButton, TextField, Typography } from '@mui/material';\nimport { useCallback, useState } from 'react';\nimport PlusCircleIcon from 'mdi-material-ui/PlusCircle';\n\ntype StaticListOption = string | VariableOption;\n\ntype StaticListVariableOptions = {\n  values: StaticListOption[];\n};\n\nfunction StaticListVariableOptionEditor(props: OptionsEditorProps<StaticListVariableOptions>) {\n  const {\n    value: { values: variables = [] },\n    onChange,\n  } = props;\n\n  const [editModeOption, setEditModeOption] = useState<string>('');\n\n  const onChangeHandler = useCallback(\n    (_: unknown, value: string[]): void => {\n      const newVariable = value.pop();\n\n      const valueExists = variables\n        .map((v) => {\n          return typeof v === 'string' ? v : (v as VariableOption)?.value || '';\n        })\n        .some((v) => v === newVariable);\n\n      if (valueExists) return;\n\n      onChange({\n        values: [...variables, { value: String(newVariable), label: String(newVariable) }],\n      });\n    },\n    [onChange, variables]\n  );\n\n  const onPasteHandler = useCallback(\n    (e: React.ClipboardEvent<HTMLDivElement>) => {\n      const v = e.clipboardData.getData('text/plain');\n      if (v) {\n        const items = v\n          .split(',')\n          .filter((i) => {\n            const exists = variables\n              .map((v) => {\n                return (v as VariableOption)?.value || String(v);\n              })\n              .some((v) => v === i);\n            return !exists;\n          })\n          .map((item) => ({ value: item.trim(), label: '' }));\n        onChange({ values: [...variables, ...items] });\n        e.preventDefault();\n      }\n    },\n    [onChange, variables]\n  );\n\n  const tagDeleteHandler = useCallback(\n    (option: string) => {\n      const filteredVariables = variables.filter(\n        (v) => !((v as string) === option || (v as VariableOption)?.value === option)\n      );\n      onChange({ values: [...filteredVariables] });\n      setEditModeOption('');\n    },\n    [variables, onChange]\n  );\n\n  const renderTagsHandler = useCallback(\n    (tagValue: string[]) => {\n      const updateVariableWithLabel = (optionKey: string, label: string): Array<string | VariableOption> => {\n        if (!optionKey || !label) return variables;\n        /* Prevent duplicate label */\n        const labelAlreadyExists = variables.filter((v) => typeof v !== 'string').some((v) => v?.label === label);\n        if (labelAlreadyExists) return variables;\n\n        return variables.map((v) => {\n          if (typeof v === 'string') return v;\n          const variableOption = v as VariableOption;\n          if (variableOption!.value !== optionKey) return variableOption;\n          const updatedVariableOption: VariableOption = {\n            label,\n            value: variableOption!.value,\n          };\n          return updatedVariableOption;\n        });\n      };\n\n      return tagValue.map((_, index) => {\n        const foundVariable = variables[index];\n        if (!foundVariable) return null;\n\n        const labelObject: { value: string; label: string } = { value: '', label: '' };\n\n        if (typeof foundVariable === 'string') {\n          /* value and label are identical */\n          labelObject.value = foundVariable;\n          labelObject.label = foundVariable;\n        } else {\n          labelObject.value = foundVariable.value;\n          labelObject.label = foundVariable.label || foundVariable.value;\n        }\n\n        /* The value and key are the same thing, they can be used interchangeably  */\n        const optionKey = (foundVariable as VariableOption)?.value || (foundVariable as string);\n\n        return (\n          <Chip\n            key={optionKey}\n            sx={{ margin: '4px' }}\n            label={\n              editModeOption !== optionKey ? (\n                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                  <Typography variant=\"body2\">{labelObject.value}</Typography>\n                  {labelObject?.value !== labelObject?.label && (\n                    <Typography\n                      variant=\"body2\"\n                      sx={{\n                        backgroundColor: (theme) => theme.palette.grey[200],\n                        color: (theme) => theme.palette.text.primary,\n                        padding: '4px 8px',\n                        borderRadius: '4px',\n                        fontWeight: 500,\n                      }}\n                    >\n                      {labelObject.label}\n                    </Typography>\n                  )}\n                  {/* Label can be added once and then no longer it will be editable */}\n                  {typeof foundVariable !== 'string' && labelObject.value === labelObject.label && (\n                    <IconButton\n                      size=\"small\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        setEditModeOption(optionKey);\n                      }}\n                      sx={{\n                        color: (theme) => theme.palette.action.disabled,\n                      }}\n                    >\n                      <PlusCircleIcon fontSize=\"small\" />\n                    </IconButton>\n                  )}\n                </div>\n              ) : (\n                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                  <span>{optionKey}</span>\n                  <TextField\n                    defaultValue={labelObject.label}\n                    onBlur={(e) => {\n                      const {\n                        target: { value: input },\n                      } = e;\n                      if (input) {\n                        const updatedVariables = updateVariableWithLabel(optionKey, input);\n                        onChange({ values: updatedVariables });\n                      }\n                      setEditModeOption('');\n                    }}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        const { value: input } = e.target as HTMLInputElement;\n                        const updatedVariables = updateVariableWithLabel(optionKey, input);\n                        onChange({ values: updatedVariables });\n                        setEditModeOption('');\n                      } else if (e.key === 'Escape') {\n                        setEditModeOption('');\n                      }\n                    }}\n                    size=\"small\"\n                    autoFocus\n                    sx={{\n                      width: '100%',\n                      padding: 0,\n                      margin: 0,\n                      backgroundColor: (theme) => theme.palette.background.default,\n                      '& .MuiInputBase-root': {\n                        fontSize: '0.875rem',\n                        padding: 0,\n                      },\n                      '& .MuiOutlinedInput-notchedOutline': {\n                        border: 'none',\n                      },\n                    }}\n                    inputProps={{\n                      style: {\n                        padding: 0,\n                      },\n                    }}\n                  />\n                </div>\n              )\n            }\n            onDelete={() => {\n              tagDeleteHandler(optionKey);\n            }}\n          />\n        );\n      });\n    },\n    [variables, tagDeleteHandler, editModeOption, onChange]\n  );\n\n  return (\n    <div>\n      <Autocomplete\n        onPaste={onPasteHandler}\n        multiple\n        value={variables.map((vr) => (typeof vr === 'string' ? vr : vr.label || vr.value))}\n        onChange={onChangeHandler}\n        options={[]}\n        freeSolo\n        clearOnBlur\n        readOnly={props.isReadonly}\n        renderTags={renderTagsHandler}\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            label=\"Values\"\n            placeholder=\"Values\"\n            helperText='Type new value then press \"Enter\" to add. Optionally define a label by clicking on the \"+\" button.'\n            onKeyDown={(e) => {\n              if (e.key === 'Backspace' && !params.inputProps.value) {\n                e.stopPropagation();\n              }\n            }}\n          />\n        )}\n      />\n    </div>\n  );\n}\n\nexport const StaticListVariable: VariablePlugin<StaticListVariableOptions> = {\n  getVariableOptions: async (spec) => {\n    const values = spec.values?.map((v) => {\n      if (typeof v === 'string') {\n        return { label: v, value: v };\n      }\n      return v;\n    });\n    return {\n      data: values,\n    };\n  },\n  dependsOn: () => {\n    return { variables: [] };\n  },\n  OptionsEditorComponent: StaticListVariableOptionEditor,\n  createInitialOptions: () => ({ values: [] }),\n};\n"],"names":["Autocomplete","Chip","IconButton","TextField","Typography","useCallback","useState","PlusCircleIcon","StaticListVariableOptionEditor","props","value","values","variables","onChange","editModeOption","setEditModeOption","onChangeHandler","_","newVariable","pop","valueExists","map","v","some","String","label","onPasteHandler","e","clipboardData","getData","items","split","filter","i","exists","item","trim","preventDefault","tagDeleteHandler","option","filteredVariables","renderTagsHandler","tagValue","updateVariableWithLabel","optionKey","labelAlreadyExists","variableOption","updatedVariableOption","index","foundVariable","labelObject","sx","margin","div","style","display","alignItems","gap","variant","backgroundColor","theme","palette","grey","color","text","primary","padding","borderRadius","fontWeight","size","onClick","stopPropagation","action","disabled","fontSize","span","defaultValue","onBlur","target","input","updatedVariables","onKeyDown","key","autoFocus","width","background","default","border","inputProps","onDelete","onPaste","multiple","vr","options","freeSolo","clearOnBlur","readOnly","isReadonly","renderTags","renderInput","params","placeholder","helperText","StaticListVariable","getVariableOptions","spec","data","dependsOn","OptionsEditorComponent","createInitialOptions"],"mappings":"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"}

package/lib/cjs/StaticListVariable.js

@@ -1,4 +1,4 @@
-"use strict";
+/* eslint-disable jsx-a11y/no-autofocus */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -10,47 +10,231 @@ Object.defineProperty(exports, "StaticListVariable", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _react = require("react");
+const _PlusCircle = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PlusCircle"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function StaticListVariableOptionEditor(props) {
-    const value = (props.value.values || []).map((v)=>{
-        if (typeof v === 'string') {
-            return v;
-        } else {
-            return v.value;
+    const { value: { values: variables = [] }, onChange } = props;
+    const [editModeOption, setEditModeOption] = (0, _react.useState)('');
+    const onChangeHandler = (0, _react.useCallback)((_, value)=>{
+        const newVariable = value.pop();
+        const valueExists = variables.map((v)=>{
+            return typeof v === 'string' ? v : v?.value || '';
+        }).some((v)=>v === newVariable);
+        if (valueExists) return;
+        onChange({
+            values: [
+                ...variables,
+                {
+                    value: String(newVariable),
+                    label: String(newVariable)
+                }
+            ]
+        });
+    }, [
+        onChange,
+        variables
+    ]);
+    const onPasteHandler = (0, _react.useCallback)((e)=>{
+        const v = e.clipboardData.getData('text/plain');
+        if (v) {
+            const items = v.split(',').filter((i)=>{
+                const exists = variables.map((v)=>{
+                    return v?.value || String(v);
+                }).some((v)=>v === i);
+                return !exists;
+            }).map((item)=>({
+                    value: item.trim(),
+                    label: ''
+                }));
+            onChange({
+                values: [
+                    ...variables,
+                    ...items
+                ]
+            });
+            e.preventDefault();
         }
-    });
-    const onChange = (__, value)=>{
-        props.onChange({
-            values: value.map((v)=>{
-                return {
-                    value: v,
-                    label: v
+    }, [
+        onChange,
+        variables
+    ]);
+    const tagDeleteHandler = (0, _react.useCallback)((option)=>{
+        const filteredVariables = variables.filter((v)=>!(v === option || v?.value === option));
+        onChange({
+            values: [
+                ...filteredVariables
+            ]
+        });
+        setEditModeOption('');
+    }, [
+        variables,
+        onChange
+    ]);
+    const renderTagsHandler = (0, _react.useCallback)((tagValue)=>{
+        const updateVariableWithLabel = (optionKey, label)=>{
+            if (!optionKey || !label) return variables;
+            /* Prevent duplicate label */ const labelAlreadyExists = variables.filter((v)=>typeof v !== 'string').some((v)=>v?.label === label);
+            if (labelAlreadyExists) return variables;
+            return variables.map((v)=>{
+                if (typeof v === 'string') return v;
+                const variableOption = v;
+                if (variableOption.value !== optionKey) return variableOption;
+                const updatedVariableOption = {
+                    label,
+                    value: variableOption.value
                 };
-            })
+                return updatedVariableOption;
+            });
+        };
+        return tagValue.map((_, index)=>{
+            const foundVariable = variables[index];
+            if (!foundVariable) return null;
+            const labelObject = {
+                value: '',
+                label: ''
+            };
+            if (typeof foundVariable === 'string') {
+                /* value and label are identical */ labelObject.value = foundVariable;
+                labelObject.label = foundVariable;
+            } else {
+                labelObject.value = foundVariable.value;
+                labelObject.label = foundVariable.label || foundVariable.value;
+            }
+            /* The value and key are the same thing, they can be used interchangeably  */ const optionKey = foundVariable?.value || foundVariable;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                sx: {
+                    margin: '4px'
+                },
+                label: editModeOption !== optionKey ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "body2",
+                            children: labelObject.value
+                        }),
+                        labelObject?.value !== labelObject?.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "body2",
+                            sx: {
+                                backgroundColor: (theme)=>theme.palette.grey[200],
+                                color: (theme)=>theme.palette.text.primary,
+                                padding: '4px 8px',
+                                borderRadius: '4px',
+                                fontWeight: 500
+                            },
+                            children: labelObject.label
+                        }),
+                        typeof foundVariable !== 'string' && labelObject.value === labelObject.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                            size: "small",
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                setEditModeOption(optionKey);
+                            },
+                            sx: {
+                                color: (theme)=>theme.palette.action.disabled
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PlusCircle.default, {
+                                fontSize: "small"
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            children: optionKey
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                            defaultValue: labelObject.label,
+                            onBlur: (e)=>{
+                                const { target: { value: input } } = e;
+                                if (input) {
+                                    const updatedVariables = updateVariableWithLabel(optionKey, input);
+                                    onChange({
+                                        values: updatedVariables
+                                    });
+                                }
+                                setEditModeOption('');
+                            },
+                            onKeyDown: (e)=>{
+                                if (e.key === 'Enter') {
+                                    const { value: input } = e.target;
+                                    const updatedVariables = updateVariableWithLabel(optionKey, input);
+                                    onChange({
+                                        values: updatedVariables
+                                    });
+                                    setEditModeOption('');
+                                } else if (e.key === 'Escape') {
+                                    setEditModeOption('');
+                                }
+                            },
+                            size: "small",
+                            autoFocus: true,
+                            sx: {
+                                width: '100%',
+                                padding: 0,
+                                margin: 0,
+                                backgroundColor: (theme)=>theme.palette.background.default,
+                                '& .MuiInputBase-root': {
+                                    fontSize: '0.875rem',
+                                    padding: 0
+                                },
+                                '& .MuiOutlinedInput-notchedOutline': {
+                                    border: 'none'
+                                }
+                            },
+                            inputProps: {
+                                style: {
+                                    padding: 0
+                                }
+                            }
+                        })
+                    ]
+                }),
+                onDelete: ()=>{
+                    tagDeleteHandler(optionKey);
+                }
+            }, optionKey);
         });
-    };
+    }, [
+        variables,
+        tagDeleteHandler,
+        editModeOption,
+        onChange
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
-            onPaste: (e)=>{
-                // Append new values on paste
-                const v = e.clipboardData.getData('text/plain');
-                if (v) {
-                    const values = v.split(',');
-                    onChange(null, value.concat(values));
-                    e.preventDefault();
-                }
-            },
+            onPaste: onPasteHandler,
             multiple: true,
-            value: value,
-            onChange: onChange,
+            value: variables.map((vr)=>typeof vr === 'string' ? vr : vr.label || vr.value),
+            onChange: onChangeHandler,
             options: [],
             freeSolo: true,
             clearOnBlur: true,
             readOnly: props.isReadonly,
+            renderTags: renderTagsHandler,
             renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                     ...params,
                     label: "Values",
                     placeholder: "Values",
-                    helperText: 'Type new value then press "Enter" to add.'
+                    helperText: 'Type new value then press "Enter" to add. Optionally define a label by clicking on the "+" button.',
+                    onKeyDown: (e)=>{
+                        if (e.key === 'Backspace' && !params.inputProps.value) {
+                            e.stopPropagation();
+                        }
+                    }
                 })
         })
     });

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "StaticListVariable",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.6.0",
+      "buildVersion": "0.7.0",
       "buildName": "@perses-dev/static-list-variable-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/StaticListVariable.97d532c4.js",
+      "name": "__mf/js/StaticListVariable.fd29486a.js",
       "path": "",
       "type": "global"
     },
@@ -111,8 +111,8 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/526.cb9b2a3c.js",
-            "__mf/js/async/__federation_expose_StaticListVariable.3195ca52.js"
+            "__mf/js/async/122.f46c6fa7.js",
+            "__mf/js/async/__federation_expose_StaticListVariable.79f063b2.js"
           ],
           "async": []
         },

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "StaticListVariable",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.6.0",
+      "buildVersion": "0.7.0",
       "buildName": "@perses-dev/static-list-variable-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/StaticListVariable.97d532c4.js",
+      "name": "__mf/js/StaticListVariable.fd29486a.js",
       "path": "",
       "type": "global"
     },
@@ -112,7 +112,9 @@
           "sync": []
         }
       },
-      "usedIn": []
+      "usedIn": [
+        "./StaticListVariable"
+      ]
     }
   ],
   "remotes": [],
@@ -121,13 +123,15 @@
       "path": "./StaticListVariable",
       "id": "StaticListVariable:StaticListVariable",
       "name": "StaticListVariable",
-      "requires": [],
+      "requires": [
+        "react"
+      ],
       "file": "src/StaticListVariable.tsx",
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/526.cb9b2a3c.js",
-            "__mf/js/async/__federation_expose_StaticListVariable.3195ca52.js"
+            "__mf/js/async/122.f46c6fa7.js",
+            "__mf/js/async/__federation_expose_StaticListVariable.79f063b2.js"
           ],
           "async": []
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/static-list-variable-plugin",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.52.0",
-    "@perses-dev/core": "^0.52.0",
-    "@perses-dev/plugin-system": "^0.52.0",
+    "@perses-dev/components": "^0.53.0-beta.1",
+    "@perses-dev/core": "^0.53.0-beta.1",
+    "@perses-dev/plugin-system": "^0.53.0-beta.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",