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

package/dist/ColorPicker/OptionsColorPicker.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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,63 +17,157 @@ import CircleIcon from "mdi-material-ui/Circle";
 import { useState } from "react";
 import { useChartsTheme } from "../context/index.js";
 import { ColorPicker } from "./ColorPicker.js";
-export function OptionsColorPicker({ label, color, size = 'small', onColorChange, onClear }) {
+export function OptionsColorPicker(t0) {
+    const $ = _c(26);
+    const { label, color, size: t1, onColorChange, onClear } = t0;
+    const size = t1 === undefined ? "small" : t1;
     const [anchorEl, setAnchorEl] = useState(null);
     const isOpen = Boolean(anchorEl);
-    const openColorPicker = (event)=>{
-        setAnchorEl(event.currentTarget);
-    };
-    const closeColorPicker = ()=>{
-        setAnchorEl(null);
-    };
-    const { thresholds: { defaultColor, palette } } = useChartsTheme();
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(ColorIconButton, {
-                size: size,
-                "aria-label": `change ${label} color`,
-                isSelected: isOpen,
-                iconColor: color,
-                onClick: openColorPicker,
-                children: /*#__PURE__*/ _jsx(CircleIcon, {})
-            }),
-            /*#__PURE__*/ _jsx(Popover, {
-                "data-testid": "options color picker",
-                open: isOpen,
-                anchorEl: anchorEl,
-                onClose: closeColorPicker,
-                slotProps: {
-                    paper: {
-                        sx: {
-                            padding: (theme)=>theme.spacing(2)
-                        }
-                    }
-                },
-                anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left'
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                },
-                children: /*#__PURE__*/ _jsx(ColorPicker, {
-                    color: color,
-                    palette: [
-                        defaultColor,
-                        ...palette
-                    ],
-                    onChange: onColorChange,
-                    onClear: onClear
-                })
-            })
-        ]
-    });
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = (event)=>{
+            setAnchorEl(event.currentTarget);
+        };
+        $[0] = t2;
+    } else {
+        t2 = $[0];
+    }
+    const openColorPicker = t2;
+    let t3;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = ()=>{
+            setAnchorEl(null);
+        };
+        $[1] = t3;
+    } else {
+        t3 = $[1];
+    }
+    const closeColorPicker = t3;
+    const { thresholds: t4 } = useChartsTheme();
+    const { defaultColor, palette } = t4;
+    const t5 = `change ${label} color`;
+    let t6;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = /*#__PURE__*/ _jsx(CircleIcon, {});
+        $[2] = t6;
+    } else {
+        t6 = $[2];
+    }
+    let t7;
+    if ($[3] !== color || $[4] !== isOpen || $[5] !== size || $[6] !== t5) {
+        t7 = /*#__PURE__*/ _jsx(ColorIconButton, {
+            size: size,
+            "aria-label": t5,
+            isSelected: isOpen,
+            iconColor: color,
+            onClick: openColorPicker,
+            children: t6
+        });
+        $[3] = color;
+        $[4] = isOpen;
+        $[5] = size;
+        $[6] = t5;
+        $[7] = t7;
+    } else {
+        t7 = $[7];
+    }
+    let t10;
+    let t8;
+    let t9;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = {
+            paper: {
+                sx: {
+                    padding: _temp
+                }
+            }
+        };
+        t9 = {
+            vertical: "top",
+            horizontal: "left"
+        };
+        t10 = {
+            vertical: "top",
+            horizontal: "right"
+        };
+        $[8] = t10;
+        $[9] = t8;
+        $[10] = t9;
+    } else {
+        t10 = $[8];
+        t8 = $[9];
+        t9 = $[10];
+    }
+    let t11;
+    if ($[11] !== defaultColor || $[12] !== palette) {
+        t11 = [
+            defaultColor,
+            ...palette
+        ];
+        $[11] = defaultColor;
+        $[12] = palette;
+        $[13] = t11;
+    } else {
+        t11 = $[13];
+    }
+    let t12;
+    if ($[14] !== color || $[15] !== onClear || $[16] !== onColorChange || $[17] !== t11) {
+        t12 = /*#__PURE__*/ _jsx(ColorPicker, {
+            color: color,
+            palette: t11,
+            onChange: onColorChange,
+            onClear: onClear
+        });
+        $[14] = color;
+        $[15] = onClear;
+        $[16] = onColorChange;
+        $[17] = t11;
+        $[18] = t12;
+    } else {
+        t12 = $[18];
+    }
+    let t13;
+    if ($[19] !== anchorEl || $[20] !== isOpen || $[21] !== t12) {
+        t13 = /*#__PURE__*/ _jsx(Popover, {
+            "data-testid": "options color picker",
+            open: isOpen,
+            anchorEl: anchorEl,
+            onClose: closeColorPicker,
+            slotProps: t8,
+            anchorOrigin: t9,
+            transformOrigin: t10,
+            children: t12
+        });
+        $[19] = anchorEl;
+        $[20] = isOpen;
+        $[21] = t12;
+        $[22] = t13;
+    } else {
+        t13 = $[22];
+    }
+    let t14;
+    if ($[23] !== t13 || $[24] !== t7) {
+        t14 = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                t7,
+                t13
+            ]
+        });
+        $[23] = t13;
+        $[24] = t7;
+        $[25] = t14;
+    } else {
+        t14 = $[25];
+    }
+    return t14;
+}
+function _temp(theme) {
+    return theme.spacing(2);
 }
 const ColorIconButton = styled(IconButton, {
-    shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
+    shouldForwardProp: (props)=>props !== "isSelected" && props !== "iconColor"
 })(({ iconColor, isSelected })=>({
-        backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
+        backgroundColor: isSelected && iconColor ? `${iconColor}3F` : "undefined",
         color: iconColor
     }));
 

