@pega/lists-react 9.0.0-build.2.8 → 9.0.0-build.20.0

package/lib/Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Flex, Modal, UnorderedList } from '@pega/cosmos-react-core';
+import { dateFunctionLabels, getGroupFromKey, FieldType } from 'pega-repeating-structures-core';
+import useTranslate from '../../Hooks/useTranslate';
+import { useFormattedAdditionalFieldData } from './GroupAdditionalInfo';
+import { GroupName } from '.';
+const DATE_TYPES = [FieldType.DATE, FieldType.DATE_TIME, FieldType.DATE_ONLY];
+const ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT = 10;
+export const isDateLikeField = (type) => {
+    return DATE_TYPES.includes(type);
+};
+const GroupAdditionalFieldDataModalHeading = memo(({ groupHeader, column, view, dateFunction }) => {
+    const { label: groupHeaderLabel, groupBy } = groupHeader;
+    const { type: additionalFieldType } = column.field;
+    const { columns, state: { groups } } = view;
+    const [translate] = useTranslate();
+    const group = getGroupFromKey(groupBy, groups);
+    const groupHeaderColumn = columns?.find(c => c.field.id === group?.columnId);
+    // compute additional field label
+    const additionalFieldLabel = dateFunction && isDateLikeField(additionalFieldType)
+        ? `${column.label} (${translate(dateFunctionLabels[dateFunction])})`
+        : column.label;
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, "data-testid": 'group-additional-field-data-modal-heading', children: [_jsx("span", { children: `${groupHeaderLabel}:` }), _jsxs("span", { children: [_jsx(GroupName, { view: view, column: groupHeaderColumn, groupHeader: groupHeader, dateFunction: group?.dateFunction, customFunction: group?.customFunction }), ","] }), _jsx("span", { children: additionalFieldLabel })] }));
+});
+const AdditionalFieldItemRenderer = ({ value, additionalField, column, groupHeader }) => {
+    const { renderer } = useFormattedAdditionalFieldData({ value, count: 1, id: additionalField.id }, additionalField, { column, meta: column.parent.meta, groupHeader }, 'GroupHeader');
+    return renderer;
+};
+const GroupAdditionalFieldDataModal = ({ groupHeader, additionalField, column }) => {
+    const view = column.parent;
+    const { getAdditionalFieldData } = groupHeader;
+    const [limit, setLimit] = useState(ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT);
+    const [additionalFieldData, setAdditionalFieldData] = useState(null);
+    // Fetch additional field data once on mount
+    useEffect(() => {
+        let isActive = true;
+        (async () => {
+            const data = await getAdditionalFieldData(additionalField);
+            if (isActive && data) {
+                setAdditionalFieldData({ values: data.values, hasMore: data.hasMore });
+            }
+            else if (!data) {
+                setAdditionalFieldData({ values: [], hasMore: false });
+            }
+        })();
+        return () => {
+            isActive = false;
+        };
+    }, [groupHeader, additionalField]);
+    // Toggle between showing limited and all additional field values in unordered list.
+    const handleToggleShow = useCallback(() => {
+        setLimit(prev => prev === ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT && additionalFieldData
+            ? additionalFieldData.values.length
+            : ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT);
+    }, [additionalFieldData]);
+    const values = additionalFieldData?.values ?? [];
+    const hasMore = additionalFieldData?.hasMore ?? false;
+    return (_jsx(Modal, { autoWidth: true, heading: _jsx(GroupAdditionalFieldDataModalHeading, { column: column, dateFunction: 'dateFunction' in additionalField ? additionalField.dateFunction : undefined, groupHeader: groupHeader, view: view }), progress: !additionalFieldData, count: additionalFieldData ? { value: values.length, hasMore } : undefined, "data-testid": 'group-additional-field-data-modal', children: additionalFieldData && (_jsx(UnorderedList, { "data-testid": 'group-additional-field-data-modal-list', onToggleShow: values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? handleToggleShow : undefined, count: values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? values.length : undefined, items: values.slice(0, limit).map(value => (_jsx(AdditionalFieldItemRenderer, { value: value, additionalField: additionalField, column: column, groupHeader: groupHeader }))) })) }));
+};
+export default GroupAdditionalFieldDataModal;
+//# sourceMappingURL=GroupAdditionalFieldDataModal.js.map

