@perses-dev/components 0.55.1 → 0.56.0-beta.1

package/dist/AlignSelector/AlignSelector.js

@@ -11,32 +11,122 @@
 // 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 { c as _c } from "react-compiler-runtime";
 import { Button, ButtonGroup } from "@mui/material";
-export function AlignSelector({ onChange, value = 'left', ...props }) {
-    const handleSortChange = (option)=>{
-        onChange(option);
-    };
-    return /*#__PURE__*/ _jsxs(ButtonGroup, {
-        "aria-label": "Alignement",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx(Button, {
-                onClick: ()=>handleSortChange('left'),
-                variant: value === 'left' ? 'contained' : 'outlined',
-                children: "Left"
-            }, "left"),
-            /*#__PURE__*/ _jsx(Button, {
-                onClick: ()=>handleSortChange('center'),
-                variant: value === 'center' ? 'contained' : 'outlined',
-                children: "Center"
-            }, "center"),
-            /*#__PURE__*/ _jsx(Button, {
-                onClick: ()=>handleSortChange('right'),
-                variant: value === 'right' ? 'contained' : 'outlined',
-                children: "Right"
-            }, "right")
-        ]
-    });
+export function AlignSelector(t0) {
+    const $ = _c(26);
+    let onChange;
+    let props;
+    let t1;
+    if ($[0] !== t0) {
+        ({ onChange, value: t1, ...props } = t0);
+        $[0] = t0;
+        $[1] = onChange;
+        $[2] = props;
+        $[3] = t1;
+    } else {
+        onChange = $[1];
+        props = $[2];
+        t1 = $[3];
+    }
+    const value = t1 === undefined ? "left" : t1;
+    let t2;
+    if ($[4] !== onChange) {
+        t2 = (option)=>{
+            onChange(option);
+        };
+        $[4] = onChange;
+        $[5] = t2;
+    } else {
+        t2 = $[5];
+    }
+    const handleSortChange = t2;
+    let t3;
+    if ($[6] !== handleSortChange) {
+        t3 = ()=>handleSortChange("left");
+        $[6] = handleSortChange;
+        $[7] = t3;
+    } else {
+        t3 = $[7];
+    }
+    const t4 = value === "left" ? "contained" : "outlined";
+    let t5;
+    if ($[8] !== t3 || $[9] !== t4) {
+        t5 = /*#__PURE__*/ _jsx(Button, {
+            onClick: t3,
+            variant: t4,
+            children: "Left"
+        }, "left");
+        $[8] = t3;
+        $[9] = t4;
+        $[10] = t5;
+    } else {
+        t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== handleSortChange) {
+        t6 = ()=>handleSortChange("center");
+        $[11] = handleSortChange;
+        $[12] = t6;
+    } else {
+        t6 = $[12];
+    }
+    const t7 = value === "center" ? "contained" : "outlined";
+    let t8;
+    if ($[13] !== t6 || $[14] !== t7) {
+        t8 = /*#__PURE__*/ _jsx(Button, {
+            onClick: t6,
+            variant: t7,
+            children: "Center"
+        }, "center");
+        $[13] = t6;
+        $[14] = t7;
+        $[15] = t8;
+    } else {
+        t8 = $[15];
+    }
+    let t9;
+    if ($[16] !== handleSortChange) {
+        t9 = ()=>handleSortChange("right");
+        $[16] = handleSortChange;
+        $[17] = t9;
+    } else {
+        t9 = $[17];
+    }
+    const t10 = value === "right" ? "contained" : "outlined";
+    let t11;
+    if ($[18] !== t10 || $[19] !== t9) {
+        t11 = /*#__PURE__*/ _jsx(Button, {
+            onClick: t9,
+            variant: t10,
+            children: "Right"
+        }, "right");
+        $[18] = t10;
+        $[19] = t9;
+        $[20] = t11;
+    } else {
+        t11 = $[20];
+    }
+    let t12;
+    if ($[21] !== props || $[22] !== t11 || $[23] !== t5 || $[24] !== t8) {
+        t12 = /*#__PURE__*/ _jsxs(ButtonGroup, {
+            "aria-label": "Alignement",
+            ...props,
+            children: [
+                t5,
+                t8,
+                t11
+            ]
+        });
+        $[21] = props;
+        $[22] = t11;
+        $[23] = t5;
+        $[24] = t8;
+        $[25] = t12;
+    } else {
+        t12 = $[25];
+    }
+    return t12;
 }
 
 //# sourceMappingURL=AlignSelector.js.map

