npm - @pega/lists-react - Versions diffs - 9.0.0-build.2.8 → 9.0.0-build.20.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (404) hide show

package/lib/Core/Components/Toolbar/FieldSelector.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { ComboBox, menuHelpers } from '@pega/cosmos-react-core';
 import useTranslate from '../../Hooks/useTranslate';
 import getMenuItemsFromColumns from './utils/utils';
 function FieldSelector(props) {
-    const { value, onChange, columns, disabled = false, fieldProp, label, labelHidden } = props;
+    const { value, onChange, columns, disabled = false, readOnly, fieldProp, label, labelHidden } = props;
     const [translate] = useTranslate();
     const items = useMemo(() => getMenuItemsFromColumns(columns, fieldProp, value), [columns, value, fieldProp]);
     const selected = useMemo(() => {
@@ -25,7 +25,7 @@ function FieldSelector(props) {
             ? menuHelpers.flatten(items).filter(({ primary }) => filterRegex.test(primary))
             : items;
     }, [filterRegex, items]);
-    return (_jsx(ComboBox, { label: label, labelHidden: labelHidden, disabled: disabled, placeholder: translate('Select field'), mode: 'single-select', value: filterValue, testId: 'FieldSelector', onChange: ev => {
+    return (_jsx(ComboBox, { label: label, labelHidden: labelHidden, disabled: disabled, readOnly: readOnly, placeholder: translate('Select field'), mode: 'single-select', value: filterValue, testId: 'FieldSelector', onChange: ev => {
             setFilterValue(ev.target.value);
         }, selected: { items: selected }, menu: {
             items: filteredItems,
@@ -45,6 +45,7 @@ FieldSelector.propTypes = {
     columns: PropTypes.arrayOf(PropTypes.any).isRequired,
     onChange: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     fieldProp: PropTypes.string,
     label: PropTypes.string.isRequired,
     labelHidden: PropTypes.bool

package/lib/Core/Components/Toolbar/FieldSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/FieldSelector.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,uBAAuB,MAAM,eAAe,CAAC;AAEpD,SAAS,aAAa,CAAC,KAAK;IAC1B,MAAM,~~EAAE~~,KAAK,~~EAAE~~,QAAQ,~~EAAE~~,OAAO,~~EAAE~~,QAAQ,GAAG,KAAK,~~EAAE~~,SAAS,~~EAAE~~,KAAK,~~EAAE~~,WAAW,~~EAAE~~,GAAG,KAAK,CAAC;~~IAC5F~~,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,uBAAuB,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,EACxD,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,CAC5B,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACvD,OAAO,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACxF,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,4DAA4D;IACvH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,6FAA6F;QAC7F,yDAAyD;QACzD,OAAO,WAAW;YAChB,CAAC,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC;YACvE,CAAC,CAAC,SAAS,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,WAAW;YAChB,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/E,CAAC,CAAC,KAAK,CAAC;IACZ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,SAAS,CAAC,cAAc,CAAC,EACtC,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAC,eAAe,EACtB,QAAQ,EAAE,EAAE,CAAC,EAAE;YACb,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,EACD,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC7B,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,WAAW;YACnB,SAAS,EAAE,UAAU;YACrB,WAAW,EAAE,EAAE,CAAC,EAAE;gBAChB,IAAI,QAAQ;oBAAE,OAAO;gBACrB,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,0CAA0C;YACvE,CAAC;SACF,EACD,qBAAqB,EAAE,GAAG,EAAE,GAAE,CAAC,GAC/B,CACH,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACpD,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,WAAW,EAAE,SAAS,CAAC,IAAI;CAC5B,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ComboBox, menuHelpers } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport getMenuItemsFromColumns from './utils/utils';\n\nfunction FieldSelector(props) {\n const { value, onChange, columns, disabled = false, fieldProp, label, labelHidden } = props;\n const [translate] = useTranslate();\n\n const items = useMemo(\n () => getMenuItemsFromColumns(columns, fieldProp, value),\n [columns, value, fieldProp]\n );\n const selected = useMemo(() => {\n const selectedItem = menuHelpers.getItem(items, value);\n return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n }, [items, value]);\n\n const [filterValue, setFilterValue] = useState(undefined); // NOTE: `undefined` is needed to show the current selection\n const filterRegex = useMemo(() => {\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping\n // Literal string match from input, not user regex input.\n return filterValue\n ? new RegExp(filterValue.replace(/[.*+\\-?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'i')\n : undefined;\n }, [filterValue]);\n\n const filteredItems = useMemo(() => {\n return filterRegex\n ? menuHelpers.flatten(items).filter(({ primary }) => filterRegex.test(primary))\n : items;\n }, [filterRegex, items]);\n\n return (\n <ComboBox\n label={label}\n labelHidden={labelHidden}\n disabled={disabled}\n placeholder={translate('Select field')}\n mode='single-select'\n value={filterValue}\n testId='FieldSelector'\n onChange={ev => {\n setFilterValue(ev.target.value);\n }}\n selected={{ items: selected }}\n menu={{\n items: filteredItems,\n mode: 'single-select',\n accent: filterRegex,\n emptyText: 'No items',\n onItemClick: id => {\n if (disabled) return;\n onChange(id);\n setFilterValue(undefined); // To show the selected value in the input\n }\n }}\n onDropdownButtonClick={() => {}}\n />\n );\n}\n\nFieldSelector.propTypes = {\n value: PropTypes.string,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n fieldProp: PropTypes.string,\n label: PropTypes.string.isRequired,\n labelHidden: PropTypes.bool\n};\n\nexport default FieldSelector;\n"]}
1	+ {"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/FieldSelector.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ComboBox, menuHelpers } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport getMenuItemsFromColumns from './utils/utils';\n\nfunction FieldSelector(props) {\n const {\n value,\n onChange,\n columns,\n disabled = false,\n readOnly,\n fieldProp,\n label,\n labelHidden\n } = props;\n const [translate] = useTranslate();\n\n const items = useMemo(\n () => getMenuItemsFromColumns(columns, fieldProp, value),\n [columns, value, fieldProp]\n );\n const selected = useMemo(() => {\n const selectedItem = menuHelpers.getItem(items, value);\n return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n }, [items, value]);\n\n const [filterValue, setFilterValue] = useState(undefined); // NOTE: `undefined` is needed to show the current selection\n const filterRegex = useMemo(() => {\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping\n // Literal string match from input, not user regex input.\n return filterValue\n ? new RegExp(filterValue.replace(/[.*+\\-?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'i')\n : undefined;\n }, [filterValue]);\n\n const filteredItems = useMemo(() => {\n return filterRegex\n ? menuHelpers.flatten(items).filter(({ primary }) => filterRegex.test(primary))\n : items;\n }, [filterRegex, items]);\n\n return (\n <ComboBox\n label={label}\n labelHidden={labelHidden}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={translate('Select field')}\n mode='single-select'\n value={filterValue}\n testId='FieldSelector'\n onChange={ev => {\n setFilterValue(ev.target.value);\n }}\n selected={{ items: selected }}\n menu={{\n items: filteredItems,\n mode: 'single-select',\n accent: filterRegex,\n emptyText: 'No items',\n onItemClick: id => {\n if (disabled) return;\n onChange(id);\n setFilterValue(undefined); // To show the selected value in the input\n }\n }}\n onDropdownButtonClick={() => {}}\n />\n );\n}\n\nFieldSelector.propTypes = {\n value: PropTypes.string,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n fieldProp: PropTypes.string,\n label: PropTypes.string.isRequired,\n labelHidden: PropTypes.bool\n};\n\nexport default FieldSelector;\n"]}

package/lib/Core/Components/Toolbar/Grouping.types.d.ts CHANGED Viewed

@@ -13,10 +13,4 @@ export interface GroupingOptions {
         datetime: (DateFunction | undefined)[];
     };
 }
-/** Option object in the DateFunctionSelector component */
-export interface DateSelectorOption {
-    key: DateFunction | 'NONE';
-    dateFunction: DateFunction | undefined;
-    label: string;
-}
 //# sourceMappingURL=Grouping.types.d.ts.map

package/lib/Core/Components/Toolbar/Grouping.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grouping.types.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/Grouping.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iFAAiF,CAAC;AAEpH,8HAA8H;AAC9H,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,SAAS,EAAE;QACT,CAAC,QAAQ,EAAE,MAAM,GAAG;YAClB,SAAS,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;YACxC,SAAS,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;SACzC,CAAC;KACH,CAAC;IACF,iBAAiB,EAAE;QACjB,IAAI,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;KACxC,CAAC;CACH~~;AAED,0DAA0D;AAC1D,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,YAAY,GAAG,MAAM,CAAC;IAC3B,YAAY,EAAE,YAAY,GAAG,SAAS,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf~~"}
1	+ {"version":3,"file":"Grouping.types.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/Grouping.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iFAAiF,CAAC;AAEpH,8HAA8H;AAC9H,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,SAAS,EAAE;QACT,CAAC,QAAQ,EAAE,MAAM,GAAG;YAClB,SAAS,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;YACxC,SAAS,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;SACzC,CAAC;KACH,CAAC;IACF,iBAAiB,EAAE;QACjB,IAAI,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;KACxC,CAAC;CACH"}

package/lib/Core/Components/Toolbar/Grouping.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grouping.types.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/Grouping.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { DateFunction } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/core/types';\n\n/** Metadata used to identify which fields and which date functions are/aren't available for selection in the Grouping menu /\nexport interface GroupingOptions {\n exhaustedFields: Set<string>;\n dateFuncs: {\n [columnId: string]: {\n exhausted: (DateFunction \| undefined)[];\n available: (DateFunction \| undefined)[];\n };\n };\n dateGroupVariants: {\n date: (DateFunction \| undefined)[];\n datetime: (DateFunction \| undefined)[];\n };\n}\n~~\n/* Option object in the DateFunctionSelector component */\nexport interface DateSelectorOption {\n key: DateFunction \| 'NONE';\n dateFunction: DateFunction \| undefined;\n label: string;\n}\n~~"]}
1	+ {"version":3,"file":"Grouping.types.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/Grouping.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { DateFunction } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/core/types';\n\n/** Metadata used to identify which fields and which date functions are/aren't available for selection in the Grouping menu */\nexport interface GroupingOptions {\n exhaustedFields: Set<string>;\n dateFuncs: {\n [columnId: string]: {\n exhausted: (DateFunction \| undefined)[];\n available: (DateFunction \| undefined)[];\n };\n };\n dateGroupVariants: {\n date: (DateFunction \| undefined)[];\n datetime: (DateFunction \| undefined)[];\n };\n}\n"]}

package/lib/Core/Components/Toolbar/SimpleToolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleToolbar.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/SimpleToolbar.jsx"],"names":[],"mappings":"AAYA;;~~4CAkCC~~;;;;;;;;;~~sBA9CqB~~,YAAY"}
1	+ {"version":3,"file":"SimpleToolbar.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/SimpleToolbar.jsx"],"names":[],"mappings":"AAYA;;4CA+BC;;;;;;;;;sBA3CqB,YAAY"}

package/lib/Core/Components/Toolbar/SimpleToolbar.js CHANGED Viewed

@@ -7,14 +7,15 @@ import getCount from './utils/getCount';
 import AnnounceRowsCount from './AnnounceRowsCount';
 import ValidateMessage from './ValidateMessage';
 import useFormControlProps from './hooks/useFormControlProps';
-import KeyboardInstructions from './KeyboardInstructions';
+import useWrapAction from './hooks/useWrapAction';
 export default function SimpleToolbar({ view }) {
     const { meta: { title, template } = {}, state, getContext, showCount, refreshNotification, type: { forceRefresh } } = view;
     const { getRequiredDef } = getContext();
     const { validatemessage } = getRequiredDef() || {};
-    const count = showCount ? getCount({ view }) : {};
+    const count = showCount ? getCount({ view }) : undefined;
     const formControlProps = useFormControlProps(view);
-    return (_jsxs(AnnounceRowsCount, { state: state, count: count, children: [_jsx(ValidateMessage, { message: validatemessage, children: _jsx(ListToolbar, { name: title, count: count, formControlProps: formControlProps, keyboardInstructions: template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? (_jsx(KeyboardInstructions, { template: template })) : undefined }) }), refreshNotification && (_jsx(RefreshBanner, { refreshNotification: refreshNotification, forceRefresh: forceRefresh }))] }));
+    const wrapAction = useWrapAction(view);
+    return (_jsxs(AnnounceRowsCount, { state: state, count: count, children: [_jsx(ValidateMessage, { message: validatemessage, children: _jsx(ListToolbar, { name: title, count: count, formControlProps: formControlProps, wrap: template === REPEATING_STRUCTURE_TEMPLATES.TABLE && wrapAction }) }), refreshNotification && (_jsx(RefreshBanner, { refreshNotification: refreshNotification, forceRefresh: forceRefresh }))] }));
 }
 SimpleToolbar.propTypes = {
     view: PropTypes.objectOf(PropTypes.any).isRequired

package/lib/Core/Components/Toolbar/SimpleToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleToolbar.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/SimpleToolbar.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,6BAA6B,CAAC;AAC9D,OAAO,~~oBAAoB~~,MAAM,~~wBAAwB~~,CAAC;~~AAE1D~~,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,IAAI,EAAE;IAC5C,MAAM,EACJ,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,IAAI,EAAE,EAAE,YAAY,EAAE,EACvB,GAAG,IAAI,CAAC;IACT,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,EAAE,eAAe,EAAE,GAAG,cAAc,EAAE,IAAI,EAAE,CAAC;IACnD,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,~~EAAE~~,CAAC;~~IAClD~~,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;~~IAEnD~~,OAAO,CACL,MAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,aAC3C,KAAC,eAAe,IAAC,OAAO,EAAE,eAAe,YACvC,KAAC,WAAW,IACV,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,~~oBAAoB~~,~~EAClB~~,QAAQ,KAAK,6BAA6B,CAAC,KAAK,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CACjD,KAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAC7C,CAAC,CAAC,CAAC,SAAS,GAEf,~~GAEc,EACjB,mBAAmB,IAAI,CACtB,KAAC,aAAa,IAAC,mBAAmB,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,GAAI,CACxF,IACiB,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { ListToolbar } from '@pega/cosmos-react-core';\nimport { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';\n\nimport RefreshBanner from './RefreshBanner';\nimport getCount from './utils/getCount';\nimport AnnounceRowsCount from './AnnounceRowsCount';\nimport ValidateMessage from './ValidateMessage';\nimport useFormControlProps from './hooks/useFormControlProps';\nimport ~~KeyboardInstructions~~ from './~~KeyboardInstructions~~';\n\nexport default function SimpleToolbar({ view }) {\n const {\n meta: { title, template } = {},\n state,\n getContext,\n showCount,\n refreshNotification,\n type: { forceRefresh }\n } = view;\n const { getRequiredDef } = getContext();\n const { validatemessage } = getRequiredDef() \|\| {};\n const count = showCount ? getCount({ view }) : {};\n const formControlProps = useFormControlProps(view);\n\n return (\n <AnnounceRowsCount state={state} count={count}>\n <ValidateMessage message={validatemessage}>\n <ListToolbar\n name={title}\n count={count}\n formControlProps={formControlProps}\n ~~keyboardInstructions~~={\n template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? ~~(\n <KeyboardInstructions template={template~~} ~~/>\n ) : undefined~~\n ~~}\n~~ />\n {/* FIXME: This implementation of error status should be considered temporary until an official, and properly accessible, spec is determined. */}\n </ValidateMessage>\n {refreshNotification && (\n <RefreshBanner refreshNotification={refreshNotification} forceRefresh={forceRefresh} />\n )}\n </AnnounceRowsCount>\n );\n}\n\nSimpleToolbar.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
1	+ {"version":3,"file":"SimpleToolbar.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/SimpleToolbar.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,6BAA6B,CAAC;AAC9D,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,IAAI,EAAE;IAC5C,MAAM,EACJ,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,IAAI,EAAE,EAAE,YAAY,EAAE,EACvB,GAAG,IAAI,CAAC;IACT,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,EAAE,eAAe,EAAE,GAAG,cAAc,EAAE,IAAI,EAAE,CAAC;IACnD,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,CACL,MAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,aAC3C,KAAC,eAAe,IAAC,OAAO,EAAE,eAAe,YACvC,KAAC,WAAW,IACV,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,QAAQ,KAAK,6BAA6B,CAAC,KAAK,IAAI,UAAU,GACpE,GAEc,EACjB,mBAAmB,IAAI,CACtB,KAAC,aAAa,IAAC,mBAAmB,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,GAAI,CACxF,IACiB,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { ListToolbar } from '@pega/cosmos-react-core';\nimport { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';\n\nimport RefreshBanner from './RefreshBanner';\nimport getCount from './utils/getCount';\nimport AnnounceRowsCount from './AnnounceRowsCount';\nimport ValidateMessage from './ValidateMessage';\nimport useFormControlProps from './hooks/useFormControlProps';\nimport useWrapAction from './hooks/useWrapAction';\n\nexport default function SimpleToolbar({ view }) {\n const {\n meta: { title, template } = {},\n state,\n getContext,\n showCount,\n refreshNotification,\n type: { forceRefresh }\n } = view;\n const { getRequiredDef } = getContext();\n const { validatemessage } = getRequiredDef() \|\| {};\n const count = showCount ? getCount({ view }) : undefined;\n const formControlProps = useFormControlProps(view);\n const wrapAction = useWrapAction(view);\n\n return (\n <AnnounceRowsCount state={state} count={count}>\n <ValidateMessage message={validatemessage}>\n <ListToolbar\n name={title}\n count={count}\n formControlProps={formControlProps}\n wrap={template === REPEATING_STRUCTURE_TEMPLATES.TABLE && wrapAction}\n />\n {/* FIXME: This implementation of error status should be considered temporary until an official, and properly accessible, spec is determined. */}\n </ValidateMessage>\n {refreshNotification && (\n <RefreshBanner refreshNotification={refreshNotification} forceRefresh={forceRefresh} />\n )}\n </AnnounceRowsCount>\n );\n}\n\nSimpleToolbar.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.d.ts CHANGED Viewed

@@ -1,20 +1,16 @@
-export default DateFunctionSelector;
-/** Renders a Date-function selector in a grouping row if applicable */
-declare function DateFunctionSelector(props: any): import("react/jsx-runtime").JSX.Element | null;
-declare namespace DateFunctionSelector {
-    namespace propTypes {
-        let group: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-        let dateFunctions: PropTypes.Requireable<{
-            [x: string]: any;
-        }>;
-        let groupingOptions: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-        let columns: PropTypes.Validator<any[]>;
-        let onChange: PropTypes.Validator<(...args: any[]) => any>;
-    }
+import type { Group } from 'pega-repeating-structures-core/lib/types/State.types';
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { GroupingOptions } from '../../Grouping.types';
+import type { AppliedGroup } from './useGroup';
+interface DateFunctionSelectorProps {
+    template: RsCoreTypes.Meta['template'];
+    group: AppliedGroup;
+    groupingOptions: GroupingOptions;
+    dateFunctions: RsCoreTypes.Meta['dateFunctions'];
+    columns: RsCoreTypes.Column[];
+    onChange: (newFunc: Group['dateFunction']) => void;
 }
-import PropTypes from 'prop-types';
+/** Renders a Date-function selector in a grouping row if applicable */
+declare const DateFunctionSelector: ({ template, group, groupingOptions, dateFunctions, columns, onChange }: DateFunctionSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DateFunctionSelector;
 //# sourceMappingURL=DateFunctionSelector.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateFunctionSelector.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.~~jsx~~"],"names":[],"mappings":";~~AAeA~~,uEAAuE;AACvE,~~kGA2DC;;;;;;;;;;;;;;;;sBA1EqB~~,~~YAAY~~"}
1	+ {"version":3,"file":"DateFunctionSelector.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAOlF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAS/C,UAAU,yBAAyB;IACjC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,KAAK,EAAE,YAAY,CAAC;IACpB,eAAe,EAAE,eAAe,CAAC;IACjC,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACjD,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACpD;AAED,uEAAuE;AACvE,QAAA,MAAM,oBAAoB,GAAI,wEAO3B,yBAAyB,mDAmE3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -1,31 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Option, Select } from '@pega/cosmos-react-core';
-import { dateFunctionLabels } from 'pega-repeating-structures-core';
+import { dateFunctionLabels, FieldType, REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';
 import useTranslate from '../../../../Hooks/useTranslate';
 import { getFieldType } from './utils';
 const StyledDateFuncWrapper = styled.div `
   width: 9rem;
 `;
+const timelineAllowedDateFunctions = ['YEARS', 'QUARTERS', 'MONTHS', 'DAYS'];
 /** Renders a Date-function selector in a grouping row if applicable */
-const DateFunctionSelector = props => {
-    const { group, groupingOptions, dateFunctions, columns, onChange } = props;
+const DateFunctionSelector = ({ template, group, groupingOptions, dateFunctions, columns, onChange }) => {
     const [translate] = useTranslate();
     const fieldType = getFieldType(group.columnId, columns);
     /**
      * Determine what all date functions (if any) can be used for the given fieldType
-     * @type { import("./Grouping.types").DateSelectorOption[] }
      */
     const allOptions = useMemo(() => {
         // If date functions are disabled or not applicable to the current field type
-        if (!dateFunctions || !['date', 'datetime'].includes(fieldType)) {
+        if (!dateFunctions || !(fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {
             return [];
         }
         return [
             // Date functions applicable for the given field type
-            ...dateFunctions[fieldType === 'date' ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({
+            ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({
                 key: f,
                 dateFunction: f,
                 label: translate(dateFunctionLabels[f])
@@ -43,15 +41,16 @@ const DateFunctionSelector = props => {
     // NOTE: Doing it this way to preserve the order of options.
     // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.
     const { available } = groupingOptions.dateFuncs[group.columnId];
-    const optionsToUse = allOptions.filter(o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction);
-    return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => onChange(e.target.value === 'NONE' ? undefined : e.target.value), children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: o.label }, o.key))) }) }));
-};
-DateFunctionSelector.propTypes = {
-    group: PropTypes.objectOf(PropTypes.any).isRequired,
-    dateFunctions: PropTypes.objectOf(PropTypes.any),
-    groupingOptions: PropTypes.objectOf(PropTypes.any).isRequired,
-    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
-    onChange: PropTypes.func.isRequired
+    const optionsToUse = allOptions.filter(o => {
+        if (template === REPEATING_STRUCTURE_TEMPLATES.TIMELINE &&
+            (!o.dateFunction || !timelineAllowedDateFunctions.includes(o.dateFunction))) {
+            return false;
+        }
+        return available.includes(o.dateFunction) || o.dateFunction === group.dateFunction;
+    });
+    return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => {
+                onChange(e.target.value === 'NONE' ? undefined : e.target.value);
+            }, children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: translate(o.label) }, o.key))) }) }));
 };
 export default DateFunctionSelector;
 //# sourceMappingURL=DateFunctionSelector.js.map

package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateFunctionSelector.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.~~jsx~~"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,~~SAAS,~~MAAM,~~YAAY,CAAC;AACnC,OAAO,~~MAAM,~~MAAM,~~mBAAmB,CAAC;~~AAEvC~~,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,~~EAAE~~,kBAAkB,~~EAAE~~,MAAM,gCAAgC,CAAC;~~AAEpE~~,OAAO,YAAY,MAAM,gCAAgC,CAAC;~~AAE1D~~,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvC,CAAC;AAEF,uEAAuE;AACvE,MAAM,oBAAoB,GAAG,~~KAAK,~~CAAC,~~EAAE;IACnC~~,~~MAAM~~,~~EAAE~~,KAAK,~~EAAE~~,eAAe,~~EAAE~~,aAAa,~~EAAE~~,OAAO,~~EAAE~~,QAAQ,EAAE,~~GAAG,KAAK,CAAC~~;~~IAC3E~~,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAExD~~;;;OAGG~~;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,6EAA6E;QAC7E,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,~~MAAM~~,~~EAAE~~,~~UAAU~~,CAAC,~~CAAC~~,~~QAAQ~~,CAAC,SAAS,CAAC,EAAE,CAAC;~~YAChE~~,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO;YACL,qDAAqD;YACrD,GAAG,aAAa,CAAC,SAAS,KAAK,~~MAAM~~,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;~~gBAC3E~~,GAAG,EAAE,CAAC;gBACN,YAAY,EAAE,CAAC;gBACf,KAAK,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAC;YAEH,mDAAmD;YACnD,6DAA6D;YAC7D,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;SAC3D,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1C,mCAAmC;IACnC,2EAA2E;IAC3E,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,4DAA4D;IAC5D,sHAAsH;IACtH,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,~~CACpC~~,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,~~CACjF~~,CAAC;~~IAEF~~,OAAO,CACL,KAAC,qBAAqB,cACpB,KAAC,MAAM,IACL,KAAK,EAAC,eAAe,EACrB,WAAW,uBACC,0BAA0B,EACtC,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,MAAM,EACnC,QAAQ,EAAE,CAAC,CAAC,EAAE,~~CAAC,~~QAAQ,~~CAAC~~,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,~~CAAC~~,CAAC,CAAC,MAAM,CAAC,~~KAAK~~,CAAC,~~YAE9E~~,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACrB,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,YAC7B,CAAC,CAAC,KAAK,~~IADG~~,CAAC,CAAC,GAAG,CAET,CACV,CAAC,GACK,GACa,CACzB,CAAC;AACJ,CAAC,CAAC;AACF,oBAAoB,CAAC,SAAS,GAAG;IAC/B,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACnD,aAAa,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IAChD,eAAe,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAC7D,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACpD,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport ~~PropTypes~~ from '~~prop~~-~~types~~';\nimport ~~styled~~ from '~~styled~~-~~components~~';\n\nimport { Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getFieldType } from './utils';\n\nconst StyledDateFuncWrapper = styled.div`\n width: 9rem;\n`;\n\n/** Renders a Date-function selector in a grouping row if applicable /\nconst DateFunctionSelector = ~~props =>~~ {\n ~~const {~~ group, groupingOptions, dateFunctions, columns, onChange } = ~~props;\~~n const [translate] = useTranslate();\n const fieldType = getFieldType(group.columnId, columns);\n\n /\n Determine what all date functions (if any) can be used for the given fieldType\n * @type { import(\"./Grouping.types\").DateSelectorOption[] }\n */\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 // Skip if no options are available\n // i.e. date functions are disabled or not applicable to current field type\n if (allOptions.length === 0) {\n return null;\n }\n\n // NOTE: Doing it this way to preserve the order of options.\n // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.\n const { available } = groupingOptions.dateFuncs[group.columnId];\n const optionsToUse = allOptions.filter(\n o => available.includes(o.dateFunction) \|\| o.dateFunction === group.dateFunction\n );\n\n return (\n <StyledDateFuncWrapper>\n <Select\n label='Date function'\n labelHidden\n data-testid='GroupingDateFuncSelector'\n value={group.dateFunction \|\| 'NONE'} // Can't set up `undefined` as value\n onChange={e => onChange(e.target.value === 'NONE' ? undefined : e.target.value)}\n >\n {optionsToUse.map(o => (\n <Option key={o.key} value={o.key}>\n {o.label}\n </Option>\n ))}\n </Select>\n </StyledDateFuncWrapper>\n );\n};\~~nDateFunctionSelector.propTypes = {\~~n group: PropTypes.objectOf(PropTypes.any).isRequired,\n dateFunctions: PropTypes.objectOf(PropTypes.any),\n groupingOptions: PropTypes.objectOf(PropTypes.any).isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n onChange: PropTypes.func.isRequired\~~n};\n\~~nexport default DateFunctionSelector;\n"]}
1	+ {"version":3,"file":"DateFunctionSelector.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport type { Group } from 'pega-repeating-structures-core/lib/types/State.types';\nimport { Option, Select } from '@pega/cosmos-react-core';\nimport {\n dateFunctionLabels,\n FieldType,\n REPEATING_STRUCTURE_TEMPLATES\n} from 'pega-repeating-structures-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../../../Hooks/useTranslate';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport type { AppliedGroup } from './useGroup';\nimport { getFieldType } from './utils';\n\nconst StyledDateFuncWrapper = styled.div`\n width: 9rem;\n`;\n\nconst timelineAllowedDateFunctions = ['YEARS', 'QUARTERS', 'MONTHS', 'DAYS'];\n\ninterface DateFunctionSelectorProps {\n template: RsCoreTypes.Meta['template'];\n group: AppliedGroup;\n groupingOptions: GroupingOptions;\n dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n columns: RsCoreTypes.Column[];\n onChange: (newFunc: Group['dateFunction']) => void;\n}\n\n/** Renders a Date-function selector in a grouping row if applicable /\nconst DateFunctionSelector = ({\n template,\n group,\n groupingOptions,\n dateFunctions,\n columns,\n onChange\n}: DateFunctionSelectorProps) => {\n const [translate] = useTranslate();\n const fieldType = getFieldType(group.columnId, columns);\n\n /\n Determine what all date functions (if any) can be used for the given fieldType\n */\n const allOptions = useMemo(() => {\n // If date functions are disabled or not applicable to the current field type\n if (!dateFunctions \|\| !(fieldType === FieldType.DATE \|\| fieldType === FieldType.DATE_TIME)) {\n return [];\n }\n\n return [\n // Date functions applicable for the given field type\n ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n key: f,\n dateFunction: f,\n label: translate(dateFunctionLabels[f])\n })),\n\n // Option for grouping directly by the field values\n // The key 'NONE' is needed to work with the Select component\n { key: 'NONE', dateFunction: undefined, label: 'Default' }\n ];\n }, [dateFunctions, fieldType, translate]);\n\n // Skip if no options are available\n // i.e. date functions are disabled or not applicable to current field type\n if (allOptions.length === 0) {\n return null;\n }\n\n // NOTE: Doing it this way to preserve the order of options.\n // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.\n const { available } = groupingOptions.dateFuncs[group.columnId];\n const optionsToUse = allOptions.filter(o => {\n if (\n template === REPEATING_STRUCTURE_TEMPLATES.TIMELINE &&\n (!o.dateFunction \|\| !timelineAllowedDateFunctions.includes(o.dateFunction))\n ) {\n return false;\n }\n return available.includes(o.dateFunction) \|\| o.dateFunction === group.dateFunction;\n });\n\n return (\n <StyledDateFuncWrapper>\n <Select\n label='Date function'\n labelHidden\n data-testid='GroupingDateFuncSelector'\n value={group.dateFunction \|\| 'NONE'} // Can't set up `undefined` as a value\n onChange={e => {\n onChange(\n e.target.value === 'NONE' ? undefined : (e.target.value as Group['dateFunction'])\n );\n }}\n >\n {optionsToUse.map(o => (\n <Option key={o.key} value={o.key}>\n {translate(o.label)}\n </Option>\n ))}\n </Select>\n </StyledDateFuncWrapper>\n );\n};\n\nexport default DateFunctionSelector;\n"]}

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.d.ts CHANGED Viewed

@@ -10,7 +10,8 @@ interface GroupRendererProps {
     })[]) => void;
     columns: RsCoreTypes.Column[];
     dateFunctions: RsCoreTypes.Meta['dateFunctions'];
+    template: RsCoreTypes.Meta['template'];
 }
-declare const GroupRenderer: ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions }: GroupRendererProps) => import("react/jsx-runtime").JSX.Element;
+declare const GroupRenderer: ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions, template }: GroupRendererProps) => import("react/jsx-runtime").JSX.Element;
 export default GroupRenderer;
 //# sourceMappingURL=GroupRenderer.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupRenderer.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAK9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAQ/C,UAAU,kBAAkB;IAC1B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;~~CAClD~~;AAED,QAAA,MAAM,aAAa,GAAI,~~uEAMpB~~,kBAAkB,~~4CA0LpB~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"GroupRenderer.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAK9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAQ/C,UAAU,kBAAkB;IAC1B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACjD,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,QAAA,MAAM,aAAa,GAAI,iFAOpB,kBAAkB,4CA+LpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js CHANGED Viewed

