@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc

package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -0,0 +1,88 @@
+// Copyright 2022 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, "DeletePanelGroupDialog", {
+    enumerable: true,
+    get: ()=>DeletePanelGroupDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeletePanelGroupDialog = ()=>{
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _context.useDeletePanelGroupDialog)();
+    const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        if (panelGroupId == undefined) {
+            throw new Error('group index is undefined');
+        }
+        deletePanelGroup(panelGroupId);
+        closeDeletePanelGroupDialog();
+    };
+    var ref;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: deletePanelGroupDialog !== undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Delete Panel Group"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+                onSubmit: handleDelete,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: [
+                            "Are you sure you want to delete ",
+                            (ref = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupName) !== null && ref !== void 0 ? ref : 'panel group',
+                            "? This will delete all the panels within the group."
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: "Delete"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>closeDeletePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};

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

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./DeletePanelGroupDialog"), exports);
+function _exportStar(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;
+}

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,109 @@
+// Copyright 2022 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, "DownloadButton", {
+    enumerable: true,
+    get: ()=>DownloadButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _downloadOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DownloadOutline"));
+const _material = require("@mui/material");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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 _interopRequireWildcard(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 = {};
+    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 DownloadButton() {
+    const { dashboard  } = (0, _context.useDashboard)();
+    const hiddenLinkRef = (0, _react.useRef)(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));

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

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./DownloadButton"), exports);
+function _exportStar(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;
+}

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

@@ -0,0 +1,219 @@
+// Copyright 2022 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, "GridContainer", {
+    enumerable: true,
+    get: ()=>GridContainer
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function GridContainer(props) {
+    const [isFirstRender, setIsFirstRender] = (0, _react.useState)(true);
+    (0, _react.useEffect)(()=>{
+        if (isFirstRender) {
+            setIsFirstRender(false);
+        }
+    }, [
+        isFirstRender
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ReactGridLayoutContainer, {
+        sx: {
+            // This adds spcing between grids (rows) in the overall dashboard
+            '& + &': {
+                marginTop: (theme)=>theme.spacing(1)
+            },
+            // This disables the animation of grid items when a grid is first rendered
+            // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+            '& .react-grid-item.cssTransforms': {
+                transitionProperty: isFirstRender ? 'none' : 'transform'
+            }
+        },
+        children: props.children
+    });
+}
+/**
+ * These are the classes needed by react-grid-layout from their CSS stylesheet.
+ */ const ReactGridLayoutContainer = (0, _material.styled)('section')(({ theme  })=>({
+        '& .react-grid-layout': {
+            position: 'relative',
+            transition: 'height 200ms ease'
+        },
+        '& .react-grid-item': {
+            transition: 'all 200ms ease',
+            transitionProperty: 'left, top'
+        },
+        '& .react-grid-item img': {
+            pointerEvents: 'none',
+            userSelect: 'none'
+        },
+        '& .react-grid-item.cssTransforms': {
+            transitionProperty: 'transform'
+        },
+        '& .react-grid-item.resizing': {
+            zIndex: 1,
+            willChange: 'width, height'
+        },
+        '& .react-grid-item.react-draggable-dragging': {
+            transition: 'none',
+            zIndex: 3,
+            willChange: 'transform'
+        },
+        '& .react-grid-item.dropping': {
+            visibility: 'hidden'
+        },
+        '& .react-grid-item.react-grid-placeholder': {
+            background: theme.palette.primary.main,
+            opacity: 0.2,
+            transitionDuration: '100ms',
+            zIndex: 2,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
+            OUserSelect: 'none'
+        },
+        '& .react-grid-item > .react-resizable-handle': {
+            position: 'absolute',
+            width: '20px',
+            height: '20px'
+        },
+        '& .react-grid-item > .react-resizable-handle::after': {
+            content: '""',
+            position: 'absolute',
+            right: '3px',
+            bottom: '3px',
+            width: '5px',
+            height: '5px',
+            borderRight: `2px solid ${theme.palette.text.secondary}`,
+            borderBottom: `2px solid ${theme.palette.text.secondary}`
+        },
+        '& .react-resizable-hide > .react-resizable-handle': {
+            display: 'none'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+            bottom: '0',
+            left: '0',
+            cursor: 'sw-resize',
+            transform: 'rotate(90deg)'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+            bottom: '0',
+            right: '0',
+            cursor: 'se-resize'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+            top: '0',
+            left: '0',
+            cursor: 'nw-resize',
+            transform: 'rotate(180deg)'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+            top: '0',
+            right: '0',
+            cursor: 'ne-resize',
+            transform: 'rotate(270deg)'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+            top: '50%',
+            marginTop: '-10px',
+            cursor: 'ew-resize'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+            left: '0',
+            transform: 'rotate(135deg)'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+            right: '0',
+            transform: 'rotate(315deg)'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+            left: '50%',
+            marginLeft: '-10px',
+            cursor: 'ns-resize'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+            top: '0',
+            transform: 'rotate(225deg)'
+        },
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+            bottom: '0',
+            transform: 'rotate(45deg)'
+        },
+        '& .react-resizable': {
+            position: 'relative'
+        },
+        '& .react-resizable-handle': {
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            backgroundRepeat: 'no-repeat',
+            backgroundOrigin: 'content-box',
+            boxSizing: 'border-box',
+            backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
+            backgroundPosition: 'bottom right',
+            padding: '0 3px 3px 0'
+        },
+        '& .react-resizable-handle-sw': {
+            bottom: '0',
+            left: '0',
+            cursor: 'sw-resize',
+            transform: 'rotate(90deg)'
+        },
+        '& .react-resizable-handle-se': {
+            bottom: '0',
+            right: '0',
+            cursor: 'se-resize'
+        },
+        '& .react-resizable-handle-nw': {
+            top: '0',
+            left: '0',
+            cursor: 'nw-resize',
+            transform: 'rotate(180deg)'
+        },
+        '& .react-resizable-handle-ne': {
+            top: '0',
+            right: '0',
+            cursor: 'ne-resize',
+            transform: 'rotate(270deg)'
+        },
+        '& .react-resizable-handle-w, .react-resizable-handle-e': {
+            top: '50%',
+            marginTop: '-10px',
+            cursor: 'ew-resize'
+        },
+        '& .react-resizable-handle-w': {
+            left: '0',
+            transform: 'rotate(135deg)'
+        },
+        '& .react-resizable-handle-e': {
+            right: '0',
+            transform: 'rotate(315deg)'
+        },
+        '& .react-resizable-handle-n, .react-resizable-handle-s': {
+            left: '50%',
+            marginLeft: '-10px',
+            cursor: 'ns-resize'
+        },
+        '& .react-resizable-handle-n': {
+            top: '0',
+            transform: 'rotate(225deg)'
+        },
+        '& .react-resizable-handle-s': {
+            bottom: '0',
+            transform: 'rotate(45deg)'
+        }
+    }));

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

