@pega/cosmos-react-core 8.0.0-build.3.2 → 8.0.0-build.30.1

package/lib/components/PageTemplates/GridLayout/EditorGridItem.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from 'react';
+import type { ForwardProps } from '../../../types';
+/** CSS Class name for GridEditor resize-handles */
+export declare const resizeHandleClassName = "gridLayoutCustomResizeHandle";
+/** Custom resize-handle for GridLayoutEditor */
+export declare const ResizeHandle: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
+interface EditorGridItemProps extends ForwardProps {
+    children: ReactElement;
+    itemKey: ReactElement['key'];
+    itemLabel: string;
+    moveItem: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;
+    addOrSubtractItemSize: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;
+}
+/**
+ * Wrapper on top of GridItems to provide custom styling etc.
+ * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles
+ */
+declare const EditorGridItem: import("react").ForwardRefExoticComponent<Omit<EditorGridItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default EditorGridItem;
+//# sourceMappingURL=EditorGridItem.d.ts.map

package/lib/components/PageTemplates/GridLayout/EditorGridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorGridItem.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorGridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,YAAY,EAAyB,MAAM,OAAO,CAAC;AAKjG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,mDAAmD;AACnD,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AAwIpE,gDAAgD;AAChD,eAAO,MAAM,YAAY,sGAKvB,CAAC;AAEH,UAAU,mBAAoB,SAAQ,YAAY;IAChD,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,qBAAqB,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3F;AAED;;;GAGG;AACH,QAAA,MAAM,cAAc,6HAqEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/PageTemplates/GridLayout/EditorGridItem.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import Flex from '../../Flex';
+import { getFocusables } from '../../../utils';
+import { defaultThemeProp } from '../../../theme';
+import { hasNonNullProp } from './utils';
+/** CSS Class name for GridEditor resize-handles */
+export const resizeHandleClassName = 'gridLayoutCustomResizeHandle';
+// To appear above the child contents at all times
+const StyledWrapper = styled(Flex)(({ theme }) => {
+    const { base } = theme;
+    return css `
+    position: relative;
+
+    /* To create a new stacking context */
+    z-index: 0;
+    background-color: ${base.palette['primary-background']};
+
+    .${resizeHandleClassName} {
+      opacity: 0;
+    }
+
+    /* To mask the child content from getting clicked when dragging a grid item */
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: ${base['z-index'].max - 1};
+      inset: 0;
+    }
+
+    &:focus,
+    &:hover {
+      outline: 0.125rem solid ${base.palette.interactive};
+      .${resizeHandleClassName} {
+        opacity: 1;
+      }
+    }
+  `;
+});
+StyledWrapper.defaultProps = defaultThemeProp;
+const axisWiseStyles = {
+    n: css `
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    margin-inline-start: -0.625rem;
+    border-block-start-width: 0;
+    border-inline-start-width: 0.375rem;
+    border-inline-end-width: 0.375rem;
+    border-block-end-width: 0.875rem;
+    cursor: n-resize;
+  `,
+    s: css `
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    margin-inline-start: -0.625rem;
+    border-block-start-width: 0.875rem;
+    border-inline-start-width: 0.375rem;
+    border-inline-end-width: 0.375rem;
+    border-block-end-width: 0;
+    cursor: s-resize;
+  `,
+    e: css `
+    inset-inline-end: 0;
+    inset-block-start: 50%;
+    margin-block-start: -0.625rem;
+    border-block-start-width: 0.375rem;
+    border-inline-start-width: 0.875rem;
+    border-inline-end-width: 0;
+    border-block-end-width: 0.375rem;
+    cursor: e-resize;
+  `,
+    w: css `
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    margin-block-start: -0.625rem;
+    border-block-start-width: 0.375rem;
+    border-inline-start-width: 0;
+    border-inline-end-width: 0.875rem;
+    border-block-end-width: 0.375rem;
+    cursor: w-resize;
+  `,
+    ne: css `
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    border-block-start-width: 0;
+    border-inline-start-width: 0.875rem;
+    border-inline-end-width: 0;
+    border-block-end-width: 0.875rem;
+    cursor: ne-resize;
+  `,
+    nw: css `
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    border-block-start-width: 0;
+    border-inline-start-width: 0;
+    border-inline-end-width: 0.875rem;
+    border-block-end-width: 0.875rem;
+    cursor: nw-resize;
+  `,
+    sw: css `
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    border-block-start-width: 0.875rem;
+    border-inline-start-width: 0;
+    border-inline-end-width: 0.875rem;
+    border-block-end-width: 0;
+    cursor: sw-resize;
+  `,
+    se: css `
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    border-block-start-width: 0.875rem;
+    border-inline-start-width: 0.875rem;
+    border-inline-end-width: 0;
+    border-block-end-width: 0;
+    cursor: se-resize;
+  `
+};
+const StyledHandle = styled.div(({ theme, axis }) => {
+    const { base } = theme;
+    return css `
+    position: absolute;
+    z-index: ${base['z-index'].max};
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    border: solid transparent;
+
+    /* Using box-shadow instead of background coz the latter will be visible underneath the border as well. */
+    /* We still want the 20x20 clickable region, but an 8x8 visible region. */
+    box-shadow:
+      inset 0.25rem 0.25rem 0 ${base.palette.interactive},
+      inset -0.25rem -0.25rem 0 ${base.palette.interactive};
+
+    ${axisWiseStyles[axis]}
+  `;
+});
+StyledHandle.defaultProps = defaultThemeProp;
+/** Custom resize-handle for GridLayoutEditor */
+export const ResizeHandle = forwardRef((props, ref) => {
+    const { handleAxis, ...restProps } = props;
+    return (_jsx(StyledHandle, { ref: ref, axis: handleAxis, className: resizeHandleClassName, ...restProps }));
+});
+/**
+ * Wrapper on top of GridItems to provide custom styling etc.
+ * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles
+ */
+const EditorGridItem = forwardRef(({ children, itemKey, itemLabel, moveItem, addOrSubtractItemSize, ...restProps }, ref) => {
+    const handleKeyUp = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowUp':
+                if (e.shiftKey)
+                    addOrSubtractItemSize(itemKey, 0, -1);
+                else
+                    moveItem(itemKey, 0, -1);
+                break;
+            case 'ArrowDown':
+                if (e.shiftKey)
+                    addOrSubtractItemSize(itemKey, 0, 1);
+                else
+                    moveItem(itemKey, 0, 1);
+                break;
+            case 'ArrowLeft':
+                if (e.shiftKey)
+                    addOrSubtractItemSize(itemKey, -1, 0);
+                else
+                    moveItem(itemKey, -1, 0);
+                break;
+            case 'ArrowRight':
+                if (e.shiftKey)
+                    addOrSubtractItemSize(itemKey, 1, 0);
+                else
+                    moveItem(itemKey, 1, 0);
+                break;
+            // Do nothing
+            default:
+        }
+    }, [addOrSubtractItemSize, itemKey, moveItem]);
+    // To keep the experience smoother, disabling all interactions on the child content of grid items.
+    // The CSS `::after` mask prevents interactions through mouse clicks.
+    // This method prevents interactions through keyboard navigation.
+    // Not doing this from a `useEffect` since some of the child content can render after server calls etc.
+    const disableChildrenFocus = useCallback(() => {
+        if (!ref)
+            return;
+        // In case RGL ever uses a RefCallback instead of a RefObject
+        if (!hasNonNullProp(ref, 'current'))
+            return;
+        const focusables = getFocusables(ref);
+        focusables.forEach(elem => {
+            elem.tabIndex = -1;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsx(StyledWrapper, { container: { direction: 'column' }, ref: ref, ...restProps, role: 'listitem', tabIndex: 0, "aria-label": itemLabel, onKeyUp: handleKeyUp, onFocus: disableChildrenFocus, children: children }));
+});
+export default EditorGridItem;
+//# sourceMappingURL=EditorGridItem.js.map

package/lib/components/PageTemplates/GridLayout/EditorGridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorGridItem.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorGridItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type KeyboardEvent, type ReactElement, type Ref, useCallback } from 'react';\nimport type { CoreProps } from 'react-grid-layout';\nimport styled, { css, type FlattenSimpleInterpolation } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport type { ForwardProps } from '../../../types';\nimport { getFocusables } from '../../../utils';\nimport { defaultThemeProp } from '../../../theme';\n\nimport { hasNonNullProp } from './utils';\n\n/** CSS Class name for GridEditor resize-handles */\nexport const resizeHandleClassName = 'gridLayoutCustomResizeHandle';\n\n// To appear above the child contents at all times\nconst StyledWrapper = styled(Flex)(({ theme }) => {\n  const { base } = theme;\n  return css`\n    position: relative;\n\n    /* To create a new stacking context */\n    z-index: 0;\n    background-color: ${base.palette['primary-background']};\n\n    .${resizeHandleClassName} {\n      opacity: 0;\n    }\n\n    /* To mask the child content from getting clicked when dragging a grid item */\n    &::after {\n      content: '';\n      position: absolute;\n      z-index: ${base['z-index'].max - 1};\n      inset: 0;\n    }\n\n    &:focus,\n    &:hover {\n      outline: 0.125rem solid ${base.palette.interactive};\n      .${resizeHandleClassName} {\n        opacity: 1;\n      }\n    }\n  `;\n});\nStyledWrapper.defaultProps = defaultThemeProp;\n\ntype ResizeAxis = NonNullable<CoreProps['resizeHandles']>[number];\n\nconst axisWiseStyles: Record<ResizeAxis, FlattenSimpleInterpolation> = {\n  n: css`\n    inset-block-start: 0;\n    inset-inline-start: 50%;\n    margin-inline-start: -0.625rem;\n    border-block-start-width: 0;\n    border-inline-start-width: 0.375rem;\n    border-inline-end-width: 0.375rem;\n    border-block-end-width: 0.875rem;\n    cursor: n-resize;\n  `,\n  s: css`\n    inset-block-end: 0;\n    inset-inline-start: 50%;\n    margin-inline-start: -0.625rem;\n    border-block-start-width: 0.875rem;\n    border-inline-start-width: 0.375rem;\n    border-inline-end-width: 0.375rem;\n    border-block-end-width: 0;\n    cursor: s-resize;\n  `,\n  e: css`\n    inset-inline-end: 0;\n    inset-block-start: 50%;\n    margin-block-start: -0.625rem;\n    border-block-start-width: 0.375rem;\n    border-inline-start-width: 0.875rem;\n    border-inline-end-width: 0;\n    border-block-end-width: 0.375rem;\n    cursor: e-resize;\n  `,\n  w: css`\n    inset-inline-start: 0;\n    inset-block-start: 50%;\n    margin-block-start: -0.625rem;\n    border-block-start-width: 0.375rem;\n    border-inline-start-width: 0;\n    border-inline-end-width: 0.875rem;\n    border-block-end-width: 0.375rem;\n    cursor: w-resize;\n  `,\n  ne: css`\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    border-block-start-width: 0;\n    border-inline-start-width: 0.875rem;\n    border-inline-end-width: 0;\n    border-block-end-width: 0.875rem;\n    cursor: ne-resize;\n  `,\n  nw: css`\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    border-block-start-width: 0;\n    border-inline-start-width: 0;\n    border-inline-end-width: 0.875rem;\n    border-block-end-width: 0.875rem;\n    cursor: nw-resize;\n  `,\n  sw: css`\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    border-block-start-width: 0.875rem;\n    border-inline-start-width: 0;\n    border-inline-end-width: 0.875rem;\n    border-block-end-width: 0;\n    cursor: sw-resize;\n  `,\n  se: css`\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    border-block-start-width: 0.875rem;\n    border-inline-start-width: 0.875rem;\n    border-inline-end-width: 0;\n    border-block-end-width: 0;\n    cursor: se-resize;\n  `\n};\n\nconst StyledHandle = styled.div<{ axis: ResizeAxis }>(({ theme, axis }) => {\n  const { base } = theme;\n  return css`\n    position: absolute;\n    z-index: ${base['z-index'].max};\n    inline-size: 1.25rem;\n    block-size: 1.25rem;\n    border: solid transparent;\n\n    /* Using box-shadow instead of background coz the latter will be visible underneath the border as well. */\n    /* We still want the 20x20 clickable region, but an 8x8 visible region. */\n    box-shadow:\n      inset 0.25rem 0.25rem 0 ${base.palette.interactive},\n      inset -0.25rem -0.25rem 0 ${base.palette.interactive};\n\n    ${axisWiseStyles[axis]}\n  `;\n});\nStyledHandle.defaultProps = defaultThemeProp;\n\n/** Custom resize-handle for GridLayoutEditor */\nexport const ResizeHandle = forwardRef((props: any, ref) => {\n  const { handleAxis, ...restProps } = props;\n  return (\n    <StyledHandle ref={ref} axis={handleAxis} className={resizeHandleClassName} {...restProps} />\n  );\n});\n\ninterface EditorGridItemProps extends ForwardProps {\n  children: ReactElement;\n  itemKey: ReactElement['key'];\n  itemLabel: string;\n  moveItem: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;\n  addOrSubtractItemSize: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;\n}\n\n/**\n * Wrapper on top of GridItems to provide custom styling etc.\n * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles\n */\nconst EditorGridItem = forwardRef(\n  (\n    {\n      children,\n      itemKey,\n      itemLabel,\n      moveItem,\n      addOrSubtractItemSize,\n      ...restProps\n    }: EditorGridItemProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const handleKeyUp = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        switch (e.key) {\n          case 'ArrowUp':\n            if (e.shiftKey) addOrSubtractItemSize(itemKey, 0, -1);\n            else moveItem(itemKey, 0, -1);\n            break;\n          case 'ArrowDown':\n            if (e.shiftKey) addOrSubtractItemSize(itemKey, 0, 1);\n            else moveItem(itemKey, 0, 1);\n            break;\n          case 'ArrowLeft':\n            if (e.shiftKey) addOrSubtractItemSize(itemKey, -1, 0);\n            else moveItem(itemKey, -1, 0);\n            break;\n          case 'ArrowRight':\n            if (e.shiftKey) addOrSubtractItemSize(itemKey, 1, 0);\n            else moveItem(itemKey, 1, 0);\n            break;\n          // Do nothing\n          default:\n        }\n      },\n      [addOrSubtractItemSize, itemKey, moveItem]\n    );\n\n    // To keep the experience smoother, disabling all interactions on the child content of grid items.\n    // The CSS `::after` mask prevents interactions through mouse clicks.\n    // This method prevents interactions through keyboard navigation.\n    // Not doing this from a `useEffect` since some of the child content can render after server calls etc.\n    const disableChildrenFocus = useCallback(() => {\n      if (!ref) return;\n      // In case RGL ever uses a RefCallback instead of a RefObject\n      if (!hasNonNullProp(ref, 'current')) return;\n\n      const focusables = getFocusables(ref);\n      focusables.forEach(elem => {\n        elem.tabIndex = -1;\n      });\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return (\n      <StyledWrapper\n        container={{ direction: 'column' }}\n        ref={ref}\n        {...restProps}\n        role='listitem'\n        tabIndex={0}\n        aria-label={itemLabel}\n        onKeyUp={handleKeyUp}\n        onFocus={disableChildrenFocus}\n      >\n        {children}\n      </StyledWrapper>\n    );\n  }\n);\n\nexport default EditorGridItem;\n"]}

