npm - @pega/lists-react - Versions diffs - 9.0.0-build.23.2 → 9.0.0-build.23.4 - Mend

@pega/lists-react 9.0.0-build.23.2 → 9.0.0-build.23.4

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 (18) hide show

package/lib/Core/Components/ContextMenu/ContextMenuContainer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA0FlE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,IAAI,EACJ,QAAQ,EACT,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7B,~~kDAyGA~~"}
1	+ {"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA0FlE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,IAAI,EACJ,QAAQ,EACT,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7B,kDAuIA"}

package/lib/Core/Components/ContextMenu/ContextMenuContainer.js CHANGED Viewed

@@ -71,6 +71,32 @@ export default function ContextMenuContainer({ view, selector }) {
             setMenuContext(null);
         }
     }, [showMenu]);
+    const openContextMenu = useCallback((targetElement, eventTarget) => {
+        if (!shouldOverrideContextMenu(targetElement, columns) || eventTarget.closest('a')) {
+            return false;
+        }
+        const { colId } = targetElement.dataset;
+        const column = columns.find(col => col.field.id.toString() === colId?.toString());
+        if (!column)
+            return true;
+        targetElement.setAttribute('data-context-menu-active', 'true');
+        targetElement.setAttribute('aria-expanded', 'true');
+        const menuId = `rs-context-menu-${uuidV4()}`;
+        targetElement.setAttribute('aria-controls', menuId);
+        const rowContextData = getRowContextData(data, paginationOptions || {}, targetElement);
+        const options = getMenuItems(targetElement, column, rowContextData, view, translate);
+        if (!options.length)
+            return true;
+        setShowMenu(true);
+        setMenuItems(options);
+        setMenuContext({
+            column,
+            targetCell: targetElement,
+            rowContextData,
+            menuId
+        });
+        return true;
+    }, [columns, data, paginationOptions, translate, view]);
     const contextMenuListener = useCallback((e) => {
         const target = e.target;
         if (!isInstance(target, Element))
@@ -78,35 +104,29 @@ export default function ContextMenuContainer({ view, selector }) {
         const targetElement = target.closest(selector.query.toString());
         if (!isInstance(targetElement, HTMLElement))
             return;
-        if (shouldOverrideContextMenu(targetElement, columns) && !target.closest('a')) {
+        if (openContextMenu(targetElement, target)) {
             e.stopPropagation();
             e.preventDefault();
-            const { colId } = targetElement.dataset;
-            const column = columns.find(col => col.field.id.toString() === colId?.toString());
-            if (!column)
-                return;
-            targetElement.setAttribute('data-context-menu-active', 'true');
-            targetElement.setAttribute('aria-expanded', 'true');
-            const menuId = `rs-context-menu-${uuidV4()}`;
-            targetElement.setAttribute('aria-controls', menuId);
-            const rowContextData = getRowContextData(data, paginationOptions || {}, targetElement);
-            const options = getMenuItems(targetElement, column, rowContextData, view, translate);
-            if (!options.length)
-                return;
-            setShowMenu(true);
-            setMenuItems(options);
-            setMenuContext({
-                column,
-                targetCell: targetElement,
-                rowContextData,
-                menuId
-            });
         }
-    }, [selector, columns, data, paginationOptions, translate, view]);
-    const onKeydown = useCallback(({ key }) => {
-        if (key === 'Escape')
+    }, [selector, openContextMenu]);
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Escape') {
             setShowMenu(false);
-    }, []);
+            return;
+        }
+        if (!(e.key === 'F10' && e.shiftKey))
+            return;
+        const activeElement = document.activeElement;
+        if (!isInstance(activeElement, Element))
+            return;
+        const targetElement = activeElement.closest(selector.query.toString());
+        if (!isInstance(targetElement, HTMLElement))
+            return;
+        if (openContextMenu(targetElement, activeElement)) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }, [selector, openContextMenu]);
     useEffect(() => {
         const abortController = new AbortController();
         if (!domContainer)
@@ -114,13 +134,13 @@ export default function ContextMenuContainer({ view, selector }) {
         domContainer.addEventListener('contextmenu', contextMenuListener, {
             signal: abortController.signal
         });
-        document.addEventListener('keydown', onKeydown, {
+        domContainer.addEventListener('keydown', onKeydown, {
             signal: abortController.signal
         });
         return () => {
             abortController.abort();
         };
-    }, [domContainer, contextMenuListener]);
+    }, [domContainer, contextMenuListener, onKeydown]);
     return showMenu && menuContext ? (_jsx(Popover, { ref: setPopperRef, target: menuContext.targetCell, children: _jsx(Menu, { id: menuContext.menuId, items: menuItems, onItemClick: (_, e) => {
                 e.preventDefault();
                 setShowMenu(false);

package/lib/Core/Components/ContextMenu/ContextMenuContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useCallback } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport {\n Popover,\n Icon,\n useElement,\n useOuterEvent,\n Menu,\n isInstance\n} from '@pega/cosmos-react-core';\nimport {\n getRowContextData,\n getScrollerElem,\n isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\nimport TestIdConstants from '../TestIdConstants';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\ntype MenuContext = {\n targetCell: HTMLElement;\n column: RsCoreTypes.Column;\n rowContextData: RsCoreTypes.RowData;\n menuId: string;\n} \| null;\n\nconst getMenuItems = (\n targetCell: HTMLElement,\n column: RsCoreTypes.Column,\n rowContextData: RsCoreTypes.RowData,\n view: RsCoreTypes.View,\n translate: (key: string) => string\n): MenuItemProps[] => {\n const {\n columns = [],\n state: { filterExpression } = {},\n type: { applyFilter: applyViewFilter, clearFilter }\n } = view;\n const defaultMenuItems: MenuItemProps[] = [];\n\n if (quickFilterEnabled(columns, column.field.id)) {\n const isFiltered = filterExpression && isFilterApplied(column, filterExpression);\n defaultMenuItems.push({\n id: 'quickFilter',\n visual: isFiltered ? <Icon name='times' /> : <Icon name='filter' />,\n primary: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n\n onClick: () => {\n if (isFiltered) {\n removeFilter(filterExpression, targetCell, applyViewFilter, clearFilter);\n } else {\n applyFilter(columns, targetCell, rowContextData, filterExpression, applyViewFilter);\n }\n }\n });\n }\n\n defaultMenuItems.push({\n id: 'copyText',\n visual: <Icon name='copy' />,\n primary: translate('Copy text'),\n onClick: () => copyText(targetCell)\n });\n\n const fieldSpecificMenuItems: MenuItemProps[] = (column.field?.contextMenuOptions \|\| []).map(\n option => ({\n id: option.id,\n visual: option.icon ? <Icon name={option.icon} /> : undefined,\n primary: option.label \|\| '',\n onClick: () => option.onClick?.(targetCell)\n })\n );\n\n return [...defaultMenuItems, ...fieldSpecificMenuItems];\n};\n\nconst shouldOverrideContextMenu = (\n targetCell: HTMLElement,\n columns: RsCoreTypes.Column[] = []\n): boolean => {\n const { colId } = targetCell.dataset;\n\n const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) \|\| {};\n return !(!field \|\| field?.noContextMenu);\n};\n\nexport default function ContextMenuContainer({\n view,\n selector\n}: {\n view: RsCoreTypes.View;\n selector: { query: string };\n}) {\n const { columns = [], data = [], state: { paginationOptions } = {}, domContainer } = view;\n\n const [translate] = useTranslate();\n const [menuContext, setMenuContext] = useState<MenuContext>(null);\n const [showMenu, setShowMenu] = useState(false);\n const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]);\n const [popperRef, setPopperRef] = useElement();\n const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n setShowMenu(false);\n });\n\n useScrollAway(popperRef, scrollerElem, () => {\n setShowMenu(false);\n });\n\n useEffect(() => {\n if (!showMenu) {\n const targetCell = menuContext?.targetCell;\n if (targetCell) {\n targetCell.removeAttribute('data-context-menu-active');\n targetCell.removeAttribute('aria-expanded');\n targetCell.removeAttribute('aria-controls');\n }\n setMenuContext(null);\n }\n }, [showMenu]);\n\n const contextMenuListener = useCallback(\n (e: MouseEvent) => {\n const target = e.target;\n if (!isInstance(target, Element)) return;\n\n const targetElement = target.closest(selector.query.toString());\n if (!isInstance(targetElement, HTMLElement)) return;\n\n if (shouldOverrideContextMenu(targetElement, columns) && !target.closest('a')) {\n e.stopPropagation();\n e.preventDefault();\n\n const { colId } = targetElement.dataset;\n const column = columns.find(col => col.field.id.toString() === colId?.toString());\n if (!column) return;\n\n targetElement.setAttribute('data-context-menu-active', 'true');\n targetElement.setAttribute('aria-expanded', 'true');\n const menuId = `rs-context-menu-${uuidV4()}`;\n targetElement.setAttribute('aria-controls', menuId);\n\n const rowContextData = getRowContextData(data, paginationOptions \|\| {}, targetElement);\n const options = getMenuItems(targetElement, column, rowContextData, view, translate);\n if (!options.length) return;\n\n setShowMenu(true);\n setMenuItems(options);\n setMenuContext({\n column,\n targetCell: targetElement,\n rowContextData,\n menuId\n });\n }\n },\n [selector, columns, data, paginationOptions, translate, view]\n );\n\n const onKeydown = useCallback(({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowMenu(false);\n }, []);\n\n useEffect(() => {\n const abortController = new AbortController();\n if (!domContainer) return;\n\n domContainer.addEventListener('contextmenu', contextMenuListener, {\n signal: abortController.signal\n });\n document.addEventListener('keydown', onKeydown, {\n signal: abortController.signal\n });\n\n return () => {\n abortController.abort();\n };\n }, [domContainer, contextMenuListener]);\n\n return showMenu && menuContext ? (\n <Popover ref={setPopperRef} target={menuContext.targetCell}>\n <Menu\n id={menuContext.menuId}\n items={menuItems}\n onItemClick={(_, e) => {\n e.preventDefault();\n setShowMenu(false);\n }}\n focusControlEl={menuContext.targetCell}\n className='action-menu'\n data-testid={TestIdConstants.contextMenu}\n // TODO: remove this older test-id syntax after checking usage across the test suites\n data-test-id='action-menu'\n />\n </Popover>\n ) : null;\n}\n"]}
1	+ {"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useCallback } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport {\n Popover,\n Icon,\n useElement,\n useOuterEvent,\n Menu,\n isInstance\n} from '@pega/cosmos-react-core';\nimport {\n getRowContextData,\n getScrollerElem,\n isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\nimport TestIdConstants from '../TestIdConstants';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\ntype MenuContext = {\n targetCell: HTMLElement;\n column: RsCoreTypes.Column;\n rowContextData: RsCoreTypes.RowData;\n menuId: string;\n} \| null;\n\nconst getMenuItems = (\n targetCell: HTMLElement,\n column: RsCoreTypes.Column,\n rowContextData: RsCoreTypes.RowData,\n view: RsCoreTypes.View,\n translate: (key: string) => string\n): MenuItemProps[] => {\n const {\n columns = [],\n state: { filterExpression } = {},\n type: { applyFilter: applyViewFilter, clearFilter }\n } = view;\n const defaultMenuItems: MenuItemProps[] = [];\n\n if (quickFilterEnabled(columns, column.field.id)) {\n const isFiltered = filterExpression && isFilterApplied(column, filterExpression);\n defaultMenuItems.push({\n id: 'quickFilter',\n visual: isFiltered ? <Icon name='times' /> : <Icon name='filter' />,\n primary: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n\n onClick: () => {\n if (isFiltered) {\n removeFilter(filterExpression, targetCell, applyViewFilter, clearFilter);\n } else {\n applyFilter(columns, targetCell, rowContextData, filterExpression, applyViewFilter);\n }\n }\n });\n }\n\n defaultMenuItems.push({\n id: 'copyText',\n visual: <Icon name='copy' />,\n primary: translate('Copy text'),\n onClick: () => copyText(targetCell)\n });\n\n const fieldSpecificMenuItems: MenuItemProps[] = (column.field?.contextMenuOptions \|\| []).map(\n option => ({\n id: option.id,\n visual: option.icon ? <Icon name={option.icon} /> : undefined,\n primary: option.label \|\| '',\n onClick: () => option.onClick?.(targetCell)\n })\n );\n\n return [...defaultMenuItems, ...fieldSpecificMenuItems];\n};\n\nconst shouldOverrideContextMenu = (\n targetCell: HTMLElement,\n columns: RsCoreTypes.Column[] = []\n): boolean => {\n const { colId } = targetCell.dataset;\n\n const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) \|\| {};\n return !(!field \|\| field?.noContextMenu);\n};\n\nexport default function ContextMenuContainer({\n view,\n selector\n}: {\n view: RsCoreTypes.View;\n selector: { query: string };\n}) {\n const { columns = [], data = [], state: { paginationOptions } = {}, domContainer } = view;\n\n const [translate] = useTranslate();\n const [menuContext, setMenuContext] = useState<MenuContext>(null);\n const [showMenu, setShowMenu] = useState(false);\n const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]);\n const [popperRef, setPopperRef] = useElement();\n const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n setShowMenu(false);\n });\n\n useScrollAway(popperRef, scrollerElem, () => {\n setShowMenu(false);\n });\n\n useEffect(() => {\n if (!showMenu) {\n const targetCell = menuContext?.targetCell;\n if (targetCell) {\n targetCell.removeAttribute('data-context-menu-active');\n targetCell.removeAttribute('aria-expanded');\n targetCell.removeAttribute('aria-controls');\n }\n setMenuContext(null);\n }\n }, [showMenu]);\n\n const openContextMenu = useCallback(\n (targetElement: HTMLElement, eventTarget: Element): boolean => {\n if (!shouldOverrideContextMenu(targetElement, columns) \|\| eventTarget.closest('a')) {\n return false;\n }\n\n const { colId } = targetElement.dataset;\n const column = columns.find(col => col.field.id.toString() === colId?.toString());\n if (!column) return true;\n\n targetElement.setAttribute('data-context-menu-active', 'true');\n targetElement.setAttribute('aria-expanded', 'true');\n const menuId = `rs-context-menu-${uuidV4()}`;\n targetElement.setAttribute('aria-controls', menuId);\n\n const rowContextData = getRowContextData(data, paginationOptions \|\| {}, targetElement);\n const options = getMenuItems(targetElement, column, rowContextData, view, translate);\n if (!options.length) return true;\n\n setShowMenu(true);\n setMenuItems(options);\n setMenuContext({\n column,\n targetCell: targetElement,\n rowContextData,\n menuId\n });\n\n return true;\n },\n [columns, data, paginationOptions, translate, view]\n );\n\n const contextMenuListener = useCallback(\n (e: MouseEvent) => {\n const target = e.target;\n if (!isInstance(target, Element)) return;\n\n const targetElement = target.closest(selector.query.toString());\n if (!isInstance(targetElement, HTMLElement)) return;\n\n if (openContextMenu(targetElement, target)) {\n e.stopPropagation();\n e.preventDefault();\n }\n },\n [selector, openContextMenu]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setShowMenu(false);\n return;\n }\n\n if (!(e.key === 'F10' && e.shiftKey)) return;\n\n const activeElement = document.activeElement;\n if (!isInstance(activeElement, Element)) return;\n\n const targetElement = activeElement.closest(selector.query.toString());\n if (!isInstance(targetElement, HTMLElement)) return;\n\n if (openContextMenu(targetElement, activeElement)) {\n e.stopPropagation();\n e.preventDefault();\n }\n },\n [selector, openContextMenu]\n );\n\n useEffect(() => {\n const abortController = new AbortController();\n if (!domContainer) return;\n\n domContainer.addEventListener('contextmenu', contextMenuListener, {\n signal: abortController.signal\n });\n domContainer.addEventListener('keydown', onKeydown, {\n signal: abortController.signal\n });\n\n return () => {\n abortController.abort();\n };\n }, [domContainer, contextMenuListener, onKeydown]);\n\n return showMenu && menuContext ? (\n <Popover ref={setPopperRef} target={menuContext.targetCell}>\n <Menu\n id={menuContext.menuId}\n items={menuItems}\n onItemClick={(_, e) => {\n e.preventDefault();\n setShowMenu(false);\n }}\n focusControlEl={menuContext.targetCell}\n className='action-menu'\n data-testid={TestIdConstants.contextMenu}\n // TODO: remove this older test-id syntax after checking usage across the test suites\n data-test-id='action-menu'\n />\n </Popover>\n ) : null;\n}\n"]}

package/lib/Core/Views/Gallery/Components/GalleryCard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAA,MAAM,WAAW,oFAAsD,gBAAgB,~~6CA0BrF~~,CAAC;AAEH,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"GalleryCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAA,MAAM,WAAW,oFAAsD,gBAAgB,6CAyCrF,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/lib/Core/Views/Gallery/Components/GalleryCard.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { SelectionCardDisplay } from '@pega/cosmos-react-core';
 import { getCardData, getCardUIProps } from '../utils';
 import useRowActions from '../hooks/useRowActions';
 const GalleryCard = memo(({ headerColumn, row, meta, visibleColumns }) => {
-    const { label, image, fields, 'aria-label': ariaLabel } = getCardData({
+    const { label, image, footer, fields, 'aria-label': ariaLabel } = getCardData({
         row,
         visibleColumns,
         meta,
@@ -12,7 +12,18 @@ const GalleryCard = memo(({ headerColumn, row, meta, visibleColumns }) => {
     });
     const uiProps = getCardUIProps({ row });
     const fetchActionsCb = useRowActions({ row, meta });
-    return (_jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, image: image, fields: fields, actions: fetchActionsCb, ...uiProps }));
+    const { onCardClick } = meta.galleryConfig ?? {};
+    const rowData = onCardClick ? row.getContext().getValue() : undefined;
+    return (_jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, image: image, fields: fields, actions: fetchActionsCb, ...uiProps, footer: footer, ...(onCardClick &&
+            rowData && {
+            onClick: () => onCardClick(rowData),
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onCardClick(rowData);
+                }
+            }
+        }) }));
 });
 export default GalleryCard;
 //# sourceMappingURL=GalleryCard.js.map

package/lib/Core/Views/Gallery/Components/GalleryCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;~~AAE7B~~,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAEnD,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAAoB,EAAE,EAAE;IACzF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;~~IAEpD~~,OAAO,CACL,KAAC,oBAAoB,kBACP,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,cAAc,KACnB,OAAO,~~GACX~~,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { memo } from 'react';\n\nimport { SelectionCardDisplay } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from '../Gallery.types';\nimport { getCardData, getCardUIProps } from '../utils';\nimport useRowActions from '../hooks/useRowActions';\n\nconst GalleryCard = memo(({ headerColumn, row, meta, visibleColumns }: GalleryCardProps) => {\n const {\n label,\n image,\n fields,\n 'aria-label': ariaLabel\n } = getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n });\n\n const uiProps = getCardUIProps({ row });\n const fetchActionsCb = useRowActions({ row, meta });\n\n return (\n <SelectionCardDisplay\n aria-label={ariaLabel}\n label={label}\n image={image}\n fields={fields}\n actions={fetchActionsCb}\n {...uiProps}\n />\n );\n});\n\nexport default GalleryCard;\n"]}
1	+ {"version":3,"file":"GalleryCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAEnD,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAAoB,EAAE,EAAE;IACzF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;IAEjD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtE,OAAO,CACL,KAAC,oBAAoB,kBACP,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,cAAc,KACnB,OAAO,EACX,MAAM,EAAE,MAAM,KACV,CAAC,WAAW;YACd,OAAO,IAAI;YACT,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;YACnC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,WAAW,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC;SACF,CAAC,GACJ,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { memo } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { SelectionCardDisplay } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from '../Gallery.types';\nimport { getCardData, getCardUIProps } from '../utils';\nimport useRowActions from '../hooks/useRowActions';\n\nconst GalleryCard = memo(({ headerColumn, row, meta, visibleColumns }: GalleryCardProps) => {\n const {\n label,\n image,\n footer,\n fields,\n 'aria-label': ariaLabel\n } = getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n });\n\n const uiProps = getCardUIProps({ row });\n const fetchActionsCb = useRowActions({ row, meta });\n const { onCardClick } = meta.galleryConfig ?? {};\n\n const rowData = onCardClick ? row.getContext().getValue() : undefined;\n\n return (\n <SelectionCardDisplay\n aria-label={ariaLabel}\n label={label}\n image={image}\n fields={fields}\n actions={fetchActionsCb}\n {...uiProps}\n footer={footer}\n {...(onCardClick &&\n rowData && {\n onClick: () => onCardClick(rowData),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onCardClick(rowData);\n }\n }\n })}\n />\n );\n});\n\nexport default GalleryCard;\n"]}

