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

@pega/lists-react 9.0.0-build.9.9 → 9.0.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 (433) hide show

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

@@ -11,7 +11,7 @@ const fieldsConfiguration = [
     { field: debugInfoFields.timeTaken, defaultLabel: 'Time taken' },
     { field: debugInfoFields.insightId, defaultLabel: 'Insight ID', hideIfNotAvailable: true }
 ];
-function DebugInfo({ view, targetRef, onClose }) {
+function DebugInfo({ view, target, onClose }) {
     const [translate] = useTranslate();
     const debugInfoList = view.debugInfo.length === 0 ? [{}] : view.debugInfo;
     const headingRef = useRef(null);
@@ -30,11 +30,11 @@ function DebugInfo({ view, targetRef, onClose }) {
         });
         return result;
     }, []));
-    return (_jsx(InfoDialog, { target: targetRef.current, heading: translate('Query info'), onDismiss: onClose, children: formattedData.map((debugInfoEntry, index) => (_jsx(FieldValueList, { className: 'debug-record', variant: 'inline', fields: debugInfoEntry }, index))) }));
+    return (_jsx(InfoDialog, { target: target, heading: translate('Query info'), onDismiss: onClose, children: formattedData.map((debugInfoEntry, index) => (_jsx(FieldValueList, { className: 'debug-record', variant: 'inline', fields: debugInfoEntry }, index))) }));
 }
 DebugInfo.propTypes = {
     view: PropTypes.objectOf(PropTypes.any).isRequired,
-    targetRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+    target: PropTypes.instanceOf(Element),
     onClose: PropTypes.func
 };
 export default memo(DebugInfo);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DebugInfo.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,mBAAmB,GAAG;IAC1B,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE;IAC9D,EAAE,KAAK,EAAE,eAAe,CAAC,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE;IAClE,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE;IAChE,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,IAAI,EAAE;CAC3F,CAAC;AAEF,SAAS,SAAS,CAAC,EAAE,IAAI,EAAE,~~SAAS~~,EAAE,OAAO,EAAE;~~IAC7C~~,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO;YAAE,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACrD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CACvD,mBAAmB,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,EAAE,EAAE;QACjF,IAAI,kBAAkB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACjD,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,MAAM,CAAC,IAAI,CAAC;YACV,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC;YAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,iBAAc,SAAS,KAAK,EAAE,YAC7C,cAAc,CAAC,KAAK,CAAC,GACjB,CACR,CAAC,CAAC,CAAC,SAAS;SACd,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,IAAC,MAAM,EAAE,~~SAAS~~,~~CAAC,OAAO,~~EAAE,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,~~YACxF~~,aAAa,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,cAAc,IACb,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,QAAQ,EAGhB,MAAM,EAAE,cAAc,IADjB,KAAK,CAEV,CACH,CAAC,GACS,CACd,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,SAAS,GAAG;IACpB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,~~SAAS~~,EAAE,SAAS,CAAC,~~KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,~~UAAU,CAAC,OAAO,CAAC~~,EAAE,CAAC,CAAC,UAAU~~;~~IACjF~~,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC;AAEF,eAAe,IAAI,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { memo, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FieldValueList, Text, InfoDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport { debugInfoFields } from '../../constants';\n\nconst fieldsConfiguration = [\n { field: debugInfoFields.className, defaultLabel: 'Class' },\n { field: debugInfoFields.dataPage, defaultLabel: 'Data page' },\n { field: debugInfoFields.dataSource, defaultLabel: 'Data source' },\n { field: debugInfoFields.timeTaken, defaultLabel: 'Time taken' },\n { field: debugInfoFields.insightId, defaultLabel: 'Insight ID', hideIfNotAvailable: true }\n];\n\nfunction DebugInfo({ view, ~~targetRef~~, onClose }) {\n const [translate] = useTranslate();\n const debugInfoList = view.debugInfo.length === 0 ? [{}] : view.debugInfo;\n const headingRef = useRef(null);\n\n useEffect(() => {\n if (headingRef.current) headingRef.current.focus();\n }, []);\n\n const formattedData = debugInfoList.map(debugInfoEntry =>\n fieldsConfiguration.reduce((result, { field, defaultLabel, hideIfNotAvailable }) => {\n if (hideIfNotAvailable && !debugInfoEntry[field]) {\n return result;\n }\n result.push({\n id: field,\n name: translate(defaultLabel),\n value: debugInfoEntry[field] ? (\n <Text variant='h5' data-testid={`field-${field}`}>\n {debugInfoEntry[field]}\n </Text>\n ) : undefined\n });\n return result;\n }, [])\n );\n\n return (\n <InfoDialog target={~~targetRef.current~~} heading={translate('Query info')} onDismiss={onClose}>\n {formattedData.map((debugInfoEntry, index) => (\n <FieldValueList\n className='debug-record'\n variant='inline'\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n fields={debugInfoEntry}\n />\n ))}\n </InfoDialog>\n );\n}\n\nDebugInfo.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n ~~targetRef~~: PropTypes.~~shape({ current: PropTypes.~~instanceOf(Element) ~~}).isRequired~~,\n onClose: PropTypes.func\n};\n\nexport default memo(DebugInfo);\n"]}