package/lib/components/PageTemplates/GridLayout/GridLayoutEditor.d.ts

@@ -0,0 +1,69 @@
+import { type FC, type ReactElement, type Ref } from 'react';
+import { type CoreProps } from 'react-grid-layout';
+import { type GridBreakPoint, type GridLayoutModel } from './config';
+export interface GridLayoutHandleValue {
+    /** Used to get layout model with imperative handle. Returns the layout model from all breakpoints. Returns undefined when no children. */
+    getLayoutModel: () => GridLayoutModel | undefined;
+    /**
+     * Returns a flag indicating whether there are any gaps in the current layout.
+     * Highlights all background cells to indicate the same.
+     */
+    checkForGaps: () => boolean;
+}
+/** Props for GridLayoutEditor component */
+export interface GridLayoutEditorProps {
+    /**
+     * Called whenever there's a change in the layoutModel.
+     * Change-handler of the CONTROLLED COMPONENT
+     */
+    onModelChange: (newModel: GridLayoutModel | undefined) => void;
+    /**
+     * Value of the CONTROLLED component
+     * Passed when editing a previously saved layout.
+     * Can be `undefined` when no children.
+     * It should be the same as the one emitted by `getLayoutModel` or `handle`
+     */
+    layoutModel: GridLayoutModel | undefined;
+    /** Override for the default breakpoints set on the Grid. Often overridden along with the `cols` prop. */
+    breakpoints: Partial<Record<GridBreakPoint, number>>;
+    /**
+     * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)
+     * rowsPerPage should be aligned with `breakpoints` prop
+     */
+    rows: {
+        rowsPerPage: Partial<Record<GridBreakPoint, number>>;
+    } | {
+        rowHeight: Partial<Record<GridBreakPoint, number>>;
+    };
+    /**
+     * Override for the breakpoint-wise numColumns on the Grid.
+     * Often overridden along with the `breakpoints` prop.
+     * cols should be aligned with `breakpoints` prop
+     */
+    cols: Partial<Record<GridBreakPoint, number>>;
+    /**
+     * If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has "transform: scale(n)" css property,
+     * we should set scale coefficient to avoid render artifacts while dragging.
+     */
+    transformScale?: CoreProps['transformScale'];
+    /** Ref to access the editor state. Used to get the current layout-model when persisting it. */
+    handle?: Ref<GridLayoutHandleValue>;
+    /**
+     * Child elements to be rendered as Grid items.
+     * Each element should have a unique `key`
+     * Memoize children for a better performance: https://github.com/react-grid-layout/react-grid-layout#performance
+     * Set up an `itemLabel` prop with the text to call out when the item is focused.
+     * If a child needs to be initialized with a specific x/y/w/h,
+     *   or if you want to specify any special properties like minW, minH, etc.,
+     *   set up a `data-grid` in layoutModel prop with any subset of properties
+     * The prop can be undefined on init when no elements.
+     */
+    children?: ReactElement[];
+}
+/**
+ * Editor component to create Grid Layouts
+ * @component
+ */
+declare const GridLayoutEditor: FC<GridLayoutEditorProps>;
+export default GridLayoutEditor;
+//# sourceMappingURL=GridLayoutEditor.d.ts.map