package/lib/Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAdditionalFieldDataModal.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useCallback, useEffect, useState } from 'react';\n\nimport { Flex, Modal, UnorderedList, type ExcludeStrict } from '@pega/cosmos-react-core';\nimport {\n  dateFunctionLabels,\n  getGroupFromKey,\n  FieldType,\n  type RsCoreTypes\n} from 'pega-repeating-structures-core';\nimport type { DateFunction } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/core/types';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport { useFormattedAdditionalFieldData } from './GroupAdditionalInfo';\n\nimport { GroupName } from '.';\n\nexport type GroupAdditionalFieldData = RsCoreTypes.GroupGenerator['additionalFieldsData'][0];\nexport type GetAdditionalDataResponse = NonNullable<\n  Awaited<ReturnType<RsCoreTypes.GroupGenerator['getAdditionalFieldData']>>\n>;\ntype FieldTypes = (typeof FieldType)[keyof typeof FieldType];\n\nconst DATE_TYPES: readonly string[] = [FieldType.DATE, FieldType.DATE_TIME, FieldType.DATE_ONLY];\nconst ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT = 10;\n\nexport const isDateLikeField = (\n  type: FieldTypes\n): type is typeof FieldType.DATE | typeof FieldType.DATE_TIME | typeof FieldType.DATE_ONLY => {\n  return DATE_TYPES.includes(type);\n};\n\nconst GroupAdditionalFieldDataModalHeading = memo(\n  ({\n    groupHeader,\n    column,\n    view,\n    dateFunction\n  }: {\n    groupHeader: RsCoreTypes.GroupGenerator;\n    column: RsCoreTypes.Column;\n    view: RsCoreTypes.View;\n    dateFunction: ExcludeStrict<DateFunction, 'SECONDS'> | undefined;\n  }) => {\n    const { label: groupHeaderLabel, groupBy } = groupHeader;\n    const { type: additionalFieldType } = column.field;\n    const {\n      columns,\n      state: { groups }\n    } = view;\n    const [translate] = useTranslate();\n\n    const group = getGroupFromKey(groupBy, groups);\n    const groupHeaderColumn = columns?.find(c => c.field.id === group?.columnId);\n    // compute additional field label\n    const additionalFieldLabel =\n      dateFunction && isDateLikeField(additionalFieldType)\n        ? `${column.label} (${translate(dateFunctionLabels[dateFunction])})`\n        : column.label;\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 1 }}\n        data-testid='group-additional-field-data-modal-heading'\n      >\n        <span>{`${groupHeaderLabel}:`}</span>\n        <span>\n          <GroupName\n            view={view}\n            column={groupHeaderColumn}\n            groupHeader={groupHeader}\n            dateFunction={group?.dateFunction}\n            customFunction={group?.customFunction}\n          />\n          ,\n        </span>\n        <span>{additionalFieldLabel}</span>\n      </Flex>\n    );\n  }\n);\n\nconst AdditionalFieldItemRenderer = ({\n  value,\n  additionalField,\n  column,\n  groupHeader\n}: {\n  value: GroupAdditionalFieldData['value'];\n  additionalField: RsCoreTypes.GroupAdditionalField;\n  column: RsCoreTypes.Column;\n  groupHeader: RsCoreTypes.GroupGenerator;\n}) => {\n  const { renderer } = useFormattedAdditionalFieldData(\n    { value, count: 1, id: additionalField.id },\n    additionalField,\n    { column, meta: column.parent.meta, groupHeader },\n    'GroupHeader'\n  );\n  return renderer;\n};\n\nconst GroupAdditionalFieldDataModal = ({\n  groupHeader,\n  additionalField,\n  column\n}: {\n  groupHeader: RsCoreTypes.GroupGenerator;\n  additionalField: RsCoreTypes.GroupAdditionalField;\n  column: RsCoreTypes.Column;\n}) => {\n  const view = column.parent;\n  const { getAdditionalFieldData } = groupHeader;\n\n  const [limit, setLimit] = useState(ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT);\n  const [additionalFieldData, setAdditionalFieldData] = useState<GetAdditionalDataResponse | null>(\n    null\n  );\n\n  // Fetch additional field data once on mount\n  useEffect(() => {\n    let isActive = true;\n    (async () => {\n      const data = await getAdditionalFieldData(additionalField);\n      if (isActive && data) {\n        setAdditionalFieldData({ values: data.values, hasMore: data.hasMore });\n      } else if (!data) {\n        setAdditionalFieldData({ values: [], hasMore: false });\n      }\n    })();\n    return () => {\n      isActive = false;\n    };\n  }, [groupHeader, additionalField]);\n\n  // Toggle between showing limited and all additional field values in unordered list.\n  const handleToggleShow = useCallback(() => {\n    setLimit(prev =>\n      prev === ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT && additionalFieldData\n        ? additionalFieldData.values.length\n        : ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT\n    );\n  }, [additionalFieldData]);\n\n  const values = additionalFieldData?.values ?? [];\n  const hasMore = additionalFieldData?.hasMore ?? false;\n\n  return (\n    <Modal\n      autoWidth\n      heading={\n        <GroupAdditionalFieldDataModalHeading\n          column={column}\n          dateFunction={\n            'dateFunction' in additionalField ? additionalField.dateFunction : undefined\n          }\n          groupHeader={groupHeader}\n          view={view}\n        />\n      }\n      progress={!additionalFieldData}\n      count={additionalFieldData ? { value: values.length, hasMore } : undefined}\n      data-testid='group-additional-field-data-modal'\n    >\n      {additionalFieldData && (\n        <UnorderedList\n          data-testid='group-additional-field-data-modal-list'\n          onToggleShow={\n            values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? handleToggleShow : undefined\n          }\n          count={values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? values.length : undefined}\n          items={values.slice(0, limit).map(value => (\n            <AdditionalFieldItemRenderer\n              value={value}\n              additionalField={additionalField}\n              column={column}\n              groupHeader={groupHeader}\n            />\n          ))}\n        />\n      )}\n    </Modal>\n  );\n};\n\nexport default GroupAdditionalFieldDataModal;\n"]}

package/lib/Core/Components/GroupRenderer/GroupAdditionalInfo.d.ts