1	+ {"version":3,"file":"DebugInfo.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,mBAAmB,GAAG;IAC1B,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE;IAC9D,EAAE,KAAK,EAAE,eAAe,CAAC,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE;IAClE,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE;IAChE,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,IAAI,EAAE;CAC3F,CAAC;AAEF,SAAS,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE;IAC1C,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO;YAAE,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACrD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CACvD,mBAAmB,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,EAAE,EAAE;QACjF,IAAI,kBAAkB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACjD,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,MAAM,CAAC,IAAI,CAAC;YACV,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC;YAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,iBAAc,SAAS,KAAK,EAAE,YAC7C,cAAc,CAAC,KAAK,CAAC,GACjB,CACR,CAAC,CAAC,CAAC,SAAS;SACd,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,YAC7E,aAAa,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,cAAc,IACb,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,QAAQ,EAGhB,MAAM,EAAE,cAAc,IADjB,KAAK,CAEV,CACH,CAAC,GACS,CACd,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,SAAS,GAAG;IACpB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC;IACrC,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC;AAEF,eAAe,IAAI,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { memo, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FieldValueList, Text, InfoDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport { debugInfoFields } from '../../constants';\n\nconst fieldsConfiguration = [\n { field: debugInfoFields.className, defaultLabel: 'Class' },\n { field: debugInfoFields.dataPage, defaultLabel: 'Data page' },\n { field: debugInfoFields.dataSource, defaultLabel: 'Data source' },\n { field: debugInfoFields.timeTaken, defaultLabel: 'Time taken' },\n { field: debugInfoFields.insightId, defaultLabel: 'Insight ID', hideIfNotAvailable: true }\n];\n\nfunction DebugInfo({ view, target, onClose }) {\n const [translate] = useTranslate();\n const debugInfoList = view.debugInfo.length === 0 ? [{}] : view.debugInfo;\n const headingRef = useRef(null);\n\n useEffect(() => {\n if (headingRef.current) headingRef.current.focus();\n }, []);\n\n const formattedData = debugInfoList.map(debugInfoEntry =>\n fieldsConfiguration.reduce((result, { field, defaultLabel, hideIfNotAvailable }) => {\n if (hideIfNotAvailable && !debugInfoEntry[field]) {\n return result;\n }\n result.push({\n id: field,\n name: translate(defaultLabel),\n value: debugInfoEntry[field] ? (\n <Text variant='h5' data-testid={`field-${field}`}>\n {debugInfoEntry[field]}\n </Text>\n ) : undefined\n });\n return result;\n }, [])\n );\n\n return (\n <InfoDialog target={target} heading={translate('Query info')} onDismiss={onClose}>\n {formattedData.map((debugInfoEntry, index) => (\n <FieldValueList\n className='debug-record'\n variant='inline'\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n fields={debugInfoEntry}\n />\n ))}\n </InfoDialog>\n );\n}\n\nDebugInfo.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n target: PropTypes.instanceOf(Element),\n onClose: PropTypes.func\n};\n\nexport default memo(DebugInfo);\n"]}

package/lib/Core/Components/Toolbar/FieldSelector.d.ts CHANGED Viewed

