@perses-dev/components 0.54.0-beta.1 → 0.54.0-beta.2

package/dist/cjs/Table/VirtualizedTable.js

@@ -35,7 +35,7 @@ const _TableCell = require("./TableCell");
 const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
 const _TableFoot = require("./TableFoot");
-function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
+function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, columnSizing, columnSizingInfo, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -123,139 +123,162 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
             pageSize: parseInt(event.target.value, 10)
         });
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-            style: {
-                width,
-                height,
-                display: 'flex',
-                flexDirection: 'column'
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableToolbar.TableToolbar, {
-                    ...toolbarConfig,
-                    width: width
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.TableVirtuoso, {
-                    ref: virtuosoRef,
-                    totalCount: rows.length,
-                    components: VirtuosoTableComponents,
-                    // Note: this value is impacted by overscan. See this issue if overscan
-                    // is added.
-                    // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
-                    rangeChanged: setVisibleRange,
-                    fixedHeaderContent: ()=>{
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                            children: headers.map((headerGroup)=>{
-                                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableRow.TableRow, {
-                                    density: density,
-                                    children: headerGroup.headers.map((header, i, headers)=>{
-                                        const column = header.column;
-                                        const position = {
-                                            row: 0,
-                                            column: i
-                                        };
-                                        const isSorted = column.getIsSorted();
-                                        const nextSorting = column.getNextSortingOrder();
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableHeaderCell.TableHeaderCell, {
-                                            onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
-                                            sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
-                                            nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
-                                            width: column.getSize() || defaultColumnWidth,
-                                            defaultColumnHeight: defaultColumnHeight,
-                                            align: column.columnDef.meta?.align,
-                                            variant: "head",
-                                            density: density,
-                                            description: column.columnDef.meta?.headerDescription,
-                                            focusState: getFocusState(position),
-                                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                                            isFirstColumn: i === 0,
-                                            isLastColumn: i === headers.length - 1,
-                                            children: (0, _reacttable.flexRender)(column.columnDef.header, header.getContext())
-                                        }, header.id);
-                                    })
-                                }, headerGroup.id);
-                            })
-                        });
-                    },
-                    fixedFooterContent: pagination ? ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
-                            sx: {
-                                backgroundColor: (theme)=>theme.palette.background.default
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TablePagination, {
-                                colSpan: columns.length,
-                                count: rowCount,
-                                page: pagination.pageIndex,
-                                rowsPerPage: pagination.pageSize,
-                                onPageChange: handleChangePage,
-                                onRowsPerPageChange: handleChangeRowsPerPage
-                            })
-                        }) : undefined,
-                    itemContent: (index)=>{
-                        const row = rows[index];
-                        if (!row) {
-                            return null;
-                        }
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                            children: row.getVisibleCells().map((cell, i, cells)=>{
-                                const position = {
-                                    row: index + 1,
-                                    column: i
-                                };
-                                const cellContext = cell.getContext();
-                                const cellConfig = cellConfigs?.[cellContext.cell.id];
-                                const cellRenderFn = cell.column.columnDef.cell;
-                                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                                /*
+    /**
+   * Instead of calling `column.getSize()` on every render for every header
+   * and especially every data cell (very expensive),
+   * we will calculate all column sizes at once at the root table level in a useMemo
+   * and pass the column sizes down as CSS variables to the <table> element.
+   */ const columnSizeVars = (0, _react.useMemo)(()=>{
+        const colSizes = {};
+        headers.forEach((headerGroup)=>{
+            headerGroup.headers.filter((header)=>header.column.getCanResize()).forEach((header)=>{
+                colSizes[`--header-${header.id}-size`] = header.getSize();
+                colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+            });
+        });
+        return colSizes;
+    // We want to recalculate column sizes whenever column sizes or column resizing info changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        columnSizingInfo,
+        columnSizing,
+        headers
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        style: {
+            width,
+            height,
+            ...columnSizeVars
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableToolbar.TableToolbar, {
+                ...toolbarConfig,
+                width: width
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.TableVirtuoso, {
+                ref: virtuosoRef,
+                totalCount: rows.length,
+                components: VirtuosoTableComponents,
+                // Note: this value is impacted by overscan. See this issue if overscan
+                // is added.
+                // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
+                rangeChanged: setVisibleRange,
+                fixedHeaderContent: ()=>{
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                        children: headers.map((headerGroup)=>{
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableRow.TableRow, {
+                                density: density,
+                                children: headerGroup.headers.map((header, i, headers)=>{
+                                    const column = header.column;
+                                    const position = {
+                                        row: 0,
+                                        column: i
+                                    };
+                                    const isSorted = column.getIsSorted();
+                                    const nextSorting = column.getNextSortingOrder();
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableHeaderCell.TableHeaderCell, {
+                                        onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
+                                        sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
+                                        nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
+                                        width: header.column.getCanResize() ? `calc(var(--header-${header?.id}-size) * 1px)` : column.getSize() || defaultColumnWidth,
+                                        defaultColumnHeight: defaultColumnHeight,
+                                        align: column.columnDef.meta?.align,
+                                        variant: "head",
+                                        density: density,
+                                        description: column.columnDef.meta?.headerDescription,
+                                        focusState: getFocusState(position),
+                                        onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                        isFirstColumn: i === 0,
+                                        isLastColumn: i === headers.length - 1,
+                                        resizeConfig: header.column.getCanResize() ? {
+                                            resizeHandler: header.getResizeHandler(),
+                                            resetSizeHandler: header.column.resetSize,
+                                            isResizing: header.column.getIsResizing()
+                                        } : undefined,
+                                        children: (0, _reacttable.flexRender)(column.columnDef.header, header.getContext())
+                                    }, header.id);
+                                })
+                            }, headerGroup.id);
+                        })
+                    });
+                },
+                fixedFooterContent: pagination ? ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
+                        sx: {
+                            backgroundColor: (theme)=>theme.palette.background.default
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TablePagination, {
+                            colSpan: columns.length,
+                            count: rowCount,
+                            page: pagination.pageIndex,
+                            rowsPerPage: pagination.pageSize,
+                            onPageChange: handleChangePage,
+                            onRowsPerPageChange: handleChangeRowsPerPage
+                        })
+                    }) : undefined,
+                itemContent: (index)=>{
+                    const row = rows[index];
+                    if (!row) {
+                        return null;
+                    }
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                        children: row.getVisibleCells().map((cell, i, cells)=>{
+                            const position = {
+                                row: index + 1,
+                                column: i
+                            };
+                            const cellContext = cell.getContext();
+                            const cellConfig = cellConfigs?.[cellContext.cell.id];
+                            const cellRenderFn = cell.column.columnDef.cell;
+                            const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
+                            /*
                      IMPORTANT:
                      If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
                      Components have no access to any context (Which is intentional and correct)
                      We may want to add parameters to a link from neighboring cells in the future as well.
                      If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
                   */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
-                                let description = undefined;
-                                if (typeof cellDescriptionDef === 'function') {
-                                    // If the cell description is a function, set the value using
-                                    // the function.
-                                    description = cellDescriptionDef(cellContext);
-                                } else if (cellDescriptionDef && typeof cellContent === 'string') {
-                                    // If the cell description is `true` AND the cell content is
-                                    // a string (and thus viable as a `title` attribute), use the
-                                    // cell content.
-                                    description = cellContent;
-                                }
-                                /* this has been specifically added for the data link,
+                            let description = undefined;
+                            if (typeof cellDescriptionDef === 'function') {
+                                // If the cell description is a function, set the value using
+                                // the function.
+                                description = cellDescriptionDef(cellContext);
+                            } else if (cellDescriptionDef && typeof cellContent === 'string') {
+                                // If the cell description is `true` AND the cell content is
+                                // a string (and thus viable as a `title` attribute), use the
+                                // cell content.
+                                description = cellContent;
+                            }
+                            /* this has been specifically added for the data link,
                      therefore, non string and numeric values should be excluded
                   */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
-                                        'string',
-                                        'number'
-                                    ].includes(typeof value)).reduce((acc, [key, value])=>({
-                                        ...acc,
-                                        [key]: String(value)
-                                    }), {});
-                                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
-                                    "data-testid": cell.id,
-                                    title: description || cellConfig?.text || cellContent,
-                                    width: cell.column.getSize() || defaultColumnWidth,
-                                    defaultColumnHeight: defaultColumnHeight,
-                                    align: cell.column.columnDef.meta?.align,
-                                    density: density,
-                                    focusState: getFocusState(position),
-                                    onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                                    isFirstColumn: i === 0,
-                                    isLastColumn: i === cells.length - 1,
-                                    description: description,
-                                    color: cellConfig?.textColor ?? undefined,
-                                    backgroundColor: cellConfig?.backgroundColor ?? undefined,
-                                    dataLink: cell.column.columnDef.meta?.dataLink,
-                                    adjacentCellsValuesMap: adjacentCellsValuesMap,
-                                    children: cellConfig?.text || cellContent
-                                }, cell.id);
-                            })
-                        });
-                    }
-                })
-            ]
-        })
+                                    'string',
+                                    'number'
+                                ].includes(typeof value)).reduce((acc, [key, value])=>({
+                                    ...acc,
+                                    [key]: String(value)
+                                }), {});
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
+                                "data-testid": cell.id,
+                                title: description || cellConfig?.text || cellContent,
+                                width: cell.column.getCanResize() ? `calc(var(--col-${cell.column.id}-size) * 1px)` : cell.column.getSize() || defaultColumnWidth,
+                                defaultColumnHeight: defaultColumnHeight,
+                                align: cell.column.columnDef.meta?.align,
+                                density: density,
+                                focusState: getFocusState(position),
+                                onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                isFirstColumn: i === 0,
+                                isLastColumn: i === cells.length - 1,
+                                description: description,
+                                color: cellConfig?.textColor ?? undefined,
+                                backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                                dataLink: cell.column.columnDef.meta?.dataLink,
+                                adjacentCellsValuesMap: adjacentCellsValuesMap,
+                                children: cellConfig?.text || cellContent
+                            }, cell.id);
+                        })
+                    });
+                }
+            })
+        ]
     });
 }

