@perses-dev/components 0.0.0-snapshot-tooltip-highlight-c995fc8 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -0,0 +1,206 @@
+// 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, {
+    INCREASE_NEARBY_SERIES_MULTIPLIER: ()=>INCREASE_NEARBY_SERIES_MULTIPLIER,
+    DYNAMIC_NEARBY_SERIES_MULTIPLIER: ()=>DYNAMIC_NEARBY_SERIES_MULTIPLIER,
+    SHOW_FEWER_SERIES_LIMIT: ()=>SHOW_FEWER_SERIES_LIMIT,
+    checkforNearbySeries: ()=>checkforNearbySeries,
+    getNearbySeriesData: ()=>getNearbySeriesData,
+    isWithinPercentageRange: ()=>isWithinPercentageRange,
+    getYBuffer: ()=>getYBuffer
+});
+const _model = require("../model");
+const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
+const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
+const SHOW_FEWER_SERIES_LIMIT = 5;
+function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
+    const currentNearbySeriesData = [];
+    var ref;
+    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
+    var ref1;
+    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    if (cursorX === null || cursorY === null) {
+        return currentNearbySeriesData;
+    }
+    const nearbySeriesIndexes = [];
+    const emphasizedSeriesIndexes = [];
+    const nonEmphasizedSeriesIndexes = [];
+    const totalSeries = data.timeSeries.length;
+    if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
+        for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
+            const currentSeries = data.timeSeries[seriesIdx];
+            if (currentNearbySeriesData.length >= _model.OPTIMIZED_MODE_SERIES_LIMIT) break;
+            if (currentSeries !== undefined) {
+                const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
+                var _color;
+                const markerColor = (_color = currentSeries.color) !== null && _color !== void 0 ? _color : '#000';
+                if (Array.isArray(currentSeries.data)) {
+                    for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
+                        var _datumIdx;
+                        const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
+                        const yValue = currentSeries.data[datumIdx];
+                        // ensure null values not displayed in tooltip
+                        if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
+                            if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
+                                // show fewer bold series in tooltip when many total series
+                                const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;
+                                const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);
+                                const isClosestToCursor = isWithinPercentageRange({
+                                    valueToCheck: cursorY,
+                                    baseValue: yValue,
+                                    percentage: percentRangeToCheck
+                                });
+                                if (isClosestToCursor) {
+                                    emphasizedSeriesIndexes.push(seriesIdx);
+                                } else {
+                                    nonEmphasizedSeriesIndexes.push(seriesIdx);
+                                    // ensure series not close to cursor are not highlighted
+                                    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                        chart.dispatchAction({
+                                            type: 'downplay',
+                                            seriesIndex: seriesIdx
+                                        });
+                                    }
+                                }
+                                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
+                                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
+                                const formattedY = (0, _model.formatValue)(yValue, unit);
+                                currentNearbySeriesData.push({
+                                    seriesIdx: seriesIdx,
+                                    datumIdx: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    date: xValueMilliSeconds,
+                                    x: xValue,
+                                    y: yValue,
+                                    formattedY: formattedY,
+                                    markerColor: markerColor.toString(),
+                                    isClosestToCursor
+                                });
+                                nearbySeriesIndexes.push(seriesIdx);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+        // Clears emphasis state of all lines that are not emphasized.
+        // Emphasized is a subset of just the nearby series that are closest to cursor.
+        chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: nonEmphasizedSeriesIndexes
+        });
+        // https://echarts.apache.org/en/api.html#action.highlight
+        if (emphasizedSeriesIndexes.length > 0) {
+            // Fadeout opacity of all series not closest to cursor.
+            chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: emphasizedSeriesIndexes,
+                notBlur: false
+            });
+        } else {
+            // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+            chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: nearbySeriesIndexes,
+                notBlur: true
+            });
+        }
+    }
+    return currentNearbySeriesData;
+}
+function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , showAllSeries =false  }) {
+    if (chart === undefined || mousePos === null) return [];
+    // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
+    let cursorTargetMatchesChart = false;
+    if (mousePos.target !== null) {
+        const currentParent = mousePos.target.parentElement;
+        if (currentParent !== null) {
+            const currentGrandparent = currentParent.parentElement;
+            if (currentGrandparent !== null) {
+                const chartDom = chart.getDom();
+                if (chartDom === currentGrandparent) {
+                    cursorTargetMatchesChart = true;
+                }
+            }
+        }
+    }
+    // allows moving cursor inside tooltip without it fading away
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+        cursorTargetMatchesChart = true;
+    }
+    if (cursorTargetMatchesChart === false) return [];
+    if (chart['_model'] === undefined) return [];
+    const chartModel = chart['_model'];
+    const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;
+    const totalSeries = chartData.timeSeries.length;
+    const yBuffer = getYBuffer({
+        yInterval,
+        totalSeries,
+        showAllSeries
+    });
+    var _x, _y;
+    const pointInPixel = [
+        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
+        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _y : 0
+    ];
+    if (chart.containPixel('grid', pointInPixel)) {
+        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
+            return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
+        }
+    }
+    // clear all highlighted series when cursor exits canvas
+    // https://echarts.apache.org/en/api.html#action.downplay
+    for(let i = 0; i < totalSeries; i++){
+        if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+            chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: i
+            });
+        }
+    }
+    return [];
+}
+function isWithinPercentageRange({ valueToCheck , baseValue , percentage  }) {
+    const range = percentage / 100 * baseValue;
+    const lowerBound = baseValue - range;
+    const upperBound = baseValue + range;
+    return valueToCheck >= lowerBound && valueToCheck <= upperBound;
+}
+function getYBuffer({ yInterval , totalSeries , showAllSeries =false  }) {
+    if (showAllSeries) {
+        return yInterval * 10; // roughly correlates with grid so entire canvas is searched
+    }
+    // never let nearby series range be less than roughly the size of a single tick
+    const yBufferMin = yInterval * 0.3;
+    // tooltip trigger area gets smaller with more series
+    if (totalSeries > SHOW_FEWER_SERIES_LIMIT) {
+        const adjustedBuffer = yInterval * DYNAMIC_NEARBY_SERIES_MULTIPLIER / totalSeries;
+        return Math.max(yBufferMin, adjustedBuffer);
+    }
+    // increase multiplier to expand nearby series range
+    return Math.max(yBufferMin, yInterval * INCREASE_NEARBY_SERIES_MULTIPLIER);
+}

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -21,20 +21,30 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    TOOLTIP_MIN_WIDTH: ()=>TOOLTIP_MIN_WIDTH,
     TOOLTIP_MAX_WIDTH: ()=>TOOLTIP_MAX_WIDTH,
     TOOLTIP_MAX_HEIGHT: ()=>TOOLTIP_MAX_HEIGHT,
     TOOLTIP_LABELS_MAX_WIDTH: ()=>TOOLTIP_LABELS_MAX_WIDTH,
