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

package/README.md

@@ -49,7 +49,7 @@ import { RepeatingStructures } from '@pega/lists-react';
 | showCount                                   | Boolean          |    No     |                                                                                                              `true`                                                                                                              | Display count in toolbar                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | defaultRowHeight                            | String           |    No     |                                                                                                           `undefined`                                                                                                            | Row density id value from [displayDensity](#displayDensity) options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | allowBulkActions                            | boolean          |    No     |                                                                                                             `false`                                                                                                              | Renders the 'Bulk actions' button in the table toolbar, which gets enabled on row selection                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| dateFunctions                               | Object           |    No     |                                                                                                           `undefined`                                                                                                            | Enables date-functions like MONTHS/WEEKS/... during Grouping and Filtering. ([Object structure](https://git.pega.io/projects/PS/repos/cosmos/browse/packages/cosmos-condition-builder/src/components/ConditionBuilder/ConditionBuilder.types.ts?until=dfcf607851276bfeb877e9fb2c8f55d4396fd8b7&untilPath=packages%2Fcosmos-condition-builder%2Fsrc%2Fcomponents%2FConditionBuilder%2FConditionBuilder.types.ts#79-85))                                                                                                                                                                                                 |
+| dateFunctions                               | Object           |    No     |                                                                                                           `undefined`                                                                                                            | Enables date-functions like MONTHS/WEEKS/... during Grouping and Filtering. ([Object structure](https://github.com/Pega-UXEngineering/constellation-frontend/blob/028ffa1642e12c61a3383b9babc0e0e83800d352/packages/cosmos-condition-builder/src/components/ConditionBuilder/ConditionBuilder.types.ts#L137))                                                                                                                                                                                                                                                                                                          |
 | relativeDates                               | Boolean          |    No     |                                                                                                             `false`                                                                                                              | Enables Relative Dates, such as "Last 7 days" or "Current Year", in Filtering for DateTime or Date_Only values.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | footer                                      | Boolean          |    No     |                                                                                                              `true`                                                                                                              | Display footer on the view                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | dynamicFieldTemplates                       | Object           |    No     | `dynamicFieldTemplates: [{ name: 'Comma separated', value: 'comma',selected: true }, { name: 'Space separated', value: 'space' }, { name: 'Multi line', value: 'multiline' }, { name: 'Forward slash', value: 'forwardslash' }]` | Templates for dynamic fields. See section on Dynamic fields                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
@@ -203,9 +203,6 @@ APIs exposed on the component ref are accessible via `compRef.current.<API_NAME>
 
 - The first focus will be on the table's first header cell if earlier no navigation has been done.
 - To navigate between the cells, use the arrow keys.
-- Pressing enter on the cell can turn the cell in edit mode if it is editable.
-  - Pressing enter again will submit the data
-  - Pressing escape will discard the changes and turn the cell back to read mode.
 - To focus out from the table cells, press the tab key and focus will be shifted to the next focusable element on the page after table.
 - Next time when navigated again to the table, the last visited cell will be focused.
 

package/lib/Core/Components/A11y/RepeatingStructureA11y.d.ts

@@ -1,8 +1,13 @@
-declare function RepeatingStructureA11y({ children, a11yRef, view }: {
-    children: any;
-    a11yRef: any;
-    view: any;
-}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Provides accessibility features for repeating structures, including focus boundary handling
+ * and announcing changes in the view's state for accessibility purposes.
+ *
+ * @param {Object} props.a11yRef - A reference object containing accessibility-related handlers.
+ * @param {Object} props.view - The view object containing the current state of the repeating structure.
+ *
+ * @returns {JSX.Element} The rendered structure with accessibility features.
+ */
+declare function RepeatingStructureA11y({ children, a11yRef, view }: Object): JSX.Element;
 declare namespace RepeatingStructureA11y {
     namespace propTypes {
         let children: PropTypes.Requireable<object>;

package/lib/Core/Components/A11y/RepeatingStructureA11y.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RepeatingStructureA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Components/A11y/RepeatingStructureA11y.jsx"],"names":[],"mappings":"AAeA;;;;4CAgBC;;;;;;;;;;;;;;;;;sBA9BqB,YAAY"}
+{"version":3,"file":"RepeatingStructureA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Components/A11y/RepeatingStructureA11y.jsx"],"names":[],"mappings":"AAgBA;;;;;;;;GAQG;AACH,qEALW,MAAM,GAGJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;;sBAtEqB,YAAY"}

package/lib/Core/Components/A11y/RepeatingStructureA11y.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import useAnnounceGroup from '../../Hooks/a11y/useAnnounceGroup';
+import useAnnounce from '../../Hooks/a11y/useAnnounce';
+import useTranslate from '../../Hooks/useTranslate';
 const StyledInput = styled.input `
   width: 0;
   height: 0;
@@ -11,12 +12,36 @@ const StyledInput = styled.input `
   outline: none;
   opacity: 0;
 `;
+/**
+ * Provides accessibility features for repeating structures, including focus boundary handling
+ * and announcing changes in the view's state for accessibility purposes.
+ *
+ * @param {Object} props.a11yRef - A reference object containing accessibility-related handlers.
+ * @param {Object} props.view - The view object containing the current state of the repeating structure.
+ *
+ * @returns {JSX.Element} The rendered structure with accessibility features.
+ */
 export default function RepeatingStructureA11y({ children, a11yRef, view }) {
+    const [translate] = useTranslate();
     const onFocusHandler = useCallback(e => {
         a11yRef.current.boundaryElementsFocusHandler(e);
     }, [a11yRef]);
     const { state } = view;
-    useAnnounceGroup(state);
+    // For show/hide columns, we only use the 'modified' message because there is always at least one column present.
+    // Any change—whether adding or removing a column is considered a modification for accessibility announcement.
+    useAnnounce(state.hiddenColumns, {
+        modified: translate('Show/Hide modified')
+    }, state.personalization?.active);
+    useAnnounce(state.freezeColumns, {
+        added: translate('Freeze applied'),
+        modified: translate('Freeze modified'),
+        removed: translate('Freeze removed')
+    }, state.personalization?.active);
+    useAnnounce(state.groups, {
+        added: translate('Group applied'),
+        modified: translate('Group modified'),
+        removed: translate('Group removed')
+    }, state.personalization?.active);
     return (_jsxs(_Fragment, { children: [_jsx(StyledInput, { className: 'top', type: 'text', "aria-hidden": true, onFocus: onFocusHandler }), children, _jsx(StyledInput, { className: 'bottom', type: 'text', "aria-hidden": true, onFocus: onFocusHandler })] }));
 }
 RepeatingStructureA11y.propTypes = {

package/lib/Core/Components/A11y/RepeatingStructureA11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"RepeatingStructureA11y.js","sourceRoot":"","sources":["../../../../Core/Components/A11y/RepeatingStructureA11y.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,gBAAgB,MAAM,mCAAmC,CAAC;AAEjE,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE;IACxE,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAC,EAAE;QACF,OAAO,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxB,OAAO,CACL,8BACE,KAAC,WAAW,IAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,uBAAa,OAAO,EAAE,cAAc,GAAI,EAC/E,QAAQ,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,uBAAa,OAAO,EAAE,cAAc,GAAI,IAClF,CACJ,CAAC;AACJ,CAAC;AAED,sBAAsB,CAAC,SAAS,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAClE,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,UAAU;IAC1D,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG;IACpC,QAAQ,EAAE,EAAE;CACb,CAAC","sourcesContent":["import { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport useAnnounceGroup from '../../Hooks/a11y/useAnnounceGroup';\n\nconst StyledInput = styled.input`\n  width: 0;\n  height: 0;\n  border-width: 0;\n  position: absolute;\n  outline: none;\n  opacity: 0;\n`;\n\nexport default function RepeatingStructureA11y({ children, a11yRef, view }) {\n  const onFocusHandler = useCallback(\n    e => {\n      a11yRef.current.boundaryElementsFocusHandler(e);\n    },\n    [a11yRef]\n  );\n  const { state } = view;\n  useAnnounceGroup(state);\n  return (\n    <>\n      <StyledInput className='top' type='text' aria-hidden onFocus={onFocusHandler} />\n      {children}\n      <StyledInput className='bottom' type='text' aria-hidden onFocus={onFocusHandler} />\n    </>\n  );\n}\n\nRepeatingStructureA11y.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  a11yRef: PropTypes.objectOf(PropTypes.objectOf).isRequired,\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nRepeatingStructureA11y.defaultProps = {\n  children: []\n};\n"]}
+{"version":3,"file":"RepeatingStructureA11y.js","sourceRoot":"","sources":["../../../../Core/Components/A11y/RepeatingStructureA11y.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,WAAW,MAAM,8BAA8B,CAAC;AACvD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;CAO/B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE;IACxE,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAC,EAAE;QACF,OAAO,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,iHAAiH;IACjH,8GAA8G;IAC9G,WAAW,CACT,KAAK,CAAC,aAAa,EACnB;QACE,QAAQ,EAAE,SAAS,CAAC,oBAAoB,CAAC;KAC1C,EACD,KAAK,CAAC,eAAe,EAAE,MAAM,CAC9B,CAAC;IAEF,WAAW,CACT,KAAK,CAAC,aAAa,EACnB;QACE,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC;QAClC,QAAQ,EAAE,SAAS,CAAC,iBAAiB,CAAC;QACtC,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC;KACrC,EACD,KAAK,CAAC,eAAe,EAAE,MAAM,CAC9B,CAAC;IAEF,WAAW,CACT,KAAK,CAAC,MAAM,EACZ;QACE,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC;QACjC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC;QACrC,OAAO,EAAE,SAAS,CAAC,eAAe,CAAC;KACpC,EACD,KAAK,CAAC,eAAe,EAAE,MAAM,CAC9B,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,WAAW,IAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,uBAAa,OAAO,EAAE,cAAc,GAAI,EAC/E,QAAQ,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,uBAAa,OAAO,EAAE,cAAc,GAAI,IAClF,CACJ,CAAC;AACJ,CAAC;AAED,sBAAsB,CAAC,SAAS,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAClE,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,UAAU;IAC1D,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG;IACpC,QAAQ,EAAE,EAAE;CACb,CAAC","sourcesContent":["import { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport useAnnounce from '../../Hooks/a11y/useAnnounce';\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst StyledInput = styled.input`\n  width: 0;\n  height: 0;\n  border-width: 0;\n  position: absolute;\n  outline: none;\n  opacity: 0;\n`;\n\n/**\n * Provides accessibility features for repeating structures, including focus boundary handling\n * and announcing changes in the view's state for accessibility purposes.\n *\n * @param {Object} props.a11yRef - A reference object containing accessibility-related handlers.\n * @param {Object} props.view - The view object containing the current state of the repeating structure.\n *\n * @returns {JSX.Element} The rendered structure with accessibility features.\n */\nexport default function RepeatingStructureA11y({ children, a11yRef, view }) {\n  const [translate] = useTranslate();\n  const onFocusHandler = useCallback(\n    e => {\n      a11yRef.current.boundaryElementsFocusHandler(e);\n    },\n    [a11yRef]\n  );\n  const { state } = view;\n  // For show/hide columns, we only use the 'modified' message because there is always at least one column present.\n  // Any change—whether adding or removing a column is considered a modification for accessibility announcement.\n  useAnnounce(\n    state.hiddenColumns,\n    {\n      modified: translate('Show/Hide modified')\n    },\n    state.personalization?.active\n  );\n\n  useAnnounce(\n    state.freezeColumns,\n    {\n      added: translate('Freeze applied'),\n      modified: translate('Freeze modified'),\n      removed: translate('Freeze removed')\n    },\n    state.personalization?.active\n  );\n\n  useAnnounce(\n    state.groups,\n    {\n      added: translate('Group applied'),\n      modified: translate('Group modified'),\n      removed: translate('Group removed')\n    },\n    state.personalization?.active\n  );\n\n  return (\n    <>\n      <StyledInput className='top' type='text' aria-hidden onFocus={onFocusHandler} />\n      {children}\n      <StyledInput className='bottom' type='text' aria-hidden onFocus={onFocusHandler} />\n    </>\n  );\n}\n\nRepeatingStructureA11y.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  a11yRef: PropTypes.objectOf(PropTypes.objectOf).isRequired,\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nRepeatingStructureA11y.defaultProps = {\n  children: []\n};\n"]}

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":"AAqEA;;;mDA2DC;;;;;;;;;;;;;;;;;;AA9EM,kEALI,MAAM,GAAC,MAAM,mBACb,MAAM,UACN,OAAO,gCAAgC,EAAE,WAAW,CAAC,MAAM,GACzD,MAAM,GAAC,MAAM,CAmBzB;sBAlEqB,YAAY"}

package/lib/Core/Components/AggregateMenu.js

@@ -12,6 +12,9 @@ const StyledMenuButton = styled(MenuButton) `
   }
 `;
 const StyledCell = styled.div `
+  &:not(:has(${StyledMenuButton})) {
+    gap: 0.25rem;
+  }
   display: flex;
   text-align: right;
   justify-content: flex-end;
@@ -25,11 +28,36 @@ 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();
+    const isFooterAggregate = context.getExecutionContext?.()?.name === 'footer';
     const actions = aggregateOptions[column.field.type]?.map(label => ({
         primary: translate(label),
         id: label,
@@ -39,28 +67,14 @@ 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: {
+    return (_jsxs(StyledCell, { children: [_jsx("span", { children: translate(aggregationType) }), isFooterAggregate && (_jsx(StyledMenuButton, { className: 'aggregate-button', menu: {
                     items: actions,
                     mode: 'single-select'
                 }, popover: {
                     portal: true
-                }, icon: 'arrow-micro-down', iconOnly: true, variant: 'simple', compact: true, text: buttonText, "aria-labelledby": `${uid}_label` }), _jsx(Flex, { container: true, as: StyledAggregationValue, item: { shrink: 0 }, "data-testid": TestIdConstants.aggregateDisplayValue, children: aggregationValue }), _jsx(VisuallyHiddenText, { id: `${uid}_label`, "aria-hidden": true, children: `${translate(aggregationType)} ${context.getValue()} ${buttonText}` })] }));
+                }, icon: 'arrow-micro-down', iconOnly: true, variant: 'simple', compact: true, text: buttonText, "aria-labelledby": `${uid}_label` })), _jsx(Flex, { container: true, as: StyledAggregationValue, item: { shrink: 0 }, "data-testid": TestIdConstants.aggregateDisplayValue, children: aggregationValue }), _jsx(VisuallyHiddenText, { id: `${uid}_label`, "aria-hidden": true, children: `${translate(aggregationType)} ${context.getValue()} ${buttonText}` })] }));
 }
 AggregateMenu.propTypes = {
     column: PropTypes.objectOf(PropTypes.any),

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  &:not(:has(${StyledMenuButton})) {\n    gap: 0.25rem;\n  }\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  const isFooterAggregate = context.getExecutionContext?.()?.name === 'footer';\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      {isFooterAggregate && (\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      )}\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

@@ -1,17 +1,8 @@
-declare function ContextMenuContainer({ view, selector }: {
-    view: any;
-    selector: any;
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+export default function ContextMenuContainer({ view, selector }: {
+    view: RsCoreTypes.View;
+    selector: {
+        query: string;
+    };
 }): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ContextMenuContainer {
-    namespace propTypes {
-        let view: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-        let selector: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-    }
-}
-export default ContextMenuContainer;
-import PropTypes from 'prop-types';
 //# sourceMappingURL=ContextMenuContainer.d.ts.map

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.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA0FlE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,IAAI,EACJ,QAAQ,EACT,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7B,kDAyGA"}

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

@@ -1,134 +1,55 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { Popover, Icon, useElement, useOuterEvent, Menu, isInstance } 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';
 import useScrollAway from '../../Hooks/useScrollAway';
+import TestIdConstants from '../TestIdConstants';
 import { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';
 import copyText from './CopyPaste';
-const StyledPopover = styled.div `
-  width: 10rem;
-`;
-const StyledContent = styled.div(({ theme }) => {
-    return css `
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0.25rem;
-    border-radius: 0.156rem;
-    box-sizing: border-box;
-    cursor: pointer;
-    margin-top: 0.125rem;
-    margin-bottom: 0.125rem;
-    :hover {
-      background-color: ${theme.base.colors.blue['extra-light']};
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-  `;
-});
-const StyledListItem = styled.div(({ theme }) => {
-    return css `
-    button {
-      display: flex;
-      align-items: center;
-      /* stylelint-disable unit-allowed-list */
-      padding: 4px 8px;
-    }
-    .label {
-      padding-left: 14px;
-      vertical-align: text-top;
-    }
-    .disabled {
-      padding-left: 14px;
-      vertical-align: text-top;
-      opacity: ${theme.base['disabled-opacity']};
-    }
-  `;
-});
-const StyledButton = styled.button `
-  display: block;
-  text-align: start;
-  background: none;
-  border: none;
-  line-height: 1;
-  outline: none;
-  cursor: pointer;
-  color: ${props => props.theme.base.palette['foreground-color']};
-  border-radius: 0;
-`;
-const getDefaultMenuItems = (column, rowContextData, targetCell, columns, filterExpression, actionColumnFiltering, actionClearFiltering, translate) => {
-    const isFiltered = isFilterApplied(column, filterExpression);
-    return [
-        {
+const getMenuItems = (targetCell, column, rowContextData, view, translate) => {
+    const { columns = [], state: { filterExpression } = {}, type: { applyFilter: applyViewFilter, clearFilter } } = view;
+    const defaultMenuItems = [];
+    if (quickFilterEnabled(columns, column.field.id)) {
+        const isFiltered = filterExpression && isFilterApplied(column, filterExpression);
+        defaultMenuItems.push({
             id: 'quickFilter',
-            icon: isFiltered ? 'times' : 'filter',
-            label: isFiltered ? translate('Remove filter') : translate('Filter by this'),
-            show: !!quickFilterEnabled(columns, column.field.id),
-            disabled: false,
+            visual: isFiltered ? _jsx(Icon, { name: 'times' }) : _jsx(Icon, { name: 'filter' }),
+            primary: isFiltered ? translate('Remove filter') : translate('Filter by this'),
             onClick: () => {
                 if (isFiltered) {
-                    return removeFilter(filterExpression, targetCell, actionColumnFiltering, actionClearFiltering);
+                    removeFilter(filterExpression, targetCell, applyViewFilter, clearFilter);
+                }
+                else {
+                    applyFilter(columns, targetCell, rowContextData, filterExpression, applyViewFilter);
                 }
-                return applyFilter(columns, targetCell, rowContextData, filterExpression, actionColumnFiltering);
             }
-        },
-        {
-            id: 'copyText',
-            icon: 'copy',
-            label: translate('Copy text'),
-            show: true,
-            disabled: false,
-            onClick: () => copyText(targetCell)
-        },
-        {
-            id: 'pasteText',
-            icon: 'documents',
-            label: translate('Paste text'),
-            show: true,
-            disabled: true,
-            onClick: () => { }
-        }
-    ];
-};
-const getMenuItems = (targetCell, column, rowContextData, columns, filterExpression, actionColumnFiltering, actionClearFiltering, translate) => {
-    const fieldContextOptions = column.field?.contextMenuOptions || [];
-    return [
-        ...getDefaultMenuItems(column, rowContextData, targetCell, columns, filterExpression, actionColumnFiltering, actionClearFiltering, translate),
-        ...fieldContextOptions
-    ];
-};
-const shouldOverrideContextMenu = (targetCell, columns) => {
-    if (!targetCell) {
-        return false;
+        });
     }
+    defaultMenuItems.push({
+        id: 'copyText',
+        visual: _jsx(Icon, { name: 'copy' }),
+        primary: translate('Copy text'),
+        onClick: () => copyText(targetCell)
+    });
+    const fieldSpecificMenuItems = (column.field?.contextMenuOptions || []).map(option => ({
+        id: option.id,
+        visual: option.icon ? _jsx(Icon, { name: option.icon }) : undefined,
+        primary: option.label || '',
+        onClick: () => option.onClick?.(targetCell)
+    }));
+    return [...defaultMenuItems, ...fieldSpecificMenuItems];
+};
+const shouldOverrideContextMenu = (targetCell, columns = []) => {
     const { colId } = targetCell.dataset;
     const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) || {};
     return !(!field || field?.noContextMenu);
 };
-const MenuItem = ({ menu = {}, target = {}, column = {}, rowContextData = {}, onMenuItemClick = () => { } }) => {
-    const { onClick = () => { }, icon, disabled = false, show = true, label } = menu;
-    if (!show) {
-        return null;
-    }
-    return (_jsx(StyledContent, { onClick: () => {
-            onMenuItemClick();
-            onClick(target, column, rowContextData);
-        }, children: _jsx(StyledListItem, { children: _jsxs(StyledButton, { children: [icon && _jsx(Icon, { name: icon }), _jsx("span", { className: cx('label', { disabled }), children: label })] }) }) }));
-};
-MenuItem.propTypes = {
-    menu: PropTypes.objectOf(PropTypes.any),
-    target: PropTypes.objectOf(PropTypes.any),
-    column: PropTypes.objectOf(PropTypes.any),
-    rowContextData: PropTypes.objectOf(PropTypes.any),
-    onMenuItemClick: PropTypes.func
-};
 export default function ContextMenuContainer({ view, selector }) {
-    const { columns, data, state: { paginationOptions, filterExpression } = {}, domContainer, type: { applyFilter: applyViewFilter, clearFilter } } = view;
+    const { columns = [], data = [], state: { paginationOptions } = {}, domContainer } = view;
     const [translate] = useTranslate();
-    const contextMenuRef = useRef({}).current;
+    const [menuContext, setMenuContext] = useState(null);
     const [showMenu, setShowMenu] = useState(false);
     const [menuItems, setMenuItems] = useState([]);
     const [popperRef, setPopperRef] = useElement();
@@ -139,63 +60,70 @@ export default function ContextMenuContainer({ view, selector }) {
     useScrollAway(popperRef, scrollerElem, () => {
         setShowMenu(false);
     });
-    const onMenuItemClick = useCallback(event => {
-        if (event && event.key !== 'Escape') {
-            return;
+    useEffect(() => {
+        if (!showMenu) {
+            const targetCell = menuContext?.targetCell;
+            if (targetCell) {
+                targetCell.removeAttribute('data-context-menu-active');
+                targetCell.removeAttribute('aria-expanded');
+                targetCell.removeAttribute('aria-controls');
+            }
+            setMenuContext(null);
         }
-        setShowMenu(false);
-    }, []);
-    const contextMenuListener = useCallback(e => {
-        const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;
-        if (shouldOverrideContextMenu(targetElement, columns) &&
-            // TODO: We will add "Open link in new tab" option in context menu once the custom context menu is made accessible.
-            !e.target.closest('a')) {
+    }, [showMenu]);
+    const contextMenuListener = useCallback((e) => {
+        const target = e.target;
+        if (!isInstance(target, Element))
+            return;
+        const targetElement = target.closest(selector.query.toString());
+        if (!isInstance(targetElement, HTMLElement))
+            return;
+        if (shouldOverrideContextMenu(targetElement, columns) && !target.closest('a')) {
             e.stopPropagation();
             e.preventDefault();
-            contextMenuRef.targetCell = targetElement;
-            const { colId } = contextMenuRef.targetCell.dataset;
-            contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());
-            contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);
-            targetElement.classList.add('selection-border', 'disable-select');
-            const options = getMenuItems(targetElement, contextMenuRef.column, contextMenuRef.rowContextData, columns, filterExpression, applyViewFilter, clearFilter, translate);
+            const { colId } = targetElement.dataset;
+            const column = columns.find(col => col.field.id.toString() === colId?.toString());
+            if (!column)
+                return;
+            targetElement.setAttribute('data-context-menu-active', 'true');
+            targetElement.setAttribute('aria-expanded', 'true');
+            const menuId = `rs-context-menu-${uuidV4()}`;
+            targetElement.setAttribute('aria-controls', menuId);
+            const rowContextData = getRowContextData(data, paginationOptions || {}, targetElement);
+            const options = getMenuItems(targetElement, column, rowContextData, view, translate);
+            if (!options.length)
+                return;
             setShowMenu(true);
             setMenuItems(options);
+            setMenuContext({
+                column,
+                targetCell: targetElement,
+                rowContextData,
+                menuId
+            });
         }
-    }, [
-        selector,
-        columns,
-        contextMenuRef.targetCell,
-        contextMenuRef.column,
-        contextMenuRef.rowContextData,
-        data,
-        paginationOptions,
-        filterExpression,
-        applyViewFilter,
-        clearFilter,
-        translate
-    ]);
+    }, [selector, columns, data, paginationOptions, translate, view]);
+    const onKeydown = useCallback(({ key }) => {
+        if (key === 'Escape')
+            setShowMenu(false);
+    }, []);
     useEffect(() => {
-        if (domContainer) {
-            domContainer.addEventListener('contextmenu', contextMenuListener);
-            domContainer.addEventListener('keydown', onMenuItemClick);
-        }
+        const abortController = new AbortController();
+        if (!domContainer)
+            return;
+        domContainer.addEventListener('contextmenu', contextMenuListener, {
+            signal: abortController.signal
+        });
+        document.addEventListener('keydown', onKeydown, {
+            signal: abortController.signal
+        });
         return () => {
-            if (domContainer) {
-                domContainer.removeEventListener('contextmenu', contextMenuListener);
-                domContainer.removeEventListener('keydown', onMenuItemClick);
-            }
+            abortController.abort();
         };
-    }, [domContainer, contextMenuListener, onMenuItemClick]);
-    if (!contextMenuRef.targetCell || !showMenu || !domContainer) {
-        if (contextMenuRef.targetCell && selector) {
-            contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');
-        }
-        return null;
-    }
-    return (_jsx(Popover, { portal: true, ref: setPopperRef, target: contextMenuRef.targetCell, children: _jsx(StyledPopover, { children: menuItems.map(menu => (_jsx(MenuItem, { onMenuItemClick: onMenuItemClick, target: contextMenuRef.targetCell, column: contextMenuRef.column, rowContextData: contextMenuRef.rowContextData, menu: menu }, menu.id))) }) }));
+    }, [domContainer, contextMenuListener]);
+    return showMenu && menuContext ? (_jsx(Popover, { ref: setPopperRef, target: menuContext.targetCell, children: _jsx(Menu, { id: menuContext.menuId, items: menuItems, onItemClick: (_, e) => {
+                e.preventDefault();
+                setShowMenu(false);
+            }, focusControlEl: menuContext.targetCell, className: 'action-menu', "data-testid": TestIdConstants.contextMenu, "data-test-id": 'action-menu' }) })) : null;
 }
-ContextMenuContainer.propTypes = {
-    view: PropTypes.objectOf(PropTypes.any).isRequired,
-    selector: PropTypes.objectOf(PropTypes.any).isRequired
-};
 //# sourceMappingURL=ContextMenuContainer.js.map