package/dist/cjs/Table/hooks/useFuzzySearch.js

@@ -23,26 +23,45 @@ Object.defineProperty(exports, "useFuzzySearch", {
 const _reacttable = require("@tanstack/react-table");
 const _matchsorterutils = require("@tanstack/match-sorter-utils");
 const _react = require("react");
-const fuzzyFilter = (row, columnId, value, addMeta)=>{
-    const itemRank = (0, _matchsorterutils.rankItem)(row.getValue(columnId), value);
-    addMeta({
-        itemRank
-    });
-    return itemRank.passed;
-};
-function useFuzzySearch(isSearchEnabled) {
+const getFuzzyFilterFunction = (threshold)=>(row, columnId, value, addMeta)=>{
+        const itemRank = (0, _matchsorterutils.rankItem)(row.getValue(columnId), value, {
+            threshold: _matchsorterutils.rankings[threshold]
+        });
+        addMeta({
+            itemRank
+        });
+        return itemRank.passed;
+    };
+function useFuzzySearch(isSearchEnabled, threshold, expanded, setExpanded) {
     const [globalFilter, setGlobalFilter] = (0, _react.useState)('');
+    const [prevExpandedState, setPrevExpandedState] = (0, _react.useState)(expanded);
+    // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared
+    const handleGlobalFilterChange = (0, _react.useCallback)((value)=>{
+        setGlobalFilter((prev)=>{
+            if (!prev) {
+                setPrevExpandedState(expanded);
+                setExpanded(true);
+            } else if (prev && !value) {
+                setExpanded(prevExpandedState);
+            }
+            return value;
+        });
+    }, [
+        expanded,
+        prevExpandedState,
+        setExpanded
+    ]);
     return {
         globalFilter,
-        setGlobalFilter,
+        setGlobalFilter: handleGlobalFilterChange,
         fuzzySearchOptions: {
             filterFns: {
-                fuzzy: fuzzyFilter
+                fuzzy: getFuzzyFilterFunction(threshold)
             },
             globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,
             getFilteredRowModel: isSearchEnabled ? (0, _reacttable.getFilteredRowModel)() : undefined,
             filterFromLeafRows: isSearchEnabled,
-            onGlobalFilterChange: setGlobalFilter
+            onGlobalFilterChange: handleGlobalFilterChange
         }
     };
 }

package/dist/cjs/Table/model/table-model.js

@@ -24,6 +24,12 @@ _export(exports, {
     get DEFAULT_COLUMN_HEIGHT () {
         return DEFAULT_COLUMN_HEIGHT;
     },
+    get DEFAULT_COLUMN_MAX_WIDTH () {
+        return DEFAULT_COLUMN_MAX_WIDTH;
+    },
+    get DEFAULT_COLUMN_MIN_WIDTH () {
+        return DEFAULT_COLUMN_MIN_WIDTH;
+    },
     get DEFAULT_COLUMN_WIDTH () {
         return DEFAULT_COLUMN_WIDTH;
     },
@@ -35,6 +41,8 @@ _export(exports, {
     }
 });
 const DEFAULT_COLUMN_WIDTH = 150;
+const DEFAULT_COLUMN_MIN_WIDTH = 60;
+const DEFAULT_COLUMN_MAX_WIDTH = 1000;
 const DEFAULT_COLUMN_HEIGHT = 40;
 function calculateTableCellHeight(lineHeight, paddingY) {
     // Doing a bunch of math to enforce height to avoid weirdness with mismatched
@@ -78,27 +86,16 @@ function getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstCol
         lineHeight: lineHeight
     };
 }
-function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...otherProps })=>{
-        // Tanstack Table does not support an "auto" value to naturally size to fit
-        // the space in a table. We translate our custom "auto" setting to 0 size
-        // for these columns, so it is easy to fall back to auto when rendering.
-        // Taking from a recommendation in this github discussion:
-        // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
-        const sizeProps = width === 'auto' || width === undefined ? {
-            // All zero values are used as shorthand for "auto" when rendering
-            // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
-            size: 0,
-            minSize: 0,
-            maxSize: 0
-        } : {
-            size: width
-        };
-        const result = {
+function persesColumnsToTanstackColumns(columns, defaultColumnConfig) {
+    return columns.map(({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps })=>{
+        const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;
+        const sizeProps = width === 'auto' || width === undefined ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth) : getUserProvidedSizeProps(isResizingEnabled, width, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth);
+        return {
             ...otherProps,
             ...sizeProps,
             // Default sorting to false, so it is very explicitly set per column.
             enableSorting: !!enableSorting,
+            enableResizing: isResizingEnabled,
             // Open-ended store for extra metadata in TanStack Table, so you can bake
             // in your own features.
             meta: {
@@ -108,7 +105,34 @@ function persesColumnsToTanstackColumns(columns) {
                 dataLink
             }
         };
-        return result;
     });
-    return tableCols;
+}
+function getUserProvidedSizeProps(isResizingEnabled, width, minWidth, maxWidth) {
+    // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.
+    return isResizingEnabled ? {
+        size: width,
+        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH
+    } : {
+        size: width
+    };
+}
+function getDefaultSizeProps(isResizingEnabled, minWidth, maxWidth) {
+    return isResizingEnabled ? {
+        // When resizing is enabled, we need to set a default size for the column
+        // so that relative value can be calculated when resizing and column is visible.
+        size: DEFAULT_COLUMN_WIDTH,
+        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH
+    } : // the space in a table. We translate our custom "auto" setting to 0 size
+    // for these columns, so it is easy to fall back to auto when rendering.
+    // Taking from a recommendation in this github discussion:
+    // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
+    {
+        // All zero values are used as shorthand for "auto" when rendering
+        // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
+        size: 0,
+        minSize: 0,
+        maxSize: 0
+    };
 }

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -29,6 +29,7 @@ const _react = require("react");
 const _context = require("../context");
 const _timeZoneOption = require("../model/timeZoneOption");
 const _SettingsAutocomplete = require("../SettingsAutocomplete");
+const _format = require("../utils/format");
 const _DateTimeRangePicker = require("./DateTimeRangePicker");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
@@ -55,6 +56,8 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
     const [tzAnchorEl, setTzAnchorEl] = (0, _react.useState)(null);
     const tzOpen = Boolean(tzAnchorEl);
     const tzLabel = tzOptions.find((o)=>o.value === timeZone)?.display ?? timeZone;
+    const tzOffset = (0, _format.getGMTOffset)(timeZone);
+    const localOffset = (0, _format.getGMTOffset)('local');
     const tzAutocompleteOptions = tzOptions.map((o)=>({
             id: o.value,
             label: o.display
@@ -140,6 +143,26 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                     value: (0, _utils.formatTimeRange)(value, timeZone),
                     onClick: ()=>setOpen(!open),
                     IconComponent: _Calendar.default,
+                    renderValue: ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            alignItems: "center",
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: timeOptions.find((opt)=>(0, _utils.formatTimeRange)(opt.value, timeZone) === (0, _utils.formatTimeRange)(value, timeZone))?.display ?? (0, _utils.formatTimeRange)(value, timeZone)
+                                }),
+                                tzOffset !== localOffset && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                    sx: {
+                                        typography: 'caption',
+                                        color: 'text.secondary'
+                                    },
+                                    children: [
+                                        "· ",
+                                        tzOffset
+                                    ]
+                                })
+                            ]
+                        }),
                     inputProps: {
                         'aria-label': `Select time range. Currently set to ${value}`
                     },