-    TOOLTIP_MAX_ITEMS: ()=>TOOLTIP_MAX_ITEMS,
+    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: ()=>TOOLTIP_ADJUST_Y_POS_MULTIPLIER,
+    FALLBACK_CHART_WIDTH: ()=>FALLBACK_CHART_WIDTH,
+    NEARBY_SERIES_DESCRIPTION: ()=>NEARBY_SERIES_DESCRIPTION,
+    EMPHASIZED_SERIES_DESCRIPTION: ()=>EMPHASIZED_SERIES_DESCRIPTION,
+    TOOLTIP_BG_COLOR_FALLBACK: ()=>TOOLTIP_BG_COLOR_FALLBACK,
     TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
     defaultCursorData: ()=>defaultCursorData,
     emptyTooltipData: ()=>emptyTooltipData,
     useMousePosition: ()=>useMousePosition
 });
 const _react = require("react");
+const TOOLTIP_MIN_WIDTH = 375;
 const TOOLTIP_MAX_WIDTH = 650;
-const TOOLTIP_MAX_HEIGHT = 400;
+const TOOLTIP_MAX_HEIGHT = 650;
 const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
-const TOOLTIP_MAX_ITEMS = 30;
+const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;
+const FALLBACK_CHART_WIDTH = 750;
+const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';
+const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';
+const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';
 const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',
@@ -71,6 +81,10 @@ const useMousePosition = ()=>{
                     x: e.pageX,
                     y: e.pageY
                 },
+                client: {
+                    x: e.clientX,
+                    y: e.clientY
+                },
                 plotCanvas: {
                     x: e.offsetX,
                     y: e.offsetY

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -19,34 +19,26 @@ Object.defineProperty(exports, "assembleTransform", {
     get: ()=>assembleTransform
 });
 const _tooltipModel = require("./tooltip-model");
-function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
+    const cursorPaddingX = 32;
+    const cursorPaddingY = 16;
     if (pinnedPos !== null) {
         mousePos = pinnedPos;
     }
-    const cursorPaddingX = 32;
-    const cursorPaddingY = 16;
     // Tooltip is located in a Portal attached to the body.
     // Using page coordinates instead of viewport ensures the tooltip is
     // absolutely positioned correctly as the user scrolls
     const x = mousePos.page.x;
     let y = mousePos.page.y + cursorPaddingY;
-    const isCloseToBottom = mousePos.page.y > window.innerHeight * 0.8;
-    const yPosAdjustThreshold = chartHeight * 0.75;
-    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
-    if (isCloseToBottom === true) {
-        if (seriesNum > 6) {
-            y = mousePos.page.y * 0.75;
-        } else {
-            y = mousePos.page.y * 0.9;
-        }
-    } else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
-        y = mousePos.page.y * 0.95;
+    // adjust so tooltip does not get cut off at bottom of chart
+    if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
+        // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport
+        y = mousePos.page.y - tooltipHeight * _tooltipModel.TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
     }
