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

package/dist/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,60 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import DownloadIcon from 'mdi-material-ui/DownloadOutline';
+import { IconButton, styled } from '@mui/material';
+import { useDashboard } from '../../context';
+// Button to download the dashboard as a JSON file.
+export function DownloadButton() {
+    const { dashboard  } = useDashboard();
+    const hiddenLinkRef = 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__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = styled(IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));
+
+//# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 React, { useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { IconButton, styled } from '@mui/material';\nimport { useDashboard } from '../../context';\n\n// Button to download the dashboard as a JSON file.\nexport function DownloadButton() {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <DownloadIconButton title=\"Download JSON\" onClick={onDownloadButtonClick}>\n        <DownloadIcon />\n      </DownloadIconButton>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n\nconst DownloadIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n  color: theme.palette.grey[900],\n}));\n"],"names":["React","useRef","DownloadIcon","IconButton","styled","useDashboard","DownloadButton","dashboard","hiddenLinkRef","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","DownloadIconButton","title","onClick","a","ref","style","display","download","metadata","name","theme","border","palette","grey","borderRadius","shape","padding","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO,CAAC;AACtC,OAAOC,YAAY,MAAM,iCAAiC,CAAC;AAC3D,SAASC,UAAU,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACnD,SAASC,YAAY,QAAQ,eAAe,CAAC;AAE7C,mDAAmD;AACnD,OAAO,SAASC,cAAc,GAAG;IAC/B,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGF,YAAY,EAAE,AAAC;IACrC,MAAMG,aAAa,GAAGP,MAAM,CAAoB,IAAI,CAAC,AAAC;IAEtD,MAAMQ,qBAAqB,GAAG,IAAM;QAClC,IAAI,CAACD,aAAa,IAAI,CAACA,aAAa,CAACE,OAAO,EAAE,OAAO;QACrD,kBAAkB;QAClB,MAAMC,aAAa,GAAGC,GAAG,CAACC,eAAe,CACvC,IAAIC,IAAI,CAAC;YAACC,IAAI,CAACC,SAAS,CAACT,SAAS,CAAC;SAAC,EAAE;YACpCU,IAAI,EAAE,kBAAkB;SACzB,CAAC,CACH,AAAC;QACF,iBAAiB;QACjBT,aAAa,CAACE,OAAO,CAACQ,IAAI,GAAGP,aAAa,CAAC;QAC3CH,aAAa,CAACE,OAAO,CAACS,KAAK,EAAE,CAAC;QAC9B,0CAA0C;QAC1CP,GAAG,CAACQ,eAAe,CAACT,aAAa,CAAC,CAAC;IACrC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACU,kBAAkB;gBAACC,KAAK,EAAC,eAAe;gBAACC,OAAO,EAAEd,qBAAqB;0BACtE,cAAA,KAACP,YAAY,KAAG;cACG;0BAIrB,KAACsB,GAAC;gBAACC,GAAG,EAAEjB,aAAa;gBAAEkB,KAAK,EAAE;oBAAEC,OAAO,EAAE,MAAM;iBAAE;gBAAEC,QAAQ,EAAE,CAAC,EAAErB,SAAS,CAACsB,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;cAAI;;MACjG,CACH;AACJ,CAAC;AAED,MAAMT,kBAAkB,GAAGjB,MAAM,CAACD,UAAU,CAAC,CAAC,CAAC,EAAE4B,KAAK,CAAA,EAAE,GAAM,CAAA;QAC5DC,MAAM,EAAE,CAAC,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9CC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAACD,YAAY;QACtCE,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEP,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;KAC/B,CAAA,AAAC,CAAC,AAAC"}

package/dist/components/DownloadButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DownloadButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DownloadButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/components/DownloadButton/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './DownloadButton';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/index.ts"],"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\nexport * from './DownloadButton';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC"}

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/components/GridLayout/GridContainer.js

