@perses-dev/components 0.53.0-beta.0 → 0.53.0-beta.1

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshIntervalPicker.d.ts","sourceRoot":"","sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,0BAA0B;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAsCrF"}
+{"version":3,"file":"RefreshIntervalPicker.d.ts","sourceRoot":"","sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,0BAA0B;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAqCrF"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -15,7 +15,6 @@ import { Box, FormControl, MenuItem, Select } from '@mui/material';
 import { useMemo } from 'react';
 export function RefreshIntervalPicker(props) {
     const { value, onChange, timeOptions, height } = props;
-    const formattedValue = value;
     // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
     const customInterval = useMemo(()=>{
         if (value && !timeOptions.some((option)=>option.value.pastDuration === value)) {
@@ -32,13 +31,13 @@ export function RefreshIntervalPicker(props) {
         children: /*#__PURE__*/ _jsx(Box, {
             children: /*#__PURE__*/ _jsxs(Select, {
                 id: "refreshInterval",
-                value: formattedValue,
+                value: value,
                 onChange: (event)=>{
                     const duration = event.target.value;
                     onChange(duration);
                 },
                 inputProps: {
-                    'aria-label': `Select refresh interval. Currently set to ${formattedValue}`
+                    'aria-label': `Select refresh interval. Currently set to ${value}`
                 },
                 sx: {
                     '.MuiSelect-select': height ? {

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"sourcesContent":["// Copyright 2023 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 { DurationString } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { 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  const formattedValue = value;\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={formattedValue}\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 ${formattedValue}`,\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","formattedValue","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAAuBC,OAAO,QAAQ,QAAQ;AAU9C,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IACjD,MAAMK,iBAAiBJ;IAEvB,oHAAoH;IACpH,MAAMK,iBAAiBR,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYI,IAAI,CAAC,CAACC,SAAWA,OAAOP,KAAK,CAACQ,YAAY,KAAKR,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCa,IAAG;gBACHT,OAAOI;gBACPH,UAAU,CAACS;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACZ,KAAK;oBACnCC,SAASU;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAET,gBAAgB;gBAC7E;gBACAU,IAAI;oBACF,qBAAqBX,SAAS;wBAAEY,YAAYZ;wBAAQa,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECd,YAAYe,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACxB;4BAAmBK,OAAOkB,KAAKlB,KAAK,CAACQ,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}
+{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"sourcesContent":["// Copyright 2023 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 { DurationString } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { 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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAAuBC,OAAO,QAAQ,QAAQ;AAU9C,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"}

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -25,7 +25,6 @@ const _material = require("@mui/material");
 const _react = require("react");
 function RefreshIntervalPicker(props) {
     const { value, onChange, timeOptions, height } = props;
-    const formattedValue = value;
     // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
     const customInterval = (0, _react.useMemo)(()=>{
         if (value && !timeOptions.some((option)=>option.value.pastDuration === value)) {
@@ -42,13 +41,13 @@ function RefreshIntervalPicker(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
                 id: "refreshInterval",
-                value: formattedValue,
+                value: value,
                 onChange: (event)=>{
                     const duration = event.target.value;
                     onChange(duration);
                 },
                 inputProps: {
-                    'aria-label': `Select refresh interval. Currently set to ${formattedValue}`
+                    'aria-label': `Select refresh interval. Currently set to ${value}`
                 },
                 sx: {
                     '.MuiSelect-select': height ? {

package/dist/cjs/utils/index.js

@@ -21,6 +21,7 @@ _export_star(require("./combine-sx"), exports);
 _export_star(require("./component-ids"), exports);
 _export_star(require("./format"), exports);
 _export_star(require("./theme-gen"), exports);
+_export_star(require("./memo"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/utils/memo.js

@@ -0,0 +1,64 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useDeepMemo: function() {
+        return useDeepMemo;
+    },
+    useMemoized: function() {
+        return useMemoized;
+    }
+});
+const _react = require("react");
+const _isEqual = /*#__PURE__*/ _interop_require_default(require("lodash/isEqual"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function useMemoized(factory, deps) {
+    const ref = (0, _react.useRef)();
+    let areEqual = true;
+    for(let i = 0; i < deps.length; i++){
+        if (ref.current?.deps[i] !== deps[i]) {
+            areEqual = false;
+            break;
+        }
+    }
+    if (ref.current === undefined || areEqual === false) {
+        ref.current = {
+            value: factory(),
+            deps: deps
+        };
+    }
+    return ref.current.value;
+}
+function useDeepMemo(factory, deps) {
+    const ref = (0, _react.useRef)();
+    if (ref.current === undefined || (0, _isEqual.default)(deps, ref.current.deps) === false) {
+        ref.current = {
+            value: factory(),
+            deps
+        };
+    }
+    return ref.current.value;
+}

package/dist/theme/theme.d.ts

@@ -1,4 +1,4 @@
-import { PaletteMode, ThemeOptions, Theme } from '@mui/material';
+import { createTheme, PaletteMode, Theme } from '@mui/material';
 /**
  * Gets theme used by all components for the provided mode. For more details, see:
  *   - Base colors, typography, sizing - go/chrono-ui-theme
@@ -9,5 +9,5 @@ import { PaletteMode, ThemeOptions, Theme } from '@mui/material';
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
  */
-export declare function getTheme(mode: PaletteMode, options?: ThemeOptions): Theme;
+export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0]): Theme;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAQ7E"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAQlG"}

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2023 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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode, options: ThemeOptions = {}): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiAlert,\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiPaper,\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiDialog: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiPopover: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n};\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASO,SAASL,IAAiB,EAAEM,UAAwB,CAAC,CAAC;IACpE,OAAOf,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAY,QAAQ,CAAC;QACTC;QACA,GAAGF,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,MAAME,aAAyC;IAC7ChB;IACAiB,gBAAgB;QACdC,cAAc;YACZC,MAAM;QACR;IACF;IACAlB;IACAmB,cAAc;QACZF,cAAc;YACZC,MAAM;QACR;IACF;IACAE,WAAW;QACTC,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAoB,WAAW;QACTF,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAqB,YAAY;QACVH,gBAAgB;YACdC,OAAOnB;QACT;IACF;AACF"}
+{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2023 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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode, options: Parameters<typeof createTheme>[0] = {}): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiAlert,\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiPaper,\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiDialog: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiPopover: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n};\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASO,SAASL,IAAiB,EAAEM,UAA6C,CAAC,CAAC;IACzF,OAAOf,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAY,QAAQ,CAAC;QACTC;QACA,GAAGF,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,MAAME,aAAyC;IAC7ChB;IACAiB,gBAAgB;QACdC,cAAc;YACZC,MAAM;QACR;IACF;IACAlB;IACAmB,cAAc;QACZF,cAAc;YACZC,MAAM;QACR;IACF;IACAE,WAAW;QACTC,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAoB,WAAW;QACTF,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAqB,YAAY;QACVH,gBAAgB;YACdC,OAAOnB;QACT;IACF;AACF"}

package/dist/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './combine-sx';
 export * from './component-ids';
 export * from './format';
 export * from './theme-gen';
+export * from './memo';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC"}

package/dist/utils/index.js

@@ -17,5 +17,6 @@ export * from './combine-sx';
 export * from './component-ids';
 export * from './format';
 export * from './theme-gen';
+export * from './memo';
 
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["// Copyright 2023 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\nexport * from './axis';\nexport * from './browser-storage';\nexport * from './chart-actions';\nexport * from './combine-sx';\nexport * from './component-ids';\nexport * from './format';\nexport * from './theme-gen';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,SAAS;AACvB,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,cAAc"}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["// Copyright 2023 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\nexport * from './axis';\nexport * from './browser-storage';\nexport * from './chart-actions';\nexport * from './combine-sx';\nexport * from './component-ids';\nexport * from './format';\nexport * from './theme-gen';\nexport * from './memo';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,SAAS;AACvB,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,SAAS"}

package/dist/utils/memo.d.ts

@@ -0,0 +1,13 @@
+import { DependencyList } from 'react';
+/**
+ * Like React's useMemo, but guarantees the value will only be recalulated if
+ * a dependency changes. Uses strict equality (===) for comparison. (React's
+ * useMemo does not offer this guarantee, it's only a performance optimization).
+ */
+export declare function useMemoized<T>(factory: () => T, deps: DependencyList): T;
+/**
+ * Like React's useMemo, except it does a deep equality comparison with lodash's
+ * isEqual on the dependency list.
+ */
+export declare function useDeepMemo<T>(factory: () => T, deps: DependencyList): T;
+//# sourceMappingURL=memo.d.ts.map

package/dist/utils/memo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memo.d.ts","sourceRoot":"","sources":["../../src/utils/memo.ts"],"names":[],"mappings":"AAaA,OAAO,EAAU,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ/C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,CAgBxE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,CAMxE"}

package/dist/utils/memo.js

@@ -0,0 +1,50 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+/**
+ * Like React's useMemo, but guarantees the value will only be recalulated if
+ * a dependency changes. Uses strict equality (===) for comparison. (React's
+ * useMemo does not offer this guarantee, it's only a performance optimization).
+ */ export function useMemoized(factory, deps) {
+    const ref = useRef();
+    let areEqual = true;
+    for(let i = 0; i < deps.length; i++){
+        if (ref.current?.deps[i] !== deps[i]) {
+            areEqual = false;
+            break;
+        }
+    }
+    if (ref.current === undefined || areEqual === false) {
+        ref.current = {
+            value: factory(),
+            deps: deps
+        };
+    }
+    return ref.current.value;
+}
+/**
+ * Like React's useMemo, except it does a deep equality comparison with lodash's
+ * isEqual on the dependency list.
+ */ export function useDeepMemo(factory, deps) {
+    const ref = useRef();
+    if (ref.current === undefined || isEqual(deps, ref.current.deps) === false) {
+        ref.current = {
+            value: factory(),
+            deps
+        };
+    }
+    return ref.current.value;
+}
+
+//# sourceMappingURL=memo.js.map

package/dist/utils/memo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/memo.ts"],"sourcesContent":["// Copyright 2023 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 { useRef, DependencyList } from 'react';\nimport isEqual from 'lodash/isEqual';\n\ntype MemoRef<T> = {\n  value: T;\n  deps: DependencyList;\n};\n\n/**\n * Like React's useMemo, but guarantees the value will only be recalulated if\n * a dependency changes. Uses strict equality (===) for comparison. (React's\n * useMemo does not offer this guarantee, it's only a performance optimization).\n */\nexport function useMemoized<T>(factory: () => T, deps: DependencyList): T {\n  const ref = useRef<MemoRef<T>>();\n\n  let areEqual = true;\n  for (let i = 0; i < deps.length; i++) {\n    if (ref.current?.deps[i] !== deps[i]) {\n      areEqual = false;\n      break;\n    }\n  }\n\n  if (ref.current === undefined || areEqual === false) {\n    ref.current = { value: factory(), deps: deps };\n  }\n\n  return ref.current.value;\n}\n\n/**\n * Like React's useMemo, except it does a deep equality comparison with lodash's\n * isEqual on the dependency list.\n */\nexport function useDeepMemo<T>(factory: () => T, deps: DependencyList): T {\n  const ref = useRef<MemoRef<T>>();\n  if (ref.current === undefined || isEqual(deps, ref.current.deps) === false) {\n    ref.current = { value: factory(), deps };\n  }\n  return ref.current.value;\n}\n"],"names":["useRef","isEqual","useMemoized","factory","deps","ref","areEqual","i","length","current","undefined","value","useDeepMemo"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAwB,QAAQ;AAC/C,OAAOC,aAAa,iBAAiB;AAOrC;;;;CAIC,GACD,OAAO,SAASC,YAAeC,OAAgB,EAAEC,IAAoB;IACnE,MAAMC,MAAML;IAEZ,IAAIM,WAAW;IACf,IAAK,IAAIC,IAAI,GAAGA,IAAIH,KAAKI,MAAM,EAAED,IAAK;QACpC,IAAIF,IAAII,OAAO,EAAEL,IAAI,CAACG,EAAE,KAAKH,IAAI,CAACG,EAAE,EAAE;YACpCD,WAAW;YACX;QACF;IACF;IAEA,IAAID,IAAII,OAAO,KAAKC,aAAaJ,aAAa,OAAO;QACnDD,IAAII,OAAO,GAAG;YAAEE,OAAOR;YAAWC,MAAMA;QAAK;IAC/C;IAEA,OAAOC,IAAII,OAAO,CAACE,KAAK;AAC1B;AAEA;;;CAGC,GACD,OAAO,SAASC,YAAeT,OAAgB,EAAEC,IAAoB;IACnE,MAAMC,MAAML;IACZ,IAAIK,IAAII,OAAO,KAAKC,aAAaT,QAAQG,MAAMC,IAAII,OAAO,CAACL,IAAI,MAAM,OAAO;QAC1EC,IAAII,OAAO,GAAG;YAAEE,OAAOR;YAAWC;QAAK;IACzC;IACA,OAAOC,IAAII,OAAO,CAACE,KAAK;AAC1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.53.0-beta.0",
+  "version": "0.53.0-beta.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -33,7 +33,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/core": "0.53.0-beta.0",
+    "@perses-dev/core": "0.53.0-beta.1",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^4.1.0",