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

@pega/lists-react 9.0.0-build.11.4 → 9.0.0-build.11.6

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

package/lib/Core/Components/ContextMenu/ContextMenuContainer.d.ts CHANGED Viewed

@@ -1,17 +1,8 @@
-declare function ContextMenuContainer({ view, selector }: {
-    view: any;
-    selector: any;
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+export default function ContextMenuContainer({ view, selector }: {
+    view: RsCoreTypes.View;
+    selector: {
+        query: string;
+    };
 }): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ContextMenuContainer {
-    namespace propTypes {
-        let view: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-        let selector: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-    }
-}
-export default ContextMenuContainer;
-import PropTypes from 'prop-types';
 //# sourceMappingURL=ContextMenuContainer.d.ts.map

package/lib/Core/Components/ContextMenu/ContextMenuContainer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.~~jsx~~"],"names":[],"mappings":"~~AA4MA;;;mDA+GC;;;;;;;;;;;;sBA3TqB~~,~~YAAY~~"}
1	+ {"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA0FlE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,IAAI,EACJ,QAAQ,EACT,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7B,kDAyGA"}

package/lib/Core/Components/ContextMenu/ContextMenuContainer.js CHANGED Viewed

@@ -1,136 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-import { mix } from 'polished';
-import { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { Popover, Icon, useElement, useOuterEvent, Menu, isInstance } from '@pega/cosmos-react-core';
 import { getRowContextData, getScrollerElem, isFilterApplied } from 'pega-repeating-structures-core';
-import { createClassName as cx } from '../../Utils';
 import useTranslate from '../../Hooks/useTranslate';
 import useScrollAway from '../../Hooks/useScrollAway';
+import TestIdConstants from '../TestIdConstants';
 import { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';
 import copyText from './CopyPaste';
-const StyledPopover = styled.div `
-  width: 10rem;
-`;
-const StyledContent = styled.div(({ theme }) => {
-    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
-    return css `
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0.25rem;
-    border-radius: 0.156rem;
-    box-sizing: border-box;
-    cursor: pointer;
-    margin-top: 0.125rem;
-    margin-bottom: 0.125rem;
-    :hover {
-      background-color: ${hoverColor};
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-  `;
-});
-const StyledListItem = styled.div(({ theme }) => {
-    return css `
-    button {
-      display: flex;
-      align-items: center;
-      /* stylelint-disable unit-allowed-list */
-      padding: 4px 8px;
-    }
-    .label {
-      padding-left: 14px;
-      vertical-align: text-top;
-    }
-    .disabled {
-      padding-left: 14px;
-      vertical-align: text-top;
-      opacity: ${theme.base['disabled-opacity']};
-    }
-  `;
-});
-const StyledButton = styled.button `
-  display: block;
-  text-align: start;
-  background: none;
-  border: none;
-  line-height: 1;
-  outline: none;
-  cursor: pointer;
-  color: ${props => props.theme.base.palette['foreground-color']};
-  border-radius: 0;
-`;
-const getDefaultMenuItems = (column, rowContextData, targetCell, columns, filterExpression, actionColumnFiltering, actionClearFiltering, translate) => {
-    const isFiltered = isFilterApplied(column, filterExpression);
-    return [
-        {
+const getMenuItems = (targetCell, column, rowContextData, view, translate) => {
+    const { columns = [], state: { filterExpression } = {}, type: { applyFilter: applyViewFilter, clearFilter } } = view;
+    const defaultMenuItems = [];
+    if (quickFilterEnabled(columns, column.field.id)) {
+        const isFiltered = filterExpression && isFilterApplied(column, filterExpression);
+        defaultMenuItems.push({
             id: 'quickFilter',
-            icon: isFiltered ? 'times' : 'filter',
-            label: isFiltered ? translate('Remove filter') : translate('Filter by this'),
-            show: !!quickFilterEnabled(columns, column.field.id),
-            disabled: false,
+            visual: isFiltered ? _jsx(Icon, { name: 'times' }) : _jsx(Icon, { name: 'filter' }),
+            primary: isFiltered ? translate('Remove filter') : translate('Filter by this'),
             onClick: () => {
                 if (isFiltered) {
-                    return removeFilter(filterExpression, targetCell, actionColumnFiltering, actionClearFiltering);
+                    removeFilter(filterExpression, targetCell, applyViewFilter, clearFilter);
+                }
+                else {
+                    applyFilter(columns, targetCell, rowContextData, filterExpression, applyViewFilter);
                 }
-                return applyFilter(columns, targetCell, rowContextData, filterExpression, actionColumnFiltering);
             }
-        },
-        {
-            id: 'copyText',
-            icon: 'copy',
-            label: translate('Copy text'),
-            show: true,
-            disabled: false,
-            onClick: () => copyText(targetCell)
-        },
-        {
-            id: 'pasteText',
-            icon: 'documents',
-            label: translate('Paste text'),
-            show: true,
-            disabled: true,
-            onClick: () => { }
-        }
-    ];
-};
-const getMenuItems = (targetCell, column, rowContextData, columns, filterExpression, actionColumnFiltering, actionClearFiltering, translate) => {
-    const fieldContextOptions = column.field?.contextMenuOptions || [];
-    return [
-        ...getDefaultMenuItems(column, rowContextData, targetCell, columns, filterExpression, actionColumnFiltering, actionClearFiltering, translate),
-        ...fieldContextOptions
-    ];
-};
-const shouldOverrideContextMenu = (targetCell, columns) => {
-    if (!targetCell) {
-        return false;
+        });
     }
+    defaultMenuItems.push({
+        id: 'copyText',
+        visual: _jsx(Icon, { name: 'copy' }),
+        primary: translate('Copy text'),
+        onClick: () => copyText(targetCell)
+    });
+    const fieldSpecificMenuItems = (column.field?.contextMenuOptions || []).map(option => ({
+        id: option.id,
+        visual: option.icon ? _jsx(Icon, { name: option.icon }) : undefined,
+        primary: option.label || '',
+        onClick: () => option.onClick?.(targetCell)
+    }));
+    return [...defaultMenuItems, ...fieldSpecificMenuItems];
+};
+const shouldOverrideContextMenu = (targetCell, columns = []) => {
     const { colId } = targetCell.dataset;
     const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) || {};
     return !(!field || field?.noContextMenu);
 };
-const MenuItem = ({ menu = {}, target = {}, column = {}, rowContextData = {}, onMenuItemClick = () => { } }) => {
-    const { onClick = () => { }, icon, disabled = false, show = true, label } = menu;
-    if (!show) {
-        return null;
-    }
-    return (_jsx(StyledContent, { onClick: () => {
-            onMenuItemClick();
-            onClick(target, column, rowContextData);
-        }, children: _jsx(StyledListItem, { children: _jsxs(StyledButton, { children: [icon && _jsx(Icon, { name: icon }), _jsx("span", { className: cx('label', { disabled }), children: label })] }) }) }));
-};
-MenuItem.propTypes = {
-    menu: PropTypes.objectOf(PropTypes.any),
-    target: PropTypes.objectOf(PropTypes.any),
-    column: PropTypes.objectOf(PropTypes.any),
-    rowContextData: PropTypes.objectOf(PropTypes.any),
-    onMenuItemClick: PropTypes.func
-};
 export default function ContextMenuContainer({ view, selector }) {
-    const { columns, data, state: { paginationOptions, filterExpression } = {}, domContainer, type: { applyFilter: applyViewFilter, clearFilter } } = view;
+    const { columns = [], data = [], state: { paginationOptions } = {}, domContainer } = view;
     const [translate] = useTranslate();
-    const contextMenuRef = useRef({}).current;
+    const [menuContext, setMenuContext] = useState(null);
     const [showMenu, setShowMenu] = useState(false);
     const [menuItems, setMenuItems] = useState([]);
     const [popperRef, setPopperRef] = useElement();
@@ -141,63 +60,70 @@ export default function ContextMenuContainer({ view, selector }) {
     useScrollAway(popperRef, scrollerElem, () => {
         setShowMenu(false);
     });
-    const onMenuItemClick = useCallback(event => {
-        if (event && event.key !== 'Escape') {
-            return;
+    useEffect(() => {
+        if (!showMenu) {
+            const targetCell = menuContext?.targetCell;
+            if (targetCell) {
+                targetCell.removeAttribute('data-context-menu-active');
+                targetCell.removeAttribute('aria-expanded');
+                targetCell.removeAttribute('aria-controls');
+            }
+            setMenuContext(null);
         }
-        setShowMenu(false);
-    }, []);
-    const contextMenuListener = useCallback(e => {
-        const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;
-        if (shouldOverrideContextMenu(targetElement, columns) &&
-            // TODO: We will add "Open link in new tab" option in context menu once the custom context menu is made accessible.
-            !e.target.closest('a')) {
+    }, [showMenu]);
+    const contextMenuListener = useCallback((e) => {
+        const target = e.target;
+        if (!isInstance(target, Element))
+            return;
+        const targetElement = target.closest(selector.query.toString());
+        if (!isInstance(targetElement, HTMLElement))
+            return;
+        if (shouldOverrideContextMenu(targetElement, columns) && !target.closest('a')) {
             e.stopPropagation();
             e.preventDefault();
-            contextMenuRef.targetCell = targetElement;
-            const { colId } = contextMenuRef.targetCell.dataset;
-            contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());
-            contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);
-            targetElement.classList.add('selection-border', 'disable-select');
-            const options = getMenuItems(targetElement, contextMenuRef.column, contextMenuRef.rowContextData, columns, filterExpression, applyViewFilter, clearFilter, translate);
+            const { colId } = targetElement.dataset;
+            const column = columns.find(col => col.field.id.toString() === colId?.toString());
+            if (!column)
+                return;
+            targetElement.setAttribute('data-context-menu-active', 'true');
+            targetElement.setAttribute('aria-expanded', 'true');
+            const menuId = `rs-context-menu-${uuidV4()}`;
+            targetElement.setAttribute('aria-controls', menuId);
+            const rowContextData = getRowContextData(data, paginationOptions || {}, targetElement);
+            const options = getMenuItems(targetElement, column, rowContextData, view, translate);
+            if (!options.length)
+                return;
             setShowMenu(true);
             setMenuItems(options);
+            setMenuContext({
+                column,
+                targetCell: targetElement,
+                rowContextData,
+                menuId
+            });
         }
-    }, [
-        selector,
-        columns,
-        contextMenuRef.targetCell,
-        contextMenuRef.column,
-        contextMenuRef.rowContextData,
-        data,
-        paginationOptions,
-        filterExpression,
-        applyViewFilter,
-        clearFilter,
-        translate
-    ]);
+    }, [selector, columns, data, paginationOptions, translate, view]);
+    const onKeydown = useCallback(({ key }) => {
+        if (key === 'Escape')
+            setShowMenu(false);
+    }, []);
     useEffect(() => {
-        if (domContainer) {
-            domContainer.addEventListener('contextmenu', contextMenuListener);
-            domContainer.addEventListener('keydown', onMenuItemClick);
-        }
+        const abortController = new AbortController();
+        if (!domContainer)
+            return;
+        domContainer.addEventListener('contextmenu', contextMenuListener, {
+            signal: abortController.signal
+        });
+        document.addEventListener('keydown', onKeydown, {
+            signal: abortController.signal
+        });
         return () => {
-            if (domContainer) {
-                domContainer.removeEventListener('contextmenu', contextMenuListener);
-                domContainer.removeEventListener('keydown', onMenuItemClick);
-            }
+            abortController.abort();
         };
-    }, [domContainer, contextMenuListener, onMenuItemClick]);
-    if (!contextMenuRef.targetCell || !showMenu || !domContainer) {
-        if (contextMenuRef.targetCell && selector) {
-            contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');
-        }
-        return null;
-    }
-    return (_jsx(Popover, { portal: true, ref: setPopperRef, target: contextMenuRef.targetCell, children: _jsx(StyledPopover, { children: menuItems.map(menu => (_jsx(MenuItem, { onMenuItemClick: onMenuItemClick, target: contextMenuRef.targetCell, column: contextMenuRef.column, rowContextData: contextMenuRef.rowContextData, menu: menu }, menu.id))) }) }));
+    }, [domContainer, contextMenuListener]);
+    return showMenu && menuContext ? (_jsx(Popover, { ref: setPopperRef, target: menuContext.targetCell, children: _jsx(Menu, { id: menuContext.menuId, items: menuItems, onItemClick: (_, e) => {
+                e.preventDefault();
+                setShowMenu(false);
+            }, focusControlEl: menuContext.targetCell, className: 'action-menu', "data-testid": TestIdConstants.contextMenu, "data-test-id": 'action-menu' }) })) : null;
 }
-ContextMenuContainer.propTypes = {
-    view: PropTypes.objectOf(PropTypes.any).isRequired,
-    selector: PropTypes.objectOf(PropTypes.any).isRequired
-};
 //# sourceMappingURL=ContextMenuContainer.js.map

package/lib/Core/Components/ContextMenu/ContextMenuContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useState, useMemo, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';\nimport {\n getRowContextData,\n getScrollerElem,\n isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\nconst StyledPopover = styled.div`\n width: 10rem;\n`;\n\nconst StyledContent = styled.div(({ theme }) => {\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 0.25rem;\n border-radius: 0.156rem;\n box-sizing: border-box;\n cursor: pointer;\n margin-top: 0.125rem;\n margin-bottom: 0.125rem;\n :hover {\n background-color: ${hoverColor};\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nconst StyledListItem = styled.div(({ theme }) => {\n return css`\n button {\n display: flex;\n align-items: center;\n /* stylelint-disable unit-allowed-list */\n padding: 4px 8px;\n }\n .label {\n padding-left: 14px;\n vertical-align: text-top;\n }\n .disabled {\n padding-left: 14px;\n vertical-align: text-top;\n opacity: ${theme.base['disabled-opacity']};\n }\n `;\n});\n\nconst StyledButton = styled.button`\n display: block;\n text-align: start;\n background: none;\n border: none;\n line-height: 1;\n outline: none;\n cursor: pointer;\n color: ${props => props.theme.base.palette['foreground-color']};\n border-radius: 0;\n`;\n\nconst getDefaultMenuItems = (\n column,\n rowContextData,\n targetCell,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n) => {\n const isFiltered = isFilterApplied(column, filterExpression);\n return [\n {\n id: 'quickFilter',\n icon: isFiltered ? 'times' : 'filter',\n label: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n show: !!quickFilterEnabled(columns, column.field.id),\n disabled: false,\n onClick: () => {\n if (isFiltered) {\n return removeFilter(\n filterExpression,\n targetCell,\n actionColumnFiltering,\n actionClearFiltering\n );\n }\n return applyFilter(\n columns,\n targetCell,\n rowContextData,\n filterExpression,\n actionColumnFiltering\n );\n }\n },\n {\n id: 'copyText',\n icon: 'copy',\n label: translate('Copy text'),\n show: true,\n disabled: false,\n onClick: () => copyText(targetCell)\n },\n {\n id: 'pasteText',\n icon: 'documents',\n label: translate('Paste text'),\n show: true,\n disabled: true,\n onClick: () => {}\n }\n ];\n};\n\nconst getMenuItems = (\n targetCell,\n column,\n rowContextData,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n) => {\n const fieldContextOptions = column.field?.contextMenuOptions \|\| [];\n return [\n ...getDefaultMenuItems(\n column,\n rowContextData,\n targetCell,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n ),\n ...fieldContextOptions\n ];\n};\n\nconst shouldOverrideContextMenu = (targetCell, columns) => {\n if (!targetCell) {\n return false;\n }\n const { colId } = targetCell.dataset;\n\n const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) \|\| {};\n return !(!field \|\| field?.noContextMenu);\n};\n\nconst MenuItem = ({\n menu = {},\n target = {},\n column = {},\n rowContextData = {},\n onMenuItemClick = () => {}\n}) => {\n const { onClick = () => {}, icon, disabled = false, show = true, label } = menu;\n if (!show) {\n return null;\n }\n\n return (\n <StyledContent\n onClick={() => {\n onMenuItemClick();\n onClick(target, column, rowContextData);\n }}\n >\n <StyledListItem>\n <StyledButton>\n {icon && <Icon name={icon} />}\n <span className={cx('label', { disabled })}>{label}</span>\n </StyledButton>\n </StyledListItem>\n </StyledContent>\n );\n};\n\nMenuItem.propTypes = {\n menu: PropTypes.objectOf(PropTypes.any),\n target: PropTypes.objectOf(PropTypes.any),\n column: PropTypes.objectOf(PropTypes.any),\n rowContextData: PropTypes.objectOf(PropTypes.any),\n onMenuItemClick: PropTypes.func\n};\n\nexport default function ContextMenuContainer({ view, selector }) {\n const {\n columns,\n data,\n state: { paginationOptions, filterExpression } = {},\n domContainer,\n type: { applyFilter: applyViewFilter, clearFilter }\n } = view;\n const [translate] = useTranslate();\n const contextMenuRef = useRef({}).current;\n const [showMenu, setShowMenu] = useState(false);\n const [menuItems, setMenuItems] = useState([]);\n const [popperRef, setPopperRef] = useElement();\n const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n setShowMenu(false);\n });\n\n useScrollAway(popperRef, scrollerElem, () => {\n setShowMenu(false);\n });\n\n const onMenuItemClick = useCallback(event => {\n if (event && event.key !== 'Escape') {\n return;\n }\n setShowMenu(false);\n }, []);\n\n const contextMenuListener = useCallback(\n e => {\n const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;\n if (\n shouldOverrideContextMenu(targetElement, columns) &&\n // TODO: We will add \"Open link in new tab\" option in context menu once the custom context menu is made accessible.\n !e.target.closest('a')\n ) {\n e.stopPropagation();\n e.preventDefault();\n contextMenuRef.targetCell = targetElement;\n const { colId } = contextMenuRef.targetCell.dataset;\n contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());\n contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);\n targetElement.classList.add('selection-border', 'disable-select');\n const options = getMenuItems(\n targetElement,\n contextMenuRef.column,\n contextMenuRef.rowContextData,\n columns,\n filterExpression,\n applyViewFilter,\n clearFilter,\n translate\n );\n setShowMenu(true);\n setMenuItems(options);\n }\n },\n\n [\n selector,\n columns,\n contextMenuRef.targetCell,\n contextMenuRef.column,\n contextMenuRef.rowContextData,\n data,\n paginationOptions,\n filterExpression,\n applyViewFilter,\n clearFilter,\n translate\n ]\n );\n\n useEffect(() => {\n if (domContainer) {\n domContainer.addEventListener('contextmenu', contextMenuListener);\n domContainer.addEventListener('keydown', onMenuItemClick);\n }\n return () => {\n if (domContainer) {\n domContainer.removeEventListener('contextmenu', contextMenuListener);\n domContainer.removeEventListener('keydown', onMenuItemClick);\n }\n };\n }, [domContainer, contextMenuListener, onMenuItemClick]);\n\n if (!contextMenuRef.targetCell \|\| !showMenu \|\| !domContainer) {\n if (contextMenuRef.targetCell && selector) {\n contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');\n }\n return null;\n }\n\n return (\n <Popover portal ref={setPopperRef} target={contextMenuRef.targetCell}>\n <StyledPopover>\n {menuItems.map(menu => (\n <MenuItem\n key={menu.id}\n onMenuItemClick={onMenuItemClick}\n target={contextMenuRef.targetCell}\n column={contextMenuRef.column}\n rowContextData={contextMenuRef.rowContextData}\n menu={menu}\n />\n ))}\n </StyledPopover>\n </Popover>\n );\n}\n\nContextMenuContainer.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n selector: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
1	+ {"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useCallback } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport {\n Popover,\n Icon,\n useElement,\n useOuterEvent,\n Menu,\n isInstance\n} from '@pega/cosmos-react-core';\nimport {\n getRowContextData,\n getScrollerElem,\n isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\nimport TestIdConstants from '../TestIdConstants';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\ntype MenuContext = {\n targetCell: HTMLElement;\n column: RsCoreTypes.Column;\n rowContextData: RsCoreTypes.RowData;\n menuId: string;\n} \| null;\n\nconst getMenuItems = (\n targetCell: HTMLElement,\n column: RsCoreTypes.Column,\n rowContextData: RsCoreTypes.RowData,\n view: RsCoreTypes.View,\n translate: (key: string) => string\n): MenuItemProps[] => {\n const {\n columns = [],\n state: { filterExpression } = {},\n type: { applyFilter: applyViewFilter, clearFilter }\n } = view;\n const defaultMenuItems: MenuItemProps[] = [];\n\n if (quickFilterEnabled(columns, column.field.id)) {\n const isFiltered = filterExpression && isFilterApplied(column, filterExpression);\n defaultMenuItems.push({\n id: 'quickFilter',\n visual: isFiltered ? <Icon name='times' /> : <Icon name='filter' />,\n primary: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n\n onClick: () => {\n if (isFiltered) {\n removeFilter(filterExpression, targetCell, applyViewFilter, clearFilter);\n } else {\n applyFilter(columns, targetCell, rowContextData, filterExpression, applyViewFilter);\n }\n }\n });\n }\n\n defaultMenuItems.push({\n id: 'copyText',\n visual: <Icon name='copy' />,\n primary: translate('Copy text'),\n onClick: () => copyText(targetCell)\n });\n\n const fieldSpecificMenuItems: MenuItemProps[] = (column.field?.contextMenuOptions \|\| []).map(\n option => ({\n id: option.id,\n visual: option.icon ? <Icon name={option.icon} /> : undefined,\n primary: option.label \|\| '',\n onClick: () => option.onClick?.(targetCell)\n })\n );\n\n return [...defaultMenuItems, ...fieldSpecificMenuItems];\n};\n\nconst shouldOverrideContextMenu = (\n targetCell: HTMLElement,\n columns: RsCoreTypes.Column[] = []\n): boolean => {\n const { colId } = targetCell.dataset;\n\n const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) \|\| {};\n return !(!field \|\| field?.noContextMenu);\n};\n\nexport default function ContextMenuContainer({\n view,\n selector\n}: {\n view: RsCoreTypes.View;\n selector: { query: string };\n}) {\n const { columns = [], data = [], state: { paginationOptions } = {}, domContainer } = view;\n\n const [translate] = useTranslate();\n const [menuContext, setMenuContext] = useState<MenuContext>(null);\n const [showMenu, setShowMenu] = useState(false);\n const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]);\n const [popperRef, setPopperRef] = useElement();\n const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n setShowMenu(false);\n });\n\n useScrollAway(popperRef, scrollerElem, () => {\n setShowMenu(false);\n });\n\n useEffect(() => {\n if (!showMenu) {\n const targetCell = menuContext?.targetCell;\n if (targetCell) {\n targetCell.removeAttribute('data-context-menu-active');\n targetCell.removeAttribute('aria-expanded');\n targetCell.removeAttribute('aria-controls');\n }\n setMenuContext(null);\n }\n }, [showMenu]);\n\n const contextMenuListener = useCallback(\n (e: MouseEvent) => {\n const target = e.target;\n if (!isInstance(target, Element)) return;\n\n const targetElement = target.closest(selector.query.toString());\n if (!isInstance(targetElement, HTMLElement)) return;\n\n if (shouldOverrideContextMenu(targetElement, columns) && !target.closest('a')) {\n e.stopPropagation();\n e.preventDefault();\n\n const { colId } = targetElement.dataset;\n const column = columns.find(col => col.field.id.toString() === colId?.toString());\n if (!column) return;\n\n targetElement.setAttribute('data-context-menu-active', 'true');\n targetElement.setAttribute('aria-expanded', 'true');\n const menuId = `rs-context-menu-${uuidV4()}`;\n targetElement.setAttribute('aria-controls', menuId);\n\n const rowContextData = getRowContextData(data, paginationOptions \|\| {}, targetElement);\n const options = getMenuItems(targetElement, column, rowContextData, view, translate);\n if (!options.length) return;\n\n setShowMenu(true);\n setMenuItems(options);\n setMenuContext({\n column,\n targetCell: targetElement,\n rowContextData,\n menuId\n });\n }\n },\n [selector, columns, data, paginationOptions, translate, view]\n );\n\n const onKeydown = useCallback(({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowMenu(false);\n }, []);\n\n useEffect(() => {\n const abortController = new AbortController();\n if (!domContainer) return;\n\n domContainer.addEventListener('contextmenu', contextMenuListener, {\n signal: abortController.signal\n });\n document.addEventListener('keydown', onKeydown, {\n signal: abortController.signal\n });\n\n return () => {\n abortController.abort();\n };\n }, [domContainer, contextMenuListener]);\n\n return showMenu && menuContext ? (\n <Popover ref={setPopperRef} target={menuContext.targetCell}>\n <Menu\n id={menuContext.menuId}\n items={menuItems}\n onItemClick={(_, e) => {\n e.preventDefault();\n setShowMenu(false);\n }}\n focusControlEl={menuContext.targetCell}\n className='action-menu'\n data-testid={TestIdConstants.contextMenu}\n // TODO: remove this older test-id syntax after checking usage across the test suites\n data-test-id='action-menu'\n />\n </Popover>\n ) : null;\n}\n"]}

