@perses-dev/dashboards 0.13.0 → 0.15.0

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -22,15 +22,13 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
-const _utils = require("../../utils");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , initialVariableIsSticky , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const initialTimeRange = (0, _utils.useInitialTimeRange)(dashboardDuration);
-    const { timeRange , setTimeRange  } = (0, _utils.useSetTimeRangeParams)(initialTimeRange, true);
+    const initialTimeRange = (0, _context.useInitialTimeRange)(dashboardDuration);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -39,8 +37,8 @@ function ViewDashboard(props) {
                 dashboardResource
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                timeRange: timeRange,
-                setTimeRange: setTimeRange,
+                initialTimeRange: initialTimeRange,
+                enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
@@ -55,7 +53,9 @@ function ViewDashboard(props) {
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
-                                dashboardResource: dashboardResource
+                                dashboardResource: dashboardResource,
+                                dashboardTitleComponent: dashboardTitleComponent,
+                                initialVariableIsSticky: initialVariableIsSticky
                             })
                         })
                     })

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) {
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-            timeRange: {
+            initialTimeRange: {
                 pastDuration: '30m'
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export interface DashboardToolbarProps {
     dashboardName: string;
+    dashboardTitleComponent?: JSX.Element;
+    initialVariableIsSticky?: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
 }

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6E5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAmF5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -20,10 +20,14 @@ import { useDashboardActions, useEditMode } from '../../context';
 import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
     const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
+    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
+        variant: "h2",
+        children: dashboardName
+    });
     const onSave = ()=>{
         setEditMode(false);
     };
@@ -39,13 +43,7 @@ export const DashboardToolbar = (props)=>{
                         padding: 2,
                         display: "flex",
                         children: [
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                variant: "h2",
-                                children: [
-                                    "Edit ",
-                                    dashboardName
-                                ]
-                            }),
+                            dashboardTitle,
                             /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
                                 spacing: 1,
@@ -78,7 +76,9 @@ export const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                                initialVariableIsSticky: initialVariableIsSticky
+                            })
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: 'row',
@@ -113,10 +113,7 @@ export const DashboardToolbar = (props)=>{
                         width: '100%'
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "h2",
-                            children: dashboardName
-                        }),
+                        dashboardTitle,
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             spacing: 2,
@@ -142,7 +139,9 @@ export const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                            initialVariableIsSticky: initialVariableIsSticky
+                        })
                     })
                 })
             ]

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, onEditButtonClick, onCancelButtonClick } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

package/dist/components/GridLayout/GridContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface GridContainerProps {
+    children: React.ReactNode;
+}
+export declare function GridContainer(props: GridContainerProps): JSX.Element;
+//# sourceMappingURL=GridContainer.d.ts.map

package/dist/components/GridLayout/GridContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridContainer.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqBtD"}

package/dist/{css/styles.js → components/GridLayout/GridContainer.js}

@@ -10,36 +10,64 @@
 // 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.
