@perses-dev/components 0.54.0-beta.1 → 0.54.0-beta.2

package/dist/TransformsEditor/TransformsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TransformsEditor/TransformsEditor.tsx"],"sourcesContent":["// Copyright 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 { Button, Stack, StackProps } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Transform } from '../model';\nimport { TransformEditorContainer } from './TransformEditorContainer';\n\nexport interface TransformsEditorProps extends Omit<StackProps, 'onChange'> {\n  value: Transform[];\n  onChange: (transforms: Transform[]) => void;\n}\n\nexport function TransformsEditor({ value, onChange, ...props }: TransformsEditorProps): ReactElement {\n  const [transformsCollapsed, setTransformsCollapsed] = useState(value.map(() => true));\n\n  function handleTransformChange(index: number, transform: Transform): void {\n    const updatedTransforms = [...value];\n    updatedTransforms[index] = transform;\n    onChange(updatedTransforms);\n  }\n\n  function handleTransformAdd(): void {\n    const updatedTransforms = [...value];\n    // @ts-expect-error: Unknown transform\n    updatedTransforms.push({ kind: '', spec: {} });\n    onChange(updatedTransforms);\n    setTransformsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleTransformDelete(index: number): void {\n    const updatedTransforms = [...value];\n    updatedTransforms.splice(index, 1);\n    onChange(updatedTransforms);\n    setTransformsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleTransformCollapseExpand(index: number, collapsed: boolean): void {\n    setTransformsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  return (\n    <Stack gap={1} {...props}>\n      {value.map((transform, i) => (\n        <TransformEditorContainer\n          key={i}\n          index={i}\n          value={transform}\n          isCollapsed={transformsCollapsed[i] ?? true}\n          onChange={(updatedTransform: Transform) => handleTransformChange(i, updatedTransform)}\n          onDelete={() => handleTransformDelete(i)}\n          onCollapse={(collapsed) => handleTransformCollapseExpand(i, collapsed)}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleTransformAdd}>\n        Add Transformation\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","useState","AddIcon","TransformEditorContainer","TransformsEditor","value","onChange","props","transformsCollapsed","setTransformsCollapsed","map","handleTransformChange","index","transform","updatedTransforms","handleTransformAdd","push","kind","spec","prev","handleTransformDelete","splice","handleTransformCollapseExpand","collapsed","gap","i","isCollapsed","updatedTransform","onDelete","onCollapse","variant","startIcon","sx","marginTop","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,KAAK,QAAoB,gBAAgB;AAC1D,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,wBAAwB,QAAQ,6BAA6B;AAOtE,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAA8B;IACnF,MAAM,CAACC,qBAAqBC,uBAAuB,GAAGR,SAASI,MAAMK,GAAG,CAAC,IAAM;IAE/E,SAASC,sBAAsBC,KAAa,EAAEC,SAAoB;QAChE,MAAMC,oBAAoB;eAAIT;SAAM;QACpCS,iBAAiB,CAACF,MAAM,GAAGC;QAC3BP,SAASQ;IACX;IAEA,SAASC;QACP,MAAMD,oBAAoB;eAAIT;SAAM;QACpC,sCAAsC;QACtCS,kBAAkBE,IAAI,CAAC;YAAEC,MAAM;YAAIC,MAAM,CAAC;QAAE;QAC5CZ,SAASQ;QACTL,uBAAuB,CAACU;YACtBA,KAAKH,IAAI,CAAC;YACV,OAAO;mBAAIG;aAAK;QAClB;IACF;IAEA,SAASC,sBAAsBR,KAAa;QAC1C,MAAME,oBAAoB;eAAIT;SAAM;QACpCS,kBAAkBO,MAAM,CAACT,OAAO;QAChCN,SAASQ;QACTL,uBAAuB,CAACU;YACtBA,KAAKE,MAAM,CAACT,OAAO;YACnB,OAAO;mBAAIO;aAAK;QAClB;IACF;IAEA,SAASG,8BAA8BV,KAAa,EAAEW,SAAkB;QACtEd,uBAAuB,CAACU;YACtBA,IAAI,CAACP,MAAM,GAAGW;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEA,qBACE,MAACnB;QAAMwB,KAAK;QAAI,GAAGjB,KAAK;;YACrBF,MAAMK,GAAG,CAAC,CAACG,WAAWY,kBACrB,KAACtB;oBAECS,OAAOa;oBACPpB,OAAOQ;oBACPa,aAAalB,mBAAmB,CAACiB,EAAE,IAAI;oBACvCnB,UAAU,CAACqB,mBAAgChB,sBAAsBc,GAAGE;oBACpEC,UAAU,IAAMR,sBAAsBK;oBACtCI,YAAY,CAACN,YAAcD,8BAA8BG,GAAGF;mBANvDE;0BAUT,KAAC1B;gBAAO+B,SAAQ;gBAAYC,yBAAW,KAAC7B;gBAAY8B,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASnB;0BAAoB;;;;AAK7G"}
+{"version":3,"sources":["../../src/TransformsEditor/TransformsEditor.tsx"],"sourcesContent":["// Copyright 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 { Button, Stack, StackProps } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Transform } from '../model';\nimport { TransformEditorContainer } from './TransformEditorContainer';\n\nexport interface TransformsEditorProps extends Omit<StackProps, 'onChange'> {\n  value: Transform[];\n  onChange: (transforms: Transform[]) => void;\n}\n\nexport function TransformsEditor({ value, onChange, ...props }: TransformsEditorProps): ReactElement {\n  const [transformsCollapsed, setTransformsCollapsed] = useState(value.map(() => true));\n\n  function handleTransformChange(index: number, transform: Transform): void {\n    const updatedTransforms = [...value];\n    updatedTransforms[index] = transform;\n    onChange(updatedTransforms);\n  }\n\n  function handleTransformAdd(): void {\n    const updatedTransforms = [...value];\n    // @ts-expect-error: Unknown transform\n    updatedTransforms.push({ kind: '', spec: {} });\n    onChange(updatedTransforms);\n    setTransformsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleTransformDelete(index: number): void {\n    const updatedTransforms = [...value];\n    updatedTransforms.splice(index, 1);\n    onChange(updatedTransforms);\n    setTransformsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleTransformCollapseExpand(index: number, collapsed: boolean): void {\n    setTransformsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  return (\n    <Stack gap={1} {...props}>\n      {value.map((transform, i) => (\n        <TransformEditorContainer\n          key={i}\n          index={i}\n          value={transform}\n          isCollapsed={transformsCollapsed[i] ?? true}\n          onChange={(updatedTransform: Transform) => handleTransformChange(i, updatedTransform)}\n          onDelete={() => handleTransformDelete(i)}\n          onCollapse={(collapsed) => handleTransformCollapseExpand(i, collapsed)}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleTransformAdd}>\n        Add Transformation\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","useState","AddIcon","TransformEditorContainer","TransformsEditor","value","onChange","props","transformsCollapsed","setTransformsCollapsed","map","handleTransformChange","index","transform","updatedTransforms","handleTransformAdd","push","kind","spec","prev","handleTransformDelete","splice","handleTransformCollapseExpand","collapsed","gap","i","isCollapsed","updatedTransform","onDelete","onCollapse","variant","startIcon","sx","marginTop","onClick"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,KAAK,QAAoB,gBAAgB;AAC1D,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,wBAAwB,QAAQ,6BAA6B;AAOtE,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAA8B;IACnF,MAAM,CAACC,qBAAqBC,uBAAuB,GAAGR,SAASI,MAAMK,GAAG,CAAC,IAAM;IAE/E,SAASC,sBAAsBC,KAAa,EAAEC,SAAoB;QAChE,MAAMC,oBAAoB;eAAIT;SAAM;QACpCS,iBAAiB,CAACF,MAAM,GAAGC;QAC3BP,SAASQ;IACX;IAEA,SAASC;QACP,MAAMD,oBAAoB;eAAIT;SAAM;QACpC,sCAAsC;QACtCS,kBAAkBE,IAAI,CAAC;YAAEC,MAAM;YAAIC,MAAM,CAAC;QAAE;QAC5CZ,SAASQ;QACTL,uBAAuB,CAACU;YACtBA,KAAKH,IAAI,CAAC;YACV,OAAO;mBAAIG;aAAK;QAClB;IACF;IAEA,SAASC,sBAAsBR,KAAa;QAC1C,MAAME,oBAAoB;eAAIT;SAAM;QACpCS,kBAAkBO,MAAM,CAACT,OAAO;QAChCN,SAASQ;QACTL,uBAAuB,CAACU;YACtBA,KAAKE,MAAM,CAACT,OAAO;YACnB,OAAO;mBAAIO;aAAK;QAClB;IACF;IAEA,SAASG,8BAA8BV,KAAa,EAAEW,SAAkB;QACtEd,uBAAuB,CAACU;YACtBA,IAAI,CAACP,MAAM,GAAGW;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEA,qBACE,MAACnB;QAAMwB,KAAK;QAAI,GAAGjB,KAAK;;YACrBF,MAAMK,GAAG,CAAC,CAACG,WAAWY,kBACrB,KAACtB;oBAECS,OAAOa;oBACPpB,OAAOQ;oBACPa,aAAalB,mBAAmB,CAACiB,EAAE,IAAI;oBACvCnB,UAAU,CAACqB,mBAAgChB,sBAAsBc,GAAGE;oBACpEC,UAAU,IAAMR,sBAAsBK;oBACtCI,YAAY,CAACN,YAAcD,8BAA8BG,GAAGF;mBANvDE;0BAUT,KAAC1B;gBAAO+B,SAAQ;gBAAYC,yBAAW,KAAC7B;gBAAY8B,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASnB;0BAAoB;;;;AAK7G"}

package/dist/ValueMappingEditor/ValueMappingEditor.d.ts

@@ -1,6 +1,6 @@
 import { Grid2Props as GridProps } from '@mui/material';
-import { ValueMapping } from '@perses-dev/core';
 import { FC } from 'react';
+import { ValueMapping } from '../model';
 export interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {
     mapping: ValueMapping;
     onChange: (mapping: ValueMapping) => void;

package/dist/ValueMappingEditor/ValueMappingEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValueMappingEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,UAAU,IAAI,SAAS,EASxB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAqI3B,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC1E,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA2G1D,CAAC"}
+{"version":3,"file":"ValueMappingEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,UAAU,IAAI,SAAS,EASxB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoIxC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC1E,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA2G1D,CAAC"}

package/dist/ValueMappingEditor/ValueMappingEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { IconButton, MenuItem, Stack, TextField, Tooltip, Typography, Grid2 as Grid } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import PlusIcon from 'mdi-material-ui/Plus';

package/dist/ValueMappingEditor/ValueMappingEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"sourcesContent":["// Copyright 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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core'; // TODO\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"mappings":"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"}
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"sourcesContent":["// Copyright 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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { ValueMapping } from '../model';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"mappings":"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"}

package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ValueMapping } from '@perses-dev/core';
+import { ValueMapping } from '../model';
 export interface ValueMappingsEditorProps {
     mappings: ValueMapping[];
     onChange: (valueMappings: ValueMapping[]) => void;

package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValueMappingsEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsD5D,CAAC"}
+{"version":3,"file":"ValueMappingsEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsD5D,CAAC"}

package/dist/ValueMappingEditor/ValueMappingsEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';
 import { useState } from 'react';
 import AddIcon from 'mdi-material-ui/Plus';

package/dist/ValueMappingEditor/ValueMappingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"sourcesContent":["// Copyright 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 { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core'; // TODO\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAClF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"sourcesContent":["// Copyright 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 { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '../model';\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","onClick"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAClF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}

package/dist/YAxisLabel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 export function YAxisLabel({ name, height }) {
     return /*#__PURE__*/ _jsx(Box, {

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 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 { Box, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps): ReactElement {\n  return (\n    <Box\n      style={{\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        top: `calc(${height}px / 2)`,\n      }}\n      sx={{\n        display: 'inline-block',\n        position: 'absolute',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","style","maxWidth","top","sx","display","position","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAQhD,OAAO,SAASC,WAAW,EAAEC,IAAI,EAAEC,MAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,OAAO;YACLC,UAAUF;YACVG,KAAK,CAAC,KAAK,EAAEH,OAAO,OAAO,CAAC;QAC9B;QACAI,IAAI;YACFC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACb;YACCc,SAAQ;YACRC,cAAW;YACXR,IAAI;gBACFS,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAEChB;;;AAIT"}
+{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 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 { Box, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps): ReactElement {\n  return (\n    <Box\n      style={{\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        top: `calc(${height}px / 2)`,\n      }}\n      sx={{\n        display: 'inline-block',\n        position: 'absolute',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","style","maxWidth","top","sx","display","position","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAQhD,OAAO,SAASC,WAAW,EAAEC,IAAI,EAAEC,MAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,OAAO;YACLC,UAAUF;YACVG,KAAK,CAAC,KAAK,EAAEH,OAAO,OAAO,CAAC;QAC9B;QACAI,IAAI;YACFC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACb;YACCc,SAAQ;YACRC,cAAW;YACXR,IAAI;gBACFS,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAEChB;;;AAIT"}

package/dist/cjs/Legend/TableLegend.js

@@ -28,6 +28,7 @@ const COLUMNS = [
         accessorKey: 'label',
         header: 'Name',
         enableSorting: true,
+        enableResizing: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -43,6 +44,8 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
+// This is a rough estimate of value that needs to be subtracted from the total width to avoid horizontal scrolling on initial render
+const TABLE_PADDING = 45;
 function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns = [], sorting, onSortingChange }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
@@ -56,12 +59,23 @@ function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsCh
         items
     ]);
     const columns = (0, _react.useMemo)(()=>{
+        // Calculate column widths to fit the container on initial render, avoiding unnecessary horizontal scrolling.
+        // Falls back to a default width if available width is too small; the user can resize columns as needed.
+        const additionalColumnsLength = additionalColumns?.reduce((colWidth, col)=>{
+            return colWidth + (typeof col.width === 'number' ? col.width : _Table.DEFAULT_COLUMN_WIDTH);
+        }, 0) ?? 0;
+        const availableWidth = Math.max(width - additionalColumnsLength - TABLE_PADDING, _Table.DEFAULT_COLUMN_MIN_WIDTH * COLUMNS.length);
+        const columnWidth = availableWidth / COLUMNS.length;
         return [
-            ...COLUMNS,
+            ...COLUMNS.map((column)=>({
+                    ...column,
+                    width: columnWidth
+                })),
             ...additionalColumns
         ];
     }, [
-        additionalColumns
+        additionalColumns,
+        width
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Table.Table, {
         height: height,

package/dist/cjs/Table/Table.js

@@ -36,9 +36,11 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', getSubRows, hiddenColumns, tableToolbarConfig, ...otherProps }) {
+function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', getSubRows, hiddenColumns, tableToolbarConfig, columnResizeMode = 'onChange', defaultColumnConfig, ...otherProps }) {
     const theme = (0, _material.useTheme)();
-    const { globalFilter, setGlobalFilter, fuzzySearchOptions } = (0, _useFuzzySearch.useFuzzySearch)(tableToolbarConfig?.isSearchEnabled);
+    const hasSubRows = !!getSubRows;
+    const [expanded, setExpanded] = (0, _react.useState)({});
+    const { globalFilter, setGlobalFilter, fuzzySearchOptions } = (0, _useFuzzySearch.useFuzzySearch)(tableToolbarConfig?.isSearchEnabled, tableToolbarConfig?.fuzzyMatchThreshold ?? 'CONTAINS', expanded, setExpanded);
     const [columnVisibility, setColumnVisibility] = (0, _react.useState)(hiddenColumns?.reduce((acc, columnId)=>({
             ...acc,
             [columnId]: false
@@ -93,7 +95,8 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
                     })
                 });
             },
-            enableSorting: false
+            enableSorting: false,
+            enableResizing: false
         };
     }, [
         getItemActions
@@ -122,7 +125,8 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
                     density: density
                 });
             },
-            enableSorting: false
+            enableSorting: false,
+            enableResizing: false
         };
     }, [
         theme.palette.text.primary,
@@ -131,7 +135,7 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         handleCheckboxChange
     ]);
     const tableColumns = (0, _react.useMemo)(()=>{
-        const initTableColumns = (0, _tablemodel.persesColumnsToTanstackColumns)(columns);
+        const initTableColumns = (0, _tablemodel.persesColumnsToTanstackColumns)(columns, defaultColumnConfig);
         if (hasItemActions) {
             initTableColumns.unshift(actionsColumn);
         }
@@ -140,11 +144,12 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         }
         return initTableColumns;
     }, [
-        checkboxColumn,
-        checkboxSelection,
         columns,
+        defaultColumnConfig,
         hasItemActions,
-        actionsColumn
+        checkboxSelection,
+        actionsColumn,
+        checkboxColumn
     ]);
     const table = (0, _reacttable.useReactTable)({
         data,
@@ -161,11 +166,13 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         onSortingChange: handleSortingChange,
         onColumnVisibilityChange: setColumnVisibility,
         getSubRows: getSubRows,
-        getExpandedRowModel: getSubRows ? (0, _reacttable.getExpandedRowModel)() : undefined,
+        getExpandedRowModel: hasSubRows ? (0, _reacttable.getExpandedRowModel)() : undefined,
         ...fuzzySearchOptions,
         // For now, defaulting to sort by descending first. We can expose the ability
         // to customize it if/when we have use cases for it.
         sortDescFirst: true,
+        columnResizeMode,
+        onExpandedChange: setExpanded,
         state: {
             rowSelection,
             sorting,
@@ -173,7 +180,8 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
             columnVisibility,
             ...pagination ? {
                 pagination
-            } : {}
+            } : {},
+            expanded
         }
     });
     const handleRowClick = (0, _react.useCallback)((e, rowId)=>{
@@ -192,6 +200,8 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         onRowClick: handleRowClick,
         rows: table.getRowModel().rows,
         columns: table.getVisibleFlatColumns(),
+        columnSizing: table.getState().columnSizing,
+        columnSizingInfo: table.getState().columnSizingInfo,
         headers: table.getHeaderGroups(),
         cellConfigs: cellConfigs,
         pagination: pagination,
@@ -203,7 +213,10 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
             onGlobalFilterChange: setGlobalFilter,
             isColumnFilterEnabled: tableToolbarConfig?.isColumnFilterEnabled,
             columns: table.getAllColumns(),
-            columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight
+            columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight,
+            isExpandAllEnabled: hasSubRows,
+            isAllExpanded: table.getIsAllRowsExpanded(),
+            onExpandAllChange: table.getToggleAllRowsExpandedHandler()
         }
     });
 }

package/dist/cjs/Table/TableHeaderCell.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "TableHeaderCell", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _TableCell = require("./TableCell");
-function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }) {
+function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, resizeConfig, ...cellProps }) {
     const showSortLabel = !!onSort;
     const headerText = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         noWrap: true,
@@ -34,28 +34,60 @@ function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, .
     });
     const isActive = !!sortDirection;
     const direction = isActive ? sortDirection : nextSortDirection;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_TableCell.TableCell, {
         ...cellProps,
-        children: showSortLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
-            onClick: onSort,
-            direction: direction,
-            active: isActive,
-            sx: {
-                // Overrides a default vertical alignment in the CSS that changes
-                // the header vertical rhythm in a way that's inconsistent with
-                // non-sorting headers.
-                verticalAlign: 'unset',
-                // Makes it possible to ellipsize the text if it's too long.
-                maxWidth: '100%',
-                // Make the arrow visible when focused using the keyboard to assist
-                // with a11y.
-                '&:focus-visible': {
-                    [`& .${_material.tableSortLabelClasses.icon}`]: {
-                        opacity: isActive ? 1 : 0.5
+        children: [
+            showSortLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
+                onClick: onSort,
+                direction: direction,
+                active: isActive,
+                sx: {
+                    // Overrides a default vertical alignment in the CSS that changes
+                    // the header vertical rhythm in a way that's inconsistent with
+                    // non-sorting headers.
+                    verticalAlign: 'unset',
+                    // Makes it possible to ellipsize the text if it's too long.
+                    maxWidth: '100%',
+                    // Make the arrow visible when focused using the keyboard to assist
+                    // with a11y.
+                    '&:focus-visible': {
+                        [`& .${_material.tableSortLabelClasses.icon}`]: {
+                            opacity: isActive ? 1 : 0.5
+                        }
                     }
-                }
-            },
-            children: headerText
-        }) : headerText
+                },
+                children: headerText
+            }) : headerText,
+            resizeConfig && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                onMouseDown: (e)=>{
+                    if (e.detail === 2) {
+                        resizeConfig.resetSizeHandler();
+                        return;
+                    }
+                    resizeConfig.resizeHandler(e);
+                },
+                onTouchStart: resizeConfig.resizeHandler,
+                sx: {
+                    position: 'absolute',
+                    height: '100%',
+                    top: 0,
+                    right: '4px',
+                    cursor: 'col-resize'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    flexItem: true,
+                    orientation: "vertical",
+                    sx: (theme)=>({
+                            backgroundColor: resizeConfig.isResizing ? theme.palette.action.active : theme.palette.divider,
+                            borderRadius: '2px',
+                            borderWidth: '2px',
+                            height: '100%',
+                            touchAction: 'none',
+                            transform: 'translateX(4px)',
+                            userSelect: 'none'
+                        })
+                })
+            })
+        ]
     });
 }

