@pega/lists-react 10.0.0-build.1.8 → 10.0.0-build.10.0

package/lib/Core/Utils/fetchRowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchRowActions.js","sourceRoot":"","sources":["../../../Core/Utils/fetchRowActions.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Action } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { RowAction, RowActionMeta } from 'pega-repeating-structures-core/lib/types/Meta.types';\n\ntype RowContext = ReturnType<RsCoreTypes.Row['getContext']>;\n\ninterface FetchRowActionsParams {\n  getExecutionContext?: () => RowContext | undefined;\n  meta: RsCoreTypes.Meta;\n  translate: (key: string) => string;\n}\n\ninterface ActionContext {\n  rowContext: RsCoreTypes.RowData;\n  refreshRow: () => void;\n  rowMeta: RowActionMeta;\n}\n\nexport interface HydratedRowAction extends Action {\n  primary: string;\n  onClick: () => void;\n}\n\nfunction hydrateActions(\n  actions: RowAction[],\n  getActionContext: () => ActionContext\n): HydratedRowAction[] {\n  return actions.map(action => ({\n    ...action,\n    primary: action.text,\n    onClick: () => {\n      const { rowContext, refreshRow, rowMeta } = getActionContext();\n      action.onClick(rowContext, refreshRow, rowMeta);\n    }\n  }));\n}\n\nfunction isVisibleInMenu(\n  actionConfig: RsCoreTypes.Meta['editing'] | RsCoreTypes.Meta['deleting'],\n  rowContext: RsCoreTypes.RowData\n): actionConfig is RsCoreTypes.ActionConfig {\n  return (\n    !!actionConfig &&\n    typeof actionConfig === 'object' &&\n    actionConfig.placement === 'menu' &&\n    actionConfig.isVisible?.(rowContext) === true &&\n    typeof actionConfig.onClick === 'function'\n  );\n}\n\nfunction getConfigActions(\n  meta: RsCoreTypes.Meta,\n  rowContext: RsCoreTypes.RowData,\n  translate: FetchRowActionsParams['translate']\n): RowAction[] {\n  const actions: RowAction[] = [];\n\n  if (isVisibleInMenu(meta.editing, rowContext)) {\n    actions.push({ text: translate('Edit'), id: 'edit', onClick: meta.editing.onClick });\n  }\n  if (isVisibleInMenu(meta.deleting, rowContext)) {\n    actions.push({ text: translate('Delete'), id: 'delete', onClick: meta.deleting.onClick });\n  }\n\n  return actions;\n}\n\n/** Fetches configured, dynamic, and static menu actions for a row. */\nexport default async function fetchRowActions({\n  getExecutionContext,\n  meta,\n  translate\n}: FetchRowActionsParams): Promise<HydratedRowAction[]> {\n  const executionContext = getExecutionContext?.();\n  if (!executionContext) return [];\n\n  const rowContext = executionContext.getValue();\n\n  const getLatestActionContext = (): ActionContext => {\n    const latestExecutionContext = getExecutionContext?.() ?? executionContext;\n    const latestRowContext = latestExecutionContext.getValue();\n\n    return {\n      rowContext: latestRowContext,\n      refreshRow: latestExecutionContext.refreshRow,\n      rowMeta: {\n        rowHeader: latestExecutionContext.getRowHeader?.()?.getValue(),\n        rowIndex: latestExecutionContext.getRowIndex?.() ?? -1\n      }\n    };\n  };\n\n  const configActions = hydrateActions(\n    getConfigActions(meta, rowContext, translate),\n    getLatestActionContext\n  );\n  const staticActions = hydrateActions(meta.rowActions ?? [], getLatestActionContext);\n\n  try {\n    const dynamicActions = await executionContext.getRowActionDetails(rowContext);\n\n    return [\n      ...configActions,\n      ...hydrateActions(\n        Array.isArray(dynamicActions) ? dynamicActions : [],\n        getLatestActionContext\n      ),\n      ...staticActions\n    ];\n  } catch {\n    return [...configActions, ...staticActions];\n  }\n}\n"]}

package/lib/Core/Utils/styles.d.ts

@@ -1,4 +1,13 @@
 import type { RsCoreTypes } from 'pega-repeating-structures-core';