-export const styles = (theme)=>{
-    return {
-        '&.react-grid-layout': {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { styled } from '@mui/material';
+export function GridContainer(props) {
+    const [isFirstRender, setIsFirstRender] = useState(true);
+    useEffect(()=>{
+        if (isFirstRender) {
+            setIsFirstRender(false);
+        }
+    }, [
+        isFirstRender
+    ]);
+    return /*#__PURE__*/ _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 = styled('section')(({ theme  })=>({
+        '& .react-grid-layout': {
             position: 'relative',
             transition: 'height 200ms ease'
         },
-        '&.react-grid-item': {
+        '& .react-grid-item': {
             transition: 'all 200ms ease',
             transitionProperty: 'left, top'
         },
-        '&.react-grid-item img': {
+        '& .react-grid-item img': {
             pointerEvents: 'none',
             userSelect: 'none'
         },
-        '&.react-grid-item.cssTransforms': {
+        '& .react-grid-item.cssTransforms': {
             transitionProperty: 'transform'
         },
-        '&.react-grid-item.resizing': {
+        '& .react-grid-item.resizing': {
             zIndex: 1,
             willChange: 'width, height'
         },
-        '&.react-grid-item.react-draggable-dragging': {
+        '& .react-grid-item.react-draggable-dragging': {
             transition: 'none',
             zIndex: 3,
             willChange: 'transform'
         },
-        '&.react-grid-item.dropping': {
+        '& .react-grid-item.dropping': {
             visibility: 'hidden'
         },
-        '&.react-grid-item.react-grid-placeholder': {
+        '& .react-grid-item.react-grid-placeholder': {
             background: theme.palette.primary.main,
             opacity: 0.2,
             transitionDuration: '100ms',
@@ -50,12 +78,12 @@ export const styles = (theme)=>{
             msUserSelect: 'none',
             OUserSelect: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle': {
+        '& .react-grid-item > .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px'
         },
-        '&.react-grid-item > .react-resizable-handle::after': {
+        '& .react-grid-item > .react-resizable-handle::after': {
             content: '""',
             position: 'absolute',
             right: '3px',
@@ -65,62 +93,62 @@ export const styles = (theme)=>{
             borderRight: '2px solid rgba(0, 0, 0, 0.4)',
             borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
         },
-        '&.react-resizable-hide > .react-resizable-handle': {
+        '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .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': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         },
-        '&.react-resizable': {
+        '& .react-resizable': {
             position: 'relative'
         },
-        '&.react-resizable-handle': {
+        '& .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px',
@@ -131,56 +159,55 @@ export const styles = (theme)=>{
             backgroundPosition: 'bottom right',
             padding: '0 3px 3px 0'
         },
-        '&.react-resizable-handle-sw': {
+        '& .react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-resizable-handle-se': {
+        '& .react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-resizable-handle-nw': {
+        '& .react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-resizable-handle-ne': {
+        '& .react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        '& .react-resizable-handle-w, .react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-resizable-handle-w': {
+        '& .react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-resizable-handle-e': {
+        '& .react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        '& .react-resizable-handle-n, .react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-resizable-handle-n': {
+        '& .react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-resizable-handle-s': {
+        '& .react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         }
-    };
-};
+    }));
 
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=GridContainer.js.map

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

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

package/dist/components/GridLayout/GridLayout.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { BoxProps } from '@mui/material';
 import { PanelGroupId } from '../../context';
-export interface GridLayoutProps extends BoxProps {
+export interface GridLayoutProps {
     panelGroupId: PanelGroupId;
 }
 /**

package/dist/components/GridLayout/GridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAoC,MAAM,eAAe,CAAC;AAGhF,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAM/F,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkDhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+ChD"}

package/dist/components/GridLayout/GridLayout.js

@@ -10,90 +10,77 @@
 // 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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
-import { Box, Collapse, GlobalStyles, useTheme } from '@mui/material';
+import { Collapse, useTheme } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { styles } from '../../css/styles';
 import { useEditMode, usePanelGroup, usePanelGroupActions } from '../../context';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
+import { GridContainer } from './GridContainer';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
  */ export function GridLayout(props) {
-    const { panelGroupId , ...others } = props;
+    const { panelGroupId /*...others */  } = props;
     const theme = useTheme();
     const groupDefinition = usePanelGroup(panelGroupId);
     const { updatePanelGroupLayouts  } = usePanelGroupActions(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(GridContainer, {
         children: [
-            /*#__PURE__*/ _jsx(GlobalStyles, {
-                styles: styles
+            groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
             }),
-            /*#__PURE__*/ _jsxs(Box, {
-                ...others,
-                component: "section",
-                sx: {
-                    '& + &': {
-                        marginTop: (theme)=>theme.spacing(1)
-                    }
-                },
-                children: [
-                    groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
-                        panelGroupId: panelGroupId,
-                        title: groupDefinition.title,
-                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
-                            isOpen,
-                            onToggleOpen: ()=>setIsOpen((current)=>!current)
-                        }
-                    }),
-                    /*#__PURE__*/ _jsx(Collapse, {
-                        in: isOpen,
-                        unmountOnExit: true,
-                        children: /*#__PURE__*/ _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: {
-                                sm: groupDefinition.itemLayouts
-                            },
-                            onLayoutChange: updatePanelGroupLayouts,
-                            children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
-                                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                        FallbackComponent: ErrorAlert,
-                                        children: /*#__PURE__*/ _jsx(GridItemContent, {
-                                            panelGroupItemId: {
-                                                panelGroupId,
-                                                panelGroupItemLayoutId: i
-                                            }
-                                        })
-                                    })
-                                }, i))
-                        })
-                    })
-                ]
+            /*#__PURE__*/ _jsx(Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                children: /*#__PURE__*/ _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: {
+                        sm: groupDefinition.itemLayouts
+                    },
+                    onLayoutChange: updatePanelGroupLayouts,
+                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
+                            children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                FallbackComponent: ErrorAlert,
+                                children: /*#__PURE__*/ _jsx(GridItemContent, {
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i
+                                    }
+                                })
+                            })
+                        }, i))
+                })
             })
         ]
     });