package/lib/components/PageTemplates/GridLayout/GridLayoutEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayoutEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,YAAY,EACjB,KAAK,GAAG,EAMT,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAC;AAO3B,OAA4B,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAsC1F,MAAM,WAAW,qBAAqB;IACpC,0IAA0I;IAC1I,cAAc,EAAE,MAAM,eAAe,GAAG,SAAS,CAAC;IAElD;;;OAGG;IACH,YAAY,EAAE,MAAM,OAAO,CAAC;CAC7B;AAED,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,aAAa,EAAE,CAAC,QAAQ,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;IAE/D;;;;;OAKG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IAEzC,yGAAyG;IACzG,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,EACA;QAAE,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;KAAE,GACxD;QAAE,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;KAAE,CAAC;IAE3D;;;;OAIG;IACH,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9C;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE7C,+FAA+F;IAC/F,MAAM,CAAC,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IAEpC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAgL/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/PageTemplates/GridLayout/GridLayoutEditor.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
+import styled, { css } from 'styled-components';
+import Flex from '../../Flex';
+import { useElement, useI18n } from '../../../hooks';
+import { defaultThemeProp } from '../../../theme';
+import useGridLayoutConfig, {} from './config';
+import EditorBackground from './EditorBackground';
+import EditorGridItem, { ResizeHandle, resizeHandleClassName } from './EditorGridItem';
+import { checkLayoutForGaps, getBreakpointAndCols, getRowHeight, useGridItemSorter, useMonitoredSize } from './utils';
+import ReactResizableStyles from './ReactResizableStyles';
+import ReactGridLayoutStyles from './ReactGridLayoutStyles';
+const StyledEditor = styled(Flex)(({ theme }) => {
+    const { base: { palette: { interactive } } } = theme;
+    return css `
+    position: relative;
+
+    /* Needed for the background grid to be visible */
+    z-index: 0;
+    block-size: 100%;
+    overflow-y: auto;
+
+    /* To minimize height triggers during dragging due to horizontal scrollbar showing up */
+    overflow-x: hidden;
+
+    .react-grid-item.react-grid-placeholder {
+      background: ${interactive};
+      opacity: 0.3;
+    }
+  `;
+});
+StyledEditor.defaultProps = defaultThemeProp;
+/**
+ * Editor component to create Grid Layouts
+ * @component
+ */
+const GridLayoutEditor = ({ handle, children, layoutModel, rows, onModelChange, ...restProps }) => {
+    // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width
+    const [wrapperEl, setWrapperEl] = useElement();
+    const size = useMonitoredSize(wrapperEl);
+    const width = size?.width;
+    const height = size?.height;
+    const commonGridConfig = useGridLayoutConfig();
+    const t = useI18n();
+    const { breakpoint, numColumns } = useMemo(() => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols), [width, restProps.breakpoints, restProps.cols]);
+    const { rowHeight, numRowsPerPage } = useMemo(() => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows), [breakpoint, commonGridConfig.margin, height, rows]);
+    const currentLayout = useMemo(() => layoutModel?.[breakpoint], [breakpoint, layoutModel]);
+    const onLayoutChange = useCallback((curLayout, allLayouts) => {
+        onModelChange(!children || children.length === 0 ? undefined : allLayouts);
+    }, [children, onModelChange]);
+    // Callback to sort child DOM nodes to ensure an intuitive tabbing order
+    const gridItemSorter = useGridItemSorter(currentLayout, numColumns);
+    // Set up keyboard accessibility
+    const [listEl, setListEl] = useElement();
+    useEffect(() => {
+        if (listEl) {
+            listEl.setAttribute('role', 'list');
+            listEl.setAttribute('tabindex', '0');
+            listEl.setAttribute('aria-label', t('configurable_layout_instructions'));
+        }
+    }, [listEl, t]);
+    const moveItem = useCallback((itemKey, deltaX, deltaY) => {
+        // Should be initialized by this point
+        if (!currentLayout)
+            return;
+        const itemIndex = currentLayout.findIndex(item => item.i === itemKey);
+        // Should be present on the currentLayout by this point.
+        if (itemIndex === -1)
+            return;
+        const oldItem = currentLayout[itemIndex];
+        const newItem = {
+            ...oldItem,
+            // `Math.max` needed to avoid a glitch when moving left beyond the left edge
+            x: Math.max(0, oldItem.x + deltaX),
+            y: Math.max(0, oldItem.y + deltaY)
+        };
+        const newLayout = [
+            ...currentLayout.slice(0, itemIndex),
+            newItem,
+            ...currentLayout.slice(itemIndex + 1)
+        ];
+        const newModel = { ...layoutModel, [breakpoint]: newLayout };
+        onModelChange(!children || children.length === 0 ? undefined : newModel);
+    }, [breakpoint, children, currentLayout, layoutModel, onModelChange]);
+    const addOrSubtractItemSize = useCallback((itemKey, deltaW, deltaH) => {
+        // Should be initialized by this point
+        if (!currentLayout)
+            return;
+        const itemIndex = currentLayout.findIndex(item => item.i === itemKey);
+        // Should be present on the currentLayout by this point.
+        if (itemIndex === -1)
+            return;
+        const oldItem = currentLayout[itemIndex];
+        const newItem = {
+            ...oldItem,
+            // `Math.max` needed to avoid a glitch when moving left beyond the left edge
+            w: Math.max(2, oldItem.w + deltaW),
+            h: Math.max(2, oldItem.h + deltaH)
+        };
+        const newLayout = [
+            ...currentLayout.slice(0, itemIndex),
+            newItem,
+            ...currentLayout.slice(itemIndex + 1)
+        ];
+        const newModel = { ...layoutModel, [breakpoint]: newLayout };
+        onModelChange(!children || children.length === 0 ? undefined : newModel);
+    }, [breakpoint, children, currentLayout, layoutModel, onModelChange]);
+    // Provide a way for the parent component to get layout-model on demand
+    const [highlightedBG, setHighlightedBG] = useState(false);
+    useImperativeHandle(handle, () => ({
+        getLayoutModel: () => {
+            // Without this check, we'll end up with the dummy model set up down below for this case
+            if (!children || children.length === 0)
+                return undefined;
+            return layoutModel;
+        },
+        checkForGaps: () => {
+            // On load when no items are added.
+            if (!currentLayout)
+                return true;
+            const hasGaps = checkLayoutForGaps(currentLayout, numColumns);
+            setHighlightedBG(hasGaps);
+            return hasGaps;
+        }
+    }), [children, layoutModel, currentLayout, numColumns]);
+    return (_jsxs(StyledEditor, { ref: setWrapperEl, children: [_jsx(ReactResizableStyles, {}), _jsx(ReactGridLayoutStyles, {}), !!width && !!height && (_jsxs(_Fragment, { children: [_jsx(EditorBackground, { "data-testid": 'editor', layout: currentLayout, numColumns: numColumns, rowHeight: rowHeight, rowsPerPage: numRowsPerPage, highlighted: highlightedBG }), _jsxs(ResponsiveGridLayout, { ...commonGridConfig, width: width, rowHeight: rowHeight, onLayoutChange: onLayoutChange, resizeHandles: ['s', 'e', 'n', 'w', 'sw', 'nw', 'se', 'ne'], resizeHandle: _jsx(ResizeHandle, {}), 
+                        // To prevent drag event on the resize handles
+                        draggableCancel: `.${resizeHandleClassName}`, innerRef: setListEl, layouts: layoutModel, ...restProps, children: [children?.sort(gridItemSorter).map(child => {
+                                const gridLayoutModel = layoutModel?.[breakpoint]?.filter(layout => layout.i === child.key);
+                                return (_jsx(EditorGridItem, { itemKey: child.key, "data-grid": gridLayoutModel && gridLayoutModel[0], itemLabel: child.props.itemLabel || '', moveItem: moveItem, addOrSubtractItemSize: addOrSubtractItemSize, children: child }, child.key));
+                            }), (!children || children.length === 0) && (
+                            // Placeholder when no children. Needed to avoid exceptions:
+                            // https://github.com/react-grid-layout/react-grid-layout/issues/216
+                            _jsx("div", { "data-grid": { x: 0, y: 0, w: 1, h: 1, resizeHandles: [] } }, '--'))] })] }))] }));
+};
+export default GridLayoutEditor;
+//# sourceMappingURL=GridLayoutEditor.js.map

