@perses-dev/components 0.55.0 → 0.56.0-beta.0

package/dist/InfoTooltip/InfoTooltip.js

@@ -11,51 +11,102 @@
 // 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 { c as _c } from "react-compiler-runtime";
 import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from "@mui/material";
-export const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
-    // Wrap children in a span to cover the following use cases:
-    //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
-    //  - Non-element tooltip children (e.g. text). The tooltip needs something that
-    //   can have a ref as a child.
-    // We wrap in a `span` and not a `div` to minimize the impact on page layout
-    // and styles.
-    const wrappedChildren = /*#__PURE__*/ _jsx("span", {
-        children: children
-    });
-    return /*#__PURE__*/ _jsx(StyledTooltip, {
-        arrow: true,
-        id: id,
-        placement: placement ?? 'top',
-        title: /*#__PURE__*/ _jsx(TooltipContent, {
+export const InfoTooltip = (t0)=>{
+    const $ = _c(12);
+    const { id, title, description, placement, children, enterDelay, enterNextDelay } = t0;
+    let t1;
+    if ($[0] !== children) {
+        t1 = /*#__PURE__*/ _jsx("span", {
+            children: children
+        });
+        $[0] = children;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    const wrappedChildren = t1;
+    const t2 = placement ?? "top";
+    let t3;
+    if ($[2] !== description || $[3] !== title) {
+        t3 = /*#__PURE__*/ _jsx(TooltipContent, {
             title: title,
             description: description
-        }),
-        enterDelay: enterDelay ?? 500,
-        enterNextDelay: enterNextDelay ?? 500,
-        children: wrappedChildren
-    });
+        });
+        $[2] = description;
+        $[3] = title;
+        $[4] = t3;
+    } else {
+        t3 = $[4];
+    }
+    const t4 = enterDelay ?? 500;
+    const t5 = enterNextDelay ?? 500;
+    let t6;
+    if ($[5] !== id || $[6] !== t2 || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== wrappedChildren) {
+        t6 = /*#__PURE__*/ _jsx(StyledTooltip, {
+            arrow: true,
+            id: id,
+            placement: t2,
+            title: t3,
+            enterDelay: t4,
+            enterNextDelay: t5,
+            children: wrappedChildren
+        });
+        $[5] = id;
+        $[6] = t2;
+        $[7] = t3;
+        $[8] = t4;
+        $[9] = t5;
+        $[10] = wrappedChildren;
+        $[11] = t6;
+    } else {
+        t6 = $[11];
+    }
+    return t6;
 };
-const TooltipContent = ({ title, description })=>{
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            title && /*#__PURE__*/ _jsx(Typography, {
-                variant: "body2",
-                sx: (theme)=>({
-                        color: theme.palette.text.primary,
-                        fontWeight: theme.typography.fontWeightMedium
-                    }),
-                children: title
-            }),
-            /*#__PURE__*/ _jsx(Typography, {
-                variant: "caption",
-                sx: (theme)=>({
-                        color: theme.palette.text.primary,
-                        whiteSpace: 'pre-line'
-                    }),
-                children: description
-            })
-        ]
-    });
+const TooltipContent = (t0)=>{
+    const $ = _c(7);
+    const { title, description } = t0;
+    let t1;
+    if ($[0] !== title) {
+        t1 = title && /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            sx: _temp,
+            children: title
+        });
+        $[0] = title;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== description) {
+        t2 = /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            sx: _temp2,
+            children: description
+        });
+        $[2] = description;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== t1 || $[5] !== t2) {
+        t3 = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                t1,
+                t2
+            ]
+        });
+        $[4] = t1;
+        $[5] = t2;
+        $[6] = t3;
+    } else {
+        t3 = $[6];
+    }
+    return t3;
 };
 const StyledTooltip = styled(({ className, ...props })=>/*#__PURE__*/ _jsx(MuiTooltip, {
         ...props,
@@ -66,7 +117,7 @@ const StyledTooltip = styled(({ className, ...props })=>/*#__PURE__*/ _jsx(MuiTo
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,
-            maxWidth: '300px',
+            maxWidth: "300px",
             padding: theme.spacing(1),
             boxShadow: theme.shadows[1]
         },
@@ -74,5 +125,17 @@ const StyledTooltip = styled(({ className, ...props })=>/*#__PURE__*/ _jsx(MuiTo
             color: theme.palette.background.tooltip
         }
     }));
+function _temp(theme) {
+    return {
+        color: theme.palette.text.primary,
+        fontWeight: theme.typography.fontWeightMedium
+    };
+}
+function _temp2(theme_0) {
+    return {
+        color: theme_0.palette.text.primary,
+        whiteSpace: "pre-line"
+    };
+}
 
 //# sourceMappingURL=InfoTooltip.js.map

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 { TooltipProps as MuiTooltipProps } from '@mui/material';\nimport { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';\nimport type { ReactElement, ReactNode } from 'react';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps): ReactElement => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>): ReactElement => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n          whiteSpace: 'pre-line',\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","wrappedChildren","span","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","whiteSpace","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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;;AAGjC,SAASA,MAAM,EAAEC,WAAWC,UAAU,EAAEC,cAAc,EAAEC,UAAU,QAAQ,gBAAgB;AAe1F,OAAO,MAAMC,cAAc,CAAC,EAC1BC,EAAE,EACFC,KAAK,EACLC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACG;IACjB,4DAA4D;IAC5D,6EAA6E;IAC7E,gFAAgF;IAChF,+BAA+B;IAC/B,4EAA4E;IAC5E,cAAc;IACd,MAAMC,gCAAkB,KAACC;kBAAMJ;;IAE/B,qBACE,KAACK;QACCC,KAAK;QACLV,IAAIA;QACJG,WAAWA,aAAa;QACxBF,qBAAO,KAACU;YAAeV,OAAOA;YAAOC,aAAaA;;QAClDG,YAAYA,cAAc;QAC1BC,gBAAgBA,kBAAkB;kBAEjCC;;AAGP,EAAE;AAEF,MAAMI,iBAAiB,CAAC,EAAEV,KAAK,EAAEC,WAAW,EAAmD;IAC7F,qBACE;;YACGD,uBACC,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,YAAYL,MAAMM,UAAU,CAACC,gBAAgB;oBAC/C,CAAA;0BAECpB;;0BAGL,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCI,YAAY;oBACd,CAAA;0BAECpB;;;;AAIT;AAEA,MAAMO,gBAAgBf,OAAO,CAAC,EAAE6B,SAAS,EAAE,GAAGC,OAAwB,iBACpE,KAAC5B;QAAY,GAAG4B,KAAK;QAAEC,SAAS;YAAEC,QAAQH;QAAU;QACnD,CAAC,EAAET,KAAK,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEjB,eAAe8B,OAAO,EAAE,CAAC,EAAE;YAChCC,iBAAiBd,MAAME,OAAO,CAACa,UAAU,CAACF,OAAO;YACjDZ,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCY,UAAU;YACVC,SAASjB,MAAMkB,OAAO,CAAC;YACvBC,WAAWnB,MAAMoB,OAAO,CAAC,EAAE;QAC7B;QACA,CAAC,CAAC,GAAG,EAAErC,eAAea,KAAK,EAAE,CAAC,EAAE;YAC9BK,OAAOD,MAAME,OAAO,CAACa,UAAU,CAACF,OAAO;QACzC;IACF,CAAA"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 { TooltipProps as MuiTooltipProps } from '@mui/material';\nimport { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';\nimport type { ReactElement, ReactNode } from 'react';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps): ReactElement => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>): ReactElement => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n          whiteSpace: 'pre-line',\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","TooltipContent","StyledTooltip","className","props","classes","popper","theme","tooltip","backgroundColor","palette","background","color","text","primary","maxWidth","padding","spacing","boxShadow","shadows","arrow"],"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;;;AAGjC,SAASA,MAAM,EAAEC,WAAWC,UAAU,EAAEC,cAAc,EAAEC,UAAU,QAAQ,gBAAgB;AAe1F,OAAO,MAAMC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BzB;AAEF,MAAMC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BvB,MAAMC,gBAAgBP,OAAO,CAAC,EAAEQ,SAAS,EAAE,GAAQ,AAALC,OAAwB,iBACpE,KAACP;QAAY,GAAGO,KAAK;QAAEC,SAAS;YAAEC,QAAQH;QAAU;QACnD,CAAC,EAAEI,KAAK,EAAE,GAAM,CAAA;QAChB,CAAA,CAAC,GAAG,EAAET,eAAeU,OAAO,EAAE,CAAA,EAAG;YAChCC,iBAAiBF,MAAMG,OAAO,CAACC,UAAU,CAACH,OAAO;YACjDI,OAAOL,MAAMG,OAAO,CAACG,IAAI,CAACC,OAAO;YACjCC,UAAU;YACVC,SAAST,MAAMU,OAAO,CAAC;YACvBC,WAAWX,MAAMY,OAAO,AAAC,CAAA,EAAC,AAAC;QAC7B;QACC,CAAA,CAAC,GAAG,EAAErB,eAAesB,KAAK,EAAE,CAAA,EAAG;YAC9BR,OAAOL,MAAMG,OAAO,CAACC,UAAU,CAACH,OAAO;QACzC;IACF,CAAA"}

package/dist/JSONEditor.d.ts

@@ -1,10 +1,6 @@
-import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import type { ReactElement } from 'react';
-type JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {
-    value: T;
-    placeholder?: string;
-    onChange?: (next: string) => void;
-};
+import type { CodeEditorProps } from './CodeEditor/CodeEditor';
+type JSONEditorProps<T> = CodeEditorProps<T>;
 export declare function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement;
 export {};
 //# sourceMappingURL=JSONEditor.d.ts.map

package/dist/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,KAAK,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/G,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAiCrE"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAS/D,KAAK,eAAe,CAAC,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;AAE7C,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAErE"}

