@pega/cosmos-react-core 10.0.0-build.5.20 → 10.0.0-build.5.22
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK/C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAItD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,QAAA,MAAM,QAAQ;cAQA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;cACvB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;UAC5D,aAAa,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK/C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAItD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,QAAA,MAAM,QAAQ;cAQA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;cACvB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;UAC5D,aAAa,CAAC,MAAM,CAAC;8DA2E7B,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';
|
|
2
|
+
import { forwardRef, useState, useEffect, useContext, useMemo, useRef, useCallback } from 'react';
|
|
3
3
|
import BareButton from '../Button/BareButton';
|
|
4
4
|
import Popover from '../Popover';
|
|
5
5
|
import Menu from '../Menu';
|
|
6
|
-
import { useConsolidatedRef, useI18n } from '../../hooks';
|
|
6
|
+
import { useConsolidatedRef, useFocusWithin, useI18n } from '../../hooks';
|
|
7
7
|
import Tooltip from '../Tooltip';
|
|
8
8
|
import AppShellContext from './AppShellContext';
|
|
9
9
|
import { StyledAppShellTooltip } from './AppShell.styles';
|
|
10
10
|
const Operator = forwardRef(function Operator({ children, actions, popover, name, as }, ref) {
|
|
11
11
|
const { navOpen } = useContext(AppShellContext);
|
|
12
12
|
const buttonRef = useConsolidatedRef(ref);
|
|
13
|
+
const menuRef = useRef(null);
|
|
13
14
|
const t = useI18n();
|
|
14
15
|
const operatorMenuItems = useMemo(() => {
|
|
15
16
|
return actions.flat().map(({ id, primary, onClick: click, ...rest }) => ({
|
|
@@ -24,13 +25,15 @@ const Operator = forwardRef(function Operator({ children, actions, popover, name
|
|
|
24
25
|
if (!navOpen)
|
|
25
26
|
setShowMenu(false);
|
|
26
27
|
}, [navOpen]);
|
|
28
|
+
useFocusWithin([menuRef, buttonRef], useCallback((isFocused) => {
|
|
29
|
+
if (!isFocused)
|
|
30
|
+
setShowMenu(false);
|
|
31
|
+
}, []));
|
|
27
32
|
return (_jsxs(_Fragment, { children: [_jsx(BareButton, { as: as, ref: buttonRef, "aria-label": `${t('app_shell_user_account')} - ${name}`, "aria-expanded": showMenu, "aria-haspopup": 'menu', onClick: () => {
|
|
28
33
|
setShowMenu(cur => !cur);
|
|
29
34
|
}, onKeyDown: (e) => {
|
|
30
35
|
if (e.key === 'Escape')
|
|
31
36
|
setShowMenu(false);
|
|
32
|
-
}, onBlur: () => {
|
|
33
|
-
setShowMenu(false);
|
|
34
37
|
}, children: children }), _jsx(Tooltip, { target: buttonRef.current, as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: t('app_shell_user_account') }), _jsx(Popover, { ...popover, show: showMenu, target: buttonRef.current, children: _jsx(Menu, { focusControlEl: buttonRef.current ?? undefined, mode: 'action', items: operatorMenuItems,
|
|
35
38
|
/** @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated. */
|
|
36
39
|
onItemClick: (_, e) => {
|
|
@@ -38,7 +41,7 @@ const Operator = forwardRef(function Operator({ children, actions, popover, name
|
|
|
38
41
|
.detail > 0) {
|
|
39
42
|
setShowMenu(false);
|
|
40
43
|
}
|
|
41
|
-
} }) })] }));
|
|
44
|
+
}, ref: menuRef }) })] }));
|
|
42
45
|
});
|
|
43
46
|
export default Operator;
|
|
44
47
|
//# sourceMappingURL=Operator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo, useRef, useCallback } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\nimport Tooltip from '../Tooltip';\n\nimport AppShellContext from './AppShellContext';\nimport type { OperatorProps } from './AppShell.types';\nimport { StyledAppShellTooltip } from './AppShell.styles';\n\nconst Operator = forwardRef(function Operator(\n {\n children,\n actions,\n popover,\n name,\n as\n }: {\n children: ReactNode;\n actions: OperatorProps['actions'];\n popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n name: OperatorProps['name'];\n } & AsProp,\n ref: Ref<HTMLButtonElement> | undefined\n) {\n const { navOpen } = useContext(AppShellContext);\n const buttonRef = useConsolidatedRef(ref);\n const menuRef = useRef<HTMLDivElement | null>(null);\n const t = useI18n();\n\n const operatorMenuItems = useMemo(() => {\n return actions.flat().map<MenuItemProps>(({ id, primary, onClick: click, ...rest }) => ({\n id: id || primary,\n primary,\n onClick: (menuId, e) => click?.(e),\n ...rest\n }));\n }, [actions]);\n\n const [showMenu, setShowMenu] = useState(false);\n\n useEffect(() => {\n if (!navOpen) setShowMenu(false);\n }, [navOpen]);\n\n useFocusWithin<HTMLElement>(\n [menuRef, buttonRef],\n useCallback((isFocused: boolean) => {\n if (!isFocused) setShowMenu(false);\n }, [])\n );\n\n return (\n <>\n <BareButton\n as={as}\n ref={buttonRef}\n aria-label={`${t('app_shell_user_account')} - ${name}`}\n aria-expanded={showMenu}\n aria-haspopup='menu'\n onClick={() => {\n setShowMenu(cur => !cur);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Escape') setShowMenu(false);\n }}\n >\n {children}\n </BareButton>\n <Tooltip\n target={buttonRef.current}\n as={StyledAppShellTooltip}\n showDelay='none'\n hideDelay='none'\n >\n {t('app_shell_user_account')}\n </Tooltip>\n <Popover {...popover} show={showMenu} target={buttonRef.current}>\n <Menu\n focusControlEl={buttonRef.current ?? undefined}\n mode='action'\n items={operatorMenuItems}\n /** @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated. */\n onItemClick={(_, e) => {\n if (\n (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n .detail > 0\n ) {\n setShowMenu(false);\n }\n }}\n ref={menuRef}\n />\n </Popover>\n </>\n );\n});\n\nexport default Operator;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "10.0.0-build.5.
|
|
3
|
+
"version": "10.0.0-build.5.22",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|