package/dist/AlignSelector/AlignSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/AlignSelector/AlignSelector.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 type { ButtonGroupProps } from '@mui/material';\nimport { Button, ButtonGroup } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport type AlignOption = 'left' | 'center' | 'right';\n\nexport interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {\n  onChange: (align: AlignOption) => void;\n  value?: AlignOption;\n}\n\nexport function AlignSelector({ onChange, value = 'left', ...props }: AlignSelectorProps): ReactElement {\n  const handleSortChange = (option: AlignOption): void => {\n    onChange(option);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Alignement\" {...props}>\n      <Button key=\"left\" onClick={() => handleSortChange('left')} variant={value === 'left' ? 'contained' : 'outlined'}>\n        Left\n      </Button>\n      <Button\n        key=\"center\"\n        onClick={() => handleSortChange('center')}\n        variant={value === 'center' ? 'contained' : 'outlined'}\n      >\n        Center\n      </Button>\n      <Button\n        key=\"right\"\n        onClick={() => handleSortChange('right')}\n        variant={value === 'right' ? 'contained' : 'outlined'}\n      >\n        Right\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup","AlignSelector","onChange","value","props","handleSortChange","option","aria-label","onClick","variant"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,EAAEC,WAAW,QAAQ,gBAAgB;AAUpD,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAEC,QAAQ,MAAM,EAAE,GAAGC,OAA2B;IACtF,MAAMC,mBAAmB,CAACC;QACxBJ,SAASI;IACX;IAEA,qBACE,MAACN;QAAYO,cAAW;QAAc,GAAGH,KAAK;;0BAC5C,KAACL;gBAAkBS,SAAS,IAAMH,iBAAiB;gBAASI,SAASN,UAAU,SAAS,cAAc;0BAAY;eAAtG;0BAGZ,KAACJ;gBAECS,SAAS,IAAMH,iBAAiB;gBAChCI,SAASN,UAAU,WAAW,cAAc;0BAC7C;eAHK;0BAMN,KAACJ;gBAECS,SAAS,IAAMH,iBAAiB;gBAChCI,SAASN,UAAU,UAAU,cAAc;0BAC5C;eAHK;;;AAQZ"}
+{"version":3,"sources":["../../src/AlignSelector/AlignSelector.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 type { ButtonGroupProps } from '@mui/material';\nimport { Button, ButtonGroup } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport type AlignOption = 'left' | 'center' | 'right';\n\nexport interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {\n  onChange: (align: AlignOption) => void;\n  value?: AlignOption;\n}\n\nexport function AlignSelector({ onChange, value = 'left', ...props }: AlignSelectorProps): ReactElement {\n  const handleSortChange = (option: AlignOption): void => {\n    onChange(option);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Alignement\" {...props}>\n      <Button key=\"left\" onClick={() => handleSortChange('left')} variant={value === 'left' ? 'contained' : 'outlined'}>\n        Left\n      </Button>\n      <Button\n        key=\"center\"\n        onClick={() => handleSortChange('center')}\n        variant={value === 'center' ? 'contained' : 'outlined'}\n      >\n        Center\n      </Button>\n      <Button\n        key=\"right\"\n        onClick={() => handleSortChange('right')}\n        variant={value === 'right' ? 'contained' : 'outlined'}\n      >\n        Right\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,MAAM,EAAEC,WAAW,QAAQ,gBAAgB;AAUpD,OAAO"}

package/dist/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,19 @@
+import type { Extension, ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import type { ReactElement } from 'react';
+export type CodeEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {
+    value: T;
+    placeholder?: string;
+    onChange?: (next: string) => void;
+};
+type InternalCodeEditorProps<T> = CodeEditorProps<T> & {
+    /** Language specific CodeMirror extensions. Must be stable across renders. */
+    extensions: Extension[];
+    /** Convert the initial value into the text displayed by the editor. */
+    serialize: (value: T) => string;
+};
+/**
+ * Internal base for the language specific editors (JSONEditor, YAMLEditor). Not exported from the package.
+ */
+export declare function CodeEditor<T>(props: InternalCodeEditorProps<T>): ReactElement;
+export {};
+//# sourceMappingURL=CodeEditor.d.ts.map

package/dist/CodeEditor/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CACnC,oBAAoB,EACpB,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CACzD,GAAG;IACF,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IACrD,8EAA8E;IAC9E,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,uEAAuE;IACvE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG,YAAY,CAkC7E"}

package/dist/CodeEditor/CodeEditor.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-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.
+// 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 { useTheme } from "@mui/material";
+import CodeMirror from "@uiw/react-codemirror";
+import { useState } from "react";
+/**
+ * Internal base for the language specific editors (JSONEditor, YAMLEditor). Not exported from the package.
+ */ export function CodeEditor(props) {
+    const $ = _c(26);
+    let extensions;
+    let initialValue;
+    let onChange;
+    let rest;
+    let serialize;
+    if ($[0] !== props) {
+        ({ value: initialValue, serialize, extensions, onChange, ...rest } = props);
+        $[0] = props;
+        $[1] = extensions;
+        $[2] = initialValue;
+        $[3] = onChange;
+        $[4] = rest;
+        $[5] = serialize;
+    } else {
+        extensions = $[1];
+        initialValue = $[2];
+        onChange = $[3];
+        rest = $[4];
+        serialize = $[5];
+    }
+    const theme = useTheme();
+    const isDarkMode = theme.palette.mode === "dark";
+    let t0;
+    if ($[6] !== initialValue || $[7] !== serialize) {
+        t0 = ()=>serialize(initialValue);
+        $[6] = initialValue;
+        $[7] = serialize;
+        $[8] = t0;
+    } else {
+        t0 = $[8];
+    }
+    const [value, setValue] = useState(t0);
+    const [lastProcessedValue, setLastProcessedValue] = useState(value);
+    const t1 = `1px solid ${theme.palette.divider}`;
+    let t2;
+    if ($[9] !== t1) {
+        t2 = {
+            border: t1
+        };
+        $[9] = t1;
+        $[10] = t2;
+    } else {
+        t2 = $[10];
+    }
+    const t3 = isDarkMode ? "dark" : "light";
+    let t4;
+    if ($[11] !== onChange) {
+        t4 = (newValue)=>{
+            setValue(newValue);
+            if (onChange) {
+                onChange(newValue);
+            }
+        };
+        $[11] = onChange;
+        $[12] = t4;
+    } else {
+        t4 = $[12];
+    }
+    let t5;
+    if ($[13] !== lastProcessedValue || $[14] !== onChange || $[15] !== value) {
+        t5 = ()=>{
+            if (lastProcessedValue !== value && onChange !== undefined) {
+                onChange(value);
+                setLastProcessedValue(value);
+            }
+        };
+        $[13] = lastProcessedValue;
+        $[14] = onChange;
+        $[15] = value;
+        $[16] = t5;
+    } else {
+        t5 = $[16];
+    }
+    let t6;
+    if ($[17] !== extensions || $[18] !== props.placeholder || $[19] !== rest || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== value) {
+        t6 = /*#__PURE__*/ _jsx(CodeMirror, {
+            ...rest,
+            style: t2,
+            theme: t3,
+            extensions: extensions,
+            value: value,
+            onChange: t4,
+            onBlur: t5,
+            placeholder: props.placeholder
+        });
+        $[17] = extensions;
+        $[18] = props.placeholder;
+        $[19] = rest;
+        $[20] = t2;
+        $[21] = t3;
+        $[22] = t4;
+        $[23] = t5;
+        $[24] = value;
+        $[25] = t6;
+    } else {
+        t6 = $[25];
+    }
+    return t6;
+}
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/CodeEditor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/CodeEditor/CodeEditor.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 { useTheme } from '@mui/material';\nimport type { Extension, ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport CodeMirror from '@uiw/react-codemirror';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nexport type CodeEditorProps<T> = Omit<\n  ReactCodeMirrorProps,\n  'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'\n> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\ntype InternalCodeEditorProps<T> = CodeEditorProps<T> & {\n  /** Language specific CodeMirror extensions. Must be stable across renders. */\n  extensions: Extension[];\n  /** Convert the initial value into the text displayed by the editor. */\n  serialize: (value: T) => string;\n};\n\n/**\n * Internal base for the language specific editors (JSONEditor, YAMLEditor). Not exported from the package.\n */\nexport function CodeEditor<T>(props: InternalCodeEditorProps<T>): ReactElement {\n  const { value: initialValue, serialize, extensions, onChange, ...rest } = props;\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => serialize(initialValue));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  return (\n    <CodeMirror\n      {...rest}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={extensions}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n        // Trigger the provided onChange callback in real-time\n        if (onChange) {\n          onChange(newValue);\n        }\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && onChange !== undefined) {\n          onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useTheme","CodeMirror","useState"],"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,QAAQ,QAAQ,gBAAgB;AAEzC,OAAOC,gBAAgB,wBAAwB;AAE/C,SAASC,QAAQ,QAAQ,QAAQ;AAkBjC;;CAEC,GACD,OAAO"}

package/dist/ColorPicker/ColorPicker.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-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.
@@ -16,68 +17,159 @@ import CircleIcon from "mdi-material-ui/Circle";
 import DeleteIcon from "mdi-material-ui/Delete";
 import { useState } from "react";
 import { HexColorPicker } from "react-colorful";
-export const ColorPicker = ({ color, onChange, onClear, palette })=>{
-    // value is the visible value for the controlled text input
+export const ColorPicker = (t0)=>{
+    const $ = _c(26);
+    const { color, onChange, onClear, palette } = t0;
     const [value, setValue] = useState(color);
-    const handleColorChange = (color)=>{
-        setValue(color);
-        onChange?.(color);
-    };
-    // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved
-    const handleInputChange = (e)=>{
-        const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);
-        setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format
-        // only set color if input value is a valid hex color
-        if (isValidHex(e.target.value)) {
-            onChange?.(e.target.value);
-        }
-    };
-    return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ _jsx(HexColorPicker, {
-                color: color,
-                onChange: handleColorChange,
-                style: {
-                    width: '100%'
-                }
-            }),
-            /*#__PURE__*/ _jsx(Stack, {
-                direction: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-evenly",
-                width: "200px",
-                children: palette && palette.map((color, i)=>/*#__PURE__*/ _jsx(IconButton, {
-                        size: "small",
-                        "aria-label": `change color to ${color}`,
-                        sx: {
-                            color
-                        },
-                        onClick: ()=>handleColorChange(color),
-                        children: /*#__PURE__*/ _jsx(CircleIcon, {})
-                    }, i))
-            }),
-            /*#__PURE__*/ _jsxs(Stack, {
-                direction: "row",
-                gap: 1,
-                alignItems: "center",
-                children: [
-                    /*#__PURE__*/ _jsx(TextField, {
-                        inputProps: {
-                            'aria-label': 'enter hex color'
-                        },
-                        fullWidth: true,
-                        value: value,
-                        onChange: handleInputChange
-                    }),
-                    onClear && /*#__PURE__*/ _jsx(IconButton, {
-                        onClick: onClear,
-                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
-                    })
-                ]
-            })
-        ]
-    });
+    let t1;
+    if ($[0] !== onChange) {
+        t1 = (color_0)=>{
+            setValue(color_0);
+            onChange?.(color_0);
+        };
+        $[0] = onChange;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    const handleColorChange = t1;
+    let t2;
+    if ($[2] !== onChange) {
+        t2 = (e)=>{
+            const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, "").substring(0, 8);
+            setValue(`#${inputValue}`);
+            if (isValidHex(e.target.value)) {
+                onChange?.(e.target.value);
+            }
+        };
+        $[2] = onChange;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    const handleInputChange = t2;
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = {
+            width: "100%"
+        };
+        $[4] = t3;
+    } else {
+        t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== color || $[6] !== handleColorChange) {
+        t4 = /*#__PURE__*/ _jsx(HexColorPicker, {
+            color: color,
+            onChange: handleColorChange,
+            style: t3
+        });
+        $[5] = color;
+        $[6] = handleColorChange;
+        $[7] = t4;
+    } else {
+        t4 = $[7];
+    }
+    let t5;
+    if ($[8] !== handleColorChange || $[9] !== palette) {
+        t5 = palette && palette.map((color_1, i)=>/*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                "aria-label": `change color to ${color_1}`,
+                sx: {
+                    color: color_1
+                },
+                onClick: ()=>handleColorChange(color_1),
+                children: /*#__PURE__*/ _jsx(CircleIcon, {})
+            }, i));
+        $[8] = handleColorChange;
+        $[9] = palette;
+        $[10] = t5;
+    } else {
+        t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== t5) {
+        t6 = /*#__PURE__*/ _jsx(Stack, {
+            direction: "row",
+            flexWrap: "wrap",
+            justifyContent: "space-evenly",
+            width: "200px",
+            children: t5
+        });
+        $[11] = t5;
+        $[12] = t6;
+    } else {
+        t6 = $[12];
+    }
+    let t7;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = {
+            "aria-label": "enter hex color"
+        };
+        $[13] = t7;
+    } else {
+        t7 = $[13];
+    }
+    let t8;
+    if ($[14] !== handleInputChange || $[15] !== value) {
+        t8 = /*#__PURE__*/ _jsx(TextField, {
+            inputProps: t7,
+            fullWidth: true,
+            value: value,
+            onChange: handleInputChange
+        });
+        $[14] = handleInputChange;
+        $[15] = value;
+        $[16] = t8;
+    } else {
+        t8 = $[16];
+    }
+    let t9;
+    if ($[17] !== onClear) {
+        t9 = onClear && /*#__PURE__*/ _jsx(IconButton, {
+            onClick: onClear,
+            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+        });
+        $[17] = onClear;
+        $[18] = t9;
+    } else {
+        t9 = $[18];
+    }
+    let t10;
+    if ($[19] !== t8 || $[20] !== t9) {
+        t10 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            children: [
+                t8,
+                t9
+            ]
+        });
+        $[19] = t8;
+        $[20] = t9;
+        $[21] = t10;
+    } else {
+        t10 = $[21];
+    }
+    let t11;
+    if ($[22] !== t10 || $[23] !== t4 || $[24] !== t6) {
+        t11 = /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1,
+            children: [
+                t4,
+                t6,
+                t10
+            ]
+        });
+        $[22] = t10;
+        $[23] = t4;
+        $[24] = t6;
+        $[25] = t11;
+    } else {
+        t11 = $[25];
+    }
+    return t11;
 };
 const isValidHex = (value, alpha)=>{
     const matcher = /^#?([0-9A-F]{3,8})$/i;

package/dist/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, onClear, palette }: ColorPickerProps): ReactElement => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string): void => {\n    setValue(color);\n    onChange?.(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange?.(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} style={{ width: '100%' }} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width=\"200px\">\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <Stack direction=\"row\" gap={1} alignItems=\"center\">\n        <TextField\n          inputProps={{ 'aria-label': 'enter hex color' }}\n          fullWidth\n          value={value}\n          onChange={handleInputChange}\n        />\n        {onClear && (\n          <IconButton onClick={onClear}>\n            <DeleteIcon />\n          </IconButton>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","CircleIcon","DeleteIcon","useState","HexColorPicker","ColorPicker","color","onChange","onClear","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","style","width","direction","flexWrap","justifyContent","map","i","size","aria-label","sx","onClick","gap","alignItems","inputProps","fullWidth","alpha","matcher","match","exec","length"],"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,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC7D,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,cAAc,QAAQ,iBAAiB;AAYhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAoB;IACjF,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGR,SAASG;IAEnC,MAAMM,oBAAoB,CAACN;QACzBK,SAASL;QACTC,WAAWD;IACb;IAEA,6FAA6F;IAC7F,MAAMO,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,EAAEE,MAAM,CAACN,KAAK,CAACO,OAAO,CAAC,kBAAkB,IAAIC,SAAS,CAAC,GAAG;QAC7EP,SAAS,CAAC,CAAC,EAAEI,YAAY,GAAG,0DAA0D;QACtF,qDAAqD;QACrD,IAAII,WAAWL,EAAEE,MAAM,CAACN,KAAK,GAAG;YAC9BH,WAAWO,EAAEE,MAAM,CAACN,KAAK;QAC3B;IACF;IAEA,qBACE,MAACX;QAAMqB,SAAS;;0BACd,KAAChB;gBAAeE,OAAOA;gBAAOC,UAAUK;gBAAmBS,OAAO;oBAAEC,OAAO;gBAAO;;0BAClF,KAACvB;gBAAMwB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeH,OAAM;0BACxEb,WACCA,QAAQiB,GAAG,CAAC,CAACpB,OAAOqB,kBAClB,KAAC7B;wBAEC8B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAEvB,OAAO;wBACtCwB,IAAI;4BAAExB;wBAAM;wBACZyB,SAAS,IAAMnB,kBAAkBN;kCAEjC,cAAA,KAACL;uBANI0B;;0BAUb,MAAC5B;gBAAMwB,WAAU;gBAAMS,KAAK;gBAAGC,YAAW;;kCACxC,KAACjC;wBACCkC,YAAY;4BAAE,cAAc;wBAAkB;wBAC9CC,SAAS;wBACTzB,OAAOA;wBACPH,UAAUM;;oBAEXL,yBACC,KAACV;wBAAWiC,SAASvB;kCACnB,cAAA,KAACN;;;;;;AAMb,EAAE;AAEF,MAAMiB,aAAa,CAACT,OAAe0B;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAAC7B;IAC3B,MAAM8B,SAASF,SAASA,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,EAAE,CAACE,MAAM,GAAG;IACrD,OACEA,WAAW,KAAK,gBAAgB;IAChCA,WAAW,KAAK,mBAAmB;IAClC,CAAC,CAACJ,SAASI,WAAW,KAAM,iBAAiB;IAC7C,CAAC,CAACJ,SAASI,WAAW,EAAG,qBAAqB;;AAEnD"}
+{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, onClear, palette }: ColorPickerProps): ReactElement => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string): void => {\n    setValue(color);\n    onChange?.(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange?.(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} style={{ width: '100%' }} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width=\"200px\">\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <Stack direction=\"row\" gap={1} alignItems=\"center\">\n        <TextField\n          inputProps={{ 'aria-label': 'enter hex color' }}\n          fullWidth\n          value={value}\n          onChange={handleInputChange}\n        />\n        {onClear && (\n          <IconButton onClick={onClear}>\n            <DeleteIcon />\n          </IconButton>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","CircleIcon","DeleteIcon","useState","HexColorPicker","ColorPicker","isValidHex","value","alpha","matcher","match","exec","length"],"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,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC7D,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,cAAc,QAAQ,iBAAiB;AAYhD,OAAO,MAAMC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDzB;AAEF,MAAMC,aAAa,CAACC,OAAeC;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAACJ;IAC3B,MAAMK,SAASF,SAASA,KAAM,CAAA,EAAC,AAAC,GAAGA,KAAM,CAAA,EAAC,AAAC,CAACE,MAAM,GAAG;IACrD,OACEA,WAAW,KAAK,gBAAgB;IAChCA,WAAW,KAAK,mBAAmB;IAClC,CAAC,CAACJ,SAASI,WAAW,KAAM,iBAAiB;IAC7C,CAAC,CAACJ,SAASI,WAAW,EAAG,qBAAqB;;AAEnD"}