@@ -3,16 +3,17 @@ import { createElement as _createElement } from "react";
 import styled from 'styled-components';
 import { useCallback, useEffect, useRef } from 'react';
 import { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
+import { FieldType, REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';
 import useRowFocus from '../useRowFocus';
 import useDragDrop from '../../../../Hooks/useDragDrop';
 import FieldSelector from '../../FieldSelector';
-import { getFieldType } from './utils';
+import { getColumnById } from './utils';
 import DateFunctionSelector from './DateFunctionSelector';
 const DropSelector = '[data-drop]';
 const StyledDragHandle = styled(Button) `
   cursor: grab;
 `;
-const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions }) => {
+const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions, template }) => {
     const t = useI18n();
     const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();
     const dragDropRef = useRef(null);
@@ -46,14 +47,16 @@ const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dat
     const handleColumnChange = useCallback((group, index, newID) => {
         if (newID === group.columnId)
             return; // Ignore re-selecting the same
+        const groupedColumn = getColumnById(newID, columns);
         const updatedGroup = {
             ...group,
             columnId: newID,
-            dateFunction: undefined // Reset for non-date/time fields
+            dateFunction: undefined, // Reset for non-date/time fields,
+            order: groupedColumn?.sortOrder || 'asc' // Set sort order from column else default to 'asc'
         };
         // For date/datetime field, pick a date function by default (if enabled)
-        const fieldType = getFieldType(newID, columns);
-        if (dateFunctions && (fieldType === 'date' || fieldType === 'datetime')) {
+        const fieldType = groupedColumn?.field.type;
+        if (dateFunctions && (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {
             updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]
                 ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before
                 : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time
@@ -100,11 +103,11 @@ const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dat
                                         itemGap: 0.5
                                     }, children: [_jsx(StyledDragHandle, { forwardedAs: 'div', role: 'button', icon: true, variant: 'simple', compact: true, ...dragProps, children: _jsx(Icon, { name: 'drag' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { label: t('field'), labelHidden: true, columns: columns?.filter(c => c.field.grouping &&
                                                     (c.field.id.toString() === group.columnId.toString() ||
-                                                        !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { "aria-label": t('delete_group'), icon: true, variant: 'simple', onClick: () => removeGroup(index), children: _jsx(Icon, { name: 'trash' }) })] })))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
+                                                        !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { template: template, group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeGroup(index), label: t('delete_group'), children: _jsx(Icon, { name: 'trash' }) })] })))) }), template !== REPEATING_STRUCTURE_TEMPLATES.TIMELINE && (_jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
                             inline: true,
                             alignItems: 'start',
                             gap: 1
-                        }, as: 'span', children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('add') })] }) }) })] }, 'grouping'));
+                        }, as: 'span', children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('add') })] }) }) }))] }, 'grouping'));
 };
 export default GroupRenderer;
 //# sourceMappingURL=GroupRenderer.js.map

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIjF,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAGhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAG1D,MAAM,YAAY,GAAG,aAAa,CAAC;AAEnC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEtC,CAAC;AAUF,MAAM,aAAa,GAAG,CAAC,EACrB,aAAa,EACb,eAAe,EACf,SAAS,EACT,OAAO,EACP,aAAa,EACM,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,WAAW,EAAE,CAAC;IAEjE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IAChG,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,IAAa,EAAE,GAAY,EAAE,EAAE;QAC9B,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;QAC1D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;QACzD,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YAC1D,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzD,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YAC/C,SAAS,CAAC,cAAc,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,CAAC,CAC3B,CAAC;IACF,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QAC3C,OAAO,EAAE,WAAW;QACpB,oBAAoB;QACpB,qBAAqB,EAAE,oBAAoB;QAC3C,gBAAgB,EAAE,oBAAoB;QACtC,MAAM;KACP,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAa,EAAE,EAAE;QAChB,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1D,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAChC,SAAS,CAAC,cAAc,CAAC,CAAC;QAE1B,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC;YAC3B,aAAa,CACX,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC;gBAChC,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;gBAC9B,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAC7B,CAAC;IACN,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,EAAE,aAAa,CAAC,CAC1C,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAAY,EAAE,KAAa,EAAE,KAAa,EAAE,EAAE;QAC7C,IAAI,KAAK,KAAK,KAAK,CAAC,QAAQ;YAAE,OAAO,CAAC,+BAA+B;QACrE,MAAM,YAAY,GAAU;YAC1B,GAAG,KAAK;YACR,QAAQ,EAAE,KAAK;YACf,YAAY,EAAE,SAAS,CAAC,iCAAiC;SAC1D,CAAC;QAEF,wEAAwE;QACxE,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC/C,IAAI,aAAa,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,EAAE,CAAC;YACxE,YAAY,CAAC,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC;gBAC1D,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,wCAAwC;gBACxF,CAAC,CAAC,eAAe,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,4CAA4C;QACnG,CAAC;QAED,SAAS,CAAC;YACR,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;YAChC,YAAY;YACZ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;SAClC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,CAAC,CACpE,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,KAAY,EAAE,KAAa,EAAE,OAA8B,EAAE,EAAE;QAC9D,IAAI,OAAO,KAAK,KAAK,CAAC,YAAY;YAAE,OAAO,CAAC,+BAA+B;QAC3E,MAAM,YAAY,GAAG,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;QACzD,SAAS,CAAC;YACR,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;YAChC,YAAY;YACZ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;SAClC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,SAAS,EAAE,aAAa,CAAC,CAC3B,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;QAC/D,MAAM,cAAc,GAAG,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;QAClD,SAAS,CAAC,cAAc,CAAC,CAAC;QAC1B,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;YAC1B,MAAM,EAAE,CAAC;QACX,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,WAAW,YACzF,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,2BAAS,SAAS,gBAAc,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE;oBAClD,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,SAAS;4BAClB,UAAU,EAAE,QAAQ;4BACpB,SAAS,EAAE,KAAK;4BAChB,IAAI,EAAE,QAAQ;4BACd,OAAO,EAAE,GAAG;yBACb,EACD,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,aAEhE,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,MAAC,IAAI,IACH,SAAS,EAAE;wCACT,OAAO,EAAE,OAAO;wCAChB,UAAU,EAAE,QAAQ;wCACpB,SAAS,EAAE,KAAK;wCAChB,IAAI,EAAE,QAAQ;wCACd,OAAO,EAAE,GAAG;qCACb,aAED,KAAC,gBAAgB,IACf,WAAW,EAAC,KAAK,EACjB,IAAI,EAAC,QAAQ,EACb,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,WACH,SAAS,YAEb,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACH,EACnB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,aAAa,IACZ,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EACjB,WAAW,QACX,OAAO,EAAE,OAAO,EAAE,MAAM,CACtB,CAAC,CAAC,EAAE,CACF,CAAC,CAAC,KAAK,CAAC,QAAQ;oDAChB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE;wDAClD,CAAC,eAAe,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CACtD,EACD,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,EAChC,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,SAAS,EAAC,IAAI,GACd,GACG,EACP,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,OAA8B,EAAE,EAAE,CAC3C,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,GAE7C,IACG,GACF,EACP,KAAC,MAAM,kBACO,CAAC,CAAC,cAAc,CAAC,EAC7B,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAEjC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,CACH,CACP,CAAC,GACG,EACP,wBACE,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,gBAAa,CAAC,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,YAChE,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,MAAM,EAAE,IAAI;4BACZ,UAAU,EAAE,OAAO;4BACnB,GAAG,EAAE,CAAC;yBACP,EACD,EAAE,EAAC,MAAM,aAET,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,yBAAO,CAAC,CAAC,KAAK,CAAC,GAAQ,IAClB,GACA,GACL,KAvF8C,UAAU,CAwFzD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getFieldType } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\n\nconst StyledDragHandle = styled(Button)`\n cursor: grab;\n`;\n\ninterface GroupRendererProps {\n appliedGroups: AppliedGroup[];\n groupingOptions: GroupingOptions;\n setGroups: (groups: (Group \| { id: string })[]) => void;\n columns: RsCoreTypes.Column[];\n dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n}\n\nconst GroupRenderer = ({\n appliedGroups,\n groupingOptions,\n setGroups,\n columns,\n dateFunctions\n}: GroupRendererProps) => {\n const t = useI18n();\n const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n const dragDropRef = useRef<HTMLDivElement>(null);\n const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n const onDrop = useCallback(\n (dest: Element, src: Element) => {\n const dropIndex = Number(dest.getAttribute('data-index'));\n const dragIndex = Number(src.getAttribute('data-index'));\n if (dragIndex !== dropIndex) {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n existingGroups.splice(dropIndex, 0, dragGroup);\n setGroups(existingGroups);\n }\n },\n [appliedGroups, setGroups]\n );\n const { dragProps, dropProps } = useDragDrop({\n context: dragDropRef,\n getAnimationSelector,\n getGhostImageSelector: getAnimationSelector,\n getDraggedObject: getAnimationSelector,\n onDrop\n });\n\n const removeGroup = useCallback(\n (index: number) => {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n existingGroups.splice(index, 1);\n setGroups(existingGroups);\n\n if (existingGroups.length > 0)\n setFocusRowId(\n index === appliedGroups.length - 1\n ? existingGroups[index - 1].id\n : existingGroups[index].id\n );\n },\n [appliedGroups, setGroups, setFocusRowId]\n );\n\n const handleColumnChange = useCallback(\n (group: Group, index: number, newID: string) => {\n if (newID === group.columnId) return; // Ignore re-selecting the same\n const updatedGroup: Group = {\n ...group,\n columnId: newID,\n dateFunction: undefined // Reset for non-date/time fields\n };\n\n // For date/datetime field, pick a date function by default (if enabled)\n const fieldType = getFieldType(newID, columns);\n if (dateFunctions && (fieldType === 'date' \|\| fieldType === 'datetime')) {\n updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n }\n\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n );\n\n const handleDateFuncChange = useCallback(\n (group: Group, index: number, newFunc: Group['dateFunction']) => {\n if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n const updatedGroup = { ...group, dateFunction: newFunc };\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [setGroups, appliedGroups]\n );\n\n const addRow = useCallback(() => {\n const newRow = { id: createUID(), columnId: '', order: 'asc' };\n const existingGroups = [...appliedGroups, newRow];\n setGroups(existingGroups);\n setFocusRowId(newRow.id);\n }, [appliedGroups, setGroups, setFocusRowId]);\n\n useEffect(() => {\n if (!appliedGroups.length) {\n addRow();\n }\n }, [appliedGroups, addRow]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n {appliedGroups.map((group, index) => (\n <div {...dropProps} data-index={index} key={group.id}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n >\n <Flex item={{ grow: 1 }}>\n <Flex\n container={{\n justify: 'start',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={t('field')}\n labelHidden\n columns={columns?.filter(\n c =>\n c.field.grouping &&\n (c.field.id.toString() === group.columnId.toString() \|\|\n !groupingOptions.exhaustedFields.has(c.field.id))\n )}\n value={group.columnId}\n disabled={!!group.customFunction}\n onChange={(newID: string) => handleColumnChange(group, index, newID)}\n fieldProp='id'\n />\n </Flex>\n <DateFunctionSelector\n group={group}\n groupingOptions={groupingOptions}\n dateFunctions={dateFunctions}\n columns={columns}\n onChange={(newFunc: Group['dateFunction']) =>\n handleDateFuncChange(group, index, newFunc)\n }\n />\n </Flex>\n </Flex>\n <Button\n aria-label={t('delete_group')}\n icon\n variant='simple'\n onClick={() => removeGroup(index)}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </div>\n ))}\n </Flex>\n <div>\n <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n <Flex\n container={{\n inline: true,\n alignItems: 'start',\n gap: 1\n }}\n as='span'\n >\n <Icon name='plus' />\n <span>{t('add')}</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport default GroupRenderer;\n"]}
1	+ {"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport { FieldType, REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getColumnById } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\n\nconst StyledDragHandle = styled(Button)`\n cursor: grab;\n`;\n\ninterface GroupRendererProps {\n appliedGroups: AppliedGroup[];\n groupingOptions: GroupingOptions;\n setGroups: (groups: (Group \| { id: string })[]) => void;\n columns: RsCoreTypes.Column[];\n dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n template: RsCoreTypes.Meta['template'];\n}\n\nconst GroupRenderer = ({\n appliedGroups,\n groupingOptions,\n setGroups,\n columns,\n dateFunctions,\n template\n}: GroupRendererProps) => {\n const t = useI18n();\n const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n const dragDropRef = useRef<HTMLDivElement>(null);\n const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n const onDrop = useCallback(\n (dest: Element, src: Element) => {\n const dropIndex = Number(dest.getAttribute('data-index'));\n const dragIndex = Number(src.getAttribute('data-index'));\n if (dragIndex !== dropIndex) {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n existingGroups.splice(dropIndex, 0, dragGroup);\n setGroups(existingGroups);\n }\n },\n [appliedGroups, setGroups]\n );\n const { dragProps, dropProps } = useDragDrop({\n context: dragDropRef,\n getAnimationSelector,\n getGhostImageSelector: getAnimationSelector,\n getDraggedObject: getAnimationSelector,\n onDrop\n });\n\n const removeGroup = useCallback(\n (index: number) => {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n existingGroups.splice(index, 1);\n setGroups(existingGroups);\n\n if (existingGroups.length > 0)\n setFocusRowId(\n index === appliedGroups.length - 1\n ? existingGroups[index - 1].id\n : existingGroups[index].id\n );\n },\n [appliedGroups, setGroups, setFocusRowId]\n );\n\n const handleColumnChange = useCallback(\n (group: Group, index: number, newID: string) => {\n if (newID === group.columnId) return; // Ignore re-selecting the same\n const groupedColumn = getColumnById(newID, columns);\n const updatedGroup: Group = {\n ...group,\n columnId: newID,\n dateFunction: undefined, // Reset for non-date/time fields,\n order: groupedColumn?.sortOrder \|\| 'asc' // Set sort order from column else default to 'asc'\n };\n\n // For date/datetime field, pick a date function by default (if enabled)\n const fieldType = groupedColumn?.field.type;\n if (dateFunctions && (fieldType === FieldType.DATE \|\| fieldType === FieldType.DATE_TIME)) {\n updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n }\n\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n );\n\n const handleDateFuncChange = useCallback(\n (group: Group, index: number, newFunc: Group['dateFunction']) => {\n if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n const updatedGroup = { ...group, dateFunction: newFunc };\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [setGroups, appliedGroups]\n );\n\n const addRow = useCallback(() => {\n const newRow = { id: createUID(), columnId: '', order: 'asc' };\n const existingGroups = [...appliedGroups, newRow];\n setGroups(existingGroups);\n setFocusRowId(newRow.id);\n }, [appliedGroups, setGroups, setFocusRowId]);\n\n useEffect(() => {\n if (!appliedGroups.length) {\n addRow();\n }\n }, [appliedGroups, addRow]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n {appliedGroups.map((group, index) => (\n <div {...dropProps} data-index={index} key={group.id}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n >\n <Flex item={{ grow: 1 }}>\n <Flex\n container={{\n justify: 'start',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={t('field')}\n labelHidden\n columns={columns?.filter(\n c =>\n c.field.grouping &&\n (c.field.id.toString() === group.columnId.toString() \|\|\n !groupingOptions.exhaustedFields.has(c.field.id))\n )}\n value={group.columnId}\n disabled={!!group.customFunction}\n onChange={(newID: string) => handleColumnChange(group, index, newID)}\n fieldProp='id'\n />\n </Flex>\n <DateFunctionSelector\n template={template}\n group={group}\n groupingOptions={groupingOptions}\n dateFunctions={dateFunctions}\n columns={columns}\n onChange={(newFunc: Group['dateFunction']) =>\n handleDateFuncChange(group, index, newFunc)\n }\n />\n </Flex>\n </Flex>\n <Button\n icon\n variant='simple'\n onClick={() => removeGroup(index)}\n label={t('delete_group')}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </div>\n ))}\n </Flex>\n {template !== REPEATING_STRUCTURE_TEMPLATES.TIMELINE && (\n <div>\n <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n <Flex\n container={{\n inline: true,\n alignItems: 'start',\n gap: 1\n }}\n as='span'\n >\n <Icon name='plus' />\n <span>{t('add')}</span>\n </Flex>\n </Button>\n </div>\n )}\n </Flex>\n );\n};\n\nexport default GroupRenderer;\n"]}

package/lib/Core/Components/Toolbar/hooks/useGroup/useGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useGroup.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/useGroup.ts"],"names":[],"mappings":"~~AAEA~~,OAAO,EAAa,KAAK,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,WAAW,YAAa,SAAQ,KAAK;IACzC,EAAE,EAAE,MAAM,CAAC;CACZ;AAKD,QAAA,MAAM,QAAQ,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,KAAG,gBAAgB,CAAC,OAAO,~~CAsFhF~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"useGroup.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/useGroup.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,WAAW,YAAa,SAAQ,KAAK;IACzC,EAAE,EAAE,MAAM,CAAC;CACZ;AAKD,QAAA,MAAM,QAAQ,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,KAAG,gBAAgB,CAAC,OAAO,CA2FhF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/Core/Components/Toolbar/hooks/useGroup/useGroup.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';
 import { createUID, usePrevious } from '@pega/cosmos-react-core';
 import { TOOLBAR_FEATURES } from '../../../../constants';
 import { deepEqual } from '../../../../Utils';
@@ -6,7 +7,7 @@ import { getGroupingOptions } from './utils';
 import GroupRenderer from './GroupRenderer';
 const convertGroupsToAppliedGroups = (groups) => groups.map(group => ({ ...group, id: createUID() }));
 const useGroup = ({ view }) => {
-    const { state: { groups = [] } = {}, meta: { grouping, dateFunctions }, type: { applyGrouping }, columns = [] } = view;
+    const { state: { groups = [] } = {}, meta: { grouping, dateFunctions, template }, type: { applyGrouping }, columns = [] } = view;
     const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);
     const [appliedGroups, setAppliedGroups] = useState([]);
     const [groupingOptions, setGroupingOptions] = useState(() => getGroupingOptions(groups, columns, dateFunctions));
@@ -61,12 +62,14 @@ const useGroup = ({ view }) => {
             setGroups(convertGroupsToAppliedGroups(groups));
         }
     }, [groups, prevGroups, setGroups, view.columns]);
