@perses-dev/table-plugin 0.6.0

package/lib/CellsEditor/CellEditor.js

@@ -0,0 +1,372 @@
+// Copyright 2024 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 { IconButton, MenuItem, Stack, TextField, Tooltip, Typography, Grid2 as Grid } from '@mui/material';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { OptionsColorPicker } from '@perses-dev/components';
+import PlusIcon from 'mdi-material-ui/Plus';
+function ConditionEditor({ condition, onChange, ...props }) {
+    if (condition.kind === 'Value') {
+        return /*#__PURE__*/ _jsx(Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: /*#__PURE__*/ _jsx(TextField, {
+                label: "Value",
+                placeholder: "Exact value",
+                value: condition.spec?.value ?? '',
+                onChange: (e)=>onChange({
+                        ...condition,
+                        spec: {
+                            value: e.target.value
+                        }
+                    }),
+                fullWidth: true
+            })
+        });
+    } else if (condition.kind === 'Range') {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: [
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "From",
+                    placeholder: "Start of range",
+                    value: condition.spec?.min ?? '',
+                    onChange: (e)=>onChange({
+                            ...condition,
+                            spec: {
+                                ...condition.spec,
+                                min: +e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "To",
+                    placeholder: "End of range (inclusive)",
+                    value: condition.spec?.max ?? '',
+                    onChange: (e)=>onChange({
+                            ...condition,
+                            spec: {
+                                ...condition.spec,
+                                max: +e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            ]
+        });
+    } else if (condition.kind === 'Regex') {
+        return /*#__PURE__*/ _jsx(Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: /*#__PURE__*/ _jsx(TextField, {
+                label: "Regular Expression",
+                placeholder: "JavaScript regular expression",
+                value: condition.spec?.expr ?? '',
+                onChange: (e)=>onChange({
+                        ...condition,
+                        spec: {
+                            expr: e.target.value
+                        }
+                    }),
+                fullWidth: true
+            })
+        });
+    } else if (condition.kind === 'Misc') {
+        return /*#__PURE__*/ _jsx(Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: /*#__PURE__*/ _jsxs(TextField, {
+                select: true,
+                label: "Value",
+                value: condition.spec?.value ?? '',
+                onChange: (e)=>onChange({
+                        ...condition,
+                        spec: {
+                            value: e.target.value
+                        }
+                    }),
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "empty",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Empty"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches empty string"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "null",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Null"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches null or undefined"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "NaN",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "NaN"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches Not a Number value"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "true",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "True"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches true boolean"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "false",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "False"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches false boolean"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    }
+    return null;
+}
+export function CellEditor({ cell, onChange, onDelete, ...props }) {
+    return /*#__PURE__*/ _jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 5
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    gap: 1,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ _jsxs(TextField, {
+                            select: true,
+                            label: "Type",
+                            value: cell.condition.kind,
+                            onChange: (e)=>onChange({
+                                    ...cell,
+                                    condition: {
+                                        kind: e.target.value
+                                    }
+                                }),
+                            required: true,
+                            sx: {
+                                width: '120px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Value",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Value"
+                                            }),
+                                            cell.condition.kind !== 'Value' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches an exact text value"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Range",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Range"
+                                            }),
+                                            cell.condition.kind !== 'Range' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a numerical range"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Regex",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Regex"
+                                            }),
+                                            cell.condition.kind !== 'Regex' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a regular expression"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Misc",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Misc"
+                                            }),
+                                            cell.condition.kind !== 'Misc' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches against empty, null and NaN values"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ConditionEditor, {
+                            width: "100%",
+                            condition: cell.condition,
+                            onChange: (updatedCondition)=>onChange({
+                                    ...cell,
+                                    condition: updatedCondition
+                                })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 4
+                },
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    label: "Display text",
+                    value: cell.text,
+                    onChange: (e)=>onChange({
+                            ...cell,
+                            text: e.target.value
+                        }),
+                    fullWidth: true
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ _jsx(Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    gap: 1,
+                    children: cell.textColor ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                        label: "Text Color",
+                        color: cell.textColor ?? '#000',
+                        onColorChange: (color)=>onChange({
+                                ...cell,
+                                textColor: color
+                            }),
+                        onClear: ()=>onChange({
+                                ...cell,
+                                textColor: undefined
+                            })
+                    }) : /*#__PURE__*/ _jsx(IconButton, {
+                        onClick: ()=>onChange({
+                                ...cell,
+                                textColor: '#000'
+                            }),
+                        children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ _jsx(Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    children: cell.backgroundColor ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                        label: "Background Color",
+                        color: cell.backgroundColor ?? '#fff',
+                        onColorChange: (color)=>onChange({
+                                ...cell,
+                                backgroundColor: color
+                            }),
+                        onClear: ()=>onChange({
+                                ...cell,
+                                backgroundColor: undefined
+                            })
+                    }) : /*#__PURE__*/ _jsx(IconButton, {
+                        onClick: ()=>onChange({
+                                ...cell,
+                                backgroundColor: '#000'
+                            }),
+                        children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 1
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ _jsx(Tooltip, {
+                    title: "Remove cell settings",
+                    placement: "top",
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                    }, "delete-cell-button")
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=CellEditor.js.map

package/lib/CellsEditor/CellEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/CellsEditor/CellEditor.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 {\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 { OptionsColorPicker } from '@perses-dev/components';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ReactElement } from 'react';\nimport { CellSettings, Condition } from '../table-model';\n\ninterface ConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  condition: Condition;\n  onChange: (condition: Condition) => void;\n}\n\nfunction ConditionEditor({ condition, onChange, ...props }: ConditionEditorProps): ReactElement | null {\n  if (condition.kind === 'Value') {\n    return (\n      <Stack gap={1} direction=\"row\" {...props}>\n        <TextField\n          label=\"Value\"\n          placeholder=\"Exact value\"\n          value={condition.spec?.value ?? ''}\n          onChange={(e) => onChange({ ...condition, spec: { value: e.target.value } } as Condition)}\n          fullWidth\n        />\n      </Stack>\n    );\n  } else if (condition.kind === 'Range') {\n    return (\n      <Stack gap={1} direction=\"row\" {...props}>\n        <TextField\n          label=\"From\"\n          placeholder=\"Start of range\"\n          value={condition.spec?.min ?? ''}\n          onChange={(e) => onChange({ ...condition, spec: { ...condition.spec, min: +e.target.value } } as Condition)}\n          fullWidth\n        />\n        <TextField\n          label=\"To\"\n          placeholder=\"End of range (inclusive)\"\n          value={condition.spec?.max ?? ''}\n          onChange={(e) => onChange({ ...condition, spec: { ...condition.spec, max: +e.target.value } } as Condition)}\n          fullWidth\n        />\n      </Stack>\n    );\n  } else if (condition.kind === 'Regex') {\n    return (\n      <Stack gap={1} direction=\"row\" {...props}>\n        <TextField\n          label=\"Regular Expression\"\n          placeholder=\"JavaScript regular expression\"\n          value={condition.spec?.expr ?? ''}\n          onChange={(e) => onChange({ ...condition, spec: { expr: e.target.value } } as Condition)}\n          fullWidth\n        />\n      </Stack>\n    );\n  } else if (condition.kind === 'Misc') {\n    return (\n      <Stack gap={1} direction=\"row\" {...props}>\n        <TextField\n          select\n          label=\"Value\"\n          value={condition.spec?.value ?? ''}\n          onChange={(e) => onChange({ ...condition, spec: { value: e.target.value } } as Condition)}\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  }\n  return null;\n}\n\nexport interface CellEditorProps extends Omit<GridProps, 'onChange'> {\n  cell: CellSettings;\n  onChange: (cell: CellSettings) => void;\n  onDelete: () => void;\n}\n\nexport function CellEditor({ cell, onChange, onDelete, ...props }: CellEditorProps): ReactElement {\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={cell.condition.kind}\n            onChange={(e) => onChange({ ...cell, condition: { kind: e.target.value } } as CellSettings)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {cell.condition.kind !== 'Value' && (\n                  <Typography variant=\"caption\">Matches an exact text value</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {cell.condition.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                {cell.condition.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                {cell.condition.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            condition={cell.condition}\n            onChange={(updatedCondition) => onChange({ ...cell, condition: updatedCondition })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={cell.text}\n          onChange={(e) => onChange({ ...cell, text: e.target.value })}\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {cell.textColor ? (\n            <OptionsColorPicker\n              label=\"Text Color\"\n              color={cell.textColor ?? '#000'}\n              onColorChange={(color) => onChange({ ...cell, textColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, textColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, textColor: '#000' })}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\">\n          {cell.backgroundColor ? (\n            <OptionsColorPicker\n              label=\"Background Color\"\n              color={cell.backgroundColor ?? '#fff'}\n              onColorChange={(color) => onChange({ ...cell, backgroundColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, backgroundColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, backgroundColor: '#000' })}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove cell settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-cell-button\">\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n}\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","OptionsColorPicker","PlusIcon","ConditionEditor","condition","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","min","max","expr","select","variant","CellEditor","cell","onDelete","container","spacing","size","xs","width","required","sx","updatedCondition","text","justifyContent","textColor","color","onColorChange","onClear","undefined","onClick","backgroundColor","textAlign","title","placement","marginLeft"],"mappings":"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"}

package/lib/CellsEditor/CellsEditor.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { CellSettings } from '../table-model';
+export interface CellsEditorProps {
+    cellSettings: CellSettings[];
+    onChange: (cellOptions: CellSettings[]) => void;
+}
+export declare function CellsEditor({ cellSettings, onChange }: CellsEditorProps): ReactElement;
+//# sourceMappingURL=CellsEditor.d.ts.map

package/lib/CellsEditor/CellsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellsEditor.d.ts","sourceRoot":"","sources":["../../../src/CellsEditor/CellsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAoDtF"}

package/lib/CellsEditor/CellsEditor.js

@@ -0,0 +1,123 @@
+// Copyright 2024 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 { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';
+import AddIcon from 'mdi-material-ui/Plus';
+import { CellEditor } from './CellEditor';
+export function CellsEditor({ cellSettings, onChange }) {
+    function handleCellChange(index, cell) {
+        const updatedCells = [
+            ...cellSettings
+        ];
+        updatedCells[index] = cell;
+        onChange(updatedCells);
+    }
+    function handleAddCellEditor() {
+        const updatedCells = [
+            ...cellSettings
+        ];
+        updatedCells.push({
+            condition: {
+                kind: 'Value',
+                spec: {
+                    value: ''
+                }
+            }
+        });
+        onChange(updatedCells);
+    }
+    function handleCellDelete(index) {
+        const updatedCells = [
+            ...cellSettings
+        ];
+        updatedCells.splice(index, 1);
+        onChange(updatedCells);
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Grid, {
+                container: true,
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 5
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Condition"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 4
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Display Text"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        },
+                        textAlign: "center",
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Color"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        },
+                        textAlign: "center",
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Background"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                gap: 1.5,
+                divider: /*#__PURE__*/ _jsx(Divider, {
+                    flexItem: true,
+                    orientation: "horizontal"
+                }),
+                children: cellSettings.map((cell, i)=>/*#__PURE__*/ _jsx(CellEditor, {
+                        cell: cell,
+                        onChange: (updatedCell)=>handleCellChange(i, updatedCell),
+                        onDelete: ()=>handleCellDelete(i)
+                    }, i))
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                sx: {
+                    marginTop: 1
+                },
+                onClick: handleAddCellEditor,
+                children: "Add Cell Settings"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=CellsEditor.js.map

package/lib/CellsEditor/CellsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/CellsEditor/CellsEditor.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 { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';\n\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ReactElement } from 'react';\nimport { CellSettings } from '../table-model';\nimport { CellEditor } from './CellEditor';\n\nexport interface CellsEditorProps {\n  cellSettings: CellSettings[];\n  onChange: (cellOptions: CellSettings[]) => void;\n}\n\nexport function CellsEditor({ cellSettings, onChange }: CellsEditorProps): ReactElement {\n  function handleCellChange(index: number, cell: CellSettings): void {\n    const updatedCells = [...cellSettings];\n    updatedCells[index] = cell;\n    onChange(updatedCells);\n  }\n\n  function handleAddCellEditor(): void {\n    const updatedCells = [...cellSettings];\n    updatedCells.push({ condition: { kind: 'Value', spec: { value: '' } } });\n    onChange(updatedCells);\n  }\n\n  function handleCellDelete(index: number): void {\n    const updatedCells = [...cellSettings];\n    updatedCells.splice(index, 1);\n    onChange(updatedCells);\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 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Background</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {cellSettings.map((cell, i) => (\n          <CellEditor\n            key={i}\n            cell={cell}\n            onChange={(updatedCell: CellSettings) => handleCellChange(i, updatedCell)}\n            onDelete={() => handleCellDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddCellEditor}>\n        Add Cell Settings\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","AddIcon","CellEditor","CellsEditor","cellSettings","onChange","handleCellChange","index","cell","updatedCells","handleAddCellEditor","push","condition","kind","spec","value","handleCellDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedCell","onDelete","startIcon","sx","marginTop","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,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAElF,OAAOC,aAAa,uBAAuB;AAG3C,SAASC,UAAU,QAAQ,eAAe;AAO1C,OAAO,SAASC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAoB;IACtE,SAASC,iBAAiBC,KAAa,EAAEC,IAAkB;QACzD,MAAMC,eAAe;eAAIL;SAAa;QACtCK,YAAY,CAACF,MAAM,GAAGC;QACtBH,SAASI;IACX;IAEA,SAASC;QACP,MAAMD,eAAe;eAAIL;SAAa;QACtCK,aAAaE,IAAI,CAAC;YAAEC,WAAW;gBAAEC,MAAM;gBAASC,MAAM;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QACtEV,SAASI;IACX;IAEA,SAASO,iBAAiBT,KAAa;QACrC,MAAME,eAAe;eAAIL;SAAa;QACtCK,aAAaQ,MAAM,CAACV,OAAO;QAC3BF,SAASI;IACX;IAEA,qBACE,MAACZ;QAAMqB,SAAS;;0BACd,MAAClB;gBAAKmB,SAAS;gBAACD,SAAS;;kCACvB,KAAClB;wBAAKoB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAACvB;4BAAWwB,SAAQ;sCAAY;;;kCAElC,KAACtB;wBAAKoB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAACvB;4BAAWwB,SAAQ;sCAAY;;;kCAElC,KAACtB;wBAAKoB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAACzB;4BAAWwB,SAAQ;sCAAY;;;kCAElC,KAACtB;wBAAKoB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAACzB;4BAAWwB,SAAQ;sCAAY;;;kCAElC,KAACtB;wBAAKoB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAACxB;gBAAM2B,KAAK;gBAAKC,uBAAS,KAAC7B;oBAAQ8B,QAAQ;oBAACC,aAAY;;0BACrDvB,aAAawB,GAAG,CAAC,CAACpB,MAAMqB,kBACvB,KAAC3B;wBAECM,MAAMA;wBACNH,UAAU,CAACyB,cAA8BxB,iBAAiBuB,GAAGC;wBAC7DC,UAAU,IAAMf,iBAAiBa;uBAH5BA;;0BAQX,KAAClC;gBAAO2B,SAAQ;gBAAYU,yBAAW,KAAC/B;gBAAYgC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAAqB;;;;AAK9G"}

package/lib/CellsEditor/index.d.ts

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

package/lib/CellsEditor/index.d.ts.map

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

package/lib/CellsEditor/index.js

@@ -0,0 +1,16 @@
+// Copyright 2024 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 './CellEditor';
+export * from './CellsEditor';
+
+//# sourceMappingURL=index.js.map

package/lib/CellsEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/CellsEditor/index.ts"],"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\nexport * from './CellEditor';\nexport * from './CellsEditor';\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,eAAe;AAC7B,cAAc,gBAAgB"}

package/lib/ColumnsEditor/ColumnEditor.d.ts

@@ -0,0 +1,11 @@
+import { StackProps } from '@mui/material';
+import { ReactElement } from 'react';
+import { ColumnSettings } from '../table-model';
+type OmittedMuiProps = 'children' | 'value' | 'onChange';
+export interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {
+    column: ColumnSettings;
+    onChange: (column: ColumnSettings) => void;
+}
+export declare function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement;
+export {};
+//# sourceMappingURL=ColumnEditor.d.ts.map

package/lib/ColumnsEditor/ColumnEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../src/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAuB,UAAU,EAAqB,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAY/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAOhD,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAkK7F"}