@pega/lists-react 9.0.0-build.9.8 → 9.0.0

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

@@ -1,76 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
-import { useCallback, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { useFullscreenContext } from '@pega/cosmos-react-core';
-import LoadingIndicator from '../../Components/LoadingIndicator';
-import GalleryFooter from '../../Components/Footer';
+import { useEffect, useMemo, useRef } from 'react';
+import { FieldType } from 'pega-repeating-structures-core';
+import { useLiveLog, useFullscreenContext } from '@pega/cosmos-react-core';
+import { rowSelectColumnMeta } from 'pega-repeating-structures-core';
+import useTranslate from '../../Hooks/useTranslate';
 import Virtualiser from '../Table/VirtualizeWrapper';
 import Toolbar from '../../Components/Toolbar';
 import RenderView from '../../Components/RenderingEngine/RenderView';
-import { EXTERNAL_FILTERS } from '../../constants';
-import { resolveViewComponent } from '../../Components/RenderingEngine/ComponentResolverFactory';
-import RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';
-import useTranslate from '../../Hooks/useTranslate';
+import { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';
 import RsCardWrapper from '../RsCardWrapper';
-import { generateRSDataContainerHeightStyles } from '../../Utils/styles';
-import EmptyContainer from '../../Components/DefaultComponents/EmptyContainer';
-import { isFilterApplied } from '../../Utils';
-import StyledGalleryContainer from './StyledGalleryContainer';
-import ItemWrapper from './ItemWrapper';
+import LoadingIndicator from '../../Components/LoadingIndicator';
+import WarningBanner from '../../Components/WarningBanner';
+import GalleryCard from './Components/GalleryCard';
+import GalleryCheckboxCard from './Components/GalleryCheckboxCard';
+import GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';
 import GalleryA11y from './GalleryA11y';
-const StyledGVirtualizeContainer = styled.div `
-  ${() => generateRSDataContainerHeightStyles()};
-  position: relative;
-`;
 function Gallery({ view }) {
+    const layoutType = view.galleryLayout;
     const isFullscreen = !!useFullscreenContext()?.[0];
-    const { rows, columns = [], meta, renderFactory, getContext, state: { filterExpression, searchText, externalState } = {}, domContainer, hasNoRecords } = view;
-    const { cardHeader, secondaryText, externalFilters } = meta;
-    const headerColumn = columns.find(({ field }) => field.name === cardHeader?.name);
-    const secondaryTextColumn = columns.find(({ field }) => field.name === secondaryText?.name);
-    const filteredColumns = columns.filter(c => c.field.name !== 'RowActionMenu');
-    const rowActionMenuColumn = columns.find(c => c.field.name === 'RowActionMenu');
     const containerRef = useRef(null);
+    const { announceAssertive, announcePolite } = useLiveLog();
     const [translate] = useTranslate();
-    const a11yRef = useRef(new GalleryA11y({
-        topFocusRef: '.top',
-        bottomFocusRef: '.bottom',
-        focusElementSelector: '.tile',
-        parentElementSelector: '.grid-container'
-    }, 
-    // TODO: consider additional focusbales: input elements, checkbox, radios, etc...
-    [`button[aria-label^=${translate('Actions')}]`], {
-        TAB: 9,
-        LEFT: 37,
-        UP: 38,
-        RIGHT: 39,
-        DOWN: 40
-    }, null));
+    const a11yRef = useRef(null);
     useEffect(() => {
-        a11yRef.current.setContainer(containerRef.current);
+        if (containerRef.current) {
+            a11yRef.current = new GalleryA11y({
+                focusElementSelector: '[data-gallery-card]',
+                belowLoader: '.below-loader'
+            }, [], containerRef.current, announceAssertive, announcePolite, translate);
+        }
         return () => {
-            containerRef.current = null;
             a11yRef.current = null;
         };
-    }, [a11yRef, containerRef]);
-    const keyDownHandler = useCallback(e => {
-        a11yRef.current.a11yHandler(e);
-    }, [a11yRef]);
-    return (_jsx(RsCardWrapper, { children: _jsxs(StyledGalleryContainer, { className: 'rv-gallery', "data-test-id": 'Gallery', view: view, isFullscreen: isFullscreen, children: [_jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsx(RepeatingStructureA11y, { view: view, a11yRef: a11yRef, children: _jsxs(StyledGVirtualizeContainer, { ref: containerRef, onKeyDown: keyDownHandler, className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container card-item-grid-container', view: view, children: rows &&
-                                    rows.map(row => (_jsx(ItemWrapper, { ...row.getUIProps(), children: resolveViewComponent('CardItemRenderer', renderFactory, {
-                                            row,
-                                            headerColumn,
-                                            secondaryTextColumn,
-                                            filteredColumns,
-                                            rowActionMenuColumn,
-                                            ...getContext()
-                                        }) }, row.reactKey))) }), _jsx(GalleryFooter, { view: view }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading }), domContainer && hasNoRecords && (_jsx(EmptyContainer, { message: isFilterApplied({ filterExpression, searchText, externalState }, externalFilters)
-                                    ? translate('No records found')
-                                    : translate('No records') }))] }) })] }) }));
+    }, [announceAssertive, announcePolite, translate]);
+    useEffect(() => {
+        a11yRef.current?.itemsLoadedCallback();
+    });
+    const isCardList = layoutType === 'cardlist';
+    const { columns = [], meta, rows } = view;
+    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(() => {
+        const cols = [...columns].filter(col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE);
+        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, isStackLayout: isCardList, tile: tileConfig, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { ref: containerRef, className: 'container', onFocusCapture: e => a11yRef.current?.onFocusHandler(e.nativeEvent), 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 })] })] }) }));
 }