@@ -0,0 +1,41 @@
+// Copyright 2022 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, "GridItemContent", {
+    enumerable: true,
+    get: ()=>GridItemContent
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _context = require("../../context");
+const _panel = require("../Panel/Panel");
+function GridItemContent(props) {
+    const { panelGroupItemId  } = props;
+    const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
+    const { isEditMode  } = (0, _context.useEditMode)();
+    const { openEditPanel , openDeletePanelDialog  } = (0, _context.usePanelActions)(panelGroupItemId);
+    // Provide actions to the panel when in edit mode
+    let editHandlers = undefined;
+    if (isEditMode) {
+        editHandlers = {
+            onEditPanelClick: openEditPanel,
+            onDeletePanelClick: openDeletePanelDialog
+        };
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+        definition: panelDefinition,
+        editHandlers: editHandlers
+    });
+}

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

@@ -0,0 +1,104 @@
+// Copyright 2022 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, "GridLayout", {
+    enumerable: true,
+    get: ()=>GridLayout
+});
+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 _context = require("../../context");
+const _gridTitle = require("./GridTitle");
+const _gridItemContent = require("./GridItemContent");
+const _gridContainer = require("./GridContainer");
+const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
+const SMALL_LAYOUT_BREAKPOINT = 'sm';
+function GridLayout(props) {
+    const { panelGroupId /*...others */  } = props;
+    const theme = (0, _material.useTheme)();
+    const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
+    const { updatePanelGroupLayouts  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    var ref;
+    const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
+    const { isEditMode  } = (0, _context.useEditMode)();
+    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
+        // when going to a smaller breakpoint and then back to a larger breakpoint.
+        // https://github.com/react-grid-layout/react-grid-layout/issues/1663
+        const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
+        if (smallLayout) {
+            updatePanelGroupLayouts(smallLayout);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
+        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,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        sm: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: {
+                        sm: 24,
+                        xxs: 2
+                    },
+                    rowHeight: 30,
+                    draggableHandle: '.drag-handle',
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode,
+                    isResizable: isEditMode,
+                    containerPadding: [
+                        0,
+                        10
+                    ],
+                    layouts: {
+                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
+                    },
+                    onLayoutChange: handleLayoutChange,
+                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i
+                                    }
+                                })
+                            })
+                        }, i))
+                })
+            })
+        ]
+    });
+}