@pega/lists-react 10.0.0-build.4.2 → 10.0.0-build.4.20

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

@@ -1,13 +1,13 @@
 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, useRowActions } from '../../../Components/Card';
 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 });

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,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMtF,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,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, useRowActions } from '../../../Components/Card';\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 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"]}

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":"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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"]}
+{"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,13 @@
+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 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;AAIF,eAAO,MAAM,gBAAgB,6NAa5B,CAAC"}

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

@@ -0,0 +1,53 @@
+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;
+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,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\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":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;;iFASnD,eAAe;;;AAqClB,wBAAgC"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { SelectionCardDisplay } from '@pega/cosmos-react-core';
+import { getCardData, getCardUIProps, useRowActions } from '../../Components/Card';
+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 fetchActionsCb = useRowActions({ row, meta });
+    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: fetchActionsCb, 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,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEnF,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,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpD,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,cAAc,EACvB,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 } from 'react';\n\nimport { SelectionCardDisplay } from '@pega/cosmos-react-core';\n\nimport { getCardData, getCardUIProps, useRowActions } from '../../Components/Card';\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 fetchActionsCb = useRowActions({ row, meta });\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={fetchActionsCb}\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

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLane.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAMlE,UAAU,eAAe;IACvB,IAAI,EAAE,WAAW,CAAC,cAAc,CAAC;IACjC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAChC,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,UAAU,EAAE,SAAS,CAAC;IACtB,mFAAmF;IACnF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,SAAS,CAAC;CACvB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,MAAM,EACP,EAAE,eAAe,2CAmCjB;kBA5CQ,UAAU;;;AAgDnB,eAAO,MAAM,eAAe,GAAI,gBAAgB,oBAAoB,4CAoBnE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Count, Flex, Grid } from '@pega/cosmos-react-core';
+import KanbanLaneHeader from './KanbanLaneHeader';
+import KanbanLaneVirtualizer from './KanbanLaneVirtualizer';
+import { StyledKanbanCards, StyledKanbanLane, StyledKanbanLaneHeader } from './Kanban.styles';
+function KanbanLane({ lane, laneColumn, meta, visibleColumns, headerColumn, subHeadingsColumns, emptyState, laneId }) {
+    const laneRows = lane.getRows?.() ?? [];
+    return (_jsxs(Flex, { as: StyledKanbanLane, "data-kanban-lane": true, role: 'listitem', container: { direction: 'column' }, children: [_jsxs(Grid, { as: StyledKanbanLaneHeader, container: { cols: 'minmax(0, 1fr) auto', alignItems: 'center', gap: 0.5, pad: 1 }, children: [_jsx(KanbanLaneHeader, { column: laneColumn, groupHeader: lane }), _jsx(Count, { children: lane.count })] }), lane.count === 0 ? (_jsx(Flex, { as: StyledKanbanCards, container: { direction: 'column', gap: 1, pad: 1 }, children: emptyState })) : (_jsx(StyledKanbanCards, { children: _jsx(KanbanLaneVirtualizer, { laneId: laneId, rows: laneRows, meta: meta, visibleColumns: visibleColumns, headerColumn: headerColumn, subHeadingsColumns: subHeadingsColumns }) }))] }));
+}
+KanbanLane.displayName = 'KanbanLane';
+export const EmptyKanbanLane = ({ emptyState }) => {
+    return (_jsxs(Flex, { as: StyledKanbanLane, role: 'listitem', container: { direction: 'column' }, children: [_jsx(Grid, { as: StyledKanbanLaneHeader, container: {
+                    cols: 'minmax(0, 1fr) auto',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    pad: 1,
+                    justifyItems: 'end'
+                }, children: _jsx(Count, { children: 0 }) }), _jsx(Flex, { as: StyledKanbanCards, container: { direction: 'column', gap: 1, pad: 1 }, children: emptyState })] }));
+};
+export default KanbanLane;
+//# sourceMappingURL=KanbanLane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLane.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLane.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAkB9F,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,MAAM,EACU;IAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC;IAExC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,4BAEpB,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAElC,MAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,aAElF,KAAC,gBAAgB,IAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,GAAI,EAC3D,KAAC,KAAK,cAAE,IAAI,CAAC,KAAK,GAAS,IACtB,EACN,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAClB,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YAC5E,UAAU,GACN,CACR,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,cAChB,KAAC,qBAAqB,IACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,GACtC,GACgB,CACrB,IACI,CACR,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAwB,EAAE,EAAE;IACtE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC5E,KAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE;oBACT,IAAI,EAAE,qBAAqB;oBAC3B,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;oBACR,GAAG,EAAE,CAAC;oBACN,YAAY,EAAE,KAAK;iBACpB,YAED,KAAC,KAAK,cAAE,CAAC,GAAS,GACb,EACP,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YAC5E,UAAU,GACN,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Count, Flex, Grid } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport KanbanLaneHeader from './KanbanLaneHeader';\nimport KanbanLaneVirtualizer from './KanbanLaneVirtualizer';\nimport { StyledKanbanCards, StyledKanbanLane, StyledKanbanLaneHeader } from './Kanban.styles';\n\ninterface KanbanLaneProps {\n  lane: RsCoreTypes.GroupGenerator;\n  laneColumn?: RsCoreTypes.Column;\n  meta: RsCoreTypes.Meta;\n  visibleColumns: RsCoreTypes.Column[];\n  headerColumn?: RsCoreTypes.Column;\n  subHeadingsColumns?: RsCoreTypes.Column[];\n  emptyState: ReactNode;\n  /** Stable identifier for the lane, used to scope the card virtualizer instance. */\n  laneId: string;\n}\n\ninterface EmptyKanbanLaneProps {\n  emptyState: ReactNode;\n}\n\nfunction KanbanLane({\n  lane,\n  laneColumn,\n  meta,\n  visibleColumns,\n  headerColumn,\n  subHeadingsColumns,\n  emptyState,\n  laneId\n}: KanbanLaneProps) {\n  const laneRows = lane.getRows?.() ?? [];\n\n  return (\n    <Flex\n      as={StyledKanbanLane}\n      data-kanban-lane\n      role='listitem'\n      container={{ direction: 'column' }}\n    >\n      <Grid\n        as={StyledKanbanLaneHeader}\n        container={{ cols: 'minmax(0, 1fr) auto', alignItems: 'center', gap: 0.5, pad: 1 }}\n      >\n        <KanbanLaneHeader column={laneColumn} groupHeader={lane} />\n        <Count>{lane.count}</Count>\n      </Grid>\n      {lane.count === 0 ? (\n        <Flex as={StyledKanbanCards} container={{ direction: 'column', gap: 1, pad: 1 }}>\n          {emptyState}\n        </Flex>\n      ) : (\n        <StyledKanbanCards>\n          <KanbanLaneVirtualizer\n            laneId={laneId}\n            rows={laneRows}\n            meta={meta}\n            visibleColumns={visibleColumns}\n            headerColumn={headerColumn}\n            subHeadingsColumns={subHeadingsColumns}\n          />\n        </StyledKanbanCards>\n      )}\n    </Flex>\n  );\n}\n\nKanbanLane.displayName = 'KanbanLane';\n\nexport const EmptyKanbanLane = ({ emptyState }: EmptyKanbanLaneProps) => {\n  return (\n    <Flex as={StyledKanbanLane} role='listitem' container={{ direction: 'column' }}>\n      <Grid\n        as={StyledKanbanLaneHeader}\n        container={{\n          cols: 'minmax(0, 1fr) auto',\n          alignItems: 'center',\n          gap: 0.5,\n          pad: 1,\n          justifyItems: 'end'\n        }}\n      >\n        <Count>{0}</Count>\n      </Grid>\n      <Flex as={StyledKanbanCards} container={{ direction: 'column', gap: 1, pad: 1 }}>\n        {emptyState}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default KanbanLane;\n"]}

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