-    if (!grouping || view.hierarchicalGroupEnabled || !displayGrouping)
+    if (!grouping ||
+        (view.hierarchicalGroupEnabled && template !== REPEATING_STRUCTURE_TEMPLATES.TIMELINE) ||
+        !displayGrouping)
         return;
     return {
         count: groups.length > 0 ? groups.length : undefined,
         renderer: GroupRenderer,
-        rendererProps: { appliedGroups, columns, dateFunctions, groupingOptions, setGroups },
+        rendererProps: { appliedGroups, columns, dateFunctions, groupingOptions, setGroups, template },
         onSubmit,
         onCancel
     };

package/lib/Core/Components/Toolbar/hooks/useGroup/useGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useGroup.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/useGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAyB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAM5C,MAAM,4BAA4B,GAAG,CAAC,MAAe,EAAE,EAAE,CACvD,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAEvD,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAA8B,EAA6B,EAAE;IACnF,MAAM,EACJ,KAAK,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,EAC3B,IAAI,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,~~EACjC~~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~~IAAI~~,CAAC,QAAQ,~~IAAI~~,IAAI,CAAC,wBAAwB,IAAI,CAAC,eAAe;~~QAAE~~,OAAO;~~IAE3E~~,OAAO;QACL,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACpD,QAAQ,EAAE,aAAa;QACvB,aAAa,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,SAAS,EAAE;~~QACpF~~,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { createUID, type ListToolbarProps, usePrevious } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport { TOOLBAR_FEATURES } from '../../../../constants';\nimport { deepEqual } from '../../../../Utils';\n\nimport { getGroupingOptions } from './utils';\nimport GroupRenderer from './GroupRenderer';\n\nexport interface AppliedGroup extends Group {\n id: string;\n}\n\nconst convertGroupsToAppliedGroups = (groups: Group[]) =>\n groups.map(group => ({ ...group, id: createUID() }));\n\nconst useGroup = ({ view }: { view: RsCoreTypes.View }): ListToolbarProps['group'] => {\n const {\n state: { groups = [] } = {},\n meta: { grouping, dateFunctions },\n type: { applyGrouping },\n columns = []\n } = view;\n\n const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);\n const [appliedGroups, setAppliedGroups] = useState<AppliedGroup[]>([]);\n const [groupingOptions, setGroupingOptions] = useState(() =>\n getGroupingOptions(groups, columns, dateFunctions)\n );\n\n const setGroups = useCallback(\n (newGroups: AppliedGroup[]) => {\n setAppliedGroups(newGroups);\n setGroupingOptions(getGroupingOptions(newGroups, columns, dateFunctions));\n },\n [columns, dateFunctions]\n );\n\n // BUG-758989 This useEffect should run only once when the columns are populated on view\n // as getGroupingOptions function has dependency on column to form dateFunc object\n const prevColumns = usePrevious(columns);\n useEffect(() => {\n if (!columns \|\| !prevColumns) return;\n if (columns.length !== prevColumns.length) {\n setGroupingOptions(getGroupingOptions(appliedGroups, columns, dateFunctions));\n }\n }, [columns]);\n\n const onSubmit = useCallback(() => {\n const groupsToSet = appliedGroups\n .filter(e => e.columnId)\n .map((group, index) => {\n const { id, ...rest } = group;\n return { ...rest, level: index };\n });\n applyGrouping(groupsToSet);\n }, [applyGrouping, setGroups, appliedGroups]);\n\n const onCancel = useCallback(() => {\n setGroups(convertGroupsToAppliedGroups(groups));\n }, [groups, setGroups]);\n\n /\n The usePrevious hook is used in conjunction with the effect below...\n * ...to determine if the groups prop has in essence changed in value as it is always referentially different [] === [] // false.\n * This workaround is necessary to render proper state within the group popover content.\n * The conditional logic avoids many excessive renders.\n * The overall hook/grouping implementation may be able to be modified to avoid this.\n */\n const prevGroups = usePrevious(groups);\n useEffect(() => {\n if (!view.columns) return;\n if (!groups \|\| !prevGroups \|\| !deepEqual(groups, prevGroups)) {\n setGroups(convertGroupsToAppliedGroups(groups));\n return;\n }\n\n // This is obviously not extensive comparison but may be effective enough for the group object type. Enhance as needed.\n const groupsChanged =\n groups.length !== prevGroups.length \|\|\n groups.some(\n (group, i) =>\n group.columnId !== prevGroups[i].columnId \|\|\n group.order !== prevGroups[i].order \|\|\n !deepEqual(group.dateFunction, prevGroups[i].dateFunction) \|\|\n !deepEqual(group.customFunction, prevGroups[i].customFunction)\n );\n\n if (groupsChanged) {\n setGroups(convertGroupsToAppliedGroups(groups));\n }\n }, [groups, prevGroups, setGroups, view.columns]);\n\n if (!grouping \|\| view.hierarchicalGroupEnabled \|\| !displayGrouping) return;\n\n return {\n count: groups.length > 0 ? groups.length : undefined,\n renderer: GroupRenderer,\n rendererProps: { appliedGroups, columns, dateFunctions, groupingOptions, setGroups },\n onSubmit,\n onCancel\n };\n};\n\nexport default useGroup;\n"]}
1	+ {"version":3,"file":"useGroup.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/useGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';\nimport { createUID, type ListToolbarProps, usePrevious } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport { TOOLBAR_FEATURES } from '../../../../constants';\nimport { deepEqual } from '../../../../Utils';\n\nimport { getGroupingOptions } from './utils';\nimport GroupRenderer from './GroupRenderer';\n\nexport interface AppliedGroup extends Group {\n id: string;\n}\n\nconst convertGroupsToAppliedGroups = (groups: Group[]) =>\n groups.map(group => ({ ...group, id: createUID() }));\n\nconst useGroup = ({ view }: { view: RsCoreTypes.View }): ListToolbarProps['group'] => {\n const {\n state: { groups = [] } = {},\n meta: { grouping, dateFunctions, template },\n type: { applyGrouping },\n columns = []\n } = view;\n\n const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);\n const [appliedGroups, setAppliedGroups] = useState<AppliedGroup[]>([]);\n const [groupingOptions, setGroupingOptions] = useState(() =>\n getGroupingOptions(groups, columns, dateFunctions)\n );\n\n const setGroups = useCallback(\n (newGroups: AppliedGroup[]) => {\n setAppliedGroups(newGroups);\n setGroupingOptions(getGroupingOptions(newGroups, columns, dateFunctions));\n },\n [columns, dateFunctions]\n );\n\n // BUG-758989 This useEffect should run only once when the columns are populated on view\n // as getGroupingOptions function has dependency on column to form dateFunc object\n const prevColumns = usePrevious(columns);\n useEffect(() => {\n if (!columns \|\| !prevColumns) return;\n if (columns.length !== prevColumns.length) {\n setGroupingOptions(getGroupingOptions(appliedGroups, columns, dateFunctions));\n }\n }, [columns]);\n\n const onSubmit = useCallback(() => {\n const groupsToSet = appliedGroups\n .filter(e => e.columnId)\n .map((group, index) => {\n const { id, ...rest } = group;\n return { ...rest, level: index };\n });\n applyGrouping(groupsToSet);\n }, [applyGrouping, setGroups, appliedGroups]);\n\n const onCancel = useCallback(() => {\n setGroups(convertGroupsToAppliedGroups(groups));\n }, [groups, setGroups]);\n\n /\n The usePrevious hook is used in conjunction with the effect below...\n * ...to determine if the groups prop has in essence changed in value as it is always referentially different [] === [] // false.\n * This workaround is necessary to render proper state within the group popover content.\n * The conditional logic avoids many excessive renders.\n * The overall hook/grouping implementation may be able to be modified to avoid this.\n */\n const prevGroups = usePrevious(groups);\n useEffect(() => {\n if (!view.columns) return;\n if (!groups \|\| !prevGroups \|\| !deepEqual(groups, prevGroups)) {\n setGroups(convertGroupsToAppliedGroups(groups));\n return;\n }\n\n // This is obviously not extensive comparison but may be effective enough for the group object type. Enhance as needed.\n const groupsChanged =\n groups.length !== prevGroups.length \|\|\n groups.some(\n (group, i) =>\n group.columnId !== prevGroups[i].columnId \|\|\n group.order !== prevGroups[i].order \|\|\n !deepEqual(group.dateFunction, prevGroups[i].dateFunction) \|\|\n !deepEqual(group.customFunction, prevGroups[i].customFunction)\n );\n\n if (groupsChanged) {\n setGroups(convertGroupsToAppliedGroups(groups));\n }\n }, [groups, prevGroups, setGroups, view.columns]);\n\n if (\n !grouping \|\|\n (view.hierarchicalGroupEnabled && template !== REPEATING_STRUCTURE_TEMPLATES.TIMELINE) \|\|\n !displayGrouping\n )\n return;\n\n return {\n count: groups.length > 0 ? groups.length : undefined,\n renderer: GroupRenderer,\n rendererProps: { appliedGroups, columns, dateFunctions, groupingOptions, setGroups, template },\n onSubmit,\n onCancel\n };\n};\n\nexport default useGroup;\n"]}

