@pega/lists-react 9.0.0-build.6.15 → 9.0.0-build.6.16

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js

@@ -101,7 +101,7 @@ const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dat
                                         itemGap: 0.5
                                     }, children: [_jsx(StyledDragHandle, { forwardedAs: 'div', role: 'button', icon: true, variant: 'simple', compact: true, ...dragProps, children: _jsx(Icon, { name: 'drag' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { label: t('field'), labelHidden: true, columns: columns?.filter(c => c.field.grouping &&
                                                     (c.field.id.toString() === group.columnId.toString() ||
-                                                        !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { "aria-label": t('delete_group'), icon: true, variant: 'simple', onClick: () => removeGroup(index), children: _jsx(Icon, { name: 'trash' }) })] })))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
+                                                        !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeGroup(index), label: t('delete_group'), children: _jsx(Icon, { name: 'trash' }) })] })))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
                             inline: true,
                             alignItems: 'start',
                             gap: 1

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getFieldType } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\n\nconst StyledDragHandle = styled(Button)`\n  cursor: grab;\n`;\n\ninterface GroupRendererProps {\n  appliedGroups: AppliedGroup[];\n  groupingOptions: GroupingOptions;\n  setGroups: (groups: (Group | { id: string })[]) => void;\n  columns: RsCoreTypes.Column[];\n  dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n}\n\nconst GroupRenderer = ({\n  appliedGroups,\n  groupingOptions,\n  setGroups,\n  columns,\n  dateFunctions\n}: GroupRendererProps) => {\n  const t = useI18n();\n  const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n  const dragDropRef = useRef<HTMLDivElement>(null);\n  const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n  const onDrop = useCallback(\n    (dest: Element, src: Element) => {\n      const dropIndex = Number(dest.getAttribute('data-index'));\n      const dragIndex = Number(src.getAttribute('data-index'));\n      if (dragIndex !== dropIndex) {\n        const existingGroups = appliedGroups.map(v => ({ ...v }));\n        const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n        existingGroups.splice(dropIndex, 0, dragGroup);\n        setGroups(existingGroups);\n      }\n    },\n    [appliedGroups, setGroups]\n  );\n  const { dragProps, dropProps } = useDragDrop({\n    context: dragDropRef,\n    getAnimationSelector,\n    getGhostImageSelector: getAnimationSelector,\n    getDraggedObject: getAnimationSelector,\n    onDrop\n  });\n\n  const removeGroup = useCallback(\n    (index: number) => {\n      const existingGroups = appliedGroups.map(v => ({ ...v }));\n      existingGroups.splice(index, 1);\n      setGroups(existingGroups);\n\n      if (existingGroups.length > 0)\n        setFocusRowId(\n          index === appliedGroups.length - 1\n            ? existingGroups[index - 1].id\n            : existingGroups[index].id\n        );\n    },\n    [appliedGroups, setGroups, setFocusRowId]\n  );\n\n  const handleColumnChange = useCallback(\n    (group: Group, index: number, newID: string) => {\n      if (newID === group.columnId) return; // Ignore re-selecting the same\n      const updatedGroup: Group = {\n        ...group,\n        columnId: newID,\n        dateFunction: undefined // Reset for non-date/time fields\n      };\n\n      // For date/datetime field, pick a date function by default (if enabled)\n      const fieldType = getFieldType(newID, columns);\n      if (dateFunctions && (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {\n        updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n          ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n          : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n      }\n\n      setGroups([\n        ...appliedGroups.slice(0, index),\n        updatedGroup,\n        ...appliedGroups.slice(index + 1)\n      ]);\n    },\n    [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n  );\n\n  const handleDateFuncChange = useCallback(\n    (group: Group, index: number, newFunc: Group['dateFunction']) => {\n      if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n      const updatedGroup = { ...group, dateFunction: newFunc };\n      setGroups([\n        ...appliedGroups.slice(0, index),\n        updatedGroup,\n        ...appliedGroups.slice(index + 1)\n      ]);\n    },\n    [setGroups, appliedGroups]\n  );\n\n  const addRow = useCallback(() => {\n    const newRow = { id: createUID(), columnId: '', order: 'asc' };\n    const existingGroups = [...appliedGroups, newRow];\n    setGroups(existingGroups);\n    setFocusRowId(newRow.id);\n  }, [appliedGroups, setGroups, setFocusRowId]);\n\n  useEffect(() => {\n    if (!appliedGroups.length) {\n      addRow();\n    }\n  }, [appliedGroups, addRow]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n      <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n        {appliedGroups.map((group, index) => (\n          <div {...dropProps} data-index={index} key={group.id}>\n            <Flex\n              container={{\n                justify: 'between',\n                alignItems: 'center',\n                direction: 'row',\n                wrap: 'nowrap',\n                itemGap: 0.5\n              }}\n              ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n            >\n              <Flex item={{ grow: 1 }}>\n                <Flex\n                  container={{\n                    justify: 'start',\n                    alignItems: 'center',\n                    direction: 'row',\n                    wrap: 'nowrap',\n                    itemGap: 0.5\n                  }}\n                >\n                  <StyledDragHandle\n                    forwardedAs='div'\n                    role='button'\n                    icon\n                    variant='simple'\n                    compact\n                    {...dragProps}\n                  >\n                    <Icon name='drag' />\n                  </StyledDragHandle>\n                  <Flex item={{ grow: 1 }}>\n                    <FieldSelector\n                      label={t('field')}\n                      labelHidden\n                      columns={columns?.filter(\n                        c =>\n                          c.field.grouping &&\n                          (c.field.id.toString() === group.columnId.toString() ||\n                            !groupingOptions.exhaustedFields.has(c.field.id))\n                      )}\n                      value={group.columnId}\n                      disabled={!!group.customFunction}\n                      onChange={(newID: string) => handleColumnChange(group, index, newID)}\n                      fieldProp='id'\n                    />\n                  </Flex>\n                  <DateFunctionSelector\n                    group={group}\n                    groupingOptions={groupingOptions}\n                    dateFunctions={dateFunctions}\n                    columns={columns}\n                    onChange={(newFunc: Group['dateFunction']) =>\n                      handleDateFuncChange(group, index, newFunc)\n                    }\n                  />\n                </Flex>\n              </Flex>\n              <Button\n                aria-label={t('delete_group')}\n                icon\n                variant='simple'\n                onClick={() => removeGroup(index)}\n              >\n                <Icon name='trash' />\n              </Button>\n            </Flex>\n          </div>\n        ))}\n      </Flex>\n      <div>\n        <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n          <Flex\n            container={{\n              inline: true,\n              alignItems: 'start',\n              gap: 1\n            }}\n            as='span'\n          >\n            <Icon name='plus' />\n            <span>{t('add')}</span>\n          </Flex>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\nexport default GroupRenderer;\n"]}
+{"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getFieldType } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\n\nconst StyledDragHandle = styled(Button)`\n  cursor: grab;\n`;\n\ninterface GroupRendererProps {\n  appliedGroups: AppliedGroup[];\n  groupingOptions: GroupingOptions;\n  setGroups: (groups: (Group | { id: string })[]) => void;\n  columns: RsCoreTypes.Column[];\n  dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n}\n\nconst GroupRenderer = ({\n  appliedGroups,\n  groupingOptions,\n  setGroups,\n  columns,\n  dateFunctions\n}: GroupRendererProps) => {\n  const t = useI18n();\n  const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n  const dragDropRef = useRef<HTMLDivElement>(null);\n  const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n  const onDrop = useCallback(\n    (dest: Element, src: Element) => {\n      const dropIndex = Number(dest.getAttribute('data-index'));\n      const dragIndex = Number(src.getAttribute('data-index'));\n      if (dragIndex !== dropIndex) {\n        const existingGroups = appliedGroups.map(v => ({ ...v }));\n        const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n        existingGroups.splice(dropIndex, 0, dragGroup);\n        setGroups(existingGroups);\n      }\n    },\n    [appliedGroups, setGroups]\n  );\n  const { dragProps, dropProps } = useDragDrop({\n    context: dragDropRef,\n    getAnimationSelector,\n    getGhostImageSelector: getAnimationSelector,\n    getDraggedObject: getAnimationSelector,\n    onDrop\n  });\n\n  const removeGroup = useCallback(\n    (index: number) => {\n      const existingGroups = appliedGroups.map(v => ({ ...v }));\n      existingGroups.splice(index, 1);\n      setGroups(existingGroups);\n\n      if (existingGroups.length > 0)\n        setFocusRowId(\n          index === appliedGroups.length - 1\n            ? existingGroups[index - 1].id\n            : existingGroups[index].id\n        );\n    },\n    [appliedGroups, setGroups, setFocusRowId]\n  );\n\n  const handleColumnChange = useCallback(\n    (group: Group, index: number, newID: string) => {\n      if (newID === group.columnId) return; // Ignore re-selecting the same\n      const updatedGroup: Group = {\n        ...group,\n        columnId: newID,\n        dateFunction: undefined // Reset for non-date/time fields\n      };\n\n      // For date/datetime field, pick a date function by default (if enabled)\n      const fieldType = getFieldType(newID, columns);\n      if (dateFunctions && (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {\n        updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n          ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n          : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n      }\n\n      setGroups([\n        ...appliedGroups.slice(0, index),\n        updatedGroup,\n        ...appliedGroups.slice(index + 1)\n      ]);\n    },\n    [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n  );\n\n  const handleDateFuncChange = useCallback(\n    (group: Group, index: number, newFunc: Group['dateFunction']) => {\n      if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n      const updatedGroup = { ...group, dateFunction: newFunc };\n      setGroups([\n        ...appliedGroups.slice(0, index),\n        updatedGroup,\n        ...appliedGroups.slice(index + 1)\n      ]);\n    },\n    [setGroups, appliedGroups]\n  );\n\n  const addRow = useCallback(() => {\n    const newRow = { id: createUID(), columnId: '', order: 'asc' };\n    const existingGroups = [...appliedGroups, newRow];\n    setGroups(existingGroups);\n    setFocusRowId(newRow.id);\n  }, [appliedGroups, setGroups, setFocusRowId]);\n\n  useEffect(() => {\n    if (!appliedGroups.length) {\n      addRow();\n    }\n  }, [appliedGroups, addRow]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n      <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n        {appliedGroups.map((group, index) => (\n          <div {...dropProps} data-index={index} key={group.id}>\n            <Flex\n              container={{\n                justify: 'between',\n                alignItems: 'center',\n                direction: 'row',\n                wrap: 'nowrap',\n                itemGap: 0.5\n              }}\n              ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n            >\n              <Flex item={{ grow: 1 }}>\n                <Flex\n                  container={{\n                    justify: 'start',\n                    alignItems: 'center',\n                    direction: 'row',\n                    wrap: 'nowrap',\n                    itemGap: 0.5\n                  }}\n                >\n                  <StyledDragHandle\n                    forwardedAs='div'\n                    role='button'\n                    icon\n                    variant='simple'\n                    compact\n                    {...dragProps}\n                  >\n                    <Icon name='drag' />\n                  </StyledDragHandle>\n                  <Flex item={{ grow: 1 }}>\n                    <FieldSelector\n                      label={t('field')}\n                      labelHidden\n                      columns={columns?.filter(\n                        c =>\n                          c.field.grouping &&\n                          (c.field.id.toString() === group.columnId.toString() ||\n                            !groupingOptions.exhaustedFields.has(c.field.id))\n                      )}\n                      value={group.columnId}\n                      disabled={!!group.customFunction}\n                      onChange={(newID: string) => handleColumnChange(group, index, newID)}\n                      fieldProp='id'\n                    />\n                  </Flex>\n                  <DateFunctionSelector\n                    group={group}\n                    groupingOptions={groupingOptions}\n                    dateFunctions={dateFunctions}\n                    columns={columns}\n                    onChange={(newFunc: Group['dateFunction']) =>\n                      handleDateFuncChange(group, index, newFunc)\n                    }\n                  />\n                </Flex>\n              </Flex>\n              <Button\n                icon\n                variant='simple'\n                onClick={() => removeGroup(index)}\n                label={t('delete_group')}\n              >\n                <Icon name='trash' />\n              </Button>\n            </Flex>\n          </div>\n        ))}\n      </Flex>\n      <div>\n        <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n          <Flex\n            container={{\n              inline: true,\n              alignItems: 'start',\n              gap: 1\n            }}\n            as='span'\n          >\n            <Icon name='plus' />\n            <span>{t('add')}</span>\n          </Flex>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\nexport default GroupRenderer;\n"]}

package/lib/Core/Components/Toolbar/hooks/useSort/Row.js

@@ -35,7 +35,7 @@ const Row = ({ updateSortItemId, updateSortItemOrder, columns, removeSortItem, s
                             if (o) {
                                 updateSortItemOrder(e, sequence, o.id);
                             }
-                        }, children: [_jsx("option", { value: '', children: translate('Select...') }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }), _jsx(Flex, { item: true, children: _jsx(Button, { "aria-label": translate('Remove sort'), icon: true, variant: 'simple', onClick: () => removeSortItem(index, order), children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
+                        }, children: [_jsx("option", { value: '', children: translate('Select...') }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }), _jsx(Flex, { item: true, children: _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeSortItem(index, order), label: translate('Remove sort'), children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
 };
 Row.propTypes = {
     updateSortItemId: PropTypes.func.isRequired,

package/lib/Core/Components/Toolbar/hooks/useSort/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Flex, Icon, Option, Select } from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledDragHandle = styled(Button)(({ theme }) => {\n  return css`\n    cursor: grab;\n    margin-block: calc(${theme.base.spacing} * 0.5);\n\n    @media (pointer: coarse) {\n      margin-block: calc(${theme.base.spacing} * 1.25);\n    }\n  `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst Row = ({\n  updateSortItemId,\n  updateSortItemOrder,\n  columns,\n  removeSortItem,\n  sortItems,\n  index,\n  id,\n  order,\n  sequence,\n  dragProps,\n  dropProps,\n  focusRowRef\n}) => {\n  const [translate] = useTranslate();\n  const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);\n  if (!validSortColumnsInRow || !validSortColumnsInRow.length) return null;\n  const validSortOrders = getValidSortOrders();\n  const { label } = validSortOrders.find(v => v.id === order) || {};\n\n  return (\n    <div {...dropProps} data-sequence={sequence}>\n      <Flex\n        container={{\n          justify: 'between',\n          alignItems: 'end',\n          direction: 'row',\n          wrap: 'no-wrap',\n          itemGap: 0.5\n        }}\n        ref={focusRowRef}\n      >\n        <StyledDragHandle\n          forwardedAs='div'\n          role='button'\n          icon\n          variant='simple'\n          compact\n          {...dragProps}\n        >\n          <Icon name='drag' />\n        </StyledDragHandle>\n        <Flex item={{ grow: 1 }}>\n          <FieldSelector\n            label={translate('Field')}\n            columns={validSortColumnsInRow}\n            value={id}\n            onChange={newID => updateSortItemId(newID, sequence)}\n            fieldProp='id'\n          />\n        </Flex>\n        <Flex item={{ grow: 1 }}>\n          <Select\n            label={translate('Sort order')}\n            className='select-sorts'\n            data-testid='SortSelector'\n            value={label}\n            onChange={e => {\n              const o = validSortOrders.find(v => v.label === e.target.value);\n              if (o) {\n                updateSortItemOrder(e, sequence, o.id);\n              }\n            }}\n          >\n            <option value=''>{translate('Select...')}</option>\n            {validSortOrders.map((v, i) => (\n              <Option key={keyFrom(v.label, i)} value={v.label}>\n                {translate(v.label)}\n              </Option>\n            ))}\n          </Select>\n        </Flex>\n        <Flex item>\n          <Button\n            aria-label={translate('Remove sort')}\n            icon\n            variant='simple'\n            onClick={() => removeSortItem(index, order)}\n          >\n            <Icon name='trash' />\n          </Button>\n        </Flex>\n      </Flex>\n    </div>\n  );\n};\n\nRow.propTypes = {\n  updateSortItemId: PropTypes.func.isRequired,\n  updateSortItemOrder: PropTypes.func.isRequired,\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  removeSortItem: PropTypes.func.isRequired,\n  sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  index: PropTypes.number.isRequired,\n  order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  dragProps: PropTypes.objectOf(PropTypes.any).isRequired,\n  dropProps: PropTypes.objectOf(PropTypes.any).isRequired,\n  focusRowRef: PropTypes.objectOf(PropTypes.any)\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Flex, Icon, Option, Select } from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledDragHandle = styled(Button)(({ theme }) => {\n  return css`\n    cursor: grab;\n    margin-block: calc(${theme.base.spacing} * 0.5);\n\n    @media (pointer: coarse) {\n      margin-block: calc(${theme.base.spacing} * 1.25);\n    }\n  `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst Row = ({\n  updateSortItemId,\n  updateSortItemOrder,\n  columns,\n  removeSortItem,\n  sortItems,\n  index,\n  id,\n  order,\n  sequence,\n  dragProps,\n  dropProps,\n  focusRowRef\n}) => {\n  const [translate] = useTranslate();\n  const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);\n  if (!validSortColumnsInRow || !validSortColumnsInRow.length) return null;\n  const validSortOrders = getValidSortOrders();\n  const { label } = validSortOrders.find(v => v.id === order) || {};\n\n  return (\n    <div {...dropProps} data-sequence={sequence}>\n      <Flex\n        container={{\n          justify: 'between',\n          alignItems: 'end',\n          direction: 'row',\n          wrap: 'no-wrap',\n          itemGap: 0.5\n        }}\n        ref={focusRowRef}\n      >\n        <StyledDragHandle\n          forwardedAs='div'\n          role='button'\n          icon\n          variant='simple'\n          compact\n          {...dragProps}\n        >\n          <Icon name='drag' />\n        </StyledDragHandle>\n        <Flex item={{ grow: 1 }}>\n          <FieldSelector\n            label={translate('Field')}\n            columns={validSortColumnsInRow}\n            value={id}\n            onChange={newID => updateSortItemId(newID, sequence)}\n            fieldProp='id'\n          />\n        </Flex>\n        <Flex item={{ grow: 1 }}>\n          <Select\n            label={translate('Sort order')}\n            className='select-sorts'\n            data-testid='SortSelector'\n            value={label}\n            onChange={e => {\n              const o = validSortOrders.find(v => v.label === e.target.value);\n              if (o) {\n                updateSortItemOrder(e, sequence, o.id);\n              }\n            }}\n          >\n            <option value=''>{translate('Select...')}</option>\n            {validSortOrders.map((v, i) => (\n              <Option key={keyFrom(v.label, i)} value={v.label}>\n                {translate(v.label)}\n              </Option>\n            ))}\n          </Select>\n        </Flex>\n        <Flex item>\n          <Button\n            icon\n            variant='simple'\n            onClick={() => removeSortItem(index, order)}\n            label={translate('Remove sort')}\n          >\n            <Icon name='trash' />\n          </Button>\n        </Flex>\n      </Flex>\n    </div>\n  );\n};\n\nRow.propTypes = {\n  updateSortItemId: PropTypes.func.isRequired,\n  updateSortItemOrder: PropTypes.func.isRequired,\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  removeSortItem: PropTypes.func.isRequired,\n  sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  index: PropTypes.number.isRequired,\n  order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  dragProps: PropTypes.objectOf(PropTypes.any).isRequired,\n  dropProps: PropTypes.objectOf(PropTypes.any).isRequired,\n  focusRowRef: PropTypes.objectOf(PropTypes.any)\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+export interface ItemsHeight {
+    [index: number]: number;
+}
+export interface LoadedDataRange {
+    startIndex?: number;
+    endIndex?: number;
+}
+export interface VariableHeightVirtualizerProps {
+    /** Unique identifier for the virtualizer instance. */
+    id: string;
+    /** The React children elements to render inside the virtualizer. */
+    children: ReactNode;
+    /** Callback to fetch paginated data. */
+    apiCallback: (params: {
+        startIndex: number;
+        endIndex: number;
+        id: string;
+    }, options: {
+        takeLatestAction: boolean;
+    }) => void;
+    /** Indicates if data is currently being fetched. */
+    isDataFetching: boolean;
+    /** Range of data that is already loaded. */
+    loadedDataRange: LoadedDataRange;
+    /** Default height for items if not measured. */
+    defaultItemHeight?: number;
+    /** Total number of items in the list. */
+    totalItemCount?: number | null;
+    /** Number of items to buffer before/after the visible range. */
+    buffer?: number;
+    /** Maximum number of items to render at once. */
+    maxItemsToPaint?: number;
+    /** Function to render the header. */
+    headerRenderer?: (() => ReactNode) | null;
+    /** Function to render the footer. */
+    footerRenderer?: (() => ReactNode) | null;
+    /** Function to render the no-result state. */
+    noResultRenderer?: (() => ReactNode) | null;
+    /** CSS class for the item container. */
+    itemContainerClass?: string;
+    /** Maximum height for the view container. */
+    viewMaxHeight?: string | number | null;
+    /** Minimum height for the view container. */
+    minHeight?: string | number;
+    /** Minimum height when no items are rendered. */
+    minHeightWhenNoItemsRendered?: string;
+}
+interface VirtualizerRef {
+    /** Scrolls the parent container to the top. */
+    scrollToTop: () => void;
+    /** Returns the parent container element. */
+    getParentContainer: () => HTMLElement | null;
+    /** Returns the buffer container element. */
+    getBufferContainer: () => HTMLElement | null;
+    /** Triggers a count change notification. */
+    notifyCountChange: () => void;
+}
+/**
+ * Flow:
+ * 1. First load/user scrolls/screen size change/column resize
+ * 2. Calculate new pagination range based on scroll position or if view not filled
+ * 3. Consumer executes API call to fetch new data
+ * 4. New items are prepared and rendered
+ * 5. Update cache of item heights
+ * 6. Update buffer height
+ * 7. Adjust itemContainer top
+ * 8. Adjust scrollTop (if needed) to keep the items at same position visually
+ */
+/**
+ * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,
+ * using virtualization techniques to minimize DOM nodes and improve performance.
+ *
+ * @param props - {@link VariableHeightVirtualizerProps}
+ * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.
+ *
+ * @example
+ * ```tsx
+ * <VariableHeightVirtualizer
+ *   id="my-list"
+ *   totalItemCount={10000}
+ *   loadedDataRange={{ startIndex: 0, endIndex: 49 }}
+ *   isDataFetching={isLoading}
+ *   apiCallback={fetchData}
+ *   defaultItemHeight={40}
+ *   buffer={10}
+ *   headerRenderer={() => <Header />}
+ *   footerRenderer={() => <Footer />}
+ *   noResultRenderer={() => <NoResults />}
+ * >
+ *   {items.map(item => <ListItem key={item.id} {...item} />)}
+ * </VariableHeightVirtualizer>
+ * ```
+ */
+declare const VariableHeightVirtualizer: import("react").ForwardRefExoticComponent<VariableHeightVirtualizerProps & import("react").RefAttributes<VirtualizerRef>>;
+export default VariableHeightVirtualizer;
+//# sourceMappingURL=VariableHeightVirtualizer.d.ts.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableHeightVirtualizer.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAsBrD,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,MAAM,WAAW,8BAA8B;IAC7C,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAC5D,OAAO,EAAE;QAAE,gBAAgB,EAAE,OAAO,CAAA;KAAE,KACnC,IAAI,CAAC;IACV,oDAAoD;IACpD,cAAc,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,eAAe,EAAE,eAAe,CAAC;IACjC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,qCAAqC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC5C,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACvC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,iDAAiD;IACjD,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,cAAc;IACtB,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAaD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,yBAAyB,2HA0T9B,CAAC;AAIF,eAAe,yBAAyB,CAAC"}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
+import Styled from 'styled-components';
+import { Progress } from '@pega/cosmos-react-core';
+import useResizeObserver from '../UseResizeObserver';
+import useTranslate from '../../../Hooks/useTranslate';
+import useChildrenHeightResizeObserver from './useChildrenHeightResizeObserver';
+import useLoaderPositioning from './useLoaderPositioning';
+import usePagination from './usePagination';
+import useScroll from './useScroll';
+import useVirtualizerItemCount from './useVirtualizerItemCount';
+import { calculateCumulativeItemSizeChange, getMaxHeight, isViewNotFilled, calculateTotalBufferHeight, getChangedItemsHeight, updateItemPositionStyles } from './utils';
+const StyledLoader = Styled.div `
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem;
+  position: absolute;
+  width: var(--container-width);
+  left: ${props => `var(${props.$style.left})`};
+  top: ${props => `var(${props.$style.top})`};
+  width: 100%;
+`;
+/**
+ * Flow:
+ * 1. First load/user scrolls/screen size change/column resize
+ * 2. Calculate new pagination range based on scroll position or if view not filled
+ * 3. Consumer executes API call to fetch new data
+ * 4. New items are prepared and rendered
+ * 5. Update cache of item heights
+ * 6. Update buffer height
+ * 7. Adjust itemContainer top
+ * 8. Adjust scrollTop (if needed) to keep the items at same position visually
+ */
+/**
+ * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,
+ * using virtualization techniques to minimize DOM nodes and improve performance.
+ *
+ * @param props - {@link VariableHeightVirtualizerProps}
+ * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.
+ *
+ * @example
+ * ```tsx
+ * <VariableHeightVirtualizer
+ *   id="my-list"
+ *   totalItemCount={10000}
+ *   loadedDataRange={{ startIndex: 0, endIndex: 49 }}
+ *   isDataFetching={isLoading}
+ *   apiCallback={fetchData}
+ *   defaultItemHeight={40}
+ *   buffer={10}
+ *   headerRenderer={() => <Header />}
+ *   footerRenderer={() => <Footer />}
+ *   noResultRenderer={() => <NoResults />}
+ * >
+ *   {items.map(item => <ListItem key={item.id} {...item} />)}
+ * </VariableHeightVirtualizer>
+ * ```
+ */
+const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCallback, loadedDataRange = {}, defaultItemHeight = 30, totalItemCount, maxItemsToPaint = 5000, headerRenderer = null, footerRenderer = null, noResultRenderer = null, itemContainerClass = '', viewMaxHeight = null, minHeight = 'auto', isDataFetching = false, minHeightWhenNoItemsRendered = 'auto' }, ref) => {
+    const [startIndex, setStartIndex] = useState(0);
+    const [endIndex, setEndIndex] = useState(0);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [totalBufferHeight, setTotalBufferHeight] = useState(0);
+    const [itemsHeight, setItemsHeight] = useState({});
+    const [itemContainerHeight, setItemContainerHeight] = useState(0);
+    const [countChangeTrigger, setCountChangeTrigger] = useState(0);
+    const [itemHeightChangeTrigger, setItemHeightChangeTrigger] = useState(0);
+    const [parentContainerDimensionChangeTrigger, setParentContainerDimensionChangeTrigger] = useState(0);
+    const parentContainerRef = useRef(null);
+    const bufferContainerRef = useRef(null);
+    const itemContainerRef = useRef(null);
+    const previousItemsHeightRef = useRef({});
+    const previousFirstItemDataIndexRef = useRef(null);
+    const [translate] = useTranslate();
+    const onParentContainerDimensionUpdate = useCallback(() => {
+        const { height: parentContainerHeight, width: parentContainerWidth } = parentContainerRef.current?.getBoundingClientRect() ?? {};
+        // trigger virtualizer operations only when the container has some height and width
+        if (parentContainerHeight && parentContainerWidth) {
+            setParentContainerDimensionChangeTrigger(value => value + 1);
+        }
+    }, []);
+    const getParentContainer = useCallback(() => parentContainerRef.current, []);
+    useResizeObserver(getParentContainer, onParentContainerDimensionUpdate);
+    const { isInfiniteMode, virtualizedCount } = useVirtualizerItemCount({
+        totalItemCount,
+        startIndex,
+        endIndex,
+        loadedDataRange,
+        isDataFetching,
+        itemContainerRef,
+        children,
+        buffer,
+        countResetSignal: countChangeTrigger
+    });
+    const { triggerPagination, isForceRefreshedPagination } = usePagination({
+        apiCallback,
+        id,
+        buffer,
+        maxItemsToPaint,
+        startIndex,
+        endIndex,
+        virtualizedCount,
+        isInfiniteMode,
+        itemsHeight,
+        defaultItemHeight,
+        parentContainerRef,
+        itemContainerRef,
+        setStartIndex,
+        setEndIndex,
+        previousFirstItemDataIndexRef
+    });
+    // Listens to the scroll events and trigger pagination when more records are needed to enable smooth scrolling
+    useScroll({
+        parentContainerRef,
+        itemContainerRef,
+        onThresholdBreach: (sTop) => {
+            setScrollTop(sTop);
+            triggerPagination(sTop);
+        },
+        delay: 150
+    });
+    // Expose APIs to the consumer
+    useImperativeHandle(ref, () => ({
+        scrollToTop: () => {
+            if (parentContainerRef.current) {
+                parentContainerRef.current.scrollTop = 0;
+                setScrollTop(0);
+                triggerPagination(0, true);
+            }
+        },
+        getParentContainer: () => parentContainerRef.current,
+        getBufferContainer: () => itemContainerRef.current,
+        notifyCountChange: () => setCountChangeTrigger(value => value + 1)
+    }));
+    // Measure height of rendered items and cache the heights
+    useLayoutEffect(() => {
+        if (!itemContainerRef.current)
+            return;
+        const newHeights = getChangedItemsHeight(itemContainerRef.current, itemsHeight, defaultItemHeight);
+        if (Object.keys(newHeights).length > 0) {
+            setItemsHeight((prev) => ({ ...prev, ...newHeights }));
+        }
+    }, [
+        startIndex,
+        itemsHeight,
+        children,
+        isDataFetching,
+        defaultItemHeight,
+        itemHeightChangeTrigger
+    ]);
+    // buffer height calculation
+    useLayoutEffect(() => {
+        const newBufferHeight = calculateTotalBufferHeight(virtualizedCount, itemsHeight, defaultItemHeight);
+        if (newBufferHeight !== totalBufferHeight) {
+            setTotalBufferHeight(newBufferHeight);
+        }
+    }, [itemsHeight, virtualizedCount, defaultItemHeight, totalBufferHeight]);
+    // itemContainer size and position adjustments
+    useLayoutEffect(() => {
+        if (!itemContainerRef.current)
+            return;
+        setItemContainerHeight(updateItemPositionStyles(itemContainerRef.current, itemsHeight, defaultItemHeight));
+    }, [children, itemsHeight, defaultItemHeight]);
+    // scroll position adjustment if rendered height is different than estimated height
+    useLayoutEffect(() => {
+        if (!parentContainerRef.current)
+            return;
+        const atTop = parentContainerRef.current.scrollTop === 0;
+        if (!atTop) {
+            const delta = calculateCumulativeItemSizeChange(startIndex, previousFirstItemDataIndexRef.current, itemsHeight, previousItemsHeightRef.current, defaultItemHeight);
+            if (delta !== 0) {
+                parentContainerRef.current.scrollTop += delta;
+            }
+        }
+        previousItemsHeightRef.current = { ...itemsHeight };
+    }, [startIndex, itemsHeight, defaultItemHeight]);
+    // Adjust loader positions
+    useLoaderPositioning({
+        isDataFetching,
+        parentContainerRef,
+        itemContainerRef,
+        children,
+        itemsHeight,
+        defaultItemHeight
+    });
+    // Initial pagination trigger and subsequent triggers if the view is not completely filled
+    useEffect(() => {
+        // If consumer already has data for initial items, then no need to trigger pagination. Just hydrate the internal state in sync with existing data.
+        if (!endIndex &&
+            loadedDataRange.startIndex !== undefined &&
+            loadedDataRange.startIndex >= 0 &&
+            loadedDataRange.endIndex !== undefined &&
+            loadedDataRange.endIndex >= 0) {
+            setStartIndex(loadedDataRange.startIndex);
+            setEndIndex(loadedDataRange.endIndex);
+            return;
+        }
+        // If the consumer doesn't have data or view not filled then trigger pagination
+        if (!isDataFetching &&
+            (!endIndex ||
+                (itemContainerRef.current &&
+                    parentContainerRef.current &&
+                    isViewNotFilled(virtualizedCount, itemContainerRef.current, parentContainerRef.current, !!headerRenderer)))) {
+            triggerPagination(scrollTop);
+        }
+    }, [
+        loadedDataRange,
+        scrollTop,
+        virtualizedCount,
+        endIndex,
+        triggerPagination,
+        parentContainerDimensionChangeTrigger,
+        isDataFetching,
+        headerRenderer
+    ]);
+    // Resize observer on items to track height changes
+    const onItemsHeightUpdate = useCallback(() => {
+        setItemHeightChangeTrigger(value => value + 1);
+    }, []);
+    useChildrenHeightResizeObserver({
+        childrenContainerRef: itemContainerRef,
+        children,
+        itemsHeight,
+        defaultItemHeight,
+        onItemsHeightUpdate
+    });
+    const maxHeight = useMemo(() => getMaxHeight(viewMaxHeight), [viewMaxHeight]);
+    return (_jsxs("div", { ref: parentContainerRef, style: {
+            maxHeight,
+            minHeight: virtualizedCount === 0 ? minHeightWhenNoItemsRendered : minHeight,
+            overflowY: 'auto',
+            position: 'relative',
+            width: '100%'
+        }, className: 'pContainer variableHeightVirtualizer', children: [headerRenderer && headerRenderer(), _jsxs("div", { className: 'bContainer', ref: bufferContainerRef, style: { height: totalBufferHeight, position: 'relative' }, children: [isDataFetching && !isForceRefreshedPagination && (_jsx(StyledLoader, { "$style": {
+                            top: '--above-loader-top',
+                            left: '--loader-left'
+                        }, children: _jsx(Progress, { className: 'above-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) })), _jsx("div", { ref: itemContainerRef, style: {
+                            position: 'absolute',
+                            left: 0,
+                            width: '100%',
+                            height: `${itemContainerHeight}px`
+                        }, className: `${itemContainerClass} row-container`, children: children }), isDataFetching && !isForceRefreshedPagination && (_jsx(StyledLoader, { "$style": {
+                            top: '--below-loader-top',
+                            left: '--loader-left'
+                        }, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }), virtualizedCount === 0 && !isDataFetching && noResultRenderer ? noResultRenderer() : null, footerRenderer && footerRenderer()] }));
+});
+VariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';
+export default VariableHeightVirtualizer;
+//# sourceMappingURL=VariableHeightVirtualizer.js.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableHeightVirtualizer.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  useImperativeHandle,\n  useMemo\n} from 'react';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport Styled from 'styled-components';\n\nimport { Progress } from '@pega/cosmos-react-core';\n\nimport useResizeObserver from '../UseResizeObserver';\nimport useTranslate from '../../../Hooks/useTranslate';\n\nimport useChildrenHeightResizeObserver from './useChildrenHeightResizeObserver';\nimport useLoaderPositioning from './useLoaderPositioning';\nimport usePagination from './usePagination';\nimport useScroll from './useScroll';\nimport useVirtualizerItemCount from './useVirtualizerItemCount';\nimport {\n  calculateCumulativeItemSizeChange,\n  getMaxHeight,\n  isViewNotFilled,\n  calculateTotalBufferHeight,\n  getChangedItemsHeight,\n  updateItemPositionStyles\n} from './utils';\n\nexport interface ItemsHeight {\n  [index: number]: number;\n}\n\nexport interface LoadedDataRange {\n  startIndex?: number;\n  endIndex?: number;\n}\n\ninterface StyledLoaderProps {\n  $style: {\n    top: string;\n    left: string;\n  };\n}\n\nexport interface VariableHeightVirtualizerProps {\n  /** Unique identifier for the virtualizer instance. */\n  id: string;\n  /** The React children elements to render inside the virtualizer. */\n  children: ReactNode;\n  /** Callback to fetch paginated data. */\n  apiCallback: (\n    params: { startIndex: number; endIndex: number; id: string },\n    options: { takeLatestAction: boolean }\n  ) => void;\n  /** Indicates if data is currently being fetched. */\n  isDataFetching: boolean;\n  /** Range of data that is already loaded. */\n  loadedDataRange: LoadedDataRange;\n  /** Default height for items if not measured. */\n  defaultItemHeight?: number;\n  /** Total number of items in the list. */\n  totalItemCount?: number | null;\n  /** Number of items to buffer before/after the visible range. */\n  buffer?: number;\n  /** Maximum number of items to render at once. */\n  maxItemsToPaint?: number;\n  /** Function to render the header. */\n  headerRenderer?: (() => ReactNode) | null;\n  /** Function to render the footer. */\n  footerRenderer?: (() => ReactNode) | null;\n  /** Function to render the no-result state. */\n  noResultRenderer?: (() => ReactNode) | null;\n  /** CSS class for the item container. */\n  itemContainerClass?: string;\n  /** Maximum height for the view container. */\n  viewMaxHeight?: string | number | null;\n  /** Minimum height for the view container. */\n  minHeight?: string | number;\n  /** Minimum height when no items are rendered. */\n  minHeightWhenNoItemsRendered?: string;\n}\n\ninterface VirtualizerRef {\n  /** Scrolls the parent container to the top. */\n  scrollToTop: () => void;\n  /** Returns the parent container element. */\n  getParentContainer: () => HTMLElement | null;\n  /** Returns the buffer container element. */\n  getBufferContainer: () => HTMLElement | null;\n  /** Triggers a count change notification. */\n  notifyCountChange: () => void;\n}\n\nconst StyledLoader = Styled.div<StyledLoaderProps>`\n  display: flex;\n  justify-content: center;\n  padding: 0.5rem;\n  position: absolute;\n  width: var(--container-width);\n  left: ${props => `var(${props.$style.left})`};\n  top: ${props => `var(${props.$style.top})`};\n  width: 100%;\n`;\n\n/**\n * Flow:\n * 1. First load/user scrolls/screen size change/column resize\n * 2. Calculate new pagination range based on scroll position or if view not filled\n * 3. Consumer executes API call to fetch new data\n * 4. New items are prepared and rendered\n * 5. Update cache of item heights\n * 6. Update buffer height\n * 7. Adjust itemContainer top\n * 8. Adjust scrollTop (if needed) to keep the items at same position visually\n */\n\n/**\n * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,\n * using virtualization techniques to minimize DOM nodes and improve performance.\n *\n * @param props - {@link VariableHeightVirtualizerProps}\n * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.\n *\n * @example\n * ```tsx\n * <VariableHeightVirtualizer\n *   id=\"my-list\"\n *   totalItemCount={10000}\n *   loadedDataRange={{ startIndex: 0, endIndex: 49 }}\n *   isDataFetching={isLoading}\n *   apiCallback={fetchData}\n *   defaultItemHeight={40}\n *   buffer={10}\n *   headerRenderer={() => <Header />}\n *   footerRenderer={() => <Footer />}\n *   noResultRenderer={() => <NoResults />}\n * >\n *   {items.map(item => <ListItem key={item.id} {...item} />)}\n * </VariableHeightVirtualizer>\n * ```\n */\nconst VariableHeightVirtualizer = forwardRef<VirtualizerRef, VariableHeightVirtualizerProps>(\n  (\n    {\n      id,\n      children,\n      buffer = 15,\n      apiCallback,\n      loadedDataRange = {},\n      defaultItemHeight = 30,\n      totalItemCount,\n      maxItemsToPaint = 5000,\n      headerRenderer = null,\n      footerRenderer = null,\n      noResultRenderer = null,\n      itemContainerClass = '',\n      viewMaxHeight = null,\n      minHeight = 'auto',\n      isDataFetching = false,\n      minHeightWhenNoItemsRendered = 'auto'\n    },\n    ref: ForwardedRef<VirtualizerRef>\n  ) => {\n    const [startIndex, setStartIndex] = useState<number>(0);\n    const [endIndex, setEndIndex] = useState<number>(0);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [totalBufferHeight, setTotalBufferHeight] = useState<number>(0);\n    const [itemsHeight, setItemsHeight] = useState<ItemsHeight>({});\n    const [itemContainerHeight, setItemContainerHeight] = useState<number>(0);\n\n    const [countChangeTrigger, setCountChangeTrigger] = useState<number>(0);\n    const [itemHeightChangeTrigger, setItemHeightChangeTrigger] = useState<number>(0);\n    const [parentContainerDimensionChangeTrigger, setParentContainerDimensionChangeTrigger] =\n      useState<number>(0);\n\n    const parentContainerRef = useRef<HTMLDivElement>(null);\n    const bufferContainerRef = useRef<HTMLDivElement>(null);\n    const itemContainerRef = useRef<HTMLDivElement>(null);\n    const previousItemsHeightRef = useRef<ItemsHeight>({});\n    const previousFirstItemDataIndexRef = useRef<number | null>(null);\n\n    const [translate] = useTranslate();\n\n    const onParentContainerDimensionUpdate = useCallback(() => {\n      const { height: parentContainerHeight, width: parentContainerWidth } =\n        parentContainerRef.current?.getBoundingClientRect() ?? {};\n      // trigger virtualizer operations only when the container has some height and width\n      if (parentContainerHeight && parentContainerWidth) {\n        setParentContainerDimensionChangeTrigger(value => value + 1);\n      }\n    }, []);\n\n    const getParentContainer = useCallback(\n      (): HTMLDivElement | null => parentContainerRef.current,\n      []\n    );\n    useResizeObserver(getParentContainer, onParentContainerDimensionUpdate);\n\n    const { isInfiniteMode, virtualizedCount } = useVirtualizerItemCount({\n      totalItemCount,\n      startIndex,\n      endIndex,\n      loadedDataRange,\n      isDataFetching,\n      itemContainerRef,\n      children,\n      buffer,\n      countResetSignal: countChangeTrigger\n    });\n\n    const { triggerPagination, isForceRefreshedPagination } = usePagination({\n      apiCallback,\n      id,\n      buffer,\n      maxItemsToPaint,\n      startIndex,\n      endIndex,\n      virtualizedCount,\n      isInfiniteMode,\n      itemsHeight,\n      defaultItemHeight,\n      parentContainerRef,\n      itemContainerRef,\n      setStartIndex,\n      setEndIndex,\n      previousFirstItemDataIndexRef\n    });\n\n    // Listens to the scroll events and trigger pagination when more records are needed to enable smooth scrolling\n    useScroll({\n      parentContainerRef,\n      itemContainerRef,\n      onThresholdBreach: (sTop: number) => {\n        setScrollTop(sTop);\n        triggerPagination(sTop);\n      },\n      delay: 150\n    });\n\n    // Expose APIs to the consumer\n    useImperativeHandle(\n      ref,\n      (): VirtualizerRef => ({\n        scrollToTop: () => {\n          if (parentContainerRef.current) {\n            parentContainerRef.current.scrollTop = 0;\n            setScrollTop(0);\n\n            triggerPagination(0, true);\n          }\n        },\n        getParentContainer: () => parentContainerRef.current,\n        getBufferContainer: () => itemContainerRef.current,\n        notifyCountChange: () => setCountChangeTrigger(value => value + 1)\n      })\n    );\n\n    // Measure height of rendered items and cache the heights\n    useLayoutEffect(() => {\n      if (!itemContainerRef.current) return;\n\n      const newHeights = getChangedItemsHeight(\n        itemContainerRef.current,\n        itemsHeight,\n        defaultItemHeight\n      );\n      if (Object.keys(newHeights).length > 0) {\n        setItemsHeight((prev: ItemsHeight) => ({ ...prev, ...newHeights }));\n      }\n    }, [\n      startIndex,\n      itemsHeight,\n      children,\n      isDataFetching,\n      defaultItemHeight,\n      itemHeightChangeTrigger\n    ]);\n\n    // buffer height calculation\n    useLayoutEffect(() => {\n      const newBufferHeight = calculateTotalBufferHeight(\n        virtualizedCount,\n        itemsHeight,\n        defaultItemHeight\n      );\n\n      if (newBufferHeight !== totalBufferHeight) {\n        setTotalBufferHeight(newBufferHeight);\n      }\n    }, [itemsHeight, virtualizedCount, defaultItemHeight, totalBufferHeight]);\n\n    // itemContainer size and position adjustments\n    useLayoutEffect(() => {\n      if (!itemContainerRef.current) return;\n\n      setItemContainerHeight(\n        updateItemPositionStyles(itemContainerRef.current, itemsHeight, defaultItemHeight)\n      );\n    }, [children, itemsHeight, defaultItemHeight]);\n\n    // scroll position adjustment if rendered height is different than estimated height\n    useLayoutEffect(() => {\n      if (!parentContainerRef.current) return;\n\n      const atTop = parentContainerRef.current.scrollTop === 0;\n      if (!atTop) {\n        const delta = calculateCumulativeItemSizeChange(\n          startIndex,\n          previousFirstItemDataIndexRef.current,\n          itemsHeight,\n          previousItemsHeightRef.current,\n          defaultItemHeight\n        );\n\n        if (delta !== 0) {\n          parentContainerRef.current.scrollTop += delta;\n        }\n      }\n\n      previousItemsHeightRef.current = { ...itemsHeight };\n    }, [startIndex, itemsHeight, defaultItemHeight]);\n\n    // Adjust loader positions\n    useLoaderPositioning({\n      isDataFetching,\n      parentContainerRef,\n      itemContainerRef,\n      children,\n      itemsHeight,\n      defaultItemHeight\n    });\n\n    // Initial pagination trigger and subsequent triggers if the view is not completely filled\n    useEffect(() => {\n      // If consumer already has data for initial items, then no need to trigger pagination. Just hydrate the internal state in sync with existing data.\n      if (\n        !endIndex &&\n        loadedDataRange.startIndex !== undefined &&\n        loadedDataRange.startIndex >= 0 &&\n        loadedDataRange.endIndex !== undefined &&\n        loadedDataRange.endIndex >= 0\n      ) {\n        setStartIndex(loadedDataRange.startIndex);\n        setEndIndex(loadedDataRange.endIndex);\n        return;\n      }\n\n      // If the consumer doesn't have data or view not filled then trigger pagination\n      if (\n        !isDataFetching &&\n        (!endIndex ||\n          (itemContainerRef.current &&\n            parentContainerRef.current &&\n            isViewNotFilled(\n              virtualizedCount,\n              itemContainerRef.current,\n              parentContainerRef.current,\n              !!headerRenderer\n            )))\n      ) {\n        triggerPagination(scrollTop);\n      }\n    }, [\n      loadedDataRange,\n      scrollTop,\n      virtualizedCount,\n      endIndex,\n      triggerPagination,\n      parentContainerDimensionChangeTrigger,\n      isDataFetching,\n      headerRenderer\n    ]);\n\n    // Resize observer on items to track height changes\n    const onItemsHeightUpdate = useCallback(() => {\n      setItemHeightChangeTrigger(value => value + 1);\n    }, []);\n    useChildrenHeightResizeObserver({\n      childrenContainerRef: itemContainerRef,\n      children,\n      itemsHeight,\n      defaultItemHeight,\n      onItemsHeightUpdate\n    });\n\n    const maxHeight = useMemo((): string => getMaxHeight(viewMaxHeight), [viewMaxHeight]);\n\n    return (\n      <div\n        ref={parentContainerRef}\n        style={{\n          maxHeight,\n          minHeight: virtualizedCount === 0 ? minHeightWhenNoItemsRendered : minHeight,\n          overflowY: 'auto',\n          position: 'relative',\n          width: '100%'\n        }}\n        className='pContainer variableHeightVirtualizer'\n      >\n        {headerRenderer && headerRenderer()}\n        <div\n          className='bContainer'\n          ref={bufferContainerRef}\n          style={{ height: totalBufferHeight, position: 'relative' }}\n        >\n          {isDataFetching && !isForceRefreshedPagination && (\n            <StyledLoader\n              $style={{\n                top: '--above-loader-top',\n                left: '--loader-left'\n              }}\n            >\n              <Progress\n                className='above-loader'\n                placement='block'\n                tabIndex={0}\n                aria-label={translate('Loading more results')}\n              />\n            </StyledLoader>\n          )}\n\n          <div\n            ref={itemContainerRef}\n            style={{\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: `${itemContainerHeight}px`\n            }}\n            className={`${itemContainerClass} row-container`}\n          >\n            {children}\n          </div>\n\n          {isDataFetching && !isForceRefreshedPagination && (\n            <StyledLoader\n              $style={{\n                top: '--below-loader-top',\n                left: '--loader-left'\n              }}\n            >\n              <Progress\n                className='below-loader'\n                placement='block'\n                tabIndex={0}\n                aria-label={translate('Loading more results')}\n              />\n            </StyledLoader>\n          )}\n        </div>\n        {virtualizedCount === 0 && !isDataFetching && noResultRenderer ? noResultRenderer() : null}\n        {footerRenderer && footerRenderer()}\n      </div>\n    );\n  }\n);\n\nVariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';\n\nexport default VariableHeightVirtualizer;\n"]}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode, RefObject } from 'react';
+import type { ItemsHeight } from './VariableHeightVirtualizer';
+interface ChildrenHeightResizeObserverProps {
+    /** A ref to the container DOM element whose children will be observed. */
+    childrenContainerRef: RefObject<HTMLElement>;
+    /** The React children elements rendered inside the container. */
+    children: ReactNode;
+    /** Mapping of item indices and their actual height. */
+    itemsHeight: ItemsHeight;
+    /** The default height to use for items if not measured. */
+    defaultItemHeight: number;
+    /** Callback function invoked when any child's height changes. */
+    onItemsHeightUpdate: () => void;
+}
+/**
+ * Observes the height of child elements within a container and triggers a callback when any child's height changes.
+ *
+ * NOTE: Ensure that each child element has correct data attribute 'data-index'.
+ */
+export default function useChildrenHeightResizeObserver({ childrenContainerRef, children, itemsHeight, defaultItemHeight, onItemsHeightUpdate }: ChildrenHeightResizeObserverProps): void;
+export {};
+//# sourceMappingURL=useChildrenHeightResizeObserver.d.ts.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenHeightResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,UAAU,iCAAiC;IACzC,0EAA0E;IAC1E,oBAAoB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7C,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,2DAA2D;IAC3D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACpB,EAAE,iCAAiC,GAAG,IAAI,CAiC1C"}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { getDataIndex } from './utils';
+/**
+ * Observes the height of child elements within a container and triggers a callback when any child's height changes.
+ *
+ * NOTE: Ensure that each child element has correct data attribute 'data-index'.
+ */
+export default function useChildrenHeightResizeObserver({ childrenContainerRef, children, itemsHeight, defaultItemHeight, onItemsHeightUpdate }) {
+    useEffect(() => {
+        if (!childrenContainerRef.current)
+            return;
+        const items = childrenContainerRef.current.children;
+        if (!items?.length)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            let anyChildHeightChanged = false;
+            for (const entry of entries) {
+                const itemDataIndex = getDataIndex(entry.target);
+                if (itemDataIndex !== null) {
+                    const newHeight = entry.contentRect.height;
+                    if (itemsHeight[itemDataIndex] !== newHeight) {
+                        anyChildHeightChanged = true;
+                    }
+                }
+            }
+            if (anyChildHeightChanged) {
+                onItemsHeightUpdate();
+            }
+        });
+        Array.from(items).forEach((item) => {
+            resizeObserver.observe(item);
+        });
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [children, itemsHeight, defaultItemHeight]);
+}
+//# sourceMappingURL=useChildrenHeightResizeObserver.js.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenHeightResizeObserver.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAgBvC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACe;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,oBAAoB,CAAC,OAAO;YAAE,OAAO;QAE1C,MAAM,KAAK,GAAG,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC;QACpD,IAAI,CAAC,KAAK,EAAE,MAAM;YAAE,OAAO;QAE3B,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAA8B,EAAE,EAAE;YAC3E,IAAI,qBAAqB,GAAG,KAAK,CAAC;YAElC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBACjD,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;oBAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;oBAC3C,IAAI,WAAW,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;wBAC7C,qBAAqB,GAAG,IAAI,CAAC;oBAC/B,CAAC;gBACH,CAAC;YACH,CAAC;YAED,IAAI,qBAAqB,EAAE,CAAC;gBAC1B,mBAAmB,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAa,EAAE,EAAE;YAC1C,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport type { ReactNode, RefObject } from 'react';\n\nimport { getDataIndex } from './utils';\nimport type { ItemsHeight } from './VariableHeightVirtualizer';\n\ninterface ChildrenHeightResizeObserverProps {\n  /** A ref to the container DOM element whose children will be observed. */\n  childrenContainerRef: RefObject<HTMLElement>;\n  /** The React children elements rendered inside the container. */\n  children: ReactNode;\n  /** Mapping of item indices and their actual height. */\n  itemsHeight: ItemsHeight;\n  /** The default height to use for items if not measured. */\n  defaultItemHeight: number;\n  /** Callback function invoked when any child's height changes. */\n  onItemsHeightUpdate: () => void;\n}\n\n/**\n * Observes the height of child elements within a container and triggers a callback when any child's height changes.\n *\n * NOTE: Ensure that each child element has correct data attribute 'data-index'.\n */\nexport default function useChildrenHeightResizeObserver({\n  childrenContainerRef,\n  children,\n  itemsHeight,\n  defaultItemHeight,\n  onItemsHeightUpdate\n}: ChildrenHeightResizeObserverProps): void {\n  useEffect(() => {\n    if (!childrenContainerRef.current) return;\n\n    const items = childrenContainerRef.current.children;\n    if (!items?.length) return;\n\n    const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      let anyChildHeightChanged = false;\n\n      for (const entry of entries) {\n        const itemDataIndex = getDataIndex(entry.target);\n        if (itemDataIndex !== null) {\n          const newHeight = entry.contentRect.height;\n          if (itemsHeight[itemDataIndex] !== newHeight) {\n            anyChildHeightChanged = true;\n          }\n        }\n      }\n\n      if (anyChildHeightChanged) {\n        onItemsHeightUpdate();\n      }\n    });\n\n    Array.from(items).forEach((item: Element) => {\n      resizeObserver.observe(item);\n    });\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [children, itemsHeight, defaultItemHeight]);\n}\n"]}