@learningpool/ui 1.8.5 → 1.8.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.
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +35 -14
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.d.ts +4 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js +20 -8
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js +1 -1
- package/package.json +1 -1
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js
CHANGED
|
@@ -34,7 +34,8 @@ var VerticalNavigationItem = function (props) {
|
|
|
34
34
|
var theme = useTheme();
|
|
35
35
|
var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style", "hasCustomContent"]);
|
|
36
36
|
var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
|
|
37
|
-
var
|
|
37
|
+
var _e = React.useState(false), isFlyoutHovered = _e[0], setIsFlyoutHovered = _e[1];
|
|
38
|
+
var open = isFlyoutHovered || Boolean(anchorEl);
|
|
38
39
|
var handlePopoverOpen = function (event) {
|
|
39
40
|
if (open) {
|
|
40
41
|
handlePopoverClose();
|
|
@@ -46,7 +47,7 @@ var VerticalNavigationItem = function (props) {
|
|
|
46
47
|
setAnchorEl(null);
|
|
47
48
|
};
|
|
48
49
|
var handleClick = function (event) {
|
|
49
|
-
if (fullHeightFlyout) {
|
|
50
|
+
if ((children && children.length > 0) || fullHeightFlyout || hasCustomContent) {
|
|
50
51
|
handlePopoverOpen(event);
|
|
51
52
|
onClick && onClick(event);
|
|
52
53
|
return;
|
|
@@ -54,6 +55,12 @@ var VerticalNavigationItem = function (props) {
|
|
|
54
55
|
if (onClick) {
|
|
55
56
|
onClick(event);
|
|
56
57
|
}
|
|
58
|
+
// Set open to true / Open sub menu
|
|
59
|
+
if (!open) {
|
|
60
|
+
handlePopoverOpen(event);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
// Set open to false / Close sub menu
|
|
57
64
|
setAnchorEl(null);
|
|
58
65
|
};
|
|
59
66
|
var handleChildItemClick = function (event, item) {
|
|
@@ -65,25 +72,39 @@ var VerticalNavigationItem = function (props) {
|
|
|
65
72
|
item.onClick(event);
|
|
66
73
|
}
|
|
67
74
|
};
|
|
75
|
+
var ref = React.useRef(null);
|
|
76
|
+
var flyoutRef = React.useRef(null);
|
|
77
|
+
var handleKeyDown = function (event) {
|
|
78
|
+
if (!event) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
// This should only be triggered for items with a sub nav
|
|
82
|
+
if (flyoutRef && flyoutRef.current) {
|
|
83
|
+
var CLOSE_SUBMENU_DELAY = 200;
|
|
84
|
+
if (event.type === 'blur') {
|
|
85
|
+
setTimeout(function () {
|
|
86
|
+
// @ts-expect-error
|
|
87
|
+
var isMenuFocus = flyoutRef.current.contains(window.document.activeElement) || ref === window.document.activeElement;
|
|
88
|
+
if (!isMenuFocus) {
|
|
89
|
+
handlePopoverClose();
|
|
90
|
+
}
|
|
91
|
+
}, CLOSE_SUBMENU_DELAY);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
68
95
|
return (_jsxs(ListItem, __assign({ disablePadding: true,
|
|
69
96
|
// @ts-expect-error
|
|
70
|
-
component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton
|
|
71
|
-
// @ts-expect-error
|
|
72
|
-
, __assign({
|
|
97
|
+
component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref,
|
|
73
98
|
// @ts-expect-error
|
|
74
|
-
component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen,
|
|
75
|
-
? null
|
|
76
|
-
: handlePopoverOpen(event); }, onMouseLeave: function () { return (fullHeightFlyout || isDrawerOpen)
|
|
77
|
-
? null
|
|
78
|
-
: handlePopoverClose(); }, onFocus: function (event) { return (fullHeightFlyout || isDrawerOpen)
|
|
99
|
+
component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, onMouseEnter: function (event) { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
|
|
79
100
|
? null
|
|
80
|
-
: handlePopoverOpen(event); },
|
|
101
|
+
: handlePopoverOpen(event); }, onMouseLeave: function () { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
|
|
81
102
|
? null
|
|
82
|
-
: handlePopoverClose(); }, "aria-
|
|
103
|
+
: handlePopoverClose(); }, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); }, "aria-current": isActive ? 'page' : null, "aria-expanded": (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? open : null, role: (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
|
|
83
104
|
'& .MuiTypography-root': {
|
|
84
105
|
fontSize: isSecondary ? '14px' : 'inherit'
|
|
85
106
|
}
|
|
86
|
-
} })] }), label), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
|
|
107
|
+
} })] }), label), children && children.length > 0 && isDrawerOpen && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
|
|
87
108
|
// @ts-expect-error
|
|
88
109
|
, __assign({
|
|
89
110
|
// @ts-expect-error
|
|
@@ -91,6 +112,6 @@ var VerticalNavigationItem = function (props) {
|
|
|
91
112
|
'& .MuiTypography-root': {
|
|
92
113
|
fontSize: '14px !important'
|
|
93
114
|
}
|
|
94
|
-
} })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
|
|
115
|
+
} })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { ref: flyoutRef, isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, setAnchorEl: setAnchorEl, parentItemRef: ref.current, open: open, children: children, label: label, setIsFlyoutHovered: setIsFlyoutHovered })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
|
|
95
116
|
};
|
|
96
117
|
export default VerticalNavigationItem;
|
|
@@ -10,6 +10,9 @@ export interface IVerticalNavigationItemFlyoutMenuProps {
|
|
|
10
10
|
fullHeightFlyout?: boolean;
|
|
11
11
|
anchorEl?: null | HTMLElement;
|
|
12
12
|
open?: boolean;
|
|
13
|
+
setAnchorEl?: any;
|
|
14
|
+
parentItemRef?: any;
|
|
15
|
+
setIsFlyoutHovered?: any;
|
|
13
16
|
}
|
|
14
|
-
declare const VerticalNavigationItemFlyoutMenu:
|
|
17
|
+
declare const VerticalNavigationItemFlyoutMenu: React.ForwardRefExoticComponent<IVerticalNavigationItemFlyoutMenuProps & React.RefAttributes<unknown>>;
|
|
15
18
|
export default VerticalNavigationItemFlyoutMenu;
|
|
@@ -10,20 +10,32 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import
|
|
13
|
+
import { forwardRef } from 'react';
|
|
14
14
|
import { Link } from '../../../../index';
|
|
15
15
|
import { FullHeightFlyoutMenuPaper, FullHeightFlyoutMenuWrapper, FlyoutNotchMask, NotchMini, FlyoutMenuHeader, FlyoutMenuPaper, FlyoutMenuWrap, FlyoutMenuList, FlyoutMenuButton, FlyoutMenuItem, FlyoutMenuItemText } from './VerticalNavigationItemFlyoutMenuStyles';
|
|
16
|
-
var VerticalNavigationItemFlyoutMenu = function (props) {
|
|
17
|
-
var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, content = props.content, anchorEl = props.anchorEl;
|
|
18
|
-
var _a = React.useState(false), flyoutHovered = _a[0], setFlyoutHovered = _a[1];
|
|
19
|
-
var open = flyoutHovered || (props === null || props === void 0 ? void 0 : props.open);
|
|
16
|
+
var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
|
|
17
|
+
var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, open = props.open, parentItemRef = props.parentItemRef, content = props.content, anchorEl = props.anchorEl, setAnchorEl = props.setAnchorEl, setIsFlyoutHovered = props.setIsFlyoutHovered;
|
|
20
18
|
if (fullHeightFlyout && content) {
|
|
21
19
|
return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel" }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
|
|
22
20
|
}
|
|
23
|
-
|
|
21
|
+
var handleKeyDown = function (event) {
|
|
22
|
+
if (!event) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
var CLOSE_SUBMENU_DELAY = 200;
|
|
26
|
+
if (event.type === 'blur') {
|
|
27
|
+
setTimeout(function () {
|
|
28
|
+
var isMenuFocus = (ref === null || ref === void 0 ? void 0 : ref.current.contains(window.document.activeElement)) || parentItemRef === window.document.activeElement;
|
|
29
|
+
if (!isMenuFocus) {
|
|
30
|
+
setAnchorEl(null);
|
|
31
|
+
}
|
|
32
|
+
}, CLOSE_SUBMENU_DELAY);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
|
|
24
36
|
// @ts-expect-error
|
|
25
37
|
, __assign({
|
|
26
38
|
// @ts-expect-error
|
|
27
|
-
component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
|
|
28
|
-
};
|
|
39
|
+
component: Link, role: 'link', onClick: childItem.onClick, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); } }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
|
|
40
|
+
});
|
|
29
41
|
export default VerticalNavigationItemFlyoutMenu;
|
|
@@ -30,7 +30,7 @@ export var ListItemAvatar = styled(ListItemButton, {
|
|
|
30
30
|
export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n height: ", "px;\n justify-content: center;\n margin-top: 0 !important;\n min-width: ", ";\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n min-width: ", "px;\n width: ", "px;\n }\n"], ["\n align-items: center;\n color: ", ";\n height: ", "px;\n justify-content: center;\n margin-top: 0 !important;\n min-width: ", ";\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n min-width: ", "px;\n width: ", "px;\n }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
|
|
31
31
|
export var ListItemText = styled(SSListItemText, {
|
|
32
32
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
|
|
33
|
-
})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"], ["\n color: ", ";\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
|
|
33
|
+
})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n min-width: 210px;\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"], ["\n color: ", ";\n min-width: 210px;\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
|
|
34
34
|
export var StyledExpandLess = styled(ArrowRight, {
|
|
35
35
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
36
36
|
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", "ms ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", "ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
|