@pega/lists-react 8.0.0-build.27.14

package/lib/Core/Components/GroupRenderer.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { Icon } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { getGroupFromKey } from 'pega-ui-list-data-apis';
+import { createClassName as cx } from '../Utils';
+import useTranslate from '../Hooks/useTranslate';
+import { customFunctions, intervalGroupingBoundaries } from '../constants';
+import AggregatorCell from './AggregatorCell';
+import RenderingEngine from './RenderingEngine/RenderCell';
+import DateValueDisplay from './DateValueDisplay';
+import TestIdConstants from './TestIdConstants';
+const groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;
+/**
+ * TODO: remove currentColor style after cosmos fixes the issue
+ * Cosmos yet to handle dark theme on BareButton
+ */
+const StyledGroupHeader = styled.div `
+  --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};
+  --group-bg-color: ${props => props.theme.base.palette['secondary-background']};
+  background-color: var(--group-bg-color);
+
+  &.row.sticky-group-header {
+    position: sticky;
+    display: block;
+    top: calc(
+      ${props => props.groupHeader.isLeafNode && props.groupHeader.level !== 0
+    ? 'calc(var(--row-height) + var(--group-header-height))'
+    : 'var(--row-height)'}
+    );
+
+    /* z-index starting from 8 because freeze-line has z-index 7 */
+    z-index: ${props => `${8 + props.groupHeader.index}`};
+    > .cell-action,
+    .cell-fixed {
+      background-color: var(--group-bg-color);
+    }
+  }
+
+  .group-label {
+    width: 0.437rem;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .group-header-groupby {
+    font-weight: ${props => props.theme.base['font-weight'].normal};
+  }
+
+  .group-context-count {
+    font-weight: ${props => props.theme.base['font-weight'].bold};
+  }
+
+  &.row.group-header-row {
+    height: auto;
+    border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};
+
+    .group-header-aggregation-row {
+      display: flex;
+
+      /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */
+      height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};
+    }
+  }
+
+  &.group-header-row .stickyGroupHeader {
+    position: sticky;
+    left: 0;
+    width: 0;
+    z-index: 10;
+    height: var(--group-header-height);
+
+    > button {
+      color: currentColor;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: max-content;
+      max-width: var(--container-width);
+      display: flex;
+      align-items: center;
+      background-color: var(--group-bg-color);
+      padding-left: var(--group-left);
+      z-index: 30;
+      cursor: pointer;
+      white-space: nowrap;
+      text-align: inherit;
+
+      > .group-wrapper {
+        margin-inline-start: ${({ groupHeader, theme }) => groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};
+      }
+
+      .cell-content {
+        max-height: var(--group-header-height);
+        padding: 0;
+      }
+    }
+    button:focus {
+      box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};
+    }
+  }
+  .group-header.cell {
+    left: 0;
+    padding-left: var(--group-left);
+  }
+
+  div.group-header.cell-fixed {
+    background-color: var(--group-bg-color);
+  }
+`;
+/**
+ *  Returns label for interval grouping based on interval and boundaries
+  Response data depends on boundary settings.
+ Ex: For sample data of profit
+    profit  --> cases(count)
+   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}
+  For Interval 10
+  If the boundary is 'include-lower-only',
+    and  value is 10 then label -> 10 to 20
+
+  If boundary is 'include-upper-only',
+    and value is 10 then label ->  0 to 10
+  * */
+function buildIntervalGroupingLabel(value, customFunction, translate) {
+    const { interval, boundaries } = customFunction;
+    // To restrict the decimals in labels
+    const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;
+    value = Number(value);
+    // In case of 'include-lower-only'
+    let lowerValue = value.toFixed(intervalDecimalLength);
+    let upperValue = (value + interval).toFixed(intervalDecimalLength);
+    // In case of boundary 'include-upper-only'
+    if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {
+        lowerValue = (value - interval).toFixed(intervalDecimalLength);
+        upperValue = value.toFixed(intervalDecimalLength);
+    }
+    return `${lowerValue} ${translate('to')} ${upperValue}`;
+}
+function GroupName({ view, column, groupHeader, dateFunction, customFunction }) {
+    const [translate] = useTranslate();
+    const { locale, timezone } = view.meta;
+    const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;
+    const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;
+    if (dateFunction) {
+        return (_jsx(DateValueDisplay, { value: groupHeader.name, dateFunction: dateFunction, locale: locale, timezone: timezone }));
+    }
+    if (isRangeGrouping) {
+        /** If custom range grouping applied on number field , we need to show group name as text instead of number */
+        return groupHeader.name;
+    }
+    if (isIntervalGrouping) {
+        /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */
+        return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);
+    }
+    column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)
+    const columnRendererProps = {
+        ...column.getRenderingEngineProps(),
+        context: {
+            getValue: () => groupHeader.name,
+            getExecutionContext: () => {
+                return { getValue: () => groupHeader.data, name: 'groupHeader' };
+            }
+        }
+    };
+    return _jsx(RenderingEngine, { ...columnRendererProps });
+}
+// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable
+export default function GroupHeader({ groupHeader, columns }) {
+    const buttonRef = useRef();
+    // TODO: This we are adding temporary to show freeze border until we make group header rendering change
+    // when we will pick up aggregation.
+    if (!groupHeader.isVisible)
+        return null;
+    const view = columns[0].parent;
+    // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer
+    const { columnId, dateFunction, customFunction } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
+    // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined
+    if (!columnId) {
+        return null;
+    }
+    const column = columns.find(c => c.field.id === columnId);
+    const formatter = view.getFormatterByKey('Integer');
+    const { locale } = view.meta;
+    const groupCountFormatted = formatter
+        ? formatter(groupHeader.count, { locale })
+        : groupHeader.count;
+    const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);
+    return (_jsxs(StyledGroupHeader, { groupHeader: groupHeader, className: cx('row group-header-row sticky-group-header'), "data-test-id": 'groupHeader', "data-testid": TestIdConstants.groupHeader, isAggregationApplied: isAggregationApplied, role: 'row', onFocus: e => {
+            if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {
+                e.preventDefault();
+                buttonRef.current.focus();
+            }
+        }, children: [_jsx("div", { className: 'stickyGroupHeader', children: _jsxs(BareButton, { ref: buttonRef, "aria-label": `${column.field.hideGroupColumnNameLabel ? '' : groupHeader.label} ${groupHeader.name}, ${groupCountFormatted} items`, "aria-expanded": !!groupHeader.isExpanded, style: {
+                        paddingRight: 'var(--group-left)'
+                    }, onClick: () => groupHeader.count > 0 && view.type.toggleGroupExpansion({ groupHeader }), tabIndex: -1, children: [groupHeader.count > 0 &&
+                            (groupHeader.isExpanded ? _jsx(Icon, { name: 'caret-down' }) : _jsx(Icon, { name: 'caret-right' })), _jsxs("div", { className: 'group-wrapper', children: [_jsx("div", { className: 'group-label' }), !column.field.hideGroupColumnNameLabel && (_jsxs("span", { className: 'group-header-groupby', "data-test-id": groupHeader.groupBy, "data-testid": `${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`, children: [groupHeader.label, ":"] })), _jsx("div", { className: 'group-label' }), _jsxs("span", { className: 'group-context-count', style: { display: 'inline-flex' }, "data-test-id": 'groupHeader', "data-testid": TestIdConstants.groupHeaderCount, children: [_jsx(GroupName, { view: view, column: column, groupHeader: groupHeader, dateFunction: dateFunction, customFunction: customFunction }), _jsx("span", { style: { whiteSpace: 'pre' }, children: ` (${groupCountFormatted})` })] })] })] }) }), _jsx("div", { className: 'group-header-aggregation-row', children: columns.map(c => {
+                    const cxt = {
+                        getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
+                    };
+                    return (_jsx(AggregatorCell, { column: c, context: cxt, className: cx('cell', {
+                            'cell-fixed': column.frozen
+                        }) }, c.field.id));
+                }) })] }));
+}
+GroupHeader.propTypes = {
+    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
+    groupHeader: PropTypes.objectOf(PropTypes.any).isRequired
+};
+//# sourceMappingURL=GroupRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/GroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\nimport useTranslate from '../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../constants';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport DateValueDisplay from './DateValueDisplay';\nimport TestIdConstants from './TestIdConstants';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n  --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n  --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n  background-color: var(--group-bg-color);\n\n  &.row.sticky-group-header {\n    position: sticky;\n    display: block;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n\n    /* z-index starting from 8 because freeze-line has z-index 7 */\n    z-index: ${props => `${8 + props.groupHeader.index}`};\n    > .cell-action,\n    .cell-fixed {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n    flex-shrink: 0;\n  }\n\n  .group-header-groupby {\n    font-weight: ${props => props.theme.base['font-weight'].normal};\n  }\n\n  .group-context-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n  }\n\n  &.row.group-header-row {\n    height: auto;\n    border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};\n\n    .group-header-aggregation-row {\n      display: flex;\n\n      /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */\n      height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n    }\n  }\n\n  &.group-header-row .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    height: var(--group-header-height);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: max-content;\n      max-width: var(--container-width);\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n      text-align: inherit;\n\n      > .group-wrapper {\n        margin-inline-start: ${({ groupHeader, theme }) =>\n          groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n      }\n\n      .cell-content {\n        max-height: var(--group-header-height);\n        padding: 0;\n      }\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n    }\n  }\n  .group-header.cell {\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\n/**\n *  Returns label for interval grouping based on interval and boundaries\n  Response data depends on boundary settings.\n Ex: For sample data of profit\n    profit  --> cases(count)\n   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}\n  For Interval 10\n  If the boundary is 'include-lower-only',\n    and  value is 10 then label -> 10 to 20\n\n  If boundary is 'include-upper-only',\n    and value is 10 then label ->  0 to 10\n  * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n  const { interval, boundaries } = customFunction;\n  // To restrict the decimals in labels\n  const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n  value = Number(value);\n  // In case of 'include-lower-only'\n  let lowerValue = value.toFixed(intervalDecimalLength);\n  let upperValue = (value + interval).toFixed(intervalDecimalLength);\n  // In case of boundary 'include-upper-only'\n  if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n    lowerValue = (value - interval).toFixed(intervalDecimalLength);\n    upperValue = value.toFixed(intervalDecimalLength);\n  }\n  return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nfunction GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n  const [translate] = useTranslate();\n  const { locale, timezone } = view.meta;\n  const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n  const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n  if (dateFunction) {\n    return (\n      <DateValueDisplay\n        value={groupHeader.name}\n        dateFunction={dateFunction}\n        locale={locale}\n        timezone={timezone}\n      />\n    );\n  }\n\n  if (isRangeGrouping) {\n    /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n    return groupHeader.name;\n  }\n\n  if (isIntervalGrouping) {\n    /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n    return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n  }\n\n  column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n  const columnRendererProps = {\n    ...column.getRenderingEngineProps(),\n    context: {\n      getValue: () => groupHeader.name,\n      getExecutionContext: () => {\n        return { getValue: () => groupHeader.data, name: 'groupHeader' };\n      }\n    }\n  };\n\n  return <RenderingEngine {...columnRendererProps} />;\n}\n\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n  const buttonRef = useRef();\n\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n\n  const view = columns[0].parent;\n  // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n  const { columnId, dateFunction, customFunction } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n  if (!columnId) {\n    return null;\n  }\n\n  const column = columns.find(c => c.field.id === columnId);\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n  const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n  return (\n    <StyledGroupHeader\n      groupHeader={groupHeader}\n      className={cx('row group-header-row sticky-group-header')}\n      data-test-id='groupHeader'\n      data-testid={TestIdConstants.groupHeader}\n      isAggregationApplied={isAggregationApplied}\n      role='row'\n      onFocus={e => {\n        if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n          e.preventDefault();\n          buttonRef.current.focus();\n        }\n      }}\n    >\n      <div className='stickyGroupHeader'>\n        <BareButton\n          ref={buttonRef}\n          aria-label={`${\n            column.field.hideGroupColumnNameLabel ? '' : groupHeader.label\n          } ${groupHeader.name}, ${groupCountFormatted} items`}\n          aria-expanded={!!groupHeader.isExpanded}\n          style={{\n            paddingRight: 'var(--group-left)'\n          }}\n          onClick={() => groupHeader.count > 0 && view.type.toggleGroupExpansion({ groupHeader })}\n          tabIndex={-1}\n        >\n          {groupHeader.count > 0 &&\n            (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n          <div className='group-wrapper'>\n            <div className='group-label' />\n            {!column.field.hideGroupColumnNameLabel && (\n              <span\n                className='group-header-groupby'\n                data-test-id={groupHeader.groupBy}\n                data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n              >\n                {groupHeader.label}:\n              </span>\n            )}\n            <div className='group-label' />\n            <span\n              className='group-context-count'\n              style={{ display: 'inline-flex' }}\n              data-test-id='groupHeader'\n              data-testid={TestIdConstants.groupHeaderCount}\n            >\n              <GroupName\n                view={view}\n                column={column}\n                groupHeader={groupHeader}\n                dateFunction={dateFunction}\n                customFunction={customFunction}\n              />\n              {/* adding whitespace pre to preserve the space at the begining of count text */}\n              <span style={{ whiteSpace: 'pre' }}>{` (${groupCountFormatted})`}</span>\n            </span>\n          </div>\n        </BareButton>\n      </div>\n      <div className='group-header-aggregation-row'>\n        {columns.map(c => {\n          const cxt = {\n            getValue: () =>\n              groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n          };\n          return (\n            <AggregatorCell\n              key={c.field.id}\n              column={c}\n              context={cxt}\n              className={cx('cell', {\n                'cell-fixed': column.frozen\n              })}\n            />\n          );\n        })}\n      </div>\n    </StyledGroupHeader>\n  );\n}\n\nGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/Grouping/GroupingMenu.d.ts