package/lib/Core/Components/Toolbar/hooks/useGroup/utils.d.ts CHANGED Viewed

@@ -1,11 +1,16 @@
-import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import { type RsCoreTypes } from 'pega-repeating-structures-core';
 import type { Group } from 'pega-repeating-structures-core/types/State.types';
 import type { GroupingOptions } from '../../Grouping.types';
+/**
+ * Finds the matching column for the given id.
+ * Returns `undefined` if no match found
+ */
+export declare function getColumnById(id: string, columns: RsCoreTypes.Column[]): import("pega-repeating-structures-core/lib/src/core/generators/ColumnGenerator").default | undefined;
 /**
  * Finds the matching column for the given columnId and returns its field type.
  * Returns `undefined` if no match found
  */
-export declare function getFieldType(columnId: Group['columnId'], columns: RsCoreTypes.Column[]): "number" | "boolean" | "text" | "time" | "action" | "date" | "currency" | "datetime" | "custom" | "URL" | "Date" | "Date only" | undefined;
+export declare function getFieldType(columnId: string, columns: RsCoreTypes.Column[]): "number" | "boolean" | "object" | "text" | "time" | "action" | "date" | "custom" | "currency" | "datetime" | "URL" | "Date" | "Date only" | undefined;
 /** Returns metadata to identify which fields and which date functions are/aren't available for selection */
 export declare function getGroupingOptions(groups: Group[], columns: RsCoreTypes.Column[], dateFunctions: RsCoreTypes.Meta['dateFunctions']): GroupingOptions;
 //# sourceMappingURL=utils.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useGroup/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,~~EAAE,~~WAAW,EAAE,MAAM,gCAAgC,CAAC;~~AAClE~~,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAE9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D;;;GAGG;AACH,wBAAgB,~~YAAY~~,CAAC,~~QAAQ~~,EAAE,~~KAAK~~,CAAC,~~UAAU~~,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,~~8IAEtF~~;AAED,4GAA4G;AAC5G,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,KAAK,EAAE,EACf,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,EAC7B,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,GAC/C,eAAe,CA2DjB"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAE9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,wGAEtE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,yJAE3E;AAED,4GAA4G;AAC5G,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,KAAK,EAAE,EACf,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,EAC7B,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,GAC/C,eAAe,CA2DjB"}