package/dist/ColorPicker/OptionsColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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 { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport type { ReactElement, MouseEvent } from 'react';\nimport { useState } from 'react';\n\nimport { useChartsTheme } from '../context';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  size?: 'small' | 'medium' | 'large';\n  onColorChange: (color: string) => void;\n  onClear?: () => void;\n}\n\nexport function OptionsColorPicker({\n  label,\n  color,\n  size = 'small',\n  onColorChange,\n  onClear,\n}: OptionsColorPickerProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = (): void => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size={size}\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        slotProps={{ paper: { sx: { padding: (theme) => theme.spacing(2) } } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} palette={[defaultColor, ...palette]} onChange={onColorChange} onClear={onClear} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["styled","IconButton","Popover","CircleIcon","useState","useChartsTheme","ColorPicker","OptionsColorPicker","label","color","size","onColorChange","onClear","anchorEl","setAnchorEl","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","slotProps","paper","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,cAAc,QAAQ,sBAAa;AAC5C,SAASC,WAAW,QAAQ,mBAAgB;AAU5C,OAAO,SAASC,mBAAmB,EACjCC,KAAK,EACLC,KAAK,EACLC,OAAO,OAAO,EACdC,aAAa,EACbC,OAAO,EACiB;IACxB,MAAM,CAACC,UAAUC,YAAY,GAAGV,SAAmC;IACnE,MAAMW,SAASC,QAAQH;IAEvB,MAAMI,kBAAkB,CAACC;QACvBJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBN,YAAY;IACd;IAEA,MAAM,EACJO,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGlB;IAEJ,qBACE;;0BACE,KAACmB;gBACCd,MAAMA;gBACNe,cAAY,CAAC,OAAO,EAAEjB,MAAM,MAAM,CAAC;gBACnCkB,YAAYX;gBACZY,WAAWlB;gBACXmB,SAASX;0BAET,cAAA,KAACd;;0BAEH,KAACD;gBACC2B,eAAY;gBACZC,MAAMf;gBACNF,UAAUA;gBACVkB,SAASX;gBACTY,WAAW;oBAAEC,OAAO;wBAAEC,IAAI;4BAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;oBAAE;gBAAE;gBACrEC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAAClC;oBAAYG,OAAOA;oBAAOc,SAAS;wBAACD;2BAAiBC;qBAAQ;oBAAEmB,UAAU/B;oBAAeC,SAASA;;;;;AAI1G;AAEA,MAAMY,kBAAkBxB,OAAOC,YAAY;IACzC0C,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEjB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCmB,iBAAiBnB,cAAcC,YAAY,GAAGA,UAAU,EAAE,CAAC,GAAG;QAC9DlB,OAAOkB;IACT,CAAA"}
+{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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 { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport type { ReactElement, MouseEvent } from 'react';\nimport { useState } from 'react';\n\nimport { useChartsTheme } from '../context';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  size?: 'small' | 'medium' | 'large';\n  onColorChange: (color: string) => void;\n  onClear?: () => void;\n}\n\nexport function OptionsColorPicker({\n  label,\n  color,\n  size = 'small',\n  onColorChange,\n  onClear,\n}: OptionsColorPickerProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = (): void => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size={size}\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        slotProps={{ paper: { sx: { padding: (theme) => theme.spacing(2) } } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} palette={[defaultColor, ...palette]} onChange={onColorChange} onClear={onClear} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["styled","IconButton","Popover","CircleIcon","useState","useChartsTheme","ColorPicker","ColorIconButton","shouldForwardProp","props","iconColor","isSelected","backgroundColor","color"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,cAAc,QAAQ,sBAAa;AAC5C,SAASC,WAAW,QAAQ,mBAAgB;AAU5C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDP,MAAMC,kBAAkBP,OAAOC,YAAY;IACzCO,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAM,CAAA;QACjCC,iBAAiBD,cAAcD,YAAY,GAAGA,UAAU,EAAE,CAAC,GAAG;QAC9DG,OAAOH;IACT,CAAA"}

package/dist/ContentWithLegend/ContentWithLegend.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.
@@ -21,49 +22,151 @@ import { getContentWithLegendLayout } from "./model/content-with-legend-model.js
  *
  * See the documentation for the `Legend` component for more details about the
  * features and configuration of the legend.
- */ export function ContentWithLegend({ children, legendProps, width, height, spacing = 0, legendSize, minChildrenWidth = 100, minChildrenHeight = 100 }) {
+ */ export function ContentWithLegend(t0) {
+    const $ = _c(38);
+    const { children, legendProps, width, height, spacing: t1, legendSize, minChildrenWidth: t2, minChildrenHeight: t3 } = t0;
+    const spacing = t1 === undefined ? 0 : t1;
+    const minChildrenWidth = t2 === undefined ? 100 : t2;
+    const minChildrenHeight = t3 === undefined ? 100 : t3;
     const theme = useTheme();
-    const { content, legend, margin } = getContentWithLegendLayout({
-        width,
-        height,
-        legendProps,
-        minChildrenHeight,
-        minChildrenWidth,
-        spacing,
-        theme,
-        legendSize: getLegendSize(legendSize)
-    });
-    return /*#__PURE__*/ _jsxs(Box, {
-        style: {
+    let T0;
+    let T1;
+    let legend;
+    let t4;
+    let t5;
+    let t6;
+    let t7;
+    let t8;
+    if ($[0] !== children || $[1] !== height || $[2] !== legendProps || $[3] !== legendSize || $[4] !== minChildrenHeight || $[5] !== minChildrenWidth || $[6] !== spacing || $[7] !== theme || $[8] !== width) {
+        const { content, legend: t9, margin } = getContentWithLegendLayout({
             width,
-            height
-        },
-        sx: {
-            position: 'relative',
-            overflow: 'hidden'
-        },
-        children: [
-            /*#__PURE__*/ _jsx(Box, {
-                style: {
-                    width: content.width,
-                    height: content.height
-                },
-                sx: {
-                    marginRight: `${margin.right}px`,
-                    marginBottom: `${margin.bottom}px`
-                },
-                children: typeof children === 'function' ? children({
-                    width: content.width,
-                    height: content.height
-                }) : children
-            }),
-            legendProps && legend.show && /*#__PURE__*/ _jsx(Legend, {
-                ...legendProps,
-                height: legend.height,
-                width: legend.width
-            })
-        ]
-    });
+            height,
+            legendProps,
+            minChildrenHeight,
+            minChildrenWidth,
+            spacing,
+            theme,
+            legendSize: getLegendSize(legendSize)
+        });
+        legend = t9;
+        T1 = Box;
+        if ($[17] !== height || $[18] !== width) {
+            t7 = {
+                width,
+                height
+            };
+            $[17] = height;
+            $[18] = width;
+            $[19] = t7;
+        } else {
+            t7 = $[19];
+        }
+        if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+            t8 = {
+                position: "relative",
+                overflow: "hidden"
+            };
+            $[20] = t8;
+        } else {
+            t8 = $[20];
+        }
+        T0 = Box;
+        t4 = {
+            width: content.width,
+            height: content.height
+        };
+        const t10 = `${margin.right}px`;
+        const t11 = `${margin.bottom}px`;
+        if ($[21] !== t10 || $[22] !== t11) {
+            t5 = {
+                marginRight: t10,
+                marginBottom: t11
+            };
+            $[21] = t10;
+            $[22] = t11;
+            $[23] = t5;
+        } else {
+            t5 = $[23];
+        }
+        t6 = typeof children === "function" ? children({
+            width: content.width,
+            height: content.height
+        }) : children;
+        $[0] = children;
+        $[1] = height;
+        $[2] = legendProps;
+        $[3] = legendSize;
+        $[4] = minChildrenHeight;
+        $[5] = minChildrenWidth;
+        $[6] = spacing;
+        $[7] = theme;
+        $[8] = width;
+        $[9] = T0;
+        $[10] = T1;
+        $[11] = legend;
+        $[12] = t4;
+        $[13] = t5;
+        $[14] = t6;
+        $[15] = t7;
+        $[16] = t8;
+    } else {
+        T0 = $[9];
+        T1 = $[10];
+        legend = $[11];
+        t4 = $[12];
+        t5 = $[13];
+        t6 = $[14];
+        t7 = $[15];
+        t8 = $[16];
+    }
+    let t9;
+    if ($[24] !== T0 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6) {
+        t9 = /*#__PURE__*/ _jsx(T0, {
+            style: t4,
+            sx: t5,
+            children: t6
+        });
+        $[24] = T0;
+        $[25] = t4;
+        $[26] = t5;
+        $[27] = t6;
+        $[28] = t9;
+    } else {
+        t9 = $[28];
+    }
+    let t10;
+    if ($[29] !== legend || $[30] !== legendProps) {
+        t10 = legendProps && legend.show && /*#__PURE__*/ _jsx(Legend, {
+            ...legendProps,
+            height: legend.height,
+            width: legend.width
+        });
+        $[29] = legend;
+        $[30] = legendProps;
+        $[31] = t10;
+    } else {
+        t10 = $[31];
+    }
+    let t11;
+    if ($[32] !== T1 || $[33] !== t10 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
+        t11 = /*#__PURE__*/ _jsxs(T1, {
+            style: t7,
+            sx: t8,
+            children: [
+                t9,
+                t10
+            ]
+        });
+        $[32] = T1;
+        $[33] = t10;
+        $[34] = t7;
+        $[35] = t8;
+        $[36] = t9;
+        $[37] = t11;
+    } else {
+        t11 = $[37];
+    }
+    return t11;
 }
 
 //# sourceMappingURL=ContentWithLegend.js.map

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { Legend } from '../Legend';\nimport { getLegendSize } from '../model';\nimport type { ContentWithLegendProps } from './model/content-with-legend-model';\nimport { getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","Legend","getLegendSize","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAG9C,SAASC,MAAM,QAAQ,qBAAY;AACnC,SAASC,aAAa,QAAQ,oBAAW;AAEzC,SAASC,0BAA0B,QAAQ,uCAAoC;AAE/E;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYR,cAAcQ;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACxB;gBAAQ,GAAGK,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { Legend } from '../Legend';\nimport { getLegendSize } from '../model';\nimport type { ContentWithLegendProps } from './model/content-with-legend-model';\nimport { getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","Legend","getLegendSize","getContentWithLegendLayout"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAG9C,SAASC,MAAM,QAAQ,qBAAY;AACnC,SAASC,aAAa,QAAQ,oBAAW;AAEzC,SAASC,0BAA0B,QAAQ,uCAAoC;AAE/E;;;;;;CAMC,GACD,OAAO"}

package/dist/DensitySelector/DensitySelector.js

@@ -11,36 +11,69 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { OptionsEditorControl } from "../OptionsEditorLayout/index.js";
 import { SettingsAutocomplete } from "../SettingsAutocomplete/index.js";
 const DENSITY_OPTIONS = [
     {
-        id: 'compact',
-        label: 'Compact'
+        id: "compact",
+        label: "Compact"
     },
     {
-        id: 'standard',
-        label: 'Standard'
+        id: "standard",
+        label: "Standard"
     },
     {
-        id: 'comfortable',
-        label: 'Comfortable'
+        id: "comfortable",
+        label: "Comfortable"
     }
 ];
-export function DensitySelector({ onChange, value = 'standard' }) {
-    const handleSortChange = (_, { id })=>{
-        onChange(id);
-    };
-    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
-        label: "Density",
-        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-            value: DENSITY_OPTIONS.find((o)=>o.id === value),
-            options: DENSITY_OPTIONS,
-            getOptionLabel: (o)=>o.label,
-            onChange: handleSortChange,
-            disableClearable: true
-        })
-    });
+export function DensitySelector(t0) {
+    const $ = _c(7);
+    const { onChange, value: t1 } = t0;
+    const value = t1 === undefined ? "standard" : t1;
+    let t2;
+    if ($[0] !== onChange) {
+        t2 = (_, t3)=>{
+            const { id } = t3;
+            onChange(id);
+        };
+        $[0] = onChange;
+        $[1] = t2;
+    } else {
+        t2 = $[1];
+    }
+    const handleSortChange = t2;
+    let t3;
+    if ($[2] !== value) {
+        t3 = DENSITY_OPTIONS.find((o)=>o.id === value);
+        $[2] = value;
+        $[3] = t3;
+    } else {
+        t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== handleSortChange || $[5] !== t3) {
+        t4 = /*#__PURE__*/ _jsx(OptionsEditorControl, {
+            label: "Density",
+            control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                value: t3,
+                options: DENSITY_OPTIONS,
+                getOptionLabel: _temp,
+                onChange: handleSortChange,
+                disableClearable: true
+            })
+        });
+        $[4] = handleSortChange;
+        $[5] = t3;
+        $[6] = t4;
+    } else {
+        t4 = $[6];
+    }
+    return t4;
+}
+function _temp(o_0) {
+    return o_0.label;
 }
 
 //# sourceMappingURL=DensitySelector.js.map

package/dist/DensitySelector/DensitySelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DensitySelector/DensitySelector.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 { ReactElement } from 'react';\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst DENSITY_OPTIONS: Array<{ id: DensityOption; label: string }> = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'standard', label: 'Standard' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport type DensityOption = 'compact' | 'standard' | 'comfortable';\n\nexport interface DensitySelectorProps {\n  onChange: (density: DensityOption) => void;\n  value?: DensityOption;\n}\n\nexport function DensitySelector({ onChange, value = 'standard' }: DensitySelectorProps): ReactElement {\n  const handleSortChange = (_: unknown, { id }: { id: DensityOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Density\"\n      control={\n        <SettingsAutocomplete\n          value={DENSITY_OPTIONS.find((o) => o.id === value)}\n          options={DENSITY_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","DENSITY_OPTIONS","id","label","DensitySelector","onChange","value","handleSortChange","_","control","find","o","options","getOptionLabel","disableClearable"],"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;;AAIjC,SAASA,oBAAoB,QAAQ,kCAAyB;AAC9D,SAASC,oBAAoB,QAAQ,mCAA0B;AAE/D,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAWC,OAAO;IAAU;IAClC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;CAC3C;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,UAAU,EAAwB;IACpF,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACjEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/DensitySelector/DensitySelector.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 { ReactElement } from 'react';\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst DENSITY_OPTIONS: Array<{ id: DensityOption; label: string }> = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'standard', label: 'Standard' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport type DensityOption = 'compact' | 'standard' | 'comfortable';\n\nexport interface DensitySelectorProps {\n  onChange: (density: DensityOption) => void;\n  value?: DensityOption;\n}\n\nexport function DensitySelector({ onChange, value = 'standard' }: DensitySelectorProps): ReactElement {\n  const handleSortChange = (_: unknown, { id }: { id: DensityOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Density\"\n      control={\n        <SettingsAutocomplete\n          value={DENSITY_OPTIONS.find((o) => o.id === value)}\n          options={DENSITY_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","DENSITY_OPTIONS","id","label"],"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;;;AAIjC,SAASA,oBAAoB,QAAQ,kCAAyB;AAC9D,SAASC,oBAAoB,QAAQ,mCAA0B;AAE/D,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAWC,OAAO;IAAU;IAClC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;CAC3C;AASD,OAAO"}

package/dist/Dialog/Dialog.d.ts

@@ -1,6 +1,7 @@
 import type { StyledComponent } from '@emotion/styled';
-import type { ButtonProps, DialogProps, DialogTitleProps, DialogContentProps as MuiDialogContentProps } from '@mui/material';
+import type { ButtonProps, DialogProps, DialogTitleProps, DialogContentProps as MuiDialogContentProps, Theme } from '@mui/material';
 import { DialogActions } from '@mui/material';
+import type { MUIStyledCommonProps } from '@mui/system';
 import type { MouseEvent, ReactElement } from 'react';
 export interface DialogHeaderProps extends DialogTitleProps {
     /**
@@ -14,7 +15,7 @@ declare const Header: ({ children, onClose, ...props }: DialogHeaderProps) => Re
 declare const Content: ({ children, sx, ...props }: DialogContentProps) => ReactElement;
 declare const PrimaryButton: ({ children, ...props }: DialogButtonProps) => ReactElement;
 declare const SecondaryButton: ({ children, ...props }: DialogButtonProps) => ReactElement;
-declare const Form: StyledComponent<React.ComponentProps<'form'>>;
+declare const Form: StyledComponent<MUIStyledCommonProps<Theme>, React.ComponentProps<'form'>>;
 export declare const Dialog: React.FC<DialogProps> & {
     Header: typeof Header;
     Form: typeof Form;

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,kBAAkB,IAAI,qBAAqB,EAE5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,aAAa,EAMd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,QAAA,MAAM,MAAM,oCAAqC,iBAAiB,KAAG,YAapE,CAAC;AAEF,QAAA,MAAM,OAAO,+BAAgC,kBAAkB,KAAG,YAIjE,CAAC;AAEF,QAAA,MAAM,aAAa,2BAA4B,iBAAiB,KAAG,YAIlE,CAAC;AAEF,QAAA,MAAM,eAAe,2BAA4B,iBAAiB,KAAG,YAIpE,CAAC;AAQF,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAItD,CAAC;AAUH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,aAAa,CAAC;IACpC,eAAe,EAAE,OAAO,eAAe,CAAC;IACxC,OAAO,EAAE,OAAO,aAAa,CAAC;CAC4C,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,kBAAkB,IAAI,qBAAqB,EAC3C,KAAK,EACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,aAAa,EAMd,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,QAAA,MAAM,MAAM,oCAAqC,iBAAiB,KAAG,YAapE,CAAC;AAEF,QAAA,MAAM,OAAO,+BAAgC,kBAAkB,KAAG,YAIjE,CAAC;AAEF,QAAA,MAAM,aAAa,2BAA4B,iBAAiB,KAAG,YAIlE,CAAC;AAEF,QAAA,MAAM,eAAe,2BAA4B,iBAAiB,KAAG,YAIpE,CAAC;AAQF,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAInF,CAAC;AAUH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,aAAa,CAAC;IACpC,eAAe,EAAE,OAAO,eAAe,CAAC;IACxC,OAAO,EAAE,OAAO,aAAa,CAAC;CAC4C,CAAC"}