@@ -0,0 +1,15 @@
+declare function GroupingMenu({ column, finishPopOver }: {
+    column: any;
+    finishPopOver: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GroupingMenu {
+    namespace propTypes {
+        let column: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let finishPopOver: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+export default GroupingMenu;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=GroupingMenu.d.ts.map

package/lib/Core/Components/Grouping/GroupingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMenu.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Grouping/GroupingMenu.jsx"],"names":[],"mappings":"AA0BA;;;mDAqEC;;;;;;;;;;sBA/FqB,YAAY"}

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

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

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

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

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

@@ -0,0 +1,17 @@
+export default HeaderCell;
+declare function HeaderCell({ column, popoverButtonRef }: {
+    column: any;
+    popoverButtonRef: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace HeaderCell {
+    namespace propTypes {
+        let column: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let popoverButtonRef: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=HeaderCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.d.ts","sourceRoot":"","sources":["../../../Core/Components/HeaderCell.jsx"],"names":[],"mappings":";AASA;;;4CA0DC;;;;;;;;;;;sBAnEqB,YAAY"}

package/lib/Core/Components/HeaderCell.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { Tooltip, useElement } from '@pega/cosmos-react-core';
+import HeaderCellResizer from './ColumnResizer';
+import RenderingEngine from './RenderingEngine/RenderCell';
+import FieldTypeIcon from './FieldTypeIcon';
+import HeaderMenu from './HeaderMenu';
+function HeaderCell({ column, popoverButtonRef }) {
+    const isSmallOrAbove = column.parent.state?.responsive?.sm;
+    const headerIcons = !!isSmallOrAbove;
+    const [headerLabelEl, setheaderLabelEl] = useElement(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'header-lable-container', children: [_jsxs("div", { className: 'header-label', "aria-hidden": true, ...(column.field.type !== 'action' && column.categorizedHeaderLabel
+                            ? { ref: setheaderLabelEl }
+                            : {}), children: [_jsx(FieldTypeIcon, { column: column }), _jsx(RenderingEngine, { formatter: false, ...column.getRenderingEngineProps(), context: {
+                                    getRendererType: () => 'headerCellRenderer',
+                                    getValue: () => column.categorizedHeaderLabel
+                                } })] }), headerLabelEl && (_jsx(Tooltip, { smart: true, target: headerLabelEl, children: column.categorizedHeaderLabel })), headerIcons && (_jsxs(_Fragment, { children: [_jsx(RenderingEngine, { formatter: false, ...column.getRenderingEngineProps(), context: {
+                                    getRendererType: () => 'filterRenderer',
+                                    showTooltip: () => false
+                                } }), _jsx(RenderingEngine, { formatter: false, ...column.getRenderingEngineProps(), context: {
+                                    getRendererType: () => 'sortRenderer',
+                                    showTooltip: () => false
+                                } })] }))] }), column.field.showMenu && headerIcons && (_jsx("div", { className: 'icons-ph', children: _jsx(HeaderMenu, { column: column, popoverButtonRef: popoverButtonRef }) })), column.field.resize && _jsx(HeaderCellResizer, { column: column })] }));
+}
+HeaderCell.propTypes = {
+    column: PropTypes.objectOf(PropTypes.any).isRequired,
+    popoverButtonRef: PropTypes.objectOf(PropTypes.any).isRequired
+};
+export default HeaderCell;
+//# sourceMappingURL=HeaderCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../../Core/Components/HeaderCell.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,iBAAiB,MAAM,iBAAiB,CAAC;AAChD,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,SAAS,UAAU,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAC9C,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC;IAC3D,MAAM,WAAW,GAAG,CAAC,CAAC,cAAc,CAAC;IACrC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3D,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,wBAAwB,aACrC,eACE,SAAS,EAAC,cAAc,0BAEpB,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,sBAAsB;4BAClE,CAAC,CAAC,EAAE,GAAG,EAAE,gBAAgB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,aAEP,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,KAAC,eAAe,IACd,SAAS,EAAE,KAAK,KACZ,MAAM,CAAC,uBAAuB,EAAE,EACpC,OAAO,EAAE;oCACP,eAAe,EAAE,GAAG,EAAE,CAAC,oBAAoB;oCAC3C,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB;iCAC9C,GACD,IACE,EACL,aAAa,IAAI,CAChB,KAAC,OAAO,IAAC,KAAK,QAAC,MAAM,EAAE,aAAa,YACjC,MAAM,CAAC,sBAAsB,GACtB,CACX,EACA,WAAW,IAAI,CACd,8BACE,KAAC,eAAe,IACd,SAAS,EAAE,KAAK,KACZ,MAAM,CAAC,uBAAuB,EAAE,EACpC,OAAO,EAAE;oCACP,eAAe,EAAE,GAAG,EAAE,CAAC,gBAAgB;oCACvC,WAAW,EAAE,GAAG,EAAE,CAAC,KAAK;iCACzB,GACD,EACF,KAAC,eAAe,IACd,SAAS,EAAE,KAAK,KACZ,MAAM,CAAC,uBAAuB,EAAE,EACpC,OAAO,EAAE;oCACP,eAAe,EAAE,GAAG,EAAE,CAAC,cAAc;oCACrC,WAAW,EAAE,GAAG,EAAE,CAAC,KAAK;iCACzB,GACD,IACD,CACJ,IACG,EACL,MAAM,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,IAAI,CACvC,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,GAC9D,CACP,EACA,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,IAC5D,CACJ,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,SAAS,GAAG;IACrB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACpD,gBAAgB,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CAC/D,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { Tooltip, useElement } from '@pega/cosmos-react-core';\n\nimport HeaderCellResizer from './ColumnResizer';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport FieldTypeIcon from './FieldTypeIcon';\nimport HeaderMenu from './HeaderMenu';\n\nfunction HeaderCell({ column, popoverButtonRef }) {\n  const isSmallOrAbove = column.parent.state?.responsive?.sm;\n  const headerIcons = !!isSmallOrAbove;\n  const [headerLabelEl, setheaderLabelEl] = useElement(null);\n  return (\n    <>\n      <div className='header-lable-container'>\n        <div\n          className='header-label'\n          aria-hidden\n          {...(column.field.type !== 'action' && column.categorizedHeaderLabel\n            ? { ref: setheaderLabelEl }\n            : {})}\n        >\n          <FieldTypeIcon column={column} />\n          <RenderingEngine\n            formatter={false}\n            {...column.getRenderingEngineProps()}\n            context={{\n              getRendererType: () => 'headerCellRenderer',\n              getValue: () => column.categorizedHeaderLabel\n            }}\n          />\n        </div>\n        {headerLabelEl && (\n          <Tooltip smart target={headerLabelEl}>\n            {column.categorizedHeaderLabel}\n          </Tooltip>\n        )}\n        {headerIcons && (\n          <>\n            <RenderingEngine\n              formatter={false}\n              {...column.getRenderingEngineProps()}\n              context={{\n                getRendererType: () => 'filterRenderer',\n                showTooltip: () => false\n              }}\n            />\n            <RenderingEngine\n              formatter={false}\n              {...column.getRenderingEngineProps()}\n              context={{\n                getRendererType: () => 'sortRenderer',\n                showTooltip: () => false\n              }}\n            />\n          </>\n        )}\n      </div>\n      {column.field.showMenu && headerIcons && (\n        <div className='icons-ph'>\n          <HeaderMenu column={column} popoverButtonRef={popoverButtonRef} />\n        </div>\n      )}\n      {column.field.resize && <HeaderCellResizer column={column} />}\n    </>\n  );\n}\n\nHeaderCell.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any).isRequired,\n  popoverButtonRef: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default HeaderCell;\n"]}

package/lib/Core/Components/HeaderMenu/actions.d.ts

@@ -0,0 +1,15 @@
+export function customizeColumn(column: any, rfName: any, displayMode: any, newColumnAlias: any, oldAlias: any): void;
+/**
+ * This method is executed when a column is removed from the table, it sets the focus to the next
+ * column on the left, or if its the first column, then on the next column on right.
+ * @param {object} column
+ */
+export function handleFocus(column: object): void;
+export function getActions({ column, setMoreContent, onUndoHierarchy, translate, finishPopOver }: {
+    column: any;
+    setMoreContent: any;
+    onUndoHierarchy: any;
+    translate: any;
+    finishPopOver: any;
+}): any[];
+//# sourceMappingURL=actions.d.ts.map

package/lib/Core/Components/HeaderMenu/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../Core/Components/HeaderMenu/actions.js"],"names":[],"mappings":"AAyBA,sHAaC;AAmDD;;;;GAIG;AACH,oCAFW,MAAM,QAahB;AAED;;;;;;UAyHC"}

package/lib/Core/Components/HeaderMenu/actions.js

@@ -0,0 +1,211 @@
+import { getFilters } from 'pega-repeating-structures-core';
+import { allowToggle } from '../../Utils';
+import { sortActions, TOOLBAR_FEATURES } from '../../constants';
+const Grouping = 'Grouping';
+const Filter = 'Filter';
+const ClearFilter = 'Clear filter';
+const Freeze = 'Freeze';
+const Visibility = 'Hide';
+const Summarize = 'Summarize';
+const DynamicColumnLeft = 'Combine with left';
+const DynamicColumnRight = 'Combine with right';
+const DynamicColumnDelete = 'Delete';
+const CustomizeColumn = 'Format';
+const UndoHierarchy = 'Undo hierarchy';
+/** Checks if it's a column where grouping by date-functions is enabled */
+function isColumnWithDateFuncGrouping(column) {
+    const view = column.parent;
+    return (view.meta.dateFunctions && (column.field.type === 'date' || column.field.type === 'datetime'));
+}
+export function customizeColumn(column, rfName, displayMode, newColumnAlias, oldAlias) {
+    if (rfName !== undefined) {
+        column.applyFormatter(rfName);
+    }
+    if (displayMode !== undefined) {
+        column.applyDisplay(displayMode);
+    }
+    // old alias can be undefined
+    if (oldAlias?.trim() !== newColumnAlias.trim()) {
+        column.applyLabel(newColumnAlias);
+    }
+}
+const updateRowHeight = column => {
+    const view = column.parent;
+    const { customFields } = view.state;
+    let shouldUpdateRowDensity = true;
+    customFields.forEach(field => {
+        if (field.id !== column.field.id) {
+            const { expression } = field;
+            expression.forEach(exp => {
+                if (Array.isArray(exp) && exp[0] === 'multiline')
+                    shouldUpdateRowDensity = false;
+            });
+        }
+    });
+    if (shouldUpdateRowDensity)
+        view.type.applyRowHeight(view.meta?.defaultRowHeight);
+};
+const prepareColumnSortActions = (column, translate, finishPopOver) => {
+    const SortActions = [];
+    sortActions.forEach(action => {
+        const { actionId, actionName, actionIcon } = action;
+        // eslint-disable-next-line
+        if (actionId != column.sortOrder)
+            SortActions.push({
+                id: actionName,
+                icon: actionIcon,
+                label: translate(actionName),
+                show: column.parent.shouldDisplayFeature(TOOLBAR_FEATURES.SORT, column),
+                onClick: () => {
+                    column.applySorting(!column.sorted, actionId);
+                    finishPopOver();
+                }
+            });
+    });
+    return SortActions;
+};
+function removeFilter(column) {
+    const { filterExpression } = column.parent.state;
+    const { applyFilter, clearFilter } = column.parent.type;
+    const filters = getFilters({ filterExpression });
+    if (filters.length > 1) {
+        clearFilter(column.field.id);
+    }
+    else {
+        applyFilter({
+            filterExp: null
+        });
+    }
+}
+/**
+ * This method is executed when a column is removed from the table, it sets the focus to the next
+ * column on the left, or if its the first column, then on the next column on right.
+ * @param {object} column
+ */
+export function handleFocus(column) {
+    const { order } = column;
+    let focusColumnOrder = order;
+    // When hiding first column, focus should go to the next column on right
+    if (order === 0)
+        focusColumnOrder = 2;
+    const selector = `[role='columnheader'][aria-colindex='${focusColumnOrder}'] > .icons-ph > .header-menu > button`;
+    const domContainer = column.parent.getDomContainer();
+    const ele = domContainer.querySelector(selector);
+    if (ele) {
+        ele.focus();
+    }
+}
+export function getActions({ column, setMoreContent, onUndoHierarchy, translate, finishPopOver }) {
+    const { aggregateOptions, grouping: isGroupingEnabled, toggleFieldVisibility } = column.parent.meta;
+    return [
+        ...prepareColumnSortActions(column, translate, finishPopOver),
+        {
+            id: Filter,
+            icon: 'filter',
+            label: translate(Filter),
+            show: column.parent.shouldDisplayFeature(TOOLBAR_FEATURES.FILTER, column),
+            onClick: () => setMoreContent(Filter)
+        },
+        {
+            id: ClearFilter,
+            icon: 'reset',
+            label: translate(ClearFilter),
+            show: !!column.filtered,
+            onClick: () => {
+                removeFilter(column);
+                finishPopOver();
+            }
+        },
+        {
+            id: Grouping,
+            icon: 'row',
+            label: column.grouped ? translate('Ungroup') : translate('Group'),
+            show: isGroupingEnabled &&
+                !column.parent?.hierarchicalGroupEnabled &&
+                column.parent.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING, column),
+            onClick: () => {
+                if (isColumnWithDateFuncGrouping(column) && !column.grouped) {
+                    setMoreContent(Grouping);
+                    return;
+                }
+                column.applyGrouping();
+                finishPopOver();
+            }
+        },
+        {
+            id: Visibility,
+            icon: 'eye-off',
+            label: translate(Visibility),
+            show: !!(toggleFieldVisibility && column.field.toggle),
+            onClick: () => {
+                column.applyToggleVisibility();
+                finishPopOver();
+                handleFocus(column);
+            },
+            disabled: !allowToggle(column.parent.getVisibleColumns())
+        },
+        {
+            id: Freeze,
+            icon: 'freeze-column',
+            label: column.frozen ? translate('Unfreeze') : translate('Freeze'),
+            show: !!column.field.freeze,
+            onClick: () => {
+                column.applyFreeze();
+                finishPopOver();
+            }
+        },
+        {
+            id: Summarize,
+            icon: 'sigma',
+            label: column.aggregated ? translate('Remove aggregation') : translate('Aggregate'),
+            show: !!(column.field.aggregation &&
+                (column.field.type === 'number' || column.field.type === 'currency') &&
+                aggregateOptions[column.field.type] &&
+                aggregateOptions[column.field.type].length),
+            onClick: () => {
+                column.applyAggregation(!column.aggregated ? aggregateOptions[column.field.type]?.[0] : undefined);
+                finishPopOver();
+            }
+        },
+        {
+            id: DynamicColumnLeft,
+            icon: 'arrow-left-column',
+            label: translate(DynamicColumnLeft),
+            show: !!column.field.combineColumn && !column.isFirstDataColumn,
+            onClick: () => setMoreContent(DynamicColumnLeft)
+        },
+        {
+            id: DynamicColumnRight,
+            icon: 'arrow-right-column',
+            label: translate(DynamicColumnRight),
+            show: !!column.field.combineColumn && !column.isLastColumn,
+            onClick: () => setMoreContent(DynamicColumnRight)
+        },
+        {
+            id: DynamicColumnDelete,
+            icon: 'column-delete',
+            label: translate(DynamicColumnDelete),
+            show: !!column.isCustomColumn,
+            onClick: () => {
+                column.deleteCustomColumn();
+                updateRowHeight(column);
+                handleFocus(column);
+            }
+        },
+        {
+            id: CustomizeColumn,
+            icon: 'circle-stacked-mixed',
+            label: translate(CustomizeColumn),
+            show: !!column.field.customizeColumn && !column.isCustomColumn,
+            onClick: () => setMoreContent(CustomizeColumn)
+        },
+        {
+            id: UndoHierarchy,
+            icon: 'folder-nested-solid',
+            label: translate(UndoHierarchy),
+            show: column.isFirstDataColumn && !!column.parent?.hierarchicalGroupEnabled,
+            onClick: onUndoHierarchy
+        }
+    ];
+}
+//# sourceMappingURL=actions.js.map