package/lib/Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';
+export type GroupAdditionalFieldData = RsCoreTypes.GroupGenerator['additionalFieldsData'][0];
+export type GetAdditionalDataResponse = NonNullable<Awaited<ReturnType<RsCoreTypes.GroupGenerator['getAdditionalFieldData']>>>;
+type FieldTypes = (typeof FieldType)[keyof typeof FieldType];
+export declare const isDateLikeField: (type: FieldTypes) => type is typeof FieldType.DATE | typeof FieldType.DATE_TIME | typeof FieldType.DATE_ONLY;
+declare const GroupAdditionalFieldDataModal: ({ groupHeader, additionalField, column }: {
+    groupHeader: RsCoreTypes.GroupGenerator;
+    additionalField: RsCoreTypes.GroupAdditionalField;
+    column: RsCoreTypes.Column;
+}) => import("react/jsx-runtime").JSX.Element;
+export default GroupAdditionalFieldDataModal;
+//# sourceMappingURL=GroupAdditionalFieldDataModal.d.ts.map

package/lib/Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupAdditionalFieldDataModal.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,SAAS,EACT,KAAK,WAAW,EACjB,MAAM,gCAAgC,CAAC;AASxC,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7F,MAAM,MAAM,yBAAyB,GAAG,WAAW,CACjD,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,cAAc,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAC1E,CAAC;AACF,KAAK,UAAU,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;AAK7D,eAAO,MAAM,eAAe,GAC1B,MAAM,UAAU,KACf,IAAI,IAAI,OAAO,SAAS,CAAC,IAAI,GAAG,OAAO,SAAS,CAAC,SAAS,GAAG,OAAO,SAAS,CAAC,SAEhF,CAAC;AAwEF,QAAA,MAAM,6BAA6B,GAAI,0CAIpC;IACD,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC;IACxC,eAAe,EAAE,WAAW,CAAC,oBAAoB,CAAC;IAClD,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC;CAC5B,4CAyEA,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

