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

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

@@ -0,0 +1,140 @@
+import { createGlobalStyle } from 'styled-components';
+// react-grid-layout/css/styles.css
+const ReactGridLayoutStyles = createGlobalStyle `
+  /* stylelint-disable unit-allowed-list */
+
+  .react-grid-layout {
+    position: relative;
+    transition: height 200ms ease;
+  }
+
+  .react-grid-item {
+    transition: all 200ms ease;
+    transition-property: left, top, width, height;
+  }
+
+  .react-grid-item img {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .react-grid-item.cssTransforms {
+    transition-property: transform, width, height;
+  }
+
+  .react-grid-item.resizing {
+    transition: none;
+    z-index: 1;
+    will-change: width, height;
+  }
+
+  .react-grid-item.react-draggable-dragging {
+    transition: none;
+    z-index: 3;
+    will-change: transform;
+  }
+
+  .react-grid-item.dropping {
+    visibility: hidden;
+  }
+
+  .react-grid-item.react-grid-placeholder {
+    background: red;
+    opacity: 0.2;
+    transition-duration: 100ms;
+    z-index: 2;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  .react-grid-item.react-grid-placeholder.placeholder-resizing {
+    transition: 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;
+    border-right: 2px solid rgba(0, 0, 0, 0.4);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+  }
+
+  .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%;
+    margin-top: -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%;
+    margin-left: -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);
+  }
+`;
+export default ReactGridLayoutStyles;
+//# sourceMappingURL=ReactGridLayoutStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactGridLayoutStyles.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/ReactGridLayoutStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,mCAAmC;AACnC,MAAM,qBAAqB,GAAG,iBAAiB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuI9C,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\n// react-grid-layout/css/styles.css\nconst ReactGridLayoutStyles = createGlobalStyle`\n  /* stylelint-disable unit-allowed-list */\n\n  .react-grid-layout {\n    position: relative;\n    transition: height 200ms ease;\n  }\n\n  .react-grid-item {\n    transition: all 200ms ease;\n    transition-property: left, top, width, height;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.cssTransforms {\n    transition-property: transform, width, height;\n  }\n\n  .react-grid-item.resizing {\n    transition: none;\n    z-index: 1;\n    will-change: width, height;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    z-index: 3;\n    will-change: transform;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: red;\n    opacity: 0.2;\n    transition-duration: 100ms;\n    z-index: 2;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n  }\n\n  .react-grid-item.react-grid-placeholder.placeholder-resizing {\n    transition: none;\n  }\n\n  .react-grid-item > .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n  }\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    border-right: 2px solid rgba(0, 0, 0, 0.4);\n    border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n  }\n\n  .react-resizable-hide > .react-resizable-handle {\n    display: none;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\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\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\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n`;\n\nexport default ReactGridLayoutStyles;\n"]}

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

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

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

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

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

@@ -0,0 +1,83 @@
+import { createGlobalStyle } from 'styled-components';
+// react-resizable/css/styles.css
+const ReactResizableStyles = createGlobalStyle `
+  /* stylelint-disable unit-allowed-list */
+
+  .react-resizable {
+    position: relative;
+  }
+
+  .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    background-position: 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%;
+    margin-top: -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%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+
+  .react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+
+  .react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+`;
+export default ReactResizableStyles;
+//# sourceMappingURL=ReactResizableStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactResizableStyles.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/ReactResizableStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,iCAAiC;AACjC,MAAM,oBAAoB,GAAG,iBAAiB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8E7C,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\n// react-resizable/css/styles.css\nconst ReactResizableStyles = createGlobalStyle`\n  /* stylelint-disable unit-allowed-list */\n\n  .react-resizable {\n    position: relative;\n  }\n\n  .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    background-repeat: no-repeat;\n    background-origin: content-box;\n    box-sizing: border-box;\n    background-position: bottom right;\n    padding: 0 3px 3px 0;\n  }\n\n  .react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n\n  .react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n\n  .react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n\n  .react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n\n  .react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n\n  .react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n\n  .react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n`;\n\nexport default ReactResizableStyles;\n"]}

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

@@ -0,0 +1,16 @@
+import type { Layout } from 'react-grid-layout';
+/** A breakpoint on the responsive GridLayout editor */
+export type GridBreakPoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+/** The persisted layout model could contain any subset of breakpoints */
+export type GridLayoutModel = Partial<Record<GridBreakPoint, Layout[]>>;
+/**
+ * Config common to GridLayoutEditor and GridLayoutViewer.
+ * These properties need to stay consistent between the design-time and run-time layouts.
+ * @returns Default RGL props for the GridLayout editor/viewer
+ */
+export default function useGridLayoutConfig(): {
+    margin: [number, number];
+    containerPadding: [number, number];
+    compactType: "vertical";
+};
+//# sourceMappingURL=config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE/D,yEAAyE;AACzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAExE;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB;YAiBf,CAAC,MAAM,EAAE,MAAM,CAAC;sBACN,CAAC,MAAM,EAAE,MAAM,CAAC;;EAIrD"}

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

@@ -0,0 +1,32 @@
+import { remToPx, stripUnit } from 'polished';
+import { useMemo } from 'react';
+import { useTheme } from '../../../hooks';
+/**
+ * Config common to GridLayoutEditor and GridLayoutViewer.
+ * These properties need to stay consistent between the design-time and run-time layouts.
+ * @returns Default RGL props for the GridLayout editor/viewer
+ */
+export default function useGridLayoutConfig() {
+    const theme = useTheme();
+    return useMemo(() => {
+        // Determine Gap around different grid cells (px)
+        let gap;
+        try {
+            // Just for safety in case the value is not in rem etc.
+            // `polished` throws errors in those scenarios
+            // Shouldn't normally needed since Cosmos values are always in `rem`s
+            gap = 2 * Number(stripUnit(remToPx(theme.base.spacing)));
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(e);
+            gap = 16;
+        }
+        return {
+            margin: [gap, gap],
+            containerPadding: [gap, gap],
+            compactType: 'vertical'
+        };
+    }, [theme]);
+}
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,iDAAiD;QACjD,IAAI,GAAW,CAAC;QAChB,IAAI,CAAC;YACH,uDAAuD;YACvD,8CAA8C;YAC9C,qEAAqE;YACrE,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAChB,GAAG,GAAG,EAAE,CAAC;QACX,CAAC;QAED,OAAO;YACL,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAqB;YACtC,gBAAgB,EAAE,CAAC,GAAG,EAAE,GAAG,CAAqB;YAChD,WAAW,EAAE,UAAmB;SACjC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\n\nimport { useTheme } from '../../../hooks';\n\n/** A breakpoint on the responsive GridLayout editor */\nexport type GridBreakPoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';\n\n/** The persisted layout model could contain any subset of breakpoints */\nexport type GridLayoutModel = Partial<Record<GridBreakPoint, Layout[]>>;\n\n/**\n * Config common to GridLayoutEditor and GridLayoutViewer.\n * These properties need to stay consistent between the design-time and run-time layouts.\n * @returns Default RGL props for the GridLayout editor/viewer\n */\nexport default function useGridLayoutConfig() {\n  const theme = useTheme();\n  return useMemo(() => {\n    // Determine Gap around different grid cells (px)\n    let gap: number;\n    try {\n      // Just for safety in case the value is not in rem etc.\n      // `polished` throws errors in those scenarios\n      // Shouldn't normally needed since Cosmos values are always in `rem`s\n      gap = 2 * Number(stripUnit(remToPx(theme.base.spacing)));\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      gap = 16;\n    }\n\n    return {\n      margin: [gap, gap] as [number, number],\n      containerPadding: [gap, gap] as [number, number],\n      compactType: 'vertical' as const\n    };\n  }, [theme]);\n}\n"]}

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

@@ -0,0 +1,6 @@
+export { default as GridLayoutEditor } from './GridLayoutEditor';
+export * from './GridLayoutEditor';
+export { default as GridLayoutViewer } from './GridLayoutViewer';
+export * from './GridLayoutViewer';
+export * from './config';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,6 @@
+export { default as GridLayoutEditor } from './GridLayoutEditor';
+export * from './GridLayoutEditor';
+export { default as GridLayoutViewer } from './GridLayoutViewer';
+export * from './GridLayoutViewer';
+export * from './config';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC","sourcesContent":["export { default as GridLayoutEditor } from './GridLayoutEditor';\nexport * from './GridLayoutEditor';\nexport { default as GridLayoutViewer } from './GridLayoutViewer';\nexport * from './GridLayoutViewer';\nexport * from './config';\n"]}

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

@@ -0,0 +1,85 @@
+import { type ReactElement } from 'react';
+import { type Layout } from 'react-grid-layout';
+import { type FlexProps } from '../../Flex';
+import type { ForwardRefForwardPropsComponent } from '../../../types';
+import type { GridBreakPoint } from './config';
+/**
+ * Returns a sorter function to apply on Grid children to ensure intuitive tabbing order
+ * @param currentLayout - Layout objects at the current breakpoint
+ * @param numColumns - Number of columns at the current breakpoint
+ * @returns A sorter function to apply on Grid children
+ */
+export declare const useGridItemSorter: (currentLayout?: Layout[], numColumns?: number) => (a: ReactElement, b: ReactElement) => number;
+/**
+ * Determines the current breakpoint and numColumns based on the given width.
+ * Uses the same mechanism as React-grid-layout.
+ * @param width - Container width
+ * @param breakpoints - Breakpoint configuration
+ * @param cols - Columns configured at different breakpoints
+ * @returns Current breakpoint and # of columns
+ */
+export declare const getBreakpointAndCols: (width: number, breakpoints: Partial<Record<GridBreakPoint, number>>, cols: Partial<Record<GridBreakPoint, number>>) => {
+    breakpoint: GridBreakPoint;
+    numColumns: number;
+};
+/**
+ * Determines the rowHeight to use based on auto-fit configuration.
+ * Returns a static rowHeight & `rowsPerPage: null` if no auto-fit configuration specified for the current breakpoint.
+ * @param breakpoint - Current breakpoint
+ * @param parentHeight - Height of the container element
+ * @param gap - Gutter size in pixels
+ * @param pageSizes - Auto-fit configuration
+ * @returns Row height in pixels
+ */
+export declare const getRowHeight: (breakpoint: GridBreakPoint, parentHeight: number, gap: number, rows: {
+    rowsPerPage: Partial<Record<GridBreakPoint, number>>;
+} | {
+    rowHeight: Partial<Record<GridBreakPoint, number>>;
+}) => {
+    rowHeight: number;
+    numRowsPerPage: number | null;
+};
+/**
+ * Checks the current layouts for any gaps between/around grid items.
+ * @param layout - Layout objects at a given breakpoint
+ * @param numColumns - # of columns at the breakpoint
+ * @returns A flag indicating whether there are gaps
+ */
+export declare const checkLayoutForGaps: (layout: Layout[], numColumns: number) => boolean;
+/**
+ * Sets up a ResizeObserver on the given element and returns a new size whenever the element is resized.
+ * NOTE: The input element and the output can be null on load when the corresponding ref is yet to be initialized.
+ * @param element - Element to monitor size
+ * @param delay - Debounce delay for the observer
+ * @returns The current size object for the element
+ */
+export declare const useMonitoredSize: (element: HTMLElement | null, delay?: number) => DOMRectReadOnly | null;
+/**
+ * Creates an array from the range specified by the args. Supports both ascending and descending ranges
+ * @param left - Left bound for the range
+ * @param right - Right bound for the range
+ * @param inclusive - Specifies whether the right bound should be included in the range
+ * @returns - A new array
+ */
+export declare const getArrayFromRange: (left: number, right: number, inclusive: boolean) => number[];
+/**
+ * Check for a non-null existence of the prop.
+ * @param obj - Target object.
+ * @param prop - Target property.
+ * @returns A boolean flag indicating the non-null existence of the property.
+ */
+export declare const hasNonNullProp: <T extends object, P extends PropertyKey>(obj: T, prop: P) => obj is Extract<T, Record<P, {}>>;
+/**
+ * Wraps the children around a Flex item,
+ * that grows exactly into the remaining parent height/width (depending on flex direction),
+ * regardless of the child content.
+ * @component
+ */
+export declare const ParentFitFlexItem: ForwardRefForwardPropsComponent<Partial<FlexProps>>;
+/**
+ * Returns last items in layout, vertically
+ * @param layout - Grid layout
+ * @returns Last items in layout
+ */
+export declare const getLastItemsInLayout: (layout: Layout[] | undefined) => string[];
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,mBAAmB,CAAC;AAK5D,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,mBAAoB,MAAM,EAAE,eAAe,MAAM,SAuBvE,YAAY,KAAK,YAAY,KAAG,MAiBvC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,UACxB,MAAM,eACA,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,QAC9C,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;;;CAS9C,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,eACX,cAAc,gBACZ,MAAM,OACf,MAAM,QAEP;IAAE,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,GACxD;IAAE,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,KACzD;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAkBpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,WAAY,MAAM,EAAE,cAAc,MAAM,KAAG,OAczE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,YAClB,WAAW,GAAG,IAAI,qBAE1B,eAAe,GAAG,IAkBpB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,SAAS,MAAM,aAAa,OAAO,aAShF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,WAAW,OAC/D,CAAC,QACA,CAAC,KAEN,GAAG,IAAI,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,CAEjC,CAAC;AAQF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,+BAA+B,CAAC,OAAO,CAAC,SAAS,CAAC,CASjF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,WAAY,MAAM,EAAE,GAAG,SAAS,aAmBhE,CAAC"}

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

