@perses-dev/dashboards 0.52.0-beta.4 → 0.52.0-rc.0

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -24,9 +24,51 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _context = require("../../context");
 const _Panel = require("../Panel");
 const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
+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 GridItemContent(props) {
     const { panelGroupItemId, width } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
@@ -39,6 +81,17 @@ function GridItemContent(props) {
         initialInView: false,
         triggerOnce: true
     });
+    const [openQueryViewer, setOpenQueryViewer] = (0, _react.useState)(false);
+    const viewQueriesHandler = (0, _react.useMemo)(()=>{
+        return isEditMode || !queries?.length ? undefined : {
+            onClick: ()=>{
+                setOpenQueryViewer(true);
+            }
+        };
+    }, [
+        isEditMode,
+        queries
+    ]);
     const readHandlers = {
         isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
@@ -69,28 +122,95 @@ function GridItemContent(props) {
         };
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+    const queryRows = (0, _react.useMemo)(()=>{
+        if (!queries?.length) return null;
+        const queryItems = [];
+        queries.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queries.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queries
+    ]);
+    const onCloseHandler = ()=>{
+        setOpenQueryViewer(false);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ref: ref,
         sx: {
             width: '100%',
             height: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs,
-                ...pluginQueryOptions
-            },
-            queryOptions: {
-                enabled: inView
-            },
-            children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
-                definition: panelDefinition,
-                readHandlers: readHandlers,
-                editHandlers: editHandlers,
-                panelOptions: props.panelOptions,
-                panelGroupItemId: panelGroupItemId
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
+                fullWidth: true,
+                PaperProps: {
+                    sx: {
+                        margin: '10px',
+                        width: 'calc(100% - 20px)'
+                    }
+                },
+                maxWidth: "lg",
+                open: openQueryViewer,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
+                        children: "Query Viewer"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: {
+                                padding: '5px'
+                            },
+                            children: queryRows
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogActions, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: "outlined",
+                            onClick: onCloseHandler,
+                            color: "primary",
+                            children: "Close"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+                definitions: definitions,
+                options: {
+                    suggestedStepMs,
+                    ...pluginQueryOptions
+                },
+                queryOptions: {
+                    enabled: inView
+                },
+                children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+                    definition: panelDefinition,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
+                    panelOptions: props.panelOptions,
+                    panelGroupItemId: panelGroupItemId
+                })
             })