package/lib/Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Flex, Modal, UnorderedList } from '@pega/cosmos-react-core';
+import { dateFunctionLabels, getGroupFromKey, FieldType } from 'pega-repeating-structures-core';
+import useTranslate from '../../Hooks/useTranslate';
+import { useFormattedAdditionalFieldData } from './GroupAdditionalInfo';
+import { GroupName } from '.';
+const DATE_TYPES = [FieldType.DATE, FieldType.DATE_TIME, FieldType.DATE_ONLY];
+const ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT = 10;
+export const isDateLikeField = (type) => {
+    return DATE_TYPES.includes(type);
+};
+const GroupAdditionalFieldDataModalHeading = memo(({ groupHeader, column, view, dateFunction }) => {
+    const { label: groupHeaderLabel, groupBy } = groupHeader;
+    const { type: additionalFieldType } = column.field;
+    const { columns, state: { groups } } = view;
+    const [translate] = useTranslate();
+    const group = getGroupFromKey(groupBy, groups);
+    const groupHeaderColumn = columns?.find(c => c.field.id === group?.columnId);
+    // compute additional field label
+    const additionalFieldLabel = dateFunction && isDateLikeField(additionalFieldType)
+        ? `${column.label} (${translate(dateFunctionLabels[dateFunction])})`
+        : column.label;
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, "data-testid": 'group-additional-field-data-modal-heading', children: [_jsx("span", { children: `${groupHeaderLabel}:` }), _jsxs("span", { children: [_jsx(GroupName, { view: view, column: groupHeaderColumn, groupHeader: groupHeader, dateFunction: group?.dateFunction, customFunction: group?.customFunction }), ","] }), _jsx("span", { children: additionalFieldLabel })] }));
+});
+const AdditionalFieldItemRenderer = ({ value, additionalField, column, groupHeader }) => {
+    const { renderer } = useFormattedAdditionalFieldData({ value, count: 1, id: additionalField.id }, additionalField, { column, meta: column.parent.meta, groupHeader }, 'GroupHeader');
+    return renderer;
+};
+const GroupAdditionalFieldDataModal = ({ groupHeader, additionalField, column }) => {
+    const view = column.parent;
+    const { getAdditionalFieldData } = groupHeader;
+    const [limit, setLimit] = useState(ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT);
+    const [additionalFieldData, setAdditionalFieldData] = useState(null);
+    // Fetch additional field data once on mount
+    useEffect(() => {
+        let isActive = true;
+        (async () => {
+            const data = await getAdditionalFieldData(additionalField);
+            if (isActive && data) {
+                setAdditionalFieldData({ values: data.values, hasMore: data.hasMore });
+            }
+            else if (!data) {
+                setAdditionalFieldData({ values: [], hasMore: false });
+            }
+        })();
+        return () => {
+            isActive = false;
+        };
+    }, [groupHeader, additionalField]);
+    // Toggle between showing limited and all additional field values in unordered list.
+    const handleToggleShow = useCallback(() => {
+        setLimit(prev => prev === ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT && additionalFieldData
+            ? additionalFieldData.values.length
+            : ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT);
+    }, [additionalFieldData]);
+    const values = additionalFieldData?.values ?? [];
+    const hasMore = additionalFieldData?.hasMore ?? false;
+    return (_jsx(Modal, { autoWidth: true, heading: _jsx(GroupAdditionalFieldDataModalHeading, { column: column, dateFunction: 'dateFunction' in additionalField ? additionalField.dateFunction : undefined, groupHeader: groupHeader, view: view }), progress: !additionalFieldData, count: additionalFieldData ? { value: values.length, hasMore } : undefined, "data-testid": 'group-additional-field-data-modal', children: additionalFieldData && (_jsx(UnorderedList, { "data-testid": 'group-additional-field-data-modal-list', onToggleShow: values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? handleToggleShow : undefined, count: values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? values.length : undefined, items: values.slice(0, limit).map(value => (_jsx(AdditionalFieldItemRenderer, { value: value, additionalField: additionalField, column: column, groupHeader: groupHeader }))) })) }));
+};
+export default GroupAdditionalFieldDataModal;
+//# sourceMappingURL=GroupAdditionalFieldDataModal.js.map

