@ndlib/component-library 0.0.66 → 0.0.68

package/dist/components/composites/DropdownLinks/index.d.ts

@@ -11,6 +11,5 @@ type DropdownLinksProps = StyledElementProps<HTMLDivElement, {
     renderOption?: RenderOption<string, LinkOption>;
     openNewTab?: boolean;
 }, DropdownChildrenFn>;
-export declare const Overlay: React.FC<StyledElementProps<HTMLDivElement>>;
 export declare const DropdownLinks: React.FC<DropdownLinksProps>;
 export {};

package/dist/components/composites/DropdownLinks/index.js

@@ -1,87 +1,28 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
-import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ListBox } from '../../elements/ListBox';
 import { Link } from '../../elements/Link';
-import { Box } from '../../elements/layout/Box';
 import { useComponentConfig } from '../../providers/componentConfig';
-import { useUniqueId } from '../../providers/uniqueIds';
-import { Z_INDEX } from '../../../theme/custom';
-export const Overlay = (props) => (_jsx(Box, Object.assign({}, props, { sx: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        zIndex: Z_INDEX.ELEVATED,
-    } })));
-export const DropdownLinks = (_a) => {
-    var { children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation' } = _a, rest = __rest(_a, ["children", "options", "renderOption", "openNewTab", "role"]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
-    const listboxId = useUniqueId('dropdown-links');
-    const anchorId = useUniqueId('dropdown-links-anchor');
+import { Dropdown } from '../../elements/Dropdown';
+export const DropdownLinks = ({ children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation', }) => {
     const { navigate } = useComponentConfig().link;
-    const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
-            if (option.onClick) {
-                option.onClick();
-            }
-            else if (openNewTab) {
-                window.open(option.value, '_blank');
-            }
-            else if (option.value) {
-                navigate(option.value);
-            }
-            setIsOpen(false);
-        } })));
     const renderOption = renderOptionParam
         ? renderOptionParam
         : (params) => (_jsx(Link, Object.assign({ to: params.option.value, target: openNewTab ? '_blank' : undefined, onClick: (e) => {
                 e.preventDefault();
             } }, { children: params.option.label })));
-    const { refs, floatingStyles } = useFloating({
-        placement: 'bottom-start',
-        middleware: [
-            offset(2),
-            size({
-                apply({ rects }) {
-                    setDropdownMinWidth(`${rects.reference.width}px`);
-                },
-            }),
-            autoPlacement({
-                allowedPlacements: [
-                    'top-start',
-                    'bottom-start',
-                    'top-end',
-                    'bottom-end',
-                ],
-            }),
-        ],
-    });
-    const onClick = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen]);
-    const dropdownAnchorProps = useMemo(() => ({
-        id: anchorId,
-        'aria-haspopup': true,
-        'aria-expanded': isOpen,
-        'aria-owns': listboxId,
-        ref: refs.setReference,
-        onClick,
-    }), [refs, onClick, anchorId, isOpen, listboxId]);
-    return (_jsxs(Box, Object.assign({}, rest, { children: [children &&
-                children({
-                    anchorProps: dropdownAnchorProps,
-                }), isOpen && (_jsxs(_Fragment, { children: [_jsx(ListBox, { role: role, id: listboxId, options: options, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: Z_INDEX.DIALOG }) }), _jsx(Overlay, { onClick: () => setIsOpen(false) })] }))] })));
+    return (_jsx(Dropdown, { shouldRenderDropdownContainer: false, renderAnchor: children, renderDropdown: ({ ref, styles, id, setIsOpen }) => {
+            const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
+                    if (option.onClick) {
+                        option.onClick();
+                    }
+                    else if (openNewTab) {
+                        window.open(option.value, '_blank');
+                    }
+                    else if (option.value) {
+                        navigate(option.value);
+                    }
+                    setIsOpen(false);
+                } })));
+            return (_jsx(ListBox, { role: role, id: id, options: options, ref: ref, renderOption: renderOption, style: styles }));
+        } }));
 };

package/dist/components/composites/NavMenu/demo.js

@@ -83,6 +83,90 @@ const demoMenu = {
                 },
             },
         },
