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

@pega/lists-react 9.0.0-build.2.9 → 9.0.0-build.20.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 (414) hide show

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

@@ -1,18 +1,38 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, SearchInput, Menu, menuHelpers, useElement } from '@pega/cosmos-react-core';
-import useSelect from '../../Hooks/useSelect';
+import styled from 'styled-components';
+import { Icon, SearchInput, Menu, menuHelpers, useElement, Flex, Button } from '@pega/cosmos-react-core';
 import { allowToggle, getFieldIcon } from '../../Utils';
+import useTranslate from '../../Hooks/useTranslate';
 export const colsVisibility = 'Show/hide columns';
 export const pinning = 'Freeze columns';
+/**
+ * Returns an Icon component based on the field type.
+ *
+ * @param {string} type - The type of the field for which the icon is required.
+ * @returns {JSX.Element} - A React Icon component with the appropriate icon name.
+ */
 export function getIconByFieldType(type) {
     const iconName = getFieldIcon(type);
     return _jsx(Icon, { "data-test-id": iconName, "data-testid": iconName, name: iconName });
 }
+/**
+ * Determines the list of changed column IDs.
+ *
+ * @param {Set<string>} initialSelectedColumns - The initial set of selected column IDs.
+ * @param {Set<string>} currentSelectedColumns - The current set of selected column IDs.
+ * @returns {string[]} - Array of modified column IDs.
+ */
+function getModifiedColumns(initialSelectedColumns, currentSelectedColumns) {
+    const addedColumns = [...currentSelectedColumns].filter(id => !initialSelectedColumns.has(id));
+    const removedColumns = [...initialSelectedColumns].filter(id => !currentSelectedColumns.has(id));
+    return [...addedColumns, ...removedColumns];
+}
 /**
  * Transforms the columns array into array of columns grouped by category
- * @param {Array} columns : ;
+ * @param {Array} columns - The array of column objects to be transformed.
+ * @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) {
@@ -26,35 +46,33 @@ export function transformData(columns, action) {
         .forEach(column => {
         const { field: { id, category = [], type }, label, hidden, frozen } = column;
         const lastCategoryLabel = category.length ? category[category.length - 1].label : undefined;
-        let selectAction;
         let disabled;
         if (action === colsVisibility) {
-            selectAction = !hidden;
             disabled = !allowColumnToggle && !hidden;
         }
-        else if (action === pinning)
-            selectAction = frozen;
         if (categoryObj[lastCategoryLabel])
             categoryObj[lastCategoryLabel].items.push({
                 id,
                 primary: label,
                 label,
-                selected: selectAction,
+                selected: action === colsVisibility ? !hidden : frozen,
                 type,
-                disabled
+                disabled,
+                visual: getIconByFieldType(type)
             });
         else {
             categoryObj[lastCategoryLabel] = {
                 id: `category:${lastCategoryLabel}`,
-                label: lastCategoryLabel,
+                primary: lastCategoryLabel,
                 items: [
                     {
                         id,
                         primary: label,
-                        selected: selectAction,
+                        selected: action === colsVisibility ? !hidden : frozen,
                         label,
                         type,
-                        disabled
+                        disabled,
+                        visual: getIconByFieldType(type)
                     }
                 ]
             };
@@ -72,69 +90,75 @@ export function transformData(columns, action) {
     });
     return result;
 }
+const Footer = memo(({ onCancel, onSubmit, disabled }) => {
+    const [translate] = useTranslate();
+    return (_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, "data-testid": 'cancel', children: translate('Cancel') }), _jsx(Button, { variant: 'primary', onClick: onSubmit, disabled: disabled, "data-testid": 'submit', children: translate('Submit') })] }));
+});
+Footer.displayName = 'Footer';
+Footer.propTypes = {
+    onCancel: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    disabled: PropTypes.bool.isRequired
+};
+const StyledMenu = styled(Menu) `
+  width: 16rem;
+`;
 export function ColumnSelectorControl(props) {
-    const { data, onSelect, forceShowPopup } = props;
-    const flatData = menuHelpers.flatten(data);
-    data.forEach(d => {
-        if (d.items)
-            d.items.forEach(item => {
-                item.visual = getIconByFieldType(item.type);
-            });
-        else {
-            d.visual = getIconByFieldType(d.type);
-        }
-    });
-    const selectedData = flatData.filter(o => o.selected).map(obj => obj.id);
-    const [visibleColumns, onChecked] = useSelect(selectedData);
-    const onChange = useCallback(id => onChecked(id), [onChecked]);
-    const [searchQuery, onSearch] = useState('');
-    const [searchEl, setSearchEl] = useElement(null);
-    const hasMountedRef = useRef(false);
-    const onSearchTriggered = useCallback(searchString => {
-        onSearch(searchString);
-    }, [onSearch]);
-    useEffect(() => {
-        if (forceShowPopup && searchEl)
-            searchEl.focus();
-    }, [forceShowPopup, searchEl]);
+    const { data, onSubmit, onCancel, action } = props;
+    const initialSelectedColumns = useMemo(() => new Set(menuHelpers
+        .flatten(data)
+        .filter(item => item.selected)
+        .map(item => item.id)), [data]);
+    const [searchText, setSearchText] = useState('');
+    const [searchRef, setSearchRef] = useElement(null);
+    const [items, setItems] = useState(data);
+    const selectedColumns = useMemo(() => new Set(menuHelpers.getSelected(items).map(item => item.id)), [items]);
     useEffect(() => {
-        if (hasMountedRef.current) {
-            const previousVisibleColumns = flatData.filter(o => o.selected).map(o => o.id);
-            const currentVisibleColumns = [...visibleColumns];
-            const toggledColumns = [
-                ...currentVisibleColumns.filter(id => !previousVisibleColumns.includes(id)),
-                ...previousVisibleColumns.filter(id => !visibleColumns.has(id))
-            ];
-            onSelect(toggledColumns);
+        if (searchRef) {
+            searchRef.focus();
         }
-        hasMountedRef.current = true;
-    }, [visibleColumns]);
-    const itemsToRender = searchQuery
-        ? flatData.filter(item => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
-        : data;
-    return (_jsx(Menu, { items: itemsToRender, mode: 'multi-select', onItemClick: onChange, role: 'listbox', focusControlEl: searchEl || undefined, header: _jsx(SearchInput, { value: searchQuery, onSearchChange: onSearchTriggered, ref: setSearchEl }) }));
+    }, [searchRef]);
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(searchText
+            ? menuHelpers
+                .flatten(items)
+                .filter(({ primary }) => primary.toLowerCase().includes(searchText.toLowerCase()))
+            : items, item => {
+            return {
+                ...item,
+                visual: item.visual,
+                selected: item.items ? undefined : item.selected,
+                disabled: item.selected && action === colsVisibility && selectedColumns.size <= 1
+            };
+        });
+    }, [searchText, items]);
+    const modifiedColumns = useMemo(() => getModifiedColumns(initialSelectedColumns, selectedColumns), [initialSelectedColumns, selectedColumns, action]);
+    const isSubmitEnabled = !(action === colsVisibility && selectedColumns.size === 0) && modifiedColumns.length > 0;
+    return (_jsx(StyledMenu, { items: itemsToRender, mode: 'multi-select', onItemClick: (id, args) => {
+            setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
+        }, role: 'listbox', focusControlEl: searchRef || undefined, header: _jsx(SearchInput, { value: searchText, onSearchChange: setSearchText, ref: setSearchRef }), footer: _jsx(Footer, { onCancel: onCancel, onSubmit: () => onSubmit(modifiedColumns), disabled: !isSubmitEnabled }) }));
 }
 ColumnSelectorControl.propTypes = {
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
-    onSelect: PropTypes.func.isRequired,
-    forceShowPopup: PropTypes.bool.isRequired
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    action: PropTypes.string.isRequired
 };
-function ColumnSelector({ dispatch, columns, action }) {
-    const data = useMemo(() => transformData(columns, action), [columns, action]);
-    const [forceShowPopup, setForceShowPopup] = useState(true);
-    const onSelectHandler = useCallback(cols => {
-        if (columns.length > 100) {
-            setForceShowPopup(false);
+function ColumnSelector({ dispatch, columns, action, finishPopOver }) {
+    const transformed = useMemo(() => transformData(columns, action), [columns, action]);
+    const onSubmitHandler = useCallback(changedCols => {
+        if (changedCols.length > 0) {
+            dispatch(changedCols);
         }
-        if (cols.length > 0)
-            dispatch(cols);
-    }, [dispatch, columns.length]);
-    return (_jsx(_Fragment, { children: forceShowPopup && (_jsx(ColumnSelectorControl, { data: data, onSelect: onSelectHandler, forceShowPopup: forceShowPopup })) }));
+        finishPopOver();
+    }, [dispatch]);
+    return (_jsx(ColumnSelectorControl, { data: transformed, onSubmit: onSubmitHandler, onCancel: finishPopOver, action: action }));
 }
 ColumnSelector.propTypes = {
     dispatch: PropTypes.func.isRequired,
     columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-    action: PropTypes.string.isRequired
+    action: PropTypes.string.isRequired,
+    finishPopOver: PropTypes.func.isRequired
 };
 export default memo(ColumnSelector);
 //# sourceMappingURL=ColumnSelector.js.map

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, useRef, useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Icon, SearchInput, Menu, menuHelpers, useElement } from '@pega/cosmos-react-core';\n\nimport useSelect from '../../Hooks/useSelect';\nimport { allowToggle, getFieldIcon } from '../../Utils';\n\nexport const colsVisibility = 'Show/hide columns';\nexport const pinning = 'Freeze columns';\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 Transforms the columns array into array of columns grouped by category\n * @param {Array} 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 selectAction;\n let disabled;\n if (action === colsVisibility) {\n selectAction = !hidden;\n disabled = !allowColumnToggle && !hidden;\n } else if (action === pinning) selectAction = frozen;\n if (categoryObj[lastCategoryLabel])\n categoryObj[lastCategoryLabel].items.push({\n id,\n primary: label,\n label,\n selected: selectAction,\n type,\n disabled\n });\n else {\n categoryObj[lastCategoryLabel] = {\n id: `category:${lastCategoryLabel}`,\n label: lastCategoryLabel,\n items: [\n {\n id,\n primary: label,\n selected: selectAction,\n label,\n type,\n disabled\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 return result;\n}\n\nexport function ColumnSelectorControl(props) {\n const { data, onSelect, forceShowPopup } = props;\n const flatData = menuHelpers.flatten(data);\n\n data.forEach(d => {\n if (d.items)\n d.items.forEach(item => {\n item.visual = getIconByFieldType(item.type);\n });\n else {\n d.visual = getIconByFieldType(d.type);\n }\n });\n\n const selectedData = flatData.filter(o => o.selected).map(obj => obj.id);\n const [visibleColumns, onChecked] = useSelect(selectedData);\n const onChange = useCallback(id => onChecked(id), [onChecked]);\n const [searchQuery, onSearch] = useState('');\n const [searchEl, setSearchEl] = useElement(null);\n\n const hasMountedRef = useRef(false);\n\n const onSearchTriggered = useCallback(\n searchString => {\n onSearch(searchString);\n },\n [onSearch]\n );\n\n useEffect(() => {\n if (forceShowPopup && searchEl) searchEl.focus();\n }, [forceShowPopup, searchEl]);\n\n useEffect(() => {\n if (hasMountedRef.current) {\n const previousVisibleColumns = flatData.filter(o => o.selected).map(o => o.id);\n const currentVisibleColumns = [...visibleColumns];\n const toggledColumns = [\n ...currentVisibleColumns.filter(id => !previousVisibleColumns.includes(id)),\n ...previousVisibleColumns.filter(id => !visibleColumns.has(id))\n ];\n onSelect(toggledColumns);\n }\n hasMountedRef.current = true;\n }, [visibleColumns]);\n\n const itemsToRender = searchQuery\n ? flatData.filter(item => item.label.toLowerCase().includes(searchQuery.toLowerCase()))\n : data;\n\n return (\n <Menu\n items={itemsToRender}\n mode='multi-select'\n onItemClick={onChange}\n role='listbox'\n focusControlEl={searchEl \|\| undefined}\n header={\n <SearchInput value={searchQuery} onSearchChange={onSearchTriggered} ref={setSearchEl} />\n }\n />\n );\n}\n\nColumnSelectorControl.propTypes = {\n data: PropTypes.arrayOf(PropTypes.object).isRequired,\n onSelect: PropTypes.func.isRequired,\n forceShowPopup: PropTypes.bool.isRequired\n};\n\nfunction ColumnSelector({ dispatch, columns, action }) {\n const data = useMemo(() => transformData(columns, action), [columns, action]);\n const [forceShowPopup, setForceShowPopup] = useState(true);\n const onSelectHandler = useCallback(\n cols => {\n if (columns.length > 100) {\n setForceShowPopup(false);\n }\n if (cols.length > 0) dispatch(cols);\n },\n [dispatch, columns.length]\n );\n\n return (\n <>\n {forceShowPopup && (\n <ColumnSelectorControl\n data={data}\n onSelect={onSelectHandler}\n forceShowPopup={forceShowPopup}\n />\n )}\n </>\n );\n}\n\nColumnSelector.propTypes = {\n dispatch: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.object).isRequired,\n action: PropTypes.string.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 { 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"]}

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

@@ -1,8 +1,8 @@
 declare const _default: import("react").MemoExoticComponent<typeof DebugInfo>;
 export default _default;
-declare function DebugInfo({ view, targetRef, onClose }: {
+declare function DebugInfo({ view, target, onClose }: {
     view: any;
-    targetRef: any;
+    target: any;
     onClose: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace DebugInfo {
@@ -10,9 +10,7 @@ declare namespace DebugInfo {
         let view: PropTypes.Validator<{
             [x: string]: any;
         }>;
-        let targetRef: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            current: PropTypes.Requireable<Element>;
-        }>>>;
+        let target: PropTypes.Requireable<Element>;
         let onClose: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DebugInfo.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":";;AAgBA;;;;4CAwCC~~;;;;;;;;;;;;~~sBAvDqB,YAAY"}
1	+ {"version":3,"file":"DebugInfo.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":";;AAgBA;;;;4CAwCC;;;;;;;;;;sBAvDqB,YAAY"}

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

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

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

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

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

@@ -6,6 +6,7 @@ declare namespace FieldSelector {
         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>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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