@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -11,15 +11,17 @@
 // 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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
 import { useState } from 'react';
+import { useVariableValues } from '@perses-dev/plugin-system';
+import { Dialog } from '@perses-dev/components';
+import { Button } from '@mui/material';
 import { usePanelGroupEditor } from '../../context';
 import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditorForm';
 /**
  * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.
  */ export function PanelGroupDialog() {
     const panelGroupEditor = usePanelGroupEditor();
+    const variables = useVariableValues();
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
     const handleClose = ()=>setIsClosing(true);
@@ -45,33 +47,24 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
         },
         children: panelGroupEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                /*#__PURE__*/ _jsxs(DialogTitle, {
+                /*#__PURE__*/ _jsxs(Dialog.Header, {
                     children: [
                         panelGroupEditor.mode,
                         " Panel Group"
                     ]
                 }),
-                /*#__PURE__*/ _jsx(IconButton, {
-                    "aria-label": "Close",
-                    onClick: panelGroupEditor.close,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(DialogContent, {
+                /*#__PURE__*/ _jsx(Dialog.Content, {
                     dividers: true,
                     sx: {
                         width: '500px'
                     },
                     children: /*#__PURE__*/ _jsx(PanelGroupEditorForm, {
                         initialValues: panelGroupEditor.initialValues,
+                        variables: Object.keys(variables),
                         onSubmit: handleSubmit
                     })
                 }),
-                /*#__PURE__*/ _jsxs(DialogActions, {
+                /*#__PURE__*/ _jsxs(Dialog.Actions, {
                     children: [
                         /*#__PURE__*/ _jsx(Button, {
                             variant: "contained",

package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ReactElement, useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog(): ReactElement {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = (): void => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = (): void => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IAEzB,iHAAiH;IACjH,MAAM,CAACK,WAAWC,aAAa,GAAGP,SAAS;IAC3C,MAAMQ,cAAc,IAAYD,aAAa;IAE7C,iFAAiF;IACjF,MAAME,eAAe;QACnBJ,kBAAkBK;QAClBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASN,qBAAqBO,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIT,qBAAqBO,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAV,iBAAiBW,YAAY,CAACF;QAC9BN;IACF;IAEA,qBACE,KAACd;QAAOuB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DJ,qBAAqBO,2BACpB;;8BACE,MAACjB;;wBAAaU,iBAAiBe,IAAI;wBAAC;;;8BACpC,KAAC3B;oBACC4B,cAAW;oBACXC,SAASjB,iBAAiBK,KAAK;oBAC/Ba,IAAI,CAACC,QAAW,CAAA;4BACdC,UAAU;4BACVC,KAAKF,MAAMG,OAAO,CAAC;4BACnBC,OAAOJ,MAAMG,OAAO,CAAC;wBACvB,CAAA;8BAEA,cAAA,KAAC5B;;8BAEH,KAACH;oBAAciC,QAAQ;oBAACN,IAAI;wBAAEO,OAAO;oBAAQ;8BAC3C,cAAA,KAAC5B;wBAAqB6B,eAAe1B,iBAAiB0B,aAAa;wBAAEC,UAAUnB;;;8BAEjF,MAAChB;;sCACC,KAACC;4BAAOmC,SAAQ;4BAAYC,MAAK;4BAASC,MAAMhC;sCAC7CE,iBAAiBe,IAAI,KAAK,SAAS,UAAU;;sCAEhD,KAACtB;4BAAOmC,SAAQ;4BAAWG,OAAM;4BAAYd,SAASjB,iBAAiBK,KAAK;sCAAE;;;;;;;AAQ1F"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 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, useState } from 'react';\nimport { useVariableValues } from '@perses-dev/plugin-system';\nimport { Dialog } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog(): ReactElement {\n  const panelGroupEditor = usePanelGroupEditor();\n  const variables = useVariableValues();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = (): void => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = (): void => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <Dialog.Header>{panelGroupEditor.mode} Panel Group</Dialog.Header>\n          <Dialog.Content dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm\n              initialValues={panelGroupEditor.initialValues}\n              variables={Object.keys(variables)}\n              onSubmit={handleSubmit}\n            />\n          </Dialog.Content>\n          <Dialog.Actions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["useState","useVariableValues","Dialog","Button","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","variables","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","Header","mode","Content","dividers","sx","width","initialValues","Object","keys","onSubmit","Actions","variant","type","form","color","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IACzB,MAAMK,YAAYR;IAElB,iHAAiH;IACjH,MAAM,CAACS,WAAWC,aAAa,GAAGX,SAAS;IAC3C,MAAMY,cAAc,IAAYD,aAAa;IAE7C,iFAAiF;IACjF,MAAME,eAAe;QACnBL,kBAAkBM;QAClBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASP,qBAAqBQ,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIV,qBAAqBQ,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAX,iBAAiBY,YAAY,CAACF;QAC9BN;IACF;IAEA,qBACE,KAACV;QAAOmB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DL,qBAAqBQ,2BACpB;;8BACE,MAACd,OAAOsB,MAAM;;wBAAEhB,iBAAiBiB,IAAI;wBAAC;;;8BACtC,KAACvB,OAAOwB,OAAO;oBAACC,QAAQ;oBAACC,IAAI;wBAAEC,OAAO;oBAAQ;8BAC5C,cAAA,KAACxB;wBACCyB,eAAetB,iBAAiBsB,aAAa;wBAC7CrB,WAAWsB,OAAOC,IAAI,CAACvB;wBACvBwB,UAAUhB;;;8BAGd,MAACf,OAAOgC,OAAO;;sCACb,KAAC/B;4BAAOgC,SAAQ;4BAAYC,MAAK;4BAASC,MAAM/B;sCAC7CE,iBAAiBiB,IAAI,KAAK,SAAS,UAAU;;sCAEhD,KAACtB;4BAAOgC,SAAQ;4BAAWG,OAAM;4BAAYC,SAAS/B,iBAAiBM,KAAK;sCAAE;;;;;;;AAQ1F"}

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.d.ts

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import { PanelGroupEditorValues } from '../../context';
 export interface PanelGroupEditorFormProps {
     initialValues: PanelGroupEditorValues;
+    variables?: string[];
     onSubmit: (next: PanelGroupEditorValues) => void;
 }
 export declare function PanelGroupEditorForm(props: PanelGroupEditorFormProps): ReactElement;

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelGroupEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAoB,YAAY,EAAY,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,sBAAsB,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CAsCnF;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,4BAA4B,CAAC"}
+{"version":3,"file":"PanelGroupEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAoB,YAAY,EAAY,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA2DnF;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,4BAA4B,CAAC"}

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -12,20 +12,18 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { FormControl, InputLabel, TextField, Select, MenuItem } from '@mui/material';
+import { FormControl, TextField, MenuItem, Typography } from '@mui/material';
 export function PanelGroupEditorForm(props) {
-    const { initialValues, onSubmit } = props;
+    const { initialValues, variables, onSubmit } = props;
     const [title, setTitle] = useState(initialValues.title);
     const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);
-    const handleCollapsedChange = (e)=>{
-        const next = e.target.value;
-        setIsCollapsed(next === 'Closed');
-    };
+    const [repeatVariable, setRepeatVariable] = useState(initialValues.repeatVariable);
     const handleSubmit = (e)=>{
         e.preventDefault();
         onSubmit({
             title,
-            isCollapsed
+            isCollapsed,
+            repeatVariable
         });
     };
     return /*#__PURE__*/ _jsxs("form", {
@@ -40,25 +38,21 @@ export function PanelGroupEditorForm(props) {
                     label: "Name",
                     variant: "outlined",
                     value: title,
-                    onChange: (e)=>setTitle(e.target.value)
+                    onChange: (e)=>setTitle(e.target.value),
+                    "data-testid": "panel-group-editor-name"
                 })
             }),
             /*#__PURE__*/ _jsxs(FormControl, {
                 fullWidth: true,
                 margin: "normal",
                 children: [
-                    /*#__PURE__*/ _jsx(InputLabel, {
-                        id: "select-collapse-state",
-                        children: "Collapse State"
-                    }),
-                    /*#__PURE__*/ _jsxs(Select, {
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
                         required: true,
-                        displayEmpty: true,
-                        labelId: "select-collapse-state",
                         label: "Collapse State",
                         size: "small",
                         value: isCollapsed ? 'Closed' : 'Open',
-                        onChange: handleCollapsedChange,
+                        onChange: (e)=>setIsCollapsed(e.target.value === 'Closed'),
                         children: [
                             /*#__PURE__*/ _jsx(MenuItem, {
                                 value: "Open",
@@ -69,6 +63,32 @@ export function PanelGroupEditorForm(props) {
                                 children: "Closed"
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ _jsx(FormControl, {
+                        fullWidth: true,
+                        margin: "normal",
+                        children: /*#__PURE__*/ _jsxs(TextField, {
+                            select: true,
+                            label: "Repeat Variable",
+                            variant: "outlined",
+                            value: repeatVariable ?? '',
+                            onChange: (e)=>setRepeatVariable(e.target.value === '' ? undefined : e.target.value),
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "",
+                                    children: /*#__PURE__*/ _jsx(Typography, {
+                                        sx: {
+                                            fontStyle: 'italic'
+                                        },
+                                        children: "None"
+                                    })
+                                }),
+                                variables?.sort((a, b)=>a.localeCompare(b)).map((variable)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: variable,
+                                        children: variable
+                                    }, variable))
+                            ]
+                        })
                     })
                 ]
             })

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { FormEventHandler, ReactElement, useState } from 'react';\nimport { FormControl, InputLabel, TextField, Select, SelectProps, MenuItem } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\ntype CollapsedState = 'Open' | 'Closed';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps): ReactElement {\n  const { initialValues, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n\n  const handleCollapsedChange: SelectProps<CollapsedState>['onChange'] = (e) => {\n    const next = e.target.value;\n    setIsCollapsed(next === 'Closed');\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField required label=\"Name\" variant=\"outlined\" value={title} onChange={(e) => setTitle(e.target.value)} />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <InputLabel id=\"select-collapse-state\">Collapse State</InputLabel>\n        <Select<CollapsedState>\n          required\n          displayEmpty\n          labelId=\"select-collapse-state\"\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={handleCollapsedChange}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </Select>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","InputLabel","TextField","Select","MenuItem","PanelGroupEditorForm","props","initialValues","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","handleCollapsedChange","e","next","target","value","handleSubmit","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","onChange","displayEmpty","labelId","size"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAyCA,QAAQ,QAAQ,QAAQ;AACjE,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAeC,QAAQ,QAAQ,gBAAgB;AAUlG,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAE,GAAGF;IAEpC,MAAM,CAACG,OAAOC,SAAS,GAAGX,SAASQ,cAAcE,KAAK;IACtD,MAAM,CAACE,aAAaC,eAAe,GAAGb,SAASQ,cAAcI,WAAW;IAExE,MAAME,wBAAiE,CAACC;QACtE,MAAMC,OAAOD,EAAEE,MAAM,CAACC,KAAK;QAC3BL,eAAeG,SAAS;IAC1B;IAEA,MAAMG,eAAiC,CAACJ;QACtCA,EAAEK,cAAc;QAChBX,SAAS;YAAEC;YAAOE;QAAY;IAChC;IAEA,qBACE,MAACS;QAAKC,IAAIC;QAAwBd,UAAUU;;0BAC1C,KAAClB;gBAAYuB,SAAS;gBAACC,QAAO;0BAC5B,cAAA,KAACtB;oBAAUuB,QAAQ;oBAACC,OAAM;oBAAOC,SAAQ;oBAAWV,OAAOR;oBAAOmB,UAAU,CAACd,IAAMJ,SAASI,EAAEE,MAAM,CAACC,KAAK;;;0BAE5G,MAACjB;gBAAYuB,SAAS;gBAACC,QAAO;;kCAC5B,KAACvB;wBAAWoB,IAAG;kCAAwB;;kCACvC,MAAClB;wBACCsB,QAAQ;wBACRI,YAAY;wBACZC,SAAQ;wBACRJ,OAAM;wBACNK,MAAK;wBACLd,OAAON,cAAc,WAAW;wBAChCiB,UAAUf;;0CAEV,KAACT;gCAASa,OAAM;0CAAO;;0CACvB,KAACb;gCAASa,OAAM;0CAAS;;;;;;;;AAKnC;AAEA;;CAEC,GACD,OAAO,MAAMK,yBAAyB,0BAA0B"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { FormEventHandler, ReactElement, useState } from 'react';\nimport { FormControl, TextField, MenuItem, Typography } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  variables?: string[];\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps): ReactElement {\n  const { initialValues, variables, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n  const [repeatVariable, setRepeatVariable] = useState<string | undefined>(initialValues.repeatVariable);\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed, repeatVariable });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField\n          required\n          label=\"Name\"\n          variant=\"outlined\"\n          value={title}\n          onChange={(e) => setTitle(e.target.value)}\n          data-testid=\"panel-group-editor-name\"\n        />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField\n          select\n          required\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={(e) => setIsCollapsed(e.target.value === 'Closed')}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </TextField>\n        <FormControl fullWidth margin=\"normal\">\n          <TextField\n            select\n            label=\"Repeat Variable\"\n            variant=\"outlined\"\n            value={repeatVariable ?? ''}\n            onChange={(e) => setRepeatVariable(e.target.value === '' ? undefined : e.target.value)}\n          >\n            <MenuItem value=\"\">\n              <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n            </MenuItem>\n            {variables\n              ?.sort((a, b) => a.localeCompare(b))\n              .map((variable) => (\n                <MenuItem key={variable} value={variable}>\n                  {variable}\n                </MenuItem>\n              ))}\n          </TextField>\n        </FormControl>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","TextField","MenuItem","Typography","PanelGroupEditorForm","props","initialValues","variables","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","repeatVariable","setRepeatVariable","handleSubmit","e","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","value","onChange","target","data-testid","select","size","undefined","sx","fontStyle","sort","a","b","localeCompare","map","variable"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAyCA,QAAQ,QAAQ,QAAQ;AACjE,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,gBAAgB;AAS7E,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,aAAa,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGH;IAE/C,MAAM,CAACI,OAAOC,SAAS,GAAGX,SAASO,cAAcG,KAAK;IACtD,MAAM,CAACE,aAAaC,eAAe,GAAGb,SAASO,cAAcK,WAAW;IACxE,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGf,SAA6BO,cAAcO,cAAc;IAErG,MAAME,eAAiC,CAACC;QACtCA,EAAEC,cAAc;QAChBT,SAAS;YAAEC;YAAOE;YAAaE;QAAe;IAChD;IAEA,qBACE,MAACK;QAAKC,IAAIC;QAAwBZ,UAAUO;;0BAC1C,KAACf;gBAAYqB,SAAS;gBAACC,QAAO;0BAC5B,cAAA,KAACrB;oBACCsB,QAAQ;oBACRC,OAAM;oBACNC,SAAQ;oBACRC,OAAOjB;oBACPkB,UAAU,CAACX,IAAMN,SAASM,EAAEY,MAAM,CAACF,KAAK;oBACxCG,eAAY;;;0BAGhB,MAAC7B;gBAAYqB,SAAS;gBAACC,QAAO;;kCAC5B,MAACrB;wBACC6B,MAAM;wBACNP,QAAQ;wBACRC,OAAM;wBACNO,MAAK;wBACLL,OAAOf,cAAc,WAAW;wBAChCgB,UAAU,CAACX,IAAMJ,eAAeI,EAAEY,MAAM,CAACF,KAAK,KAAK;;0CAEnD,KAACxB;gCAASwB,OAAM;0CAAO;;0CACvB,KAACxB;gCAASwB,OAAM;0CAAS;;;;kCAE3B,KAAC1B;wBAAYqB,SAAS;wBAACC,QAAO;kCAC5B,cAAA,MAACrB;4BACC6B,MAAM;4BACNN,OAAM;4BACNC,SAAQ;4BACRC,OAAOb,kBAAkB;4BACzBc,UAAU,CAACX,IAAMF,kBAAkBE,EAAEY,MAAM,CAACF,KAAK,KAAK,KAAKM,YAAYhB,EAAEY,MAAM,CAACF,KAAK;;8CAErF,KAACxB;oCAASwB,OAAM;8CACd,cAAA,KAACvB;wCAAW8B,IAAI;4CAAEC,WAAW;wCAAS;kDAAG;;;gCAE1C3B,WACG4B,KAAK,CAACC,GAAGC,IAAMD,EAAEE,aAAa,CAACD,IAChCE,IAAI,CAACC,yBACJ,KAACtC;wCAAwBwB,OAAOc;kDAC7BA;uCADYA;;;;;;;;AAS/B;AAEA;;CAEC,GACD,OAAO,MAAMpB,yBAAyB,0BAA0B"}

package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { QueryDefinition } from '@perses-dev/core';
+export interface QueryViewerDialogProps {
+    open: boolean;
+    queryDefinitions: QueryDefinition[];
+    onClose: () => void;
+}
+export declare function QueryViewerDialog({ open, queryDefinitions, onClose }: QueryViewerDialogProps): ReactElement;
+//# sourceMappingURL=QueryViewerDialog.d.ts.map

package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryViewerDialog.d.ts","sourceRoot":"","sources":["../../../src/components/QueryViewerDialog/QueryViewerDialog.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAmC3G"}

package/dist/components/QueryViewerDialog/QueryViewerDialog.js

@@ -0,0 +1,72 @@
+// 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, { useMemo } from 'react';
+import { Dialog } from '@perses-dev/components';
+import { Button, Divider } from '@mui/material';
+import { PluginSpecEditor } from '@perses-dev/plugin-system';
+export function QueryViewerDialog({ open, queryDefinitions, onClose }) {
+    const queryRows = useMemo(()=>{
+        if (!queryDefinitions?.length) return null;
+        const queryItems = [];
+        queryDefinitions.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queryDefinitions.length - 1 && /*#__PURE__*/ _jsx(Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queryDefinitions
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: open,
+        onClose: onClose,
+        maxWidth: "lg",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(Dialog.Header, {
+                children: "Query Viewer"
+            }),
+            /*#__PURE__*/ _jsx(Dialog.Content, {
+                children: queryRows
+            }),
+            /*#__PURE__*/ _jsx(Dialog.Actions, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "outlined",
+                    color: "secondary",
+                    onClick: onClose,
+                    children: "Close"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=QueryViewerDialog.js.map

package/dist/components/QueryViewerDialog/QueryViewerDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/QueryViewerDialog/QueryViewerDialog.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, { ReactElement, useMemo } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { Button, Divider } from '@mui/material';\nimport { PluginSpecEditor } from '@perses-dev/plugin-system';\nimport { QueryDefinition } from '@perses-dev/core';\n\nexport interface QueryViewerDialogProps {\n  open: boolean;\n  queryDefinitions: QueryDefinition[];\n  onClose: () => void;\n}\n\nexport function QueryViewerDialog({ open, queryDefinitions, onClose }: QueryViewerDialogProps): ReactElement {\n  const queryRows = useMemo(() => {\n    if (!queryDefinitions?.length) return null;\n\n    const queryItems: ReactElement[] = [];\n    queryDefinitions.forEach((query, index) => {\n      if (query?.spec?.plugin?.kind && query?.kind) {\n        queryItems.push(\n          <React.Fragment key={`query-${index}`}>\n            <PluginSpecEditor\n              value={query.spec.plugin.spec}\n              pluginSelection={{ kind: query.spec.plugin.kind, type: query.kind }}\n              onChange={(): void => {}}\n              isReadonly\n            />\n            {index < queryDefinitions.length - 1 && <Divider sx={{ my: 2 }} />}\n          </React.Fragment>\n        );\n      }\n    });\n\n    return queryItems;\n  }, [queryDefinitions]);\n\n  return (\n    <Dialog open={open} onClose={onClose} maxWidth=\"lg\" fullWidth={true}>\n      <Dialog.Header>Query Viewer</Dialog.Header>\n      <Dialog.Content>{queryRows}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onClose}>\n          Close\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n}\n"],"names":["React","useMemo","Dialog","Button","Divider","PluginSpecEditor","QueryViewerDialog","open","queryDefinitions","onClose","queryRows","length","queryItems","forEach","query","index","spec","plugin","kind","push","Fragment","value","pluginSelection","type","onChange","isReadonly","sx","my","maxWidth","fullWidth","Header","Content","Actions","variant","color","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAuBC,OAAO,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,EAAEC,OAAO,QAAQ,gBAAgB;AAChD,SAASC,gBAAgB,QAAQ,4BAA4B;AAS7D,OAAO,SAASC,kBAAkB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,OAAO,EAA0B;IAC3F,MAAMC,YAAYT,QAAQ;QACxB,IAAI,CAACO,kBAAkBG,QAAQ,OAAO;QAEtC,MAAMC,aAA6B,EAAE;QACrCJ,iBAAiBK,OAAO,CAAC,CAACC,OAAOC;YAC/B,IAAID,OAAOE,MAAMC,QAAQC,QAAQJ,OAAOI,MAAM;gBAC5CN,WAAWO,IAAI,eACb,MAACnB,MAAMoB,QAAQ;;sCACb,KAACf;4BACCgB,OAAOP,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;4BAC7BM,iBAAiB;gCAAEJ,MAAMJ,MAAME,IAAI,CAACC,MAAM,CAACC,IAAI;gCAAEK,MAAMT,MAAMI,IAAI;4BAAC;4BAClEM,UAAU,KAAa;4BACvBC,UAAU;;wBAEXV,QAAQP,iBAAiBG,MAAM,GAAG,mBAAK,KAACP;4BAAQsB,IAAI;gCAAEC,IAAI;4BAAE;;;mBAP1C,CAAC,MAAM,EAAEZ,OAAO;YAUzC;QACF;QAEA,OAAOH;IACT,GAAG;QAACJ;KAAiB;IAErB,qBACE,MAACN;QAAOK,MAAMA;QAAME,SAASA;QAASmB,UAAS;QAAKC,WAAW;;0BAC7D,KAAC3B,OAAO4B,MAAM;0BAAC;;0BACf,KAAC5B,OAAO6B,OAAO;0BAAErB;;0BACjB,KAACR,OAAO8B,OAAO;0BACb,cAAA,KAAC7B;oBAAO8B,SAAQ;oBAAWC,OAAM;oBAAYC,SAAS1B;8BAAS;;;;;AAMvE"}

package/dist/components/QueryViewerDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './QueryViewerDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/QueryViewerDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QueryViewerDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC"}

package/dist/components/QueryViewerDialog/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './QueryViewerDialog';
+
+//# sourceMappingURL=index.js.map

package/dist/components/QueryViewerDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/QueryViewerDialog/index.ts"],"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\nexport * from './QueryViewerDialog';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,sBAAsB"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAO/C,eAAO,MAAM,6BAA6B,QAAO,YAqEhD,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YAqEhD,CAAC"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -14,9 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
 import { useTimeRange } from '@perses-dev/plugin-system';
-import { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';
+import { isRelativeTimeRange } from '@perses-dev/core';
 import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
+const SAVE_DEFAULTS_DIALOG_TEXT = 'You have made changes to the time range or the variables values. Would you like to save these as defaults?';
 export const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,EAAEC,yBAAyB,QAAQ,mBAAmB;AAClF,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGJ;IAClD,MAAMK,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGV;IACpC,MAAM,EAAEW,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,sBAAsB;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACtB;QAAOuB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAACf,OAAOwB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC1B,OAAO2B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI9B;;sCACpD,MAACL;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACpB,OAAOqC,OAAO;;sCACb,KAACrC,OAAOsC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACV,OAAOyC,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,MAAMC,4BACJ;AAEF,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGL;IAClD,MAAMM,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGX;IACpC,MAAM,EAAEY,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,sBAAsB;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACvB;QAAOwB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAAChB,OAAOyB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC3B,OAAO4B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI3B;;sCACpD,MAACR;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACrB,OAAOsC,OAAO;;sCACb,KAACtC,OAAOuC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACX,OAAO0C,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { VariableOption } from '@perses-dev/plugin-system';
+export interface ListVariableListBoxContextValue {
+    options: VariableOption[];
+    selectedOptions: VariableOption[];
+    filteredOptions: VariableOption[];
+    allowAllValue: boolean;
+    onChange: (selectedOptions: VariableOption[]) => void;
+}
+export declare function useListVariableListBoxContext(): ListVariableListBoxContextValue;
+export declare function ListVariableListBoxProvider({ value, children, }: {
+    value: ListVariableListBoxContextValue;
+    children: ReactNode;
+}): React.ReactElement;
+export declare const ListVariableListBox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=ListVariableListBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListVariableListBox.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/ListVariableListBox.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAgC,SAAS,EAAmC,MAAM,OAAO,CAAC;AAExG,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACvD;AAID,wBAAgB,6BAA6B,IAAI,+BAA+B,CAI/E;AAmED,wBAAgB,2BAA2B,CAAC,EAC1C,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,+BAA+B,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,KAAK,CAAC,YAAY,CAErB;AAED,eAAO,MAAM,mBAAmB,iHA0C9B,CAAC"}

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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAkDC,UAAU,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AACxG,SAASC,QAAQ,EAAEC,OAAO,QAAQ,gBAAgB;AAElD,SAASC,iBAAiB,QAAQ,mBAAmB;AAUrD,MAAMC,2CAA6BP,MAAMQ,aAAa,CAA8CC;AAEpG,OAAO,SAASC;IACd,MAAMC,MAAMT,WAAWK;IACvB,IAAI,CAACI,KAAK,MAAM,IAAIC,MAAM;IAC1B,OAAOD;AACT;AAEA;;;;;;;;;;;;;CAaC,GACD,SAASE,yBACPC,OAAyB,EACzBC,eAAiC,EACjCC,eAAiC,EACjCC,eAAwB,EACxBC,aAAsB,EACtBC,aAAsB,EACtBC,QAAqD;IAErD,IAAIF,eAAe;QACjB,IAAIF,gBAAgBK,MAAM,KAAKP,QAAQO,MAAM,EAAE;YAC7CD,SAASL,gBAAgBO,MAAM,CAAC,CAACC,IAAM,CAACP,gBAAgBQ,QAAQ,CAACD;QACnE,OAAO;YACLH,SAAS,EAAE;QACb;QACA;IACF;IAEA,IAAIH,iBAAiB;QACnB,IAAIE,eAAe;YACjB,IAAIH,gBAAgBK,MAAM,KAAKP,QAAQO,MAAM,EAAE;gBAC7C,IAAIN,eAAe,CAAC,EAAE,EAAEU,UAAUnB,mBAAmB;oBACnDc,SAASN,QAAQQ,MAAM,CAAC,CAACC,IAAMA,EAAEE,KAAK,KAAKnB;gBAC7C,OAAO;oBACLc,SAAS;wBAAC;4BAAEM,OAAOpB;4BAAmBmB,OAAOnB;wBAAkB;qBAAE;gBACnE;YACF,OAAO;gBACL,IAAIU,gBAAgBW,KAAK,CAAC,CAACJ,IAAMR,gBAAgBS,QAAQ,CAACD,KAAK;oBAC7DH,SAASL,gBAAgBO,MAAM,CAAC,CAACC,IAAM,CAACP,gBAAgBQ,QAAQ,CAACD;gBACnE,OAAO;oBACLH,SAAS;2BAAIL;2BAAoBC,gBAAgBM,MAAM,CAAC,CAACC,IAAMA,EAAEE,KAAK,KAAKnB;qBAAmB;gBAChG;YACF;QACF,OAAO;YACL,IAAIU,gBAAgBK,MAAM,KAAKP,QAAQO,MAAM,EAAE;gBAC7CD,SAASN;YACX,OAAO;gBACL,IAAIE,gBAAgBW,KAAK,CAAC,CAACJ,IAAMR,gBAAgBS,QAAQ,CAACD,KAAK;oBAC7DH,SAASL,gBAAgBO,MAAM,CAAC,CAACC,IAAM,CAACP,gBAAgBQ,QAAQ,CAACD;gBACnE,OAAO;oBACLH,SAAS;2BAAIL;2BAAoBC;qBAAgB;gBACnD;YACF;QACF;QACA;IACF;IAEA,+CAA+C;IAC/CI,SAASJ;AACX;AAEA,OAAO,SAASY,4BAA4B,EAC1CH,KAAK,EACLI,QAAQ,EAIT;IACC,qBAAO,KAACtB,2BAA2BuB,QAAQ;QAACL,OAAOA;kBAAQI;;AAC7D;AAEA,OAAO,MAAME,oCAAsB9B,WAAW,SAAS8B,oBACrDC,KAAuC,EACvCC,GAAmC;IAEnC,MAAM,EAAEJ,QAAQ,EAAE,GAAGK,MAAM,GAAGF;IAC9B,MAAM,EAAElB,OAAO,EAAEC,eAAe,EAAEC,eAAe,EAAEG,aAAa,EAAEC,QAAQ,EAAE,GAAGV;IAE/E,wDAAwD;IACxD,MAAMyB,gBAAgBhC,QAAQ,IAAMY,gBAAgBM,MAAM,EAAE;QAACN;KAAgB;IAC7E,MAAME,kBAAkBd,QACtB,IAAMW,QAAQO,MAAM,GAAG,KAAKc,gBAAgB,KAAKA,kBAAkBrB,QAAQO,MAAM,EACjF;QAACc;QAAerB;KAAQ;IAE1B,MAAMI,gBAAgBf,QAAQ,IAAMW,QAAQO,MAAM,GAAG,KAAKc,kBAAkBrB,QAAQO,MAAM,EAAE;QAACc;QAAerB;KAAQ;IAEpH,qBACE,MAACsB;QAAI,GAAGF,IAAI;QAAED,KAAKA;QAAKI,MAAK;;0BAC3B,MAACC;gBAAGC,OAAO;oBAAEC,SAAS;oBAAQC,YAAY;gBAAS;;kCACjD,KAACrC;wBACCsC,eAAezB;wBACf0B,SAASzB;wBACT,mFAAmF;wBACnFE,UAAU,IACRP,yBACEC,SACAC,iBACAC,iBACAC,iBACAC,eACAC,eACAC;;kCAIN,MAACwB;;0CACC,KAACC;0CAAQV;;4BAAuB;;;;;0BAGpC,KAAC9B;YACAwB;;;AAGP,GAAG"}

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"}