-Gallery.propTypes = {
-    view: PropTypes.objectOf(PropTypes.any).isRequired
-};
+Gallery.displayName = 'Gallery';
 export default Gallery;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useRef, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { useFullscreenContext } from '@pega/cosmos-react-core';\n\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport GalleryFooter from '../../Components/Footer';\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS } from '../../constants';\nimport { resolveViewComponent } from '../../Components/RenderingEngine/ComponentResolverFactory';\nimport RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';\nimport useTranslate from '../../Hooks/useTranslate';\nimport RsCardWrapper from '../RsCardWrapper';\nimport { generateRSDataContainerHeightStyles } from '../../Utils/styles';\nimport EmptyContainer from '../../Components/DefaultComponents/EmptyContainer';\nimport { isFilterApplied } from '../../Utils';\n\nimport StyledGalleryContainer from './StyledGalleryContainer';\nimport ItemWrapper from './ItemWrapper';\nimport GalleryA11y from './GalleryA11y';\n\nconst StyledGVirtualizeContainer = styled.div`\n  ${() => generateRSDataContainerHeightStyles()};\n  position: relative;\n`;\n\nfunction Gallery({ view }) {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const {\n    rows,\n    columns = [],\n    meta,\n    renderFactory,\n    getContext,\n    state: { filterExpression, searchText, externalState } = {},\n    domContainer,\n    hasNoRecords\n  } = view;\n  const { cardHeader, secondaryText, externalFilters } = meta;\n  const headerColumn = columns.find(({ field }) => field.name === cardHeader?.name);\n  const secondaryTextColumn = columns.find(({ field }) => field.name === secondaryText?.name);\n  const filteredColumns = columns.filter(c => c.field.name !== 'RowActionMenu');\n  const rowActionMenuColumn = columns.find(c => c.field.name === 'RowActionMenu');\n  const containerRef = useRef(null);\n  const [translate] = useTranslate();\n  const a11yRef = useRef(\n    new GalleryA11y(\n      {\n        topFocusRef: '.top',\n        bottomFocusRef: '.bottom',\n        focusElementSelector: '.tile',\n        parentElementSelector: '.grid-container'\n      },\n      // TODO: consider additional focusbales: input elements, checkbox, radios, etc...\n      [`button[aria-label^=${translate('Actions')}]`],\n      {\n        TAB: 9,\n        LEFT: 37,\n        UP: 38,\n        RIGHT: 39,\n        DOWN: 40\n      },\n      null\n    )\n  );\n\n  useEffect(() => {\n    a11yRef.current.setContainer(containerRef.current);\n    return () => {\n      containerRef.current = null;\n      a11yRef.current = null;\n    };\n  }, [a11yRef, containerRef]);\n\n  const keyDownHandler = useCallback(\n    e => {\n      a11yRef.current.a11yHandler(e);\n    },\n    [a11yRef]\n  );\n\n  return (\n    <RsCardWrapper>\n      <StyledGalleryContainer\n        className='rv-gallery'\n        data-test-id='Gallery'\n        view={view}\n        isFullscreen={isFullscreen}\n      >\n        <Toolbar view={view} />\n        <RenderView view={view} type={EXTERNAL_FILTERS} />\n        <RepeatingStructureA11y view={view} a11yRef={a11yRef}>\n          <StyledGVirtualizeContainer\n            ref={containerRef}\n            onKeyDown={keyDownHandler}\n            className='container'\n          >\n            <Virtualiser\n              id='rootVirtualiser'\n              rowContainerClass='grid-container card-item-grid-container'\n              view={view}\n            >\n              {rows &&\n                rows.map(row => (\n                  <ItemWrapper key={row.reactKey} {...row.getUIProps()}>\n                    {resolveViewComponent('CardItemRenderer', renderFactory, {\n                      row,\n                      headerColumn,\n                      secondaryTextColumn,\n                      filteredColumns,\n                      rowActionMenuColumn,\n                      ...getContext()\n                    })}\n                  </ItemWrapper>\n                ))}\n            </Virtualiser>\n            <GalleryFooter view={view} />\n            <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n            {domContainer && hasNoRecords && (\n              <EmptyContainer\n                message={\n                  isFilterApplied({ filterExpression, searchText, externalState }, externalFilters)\n                    ? translate('No records found')\n                    : translate('No records')\n                }\n              />\n            )}\n          </StyledGVirtualizeContainer>\n        </RepeatingStructureA11y>\n      </StyledGalleryContainer>\n    </RsCardWrapper>\n  );\n}\n\nGallery.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default Gallery;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\n\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { useLiveLog, useFullscreenContext } from '@pega/cosmos-react-core';\nimport { rowSelectColumnMeta } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\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';\nimport GalleryA11y from './GalleryA11y';\n\nfunction Gallery({ view }: { view: RsCoreTypes.View }) {\n  const layoutType = view.galleryLayout;\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { announceAssertive, announcePolite } = useLiveLog();\n  const [translate] = useTranslate();\n  const a11yRef = useRef<GalleryA11y | null>(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      a11yRef.current = new GalleryA11y(\n        {\n          focusElementSelector: '[data-gallery-card]',\n          belowLoader: '.below-loader'\n        },\n        [],\n        containerRef.current,\n        announceAssertive,\n        announcePolite,\n        translate\n      );\n    }\n    return () => {\n      a11yRef.current = null;\n    };\n  }, [announceAssertive, announcePolite, translate]);\n\n  useEffect(() => {\n    a11yRef.current?.itemsLoadedCallback();\n  });\n  const isCardList = layoutType === 'cardlist';\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        isStackLayout={isCardList}\n        tile={tileConfig}\n      >\n        <WarningBanner warningMessages={view.warningMessages} />\n        <Toolbar view={view} />\n        <RenderView view={view} type={EXTERNAL_FILTERS} />\n        <StyledVirtualizeContainer\n          ref={containerRef}\n          className='container'\n          onFocusCapture={e => a11yRef.current?.onFocusHandler(e.nativeEvent)}\n        >\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

