@perses-dev/components 0.52.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/context/SnackbarProvider.js

@@ -22,14 +22,70 @@ function _export(target, all) {
 }
 _export(exports, {
     SnackbarProvider: function() {
-        return _notistack.SnackbarProvider;
+        return SnackbarProvider;
     },
     useSnackbar: function() {
         return useSnackbar;
     }
 });
-const _react = require("react");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _styles = require("@mui/material/styles");
 const _notistack = require("notistack");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function SnackbarProvider({ children, ...props }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_notistack.SnackbarProvider, {
+        ...props,
+        Components: {
+            error: (0, _styles.styled)(_notistack.MaterialDesignContent)(()=>({
+                    '&.notistack-MuiContent-error': {
+                        whiteSpace: 'pre-wrap'
+                    }
+                }))
+        },
+        children: children
+    });
+}
 function useSnackbar() {
     const { enqueueSnackbar, closeSnackbar } = (0, _notistack.useSnackbar)();
     // Create variant-specific callbacks

package/dist/cjs/utils/browser-storage.js

@@ -0,0 +1,62 @@
+// 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
+});
+Object.defineProperty(exports, "useLocalStorage", {
+    enumerable: true,
+    get: function() {
+        return useLocalStorage;
+    }
+});
+const _react = require("react");
+function useLocalStorage(key, initialValue) {
+    const { value, setValueAndStore } = useStorage(window.localStorage, key, initialValue);
+    return [
+        value,
+        setValueAndStore
+    ];
+}
+// Common functionality used by all storage hooks
+function useStorage(storage, key, initialValue) {
+    // Use state so that changes cause the page to re-render
+    const [value, setValue] = (0, _react.useState)(()=>{
+        try {
+            const json = storage.getItem(key);
+            if (json !== null) {
+                return JSON.parse(json);
+            }
+        } catch  {
+        // No-op
+        }
+        // Either the value isn't in storage yet or JSON parsing failed, so
+        // set to the initial value in both places
+        storage.setItem(key, JSON.stringify(initialValue));
+        return initialValue;
+    });
+    // Set in both places
+    const setValueAndStore = (0, _react.useCallback)((val)=>{
+        setValue(val);
+        storage.setItem(key, JSON.stringify(val));
+    }, [
+        setValue,
+        storage,
+        key
+    ]);
+    return {
+        value,
+        setValue,
+        setValueAndStore
+    };
+}

package/dist/cjs/utils/index.js