package/lib/Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupAdditionalFieldDataModal.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/GroupAdditionalFieldDataModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useCallback, useEffect, useState } from 'react';\n\nimport { Flex, Modal, UnorderedList, type ExcludeStrict } from '@pega/cosmos-react-core';\nimport {\n dateFunctionLabels,\n getGroupFromKey,\n FieldType,\n type RsCoreTypes\n} from 'pega-repeating-structures-core';\nimport type { DateFunction } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/core/types';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport { useFormattedAdditionalFieldData } from './GroupAdditionalInfo';\n\nimport { GroupName } from '.';\n\nexport type GroupAdditionalFieldData = RsCoreTypes.GroupGenerator['additionalFieldsData'][0];\nexport type GetAdditionalDataResponse = NonNullable<\n Awaited<ReturnType<RsCoreTypes.GroupGenerator['getAdditionalFieldData']>>\n>;\ntype FieldTypes = (typeof FieldType)[keyof typeof FieldType];\n\nconst DATE_TYPES: readonly string[] = [FieldType.DATE, FieldType.DATE_TIME, FieldType.DATE_ONLY];\nconst ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT = 10;\n\nexport const isDateLikeField = (\n type: FieldTypes\n): type is typeof FieldType.DATE | typeof FieldType.DATE_TIME | typeof FieldType.DATE_ONLY => {\n return DATE_TYPES.includes(type);\n};\n\nconst GroupAdditionalFieldDataModalHeading = memo(\n ({\n groupHeader,\n column,\n view,\n dateFunction\n }: {\n groupHeader: RsCoreTypes.GroupGenerator;\n column: RsCoreTypes.Column;\n view: RsCoreTypes.View;\n dateFunction: ExcludeStrict<DateFunction, 'SECONDS'> | undefined;\n }) => {\n const { label: groupHeaderLabel, groupBy } = groupHeader;\n const { type: additionalFieldType } = column.field;\n const {\n columns,\n state: { groups }\n } = view;\n const [translate] = useTranslate();\n\n const group = getGroupFromKey(groupBy, groups);\n const groupHeaderColumn = columns?.find(c => c.field.id === group?.columnId);\n // compute additional field label\n const additionalFieldLabel =\n dateFunction && isDateLikeField(additionalFieldType)\n ? `${column.label} (${translate(dateFunctionLabels[dateFunction])})`\n : column.label;\n\n return (\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n data-testid='group-additional-field-data-modal-heading'\n >\n {`${groupHeaderLabel}:`}\n \n <GroupName\n view={view}\n column={groupHeaderColumn}\n groupHeader={groupHeader}\n dateFunction={group?.dateFunction}\n customFunction={group?.customFunction}\n />\n ,\n \n {additionalFieldLabel}\n </Flex>\n );\n }\n);\n\nconst AdditionalFieldItemRenderer = ({\n value,\n additionalField,\n column,\n groupHeader\n}: {\n value: GroupAdditionalFieldData['value'];\n additionalField: RsCoreTypes.GroupAdditionalField;\n column: RsCoreTypes.Column;\n groupHeader: RsCoreTypes.GroupGenerator;\n}) => {\n const { renderer } = useFormattedAdditionalFieldData(\n { value, count: 1, id: additionalField.id },\n additionalField,\n { column, meta: column.parent.meta, groupHeader },\n 'GroupHeader'\n );\n return renderer;\n};\n\nconst GroupAdditionalFieldDataModal = ({\n groupHeader,\n additionalField,\n column\n}: {\n groupHeader: RsCoreTypes.GroupGenerator;\n additionalField: RsCoreTypes.GroupAdditionalField;\n column: RsCoreTypes.Column;\n}) => {\n const view = column.parent;\n const { getAdditionalFieldData } = groupHeader;\n\n const [limit, setLimit] = useState(ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT);\n const [additionalFieldData, setAdditionalFieldData] = useState<GetAdditionalDataResponse | null>(\n null\n );\n\n // Fetch additional field data once on mount\n useEffect(() => {\n let isActive = true;\n (async () => {\n const data = await getAdditionalFieldData(additionalField);\n if (isActive && data) {\n setAdditionalFieldData({ values: data.values, hasMore: data.hasMore });\n } else if (!data) {\n setAdditionalFieldData({ values: [], hasMore: false });\n }\n })();\n return () => {\n isActive = false;\n };\n }, [groupHeader, additionalField]);\n\n // Toggle between showing limited and all additional field values in unordered list.\n const handleToggleShow = useCallback(() => {\n setLimit(prev =>\n prev === ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT && additionalFieldData\n ? additionalFieldData.values.length\n : ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT\n );\n }, [additionalFieldData]);\n\n const values = additionalFieldData?.values ?? [];\n const hasMore = additionalFieldData?.hasMore ?? false;\n\n return (\n <Modal\n autoWidth\n heading={\n <GroupAdditionalFieldDataModalHeading\n column={column}\n dateFunction={\n 'dateFunction' in additionalField ? additionalField.dateFunction : undefined\n }\n groupHeader={groupHeader}\n view={view}\n />\n }\n progress={!additionalFieldData}\n count={additionalFieldData ? { value: values.length, hasMore } : undefined}\n data-testid='group-additional-field-data-modal'\n >\n {additionalFieldData && (\n <UnorderedList\n data-testid='group-additional-field-data-modal-list'\n onToggleShow={\n values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? handleToggleShow : undefined\n }\n count={values.length > ADDITIONAL_FIELDS_DATA_INITIAL_LIMIT ? values.length : undefined}\n items={values.slice(0, limit).map(value => (\n <AdditionalFieldItemRenderer\n value={value}\n additionalField={additionalField}\n column={column}\n groupHeader={groupHeader}\n />\n ))}\n />\n )}\n </Modal>\n );\n};\n\nexport default GroupAdditionalFieldDataModal;\n"]}