package/lib/Core/Components/Toolbar/hooks/useGroup/utils.js CHANGED Viewed

@@ -1,9 +1,17 @@
+import { FieldType } from 'pega-repeating-structures-core';
+/**
+ * Finds the matching column for the given id.
+ * Returns `undefined` if no match found
+ */
+export function getColumnById(id, columns) {
+    return columns.find(c => c.field.id === id);
+}
 /**
  * Finds the matching column for the given columnId and returns its field type.
  * Returns `undefined` if no match found
  */
 export function getFieldType(columnId, columns) {
-    return columns.find(c => c.field.id.toString() === columnId.toString())?.field.type;
+    return getColumnById(columnId, columns)?.field.type;
 }
 /** Returns metadata to identify which fields and which date functions are/aren't available for selection */
 export function getGroupingOptions(groups, columns, dateFunctions) {
@@ -25,7 +33,7 @@ export function getGroupingOptions(groups, columns, dateFunctions) {
             return; // Ignore empty groups
         const fieldType = getFieldType(columnId, columns);
         // If date functions are enabled, and it's a date/datetime field, track the functions used
-        if (dateFunctions && (fieldType === 'date' || fieldType === 'datetime')) {
+        if (dateFunctions && (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {
             groupingOptions.dateFuncs[columnId] = groupingOptions.dateFuncs[columnId] || {
                 exhausted: [],
                 available: []
@@ -48,7 +56,7 @@ export function getGroupingOptions(groups, columns, dateFunctions) {
         // For each date/datetime field, set up which variants are yet to be used. Also determine if all the variants are exhausted
         Object.entries(groupingOptions.dateFuncs).forEach(([columnId, obj]) => {
             const fieldType = getFieldType(columnId, columns);
-            if (fieldType === 'date' || fieldType === 'datetime') {
+            if (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME) {
                 obj.available = groupingOptions.dateGroupVariants[fieldType].filter(v => !obj.exhausted.includes(v));
             }
             if (obj.available.length === 0) {