+        {
+            id: 'test-menu-3',
+            label: 'test menu 3',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 5',
+                            id: 'test-submenu-5',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 5',
+                                            id: 'test-leaf-5',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 6',
+                                            id: 'test-leaf-6',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 6',
+                            id: 'test-submenu-6',
+                        },
+                    ],
+                },
+            },
+        },
     ],
 };
 export const DemoMenuImplementation = () => (_jsx(MenuProvider, Object.assign({ menu: demoMenu }, { children: ({ menu, getMenuProps, getMenuItemProps }) => (_jsxs(_Fragment, { children: [_jsx(Row, Object.assign({}, getMenuProps(), { children: menu.items.map((menuItem) => (_createElement(Button, Object.assign({}, getMenuItemProps([menuItem.id]), { sx: { m: 1 }, key: menuItem.id }), menuItem.label))) })), _jsx(NavMenu, {})] })) })));

package/dist/components/composites/NavMenu/index.js

@@ -6,7 +6,7 @@ import { Row } from '../../elements/layout/Row';
 import { Column } from '../../elements/layout/Column';
 import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
 import { Link } from '../../elements/Link';
-import { LINE_HEIGHT } from '../../../theme/typography';
+import { FONT_WEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
 import { importedDefaultComponentShim } from '../../../utils/misc';
 const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
@@ -23,7 +23,6 @@ export const NavMenu = (props) => {
     }
     const submenu = activeTopLevelMenu.action.submenu;
     return (_jsxs(Row, Object.assign({}, props, { sx: {
-            alignItems: 'center',
             justifyContent: 'center',
             p: 3,
             border: 'solid 1px',
@@ -37,7 +36,9 @@ export const NavMenu = (props) => {
                 const submenuPath = [topLevelMenuId, submenuItem.id];
                 return (_jsxs(Column, Object.assign({ sx: { flexBasis: '275px', p: 2, flexShrink: 0, flexGrow: 0 } }, { children: [_jsx(Heading, Object.assign({ standalone: true, size: HEADING_SIZE.SM, underline: true }, getMenuItemProps(submenuPath), { children: submenuItem.label })), _jsx(List, Object.assign({}, getMenuProps(submenuPath), { icon: ChevronRightIcon }, { children: leafMenuItems.map((leafMenuItem, i) => {
                                 const leafMenuPath = submenuPath.concat(leafMenuItem.id);
-                                return (_jsx(ListItem, Object.assign({ index: i, sx: { mt: 1 } }, getMenuItemProps(leafMenuPath), { children: _jsx(Link, Object.assign({ to: "/", sx: { lineHeight: LINE_HEIGHT.CONDENSED } }, { children: leafMenuItem.label })) }), leafMenuItem.id));
+                                return (_jsx(ListItem, Object.assign({ index: i, sx: { mt: 1 } }, getMenuItemProps(leafMenuPath), { children: _jsx(Link, Object.assign({ to: "/", sx: {
+                                            fontWeight: FONT_WEIGHT.BOLD,
+                                        }, tabIndex: -1 }, { children: leafMenuItem.label })) }), leafMenuItem.id));
                             }) }))] }), submenuItem.id));
             }), _jsx(Column, { sx: { flexGrow: 1 } })] })));
 };

package/dist/components/elements/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from '.';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+export declare const Default: Story;
+export declare const MatchWidth: Story;