package/lib/Core/Components/GroupRenderer/GroupAdditionalInfo.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { type RsCoreTypes } from 'pega-repeating-structures-core';
+import { type GroupAdditionalFieldData } from './GroupAdditionalFieldDataModal';
+type AdditionalFieldRendererContext = 'GroupHeader' | 'GroupHeaderTooltip';
+type GroupAdditionalInfoProps = {
+    additionalFieldData: GroupAdditionalFieldData;
+    columns: RsCoreTypes.Column[];
+    groupHeader: RsCoreTypes.GroupGenerator;
+    additionalField: RsCoreTypes.GroupAdditionalField;
+    rendererContext: AdditionalFieldRendererContext;
+};
+export declare const useFormattedAdditionalFieldData: (additionalFieldData: GroupAdditionalFieldData, additionalField: RsCoreTypes.GroupAdditionalField, { column, meta, groupHeader }: {
+    column: RsCoreTypes.Column | null;
+    meta: RsCoreTypes.Meta | null;
+    groupHeader: RsCoreTypes.GroupGenerator;
+}, rendererContext: AdditionalFieldRendererContext) => {
+    label: null;
+    renderer: null;
+} | {
+    label: string;
+    renderer: string | number | null;
+} | {
+    label: string;
+    renderer: import("react/jsx-runtime").JSX.Element | null;
+} | {
+    label: string;
+    renderer: import("react/jsx-runtime").JSX.Element | "Multiple";
+} | {
+    label: string | undefined;
+    renderer: import("react/jsx-runtime").JSX.Element;
+};
+declare const GroupAdditionalInfo: ({ additionalFieldData, columns, groupHeader, additionalField, rendererContext }: GroupAdditionalInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+export default GroupAdditionalInfo;
+//# sourceMappingURL=GroupAdditionalInfo.d.ts.map

package/lib/Core/Components/GroupRenderer/GroupAdditionalInfo.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupAdditionalInfo.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/GroupAdditionalInfo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiC,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAcjG,OAAsC,EAEpC,KAAK,wBAAwB,EAC9B,MAAM,iCAAiC,CAAC;AAEzC,KAAK,8BAA8B,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAC3E,KAAK,wBAAwB,GAAG;IAC9B,mBAAmB,EAAE,wBAAwB,CAAC;IAC9C,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC;IACxC,eAAe,EAAE,WAAW,CAAC,oBAAoB,CAAC;IAClD,eAAe,EAAE,8BAA8B,CAAC;CACjD,CAAC;AAgCF,eAAO,MAAM,+BAA+B,GAC1C,qBAAqB,wBAAwB,EAC7C,iBAAiB,WAAW,CAAC,oBAAoB,EACjD,+BAIG;IACD,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC;CACzC,EACD,iBAAiB,8BAA8B;;;;;;;;;;;;;;;CAyGhD,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,iFAM1B,wBAAwB,mDAqC1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}