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

@pega/lists-react 9.0.0-build.21.0 → 9.0.0-build.21.2

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 (61) hide show

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

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

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

@@ -27,9 +27,10 @@ export default function RepeatingStructureA11y({ children, a11yRef, view }) {
         a11yRef.current.boundaryElementsFocusHandler(e);
     }, [a11yRef]);
     const { state } = view;
+    const visibleColumns = view.getVisibleColumnIds();
     // For show/hide columns, we only use the 'modified' message because there is always at least one column present.
     // Any change—whether adding or removing a column is considered a modification for accessibility announcement.
-    useAnnounce(state.hiddenColumns, {
+    useAnnounce(visibleColumns, {
         modified: translate('Show/Hide modified')
     }, state.personalization?.active);
     useAnnounce(state.freezeColumns, {

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

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

package/lib/Core/Components/Filters/AdvanceFilter.js CHANGED Viewed

@@ -8,7 +8,7 @@ import useTranslate from '../../Hooks/useTranslate';
 import useValidRhsTypes from './Hooks/useValidRhsTypes';
 export default function AdvanceFilter({ setShowFilter, view, popoverButtonRef }) {
     const filterExpression = view.state?.filterExpression;
-    const formattedColumns = getMenuItemsFromColumns(view.columns?.filter(c => c.field.filter), 'name');
+    const formattedColumns = getMenuItemsFromColumns(view.getFieldDefs().filter(fieldDef => fieldDef.filter), 'name');
     const validRhsTypes = useValidRhsTypes(view);
     const handle = useRef(null);
     const [translate] = useTranslate();

package/lib/Core/Components/Filters/AdvanceFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AdvanceFilter.js","sourceRoot":"","sources":["../../../../Core/Components/Filters/AdvanceFilter.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,uBAAuB,MAAM,wBAAwB,CAAC;AAC7D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,gBAAgB,EAAE;IAC7E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACtD,MAAM,gBAAgB,GAAG,uBAAuB,CAC9C,IAAI,CAAC,~~OAAO~~,EAAE,MAAM,CAAC,~~CAAC~~,CAAC,EAAE,CAAC,~~CAAC~~,CAAC,~~KAAK,CAAC,~~MAAM,CAAC,~~EACzC~~,MAAM,CACP,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,sGAAsG;IACtG,0FAA0F;IAC1F,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IACT,OAAO,EAAE,SAAS,CAAC,eAAe,CAAC,EACnC,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAChC,SAAS,EAAC,cAAc,EACxB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;YACzD,IAAI,KAAK,EAAE,CAAC;gBACV,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,YAED,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,GACS,CACd,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACzC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef } from 'react';\n\nimport { ConditionBuilder } from '@pega/cosmos-react-condition-builder';\nimport { FormDialog } from '@pega/cosmos-react-core';\n\nimport getMenuItemsFromColumns from '../Toolbar/utils/utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport useValidRhsTypes from './Hooks/useValidRhsTypes';\n\nexport default function AdvanceFilter({ setShowFilter, view, popoverButtonRef }) {\n const filterExpression = view.state?.filterExpression;\n const formattedColumns = getMenuItemsFromColumns(\n view.~~columns?.~~filter(c => c.~~field.~~filter),\n 'name'\n );\n const validRhsTypes = useValidRhsTypes(view);\n const handle = useRef(null);\n\n const [translate] = useTranslate();\n // FIXME: popoverButtonRef should be converted to a state since refs should not be read during render.\n // https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state\n return popoverButtonRef.current ? (\n <FormDialog\n heading={translate('Filter column')}\n target={popoverButtonRef.current}\n placement='bottom-start'\n onCancel={() => {\n setShowFilter(false);\n }}\n onSubmit={() => {\n const [valid, filterExp] = handle.current.getCondition();\n if (valid) {\n setShowFilter(false);\n view.type.applyFilter({ filterExp });\n }\n }}\n >\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 </FormDialog>\n ) : null;\n}\n\nAdvanceFilter.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n setShowFilter: PropTypes.func.isRequired\n};\n"]}
1	+ {"version":3,"file":"AdvanceFilter.js","sourceRoot":"","sources":["../../../../Core/Components/Filters/AdvanceFilter.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,uBAAuB,MAAM,wBAAwB,CAAC;AAC7D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,gBAAgB,EAAE;IAC7E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACtD,MAAM,gBAAgB,GAAG,uBAAuB,CAC9C,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EACvD,MAAM,CACP,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,sGAAsG;IACtG,0FAA0F;IAC1F,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IACT,OAAO,EAAE,SAAS,CAAC,eAAe,CAAC,EACnC,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAChC,SAAS,EAAC,cAAc,EACxB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;YACzD,IAAI,KAAK,EAAE,CAAC;gBACV,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,YAED,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,GACS,CACd,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACzC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef } from 'react';\n\nimport { ConditionBuilder } from '@pega/cosmos-react-condition-builder';\nimport { FormDialog } from '@pega/cosmos-react-core';\n\nimport getMenuItemsFromColumns from '../Toolbar/utils/utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport useValidRhsTypes from './Hooks/useValidRhsTypes';\n\nexport default function AdvanceFilter({ setShowFilter, view, popoverButtonRef }) {\n const filterExpression = view.state?.filterExpression;\n const formattedColumns = getMenuItemsFromColumns(\n view.getFieldDefs().filter(fieldDef => fieldDef.filter),\n 'name'\n );\n const validRhsTypes = useValidRhsTypes(view);\n const handle = useRef(null);\n\n const [translate] = useTranslate();\n // FIXME: popoverButtonRef should be converted to a state since refs should not be read during render.\n // https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state\n return popoverButtonRef.current ? (\n <FormDialog\n heading={translate('Filter column')}\n target={popoverButtonRef.current}\n placement='bottom-start'\n onCancel={() => {\n setShowFilter(false);\n }}\n onSubmit={() => {\n const [valid, filterExp] = handle.current.getCondition();\n if (valid) {\n setShowFilter(false);\n view.type.applyFilter({ filterExp });\n }\n }}\n >\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 </FormDialog>\n ) : null;\n}\n\nAdvanceFilter.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n setShowFilter: PropTypes.func.isRequired\n};\n"]}

package/lib/Core/Components/Filters/SimpleFilter.js CHANGED Viewed

@@ -9,7 +9,7 @@ import useTranslate from '../../Hooks/useTranslate';
 import useValidRhsTypes from './Hooks/useValidRhsTypes';
 export default function SimpleFilter({ column, onFilter, finishPopOver, popoverButtonRef }) {
     const view = column.parent;
-    const formattedColumns = getMenuItemsFromColumns(view.columns?.filter(c => c.field.filter), 'name');
+    const formattedColumns = getMenuItemsFromColumns(view.getFieldDefs()?.filter(f => f.filter), 'name');
     const validRhsTypes = useValidRhsTypes(view);
     const [translate] = useTranslate();
     const [, , prevConditionOnColumn] = getFilterInitializers(column); // Any previous condition on this column

package/lib/Core/Components/Filters/SimpleFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleFilter.js","sourceRoot":"","sources":["../../../../Core/Components/Filters/SimpleFilter.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,uBAAuB,MAAM,wBAAwB,CAAC;AAC7D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE;IACxF,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3B,MAAM,gBAAgB,GAAG,uBAAuB,CAC9C,IAAI,CAAC,~~OAAO~~,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~MAAM,CAAC,~~EACzC~~,MAAM,CACP,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,CAAC,EAAE,AAAD,EAAG,qBAAqB,CAAC,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,wCAAwC;IAC3G,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,MAAM,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAEjC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;QAC3D,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAE3B,sCAAsC;QACtC,IAAI,SAAS,GAAG,EAAE,SAAS,EAAE,CAAC;QAE9B,iFAAiF;QACjF,MAAM,UAAU,GAAG,MAAM,EAAE,mBAAmB,EAAE,EAAE,gBAAgB,CAAC;QACnE,IAAI,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/E,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,CAAC;QAC/C,CAAC;QAED,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;QACxB,aAAa,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IACT,OAAO,EAAE,SAAS,CAAC,eAAe,CAAC,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,aAAa,EACvB,MAAM,EAAE,gBAAgB,CAAC,OAAO,YAEhC,KAAC,cAAc,IACb,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAC9B,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAE,qBAAqB,EAChC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,EACtC,MAAM,EAAE,MAAM,GACd,GACS,CACd,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,YAAY,CAAC,SAAS,GAAG;IACvB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACpD,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACxC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACpC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useRef } from 'react';\n\nimport { FormDialog } from '@pega/cosmos-react-core';\nimport { FieldCondition } from '@pega/cosmos-react-condition-builder';\nimport { getFilterInitializers } from 'pega-repeating-structures-core';\n\nimport getMenuItemsFromColumns from '../Toolbar/utils/utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport useValidRhsTypes from './Hooks/useValidRhsTypes';\n\nexport default function SimpleFilter({ column, onFilter, finishPopOver, popoverButtonRef }) {\n const view = column.parent;\n const formattedColumns = getMenuItemsFromColumns(\n view.~~columns~~?.filter(c => c.~~field.~~filter),\n 'name'\n );\n const validRhsTypes = useValidRhsTypes(view);\n const [translate] = useTranslate();\n const [, , prevConditionOnColumn] = getFilterInitializers(column); // Any previous condition on this column\n const handle = useRef(null);\n\n const onSubmit = useCallback(() => {\n if (!handle.current) return true;\n\n const [isValid, condition] = handle.current.getCondition();\n if (!isValid) return false;\n\n // Apply the new condition on the view\n let filterExp = { condition };\n\n // If there was a previous filter but not on this column, combine the two filters\n const prevFilter = column?.getFilterProperties()?.filterExpression;\n if (prevFilter && Object.keys(prevFilter).length > 0 && !prevConditionOnColumn) {\n filterExp = { AND: [prevFilter, filterExp] };\n }\n\n onFilter({ filterExp });\n finishPopOver();\n return true;\n }, [column, onFilter, prevConditionOnColumn]);\n\n return popoverButtonRef.current ? (\n <FormDialog\n heading={translate('Filter column')}\n onSubmit={onSubmit}\n onCancel={finishPopOver}\n target={popoverButtonRef.current}\n >\n <FieldCondition\n targetField={column.field.name}\n fields={formattedColumns}\n condition={prevConditionOnColumn}\n validRhsTypes={validRhsTypes}\n dateFunctions={view.meta.dateFunctions} // Could be undefined\n handle={handle}\n />\n </FormDialog>\n ) : null;\n}\n\nSimpleFilter.propTypes = {\n column: PropTypes.objectOf(PropTypes.any).isRequired,\n finishPopOver: PropTypes.func.isRequired,\n onFilter: PropTypes.func.isRequired\n};\n"]}
1	+ {"version":3,"file":"SimpleFilter.js","sourceRoot":"","sources":["../../../../Core/Components/Filters/SimpleFilter.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useRef } from 'react';\n\nimport { FormDialog } from '@pega/cosmos-react-core';\nimport { FieldCondition } from '@pega/cosmos-react-condition-builder';\nimport { getFilterInitializers } from 'pega-repeating-structures-core';\n\nimport getMenuItemsFromColumns from '../Toolbar/utils/utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport useValidRhsTypes from './Hooks/useValidRhsTypes';\n\nexport default function SimpleFilter({ column, onFilter, finishPopOver, popoverButtonRef }) {\n const view = column.parent;\n const formattedColumns = getMenuItemsFromColumns(\n view.getFieldDefs()?.filter(f => f.filter),\n 'name'\n );\n const validRhsTypes = useValidRhsTypes(view);\n const [translate] = useTranslate();\n const [, , prevConditionOnColumn] = getFilterInitializers(column); // Any previous condition on this column\n const handle = useRef(null);\n\n const onSubmit = useCallback(() => {\n if (!handle.current) return true;\n\n const [isValid, condition] = handle.current.getCondition();\n if (!isValid) return false;\n\n // Apply the new condition on the view\n let filterExp = { condition };\n\n // If there was a previous filter but not on this column, combine the two filters\n const prevFilter = column?.getFilterProperties()?.filterExpression;\n if (prevFilter && Object.keys(prevFilter).length > 0 && !prevConditionOnColumn) {\n filterExp = { AND: [prevFilter, filterExp] };\n }\n\n onFilter({ filterExp });\n finishPopOver();\n return true;\n }, [column, onFilter, prevConditionOnColumn]);\n\n return popoverButtonRef.current ? (\n <FormDialog\n heading={translate('Filter column')}\n onSubmit={onSubmit}\n onCancel={finishPopOver}\n target={popoverButtonRef.current}\n >\n <FieldCondition\n targetField={column.field.name}\n fields={formattedColumns}\n condition={prevConditionOnColumn}\n validRhsTypes={validRhsTypes}\n dateFunctions={view.meta.dateFunctions} // Could be undefined\n handle={handle}\n />\n </FormDialog>\n ) : null;\n}\n\nSimpleFilter.propTypes = {\n column: PropTypes.objectOf(PropTypes.any).isRequired,\n finishPopOver: PropTypes.func.isRequired,\n onFilter: PropTypes.func.isRequired\n};\n"]}

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

@@ -11,7 +11,7 @@ export function getIconByFieldType(type: string): JSX.Element;
  * @param {string} action - The action to perform, either 'Show/hide columns' or 'Freeze columns'.
  * @returns Arrays of columns nested by category
  */
-export function transformData(columns: any[], action: string): any[];
+export function transformData(fieldDefs: any, state: any, action: string): any[];
 export function ColumnSelectorControl(props: any): import("react/jsx-runtime").JSX.Element;
 export namespace ColumnSelectorControl {
     namespace propTypes {
@@ -26,16 +26,18 @@ export const pinning: "Freeze columns";
 declare const _default: import("react").MemoExoticComponent<typeof ColumnSelector>;
 export default _default;
 import PropTypes from 'prop-types';
-declare function ColumnSelector({ dispatch, columns, action, finishPopOver }: {
+declare function ColumnSelector({ dispatch, fieldDefs, state, action, finishPopOver }: {
     dispatch: any;
-    columns: any;
+    fieldDefs: any;
+    state: any;
     action: any;
     finishPopOver: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ColumnSelector {
     export namespace propTypes_1 {
         export let dispatch: PropTypes.Validator<(...args: any[]) => any>;
-        export let columns: PropTypes.Validator<(object | null | undefined)[]>;
+        export let fieldDefs: PropTypes.Validator<(object | null | undefined)[]>;
+        export let state: PropTypes.Validator<(object | null | undefined)[]>;
         let action_1: PropTypes.Validator<string>;
         export { action_1 as action };
         export let finishPopOver: PropTypes.Validator<(...args: any[]) => any>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnSelector.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/ColumnSelector.jsx"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,yCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAKvB;AAeD;;;;;GAKG;AACH,~~sDAHW~~,MAAM,~~SAgEhB~~;AA2BD,2FAwEC;;;;;;;;;~~AAjMD~~,6BAA8B,mBAAmB,CAAC;AAClD,sBAAuB,gBAAgB,CAAC;;;sBAjBlB,YAAY;~~AA0NlC;;;;;4CAqBC~~"}
1	+ {"version":3,"file":"ColumnSelector.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/ColumnSelector.jsx"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,yCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAKvB;AAeD;;;;;GAKG;AACH,kEAHW,MAAM,SAsDhB;AA2BD,2FAwEC;;;;;;;;;AAvLD,6BAA8B,mBAAmB,CAAC;AAClD,sBAAuB,gBAAgB,CAAC;;;sBAjBlB,YAAY;AAgNlC;;;;;;4CAwBC"}

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

@@ -3,7 +3,7 @@ import { memo, useCallback, useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Icon, SearchInput, Menu, menuHelpers, useElement, Flex, Button } from '@pega/cosmos-react-core';
-import { allowToggle, getFieldIcon } from '../../Utils';
+import { getFieldIcon } from '../../Utils';
 import useTranslate from '../../Hooks/useTranslate';
 export const colsVisibility = 'Show/hide columns';
 export const pinning = 'Freeze columns';
@@ -35,29 +35,25 @@ function getModifiedColumns(initialSelectedColumns, currentSelectedColumns) {
  * @param {string} action - The action to perform, either 'Show/hide columns' or 'Freeze columns'.
  * @returns Arrays of columns nested by category
  */
-export function transformData(columns, action) {
+export function transformData(fieldDefs, state, action) {
     const result = [];
-    if (!columns?.length)
+    if (!fieldDefs?.length)
         return result;
     const categoryObj = {};
-    const allowColumnToggle = allowToggle(columns[0].parent.getVisibleColumns());
-    columns
-        ?.filter(c => c.field.toggle)
-        .forEach(column => {
-        const { field: { id, category = [], type }, label, hidden, frozen } = column;
+    fieldDefs
+        ?.filter(c => c.toggle)
+        .forEach(field => {
+        const { id, category = [], type, label } = field;
+        const visible = state.visibleColumns?.includes(id);
+        const frozen = state.freezeColumns?.includes(id);
         const lastCategoryLabel = category.length ? category[category.length - 1].label : undefined;
-        let disabled;
-        if (action === colsVisibility) {
-            disabled = !allowColumnToggle && !hidden;
-        }
         if (categoryObj[lastCategoryLabel])
             categoryObj[lastCategoryLabel].items.push({
                 id,
                 primary: label,
                 label,
-                selected: action === colsVisibility ? !hidden : frozen,
+                selected: action === colsVisibility ? visible : frozen,
                 type,
-                disabled,
                 visual: getIconByFieldType(type)
             });
         else {
@@ -68,10 +64,9 @@ export function transformData(columns, action) {
                     {
                         id,
                         primary: label,
-                        selected: action === colsVisibility ? !hidden : frozen,
+                        selected: action === colsVisibility ? visible : frozen,
                         label,
                         type,
-                        disabled,
                         visual: getIconByFieldType(type)
                     }
                 ]
@@ -144,8 +139,8 @@ ColumnSelectorControl.propTypes = {
     onCancel: PropTypes.func.isRequired,
     action: PropTypes.string.isRequired
 };
-function ColumnSelector({ dispatch, columns, action, finishPopOver }) {
-    const transformed = useMemo(() => transformData(columns, action), [columns, action]);
+function ColumnSelector({ dispatch, fieldDefs, state, action, finishPopOver }) {
+    const transformed = useMemo(() => transformData(fieldDefs, state, action), [fieldDefs, state, action]);
     const onSubmitHandler = useCallback(changedCols => {
         if (changedCols.length > 0) {
             dispatch(changedCols);
@@ -156,7 +151,8 @@ function ColumnSelector({ dispatch, columns, action, finishPopOver }) {
 }
 ColumnSelector.propTypes = {
     dispatch: PropTypes.func.isRequired,
-    columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+    fieldDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
+    state: PropTypes.arrayOf(PropTypes.object).isRequired,
     action: PropTypes.string.isRequired,
     finishPopOver: PropTypes.func.isRequired
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnSelector.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/ColumnSelector.jsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useCallback, useEffect, useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport {\n Icon,\n SearchInput,\n Menu,\n menuHelpers,\n useElement,\n Flex,\n Button\n} from '@pega/cosmos-react-core';\n\nimport { allowToggle, getFieldIcon } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nexport const colsVisibility = 'Show/hide columns';\nexport const pinning = 'Freeze columns';\n\n/*\n Returns an Icon component based on the field type.\n \n @param {string} type - The type of the field for which the icon is required.\n * @returns {JSX.Element} - A React Icon component with the appropriate icon name.\n /\nexport function getIconByFieldType(type) {\n const iconName = getFieldIcon(type);\n return <Icon data-test-id={iconName} data-testid={iconName} name={iconName} />;\n}\n\n/\n Determines the list of changed column IDs.\n \n @param {Set<string>} initialSelectedColumns - The initial set of selected column IDs.\n * @param {Set<string>} currentSelectedColumns - The current set of selected column IDs.\n * @returns {string[]} - Array of modified column IDs.\n /\nfunction getModifiedColumns(initialSelectedColumns, currentSelectedColumns) {\n const addedColumns = [...currentSelectedColumns].filter(id => !initialSelectedColumns.has(id));\n const removedColumns = [...initialSelectedColumns].filter(id => !currentSelectedColumns.has(id));\n return [...addedColumns, ...removedColumns];\n}\n\n/\n Transforms the columns array into array of columns grouped by category\n * @param {Array} columns - The array of column objects to be transformed.\n * @param {string} action - The action to perform, either 'Show/hide columns' or 'Freeze columns'.\n * @returns Arrays of columns nested by category\n */\nexport function transformData(columns, action) {\n const result = [];\n if (!columns?.length) return result;\n\n const categoryObj = {};\n const allowColumnToggle = allowToggle(columns[0].parent.getVisibleColumns());\n\n columns\n ?.filter(c => c.field.toggle)\n .forEach(column => {\n const {\n field: { id, category = [], type },\n label,\n hidden,\n frozen\n } = column;\n const lastCategoryLabel = category.length ? category[category.length - 1].label : undefined;\n let disabled;\n if (action === colsVisibility) {\n disabled = !allowColumnToggle && !hidden;\n }\n if (categoryObj[lastCategoryLabel])\n categoryObj[lastCategoryLabel].items.push({\n id,\n primary: label,\n label,\n selected: action === colsVisibility ? !hidden : frozen,\n type,\n disabled,\n visual: getIconByFieldType(type)\n });\n else {\n categoryObj[lastCategoryLabel] = {\n id: `category:${lastCategoryLabel}`,\n primary: lastCategoryLabel,\n items: [\n {\n id,\n primary: label,\n selected: action === colsVisibility ? !hidden : frozen,\n label,\n type,\n disabled,\n visual: getIconByFieldType(type)\n }\n ]\n };\n }\n });\n // Items with no category attribute are set in the root of returned array\n if (categoryObj[undefined] && categoryObj[undefined].items) {\n result.push(...categoryObj[undefined].items);\n delete categoryObj[undefined];\n }\n const keys = Object.keys(categoryObj);\n // Items with category attribute are grouped inside the nested category object\n keys.forEach(key => {\n result.push(categoryObj[key]);\n });\n\n return result;\n}\n\nconst Footer = memo(({ onCancel, onSubmit, disabled }) => {\n const [translate] = useTranslate();\n return (\n <Flex container={{ justify: 'between' }}>\n <Button onClick={onCancel} data-testid='cancel'>\n {translate('Cancel')}\n </Button>\n <Button variant='primary' onClick={onSubmit} disabled={disabled} data-testid='submit'>\n {translate('Submit')}\n </Button>\n </Flex>\n );\n});\n\nFooter.displayName = 'Footer';\n\nFooter.propTypes = {\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n disabled: PropTypes.bool.isRequired\n};\n\nconst StyledMenu = styled(Menu)`\n width: 16rem;\n`;\nexport function ColumnSelectorControl(props) {\n const { data, onSubmit, onCancel, action } = props;\n\n const initialSelectedColumns = useMemo(\n () =>\n new Set(\n menuHelpers\n .flatten(data)\n .filter(item => item.selected)\n .map(item => item.id)\n ),\n [data]\n );\n\n const [searchText, setSearchText] = useState('');\n const [searchRef, setSearchRef] = useElement(null);\n const [items, setItems] = useState(data);\n const selectedColumns = useMemo(\n () => new Set(menuHelpers.getSelected(items).map(item => item.id)),\n [items]\n );\n\n useEffect(() => {\n if (searchRef) {\n searchRef.focus();\n }\n }, [searchRef]);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n searchText\n ? menuHelpers\n .flatten(items)\n .filter(({ primary }) => primary.toLowerCase().includes(searchText.toLowerCase()))\n : items,\n item => {\n return {\n ...item,\n visual: item.visual,\n selected: item.items ? undefined : item.selected,\n disabled: item.selected && action === colsVisibility && selectedColumns.size <= 1\n };\n }\n );\n }, [searchText, items]);\n\n const modifiedColumns = useMemo(\n () => getModifiedColumns(initialSelectedColumns, selectedColumns),\n [initialSelectedColumns, selectedColumns, action]\n );\n\n const isSubmitEnabled =\n !(action === colsVisibility && selectedColumns.size === 0) && modifiedColumns.length > 0;\n return (\n <StyledMenu\n items={itemsToRender}\n mode='multi-select'\n onItemClick={(id, args) => {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n }}\n role='listbox'\n focusControlEl={searchRef \|\| undefined}\n header={<SearchInput value={searchText} onSearchChange={setSearchText} ref={setSearchRef} />}\n footer={\n <Footer\n onCancel={onCancel}\n onSubmit={() => onSubmit(modifiedColumns)}\n disabled={!isSubmitEnabled}\n />\n }\n />\n );\n}\n\nColumnSelectorControl.propTypes = {\n data: PropTypes.arrayOf(PropTypes.object).isRequired,\n onSubmit: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n action: PropTypes.string.isRequired\n};\n\nfunction ColumnSelector({ dispatch, columns, action, finishPopOver }) {\n const transformed = useMemo(() => transformData(columns, action), [columns, action]);\n\n const onSubmitHandler = useCallback(\n changedCols => {\n if (changedCols.length > 0) {\n dispatch(changedCols);\n }\n finishPopOver();\n },\n [dispatch]\n );\n\n return (\n <ColumnSelectorControl\n data={transformed}\n onSubmit={onSubmitHandler}\n onCancel={finishPopOver}\n action={action}\n />\n );\n}\n\nColumnSelector.propTypes = {\n dispatch: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.object).isRequired,\n action: PropTypes.string.isRequired,\n finishPopOver: PropTypes.func.isRequired\n};\n\nexport default memo(ColumnSelector);\n"]}
1	+ {"version":3,"file":"ColumnSelector.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/ColumnSelector.jsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useCallback, useEffect, useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport {\n Icon,\n SearchInput,\n Menu,\n menuHelpers,\n useElement,\n Flex,\n Button\n} from '@pega/cosmos-react-core';\n\nimport { getFieldIcon } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nexport const colsVisibility = 'Show/hide columns';\nexport const pinning = 'Freeze columns';\n\n/*\n Returns an Icon component based on the field type.\n \n @param {string} type - The type of the field for which the icon is required.\n * @returns {JSX.Element} - A React Icon component with the appropriate icon name.\n /\nexport function getIconByFieldType(type) {\n const iconName = getFieldIcon(type);\n return <Icon data-test-id={iconName} data-testid={iconName} name={iconName} />;\n}\n\n/\n Determines the list of changed column IDs.\n \n @param {Set<string>} initialSelectedColumns - The initial set of selected column IDs.\n * @param {Set<string>} currentSelectedColumns - The current set of selected column IDs.\n * @returns {string[]} - Array of modified column IDs.\n /\nfunction getModifiedColumns(initialSelectedColumns, currentSelectedColumns) {\n const addedColumns = [...currentSelectedColumns].filter(id => !initialSelectedColumns.has(id));\n const removedColumns = [...initialSelectedColumns].filter(id => !currentSelectedColumns.has(id));\n return [...addedColumns, ...removedColumns];\n}\n\n/\n Transforms the columns array into array of columns grouped by category\n * @param {Array} columns - The array of column objects to be transformed.\n * @param {string} action - The action to perform, either 'Show/hide columns' or 'Freeze columns'.\n * @returns Arrays of columns nested by category\n */\nexport function transformData(fieldDefs, state, action) {\n const result = [];\n if (!fieldDefs?.length) return result;\n\n const categoryObj = {};\n\n fieldDefs\n ?.filter(c => c.toggle)\n .forEach(field => {\n const { id, category = [], type, label } = field;\n const visible = state.visibleColumns?.includes(id);\n const frozen = state.freezeColumns?.includes(id);\n const lastCategoryLabel = category.length ? category[category.length - 1].label : undefined;\n if (categoryObj[lastCategoryLabel])\n categoryObj[lastCategoryLabel].items.push({\n id,\n primary: label,\n label,\n selected: action === colsVisibility ? visible : frozen,\n type,\n visual: getIconByFieldType(type)\n });\n else {\n categoryObj[lastCategoryLabel] = {\n id: `category:${lastCategoryLabel}`,\n primary: lastCategoryLabel,\n items: [\n {\n id,\n primary: label,\n selected: action === colsVisibility ? visible : frozen,\n label,\n type,\n visual: getIconByFieldType(type)\n }\n ]\n };\n }\n });\n // Items with no category attribute are set in the root of returned array\n if (categoryObj[undefined] && categoryObj[undefined].items) {\n result.push(...categoryObj[undefined].items);\n delete categoryObj[undefined];\n }\n const keys = Object.keys(categoryObj);\n // Items with category attribute are grouped inside the nested category object\n keys.forEach(key => {\n result.push(categoryObj[key]);\n });\n\n return result;\n}\n\nconst Footer = memo(({ onCancel, onSubmit, disabled }) => {\n const [translate] = useTranslate();\n return (\n <Flex container={{ justify: 'between' }}>\n <Button onClick={onCancel} data-testid='cancel'>\n {translate('Cancel')}\n </Button>\n <Button variant='primary' onClick={onSubmit} disabled={disabled} data-testid='submit'>\n {translate('Submit')}\n </Button>\n </Flex>\n );\n});\n\nFooter.displayName = 'Footer';\n\nFooter.propTypes = {\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n disabled: PropTypes.bool.isRequired\n};\n\nconst StyledMenu = styled(Menu)`\n width: 16rem;\n`;\nexport function ColumnSelectorControl(props) {\n const { data, onSubmit, onCancel, action } = props;\n\n const initialSelectedColumns = useMemo(\n () =>\n new Set(\n menuHelpers\n .flatten(data)\n .filter(item => item.selected)\n .map(item => item.id)\n ),\n [data]\n );\n\n const [searchText, setSearchText] = useState('');\n const [searchRef, setSearchRef] = useElement(null);\n const [items, setItems] = useState(data);\n const selectedColumns = useMemo(\n () => new Set(menuHelpers.getSelected(items).map(item => item.id)),\n [items]\n );\n\n useEffect(() => {\n if (searchRef) {\n searchRef.focus();\n }\n }, [searchRef]);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n searchText\n ? menuHelpers\n .flatten(items)\n .filter(({ primary }) => primary.toLowerCase().includes(searchText.toLowerCase()))\n : items,\n item => {\n return {\n ...item,\n visual: item.visual,\n selected: item.items ? undefined : item.selected,\n disabled: item.selected && action === colsVisibility && selectedColumns.size <= 1\n };\n }\n );\n }, [searchText, items]);\n\n const modifiedColumns = useMemo(\n () => getModifiedColumns(initialSelectedColumns, selectedColumns),\n [initialSelectedColumns, selectedColumns, action]\n );\n\n const isSubmitEnabled =\n !(action === colsVisibility && selectedColumns.size === 0) && modifiedColumns.length > 0;\n return (\n <StyledMenu\n items={itemsToRender}\n mode='multi-select'\n onItemClick={(id, args) => {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n }}\n role='listbox'\n focusControlEl={searchRef \|\| undefined}\n header={<SearchInput value={searchText} onSearchChange={setSearchText} ref={setSearchRef} />}\n footer={\n <Footer\n onCancel={onCancel}\n onSubmit={() => onSubmit(modifiedColumns)}\n disabled={!isSubmitEnabled}\n />\n }\n />\n );\n}\n\nColumnSelectorControl.propTypes = {\n data: PropTypes.arrayOf(PropTypes.object).isRequired,\n onSubmit: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n action: PropTypes.string.isRequired\n};\n\nfunction ColumnSelector({ dispatch, fieldDefs, state, action, finishPopOver }) {\n const transformed = useMemo(\n () => transformData(fieldDefs, state, action),\n [fieldDefs, state, action]\n );\n\n const onSubmitHandler = useCallback(\n changedCols => {\n if (changedCols.length > 0) {\n dispatch(changedCols);\n }\n finishPopOver();\n },\n [dispatch]\n );\n\n return (\n <ColumnSelectorControl\n data={transformed}\n onSubmit={onSubmitHandler}\n onCancel={finishPopOver}\n action={action}\n />\n );\n}\n\nColumnSelector.propTypes = {\n dispatch: PropTypes.func.isRequired,\n fieldDefs: PropTypes.arrayOf(PropTypes.object).isRequired,\n state: PropTypes.arrayOf(PropTypes.object).isRequired,\n action: PropTypes.string.isRequired,\n finishPopOver: PropTypes.func.isRequired\n};\n\nexport default memo(ColumnSelector);\n"]}

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

@@ -3,13 +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.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, readOnly, 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, value), [fieldDefs, value, fieldProp]);
     const selected = useMemo(() => {
         const selectedItem = menuHelpers.getItem(items, value);
         return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;
@@ -48,13 +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,EACJ,KAAK,EACL,QAAQ,EACR,~~OAAO,EACP,~~QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;IACV,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,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,SAAS,CAAC,cAAc,CAAC,EACtC,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,IAAI,EAAE,EACxB,MAAM,EAAC,eAAe,EACtB,QAAQ,EAAE,EAAE,CAAC,EAAE;YACb,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,QAAQ,CAAC,EAAE,CAAC,CAAC;YACf,CAAC;YACD,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,SAAS,CAAC,CAAC;QAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpD,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,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 {\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 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 ~~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"]}
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, 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/hooks/useFilter.js CHANGED Viewed

@@ -7,7 +7,7 @@ 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 formattedColumns = useMemo(() => getMenuItemsFromColumns(view.getFieldDefs()?.filter(c => c.filter), 'name'), [view]);
     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":";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,YAAY,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAC1C,MAAM,CACP,EACH,CAAC,IAAI,CAAC,CACP,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.getFieldDefs()?.filter(c => c.filter),\n 'name'\n ),\n [view]\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

@@ -7,10 +7,10 @@ interface DateFunctionSelectorProps {
     group: AppliedGroup;
     groupingOptions: GroupingOptions;
     dateFunctions: RsCoreTypes.Meta['dateFunctions'];
-    columns: RsCoreTypes.Column[];
+    fieldDefs: RsCoreTypes.Meta['fieldDefs'];
     onChange: (newFunc: Group['dateFunction']) => void;
 }
 /** 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;
+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.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"}
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

@@ -10,9 +10,9 @@ const StyledDateFuncWrapper = styled.div `
 `;
 const timelineAllowedDateFunctions = ['YEARS', 'QUARTERS', 'MONTHS', 'DAYS'];
 /** Renders a Date-function selector in a grouping row if applicable */
-const DateFunctionSelector = ({ template, group, groupingOptions, dateFunctions, columns, onChange }) => {
+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
      */

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.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,6BAA6B,EAC9B,MAAM,gCAAgC,CAAC;AAGxC,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAW7E,uEAAuE;AACvE,MAAM,oBAAoB,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,eAAe,EACf,aAAa,EACb,~~OAAO~~,~~EACP~~,QAAQ,EACkB,EAAE,EAAE;IAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,~~OAAO~~,CAAC,CAAC;~~IAExD~~;;OAEG;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,6EAA6E;QAC7E,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,IAAI,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3F,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,CAAC,CAAC,CAAC,EAAE;QACzC,IACE,QAAQ,KAAK,6BAA6B,CAAC,QAAQ;YACnD,CAAC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,4BAA4B,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAC3E,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACrF,CAAC,CAAC,CAAC;IAEH,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;gBACZ,QAAQ,CACN,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,CAAC,CAAC,MAAM,CAAC,KAA+B,CAClF,CAAC;YACJ,CAAC,YAEA,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;AAEF,eAAe,oBAAoB,CAAC","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"]}
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

@@ -11,7 +11,8 @@ interface GroupRendererProps {
     columns: RsCoreTypes.Column[];
     dateFunctions: RsCoreTypes.Meta['dateFunctions'];
     template: RsCoreTypes.Meta['template'];
+    fieldDefs: RsCoreTypes.Meta['fieldDefs'];
 }
-declare const GroupRenderer: ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions, template }: 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":"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"}
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,4CA+LpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -13,7 +13,7 @@ const DropSelector = '[data-drop]';
 const StyledDragHandle = styled(Button) `
   cursor: grab;
 `;
-const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions, template }) => {
+const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions, template, fieldDefs }) => {
     const t = useI18n();
     const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();
     const dragDropRef = useRef(null);
@@ -101,9 +101,9 @@ const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dat
                                         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, { 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: {
+                                    }, 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, 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