@pega/lists-react 10.0.0-build.4.14 → 10.0.0-build.4.16

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';
@@ -39,17 +39,12 @@ function Gallery({ view }) {
     const isCardList = layoutType === 'cardlist';
     const { columns = [], meta, rows } = view;
     const cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };
-    const { heroImage, tile: tileConfig, header } = cardConfig;
+    const { heroImage, tile: tileConfig, header, subHeadings } = cardConfig;
     const { selectionMode } = meta;
-    const headerColumn = useMemo(() => (header?.field ? columns.find(col => col.field.id === header.field) : undefined), [header, columns]);
+    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 cardConfig = { ...meta.galleryConfig, ...meta.cardConfig };\n  const { heroImage, tile: tileConfig, header } = cardConfig;\n  const { 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.map

@@ -1 +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,6NAO7B,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAM5B,CAAC"}
+{"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

@@ -29,19 +29,25 @@ export const StyledKanbanLaneHeader = styled.header(({ theme }) => css `
     }
   `);
 StyledKanbanLaneHeader.defaultProps = defaultThemeProp;
-export const StyledKanbanCards = styled.div(() => css `
-    position: relative;
-    flex: 1 1 auto;
-    min-block-size: 0;
-    overflow: auto;
-  `);
+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 `
-  ${StyledSelectionCard} {
+export const StyledKanbanCard = styled.div(({ theme }) => css `
+    box-sizing: border-box;
     inline-size: 100%;
-    max-inline-size: 100%;
-    min-inline-size: 0;
-  }
-`;
+    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

@@ -1 +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,CACzC,GAAG,EAAE,CAAC,GAAG,CAAA;;;;;GAKR,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,mBAAmB;;;;;CAKtB,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  () => css`\n    position: relative;\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow: auto;\n  `\n);\n\nStyledKanbanCards.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCard = styled.div`\n  ${StyledSelectionCard} {\n    inline-size: 100%;\n    max-inline-size: 100%;\n    min-inline-size: 0;\n  }\n`;\n\nStyledKanbanCard.defaultProps = defaultThemeProp;\n"]}
+{"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

@@ -4,5 +4,7 @@ export interface KanbanCardProps {
     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

@@ -1 +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;CACnC"}
+{"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.map

@@ -1 +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}\n"]}
+{"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

@@ -1,4 +1,7 @@
 import type { KanbanCardProps } from './Kanban.types';
-declare const KanbanCard: import("react").MemoExoticComponent<({ headerColumn, row, meta, visibleColumns }: KanbanCardProps) => import("react/jsx-runtime").JSX.Element>;
-export default KanbanCard;
+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

@@ -1 +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;AAEtD,QAAA,MAAM,UAAU,oFAAsD,eAAe,6CA8BnF,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"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

@@ -3,17 +3,18 @@ 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 = memo(({ headerColumn, row, meta, visibleColumns }) => {
-    const { label, image, footer, fields, 'aria-label': ariaLabel } = getCardData({
+const KanbanCard = ({ headerColumn, subHeadingsColumns, row, meta, visibleColumns, dataIndex }) => {
+    const { label, subheading, image, footer, fields, 'aria-label': ariaLabel } = getCardData({
         row,
         visibleColumns,
         cardConfig: meta.cardConfig,
-        headerColumn
+        headerColumn,
+        subHeadingsColumns
     });
     const uiProps = getCardUIProps({ row });
     const fetchActionsCb = useRowActions({ row, meta });
-    return (_jsx(StyledKanbanCard, { "data-key": uiProps['data-key'], children: _jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, actions: fetchActionsCb, footer: footer, draggable: false }) }));
-});
+    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 KanbanCard;
+export default memo(KanbanCard);
 //# sourceMappingURL=KanbanCard.js.map

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

@@ -1 +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,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAAmB,EAAE,EAAE;IACvF,MAAM,EACJ,KAAK,EACL,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;KACb,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,YAC7C,KAAC,oBAAoB,kBACP,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,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,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,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 = memo(({ headerColumn, row, meta, visibleColumns }: KanbanCardProps) => {\n  const {\n    label,\n    image,\n    footer,\n    fields,\n    'aria-label': ariaLabel\n  } = getCardData({\n    row,\n    visibleColumns,\n    cardConfig: meta.cardConfig,\n    headerColumn\n  });\n  const uiProps = getCardUIProps({ row });\n  const fetchActionsCb = useRowActions({ row, meta });\n\n  return (\n    <StyledKanbanCard data-key={uiProps['data-key']}>\n      <SelectionCardDisplay\n        aria-label={ariaLabel}\n        label={label}\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 KanbanCard;\n"]}
+{"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

@@ -6,12 +6,15 @@ interface KanbanLaneProps {
     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, emptyState }: KanbanLaneProps): import("react/jsx-runtime").JSX.Element;
+declare function KanbanLane({ lane, laneColumn, meta, visibleColumns, headerColumn, subHeadingsColumns, emptyState, laneId }: KanbanLaneProps): import("react/jsx-runtime").JSX.Element;
 declare namespace KanbanLane {
     var displayName: string;
 }

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

@@ -1 +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,UAAU,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,SAAS,CAAC;CACvB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,UAAU,EACX,EAAE,eAAe,2CA2BjB;kBAlCQ,UAAU;;;AAsCnB,eAAO,MAAM,eAAe,GAAI,gBAAgB,oBAAoB,4CAoBnE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"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

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Count, Flex, Grid } from '@pega/cosmos-react-core';
-import KanbanCard from './KanbanCard';
 import KanbanLaneHeader from './KanbanLaneHeader';
+import KanbanLaneVirtualizer from './KanbanLaneVirtualizer';
 import { StyledKanbanCards, StyledKanbanLane, StyledKanbanLaneHeader } from './Kanban.styles';
-function KanbanLane({ lane, laneColumn, meta, visibleColumns, headerColumn, emptyState }) {
+function KanbanLane({ lane, laneColumn, meta, visibleColumns, headerColumn, subHeadingsColumns, emptyState, laneId }) {
     const laneRows = lane.getRows?.() ?? [];
-    return (_jsxs(Flex, { as: StyledKanbanLane, 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 })] }), _jsx(Flex, { as: StyledKanbanCards, container: { direction: 'column', gap: 1, pad: 1 }, children: lane.count === 0
-                    ? emptyState
-                    : laneRows.map(row => (_jsx(KanbanCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn }, row.reactKey))) })] }));
+    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 }) => {

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

@@ -1 +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,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAe9F,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,UAAU,EACM;IAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC;IAExC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC5E,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,EACP,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YAC5E,IAAI,CAAC,KAAK,KAAK,CAAC;oBACf,CAAC,CAAC,UAAU;oBACZ,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAClB,KAAC,UAAU,IAET,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAJrB,GAAG,CAAC,QAAQ,CAKjB,CACH,CAAC,GACD,IACF,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 KanbanCard from './KanbanCard';\nimport KanbanLaneHeader from './KanbanLaneHeader';\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  emptyState: ReactNode;\n}\n\ninterface EmptyKanbanLaneProps {\n  emptyState: ReactNode;\n}\n\nfunction KanbanLane({\n  lane,\n  laneColumn,\n  meta,\n  visibleColumns,\n  headerColumn,\n  emptyState\n}: KanbanLaneProps) {\n  const laneRows = lane.getRows?.() ?? [];\n\n  return (\n    <Flex as={StyledKanbanLane} role='listitem' container={{ direction: 'column' }}>\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      <Flex as={StyledKanbanCards} container={{ direction: 'column', gap: 1, pad: 1 }}>\n        {lane.count === 0\n          ? emptyState\n          : laneRows.map(row => (\n              <KanbanCard\n                key={row.reactKey}\n                meta={meta}\n                row={row}\n                visibleColumns={visibleColumns}\n                headerColumn={headerColumn}\n              />\n            ))}\n      </Flex>\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"]}
+{"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

@@ -7,5 +7,6 @@ declare function KanbanLaneHeader({ column, groupHeader }: KanbanLaneHeaderProps
 declare namespace KanbanLaneHeader {
     var displayName: string;
 }
-export default KanbanLaneHeader;
+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

@@ -1 +1 @@
-{"version":3,"file":"KanbanLaneHeader.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLaneHeader.tsx"],"names":[],"mappings":"AAAA,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,eAAe,gBAAgB,CAAC"}
+{"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

@@ -1,4 +1,5 @@
 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) {
@@ -11,5 +12,5 @@ function KanbanLaneHeader({ column, groupHeader }) {
         } }));
 }
 KanbanLaneHeader.displayName = 'KanbanLaneHeader';
-export default KanbanLaneHeader;
+export default memo(KanbanLaneHeader);
 //# sourceMappingURL=KanbanLaneHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"KanbanLaneHeader.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLaneHeader.tsx"],"names":[],"mappings":";AAEA,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,gBAAgB,CAAC","sourcesContent":["import 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 KanbanLaneHeader;\n"]}
+{"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"}

package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useItemIntersection } from '@pega/cosmos-react-core';
+// Lanes mounted when a board or lane grouping is first displayed.
+const INITIAL_LANE_COUNT = 3;
+// Additional right-side lanes mounted when the current final lane enters the scrollport.
+const APPEND_LANE_COUNT = 2;
+// Minimum lanes to display so the intersection observer can always fire to trigger further loading.
+const MINIMUM_OBSERVED_LANE_COUNT = 2;
+/**
+ * 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 }) {
+    const boardRef = useRef(null);
+    const totalLaneCount = lanes.length;
+    const [mountedLaneCount, setMountedLaneCount] = useState(INITIAL_LANE_COUNT);
+    const clampLaneCount = useCallback((count) => Math.max(Math.min(count, totalLaneCount), Math.min(MINIMUM_OBSERVED_LANE_COUNT, totalLaneCount)), [totalLaneCount]);
+    // A new grouping or lane catalog starts with the initial lane window.
+    useEffect(() => {
+        setMountedLaneCount(INITIAL_LANE_COUNT);
+    }, [groupKey, totalLaneCount]);
+    const appendLanes = useCallback(() => {
+        // Keep prior lanes mounted so their independent vertical scroll positions are retained.
+        setMountedLaneCount(prev => clampLaneCount(prev + APPEND_LANE_COUNT));
+    }, [clampLaneCount]);
+    useItemIntersection(boardRef, mountedLaneCount - 1, appendLanes, ':scope > [data-kanban-lane]');
+    return { boardRef, visibleLanes: lanes.slice(0, mountedLaneCount) };
+}
+//# sourceMappingURL=useKanbanLanesVirtualization.js.map

package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKanbanLanesVirtualization.js","sourceRoot":"","sources":["../../../../../Core/Views/Kanban/hooks/useKanbanLanesVirtualization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAG9D,kEAAkE;AAClE,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC7B,yFAAyF;AACzF,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,oGAAoG;AACpG,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAYtC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACnD,QAAQ,EACR,KAAK,EAC+B;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;IACpC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAE7E,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAa,EAAU,EAAE,CACxB,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,EAC/B,IAAI,CAAC,GAAG,CAAC,2BAA2B,EAAE,cAAc,CAAC,CACtD,EACH,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,sEAAsE;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,wFAAwF;QACxF,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,IAAI,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,6BAA6B,CAAC,CAAC;IAEhG,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,gBAAgB,CAAC,EAAE,CAAC;AACtE,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useItemIntersection } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\n// Lanes mounted when a board or lane grouping is first displayed.\nconst INITIAL_LANE_COUNT = 3;\n// Additional right-side lanes mounted when the current final lane enters the scrollport.\nconst APPEND_LANE_COUNT = 2;\n// Minimum lanes to display so the intersection observer can always fire to trigger further loading.\nconst MINIMUM_OBSERVED_LANE_COUNT = 2;\n\ninterface UseKanbanLanesVirtualizationOptions {\n  groupKey?: string;\n  lanes: RsCoreTypes.GroupGenerator[];\n}\n\ninterface KanbanLanesVirtualization {\n  boardRef: React.RefObject<HTMLDivElement>;\n  visibleLanes: RsCoreTypes.GroupGenerator[];\n}\n\n/**\n * Progressively mounts right-side Kanban lanes while retaining already mounted lanes and their\n * vertical scroll positions. Resets the lane window for a new grouping or refreshed lane catalog.\n *\n * @param groupKey - Active lane grouping identifier.\n * @param lanes - Lanes available for the active grouping.\n */\nexport default function useKanbanLanesVirtualization({\n  groupKey,\n  lanes\n}: UseKanbanLanesVirtualizationOptions): KanbanLanesVirtualization {\n  const boardRef = useRef<HTMLDivElement>(null);\n\n  const totalLaneCount = lanes.length;\n  const [mountedLaneCount, setMountedLaneCount] = useState(INITIAL_LANE_COUNT);\n\n  const clampLaneCount = useCallback(\n    (count: number): number =>\n      Math.max(\n        Math.min(count, totalLaneCount),\n        Math.min(MINIMUM_OBSERVED_LANE_COUNT, totalLaneCount)\n      ),\n    [totalLaneCount]\n  );\n\n  // A new grouping or lane catalog starts with the initial lane window.\n  useEffect(() => {\n    setMountedLaneCount(INITIAL_LANE_COUNT);\n  }, [groupKey, totalLaneCount]);\n\n  const appendLanes = useCallback(() => {\n    // Keep prior lanes mounted so their independent vertical scroll positions are retained.\n    setMountedLaneCount(prev => clampLaneCount(prev + APPEND_LANE_COUNT));\n  }, [clampLaneCount]);\n\n  useItemIntersection(boardRef, mountedLaneCount - 1, appendLanes, ':scope > [data-kanban-lane]');\n\n  return { boardRef, visibleLanes: lanes.slice(0, mountedLaneCount) };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAsB1F,iBAAS,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CA0FnD;kBA1FQ,MAAM;;;AA8Ff,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAwB/E,iBAAS,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CA8FnD;kBA9FQ,MAAM;;;AAkGf,eAAe,MAAM,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { usePrevious, useFullscreenContext, useTheme, Grid, isInstance } from '@pega/cosmos-react-core';
-import { FieldType, getGroupKey } from 'pega-repeating-structures-core';
+import { getGroupKey } from 'pega-repeating-structures-core';
 import Toolbar from '../../Components/Toolbar';
 import RenderView from '../../Components/RenderingEngine/RenderView';
 import { EXTERNAL_FILTERS } from '../../constants';
@@ -11,8 +11,10 @@ import LoadingIndicator from '../../Components/LoadingIndicator';
 import WarningBanner from '../../Components/WarningBanner';
 import useTranslate from '../../Hooks/useTranslate';
 import { isFilterApplied } from '../../Utils';
+import { getCardColumns } from '../../Components/Card';
 import KanbanLane, { EmptyKanbanLane } from './KanbanLane';
 import { StyledKanbanBoard, StyledKanbanContainer } from './Kanban.styles';
+import useKanbanLanesVirtualization from './hooks/useKanbanLanesVirtualization';
 function getLaneId(laneColumn, value) {
     return `${laneColumn?.field.id ?? ''}:${isInstance(value, Date) ? value.toISOString() : String(value)}`;
 }
@@ -34,6 +36,12 @@ function Kanban({ view }) {
     const laneGroupKey = laneGroup ? getGroupKey(laneGroup) : undefined;
     const hasStaleLanes = !!firstGroupHeader?.groupBy && firstGroupHeader.groupBy !== laneGroupKey;
     const lanes = hasLaneConfiguration && !hasStaleLanes ? groupHeaders : [];
+    const laneSourceKey = laneGroup ? `${laneGroupKey}:${laneGroup.order}` : undefined;
+    // Lanes virtualization
+    const { boardRef, visibleLanes } = useKanbanLanesVirtualization({
+        groupKey: laneSourceKey,
+        lanes
+    });
     // Empty state configuration
     const previousTotalItemCount = usePrevious(view.totalItemCount);
     const emptyMessage = isFilterApplied({ filterExpression, searchText, externalState }, meta.externalFilters)
@@ -41,22 +49,14 @@ function Kanban({ view }) {
         : translate('No records');
     const shouldAnnounceEmpty = (previousTotalItemCount ?? 0) > 0 && view.totalItemCount === 0;
     const emptyState = (_jsx(EmptyContainer, { message: emptyMessage, shouldAnnounce: shouldAnnounceEmpty, domContainer: view.getDomContainer(), transparent: true }));
-    const visibleColumns = useMemo(() => {
-        return [...columns]
-            .filter(col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE)
-            .sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));
-    }, [columns]);
-    const headerColumn = useMemo(() => {
-        const cardHeaderField = meta.cardConfig?.header?.field;
-        return cardHeaderField ? columns.find(col => col.field.id === cardHeaderField) : undefined;
-    }, [meta.cardConfig?.header?.field, columns]);
-    return (_jsx(RsCardWrapper, { children: _jsxs(StyledKanbanContainer, { "data-testid": 'kanban', view: view, isFullscreen: isFullscreen, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(Grid, { as: StyledKanbanBoard, role: 'list', "aria-label": meta.title ?? meta.name, container: {
+    const { visibleColumns, headerColumn, subHeadingsColumns } = useMemo(() => getCardColumns(columns, meta.cardConfig ?? {}), [columns, meta.cardConfig]);
+    return (_jsx(RsCardWrapper, { children: _jsxs(StyledKanbanContainer, { "data-testid": 'kanban', view: view, isFullscreen: isFullscreen, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(Grid, { as: StyledKanbanBoard, ref: boardRef, role: 'list', "aria-label": meta.title ?? meta.name, container: {
                         autoFlow: 'column',
                         autoCols: `minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)`,
                         gap: 1.5,
                         pad: 0.5
                     }, children: [!shouldRenderEmptyLane &&
-                            lanes.map(lane => (_jsx(KanbanLane, { lane: lane, laneColumn: laneColumn, meta: meta, visibleColumns: visibleColumns, headerColumn: headerColumn, emptyState: emptyState }, getLaneId(laneColumn, lane.name)))), shouldRenderEmptyLane && _jsx(EmptyKanbanLane, { emptyState: emptyState }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
+                            visibleLanes.map(lane => (_jsx(KanbanLane, { laneId: getLaneId(laneColumn, lane.name), lane: lane, laneColumn: laneColumn, meta: meta, visibleColumns: visibleColumns, headerColumn: headerColumn, subHeadingsColumns: subHeadingsColumns, emptyState: emptyState }, getLaneId(laneColumn, lane.name)))), shouldRenderEmptyLane && _jsx(EmptyKanbanLane, { emptyState: emptyState }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
 }
 Kanban.displayName = 'Kanban';
 export default Kanban;