@@ -15,11 +15,13 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./axis"), exports);
+_export_star(require("./browser-storage"), exports);
 _export_star(require("./chart-actions"), exports);
 _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/context/SnackbarProvider.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SnackbarProvider as NotistackProvider, ProviderContext as NotistackContext, SnackbarMessage, OptionsObject, SnackbarKey } from 'notistack';
 export interface SnackbarContext extends NotistackContext {
     errorSnackbar: EnqueueFunction;
@@ -14,10 +15,12 @@ type EnqueueFunction = (message: SnackbarMessage, options?: SnackbarOptions) =>
 type SnackbarOptions = Omit<OptionsObject, 'variant'>;
 /**
  * Application-wide provider for showing snackbars/toasts.
+ * Customized to preserve formatting in error messages.
  */
-export { NotistackProvider as SnackbarProvider };
+export declare function SnackbarProvider({ children, ...props }: React.ComponentProps<typeof NotistackProvider>): React.ReactElement;
 /**
  * Gets the SnackbarContext with methods for displaying snackbars/toasts.
  */
 export declare function useSnackbar(): SnackbarContext;
+export {};
 //# sourceMappingURL=SnackbarProvider.d.ts.map

package/dist/context/SnackbarProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../src/context/SnackbarProvider.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,eAAe,IAAI,gBAAgB,EAEnC,eAAe,EACf,aAAa,EACb,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,aAAa,EAAE,eAAe,CAAC;IAC/B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,eAAe,CAAC;IAEjC;;;OAGG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,WAAW,CAAC;CAC/E;AAED,KAAK,eAAe,GAAG,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,WAAW,CAAC;AAE5F,KAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC;AAEjD;;GAEG;AACH,wBAAgB,WAAW,IAAI,eAAe,CA6B7C"}
+{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../src/context/SnackbarProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,eAAe,IAAI,gBAAgB,EAEnC,eAAe,EACf,aAAa,EACb,WAAW,EAEZ,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,aAAa,EAAE,eAAe,CAAC;IAC/B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,eAAe,CAAC;IAEjC;;;OAGG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,WAAW,CAAC;CAC/E;AAED,KAAK,eAAe,GAAG,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,WAAW,CAAC;AAE5F,KAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAAG,KAAK,CAAC,YAAY,CAerE;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,eAAe,CA6B7C"}

package/dist/context/SnackbarProvider.js

@@ -10,11 +10,26 @@
 // 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 { useCallback } from 'react';
-import { SnackbarProvider as NotistackProvider, useSnackbar as useNotistack } from 'notistack';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { styled } from '@mui/material/styles';
+import { SnackbarProvider as NotistackProvider, useSnackbar as useNotistack, MaterialDesignContent } from 'notistack';
 /**
  * Application-wide provider for showing snackbars/toasts.
- */ export { NotistackProvider as SnackbarProvider };
+ * Customized to preserve formatting in error messages.
+ */ export function SnackbarProvider({ children, ...props }) {
+    return /*#__PURE__*/ _jsx(NotistackProvider, {
+        ...props,
+        Components: {
+            error: styled(MaterialDesignContent)(()=>({
+                    '&.notistack-MuiContent-error': {
+                        whiteSpace: 'pre-wrap'
+                    }
+                }))
+        },
+        children: children
+    });
+}
 /**
  * Gets the SnackbarContext with methods for displaying snackbars/toasts.
  */ export function useSnackbar() {

package/dist/context/SnackbarProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/SnackbarProvider.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 { useCallback } from 'react';\nimport {\n  SnackbarProvider as NotistackProvider,\n  ProviderContext as NotistackContext,\n  useSnackbar as useNotistack,\n  SnackbarMessage,\n  OptionsObject,\n  SnackbarKey,\n} from 'notistack';\n\nexport interface SnackbarContext extends NotistackContext {\n  errorSnackbar: EnqueueFunction;\n  infoSnackbar: EnqueueFunction;\n  warningSnackbar: EnqueueFunction;\n  successSnackbar: EnqueueFunction;\n\n  /**\n   * Useful for catch blocks where the error will be of type `unknown`, tries\n   * to show the `message` property if passed an instance of `Error`.\n   */\n  exceptionSnackbar: (error: unknown, options?: SnackbarOptions) => SnackbarKey;\n}\n\ntype EnqueueFunction = (message: SnackbarMessage, options?: SnackbarOptions) => SnackbarKey;\n\ntype SnackbarOptions = Omit<OptionsObject, 'variant'>;\n\n/**\n * Application-wide provider for showing snackbars/toasts.\n */\nexport { NotistackProvider as SnackbarProvider };\n\n/**\n * Gets the SnackbarContext with methods for displaying snackbars/toasts.\n */\nexport function useSnackbar(): SnackbarContext {\n  const { enqueueSnackbar, closeSnackbar } = useNotistack();\n\n  // Create variant-specific callbacks\n  const errorSnackbar = useEnqueueFunction(enqueueSnackbar, 'error');\n  const infoSnackbar = useEnqueueFunction(enqueueSnackbar, 'info');\n  const warningSnackbar = useEnqueueFunction(enqueueSnackbar, 'warning');\n  const successSnackbar = useEnqueueFunction(enqueueSnackbar, 'success');\n\n  const exceptionSnackbar: SnackbarContext['exceptionSnackbar'] = useCallback(\n    (error, options) => {\n      // Try to use message prop, but fallback to a default message that\n      // will just stringify the error provided\n      const message = error instanceof Error ? error.message : `An unexpected error occurred: ${error}`;\n\n      return errorSnackbar(message, options);\n    },\n    [errorSnackbar]\n  );\n\n  return {\n    enqueueSnackbar,\n    closeSnackbar,\n    errorSnackbar,\n    infoSnackbar,\n    warningSnackbar,\n    successSnackbar,\n    exceptionSnackbar,\n  };\n}\n\n// Helper to create a variant-specific enqueue function\nfunction useEnqueueFunction(\n  enqueueSnackbar: NotistackContext['enqueueSnackbar'],\n  variant: OptionsObject['variant']\n): EnqueueFunction {\n  return useCallback(\n    (message, options) => {\n      const allOptions: OptionsObject = {\n        ...options,\n        variant,\n      };\n      return enqueueSnackbar(message, allOptions);\n    },\n    [enqueueSnackbar, variant]\n  );\n}\n"],"names":["useCallback","SnackbarProvider","NotistackProvider","useSnackbar","useNotistack","enqueueSnackbar","closeSnackbar","errorSnackbar","useEnqueueFunction","infoSnackbar","warningSnackbar","successSnackbar","exceptionSnackbar","error","options","message","Error","variant","allOptions"],"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,QAAQ,QAAQ;AACpC,SACEC,oBAAoBC,iBAAiB,EAErCC,eAAeC,YAAY,QAItB,YAAY;AAmBnB;;CAEC,GACD,SAASF,qBAAqBD,gBAAgB,GAAG;AAEjD;;CAEC,GACD,OAAO,SAASE;IACd,MAAM,EAAEE,eAAe,EAAEC,aAAa,EAAE,GAAGF;IAE3C,oCAAoC;IACpC,MAAMG,gBAAgBC,mBAAmBH,iBAAiB;IAC1D,MAAMI,eAAeD,mBAAmBH,iBAAiB;IACzD,MAAMK,kBAAkBF,mBAAmBH,iBAAiB;IAC5D,MAAMM,kBAAkBH,mBAAmBH,iBAAiB;IAE5D,MAAMO,oBAA0DZ,YAC9D,CAACa,OAAOC;QACN,kEAAkE;QAClE,yCAAyC;QACzC,MAAMC,UAAUF,iBAAiBG,QAAQH,MAAME,OAAO,GAAG,CAAC,8BAA8B,EAAEF,OAAO;QAEjG,OAAON,cAAcQ,SAASD;IAChC,GACA;QAACP;KAAc;IAGjB,OAAO;QACLF;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;IACF;AACF;AAEA,uDAAuD;AACvD,SAASJ,mBACPH,eAAoD,EACpDY,OAAiC;IAEjC,OAAOjB,YACL,CAACe,SAASD;QACR,MAAMI,aAA4B;YAChC,GAAGJ,OAAO;YACVG;QACF;QACA,OAAOZ,gBAAgBU,SAASG;IAClC,GACA;QAACb;QAAiBY;KAAQ;AAE9B"}
+{"version":3,"sources":["../../src/context/SnackbarProvider.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 React, { useCallback } from 'react';\nimport { styled } from '@mui/material/styles';\nimport {\n  SnackbarProvider as NotistackProvider,\n  ProviderContext as NotistackContext,\n  useSnackbar as useNotistack,\n  SnackbarMessage,\n  OptionsObject,\n  SnackbarKey,\n  MaterialDesignContent,\n} from 'notistack';\n\nexport interface SnackbarContext extends NotistackContext {\n  errorSnackbar: EnqueueFunction;\n  infoSnackbar: EnqueueFunction;\n  warningSnackbar: EnqueueFunction;\n  successSnackbar: EnqueueFunction;\n\n  /**\n   * Useful for catch blocks where the error will be of type `unknown`, tries\n   * to show the `message` property if passed an instance of `Error`.\n   */\n  exceptionSnackbar: (error: unknown, options?: SnackbarOptions) => SnackbarKey;\n}\n\ntype EnqueueFunction = (message: SnackbarMessage, options?: SnackbarOptions) => SnackbarKey;\n\ntype SnackbarOptions = Omit<OptionsObject, 'variant'>;\n\n/**\n * Application-wide provider for showing snackbars/toasts.\n * Customized to preserve formatting in error messages.\n */\nexport function SnackbarProvider({\n  children,\n  ...props\n}: React.ComponentProps<typeof NotistackProvider>): React.ReactElement {\n  return (\n    <NotistackProvider\n      {...props}\n      Components={{\n        error: styled(MaterialDesignContent)(() => ({\n          '&.notistack-MuiContent-error': {\n            whiteSpace: 'pre-wrap',\n          },\n        })),\n      }}\n    >\n      {children}\n    </NotistackProvider>\n  );\n}\n\n/**\n * Gets the SnackbarContext with methods for displaying snackbars/toasts.\n */\nexport function useSnackbar(): SnackbarContext {\n  const { enqueueSnackbar, closeSnackbar } = useNotistack();\n\n  // Create variant-specific callbacks\n  const errorSnackbar = useEnqueueFunction(enqueueSnackbar, 'error');\n  const infoSnackbar = useEnqueueFunction(enqueueSnackbar, 'info');\n  const warningSnackbar = useEnqueueFunction(enqueueSnackbar, 'warning');\n  const successSnackbar = useEnqueueFunction(enqueueSnackbar, 'success');\n\n  const exceptionSnackbar: SnackbarContext['exceptionSnackbar'] = useCallback(\n    (error, options) => {\n      // Try to use message prop, but fallback to a default message that\n      // will just stringify the error provided\n      const message = error instanceof Error ? error.message : `An unexpected error occurred: ${error}`;\n\n      return errorSnackbar(message, options);\n    },\n    [errorSnackbar]\n  );\n\n  return {\n    enqueueSnackbar,\n    closeSnackbar,\n    errorSnackbar,\n    infoSnackbar,\n    warningSnackbar,\n    successSnackbar,\n    exceptionSnackbar,\n  };\n}\n\n// Helper to create a variant-specific enqueue function\nfunction useEnqueueFunction(\n  enqueueSnackbar: NotistackContext['enqueueSnackbar'],\n  variant: OptionsObject['variant']\n): EnqueueFunction {\n  return useCallback(\n    (message, options) => {\n      const allOptions: OptionsObject = {\n        ...options,\n        variant,\n      };\n      return enqueueSnackbar(message, allOptions);\n    },\n    [enqueueSnackbar, variant]\n  );\n}\n"],"names":["React","useCallback","styled","SnackbarProvider","NotistackProvider","useSnackbar","useNotistack","MaterialDesignContent","children","props","Components","error","whiteSpace","enqueueSnackbar","closeSnackbar","errorSnackbar","useEnqueueFunction","infoSnackbar","warningSnackbar","successSnackbar","exceptionSnackbar","options","message","Error","variant","allOptions"],"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,OAAOA,SAASC,WAAW,QAAQ,QAAQ;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SACEC,oBAAoBC,iBAAiB,EAErCC,eAAeC,YAAY,EAI3BC,qBAAqB,QAChB,YAAY;AAmBnB;;;CAGC,GACD,OAAO,SAASJ,iBAAiB,EAC/BK,QAAQ,EACR,GAAGC,OAC4C;IAC/C,qBACE,KAACL;QACE,GAAGK,KAAK;QACTC,YAAY;YACVC,OAAOT,OAAOK,uBAAuB,IAAO,CAAA;oBAC1C,gCAAgC;wBAC9BK,YAAY;oBACd;gBACF,CAAA;QACF;kBAECJ;;AAGP;AAEA;;CAEC,GACD,OAAO,SAASH;IACd,MAAM,EAAEQ,eAAe,EAAEC,aAAa,EAAE,GAAGR;IAE3C,oCAAoC;IACpC,MAAMS,gBAAgBC,mBAAmBH,iBAAiB;IAC1D,MAAMI,eAAeD,mBAAmBH,iBAAiB;IACzD,MAAMK,kBAAkBF,mBAAmBH,iBAAiB;IAC5D,MAAMM,kBAAkBH,mBAAmBH,iBAAiB;IAE5D,MAAMO,oBAA0DnB,YAC9D,CAACU,OAAOU;QACN,kEAAkE;QAClE,yCAAyC;QACzC,MAAMC,UAAUX,iBAAiBY,QAAQZ,MAAMW,OAAO,GAAG,CAAC,8BAA8B,EAAEX,OAAO;QAEjG,OAAOI,cAAcO,SAASD;IAChC,GACA;QAACN;KAAc;IAGjB,OAAO;QACLF;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;IACF;AACF;AAEA,uDAAuD;AACvD,SAASJ,mBACPH,eAAoD,EACpDW,OAAiC;IAEjC,OAAOvB,YACL,CAACqB,SAASD;QACR,MAAMI,aAA4B;YAChC,GAAGJ,OAAO;YACVG;QACF;QACA,OAAOX,gBAAgBS,SAASG;IAClC,GACA;QAACZ;QAAiBW;KAAQ;AAE9B"}

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/browser-storage.d.ts

@@ -0,0 +1,9 @@
+type StorageTuple<T> = [T, (next: T) => void];
+/**
+ * Just like useState but gets/sets the value in the browser's local storage.
+ * 'key' should be a constant string. 'initialValue' is returned when local
+ * storage does not have any data yet.
+ */
+export declare function useLocalStorage<T>(key: string, initialValue: T): StorageTuple<T>;
+export {};
+//# sourceMappingURL=browser-storage.d.ts.map

package/dist/utils/browser-storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-storage.d.ts","sourceRoot":"","sources":["../../src/utils/browser-storage.ts"],"names":[],"mappings":"AAeA,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAE9C;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAGhF"}

package/dist/utils/browser-storage.js

@@ -0,0 +1,58 @@
+// 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 { useState, useCallback } from 'react';
+/**
+ * Just like useState but gets/sets the value in the browser's local storage.
+ * 'key' should be a constant string. 'initialValue' is returned when local
+ * storage does not have any data yet.
+ */ export function useLocalStorage(key, initialValue) {
+    const { value, setValueAndStore } = useStorage(window.localStorage, key, initialValue);
+    return [
+        value,
+        setValueAndStore
+    ];
+}
+// Common functionality used by all storage hooks
+function useStorage(storage, key, initialValue) {
+    // Use state so that changes cause the page to re-render
+    const [value, setValue] = useState(()=>{
+        try {
+            const json = storage.getItem(key);
+            if (json !== null) {
+                return JSON.parse(json);
+            }
+        } catch  {
+        // No-op
+        }
+        // Either the value isn't in storage yet or JSON parsing failed, so
+        // set to the initial value in both places
+        storage.setItem(key, JSON.stringify(initialValue));
+        return initialValue;
+    });
+    // Set in both places
+    const setValueAndStore = useCallback((val)=>{
+        setValue(val);
+        storage.setItem(key, JSON.stringify(val));
+    }, [
+        setValue,
+        storage,
+        key
+    ]);
+    return {
+        value,
+        setValue,
+        setValueAndStore
+    };
+}
+
+//# sourceMappingURL=browser-storage.js.map

package/dist/utils/browser-storage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/browser-storage.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 { useState, useCallback } from 'react';\n\ntype StorageTuple<T> = [T, (next: T) => void];\n\n/**\n * Just like useState but gets/sets the value in the browser's local storage.\n * 'key' should be a constant string. 'initialValue' is returned when local\n * storage does not have any data yet.\n */\nexport function useLocalStorage<T>(key: string, initialValue: T): StorageTuple<T> {\n  const { value, setValueAndStore } = useStorage(window.localStorage, key, initialValue);\n  return [value, setValueAndStore];\n}\n\n// Common functionality used by all storage hooks\nfunction useStorage<T>(\n  storage: Storage,\n  key: string,\n  initialValue: T\n): {\n  setValueAndStore: (value: T) => void;\n  setValue: (value: T) => void;\n  value: T;\n} {\n  // Use state so that changes cause the page to re-render\n  const [value, setValue] = useState<T>(() => {\n    try {\n      const json = storage.getItem(key);\n      if (json !== null) {\n        return JSON.parse(json);\n      }\n    } catch {\n      // No-op\n    }\n\n    // Either the value isn't in storage yet or JSON parsing failed, so\n    // set to the initial value in both places\n    storage.setItem(key, JSON.stringify(initialValue));\n    return initialValue;\n  });\n\n  // Set in both places\n  const setValueAndStore = useCallback(\n    (val: T) => {\n      setValue(val);\n      storage.setItem(key, JSON.stringify(val));\n    },\n    [setValue, storage, key]\n  );\n\n  return { value, setValue, setValueAndStore };\n}\n"],"names":["useState","useCallback","useLocalStorage","key","initialValue","value","setValueAndStore","useStorage","window","localStorage","storage","setValue","json","getItem","JSON","parse","setItem","stringify","val"],"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,QAAQ,EAAEC,WAAW,QAAQ,QAAQ;AAI9C;;;;CAIC,GACD,OAAO,SAASC,gBAAmBC,GAAW,EAAEC,YAAe;IAC7D,MAAM,EAAEC,KAAK,EAAEC,gBAAgB,EAAE,GAAGC,WAAWC,OAAOC,YAAY,EAAEN,KAAKC;IACzE,OAAO;QAACC;QAAOC;KAAiB;AAClC;AAEA,iDAAiD;AACjD,SAASC,WACPG,OAAgB,EAChBP,GAAW,EACXC,YAAe;IAMf,wDAAwD;IACxD,MAAM,CAACC,OAAOM,SAAS,GAAGX,SAAY;QACpC,IAAI;YACF,MAAMY,OAAOF,QAAQG,OAAO,CAACV;YAC7B,IAAIS,SAAS,MAAM;gBACjB,OAAOE,KAAKC,KAAK,CAACH;YACpB;QACF,EAAE,OAAM;QACN,QAAQ;QACV;QAEA,mEAAmE;QACnE,0CAA0C;QAC1CF,QAAQM,OAAO,CAACb,KAAKW,KAAKG,SAAS,CAACb;QACpC,OAAOA;IACT;IAEA,qBAAqB;IACrB,MAAME,mBAAmBL,YACvB,CAACiB;QACCP,SAASO;QACTR,QAAQM,OAAO,CAACb,KAAKW,KAAKG,SAAS,CAACC;IACtC,GACA;QAACP;QAAUD;QAASP;KAAI;IAG1B,OAAO;QAAEE;QAAOM;QAAUL;IAAiB;AAC7C"}

package/dist/utils/index.d.ts

@@ -1,7 +1,9 @@
 export * from './axis';
+export * from './browser-storage';
 export * from './chart-actions';
 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,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

@@ -11,10 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './axis';
+export * from './browser-storage';
 export * from './chart-actions';
 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 './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,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.52.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.52.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",