@@ -3,12 +3,13 @@ declare function FieldSelector(props: any): import("react/jsx-runtime").JSX.Elem
 declare namespace FieldSelector {
     namespace propTypes {
         let value: PropTypes.Requireable<string>;
-        let columns: PropTypes.Validator<any[]>;
         let onChange: PropTypes.Validator<(...args: any[]) => any>;
         let disabled: PropTypes.Requireable<boolean>;
+        let readOnly: PropTypes.Requireable<boolean>;
         let fieldProp: PropTypes.Requireable<string>;
         let label: PropTypes.Validator<string>;
         let labelHidden: PropTypes.Requireable<boolean>;
+        let fieldDefs: PropTypes.Validator<(object | null | undefined)[]>;
     }
 }
 import PropTypes from 'prop-types';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/FieldSelector.jsx"],"names":[],"mappings":";AASA,~~oFAuDC;;;;;;;;;;;;sBA/DqB~~,YAAY"}
1	+ {"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/FieldSelector.jsx"],"names":[],"mappings":";AASA,oFAwEC;;;;;;;;;;;;;sBAhFqB,YAAY"}

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

@@ -5,9 +5,9 @@ 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, disabled = false, readOnly, fieldProp, label, labelHidden, fieldDefs } = props;
     const [translate] = useTranslate();