package/dist/components/elements/Dropdown/Dropdown.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { Button } from '../../elements/Button';
+import { Box } from '../../elements/layout/Box';
+import { Dropdown } from '.';
+import { Paragraph } from '../text/Paragraph';
+const meta = {
+    title: 'Elements/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+};
+export default meta;
+const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Nullam id nunc vitae magna aliquam aliquet. In hac habitasse platea dictumst.`;
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+};
+export const MatchWidth = {
+    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+};

package/dist/components/elements/Dropdown/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
+type AnchorRenderFn = (params: {
+    anchorProps: AnchorProps;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}) => React.ReactNode;
+type DropdownRenderFn = (params: {
+    styles: React.CSSProperties;
+    ref: React.Ref<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    id: string;
+}) => React.ReactNode;
+type DropdownProps = StyledElementProps<HTMLDivElement, {
+    renderAnchor: AnchorRenderFn;
+    renderDropdown: DropdownRenderFn;
+    shouldRenderDropdownContainer?: boolean;
+    matchWidth?: boolean;
+}>;
+export declare const Overlay: React.FC<StyledElementProps<HTMLDivElement>>;
+export declare const Dropdown: React.FC<DropdownProps>;
+export {};

package/dist/components/elements/Dropdown/index.js

@@ -0,0 +1,87 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { useTheme } from '../../../theme';
+import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
+import { Box } from '../../elements/layout/Box';
+import { useUniqueId } from '../../providers/uniqueIds';
+import { Z_INDEX } from '../../../theme/custom';
+import { COLOR } from '../../../theme/colors';
+export const Overlay = (props) => (_jsx(Box, Object.assign({}, props, { sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: Z_INDEX.ELEVATED,
+    } })));
+export const Dropdown = (_a) => {
+    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const [dropdownMaxWidth, setDropdownMaxWidth] = useState();
+    const dropdownId = useUniqueId('dropdown');
+    const anchorId = useUniqueId('dropdown-anchor');
+    const { boxShadow } = useTheme();
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            size({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                    if (matchWidth) {
+                        setDropdownMaxWidth(`${rects.reference.width}px`);
+                    }
+                },
+            }),
+            autoPlacement({
+                allowedPlacements: [
+                    'top-start',
+                    'bottom-start',
+                    'top-end',
+                    'bottom-end',
+                ],
+            }),
+        ],
+    });
+    const dropdownBoxStyles = Object.assign(Object.assign({}, floatingStyles), { minWidth: dropdownMinWidth, maxWidth: dropdownMaxWidth, zIndex: Z_INDEX.DIALOG, backgroundColor: COLOR.WHITE, boxShadow: boxShadow.NORMAL });
+    const onClick = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const dropdownAnchorProps = useMemo(() => ({
+        id: anchorId,
+        'aria-haspopup': true,
+        'aria-expanded': isOpen,
+        'aria-owns': dropdownId,
+        ref: refs.setReference,
+        onClick,
+    }), [refs, onClick, anchorId, isOpen, dropdownId]);
+    return (_jsxs(Box, Object.assign({}, rest, { children: [renderAnchor({
+                anchorProps: dropdownAnchorProps,
+                isOpen,
+                setIsOpen,
+            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx(Box, Object.assign({ id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles }, { children: renderDropdown({
+                            styles: dropdownBoxStyles,
+                            ref: refs.setFloating,
+                            setIsOpen,
+                            isOpen,
+                            id: dropdownId,
+                        }) }))) : (renderDropdown({
+                        styles: dropdownBoxStyles,
+                        ref: refs.setFloating,
+                        isOpen,
+                        setIsOpen,
+                        id: dropdownId,
+                    })), _jsx(Overlay, { onClick: () => setIsOpen(false) })] }))] })));
+};

package/dist/components/elements/List/index.js

@@ -80,7 +80,7 @@ export const List = ({ sx, size: sizeParam, ordered, icon, iconSize: iconSizePar
         } }, { children: ordered ? (_jsx("ul", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) : (_jsx("ol", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) })));
 };
 export const ListItem = (_a) => {
-    var { index, sx, icon: iconParam, iconSize: iconSizeParam, iconColor: iconColorParam, onIconClick, onClick, children, iconLabel } = _a, rest = __rest(_a, ["index", "sx", "icon", "iconSize", "iconColor", "onIconClick", "onClick", "children", "iconLabel"]);
+    var { index, sx, icon: iconParam, iconSize: iconSizeParam, iconColor: iconColorParam, onIconClick, onClick, children, iconLabel, tabIndex: tabIndexParam } = _a, rest = __rest(_a, ["index", "sx", "icon", "iconSize", "iconColor", "onIconClick", "onClick", "children", "iconLabel", "tabIndex"]);
     const { ordered, icon: listIcon, iconColor: listIconColor, iconSize: listIconSize, size, depth, } = useListConfig();
     const { flagInDevelopment } = useEnvironment();
     if (onIconClick && !iconLabel) {
@@ -92,10 +92,12 @@ export const ListItem = (_a) => {
     const typography = sizeTypographyMap[size];
     const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
     const lineHeight = useLinesHeight({ typography, lines: 1 });
-    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx) }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
+    const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
+    console.log('rendering tab index', tabIndex);
+    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
                         mr: 3,
                         alignItems: 'flex-start',
                     } }) }))), _jsx("div", Object.assign({ sx: {
                     cursor: onClick ? 'pointer' : 'default',
-                }, tabIndex: onClick ? 0 : undefined }, { children: children }))] })));
+                } }, { children: children }))] })));
 };

package/dist/components/elements/Table/Table.stories.js

@@ -78,7 +78,6 @@ const SortableStory = () => {
         key: 'name',
         direction: SORT_DIRECTION.ASC,
     });
-    console.log(sortConfig);
     const sorted = sortByKey({
         items: data,
         config: sortConfig,

package/dist/components/providers/menu.js

@@ -4,6 +4,7 @@ import { useEnvironment } from './env';
 import { KEY_CODES, equals } from '../../utils/misc';
 import { useCheckMidClick } from '../../utils/hooks/useCheckMidClick';
 import { useUniqueId } from './uniqueIds';
+import { useCheckMidKeyPress } from '../../utils/hooks/useCheckMidKeyPress';
 export var MENU_ACTION_TYPE;
 (function (MENU_ACTION_TYPE) {
     MENU_ACTION_TYPE["SUBMENU"] = "SUBMENU";
@@ -43,7 +44,7 @@ export const MenuProvider = ({ menu, children, }) => {
     const { flagInDevelopment } = useEnvironment();
     const menuId = useUniqueId('hcl-menu');
     const { isMidClick, elementProps: checkMidclickProps } = useCheckMidClick();
-    const [usingKeyboard, setUsingKeyboard] = useState(false);
+    const { isMidKeyPress, elementProps: checkMidKeyPressProps } = useCheckMidKeyPress();
     const closeOnBlurTimeout = React.useRef();
     const initialPath = React.useMemo(() => [menu.items[0].id], [menu]);
     const [activePath, setActivePath] = useState(initialPath);
@@ -61,7 +62,6 @@ export const MenuProvider = ({ menu, children, }) => {
     }, []);
     const close = React.useCallback(() => {
         setIsOpen(false);
-        setUsingKeyboard(false);
     }, []);
     const getMenuItem = React.useCallback((path) => {
         let menuItem = undefined;
@@ -100,17 +100,18 @@ export const MenuProvider = ({ menu, children, }) => {
     const currentMenuLength = activeParentMenu.items.length;
     const onFocus = React.useCallback(() => {
         if (!isMidClick.current) {
-            setUsingKeyboard(true);
             open();
         }
     }, [isMidClick, open]);
     const onBlur = React.useCallback(() => {
+        checkMidKeyPressProps.onBlur();
         closeOnBlurTimeout.current = setTimeout(() => {
             close();
             setActivePath(initialPath);
         }, 300);
-    }, [close, initialPath]);
+    }, [close, initialPath, checkMidKeyPressProps]);
     const onKeyDown = React.useCallback((e) => {
+        checkMidKeyPressProps.onKeyDown(e);
         const navigateNext = () => {
             const nextIndex = (activeIndex + 1) % currentMenuLength;
             const nextId = activeParentMenu.items[nextIndex].id;
@@ -160,9 +161,6 @@ export const MenuProvider = ({ menu, children, }) => {
                 navigateIn();
             }
         }
-        else {
-            setUsingKeyboard(true);
-        }
         if (e.key === KEY_CODES.ESCAPE) {
             if (activePath.length > 1) {
                 navigateOut();
@@ -211,6 +209,7 @@ export const MenuProvider = ({ menu, children, }) => {
         activeParentMenu,
         currentMenuLength,
         getItemId,
+        checkMidKeyPressProps,
     ]);
     const getMenuProps = React.useCallback((path) => {
         const isTopLevel = !path;
@@ -223,15 +222,25 @@ export const MenuProvider = ({ menu, children, }) => {
             }
         }
         const isVertical = _menu.orientation === MENU_ORIENTATION.VERTICAL;
-        const topLevelProps = Object.assign(Object.assign({}, checkMidclickProps), { onKeyDown,
+        const topLevelProps = Object.assign(Object.assign({}, checkMidclickProps), { onKeyUp: checkMidKeyPressProps.onKeyUp, onKeyDown,
             onFocus,
             onBlur });
         return Object.assign({ role: 'menu', 'aria-orientation': isVertical ? 'vertical' : 'horizontal', tabIndex: isTopLevel ? 0 : -1 }, (isTopLevel ? topLevelProps : {}));
-    }, [menu, onFocus, onBlur, checkMidclickProps, getMenuItem, onKeyDown]);
+    }, [
+        menu,
+        onFocus,
+        onBlur,
+        checkMidclickProps,
+        checkMidKeyPressProps,
+        getMenuItem,
+        onKeyDown,
+    ]);
     const getMenuItemProps = React.useCallback((path) => {
         const isTopLevel = path.length === 1;
         const isActivePath = equals(path, activePath);
-        return Object.assign(Object.assign({}, checkMidclickProps), { role: 'menuitem', 'aria-roledescription': getAriaRoleDescription(activeParentMenu.orientation), id: getItemId(path), onKeyDown: equals(path, activePath) ? onKeyDown : undefined, tabIndex: -1, onFocus: () => {
+        const useActiveStyles = isOpen && equals(path, activePath);
+        const styles = useActiveStyles ? activeStyles : inactiveStyles;
+        return Object.assign(Object.assign({}, checkMidclickProps), { role: 'menuitem', 'aria-roledescription': getAriaRoleDescription(activeParentMenu.orientation), id: getItemId(path), onKeyDown: equals(path, activePath) ? onKeyDown : undefined, onKeyUp: checkMidKeyPressProps.onKeyUp, tabIndex: -1, onFocus: () => {
                 if (!isMidClick) {
                     setActivePath(path);
                 }
@@ -250,11 +259,14 @@ export const MenuProvider = ({ menu, children, }) => {
                 if (isSubmenu &&
                     isActivePath &&
                     isTopLevel &&
-                    !usingKeyboard &&
+                    !isMidKeyPress.current &&
                     isOpen) {
                     close();
                 }
-                else if (isSubmenu && isTopLevel && !usingKeyboard && !isOpen) {
+                else if (isSubmenu &&
+                    isTopLevel &&
+                    !isMidKeyPress.current &&
+                    (!isOpen || !isActivePath)) {
                     setActivePath(path);
                     open();
                 }
@@ -263,19 +275,18 @@ export const MenuProvider = ({ menu, children, }) => {
                         key: KEY_CODES.ENTER,
                     });
                 }
-            }, style: isOpen && usingKeyboard && equals(path, activePath)
-                ? activeStyles
-                : inactiveStyles });
+            }, style: styles });
     }, [
         getItemId,
         getMenuItem,
         activePath,
-        isOpen,
         checkMidclickProps,
+        isMidKeyPress,
+        checkMidKeyPressProps,
+        isOpen,
         close,
         open,
         onKeyDown,
-        usingKeyboard,
         activeParentMenu,
         isMidClick,
     ]);

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { theme, ThemeProvider, useTheme } from './theme';
-export type { StylesProp } from './theme';
+export type { StylesProp, StyledElementProps } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
@@ -34,7 +34,6 @@ export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
-export { MENU_ACTION_TYPE, MENU_ORIENTATION } from './components/providers/menu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
@@ -42,7 +41,7 @@ export { DragDropList, DragHandle } from './components/composites/DragDropList';
 export { Seo } from './components/composites/Seo';
 export { StructuredData } from './components/composites/StructuredData';
 export { UiProvider } from './components/providers/ui';
-export { MenuProvider, useMenu } from './components/providers/menu';
+export { MenuProvider, useMenu, MENU_ACTION_TYPE, MENU_ORIENTATION, } from './components/providers/menu';
 export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';

package/dist/index.js

@@ -33,7 +33,6 @@ export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
-export { MENU_ACTION_TYPE, MENU_ORIENTATION } from './components/providers/menu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
@@ -41,7 +40,7 @@ export { DragDropList, DragHandle } from './components/composites/DragDropList';
 export { Seo } from './components/composites/Seo';
 export { StructuredData } from './components/composites/StructuredData';
 export { UiProvider } from './components/providers/ui';
-export { MenuProvider, useMenu } from './components/providers/menu';
+export { MenuProvider, useMenu, MENU_ACTION_TYPE, MENU_ORIENTATION, } from './components/providers/menu';
 export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';

package/dist/utils/hooks/useCheckMidClick.js

@@ -7,11 +7,11 @@ export const useCheckMidClick = () => {
     const onMouseUp = () => {
         isMidClick.current = false;
     };
-    return {
+    return React.useMemo(() => ({
         elementProps: {
             onMouseDown,
             onMouseUp,
         },
         isMidClick,
-    };
+    }), []);
 };

package/dist/utils/hooks/useCheckMidKeyPress.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const useCheckMidKeyPress: () => {
+    elementProps: {
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        onKeyUp: () => void;
+        onBlur: () => void;
+    };
+    isMidKeyPress: React.MutableRefObject<boolean>;
+};

package/dist/utils/hooks/useCheckMidKeyPress.js

@@ -0,0 +1,23 @@
+import React from 'react';
+export const useCheckMidKeyPress = () => {
+    const isMidKeyPress = React.useRef(false);
+    const onKeyDown = (e) => {
+        if (e.key === 'Tab' || e.key === 'Escape')
+            return;
+        isMidKeyPress.current = true;
+    };
+    const onKeyUp = () => {
+        isMidKeyPress.current = false;
+    };
+    const onBlur = () => {
+        isMidKeyPress.current = false;
+    };
+    return React.useMemo(() => ({
+        elementProps: {
+            onKeyDown,
+            onKeyUp,
+            onBlur,
+        },
+        isMidKeyPress,
+    }), []);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "type": "module",
   "sideEffects": false,
   "files": [