@@ -0,0 +1,213 @@
+// 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.
+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': {
+            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)'
+        }
+    }));
+
+//# 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 ${theme.palette.text.secondary}`,\n    borderBottom: `2px solid ${theme.palette.text.secondary}`,\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","text","secondary","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PanelGroupItemId } from '../../context';
+export interface GridItemContentProps {
+    panelGroupItemId: PanelGroupItemId;
+}
+/**
+ * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
+ */
+export declare function GridItemContent(props: GridItemContentProps): JSX.Element;
+//# sourceMappingURL=GridItemContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAgB1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -0,0 +1,37 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditMode, usePanel, usePanelActions } from '../../context';
+import { Panel } from '../Panel/Panel';
+/**
+ * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
+ */ export function GridItemContent(props) {
+    const { panelGroupItemId  } = props;
+    const panelDefinition = usePanel(panelGroupItemId);
+    const { isEditMode  } = useEditMode();
+    const { openEditPanel , openDeletePanelDialog  } = usePanelActions(panelGroupItemId);
+    // Provide actions to the panel when in edit mode
+    let editHandlers = undefined;
+    if (isEditMode) {
+        editHandlers = {
+            onEditPanelClick: openEditPanel,
+            onDeletePanelClick: openDeletePanelDialog
+        };
+    }
+    return /*#__PURE__*/ _jsx(Panel, {
+        definition: panelDefinition,
+        editHandlers: editHandlers
+    });
+}
+
+//# sourceMappingURL=GridItemContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  return <Panel definition={panelDefinition} editHandlers={editHandlers} />;\n}\n"],"names":["useEditMode","usePanel","usePanelActions","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","isEditMode","openEditPanel","openDeletePanelDialog","editHandlers","undefined","onEditPanelClick","onDeletePanelClick","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAA2BA,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAMnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGN,QAAQ,CAACK,gBAAgB,CAAC,AAAC;IACnD,MAAM,EAAEE,UAAU,CAAA,EAAE,GAAGR,WAAW,EAAE,AAAC;IACrC,MAAM,EAAES,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAE,GAAGR,eAAe,CAACI,gBAAgB,CAAC,AAAC;IAEnF,iDAAiD;IACjD,IAAIK,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIJ,UAAU,EAAE;QACdG,YAAY,GAAG;YACbE,gBAAgB,EAAEJ,aAAa;YAC/BK,kBAAkB,EAAEJ,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,qBAAO,KAACP,KAAK;QAACY,UAAU,EAAER,eAAe;QAAEI,YAAY,EAAEA,YAAY;MAAI,CAAC;AAC5E,CAAC"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PanelGroupId } from '../../context';
+export interface GridLayoutProps {
+    panelGroupId: PanelGroupId;
+}
+/**
+ * Layout component that arranges children in a Grid based on the definition.
+ */
+export declare function GridLayout(props: GridLayoutProps): JSX.Element;
+//# sourceMappingURL=GridLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0DhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -0,0 +1,100 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout';
+import { Collapse, useTheme } from '@mui/material';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { useEditMode, usePanelGroup, usePanelGroupActions } from '../../context';
+import { GridTitle } from './GridTitle';
+import { GridItemContent } from './GridItemContent';
+import { GridContainer } from './GridContainer';
+const ResponsiveGridLayout = WidthProvider(Responsive);
+const SMALL_LAYOUT_BREAKPOINT = 'sm';
+/**
+ * Layout component that arranges children in a Grid based on the definition.
+ */ export function GridLayout(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();
+    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__*/ _jsxs(GridContainer, {
+        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,
+                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: {
+                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
+                    },
+                    onLayoutChange: handleLayoutChange,
+                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
+                            children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                FallbackComponent: ErrorAlert,
+                                children: /*#__PURE__*/ _jsx(GridItemContent, {
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i
+                                    }
+                                })
+                            })
+                        }, i))
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=GridLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\nconst SMALL_LAYOUT_BREAKPOINT = 'sm' as const;\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false}>\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={{ sm: 24, xxs: 2 }}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          containerPadding={[0, 10]}\n          layouts={{ [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GridTitle","GridItemContent","GridContainer","ResponsiveGridLayout","SMALL_LAYOUT_BREAKPOINT","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","handleLayoutChange","currentLayout","allLayouts","smallLayout","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PanelGroupId } from '../../context';
+export interface GridTitleProps {
+    panelGroupId: PanelGroupId;
+    title: string;
+    collapse?: {
+        isOpen: boolean;
+        onToggleOpen: () => void;
+    };
+}
+/**
+ * Renders the title for a Grid section, optionally also supporting expanding
+ * and collapsing
+ */
+export declare function GridTitle(props: GridTitleProps): JSX.Element;
+//# sourceMappingURL=GridTitle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAwD9C"}