@@ -0,0 +1,36 @@
+import { type RsCoreTypes } from 'pega-repeating-structures-core';
+import type { ImageSize, SelectionCardDisplayProps } from '@pega/cosmos-react-core';
+import type { GalleryCardProps } from './Gallery.types';
+export declare const GALLERY_IMAGE_PLACEMENT_MAP: {
+    readonly left: "inline-start";
+    readonly right: "inline-end";
+    readonly top: "block-start";
+};
+export declare const DEFAULT_IMAGE_PLACEMENT: RsCoreTypes.HeroImagePlacement;
+export declare const DEFAULT_IMAGE_SIZE: ImageSize;
+export declare const isInlinePlacement: (placement: RsCoreTypes.HeroImagePlacement) => placement is Extract<RsCoreTypes.HeroImagePlacement, "left" | "right">;
+/**
+ * Generates the data required to display a card in the gallery view.
+ *
+ * @param props - The properties required to generate the card data.
+ * @param props.row - The data for the current row.
+ * @param props.visibleColumns - The columns that are visible in the gallery.
+ * @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, footer, and fields to be displayed.
+ */
+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.
+ *
+ * @param props - The properties containing the row.
+ * @param props.row - The data row.
+ * @returns An object containing card-safe row metadata.
+ */
+export declare function getCardUIProps({ row }: {
+    row: RsCoreTypes.Row;
+}): {
+    'data-key': string;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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;;EAK/D"}

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isEmpty } from 'pega-repeating-structures-core';
+import GalleryFieldValue from './Components/GalleryFieldValue';
+import GalleryHeader from './Components/GalleryHeader';
+export const GALLERY_IMAGE_PLACEMENT_MAP = {
+    left: 'inline-start',
+    right: 'inline-end',
+    top: 'block-start'
+};
+const INLINE_PLACEMENTS = ['left', 'right'];
+export const DEFAULT_IMAGE_PLACEMENT = 'left';
+export const DEFAULT_IMAGE_SIZE = 'flexible';
+export const isInlinePlacement = (placement) => {
+    return INLINE_PLACEMENTS.includes(placement);
+};
+/**
+ * Extracts image data from the provided metadata and row context.
+ *
+ * @param meta - The metadata object containing gallery configuration.
+ * @param row - The row object providing context and data values.
+ * @returns An object containing:
+ *   - `src`: The image source URL.
+ *   - `alt`: The alternative text for the image.
+ *   - `placement`: The placement of the image within the gallery.
+ *   - `size`: The size of the image.
+ */
+function getImageData(meta, row) {
+    const { galleryConfig: { heroImage: { source, altText, placement, size } = {} } = {} } = meta;
+    const rowData = row.getContext().getValue();
+    let altTextValue = '';
+    if (altText && 'field' in altText) {
+        altTextValue = altText.field in rowData ? String(rowData[altText.field]) : '';
+    }
+    else if (altText && 'value' in altText) {
+        altTextValue = altText.value;
+    }
+    const imageUrl = source?.field && source?.field in rowData ? String(rowData[source.field]) : '';
+    const imagePlacement = GALLERY_IMAGE_PLACEMENT_MAP[placement ?? DEFAULT_IMAGE_PLACEMENT];
+    const imageSize = size || DEFAULT_IMAGE_SIZE;
+    return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };
+}
+/**
+ * Generates the data required to display a card in the gallery view.
+ *
+ * @param props - The properties required to generate the card data.
+ * @param props.row - The data for the current row.
+ * @param props.visibleColumns - The columns that are visible in the gallery.
+ * @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, footer, and fields to be displayed.
+ */
+export function getCardData({ row, visibleColumns, meta, headerColumn }) {
+    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,
+        ...(showFieldLabels && { name: col.getContext()?.getLabel() }),
+        ...(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 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, footer, label, 'aria-label': ariaLabel };
+}
+/**
+ * Extracts UI-related props from a row for card components.
+ *
+ * @param props - The properties containing the row.
+ * @param props.row - The data row.
+ * @returns An object containing card-safe row metadata.
+ */
+export function getCardUIProps({ row }) {
+    const uiProps = row.getUIProps();
+    return {
+        'data-key': uiProps['data-key']
+    };
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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 card-safe row metadata.\n */\nexport function getCardUIProps({ row }: { row: RsCoreTypes.Row }) {\n  const uiProps = row.getUIProps();\n  return {\n    'data-key': uiProps['data-key']\n  };\n}\n"]}