@pega/lists-react 9.0.0-build.6.8 → 9.0.0-build.7.0

package/lib/Core/Components/AggregateMenu.d.ts

@@ -19,5 +19,6 @@ declare namespace AggregateMenu {
     }
 }
 export default AggregateMenu;
+export function getFormattedAggregationValue(rawAggregationValue: number | string, aggregationType: string, column: import("pega-repeating-structures-core").RsCoreTypes.Column): string | number;
 import PropTypes from 'prop-types';
 //# sourceMappingURL=AggregateMenu.d.ts.map

package/lib/Core/Components/AggregateMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AggregateMenu.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"AAuCA;;;mDAmEC;;;;;;;;;;;;;;;;;;sBAzGqB,YAAY"}
+{"version":3,"file":"AggregateMenu.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"AAkEA;;;mDAwDC;;;;;;;;;;;;;;;;;;AA3EM,kEALI,MAAM,GAAC,MAAM,mBACb,MAAM,UACN,OAAO,gCAAgC,EAAE,WAAW,CAAC,MAAM,GACzD,MAAM,GAAC,MAAM,CAmBzB;sBA/DqB,YAAY"}

package/lib/Core/Components/AggregateMenu.js

@@ -25,8 +25,32 @@ const StyledCell = styled.div `
 const StyledAggregationValue = styled.div `
   font-weight: ${props => props.theme.base['font-weight']['semi-bold']};
 `;
+/**
+ * Formats the aggregation value based on the aggregation type and column context.
+ *
+ * @param {number|string} rawAggregationValue - The raw aggregation value to format.
+ * @param {string} aggregationType - The type of aggregation (e.g., 'Avg').
+ * @param {import('pega-repeating-structures-core').RsCoreTypes.Column} column - The column object.
+ * @returns {string|number} The formatted aggregation value or the raw value if no formatter is available.
+ */
+export const getFormattedAggregationValue = (rawAggregationValue, aggregationType, column) => {
+    const formatter = column.getContext().getFormatter();
+    const fieldDef = column.getContext().getField();
+    const { fieldType } = fieldDef;
+    const { locale, timezone } = column.parent.meta;
+    if (!formatter)
+        return rawAggregationValue;
+    if (aggregationType === 'Avg' && fieldType === 'Integer') {
+        return formatNumber(Number(rawAggregationValue), {
+            locale,
+            useGrouping: true,
+            maximumFractionDigits: 2
+        });
+    }
+    return formatter(rawAggregationValue, { locale, timezone, fieldDef });
+};
 export default function AggregateMenu({ column, context }) {
-    const { aggregateOptions, locale, timezone } = column.parent.meta;
+    const { aggregateOptions } = column.parent.meta;
     const { aggregationType } = column;
     const uid = createUID();
     const [translate] = useTranslate();
@@ -39,21 +63,7 @@ export default function AggregateMenu({ column, context }) {
     if (!actions)
         return null;
     const rawAggregationValue = context.getValue();
-    const formatter = column.getContext().getFormatter();
-    const fieldDef = column.getContext().getField();
-    const { fieldType } = fieldDef;
-    const aggregationValue = (() => {
-        if (!formatter)
-            return rawAggregationValue;
-        if (aggregationType === 'Avg' && fieldType === 'Integer') {
-            return formatNumber(Number(rawAggregationValue), {
-                locale,
-                useGrouping: true,
-                maximumFractionDigits: 2
-            });
-        }
-        return formatter(rawAggregationValue, { locale, timezone, fieldDef });
-    })();
+    const aggregationValue = getFormattedAggregationValue(rawAggregationValue, aggregationType, column);
     const buttonText = translate('Aggregate options');
     return (_jsxs(StyledCell, { children: [_jsx("span", { children: translate(aggregationType) }), _jsx(StyledMenuButton, { className: 'aggregate-button', menu: {
                     items: actions,

package/lib/Core/Components/AggregateMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"AggregateMenu.js","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport {\n  Flex,\n  MenuButton,\n  VisuallyHiddenText,\n  createUID,\n  formatNumber\n} from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\n\nimport TestIdConstants from './TestIdConstants';\n\nconst StyledMenuButton = styled(MenuButton)`\n  color: ${props => props.theme.base.palette['foreground-color']};\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n`;\n\nconst StyledCell = styled.div`\n  display: flex;\n  text-align: right;\n  justify-content: flex-end;\n  align-items: center;\n  margin-inline-end: var(--cell-padding);\n\n  &:hover {\n    background-clip: padding-box;\n  }\n`;\n\nconst StyledAggregationValue = styled.div`\n  font-weight: ${props => props.theme.base['font-weight']['semi-bold']};\n`;\n\nexport default function AggregateMenu({ column, context }) {\n  const { aggregateOptions, locale, timezone } = column.parent.meta;\n  const { aggregationType } = column;\n  const uid = createUID();\n  const [translate] = useTranslate();\n\n  const actions = aggregateOptions[column.field.type]?.map(label => ({\n    primary: translate(label),\n    id: label,\n    onClick: () => column.applyAggregation(label),\n    selected: aggregationType === label\n  }));\n  if (!actions) return null;\n\n  const rawAggregationValue = context.getValue();\n  const formatter = column.getContext().getFormatter();\n  const fieldDef = column.getContext().getField();\n  const { fieldType } = fieldDef;\n\n  const aggregationValue = (() => {\n    if (!formatter) return rawAggregationValue;\n\n    if (aggregationType === 'Avg' && fieldType === 'Integer') {\n      return formatNumber(Number(rawAggregationValue), {\n        locale,\n        useGrouping: true,\n        maximumFractionDigits: 2\n      });\n    }\n\n    return formatter(rawAggregationValue, { locale, timezone, fieldDef });\n  })();\n\n  const buttonText = translate('Aggregate options');\n\n  return (\n    <StyledCell>\n      <span>{translate(aggregationType)}</span>\n      <StyledMenuButton\n        className='aggregate-button'\n        menu={{\n          items: actions,\n          mode: 'single-select'\n        }}\n        popover={{\n          portal: true\n        }}\n        icon='arrow-micro-down'\n        iconOnly\n        variant='simple'\n        compact\n        text={buttonText} // Text property to display tooltip on hover\n        aria-labelledby={`${uid}_label`}\n      />\n      <Flex\n        container\n        as={StyledAggregationValue}\n        item={{ shrink: 0 }}\n        data-testid={TestIdConstants.aggregateDisplayValue}\n      >\n        {aggregationValue}\n      </Flex>\n      <VisuallyHiddenText id={`${uid}_label`} aria-hidden>\n        {`${translate(aggregationType)} ${context.getValue()} ${buttonText}`}\n      </VisuallyHiddenText>\n    </StyledCell>\n  );\n}\n\nAggregateMenu.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  context: PropTypes.objectOf(PropTypes.any)\n};\n\nAggregateMenu.defaultProps = {\n  column: {},\n  context: {}\n};\n"]}
+{"version":3,"file":"AggregateMenu.js","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport {\n  Flex,\n  MenuButton,\n  VisuallyHiddenText,\n  createUID,\n  formatNumber\n} from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\n\nimport TestIdConstants from './TestIdConstants';\n\nconst StyledMenuButton = styled(MenuButton)`\n  color: ${props => props.theme.base.palette['foreground-color']};\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n`;\n\nconst StyledCell = styled.div`\n  display: flex;\n  text-align: right;\n  justify-content: flex-end;\n  align-items: center;\n  margin-inline-end: var(--cell-padding);\n\n  &:hover {\n    background-clip: padding-box;\n  }\n`;\n\nconst StyledAggregationValue = styled.div`\n  font-weight: ${props => props.theme.base['font-weight']['semi-bold']};\n`;\n\n/**\n * Formats the aggregation value based on the aggregation type and column context.\n *\n * @param {number|string} rawAggregationValue - The raw aggregation value to format.\n * @param {string} aggregationType - The type of aggregation (e.g., 'Avg').\n * @param {import('pega-repeating-structures-core').RsCoreTypes.Column} column - The column object.\n * @returns {string|number} The formatted aggregation value or the raw value if no formatter is available.\n */\nexport const getFormattedAggregationValue = (rawAggregationValue, aggregationType, column) => {\n  const formatter = column.getContext().getFormatter();\n  const fieldDef = column.getContext().getField();\n  const { fieldType } = fieldDef;\n  const { locale, timezone } = column.parent.meta;\n\n  if (!formatter) return rawAggregationValue;\n\n  if (aggregationType === 'Avg' && fieldType === 'Integer') {\n    return formatNumber(Number(rawAggregationValue), {\n      locale,\n      useGrouping: true,\n      maximumFractionDigits: 2\n    });\n  }\n\n  return formatter(rawAggregationValue, { locale, timezone, fieldDef });\n};\n\nexport default function AggregateMenu({ column, context }) {\n  const { aggregateOptions } = column.parent.meta;\n  const { aggregationType } = column;\n  const uid = createUID();\n  const [translate] = useTranslate();\n\n  const actions = aggregateOptions[column.field.type]?.map(label => ({\n    primary: translate(label),\n    id: label,\n    onClick: () => column.applyAggregation(label),\n    selected: aggregationType === label\n  }));\n  if (!actions) return null;\n\n  const rawAggregationValue = context.getValue();\n\n  const aggregationValue = getFormattedAggregationValue(\n    rawAggregationValue,\n    aggregationType,\n    column\n  );\n\n  const buttonText = translate('Aggregate options');\n\n  return (\n    <StyledCell>\n      <span>{translate(aggregationType)}</span>\n      <StyledMenuButton\n        className='aggregate-button'\n        menu={{\n          items: actions,\n          mode: 'single-select'\n        }}\n        popover={{\n          portal: true\n        }}\n        icon='arrow-micro-down'\n        iconOnly\n        variant='simple'\n        compact\n        text={buttonText} // Text property to display tooltip on hover\n        aria-labelledby={`${uid}_label`}\n      />\n      <Flex\n        container\n        as={StyledAggregationValue}\n        item={{ shrink: 0 }}\n        data-testid={TestIdConstants.aggregateDisplayValue}\n      >\n        {aggregationValue}\n      </Flex>\n      <VisuallyHiddenText id={`${uid}_label`} aria-hidden>\n        {`${translate(aggregationType)} ${context.getValue()} ${buttonText}`}\n      </VisuallyHiddenText>\n    </StyledCell>\n  );\n}\n\nAggregateMenu.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  context: PropTypes.objectOf(PropTypes.any)\n};\n\nAggregateMenu.defaultProps = {\n  column: {},\n  context: {}\n};\n"]}

package/lib/Core/Components/ContextMenu/ContextMenuContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"AAwMA;;;mDA+GC;;;;;;;;;;;;sBAvTqB,YAAY"}
+{"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"AA4MA;;;mDA+GC;;;;;;;;;;;;sBA3TqB,YAAY"}

package/lib/Core/Components/ContextMenu/ContextMenuContainer.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Popover, Icon, useElement, useOuterEvent } from '@pega/cosmos-react-core';
+import { mix } from 'polished';
+import { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';
 import { getRowContextData, getScrollerElem, isFilterApplied } from 'pega-repeating-structures-core';
 import { createClassName as cx } from '../../Utils';
 import useTranslate from '../../Hooks/useTranslate';
@@ -13,6 +14,7 @@ const StyledPopover = styled.div `
   width: 10rem;
 `;
 const StyledContent = styled.div(({ theme }) => {
+    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
     return css `
     white-space: nowrap;
     overflow: hidden;
@@ -24,7 +26,7 @@ const StyledContent = styled.div(({ theme }) => {
     margin-top: 0.125rem;
     margin-bottom: 0.125rem;
     :hover {
-      background-color: ${theme.base.colors.blue['extra-light']};
+      background-color: ${hoverColor};
       box-shadow: ${theme.base.shadow['focus-inset']};
     }
   `;

package/lib/Core/Components/ContextMenu/ContextMenuContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE/B,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;0BAWc,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;oBAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;iBAcK,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;WAQvB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;CAE/D,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAC1B,MAAM,EACN,cAAc,EACd,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,EACT,EAAE;IACF,MAAM,UAAU,GAAG,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7D,OAAO;QACL;YACE,EAAE,EAAE,aAAa;YACjB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;YACrC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC;YAC5E,IAAI,EAAE,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YACpD,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,UAAU,EAAE,CAAC;oBACf,OAAO,YAAY,CACjB,gBAAgB,EAChB,UAAU,EACV,qBAAqB,EACrB,oBAAoB,CACrB,CAAC;gBACJ,CAAC;gBACD,OAAO,WAAW,CAChB,OAAO,EACP,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,qBAAqB,CACtB,CAAC;YACJ,CAAC;SACF;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC;YAC7B,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC;SACpC;QACD;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC;YAC9B,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,UAAU,EACV,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,EACT,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,EAAE,kBAAkB,IAAI,EAAE,CAAC;IACnE,OAAO;QACL,GAAG,mBAAmB,CACpB,MAAM,EACN,cAAc,EACd,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,CACV;QACD,GAAG,mBAAmB;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE,EAAE;IACxD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;IAErC,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;IAC3F,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,aAAa,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,cAAc,GAAG,EAAE,EACnB,eAAe,GAAG,GAAG,EAAE,GAAE,CAAC,EAC3B,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAChF,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;YACZ,eAAe,EAAE,CAAC;YAClB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC;QAC1C,CAAC,YAED,KAAC,cAAc,cACb,MAAC,YAAY,eACV,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,eAAM,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,YAAG,KAAK,GAAQ,IAC7C,GACA,GACH,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,SAAS,GAAG;IACnB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACvC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,cAAc,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACjD,eAAe,EAAE,SAAS,CAAC,IAAI;CAChC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC7D,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EAAE,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,GAAG,EAAE,EACnD,YAAY,EACZ,IAAI,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,EACpD,GAAG,IAAI,CAAC;IACT,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAElE,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,aAAa,CAAC,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE;QAC1C,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE;QAC1C,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QACD,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,CAAC,EAAE;QACF,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QACxF,IACE,yBAAyB,CAAC,aAAa,EAAE,OAAO,CAAC;YACjD,mHAAmH;YACnH,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EACtB,CAAC;YACD,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC;YAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC;YACpD,cAAc,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC3F,cAAc,CAAC,cAAc,GAAG,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC;YAC1F,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;YAClE,MAAM,OAAO,GAAG,YAAY,CAC1B,aAAa,EACb,cAAc,CAAC,MAAM,EACrB,cAAc,CAAC,cAAc,EAC7B,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,SAAS,CACV,CAAC;YACF,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAED;QACE,QAAQ;QACR,OAAO;QACP,cAAc,CAAC,UAAU;QACzB,cAAc,CAAC,MAAM;QACrB,cAAc,CAAC,cAAc;QAC7B,IAAI;QACJ,iBAAiB;QACjB,gBAAgB;QAChB,eAAe;QACf,WAAW;QACX,SAAS;KACV,CACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,gBAAgB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;YAClE,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,YAAY,EAAE,CAAC;gBACjB,YAAY,CAAC,mBAAmB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;gBACrE,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzD,IAAI,CAAC,cAAc,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,YAAY,EAAE,CAAC;QAC7D,IAAI,cAAc,CAAC,UAAU,IAAI,QAAQ,EAAE,CAAC;YAC1C,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;QACnF,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IAAC,MAAM,QAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,CAAC,UAAU,YAClE,KAAC,aAAa,cACX,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACrB,KAAC,QAAQ,IAEP,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,cAAc,CAAC,UAAU,EACjC,MAAM,EAAE,cAAc,CAAC,MAAM,EAC7B,cAAc,EAAE,cAAc,CAAC,cAAc,EAC7C,IAAI,EAAE,IAAI,IALL,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC,GACY,GACR,CACX,CAAC;AACJ,CAAC;AAED,oBAAoB,CAAC,SAAS,GAAG;IAC/B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACvD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useState, useMemo, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Popover, Icon, useElement, useOuterEvent } from '@pega/cosmos-react-core';\nimport {\n  getRowContextData,\n  getScrollerElem,\n  isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\nconst StyledPopover = styled.div`\n  width: 10rem;\n`;\n\nconst StyledContent = styled.div(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    padding: 0.25rem;\n    border-radius: 0.156rem;\n    box-sizing: border-box;\n    cursor: pointer;\n    margin-top: 0.125rem;\n    margin-bottom: 0.125rem;\n    :hover {\n      background-color: ${theme.base.colors.blue['extra-light']};\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nconst StyledListItem = styled.div(({ theme }) => {\n  return css`\n    button {\n      display: flex;\n      align-items: center;\n      /* stylelint-disable unit-allowed-list */\n      padding: 4px 8px;\n    }\n    .label {\n      padding-left: 14px;\n      vertical-align: text-top;\n    }\n    .disabled {\n      padding-left: 14px;\n      vertical-align: text-top;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n  `;\n});\n\nconst StyledButton = styled.button`\n  display: block;\n  text-align: start;\n  background: none;\n  border: none;\n  line-height: 1;\n  outline: none;\n  cursor: pointer;\n  color: ${props => props.theme.base.palette['foreground-color']};\n  border-radius: 0;\n`;\n\nconst getDefaultMenuItems = (\n  column,\n  rowContextData,\n  targetCell,\n  columns,\n  filterExpression,\n  actionColumnFiltering,\n  actionClearFiltering,\n  translate\n) => {\n  const isFiltered = isFilterApplied(column, filterExpression);\n  return [\n    {\n      id: 'quickFilter',\n      icon: isFiltered ? 'times' : 'filter',\n      label: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n      show: !!quickFilterEnabled(columns, column.field.id),\n      disabled: false,\n      onClick: () => {\n        if (isFiltered) {\n          return removeFilter(\n            filterExpression,\n            targetCell,\n            actionColumnFiltering,\n            actionClearFiltering\n          );\n        }\n        return applyFilter(\n          columns,\n          targetCell,\n          rowContextData,\n          filterExpression,\n          actionColumnFiltering\n        );\n      }\n    },\n    {\n      id: 'copyText',\n      icon: 'copy',\n      label: translate('Copy text'),\n      show: true,\n      disabled: false,\n      onClick: () => copyText(targetCell)\n    },\n    {\n      id: 'pasteText',\n      icon: 'documents',\n      label: translate('Paste text'),\n      show: true,\n      disabled: true,\n      onClick: () => {}\n    }\n  ];\n};\n\nconst getMenuItems = (\n  targetCell,\n  column,\n  rowContextData,\n  columns,\n  filterExpression,\n  actionColumnFiltering,\n  actionClearFiltering,\n  translate\n) => {\n  const fieldContextOptions = column.field?.contextMenuOptions || [];\n  return [\n    ...getDefaultMenuItems(\n      column,\n      rowContextData,\n      targetCell,\n      columns,\n      filterExpression,\n      actionColumnFiltering,\n      actionClearFiltering,\n      translate\n    ),\n    ...fieldContextOptions\n  ];\n};\n\nconst shouldOverrideContextMenu = (targetCell, columns) => {\n  if (!targetCell) {\n    return false;\n  }\n  const { colId } = targetCell.dataset;\n\n  const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) || {};\n  return !(!field || field?.noContextMenu);\n};\n\nconst MenuItem = ({\n  menu = {},\n  target = {},\n  column = {},\n  rowContextData = {},\n  onMenuItemClick = () => {}\n}) => {\n  const { onClick = () => {}, icon, disabled = false, show = true, label } = menu;\n  if (!show) {\n    return null;\n  }\n\n  return (\n    <StyledContent\n      onClick={() => {\n        onMenuItemClick();\n        onClick(target, column, rowContextData);\n      }}\n    >\n      <StyledListItem>\n        <StyledButton>\n          {icon && <Icon name={icon} />}\n          <span className={cx('label', { disabled })}>{label}</span>\n        </StyledButton>\n      </StyledListItem>\n    </StyledContent>\n  );\n};\n\nMenuItem.propTypes = {\n  menu: PropTypes.objectOf(PropTypes.any),\n  target: PropTypes.objectOf(PropTypes.any),\n  column: PropTypes.objectOf(PropTypes.any),\n  rowContextData: PropTypes.objectOf(PropTypes.any),\n  onMenuItemClick: PropTypes.func\n};\n\nexport default function ContextMenuContainer({ view, selector }) {\n  const {\n    columns,\n    data,\n    state: { paginationOptions, filterExpression } = {},\n    domContainer,\n    type: { applyFilter: applyViewFilter, clearFilter }\n  } = view;\n  const [translate] = useTranslate();\n  const contextMenuRef = useRef({}).current;\n  const [showMenu, setShowMenu] = useState(false);\n  const [menuItems, setMenuItems] = useState([]);\n  const [popperRef, setPopperRef] = useElement();\n  const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n  useOuterEvent('mousedown', [popperRef], () => {\n    setShowMenu(false);\n  });\n\n  useScrollAway(popperRef, scrollerElem, () => {\n    setShowMenu(false);\n  });\n\n  const onMenuItemClick = useCallback(event => {\n    if (event && event.key !== 'Escape') {\n      return;\n    }\n    setShowMenu(false);\n  }, []);\n\n  const contextMenuListener = useCallback(\n    e => {\n      const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;\n      if (\n        shouldOverrideContextMenu(targetElement, columns) &&\n        // TODO: We will add \"Open link in new tab\" option in context menu once the custom context menu is made accessible.\n        !e.target.closest('a')\n      ) {\n        e.stopPropagation();\n        e.preventDefault();\n        contextMenuRef.targetCell = targetElement;\n        const { colId } = contextMenuRef.targetCell.dataset;\n        contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());\n        contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);\n        targetElement.classList.add('selection-border', 'disable-select');\n        const options = getMenuItems(\n          targetElement,\n          contextMenuRef.column,\n          contextMenuRef.rowContextData,\n          columns,\n          filterExpression,\n          applyViewFilter,\n          clearFilter,\n          translate\n        );\n        setShowMenu(true);\n        setMenuItems(options);\n      }\n    },\n\n    [\n      selector,\n      columns,\n      contextMenuRef.targetCell,\n      contextMenuRef.column,\n      contextMenuRef.rowContextData,\n      data,\n      paginationOptions,\n      filterExpression,\n      applyViewFilter,\n      clearFilter,\n      translate\n    ]\n  );\n\n  useEffect(() => {\n    if (domContainer) {\n      domContainer.addEventListener('contextmenu', contextMenuListener);\n      domContainer.addEventListener('keydown', onMenuItemClick);\n    }\n    return () => {\n      if (domContainer) {\n        domContainer.removeEventListener('contextmenu', contextMenuListener);\n        domContainer.removeEventListener('keydown', onMenuItemClick);\n      }\n    };\n  }, [domContainer, contextMenuListener, onMenuItemClick]);\n\n  if (!contextMenuRef.targetCell || !showMenu || !domContainer) {\n    if (contextMenuRef.targetCell && selector) {\n      contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');\n    }\n    return null;\n  }\n\n  return (\n    <Popover portal ref={setPopperRef} target={contextMenuRef.targetCell}>\n      <StyledPopover>\n        {menuItems.map(menu => (\n          <MenuItem\n            key={menu.id}\n            onMenuItemClick={onMenuItemClick}\n            target={contextMenuRef.targetCell}\n            column={contextMenuRef.column}\n            rowContextData={contextMenuRef.rowContextData}\n            menu={menu}\n          />\n        ))}\n      </StyledPopover>\n    </Popover>\n  );\n}\n\nContextMenuContainer.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  selector: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
+{"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useState, useMemo, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';\nimport {\n  getRowContextData,\n  getScrollerElem,\n  isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\nconst StyledPopover = styled.div`\n  width: 10rem;\n`;\n\nconst StyledContent = styled.div(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    padding: 0.25rem;\n    border-radius: 0.156rem;\n    box-sizing: border-box;\n    cursor: pointer;\n    margin-top: 0.125rem;\n    margin-bottom: 0.125rem;\n    :hover {\n      background-color: ${hoverColor};\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nconst StyledListItem = styled.div(({ theme }) => {\n  return css`\n    button {\n      display: flex;\n      align-items: center;\n      /* stylelint-disable unit-allowed-list */\n      padding: 4px 8px;\n    }\n    .label {\n      padding-left: 14px;\n      vertical-align: text-top;\n    }\n    .disabled {\n      padding-left: 14px;\n      vertical-align: text-top;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n  `;\n});\n\nconst StyledButton = styled.button`\n  display: block;\n  text-align: start;\n  background: none;\n  border: none;\n  line-height: 1;\n  outline: none;\n  cursor: pointer;\n  color: ${props => props.theme.base.palette['foreground-color']};\n  border-radius: 0;\n`;\n\nconst getDefaultMenuItems = (\n  column,\n  rowContextData,\n  targetCell,\n  columns,\n  filterExpression,\n  actionColumnFiltering,\n  actionClearFiltering,\n  translate\n) => {\n  const isFiltered = isFilterApplied(column, filterExpression);\n  return [\n    {\n      id: 'quickFilter',\n      icon: isFiltered ? 'times' : 'filter',\n      label: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n      show: !!quickFilterEnabled(columns, column.field.id),\n      disabled: false,\n      onClick: () => {\n        if (isFiltered) {\n          return removeFilter(\n            filterExpression,\n            targetCell,\n            actionColumnFiltering,\n            actionClearFiltering\n          );\n        }\n        return applyFilter(\n          columns,\n          targetCell,\n          rowContextData,\n          filterExpression,\n          actionColumnFiltering\n        );\n      }\n    },\n    {\n      id: 'copyText',\n      icon: 'copy',\n      label: translate('Copy text'),\n      show: true,\n      disabled: false,\n      onClick: () => copyText(targetCell)\n    },\n    {\n      id: 'pasteText',\n      icon: 'documents',\n      label: translate('Paste text'),\n      show: true,\n      disabled: true,\n      onClick: () => {}\n    }\n  ];\n};\n\nconst getMenuItems = (\n  targetCell,\n  column,\n  rowContextData,\n  columns,\n  filterExpression,\n  actionColumnFiltering,\n  actionClearFiltering,\n  translate\n) => {\n  const fieldContextOptions = column.field?.contextMenuOptions || [];\n  return [\n    ...getDefaultMenuItems(\n      column,\n      rowContextData,\n      targetCell,\n      columns,\n      filterExpression,\n      actionColumnFiltering,\n      actionClearFiltering,\n      translate\n    ),\n    ...fieldContextOptions\n  ];\n};\n\nconst shouldOverrideContextMenu = (targetCell, columns) => {\n  if (!targetCell) {\n    return false;\n  }\n  const { colId } = targetCell.dataset;\n\n  const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) || {};\n  return !(!field || field?.noContextMenu);\n};\n\nconst MenuItem = ({\n  menu = {},\n  target = {},\n  column = {},\n  rowContextData = {},\n  onMenuItemClick = () => {}\n}) => {\n  const { onClick = () => {}, icon, disabled = false, show = true, label } = menu;\n  if (!show) {\n    return null;\n  }\n\n  return (\n    <StyledContent\n      onClick={() => {\n        onMenuItemClick();\n        onClick(target, column, rowContextData);\n      }}\n    >\n      <StyledListItem>\n        <StyledButton>\n          {icon && <Icon name={icon} />}\n          <span className={cx('label', { disabled })}>{label}</span>\n        </StyledButton>\n      </StyledListItem>\n    </StyledContent>\n  );\n};\n\nMenuItem.propTypes = {\n  menu: PropTypes.objectOf(PropTypes.any),\n  target: PropTypes.objectOf(PropTypes.any),\n  column: PropTypes.objectOf(PropTypes.any),\n  rowContextData: PropTypes.objectOf(PropTypes.any),\n  onMenuItemClick: PropTypes.func\n};\n\nexport default function ContextMenuContainer({ view, selector }) {\n  const {\n    columns,\n    data,\n    state: { paginationOptions, filterExpression } = {},\n    domContainer,\n    type: { applyFilter: applyViewFilter, clearFilter }\n  } = view;\n  const [translate] = useTranslate();\n  const contextMenuRef = useRef({}).current;\n  const [showMenu, setShowMenu] = useState(false);\n  const [menuItems, setMenuItems] = useState([]);\n  const [popperRef, setPopperRef] = useElement();\n  const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n  useOuterEvent('mousedown', [popperRef], () => {\n    setShowMenu(false);\n  });\n\n  useScrollAway(popperRef, scrollerElem, () => {\n    setShowMenu(false);\n  });\n\n  const onMenuItemClick = useCallback(event => {\n    if (event && event.key !== 'Escape') {\n      return;\n    }\n    setShowMenu(false);\n  }, []);\n\n  const contextMenuListener = useCallback(\n    e => {\n      const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;\n      if (\n        shouldOverrideContextMenu(targetElement, columns) &&\n        // TODO: We will add \"Open link in new tab\" option in context menu once the custom context menu is made accessible.\n        !e.target.closest('a')\n      ) {\n        e.stopPropagation();\n        e.preventDefault();\n        contextMenuRef.targetCell = targetElement;\n        const { colId } = contextMenuRef.targetCell.dataset;\n        contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());\n        contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);\n        targetElement.classList.add('selection-border', 'disable-select');\n        const options = getMenuItems(\n          targetElement,\n          contextMenuRef.column,\n          contextMenuRef.rowContextData,\n          columns,\n          filterExpression,\n          applyViewFilter,\n          clearFilter,\n          translate\n        );\n        setShowMenu(true);\n        setMenuItems(options);\n      }\n    },\n\n    [\n      selector,\n      columns,\n      contextMenuRef.targetCell,\n      contextMenuRef.column,\n      contextMenuRef.rowContextData,\n      data,\n      paginationOptions,\n      filterExpression,\n      applyViewFilter,\n      clearFilter,\n      translate\n    ]\n  );\n\n  useEffect(() => {\n    if (domContainer) {\n      domContainer.addEventListener('contextmenu', contextMenuListener);\n      domContainer.addEventListener('keydown', onMenuItemClick);\n    }\n    return () => {\n      if (domContainer) {\n        domContainer.removeEventListener('contextmenu', contextMenuListener);\n        domContainer.removeEventListener('keydown', onMenuItemClick);\n      }\n    };\n  }, [domContainer, contextMenuListener, onMenuItemClick]);\n\n  if (!contextMenuRef.targetCell || !showMenu || !domContainer) {\n    if (contextMenuRef.targetCell && selector) {\n      contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');\n    }\n    return null;\n  }\n\n  return (\n    <Popover portal ref={setPopperRef} target={contextMenuRef.targetCell}>\n      <StyledPopover>\n        {menuItems.map(menu => (\n          <MenuItem\n            key={menu.id}\n            onMenuItemClick={onMenuItemClick}\n            target={contextMenuRef.targetCell}\n            column={contextMenuRef.column}\n            rowContextData={contextMenuRef.rowContextData}\n            menu={menu}\n          />\n        ))}\n      </StyledPopover>\n    </Popover>\n  );\n}\n\nContextMenuContainer.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  selector: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

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

@@ -11,5 +11,21 @@ declare namespace GroupHeader {
     }
 }
 export default GroupHeader;
+/**
+ * Formats additional field data based on its type and properties.
+ */
+export type AdditionalFieldData = NonNullable<Awaited<ReturnType<NonNullable<import("pega-repeating-structures-core").RsCoreTypes.ApiContext["fetchGroupedInfo"]>>>[number]["additionalFieldsData"]>[number];
+/**
+ * Formats additional field data based on its type and properties.
+ */
+export type Column = import("pega-repeating-structures-core").RsCoreTypes.Column;
+/**
+ * Formats additional field data based on its type and properties.
+ */
+export type Meta = import("pega-repeating-structures-core").RsCoreTypes.Meta;
+/**
+ * Formats additional field data based on its type and properties.
+ */
+export type GroupGenerator = import("pega-repeating-structures-core").RsCoreTypes.GroupGenerator;
 import PropTypes from 'prop-types';
 //# sourceMappingURL=GroupRenderer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupRenderer.d.ts","sourceRoot":"","sources":["../../../Core/Components/GroupRenderer.jsx"],"names":[],"mappings":"AA6NA;;;mDA0GC;;;;;;;;;;sBAvUqB,YAAY"}
+{"version":3,"file":"GroupRenderer.d.ts","sourceRoot":"","sources":["../../../Core/Components/GroupRenderer.jsx"],"names":[],"mappings":"AAwXA;;;mDAqIC;;;;;;;;;;;;;kCA7UY,WAAW,CACnB,OAAO,CACL,UAAU,CACR,WAAW,CACnB,OAAiB,gCAAgC,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CACpF,CACF,CACF,CAAC,MAAM,CAAC,CAAC,sBAAsB,CAAC,CAClC,CAAC,MAAM,CAAC;;;;qBAEC,OAAO,gCAAgC,EAAE,WAAW,CAAC,MAAM;;;;mBAC3D,OAAO,gCAAgC,EAAE,WAAW,CAAC,IAAI;;;;6BACzD,OAAO,gCAAgC,EAAE,WAAW,CAAC,cAAc;sBA5L1D,YAAY"}

package/lib/Core/Components/GroupRenderer.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { useRef } from 'react';
 import styled from 'styled-components';
-import { Icon } from '@pega/cosmos-react-core';
+import { Flex, Icon, Tooltip, useElement, Text, MetaList } 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 { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';
+import { StyledMetaListItem } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';
 import { createClassName as cx } from '../Utils';
 import useTranslate from '../Hooks/useTranslate';
 import { customFunctions, intervalGroupingBoundaries } from '../constants';
@@ -12,6 +14,7 @@ import AggregatorCell from './AggregatorCell';
 import RenderingEngine from './RenderingEngine/RenderCell';
 import DateValueDisplay from './DateValueDisplay';
 import TestIdConstants from './TestIdConstants';
+import { getFormattedAggregationValue } from './AggregateMenu';
 const groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;
 /**
  * TODO: remove currentColor style after cosmos fixes the issue
@@ -108,6 +111,7 @@ const StyledGroupHeader = styled.div `
 
       > .group-wrapper {
         margin-inline-start: ${({ groupHeader, theme }) => groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};
+        align-items: baseline;
       }
 
       .cell-content {
@@ -139,6 +143,107 @@ const StyledGroupHeader = styled.div `
     background-color: var(--group-bg-color);
   }
 `;
+const StyledText = styled(Text) `
+  display: inline-flex;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const StyledMetaList = styled(MetaList) `
+  margin-inline-start: 0;
+`;
+const GroupAdditionalInfoSeparator = styled(StyledMetaListItem) `
+  margin-inline-start: 0.3rem;
+`;
+/**
+ * For
+ * @param {*} additionalFieldData
+ * @param {*} additionalField
+ * @param {*} param2
+ * @returns
+ */
+/**
+ * Formats additional field data based on its type and properties.
+ *
+ * @typedef {NonNullable<
+ *   Awaited<
+ *     ReturnType<
+ *       NonNullable<
+ *         import('pega-repeating-structures-core').RsCoreTypes.ApiContext['fetchGroupedInfo']
+ *       >
+ *     >
+ *   >[number]['additionalFieldsData']
+ * >[number]} AdditionalFieldData
+ *
+ * @typedef {import('pega-repeating-structures-core').RsCoreTypes.Column} Column
+ * @typedef {import('pega-repeating-structures-core').RsCoreTypes.Meta} Meta
+ * @typedef {import('pega-repeating-structures-core').RsCoreTypes.GroupGenerator} GroupGenerator
+ *
+ * @param {AdditionalFieldData} additionalFieldData - The data for the additional field.
+ * @param {import('pega-repeating-structures-core').RsCoreTypes.GroupAdditionalField} additionalField - The configuration for the additional field.
+ * @param {{column: Column, meta: Meta, groupHeader: GroupGenerator}} config - Additional config for formatting.
+ * @param {Column} config.column - The column configuration.
+ * @param {Meta} config.meta - RS Meta.
+ * @param {GroupGenerator} config.groupHeader - The group header data.
+ *
+ * @returns {{label: string, renderer: ReactNode | string}} An object containing the formatted label and renderer.
+ * @returns {string} returns.label - The formatted label for the additional field.
+ * @returns {ReactNode | string} returns.renderer - The React component or value to render.
+ */
+const getFormattedAdditionalFieldData = (additionalFieldData, additionalField, { column, meta, groupHeader, translate }) => {
+    const { value, count = 0 } = additionalFieldData || {};
+    const { aggregation, dateFunction } = additionalField || {};
+    const { locale, timezone } = meta;
+    const { label, field: { type } } = column;
+    // Additional field as aggregation
+    if (aggregation && type === FieldType.NUMBER) {
+        return {
+            label: `${label}(${translate(aggregation)})`,
+            renderer: getFormattedAggregationValue(value, aggregation, column)
+        };
+    }
+    // Additional field as Date part
+    if (dateFunction && [FieldType.DATE, FieldType.DATE_TIME, FieldType.DATE_ONLY].includes(type)) {
+        return {
+            label: `${label}(${translate(dateFunctionLabels[dateFunction])})`,
+            renderer: (_jsx(DateValueDisplay, { value: value, dateFunction: dateFunction, locale: locale, timezone: timezone }))
+        };
+    }
+    // Additional field as normal field but with multiple values.
+    if (count > 1) {
+        const { getFormatterByKey } = column.parent;
+        const integerFormatter = getFormatterByKey('Integer');
+        return {
+            label: `${label}(${translate('Count')})`,
+            renderer: integerFormatter ? integerFormatter(count, { locale }) : count
+        };
+    }
+    // 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, name: 'groupHeader' };
+                }
+            } }))
+    };
+};
+const GroupAdditionalInfo = ({ additionalFieldData, columns, groupHeader, additionalField }) => {
+    const [infoRef, setInfoRef] = useElement(null);
+    const [translate] = useTranslate();
+    const { id } = additionalFieldData;
+    const column = columns.find(c => c.field.id === id);
+    if (!column)
+        return null;
+    const { meta } = column.parent;
+    const { label, renderer } = getFormattedAdditionalFieldData(additionalFieldData, additionalField, { column, meta, groupHeader, translate });
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 0.5 }, ref: setInfoRef, children: [_jsxs(StyledText, { variant: 'secondary', "data-testid": 'additional-field-label', children: [label, ":"] }), _jsx(StyledText, { variant: 'secondary', "data-testid": 'additional-field-renderer', children: renderer })] }), _jsxs(Tooltip, { smart: true, target: infoRef, showDelay: 'short', hideDelay: 'none', children: [_jsx(Text, { children: `${label}: ` }), _jsx(Text, { children: renderer })] })] }));
+};
 /**
  *  Returns label for interval grouping based on interval and boundaries
   Response data depends on boundary settings.
@@ -204,7 +309,7 @@ export default function GroupHeader({ groupHeader, columns }) {
         return null;
     const view = columns[0].parent;
     // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer
-    const { columnId, dateFunction, customFunction } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
+    const { columnId, dateFunction, customFunction, additionalFields = [] } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
     // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined
     if (!columnId) {
         return null;
@@ -216,6 +321,7 @@ export default function GroupHeader({ groupHeader, columns }) {
         ? formatter(groupHeader.count, { locale })
         : groupHeader.count;
     const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);
+    // FIXME: Import rather than COPY, i would rather
     return (_jsxs(StyledGroupHeader, { groupHeader: groupHeader, className: cx('row group-header-row sticky-group-header'), "data-test-id": 'groupHeader', "data-testid": TestIdConstants.groupHeader, isAggregationApplied: isAggregationApplied, role: 'row', onFocus: e => {
             if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {
                 e.preventDefault();
@@ -224,7 +330,9 @@ export default function GroupHeader({ groupHeader, columns }) {
         }, children: [_jsx("div", { className: 'stickyGroupHeader', children: _jsxs(BareButton, { ref: buttonRef, "aria-label": `${column.field.hideGroupColumnNameLabel ? '' : groupHeader.label} ${groupHeader.name}, ${groupCountFormatted} items`, "aria-expanded": !!groupHeader.isExpanded, style: {
                         paddingRight: 'var(--group-left)'
                     }, onClick: () => groupHeader.count > 0 && view.type.toggleGroupExpansion({ groupHeader }), 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("div", { className: 'group-label' }), !column.field.hideGroupColumnNameLabel && (_jsxs("span", { className: 'group-header-groupby', "data-test-id": groupHeader.groupBy, "data-testid": `${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`, 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, children: [_jsx(GroupName, { view: view, column: column, groupHeader: groupHeader, dateFunction: dateFunction, customFunction: customFunction }), _jsx("span", { className: 'group-count', children: ` (${groupCountFormatted})` })] })] })] }) }), _jsx("div", { className: 'group-header-aggregation-row', children: columns.map(c => {
+                            (groupHeader.isExpanded ? _jsx(Icon, { name: 'caret-down' }) : _jsx(Icon, { name: 'caret-right' })), _jsxs("div", { className: 'group-wrapper', 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}`, 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, children: [_jsx(GroupName, { view: view, column: column, groupHeader: groupHeader, dateFunction: dateFunction, customFunction: customFunction }), _jsx("span", { className: 'group-count', children: ` (${groupCountFormatted})` })] }), !!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (_jsxs(_Fragment, { children: [_jsx(Text, { "aria-hidden": true, variant: 'secondary', as: GroupAdditionalInfoSeparator, children: "\u2022" }), _jsx(StyledMetaList, { wrapItems: false, items: [
+                                                ...groupHeader.additionalFieldsData.map(additionalFieldsData => (_jsx(GroupAdditionalInfo, { additionalFieldData: additionalFieldsData, additionalField: additionalFields.find(additionalField => additionalField.id === additionalFieldsData.id), columns: columns, groupHeader: groupHeader })))
+                                            ] })] }))] })] }) }), _jsx("div", { className: 'group-header-aggregation-row', children: columns.map(c => {
                     const cxt = {
                         getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
                     };

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

@@ -1 +1 @@
-{"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/GroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\nimport useTranslate from '../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../constants';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport DateValueDisplay from './DateValueDisplay';\nimport TestIdConstants from './TestIdConstants';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n  --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n  --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n  background-color: var(--group-bg-color);\n  &:has(button[aria-expanded='true']) {\n    filter: ${props => props.theme.base.shadow['low-filter']};\n  }\n\n  &.row.sticky-group-header {\n    position: sticky;\n    display: block;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n\n    /* z-index starting from 8 because freeze-line has z-index 7 */\n    z-index: ${props => `${8 + props.groupHeader.index}`};\n    > .cell-action,\n    .cell-fixed {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n    flex-shrink: 0;\n  }\n\n  .group-header-groupby {\n    font-weight: ${props => props.theme.base['font-weight'].normal};\n  }\n\n  .group-context-count .group-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n    white-space: pre;\n  }\n\n  &.row.group-header-row {\n    height: auto;\n    border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};\n\n    .group-header-aggregation-row {\n      display: flex;\n\n      /* 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 */\n      height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n\n      &::before {\n        content: '';\n        position: sticky;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        width: 0.25rem;\n        height: 100%;\n        background-color: ${props => props.groupHeader.colorIndicator};\n        z-index: 12;\n      }\n    }\n  }\n\n  &.group-header-row .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    height: var(--group-header-height);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: max-content;\n      max-width: var(--container-width);\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      margin-inline-start: 0.25rem;\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n      text-align: inherit;\n      font-stretch: inherit;\n\n      > .group-wrapper {\n        margin-inline-start: ${({ groupHeader, theme }) =>\n          groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n      }\n\n      .cell-content {\n        max-height: var(--group-header-height);\n        padding: 0;\n      }\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      width: 0.25rem;\n      height: 100%;\n      background-color: ${props => props.groupHeader.colorIndicator};\n      z-index: 12;\n    }\n  }\n  .group-header.cell {\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\n/**\n *  Returns label for interval grouping based on interval and boundaries\n  Response data depends on boundary settings.\n Ex: For sample data of profit\n    profit  --> cases(count)\n   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}\n  For Interval 10\n  If the boundary is 'include-lower-only',\n    and  value is 10 then label -> 10 to 20\n\n  If boundary is 'include-upper-only',\n    and value is 10 then label ->  0 to 10\n  * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n  const { interval, boundaries } = customFunction;\n  // To restrict the decimals in labels\n  const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n  value = Number(value);\n  // In case of 'include-lower-only'\n  let lowerValue = value.toFixed(intervalDecimalLength);\n  let upperValue = (value + interval).toFixed(intervalDecimalLength);\n  // In case of boundary 'include-upper-only'\n  if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n    lowerValue = (value - interval).toFixed(intervalDecimalLength);\n    upperValue = value.toFixed(intervalDecimalLength);\n  }\n  return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nfunction GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n  const [translate] = useTranslate();\n  const { locale, timezone } = view.meta;\n  const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n  const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n  if (dateFunction) {\n    return (\n      <DateValueDisplay\n        value={groupHeader.name}\n        dateFunction={dateFunction}\n        locale={locale}\n        timezone={timezone}\n      />\n    );\n  }\n\n  if (isRangeGrouping) {\n    /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n    return groupHeader.name;\n  }\n\n  if (isIntervalGrouping) {\n    /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n    return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n  }\n\n  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)\n\n  const columnRendererProps = {\n    ...column.getRenderingEngineProps(),\n    context: {\n      getValue: () => groupHeader.name,\n      getExecutionContext: () => {\n        return { getValue: () => groupHeader.data, name: 'groupHeader' };\n      }\n    }\n  };\n\n  return <RenderingEngine {...columnRendererProps} />;\n}\n\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n  const buttonRef = useRef();\n\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n\n  const view = columns[0].parent;\n  // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n  const { columnId, dateFunction, customFunction } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n  if (!columnId) {\n    return null;\n  }\n\n  const column = columns.find(c => c.field.id === columnId);\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n  const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n  return (\n    <StyledGroupHeader\n      groupHeader={groupHeader}\n      className={cx('row group-header-row sticky-group-header')}\n      data-test-id='groupHeader'\n      data-testid={TestIdConstants.groupHeader}\n      isAggregationApplied={isAggregationApplied}\n      role='row'\n      onFocus={e => {\n        if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n          e.preventDefault();\n          buttonRef.current.focus();\n        }\n      }}\n    >\n      <div className='stickyGroupHeader'>\n        <BareButton\n          ref={buttonRef}\n          aria-label={`${\n            column.field.hideGroupColumnNameLabel ? '' : groupHeader.label\n          } ${groupHeader.name}, ${groupCountFormatted} items`}\n          aria-expanded={!!groupHeader.isExpanded}\n          style={{\n            paddingRight: 'var(--group-left)'\n          }}\n          onClick={() => groupHeader.count > 0 && view.type.toggleGroupExpansion({ groupHeader })}\n          tabIndex={-1}\n          icon\n        >\n          {groupHeader.count > 0 &&\n            (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n          <div className='group-wrapper'>\n            <div className='group-label' />\n            {!column.field.hideGroupColumnNameLabel && (\n              <span\n                className='group-header-groupby'\n                data-test-id={groupHeader.groupBy}\n                data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n              >\n                {groupHeader.label}:\n              </span>\n            )}\n            <div className='group-label' />\n            <span\n              className='group-context-count'\n              style={{ display: 'inline-flex' }}\n              data-test-id='groupHeader'\n              data-testid={TestIdConstants.groupHeaderCount}\n            >\n              <GroupName\n                view={view}\n                column={column}\n                groupHeader={groupHeader}\n                dateFunction={dateFunction}\n                customFunction={customFunction}\n              />\n              {/* adding whitespace pre to preserve the space at the begining of count text */}\n              <span className='group-count'>{` (${groupCountFormatted})`}</span>\n            </span>\n          </div>\n        </BareButton>\n      </div>\n      <div className='group-header-aggregation-row'>\n        {columns.map(c => {\n          const cxt = {\n            getValue: () =>\n              groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n          };\n          return (\n            <AggregatorCell\n              key={c.field.id}\n              column={c}\n              context={cxt}\n              className={cx('cell', {\n                'cell-fixed': column.frozen\n              })}\n            />\n          );\n        })}\n      </div>\n    </StyledGroupHeader>\n  );\n}\n\nGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
+{"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/GroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Flex, Icon, Tooltip, useElement, Text, MetaList } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\nimport { StyledMetaListItem } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';\n\nimport { createClassName as cx } from '../Utils';\nimport useTranslate from '../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../constants';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport DateValueDisplay from './DateValueDisplay';\nimport TestIdConstants from './TestIdConstants';\nimport { getFormattedAggregationValue } from './AggregateMenu';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n  --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n  --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n  background-color: var(--group-bg-color);\n  &:has(button[aria-expanded='true']) {\n    filter: ${props => props.theme.base.shadow['low-filter']};\n  }\n\n  &.row.sticky-group-header {\n    position: sticky;\n    display: block;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n\n    /* z-index starting from 8 because freeze-line has z-index 7 */\n    z-index: ${props => `${8 + props.groupHeader.index}`};\n    > .cell-action,\n    .cell-fixed {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n    flex-shrink: 0;\n  }\n\n  .group-header-groupby {\n    font-weight: ${props => props.theme.base['font-weight'].normal};\n  }\n\n  .group-context-count .group-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n    white-space: pre;\n  }\n\n  &.row.group-header-row {\n    height: auto;\n    border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};\n\n    .group-header-aggregation-row {\n      display: flex;\n\n      /* 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 */\n      height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n\n      &::before {\n        content: '';\n        position: sticky;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        width: 0.25rem;\n        height: 100%;\n        background-color: ${props => props.groupHeader.colorIndicator};\n        z-index: 12;\n      }\n    }\n  }\n\n  &.group-header-row .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    height: var(--group-header-height);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: max-content;\n      max-width: var(--container-width);\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      margin-inline-start: 0.25rem;\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n      text-align: inherit;\n      font-stretch: inherit;\n\n      > .group-wrapper {\n        margin-inline-start: ${({ groupHeader, theme }) =>\n          groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n        align-items: baseline;\n      }\n\n      .cell-content {\n        max-height: var(--group-header-height);\n        padding: 0;\n      }\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      width: 0.25rem;\n      height: 100%;\n      background-color: ${props => props.groupHeader.colorIndicator};\n      z-index: 12;\n    }\n  }\n  .group-header.cell {\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\nconst StyledText = styled(Text)`\n  display: inline-flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nconst StyledMetaList = styled(MetaList)`\n  margin-inline-start: 0;\n`;\nconst GroupAdditionalInfoSeparator = styled(StyledMetaListItem)`\n  margin-inline-start: 0.3rem;\n`;\n\n/**\n * For\n * @param {*} additionalFieldData\n * @param {*} additionalField\n * @param {*} param2\n * @returns\n */\n/**\n * Formats additional field data based on its type and properties.\n *\n * @typedef {NonNullable<\n *   Awaited<\n *     ReturnType<\n *       NonNullable<\n *         import('pega-repeating-structures-core').RsCoreTypes.ApiContext['fetchGroupedInfo']\n *       >\n *     >\n *   >[number]['additionalFieldsData']\n * >[number]} AdditionalFieldData\n *\n * @typedef {import('pega-repeating-structures-core').RsCoreTypes.Column} Column\n * @typedef {import('pega-repeating-structures-core').RsCoreTypes.Meta} Meta\n * @typedef {import('pega-repeating-structures-core').RsCoreTypes.GroupGenerator} GroupGenerator\n *\n * @param {AdditionalFieldData} additionalFieldData - The data for the additional field.\n * @param {import('pega-repeating-structures-core').RsCoreTypes.GroupAdditionalField} additionalField - The configuration for the additional field.\n * @param {{column: Column, meta: Meta, groupHeader: GroupGenerator}} config - Additional config for formatting.\n * @param {Column} config.column - The column configuration.\n * @param {Meta} config.meta - RS Meta.\n * @param {GroupGenerator} config.groupHeader - The group header data.\n *\n * @returns {{label: string, renderer: ReactNode | string}} An object containing the formatted label and renderer.\n * @returns {string} returns.label - The formatted label for the additional field.\n * @returns {ReactNode | string} returns.renderer - The React component or value to render.\n */\nconst getFormattedAdditionalFieldData = (\n  additionalFieldData,\n  additionalField,\n  { column, meta, groupHeader, translate }\n) => {\n  const { value, count = 0 } = additionalFieldData || {};\n  const { aggregation, dateFunction } = additionalField || {};\n  const { locale, timezone } = meta;\n  const {\n    label,\n    field: { type }\n  } = column;\n\n  // Additional field as aggregation\n  if (aggregation && type === FieldType.NUMBER) {\n    return {\n      label: `${label}(${translate(aggregation)})`,\n      renderer: getFormattedAggregationValue(value, aggregation, column)\n    };\n  }\n\n  // Additional field as Date part\n  if (dateFunction && [FieldType.DATE, FieldType.DATE_TIME, FieldType.DATE_ONLY].includes(type)) {\n    return {\n      label: `${label}(${translate(dateFunctionLabels[dateFunction])})`,\n      renderer: (\n        <DateValueDisplay\n          value={value}\n          dateFunction={dateFunction}\n          locale={locale}\n          timezone={timezone}\n        />\n      )\n    };\n  }\n\n  // Additional field as normal field but with multiple values.\n  if (count > 1) {\n    const { getFormatterByKey } = column.parent;\n    const integerFormatter = getFormatterByKey('Integer');\n    return {\n      label: `${label}(${translate('Count')})`,\n      renderer: integerFormatter ? integerFormatter(count, { locale }) : count\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 { getValue: () => groupHeader.data, name: 'groupHeader' };\n            }\n          }\n        }}\n      />\n    )\n  };\n};\n\nconst GroupAdditionalInfo = ({ additionalFieldData, columns, groupHeader, additionalField }) => {\n  const [infoRef, setInfoRef] = useElement(null);\n  const [translate] = useTranslate();\n  const { id } = additionalFieldData;\n  const column = columns.find(c => c.field.id === id);\n\n  if (!column) return null;\n\n  const { meta } = column.parent;\n\n  const { label, renderer } = getFormattedAdditionalFieldData(\n    additionalFieldData,\n    additionalField,\n    { column, meta, groupHeader, translate }\n  );\n\n  return (\n    <>\n      <Flex container={{ gap: 0.5 }} ref={setInfoRef}>\n        <StyledText variant='secondary' data-testid='additional-field-label'>\n          {label}:\n        </StyledText>\n        <StyledText variant='secondary' data-testid='additional-field-renderer'>\n          {renderer}\n        </StyledText>\n      </Flex>\n      <Tooltip smart target={infoRef} showDelay='short' hideDelay='none'>\n        <Text>{`${label}: `}</Text>\n        <Text>{renderer}</Text>\n      </Tooltip>\n    </>\n  );\n};\n\n/**\n *  Returns label for interval grouping based on interval and boundaries\n  Response data depends on boundary settings.\n Ex: For sample data of profit\n    profit  --> cases(count)\n   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}\n  For Interval 10\n  If the boundary is 'include-lower-only',\n    and  value is 10 then label -> 10 to 20\n\n  If boundary is 'include-upper-only',\n    and value is 10 then label ->  0 to 10\n  * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n  const { interval, boundaries } = customFunction;\n  // To restrict the decimals in labels\n  const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n  value = Number(value);\n  // In case of 'include-lower-only'\n  let lowerValue = value.toFixed(intervalDecimalLength);\n  let upperValue = (value + interval).toFixed(intervalDecimalLength);\n  // In case of boundary 'include-upper-only'\n  if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n    lowerValue = (value - interval).toFixed(intervalDecimalLength);\n    upperValue = value.toFixed(intervalDecimalLength);\n  }\n  return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nfunction GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n  const [translate] = useTranslate();\n  const { locale, timezone } = view.meta;\n  const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n  const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n  if (dateFunction) {\n    return (\n      <DateValueDisplay\n        value={groupHeader.name}\n        dateFunction={dateFunction}\n        locale={locale}\n        timezone={timezone}\n      />\n    );\n  }\n\n  if (isRangeGrouping) {\n    /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n    return groupHeader.name;\n  }\n\n  if (isIntervalGrouping) {\n    /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n    return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n  }\n\n  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)\n\n  const columnRendererProps = {\n    ...column.getRenderingEngineProps(),\n    context: {\n      getValue: () => groupHeader.name,\n      getExecutionContext: () => {\n        return { getValue: () => groupHeader.data, name: 'groupHeader' };\n      }\n    }\n  };\n\n  return <RenderingEngine {...columnRendererProps} />;\n}\n\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n  const buttonRef = useRef();\n\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n\n  const view = columns[0].parent;\n  // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n  const {\n    columnId,\n    dateFunction,\n    customFunction,\n    additionalFields = []\n  } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n  if (!columnId) {\n    return null;\n  }\n\n  const column = columns.find(c => c.field.id === columnId);\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n  const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n  // FIXME: Import rather than COPY, i would rather\n  return (\n    <StyledGroupHeader\n      groupHeader={groupHeader}\n      className={cx('row group-header-row sticky-group-header')}\n      data-test-id='groupHeader'\n      data-testid={TestIdConstants.groupHeader}\n      isAggregationApplied={isAggregationApplied}\n      role='row'\n      onFocus={e => {\n        if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n          e.preventDefault();\n          buttonRef.current.focus();\n        }\n      }}\n    >\n      <div className='stickyGroupHeader'>\n        <BareButton\n          ref={buttonRef}\n          aria-label={`${\n            column.field.hideGroupColumnNameLabel ? '' : groupHeader.label\n          } ${groupHeader.name}, ${groupCountFormatted} items`}\n          aria-expanded={!!groupHeader.isExpanded}\n          style={{\n            paddingRight: 'var(--group-left)'\n          }}\n          onClick={() => groupHeader.count > 0 && view.type.toggleGroupExpansion({ groupHeader })}\n          tabIndex={-1}\n          icon\n        >\n          {groupHeader.count > 0 &&\n            (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n          <div className='group-wrapper'>\n            <div className='group-label' />\n            {!column.field.hideGroupColumnNameLabel && (\n              <span\n                className='group-header-groupby'\n                data-test-id={groupHeader.groupBy}\n                data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n              >\n                {groupHeader.label}:\n              </span>\n            )}\n            <div className='group-label' />\n            <span\n              className='group-context-count'\n              style={{ display: 'inline-flex' }}\n              data-test-id='groupHeader'\n              data-testid={TestIdConstants.groupHeaderCount}\n            >\n              <GroupName\n                view={view}\n                column={column}\n                groupHeader={groupHeader}\n                dateFunction={dateFunction}\n                customFunction={customFunction}\n              />\n              {/* adding whitespace pre to preserve the space at the begining of count text */}\n              <span className='group-count'>{` (${groupCountFormatted})`}</span>\n            </span>\n            {!!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (\n              <>\n                <Text aria-hidden variant='secondary' as={GroupAdditionalInfoSeparator}>\n                  •\n                </Text>\n                <StyledMetaList\n                  wrapItems={false}\n                  items={[\n                    ...groupHeader.additionalFieldsData.map(additionalFieldsData => (\n                      <GroupAdditionalInfo\n                        additionalFieldData={additionalFieldsData}\n                        additionalField={additionalFields.find(\n                          additionalField => additionalField.id === additionalFieldsData.id\n                        )}\n                        columns={columns}\n                        groupHeader={groupHeader}\n                      />\n                    ))\n                  ]}\n                />\n              </>\n            )}\n          </div>\n        </BareButton>\n      </div>\n      <div className='group-header-aggregation-row'>\n        {columns.map(c => {\n          const cxt = {\n            getValue: () =>\n              groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n          };\n          return (\n            <AggregatorCell\n              key={c.field.id}\n              column={c}\n              context={cxt}\n              className={cx('cell', {\n                'cell-fixed': column.frozen\n              })}\n            />\n          );\n        })}\n      </div>\n    </StyledGroupHeader>\n  );\n}\n\nGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/Grouping/GroupingMenu.js

@@ -57,7 +57,7 @@ export default function GroupingMenu({ column, finishPopOver }) {
         applyGrouping([...groups, newGroup]);
         finishPopOver();
     };
-    return (_jsxs(StyledGroupingMenu, { children: [_jsx(Select, { label: 'Date function', labelHidden: true, "data-test-id": 'GroupingDateFuncSelector', value: selectedDateFunction || 'NONE', onChange: e => setSelectedDateFunction(e.target.value), children: allOptions.map(o => (_jsx(Option, { value: o.key, children: o.label }, o.key))) }), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: finishPopOver, children: translate('Cancel') }), _jsx(Button, { variant: 'primary', onClick: onSubmit, children: translate('Submit') })] })] }));
+    return (_jsxs(StyledGroupingMenu, { children: [_jsx(Select, { label: 'Date function', labelHidden: true, "data-test-id": 'GroupingDateFuncSelector', value: selectedDateFunction || 'NONE', onChange: e => setSelectedDateFunction(e.target.value), children: allOptions.map(o => (_jsx(Option, { value: o.key, children: translate(o.label) }, o.key))) }), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: finishPopOver, children: translate('Cancel') }), _jsx(Button, { variant: 'primary', onClick: onSubmit, children: translate('Submit') })] })] }));
 }
 GroupingMenu.propTypes = {
     column: PropTypes.objectOf(PropTypes.any).isRequired,

package/lib/Core/Components/Grouping/GroupingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingMenu.js","sourceRoot":"","sources":["../../../../Core/Components/Grouping/GroupingMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Button, Flex, Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst StyledFooter = styled.footer`\n  margin-top: 0.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n`;\n\nconst StyledGroupingMenu = styled(Flex)`\n  z-index: ${props => props.theme.base['z-index'].popover};\n  max-height: 35.156rem;\n  padding: 0.625rem;\n  overflow: auto;\n  max-width: ${props => props.theme.base['content-width'].lg};\n  min-width: calc(${props => props.theme.base['content-width'].lg} * 0.3125);\n  display: flex;\n  flex-direction: column;\n`;\nexport default function GroupingMenu({ column, finishPopOver }) {\n  const [translate] = useTranslate();\n  const [selectedDateFunction, setSelectedDateFunction] = useState(undefined);\n  const view = column.parent;\n  const {\n    meta: { dateFunctions },\n    state: { groups = [] },\n    type: { applyGrouping }\n  } = view;\n\n  const fieldType = column.field.type;\n  const allOptions = useMemo(() => {\n    // If date functions are disabled or not applicable to the current field type\n    if (!dateFunctions || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {\n      return [];\n    }\n\n    return [\n      // Date functions applicable for the given field type\n      ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n        key: f,\n        dateFunction: f,\n        label: translate(dateFunctionLabels[f])\n      })),\n\n      // Option for grouping directly by the field values\n      // The key 'NONE' is needed to work with the Select component\n      { key: 'NONE', dateFunction: undefined, label: 'Default' }\n    ];\n  }, [dateFunctions, fieldType, translate]);\n\n  if (allOptions.length === 0) {\n    return null;\n  }\n\n  const onSubmit = () => {\n    const newGroup = {\n      columnId: column.field.id,\n      dateFunction: selectedDateFunction,\n      level: groups.length,\n      order: 'asc'\n    };\n    applyGrouping([...groups, newGroup]);\n    finishPopOver();\n  };\n\n  return (\n    <StyledGroupingMenu>\n      <Select\n        label='Date function'\n        labelHidden\n        data-test-id='GroupingDateFuncSelector'\n        value={selectedDateFunction || 'NONE'} // Can't set up `undefined` as value\n        onChange={e => setSelectedDateFunction(e.target.value)}\n      >\n        {allOptions.map(o => (\n          <Option key={o.key} value={o.key}>\n            {o.label}\n          </Option>\n        ))}\n      </Select>\n      <StyledFooter>\n        <Button onClick={finishPopOver}>{translate('Cancel')}</Button>\n        <Button variant='primary' onClick={onSubmit}>\n          {translate('Submit')}\n        </Button>\n      </StyledFooter>\n    </StyledGroupingMenu>\n  );\n}\n\nGroupingMenu.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any).isRequired,\n  finishPopOver: PropTypes.func.isRequired\n};\n"]}
+{"version":3,"file":"GroupingMenu.js","sourceRoot":"","sources":["../../../../Core/Components/Grouping/GroupingMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Button, Flex, Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst StyledFooter = styled.footer`\n  margin-top: 0.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n`;\n\nconst StyledGroupingMenu = styled(Flex)`\n  z-index: ${props => props.theme.base['z-index'].popover};\n  max-height: 35.156rem;\n  padding: 0.625rem;\n  overflow: auto;\n  max-width: ${props => props.theme.base['content-width'].lg};\n  min-width: calc(${props => props.theme.base['content-width'].lg} * 0.3125);\n  display: flex;\n  flex-direction: column;\n`;\nexport default function GroupingMenu({ column, finishPopOver }) {\n  const [translate] = useTranslate();\n  const [selectedDateFunction, setSelectedDateFunction] = useState(undefined);\n  const view = column.parent;\n  const {\n    meta: { dateFunctions },\n    state: { groups = [] },\n    type: { applyGrouping }\n  } = view;\n\n  const fieldType = column.field.type;\n  const allOptions = useMemo(() => {\n    // If date functions are disabled or not applicable to the current field type\n    if (!dateFunctions || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {\n      return [];\n    }\n\n    return [\n      // Date functions applicable for the given field type\n      ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n        key: f,\n        dateFunction: f,\n        label: translate(dateFunctionLabels[f])\n      })),\n\n      // Option for grouping directly by the field values\n      // The key 'NONE' is needed to work with the Select component\n      { key: 'NONE', dateFunction: undefined, label: 'Default' }\n    ];\n  }, [dateFunctions, fieldType, translate]);\n\n  if (allOptions.length === 0) {\n    return null;\n  }\n\n  const onSubmit = () => {\n    const newGroup = {\n      columnId: column.field.id,\n      dateFunction: selectedDateFunction,\n      level: groups.length,\n      order: 'asc'\n    };\n    applyGrouping([...groups, newGroup]);\n    finishPopOver();\n  };\n\n  return (\n    <StyledGroupingMenu>\n      <Select\n        label='Date function'\n        labelHidden\n        data-test-id='GroupingDateFuncSelector'\n        value={selectedDateFunction || 'NONE'} // Can't set up `undefined` as value\n        onChange={e => setSelectedDateFunction(e.target.value)}\n      >\n        {allOptions.map(o => (\n          <Option key={o.key} value={o.key}>\n            {translate(o.label)}\n          </Option>\n        ))}\n      </Select>\n      <StyledFooter>\n        <Button onClick={finishPopOver}>{translate('Cancel')}</Button>\n        <Button variant='primary' onClick={onSubmit}>\n          {translate('Submit')}\n        </Button>\n      </StyledFooter>\n    </StyledGroupingMenu>\n  );\n}\n\nGroupingMenu.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any).isRequired,\n  finishPopOver: PropTypes.func.isRequired\n};\n"]}

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

@@ -44,7 +44,7 @@ const DateFunctionSelector = props => {
     // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.
     const { available } = groupingOptions.dateFuncs[group.columnId];
     const optionsToUse = allOptions.filter(o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction);
-    return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => onChange(e.target.value === 'NONE' ? undefined : e.target.value), children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: o.label }, o.key))) }) }));
+    return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => onChange(e.target.value === 'NONE' ? undefined : e.target.value), children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: translate(o.label) }, o.key))) }) }));
 };
 DateFunctionSelector.propTypes = {
     group: PropTypes.objectOf(PropTypes.any).isRequired,