@@ -0,0 +1,33 @@
+import { type RsCoreTypes } from 'pega-repeating-structures-core';
+import { type GroupAdditionalFieldData } from './GroupAdditionalFieldDataModal';
+type AdditionalFieldRendererContext = 'GroupHeader' | 'GroupHeaderTooltip';
+type GroupAdditionalInfoProps = {
+    additionalFieldData: GroupAdditionalFieldData;
+    columns: RsCoreTypes.Column[];
+    groupHeader: RsCoreTypes.GroupGenerator;
+    additionalField: RsCoreTypes.GroupAdditionalField;
+    rendererContext: AdditionalFieldRendererContext;
+};
+export declare const useFormattedAdditionalFieldData: (additionalFieldData: GroupAdditionalFieldData, additionalField: RsCoreTypes.GroupAdditionalField, { column, meta, groupHeader }: {
+    column: RsCoreTypes.Column | null;
+    meta: RsCoreTypes.Meta | null;
+    groupHeader: RsCoreTypes.GroupGenerator;
+}, rendererContext: AdditionalFieldRendererContext) => {
+    label: null;
+    renderer: null;
+} | {
+    label: string;
+    renderer: string | number | null;
+} | {
+    label: string;
+    renderer: import("react/jsx-runtime").JSX.Element | null;
+} | {
+    label: string;
+    renderer: import("react/jsx-runtime").JSX.Element | "Multiple";
+} | {
+    label: string | undefined;
+    renderer: import("react/jsx-runtime").JSX.Element;
+};
+declare const GroupAdditionalInfo: ({ additionalFieldData, columns, groupHeader, additionalField, rendererContext }: GroupAdditionalInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+export default GroupAdditionalInfo;
+//# sourceMappingURL=GroupAdditionalInfo.d.ts.map

package/lib/Core/Components/GroupRenderer/GroupAdditionalInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAdditionalInfo.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/GroupAdditionalInfo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiC,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAcjG,OAAsC,EAEpC,KAAK,wBAAwB,EAC9B,MAAM,iCAAiC,CAAC;AAEzC,KAAK,8BAA8B,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAC3E,KAAK,wBAAwB,GAAG;IAC9B,mBAAmB,EAAE,wBAAwB,CAAC;IAC9C,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC;IACxC,eAAe,EAAE,WAAW,CAAC,oBAAoB,CAAC;IAClD,eAAe,EAAE,8BAA8B,CAAC;CACjD,CAAC;AAgCF,eAAO,MAAM,+BAA+B,GAC1C,qBAAqB,wBAAwB,EAC7C,iBAAiB,WAAW,CAAC,oBAAoB,EACjD,+BAIG;IACD,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC;CACzC,EACD,iBAAiB,8BAA8B;;;;;;;;;;;;;;;CAmGhD,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,iFAM1B,wBAAwB,mDAqC1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/Core/Components/GroupRenderer/GroupAdditionalInfo.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styled from 'styled-components';
+import { Text, useModalManager, Button, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+import useTranslate from '../../Hooks/useTranslate';
+import { getFormattedAggregationValue } from '../AggregateMenu';
+import DateValueDisplay from '../DateValueDisplay';
+import RenderingEngine from '../RenderingEngine/RenderCell';
+import { resolveCellComponent, resolveViewComponent } from '../RenderingEngine/ComponentResolverFactory';
+import GlobalContext from '../../Context/GlobalContext';
+import GroupAdditionalFieldDataModal, { isDateLikeField } from './GroupAdditionalFieldDataModal';
+const isAdditionalFieldWithDateFunction = (additionalField) => {
+    return 'dateFunction' in additionalField && Boolean(additionalField.dateFunction);
+};
+const ConditionalEllipsisText = styled(Text) `
+  ${({ ellipsis }) => ellipsis && ellipsisOverflow}
+  display: inline-flex;
+  min-width: 0;
+`;
+function withGlobalContext(Component) {
+    return function WithGlobalContext(props) {
+        const globalContext = useMemo(() => ({
+            resolveCellComponent,
+            resolveViewComponent
+        }), []);
+        return (_jsx(GlobalContext.Provider, { value: globalContext, children: _jsx(Component, { ...props }) }));
+    };
+}
+export const useFormattedAdditionalFieldData = (additionalFieldData, additionalField, { column, meta, groupHeader }, rendererContext) => {
+    const [translate] = useTranslate();
+    const { create } = useModalManager();
+    if (!column || !meta) {
+        return { label: null, renderer: null };
+    }
+    const { value, count = 0 } = additionalFieldData || {};
+    const { locale, timezone } = meta;
+    const { label, field: { type, name: additionalFieldName } } = column;
+    const isDateFieldWithDateFunction = isDateLikeField(type) && isAdditionalFieldWithDateFunction(additionalField);
+    const dateFunctionLabel = isDateFieldWithDateFunction
+        ? translate(dateFunctionLabels[additionalField.dateFunction])
+        : null;
+    // Additional field as aggregation
+    if ('aggregation' in additionalField &&
+        additionalField.aggregation &&
+        type === FieldType.NUMBER) {
+        return {
+            label: `${label}(${translate(additionalField.aggregation)})`,
+            renderer: typeof value === 'string' || typeof value === 'number'
+                ? getFormattedAggregationValue(value, additionalField.aggregation, column)
+                : null
+        };
+    }
+    // Additional field as Date part
+    if (count === 1 && isDateFieldWithDateFunction) {
+        return {
+            label: `${label}${dateFunctionLabel ? ` (${dateFunctionLabel})` : ''}`,
+            renderer: (typeof value === 'string' || typeof value === 'number') && locale && timezone ? (_jsx(DateValueDisplay, { value: value, dateFunction: additionalField.dateFunction, locale: locale, timezone: timezone })) : null
+        };
+    }
+    // Additional field as normal field but with multiple values.
+    if (count > 1) {
+        return {
+            label: `${label}${dateFunctionLabel ? ` (${dateFunctionLabel})` : ''}`,
+            renderer: rendererContext === 'GroupHeader' ? (_jsx(Button, { variant: 'link', onClick: (event) => {
+                    create(withGlobalContext(GroupAdditionalFieldDataModal), {
+                        groupHeader,
+                        additionalField,
+                        column
+                    });
+                    // Stop propagation to avoid group expand/collapse on button click
+                    event.stopPropagation();
+                }, children: translate('Multiple') })) : (translate('Multiple'))
+        };
+    }
+    // Additional field as normal field.
+    column.setExecutionContext(null);
+    return {
+        label,
+        renderer: (_jsx(RenderingEngine, { ...column.getRenderingEngineProps(),
+            context: {
+                ...column.getContext(),
+                name: 'GroupAdditionalField',
+                getValue: () => value,
+                getExecutionContext: () => {
+                    return {
+                        getValue: () => ({ ...groupHeader.data, [additionalFieldName]: value }),
+                        name: 'groupHeader'
+                    };
+                }
+            } }))
+    };
+};
+const GroupAdditionalInfo = ({ additionalFieldData, columns, groupHeader, additionalField, rendererContext }) => {
+    const { id: fieldId } = additionalFieldData;
+    const column = columns.find(c => c.field.id === fieldId);
+    const { label, renderer } = useFormattedAdditionalFieldData(additionalFieldData, additionalField, { column: column ?? null, meta: column ? column.parent.meta : null, groupHeader }, rendererContext);
+    if (!column) {
+        return null;
+    }
+    const isGroupHeaderContext = rendererContext === 'GroupHeader';
+    return (_jsxs(_Fragment, { children: [_jsx(VisuallyHiddenText, { children: ', ' }), _jsxs(ConditionalEllipsisText, { ellipsis: isGroupHeaderContext, variant: isGroupHeaderContext ? 'secondary' : undefined, "data-testid": 'additional-field-label', children: [label, ":"] }), _jsx(ConditionalEllipsisText, { ellipsis: isGroupHeaderContext, variant: isGroupHeaderContext ? 'secondary' : undefined, "data-testid": 'additional-field-renderer', children: renderer })] }));
+};
+export default GroupAdditionalInfo;
+//# sourceMappingURL=GroupAdditionalInfo.js.map

package/lib/Core/Components/GroupRenderer/GroupAdditionalInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAdditionalInfo.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/GroupAdditionalInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, type ComponentType, type PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport { Text, useModalManager, Button, VisuallyHiddenText } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport type { DateGroupAdditionalField } from 'pega-repeating-structures-core/lib/types/State.types';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport { getFormattedAggregationValue } from '../AggregateMenu';\nimport DateValueDisplay from '../DateValueDisplay';\nimport RenderingEngine from '../RenderingEngine/RenderCell';\nimport {\n  resolveCellComponent,\n  resolveViewComponent\n} from '../RenderingEngine/ComponentResolverFactory';\nimport GlobalContext from '../../Context/GlobalContext';\n\nimport GroupAdditionalFieldDataModal, {\n  isDateLikeField,\n  type GroupAdditionalFieldData\n} from './GroupAdditionalFieldDataModal';\n\ntype AdditionalFieldRendererContext = 'GroupHeader' | 'GroupHeaderTooltip';\ntype GroupAdditionalInfoProps = {\n  additionalFieldData: GroupAdditionalFieldData;\n  columns: RsCoreTypes.Column[];\n  groupHeader: RsCoreTypes.GroupGenerator;\n  additionalField: RsCoreTypes.GroupAdditionalField;\n  rendererContext: AdditionalFieldRendererContext;\n};\n\nconst isAdditionalFieldWithDateFunction = (\n  additionalField: RsCoreTypes.GroupAdditionalField\n): additionalField is Required<DateGroupAdditionalField> => {\n  return 'dateFunction' in additionalField && Boolean(additionalField.dateFunction);\n};\n\nconst ConditionalEllipsisText = styled(Text)<{ ellipsis: boolean }>`\n  ${({ ellipsis }) => ellipsis && ellipsisOverflow}\n  display: inline-flex;\n  min-width: 0;\n`;\n\nfunction withGlobalContext<P>(Component: ComponentType<P>) {\n  return function WithGlobalContext(props: PropsWithChildren<P>) {\n    const globalContext = useMemo(\n      () => ({\n        resolveCellComponent,\n        resolveViewComponent\n      }),\n      []\n    );\n\n    return (\n      <GlobalContext.Provider value={globalContext}>\n        <Component {...props} />\n      </GlobalContext.Provider>\n    );\n  };\n}\n\nexport const useFormattedAdditionalFieldData = (\n  additionalFieldData: GroupAdditionalFieldData,\n  additionalField: RsCoreTypes.GroupAdditionalField,\n  {\n    column,\n    meta,\n    groupHeader\n  }: {\n    column: RsCoreTypes.Column | null;\n    meta: RsCoreTypes.Meta | null;\n    groupHeader: RsCoreTypes.GroupGenerator;\n  },\n  rendererContext: AdditionalFieldRendererContext\n) => {\n  const [translate] = useTranslate();\n  const { create } = useModalManager();\n  if (!column || !meta) {\n    return { label: null, renderer: null };\n  }\n\n  const { value, count = 0 } = additionalFieldData || {};\n  const { locale, timezone } = meta;\n  const {\n    label,\n    field: { type, name: additionalFieldName }\n  } = column;\n  const isDateFieldWithDateFunction =\n    isDateLikeField(type) && isAdditionalFieldWithDateFunction(additionalField);\n  const dateFunctionLabel = isDateFieldWithDateFunction\n    ? translate(dateFunctionLabels[additionalField.dateFunction])\n    : null;\n  // Additional field as aggregation\n  if (\n    'aggregation' in additionalField &&\n    additionalField.aggregation &&\n    type === FieldType.NUMBER\n  ) {\n    return {\n      label: `${label}(${translate(additionalField.aggregation)})`,\n      renderer:\n        typeof value === 'string' || typeof value === 'number'\n          ? getFormattedAggregationValue(value, additionalField.aggregation, column)\n          : null\n    };\n  }\n\n  // Additional field as Date part\n  if (count === 1 && isDateFieldWithDateFunction) {\n    return {\n      label: `${label}${dateFunctionLabel ? ` (${dateFunctionLabel})` : ''}`,\n      renderer:\n        (typeof value === 'string' || typeof value === 'number') && locale && timezone ? (\n          <DateValueDisplay\n            value={value}\n            dateFunction={additionalField.dateFunction}\n            locale={locale}\n            timezone={timezone}\n          />\n        ) : null\n    };\n  }\n\n  // Additional field as normal field but with multiple values.\n  if (count > 1) {\n    return {\n      label: `${label}${dateFunctionLabel ? ` (${dateFunctionLabel})` : ''}`,\n      renderer:\n        rendererContext === 'GroupHeader' ? (\n          <Button\n            variant='link'\n            onClick={(event: MouseEvent) => {\n              create(withGlobalContext(GroupAdditionalFieldDataModal), {\n                groupHeader,\n                additionalField,\n                column\n              });\n              // Stop propagation to avoid group expand/collapse on button click\n              event.stopPropagation();\n            }}\n          >\n            {translate('Multiple')}\n          </Button>\n        ) : (\n          translate('Multiple')\n        )\n    };\n  }\n\n  // Additional field as normal field.\n  column.setExecutionContext(null);\n  return {\n    label,\n    renderer: (\n      <RenderingEngine\n        {...{\n          ...column.getRenderingEngineProps(),\n          context: {\n            ...column.getContext(),\n            name: 'GroupAdditionalField',\n            getValue: () => value,\n            getExecutionContext: () => {\n              return {\n                getValue: () => ({ ...groupHeader.data, [additionalFieldName]: value }),\n                name: 'groupHeader'\n              };\n            }\n          }\n        }}\n      />\n    )\n  };\n};\n\nconst GroupAdditionalInfo = ({\n  additionalFieldData,\n  columns,\n  groupHeader,\n  additionalField,\n  rendererContext\n}: GroupAdditionalInfoProps) => {\n  const { id: fieldId } = additionalFieldData;\n  const column = columns.find(c => c.field.id === fieldId);\n\n  const { label, renderer } = useFormattedAdditionalFieldData(\n    additionalFieldData,\n    additionalField,\n    { column: column ?? null, meta: column ? column.parent.meta : null, groupHeader },\n    rendererContext\n  );\n\n  if (!column) {\n    return null;\n  }\n\n  const isGroupHeaderContext = rendererContext === 'GroupHeader';\n\n  return (\n    <>\n      {/* For screen readers. */}\n      <VisuallyHiddenText>{', '}</VisuallyHiddenText>\n      <ConditionalEllipsisText\n        ellipsis={isGroupHeaderContext}\n        variant={isGroupHeaderContext ? 'secondary' : undefined}\n        data-testid='additional-field-label'\n      >\n        {label}:\n      </ConditionalEllipsisText>\n      <ConditionalEllipsisText\n        ellipsis={isGroupHeaderContext}\n        variant={isGroupHeaderContext ? 'secondary' : undefined}\n        data-testid='additional-field-renderer'\n      >\n        {renderer}\n      </ConditionalEllipsisText>\n    </>\n  );\n};\n\nexport default GroupAdditionalInfo;\n"]}

package/lib/Core/Components/{GroupRenderer.d.ts → GroupRenderer/index.d.ts}

@@ -1,3 +1,10 @@
+export function GroupName({ view, column, groupHeader, dateFunction, customFunction }: {
+    view: any;
+    column: any;
+    groupHeader: any;
+    dateFunction: any;
+    customFunction: any;
+}): any;
 declare function GroupHeader({ groupHeader, columns }: {
     groupHeader: any;
     columns: any;
@@ -12,4 +19,4 @@ declare namespace GroupHeader {
 }
 export default GroupHeader;
 import PropTypes from 'prop-types';
-//# sourceMappingURL=GroupRenderer.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/Core/Components/GroupRenderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"AA+PA;;;;;;QAwCC;AA2GD;;;mDAiJC;;;;;;;;;;sBAniBqB,YAAY"}

package/lib/Core/Components/GroupRenderer/index.js

@@ -0,0 +1,367 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { useRef, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Icon, Text, MetaList, Tooltip, VisuallyHiddenText, Flex } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { getGroupFromKey } from 'pega-ui-list-data-apis';
+import { createClassName as cx } from '../../Utils';
+import useTranslate from '../../Hooks/useTranslate';
+import { customFunctions, intervalGroupingBoundaries } from '../../constants';
+import AggregatorCell from '../AggregatorCell';
+import RenderingEngine from '../RenderingEngine/RenderCell';
+import DateValueDisplay from '../DateValueDisplay';
+import TestIdConstants from '../TestIdConstants';
+import GroupAdditionalInfo from './GroupAdditionalInfo';
+const groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;
+const ColorBadge = styled.div(({ theme, colorIndicator }) => {
+    const borderVerticalOuter = theme.components.table.border['vertical-outer'];
+    return css `
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 10;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      width: 0.25rem;
+      height: 100%;
+      background-color: ${colorIndicator};
+      z-index: 12;
+
+      /* Apply border radius to group header when table vertical outer border was disabled */
+      ${!borderVerticalOuter &&
+        css `
+        border-top-left-radius: min(${theme.base['border-radius']}, 0.25rem);
+        border-bottom-left-radius: min(${theme.base['border-radius']}, 0.25rem);
+      `}
+    }
+  `;
+});
+/**
+ * TODO: remove currentColor style after cosmos fixes the issue
+ * Cosmos yet to handle dark theme on BareButton
+ */
+const StyledGroupHeader = styled.div(({ theme, isAggregationApplied, groupHeader }) => {
+    const borderVerticalOuter = theme.components.table.border['vertical-outer'];
+    const borderHorizontalInner = theme.components.table.border['horizontal-inner'];
+    return css `
+    --group-left: ${groupheaderleftdisplacement(groupHeader)};
+    background-color: var(--group-bg-color);
+
+    &:has(button[aria-expanded='true']) {
+      filter: ${theme.base.shadow['low-filter']};
+    }
+
+    ${!borderHorizontalInner &&
+        css `
+      filter: ${theme.base.shadow['low-filter']};
+    `}
+
+    &.row.sticky-group-header {
+      position: sticky;
+      display: block;
+      top: calc(
+        ${groupHeader.isLeafNode && groupHeader.level !== 0
+        ? 'calc(var(--row-height) + var(--group-header-height))'
+        : 'var(--row-height)'}
+      );
+
+      /* z-index starting from 8 because freeze-line has z-index 7 */
+      z-index: ${`${8 + groupHeader.index}`};
+      > .cell-action,
+      .cell-fixed {
+        background-color: var(--group-bg-color);
+      }
+    }
+
+    .group-label {
+      width: 0.437rem;
+      display: inline-block;
+      flex-shrink: 0;
+    }
+
+    .group-header-groupby {
+      font-weight: ${theme.base['font-weight'].normal};
+    }
+
+    .group-context-count .group-count {
+      font-weight: ${theme.base['font-weight'].bold};
+      white-space: pre;
+    }
+
+    &.row.group-header-row {
+      height: auto;
+      border-bottom: ${!isAggregationApplied && borderHorizontalInner
+        ? 'var(--border-style)'
+        : 'none'};
+
+      .group-header-aggregation-row {
+        display: flex;
+
+        /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */
+        height: ${isAggregationApplied ? 'var(--group-header-height)' : 0};
+      }
+    }
+
+    /* Apply border radius to group header when table vertical outer border was disabled */
+    ${!borderVerticalOuter &&
+        css `
+      /* consider three group-header-rows stacked vertically, the first and second group headers have RULE 2 AND RULE 3 applied, the third group-header has only RULE 3 applied */
+      &.group-header-row {
+        /* RULE 1- if there are no adjacent group-headers, apply border-radius to all corners */
+        border-radius: min(${theme.base['border-radius']}, 0.25rem);
+
+        /* RULE-2- if there is an adjacent group-header below, remove bottom border-radius */
+        &:has(+ .group-header-row) {
+          border-radius: 0;
+
+          & ${ColorBadge}::before {
+            border-radius: 0;
+          }
+        }
+
+        /*RULE 3- if there is an adjacent group-header, go to the adjacent group header and remove top border-radius */
+        &:has(+ .group-header-row) + .group-header-row {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+
+          & ${ColorBadge}::before {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+      }
+    `}
+
+    &.group-header-row .stickyGroupHeader {
+      position: sticky;
+      left: 0;
+      width: 0;
+      z-index: 10;
+      height: var(--group-header-height);
+
+      > button {
+        color: currentColor;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: max-content;
+        max-width: var(--container-width);
+        display: flex;
+        align-items: center;
+        background-color: var(--group-bg-color);
+        padding-left: var(--group-left);
+        margin-inline-start: 0.25rem;
+        z-index: 30;
+        cursor: pointer;
+        white-space: nowrap;
+        text-align: inherit;
+        font-stretch: inherit;
+
+        > .group-wrapper {
+          margin-inline-start: ${groupHeader.count === 0
+        ? `calc(${theme.base.spacing} * 2.25)`
+        : 'unset'};
+          align-items: baseline;
+        }
+
+        .cell-content {
+          max-height: var(--group-header-height);
+          padding: 0;
+        }
+      }
+      button:focus {
+        box-shadow: ${theme.base.shadow['focus-inset']};
+      }
+    }
+    .group-header.cell {
+      left: 0;
+      padding-left: var(--group-left);
+    }
+
+    div.group-header.cell-fixed {
+      background-color: var(--group-bg-color);
+    }
+  `;
+});
+const StyledMetaList = styled(MetaList) `
+  margin-inline-start: 0;
+
+  /* Overrides default MetaList padding and margin which was causing text-overflow issues */
+  margin: 0;
+  padding: 0 0.3rem;
+`;
+const GroupAdditionalInfoSeparator = styled.span `
+  margin-inline-start: 0.3rem;
+`;
+/**
+ * Generates unique ARIA label IDs for accessibility.
+ * - groupLabelId: for the group label (e.g., "Status:")
+ * - groupNameId: for the group value (e.g., "Open")
+ * - additionalInfoIds: for any additional fields shown in the group header
+ * These IDs are used in aria-labelledby to improve screen reader support.
+ */
+const getAriaLabelIds = (uniqueId, additionalFields) => {
+    const groupLabelId = `group-label-${uniqueId}`;
+    const groupNameId = `group-name-${uniqueId}`;
+    const additionalInfoIds = additionalFields?.map(additionalField => `group-additional-info-${uniqueId}-${additionalField.id}` /* used in aria-labelledby */);
+    return { groupLabelId, groupNameId, additionalInfoIds };
+};
+/**
+ *  Returns label for interval grouping based on interval and boundaries
+  Response data depends on boundary settings.
+ Ex: For sample data of profit
+    profit  --> cases(count)
+   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}
+  For Interval 10
+  If the boundary is 'include-lower-only',
+    and  value is 10 then label -> 10 to 20
+
+  If boundary is 'include-upper-only',
+    and value is 10 then label ->  0 to 10
+  * */
+function buildIntervalGroupingLabel(value, customFunction, translate) {
+    const { interval, boundaries } = customFunction;
+    // To restrict the decimals in labels
+    const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;
+    value = Number(value);
+    // In case of 'include-lower-only'
+    let lowerValue = value.toFixed(intervalDecimalLength);
+    let upperValue = (value + interval).toFixed(intervalDecimalLength);
+    // In case of boundary 'include-upper-only'
+    if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {
+        lowerValue = (value - interval).toFixed(intervalDecimalLength);
+        upperValue = value.toFixed(intervalDecimalLength);
+    }
+    return `${lowerValue} ${translate('to')} ${upperValue}`;
+}
+export function GroupName({ view, column, groupHeader, dateFunction, customFunction }) {
+    const [translate] = useTranslate();
+    const { locale, timezone } = view.meta;
+    const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;
+    const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;
+    if (dateFunction) {
+        return (_jsx(DateValueDisplay, { value: groupHeader.name, dateFunction: dateFunction, locale: locale, timezone: timezone }));
+    }
+    if (isRangeGrouping) {
+        /** If custom range grouping applied on number field , we need to show group name as text instead of number */
+        return groupHeader.name;
+    }
+    if (isIntervalGrouping) {
+        /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */
+        return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);
+    }
+    column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)
+    const columnRendererProps = {
+        ...column.getRenderingEngineProps(),
+        context: {
+            getValue: () => groupHeader.name,
+            getExecutionContext: () => {
+                return { getValue: () => groupHeader.data, name: 'groupHeader' };
+            }
+        }
+    };
+    return _jsx(RenderingEngine, { ...columnRendererProps });
+}
+/**
+ * Tooltip content for the group header.
+ * Shows the group label, value, and any additional fields.
+ * Used for hover/focus tooltips on the group header button.
+ */
+function GroupHeaderToolTip({ column, groupHeader, columns, additionalFields, target }) {
+    const view = column.parent;
+    const { dateFunction, customFunction } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
+    const formatter = view.getFormatterByKey('Integer');
+    const { locale } = view.meta;
+    const groupCountFormatted = formatter
+        ? formatter(groupHeader.count, { locale })
+        : groupHeader.count;
+    return (_jsxs(Tooltip, { smart: true, target: target, showDelay: 'short', hideDelay: 'none', describeTarget: false, children: [_jsxs(Text, { children: [!column.field.hideGroupColumnNameLabel && groupHeader.label, ": "] }), _jsxs(Text, { children: [_jsx(GroupName, { view: view, column: column, groupHeader: groupHeader, dateFunction: dateFunction, customFunction: customFunction }), _jsx(Text, { children: ` (${groupCountFormatted})` })] }), !!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (_jsx(_Fragment, { children: groupHeader.additionalFieldsData?.map(additionalFieldData => {
+                    return (_jsxs(_Fragment, { children: [' • ', _jsx(GroupAdditionalInfo, { groupHeader: groupHeader, additionalField: additionalFields.find(additionalField => additionalField.id === additionalFieldData.id), columns: columns, additionalFieldData: additionalFieldData, rendererContext: 'GroupHeaderTooltip' })] }));
+                }) }))] }));
+}
+/**
+ * Renders the main group header label and count.
+ * - Shows the group label (e.g., "Status:") unless hidden by column config.
+ * - Shows the group value and item count.
+ * - Uses ARIA IDs for accessibility.
+ */
+function GroupHeaderLabel({ column, groupHeader }) {
+    const view = column.parent;
+    const { dateFunction, customFunction } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
+    const formatter = view.getFormatterByKey('Integer');
+    const { locale } = view.meta;
+    const groupCountFormatted = formatter
+        ? formatter(groupHeader.count, { locale })
+        : groupHeader.count;
+    const { groupLabelId, groupNameId } = getAriaLabelIds(groupHeader.uniqueId);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'group-label' }), !column.field.hideGroupColumnNameLabel && (_jsxs("span", { className: 'group-header-groupby', "data-test-id": groupHeader.groupBy, "data-testid": `${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`, id: groupLabelId, children: [groupHeader.label, ":"] })), _jsx("div", { className: 'group-label' }), _jsxs("span", { className: 'group-context-count', style: { display: 'inline-flex' }, "data-test-id": 'groupHeader', "data-testid": TestIdConstants.groupHeaderCount, id: groupNameId, children: [_jsx(GroupName, { view: view, column: column, groupHeader: groupHeader, dateFunction: dateFunction, customFunction: customFunction }), _jsx("span", { className: 'group-count', children: ` (${groupCountFormatted})` }), _jsx(VisuallyHiddenText, { children: " items" })] })] }));
+}
+// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable
+export default function GroupHeader({ groupHeader, columns }) {
+    const buttonRef = useRef();
+    const view = columns[0].parent;
+    const toggleGroup = useCallback(() => {
+        if (groupHeader.count > 0) {
+            view.type.toggleGroupExpansion({ groupHeader });
+        }
+    }, [groupHeader, view]);
+    // TODO: This we are adding temporary to show freeze border until we make group header rendering change
+    // when we will pick up aggregation.
+    if (!groupHeader.isVisible)
+        return null;
+    // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer
+    const { columnId, additionalFields = [] } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
+    // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined
+    if (!columnId) {
+        return null;
+    }
+    const column = columns.find(c => c.field.id === columnId);
+    const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);
+    // Generate unique ARIA label IDs for accessibility
+    const { groupLabelId, groupNameId, additionalInfoIds = [] } = getAriaLabelIds(groupHeader.uniqueId, additionalFields);
+    let groupAdditionalInfo;
+    // Prepare additional info components if present
+    if (groupHeader.additionalFieldsData?.length && additionalFields.length) {
+        groupAdditionalInfo = groupHeader.additionalFieldsData.reduce((acc, additionalFieldData, idx) => {
+            const additionalField = additionalFields.find(field => field.id === additionalFieldData.id);
+            if (additionalField) {
+                acc.push(_jsx(Flex, { container: { gap: 0.5 }, id: additionalInfoIds[idx], children: _jsx(GroupAdditionalInfo, { additionalFieldData: additionalFieldData, additionalField: additionalField, columns: columns, groupHeader: groupHeader, rendererContext: 'GroupHeader' }) }));
+            }
+            return acc;
+        }, []);
+    }
+    // FIXME: Import rather than COPY, i would rather
+    return (_jsx(StyledGroupHeader, { groupHeader: groupHeader, className: cx('row group-header-row sticky-group-header'), "data-test-id": 'groupHeader', "data-testid": `${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`, isAggregationApplied: isAggregationApplied, role: 'row', onFocus: e => {
+            if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {
+                e.preventDefault();
+                buttonRef.current.focus();
+            }
+        }, children: _jsxs(Flex, { container: true, children: [_jsx(ColorBadge, { colorIndicator: groupHeader.colorIndicator }), _jsxs("div", { children: [_jsxs("div", { className: 'stickyGroupHeader', children: [_jsxs(BareButton, { ref: buttonRef, "aria-labelledby": [groupLabelId, groupNameId, ...additionalInfoIds].join(' '), "aria-expanded": !!groupHeader.isExpanded, style: {
+                                        paddingRight: 'var(--group-left)'
+                                    }, onClick: () => toggleGroup(), onKeyDown: event => {
+                                        if (event.key === 'Enter') {
+                                            // Prevent capturing of group header toggle click to its child renderers.
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            toggleGroup();
+                                        }
+                                    }, tabIndex: -1, icon: true, children: [groupHeader.count > 0 &&
+                                            (groupHeader.isExpanded ? _jsx(Icon, { name: 'caret-down' }) : _jsx(Icon, { name: 'caret-right' })), _jsxs("div", { className: 'group-wrapper', children: [_jsx(GroupHeaderLabel, { column: column, groupHeader: groupHeader }), groupAdditionalInfo && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', as: GroupAdditionalInfoSeparator, children: "\u2022" }), _jsx(StyledMetaList, { wrapItems: false, items: groupAdditionalInfo })] }))] })] }), buttonRef.current && (_jsx(GroupHeaderToolTip, { target: buttonRef.current, column: column, groupHeader: groupHeader, columns: columns, additionalFields: additionalFields }))] }), _jsx("div", { className: 'group-header-aggregation-row', children: columns.map(c => {
+                                const cxt = {
+                                    getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
+                                };
+                                return (_jsx(AggregatorCell, { column: c, context: cxt, className: cx('cell', {
+                                        'cell-fixed': column.frozen
+                                    }) }, c.field.id));
+                            }) })] })] }) }));
+}
+GroupHeader.propTypes = {
+    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
+    groupHeader: PropTypes.objectOf(PropTypes.any).isRequired
+};
+//# sourceMappingURL=index.js.map