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

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

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/hooks/useSort/Row.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
 export default Row;
-declare function Row({ updateSortItemId, updateSortItemOrder, columns, removeSortItem, sortItems, index, id, order, sequence, dragProps, dropProps, focusRowRef }: {
+declare function Row({ updateSortItemId, updateSortItemOrder, removeSortItem, sortItems, index, id, order, sequence, dragProps, dropProps, focusRowRef, fieldDefs, columns }: {
     updateSortItemId: any;
     updateSortItemOrder: any;
-    columns: any;
     removeSortItem: any;
     sortItems: any;
     index: any;
@@ -12,27 +11,30 @@ declare function Row({ updateSortItemId, updateSortItemOrder, columns, removeSor
     dragProps: any;
     dropProps: any;
     focusRowRef: any;
+    fieldDefs: any;
+    columns: any;
 }): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Row {
     namespace propTypes {
-        let updateSortItemId: PropTypes.Validator<(...args: any[]) => any>;
+        let updateSortItemId: PropTypes.Requireable<(...args: any[]) => any>;
         let updateSortItemOrder: PropTypes.Validator<(...args: any[]) => any>;
         let columns: PropTypes.Validator<any[]>;
-        let removeSortItem: PropTypes.Validator<(...args: any[]) => any>;
+        let removeSortItem: PropTypes.Requireable<(...args: any[]) => any>;
         let sortItems: PropTypes.Validator<any[]>;
         let id: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
         let index: PropTypes.Validator<number>;
         let order: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
         let sequence: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
-        let dragProps: PropTypes.Validator<{
+        let dragProps: PropTypes.Requireable<{
             [x: string]: any;
         }>;
-        let dropProps: PropTypes.Validator<{
+        let dropProps: PropTypes.Requireable<{
             [x: string]: any;
         }>;
         let focusRowRef: PropTypes.Requireable<{
             [x: string]: any;
         }>;
+        let fieldDefs: PropTypes.Validator<any[]>;
     }
     let displayName: string;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":";~~AAwBA;;;;;;;;;;;;;mDAqFC;;;;;;;;;;;;;;;;;;;;;;;;sBA7GqB~~,YAAY"}
1	+ {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":";AAgCA;;;;;;;;;;;;;;mDA+FC;;;;;;;;;;;;;;;;;;;;;;;;;sBA/HqB,YAAY"}

package/lib/Core/Components/Toolbar/hooks/useSort/Row.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, Icon, Option, Select } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Flex, Icon, Option, Select, useI18n } from '@pega/cosmos-react-core';
 import FieldSelector from '../../FieldSelector';
 import { keyFrom } from '../../../../Utils';
 import useTranslate from '../../../../Hooks/useTranslate';
@@ -17,39 +17,45 @@ const StyledDragHandle = styled(Button)(({ theme }) => {
   `;
 });
 StyledDragHandle.defaultProps = defaultThemeProp;
-const Row = ({ updateSortItemId, updateSortItemOrder, columns, removeSortItem, sortItems, index, id, order, sequence, dragProps, dropProps, focusRowRef }) => {
+const Row = ({ updateSortItemId, updateSortItemOrder, removeSortItem, sortItems, index, id, order, sequence, dragProps, dropProps, focusRowRef, fieldDefs, columns }) => {
     const [translate] = useTranslate();
-    const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);
+    const t = useI18n();
+    const validSortColumnsInRow = getValidSortColumnsInRow(fieldDefs, sortItems, id);
     if (!validSortColumnsInRow || !validSortColumnsInRow.length)
         return null;
     const validSortOrders = getValidSortOrders();
     const { label } = validSortOrders.find(v => v.id === order) || {};
+    const fieldLabel = columns?.find(f => f.field.id === id)?.label;
+    const dragHandleLabel = fieldLabel
+        ? t('drag_to_reorder_field', [fieldLabel])
+        : t('drag_to_reorder');
     return (_jsx("div", { ...dropProps, "data-sequence": sequence, children: _jsxs(Flex, { container: {
                 justify: 'between',
                 alignItems: 'end',
                 direction: 'row',
                 wrap: 'no-wrap',
                 itemGap: 0.5
-            }, ref: focusRowRef, 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: translate('Field'), columns: validSortColumnsInRow, value: id, onChange: newID => updateSortItemId(newID, sequence), fieldProp: 'id' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsxs(Select, { label: translate('Sort order'), className: 'select-sorts', "data-testid": 'SortSelector', value: label, onChange: e => {
+            }, ref: focusRowRef, children: [_jsx(StyledDragHandle, { forwardedAs: 'div', role: 'button', icon: true, variant: 'simple', compact: true, disabled: !dragProps, "aria-label": dragHandleLabel, ...dragProps, children: _jsx(Icon, { name: 'drag' }) }), _jsx(Flex, { item: { grow: 1, basis: '0' }, children: _jsx(FieldSelector, { label: translate('Field'), fieldDefs: fieldDefs, value: id, onChange: newID => updateSortItemId(newID, sequence), fieldProp: 'id', readOnly: !updateSortItemId }) }), _jsx(Flex, { item: { grow: 1, basis: '0' }, children: _jsxs(Select, { label: translate('Sort order'), className: 'select-sorts', "data-testid": 'SortSelector', value: label, onChange: e => {
                             const o = validSortOrders.find(v => v.label === e.target.value);
                             if (o) {
                                 updateSortItemOrder(e, sequence, o.id);
                             }
-                        }, children: [_jsx("option", { value: '', children: translate('Select...') }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }), _jsx(Flex, { item: true, children: _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeSortItem(index, order), label: translate('Remove sort'), children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
+                        }, children: [_jsx("option", { value: '', children: translate('Select...') }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }), _jsx(Flex, { item: true, children: _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeSortItem(index, order), label: translate('Remove sort'), disabled: !removeSortItem, children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
 };
 Row.propTypes = {
-    updateSortItemId: PropTypes.func.isRequired,
+    updateSortItemId: PropTypes.func,
     updateSortItemOrder: PropTypes.func.isRequired,
     columns: PropTypes.arrayOf(PropTypes.any).isRequired,
-    removeSortItem: PropTypes.func.isRequired,
+    removeSortItem: PropTypes.func,
     sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     index: PropTypes.number.isRequired,
     order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    dragProps: PropTypes.objectOf(PropTypes.any).isRequired,
-    dropProps: PropTypes.objectOf(PropTypes.any).isRequired,
-    focusRowRef: PropTypes.objectOf(PropTypes.any)
+    dragProps: PropTypes.objectOf(PropTypes.any),
+    dropProps: PropTypes.objectOf(PropTypes.any),
+    focusRowRef: PropTypes.objectOf(PropTypes.any),
+    fieldDefs: PropTypes.arrayOf(PropTypes.any).isRequired
 };
 Row.displayName = 'Row';
 export default Row;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,~~EAAE~~,MAAM,~~EAAE~~,gBAAgB,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,MAAM,~~EAAE~~,MAAM,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAE/F~~,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;yBAEa,KAAK,CAAC,IAAI,CAAC,OAAO;;;2BAGhB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,GAAG,GAAG,CAAC,EACX,gBAAgB,EAChB,mBAAmB,EACnB,~~OAAO,EACP,~~cAAc,EACd,SAAS,EACT,KAAK,EACL,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,~~EACZ~~,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,~~OAAO~~,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;~~IAC/E~~,IAAI,CAAC,qBAAqB,IAAI,CAAC,qBAAqB,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzE,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;IAC7C,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC;~~IAElE~~,OAAO,CACL,iBAAS,SAAS,mBAAiB,QAAQ,YACzC,MAAC,IAAI,IACH,SAAS,EAAE;gBACT,OAAO,EAAE,SAAS;gBAClB,UAAU,EAAE,KAAK;gBACjB,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,GAAG;aACb,EACD,GAAG,EAAE,WAAW,aAEhB,KAAC,gBAAgB,IACf,WAAW,EAAC,KAAK,EACjB,IAAI,EAAC,QAAQ,EACb,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,~~WACH~~,SAAS,YAEb,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACH,EACnB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,~~YACrB~~,KAAC,aAAa,IACZ,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EACzB,~~OAAO~~,EAAE,~~qBAAqB~~,~~EAC9B~~,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,EACpD,SAAS,EAAC,IAAI,~~GACd~~,GACG,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,~~YACrB~~,MAAC,MAAM,IACL,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,EAC9B,SAAS,EAAC,cAAc,iBACZ,cAAc,EAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;4BACZ,MAAM,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BAChE,IAAI,CAAC,EAAE,CAAC;gCACN,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;4BACzC,CAAC;wBACH,CAAC,aAED,iBAAQ,KAAK,EAAC,EAAE,YAAE,SAAS,CAAC,WAAW,CAAC,GAAU,EACjD,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7B,KAAC,MAAM,IAA2B,KAAK,EAAE,CAAC,CAAC,KAAK,YAC7C,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IADR,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAEvB,CACV,CAAC,IACK,GACJ,EACP,KAAC,IAAI,IAAC,IAAI,kBACR,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,EAC3C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,~~YAE~~/B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,GACJ,IACF,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,GAAG,CAAC,SAAS,GAAG;IACd,gBAAgB,EAAE,SAAS,CAAC,IAAI~~,CAAC,UAAU~~;~~IAC3C~~,mBAAmB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAC9C,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACpD,cAAc,EAAE,SAAS,CAAC,IAAI~~,CAAC,UAAU~~;~~IACzC~~,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACtD,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;IACxE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;IAC3E,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;IAC9E,SAAS,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC~~,CAAC,UAAU~~;~~IACvD~~,SAAS,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,~~UAAU~~;~~IACvD~~,~~WAAW~~,EAAE,SAAS,CAAC,~~QAAQ~~,CAAC,SAAS,CAAC,GAAG,CAAC;~~CAC/C~~,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,eAAe,GAAG,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Flex, Icon, Option, Select } from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledDragHandle = styled(Button)(({ theme }) => {\n return css`\n cursor: grab;\n margin-block: calc(${theme.base.spacing} * 0.5);\n\n @media (pointer: coarse) {\n margin-block: calc(${theme.base.spacing} * 1.25);\n }\n `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst Row = ({\n updateSortItemId,\n updateSortItemOrder,\n ~~columns,\n~~ removeSortItem,\n sortItems,\n index,\n id,\n order,\n sequence,\n dragProps,\n dropProps,\n focusRowRef\n}) => {\n const [translate] = useTranslate();\n const validSortColumnsInRow = getValidSortColumnsInRow(~~columns~~, sortItems, id);\n if (!validSortColumnsInRow \|\| !validSortColumnsInRow.length) return null;\n const validSortOrders = getValidSortOrders();\n const { label } = validSortOrders.find(v => v.id === order) \|\| {};\n\n return (\n <div {...dropProps} data-sequence={sequence}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'end',\n direction: 'row',\n wrap: 'no-wrap',\n itemGap: 0.5\n }}\n ref={focusRowRef}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={translate('Field')}\n ~~columns~~={~~validSortColumnsInRow~~}\n value={id}\n onChange={newID => updateSortItemId(newID, sequence)}\n fieldProp='id'\n />\n </Flex>\n <Flex item={{ grow: 1 }}>\n <Select\n label={translate('Sort order')}\n className='select-sorts'\n data-testid='SortSelector'\n value={label}\n onChange={e => {\n const o = validSortOrders.find(v => v.label === e.target.value);\n if (o) {\n updateSortItemOrder(e, sequence, o.id);\n }\n }}\n >\n <option value=''>{translate('Select...')}</option>\n {validSortOrders.map((v, i) => (\n <Option key={keyFrom(v.label, i)} value={v.label}>\n {translate(v.label)}\n </Option>\n ))}\n </Select>\n </Flex>\n <Flex item>\n <Button\n icon\n variant='simple'\n onClick={() => removeSortItem(index, order)}\n label={translate('Remove sort')}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </Flex>\n </div>\n );\n};\n\nRow.propTypes = {\n updateSortItemId: PropTypes.func~~.isRequired~~,\n updateSortItemOrder: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n removeSortItem: PropTypes.func~~.isRequired~~,\n sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n index: PropTypes.number.isRequired,\n order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n dragProps: PropTypes.objectOf(PropTypes.any)~~.isRequired~~,\n dropProps: PropTypes.objectOf(PropTypes.any)~~.isRequired~~,\n focusRowRef: PropTypes.objectOf(PropTypes.any)\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}
1	+ {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n Icon,\n Option,\n Select,\n useI18n\n} from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledDragHandle = styled(Button)(({ theme }) => {\n return css`\n cursor: grab;\n margin-block: calc(${theme.base.spacing} * 0.5);\n\n @media (pointer: coarse) {\n margin-block: calc(${theme.base.spacing} * 1.25);\n }\n `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst Row = ({\n updateSortItemId,\n updateSortItemOrder,\n removeSortItem,\n sortItems,\n index,\n id,\n order,\n sequence,\n dragProps,\n dropProps,\n focusRowRef,\n fieldDefs,\n columns\n}) => {\n const [translate] = useTranslate();\n const t = useI18n();\n const validSortColumnsInRow = getValidSortColumnsInRow(fieldDefs, sortItems, id);\n if (!validSortColumnsInRow \|\| !validSortColumnsInRow.length) return null;\n const validSortOrders = getValidSortOrders();\n const { label } = validSortOrders.find(v => v.id === order) \|\| {};\n const fieldLabel = columns?.find(f => f.field.id === id)?.label;\n const dragHandleLabel = fieldLabel\n ? t('drag_to_reorder_field', [fieldLabel])\n : t('drag_to_reorder');\n\n return (\n <div {...dropProps} data-sequence={sequence}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'end',\n direction: 'row',\n wrap: 'no-wrap',\n itemGap: 0.5\n }}\n ref={focusRowRef}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n disabled={!dragProps}\n aria-label={dragHandleLabel}\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1, basis: '0' }}>\n <FieldSelector\n label={translate('Field')}\n fieldDefs={fieldDefs}\n value={id}\n onChange={newID => updateSortItemId(newID, sequence)}\n fieldProp='id'\n readOnly={!updateSortItemId}\n />\n </Flex>\n <Flex item={{ grow: 1, basis: '0' }}>\n <Select\n label={translate('Sort order')}\n className='select-sorts'\n data-testid='SortSelector'\n value={label}\n onChange={e => {\n const o = validSortOrders.find(v => v.label === e.target.value);\n if (o) {\n updateSortItemOrder(e, sequence, o.id);\n }\n }}\n >\n <option value=''>{translate('Select...')}</option>\n {validSortOrders.map((v, i) => (\n <Option key={keyFrom(v.label, i)} value={v.label}>\n {translate(v.label)}\n </Option>\n ))}\n </Select>\n </Flex>\n <Flex item>\n <Button\n icon\n variant='simple'\n onClick={() => removeSortItem(index, order)}\n label={translate('Remove sort')}\n disabled={!removeSortItem}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </Flex>\n </div>\n );\n};\n\nRow.propTypes = {\n updateSortItemId: PropTypes.func,\n updateSortItemOrder: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n removeSortItem: PropTypes.func,\n sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n index: PropTypes.number.isRequired,\n order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n dragProps: PropTypes.objectOf(PropTypes.any),\n dropProps: PropTypes.objectOf(PropTypes.any),\n focusRowRef: PropTypes.objectOf(PropTypes.any),\n fieldDefs: PropTypes.arrayOf(PropTypes.any).isRequired\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}

package/lib/Core/Components/Toolbar/hooks/useSort/SortRenderer.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { Sort } from 'pega-repeating-structures-core/types/State.types';
-import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import { type RsCoreTypes } from 'pega-repeating-structures-core';
 import type { SortItem } from './useSort';
 interface SortRendererProps {
     sortItems: SortItem[];
@@ -7,7 +7,9 @@ interface SortRendererProps {
     updateSortItems: (sortItems: (Sort | {
         order: string;
     })[]) => void;
+    template: RsCoreTypes.Meta['template'];
+    fieldDefs: RsCoreTypes.Meta['fieldDefs'];
 }
-declare const SortRenderer: ({ sortItems, columns, updateSortItems }: SortRendererProps) => import("react/jsx-runtime").JSX.Element;
+declare const SortRenderer: ({ sortItems, columns, updateSortItems, template, fieldDefs }: SortRendererProps) => import("react/jsx-runtime").JSX.Element;
 export default SortRenderer;
 //# sourceMappingURL=SortRenderer.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SortRenderer.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/SortRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,KAAK,~~EAAE,~~WAAW,EAAE,MAAM,gCAAgC,CAAC;~~AAOlE~~,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI1C,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,eAAe,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,KAAK,IAAI,CAAC;~~CACpE~~;AAED,QAAA,MAAM,YAAY,GAAI,~~yCAAyC~~,iBAAiB,~~4CA+H/E~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"SortRenderer.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/SortRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,EAAiC,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAOjG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI1C,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,eAAe,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,YAAY,GAAI,8DAMnB,iBAAiB,4CAmInB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/Core/Components/Toolbar/hooks/useSort/SortRenderer.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
+import { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core';
 import useRowFocus from '../useRowFocus';
 import useDragDrop from '../../../../Hooks/useDragDrop';
 import { getValidSortColumnsInRow } from './utils';
 import Row from './Row';
 const DropSelector = '[data-drop]';
-const SortRenderer = ({ sortItems, columns, updateSortItems }) => {
+const SortRenderer = ({ sortItems, columns, updateSortItems, template, fieldDefs }) => {
     const t = useI18n();
     const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();
     const dragDropRef = useRef(null);
@@ -30,7 +31,7 @@ const SortRenderer = ({ sortItems, columns, updateSortItems }) => {
         onDrop
     });
     const addSortItem = useCallback(() => {
-        const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems);
+        const validSortColumnsInRow = getValidSortColumnsInRow(fieldDefs, sortItems);
         if (validSortColumnsInRow && validSortColumnsInRow.length) {
             const newRow = {
                 id: createUID(),
@@ -75,7 +76,12 @@ const SortRenderer = ({ sortItems, columns, updateSortItems }) => {
     return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { direction: 'column', gap: 1 }, ref: dragDropRef, children: sortItems
                     .slice()
                     .sort((a, b) => a.sequence - b.sequence)
-                    .map((s, i) => (_jsx(Row, { updateSortItemId: updateSortItemId, updateSortItemOrder: updateSortItemOrder, columns: columns, removeSortItem: removeSortItem, sortItems: sortItems, index: i, id: s.columnId, order: s.order, sequence: s.sequence, dragProps: dragProps, dropProps: dropProps, focusRowRef: sortItems[i].id === focusRowId ? focusRowRef : null }, s.id))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_sort'), onClick: addSortItem, children: _jsxs(Flex, { container: { inline: true, alignItems: 'start', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('add') })] }) }) })] }));
+                    .map((s, i) => (_jsx(Row, { updateSortItemOrder: updateSortItemOrder, removeSortItem: removeSortItem, columns: columns, sortItems: sortItems, index: i, id: s.columnId, order: s.order, sequence: s.sequence, focusRowRef: sortItems[i].id === focusRowId ? focusRowRef : null, ...(!(i === 0 && template === REPEATING_STRUCTURE_TEMPLATES.TIMELINE) && {
+                        updateSortItemId,
+                        removeSortItem,
+                        dragProps,
+                        dropProps
+                    }), fieldDefs: fieldDefs }, s.id))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_sort'), onClick: addSortItem, children: _jsxs(Flex, { container: { inline: true, alignItems: 'start', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('add') })] }) }) })] }));
 };
 export default SortRenderer;
 //# sourceMappingURL=SortRenderer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SortRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/SortRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { Sort } from 'pega-repeating-structures-core/types/State.types';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\n\nimport { getValidSortColumnsInRow } from './utils';\nimport Row from './Row';\nimport type { SortItem } from './useSort';\n\nconst DropSelector = '[data-drop]';\n\ninterface SortRendererProps {\n sortItems: SortItem[];\n columns: RsCoreTypes.Column[];\n updateSortItems: (sortItems: (Sort \| { order: string })[]) => void;\n}\n\nconst SortRenderer = ({ sortItems, columns, updateSortItems }: SortRendererProps) => {\n const t = useI18n();\n const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n const dragDropRef = useRef<HTMLDivElement>(null);\n const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n\n const updateSortItemSequence = useCallback(\n (srcSequence: Sort['sequence'], destSequence: Sort['sequence']) => {\n const items = sortItems.slice().sort((a, b) => a.sequence - b.sequence);\n items.splice(destSequence - 1, 0, items.splice(srcSequence - 1, 1)[0]);\n items.forEach((item, index) => {\n item.sequence = index + 1;\n });\n updateSortItems(items);\n },\n [sortItems]\n );\n\n const onDrop = useCallback(\n (dest: Element, src: Element) => {\n updateSortItemSequence(\n parseInt(src.getAttribute('data-sequence') ?? '', 10),\n parseInt(dest.getAttribute('data-sequence') ?? '', 10)\n );\n },\n [updateSortItemSequence]\n );\n const { dragProps, dropProps } = useDragDrop({\n context: dragDropRef,\n getAnimationSelector,\n getGhostImageSelector: getAnimationSelector,\n getDraggedObject: getAnimationSelector,\n onDrop\n });\n\n const addSortItem = useCallback(() => {\n const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems);\n if (validSortColumnsInRow && validSortColumnsInRow.length) {\n const newRow = {\n id: createUID(),\n columnId: '',\n order: '',\n sequence: sortItems.length + 1\n };\n const newSortItems = [...sortItems, newRow];\n updateSortItems(newSortItems);\n setFocusRowId(newRow.id);\n }\n }, [sortItems, columns, setFocusRowId]);\n\n const updateSortItemId = useCallback(\n (id: Sort['columnId'], sequence: Sort['sequence']) => {\n const index = sortItems.findIndex(s => s.sequence === sequence);\n const items = [...sortItems];\n items[index].columnId = id;\n updateSortItems(items);\n },\n [sortItems]\n );\n\n const updateSortItemOrder = useCallback(\n (e: ChangeEvent, sequence: Sort['sequence'], o: Sort['order']) => {\n const index = sortItems.findIndex(s => s.sequence === sequence);\n const items = [...sortItems];\n items[index].order = o;\n updateSortItems(items);\n },\n [sortItems]\n );\n\n const removeSortItem = useCallback(\n (index: number) => {\n const items = sortItems.map(v => ({ ...v }));\n const { sequence } = items[index];\n items.splice(index, 1);\n items.forEach(item => {\n if (item.sequence > sequence) item.sequence -= 1;\n });\n updateSortItems(items);\n\n if (items.length > 0)\n setFocusRowId(index === sortItems.length - 1 ? items[index - 1].id : items[index].id);\n },\n [sortItems, setFocusRowId]\n );\n\n useEffect(() => {\n if (!sortItems.length) {\n addSortItem();\n }\n }, [sortItems, addSortItem]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Flex container={{ direction: 'column', gap: 1 }} ref={dragDropRef}>\n {sortItems\n .slice()\n .sort((a, b) => a.sequence - b.sequence)\n .map((s, i) => (\n <Row\n key={s.id}\n updateSortItemId={updateSortItemId}\n updateSortItemOrder={updateSortItemOrder}\n columns={columns}\n removeSortItem={removeSortItem}\n sortItems={sortItems}\n index={i}\n id={s.columnId}\n order={s.order}\n sequence={s.sequence}\n dragProps={dragProps}\n dropProps={dropProps}\n focusRowRef={sortItems[i].id === focusRowId ? focusRowRef : null}\n />\n ))}\n </Flex>\n <div>\n <Button variant='link' aria-label={t('add_sort')} onClick={addSortItem}>\n <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n <Icon name='plus' />\n <span>{t('add')}</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport default SortRenderer;\n"]}
1	+ {"version":3,"file":"SortRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/SortRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { Sort } from 'pega-repeating-structures-core/types/State.types';\nimport { REPEATING_STRUCTURE_TEMPLATES, type RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\n\nimport { getValidSortColumnsInRow } from './utils';\nimport Row from './Row';\nimport type { SortItem } from './useSort';\n\nconst DropSelector = '[data-drop]';\n\ninterface SortRendererProps {\n sortItems: SortItem[];\n columns: RsCoreTypes.Column[];\n updateSortItems: (sortItems: (Sort \| { order: string })[]) => void;\n template: RsCoreTypes.Meta['template'];\n fieldDefs: RsCoreTypes.Meta['fieldDefs'];\n}\n\nconst SortRenderer = ({\n sortItems,\n columns,\n updateSortItems,\n template,\n fieldDefs\n}: SortRendererProps) => {\n const t = useI18n();\n const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n const dragDropRef = useRef<HTMLDivElement>(null);\n const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n\n const updateSortItemSequence = useCallback(\n (srcSequence: Sort['sequence'], destSequence: Sort['sequence']) => {\n const items = sortItems.slice().sort((a, b) => a.sequence - b.sequence);\n items.splice(destSequence - 1, 0, items.splice(srcSequence - 1, 1)[0]);\n items.forEach((item, index) => {\n item.sequence = index + 1;\n });\n updateSortItems(items);\n },\n [sortItems]\n );\n\n const onDrop = useCallback(\n (dest: Element, src: Element) => {\n updateSortItemSequence(\n parseInt(src.getAttribute('data-sequence') ?? '', 10),\n parseInt(dest.getAttribute('data-sequence') ?? '', 10)\n );\n },\n [updateSortItemSequence]\n );\n const { dragProps, dropProps } = useDragDrop({\n context: dragDropRef,\n getAnimationSelector,\n getGhostImageSelector: getAnimationSelector,\n getDraggedObject: getAnimationSelector,\n onDrop\n });\n\n const addSortItem = useCallback(() => {\n const validSortColumnsInRow = getValidSortColumnsInRow(fieldDefs, sortItems);\n if (validSortColumnsInRow && validSortColumnsInRow.length) {\n const newRow = {\n id: createUID(),\n columnId: '',\n order: '',\n sequence: sortItems.length + 1\n };\n const newSortItems = [...sortItems, newRow];\n updateSortItems(newSortItems);\n setFocusRowId(newRow.id);\n }\n }, [sortItems, columns, setFocusRowId]);\n\n const updateSortItemId = useCallback(\n (id: Sort['columnId'], sequence: Sort['sequence']) => {\n const index = sortItems.findIndex(s => s.sequence === sequence);\n const items = [...sortItems];\n items[index].columnId = id;\n updateSortItems(items);\n },\n [sortItems]\n );\n\n const updateSortItemOrder = useCallback(\n (e: ChangeEvent, sequence: Sort['sequence'], o: Sort['order']) => {\n const index = sortItems.findIndex(s => s.sequence === sequence);\n const items = [...sortItems];\n items[index].order = o;\n updateSortItems(items);\n },\n [sortItems]\n );\n\n const removeSortItem = useCallback(\n (index: number) => {\n const items = sortItems.map(v => ({ ...v }));\n const { sequence } = items[index];\n items.splice(index, 1);\n items.forEach(item => {\n if (item.sequence > sequence) item.sequence -= 1;\n });\n updateSortItems(items);\n\n if (items.length > 0)\n setFocusRowId(index === sortItems.length - 1 ? items[index - 1].id : items[index].id);\n },\n [sortItems, setFocusRowId]\n );\n\n useEffect(() => {\n if (!sortItems.length) {\n addSortItem();\n }\n }, [sortItems, addSortItem]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Flex container={{ direction: 'column', gap: 1 }} ref={dragDropRef}>\n {sortItems\n .slice()\n .sort((a, b) => a.sequence - b.sequence)\n .map((s, i) => (\n <Row\n key={s.id}\n updateSortItemOrder={updateSortItemOrder}\n removeSortItem={removeSortItem}\n columns={columns}\n sortItems={sortItems}\n index={i}\n id={s.columnId}\n order={s.order}\n sequence={s.sequence}\n focusRowRef={sortItems[i].id === focusRowId ? focusRowRef : null}\n {...(!(i === 0 && template === REPEATING_STRUCTURE_TEMPLATES.TIMELINE) && {\n updateSortItemId,\n removeSortItem,\n dragProps,\n dropProps\n })}\n fieldDefs={fieldDefs}\n />\n ))}\n </Flex>\n <div>\n <Button variant='link' aria-label={t('add_sort')} onClick={addSortItem}>\n <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n <Icon name='plus' />\n <span>{t('add')}</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport default SortRenderer;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useSort.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/useSort.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAO7E,MAAM,WAAW,QAAS,SAAQ,IAAI;IACpC,EAAE,EAAE,MAAM,CAAC;CACZ;AAKD,QAAA,MAAM,OAAO,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,KAAG,gBAAgB,CAAC,MAAM,~~CAwC9E~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"useSort.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/useSort.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAO7E,MAAM,WAAW,QAAS,SAAQ,IAAI;IACpC,EAAE,EAAE,MAAM,CAAC;CACZ;AAKD,QAAA,MAAM,OAAO,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,KAAG,gBAAgB,CAAC,MAAM,CA+C9E,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -5,7 +5,7 @@ import { deepCopy, deepEqual } from '../../../../Utils/index';
 import SortRenderer from './SortRenderer';
 const convertSortingOrderToSortItems = (sortingOrder) => sortingOrder.map(sort => ({ ...sort, id: createUID() }));
 const useSort = ({ view }) => {
-    const { columns = [], state: { sortingOrder = [] } = {}, type: { applySorting } } = view;
+    const { columns = [], state: { sortingOrder = [] } = {}, meta: { template }, type: { applySorting } } = view;
     const displaySort = view.shouldDisplayFeature(TOOLBAR_FEATURES.SORT);
     const [sortItems, updateSortItems] = useState([]);
     const onSubmit = useCallback(() => {
@@ -32,7 +32,13 @@ const useSort = ({ view }) => {
     return {
         count: sortingOrder.length > 0 ? sortingOrder.length : undefined,
         renderer: SortRenderer,
-        rendererProps: { sortItems, columns, updateSortItems },
+        rendererProps: {
+            sortItems,
+            columns,
+            updateSortItems,
+            template,
+            fieldDefs: view.getFieldDefs()
+        },
         onSubmit,
         onCancel
     };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useSort.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/useSort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAyB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAM1C,MAAM,8BAA8B,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC9D,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAA8B,EAA4B,EAAE;IACjF,MAAM,EACJ,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,EAAE,EACjC,IAAI,EAAE,EAAE,YAAY,EAAE,EACvB,GAAG,IAAI,CAAC;IACT,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrE,MAAM,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,MAAM,cAAc,GAAG,SAAS;aAC7B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;aACvC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,KAAK,CAAC;aACxC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACnB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;YAC7B,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;QACL,YAAY,CAAC,cAAc,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,eAAe,CAAC,QAAQ,CAAC,8BAA8B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,CAAC;YAC/C,eAAe,CAAC,QAAQ,CAAC,8BAA8B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,IAAI,CAAC,WAAW;QAAE,OAAO;IAEzB,OAAO;QACL,KAAK,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAChE,QAAQ,EAAE,YAAY;QACtB,aAAa,EAAE,~~EAAE~~,SAAS,EAAE,~~OAAO~~,~~EAAE~~,~~eAAe~~,EAAE;~~QACtD~~,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { createUID, type ListToolbarProps, usePrevious } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Sort } from 'pega-repeating-structures-core/types/State.types';\n\nimport { TOOLBAR_FEATURES } from '../../../../constants';\nimport { deepCopy, deepEqual } from '../../../../Utils/index';\n\nimport SortRenderer from './SortRenderer';\n\nexport interface SortItem extends Sort {\n id: string;\n}\n\nconst convertSortingOrderToSortItems = (sortingOrder: Sort[]) =>\n sortingOrder.map(sort => ({ ...sort, id: createUID() }));\n\nconst useSort = ({ view }: { view: RsCoreTypes.View }): ListToolbarProps['sort'] => {\n const {\n columns = [],\n state: { sortingOrder = [] } = {},\n type: { applySorting }\n } = view;\n const displaySort = view.shouldDisplayFeature(TOOLBAR_FEATURES.SORT);\n const [sortItems, updateSortItems] = useState<SortItem[]>([]);\n\n const onSubmit = useCallback(() => {\n const finalSortItems = sortItems\n .sort((a, b) => a.sequence - b.sequence)\n .filter(ele => ele.columnId && ele.order)\n .map((item, index) => {\n const { id, ...rest } = item;\n return { ...rest, sequence: index + 1 };\n });\n applySorting(finalSortItems);\n }, [sortItems, applySorting]);\n\n const onCancel = useCallback(() => {\n updateSortItems(deepCopy(convertSortingOrderToSortItems(sortingOrder)));\n }, [sortingOrder]);\n\n const prevSortingOrder = usePrevious(sortingOrder);\n useEffect(() => {\n if (!deepEqual(sortingOrder, prevSortingOrder)) {\n updateSortItems(deepCopy(convertSortingOrderToSortItems(sortingOrder)));\n }\n }, [sortingOrder, prevSortingOrder]);\n\n if (!displaySort) return;\n\n return {\n count: sortingOrder.length > 0 ? sortingOrder.length : undefined,\n renderer: SortRenderer,\n rendererProps: { sortItems, columns, updateSortItems },\n onSubmit,\n onCancel\n };\n};\n\nexport default useSort;\n"]}
1	+ {"version":3,"file":"useSort.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/useSort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAyB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAM1C,MAAM,8BAA8B,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC9D,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAA8B,EAA4B,EAAE;IACjF,MAAM,EACJ,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,EAAE,EACjC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAClB,IAAI,EAAE,EAAE,YAAY,EAAE,EACvB,GAAG,IAAI,CAAC;IACT,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrE,MAAM,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,MAAM,cAAc,GAAG,SAAS;aAC7B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;aACvC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,KAAK,CAAC;aACxC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACnB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;YAC7B,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;QACL,YAAY,CAAC,cAAc,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,eAAe,CAAC,QAAQ,CAAC,8BAA8B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,CAAC;YAC/C,eAAe,CAAC,QAAQ,CAAC,8BAA8B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,IAAI,CAAC,WAAW;QAAE,OAAO;IAEzB,OAAO;QACL,KAAK,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAChE,QAAQ,EAAE,YAAY;QACtB,aAAa,EAAE;YACb,SAAS;YACT,OAAO;YACP,eAAe;YACf,QAAQ;YACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;SAC/B;QACD,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { createUID, type ListToolbarProps, usePrevious } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Sort } from 'pega-repeating-structures-core/types/State.types';\n\nimport { TOOLBAR_FEATURES } from '../../../../constants';\nimport { deepCopy, deepEqual } from '../../../../Utils/index';\n\nimport SortRenderer from './SortRenderer';\n\nexport interface SortItem extends Sort {\n id: string;\n}\n\nconst convertSortingOrderToSortItems = (sortingOrder: Sort[]) =>\n sortingOrder.map(sort => ({ ...sort, id: createUID() }));\n\nconst useSort = ({ view }: { view: RsCoreTypes.View }): ListToolbarProps['sort'] => {\n const {\n columns = [],\n state: { sortingOrder = [] } = {},\n meta: { template },\n type: { applySorting }\n } = view;\n const displaySort = view.shouldDisplayFeature(TOOLBAR_FEATURES.SORT);\n const [sortItems, updateSortItems] = useState<SortItem[]>([]);\n\n const onSubmit = useCallback(() => {\n const finalSortItems = sortItems\n .sort((a, b) => a.sequence - b.sequence)\n .filter(ele => ele.columnId && ele.order)\n .map((item, index) => {\n const { id, ...rest } = item;\n return { ...rest, sequence: index + 1 };\n });\n applySorting(finalSortItems);\n }, [sortItems, applySorting]);\n\n const onCancel = useCallback(() => {\n updateSortItems(deepCopy(convertSortingOrderToSortItems(sortingOrder)));\n }, [sortingOrder]);\n\n const prevSortingOrder = usePrevious(sortingOrder);\n useEffect(() => {\n if (!deepEqual(sortingOrder, prevSortingOrder)) {\n updateSortItems(deepCopy(convertSortingOrderToSortItems(sortingOrder)));\n }\n }, [sortingOrder, prevSortingOrder]);\n\n if (!displaySort) return;\n\n return {\n count: sortingOrder.length > 0 ? sortingOrder.length : undefined,\n renderer: SortRenderer,\n rendererProps: {\n sortItems,\n columns,\n updateSortItems,\n template,\n fieldDefs: view.getFieldDefs()\n },\n onSubmit,\n onCancel\n };\n};\n\nexport default useSort;\n"]}

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

@@ -1,6 +1,6 @@
 import type { RsCoreTypes } from 'pega-repeating-structures-core';
 import type { Sort } from 'pega-repeating-structures-core/types/State.types';
-export declare const getValidSortColumnsInRow: (columns: RsCoreTypes.Column[], sortItems: Sort[], id?: Sort["columnId"]) => import("pega-repeating-structures-core/lib/src/core/generators/ColumnGenerator").default[];
+export declare const getValidSortColumnsInRow: (fieldDefs: RsCoreTypes.Meta["fieldDefs"], sortItems: Sort[], id?: Sort["columnId"]) => import("pega-repeating-structures-core/lib/types/Meta.types").FieldDef[];
 export declare const getValidSortOrders: () => {
     id: string;
     label: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAS7E,eAAO,MAAM,wBAAwB,GACnC,~~SAAS~~,WAAW,CAAC,~~MAAM~~,~~EAAE~~,~~EAC7B~~,WAAW,IAAI,EAAE,EACjB,KAAK,IAAI,CAAC,UAAU,CAAC~~,+FAMtB~~,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;GAK9B,CAAC"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAS7E,eAAO,MAAM,wBAAwB,GACnC,WAAW,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EACxC,WAAW,IAAI,EAAE,EACjB,KAAK,IAAI,CAAC,UAAU,CAAC,6EAMtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;GAK9B,CAAC"}

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

@@ -3,12 +3,12 @@ const sortLabels = {
     asc: 'Ascending',
     desc: 'Descending'
 };
-export const getValidSortColumnsInRow = (columns, sortItems, id) => {
+export const getValidSortColumnsInRow = (fieldDefs, sortItems, id) => {
     const existingSortItemsId = sortItems.map(s => s.columnId);
     const index = id ? existingSortItemsId.indexOf(id) : -1;
     if (index !== -1)
         existingSortItemsId.splice(index, 1);
-    return columns.filter(c => c.field.sort && !existingSortItemsId.includes(c.field.id));
+    return fieldDefs.filter(c => c.sort && !existingSortItemsId.includes(c.id));
 };
 export const getValidSortOrders = () => {
     return NonNullSortActions.map(o => ({

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,UAAU,GAA8B;IAC5C,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,~~OAA6B~~,~~EAC7B~~,SAAiB,EACjB,EAAqB,EACrB,EAAE;IACF,MAAM,mBAAmB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD,IAAI,KAAK,KAAK,CAAC,CAAC;QAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACvD,OAAO,~~OAAO~~,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~IAAI,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~EAAE,CAAC,CAAC,CAAC;~~AACxF~~,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC,CAAC,QAAQ;QACd,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC9B,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Sort } from 'pega-repeating-structures-core/types/State.types';\n\nimport { NonNullSortActions } from '../../../../constants';\n\nconst sortLabels: { [key: string]: string } = {\n asc: 'Ascending',\n desc: 'Descending'\n};\n\nexport const getValidSortColumnsInRow = (\n ~~columns~~: RsCoreTypes.~~Column~~[],\n sortItems: Sort[],\n id?: Sort['columnId']\n) => {\n const existingSortItemsId = sortItems.map(s => s.columnId);\n const index = id ? existingSortItemsId.indexOf(id) : -1;\n if (index !== -1) existingSortItemsId.splice(index, 1);\n return ~~columns~~.filter(c => c.~~field.~~sort && !existingSortItemsId.includes(c.~~field.~~id));\n};\n\nexport const getValidSortOrders = () => {\n return NonNullSortActions.map(o => ({\n id: o.actionId,\n label: sortLabels[o.actionId]\n }));\n};\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,UAAU,GAA8B;IAC5C,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,SAAwC,EACxC,SAAiB,EACjB,EAAqB,EACrB,EAAE;IACF,MAAM,mBAAmB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD,IAAI,KAAK,KAAK,CAAC,CAAC;QAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACvD,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC,CAAC,QAAQ;QACd,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC9B,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Sort } from 'pega-repeating-structures-core/types/State.types';\n\nimport { NonNullSortActions } from '../../../../constants';\n\nconst sortLabels: { [key: string]: string } = {\n asc: 'Ascending',\n desc: 'Descending'\n};\n\nexport const getValidSortColumnsInRow = (\n fieldDefs: RsCoreTypes.Meta['fieldDefs'],\n sortItems: Sort[],\n id?: Sort['columnId']\n) => {\n const existingSortItemsId = sortItems.map(s => s.columnId);\n const index = id ? existingSortItemsId.indexOf(id) : -1;\n if (index !== -1) existingSortItemsId.splice(index, 1);\n return fieldDefs.filter(c => c.sort && !existingSortItemsId.includes(c.id));\n};\n\nexport const getValidSortOrders = () => {\n return NonNullSortActions.map(o => ({\n id: o.actionId,\n label: sortLabels[o.actionId]\n }));\n};\n"]}

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

@@ -1,6 +1,7 @@
 import type { RsCoreTypes } from 'pega-repeating-structures-core';
+/** Toggles word-wrap row density and restores the previous height when unwrapping. */
 export default function useWrapAction(view: RsCoreTypes.View): {
     enabled: boolean;
     onClick: () => void;
-};
+} | undefined;
 //# sourceMappingURL=useWrapAction.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useWrapAction.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useWrapAction.ts"],"names":[],"mappings":"~~AAGA~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;~~AAElE~~,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI;;;~~EAe3D~~"}
1	+ {"version":3,"file":"useWrapAction.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useWrapAction.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,sFAAsF;AACtF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI;;;cA6C3D"}

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

@@ -1,17 +1,41 @@
-import { useMemo } from 'react';
-import { ROW_DENSITY } from 'pega-repeating-structures-core/lib/types/Meta.types';
+import { useMemo, useRef } from 'react';
+import { REPEATING_STRUCTURE_TEMPLATES, ROW_DENSITY } from 'pega-repeating-structures-core/lib/types/Meta.types';
+import showFeatureForTemplate from '../../../templateFeatureSupport';
+/** Toggles word-wrap row density and restores the previous height when unwrapping. */
 export default function useWrapAction(view) {
     const { selectedHeightOption } = view.state;
-    return useMemo(() => ({
-        enabled: selectedHeightOption === ROW_DENSITY.WRAP_CONTENT,
-        onClick: () => {
-            if (selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT) {
-                view.type.applyRowHeight(ROW_DENSITY.WRAP_CONTENT);
-            }
-            else {
-                view.type.applyRowHeight(ROW_DENSITY.SHORT);
-            }
+    // TODO(TS): tighten rs-core types so Meta.template and Meta.showWrapAction are required.
+    // Then remove these fallback defaults and rely on the typed contract directly.
+    const { defaultRowHeight, showWrapAction = true, template: metaTemplate = REPEATING_STRUCTURE_TEMPLATES.TABLE } = view.meta;
+    const template = view.template ?? metaTemplate;
+    const isWrapActionEnabled = showWrapAction && showFeatureForTemplate(template, 'wrap');
+    // Track the last non-wrap height so we can restore it when unwrapping.
+    /* TODO: If wrap is persisted via personalization, the pre-wrap height is lost on reload
+     and falls back to meta default. Needs a separate state slice in RsCore to fix. */
+    const lastNonWrapHeightRef = useRef(selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT ? selectedHeightOption : undefined);
+    // Update ref only when height is a non-wrap value
+    if (selectedHeightOption && selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT) {
+        lastNonWrapHeightRef.current = selectedHeightOption;
+    }
+    return useMemo(() => {
+        if (!isWrapActionEnabled) {
+            return undefined;
         }
-    }), [selectedHeightOption]);
+        return {
+            enabled: selectedHeightOption === ROW_DENSITY.WRAP_CONTENT,
+            onClick: () => {
+                if (selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT) {
+                    view.type.applyRowHeight(ROW_DENSITY.WRAP_CONTENT);
+                }
+                else {
+                    // Disable wrap: restore last non-wrap height, fall back to meta default, then fall back to SHORT
+                    const fallbackHeight = defaultRowHeight && defaultRowHeight !== ROW_DENSITY.WRAP_CONTENT
+                        ? defaultRowHeight
+                        : ROW_DENSITY.SHORT;
+                    view.type.applyRowHeight(lastNonWrapHeightRef.current ?? fallbackHeight);
+                }
+            }
+        };
+    }, [selectedHeightOption, defaultRowHeight, isWrapActionEnabled]);
 }
 //# sourceMappingURL=useWrapAction.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useWrapAction.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useWrapAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;~~AAEhC~~,OAAO,~~EAAE~~,WAAW,~~EAAE~~,MAAM,qDAAqD,CAAC;~~AAGlF~~,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,IAAsB;IAC1D,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAC5C,OAAO,OAAO,~~CACZ~~,GAAG,EAAE,CAAC,CAAC;~~QACL~~,OAAO,EAAE,oBAAoB,KAAK,WAAW,CAAC,YAAY;~~QAC1D~~,OAAO,EAAE,GAAG,EAAE;~~YACZ~~,IAAI,oBAAoB,KAAK,WAAW,CAAC,YAAY,EAAE,CAAC;~~gBACtD~~,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;~~YACrD~~,CAAC;~~iBAAM~~,CAAC;~~gBACN~~,IAAI,CAAC,~~IAAI~~,CAAC,~~cAAc~~,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;~~YAC9C~~,CAAC;~~QACH~~,CAAC;~~KACF~~,CAAC,~~EACF~~,CAAC,oBAAoB,CAAC,~~CACvB~~,CAAC;~~AACJ~~,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { ROW_DENSITY } from 'pega-repeating-structures-core/lib/types/Meta.types';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nexport default function useWrapAction(view: RsCoreTypes.View) {\n const { selectedHeightOption } = view.state;\n ~~return~~ ~~useMemo~~(\n () => ({\n enabled: selectedHeightOption === ROW_DENSITY.WRAP_CONTENT,\n onClick: () => {\n if (selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT) {\n view.type.applyRowHeight(ROW_DENSITY.WRAP_CONTENT);\n } else {\n view.type.applyRowHeight(~~ROW_DENSITY~~.~~SHORT~~);\n }\n }\n }~~),\~~n [selectedHeightOption]\n );\n}\n"]}
1	+ {"version":3,"file":"useWrapAction.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useWrapAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,6BAA6B,EAC7B,WAAW,EACZ,MAAM,qDAAqD,CAAC;AAG7D,OAAO,sBAAsB,MAAM,iCAAiC,CAAC;AAErE,sFAAsF;AACtF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,IAAsB;IAC1D,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAC5C,yFAAyF;IACzF,+EAA+E;IAC/E,MAAM,EACJ,gBAAgB,EAChB,cAAc,GAAG,IAAI,EACrB,QAAQ,EAAE,YAAY,GAAG,6BAA6B,CAAC,KAAK,EAC7D,GAAG,IAAI,CAAC,IAAI,CAAC;IACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC;IAC/C,MAAM,mBAAmB,GAAG,cAAc,IAAI,sBAAsB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAEvF,uEAAuE;IACvE;sFACkF;IAClF,MAAM,oBAAoB,GAAG,MAAM,CACjC,oBAAoB,KAAK,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,CACrF,CAAC;IAEF,kDAAkD;IAClD,IAAI,oBAAoB,IAAI,oBAAoB,KAAK,WAAW,CAAC,YAAY,EAAE,CAAC;QAC9E,oBAAoB,CAAC,OAAO,GAAG,oBAAoB,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACzB,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO;YACL,OAAO,EAAE,oBAAoB,KAAK,WAAW,CAAC,YAAY;YAC1D,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,oBAAoB,KAAK,WAAW,CAAC,YAAY,EAAE,CAAC;oBACtD,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;gBACrD,CAAC;qBAAM,CAAC;oBACN,iGAAiG;oBACjG,MAAM,cAAc,GAClB,gBAAgB,IAAI,gBAAgB,KAAK,WAAW,CAAC,YAAY;wBAC/D,CAAC,CAAC,gBAAgB;wBAClB,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;oBACxB,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,OAAO,IAAI,cAAc,CAAC,CAAC;gBAC3E,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC;AACpE,CAAC","sourcesContent":["import { useMemo, useRef } from 'react';\n\nimport {\n REPEATING_STRUCTURE_TEMPLATES,\n ROW_DENSITY\n} from 'pega-repeating-structures-core/lib/types/Meta.types';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport showFeatureForTemplate from '../../../templateFeatureSupport';\n\n/** Toggles word-wrap row density and restores the previous height when unwrapping. /\nexport default function useWrapAction(view: RsCoreTypes.View) {\n const { selectedHeightOption } = view.state;\n // TODO(TS): tighten rs-core types so Meta.template and Meta.showWrapAction are required.\n // Then remove these fallback defaults and rely on the typed contract directly.\n const {\n defaultRowHeight,\n showWrapAction = true,\n template: metaTemplate = REPEATING_STRUCTURE_TEMPLATES.TABLE\n } = view.meta;\n const template = view.template ?? metaTemplate;\n const isWrapActionEnabled = showWrapAction && showFeatureForTemplate(template, 'wrap');\n\n // Track the last non-wrap height so we can restore it when unwrapping.\n / TODO: If wrap is persisted via personalization, the pre-wrap height is lost on reload\n and falls back to meta default. Needs a separate state slice in RsCore to fix. */\n const lastNonWrapHeightRef = useRef(\n selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT ? selectedHeightOption : undefined\n );\n\n // Update ref only when height is a non-wrap value\n if (selectedHeightOption && selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT) {\n lastNonWrapHeightRef.current = selectedHeightOption;\n }\n\n return useMemo(() => {\n if (!isWrapActionEnabled) {\n return undefined;\n }\n\n return {\n enabled: selectedHeightOption === ROW_DENSITY.WRAP_CONTENT,\n onClick: () => {\n if (selectedHeightOption !== ROW_DENSITY.WRAP_CONTENT) {\n view.type.applyRowHeight(ROW_DENSITY.WRAP_CONTENT);\n } else {\n // Disable wrap: restore last non-wrap height, fall back to meta default, then fall back to SHORT\n const fallbackHeight =\n defaultRowHeight && defaultRowHeight !== ROW_DENSITY.WRAP_CONTENT\n ? defaultRowHeight\n : ROW_DENSITY.SHORT;\n view.type.applyRowHeight(lastNonWrapHeightRef.current ?? fallbackHeight);\n }\n }\n };\n }, [selectedHeightOption, defaultRowHeight, isWrapActionEnabled]);\n}\n"]}

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

@@ -2,9 +2,11 @@ export default getMenuItemsFromColumns;
 /**
  * returns copy of embedded property's leafNode model from store or null
  * @function getMenuItemsFromColumns
- * @param {array} columns columns array containing each column object
+ * @param fieldDefs - field definitions to build menu items from
  * @param {string} fieldProp value for id prop(either 'name' of 'id')
- * @param {string} selectedField field which is already selected as part of sort/group/filter action
+ * @param options.selectedField - field id that is already selected (for sort/group/filter actions)
+ * @param options.columns - live column objects that expose `field.filterPickList` and `getUniqueValues()`
+ * @param options.defaultType - fallback field type if not specified on the field definition
  * @returns {array} returns an array of objects where each object is one category
  *
  * @example <caption>Example for getMenuItemsFromColumns.</caption>
@@ -28,24 +30,43 @@ export default getMenuItemsFromColumns;
       id: '3',
       category: [{ label: 'Profile' }],
       sort: true
+    },
+    {
+      type: 'text',
+      name: 'pyOperatorName',
+      label: 'Operator name',
+      id: '4',
+      filterPicklist:true
     }
   ]
  *
- * getMenuItemsFromColumns(columns) returns :
+ * getMenuItemsFromColumns(fieldDefs) returns :
  * [
     {
-      id: 'ID',
+      id: 'pyID',
       primary: ID,
       items: undefined,
       selected: undefined
     },
     {
-      id: ‘Bugs Class’,
-      primary: ‘Bugs Class’,
+      id: ‘pyLabel’,
+      primary: ‘Name’,
       selected: undefined,
       items: [ {id: ‘Priority', primary: ‘Priority’, selected: true, items: undefined}]
+    },
+    {
+      id: 'pyOperatorName',
+      primary: 'Operator name',
+      selected: undefined,
+      possibleValues: function() {
+        // Fetch unique values for Operator name column
+      }
     }
   ]
 */
-declare function getMenuItemsFromColumns(columns: array, fieldProp: string, selectedField: string, defaultType?: "text"): array;
+declare function getMenuItemsFromColumns(fieldDefs: any, fieldProp: string, { selectedField, columns, defaultType }?: {
+    columns?: never[] | undefined;
+    defaultType?: "text" | undefined;
+}): array;
 //# sourceMappingURL=utils.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/utils/utils.js"],"names":[],"mappings":";AAkCA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE~~;AAEF,~~kDA9CW~~,~~KAAK,aACL,~~MAAM,~~iBACN,MAAM,yBACJ,~~KAAK,~~CAmEjB~~"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/utils/utils.js"],"names":[],"mappings":";AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEE;AAEF,oEA/DW,MAAM;;;IAIJ,KAAK,CA2GjB"}