-    const items = useMemo(() => getMenuItemsFromColumns(columns, fieldProp, value), [columns, value, fieldProp]);
+    const items = useMemo(() => getMenuItemsFromColumns(fieldDefs, fieldProp, { selectedField: value }), [fieldDefs, value, fieldProp]);
     const selected = useMemo(() => {
         const selectedItem = menuHelpers.getItem(items, value);
         return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;
@@ -25,9 +25,15 @@ 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 => {
-            setFilterValue(ev.target.value);
-        }, selected: { items: selected }, menu: {
+    return (_jsx(ComboBox, { label: label, labelHidden: labelHidden, disabled: disabled, readOnly: readOnly, placeholder: translate('Select field'), mode: 'single-select', value: filterValue ?? '', testId: 'FieldSelector', onChange: ev => {
+            const newValue = ev.target.value;
+            if (!newValue) {
+                onChange('');
+            }
+            setFilterValue(newValue);
+        }, onBlur: () => {
+            setFilterValue(undefined);
+        }, selected: selected ? { items: selected } : undefined, menu: {
             items: filteredItems,
             mode: 'single-select',
             accent: filterRegex,
@@ -42,12 +48,13 @@ function FieldSelector(props) {
 }
 FieldSelector.propTypes = {
     value: PropTypes.string,
-    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
+    labelHidden: PropTypes.bool,
+    fieldDefs: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 export default FieldSelector;
 //# sourceMappingURL=FieldSelector.js.map

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 disabled = false,\n readOnly,\n fieldProp,\n label,\n labelHidden,\n fieldDefs\n } = props;\n const [translate] = useTranslate();\n\n const items = useMemo(\n () => getMenuItemsFromColumns(fieldDefs, fieldProp, { selectedField: value }),\n [fieldDefs, 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 const newValue = ev.target.value;\n if (!newValue) {\n onChange('');\n }\n setFilterValue(newValue);\n }}\n onBlur={() => {\n setFilterValue(undefined);\n }}\n selected={selected ? { items: selected } : undefined}\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 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 fieldDefs: PropTypes.arrayOf(PropTypes.object).isRequired\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/RefreshBanner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RefreshBanner.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/RefreshBanner.jsx"],"names":[],"mappings":"~~AAkBA~~;;;4CA4BC;;;;;;;;;;~~sBA9CqB~~,YAAY"}
1	+ {"version":3,"file":"RefreshBanner.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/RefreshBanner.jsx"],"names":[],"mappings":"AAmBA;;;4CA4BC;;;;;;;;;;sBA/CqB,YAAY"}

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

@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components';
 import { Banner, defaultThemeProp } from '@pega/cosmos-react-core';
 const StyledBanner = styled(Banner)(({ theme }) => {
     return css `
+    flex-shrink: 0;
     margin-bottom: calc(${theme.base.spacing} * 2);
     margin-top: calc(${theme.base.spacing} * 2);
     ul {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RefreshBanner.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/RefreshBanner.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA~~;0BACc~~,KAAK,CAAC,IAAI,CAAC,OAAO;uBACrB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;GAItC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE;IACzE,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,IAAI,EAAE,CAAC;IACtF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,4BACG,UAAU,IAAI,CACb,KAAC,YAAY,IACX,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE;wBACN,IAAI,EAAE,kBAAkB;wBACxB,OAAO,EAAE,GAAG,EAAE;4BACZ,YAAY,EAAE,CAAC;wBACjB,CAAC;qBACF;iBACF;aACF,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,GACrC,CACH,GACA,CACJ,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,mBAAmB,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACjE,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACxC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useState, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Banner, defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n margin-bottom: calc(${theme.base.spacing} * 2);\n margin-top: calc(${theme.base.spacing} * 2);\n ul {\n margin-inline-end: unset;\n }\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport default function RefreshBanner({ refreshNotification, forceRefresh }) {\n const { id: notificationId, message, refreshActionLabel } = refreshNotification \|\| {};\n const [showBanner, setShowBanner] = useState(true);\n useEffect(() => {\n setShowBanner(true);\n }, [notificationId]);\n\n return (\n <>\n {showBanner && (\n <StyledBanner\n variant='info'\n messages={[\n {\n label: message,\n action: {\n text: refreshActionLabel,\n onClick: () => {\n forceRefresh();\n }\n }\n }\n ]}\n onDismiss={() => setShowBanner(false)}\n />\n )}\n </>\n );\n}\n\nRefreshBanner.propTypes = {\n refreshNotification: PropTypes.objectOf(PropTypes.any).isRequired,\n forceRefresh: PropTypes.func.isRequired\n};\n"]}
1	+ {"version":3,"file":"RefreshBanner.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/RefreshBanner.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;uBACrB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;GAItC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE;IACzE,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,IAAI,EAAE,CAAC;IACtF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,4BACG,UAAU,IAAI,CACb,KAAC,YAAY,IACX,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE;wBACN,IAAI,EAAE,kBAAkB;wBACxB,OAAO,EAAE,GAAG,EAAE;4BACZ,YAAY,EAAE,CAAC;wBACjB,CAAC;qBACF;iBACF;aACF,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,GACrC,CACH,GACA,CACJ,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,mBAAmB,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACjE,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACxC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useState, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Banner, defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n flex-shrink: 0;\n margin-bottom: calc(${theme.base.spacing} * 2);\n margin-top: calc(${theme.base.spacing} * 2);\n ul {\n margin-inline-end: unset;\n }\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport default function RefreshBanner({ refreshNotification, forceRefresh }) {\n const { id: notificationId, message, refreshActionLabel } = refreshNotification \|\| {};\n const [showBanner, setShowBanner] = useState(true);\n useEffect(() => {\n setShowBanner(true);\n }, [notificationId]);\n\n return (\n <>\n {showBanner && (\n <StyledBanner\n variant='info'\n messages={[\n {\n label: message,\n action: {\n text: refreshActionLabel,\n onClick: () => {\n forceRefresh();\n }\n }\n }\n ]}\n onDismiss={() => setShowBanner(false)}\n />\n )}\n </>\n );\n}\n\nRefreshBanner.propTypes = {\n refreshNotification: PropTypes.objectOf(PropTypes.any).isRequired,\n forceRefresh: PropTypes.func.isRequired\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":"~~AAaA~~;;~~4CAoCC~~;;;;;;;;;~~sBAjDqB~~,YAAY"}
1	+ {"version":3,"file":"SimpleToolbar.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/SimpleToolbar.jsx"],"names":[],"mappings":"AAWA;;4CAgCC;;;;;;;;;sBA3CqB,YAAY"}

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

@@ -1,22 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { ListToolbar } from '@pega/cosmos-react-core';
-import { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';
 import RefreshBanner from './RefreshBanner';
 import getCount from './utils/getCount';
 import AnnounceRowsCount from './AnnounceRowsCount';
 import ValidateMessage from './ValidateMessage';
 import useFormControlProps from './hooks/useFormControlProps';
 import useWrapAction from './hooks/useWrapAction';
-import KeyboardInstructions from './KeyboardInstructions';
 export default function SimpleToolbar({ view }) {
-    const { meta: { title, template } = {}, state, getContext, showCount, refreshNotification, type: { forceRefresh } } = view;
+    const { meta: { title, showTitle } = {}, state, getContext, showCount, refreshNotification, type: { forceRefresh } } = view;
     const { getRequiredDef } = getContext();
     const { validatemessage } = getRequiredDef() || {};
     const count = showCount ? getCount({ view }) : undefined;
     const formControlProps = useFormControlProps(view);
     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, keyboardInstructions: template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? (_jsx(KeyboardInstructions, { template: template })) : undefined }) }), refreshNotification && (_jsx(RefreshBanner, { refreshNotification: refreshNotification, forceRefresh: forceRefresh }))] }));
+    return (_jsxs(AnnounceRowsCount, { state: state, count: count, children: [_jsx(ValidateMessage, { message: validatemessage, children: _jsx(ListToolbar, { name: title, showName: showTitle, count: count, formControlProps: formControlProps, wrap: 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,aAAa,MAAM,uBAAuB,CAAC;~~AAClD~~,~~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,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,~~EACpE~~,~~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 useWrapAction from './hooks/useWrapAction';\~~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 }) : 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 ~~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;AAEtD,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,SAAS,EAAE,GAAG,EAAE,EAC/B,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,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,UAAU,GAChB,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';\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, showTitle } = {},\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 showName={showTitle}\n count={count}\n formControlProps={formControlProps}\n wrap={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/useFilter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFilter.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFilter.jsx"],"names":[],"mappings":";AAQA;;;;;;;~~cAoDC~~"}
1	+ {"version":3,"file":"useFilter.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFilter.jsx"],"names":[],"mappings":";AAQA;;;;;;;cAyDC"}

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

@@ -7,7 +7,10 @@ import { TOOLBAR_FEATURES } from '../../../constants';
 const useFilter = ({ view }) => {
     const { state: { filterExpression, clearColFilter } = {}, type: { clearFilter, applyFilter } } = view;
     const displayFilter = view.shouldDisplayFeature(TOOLBAR_FEATURES.FILTER);
-    const formattedColumns = useMemo(() => getMenuItemsFromColumns(view.columns?.filter(c => c.field.filter), 'name'), [view.columns]);
+    const viewFieldDefs = view.getFieldDefs();
+    const formattedColumns = useMemo(() => getMenuItemsFromColumns(viewFieldDefs?.filter(c => c.filter), 'name', {
+        columns: view.columns
+    }), [viewFieldDefs, view.columns]);
     const validRhsTypes = useValidRhsTypes(view);
     const handle = useRef(null);
     const { conditions } = splitConditionTree(filterExpression);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useFilter.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFilter.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE5F,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,uBAAuB,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,MAAM,EACJ,KAAK,EAAE,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,EAAE,EAChD,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,EACnC,GAAG,IAAI,CAAC;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACzE,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACH,uBAAuB,CACrB,~~IAAI~~,~~CAAC,OAAO,~~EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,~~KAAK~~,CAAC,MAAM,CAAC,~~EACzC~~,~~MAAM~~,~~CACP,~~EACH,CAAC,IAAI,CAAC,OAAO,CAAC,~~CACf~~,CAAC;~~IACF~~,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IAE9C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,MAAM,EAAE,OAAO;YAAE,OAAO,IAAI,CAAC;QAElC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;QAC5D,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QAEzB,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC;QACzC,IAAI,cAAc;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,cAAc;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAClC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,OAAO,CACL,KAAC,gBAAgB,IACf,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAE,gBAAgB,IAAI,SAAS,EACxC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,EACtC,WAAW,QACX,MAAM,EAAE,MAAM,GACd,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,aAAa;QAAE,OAAO;IAC3B,OAAO;QACL,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACvD,QAAQ,EAAE,cAAc;QACxB,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useCallback, useRef, useMemo } from 'react';\n\nimport { ConditionBuilder, splitConditionTree } from '@pega/cosmos-react-condition-builder';\n\nimport useValidRhsTypes from '../../Filters/Hooks/useValidRhsTypes';\nimport getMenuItemsFromColumns from '../utils/utils';\nimport { TOOLBAR_FEATURES } from '../../../constants';\n\nconst useFilter = ({ view }) => {\n const {\n state: { filterExpression, clearColFilter } = {},\n type: { clearFilter, applyFilter }\n } = view;\n const displayFilter = view.shouldDisplayFeature(TOOLBAR_FEATURES.FILTER);\n const formattedColumns = useMemo(\n () =>\n getMenuItemsFromColumns(\n ~~view.columns~~?.filter(c => c.~~field.~~filter),\n 'name'\n ),\n [view.columns]\n );\n const validRhsTypes = useValidRhsTypes(view);\n const handle = useRef(null);\n const { conditions } = splitConditionTree(filterExpression);\n const filters = Object.keys(conditions) \|\| [];\n\n const onSubmit = useCallback(() => {\n if (!handle?.current) return true;\n\n const [valid, newCondition] = handle.current.getCondition();\n if (!valid) return false;\n\n applyFilter({ filterExp: newCondition });\n if (clearColFilter) clearFilter(null);\n return true;\n }, [applyFilter, clearFilter, clearColFilter]);\n\n const onCancel = useCallback(() => {\n if (clearColFilter) clearFilter(null);\n }, [clearColFilter, clearFilter]);\n const filterRenderer = useCallback(() => {\n return (\n <ConditionBuilder\n fields={formattedColumns}\n condition={filterExpression \|\| undefined}\n validRhsTypes={validRhsTypes}\n dateFunctions={view.meta.dateFunctions} // Could be undefined\n disallowNOT\n handle={handle}\n />\n );\n }, [filterExpression, formattedColumns, validRhsTypes, view.meta.dateFunctions]);\n if (!displayFilter) return;\n return {\n count: filters?.length > 0 ? filters.length : undefined,\n renderer: filterRenderer,\n onCancel,\n onSubmit\n };\n};\n\nexport default useFilter;\n"]}
1	+ {"version":3,"file":"useFilter.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFilter.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useMemo } from 'react';\n\nimport { ConditionBuilder, splitConditionTree } from '@pega/cosmos-react-condition-builder';\n\nimport useValidRhsTypes from '../../Filters/Hooks/useValidRhsTypes';\nimport getMenuItemsFromColumns from '../utils/utils';\nimport { TOOLBAR_FEATURES } from '../../../constants';\n\nconst useFilter = ({ view }) => {\n const {\n state: { filterExpression, clearColFilter } = {},\n type: { clearFilter, applyFilter }\n } = view;\n const displayFilter = view.shouldDisplayFeature(TOOLBAR_FEATURES.FILTER);\n const viewFieldDefs = view.getFieldDefs();\n const formattedColumns = useMemo(\n () =>\n getMenuItemsFromColumns(\n viewFieldDefs?.filter(c => c.filter),\n 'name',\n {\n columns: view.columns\n }\n ),\n [viewFieldDefs, view.columns]\n );\n\n const validRhsTypes = useValidRhsTypes(view);\n const handle = useRef(null);\n const { conditions } = splitConditionTree(filterExpression);\n const filters = Object.keys(conditions) \|\| [];\n\n const onSubmit = useCallback(() => {\n if (!handle?.current) return true;\n\n const [valid, newCondition] = handle.current.getCondition();\n if (!valid) return false;\n\n applyFilter({ filterExp: newCondition });\n if (clearColFilter) clearFilter(null);\n return true;\n }, [applyFilter, clearFilter, clearColFilter]);\n\n const onCancel = useCallback(() => {\n if (clearColFilter) clearFilter(null);\n }, [clearColFilter, clearFilter]);\n const filterRenderer = useCallback(() => {\n return (\n <ConditionBuilder\n fields={formattedColumns}\n condition={filterExpression \|\| undefined}\n validRhsTypes={validRhsTypes}\n dateFunctions={view.meta.dateFunctions} // Could be undefined\n disallowNOT\n handle={handle}\n />\n );\n }, [filterExpression, formattedColumns, validRhsTypes, view.meta.dateFunctions]);\n if (!displayFilter) return;\n return {\n count: filters?.length > 0 ? filters.length : undefined,\n renderer: filterRenderer,\n onCancel,\n onSubmit\n };\n};\n\nexport default useFilter;\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'];
+    fieldDefs: RsCoreTypes.Meta['fieldDefs'];
+    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, fieldDefs, 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,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACpD;AAED,uEAAuE;AACvE,QAAA,MAAM,oBAAoB,GAAI,0EAO3B,yBAAyB,mDAmE3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -1,26 +1,24 @@
 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, FieldType } 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, fieldDefs, onChange }) => {
     const [translate] = useTranslate();
-    const fieldType = getFieldType(group.columnId, columns);
+    const fieldType = getFieldType(group.columnId, fieldDefs);
     /**
      * 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 || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {
+        if (!dateFunctions || !(fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {
             return [];
         }
         return [
@@ -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: translate(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~~,SAAS,~~EAAE~~,MAAM,gCAAgC,CAAC;~~AAE/E~~,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,SAAS,CAAC,IAAI,~~EAAE~~,SAAS,~~CAAC~~,SAAS,CAAC,~~CAAC,QAAQ,CAAC,~~SAAS,CAAC,EAAE,CAAC;~~YACjF~~,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO;YACL,qDAAqD;YACrD,GAAG,aAAa,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBACnF,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,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IADR,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, FieldType } 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 \|\| ![FieldType.DATE, FieldType.DATE_TIME~~].includes(fieldType~~)) {\n return [];\n }\n\n return [\n // Date functions applicable for the given field type\n ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n key: f,\n dateFunction: f,\n label: translate(dateFunctionLabels[f])\n })),\n\n // Option for grouping directly by the field values\n // The key 'NONE' is needed to work with the Select component\n { key: 'NONE', dateFunction: undefined, label: 'Default' }\n ];\n }, [dateFunctions, fieldType, translate]);\n\n // 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 {translate(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 fieldDefs: RsCoreTypes.Meta['fieldDefs'];\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 fieldDefs,\n onChange\n}: DateFunctionSelectorProps) => {\n const [translate] = useTranslate();\n const fieldType = getFieldType(group.columnId, fieldDefs);\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

@@ -1,4 +1,4 @@
-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';
 import type { AppliedGroup } from './useGroup';
@@ -10,7 +10,9 @@ interface GroupRendererProps {
     })[]) => void;
     columns: RsCoreTypes.Column[];
     dateFunctions: RsCoreTypes.Meta['dateFunctions'];
+    template: RsCoreTypes.Meta['template'];
+    fieldDefs: RsCoreTypes.Meta['fieldDefs'];
 }
-declare const GroupRenderer: ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions }: GroupRendererProps) => import("react/jsx-runtime").JSX.Element;
+declare const GroupRenderer: ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions, template, fieldDefs }: 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,~~EAAa,~~KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;~~AAC7E~~,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;IACvC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,aAAa,GAAI,4FAQpB,kBAAkB,4CAuMpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -3,17 +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 } from 'pega-repeating-structures-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, fieldDefs }) => {
     const t = useI18n();
     const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();
     const dragDropRef = useRef(null);
@@ -47,13 +47,15 @@ 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);
+        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
@@ -86,26 +88,32 @@ const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dat
             addRow();
         }
     }, [appliedGroups, addRow]);
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { direction: 'column', gap: 1 }, className: 'group-content', ref: dragDropRef, children: appliedGroups.map((group, index) => (_createElement("div", { ...dropProps, "data-index": index, key: group.id },
-                    _jsxs(Flex, { container: {
-                            justify: 'between',
-                            alignItems: 'center',
-                            direction: 'row',
-                            wrap: 'nowrap',
-                            itemGap: 0.5
-                        }, ref: appliedGroups[index].id === focusRowId ? focusRowRef : null, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsxs(Flex, { container: {
-                                        justify: 'start',
-                                        alignItems: 'center',
-                                        direction: 'row',
-                                        wrap: 'nowrap',
-                                        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, { icon: true, variant: 'simple', onClick: () => removeGroup(index), label: t('delete_group'), children: _jsx(Icon, { name: 'trash' }) })] })))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { direction: 'column', gap: 1 }, className: 'group-content', ref: dragDropRef, children: appliedGroups.map((group, index) => {
+                    const fieldLabel = columns?.find(f => f.field.id === group.columnId)?.label;
+                    const dragHandleLabel = fieldLabel
+                        ? t('drag_to_reorder_field', [fieldLabel])
+                        : t('drag_to_reorder');
+                    return (_createElement("div", { ...dropProps, "data-index": index, key: group.id },
+                        _jsxs(Flex, { container: {
+                                justify: 'between',
+                                alignItems: 'center',
+                                direction: 'row',
+                                wrap: 'nowrap',
+                                itemGap: 0.5
+                            }, ref: appliedGroups[index].id === focusRowId ? focusRowRef : null, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsxs(Flex, { container: {
+                                            justify: 'start',
+                                            alignItems: 'center',
+                                            direction: 'row',
+                                            wrap: 'nowrap',
+                                            itemGap: 0.5
+                                        }, children: [_jsx(StyledDragHandle, { forwardedAs: 'div', role: 'button', icon: true, variant: 'simple', compact: true, "aria-label": dragHandleLabel, ...dragProps, children: _jsx(Icon, { name: 'drag' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { label: t('field'), labelHidden: true, value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id', fieldDefs: fieldDefs?.filter(fieldDef => fieldDef.grouping &&
+                                                        (fieldDef.id.toString() === group.columnId.toString() ||
+                                                            !groupingOptions.exhaustedFields.has(fieldDef.id))) }) }), _jsx(DateFunctionSelector, { template: template, group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, fieldDefs: fieldDefs, 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