package/dist/JSONEditor.js

@@ -1,4 +1,5 @@
 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.
@@ -13,44 +14,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter, lintGutter } from "@codemirror/lint";
-import { useTheme } from "@mui/material";
-import CodeMirror from "@uiw/react-codemirror";
-import { useState } from "react";
+import { CodeEditor } from "./CodeEditor/CodeEditor.js";
+const JSON_EXTENSIONS = [
+    json(),
+    linter(jsonParseLinter()),
+    lintGutter()
+];
+function toJSONText(value) {
+    return JSON.stringify(value, null, 2);
+}
 export function JSONEditor(props) {
-    const theme = useTheme();
-    const isDarkMode = theme.palette.mode === 'dark';
-    const [value, setValue] = useState(()=>JSON.stringify(props.value, null, 2));
-    const [lastProcessedValue, setLastProcessedValue] = useState(value);
-    return /*#__PURE__*/ _jsx(CodeMirror, {
-        ...props,
-        style: {
-            border: `1px solid ${theme.palette.divider}`
-        },
-        theme: isDarkMode ? 'dark' : 'light',
-        extensions: [
-            json(),
-            linter(jsonParseLinter()),
-            lintGutter()
-        ],
-        value: value,
-        onChange: (newValue)=>{
-            setValue(newValue);
-            // Trigger the provided onChange callback in real-time
-            if (props.onChange) {
-                props.onChange(newValue);
-            }
-        },
-        onBlur: ()=>{
-            // Don't trigger the provided onChange if the last processed value is equal to the current value.
-            // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded
-            // find & replace interface to close immediately.
-            if (lastProcessedValue !== value && props.onChange !== undefined) {
-                props.onChange(value);
-                setLastProcessedValue(value);
-            }
-        },
-        placeholder: props.placeholder
-    });
+    const $ = _c(2);
+    let t0;
+    if ($[0] !== props) {
+        t0 = /*#__PURE__*/ _jsx(CodeEditor, {
+            ...props,
+            extensions: JSON_EXTENSIONS,
+            serialize: toJSONText
+        });
+        $[0] = props;
+        $[1] = t0;
+    } else {
+        t0 = $[1];
+    }
+    return t0;
 }
 
 //# sourceMappingURL=JSONEditor.js.map

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.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 { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport type { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport CodeMirror from '@uiw/react-codemirror';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n        // Trigger the provided onChange callback in real-time\n        if (props.onChange) {\n          props.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 && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["json","jsonParseLinter","linter","lintGutter","useTheme","CodeMirror","useState","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"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,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AAEzC,OAAOC,gBAAgB,wBAAwB;AAE/C,SAASC,QAAQ,QAAQ,QAAQ;AAQjC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQL;IACd,MAAMM,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGR,SAAS,IAAMS,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGZ,SAAiBO;IAErE,qBACE,KAACR;QACE,GAAGG,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,EAAE;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACtB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DU,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;YACT,sDAAsD;YACtD,IAAIhB,MAAMe,QAAQ,EAAE;gBAClBf,MAAMe,QAAQ,CAACC;YACjB;QACF;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,QAAQ,KAAKG,WAAW;gBAChElB,MAAMe,QAAQ,CAACV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB,WAAW;;AAGpC"}
+{"version":3,"sources":["../src/JSONEditor.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 { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport type { ReactElement } from 'react';\n\nimport type { CodeEditorProps } from './CodeEditor/CodeEditor';\nimport { CodeEditor } from './CodeEditor/CodeEditor';\n\nconst JSON_EXTENSIONS = [json(), linter(jsonParseLinter()), lintGutter()];\n\nfunction toJSONText(value: unknown): string {\n  return JSON.stringify(value, null, 2);\n}\n\ntype JSONEditorProps<T> = CodeEditorProps<T>;\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  return <CodeEditor {...props} extensions={JSON_EXTENSIONS} serialize={toJSONText} />;\n}\n"],"names":["json","jsonParseLinter","linter","lintGutter","CodeEditor","JSON_EXTENSIONS","toJSONText","value","JSON","stringify"],"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,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AAItD,SAASC,UAAU,QAAQ,6BAA0B;AAErD,MAAMC,kBAAkB;IAACL;IAAQE,OAAOD;IAAoBE;CAAa;AAEzE,SAASG,WAAWC,KAAK;IACvB,OAAOC,KAAKC,SAAS,CAACF,OAAO,MAAM;AACrC;AAIA,OAAO"}

package/dist/Legend/CompactLegend.js

@@ -1,4 +1,5 @@
 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.
@@ -19,35 +20,84 @@ import { ListLegendItem } from "./ListLegendItem.js";
  * which corresponds to when legend.position is `bottom` with a relatively small
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
- */ export function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
-    return /*#__PURE__*/ _jsx(Box, {
-        component: "ul",
-        sx: {
-            width: '100%',
+ */ export function CompactLegend(t0) {
+    const $ = _c(17);
+    const { height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut } = t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = [
+            0,
+            1,
+            0,
+            0
+        ];
+        $[0] = t1;
+    } else {
+        t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== height) {
+        t2 = {
+            width: "100%",
             height,
-            padding: [
-                0,
-                1,
-                0,
-                0
-            ],
-            overflowY: 'scroll',
+            padding: t1,
+            overflowY: "scroll",
             margin: 0
-        },
-        children: items.map((item, index)=>/*#__PURE__*/ _jsx(ListLegendItem, {
-                item: item,
-                index: index,
-                isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
-                onMouseOver: onItemMouseOver,
-                onMouseOut: onItemMouseOut,
-                onClick: onLegendItemClick,
-                sx: {
-                    width: 'auto',
-                    float: 'left',
-                    paddingRight: 1.5
-                }
-            }, item.id))
-    });
+        };
+        $[1] = height;
+        $[2] = t2;
+    } else {
+        t2 = $[2];
+    }
+    let t3;
+    if ($[3] !== items || $[4] !== onItemMouseOut || $[5] !== onItemMouseOver || $[6] !== onLegendItemClick || $[7] !== selectedItems) {
+        let t4;
+        if ($[9] !== onItemMouseOut || $[10] !== onItemMouseOver || $[11] !== onLegendItemClick || $[12] !== selectedItems) {
+            t4 = (item, index)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+                    item: item,
+                    index: index,
+                    isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                    onMouseOver: onItemMouseOver,
+                    onMouseOut: onItemMouseOut,
+                    onClick: onLegendItemClick,
+                    sx: {
+                        width: "auto",
+                        float: "left",
+                        paddingRight: 1.5
+                    }
+                }, item.id);
+            $[9] = onItemMouseOut;
+            $[10] = onItemMouseOver;
+            $[11] = onLegendItemClick;
+            $[12] = selectedItems;
+            $[13] = t4;
+        } else {
+            t4 = $[13];
+        }
+        t3 = items.map(t4);
+        $[3] = items;
+        $[4] = onItemMouseOut;
+        $[5] = onItemMouseOver;
+        $[6] = onLegendItemClick;
+        $[7] = selectedItems;
+        $[8] = t3;
+    } else {
+        t3 = $[8];
+    }
+    let t4;
+    if ($[14] !== t2 || $[15] !== t3) {
+        t4 = /*#__PURE__*/ _jsx(Box, {
+            component: "ul",
+            sx: t2,
+            children: t3
+        });
+        $[14] = t2;
+        $[15] = t3;
+        $[16] = t4;
+    } else {
+        t4 = $[16];
+    }
+    return t4;
 }
 
 //# sourceMappingURL=CompactLegend.js.map

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport type { LegendItem, SelectedLegendItemState } from './legend-model';\nimport { isLegendItemVisuallySelected } from './legend-model';\nimport type { ListLegendItemProps } from './ListLegendItem';\nimport { ListLegendItem } from './ListLegendItem';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","isLegendItemVisuallySelected","ListLegendItem","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","id"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAIpC,SAASC,4BAA4B,QAAQ,oBAAiB;AAE9D,SAASC,cAAc,QAAQ,sBAAmB;AAWlD;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAAChB;gBAECe,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBlB,6BAA6BgB,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ,EAAE;;AAgBtB"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport type { LegendItem, SelectedLegendItemState } from './legend-model';\nimport { isLegendItemVisuallySelected } from './legend-model';\nimport type { ListLegendItemProps } from './ListLegendItem';\nimport { ListLegendItem } from './ListLegendItem';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","isLegendItemVisuallySelected","ListLegendItem"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAIpC,SAASC,4BAA4B,QAAQ,oBAAiB;AAE9D,SAASC,cAAc,QAAQ,sBAAmB;AAWlD;;;;;CAKC,GACD,OAAO"}