-        })
+        ]
     });
 }

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -14,67 +14,34 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "GridLayout", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GridLayout: function() {
         return GridLayout;
+    },
+    RepeatGridLayout: function() {
+        return RepeatGridLayout;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactgridlayout = require("react-grid-layout");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _constants = require("../../constants");
-const _GridTitle = require("./GridTitle");
-const _GridItemContent = require("./GridItemContent");
-const _GridContainer = require("./GridContainer");
-const DEFAULT_MARGIN = 10;
-const ROW_HEIGHT = 30;
+const _Row = require("./Row");
 function GridLayout(props) {
     const { panelGroupId, panelOptions, panelFullHeight } = props;
-    const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
     const { updatePanelGroupLayouts } = (0, _context.usePanelGroupActions)(panelGroupId);
-    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
+    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
-    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
-    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
-    (0, _react.useEffect)(()=>{
-        if (hasViewPanel) {
-            setIsOpen(true);
-        }
-    }, [
-        hasViewPanel
-    ]);
-    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
-    const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;
-    // Item layout is override if there is a panel in view mode
-    const itemLayouts = (0, _react.useMemo)(()=>{
-        if (itemLayoutViewed) {
-            return groupDefinition.itemLayouts.map((itemLayout)=>{
-                if (itemLayout.i === itemLayoutViewed) {
-                    const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
-                    return {
-                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
-                        i: itemLayoutViewed,
-                        w: 48,
-                        x: 0,
-                        y: 0
-                    };
-                }
-                return itemLayout;
-            });
-        }
-        return groupDefinition.itemLayouts;
-    }, [
-        groupDefinition.itemLayouts,
-        itemLayoutViewed,
-        panelFullHeight
-    ]);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
         // Using the value from `allLayouts` instead of `currentLayout` because of
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
@@ -95,85 +62,70 @@ function GridLayout(props) {
         // exclude margin and padding from total width
         setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
     };
-    // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance
-    const ResponsiveGridLayout = (0, _react.useMemo)(()=>(0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive), []);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
-        sx: {
-            display: isGridDisplayed ? 'block' : 'none',
-            height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',
-            overflow: itemLayoutViewed ? 'hidden' : 'unset'
-        },
-        children: [
-            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
-                panelGroupId: panelGroupId,
-                title: groupDefinition.title,
-                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
-                    isOpen,
-                    onToggleOpen: ()=>setIsOpen((current)=>!current)
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
-                in: isOpen,
-                unmountOnExit: true,
-                appear: false,
-                "data-testid": "panel-group-content",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
-                    className: "layout",
-                    breakpoints: {
-                        sm: theme.breakpoints.values.sm,
-                        xxs: 0
-                    },
-                    cols: _constants.GRID_LAYOUT_COLS,
-                    rowHeight: ROW_HEIGHT,
-                    draggableHandle: ".drag-handle",
-                    resizeHandles: [
-                        'se'
-                    ],
-                    isDraggable: isEditMode && !hasViewPanel,
-                    isResizable: isEditMode && !hasViewPanel,
-                    margin: [
-                        DEFAULT_MARGIN,
-                        DEFAULT_MARGIN
-                    ],
-                    containerPadding: [
-                        0,
-                        10
-                    ],
-                    layouts: {
-                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts
-                    },
-                    onLayoutChange: handleLayoutChange,
-                    onWidthChange: handleWidthChange,
-                    allowOverlap: hasViewPanel,
-                    children: itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            style: {
-                                display: itemLayoutViewed !== undefined ? itemLayoutViewed === i ? 'unset' : 'none' : 'unset'
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                FallbackComponent: _components.ErrorAlert,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
-                                    panelOptions: panelOptions,
-                                    panelGroupItemId: {
-                                        panelGroupId,
-                                        panelGroupItemLayoutId: i
-                                    },
-                                    width: calculateGridItemWidth(w, gridColWidth)
-                                })
-                            })
-                        }, i))
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: !groupDefinition.repeatVariable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            onWidthChange: handleWidthChange
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RepeatGridLayout, {
+            repeatVariableName: groupDefinition.repeatVariable,
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            onWidthChange: handleWidthChange
+        })
+    });
+}
+function RepeatGridLayout({ repeatVariableName, panelGroupId, groupDefinition, gridColWidth, panelFullHeight, panelOptions, isEditMode = false, onLayoutChange, onWidthChange }) {
+    const variables = (0, _pluginsystem.useVariableValues)();
+    const variable = variables[repeatVariableName];
+    // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating
+    if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: onLayoutChange,
+            onWidthChange: onWidthChange
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: variable.value.map((value)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
+                value: {
+                    state: {
+                        ...variables,
+                        [repeatVariableName]: {
+                            value,
+                            loading: false
+                        }
+                    }
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+                    panelGroupId: panelGroupId,
+                    groupDefinition: groupDefinition,
+                    gridColWidth: gridColWidth,
+                    panelFullHeight: panelFullHeight,
+                    panelOptions: panelOptions,
+                    isEditMode: isEditMode,
+                    onLayoutChange: onLayoutChange,
+                    onWidthChange: onWidthChange,
+                    repeatVariable: [
+                        repeatVariableName,
+                        value
+                    ]
                 })
-            })
-        ]
+            }, `${repeatVariableName}-${value}`))
     });
 }
-/**
- * Calculates grid item width
- * @param w number of columns the grid item spans
- * @param colWidth the width of each column in px
- * @returns grid item's width in px
- * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
- */ const calculateGridItemWidth = (w, colWidth)=>{
-    // 0 * Infinity === NaN, which causes problems with resize contraints
-    if (!Number.isFinite(w)) return w;
-    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
-};

package/dist/cjs/components/GridLayout/Row.js