@@ -0,0 +1,12 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+interface KanbanLaneHeaderProps {
+    column?: RsCoreTypes.Column;
+    groupHeader?: RsCoreTypes.GroupGenerator;
+}
+declare function KanbanLaneHeader({ column, groupHeader }: KanbanLaneHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace KanbanLaneHeader {
+    var displayName: string;
+}
+declare const _default: import("react").MemoExoticComponent<typeof KanbanLaneHeader>;
+export default _default;
+//# sourceMappingURL=KanbanLaneHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLaneHeader.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLaneHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC;CAC1C;AAED,iBAAS,gBAAgB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,qBAAqB,kDAevE;kBAfQ,gBAAgB;;;;AAmBzB,wBAAsC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import RenderingEngine from '../../Components/RenderingEngine/RenderCell';
+function KanbanLaneHeader({ column, groupHeader }) {
+    if (!column || !groupHeader) {
+        return null;
+    }
+    column.setExecutionContext(null);
+    return (_jsx(RenderingEngine, { ...column.getRenderingEngineProps(), context: {
+            getValue: () => groupHeader.name,
+            getExecutionContext: () => ({ getValue: () => groupHeader.data, name: 'groupHeader' })
+        } }));
+}
+KanbanLaneHeader.displayName = 'KanbanLaneHeader';
+export default memo(KanbanLaneHeader);
+//# sourceMappingURL=KanbanLaneHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLaneHeader.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLaneHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAI7B,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAO1E,SAAS,gBAAgB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAyB;IACtE,IAAI,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAEjC,OAAO,CACL,KAAC,eAAe,OACV,MAAM,CAAC,uBAAuB,EAAE,EACpC,OAAO,EAAE;YACP,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI;YAChC,mBAAmB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;SACvF,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,eAAe,IAAI,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { memo } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport RenderingEngine from '../../Components/RenderingEngine/RenderCell';\n\ninterface KanbanLaneHeaderProps {\n  column?: RsCoreTypes.Column;\n  groupHeader?: RsCoreTypes.GroupGenerator;\n}\n\nfunction KanbanLaneHeader({ column, groupHeader }: KanbanLaneHeaderProps) {\n  if (!column || !groupHeader) {\n    return null;\n  }\n  column.setExecutionContext(null);\n\n  return (\n    <RenderingEngine\n      {...column.getRenderingEngineProps()}\n      context={{\n        getValue: () => groupHeader.name,\n        getExecutionContext: () => ({ getValue: () => groupHeader.data, name: 'groupHeader' })\n      }}\n    />\n  );\n}\n\nKanbanLaneHeader.displayName = 'KanbanLaneHeader';\n\nexport default memo(KanbanLaneHeader);\n"]}

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

@@ -0,0 +1,20 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+interface KanbanLaneVirtualizerProps {
+    /** Stable identifier for the lane, used to scope the virtualizer instance. */
+    laneId: string;
+    /** All rows belonging to this lane (available client-side). */
+    rows: RsCoreTypes.Row[];
+    meta: RsCoreTypes.Meta;
+    visibleColumns: RsCoreTypes.Column[];
+    headerColumn?: RsCoreTypes.Column;
+    subHeadingsColumns?: RsCoreTypes.Column[];
+}
+/**
+ * Client-side vertical virtualization for the cards within a single Kanban lane.
+ */
+declare function KanbanLaneVirtualizer({ laneId, rows, meta, visibleColumns, headerColumn, subHeadingsColumns }: KanbanLaneVirtualizerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanLaneVirtualizer {
+    var displayName: string;
+}
+export default KanbanLaneVirtualizer;
+//# sourceMappingURL=KanbanLaneVirtualizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLaneVirtualizer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLaneVirtualizer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAalE,UAAU,0BAA0B;IAClC,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,IAAI,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC;IACxB,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;CAC3C;AAED;;GAEG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,kBAAkB,EACnB,EAAE,0BAA0B,2CAoD5B;kBA3DQ,qBAAqB;;;AA+D9B,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import VariableHeightVirtualizer, {} from '../../Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer';
+import KanbanCard from './KanbanCard';
+/** Estimated card height (px) used before a card is measured by the virtualizer. */
+const KANBAN_DEFAULT_CARD_HEIGHT = 600;
+/** Extra cards rendered above and below the viewport for smooth scrolling. */
+const KANBAN_CARD_BUFFER = 5;
+/**
+ * Client-side vertical virtualization for the cards within a single Kanban lane.
+ */
+function KanbanLaneVirtualizer({ laneId, rows, meta, visibleColumns, headerColumn, subHeadingsColumns }) {
+    const totalItemCount = rows.length;
+    const [requestedRange, setRequestedRange] = useState({});
+    const [isFetching, setIsFetching] = useState(false);
+    const requestRange = useCallback(({ startIndex, endIndex }) => {
+        setRequestedRange({ startIndex, endIndex });
+        setIsFetching(true);
+    }, []);
+    // Hold the fetch gate for a single commit so the virtualizer settles the requested window
+    // before it can request the next one.
+    useEffect(() => {
+        if (isFetching)
+            setIsFetching(false);
+    }, [isFetching]);
+    const visibleRows = useMemo(() => {
+        const { startIndex, endIndex } = requestedRange;
+        if (startIndex === undefined || endIndex === undefined)
+            return [];
+        return rows.slice(startIndex, endIndex + 1);
+    }, [rows, requestedRange]);
+    const paginationStartIndex = requestedRange.startIndex ?? 0;
+    return (_jsx(VariableHeightVirtualizer, { id: `kanbanLane:${laneId}`, totalItemCount: totalItemCount, loadedDataRange: requestedRange, isDataFetching: isFetching, apiCallback: requestRange, defaultItemHeight: KANBAN_DEFAULT_CARD_HEIGHT, buffer: KANBAN_CARD_BUFFER, itemContainerClass: 'kanban-lane-cards', children: visibleRows.map((row, index) => (_jsx(KanbanCard, { dataIndex: paginationStartIndex + index, meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn, subHeadingsColumns: subHeadingsColumns }, row.reactKey))) }));
+}
+KanbanLaneVirtualizer.displayName = 'KanbanLaneVirtualizer';
+export default KanbanLaneVirtualizer;
+//# sourceMappingURL=KanbanLaneVirtualizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLaneVirtualizer.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLaneVirtualizer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,yBAAyB,EAAE,EAEjC,MAAM,iFAAiF,CAAC;AAEzF,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,oFAAoF;AACpF,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,8EAA8E;AAC9E,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAa7B;;GAEG;AACH,SAAS,qBAAqB,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,kBAAkB,EACS;IAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;IAEnC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAC1E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAwD,EAAE,EAAE;QACjF,iBAAiB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EACD,EAAE,CACH,CAAC;IAEF,0FAA0F;IAC1F,sCAAsC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU;YAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAChD,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAO,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;IAE3B,MAAM,oBAAoB,GAAG,cAAc,CAAC,UAAU,IAAI,CAAC,CAAC;IAE5D,OAAO,CACL,KAAC,yBAAyB,IACxB,EAAE,EAAE,cAAc,MAAM,EAAE,EAC1B,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,cAAc,EAC/B,cAAc,EAAE,UAAU,EAC1B,WAAW,EAAE,YAAY,EACzB,iBAAiB,EAAE,0BAA0B,EAC7C,MAAM,EAAE,kBAAkB,EAC1B,kBAAkB,EAAC,mBAAmB,YAErC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,KAAC,UAAU,IAET,SAAS,EAAE,oBAAoB,GAAG,KAAK,EACvC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,IANjC,GAAG,CAAC,QAAQ,CAOjB,CACH,CAAC,GACwB,CAC7B,CAAC;AACJ,CAAC;AAED,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAE5D,eAAe,qBAAqB,CAAC","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport VariableHeightVirtualizer, {\n  type LoadedDataRange\n} from '../../Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer';\n\nimport KanbanCard from './KanbanCard';\n\n/** Estimated card height (px) used before a card is measured by the virtualizer. */\nconst KANBAN_DEFAULT_CARD_HEIGHT = 600;\n/** Extra cards rendered above and below the viewport for smooth scrolling. */\nconst KANBAN_CARD_BUFFER = 5;\n\ninterface KanbanLaneVirtualizerProps {\n  /** Stable identifier for the lane, used to scope the virtualizer instance. */\n  laneId: string;\n  /** All rows belonging to this lane (available client-side). */\n  rows: RsCoreTypes.Row[];\n  meta: RsCoreTypes.Meta;\n  visibleColumns: RsCoreTypes.Column[];\n  headerColumn?: RsCoreTypes.Column;\n  subHeadingsColumns?: RsCoreTypes.Column[];\n}\n\n/**\n * Client-side vertical virtualization for the cards within a single Kanban lane.\n */\nfunction KanbanLaneVirtualizer({\n  laneId,\n  rows,\n  meta,\n  visibleColumns,\n  headerColumn,\n  subHeadingsColumns\n}: KanbanLaneVirtualizerProps) {\n  const totalItemCount = rows.length;\n\n  const [requestedRange, setRequestedRange] = useState<LoadedDataRange>({});\n  const [isFetching, setIsFetching] = useState(false);\n\n  const requestRange = useCallback(\n    ({ startIndex, endIndex }: { startIndex: number; endIndex: number; id: string }) => {\n      setRequestedRange({ startIndex, endIndex });\n      setIsFetching(true);\n    },\n    []\n  );\n\n  // Hold the fetch gate for a single commit so the virtualizer settles the requested window\n  // before it can request the next one.\n  useEffect(() => {\n    if (isFetching) setIsFetching(false);\n  }, [isFetching]);\n\n  const visibleRows = useMemo(() => {\n    const { startIndex, endIndex } = requestedRange;\n    if (startIndex === undefined || endIndex === undefined) return [];\n    return rows.slice(startIndex, endIndex + 1);\n  }, [rows, requestedRange]);\n\n  const paginationStartIndex = requestedRange.startIndex ?? 0;\n\n  return (\n    <VariableHeightVirtualizer\n      id={`kanbanLane:${laneId}`}\n      totalItemCount={totalItemCount}\n      loadedDataRange={requestedRange}\n      isDataFetching={isFetching}\n      apiCallback={requestRange}\n      defaultItemHeight={KANBAN_DEFAULT_CARD_HEIGHT}\n      buffer={KANBAN_CARD_BUFFER}\n      itemContainerClass='kanban-lane-cards'\n    >\n      {visibleRows.map((row, index) => (\n        <KanbanCard\n          key={row.reactKey}\n          dataIndex={paginationStartIndex + index}\n          meta={meta}\n          row={row}\n          visibleColumns={visibleColumns}\n          headerColumn={headerColumn}\n          subHeadingsColumns={subHeadingsColumns}\n        />\n      ))}\n    </VariableHeightVirtualizer>\n  );\n}\n\nKanbanLaneVirtualizer.displayName = 'KanbanLaneVirtualizer';\n\nexport default KanbanLaneVirtualizer;\n"]}

package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.d.ts

@@ -0,0 +1,19 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+interface UseKanbanLanesVirtualizationOptions {
+    groupKey?: string;
+    lanes: RsCoreTypes.GroupGenerator[];
+}
+interface KanbanLanesVirtualization {
+    boardRef: React.RefObject<HTMLDivElement>;
+    visibleLanes: RsCoreTypes.GroupGenerator[];
+}
+/**
+ * Progressively mounts right-side Kanban lanes while retaining already mounted lanes and their
+ * vertical scroll positions. Resets the lane window for a new grouping or refreshed lane catalog.
+ *
+ * @param groupKey - Active lane grouping identifier.
+ * @param lanes - Lanes available for the active grouping.
+ */
+export default function useKanbanLanesVirtualization({ groupKey, lanes }: UseKanbanLanesVirtualizationOptions): KanbanLanesVirtualization;
+export {};
+//# sourceMappingURL=useKanbanLanesVirtualization.d.ts.map

package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKanbanLanesVirtualization.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Kanban/hooks/useKanbanLanesVirtualization.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AASlE,UAAU,mCAAmC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC,cAAc,EAAE,CAAC;CACrC;AAED,UAAU,yBAAyB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,YAAY,EAAE,WAAW,CAAC,cAAc,EAAE,CAAC;CAC5C;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACnD,QAAQ,EACR,KAAK,EACN,EAAE,mCAAmC,GAAG,yBAAyB,CA4BjE"}