-    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
-    const tooltipWidth = seriesNum > 1 ? _tooltipModel.TOOLTIP_MAX_WIDTH : _tooltipModel.TOOLTIP_MAX_WIDTH / 2;
+    // use tooltip width to determine when to repos from right to left
     const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
     // reposition so tooltip is never too close to right side of chart or left side of browser window
     return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipModel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "UnitSelector", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _model = require("../model");
+const _utils = require("../model/units/utils");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
 const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
     return {
@@ -87,7 +88,7 @@ function UnitSelector({ value , onChange  }) {
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Abbreviate",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                    checked: hasAbbreviate ? !!value.abbreviate : false,
+                    checked: hasAbbreviate ? (0, _utils.shouldAbbreviate)(value.abbreviate) : false,
                     onChange: handleAbbreviateChange,
                     disabled: !hasAbbreviate
                 })

package/dist/cjs/context/SnackbarProvider.js

@@ -0,0 +1,66 @@
+// 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, {
+    SnackbarProvider: ()=>_notistack.SnackbarProvider,
+    useSnackbar: ()=>useSnackbar
+});
+const _react = require("react");
+const _notistack = require("notistack");
+function useSnackbar() {
+    const { enqueueSnackbar , closeSnackbar  } = (0, _notistack.useSnackbar)();
+    // Create variant-specific callbacks
+    const errorSnackbar = useEnqueueFunction(enqueueSnackbar, 'error');
+    const infoSnackbar = useEnqueueFunction(enqueueSnackbar, 'info');
+    const warningSnackbar = useEnqueueFunction(enqueueSnackbar, 'warning');
+    const successSnackbar = useEnqueueFunction(enqueueSnackbar, 'success');
+    const exceptionSnackbar = (0, _react.useCallback)((error, options)=>{
+        // Try to use message prop, but fallback to a default message that
+        // will just stringify the error provided
+        const message = error instanceof Error ? error.message : `An unexpected error occurred: ${error}`;
+        return errorSnackbar(message, options);
+    }, [
+        errorSnackbar
+    ]);
+    return {
+        enqueueSnackbar,
+        closeSnackbar,
+        errorSnackbar,
+        infoSnackbar,
+        warningSnackbar,
+        successSnackbar,
+        exceptionSnackbar
+    };
+}
+// Helper to create a variant-specific enqueue function
+function useEnqueueFunction(enqueueSnackbar, variant) {
+    return (0, _react.useCallback)((message, options)=>{
+        const allOptions = {
+            ...options,
+            variant
+        };
+        return enqueueSnackbar(message, allOptions);
+    }, [
+        enqueueSnackbar,
+        variant
+    ]);
+}

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./ColorPicker"), exports);
+_exportStar(require("./ContentWithLegend"), exports);
 _exportStar(require("./DateTimeRangePicker"), exports);
 _exportStar(require("./Dialog"), exports);
 _exportStar(require("./Drawer"), exports);
