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

package/dist/OptionsEditorLayout/OptionsEditorGrid.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.
@@ -15,12 +16,22 @@ import { Grid } from "@mui/material";
 /**
  * Top level grid container used to lay out content for editing in panel
  * options.
- */ export const OptionsEditorGrid = ({ children })=>{
-    return /*#__PURE__*/ _jsx(Grid, {
-        container: true,
-        spacing: 8,
-        children: children
-    });
+ */ export const OptionsEditorGrid = (t0)=>{
+    const $ = _c(2);
+    const { children } = t0;
+    let t1;
+    if ($[0] !== children) {
+        t1 = /*#__PURE__*/ _jsx(Grid, {
+            container: true,
+            spacing: 8,
+            children: children
+        });
+        $[0] = children;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    return t1;
 };
 
 //# sourceMappingURL=OptionsEditorGrid.js.map

package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.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 { Grid } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport type OptionsEditorGridProps = {\n  /**\n   * 1-3 `OptionsEditorColumn` components to render content in columns.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Top level grid container used to lay out content for editing in panel\n * options.\n */\nexport const OptionsEditorGrid = ({ children }: OptionsEditorGridProps): ReactElement => {\n  return (\n    <Grid container spacing={8}>\n      {children}\n    </Grid>\n  );\n};\n"],"names":["Grid","OptionsEditorGrid","children","container","spacing"],"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,QAAQ,gBAAgB;AAUrC;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,QAAQ,EAA0B;IACpE,qBACE,KAACF;QAAKG,SAAS;QAACC,SAAS;kBACtBF;;AAGP,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.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 { Grid } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport type OptionsEditorGridProps = {\n  /**\n   * 1-3 `OptionsEditorColumn` components to render content in columns.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Top level grid container used to lay out content for editing in panel\n * options.\n */\nexport const OptionsEditorGrid = ({ children }: OptionsEditorGridProps): ReactElement => {\n  return (\n    <Grid container spacing={8}>\n      {children}\n    </Grid>\n  );\n};\n"],"names":["Grid","OptionsEditorGrid"],"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,QAAQ,gBAAgB;AAUrC;;;CAGC,GACD,OAAO,MAAMC,oBAAoB;;;;;;;;;;;;;;;;EAM/B"}

package/dist/OptionsEditorLayout/OptionsEditorGroup.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.
@@ -15,34 +16,81 @@ import { Box, Typography, Stack } from "@mui/material";
 import React from "react";
 /**
  * Group similar content within panel options.
- */ export const OptionsEditorGroup = ({ title, children, icon })=>{
-    return /*#__PURE__*/ _jsxs(Box, {
-        children: [
-            /*#__PURE__*/ _jsxs(Box, {
-                display: "flex",
-                borderBottom: 1,
-                borderColor: "grey.300",
-                marginBottom: (theme)=>theme.spacing(1),
-                children: [
-                    /*#__PURE__*/ _jsx(Typography, {
-                        variant: "overline",
-                        component: "h4",
-                        children: title
-                    }),
-                    icon && /*#__PURE__*/ _jsx(Box, {
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: icon
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Stack, {
-                spacing: 1,
-                children: children
-            })
-        ]
-    });
+ */ export const OptionsEditorGroup = (t0)=>{
+    const $ = _c(12);
+    const { title, children, icon } = t0;
+    let t1;
+    if ($[0] !== title) {
+        t1 = /*#__PURE__*/ _jsx(Typography, {
+            variant: "overline",
+            component: "h4",
+            children: title
+        });
+        $[0] = title;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== icon) {
+        t2 = icon && /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                marginLeft: "auto"
+            },
+            children: icon
+        });
+        $[2] = icon;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== t1 || $[5] !== t2) {
+        t3 = /*#__PURE__*/ _jsxs(Box, {
+            display: "flex",
+            borderBottom: 1,
+            borderColor: "grey.300",
+            marginBottom: _temp,
+            children: [
+                t1,
+                t2
+            ]
+        });
+        $[4] = t1;
+        $[5] = t2;
+        $[6] = t3;
+    } else {
+        t3 = $[6];
+    }
+    let t4;
+    if ($[7] !== children) {
+        t4 = /*#__PURE__*/ _jsx(Stack, {
+            spacing: 1,
+            children: children
+        });
+        $[7] = children;
+        $[8] = t4;
+    } else {
+        t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== t3 || $[10] !== t4) {
+        t5 = /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                t3,
+                t4
+            ]
+        });
+        $[9] = t3;
+        $[10] = t4;
+        $[11] = t5;
+    } else {
+        t5 = $[11];
+    }
+    return t5;
 };
+function _temp(theme) {
+    return theme.spacing(1);
+}
 
 //# sourceMappingURL=OptionsEditorGroup.js.map

package/dist/OptionsEditorLayout/OptionsEditorGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.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, Typography, Stack } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport React from 'react';\n\nexport type OptionsEditorGroupProps = {\n  /**\n   * Text that communicates the purpose of the grouping.\n   */\n  title: string;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\n/**\n * Group similar content within panel options.\n */\nexport const OptionsEditorGroup = ({ title, children, icon }: OptionsEditorGroupProps): ReactElement => {\n  return (\n    <Box>\n      <Box display=\"flex\" borderBottom={1} borderColor=\"grey.300\" marginBottom={(theme) => theme.spacing(1)}>\n        <Typography variant=\"overline\" component=\"h4\">\n          {title}\n        </Typography>\n        {icon && <Box sx={{ marginLeft: 'auto' }}>{icon}</Box>}\n      </Box>\n      <Stack spacing={1}>{children}</Stack>\n    </Box>\n  );\n};\n"],"names":["Box","Typography","Stack","React","OptionsEditorGroup","title","children","icon","display","borderBottom","borderColor","marginBottom","theme","spacing","variant","component","sx","marginLeft"],"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,UAAU,EAAEC,KAAK,QAAQ,gBAAgB;AAEvD,OAAOC,WAAW,QAAQ;AAW1B;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAA2B;IACnF,qBACE,MAACP;;0BACC,MAACA;gBAAIQ,SAAQ;gBAAOC,cAAc;gBAAGC,aAAY;gBAAWC,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;;kCACjG,KAACZ;wBAAWa,SAAQ;wBAAWC,WAAU;kCACtCV;;oBAEFE,sBAAQ,KAACP;wBAAIgB,IAAI;4BAAEC,YAAY;wBAAO;kCAAIV;;;;0BAE7C,KAACL;gBAAMW,SAAS;0BAAIP;;;;AAG1B,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.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, Typography, Stack } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport React from 'react';\n\nexport type OptionsEditorGroupProps = {\n  /**\n   * Text that communicates the purpose of the grouping.\n   */\n  title: string;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\n/**\n * Group similar content within panel options.\n */\nexport const OptionsEditorGroup = ({ title, children, icon }: OptionsEditorGroupProps): ReactElement => {\n  return (\n    <Box>\n      <Box display=\"flex\" borderBottom={1} borderColor=\"grey.300\" marginBottom={(theme) => theme.spacing(1)}>\n        <Typography variant=\"overline\" component=\"h4\">\n          {title}\n        </Typography>\n        {icon && <Box sx={{ marginLeft: 'auto' }}>{icon}</Box>}\n      </Box>\n      <Stack spacing={1}>{children}</Stack>\n    </Box>\n  );\n};\n"],"names":["Box","Typography","Stack","React","OptionsEditorGroup"],"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,UAAU,EAAEC,KAAK,QAAQ,gBAAgB;AAEvD,OAAOC,WAAW,QAAQ;AAW1B;;CAEC,GACD,OAAO,MAAMC,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYhC"}

package/dist/Overlay/Overlay.js

@@ -11,42 +11,86 @@
 // 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 { Skeleton, Stack, Typography } from "@mui/material";
 export function TextOverlay(props) {
+    const $ = _c(3);
     const { message } = props;
-    return /*#__PURE__*/ _jsx(Stack, {
-        sx: {
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center'
-        },
-        children: /*#__PURE__*/ _jsx(Typography, {
-            children: message
-        })
-    });
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            height: "100%",
+            alignItems: "center",
+            justifyContent: "center"
+        };
+        $[0] = t0;
+    } else {
+        t0 = $[0];
+    }
+    let t1;
+    if ($[1] !== message) {
+        t1 = /*#__PURE__*/ _jsx(Stack, {
+            sx: t0,
+            children: /*#__PURE__*/ _jsx(Typography, {
+                children: message
+            })
+        });
+        $[1] = message;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    return t1;
 }
 export function NoDataOverlay(props) {
+    const $ = _c(2);
     const { resource } = props;
-    return /*#__PURE__*/ _jsx(TextOverlay, {
-        message: `No ${resource}`
-    });
+    const t0 = `No ${resource}`;
+    let t1;
+    if ($[0] !== t0) {
+        t1 = /*#__PURE__*/ _jsx(TextOverlay, {
+            message: t0
+        });
+        $[0] = t0;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    return t1;
 }
 export function LoadingOverlay(props) {
-    const { variant = 'rounded' } = props;
-    return /*#__PURE__*/ _jsx(Stack, {
-        sx: {
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
+    const $ = _c(3);
+    const { variant: t0 } = props;
+    const variant = t0 === undefined ? "rounded" : t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = {
+            height: "100%",
+            alignItems: "center",
+            justifyContent: "center",
             px: 1
-        },
-        children: /*#__PURE__*/ _jsx(Skeleton, {
-            variant: variant,
-            width: "100%",
-            height: "30%",
-            "aria-label": "Loading..."
-        })
-    });
+        };
+        $[0] = t1;
+    } else {
+        t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== variant) {
+        t2 = /*#__PURE__*/ _jsx(Stack, {
+            sx: t1,
+            children: /*#__PURE__*/ _jsx(Skeleton, {
+                variant: variant,
+                width: "100%",
+                height: "30%",
+                "aria-label": "Loading..."
+            })
+        });
+        $[1] = variant;
+        $[2] = t2;
+    } else {
+        t2 = $[2];
+    }
+    return t2;
 }
 
 //# sourceMappingURL=Overlay.js.map

package/dist/Overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Overlay/Overlay.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 { SkeletonOwnProps } from '@mui/material';\nimport { Skeleton, Stack, Typography } from '@mui/material';\nimport type { ReactElement } from 'react';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps): ReactElement {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps): ReactElement {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', px: 1 }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography","TextOverlay","props","message","sx","height","alignItems","justifyContent","NoDataOverlay","resource","LoadingOverlay","variant","px","width","aria-label"],"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,QAAQ,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAO5D,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;QAAS;kBAC1E,cAAA,KAACP;sBAAYG;;;AAGnB;AAMA,OAAO,SAASK,cAAcN,KAAyB;IACrD,MAAM,EAAEO,QAAQ,EAAE,GAAGP;IAErB,qBAAO,KAACD;QAAYE,SAAS,CAAC,GAAG,EAAEM,UAAU;;AAC/C;AAMA,OAAO,SAASC,eAAeR,KAA0B;IACvD,MAAM,EAAES,UAAU,SAAS,EAAE,GAAGT;IAEhC,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;YAAUK,IAAI;QAAE;kBACjF,cAAA,KAACd;YAASa,SAASA;YAASE,OAAM;YAAOR,QAAO;YAAMS,cAAW;;;AAGvE"}
+{"version":3,"sources":["../../src/Overlay/Overlay.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 { SkeletonOwnProps } from '@mui/material';\nimport { Skeleton, Stack, Typography } from '@mui/material';\nimport type { ReactElement } from 'react';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps): ReactElement {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps): ReactElement {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', px: 1 }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography"],"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,QAAQ,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAO5D,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcP,OAAO;;;;;;;;;;;;;;;;AAUP,OAAO"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.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.
@@ -12,49 +13,106 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, FormControl, MenuItem, Select } from "@mui/material";
-import { useMemo } from "react";
 export function RefreshIntervalPicker(props) {
+    const $ = _c(17);
     const { value, onChange, timeOptions, height } = props;
-    // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
-    const customInterval = useMemo(()=>{
+    let t0;
+    bb0: {
         if (value && !timeOptions.some((option)=>option.value.pastDuration === value)) {
-            return /*#__PURE__*/ _jsx(MenuItem, {
-                value: value,
-                children: value
-            });
+            let t1;
+            if ($[0] !== value) {
+                t1 = /*#__PURE__*/ _jsx(MenuItem, {
+                    value: value,
+                    children: value
+                });
+                $[0] = value;
+                $[1] = t1;
+            } else {
+                t1 = $[1];
+            }
+            t0 = t1;
+            break bb0;
         }
-    }, [
-        timeOptions,
-        value
-    ]);
-    return /*#__PURE__*/ _jsx(FormControl, {
-        children: /*#__PURE__*/ _jsx(Box, {
-            children: /*#__PURE__*/ _jsxs(Select, {
-                id: "refreshInterval",
-                value: value,
-                onChange: (event)=>{
-                    const duration = event.target.value;
-                    onChange(duration);
-                },
-                inputProps: {
-                    'aria-label': `Select refresh interval. Currently set to ${value}`
-                },
-                sx: {
-                    '.MuiSelect-select': height ? {
-                        lineHeight: height,
-                        paddingY: 0
-                    } : {}
-                },
-                children: [
-                    timeOptions.map((item, idx)=>/*#__PURE__*/ _jsx(MenuItem, {
-                            value: item.value.pastDuration,
-                            children: item.display
-                        }, idx)),
-                    customInterval
-                ]
+        t0 = undefined;
+    }
+    const customInterval = t0;
+    let t1;
+    if ($[2] !== onChange) {
+        t1 = (event)=>{
+            const duration = event.target.value;
+            onChange(duration);
+        };
+        $[2] = onChange;
+        $[3] = t1;
+    } else {
+        t1 = $[3];
+    }
+    const t2 = `Select refresh interval. Currently set to ${value}`;
+    let t3;
+    if ($[4] !== t2) {
+        t3 = {
+            "aria-label": t2
+        };
+        $[4] = t2;
+        $[5] = t3;
+    } else {
+        t3 = $[5];
+    }
+    let t4;
+    if ($[6] !== height) {
+        t4 = {
+            ".MuiSelect-select": height ? {
+                lineHeight: height,
+                paddingY: 0
+            } : {}
+        };
+        $[6] = height;
+        $[7] = t4;
+    } else {
+        t4 = $[7];
+    }
+    let t5;
+    if ($[8] !== timeOptions) {
+        t5 = timeOptions.map(_temp);
+        $[8] = timeOptions;
+        $[9] = t5;
+    } else {
+        t5 = $[9];
+    }
+    let t6;
+    if ($[10] !== customInterval || $[11] !== t1 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== value) {
+        t6 = /*#__PURE__*/ _jsx(FormControl, {
+            children: /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsxs(Select, {
+                    id: "refreshInterval",
+                    value: value,
+                    onChange: t1,
+                    inputProps: t3,
+                    sx: t4,
+                    children: [
+                        t5,
+                        customInterval
+                    ]
+                })
             })
-        })
-    });
+        });
+        $[10] = customInterval;
+        $[11] = t1;
+        $[12] = t3;
+        $[13] = t4;
+        $[14] = t5;
+        $[15] = value;
+        $[16] = t6;
+    } else {
+        t6 = $[16];
+    }
+    return t6;
+}
+function _temp(item, idx) {
+    return /*#__PURE__*/ _jsx(MenuItem, {
+        value: item.value.pastDuration,
+        children: item.display
+    }, idx);
 }
 
 //# sourceMappingURL=RefreshIntervalPicker.js.map

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.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, FormControl, MenuItem, Select } from '@mui/material';\nimport type { DurationString } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {\n  const { value, onChange, timeOptions, height } = props;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={value}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${value}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"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,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAGnE,SAASC,OAAO,QAAQ,QAAQ;AAWhC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IAEjD,oHAAoH;IACpH,MAAMK,iBAAiBP,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYG,IAAI,CAAC,CAACC,SAAWA,OAAON,KAAK,CAACO,YAAY,KAAKP,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCY,IAAG;gBACHR,OAAOA;gBACPC,UAAU,CAACQ;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACX,KAAK;oBACnCC,SAASS;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAEZ,OAAO;gBACpE;gBACAa,IAAI;oBACF,qBAAqBV,SAAS;wBAAEW,YAAYX;wBAAQY,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECb,YAAYc,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACvB;4BAAmBK,OAAOiB,KAAKjB,KAAK,CAACO,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}
+{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.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, FormControl, MenuItem, Select } from '@mui/material';\nimport type { DurationString } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {\n  const { value, onChange, timeOptions, height } = props;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={value}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${value}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select"],"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,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAcnE,OAAO"}

package/dist/RepeatGrid/RepeatGrid.js

@@ -11,58 +11,130 @@
 // 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 { Box } from "@mui/material";
-import { useMemo } from "react";
-export function RepeatGrid({ repeatItems, maxPer, gap, renderItem, containerSx, rowSx }) {
-    const { rows, perRow } = useMemo(()=>{
-        const perRow = Math.max(1, maxPer);
-        const rows = [];
-        for(let i = 0; i < repeatItems.length; i += perRow){
+export function RepeatGrid(t0) {
+    const $ = _c(27);
+    const { repeatItems, maxPer, gap, renderItem, containerSx, rowSx } = t0;
+    const perRow = Math.max(1, maxPer);
+    let rows;
+    if ($[0] !== perRow || $[1] !== repeatItems) {
+        rows = [];
+        for(let i = 0; i < repeatItems.length; i = i + perRow, i){
             rows.push(repeatItems.slice(i, i + perRow));
         }
-        return {
+        $[0] = perRow;
+        $[1] = repeatItems;
+        $[2] = rows;
+    } else {
+        rows = $[2];
+    }
+    let t1;
+    if ($[3] !== perRow || $[4] !== rows) {
+        t1 = {
             rows,
             perRow
         };
-    }, [
-        maxPer,
-        repeatItems
-    ]);
-    return /*#__PURE__*/ _jsx(Box, {
-        sx: [
-            {
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                height: '100%',
-                gap: `${gap}px`
-            },
-            ...Array.isArray(containerSx) ? containerSx : [
-                containerSx
-            ]
-        ],
-        children: rows.map((rowItems, rowIndex)=>/*#__PURE__*/ _jsx(Box, {
-                sx: [
-                    {
-                        display: 'flex',
-                        gap: `${gap}px`
-                    },
-                    ...Array.isArray(rowSx) ? rowSx : [
-                        rowSx
-                    ]
-                ],
-                children: rowItems.map((item, colIndex)=>/*#__PURE__*/ _jsx(Box, {
-                        sx: {
-                            width: `calc((100% - ${gap * (perRow - 1)}px) / ${perRow})`,
-                            overflow: 'hidden'
+        $[3] = perRow;
+        $[4] = rows;
+        $[5] = t1;
+    } else {
+        t1 = $[5];
+    }
+    const { rows: rows_0, perRow: perRow_0 } = t1;
+    const t2 = `${gap}px`;
+    let t3;
+    if ($[6] !== t2) {
+        t3 = {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            gap: t2
+        };
+        $[6] = t2;
+        $[7] = t3;
+    } else {
+        t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== containerSx) {
+        t4 = Array.isArray(containerSx) ? containerSx : [
+            containerSx
+        ];
+        $[8] = containerSx;
+        $[9] = t4;
+    } else {
+        t4 = $[9];
+    }
+    let t5;
+    if ($[10] !== t3 || $[11] !== t4) {
+        t5 = [
+            t3,
+            ...t4
+        ];
+        $[10] = t3;
+        $[11] = t4;
+        $[12] = t5;
+    } else {
+        t5 = $[12];
+    }
+    let t6;
+    if ($[13] !== gap || $[14] !== perRow_0 || $[15] !== renderItem || $[16] !== rowSx || $[17] !== rows_0) {
+        let t7;
+        if ($[19] !== gap || $[20] !== perRow_0 || $[21] !== renderItem || $[22] !== rowSx) {
+            t7 = (rowItems, rowIndex)=>/*#__PURE__*/ _jsx(Box, {
+                    sx: [
+                        {
+                            display: "flex",
+                            gap: `${gap}px`
                         },
-                        children: renderItem(item, {
-                            rowIndex,
-                            colIndex
-                        })
-                    }, `${rowIndex}-${colIndex}`))
-            }, rowIndex))
-    });
+                        ...Array.isArray(rowSx) ? rowSx : [
+                            rowSx
+                        ]
+                    ],
+                    children: rowItems.map((item, colIndex)=>/*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                width: `calc((100% - ${gap * (perRow_0 - 1)}px) / ${perRow_0})`,
+                                overflow: "hidden"
+                            },
+                            children: renderItem(item, {
+                                rowIndex,
+                                colIndex
+                            })
+                        }, `${rowIndex}-${colIndex}`))
+                }, rowIndex);
+            $[19] = gap;
+            $[20] = perRow_0;
+            $[21] = renderItem;
+            $[22] = rowSx;
+            $[23] = t7;
+        } else {
+            t7 = $[23];
+        }
+        t6 = rows_0.map(t7);
+        $[13] = gap;
+        $[14] = perRow_0;
+        $[15] = renderItem;
+        $[16] = rowSx;
+        $[17] = rows_0;
+        $[18] = t6;
+    } else {
+        t6 = $[18];
+    }
+    let t7;
+    if ($[24] !== t5 || $[25] !== t6) {
+        t7 = /*#__PURE__*/ _jsx(Box, {
+            sx: t5,
+            children: t6
+        });
+        $[24] = t5;
+        $[25] = t6;
+        $[26] = t7;
+    } else {
+        t7 = $[26];
+    }
+    return t7;
 }
 
 //# sourceMappingURL=RepeatGrid.js.map