package/lib/Core/Views/Gallery/GalleryContainer.d.ts CHANGED Viewed

@@ -10,6 +10,10 @@ interface GalleryContainerProps {
         placement?: RsCoreTypes.HeroImagePlacement;
         size?: ImageSize;
     };
+    tile?: {
+        placement?: RsCoreTypes.HeroImagePlacement;
+        size?: ImageSize;
+    };
 }
 declare const GalleryContainer: import("react").ForwardRefExoticComponent<Omit<WithAttributes<"div", GalleryContainerProps>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default GalleryContainer;

package/lib/Core/Views/Gallery/GalleryContainer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAYzE,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC;QAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;CACH;AAwDD,QAAA,MAAM,gBAAgB,~~sJAkBrB~~,CAAC;AAIF,eAAe,gBAAgB,CAAC;AAEhC,QAAA,MAAM,yBAAyB,6NAG9B,CAAC;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
1	+ {"version":3,"file":"GalleryContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAYzE,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC;QAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC;QAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;CACH;AAwDD,QAAA,MAAM,gBAAgB,sJAmBrB,CAAC;AAIF,eAAe,gBAAgB,CAAC;AAEhC,QAAA,MAAM,yBAAyB,6NAG9B,CAAC;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/lib/Core/Views/Gallery/GalleryContainer.js CHANGED Viewed

@@ -41,9 +41,10 @@ const StyledInlineImageGalleryContainer = styled(StyledGalleryContainer)(({ them
   `;
 });
 StyledInlineImageGalleryContainer.defaultProps = defaultThemeProp;
-const GalleryContainer = forwardRef(({ image, ...props }, ref) => {
-    if (image) {
-        const { placement = DEFAULT_IMAGE_PLACEMENT, size = DEFAULT_IMAGE_SIZE } = image;
+const GalleryContainer = forwardRef(({ image, tile, ...props }, ref) => {
+    const layoutSource = image ?? tile;
+    if (layoutSource) {
+        const { placement = DEFAULT_IMAGE_PLACEMENT, size = DEFAULT_IMAGE_SIZE } = layoutSource;
         if (isInlinePlacement(placement)) {
             return (_jsx(StyledInlineImageGalleryContainer, { ref: ref, imageSize: size, imagePlacement: placement, ...props }));
         }

package/lib/Core/Views/Gallery/GalleryContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,0BAA0B,EAC1B,iCAAiC,EACjC,YAAY,EACZ,mBAAmB,EACpB,MAAM,2EAA2E,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,mCAAmC,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjG,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,2BAA2B,EAC3B,iBAAiB,EAClB,MAAM,SAAS,CAAC;~~AAuBjB~~,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,OAAO,GAAG,CAAA;QACN,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;;;;UAM5C,0BAA0B,CAAC,KAAK,CAAC;;UAEjC,mBAAmB,IAAI,YAAY;;;;KAIxC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,iCAAiC,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAEtE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IACzC,OAAO,GAAG,CAAA;;;;;;QAMJ,iCAAiC,CAAC,KAAK,EAAE;QACzC,SAAS,EAAE,2BAA2B,CAAC,cAAc,CAAC;QACtD,IAAI,EAAE,SAAS;KAChB,CAAC;;QAEA,mBAAmB,IAAI,YAAY;;;;GAIxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iCAAiC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElE,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;~~IAC3B~~,~~IAAI~~,KAAK,EAAE,CAAC;~~QACV~~,MAAM,EAAE,SAAS,GAAG,uBAAuB,EAAE,IAAI,GAAG,kBAAkB,EAAE,GAAG,~~KAAK~~,CAAC;~~QACjF~~,IAAI,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC;YACjC,OAAO,CACL,KAAC,iCAAiC,IAChC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,EACf,cAAc,EAAE,SAAS,KACrB,KAAK,GACT,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACzD,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,eAAe,gBAAgB,CAAC;AAEhC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;IACxC,mCAAmC;;CAEtC,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n getBaseCardContainerStyles,\n getInlineImageCardContainerStyles,\n StyledHeader,\n StyledSelectionCard\n} from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImageSize, WithAttributes } from '@pega/cosmos-react-core';\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport {\n DEFAULT_IMAGE_PLACEMENT,\n DEFAULT_IMAGE_SIZE,\n GALLERY_IMAGE_PLACEMENT_MAP,\n isInlinePlacement\n} from './utils';\n\ninterface GalleryContainerProps {\n children?: ReactNode;\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n className?: string;\n image?: {\n placement?: RsCoreTypes.HeroImagePlacement;\n size?: ImageSize;\n };\n}\n\ninterface StyledGalleryContainerProps {\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n}\n\ninterface StyledInlineImageGalleryContainerProps extends StyledGalleryContainerProps {\n imagePlacement: Extract<RsCoreTypes.HeroImagePlacement, 'left' \| 'right'>;\n imageSize: ImageSize;\n}\n\nconst StyledGalleryContainer = styled.div<StyledGalleryContainerProps>(\n ({ view, isFullscreen, theme }) => {\n return css`\n ${generateRSHeightStyles({ view, isFullscreen })}\n\n .grid-container {\n position: absolute;\n width: 100%;\n padding: 0.2rem;\n ${getBaseCardContainerStyles(theme)}\n\n ${StyledSelectionCard} ${StyledHeader} {\n min-height: auto;\n }\n }\n `;\n }\n);\n\nStyledGalleryContainer.defaultProps = defaultThemeProp;\n\nconst StyledInlineImageGalleryContainer = styled(StyledGalleryContainer)<\n Pick<StyledInlineImageGalleryContainerProps, 'imageSize' \| 'imagePlacement'>\n>(({ theme, imageSize, imagePlacement }) => {\n return css`\n *:has(> .grid-container) {\n container-type: inline-size;\n }\n\n .grid-container {\n ${getInlineImageCardContainerStyles(theme, {\n placement: GALLERY_IMAGE_PLACEMENT_MAP[imagePlacement],\n size: imageSize\n })}\n\n ${StyledSelectionCard} ${StyledHeader} {\n min-height: auto;\n }\n }\n `;\n});\n\nStyledInlineImageGalleryContainer.defaultProps = defaultThemeProp;\n\nconst GalleryContainer = forwardRef<HTMLDivElement, WithAttributes<'div', GalleryContainerProps>>(\n ({ image, ...props }, ref) => {\n if (~~image~~) {\n const { placement = DEFAULT_IMAGE_PLACEMENT, size = DEFAULT_IMAGE_SIZE } = ~~image~~;\n if (isInlinePlacement(placement)) {\n return (\n <StyledInlineImageGalleryContainer\n ref={ref}\n imageSize={size}\n imagePlacement={placement}\n {...props}\n />\n );\n }\n }\n\n return <StyledGalleryContainer ref={ref} {...props} />;\n }\n);\n\nGalleryContainer.displayName = 'GalleryContainer';\n\nexport default GalleryContainer;\n\nconst StyledVirtualizeContainer = styled.div`\n ${generateRSDataContainerHeightStyles};\n position: relative;\n`;\n\nStyledVirtualizeContainer.defaultProps = defaultThemeProp;\nexport { StyledVirtualizeContainer };\n"]}
1	+ {"version":3,"file":"GalleryContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,0BAA0B,EAC1B,iCAAiC,EACjC,YAAY,EACZ,mBAAmB,EACpB,MAAM,2EAA2E,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,mCAAmC,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjG,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,2BAA2B,EAC3B,iBAAiB,EAClB,MAAM,SAAS,CAAC;AA2BjB,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,OAAO,GAAG,CAAA;QACN,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;;;;UAM5C,0BAA0B,CAAC,KAAK,CAAC;;UAEjC,mBAAmB,IAAI,YAAY;;;;KAIxC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,iCAAiC,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAEtE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IACzC,OAAO,GAAG,CAAA;;;;;;QAMJ,iCAAiC,CAAC,KAAK,EAAE;QACzC,SAAS,EAAE,2BAA2B,CAAC,cAAc,CAAC;QACtD,IAAI,EAAE,SAAS;KAChB,CAAC;;QAEA,mBAAmB,IAAI,YAAY;;;;GAIxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iCAAiC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElE,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,YAAY,GAAG,KAAK,IAAI,IAAI,CAAC;IACnC,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,EAAE,SAAS,GAAG,uBAAuB,EAAE,IAAI,GAAG,kBAAkB,EAAE,GAAG,YAAY,CAAC;QACxF,IAAI,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC;YACjC,OAAO,CACL,KAAC,iCAAiC,IAChC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,EACf,cAAc,EAAE,SAAS,KACrB,KAAK,GACT,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACzD,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,eAAe,gBAAgB,CAAC;AAEhC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;IACxC,mCAAmC;;CAEtC,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n getBaseCardContainerStyles,\n getInlineImageCardContainerStyles,\n StyledHeader,\n StyledSelectionCard\n} from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImageSize, WithAttributes } from '@pega/cosmos-react-core';\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport {\n DEFAULT_IMAGE_PLACEMENT,\n DEFAULT_IMAGE_SIZE,\n GALLERY_IMAGE_PLACEMENT_MAP,\n isInlinePlacement\n} from './utils';\n\ninterface GalleryContainerProps {\n children?: ReactNode;\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n className?: string;\n image?: {\n placement?: RsCoreTypes.HeroImagePlacement;\n size?: ImageSize;\n };\n tile?: {\n placement?: RsCoreTypes.HeroImagePlacement;\n size?: ImageSize;\n };\n}\n\ninterface StyledGalleryContainerProps {\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n}\n\ninterface StyledInlineImageGalleryContainerProps extends StyledGalleryContainerProps {\n imagePlacement: Extract<RsCoreTypes.HeroImagePlacement, 'left' \| 'right'>;\n imageSize: ImageSize;\n}\n\nconst StyledGalleryContainer = styled.div<StyledGalleryContainerProps>(\n ({ view, isFullscreen, theme }) => {\n return css`\n ${generateRSHeightStyles({ view, isFullscreen })}\n\n .grid-container {\n position: absolute;\n width: 100%;\n padding: 0.2rem;\n ${getBaseCardContainerStyles(theme)}\n\n ${StyledSelectionCard} ${StyledHeader} {\n min-height: auto;\n }\n }\n `;\n }\n);\n\nStyledGalleryContainer.defaultProps = defaultThemeProp;\n\nconst StyledInlineImageGalleryContainer = styled(StyledGalleryContainer)<\n Pick<StyledInlineImageGalleryContainerProps, 'imageSize' \| 'imagePlacement'>\n>(({ theme, imageSize, imagePlacement }) => {\n return css`\n *:has(> .grid-container) {\n container-type: inline-size;\n }\n\n .grid-container {\n ${getInlineImageCardContainerStyles(theme, {\n placement: GALLERY_IMAGE_PLACEMENT_MAP[imagePlacement],\n size: imageSize\n })}\n\n ${StyledSelectionCard} ${StyledHeader} {\n min-height: auto;\n }\n }\n `;\n});\n\nStyledInlineImageGalleryContainer.defaultProps = defaultThemeProp;\n\nconst GalleryContainer = forwardRef<HTMLDivElement, WithAttributes<'div', GalleryContainerProps>>(\n ({ image, tile, ...props }, ref) => {\n const layoutSource = image ?? tile;\n if (layoutSource) {\n const { placement = DEFAULT_IMAGE_PLACEMENT, size = DEFAULT_IMAGE_SIZE } = layoutSource;\n if (isInlinePlacement(placement)) {\n return (\n <StyledInlineImageGalleryContainer\n ref={ref}\n imageSize={size}\n imagePlacement={placement}\n {...props}\n />\n );\n }\n }\n\n return <StyledGalleryContainer ref={ref} {...props} />;\n }\n);\n\nGalleryContainer.displayName = 'GalleryContainer';\n\nexport default GalleryContainer;\n\nconst StyledVirtualizeContainer = styled.div`\n ${generateRSDataContainerHeightStyles};\n position: relative;\n`;\n\nStyledVirtualizeContainer.defaultProps = defaultThemeProp;\nexport { StyledVirtualizeContainer };\n"]}

package/lib/Core/Views/Gallery/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAgB7E,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,~~2CAuEpD~~;~~kBAvEQ~~,OAAO;;;~~AA2EhB~~,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAgB7E,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CAwEpD;kBAxEQ,OAAO;;;AA4EhB,eAAe,OAAO,CAAC"}

package/lib/Core/Views/Gallery/index.js CHANGED Viewed

@@ -16,7 +16,7 @@ import GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer'
 function Gallery({ view }) {
     const isFullscreen = !!useFullscreenContext()?.[0];
     const { columns = [], meta, rows } = view;
-    const { galleryConfig: { heroImage, header } = {}, selectionMode } = meta;
+    const { galleryConfig: { heroImage, tile: tileConfig, header } = {}, selectionMode } = meta;
     const headerColumn = useMemo(() => (header?.field ? columns.find(col => col.field.id === header.field) : undefined), [header, columns]);
     const selectionColumn = useMemo(() => columns.find(col => col.field.id === rowSelectColumnMeta.field.id), [columns]);
     const visibleColumns = useMemo(() => {
@@ -24,7 +24,7 @@ function Gallery({ view }) {
         cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));
         return cols;
     }, [columns]);
-    return (_jsx(RsCardWrapper, { children: _jsxs(GalleryContainer, { "data-test-id": 'gallery', "data-testid": 'gallery', view: view, isFullscreen: isFullscreen, image: heroImage, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container', view: view, bufferMultiplier: 0.8, children: rows?.length
+    return (_jsx(RsCardWrapper, { children: _jsxs(GalleryContainer, { "data-test-id": 'gallery', "data-testid": 'gallery', view: view, isFullscreen: isFullscreen, image: heroImage, tile: tileConfig, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container', view: view, bufferMultiplier: 0.8, children: rows?.length
                                 ? rows.map(row => selectionMode === SELECTION_MODES.multi && selectionColumn ? (_jsx(GalleryCheckboxCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn, selectionColumn: selectionColumn }, row.reactKey)) : (_jsx(GalleryCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn }, row.reactKey)))
                                 : [] }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
 }

package/lib/Core/Views/Gallery/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAoB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAE5F,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,gBAAgB,MAAM,mCAAmC,CAAC;AACjE,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAE3D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,gBAAgB,EAAE,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,SAAS,OAAO,CAAC,EAAE,IAAI,EAA8B;IACnD,MAAM,YAAY,GAAG,CAAC,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAEnD,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC1C,MAAM,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;~~IAE1E~~,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACtF,CAAC,MAAM,EAAE,OAAO,CAAC,CAClB,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC,EACxE,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,IAAI,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAC9B,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,iBAAiB,CACrE,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,KAAC,aAAa,cACZ,MAAC,gBAAgB,oBACF,SAAS,iBACV,SAAS,EACrB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,aAEhB,KAAC,aAAa,IAAC,eAAe,EAAE,IAAI,CAAC,eAAe,GAAI,EACxD,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,GAAI,EACvB,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAI,EAClD,MAAC,yBAAyB,IAAC,SAAS,EAAC,WAAW,aAC9C,KAAC,WAAW,IACV,EAAE,EAAC,iBAAiB,EACpB,iBAAiB,EAAC,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,GAAG,YAEpB,IAAI,EAAE,MAAM;gCACX,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CACb,aAAa,KAAK,eAAe,CAAC,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,CAC3D,KAAC,mBAAmB,IAElB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,IAL3B,GAAG,CAAC,QAAQ,CAMjB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAEV,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAJrB,GAAG,CAAC,QAAQ,CAKjB,CACH,CACF;gCACH,CAAC,CAAC,EAAE,GACM,EACd,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,IACvC,IACX,GACL,CACjB,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,eAAe,OAAO,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { useFullscreenContext } from '@pega/cosmos-react-core';\nimport { rowSelectColumnMeta } from 'pega-repeating-structures-core/lib/src/core/constants';\n\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport WarningBanner from '../../Components/WarningBanner';\n\nimport GalleryCard from './Components/GalleryCard';\nimport GalleryCheckboxCard from './Components/GalleryCheckboxCard';\nimport GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';\n\nfunction Gallery({ view }: { view: RsCoreTypes.View }) {\n const isFullscreen = !!useFullscreenContext()?.[0];\n\n const { columns = [], meta, rows } = view;\n const { galleryConfig: { heroImage, header } = {}, selectionMode } = meta;\n\n const headerColumn = useMemo(\n () => (header?.field ? columns.find(col => col.field.id === header.field) : undefined),\n [header, columns]\n );\n\n const selectionColumn = useMemo(\n () => columns.find(col => col.field.id === rowSelectColumnMeta.field.id),\n [columns]\n );\n\n const visibleColumns = useMemo(() => {\n const cols = [...columns].filter(\n col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE\n );\n cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));\n return cols;\n }, [columns]);\n\n return (\n <RsCardWrapper>\n <GalleryContainer\n data-test-id='gallery'\n data-testid='gallery'\n view={view}\n isFullscreen={isFullscreen}\n image={heroImage}\n >\n <WarningBanner warningMessages={view.warningMessages} />\n <Toolbar view={view} />\n <RenderView view={view} type={EXTERNAL_FILTERS} />\n <StyledVirtualizeContainer className='container'>\n <Virtualiser\n id='rootVirtualiser'\n rowContainerClass='grid-container'\n view={view}\n bufferMultiplier={0.8}\n >\n {rows?.length\n ? rows.map(row =>\n selectionMode === SELECTION_MODES.multi && selectionColumn ? (\n <GalleryCheckboxCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n selectionColumn={selectionColumn}\n />\n ) : (\n <GalleryCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n />\n )\n )\n : []}\n </Virtualiser>\n <LoadingIndicator view={view} show={!rows \|\| !!view.isLoading} />\n </StyledVirtualizeContainer>\n </GalleryContainer>\n </RsCardWrapper>\n );\n}\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\n\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { useFullscreenContext } from '@pega/cosmos-react-core';\nimport { rowSelectColumnMeta } from 'pega-repeating-structures-core/lib/src/core/constants';\n\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport WarningBanner from '../../Components/WarningBanner';\n\nimport GalleryCard from './Components/GalleryCard';\nimport GalleryCheckboxCard from './Components/GalleryCheckboxCard';\nimport GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';\n\nfunction Gallery({ view }: { view: RsCoreTypes.View }) {\n const isFullscreen = !!useFullscreenContext()?.[0];\n\n const { columns = [], meta, rows } = view;\n const { galleryConfig: { heroImage, tile: tileConfig, header } = {}, selectionMode } = meta;\n\n const headerColumn = useMemo(\n () => (header?.field ? columns.find(col => col.field.id === header.field) : undefined),\n [header, columns]\n );\n\n const selectionColumn = useMemo(\n () => columns.find(col => col.field.id === rowSelectColumnMeta.field.id),\n [columns]\n );\n\n const visibleColumns = useMemo(() => {\n const cols = [...columns].filter(\n col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE\n );\n cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));\n return cols;\n }, [columns]);\n\n return (\n <RsCardWrapper>\n <GalleryContainer\n data-test-id='gallery'\n data-testid='gallery'\n view={view}\n isFullscreen={isFullscreen}\n image={heroImage}\n tile={tileConfig}\n >\n <WarningBanner warningMessages={view.warningMessages} />\n <Toolbar view={view} />\n <RenderView view={view} type={EXTERNAL_FILTERS} />\n <StyledVirtualizeContainer className='container'>\n <Virtualiser\n id='rootVirtualiser'\n rowContainerClass='grid-container'\n view={view}\n bufferMultiplier={0.8}\n >\n {rows?.length\n ? rows.map(row =>\n selectionMode === SELECTION_MODES.multi && selectionColumn ? (\n <GalleryCheckboxCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n selectionColumn={selectionColumn}\n />\n ) : (\n <GalleryCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n />\n )\n )\n : []}\n </Virtualiser>\n <LoadingIndicator view={view} show={!rows \|\| !!view.isLoading} />\n </StyledVirtualizeContainer>\n </GalleryContainer>\n </RsCardWrapper>\n );\n}\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"]}

package/lib/Core/Views/Gallery/utils.d.ts CHANGED Viewed

@@ -18,9 +18,9 @@ export declare const isInlinePlacement: (placement: RsCoreTypes.HeroImagePlaceme
  * @param props.meta - Metadata including gallery configuration.
  * @param props.headerColumn - The column used for the card header.
  * @param props.actionColumn - The column used for card actions.
- * @returns An object containing the card's label, image, and fields to be displayed.
+ * @returns An object containing the card's label, image, footer, and fields to be displayed.
  */
-export declare function getCardData({ row, visibleColumns, meta, headerColumn }: GalleryCardProps): Pick<SelectionCardDisplayProps, 'label' | 'image' | 'fields' | 'aria-label'>;
+export declare function getCardData({ row, visibleColumns, meta, headerColumn }: GalleryCardProps): Pick<SelectionCardDisplayProps, 'label' | 'image' | 'fields' | 'aria-label' | 'footer'>;
 /**
  * Extracts UI-related props from a row for card components.
  *

package/lib/Core/Views/Gallery/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAkB,SAAS,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,eAAO,MAAM,2BAA2B;;;;CAImC,CAAC;AAG5E,eAAO,MAAM,uBAAuB,EAAE,WAAW,CAAC,kBAA2B,CAAC;AAC9E,eAAO,MAAM,kBAAkB,EAAE,SAAsB,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAC5B,WAAW,WAAW,CAAC,kBAAkB,KACxC,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAEvE,CAAC;AAuCF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,cAAc,EACd,IAAI,EACJ,YAAY,EACb,EAAE,gBAAgB,GAAG,IAAI,~~CAAC~~,yBAAyB,~~EAAE~~,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,~~CAAC~~,~~CAqBjG~~;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAA;CAAE;;;EAM/D"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAkB,SAAS,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,eAAO,MAAM,2BAA2B;;;;CAImC,CAAC;AAG5E,eAAO,MAAM,uBAAuB,EAAE,WAAW,CAAC,kBAA2B,CAAC;AAC9E,eAAO,MAAM,kBAAkB,EAAE,SAAsB,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAC5B,WAAW,WAAW,CAAC,kBAAkB,KACxC,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAEvE,CAAC;AAuCF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,cAAc,EACd,IAAI,EACJ,YAAY,EACb,EAAE,gBAAgB,GAAG,IAAI,CACxB,yBAAyB,EACzB,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CACvD,CAgEA;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAA;CAAE;;;EAM/D"}

package/lib/Core/Views/Gallery/utils.js CHANGED Viewed

@@ -48,23 +48,56 @@ function getImageData(meta, row) {
  * @param props.meta - Metadata including gallery configuration.
  * @param props.headerColumn - The column used for the card header.
  * @param props.actionColumn - The column used for card actions.
- * @returns An object containing the card's label, image, and fields to be displayed.
+ * @returns An object containing the card's label, image, footer, and fields to be displayed.
  */
 export function getCardData({ row, visibleColumns, meta, headerColumn }) {
-    const { galleryConfig: { heroImage, showFieldLabels = true } = {} } = meta;
+    const { galleryConfig: { heroImage, tile: tileConfig, showFieldLabels = true } = {} } = meta;
     // Must set execution context for each column to ensure correct value retrieval
     visibleColumns.forEach(col => col.setExecutionContext(row));
+    const rowData = row.getContext().getValue();
     const fields = visibleColumns.map(col => ({
         id: col.field.id,
-        value: _jsx(GalleryFieldValue, { column: col, row: row }),
         ...(showFieldLabels && { name: col.getContext()?.getLabel() }),
-        ...(col.field.layoutMode && { variant: col.field.layoutMode })
+        ...(col.field.layoutMode && { variant: col.field.layoutMode }),
+        // TODO: Add truncation for non-tile cards once `truncate` is typed at
+        // the field-level API.
+        ...(!heroImage && tileConfig
+            ? { value: String(rowData[col.field.id] ?? ''), truncate: true }
+            : { value: _jsx(GalleryFieldValue, { column: col, row: row }) })
     }));
-    const image = heroImage ? getImageData(meta, row) : undefined;
+    const heroImageData = heroImage ? getImageData(meta, row) : undefined;
+    let image = heroImageData;
+    if (!heroImage && tileConfig) {
+        const foregroundColor = tileConfig.foregroundColor.field in rowData
+            ? String(rowData[tileConfig.foregroundColor.field])
+            : undefined;
+        const backgroundColor = tileConfig.backgroundColor.field in rowData
+            ? String(rowData[tileConfig.backgroundColor.field])
+            : undefined;
+        if (foregroundColor && backgroundColor) {
+            const tileName = tileConfig.iconName && tileConfig.iconName.field in rowData
+                ? String(rowData[tileConfig.iconName.field]) || undefined
+                : undefined;
+            const tileText = tileConfig.text && tileConfig.text.field in rowData
+                ? String(rowData[tileConfig.text.field]) || undefined
+                : undefined;
+            const tileBase = {
+                foregroundColor,
+                backgroundColor
+            };
+            if (tileName) {
+                image = { ...tileBase, icon: tileName };
+            }
+            else if (tileText) {
+                image = { ...tileBase, text: tileText };
+            }
+        }
+    }
+    const footer = meta.galleryConfig?.renderCardFooter?.(rowData) ?? null;
     const label = _jsx(GalleryHeader, { headerColumn: headerColumn, row: row });
     const headerValue = row.getContext()?.getRowHeader()?.getValue();
     const ariaLabel = !isEmpty(headerValue) ? String(headerValue) : undefined;
-    return { fields, image, label, 'aria-label': ariaLabel };
+    return { fields, image, footer, label, 'aria-label': ariaLabel };
 }
 /**
  * Extracts UI-related props from a row for card components.

package/lib/Core/Views/Gallery/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isEmpty, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImagePlacement, ImageSize, SelectionCardDisplayProps } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from './Gallery.types';\nimport GalleryFieldValue from './Components/GalleryFieldValue';\nimport GalleryHeader from './Components/GalleryHeader';\n\nexport const GALLERY_IMAGE_PLACEMENT_MAP = {\n left: 'inline-start',\n right: 'inline-end',\n top: 'block-start'\n} as const satisfies Record<RsCoreTypes.HeroImagePlacement, ImagePlacement>;\n\nconst INLINE_PLACEMENTS: RsCoreTypes.HeroImagePlacement[] = ['left', 'right'] as const;\nexport const DEFAULT_IMAGE_PLACEMENT: RsCoreTypes.HeroImagePlacement = 'left';\nexport const DEFAULT_IMAGE_SIZE: ImageSize = 'flexible';\n\nexport const isInlinePlacement = (\n placement: RsCoreTypes.HeroImagePlacement\n): placement is Extract<RsCoreTypes.HeroImagePlacement, 'left' \| 'right'> => {\n return INLINE_PLACEMENTS.includes(placement);\n};\n\n/*\n Extracts image data from the provided metadata and row context.\n \n @param meta - The metadata object containing gallery configuration.\n * @param row - The row object providing context and data values.\n * @returns An object containing:\n * - `src`: The image source URL.\n * - `alt`: The alternative text for the image.\n * - `placement`: The placement of the image within the gallery.\n * - `size`: The size of the image.\n /\nfunction getImageData(\n meta: RsCoreTypes.Meta,\n row: RsCoreTypes.Row\n): {\n src: string;\n alt: string;\n placement: ImagePlacement;\n size: ImageSize;\n} {\n const { galleryConfig: { heroImage: { source, altText, placement, size } = {} } = {} } = meta;\n const rowData = row.getContext().getValue();\n\n let altTextValue = '';\n if (altText && 'field' in altText) {\n altTextValue = altText.field in rowData ? String(rowData[altText.field]) : '';\n } else if (altText && 'value' in altText) {\n altTextValue = altText.value;\n }\n\n const imageUrl = source?.field && source?.field in rowData ? String(rowData[source.field]) : '';\n const imagePlacement = GALLERY_IMAGE_PLACEMENT_MAP[placement ?? DEFAULT_IMAGE_PLACEMENT];\n const imageSize = size \|\| DEFAULT_IMAGE_SIZE;\n\n return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };\n}\n\n/\n Generates the data required to display a card in the gallery view.\n \n @param props - The properties required to generate the card data.\n * @param props.row - The data for the current row.\n * @param props.visibleColumns - The columns that are visible in the gallery.\n * @param props.meta - Metadata including gallery configuration.\n * @param props.headerColumn - The column used for the card header.\n * @param props.actionColumn - The column used for card actions.\n * @returns An object containing the card's label, image, and fields to be displayed.\n /\nexport function getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n}: GalleryCardProps): Pick<SelectionCardDisplayProps, 'label' \| 'image' \| 'fields' \| 'aria-label'> {\n const { galleryConfig: { heroImage, showFieldLabels = true } = {} } = meta;\n\n // Must set execution context for each column to ensure correct value retrieval\n visibleColumns.forEach(col => col.setExecutionContext(row));\n\n const fields = visibleColumns.map(col => ({\n id: col.field.id,\n value: <GalleryFieldValue column={col} row={row} />,\n ...(showFieldLabels && { name: col.getContext()?.getLabel() }),\n ...(col.field.layoutMode && { variant: col.field.layoutMode })\n }));\n\n const image = heroImage ? getImageData(meta, row) : undefined;\n\n const label = <GalleryHeader headerColumn={headerColumn} row={row} />;\n\n const headerValue = row.getContext()?.getRowHeader()?.getValue();\n const ariaLabel = !isEmpty(headerValue) ? String(headerValue) : undefined;\n\n return { fields, image, label, 'aria-label': ariaLabel };\n}\n\n/\n Extracts UI-related props from a row for card components.\n \n @param props - The properties containing the row.\n * @param props.row - The data row.\n * @returns An object containing aria-rowindex and data-key for the card.\n */\nexport function getCardUIProps({ row }: { row: RsCoreTypes.Row }) {\n const uiProps = row.getUIProps();\n return {\n 'aria-rowindex': uiProps['aria-rowindex'],\n 'data-key': uiProps['data-key']\n };\n}\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isEmpty, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImagePlacement, ImageSize, SelectionCardDisplayProps } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from './Gallery.types';\nimport GalleryFieldValue from './Components/GalleryFieldValue';\nimport GalleryHeader from './Components/GalleryHeader';\n\nexport const GALLERY_IMAGE_PLACEMENT_MAP = {\n left: 'inline-start',\n right: 'inline-end',\n top: 'block-start'\n} as const satisfies Record<RsCoreTypes.HeroImagePlacement, ImagePlacement>;\n\nconst INLINE_PLACEMENTS: RsCoreTypes.HeroImagePlacement[] = ['left', 'right'] as const;\nexport const DEFAULT_IMAGE_PLACEMENT: RsCoreTypes.HeroImagePlacement = 'left';\nexport const DEFAULT_IMAGE_SIZE: ImageSize = 'flexible';\n\nexport const isInlinePlacement = (\n placement: RsCoreTypes.HeroImagePlacement\n): placement is Extract<RsCoreTypes.HeroImagePlacement, 'left' \| 'right'> => {\n return INLINE_PLACEMENTS.includes(placement);\n};\n\n/*\n Extracts image data from the provided metadata and row context.\n \n @param meta - The metadata object containing gallery configuration.\n * @param row - The row object providing context and data values.\n * @returns An object containing:\n * - `src`: The image source URL.\n * - `alt`: The alternative text for the image.\n * - `placement`: The placement of the image within the gallery.\n * - `size`: The size of the image.\n /\nfunction getImageData(\n meta: RsCoreTypes.Meta,\n row: RsCoreTypes.Row\n): {\n src: string;\n alt: string;\n placement: ImagePlacement;\n size: ImageSize;\n} {\n const { galleryConfig: { heroImage: { source, altText, placement, size } = {} } = {} } = meta;\n const rowData = row.getContext().getValue();\n\n let altTextValue = '';\n if (altText && 'field' in altText) {\n altTextValue = altText.field in rowData ? String(rowData[altText.field]) : '';\n } else if (altText && 'value' in altText) {\n altTextValue = altText.value;\n }\n\n const imageUrl = source?.field && source?.field in rowData ? String(rowData[source.field]) : '';\n const imagePlacement = GALLERY_IMAGE_PLACEMENT_MAP[placement ?? DEFAULT_IMAGE_PLACEMENT];\n const imageSize = size \|\| DEFAULT_IMAGE_SIZE;\n\n return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };\n}\n\n/\n Generates the data required to display a card in the gallery view.\n \n @param props - The properties required to generate the card data.\n * @param props.row - The data for the current row.\n * @param props.visibleColumns - The columns that are visible in the gallery.\n * @param props.meta - Metadata including gallery configuration.\n * @param props.headerColumn - The column used for the card header.\n * @param props.actionColumn - The column used for card actions.\n * @returns An object containing the card's label, image, footer, and fields to be displayed.\n /\nexport function getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n}: GalleryCardProps): Pick<\n SelectionCardDisplayProps,\n 'label' \| 'image' \| 'fields' \| 'aria-label' \| 'footer'\n> {\n const { galleryConfig: { heroImage, tile: tileConfig, showFieldLabels = true } = {} } = meta;\n\n // Must set execution context for each column to ensure correct value retrieval\n visibleColumns.forEach(col => col.setExecutionContext(row));\n\n const rowData = row.getContext().getValue();\n\n const fields = visibleColumns.map(col => ({\n id: col.field.id,\n ...(showFieldLabels && { name: col.getContext()?.getLabel() }),\n ...(col.field.layoutMode && { variant: col.field.layoutMode }),\n // TODO: Add truncation for non-tile cards once `truncate` is typed at\n // the field-level API.\n ...(!heroImage && tileConfig\n ? { value: String(rowData[col.field.id] ?? ''), truncate: true }\n : { value: <GalleryFieldValue column={col} row={row} /> })\n }));\n\n const heroImageData = heroImage ? getImageData(meta, row) : undefined;\n\n let image: SelectionCardDisplayProps['image'] = heroImageData;\n\n if (!heroImage && tileConfig) {\n const foregroundColor =\n tileConfig.foregroundColor.field in rowData\n ? String(rowData[tileConfig.foregroundColor.field])\n : undefined;\n const backgroundColor =\n tileConfig.backgroundColor.field in rowData\n ? String(rowData[tileConfig.backgroundColor.field])\n : undefined;\n\n if (foregroundColor && backgroundColor) {\n const tileName =\n tileConfig.iconName && tileConfig.iconName.field in rowData\n ? String(rowData[tileConfig.iconName.field]) \|\| undefined\n : undefined;\n const tileText =\n tileConfig.text && tileConfig.text.field in rowData\n ? String(rowData[tileConfig.text.field]) \|\| undefined\n : undefined;\n\n const tileBase = {\n foregroundColor,\n backgroundColor\n };\n\n if (tileName) {\n image = { ...tileBase, icon: tileName };\n } else if (tileText) {\n image = { ...tileBase, text: tileText };\n }\n }\n }\n\n const footer = meta.galleryConfig?.renderCardFooter?.(rowData) ?? null;\n\n const label = <GalleryHeader headerColumn={headerColumn} row={row} />;\n\n const headerValue = row.getContext()?.getRowHeader()?.getValue();\n const ariaLabel = !isEmpty(headerValue) ? String(headerValue) : undefined;\n\n return { fields, image, footer, label, 'aria-label': ariaLabel };\n}\n\n/\n Extracts UI-related props from a row for card components.\n \n @param props - The properties containing the row.\n * @param props.row - The data row.\n * @returns An object containing aria-rowindex and data-key for the card.\n */\nexport function getCardUIProps({ row }: { row: RsCoreTypes.Row }) {\n const uiProps = row.getUIProps();\n return {\n 'aria-rowindex': uiProps['aria-rowindex'],\n 'data-key': uiProps['data-key']\n };\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/lists-react",
-  "version": "9.0.0-build.23.2",
+  "version": "9.0.0-build.23.4",
   "description": "Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
@@ -14,9 +14,9 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "9.0.0-build.23.2",
-    "@pega/cosmos-react-core": "9.0.0-build.23.2",
-    "@pega/cosmos-react-rte": "9.0.0-build.23.2",
+    "@pega/cosmos-react-condition-builder": "9.0.0-build.23.4",
+    "@pega/cosmos-react-core": "9.0.0-build.23.4",
+    "@pega/cosmos-react-rte": "9.0.0-build.23.4",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
@@ -24,8 +24,8 @@
     "dayjs": "^1.11.13",
     "fast-deep-equal": "^3.1.3",
     "lodash-es": "^4.17.23",
-    "pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.23.2",
-    "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.23.2",
+    "pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.23.4",
+    "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.23.4",
     "polished": "^4.1.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.0 || ^18.0.0",
@@ -44,7 +44,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",
     "jest-axe": "^8.0.0",
-    "srs-utils": "9.0.0-build.23.2",
+    "srs-utils": "9.0.0-build.23.4",
     "typescript": "~5.9.3"
   }
 }