@perses-dev/table-plugin 0.6.0

package/lib/TableSettingsEditor.js

@@ -0,0 +1,108 @@
+// 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { Switch, TextField } from '@mui/material';
+import { DEFAULT_COLUMN_HEIGHT, DEFAULT_COLUMN_WIDTH, DensitySelector, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup } from '@perses-dev/components';
+function DefaultColumnsDimensionsControl({ label, defaultValue, value, onChange }) {
+    function handleAutoSwitchChange(_, checked) {
+        if (checked) {
+            return onChange('auto');
+        }
+        onChange(defaultValue);
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: `Auto Columns ${label}`,
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value === undefined || value === 'auto',
+                    onChange: handleAutoSwitchChange
+                })
+            }),
+            value !== undefined && value !== 'auto' && /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: `Default Columns ${label}`,
+                control: /*#__PURE__*/ _jsx(TextField, {
+                    type: "number",
+                    value: value ?? defaultValue,
+                    InputProps: {
+                        inputProps: {
+                            min: 1,
+                            step: 1
+                        }
+                    },
+                    onChange: (e)=>onChange(parseInt(e.target.value))
+                })
+            })
+        ]
+    });
+}
+export function TableSettingsEditor({ onChange, value }) {
+    function handleDensityChange(density) {
+        onChange({
+            ...value,
+            density: density
+        });
+    }
+    function handlePaginationChange(_event, newValue) {
+        onChange({
+            ...value,
+            pagination: newValue
+        });
+    }
+    function handleAutoWidthChange(newValue) {
+        onChange({
+            ...value,
+            defaultColumnWidth: newValue
+        });
+    }
+    function handleAutoHeightChange(newValue) {
+        onChange({
+            ...value,
+            defaultColumnHeight: newValue
+        });
+    }
+    return /*#__PURE__*/ _jsx(OptionsEditorGrid, {
+        children: /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+            children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                title: "Display",
+                children: [
+                    /*#__PURE__*/ _jsx(DensitySelector, {
+                        value: value.density,
+                        onChange: handleDensityChange
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: "Pagination",
+                        control: /*#__PURE__*/ _jsx(Switch, {
+                            checked: !!value.pagination,
+                            onChange: handlePaginationChange
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DefaultColumnsDimensionsControl, {
+                        label: "Width",
+                        defaultValue: DEFAULT_COLUMN_WIDTH,
+                        value: value.defaultColumnWidth,
+                        onChange: handleAutoWidthChange
+                    }),
+                    /*#__PURE__*/ _jsx(DefaultColumnsDimensionsControl, {
+                        label: "Height",
+                        defaultValue: DEFAULT_COLUMN_HEIGHT,
+                        value: value.defaultColumnHeight,
+                        onChange: handleAutoHeightChange
+                    })
+                ]
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=TableSettingsEditor.js.map

package/lib/TableSettingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TableSettingsEditor.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 { Switch, TextField } from '@mui/material';\nimport {\n  DEFAULT_COLUMN_HEIGHT,\n  DEFAULT_COLUMN_WIDTH,\n  DensitySelector,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  TableDensity,\n} from '@perses-dev/components';\nimport { ChangeEvent, ReactElement } from 'react';\nimport { TableSettingsEditorProps } from './table-model';\n\ninterface DefaultColumnsDimensionsControlProps {\n  label: string;\n  defaultValue: number;\n  value?: 'auto' | number;\n  onChange: (value: 'auto' | number) => void;\n}\n\nfunction DefaultColumnsDimensionsControl({\n  label,\n  defaultValue,\n  value,\n  onChange,\n}: DefaultColumnsDimensionsControlProps): ReactElement {\n  function handleAutoSwitchChange(_: ChangeEvent, checked: boolean): void {\n    if (checked) {\n      return onChange('auto');\n    }\n    onChange(defaultValue);\n  }\n\n  return (\n    <>\n      <OptionsEditorControl\n        label={`Auto Columns ${label}`}\n        control={<Switch checked={value === undefined || value === 'auto'} onChange={handleAutoSwitchChange} />}\n      />\n      {value !== undefined && value !== 'auto' && (\n        <OptionsEditorControl\n          label={`Default Columns ${label}`}\n          control={\n            <TextField\n              type=\"number\"\n              value={value ?? defaultValue}\n              InputProps={{ inputProps: { min: 1, step: 1 } }}\n              onChange={(e) => onChange(parseInt(e.target.value))}\n            />\n          }\n        />\n      )}\n    </>\n  );\n}\n\nexport function TableSettingsEditor({ onChange, value }: TableSettingsEditorProps): ReactElement {\n  function handleDensityChange(density: TableDensity): void {\n    onChange({ ...value, density: density });\n  }\n\n  function handlePaginationChange(_event: ChangeEvent, newValue: boolean): void {\n    onChange({ ...value, pagination: newValue });\n  }\n\n  function handleAutoWidthChange(newValue: 'auto' | number): void {\n    onChange({ ...value, defaultColumnWidth: newValue });\n  }\n\n  function handleAutoHeightChange(newValue: 'auto' | number): void {\n    onChange({ ...value, defaultColumnHeight: newValue });\n  }\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Display\">\n          <DensitySelector value={value.density} onChange={handleDensityChange} />\n          <OptionsEditorControl\n            label=\"Pagination\"\n            control={<Switch checked={!!value.pagination} onChange={handlePaginationChange} />}\n          />\n          <DefaultColumnsDimensionsControl\n            label=\"Width\"\n            defaultValue={DEFAULT_COLUMN_WIDTH}\n            value={value.defaultColumnWidth}\n            onChange={handleAutoWidthChange}\n          />\n          <DefaultColumnsDimensionsControl\n            label=\"Height\"\n            defaultValue={DEFAULT_COLUMN_HEIGHT}\n            value={value.defaultColumnHeight}\n            onChange={handleAutoHeightChange}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","TextField","DEFAULT_COLUMN_HEIGHT","DEFAULT_COLUMN_WIDTH","DensitySelector","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","DefaultColumnsDimensionsControl","label","defaultValue","value","onChange","handleAutoSwitchChange","_","checked","control","undefined","type","InputProps","inputProps","min","step","e","parseInt","target","TableSettingsEditor","handleDensityChange","density","handlePaginationChange","_event","newValue","pagination","handleAutoWidthChange","defaultColumnWidth","handleAutoHeightChange","defaultColumnHeight","title"],"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,SAAS,QAAQ,gBAAgB;AAClD,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,eAAe,EACfC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,QAEb,yBAAyB;AAWhC,SAASC,gCAAgC,EACvCC,KAAK,EACLC,YAAY,EACZC,KAAK,EACLC,QAAQ,EAC6B;IACrC,SAASC,uBAAuBC,CAAc,EAAEC,OAAgB;QAC9D,IAAIA,SAAS;YACX,OAAOH,SAAS;QAClB;QACAA,SAASF;IACX;IAEA,qBACE;;0BACE,KAACL;gBACCI,OAAO,CAAC,aAAa,EAAEA,OAAO;gBAC9BO,uBAAS,KAACjB;oBAAOgB,SAASJ,UAAUM,aAAaN,UAAU;oBAAQC,UAAUC;;;YAE9EF,UAAUM,aAAaN,UAAU,wBAChC,KAACN;gBACCI,OAAO,CAAC,gBAAgB,EAAEA,OAAO;gBACjCO,uBACE,KAAChB;oBACCkB,MAAK;oBACLP,OAAOA,SAASD;oBAChBS,YAAY;wBAAEC,YAAY;4BAAEC,KAAK;4BAAGC,MAAM;wBAAE;oBAAE;oBAC9CV,UAAU,CAACW,IAAMX,SAASY,SAASD,EAAEE,MAAM,CAACd,KAAK;;;;;AAO/D;AAEA,OAAO,SAASe,oBAAoB,EAAEd,QAAQ,EAAED,KAAK,EAA4B;IAC/E,SAASgB,oBAAoBC,OAAqB;QAChDhB,SAAS;YAAE,GAAGD,KAAK;YAAEiB,SAASA;QAAQ;IACxC;IAEA,SAASC,uBAAuBC,MAAmB,EAAEC,QAAiB;QACpEnB,SAAS;YAAE,GAAGD,KAAK;YAAEqB,YAAYD;QAAS;IAC5C;IAEA,SAASE,sBAAsBF,QAAyB;QACtDnB,SAAS;YAAE,GAAGD,KAAK;YAAEuB,oBAAoBH;QAAS;IACpD;IAEA,SAASI,uBAAuBJ,QAAyB;QACvDnB,SAAS;YAAE,GAAGD,KAAK;YAAEyB,qBAAqBL;QAAS;IACrD;IAEA,qBACE,KAACzB;kBACC,cAAA,KAACF;sBACC,cAAA,MAACG;gBAAmB8B,OAAM;;kCACxB,KAAClC;wBAAgBQ,OAAOA,MAAMiB,OAAO;wBAAEhB,UAAUe;;kCACjD,KAACtB;wBACCI,OAAM;wBACNO,uBAAS,KAACjB;4BAAOgB,SAAS,CAAC,CAACJ,MAAMqB,UAAU;4BAAEpB,UAAUiB;;;kCAE1D,KAACrB;wBACCC,OAAM;wBACNC,cAAcR;wBACdS,OAAOA,MAAMuB,kBAAkB;wBAC/BtB,UAAUqB;;kCAEZ,KAACzB;wBACCC,OAAM;wBACNC,cAAcT;wBACdU,OAAOA,MAAMyB,mBAAmB;wBAChCxB,UAAUuB;;;;;;AAMtB"}

package/lib/TableTransformsEditor.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TableSettingsEditorProps } from './table-model';
+export declare function TableTransformsEditor({ value, onChange }: TableSettingsEditorProps): ReactElement;
+//# sourceMappingURL=TableTransformsEditor.d.ts.map

package/lib/TableTransformsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableTransformsEditor.d.ts","sourceRoot":"","sources":["../../src/TableTransformsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAMjG"}

package/lib/TableTransformsEditor.js

@@ -0,0 +1,28 @@
+// 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 } from "react/jsx-runtime";
+import { TransformsEditor } from '@perses-dev/components';
+export function TableTransformsEditor({ value, onChange }) {
+    function handleTransformsChange(transforms) {
+        onChange({
+            ...value,
+            transforms: transforms
+        });
+    }
+    return /*#__PURE__*/ _jsx(TransformsEditor, {
+        value: value.transforms ?? [],
+        onChange: handleTransformsChange
+    });
+}
+
+//# sourceMappingURL=TableTransformsEditor.js.map

package/lib/TableTransformsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TableTransformsEditor.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 { TransformsEditor } from '@perses-dev/components';\nimport { Transform } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { TableSettingsEditorProps } from './table-model';\n\nexport function TableTransformsEditor({ value, onChange }: TableSettingsEditorProps): ReactElement {\n  function handleTransformsChange(transforms: Transform[]): void {\n    onChange({ ...value, transforms: transforms });\n  }\n\n  return <TransformsEditor value={value.transforms ?? []} onChange={handleTransformsChange} />;\n}\n"],"names":["TransformsEditor","TableTransformsEditor","value","onChange","handleTransformsChange","transforms"],"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,gBAAgB,QAAQ,yBAAyB;AAK1D,OAAO,SAASC,sBAAsB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IACjF,SAASC,uBAAuBC,UAAuB;QACrDF,SAAS;YAAE,GAAGD,KAAK;YAAEG,YAAYA;QAAW;IAC9C;IAEA,qBAAO,KAACL;QAAiBE,OAAOA,MAAMG,UAAU,IAAI,EAAE;QAAEF,UAAUC;;AACpE"}

package/lib/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bootstrap.d.ts.map

package/lib/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/bootstrap.tsx"],"names":[],"mappings":""}

package/lib/bootstrap.js

@@ -0,0 +1,19 @@
+// 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 } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
+
+//# sourceMappingURL=bootstrap.js.map

package/lib/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/bootstrap.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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/CellsEditor/CellEditor.js

@@ -0,0 +1,385 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CellEditor", {
+    enumerable: true,
+    get: function() {
+        return CellEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _components = require("@perses-dev/components");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ConditionEditor({ condition, onChange, ...props }) {
+    if (condition.kind === 'Value') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            gap: 1,
+            direction: "row",
+            ...props,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                select: true,
+                label: "Value",
+                value: condition.spec?.value ?? '',
+                onChange: (e)=>onChange({
+                        ...condition,
+                        spec: {
+                            value: e.target.value
+                        }
+                    }),
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "empty",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "Empty"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Matches empty string"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "null",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "Null"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Matches null or undefined"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "NaN",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "NaN"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Matches Not a Number value"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "true",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "True"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Matches true boolean"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "false",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "False"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Matches false boolean"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    }
+    return null;
+}
+function CellEditor({ cell, onChange, onDelete, ...props }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
+        container: true,
+        spacing: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 5
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    gap: 1,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.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__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Value",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Value"
+                                            }),
+                                            cell.condition.kind !== 'Value' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches an exact text value"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Range",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Range"
+                                            }),
+                                            cell.condition.kind !== 'Range' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a numerical range"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Regex",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Regex"
+                                            }),
+                                            cell.condition.kind !== 'Regex' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a regular expression"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Misc",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Misc"
+                                            }),
+                                            cell.condition.kind !== 'Misc' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against empty, null and NaN values"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(ConditionEditor, {
+                            width: "100%",
+                            condition: cell.condition,
+                            onChange: (updatedCondition)=>onChange({
+                                    ...cell,
+                                    condition: updatedCondition
+                                })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 4
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Display text",
+                    value: cell.text,
+                    onChange: (e)=>onChange({
+                            ...cell,
+                            text: e.target.value
+                        }),
+                    fullWidth: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    gap: 1,
+                    children: cell.textColor ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
+                        label: "Text Color",
+                        color: cell.textColor ?? '#000',
+                        onColorChange: (color)=>onChange({
+                                ...cell,
+                                textColor: color
+                            }),
+                        onClear: ()=>onChange({
+                                ...cell,
+                                textColor: undefined
+                            })
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        onClick: ()=>onChange({
+                                ...cell,
+                                textColor: '#000'
+                            }),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    children: cell.backgroundColor ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
+                        label: "Background Color",
+                        color: cell.backgroundColor ?? '#fff',
+                        onColorChange: (color)=>onChange({
+                                ...cell,
+                                backgroundColor: color
+                            }),
+                        onClear: ()=>onChange({
+                                ...cell,
+                                backgroundColor: undefined
+                            })
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        onClick: ()=>onChange({
+                                ...cell,
+                                backgroundColor: '#000'
+                            }),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                    title: "Remove cell settings",
+                    placement: "top",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                    }, "delete-cell-button")
+                })
+            })
+        ]
+    });
+}