package/dist/cjs/Table/TableToolbar.js

@@ -26,13 +26,15 @@ const _react = require("react");
 const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
 const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _ViewColumn = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ViewColumn"));
+const _UnfoldMoreHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldMoreHorizontal"));
+const _UnfoldLessHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldLessHorizontal"));
 const _controls = require("../controls");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400 }) {
+function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400, isExpandAllEnabled, isAllExpanded, onExpandAllChange }) {
     const [colMenuAnchor, setColMenuAnchor] = (0, _react.useState)(null);
     const colMenuOpen = Boolean(colMenuAnchor);
     const [searchResetKey, setSearchResetKey] = (0, _react.useState)(0);
@@ -42,7 +44,7 @@ function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isC
     }, [
         onGlobalFilterChange
     ]);
-    if (!isSearchEnabled && !isColumnFilterEnabled) {
+    if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {
         return null;
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
@@ -87,6 +89,15 @@ function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isC
                     flexGrow: 1
                 }
             }, searchResetKey),
+            isExpandAllEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                title: isAllExpanded ? 'Collapse all' : 'Expand all',
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    onClick: onExpandAllChange,
+                    color: "info",
+                    "aria-label": isAllExpanded ? 'collapse all rows' : 'expand all rows',
+                    children: isAllExpanded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldLessHorizontal.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldMoreHorizontal.default, {})
+                })
+            }),
             isColumnFilterEnabled && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {