npm - @pega/cosmos-react-core - Versions diffs - 9.0.0-build.6.5 → 9.0.0-build.6.6 - Mend

@pega/cosmos-react-core 9.0.0-build.6.5 → 9.0.0-build.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/lib/components/PageTemplates/GridLayout/EditorBackground.js CHANGED Viewed

@@ -55,7 +55,7 @@ StyledPageBreak.defaultProps = defaultThemeProp;
  */
 const EditorBackground = ({ layout, numColumns, rowHeight, rowsPerPage, highlighted }) => {
     const t = useI18n();
-    const { margin, containerPadding } = useGridLayoutConfig();
+    const { margin, containerPadding } = useGridLayoutConfig(true);
     const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;
     const maxY = Math.max(maxYInLayout, rowsPerPage || 0);
     const numGridCells = (maxY + 1) * numColumns;

package/lib/components/PageTemplates/GridLayout/EditorBackground.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,mBAAmB,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;IACpC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAEzE,OAAO,GAAG,CAAA;;0BAEY,WAAW;oBACjB,UAAU;oBACV,SAAS;KACxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/C,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAChC,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;IACpE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;4BAEc,gBAAgB,CAAC,CAAC,CAAC;0BACrB,gBAAgB,CAAC,CAAC,CAAC;2BAClB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;;4BAExD,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;;uCAEP,OAAO,CAAC,aAAa,CAAC;;;oBAGzC,MAAM;;;;;4BAKE,OAAO,CAAC,gBAAgB,CAAC;iBACpC,OAAO,CAAC,aAAa,CAAC;;;KAGlC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAUhD;;;GAGG;AACH,MAAM,gBAAgB,GAA8B,CAAC,EACnD,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,~~EAAE~~,CAAC;~~IAE3D~~,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,WAAW,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;IAC7C,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;IAExD,wFAAwF;IACxF,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,UAAU,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,aACrF,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACd,KAAC,cAAc,IAEb,SAAS,EAAE,SAAS;gBACpB,yDAAyD;gBACzD,WAAW,EAAE,WAAW,IAAI,CAAC,GAAG,YAAY,GAAG,UAAU,IAHpD,CAAC,CAIN,CACH,CAAC,EACD,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACnB,KAAC,eAAe,IAEd,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,WAAY,EACjC,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAL5B,CAAC,CAMN,CACH,CAAC,IACS,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n position: absolute;\n z-index: -1;\n pointer-events: none;\n inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n ({ theme, highlighted, rowHeight }) => {\n const {\n base: { palette }\n } = theme;\n const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n return css`\n /* stylelint-disable-next-line unit-allowed-list /\n border: 1px solid ${borderColor};\n background: ${background};\n block-size: ${rowHeight}px;\n `;\n }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n rowsAbove: number;\n rowHeight: number;\n margin: [number, number];\n containerPadding: [number, number];\n prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n const {\n base: { palette }\n } = theme;\n return css`\n position: absolute;\n inset-inline-start: ${containerPadding[0]}px;\n inset-inline-end: ${containerPadding[0]}px;\n inset-block-start: ${containerPadding[1] + rowsAbove (rowHeight + margin[1])}px;\n /* stylelint-disable-next-line unit-allowed-list /\n margin-block-start: ${-margin[1] / 2 - 1}px;\n / stylelint-disable-next-line unit-allowed-list /\n border-block-start: 2px dashed ${palette['border-line']};\n\n &::before {\n content: '${prefix}';\n position: absolute;\n font-size: 0.75rem;\n line-height: 1;\n transform: translate(0, -50%);\n background-color: ${palette['app-background']};\n color: ${palette['border-line']};\n padding-inline-end: 0.25rem;\n }\n `;\n }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n layout?: Layout[];\n numColumns: number;\n rowHeight: number;\n rowsPerPage: number \| null; // null when not applying auto-fit\n highlighted: boolean;\n}\n\n/\n Renders background grid-cells for GridEditor\n * @component\n /\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n layout,\n numColumns,\n rowHeight,\n rowsPerPage,\n highlighted\n}) => {\n const t = useI18n();\n const { margin, containerPadding } = useGridLayoutConfig();\n\n const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n const maxY = Math.max(maxYInLayout, rowsPerPage \|\| 0);\n const numGridCells = (maxY + 1) numColumns;\n const cells = getArrayFromRange(0, numGridCells, false);\n\n // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n return (\n <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n {cells.map(n => (\n <StyledGridCell\n key={n}\n rowHeight={rowHeight}\n // Highlight all cells except the dummy row at the bottom\n highlighted={highlighted && n < numGridCells - numColumns}\n />\n ))}\n {pageBreaks.map(n => (\n <StyledPageBreak\n key={n}\n rowsAbove={(n + 1) * rowsPerPage!}\n rowHeight={rowHeight}\n margin={margin}\n containerPadding={containerPadding}\n prefix={t('page_number', [n + 1])}\n />\n ))}\n </StyledGrid>\n );\n};\n\nexport default EditorBackground;\n"]}
1	+ {"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n position: absolute;\n z-index: -1;\n pointer-events: none;\n inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n ({ theme, highlighted, rowHeight }) => {\n const {\n base: { palette }\n } = theme;\n const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n return css`\n /* stylelint-disable-next-line unit-allowed-list /\n border: 1px solid ${borderColor};\n background: ${background};\n block-size: ${rowHeight}px;\n `;\n }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n rowsAbove: number;\n rowHeight: number;\n margin: [number, number];\n containerPadding: [number, number];\n prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n const {\n base: { palette }\n } = theme;\n return css`\n position: absolute;\n inset-inline-start: ${containerPadding[0]}px;\n inset-inline-end: ${containerPadding[0]}px;\n inset-block-start: ${containerPadding[1] + rowsAbove (rowHeight + margin[1])}px;\n /* stylelint-disable-next-line unit-allowed-list /\n margin-block-start: ${-margin[1] / 2 - 1}px;\n / stylelint-disable-next-line unit-allowed-list /\n border-block-start: 2px dashed ${palette['border-line']};\n\n &::before {\n content: '${prefix}';\n position: absolute;\n font-size: 0.75rem;\n line-height: 1;\n transform: translate(0, -50%);\n background-color: ${palette['app-background']};\n color: ${palette['border-line']};\n padding-inline-end: 0.25rem;\n }\n `;\n }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n layout?: Layout[];\n numColumns: number;\n rowHeight: number;\n rowsPerPage: number \| null; // null when not applying auto-fit\n highlighted: boolean;\n}\n\n/\n Renders background grid-cells for GridEditor\n * @component\n /\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n layout,\n numColumns,\n rowHeight,\n rowsPerPage,\n highlighted\n}) => {\n const t = useI18n();\n const { margin, containerPadding } = useGridLayoutConfig(true);\n\n const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n const maxY = Math.max(maxYInLayout, rowsPerPage \|\| 0);\n const numGridCells = (maxY + 1) numColumns;\n const cells = getArrayFromRange(0, numGridCells, false);\n\n // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n return (\n <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n {cells.map(n => (\n <StyledGridCell\n key={n}\n rowHeight={rowHeight}\n // Highlight all cells except the dummy row at the bottom\n highlighted={highlighted && n < numGridCells - numColumns}\n />\n ))}\n {pageBreaks.map(n => (\n <StyledPageBreak\n key={n}\n rowsAbove={(n + 1) * rowsPerPage!}\n rowHeight={rowHeight}\n margin={margin}\n containerPadding={containerPadding}\n prefix={t('page_number', [n + 1])}\n />\n ))}\n </StyledGrid>\n );\n};\n\nexport default EditorBackground;\n"]}

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

@@ -41,7 +41,7 @@ const GridLayoutEditor = ({ handle, children, layoutModel, rows, onModelChange,
     const size = useMonitoredSize(wrapperEl);
     const width = size?.width;
     const height = size?.height;
-    const commonGridConfig = useGridLayoutConfig();
+    const commonGridConfig = useGridLayoutConfig(true);
     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, layoutModel), [breakpoint, commonGridConfig.margin, height, rows, layoutModel]);

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

	@@ -1 +1 @@
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 GridBreakPointWiseValues, 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 type GridLayoutRowsProp\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 /\n Breakpoints set on the Grid.\n * Needs to be aligned with `rows` and `cols`\n /\n breakpoints: GridBreakPointWiseValues;\n\n /\n # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n * rows should be aligned with `breakpoints` prop\n /\n rows: GridLayoutRowsProp;\n\n /\n Breakpoint-wise numColumns on the Grid.\n * cols should be aligned with `breakpoints` prop\n /\n cols: GridBreakPointWiseValues;\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 /* Item label mapped with item id for a11y /\n itemLabelMap: Record<string, string>;\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 itemLabelMap,\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, layoutModel),\n [breakpoint, commonGridConfig.margin, height, rows, layoutModel]\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(oldItem.minW \|\| 2, oldItem.w + deltaW),\n h: Math.max(oldItem.minH \|\| 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 // Editor is always in LTR. At runtime, the layout is mirrored depending on locale.\n <StyledEditor ref={setWrapperEl} dir='ltr'>\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={itemLabelMap[child.key!] \|\| ''}\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"]}
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 GridBreakPointWiseValues, 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 type GridLayoutRowsProp\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 /\n Breakpoints set on the Grid.\n * Needs to be aligned with `rows` and `cols`\n /\n breakpoints: GridBreakPointWiseValues;\n\n /\n # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n * rows should be aligned with `breakpoints` prop\n /\n rows: GridLayoutRowsProp;\n\n /\n Breakpoint-wise numColumns on the Grid.\n * cols should be aligned with `breakpoints` prop\n /\n cols: GridBreakPointWiseValues;\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 /* Item label mapped with item id for a11y /\n itemLabelMap: Record<string, string>;\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 itemLabelMap,\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(true);\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, layoutModel),\n [breakpoint, commonGridConfig.margin, height, rows, layoutModel]\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(oldItem.minW \|\| 2, oldItem.w + deltaW),\n h: Math.max(oldItem.minH \|\| 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 // Editor is always in LTR. At runtime, the layout is mirrored depending on locale.\n <StyledEditor ref={setWrapperEl} dir='ltr'>\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={itemLabelMap[child.key!] \|\| ''}\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 CHANGED Viewed

@@ -33,6 +33,11 @@ export interface GridLayoutViewerProps {
      * By default, all items will have fixed heights derived from the `layoutModel` prop
      */
     autoSizeItemIDs?: string[];
+    /**
+     * Add container margin to viewer and runtime
+     * @default true
+     */
+    padContent?: boolean;
 }
 /**
  * Viewer component for a Grid created using GridLayoutEditor

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

	@@ -1 +1 @@
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,wBAAwB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAwCjB,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IAEzC;;;OAGG;IACH,WAAW,EAAE,wBAAwB,CAAC;IAEtC;;;OAGG;IACH,IAAI,EAAE,kBAAkB,CAAC;IAEzB;;;OAGG;IACH,IAAI,EAAE,wBAAwB,CAAC;IAE/B,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,~~CAiF~~/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
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,wBAAwB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAwCjB,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IAEzC;;;OAGG;IACH,WAAW,EAAE,wBAAwB,CAAC;IAEtC;;;OAGG;IACH,IAAI,EAAE,kBAAkB,CAAC;IAEzB;;;OAGG;IACH,IAAI,EAAE,wBAAwB,CAAC;IAE/B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkF/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -33,13 +33,13 @@ const ViewerGridItem = forwardRef(({ children, autoSize, direction, ...restProps
  * Viewer component for a Grid created using GridLayoutEditor
  * @component
  */
-const GridLayoutViewer = ({ children, layoutModel: layoutModelProp, rows, cols, autoSizeItemIDs = [], breakpoints }) => {
+const GridLayoutViewer = ({ children, layoutModel: layoutModelProp, rows, cols, autoSizeItemIDs = [], breakpoints, padContent = true }) => {
     // 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 commonGridConfig = useGridLayoutConfig(padContent);
     const { breakpoint, numColumns } = useMemo(() => getBreakpointAndCols(width || 0, breakpoints, cols), [width, breakpoints, cols]);
     const { rowHeight } = useMemo(() => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModelProp), [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]);
     // On load, setting layoutModel based on the direction

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GridLayoutViewer.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAA+B,OAAO,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,mBAAmB,MAAM,UAAU,CAAC;AAC3C,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAEjB,MAAM,SAAS,CAAC;AACjB,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAE5D,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEjC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;gBACpB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,OAAO;CAC/D,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9E,IAAI,CAAC,QAAQ;QAAE,OAAO,EAAE,CAAC;IACzB,OAAO,GAAG,CAAA;;;;;;GAMT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAO,EAAE,GAAwB,EAAE,EAAE,CAAC,CAClF,KAAC,kBAAkB,IACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,GAAG,EAAE,SAAS,YAEb,QAAQ,GACU,CACtB,CACF,CAAC;~~AAyCF~~;;;GAGG;AACH,MAAM,gBAAgB,GAA8B,CAAC,EACnD,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAI,EACJ,IAAI,EACJ,eAAe,GAAG,EAAE,EACpB,WAAW,~~EACZ~~,EAAE,EAAE;IACH,mGAAmG;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,IAAI,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC;IAC1B,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC;IAC5B,MAAM,gBAAgB,GAAG,mBAAmB,~~EAAE~~,CAAC;~~IAC/C~~,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,OAAO,CACxC,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,EACzD,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,CAC3B,CAAC;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,EAC9F,CAAC,UAAU,EAAE,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,CACrE,CAAC;IAEF,sDAAsD;IACtD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,IAAI,eAAe;YAAE,OAAO,eAAe,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QAC1E,OAAO,eAAe,CAAC;QACvB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,wEAAwE;IACxE,MAAM,cAAc,GAAG,iBAAiB,CAAC,eAAe,EAAE,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;IAEpF,mCAAmC;IACnC,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,oBAAoB,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,CAAC,EACrD,CAAC,UAAU,EAAE,WAAW,CAAC,CAC1B,CAAC;IAEF,OAAO;IACL,2DAA2D;IAC3D,sDAAsD;IACtD,8DAA8D;IAC9D,MAAC,aAAa,IAAC,GAAG,EAAE,YAAY,EAAE,GAAG,EAAC,KAAK,aACzC,KAAC,qBAAqB,KAAG,EAExB,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,IAAI,CACtB,MAAC,oBAAoB,OACf,gBAAgB,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,EAClC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,aAEvB,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;wBAC1C,MAAM,QAAQ,GACZ,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAI,CAAC,IAAI,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAI,CAAC,CAAC;wBAEjF,OAAO,CACL,KAAC,cAAc,IAAiB,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,YAC/E,KAAK,IADa,KAAK,CAAC,GAAG,CAEb,CAClB,CAAC;oBACJ,CAAC,CAAC,EAED,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI;oBACvC,4DAA4D;oBAC5D,oEAAoE;oBACpE,gBAAS,IAAI,CAAG,CACjB,IACoB,CACxB,EAED,KAAC,iBAAiB,KAAG,IACP,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","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 { useDirection, useElement } from '../../../hooks';\n\nimport type { GridBreakPointWiseValues, GridLayoutModel } from './config';\nimport useGridLayoutConfig from './config';\nimport {\n convertLtrToRtl,\n getBreakpointAndCols,\n getLastItemsInLayout,\n getRowHeight,\n useGridItemSorter,\n useMonitoredSize,\n type GridLayoutRowsProp\n} from './utils';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledWrapper = styled(Flex)`\n block-size: 100%;\n`;\n\nconst StyledEmptyFooter = styled.div`\n block-size: ${({ theme }) => `calc(${theme.base.spacing} * 2)`};\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, direction, ...restProps }: any, ref: Ref<HTMLDivElement>) => (\n <StyledAutoSizeItem\n autoSize={autoSize}\n container={{ direction: 'column' }}\n ref={ref}\n {...restProps}\n dir={direction}\n >\n {children}\n </StyledAutoSizeItem>\n )\n);\n\n/* Props for the GridLayoutViewer component /\nexport interface GridLayoutViewerProps {\n /\n Layout-model saved previously from a GridLayoutEditor.\n * If undefined, the elements will be rendered in some default layout.\n * NOTE: A remount is needed if this layoutModel needs to be changed from the outside.\n * - The component reads it only once on load and populates layouts for missing breakpoints, assuming `lg` as the baseline\n /\n layoutModel: GridLayoutModel \| undefined;\n\n /\n Breakpoints set on the Grid.\n * Needs to be aligned with `rows` and `cols`\n /\n breakpoints: GridBreakPointWiseValues;\n\n /\n # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n * rows should be aligned with `breakpoints` prop\n /\n rows: GridLayoutRowsProp;\n\n /\n Breakpoint-wise numColumns on the Grid.\n * cols should be aligned with `breakpoints` prop\n /\n cols: GridBreakPointWiseValues;\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: layoutModelProp,\n rows,\n cols,\n autoSizeItemIDs = [],\n breakpoints\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, breakpoints, cols),\n [width, breakpoints, cols]\n );\n const { rowHeight } = useMemo(\n () => getRowHeight(breakpoint, height \|\| 0, commonGridConfig.margin[0], rows, layoutModelProp),\n [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]\n );\n\n // On load, setting layoutModel based on the direction\n const { rtl } = useDirection();\n const layoutModel = useMemo(() => {\n if (rtl && layoutModelProp) return convertLtrToRtl(layoutModelProp, cols);\n return layoutModelProp;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n const gridItemSorter = useGridItemSorter(layoutModelProp?.[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 // Enforcing ltr here due to limitations of the RGL plugin.\n // The layout is mirrored using convertLtrToRtl above,\n // and then the direction is explicitly passed to items below.\n <StyledWrapper ref={setWrapperEl} dir='ltr'>\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 cols={cols}\n breakpoints={breakpoints}\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} direction={rtl ? 'rtl' : 'ltr'}>\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 {/* Removed container padding, hence adding extra space at bottom of grid */}\n <StyledEmptyFooter />\n </StyledWrapper>\n );\n};\n\nexport default GridLayoutViewer;\n"]}
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 { useDirection, useElement } from '../../../hooks';\n\nimport type { GridBreakPointWiseValues, GridLayoutModel } from './config';\nimport useGridLayoutConfig from './config';\nimport {\n convertLtrToRtl,\n getBreakpointAndCols,\n getLastItemsInLayout,\n getRowHeight,\n useGridItemSorter,\n useMonitoredSize,\n type GridLayoutRowsProp\n} from './utils';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledWrapper = styled(Flex)`\n block-size: 100%;\n`;\n\nconst StyledEmptyFooter = styled.div`\n block-size: ${({ theme }) => `calc(${theme.base.spacing} * 2)`};\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, direction, ...restProps }: any, ref: Ref<HTMLDivElement>) => (\n <StyledAutoSizeItem\n autoSize={autoSize}\n container={{ direction: 'column' }}\n ref={ref}\n {...restProps}\n dir={direction}\n >\n {children}\n </StyledAutoSizeItem>\n )\n);\n\n/* Props for the GridLayoutViewer component /\nexport interface GridLayoutViewerProps {\n /\n Layout-model saved previously from a GridLayoutEditor.\n * If undefined, the elements will be rendered in some default layout.\n * NOTE: A remount is needed if this layoutModel needs to be changed from the outside.\n * - The component reads it only once on load and populates layouts for missing breakpoints, assuming `lg` as the baseline\n /\n layoutModel: GridLayoutModel \| undefined;\n\n /\n Breakpoints set on the Grid.\n * Needs to be aligned with `rows` and `cols`\n /\n breakpoints: GridBreakPointWiseValues;\n\n /\n # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n * rows should be aligned with `breakpoints` prop\n /\n rows: GridLayoutRowsProp;\n\n /\n Breakpoint-wise numColumns on the Grid.\n * cols should be aligned with `breakpoints` prop\n /\n cols: GridBreakPointWiseValues;\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 Add container margin to viewer and runtime\n * @default true\n /\n padContent?: boolean;\n}\n\n/\n Viewer component for a Grid created using GridLayoutEditor\n * @component\n /\nconst GridLayoutViewer: FC<GridLayoutViewerProps> = ({\n children,\n layoutModel: layoutModelProp,\n rows,\n cols,\n autoSizeItemIDs = [],\n breakpoints,\n padContent = true\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(padContent);\n const { breakpoint, numColumns } = useMemo(\n () => getBreakpointAndCols(width \|\| 0, breakpoints, cols),\n [width, breakpoints, cols]\n );\n const { rowHeight } = useMemo(\n () => getRowHeight(breakpoint, height \|\| 0, commonGridConfig.margin[0], rows, layoutModelProp),\n [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]\n );\n\n // On load, setting layoutModel based on the direction\n const { rtl } = useDirection();\n const layoutModel = useMemo(() => {\n if (rtl && layoutModelProp) return convertLtrToRtl(layoutModelProp, cols);\n return layoutModelProp;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n const gridItemSorter = useGridItemSorter(layoutModelProp?.[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 // Enforcing ltr here due to limitations of the RGL plugin.\n // The layout is mirrored using convertLtrToRtl above,\n // and then the direction is explicitly passed to items below.\n <StyledWrapper ref={setWrapperEl} dir='ltr'>\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 cols={cols}\n breakpoints={breakpoints}\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} direction={rtl ? 'rtl' : 'ltr'}>\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 {/* Removed container padding, hence adding extra space at bottom of grid */}\n <StyledEmptyFooter />\n </StyledWrapper>\n );\n};\n\nexport default GridLayoutViewer;\n"]}

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

@@ -10,7 +10,7 @@ export type GridBreakPointWiseValues = Partial<Record<GridBreakPoint, number>>;
  * 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(): {
+export default function useGridLayoutConfig(padContent: boolean): {
     margin: [number, number];
     containerPadding: [number, number];
     compactType: "vertical";

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

	@@ -1 +1 @@
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,8DAA8D;AAC9D,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB;~~YAiBf~~,CAAC,MAAM,EAAE,MAAM,CAAC;~~sBACR~~,CAAC,MAAM,EAAE,MAAM,CAAC;;~~EAInD~~"}
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,8DAA8D;AAC9D,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAU,EAAE,OAAO;YAiBnC,CAAC,MAAM,EAAE,MAAM,CAAC;sBACS,CAAC,MAAM,EAAE,MAAM,CAAC;;EAIpE"}

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

@@ -6,7 +6,7 @@ import { useTheme } from '../../../hooks';
  * 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() {
+export default function useGridLayoutConfig(padContent) {
     const theme = useTheme();
     return useMemo(() => {
         // Determine Gap around different grid cells (px)
@@ -24,9 +24,9 @@ export default function useGridLayoutConfig() {
         }
         return {
             margin: [gap, gap],
-            containerPadding: [gap, 0],
+            containerPadding: [padContent ? gap : 0, 0],
             compactType: 'vertical'
         };
-    }, [theme]);
+    }, [theme, padContent]);
 }
 //# sourceMappingURL=config.js.map

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

	@@ -1 +1 @@
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;AAW1C;;;;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,CAAC,CAAqB;~~YAC9C~~,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/* Numeric configuration per each breakpoint in GridLayout /\nexport type GridBreakPointWiseValues = Partial<Record<GridBreakPoint, number>>;\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, 0] as [number, number],\n compactType: 'vertical' as const\n };\n }, [theme]);\n}\n"]}
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;AAW1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAmB;IAC7D,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,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAqB;YAC/D,WAAW,EAAE,UAAmB;SACjC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;AAC1B,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/* Numeric configuration per each breakpoint in GridLayout /\nexport type GridBreakPointWiseValues = Partial<Record<GridBreakPoint, number>>;\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(padContent: boolean) {\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: [padContent ? gap : 0, 0] as [number, number],\n compactType: 'vertical' as const\n };\n }, [theme, padContent]);\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "9.0.0-build.6.5",
+  "version": "9.0.0-build.6.6",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",