@@ -0,0 +1,150 @@
+// Copyright 2025 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, "Row", {
+    enumerable: true,
+    get: function() {
+        return Row;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _dashboards = require("@perses-dev/dashboards");
+const _react = require("react");
+const _reactgridlayout = require("react-grid-layout");
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _GridContainer = require("./GridContainer");
+const _GridItemContent = require("./GridItemContent");
+const _GridTitle = require("./GridTitle");
+const DEFAULT_MARGIN = 10;
+const ROW_HEIGHT = 30;
+function Row({ panelGroupId, groupDefinition, gridColWidth, panelFullHeight, panelOptions, isEditMode = false, onLayoutChange, onWidthChange, repeatVariable }) {
+    const ResponsiveGridLayout = (0, _react.useMemo)(()=>(0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive), []);
+    const theme = (0, _material.useTheme)();
+    const viewPanelItemId = (0, _dashboards.useViewPanelGroup)();
+    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
+    const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId && // Check for repeatVariable panels
+    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] && viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];
+    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
+    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
+    const isGridDisplayed = !viewPanelItemId || hasViewPanel;
+    // TODO: handle it without useEffect
+    (0, _react.useEffect)(()=>{
+        if (hasViewPanel) {
+            setIsOpen(true);
+        }
+    }, [
+        hasViewPanel
+    ]);
+    // Item layout is override if there is a panel in view mode
+    const itemLayouts = (0, _react.useMemo)(()=>{
+        if (itemLayoutViewed) {
+            return groupDefinition.itemLayouts.map((itemLayout)=>{
+                if (itemLayout.i === itemLayoutViewed) {
+                    const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
+                    return {
+                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
+                        i: itemLayoutViewed,
+                        w: 48,
+                        x: 0,
+                        y: 0
+                    };
+                }
+                return itemLayout;
+            });
+        }
+        return groupDefinition.itemLayouts;
+    }, [
+        groupDefinition.itemLayouts,
+        itemLayoutViewed,
+        panelFullHeight
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
+        sx: {
+            display: isGridDisplayed ? 'block' : 'none',
+            height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',
+            overflow: itemLayoutViewed ? 'hidden' : 'unset'
+        },
+        children: [
+            groupDefinition.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen: isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                "data-testid": "panel-group-content",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: _constants.GRID_LAYOUT_COLS,
+                    rowHeight: ROW_HEIGHT,
+                    draggableHandle: ".drag-handle",
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode && !hasViewPanel,
+                    isResizable: isEditMode && !hasViewPanel,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
+                    containerPadding: [
+                        0,
+                        10
+                    ],
+                    layouts: {
+                        sm: itemLayouts
+                    },
+                    onLayoutChange: onLayoutChange,
+                    onWidthChange: onWidthChange,
+                    allowOverlap: hasViewPanel,
+                    children: itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            style: {
+                                display: itemLayoutViewed ? itemLayoutViewed === i ? 'unset' : 'none' : 'unset'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
+                                    panelOptions: panelOptions,
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i,
+                                        repeatVariable
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
+                                })
+                            })
+                        }, i))
+                })
+            })
+        ]
+    });
+}
+const calculateGridItemWidth = (w, colWidth)=>{
+    // 0 * Infinity === NaN, which causes problems with resize contraints
+    if (!Number.isFinite(w)) return w;
+    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
+};

package/dist/cjs/components/GridLayout/index.js

@@ -18,6 +18,7 @@ _export_star(require("./GridContainer"), exports);
 _export_star(require("./GridItemContent"), exports);
 _export_star(require("./GridLayout"), exports);
 _export_star(require("./GridTitle"), exports);
+_export_star(require("./Row"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/LeaveDialog/LeaveDialog.js

@@ -0,0 +1,44 @@
+// Copyright 2025 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, "LeaveDialog", {
+    enumerable: true,
+    get: function() {
+        return LeaveDialog;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+function LeaveDialog({ original, current }) {
+    (0, _react.useEffect)(()=>{
+        const handleBeforeUnload = (event)=>{
+            if (JSON.stringify(original) === JSON.stringify(current)) {
+                return null;
+            }
+            event.preventDefault();
+            event.returnValue = ''; // Required for Chrome
+            return ''; // Required for other browsers
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return ()=>{
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [
+        original,
+        current
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+}

package/dist/cjs/components/LeaveDialog/index.js

@@ -0,0 +1,30 @@
+// Copyright 2025 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
+});
+_export_star(require("./LeaveDialog"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}