@@ -29,12 +30,14 @@ _exportStar(require("./LegendOptionsEditor"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
 _exportStar(require("./StatChart"), exports);
+_exportStar(require("./Table"), exports);
 _exportStar(require("./ThresholdsEditor"), exports);
 _exportStar(require("./TimeSeriesTooltip"), exports);
 _exportStar(require("./UnitSelector"), exports);
 _exportStar(require("./YAxisLabel"), exports);
 _exportStar(require("./context/ChartsThemeProvider"), exports);
 _exportStar(require("./context/TimeZoneProvider"), exports);
+_exportStar(require("./context/SnackbarProvider"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./test-utils"), exports);

package/dist/cjs/model/legend.js

@@ -22,16 +22,25 @@ function _export(target, all) {
 }
 _export(exports, {
     legendPositions: ()=>legendPositions,
+    legendModes: ()=>legendModes,
     LEGEND_POSITIONS_CONFIG: ()=>LEGEND_POSITIONS_CONFIG,
+    LEGEND_MODE_CONFIG: ()=>LEGEND_MODE_CONFIG,
     DEFAULT_LEGEND: ()=>DEFAULT_LEGEND,
     getLegendPosition: ()=>getLegendPosition,
     isValidLegendPosition: ()=>isValidLegendPosition,
-    validateLegendSpec: ()=>validateLegendSpec
+    isValidLegendMode: ()=>isValidLegendMode,
+    getLegendMode: ()=>getLegendMode,
+    validateLegendSpec: ()=>validateLegendSpec,
+    isLegendItemVisuallySelected: ()=>isLegendItemVisuallySelected
 });
 const legendPositions = [
     'Bottom',
     'Right'
 ];
+const legendModes = [
+    'List',
+    'Table'
+];
 const LEGEND_POSITIONS_CONFIG = {
     Bottom: {
         label: 'Bottom'
@@ -40,8 +49,17 @@ const LEGEND_POSITIONS_CONFIG = {
         label: 'Right'
     }
 };
+const LEGEND_MODE_CONFIG = {
+    List: {
+        label: 'List'
+    },
+    Table: {
+        label: 'Table'
+    }
+};
 const DEFAULT_LEGEND = {
-    position: 'Bottom'
+    position: 'Bottom',
+    mode: 'List'
 };
 function getLegendPosition(position) {
     if (position === undefined) {
@@ -55,6 +73,15 @@ function getLegendPosition(position) {
 function isValidLegendPosition(position) {
     return legendPositions.includes(position);
 }
+function isValidLegendMode(mode) {
+    return legendModes.includes(mode);
+}
+function getLegendMode(mode) {
+    if (!mode || !isValidLegendMode(mode)) {
+        return DEFAULT_LEGEND.mode;
+    }
+    return mode;
+}
 function validateLegendSpec(legend) {
     if (legend === undefined) {
         // undefined is valid since this is how legend is hidden by default
@@ -63,5 +90,13 @@ function validateLegendSpec(legend) {
     if (!isValidLegendPosition(legend.position)) {
         return false;
     }
+    if (legend.mode && !isValidLegendMode(legend.mode)) {
+        return false;
+    }
     return true;
 }
+function isLegendItemVisuallySelected(item, selectedItems) {
+    // In the "ALL" case, technically all legend items are selected, but we do
+    // not render them differently.
+    return selectedItems !== 'ALL' && !!selectedItems[item.id];
+}

package/dist/cjs/model/units/bytes.js

@@ -43,8 +43,8 @@ const BYTES_GROUP_CONFIG = {
     abbreviate: true
 };
 const BYTES_UNIT_CONFIG = {
-    // This uses units that are powers of 1000.
-    // In other words, 1KB = 1000 bytes.
+    // These units are powers of 1000.
+    // In other words, 1 KB = 1000 bytes.
     Bytes: {
         group: 'Bytes',
         label: 'Bytes'
@@ -60,6 +60,7 @@ function formatBytes(bytes, options) {
             useGrouping: true
         };
         if ((0, _utils.hasDecimalPlaces)(decimal_places)) {
+            formatterOptions.minimumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
             formatterOptions.maximumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
         } else {
             // This can happen if bytes is between -1000 and 1000
@@ -67,16 +68,17 @@ function formatBytes(bytes, options) {
                 formatterOptions.maximumSignificantDigits = _constants.MAX_SIGNIFICANT_DIGITS;
             }
         }
-        const formatter = Intl.NumberFormat('en-US', formatterOptions);
-        return formatter.format(bytes);
+        return Intl.NumberFormat('en-US', formatterOptions).format(bytes);
     }
     // numbro is able to add units like KB, MB, GB, etc. correctly
     return (0, _numbro.default)(bytes).format({
         output: 'byte',
         base: 'decimal',
         spaceSeparated: true,
-        mantissa: decimal_places !== null && decimal_places !== void 0 ? decimal_places : DEFAULT_NUMBRO_MANTISSA,
-        trimMantissa: true,
-        optionalMantissa: true
+        mantissa: (0, _utils.hasDecimalPlaces)(decimal_places) ? decimal_places : DEFAULT_NUMBRO_MANTISSA,
+        // trimMantissa trims trailing 0s
+        trimMantissa: !(0, _utils.hasDecimalPlaces)(decimal_places),
+        // optionalMantissa excludes all the decimal places if they're all zeros
+        optionalMantissa: !(0, _utils.hasDecimalPlaces)(decimal_places)
     });
 }

package/dist/cjs/model/units/decimal.js

@@ -51,12 +51,12 @@ function formatDecimal(value, options) {
         formatterOptions.notation = 'compact';
     }
     if ((0, _utils.hasDecimalPlaces)(decimal_places)) {
+        formatterOptions.minimumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
         formatterOptions.maximumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
     } else {
         if ((0, _utils.shouldAbbreviate)(abbreviate)) {
             formatterOptions.maximumSignificantDigits = _constants.MAX_SIGNIFICANT_DIGITS;
         }
     }
-    const formatter = Intl.NumberFormat('en-US', formatterOptions);
-    return formatter.format(value);
+    return Intl.NumberFormat('en-US', formatterOptions).format(value);
 }

package/dist/cjs/model/units/percent.js

@@ -64,10 +64,10 @@ function formatPercent(value, { kind , decimal_places  }) {
         useGrouping: true
     };
     if ((0, _utils.hasDecimalPlaces)(decimal_places)) {
+        formatterOptions.minimumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
         formatterOptions.maximumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
     } else {
         formatterOptions.maximumSignificantDigits = _constants.MAX_SIGNIFICANT_DIGITS;
     }
-    const formatter = Intl.NumberFormat('en-us', formatterOptions);
-    return formatter.format(value);
+    return Intl.NumberFormat('en-US', formatterOptions).format(value);
 }

package/dist/cjs/model/units/time.js

@@ -96,10 +96,10 @@ function formatTime(value, { kind , decimal_places  }) {
         unitDisplay: isMonthOrYear ? 'long' : 'narrow'
     };
     if ((0, _utils.hasDecimalPlaces)(decimal_places)) {
+        formatterOptions.minimumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
         formatterOptions.maximumFractionDigits = (0, _utils.limitDecimalPlaces)(decimal_places);
     } else {
         formatterOptions.maximumSignificantDigits = _constants.MAX_SIGNIFICANT_DIGITS;
     }
-    const formatter = Intl.NumberFormat('en-US', formatterOptions);
-    return formatter.format(value);
+    return Intl.NumberFormat('en-US', formatterOptions).format(value);
 }

package/dist/cjs/theme/palette/grey.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "greyOption", {
 const _grey = require("./colors/grey");
 const greyOption = (mode)=>{
     return mode === 'light' ? {
+        50: _grey.grey[50],
         100: _grey.grey[100],
         200: _grey.grey[200],
         300: _grey.grey[300],
@@ -29,8 +30,10 @@ const greyOption = (mode)=>{
         600: _grey.grey[600],
         700: _grey.grey[700],
         800: _grey.grey[800],
-        900: _grey.grey[900]
+        900: _grey.grey[900],
+        950: _grey.grey[950]
     } : {
+        50: _grey.grey[950],
         100: _grey.grey[900],
         200: _grey.grey[800],
         300: _grey.grey[700],
@@ -39,6 +42,7 @@ const greyOption = (mode)=>{
         600: _grey.grey[400],
         700: _grey.grey[300],
         800: _grey.grey[200],
-        900: _grey.grey[100]
+        900: _grey.grey[100],
+        950: _grey.grey[50]
     };
 };

package/dist/context/SnackbarProvider.d.ts

@@ -0,0 +1,23 @@
+import { SnackbarProvider as NotistackProvider, ProviderContext as NotistackContext, SnackbarMessage, OptionsObject, SnackbarKey } from 'notistack';
+export interface SnackbarContext extends NotistackContext {
+    errorSnackbar: EnqueueFunction;
+    infoSnackbar: EnqueueFunction;
+    warningSnackbar: EnqueueFunction;
+    successSnackbar: EnqueueFunction;
+    /**
+     * Useful for catch blocks where the error will be of type `unknown`, tries
+     * to show the `message` property if passed an instance of `Error`.
+     */
+    exceptionSnackbar: (error: unknown, options?: SnackbarOptions) => SnackbarKey;
+}
+declare type EnqueueFunction = (message: SnackbarMessage, options?: SnackbarOptions) => SnackbarKey;
+declare type SnackbarOptions = Omit<OptionsObject, 'variant'>;
+/**
+ * Application-wide provider for showing snackbars/toasts.
+ */
+export { NotistackProvider as SnackbarProvider };
+/**
+ * Gets the SnackbarContext with methods for displaying snackbars/toasts.
+ */
+export declare function useSnackbar(): SnackbarContext;
+//# sourceMappingURL=SnackbarProvider.d.ts.map

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

@@ -0,0 +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,aAAK,eAAe,GAAG,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,WAAW,CAAC;AAE5F,aAAK,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"}