package/dist/cjs/model/index.js

@@ -34,6 +34,7 @@ _export_star(require("./utils"), exports);
 _export_star(require("./types"), exports);
 _export_star(require("./thresholds"), exports);
 _export_star(require("./transforms"), exports);
+_export_star(require("./value-mapping"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/model/value-mapping.js

@@ -0,0 +1,16 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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
+});

package/dist/cjs/theme/typography.js

@@ -30,7 +30,7 @@ require("@fontsource/inter/900.css");
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
 const fontWeightMedium = 600;
-const fontWeightBold = 900;
+const fontWeightBold = 700;
 const typography = {
     fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontWeightLight,

package/dist/cjs/utils/format.js

@@ -32,6 +32,9 @@ _export(exports, {
     },
     get getFormattedAxisLabel () {
         return getFormattedAxisLabel;
+    },
+    get getGMTOffset () {
+        return getGMTOffset;
     }
 });
 const _tz = require("@date-fns/tz");
@@ -66,6 +69,23 @@ function formatWithTimeZone(date, formatString, timeZone) {
         });
     }
 }
+function getGMTOffset(timeZone) {
+    const lower = timeZone?.toLowerCase();
+    const resolvedTimeZone = !timeZone || lower === 'local' || lower === 'browser' ? Intl.DateTimeFormat().resolvedOptions().timeZone : lower === 'utc' ? 'UTC' : timeZone;
+    try {
+        const formatter = new Intl.DateTimeFormat('en-US', {
+            timeZone: resolvedTimeZone,
+            timeZoneName: 'shortOffset'
+        });
+        const parts = formatter.formatToParts(new Date());
+        const tzPart = parts.find((p)=>p.type === 'timeZoneName');
+        const value = tzPart?.value ?? '';
+        if (value === 'GMT') return 'GMT+0';
+        return value;
+    } catch  {
+        return 'GMT+0';
+    }
+}
 function getFormattedAxisLabel(rangeMs) {
     const dayMs = 86400000;
     const monthMs = 2629440000;

package/dist/context/ChartsProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from 'react';
 export function ChartsProvider(props) {
     const { children, chartsTheme, enablePinning = false, enableSyncGrouping = true } = props;

package/dist/context/ChartsProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/ChartsProvider.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { createContext, ReactElement, useContext, useMemo, useState } from 'react';\nimport { PersesChartsTheme } from '../model';\nimport { CursorCoordinates } from '../TimeSeriesTooltip';\n\nexport interface ChartsProviderProps {\n  chartsTheme: PersesChartsTheme;\n  enablePinning?: boolean;\n  enableSyncGrouping?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface SharedChartsState {\n  chartsTheme: PersesChartsTheme;\n  enablePinning: boolean;\n  enableSyncGrouping: boolean;\n  lastTooltipPinnedCoords: CursorCoordinates | null;\n  setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;\n}\n\nexport function ChartsProvider(props: ChartsProviderProps): ReactElement {\n  const { children, chartsTheme, enablePinning = false, enableSyncGrouping = true } = props;\n\n  const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n\n  const ctx = useMemo(() => {\n    return {\n      chartsTheme,\n      enablePinning,\n      lastTooltipPinnedCoords,\n      enableSyncGrouping,\n      setLastTooltipPinnedCoords,\n    };\n  }, [chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords]);\n\n  return <ChartsThemeContext.Provider value={ctx}>{children}</ChartsThemeContext.Provider>;\n}\n\nexport const ChartsThemeContext = createContext<SharedChartsState | undefined>(undefined);\n\nexport function useChartsContext(): SharedChartsState {\n  const ctx = useContext(ChartsThemeContext);\n  if (ctx === undefined) {\n    throw new Error('No ChartsThemeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useChartsTheme(): PersesChartsTheme {\n  const ctx = useChartsContext();\n  return ctx.chartsTheme;\n}\n"],"names":["React","createContext","useContext","useMemo","useState","ChartsProvider","props","children","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","ctx","ChartsThemeContext","Provider","value","undefined","useChartsContext","Error","useChartsTheme"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAmB1F,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,gBAAgB,KAAK,EAAEC,qBAAqB,IAAI,EAAE,GAAGJ;IAEpF,MAAM,CAACK,yBAAyBC,2BAA2B,GAAGR,SAAmC;IAEjG,MAAMS,MAAMV,QAAQ;QAClB,OAAO;YACLK;YACAC;YACAE;YACAD;YACAE;QACF;IACF,GAAG;QAACJ;QAAaC;QAAeC;QAAoBC;QAAyBC;KAA2B;IAExG,qBAAO,KAACE,mBAAmBC,QAAQ;QAACC,OAAOH;kBAAMN;;AACnD;AAEA,OAAO,MAAMO,mCAAqBb,cAA6CgB,WAAW;AAE1F,OAAO,SAASC;IACd,MAAML,MAAMX,WAAWY;IACvB,IAAID,QAAQI,WAAW;QACrB,MAAM,IAAIE,MAAM;IAClB;IACA,OAAON;AACT;AAEA,OAAO,SAASO;IACd,MAAMP,MAAMK;IACZ,OAAOL,IAAIL,WAAW;AACxB"}
+{"version":3,"sources":["../../src/context/ChartsProvider.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { createContext, ReactElement, useContext, useMemo, useState } from 'react';\nimport { PersesChartsTheme } from '../model';\nimport { CursorCoordinates } from '../TimeSeriesTooltip';\n\nexport interface ChartsProviderProps {\n  chartsTheme: PersesChartsTheme;\n  enablePinning?: boolean;\n  enableSyncGrouping?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface SharedChartsState {\n  chartsTheme: PersesChartsTheme;\n  enablePinning: boolean;\n  enableSyncGrouping: boolean;\n  lastTooltipPinnedCoords: CursorCoordinates | null;\n  setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;\n}\n\nexport function ChartsProvider(props: ChartsProviderProps): ReactElement {\n  const { children, chartsTheme, enablePinning = false, enableSyncGrouping = true } = props;\n\n  const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n\n  const ctx = useMemo(() => {\n    return {\n      chartsTheme,\n      enablePinning,\n      lastTooltipPinnedCoords,\n      enableSyncGrouping,\n      setLastTooltipPinnedCoords,\n    };\n  }, [chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords]);\n\n  return <ChartsThemeContext.Provider value={ctx}>{children}</ChartsThemeContext.Provider>;\n}\n\nexport const ChartsThemeContext = createContext<SharedChartsState | undefined>(undefined);\n\nexport function useChartsContext(): SharedChartsState {\n  const ctx = useContext(ChartsThemeContext);\n  if (ctx === undefined) {\n    throw new Error('No ChartsThemeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useChartsTheme(): PersesChartsTheme {\n  const ctx = useChartsContext();\n  return ctx.chartsTheme;\n}\n"],"names":["React","createContext","useContext","useMemo","useState","ChartsProvider","props","children","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","ctx","ChartsThemeContext","Provider","value","undefined","useChartsContext","Error","useChartsTheme"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAmB1F,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,gBAAgB,KAAK,EAAEC,qBAAqB,IAAI,EAAE,GAAGJ;IAEpF,MAAM,CAACK,yBAAyBC,2BAA2B,GAAGR,SAAmC;IAEjG,MAAMS,MAAMV,QAAQ;QAClB,OAAO;YACLK;YACAC;YACAE;YACAD;YACAE;QACF;IACF,GAAG;QAACJ;QAAaC;QAAeC;QAAoBC;QAAyBC;KAA2B;IAExG,qBAAO,KAACE,mBAAmBC,QAAQ;QAACC,OAAOH;kBAAMN;;AACnD;AAEA,OAAO,MAAMO,mCAAqBb,cAA6CgB,WAAW;AAE1F,OAAO,SAASC;IACd,MAAML,MAAMX,WAAWY;IACvB,IAAID,QAAQI,WAAW;QACrB,MAAM,IAAIE,MAAM;IAClB;IACA,OAAON;AACT;AAEA,OAAO,SAASO;IACd,MAAMP,MAAMK;IACZ,OAAOL,IAAIL,WAAW;AACxB"}

package/dist/context/ItemActionsProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 const ItemActionsContext = /*#__PURE__*/ createContext(undefined);
 export function ItemActionsProvider({ children }) {