@@ -0,0 +1,188 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Responsive } from 'react-grid-layout';
+import { useLayoutEffect, useState, forwardRef } from 'react';
+import styled from 'styled-components';
+import { debounce, hasProp } from '../../../utils';
+import Flex, {} from '../../Flex';
+/**
+ * Returns a sorter function to apply on Grid children to ensure intuitive tabbing order
+ * @param currentLayout - Layout objects at the current breakpoint
+ * @param numColumns - Number of columns at the current breakpoint
+ * @returns A sorter function to apply on Grid children
+ */
+export const useGridItemSorter = (currentLayout, numColumns) => {
+    // Elements are expected to be navigated/tabbed in a row-major order.
+    // This order should be based on the top-left {x,y} coordinates of each element.
+    // Setting up weighted values based on each item's location, to ensure the row-major order.
+    const keyWiseValues = useMemo(() => {
+        // Can be undefined on load and on breakpoint changes.
+        if (currentLayout === undefined ||
+            currentLayout === null ||
+            numColumns === undefined ||
+            numColumns === null)
+            return {};
+        const returnObj = {};
+        currentLayout.forEach(item => {
+            returnObj[item.i] = item.x + numColumns * item.y;
+        });
+        return returnObj;
+    }, [currentLayout, numColumns]);
+    // Function to be used in `Array.sort()`
+    return useCallback((a, b) => {
+        // Safety check. By default, we expect `key`s to be present on all children.
+        if (a.key === undefined || a.key === null || b.key === undefined || b.key === null)
+            return 0;
+        // In case the element is just added to the layout or if the grid just moved to a different breakpoint.
+        if (keyWiseValues[a.key] === undefined ||
+            keyWiseValues[a.key] === null ||
+            keyWiseValues[b.key] === undefined ||
+            keyWiseValues[b.key] === null)
+            return 0;
+        return keyWiseValues[a.key] - keyWiseValues[b.key];
+    }, [keyWiseValues]);
+};
+/**
+ * Determines the current breakpoint and numColumns based on the given width.
+ * Uses the same mechanism as React-grid-layout.
+ * @param width - Container width
+ * @param breakpoints - Breakpoint configuration
+ * @param cols - Columns configured at different breakpoints
+ * @returns Current breakpoint and # of columns
+ */
+export const getBreakpointAndCols = (width, breakpoints, cols) => {
+    // Reading it this way due to: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35370
+    const { getBreakpointFromWidth } = Responsive.utils;
+    const breakpoint = getBreakpointFromWidth(breakpoints, width);
+    const numColumns = cols[breakpoint];
+    return { breakpoint, numColumns };
+};
+/**
+ * Determines the rowHeight to use based on auto-fit configuration.
+ * Returns a static rowHeight & `rowsPerPage: null` if no auto-fit configuration specified for the current breakpoint.
+ * @param breakpoint - Current breakpoint
+ * @param parentHeight - Height of the container element
+ * @param gap - Gutter size in pixels
+ * @param pageSizes - Auto-fit configuration
+ * @returns Row height in pixels
+ */
+export const getRowHeight = (breakpoint, parentHeight, gap, rows) => {
+    if ('rowHeight' in rows) {
+        // If no auto-fit configuration specified at the current breakpoint, return static values.
+        return { rowHeight: rows.rowHeight[breakpoint] || 100, numRowsPerPage: null };
+    }
+    // If no auto-fit configuration specified at the current breakpoint, return static values.
+    if (!rows.rowsPerPage[breakpoint]) {
+        return { rowHeight: 100, numRowsPerPage: null };
+    }
+    const numRowsPerPage = rows.rowsPerPage[breakpoint];
+    const paddingTop = gap;
+    const marginY = gap;
+    // AUTO-FIT CALC: paddingTop + numRowsPerPage * (rowHeight + marginY) = parentHeight
+    const rowHeight = (parentHeight - paddingTop) / numRowsPerPage - marginY;
+    return { rowHeight, numRowsPerPage };
+};
+/**
+ * Checks the current layouts for any gaps between/around grid items.
+ * @param layout - Layout objects at a given breakpoint
+ * @param numColumns - # of columns at the breakpoint
+ * @returns A flag indicating whether there are gaps
+ */
+export const checkLayoutForGaps = (layout, numColumns) => {
+    // Since the grid items don't overlap,
+    // we can simply count how many cells are occupied by the grid-items
+    // and then see if the full grid has more cells than the filled count.
+    // Y-coordinate for the lowermost row (dummy row)
+    let lastRowY = 0;
+    let numFilledCells = 0;
+    layout.forEach(item => {
+        lastRowY = Math.max(lastRowY, item.y + item.h);
+        numFilledCells += item.w * item.h;
+    });
+    return numFilledCells < numColumns * lastRowY;
+};
+/**
+ * Sets up a ResizeObserver on the given element and returns a new size whenever the element is resized.
+ * NOTE: The input element and the output can be null on load when the corresponding ref is yet to be initialized.
+ * @param element - Element to monitor size
+ * @param delay - Debounce delay for the observer
+ * @returns The current size object for the element
+ */
+export const useMonitoredSize = (element, delay = 250) => {
+    const [size, setSize] = useState(null);
+    useLayoutEffect(() => {
+        if (!element)
+            return; // If not yet initialized
+        const resizeObserver = new ResizeObserver(debounce((entries) => {
+            setSize(entries[0].contentRect);
+        }, delay));
+        resizeObserver.observe(element);
+        return () => resizeObserver.disconnect();
+    }, [element, delay]);
+    return size;
+};
+/**
+ * Creates an array from the range specified by the args. Supports both ascending and descending ranges
+ * @param left - Left bound for the range
+ * @param right - Right bound for the range
+ * @param inclusive - Specifies whether the right bound should be included in the range
+ * @returns - A new array
+ */
+export const getArrayFromRange = (left, right, inclusive) => {
+    const range = [];
+    const ascending = left < right;
+    const increment = ascending ? 1 : -1;
+    const end = !inclusive ? right : right + increment;
+    for (let i = left; ascending ? i < end : i > end; i += increment) {
+        range.push(i);
+    }
+    return range;
+};
+/**
+ * Check for a non-null existence of the prop.
+ * @param obj - Target object.
+ * @param prop - Target property.
+ * @returns A boolean flag indicating the non-null existence of the property.
+ */
+export const hasNonNullProp = (obj, prop
+// eslint-disable-next-line @typescript-eslint/ban-types
+) => {
+    return hasProp(obj, prop) && obj[prop] !== null && obj[prop] !== undefined;
+};
+const StyledContent = styled(Flex) `
+  /* https://stackoverflow.com/a/36247448 */
+  min-height: 0;
+  min-width: 0;
+`;
+/**
+ * Wraps the children around a Flex item,
+ * that grows exactly into the remaining parent height/width (depending on flex direction),
+ * regardless of the child content.
+ * @component
+ */
+export const ParentFitFlexItem = forwardRef(({ children, item, ...restProps }, ref) => {
+    // TODO Do we need basis: '0'? Everything seems to work fine without it
+    return (_jsx(StyledContent, { ref: ref, item: { grow: 1, basis: '0', ...item }, ...restProps, children: children }));
+});
+/**
+ * Returns last items in layout, vertically
+ * @param layout - Grid layout
+ * @returns Last items in layout
+ */
+export const getLastItemsInLayout = (layout) => {
+    if (!layout)
+        return [];
+    // To store the last elements
+    const lastElements = [];
+    layout.forEach(({ x, y, w, h, i }) => {
+        const bottomEdge = y + h;
+        const isLast = !layout.some(({ x: x2, y: y2, w: w2, i: i2 }) => 
+        // Check if another item is below the current one
+        i2 !== i && x2 < x + w && x2 + w2 > x && y2 >= bottomEdge);
+        if (isLast) {
+            lastElements.push(i);
+        }
+    });
+    return lastElements;
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement, useCallback, useMemo } from 'react';\nimport { type Layout, Responsive } from 'react-grid-layout';\nimport { useLayoutEffect, useState, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport { debounce, hasProp } from '../../../utils';\nimport Flex, { type FlexProps } from '../../Flex';\nimport type { ForwardRefForwardPropsComponent } from '../../../types';\n\nimport type { GridBreakPoint } from './config';\n\n/**\n * Returns a sorter function to apply on Grid children to ensure intuitive tabbing order\n * @param currentLayout - Layout objects at the current breakpoint\n * @param numColumns - Number of columns at the current breakpoint\n * @returns A sorter function to apply on Grid children\n */\nexport const useGridItemSorter = (currentLayout?: Layout[], numColumns?: number) => {\n  // Elements are expected to be navigated/tabbed in a row-major order.\n  // This order should be based on the top-left {x,y} coordinates of each element.\n  // Setting up weighted values based on each item's location, to ensure the row-major order.\n  const keyWiseValues: { [key: string]: number } = useMemo(() => {\n    // Can be undefined on load and on breakpoint changes.\n    if (\n      currentLayout === undefined ||\n      currentLayout === null ||\n      numColumns === undefined ||\n      numColumns === null\n    )\n      return {};\n\n    const returnObj: { [key: string]: number } = {};\n    currentLayout.forEach(item => {\n      returnObj[item.i] = item.x + numColumns * item.y;\n    });\n    return returnObj;\n  }, [currentLayout, numColumns]);\n\n  // Function to be used in `Array.sort()`\n  return useCallback(\n    (a: ReactElement, b: ReactElement): number => {\n      // Safety check. By default, we expect `key`s to be present on all children.\n      if (a.key === undefined || a.key === null || b.key === undefined || b.key === null) return 0;\n\n      // In case the element is just added to the layout or if the grid just moved to a different breakpoint.\n      if (\n        keyWiseValues[a.key] === undefined ||\n        keyWiseValues[a.key] === null ||\n        keyWiseValues[b.key] === undefined ||\n        keyWiseValues[b.key] === null\n      )\n        return 0;\n\n      return keyWiseValues[a.key] - keyWiseValues[b.key];\n    },\n    [keyWiseValues]\n  );\n};\n\n/**\n * Determines the current breakpoint and numColumns based on the given width.\n * Uses the same mechanism as React-grid-layout.\n * @param width - Container width\n * @param breakpoints - Breakpoint configuration\n * @param cols - Columns configured at different breakpoints\n * @returns Current breakpoint and # of columns\n */\nexport const getBreakpointAndCols = (\n  width: number,\n  breakpoints: Partial<Record<GridBreakPoint, number>>,\n  cols: Partial<Record<GridBreakPoint, number>>\n) => {\n  // Reading it this way due to: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35370\n  const { getBreakpointFromWidth } = (Responsive as typeof Responsive & { utils: any }).utils;\n\n  const breakpoint: GridBreakPoint = getBreakpointFromWidth(breakpoints, width);\n  const numColumns = cols[breakpoint]!;\n\n  return { breakpoint, numColumns };\n};\n\n/**\n * Determines the rowHeight to use based on auto-fit configuration.\n * Returns a static rowHeight & `rowsPerPage: null` if no auto-fit configuration specified for the current breakpoint.\n * @param breakpoint - Current breakpoint\n * @param parentHeight - Height of the container element\n * @param gap - Gutter size in pixels\n * @param pageSizes - Auto-fit configuration\n * @returns Row height in pixels\n */\nexport const getRowHeight = (\n  breakpoint: GridBreakPoint,\n  parentHeight: number,\n  gap: number,\n  rows:\n    | { rowsPerPage: Partial<Record<GridBreakPoint, number>> }\n    | { rowHeight: Partial<Record<GridBreakPoint, number>> }\n): { rowHeight: number; numRowsPerPage: number | null } => {\n  if ('rowHeight' in rows) {\n    // If no auto-fit configuration specified at the current breakpoint, return static values.\n    return { rowHeight: rows.rowHeight[breakpoint] || 100, numRowsPerPage: null };\n  }\n\n  // If no auto-fit configuration specified at the current breakpoint, return static values.\n  if (!rows.rowsPerPage[breakpoint]) {\n    return { rowHeight: 100, numRowsPerPage: null };\n  }\n\n  const numRowsPerPage = rows.rowsPerPage[breakpoint]!;\n  const paddingTop = gap;\n  const marginY = gap;\n\n  // AUTO-FIT CALC: paddingTop + numRowsPerPage * (rowHeight + marginY) = parentHeight\n  const rowHeight: number = (parentHeight - paddingTop) / numRowsPerPage - marginY;\n  return { rowHeight, numRowsPerPage };\n};\n\n/**\n * Checks the current layouts for any gaps between/around grid items.\n * @param layout - Layout objects at a given breakpoint\n * @param numColumns - # of columns at the breakpoint\n * @returns A flag indicating whether there are gaps\n */\nexport const checkLayoutForGaps = (layout: Layout[], numColumns: number): boolean => {\n  // Since the grid items don't overlap,\n  // we can simply count how many cells are occupied by the grid-items\n  // and then see if the full grid has more cells than the filled count.\n\n  // Y-coordinate for the lowermost row (dummy row)\n  let lastRowY = 0;\n  let numFilledCells = 0;\n  layout.forEach(item => {\n    lastRowY = Math.max(lastRowY, item.y + item.h);\n    numFilledCells += item.w * item.h;\n  });\n\n  return numFilledCells < numColumns * lastRowY;\n};\n\n/**\n * Sets up a ResizeObserver on the given element and returns a new size whenever the element is resized.\n * NOTE: The input element and the output can be null on load when the corresponding ref is yet to be initialized.\n * @param element - Element to monitor size\n * @param delay - Debounce delay for the observer\n * @returns The current size object for the element\n */\nexport const useMonitoredSize = (\n  element: HTMLElement | null,\n  delay = 250\n): DOMRectReadOnly | null => {\n  const [size, setSize] = useState<DOMRectReadOnly | null>(null);\n\n  useLayoutEffect(() => {\n    if (!element) return; // If not yet initialized\n\n    const resizeObserver = new ResizeObserver(\n      debounce((entries: ResizeObserverEntry[]) => {\n        setSize(entries[0].contentRect);\n      }, delay)\n    );\n\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.disconnect();\n  }, [element, delay]);\n\n  return size;\n};\n\n/**\n * Creates an array from the range specified by the args. Supports both ascending and descending ranges\n * @param left - Left bound for the range\n * @param right - Right bound for the range\n * @param inclusive - Specifies whether the right bound should be included in the range\n * @returns - A new array\n */\nexport const getArrayFromRange = (left: number, right: number, inclusive: boolean) => {\n  const range = [];\n  const ascending = left < right;\n  const increment = ascending ? 1 : -1;\n  const end = !inclusive ? right : right + increment;\n  for (let i = left; ascending ? i < end : i > end; i += increment) {\n    range.push(i);\n  }\n  return range;\n};\n\n/**\n * Check for a non-null existence of the prop.\n * @param obj - Target object.\n * @param prop - Target property.\n * @returns A boolean flag indicating the non-null existence of the property.\n */\nexport const hasNonNullProp = <T extends object, P extends PropertyKey>(\n  obj: T,\n  prop: P\n  // eslint-disable-next-line @typescript-eslint/ban-types\n): obj is Extract<T, Record<P, {}>> => {\n  return hasProp(obj, prop) && obj[prop] !== null && obj[prop] !== undefined;\n};\n\nconst StyledContent = styled(Flex)`\n  /* https://stackoverflow.com/a/36247448 */\n  min-height: 0;\n  min-width: 0;\n`;\n\n/**\n * Wraps the children around a Flex item,\n * that grows exactly into the remaining parent height/width (depending on flex direction),\n * regardless of the child content.\n * @component\n */\nexport const ParentFitFlexItem: ForwardRefForwardPropsComponent<Partial<FlexProps>> = forwardRef(\n  ({ children, item, ...restProps }, ref) => {\n    // TODO Do we need basis: '0'? Everything seems to work fine without it\n    return (\n      <StyledContent ref={ref} item={{ grow: 1, basis: '0', ...item }} {...restProps}>\n        {children}\n      </StyledContent>\n    );\n  }\n);\n\n/**\n * Returns last items in layout, vertically\n * @param layout - Grid layout\n * @returns Last items in layout\n */\nexport const getLastItemsInLayout = (layout: Layout[] | undefined) => {\n  if (!layout) return [];\n  // To store the last elements\n  const lastElements: string[] = [];\n\n  layout.forEach(({ x, y, w, h, i }) => {\n    const bottomEdge = y + h;\n    const isLast = !layout.some(\n      ({ x: x2, y: y2, w: w2, i: i2 }) =>\n        // Check if another item is below the current one\n        i2 !== i && x2 < x + w && x2 + w2 > x && y2 >= bottomEdge\n    );\n\n    if (isLast) {\n      lastElements.push(i);\n    }\n  });\n\n  return lastElements;\n};\n"]}