+export declare function getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean): {
+    height?: undefined;
+    minHeight?: undefined;
+    maxHeight?: undefined;
+} | {
+    height: string;
+    minHeight: string;
+    maxHeight: string;
+};
 export declare const generateRSHeightStyles: ({ view, isFullscreen }: {
     view: RsCoreTypes.View;
     isFullscreen: boolean;

package/lib/Core/Utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAgElE,eAAO,MAAM,sBAAsB,GAAI,wBAGpC;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB,gDAUA,CAAC;AAGF,eAAO,MAAM,mCAAmC,mDAM/C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAKlE,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO;;;;;;;;EA4D5E;AAGD,eAAO,MAAM,sBAAsB,GAAI,wBAGpC;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB,gDAUA,CAAC;AAGF,eAAO,MAAM,mCAAmC,mDAM/C,CAAC"}

package/lib/Core/Utils/styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 const DEFAULT_READONLY_TABLE_HEIGHT = '600px';
 const MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';
-function getHeightStyles(view, isFullscreen) {
+export function getHeightStyles(view, isFullscreen) {
     if (!view)
         return {};
     const { viewHeight, meta: { basicMode, height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {} } } = view;
@@ -12,7 +12,8 @@ function getHeightStyles(view, isFullscreen) {
     // Fullscreen mode overrides other height calculations
     if (isFullscreen) {
         return {
-            height: 'auto',
+            // Stretch the fullscreen table using --content-height-in-view, which Fullscreen provides after portaling the table.
+            height: `calc(var(--content-height-in-view) - ${cardPadding})`,
             minHeight: 'auto',
             maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`
         };
@@ -34,7 +35,11 @@ function getHeightStyles(view, isFullscreen) {
     if (basicMode) {
         calculatedHeight = 'auto';
     }
-    if (height) {
+    if (typeof height === 'string' && height.startsWith('--')) {
+        // CSS variable: explicit height takes precedence over basicMode.
+        calculatedHeight = `calc(var(${height}) - ${deltaAdjustment}px - ${cardPadding})`;
+    }
+    else if (typeof height === 'number') {
         calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;
     }
     if (viewHeight) {

package/lib/Core/Utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,6BAA6B,GAAG,OAAO,CAAC;AAC9C,MAAM,6BAA6B,GAAG,OAAO,CAAC;AAE9C,SAAS,eAAe,CAAC,IAAsB,EAAE,YAAqB;IACpE,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,MAAM,EACJ,UAAU,EACV,IAAI,EAAE,EACJ,SAAS,EACT,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,yBAAyB,EAAE,eAAe,GAAG,CAAC,EAAE,GAAG,EAAE,EAC9F,EACF,GAAG,IAAI,CAAC;IAET,MAAM,qBAAqB,GAAG,yBAAyB;QACrD,CAAC,CAAC,OAAO,yBAAyB,KAAK,6BAA6B,GAAG;QACvE,CAAC,CAAC,6BAA6B,CAAC;IAElC,MAAM,WAAW,GAAG,6BAA6B,CAAC;IAElD,sDAAsD;IACtD,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,oBAAoB,qBAAqB,OAAO,WAAW,GAAG;SAC1E,CAAC;IACJ,CAAC;IAED,0BAA0B;IAC1B,IAAI,mBAAmB,GAAG,MAAM,CAAC;IACjC,IAAI,SAAS,EAAE,CAAC;QACd,mBAAmB,GAAG,6BAA6B,CAAC;IACtD,CAAC;IACD,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,mBAAmB,GAAG,YAAY,SAAS,OAAO,qBAAqB,OAAO,eAAe,QAAQ,WAAW,GAAG,CAAC;IACtH,CAAC;IACD,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QAChE,mBAAmB,GAAG,gBAAgB,SAAS,KAAK,6BAA6B,MAAM,qBAAqB,OAAO,eAAe,QAAQ,WAAW,GAAG,CAAC;IAC3J,CAAC;IAED,sBAAsB;IACtB,yHAAyH;IACzH,IAAI,gBAAgB,GAAG,mBAAmB,CAAC;IAC3C,IAAI,SAAS,EAAE,CAAC;QACd,gBAAgB,GAAG,MAAM,CAAC;IAC5B,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,gBAAgB,GAAG,QAAQ,MAAM,QAAQ,eAAe,QAAQ,WAAW,GAAG,CAAC;IACjF,CAAC;IACD,IAAI,UAAU,EAAE,CAAC;QACf,gBAAgB,GAAG,QAAQ,UAAU,QAAQ,eAAe,QAAQ,WAAW,GAAG,CAAC;IACrF,CAAC;IAED,OAAO;QACL,MAAM,EAAE,gBAAgB;QACxB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,MAAM;QAChD,SAAS,EAAE,mBAAmB;KAC/B,CAAC;AACJ,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,YAAY,EAIb,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IAE7E,OAAO,GAAG,CAAA;;;cAGE,MAAM;kBACF,SAAS;kBACT,SAAS;GACxB,CAAC;AACJ,CAAC,CAAC;AAEF,kIAAkI;AAClI,MAAM,CAAC,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,GAAG,CAAA;;;;GAIT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { css } from 'styled-components';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nconst DEFAULT_READONLY_TABLE_HEIGHT = '600px';\nconst MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';\n\nfunction getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean) {\n  if (!view) return {};\n\n  const {\n    viewHeight,\n    meta: {\n      basicMode,\n      height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {}\n    }\n  } = view;\n\n  const maxHeightMinimumValue = maxHeightMinValueVariable\n    ? `var(${maxHeightMinValueVariable}, ${MAX_HEIGHT_MIN_VALUE_FALLBACK})`\n    : MAX_HEIGHT_MIN_VALUE_FALLBACK;\n\n  const cardPadding = 'var(--rs-card-padding, 0px)';\n\n  // Fullscreen mode overrides other height calculations\n  if (isFullscreen) {\n    return {\n      height: 'auto',\n      minHeight: 'auto',\n      maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`\n    };\n  }\n\n  // Max-height calculations\n  let calculatedMaxHeight = 'none';\n  if (basicMode) {\n    calculatedMaxHeight = DEFAULT_READONLY_TABLE_HEIGHT;\n  }\n  if (typeof maxHeight === 'number') {\n    calculatedMaxHeight = `calc(max(${maxHeight}px, ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (typeof maxHeight === 'string' && maxHeight.startsWith('--')) {\n    calculatedMaxHeight = `calc(max(var(${maxHeight}, ${DEFAULT_READONLY_TABLE_HEIGHT}), ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  // Height calculations\n  // For landing pages stretch the repeating view to the max available height even though there might be less or no records\n  let calculatedHeight = calculatedMaxHeight;\n  if (basicMode) {\n    calculatedHeight = 'auto';\n  }\n  if (height) {\n    calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (viewHeight) {\n    calculatedHeight = `calc(${viewHeight}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  return {\n    height: calculatedHeight,\n    minHeight: minHeight ? `${minHeight}px` : 'auto',\n    maxHeight: calculatedMaxHeight\n  };\n}\n\n// Exposes styles to be set on the RS template\nexport const generateRSHeightStyles = ({\n  view,\n  isFullscreen\n}: {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}) => {\n  const { height, minHeight, maxHeight } = getHeightStyles(view, isFullscreen);\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    height: ${height};\n    min-height: ${minHeight};\n    max-height: ${maxHeight};\n  `;\n};\n\n// Exposes styles to be set on the container that contains the data records and need to be expanded and collapsed based on records\nexport const generateRSDataContainerHeightStyles = () => {\n  return css`\n    display: flex;\n    flex: 1 1 auto;\n    overflow: hidden;\n  `;\n};\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from 'styled-components';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nconst DEFAULT_READONLY_TABLE_HEIGHT = '600px';\nconst MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';\n\nexport function getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean) {\n  if (!view) return {};\n\n  const {\n    viewHeight,\n    meta: {\n      basicMode,\n      height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {}\n    }\n  } = view;\n\n  const maxHeightMinimumValue = maxHeightMinValueVariable\n    ? `var(${maxHeightMinValueVariable}, ${MAX_HEIGHT_MIN_VALUE_FALLBACK})`\n    : MAX_HEIGHT_MIN_VALUE_FALLBACK;\n\n  const cardPadding = 'var(--rs-card-padding, 0px)';\n\n  // Fullscreen mode overrides other height calculations\n  if (isFullscreen) {\n    return {\n      // Stretch the fullscreen table using --content-height-in-view, which Fullscreen provides after portaling the table.\n      height: `calc(var(--content-height-in-view) - ${cardPadding})`,\n      minHeight: 'auto',\n      maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`\n    };\n  }\n\n  // Max-height calculations\n  let calculatedMaxHeight = 'none';\n  if (basicMode) {\n    calculatedMaxHeight = DEFAULT_READONLY_TABLE_HEIGHT;\n  }\n  if (typeof maxHeight === 'number') {\n    calculatedMaxHeight = `calc(max(${maxHeight}px, ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (typeof maxHeight === 'string' && maxHeight.startsWith('--')) {\n    calculatedMaxHeight = `calc(max(var(${maxHeight}, ${DEFAULT_READONLY_TABLE_HEIGHT}), ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  // Height calculations\n  // For landing pages stretch the repeating view to the max available height even though there might be less or no records\n  let calculatedHeight = calculatedMaxHeight;\n  if (basicMode) {\n    calculatedHeight = 'auto';\n  }\n  if (typeof height === 'string' && height.startsWith('--')) {\n    // CSS variable: explicit height takes precedence over basicMode.\n    calculatedHeight = `calc(var(${height}) - ${deltaAdjustment}px - ${cardPadding})`;\n  } else if (typeof height === 'number') {\n    calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (viewHeight) {\n    calculatedHeight = `calc(${viewHeight}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  return {\n    height: calculatedHeight,\n    minHeight: minHeight ? `${minHeight}px` : 'auto',\n    maxHeight: calculatedMaxHeight\n  };\n}\n\n// Exposes styles to be set on the RS template\nexport const generateRSHeightStyles = ({\n  view,\n  isFullscreen\n}: {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}) => {\n  const { height, minHeight, maxHeight } = getHeightStyles(view, isFullscreen);\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    height: ${height};\n    min-height: ${minHeight};\n    max-height: ${maxHeight};\n  `;\n};\n\n// Exposes styles to be set on the container that contains the data records and need to be expanded and collapsed based on records\nexport const generateRSDataContainerHeightStyles = () => {\n  return css`\n    display: flex;\n    flex: 1 1 auto;\n    overflow: hidden;\n  `;\n};\n"]}

package/lib/Core/Views/Gallery/Components/GalleryCard.d.ts

@@ -1,4 +1,4 @@
 import type { GalleryCardProps } from '../Gallery.types';
-declare const GalleryCard: import("react").MemoExoticComponent<({ headerColumn, row, meta, visibleColumns }: GalleryCardProps) => import("react/jsx-runtime").JSX.Element>;
+declare const GalleryCard: import("react").MemoExoticComponent<({ headerColumn, subHeadingsColumns, row, meta, visibleColumns }: GalleryCardProps) => import("react/jsx-runtime").JSX.Element>;
 export default GalleryCard;
 //# sourceMappingURL=GalleryCard.d.ts.map

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

@@ -1 +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,6CA2CrF,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"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;AAKzD,QAAA,MAAM,WAAW,wGACmD,gBAAgB,6CAoDnF,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,20 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 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, footer, fields, 'aria-label': ariaLabel } = getCardData({
+import { getCardData, getCardUIProps } from '../../../Components/Card';
+import useTranslate from '../../../Hooks/useTranslate';
+import fetchRowActions from '../../../Utils/fetchRowActions';
+const GalleryCard = memo(({ headerColumn, subHeadingsColumns, row, meta, visibleColumns }) => {
+    const cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };
+    const { label, subheading, image, footer, fields, 'aria-label': ariaLabel } = getCardData({
         row,
         visibleColumns,
-        meta,
-        headerColumn
+        cardConfig,
+        headerColumn,
+        subHeadingsColumns
     });
     const uiProps = getCardUIProps({ row });
-    const fetchActionsCb = useRowActions({ row, meta });
+    const [translate] = useTranslate();
+    const fetchActions = useCallback(() => fetchRowActions({ getExecutionContext: row.getContext, meta, translate }), [meta, row, translate]);
     const { onCardClick } = meta.galleryConfig ?? {};
     const rowData = onCardClick ? row.getContext().getValue() : undefined;
-    return (_jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, "data-gallery-card": true, actions: fetchActionsCb, ...uiProps, footer: footer, ...(onCardClick &&
+    return (_jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, subheading: subheading, headingTag: 'h3', image: image, fields: fields, "data-gallery-card": true, actions: meta.editing || meta.deleting ? fetchActions : undefined, ...uiProps, footer: footer, ...(onCardClick &&
             rowData && {
             onClick: () => onCardClick(rowData),
             onKeyDown: (e) => {

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

@@ -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;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,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,6BAEd,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      headingTag='h3'\n      image={image}\n      fields={fields}\n      data-gallery-card\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"]}
+{"version":3,"file":"GalleryCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAE7D,MAAM,WAAW,GAAG,IAAI,CACtB,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAAoB,EAAE,EAAE;IACpF,MAAM,UAAU,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IACjE,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,UAAU;QACV,YAAY;QACZ,kBAAkB;KACnB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACxC,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,WAAW,CAC9B,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,mBAAmB,EAAE,GAAG,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC/E,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,CACvB,CAAC;IACF,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,UAAU,EAAE,UAAU,EACtB,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,6BAEd,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,KAC7D,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,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { memo, useCallback } 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 '../../../Components/Card';\nimport useTranslate from '../../../Hooks/useTranslate';\nimport fetchRowActions from '../../../Utils/fetchRowActions';\n\nconst GalleryCard = memo(\n  ({ headerColumn, subHeadingsColumns, row, meta, visibleColumns }: GalleryCardProps) => {\n    const cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };\n    const {\n      label,\n      subheading,\n      image,\n      footer,\n      fields,\n      'aria-label': ariaLabel\n    } = getCardData({\n      row,\n      visibleColumns,\n      cardConfig,\n      headerColumn,\n      subHeadingsColumns\n    });\n\n    const uiProps = getCardUIProps({ row });\n    const [translate] = useTranslate();\n    const fetchActions = useCallback(\n      () => fetchRowActions({ getExecutionContext: row.getContext, meta, translate }),\n      [meta, row, translate]\n    );\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        subheading={subheading}\n        headingTag='h3'\n        image={image}\n        fields={fields}\n        data-gallery-card\n        actions={meta.editing || meta.deleting ? fetchActions : undefined}\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);\n\nexport default GalleryCard;\n"]}

package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryCheckboxCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC;CACrC;AAED,QAAA,MAAM,mBAAmB,qGACwC,wBAAwB,6CA6CxF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"GalleryCheckboxCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC;CACrC;AAED,QAAA,MAAM,mBAAmB,qGACwC,wBAAwB,6CAkDxF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback } from 'react';
 import { CheckboxCard } from '@pega/cosmos-react-core';
-import { getCardData, getCardUIProps } from '../utils';
-import useRowActions from '../hooks/useRowActions';
+import { getCardData, getCardUIProps } from '../../../Components/Card';
+import useTranslate from '../../../Hooks/useTranslate';
+import fetchRowActions from '../../../Utils/fetchRowActions';
 const GalleryCheckboxCard = memo(({ headerColumn, selectionColumn, row, meta, visibleColumns }) => {
+    const cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };
     const { label, image, fields, 'aria-label': ariaLabel } = getCardData({
         row,
         visibleColumns,
-        meta,
+        cardConfig,
         headerColumn
     });
     const uiProps = getCardUIProps({ row });
@@ -18,8 +20,9 @@ const GalleryCheckboxCard = memo(({ headerColumn, selectionColumn, row, meta, vi
     // TODO: identify the usecase for column.disableSelection. Keeping it for now to keep the behavior in sync with RowSelectionColumn in table.
     const disableSelection = selectionColumn.disableSelection ?? disableSelectionOnLoad;
     const handleChange = useCallback((event) => selectRow(event.target.checked), [row, selectRow]);
-    const fetchActionsCb = useRowActions({ row, meta });
-    return (_jsx(CheckboxCard, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, "data-gallery-card": true, onChange: handleChange, checked: getContext()?.$selected, readOnly: disableSelection, ...uiProps, actions: fetchActionsCb }));
+    const [translate] = useTranslate();
+    const fetchActions = useCallback(() => fetchRowActions({ getExecutionContext: row.getContext, meta, translate }), [meta, row, translate]);
+    return (_jsx(CheckboxCard, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, "data-gallery-card": true, onChange: handleChange, checked: getContext()?.$selected, readOnly: disableSelection, ...uiProps, actions: meta.editing || meta.deleting ? fetchActions : undefined }));
 });
 export default GalleryCheckboxCard;
 //# sourceMappingURL=GalleryCheckboxCard.js.map

package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryCheckboxCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAMnD,MAAM,mBAAmB,GAAG,IAAI,CAC9B,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAA4B,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;IAExC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC;IACtC,MAAM,sBAAsB,GAAG,eAAe;SAC3C,UAAU,EAAE;QACb,EAAE,SAAS,EAAE,EAAE,sBAAsB,CAAC;IACxC,4IAA4I;IAC5I,MAAM,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,IAAI,sBAAsB,CAAC;IAEpF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EACzE,CAAC,GAAG,EAAE,SAAS,CAAC,CACjB,CAAC;IAEF,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpD,OAAO,CACL,KAAC,YAAY,kBACC,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,6BAEd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,UAAU,EAAE,EAAE,SAAS,EAChC,QAAQ,EAAE,gBAAgB,KACtB,OAAO,EACX,OAAO,EAAE,cAAc,GACvB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { memo, useCallback, type ChangeEvent } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport { CheckboxCard } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from '../Gallery.types';\nimport { getCardData, getCardUIProps } from '../utils';\nimport useRowActions from '../hooks/useRowActions';\n\ninterface GalleryCheckboxCardProps extends GalleryCardProps {\n  selectionColumn: RsCoreTypes.Column;\n}\n\nconst GalleryCheckboxCard = memo(\n  ({ headerColumn, selectionColumn, row, meta, visibleColumns }: GalleryCheckboxCardProps) => {\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\n    const { selectRow, getContext } = row;\n    const disableSelectionOnLoad = selectionColumn\n      .getContext()\n      ?.getRsMeta()?.disableSelectionOnLoad;\n    // TODO: identify the usecase for column.disableSelection. Keeping it for now to keep the behavior in sync with RowSelectionColumn in table.\n    const disableSelection = selectionColumn.disableSelection ?? disableSelectionOnLoad;\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => selectRow(event.target.checked),\n      [row, selectRow]\n    );\n\n    const fetchActionsCb = useRowActions({ row, meta });\n\n    return (\n      <CheckboxCard\n        aria-label={ariaLabel}\n        label={label}\n        headingTag='h3'\n        image={image}\n        fields={fields}\n        data-gallery-card\n        onChange={handleChange}\n        checked={getContext()?.$selected}\n        readOnly={disableSelection}\n        {...uiProps}\n        actions={fetchActionsCb}\n      />\n    );\n  }\n);\n\nexport default GalleryCheckboxCard;\n"]}
+{"version":3,"file":"GalleryCheckboxCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAM7D,MAAM,mBAAmB,GAAG,IAAI,CAC9B,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAA4B,EAAE,EAAE;IACzF,MAAM,UAAU,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IACjE,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,UAAU;QACV,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAExC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC;IACtC,MAAM,sBAAsB,GAAG,eAAe;SAC3C,UAAU,EAAE;QACb,EAAE,SAAS,EAAE,EAAE,sBAAsB,CAAC;IACxC,4IAA4I;IAC5I,MAAM,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,IAAI,sBAAsB,CAAC;IAEpF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EACzE,CAAC,GAAG,EAAE,SAAS,CAAC,CACjB,CAAC;IAEF,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,WAAW,CAC9B,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,mBAAmB,EAAE,GAAG,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC/E,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,kBACC,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,6BAEd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,UAAU,EAAE,EAAE,SAAS,EAChC,QAAQ,EAAE,gBAAgB,KACtB,OAAO,EACX,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACjE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { memo, useCallback, type ChangeEvent } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport { CheckboxCard } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from '../Gallery.types';\nimport { getCardData, getCardUIProps } from '../../../Components/Card';\nimport useTranslate from '../../../Hooks/useTranslate';\nimport fetchRowActions from '../../../Utils/fetchRowActions';\n\ninterface GalleryCheckboxCardProps extends GalleryCardProps {\n  selectionColumn: RsCoreTypes.Column;\n}\n\nconst GalleryCheckboxCard = memo(\n  ({ headerColumn, selectionColumn, row, meta, visibleColumns }: GalleryCheckboxCardProps) => {\n    const cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };\n    const {\n      label,\n      image,\n      fields,\n      'aria-label': ariaLabel\n    } = getCardData({\n      row,\n      visibleColumns,\n      cardConfig,\n      headerColumn\n    });\n\n    const uiProps = getCardUIProps({ row });\n\n    const { selectRow, getContext } = row;\n    const disableSelectionOnLoad = selectionColumn\n      .getContext()\n      ?.getRsMeta()?.disableSelectionOnLoad;\n    // TODO: identify the usecase for column.disableSelection. Keeping it for now to keep the behavior in sync with RowSelectionColumn in table.\n    const disableSelection = selectionColumn.disableSelection ?? disableSelectionOnLoad;\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => selectRow(event.target.checked),\n      [row, selectRow]\n    );\n\n    const [translate] = useTranslate();\n    const fetchActions = useCallback(\n      () => fetchRowActions({ getExecutionContext: row.getContext, meta, translate }),\n      [meta, row, translate]\n    );\n\n    return (\n      <CheckboxCard\n        aria-label={ariaLabel}\n        label={label}\n        headingTag='h3'\n        image={image}\n        fields={fields}\n        data-gallery-card\n        onChange={handleChange}\n        checked={getContext()?.$selected}\n        readOnly={disableSelection}\n        {...uiProps}\n        actions={meta.editing || meta.deleting ? fetchActions : undefined}\n      />\n    );\n  }\n);\n\nexport default GalleryCheckboxCard;\n"]}

package/lib/Core/Views/Gallery/Gallery.types.d.ts

@@ -1,6 +1,7 @@
 import type { RsCoreTypes } from 'pega-repeating-structures-core';
 export interface GalleryCardProps {
     headerColumn?: RsCoreTypes.Column;
+    subHeadingsColumns?: RsCoreTypes.Column[];
     row: RsCoreTypes.Row;
     meta: RsCoreTypes.Meta;
     visibleColumns: RsCoreTypes.Column[];

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.types.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/Gallery.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAClC,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,cAAc,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;CACtC"}
+{"version":3,"file":"Gallery.types.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/Gallery.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAClC,kBAAkB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC1C,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,cAAc,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;CACtC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.types.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/Gallery.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nexport interface GalleryCardProps {\n  headerColumn?: RsCoreTypes.Column;\n  row: RsCoreTypes.Row;\n  meta: RsCoreTypes.Meta;\n  visibleColumns: RsCoreTypes.Column[];\n}\n"]}
+{"version":3,"file":"Gallery.types.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/Gallery.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nexport interface GalleryCardProps {\n  headerColumn?: RsCoreTypes.Column;\n  subHeadingsColumns?: RsCoreTypes.Column[];\n  row: RsCoreTypes.Row;\n  meta: RsCoreTypes.Meta;\n  visibleColumns: RsCoreTypes.Column[];\n}\n"]}

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

@@ -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;IACF,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC;QAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6DD,QAAA,MAAM,gBAAgB,sJAoBrB,CAAC;AAIF,eAAe,gBAAgB,CAAC;AAEhC,QAAA,MAAM,yBAAyB,6NAG9B,CAAC;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"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;AAWzE,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;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6DD,QAAA,MAAM,gBAAgB,sJAoBrB,CAAC;AAIF,eAAe,gBAAgB,CAAC;AAEhC,QAAA,MAAM,yBAAyB,6NAG9B,CAAC;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { getBaseCardContainerStyles, getInlineImageCardContainerStyles, StyledHeader, StyledSelectionCard } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';
 import { defaultThemeProp } from '@pega/cosmos-react-core';
 import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
-import { DEFAULT_IMAGE_PLACEMENT, DEFAULT_IMAGE_SIZE, GALLERY_IMAGE_PLACEMENT_MAP, isInlinePlacement } from './utils';
+import { DEFAULT_IMAGE_PLACEMENT, DEFAULT_IMAGE_SIZE, GALLERY_IMAGE_PLACEMENT_MAP, isInlinePlacement } from '../../Components/Card';
 const StyledGalleryContainer = styled.div(({ view, isFullscreen, isStackLayout, theme }) => {
     return css `
       ${generateRSHeightStyles({ view, isFullscreen })}

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

@@ -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;AA6BjB,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,OAAO,GAAG,CAAA;QACN,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;;;;UAM5C,0BAA0B,CAAC,KAAK,CAAC;UACjC,aAAa;QACf,GAAG,CAAA;;SAEF;UACC,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,aAAa,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;;;;QAMJ,CAAC,aAAa;QAChB,iCAAiC,CAAC,KAAK,EAAE;YACvC,SAAS,EAAE,2BAA2B,CAAC,cAAc,CAAC;YACtD,IAAI,EAAE,SAAS;SAChB,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,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChD,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,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,IAAI,EACf,cAAc,EAAE,SAAS,KACrB,KAAK,GACT,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,KAAM,KAAK,GAAI,CAAC;AACvF,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  isStackLayout?: boolean;\n}\n\ninterface StyledGalleryContainerProps {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n  isStackLayout?: 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, isStackLayout, 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        ${isStackLayout &&\n        css`\n          grid-template-columns: 1fr;\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, isStackLayout }) => {\n  return css`\n    *:has(> .grid-container) {\n      container-type: inline-size;\n    }\n\n    .grid-container {\n      ${!isStackLayout &&\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, isStackLayout, ...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            isStackLayout={isStackLayout}\n            imageSize={size}\n            imagePlacement={placement}\n            {...props}\n          />\n        );\n      }\n    }\n\n    return <StyledGalleryContainer ref={ref} isStackLayout={isStackLayout} {...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"]}
+{"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;AACjG,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,2BAA2B,EAC3B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AA6B/B,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,OAAO,GAAG,CAAA;QACN,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;;;;UAM5C,0BAA0B,CAAC,KAAK,CAAC;UACjC,aAAa;QACf,GAAG,CAAA;;SAEF;UACC,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,aAAa,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;;;;QAMJ,CAAC,aAAa;QAChB,iCAAiC,CAAC,KAAK,EAAE;YACvC,SAAS,EAAE,2BAA2B,CAAC,cAAc,CAAC;YACtD,IAAI,EAAE,SAAS;SAChB,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,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChD,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,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,IAAI,EACf,cAAc,EAAE,SAAS,KACrB,KAAK,GACT,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,KAAM,KAAK,GAAI,CAAC;AACvF,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';\nimport {\n  DEFAULT_IMAGE_PLACEMENT,\n  DEFAULT_IMAGE_SIZE,\n  GALLERY_IMAGE_PLACEMENT_MAP,\n  isInlinePlacement\n} from '../../Components/Card';\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  isStackLayout?: boolean;\n}\n\ninterface StyledGalleryContainerProps {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n  isStackLayout?: 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, isStackLayout, 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        ${isStackLayout &&\n        css`\n          grid-template-columns: 1fr;\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, isStackLayout }) => {\n  return css`\n    *:has(> .grid-container) {\n      container-type: inline-size;\n    }\n\n    .grid-container {\n      ${!isStackLayout &&\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, isStackLayout, ...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            isStackLayout={isStackLayout}\n            imageSize={size}\n            imagePlacement={placement}\n            {...props}\n          />\n        );\n      }\n    }\n\n    return <StyledGalleryContainer ref={ref} isStackLayout={isStackLayout} {...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

@@ -1,4 +1,4 @@
-import { type RsCoreTypes } from 'pega-repeating-structures-core';
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
 declare function Gallery({ view }: {
     view: RsCoreTypes.View;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -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;AAkB7E,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CA0GpD;kBA1GQ,OAAO;;;AA8GhB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAmBlE,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CAsGpD;kBAtGQ,OAAO;;;AA0GhB,eAAe,OAAO,CAAC"}

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -11,6 +10,7 @@ import { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';
 import RsCardWrapper from '../RsCardWrapper';
 import LoadingIndicator from '../../Components/LoadingIndicator';
 import WarningBanner from '../../Components/WarningBanner';
+import { getCardColumns } from '../../Components/Card';
 import GalleryCard from './Components/GalleryCard';
 import GalleryCheckboxCard from './Components/GalleryCheckboxCard';
 import GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';
@@ -38,16 +38,13 @@ function Gallery({ view }) {
     });
     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 cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };
+    const { heroImage, tile: tileConfig, header, subHeadings } = cardConfig;
+    const { selectionMode } = meta;
+    const { visibleColumns, headerColumn, subHeadingsColumns } = useMemo(() => getCardColumns(columns, { header, subHeadings }), [columns, header, subHeadings]);
     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)))
+                                ? 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, subHeadingsColumns: subHeadingsColumns }, row.reactKey)))
                                 : [] }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
 }
 Gallery.displayName = 'Gallery';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAoB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,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;AACjF,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,SAAS,OAAO,CAAC,EAAE,IAAI,EAA8B;IACnD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC;IACtC,MAAM,YAAY,GAAG,CAAC,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3D,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,OAAO,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO,CAAC,OAAO,GAAG,IAAI,WAAW,CAC/B;gBACE,oBAAoB,EAAE,qBAAqB;gBAC3C,WAAW,EAAE,eAAe;aAC7B,EACD,EAAE,EACF,YAAY,CAAC,OAAO,EACpB,iBAAiB,EACjB,cAAc,EACd,SAAS,CACV,CAAC;QACJ,CAAC;QACD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,UAAU,KAAK,UAAU,CAAC;IAE7C,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC1C,MAAM,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAE5F,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,EAChB,aAAa,EAAE,UAAU,EACzB,IAAI,EAAE,UAAU,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,IACxB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,WAAW,EACrB,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,aAEnE,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 { 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"]}
+{"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 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';\nimport { getCardColumns } from '../../Components/Card';\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 cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };\n  const { heroImage, tile: tileConfig, header, subHeadings } = cardConfig;\n  const { selectionMode } = meta;\n\n  const { visibleColumns, headerColumn, subHeadingsColumns } = useMemo(\n    () => getCardColumns(columns, { header, subHeadings }),\n    [columns, header, subHeadings]\n  );\n\n  const selectionColumn = useMemo(\n    () => columns.find(col => col.field.id === rowSelectColumnMeta.field.id),\n    [columns]\n  );\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                    // TODO: Checkbox card doesn't support subHeadingsColumns yet\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                      subHeadingsColumns={subHeadingsColumns}\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/Kanban/Kanban.styles.d.ts

@@ -0,0 +1,16 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+interface StyledKanbanContainerProps {
+    view: RsCoreTypes.View;
+    isFullscreen: boolean;
+}
+export declare const StyledKanbanContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledKanbanContainerProps>> & string;
+export declare const StyledKanbanBoard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledKanbanLane: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledKanbanLaneHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledKanbanCards: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledEmptyKanbanCards: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const StyledKanbanCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};
+//# sourceMappingURL=Kanban.styles.d.ts.map

package/lib/Core/Views/Kanban/Kanban.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.styles.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,+PAKjC,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM7B,CAAC;AAIF,eAAO,MAAM,gBAAgB,uNAO5B,CAAC;AAIF,eAAO,MAAM,sBAAsB,uNASlC,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM7B,CAAC;AAKF,eAAO,MAAM,sBAAsB;;mBAIlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAa5B,CAAC"}

package/lib/Core/Views/Kanban/Kanban.styles.js

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledSelectionCard } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';
+import { generateRSHeightStyles } from '../../Utils/styles';
+export const StyledKanbanContainer = styled.div(({ view, isFullscreen }) => css `
+    ${generateRSHeightStyles({ view, isFullscreen })}
+    min-inline-size: 0;
+  `);
+StyledKanbanContainer.defaultProps = defaultThemeProp;
+export const StyledKanbanBoard = styled.div(() => css `
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+  `);
+StyledKanbanBoard.defaultProps = defaultThemeProp;
+export const StyledKanbanLane = styled.section(({ theme }) => css `
+    min-block-size: 0;
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.palette['secondary-background']};
+    overflow: hidden;
+  `);
+StyledKanbanLane.defaultProps = defaultThemeProp;
+export const StyledKanbanLaneHeader = styled.header(({ theme }) => css `
+    color: ${theme.base.palette['foreground-color']};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+
+    > :first-child {
+      min-inline-size: 0;
+    }
+  `);
+StyledKanbanLaneHeader.defaultProps = defaultThemeProp;
+export const StyledKanbanCards = styled.div `
+  position: relative;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  display: flex;
+  overflow: auto;
+`;
+StyledKanbanCards.defaultProps = defaultThemeProp;
+// Set minimum height of 5 rem for empty lane to avoid collapsing the lane when there are no cards.
+export const StyledEmptyKanbanCards = styled(StyledKanbanCards)(({ theme }) => css `
+    min-block-size: calc(${theme.base.spacing} * 10);
+  `);
+StyledEmptyKanbanCards.defaultProps = defaultThemeProp;
+export const StyledKanbanCard = styled.div(({ theme }) => css `
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding-inline: ${theme.base.spacing};
+    padding-block-end: ${theme.base.spacing};
+
+    ${StyledSelectionCard} {
+      inline-size: 100%;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+    }
+  `);
+StyledKanbanCard.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Kanban.styles.js.map

package/lib/Core/Views/Kanban/Kanban.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.styles.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAC;AAGhH,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAC3B,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;GAEjD,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,GAAG,EAAE,CAAC,GAAG,CAAA;;;;GAIR,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;qBAEC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;GAEzD,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CACjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACP,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;GAKtD,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,mGAAmG;AACnG,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAC7D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;2BACO,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1C,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;sBAGE,KAAK,CAAC,IAAI,CAAC,OAAO;yBACf,KAAK,CAAC,IAAI,CAAC,OAAO;;MAErC,mBAAmB;;;;;GAKtB,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledSelectionCard } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport { generateRSHeightStyles } from '../../Utils/styles';\n\ninterface StyledKanbanContainerProps {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}\n\nexport const StyledKanbanContainer = styled.div<StyledKanbanContainerProps>(\n  ({ view, isFullscreen }) => css`\n    ${generateRSHeightStyles({ view, isFullscreen })}\n    min-inline-size: 0;\n  `\n);\n\nStyledKanbanContainer.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanBoard = styled.div(\n  () => css`\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow: auto;\n  `\n);\n\nStyledKanbanBoard.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanLane = styled.section(\n  ({ theme }) => css`\n    min-block-size: 0;\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.palette['secondary-background']};\n    overflow: hidden;\n  `\n);\n\nStyledKanbanLane.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanLaneHeader = styled.header(\n  ({ theme }) => css`\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n\n    > :first-child {\n      min-inline-size: 0;\n    }\n  `\n);\n\nStyledKanbanLaneHeader.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCards = styled.div`\n  position: relative;\n  flex: 1 1 auto;\n  min-block-size: 0;\n  display: flex;\n  overflow: auto;\n`;\n\nStyledKanbanCards.defaultProps = defaultThemeProp;\n\n// Set minimum height of 5 rem for empty lane to avoid collapsing the lane when there are no cards.\nexport const StyledEmptyKanbanCards = styled(StyledKanbanCards)(\n  ({ theme }) => css`\n    min-block-size: calc(${theme.base.spacing} * 10);\n  `\n);\n\nStyledEmptyKanbanCards.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCard = styled.div(\n  ({ theme }) => css`\n    box-sizing: border-box;\n    inline-size: 100%;\n    padding-inline: ${theme.base.spacing};\n    padding-block-end: ${theme.base.spacing};\n\n    ${StyledSelectionCard} {\n      inline-size: 100%;\n      max-inline-size: 100%;\n      min-inline-size: 0;\n    }\n  `\n);\n\nStyledKanbanCard.defaultProps = defaultThemeProp;\n"]}

package/lib/Core/Views/Kanban/Kanban.types.d.ts

@@ -0,0 +1,10 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+export interface KanbanCardProps {
+    row: RsCoreTypes.Row;
+    meta: RsCoreTypes.Meta;
+    visibleColumns: RsCoreTypes.Column[];
+    headerColumn?: RsCoreTypes.Column;
+    subHeadingsColumns?: RsCoreTypes.Column[];
+    dataIndex?: number;
+}
+//# sourceMappingURL=Kanban.types.d.ts.map

package/lib/Core/Views/Kanban/Kanban.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.types.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,cAAc,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAClC,kBAAkB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/lib/Core/Views/Kanban/Kanban.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Kanban.types.js.map

package/lib/Core/Views/Kanban/Kanban.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.types.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nexport interface KanbanCardProps {\n  row: RsCoreTypes.Row;\n  meta: RsCoreTypes.Meta;\n  visibleColumns: RsCoreTypes.Column[];\n  headerColumn?: RsCoreTypes.Column;\n  subHeadingsColumns?: RsCoreTypes.Column[];\n  dataIndex?: number;\n}\n"]}

package/lib/Core/Views/Kanban/KanbanCard.d.ts

@@ -0,0 +1,7 @@
+import type { KanbanCardProps } from './Kanban.types';
+declare const _default: import("react").MemoExoticComponent<{
+    ({ headerColumn, subHeadingsColumns, row, meta, visibleColumns, dataIndex }: KanbanCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default _default;
+//# sourceMappingURL=KanbanCard.d.ts.map

package/lib/Core/Views/Kanban/KanbanCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanCard.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;;iFASnD,eAAe;;;AAyClB,wBAAgC"}

package/lib/Core/Views/Kanban/KanbanCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { SelectionCardDisplay } from '@pega/cosmos-react-core';
+import { getCardData, getCardUIProps } from '../../Components/Card';
+import useTranslate from '../../Hooks/useTranslate';
+import fetchRowActions from '../../Utils/fetchRowActions';
+import { StyledKanbanCard } from './Kanban.styles';
+const KanbanCard = ({ headerColumn, subHeadingsColumns, row, meta, visibleColumns, dataIndex }) => {
+    const { label, subheading, image, footer, fields, 'aria-label': ariaLabel } = getCardData({
+        row,
+        visibleColumns,
+        cardConfig: meta.cardConfig,
+        headerColumn,
+        subHeadingsColumns
+    });
+    const uiProps = getCardUIProps({ row });
+    const [translate] = useTranslate();
+    const fetchActions = useCallback(() => fetchRowActions({ getExecutionContext: row.getContext, meta, translate }), [meta, row, translate]);
+    return (_jsx(StyledKanbanCard, { "data-key": uiProps['data-key'], "data-index": dataIndex, children: _jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, subheading: subheading, headingTag: 'h3', image: image, fields: fields, actions: meta.editing || meta.deleting ? fetchActions : undefined, footer: footer, draggable: false }) }));
+};
+KanbanCard.displayName = 'KanbanCard';
+export default memo(KanbanCard);
+//# sourceMappingURL=KanbanCard.js.map

package/lib/Core/Views/Kanban/KanbanCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,UAAU,GAAG,CAAC,EAClB,YAAY,EACZ,kBAAkB,EAClB,GAAG,EACH,IAAI,EACJ,cAAc,EACd,SAAS,EACO,EAAE,EAAE;IACpB,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,YAAY;QACZ,kBAAkB;KACnB,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACxC,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,WAAW,CAC9B,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,mBAAmB,EAAE,GAAG,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC/E,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,KAAC,gBAAgB,gBAAW,OAAO,CAAC,UAAU,CAAC,gBAAc,SAAS,YACpE,KAAC,oBAAoB,kBACP,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACjE,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,KAAK,GAChB,GACe,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { memo, useCallback } from 'react';\n\nimport { SelectionCardDisplay } from '@pega/cosmos-react-core';\n\nimport { getCardData, getCardUIProps } from '../../Components/Card';\nimport useTranslate from '../../Hooks/useTranslate';\nimport fetchRowActions from '../../Utils/fetchRowActions';\n\nimport { StyledKanbanCard } from './Kanban.styles';\nimport type { KanbanCardProps } from './Kanban.types';\n\nconst KanbanCard = ({\n  headerColumn,\n  subHeadingsColumns,\n  row,\n  meta,\n  visibleColumns,\n  dataIndex\n}: KanbanCardProps) => {\n  const {\n    label,\n    subheading,\n    image,\n    footer,\n    fields,\n    'aria-label': ariaLabel\n  } = getCardData({\n    row,\n    visibleColumns,\n    cardConfig: meta.cardConfig,\n    headerColumn,\n    subHeadingsColumns\n  });\n  const uiProps = getCardUIProps({ row });\n  const [translate] = useTranslate();\n  const fetchActions = useCallback(\n    () => fetchRowActions({ getExecutionContext: row.getContext, meta, translate }),\n    [meta, row, translate]\n  );\n\n  return (\n    <StyledKanbanCard data-key={uiProps['data-key']} data-index={dataIndex}>\n      <SelectionCardDisplay\n        aria-label={ariaLabel}\n        label={label}\n        subheading={subheading}\n        headingTag='h3'\n        image={image}\n        fields={fields}\n        actions={meta.editing || meta.deleting ? fetchActions : undefined}\n        footer={footer}\n        draggable={false}\n      />\n    </StyledKanbanCard>\n  );\n};\n\nKanbanCard.displayName = 'KanbanCard';\n\nexport default memo(KanbanCard);\n"]}

package/lib/Core/Views/Kanban/KanbanLane.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+interface KanbanLaneProps {
+    lane: RsCoreTypes.GroupGenerator;
+    laneColumn?: RsCoreTypes.Column;
+    meta: RsCoreTypes.Meta;
+    visibleColumns: RsCoreTypes.Column[];
+    headerColumn?: RsCoreTypes.Column;
+    subHeadingsColumns?: RsCoreTypes.Column[];
+    emptyState: ReactNode;
+    /** Stable identifier for the lane, used to scope the card virtualizer instance. */
+    laneId: string;
+}
+interface EmptyKanbanLaneProps {
+    emptyState: ReactNode;
+}
+declare function KanbanLane({ lane, laneColumn, meta, visibleColumns, headerColumn, subHeadingsColumns, emptyState, laneId }: KanbanLaneProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanLane {
+    var displayName: string;
+}
+export declare const EmptyKanbanLane: ({ emptyState }: EmptyKanbanLaneProps) => import("react/jsx-runtime").JSX.Element;
+export default KanbanLane;
+//# sourceMappingURL=KanbanLane.d.ts.map