package/lib/components/PageTemplates/GridLayout/GridLayoutEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayoutEditor.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type FC,\n  type ReactElement,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState\n} from 'react';\nimport {\n  Responsive as ResponsiveGridLayout,\n  type Layout,\n  type Layouts,\n  type CoreProps\n} from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { useElement, useI18n } from '../../../hooks';\nimport { defaultThemeProp } from '../../../theme';\n\nimport useGridLayoutConfig, { type GridBreakPoint, type GridLayoutModel } from './config';\nimport EditorBackground from './EditorBackground';\nimport EditorGridItem, { ResizeHandle, resizeHandleClassName } from './EditorGridItem';\nimport {\n  checkLayoutForGaps,\n  getBreakpointAndCols,\n  getRowHeight,\n  useGridItemSorter,\n  useMonitoredSize\n} from './utils';\nimport ReactResizableStyles from './ReactResizableStyles';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledEditor = styled(Flex)(({ theme }) => {\n  const {\n    base: {\n      palette: { interactive }\n    }\n  } = theme;\n  return css`\n    position: relative;\n\n    /* Needed for the background grid to be visible */\n    z-index: 0;\n    block-size: 100%;\n    overflow-y: auto;\n\n    /* To minimize height triggers during dragging due to horizontal scrollbar showing up */\n    overflow-x: hidden;\n\n    .react-grid-item.react-grid-placeholder {\n      background: ${interactive};\n      opacity: 0.3;\n    }\n  `;\n});\nStyledEditor.defaultProps = defaultThemeProp;\n\nexport interface GridLayoutHandleValue {\n  /** Used to get layout model with imperative handle. Returns the layout model from all breakpoints. Returns undefined when no children. */\n  getLayoutModel: () => GridLayoutModel | undefined;\n\n  /**\n   * Returns a flag indicating whether there are any gaps in the current layout.\n   * Highlights all background cells to indicate the same.\n   */\n  checkForGaps: () => boolean;\n}\n\n/** Props for GridLayoutEditor component */\nexport interface GridLayoutEditorProps {\n  /**\n   * Called whenever there's a change in the layoutModel.\n   * Change-handler of the CONTROLLED COMPONENT\n   */\n  onModelChange: (newModel: GridLayoutModel | undefined) => void;\n\n  /**\n   * Value of the CONTROLLED component\n   * Passed when editing a previously saved layout.\n   * Can be `undefined` when no children.\n   * It should be the same as the one emitted by `getLayoutModel` or `handle`\n   */\n  layoutModel: GridLayoutModel | undefined;\n\n  /** Override for the default breakpoints set on the Grid. Often overridden along with the `cols` prop. */\n  breakpoints: Partial<Record<GridBreakPoint, number>>;\n\n  /**\n   * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n   * rowsPerPage should be aligned with `breakpoints` prop\n   */\n  rows:\n    | { rowsPerPage: Partial<Record<GridBreakPoint, number>> }\n    | { rowHeight: Partial<Record<GridBreakPoint, number>> };\n\n  /**\n   * Override for the breakpoint-wise numColumns on the Grid.\n   * Often overridden along with the `breakpoints` prop.\n   * cols should be aligned with `breakpoints` prop\n   */\n  cols: Partial<Record<GridBreakPoint, number>>;\n\n  /**\n   * If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has \"transform: scale(n)\" css property,\n   * we should set scale coefficient to avoid render artifacts while dragging.\n   */\n  transformScale?: CoreProps['transformScale'];\n\n  /** Ref to access the editor state. Used to get the current layout-model when persisting it. */\n  handle?: Ref<GridLayoutHandleValue>;\n\n  /**\n   * Child elements to be rendered as Grid items.\n   * Each element should have a unique `key`\n   * Memoize children for a better performance: https://github.com/react-grid-layout/react-grid-layout#performance\n   * Set up an `itemLabel` prop with the text to call out when the item is focused.\n   * If a child needs to be initialized with a specific x/y/w/h,\n   *   or if you want to specify any special properties like minW, minH, etc.,\n   *   set up a `data-grid` in layoutModel prop with any subset of properties\n   * The prop can be undefined on init when no elements.\n   */\n  children?: ReactElement[];\n}\n\n/**\n * Editor component to create Grid Layouts\n * @component\n */\nconst GridLayoutEditor: FC<GridLayoutEditorProps> = ({\n  handle,\n  children,\n  layoutModel,\n  rows,\n  onModelChange,\n  ...restProps\n}) => {\n  // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width\n  const [wrapperEl, setWrapperEl] = useElement<HTMLElement>();\n  const size = useMonitoredSize(wrapperEl);\n  const width = size?.width;\n  const height = size?.height;\n  const commonGridConfig = useGridLayoutConfig();\n  const t = useI18n();\n  const { breakpoint, numColumns } = useMemo(\n    () => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols),\n    [width, restProps.breakpoints, restProps.cols]\n  );\n  const { rowHeight, numRowsPerPage } = useMemo(\n    () => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows),\n    [breakpoint, commonGridConfig.margin, height, rows]\n  );\n  const currentLayout = useMemo(() => layoutModel?.[breakpoint], [breakpoint, layoutModel]);\n\n  const onLayoutChange = useCallback(\n    (curLayout: Layout[], allLayouts: Layouts) => {\n      onModelChange(!children || children.length === 0 ? undefined : allLayouts);\n    },\n    [children, onModelChange]\n  );\n\n  // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n  const gridItemSorter = useGridItemSorter(currentLayout, numColumns);\n\n  // Set up keyboard accessibility\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  useEffect(() => {\n    if (listEl) {\n      listEl.setAttribute('role', 'list');\n      listEl.setAttribute('tabindex', '0');\n      listEl.setAttribute('aria-label', t('configurable_layout_instructions'));\n    }\n  }, [listEl, t]);\n\n  const moveItem = useCallback(\n    (itemKey: ReactElement['key'], deltaX: number, deltaY: number) => {\n      // Should be initialized by this point\n      if (!currentLayout) return;\n      const itemIndex = currentLayout.findIndex(item => item.i === itemKey);\n      // Should be present on the currentLayout by this point.\n      if (itemIndex === -1) return;\n\n      const oldItem = currentLayout[itemIndex];\n      const newItem: Layout = {\n        ...oldItem,\n        // `Math.max` needed to avoid a glitch when moving left beyond the left edge\n        x: Math.max(0, oldItem.x + deltaX),\n        y: Math.max(0, oldItem.y + deltaY)\n      };\n      const newLayout = [\n        ...currentLayout.slice(0, itemIndex),\n        newItem,\n        ...currentLayout.slice(itemIndex + 1)\n      ];\n      const newModel = { ...layoutModel, [breakpoint]: newLayout };\n      onModelChange(!children || children.length === 0 ? undefined : newModel);\n    },\n    [breakpoint, children, currentLayout, layoutModel, onModelChange]\n  );\n\n  const addOrSubtractItemSize = useCallback(\n    (itemKey: ReactElement['key'], deltaW: number, deltaH: number) => {\n      // Should be initialized by this point\n      if (!currentLayout) return;\n      const itemIndex = currentLayout.findIndex(item => item.i === itemKey);\n      // Should be present on the currentLayout by this point.\n      if (itemIndex === -1) return;\n\n      const oldItem = currentLayout[itemIndex];\n      const newItem: Layout = {\n        ...oldItem,\n        // `Math.max` needed to avoid a glitch when moving left beyond the left edge\n        w: Math.max(2, oldItem.w + deltaW),\n        h: Math.max(2, oldItem.h + deltaH)\n      };\n      const newLayout = [\n        ...currentLayout.slice(0, itemIndex),\n        newItem,\n        ...currentLayout.slice(itemIndex + 1)\n      ];\n      const newModel = { ...layoutModel, [breakpoint]: newLayout };\n      onModelChange(!children || children.length === 0 ? undefined : newModel);\n    },\n    [breakpoint, children, currentLayout, layoutModel, onModelChange]\n  );\n\n  // Provide a way for the parent component to get layout-model on demand\n  const [highlightedBG, setHighlightedBG] = useState(false);\n  useImperativeHandle(\n    handle,\n    () => ({\n      getLayoutModel: () => {\n        // Without this check, we'll end up with the dummy model set up down below for this case\n        if (!children || children.length === 0) return undefined;\n        return layoutModel;\n      },\n\n      checkForGaps: () => {\n        // On load when no items are added.\n        if (!currentLayout) return true;\n        const hasGaps = checkLayoutForGaps(currentLayout, numColumns);\n        setHighlightedBG(hasGaps);\n        return hasGaps;\n      }\n    }),\n    [children, layoutModel, currentLayout, numColumns]\n  );\n\n  return (\n    <StyledEditor ref={setWrapperEl}>\n      <ReactResizableStyles />\n      <ReactGridLayoutStyles />\n\n      {!!width && !!height && (\n        <>\n          <EditorBackground\n            data-testid='editor'\n            layout={currentLayout}\n            numColumns={numColumns}\n            rowHeight={rowHeight}\n            rowsPerPage={numRowsPerPage}\n            highlighted={highlightedBG}\n          />\n\n          <ResponsiveGridLayout\n            {...commonGridConfig}\n            width={width}\n            rowHeight={rowHeight}\n            onLayoutChange={onLayoutChange}\n            resizeHandles={['s', 'e', 'n', 'w', 'sw', 'nw', 'se', 'ne']}\n            resizeHandle={<ResizeHandle />}\n            // To prevent drag event on the resize handles\n            draggableCancel={`.${resizeHandleClassName}`}\n            innerRef={setListEl}\n            layouts={layoutModel}\n            {...restProps}\n          >\n            {children?.sort(gridItemSorter).map(child => {\n              const gridLayoutModel = layoutModel?.[breakpoint]?.filter(\n                layout => layout.i === child.key\n              );\n              return (\n                <EditorGridItem\n                  key={child.key}\n                  itemKey={child.key}\n                  data-grid={gridLayoutModel && gridLayoutModel[0]}\n                  itemLabel={child.props.itemLabel || ''}\n                  moveItem={moveItem}\n                  addOrSubtractItemSize={addOrSubtractItemSize}\n                >\n                  {child}\n                </EditorGridItem>\n              );\n            })}\n\n            {(!children || children.length === 0) && (\n              // Placeholder when no children. Needed to avoid exceptions:\n              // https://github.com/react-grid-layout/react-grid-layout/issues/216\n              <div key='--' data-grid={{ x: 0, y: 0, w: 1, h: 1, resizeHandles: [] }} />\n            )}\n          </ResponsiveGridLayout>\n        </>\n      )}\n    </StyledEditor>\n  );\n};\n\nexport default GridLayoutEditor;\n"]}

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.d.ts

@@ -0,0 +1,46 @@
+import { type FC, type ReactElement } from 'react';
+import type { GridBreakPoint, GridLayoutModel } from './config';
+/** Props for the GridLayoutViewer component */
+export interface GridLayoutViewerProps {
+    /**
+     * Value of the CONTROLLED component
+     * Layout-model saved previously from a GridLayoutEditor.
+     * If undefined, the elements will be rendered in some default layout.
+     */
+    layoutModel: GridLayoutModel | undefined;
+    /** Override for the default breakpoints set on the Grid. Often overridden along with the `cols` prop.
+     * breakpoints should be aligned with breakpoints prop
+     */
+    breakpoints: Partial<Record<GridBreakPoint, number>>;
+    /**
+     * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)
+     * If not passed, the Grid will simply use a static height value for the rows.
+     * rowsPerPage should be aligned with `breakpoints` prop
+     */
+    rows: {
+        rowsPerPage: Partial<Record<GridBreakPoint, number>>;
+    } | {
+        rowHeight: Partial<Record<GridBreakPoint, number>>;
+    };
+    /**
+     * Override for the breakpoint-wise numColumns on the Grid.
+     * Often overridden along with the `breakpoints` prop.
+     * cols should be aligned with `breakpoints` prop
+     */
+    cols: Partial<Record<GridBreakPoint, number>>;
+    /** Child elements to be rendered as Grid items. Each element should have a unique `key` */
+    children?: ReactElement[];
+    /**
+     * List of items that needs to have free-flowing height.
+     * NOTE: This works just for the items which don't have any other content underneath them.
+     * By default, all items will have fixed heights derived from the `layoutModel` prop
+     */
+    autoSizeItemIDs?: string[];
+}
+/**
+ * Viewer component for a Grid created using GridLayoutEditor
+ * @component
+ */
+declare const GridLayoutViewer: FC<GridLayoutViewerProps>;
+export default GridLayoutViewer;
+//# sourceMappingURL=GridLayoutViewer.d.ts.map

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayoutViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAc,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAOlF,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA2ChE,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IAEzC;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD;;;;OAIG;IACH,IAAI,EACA;QAAE,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;KAAE,GACxD;QAAE,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;KAAE,CAAC;IAE3D;;;;OAIG;IACH,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9C,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkE/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
+import styled, { css } from 'styled-components';
+import Flex from '../../Flex';
+import { useElement } from '../../../hooks';
+import useGridLayoutConfig from './config';
+import { getBreakpointAndCols, getLastItemsInLayout, getRowHeight, useGridItemSorter, useMonitoredSize } from './utils';
+import ReactGridLayoutStyles from './ReactGridLayoutStyles';
+const StyledWrapper = styled(Flex) `
+  block-size: 100%;
+`;
+const StyledAutoSizeItem = styled(Flex)(({ autoSize }) => {
+    if (!autoSize)
+        return '';
+    return css `
+    /* Overriding the inline style added by the RGL plugin. Needed to give the item a free height. */
+    height: auto !important;
+
+    /* Needed to maintain the extra gap at the bottom, since it's position absolute-ly */
+    padding-bottom: 1rem;
+  `;
+});
+/**
+ * Wrapper on top of GridItems to forward ref, etc.
+ * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles
+ */
+const ViewerGridItem = forwardRef(({ children, autoSize, ...restProps }, ref) => (_jsx(StyledAutoSizeItem, { autoSize: autoSize, container: { direction: 'column' }, ref: ref, ...restProps, children: children })));
+/**
+ * Viewer component for a Grid created using GridLayoutEditor
+ * @component
+ */
+const GridLayoutViewer = ({ children, layoutModel, rows, autoSizeItemIDs = [], ...restProps }) => {
+    // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width
+    const [wrapperEl, setWrapperEl] = useElement();
+    const size = useMonitoredSize(wrapperEl);
+    const width = size?.width;
+    const height = size?.height;
+    const commonGridConfig = useGridLayoutConfig();
+    const { breakpoint, numColumns } = useMemo(() => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols), [width, restProps.breakpoints, restProps.cols]);
+    const { rowHeight } = useMemo(() => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows), [breakpoint, commonGridConfig.margin, height, rows]);
+    // Callback to sort child DOM nodes to ensure an intuitive tabbing order
+    const gridItemSorter = useGridItemSorter(layoutModel?.[breakpoint], numColumns);
+    // Get list of last items in layout
+    const lastItemsInLayout = useMemo(() => getLastItemsInLayout(layoutModel?.[breakpoint]), [breakpoint, layoutModel]);
+    return (_jsxs(StyledWrapper, { ref: setWrapperEl, children: [_jsx(ReactGridLayoutStyles, {}), !!width && !!height && (_jsxs(ResponsiveGridLayout, { ...commonGridConfig, width: width, rowHeight: Math.max(rowHeight, 50), layouts: layoutModel, isResizable: false, isDraggable: false, isDroppable: false, ...restProps, children: [children?.sort(gridItemSorter).map(child => {
+                        const autoSize = autoSizeItemIDs.includes(child.key) && lastItemsInLayout.includes(child.key);
+                        return (_jsx(ViewerGridItem, { autoSize: autoSize, children: child }, child.key));
+                    }), (!children || children.length === 0) && (
+                    // Placeholder when no children. Needed to avoid exceptions:
+                    // https://github.com/react-grid-layout/react-grid-layout/issues/216
+                    _jsx("div", {}, '--'))] }))] }));
+};
+export default GridLayoutViewer;
+//# sourceMappingURL=GridLayoutViewer.js.map

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayoutViewer.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FC, forwardRef, type ReactElement, type Ref, useMemo } from 'react';\nimport { Responsive as ResponsiveGridLayout } from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { useElement } from '../../../hooks';\n\nimport type { GridBreakPoint, GridLayoutModel } from './config';\nimport useGridLayoutConfig from './config';\nimport {\n  getBreakpointAndCols,\n  getLastItemsInLayout,\n  getRowHeight,\n  useGridItemSorter,\n  useMonitoredSize\n} from './utils';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledWrapper = styled(Flex)`\n  block-size: 100%;\n`;\n\nconst StyledAutoSizeItem = styled(Flex)<{ autoSize: boolean }>(({ autoSize }) => {\n  if (!autoSize) return '';\n  return css`\n    /* Overriding the inline style added by the RGL plugin. Needed to give the item a free height. */\n    height: auto !important;\n\n    /* Needed to maintain the extra gap at the bottom, since it's position absolute-ly */\n    padding-bottom: 1rem;\n  `;\n});\n\n/**\n * Wrapper on top of GridItems to forward ref, etc.\n * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles\n */\nconst ViewerGridItem = forwardRef(\n  ({ children, autoSize, ...restProps }: any, ref: Ref<HTMLDivElement>) => (\n    <StyledAutoSizeItem\n      autoSize={autoSize}\n      container={{ direction: 'column' }}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </StyledAutoSizeItem>\n  )\n);\n\n/** Props for the GridLayoutViewer component */\nexport interface GridLayoutViewerProps {\n  /**\n   * Value of the CONTROLLED component\n   * Layout-model saved previously from a GridLayoutEditor.\n   * If undefined, the elements will be rendered in some default layout.\n   */\n  layoutModel: GridLayoutModel | undefined;\n\n  /** Override for the default breakpoints set on the Grid. Often overridden along with the `cols` prop.\n   * breakpoints should be aligned with breakpoints prop\n   */\n  breakpoints: Partial<Record<GridBreakPoint, number>>;\n  /**\n   * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n   * If not passed, the Grid will simply use a static height value for the rows.\n   * rowsPerPage should be aligned with `breakpoints` prop\n   */\n  rows:\n    | { rowsPerPage: Partial<Record<GridBreakPoint, number>> }\n    | { rowHeight: Partial<Record<GridBreakPoint, number>> };\n\n  /**\n   * Override for the breakpoint-wise numColumns on the Grid.\n   * Often overridden along with the `breakpoints` prop.\n   * cols should be aligned with `breakpoints` prop\n   */\n  cols: Partial<Record<GridBreakPoint, number>>;\n\n  /** Child elements to be rendered as Grid items. Each element should have a unique `key` */\n  children?: ReactElement[];\n\n  /**\n   * List of items that needs to have free-flowing height.\n   * NOTE: This works just for the items which don't have any other content underneath them.\n   * By default, all items will have fixed heights derived from the `layoutModel` prop\n   */\n  autoSizeItemIDs?: string[];\n}\n\n/**\n * Viewer component for a Grid created using GridLayoutEditor\n * @component\n */\nconst GridLayoutViewer: FC<GridLayoutViewerProps> = ({\n  children,\n  layoutModel,\n  rows,\n  autoSizeItemIDs = [],\n  ...restProps\n}) => {\n  // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width\n  const [wrapperEl, setWrapperEl] = useElement<HTMLElement>();\n  const size = useMonitoredSize(wrapperEl);\n  const width = size?.width;\n  const height = size?.height;\n  const commonGridConfig = useGridLayoutConfig();\n  const { breakpoint, numColumns } = useMemo(\n    () => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols),\n    [width, restProps.breakpoints, restProps.cols]\n  );\n  const { rowHeight } = useMemo(\n    () => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows),\n    [breakpoint, commonGridConfig.margin, height, rows]\n  );\n\n  // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n  const gridItemSorter = useGridItemSorter(layoutModel?.[breakpoint], numColumns);\n\n  // Get list of last items in layout\n  const lastItemsInLayout = useMemo(\n    () => getLastItemsInLayout(layoutModel?.[breakpoint]),\n    [breakpoint, layoutModel]\n  );\n\n  return (\n    <StyledWrapper ref={setWrapperEl}>\n      <ReactGridLayoutStyles />\n\n      {!!width && !!height && (\n        <ResponsiveGridLayout\n          {...commonGridConfig}\n          width={width}\n          rowHeight={Math.max(rowHeight, 50)}\n          layouts={layoutModel}\n          isResizable={false}\n          isDraggable={false}\n          isDroppable={false}\n          {...restProps}\n        >\n          {children?.sort(gridItemSorter).map(child => {\n            const autoSize =\n              autoSizeItemIDs.includes(child.key!) && lastItemsInLayout.includes(child.key!);\n\n            return (\n              <ViewerGridItem key={child.key} autoSize={autoSize}>\n                {child}\n              </ViewerGridItem>\n            );\n          })}\n\n          {(!children || children.length === 0) && (\n            // Placeholder when no children. Needed to avoid exceptions:\n            // https://github.com/react-grid-layout/react-grid-layout/issues/216\n            <div key='--' />\n          )}\n        </ResponsiveGridLayout>\n      )}\n    </StyledWrapper>\n  );\n};\n\nexport default GridLayoutViewer;\n"]}

package/lib/components/PageTemplates/GridLayout/ReactGridLayoutStyles.d.ts

@@ -0,0 +1,3 @@
+declare const ReactGridLayoutStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default ReactGridLayoutStyles;
+//# sourceMappingURL=ReactGridLayoutStyles.d.ts.map

package/lib/components/PageTemplates/GridLayout/ReactGridLayoutStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactGridLayoutStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/ReactGridLayoutStyles.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,qBAAqB,gGAuI1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}