@pega/lists-react 9.0.0-build.9.9 → 9.0.0

package/README.md

@@ -146,7 +146,6 @@ fieldDefs
 | ----------------------- | ---------------------- | :-------: | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | toolBarOptions          | `Array<Array<Object>>` |    No     | `[]`          | This property extends options provided in toolbar. Object structure: `{ id: <string(required)>, icon: <optional>, label: <required>, show: <bool(optional)> , onClick: <Func(optional)> }` |
 | onViewReady             | Function               |    No     | `null`        | This function acts as a callback that is invoked when the view is ready                                                                                                                    |
-| onRowClickAction        | Function               |    No     | `null`        | This function is invoked when an item/entry is clicked. The corresponding item data is passed into the function on invocation                                                              |
 | showExportToExcelOption | Boolean                |    No     | `false`       | This option is shown in the toolbar menu when the ListView is sourced from queryable DataPage                                                                                              |
 | additionalInfo          | Object                 |    No     | `undefined    | AdditionalInfo displayed on the toolbar is passed as is to List Toolbar component                                                                                                          |
 
@@ -203,9 +202,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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"RepeatingStructureA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Components/A11y/RepeatingStructureA11y.jsx"],"names":[],"mappings":"AAgBA;;;;;;;;GAQG;AACH,qEALW,MAAM,GAGJ,GAAG,CAAC,OAAO,CAiDvB;;;;;;;;;;;;;;;;;sBAvEqB,YAAY"}

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

@@ -27,9 +27,10 @@ export default function RepeatingStructureA11y({ children, a11yRef, view }) {
         a11yRef.current.boundaryElementsFocusHandler(e);
     }, [a11yRef]);
     const { state } = view;
+    const visibleColumns = view.getVisibleColumnIds();
     // 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, {
+    useAnnounce(visibleColumns, {
         modified: translate('Show/Hide modified')
     }, state.personalization?.active);
     useAnnounce(state.freezeColumns, {

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,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"]}
+{"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,MAAM,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAClD,iHAAiH;IACjH,8GAA8G;IAC9G,WAAW,CACT,cAAc,EACd;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  const visibleColumns = view.getVisibleColumnIds();\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    visibleColumns,\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.map

@@ -1 +1 @@
-{"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"}
+{"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;
@@ -54,6 +57,7 @@ export default function AggregateMenu({ column, context }) {
     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,
@@ -65,12 +69,12 @@ export default function AggregateMenu({ column, context }) {
     const rawAggregationValue = context.getValue();
     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\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"]}
+{"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/AggregatorCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AggregatorCell.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregatorCell.jsx"],"names":[],"mappings":"AAOA;;;mDA6BC;;;;;;;;;;;;sBAnCqB,YAAY"}
+{"version":3,"file":"AggregatorCell.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregatorCell.jsx"],"names":[],"mappings":"AASA;;;mDAgCC;;;;;;;;;;;;sBAxCqB,YAAY"}

package/lib/Core/Components/AggregatorCell.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
 import { createClassName as cx } from '../Utils';
 import AggregateActionMenu from './AggregateMenu';
 export default function AggregatorCell({ column, context }) {
+    const t = useI18n();
     if (column.hidden)
         return null;
     const { field: { id, idHash } } = column;
@@ -16,7 +18,7 @@ export default function AggregatorCell({ column, context }) {
             left: `var(--col-left-${idHash})`,
             order: `var(--col-order-${idHash})`,
             width: `var(--col-width-${idHash})`
-        }, "data-test-id": id, "data-testid": id, children: column.aggregated && (_jsx(Fragment, { children: _jsx(AggregateActionMenu, { column: column, context: context }) }, id)) }));
+        }, "data-test-id": id, "data-testid": id, children: column.aggregated ? (_jsx(Fragment, { children: _jsx(AggregateActionMenu, { column: column, context: context }) }, id)) : (_jsx(VisuallyHiddenText, { children: t('no_value') })) }));
 }
 AggregatorCell.propTypes = {
     column: PropTypes.objectOf(PropTypes.any),

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

@@ -1 +1 @@
-{"version":3,"file":"AggregatorCell.js","sourceRoot":"","sources":["../../../Core/Components/AggregatorCell.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,mBAAmB,MAAM,iBAAiB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE;IACxD,IAAI,MAAM,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAC/B,MAAM,EACJ,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EACtB,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IACzD,OAAO,CACL,iBACM,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,GAAG,SAAS,EAAE;YAChD,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,aAAa,EAAE,MAAM,CAAC,UAAU;YAChC,WAAW,EAAE,MAAM,CAAC,YAAY;SACjC,CAAC,EACF,KAAK,EAAE;YACL,IAAI,EAAE,kBAAkB,MAAM,GAAG;YACjC,KAAK,EAAE,mBAAmB,MAAM,GAAG;YACnC,KAAK,EAAE,mBAAmB,MAAM,GAAG;SACpC,kBACa,EAAE,iBACH,EAAE,YAEd,MAAM,CAAC,UAAU,IAAI,CACpB,KAAC,QAAQ,cACP,KAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,IAD5C,EAAE,CAEN,CACZ,GACG,CACP,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,SAAS,GAAG;IACzB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;CAC3C,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregateActionMenu from './AggregateMenu';\n\nexport default function AggregatorCell({ column, context }) {\n  if (column.hidden) return null;\n  const {\n    field: { id, idHash }\n  } = column;\n  const { classList, ...otherProps } = column.getUIProps();\n  return (\n    <div\n      {...otherProps}\n      className={cx('aggregateCell cell', ...classList, {\n        'cell-fixed': column.frozen,\n        'align-right': column.aggregated,\n        'cell-last': column.isLastColumn\n      })}\n      style={{\n        left: `var(--col-left-${idHash})`,\n        order: `var(--col-order-${idHash})`,\n        width: `var(--col-width-${idHash})`\n      }}\n      data-test-id={id}\n      data-testid={id}\n    >\n      {column.aggregated && (\n        <Fragment key={id}>\n          <AggregateActionMenu column={column} context={context} />\n        </Fragment>\n      )}\n    </div>\n  );\n}\n\nAggregatorCell.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  context: PropTypes.objectOf(PropTypes.any)\n};\n"]}
+{"version":3,"file":"AggregatorCell.js","sourceRoot":"","sources":["../../../Core/Components/AggregatorCell.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,mBAAmB,MAAM,iBAAiB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE;IACxD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,IAAI,MAAM,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAC/B,MAAM,EACJ,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EACtB,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IACzD,OAAO,CACL,iBACM,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,GAAG,SAAS,EAAE;YAChD,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,aAAa,EAAE,MAAM,CAAC,UAAU;YAChC,WAAW,EAAE,MAAM,CAAC,YAAY;SACjC,CAAC,EACF,KAAK,EAAE;YACL,IAAI,EAAE,kBAAkB,MAAM,GAAG;YACjC,KAAK,EAAE,mBAAmB,MAAM,GAAG;YACnC,KAAK,EAAE,mBAAmB,MAAM,GAAG;SACpC,kBACa,EAAE,iBACH,EAAE,YAEd,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,cACP,KAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,IAD5C,EAAE,CAEN,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,kBAAkB,cAAE,CAAC,CAAC,UAAU,CAAC,GAAsB,CACzD,GACG,CACP,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,SAAS,GAAG;IACzB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;CAC3C,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregateActionMenu from './AggregateMenu';\n\nexport default function AggregatorCell({ column, context }) {\n  const t = useI18n();\n  if (column.hidden) return null;\n  const {\n    field: { id, idHash }\n  } = column;\n  const { classList, ...otherProps } = column.getUIProps();\n  return (\n    <div\n      {...otherProps}\n      className={cx('aggregateCell cell', ...classList, {\n        'cell-fixed': column.frozen,\n        'align-right': column.aggregated,\n        'cell-last': column.isLastColumn\n      })}\n      style={{\n        left: `var(--col-left-${idHash})`,\n        order: `var(--col-order-${idHash})`,\n        width: `var(--col-width-${idHash})`\n      }}\n      data-test-id={id}\n      data-testid={id}\n    >\n      {column.aggregated ? (\n        <Fragment key={id}>\n          <AggregateActionMenu column={column} context={context} />\n        </Fragment>\n      ) : (\n        <VisuallyHiddenText>{t('no_value')}</VisuallyHiddenText>\n      )}\n    </div>\n  );\n}\n\nAggregatorCell.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  context: PropTypes.objectOf(PropTypes.any)\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":"AA4MA;;;mDA+GC;;;;;;;;;;;;sBA3TqB,YAAY"}
+{"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"AAEA,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,kDAuIA"}

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

@@ -1,136 +1,54 @@
-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 { mix } from 'polished';
-import { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from 'react';
+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 }) => {
-    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
-    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: ${hoverColor};
-      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();
@@ -141,63 +59,90 @@ export default function ContextMenuContainer({ view, selector }) {
     useScrollAway(popperRef, scrollerElem, () => {
         setShowMenu(false);
     });
-    const onMenuItemClick = useCallback(event => {
-        if (event && event.key !== 'Escape') {
+    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);
+        }
+    }, [showMenu]);
+    const openContextMenu = useCallback((targetElement, eventTarget) => {
+        if (!shouldOverrideContextMenu(targetElement, columns) || eventTarget.closest('a')) {
+            return false;
+        }
+        const { colId } = targetElement.dataset;
+        const column = columns.find(col => col.field.id.toString() === colId?.toString());
+        if (!column)
+            return true;
+        targetElement.setAttribute('data-context-menu-active', 'true');
+        targetElement.setAttribute('aria-expanded', 'true');
+        const menuId = `rs-context-menu-${crypto.randomUUID()}`;
+        targetElement.setAttribute('aria-controls', menuId);
+        const rowContextData = getRowContextData(data, paginationOptions || {}, targetElement);
+        const options = getMenuItems(targetElement, column, rowContextData, view, translate);
+        if (!options.length)
+            return true;
+        setShowMenu(true);
+        setMenuItems(options);
+        setMenuContext({
+            column,
+            targetCell: targetElement,
+            rowContextData,
+            menuId
+        });
+        return true;
+    }, [columns, data, paginationOptions, translate, view]);
+    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 (openContextMenu(targetElement, target)) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }, [selector, openContextMenu]);
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            setShowMenu(false);
             return;
         }
-        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')) {
+        if (!(e.key === 'F10' && e.shiftKey))
+            return;
+        const activeElement = document.activeElement;
+        if (!isInstance(activeElement, Element))
+            return;
+        const targetElement = activeElement.closest(selector.query.toString());
+        if (!isInstance(targetElement, HTMLElement))
+            return;
+        if (openContextMenu(targetElement, activeElement)) {
             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);
-            setShowMenu(true);
-            setMenuItems(options);
         }
-    }, [
-        selector,
-        columns,
-        contextMenuRef.targetCell,
-        contextMenuRef.column,
-        contextMenuRef.rowContextData,
-        data,
-        paginationOptions,
-        filterExpression,
-        applyViewFilter,
-        clearFilter,
-        translate
-    ]);
+    }, [selector, openContextMenu]);
     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
+        });
+        domContainer.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, onKeydown]);
+    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

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useCallback } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport {\n  Popover,\n  Icon,\n  useElement,\n  useOuterEvent,\n  Menu,\n  isInstance\n} from '@pega/cosmos-react-core';\nimport {\n  getRowContextData,\n  getScrollerElem,\n  isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\nimport TestIdConstants from '../TestIdConstants';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\ntype MenuContext = {\n  targetCell: HTMLElement;\n  column: RsCoreTypes.Column;\n  rowContextData: RsCoreTypes.RowData;\n  menuId: string;\n} | null;\n\nconst getMenuItems = (\n  targetCell: HTMLElement,\n  column: RsCoreTypes.Column,\n  rowContextData: RsCoreTypes.RowData,\n  view: RsCoreTypes.View,\n  translate: (key: string) => string\n): MenuItemProps[] => {\n  const {\n    columns = [],\n    state: { filterExpression } = {},\n    type: { applyFilter: applyViewFilter, clearFilter }\n  } = view;\n  const defaultMenuItems: MenuItemProps[] = [];\n\n  if (quickFilterEnabled(columns, column.field.id)) {\n    const isFiltered = filterExpression && isFilterApplied(column, filterExpression);\n    defaultMenuItems.push({\n      id: 'quickFilter',\n      visual: isFiltered ? <Icon name='times' /> : <Icon name='filter' />,\n      primary: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n\n      onClick: () => {\n        if (isFiltered) {\n          removeFilter(filterExpression, targetCell, applyViewFilter, clearFilter);\n        } else {\n          applyFilter(columns, targetCell, rowContextData, filterExpression, applyViewFilter);\n        }\n      }\n    });\n  }\n\n  defaultMenuItems.push({\n    id: 'copyText',\n    visual: <Icon name='copy' />,\n    primary: translate('Copy text'),\n    onClick: () => copyText(targetCell)\n  });\n\n  const fieldSpecificMenuItems: MenuItemProps[] = (column.field?.contextMenuOptions || []).map(\n    option => ({\n      id: option.id,\n      visual: option.icon ? <Icon name={option.icon} /> : undefined,\n      primary: option.label || '',\n      onClick: () => option.onClick?.(targetCell)\n    })\n  );\n\n  return [...defaultMenuItems, ...fieldSpecificMenuItems];\n};\n\nconst shouldOverrideContextMenu = (\n  targetCell: HTMLElement,\n  columns: RsCoreTypes.Column[] = []\n): boolean => {\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\nexport default function ContextMenuContainer({\n  view,\n  selector\n}: {\n  view: RsCoreTypes.View;\n  selector: { query: string };\n}) {\n  const { columns = [], data = [], state: { paginationOptions } = {}, domContainer } = view;\n\n  const [translate] = useTranslate();\n  const [menuContext, setMenuContext] = useState<MenuContext>(null);\n  const [showMenu, setShowMenu] = useState(false);\n  const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]);\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  useEffect(() => {\n    if (!showMenu) {\n      const targetCell = menuContext?.targetCell;\n      if (targetCell) {\n        targetCell.removeAttribute('data-context-menu-active');\n        targetCell.removeAttribute('aria-expanded');\n        targetCell.removeAttribute('aria-controls');\n      }\n      setMenuContext(null);\n    }\n  }, [showMenu]);\n\n  const openContextMenu = useCallback(\n    (targetElement: HTMLElement, eventTarget: Element): boolean => {\n      if (!shouldOverrideContextMenu(targetElement, columns) || eventTarget.closest('a')) {\n        return false;\n      }\n\n      const { colId } = targetElement.dataset;\n      const column = columns.find(col => col.field.id.toString() === colId?.toString());\n      if (!column) return true;\n\n      targetElement.setAttribute('data-context-menu-active', 'true');\n      targetElement.setAttribute('aria-expanded', 'true');\n      const menuId = `rs-context-menu-${crypto.randomUUID()}`;\n      targetElement.setAttribute('aria-controls', menuId);\n\n      const rowContextData = getRowContextData(data, paginationOptions || {}, targetElement);\n      const options = getMenuItems(targetElement, column, rowContextData, view, translate);\n      if (!options.length) return true;\n\n      setShowMenu(true);\n      setMenuItems(options);\n      setMenuContext({\n        column,\n        targetCell: targetElement,\n        rowContextData,\n        menuId\n      });\n\n      return true;\n    },\n    [columns, data, paginationOptions, translate, view]\n  );\n\n  const contextMenuListener = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target;\n      if (!isInstance(target, Element)) return;\n\n      const targetElement = target.closest(selector.query.toString());\n      if (!isInstance(targetElement, HTMLElement)) return;\n\n      if (openContextMenu(targetElement, target)) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    },\n    [selector, openContextMenu]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setShowMenu(false);\n        return;\n      }\n\n      if (!(e.key === 'F10' && e.shiftKey)) return;\n\n      const activeElement = document.activeElement;\n      if (!isInstance(activeElement, Element)) return;\n\n      const targetElement = activeElement.closest(selector.query.toString());\n      if (!isInstance(targetElement, HTMLElement)) return;\n\n      if (openContextMenu(targetElement, activeElement)) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    },\n    [selector, openContextMenu]\n  );\n\n  useEffect(() => {\n    const abortController = new AbortController();\n    if (!domContainer) return;\n\n    domContainer.addEventListener('contextmenu', contextMenuListener, {\n      signal: abortController.signal\n    });\n    domContainer.addEventListener('keydown', onKeydown, {\n      signal: abortController.signal\n    });\n\n    return () => {\n      abortController.abort();\n    };\n  }, [domContainer, contextMenuListener, onKeydown]);\n\n  return showMenu && menuContext ? (\n    <Popover ref={setPopperRef} target={menuContext.targetCell}>\n      <Menu\n        id={menuContext.menuId}\n        items={menuItems}\n        onItemClick={(_, e) => {\n          e.preventDefault();\n          setShowMenu(false);\n        }}\n        focusControlEl={menuContext.targetCell}\n        className='action-menu'\n        data-testid={TestIdConstants.contextMenu}\n        // TODO: remove this older test-id syntax after checking usage across the test suites\n        data-test-id='action-menu'\n      />\n    </Popover>\n  ) : null;\n}\n"]}

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

@@ -1,4 +1,4 @@
-import get from 'lodash.get';
+import get from 'lodash-es/get';
 import { addFilter, getFilters, comparatorMap, FieldType } from 'pega-repeating-structures-core';
 import { TOOLBAR_FEATURES } from '../../constants';
 const getBooleanComparator = inputValue => {