@peculiar/react-components 0.2.4 → 0.3.0

package/dist/cjs/Menu/menu.js

@@ -28,47 +28,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 var react_1 = __importDefault(require("react"));
 var Popover_1 = require("../Popover");
-var Typography_1 = require("../Typography");
+var MenuList_1 = require("../MenuList");
 var styles_1 = require("../styles");
-var stylesMenuList = function () { return (0, styles_1.css)({
-    label: 'Menu-list',
-    padding: 'var(--pv-size-base-2) 0px',
-    outline: 'none',
-}); };
-var stylesMenuItem = function () { return (0, styles_1.css)({
-    label: 'Menu-item',
-    padding: '0px var(--pv-size-base-2)',
-    fontFamily: 'inherit',
-    outline: 'none',
-    width: '100%',
-    height: 'var(--pv-size-base-7)',
-    display: 'flex',
-    textAlign: 'left',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    textDecoration: 'none',
-    userSelect: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 200ms',
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'var(--pv-color-black)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-4)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    },
-    '&:disabled': {
-        color: 'var(--pv-color-gray-7)',
-        cursor: 'not-allowed',
-    },
-}); };
+/**
+ *
+ */
+/**
+ * Styles.
+ */
 var stylesPopper = function () { return (0, styles_1.css)({
     label: 'Menu-popover',
     '&[data-popper-placement^="bottom"]': {
@@ -84,11 +51,14 @@ var stylesPopper = function () { return (0, styles_1.css)({
         margin: '0px var(--pv-size-base-3)',
     },
 }); };
+/**
+ *
+ */
 exports.Menu = react_1.default.forwardRef(function (props, ref) {
-    var _a, _b;
-    var children = props.children, options = props.options, onClose = props.onClose, _c = props.popoverProps, popoverProps = _c === void 0 ? {} : _c;
-    var className = popoverProps.className, _d = popoverProps.modalProps, modalProps = _d === void 0 ? {} : _d;
-    var _e = react_1.default.useState(false), open = _e[0], setOpen = _e[1];
+    var _a;
+    var children = props.children, options = props.options, onClose = props.onClose, _b = props.popoverProps, popoverProps = _b === void 0 ? {} : _b;
+    var className = popoverProps.className, _c = popoverProps.modalProps, modalProps = _c === void 0 ? {} : _c;
+    var _d = react_1.default.useState(false), open = _d[0], setOpen = _d[1];
     var childRef = react_1.default.useRef(null);
     var handleChildClick = function () {
         setOpen(true);
@@ -100,14 +70,28 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
         }
     };
     var handleMenuItemClick = function (option) { return function (event) {
-        setOpen(false);
         if (option.onClick) {
             option.onClick(event);
         }
-        if (onClose) {
-            onClose();
-        }
+        handlePopoverClose();
     }; };
+    var handleKeyDown = function (event) {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            handlePopoverClose();
+        }
+    };
+    var renderOption = function (option, index) {
+        var component = option.component, disabled = option.disabled, label = option.label, subOptions = option.subOptions, classNameProp = option.className, textVariantProp = option.textVariant, onClick = option.onClick, other = __rest(option, ["component", "disabled", "label", "subOptions", "className", "textVariant", "onClick"]);
+        if (subOptions && subOptions.length) {
+            return (react_1.default.createElement(MenuList_1.SubMenuItem, __assign({ key: index, component: component, textVariant: textVariantProp, disabled: disabled, label: label, className: classNameProp }, other), subOptions.map(renderOption)));
+        }
+        return (react_1.default.createElement(MenuList_1.MenuItem
+        // eslint-disable-next-line react/no-array-index-key
+        , __assign({ 
+            // eslint-disable-next-line react/no-array-index-key
+            key: index, component: component, textVariant: textVariantProp, disabled: disabled, onClick: handleMenuItemClick(option), className: classNameProp }, other), label));
+    };
     var childrenProps = {
         ref: childRef,
         onClick: handleChildClick,
@@ -116,25 +100,11 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(children, childrenProps),
-        react_1.default.createElement(Popover_1.Popover, __assign({}, popoverProps, { modalProps: __assign(__assign({}, modalProps), { disableAutoFocus: true }), ref: ref, open: open, anchorEl: childRef.current, onClose: handlePopoverClose, className: (0, styles_1.cx)((_a = {},
+        react_1.default.createElement(Popover_1.Popover, __assign({}, popoverProps, { modalProps: __assign(__assign({}, modalProps), { disableAutoFocus: false }), ref: ref, open: open, anchorEl: childRef.current, onClose: handlePopoverClose, onKeyDown: handleKeyDown, className: (0, styles_1.cx)((_a = {},
                 _a[stylesPopper()] = true,
                 _a[className] = !!className,
                 _a)) }),
-            react_1.default.createElement("div", { role: "menu", tabIndex: -1, className: (0, styles_1.cx)((_b = {},
-                    _b[stylesMenuList()] = true,
-                    _b)) }, options.map(function (option, index) {
-                var _a;
-                var component = option.component, disabled = option.disabled, label = option.label, classNameProp = option.className, textVariantProp = option.textVariant, other = __rest(option, ["component", "disabled", "label", "className", "textVariant"]);
-                var Component = component || 'button';
-                var textVariant = textVariantProp || 'b3';
-                return (react_1.default.createElement(Component, __assign({}, other, { 
-                    // eslint-disable-next-line react/no-array-index-key
-                    key: index, type: "button", role: "menuitem", className: (0, styles_1.cx)((_a = {},
-                        _a[stylesMenuItem()] = true,
-                        _a[classNameProp] = !!classNameProp,
-                        _a)), onClick: handleMenuItemClick(option), disabled: disabled }),
-                    react_1.default.createElement(Typography_1.Typography, { variant: textVariant, color: "inherit", component: "span" }, label)));
-            })))));
+            react_1.default.createElement(MenuList_1.MenuList, null, options.map(renderOption)))));
 });
 exports.Menu.displayName = 'Menu';
 exports.Menu.defaultProps = {};

package/dist/cjs/Menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/Menu/menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/Menu/menu.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/MenuList/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenuItem = exports.MenuItem = exports.MenuList = void 0;
+var menu_list_1 = require("./menu_list");
+Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return menu_list_1.MenuList; } });
+var menu_item_1 = require("./menu_item");
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return menu_item_1.MenuItem; } });
+var sub_menu_item_1 = require("./sub_menu_item");
+Object.defineProperty(exports, "SubMenuItem", { enumerable: true, get: function () { return sub_menu_item_1.SubMenuItem; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/MenuList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MenuList/index.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,iDAA8C;AAArC,4GAAA,WAAW,OAAA"}

package/dist/cjs/MenuList/menu_item.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+var react_1 = __importDefault(require("react"));
+var Typography_1 = require("../Typography");
+var styles_1 = require("../styles");
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var stylesBase = function (props) { return (0, styles_1.css)(__assign({ label: 'MenuItem', padding: '0px var(--pv-size-base-2)', fontFamily: 'inherit', outline: 'none', width: '100%', height: 'var(--pv-size-base-7)', display: 'flex', textAlign: 'left', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none', userSelect: 'none', cursor: 'pointer', transition: 'background-color 200ms', backgroundColor: 'transparent', border: 'none', color: 'var(--pv-color-black)', boxSizing: 'border-box', '&:hover': {
+        backgroundColor: 'var(--pv-color-gray-3)',
+    }, '&:focus': {
+        backgroundColor: 'var(--pv-color-gray-4)',
+    }, '&:active': {
+        backgroundColor: 'var(--pv-color-gray-5)',
+    } }, (props.disabled && {
+    color: 'var(--pv-color-gray-7)',
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+}))); };
+/**
+ *
+ */
+exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
+    var _a;
+    var component = props.component, children = props.children, className = props.className, disabled = props.disabled, textVariantProp = props.textVariant, endIcon = props.endIcon, onClick = props.onClick, other = __rest(props, ["component", "children", "className", "disabled", "textVariant", "endIcon", "onClick"]);
+    var Component = component || 'li';
+    var textVariant = textVariantProp || 'b3';
+    var handleKeyDown = function (event) {
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget
+            && event.key === 'Enter'
+            && !disabled) {
+            event.preventDefault();
+            if (onClick) {
+                onClick(event);
+            }
+        }
+    };
+    return (react_1.default.createElement(Component, __assign({ ref: ref, tabIndex: -1, role: "menuitem", className: (0, styles_1.cx)((_a = {},
+            _a[stylesBase(props)] = true,
+            _a[className] = !!className,
+            _a)), "aria-disabled": disabled, onKeyDown: handleKeyDown, onClick: onClick }, other),
+        react_1.default.createElement(Typography_1.Typography, { variant: textVariant, color: "inherit", component: "span" }, children),
+        endIcon));
+});
+exports.MenuItem.displayName = 'MenuItem';
+//# sourceMappingURL=menu_item.js.map

package/dist/cjs/MenuList/menu_item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu_item.js","sourceRoot":"","sources":["../../../src/MenuList/menu_item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,4CAA2C;AAC3C,oCAAoD;AA+BpD;;GAEG;AAEH;;GAEG;AACH,IAAM,UAAU,GAAG,UAAC,KAAuB,IAAK,OAAA,IAAA,YAAG,aACjD,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,2BAA2B,EACpC,UAAU,EAAE,SAAS,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,uBAAuB,EAC/B,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,eAAe,EAC/B,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,wBAAwB,EACpC,eAAe,EAAE,aAAa,EAC9B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,uBAAuB,EAC9B,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE;QACT,eAAe,EAAE,wBAAwB;KAC1C,EACD,SAAS,EAAE;QACT,eAAe,EAAE,wBAAwB;KAC1C,EACD,UAAU,EAAE;QACV,eAAe,EAAE,wBAAwB;KAC1C,IACE,CAAC,KAAK,CAAC,QAAQ,IAAI;IACpB,KAAK,EAAE,wBAAwB;IAC/B,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE,MAAM;CACtB,CAAC,EACF,EAjC8C,CAiC9C,CAAC;AACH;;GAEG;AAEU,QAAA,QAAQ,GAAG,eAAK,CAAC,UAAU,CAAqB,UAAC,KAAK,EAAE,GAAG;;IAEpE,IAAA,SAAS,GAQP,KAAK,UARE,EACT,QAAQ,GAON,KAAK,SAPC,EACR,SAAS,GAMP,KAAK,UANE,EACT,QAAQ,GAKN,KAAK,SALC,EACK,eAAe,GAI1B,KAAK,YAJqB,EAC5B,OAAO,GAGL,KAAK,QAHA,EACP,OAAO,GAEL,KAAK,QAFA,EACJ,KAAK,UACN,KAAK,EATH,uFASL,CADS,CACA;IACV,IAAM,SAAS,GAAG,SAAS,IAAI,IAAI,CAAC;IACpC,IAAM,WAAW,GAAG,eAAe,IAAI,IAAI,CAAC;IAE5C,IAAM,aAAa,GAAG,UAAC,KAAyC;QAC9D,sDAAsD;QACtD,IACE,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa;eACjC,KAAK,CAAC,GAAG,KAAK,OAAO;eACrB,CAAC,QAAQ,EACZ;YACA,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,KAAY,CAAC,CAAC;aACvB;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,aACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,IAAA,WAAE;YACX,GAAC,UAAU,CAAC,KAAK,CAAC,IAAG,IAAI;YACzB,GAAC,SAAS,IAAG,CAAC,CAAC,SAAS;gBACxB,mBACa,QAAQ,EACvB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO,IACZ,KAAK;QAET,8BAAC,uBAAU,IACT,OAAO,EAAE,WAAW,EACpB,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,MAAM,IAEf,QAAQ,CACE;QACZ,OAAO,CACE,CACb,CAAC;AACJ,CAAC,CAA0C,CAAC;AAE5C,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/cjs/MenuList/menu_list.js

@@ -0,0 +1,123 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("../styles");
+var hooks_1 = require("../hooks");
+var owner_document_1 = require("../utils/owner_document");
+function nextItem(list, item) {
+    if (list === item) {
+        return list.firstChild;
+    }
+    if (item && item.nextElementSibling) {
+        return item.nextElementSibling;
+    }
+    return null;
+}
+function previousItem(list, item) {
+    if (list === item) {
+        return list.firstChild;
+    }
+    if (item && item.previousElementSibling) {
+        return item.previousElementSibling;
+    }
+    return null;
+}
+function moveFocus(list, currentFocus, traversalFunction) {
+    var wrappedOnce = false;
+    var nextFocus = traversalFunction(list, currentFocus, false);
+    while (nextFocus) {
+        // Prevent infinite loop.
+        if (nextFocus === list.firstChild) {
+            if (wrappedOnce) {
+                return false;
+            }
+            wrappedOnce = true;
+        }
+        // Same logic as useAutocomplete.js
+        var nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
+        if (!nextFocus.hasAttribute('tabindex')
+            || nextFocusDisabled) {
+            // Move to the next element.
+            nextFocus = traversalFunction(list, nextFocus);
+        }
+        else {
+            nextFocus.focus();
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var stylesBase = function () { return (0, styles_1.css)({
+    label: 'MenuList',
+    padding: 'var(--pv-size-base-2) 0px',
+    outline: 'none',
+    listStyle: 'none',
+    margin: 0,
+}); };
+/**
+ *
+ */
+exports.MenuList = react_1.default.forwardRef(function (props, ref) {
+    var _a;
+    var children = props.children, className = props.className, component = props.component, other = __rest(props, ["children", "className", "component"]);
+    var rootRef = react_1.default.useRef(null);
+    var multiRef = (0, hooks_1.useMergedRef)(rootRef, ref);
+    var Component = component || 'ul';
+    var handleKeyDown = function (event) {
+        var list = rootRef.current;
+        var key = event.key;
+        var currentFocus = (0, owner_document_1.ownerDocument)(list).activeElement;
+        if (key === 'ArrowDown') {
+            // Prevent scroll of the page
+            event.preventDefault();
+            event.stopPropagation();
+            moveFocus(list, currentFocus, nextItem);
+        }
+        else if (key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            moveFocus(list, currentFocus, previousItem);
+        }
+    };
+    (0, hooks_1.useEnhancedEffect)(function () {
+        rootRef.current.focus();
+    }, []);
+    return (react_1.default.createElement(Component, __assign({ ref: multiRef, role: "menu", tabIndex: -1, className: (0, styles_1.cx)((_a = {},
+            _a[stylesBase()] = true,
+            _a[className] = !!className,
+            _a)), onKeyDown: handleKeyDown }, other), children));
+});
+exports.MenuList.displayName = 'MenuList';
+//# sourceMappingURL=menu_list.js.map

package/dist/cjs/MenuList/menu_list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu_list.js","sourceRoot":"","sources":["../../../src/MenuList/menu_list.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/MenuList/sub_menu_item.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenuItem = void 0;
+var react_1 = __importDefault(require("react"));
+var Popper_1 = require("../Popper");
+var Box_1 = require("../Box");
+var hooks_1 = require("../hooks");
+var icons_1 = require("../icons");
+var styles_1 = require("../styles");
+var menu_item_1 = require("./menu_item");
+var menu_list_1 = require("./menu_list");
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var stylesBase = function () { return (0, styles_1.css)({
+    label: 'SubMenu-MenuList',
+    minWidth: '16px',
+    minHeight: '16px',
+    boxShadow: 'var(--pv-shadow-light-low)',
+}); };
+/**
+ *
+ */
+exports.SubMenuItem = react_1.default.forwardRef(function (props, ref) {
+    var label = props.label, children = props.children, other = __rest(props, ["label", "children"]);
+    var _a = react_1.default.useState(false), open = _a[0], setOpen = _a[1];
+    var rootRef = react_1.default.useRef(null);
+    var multiRef = (0, hooks_1.useMergedRef)(ref, rootRef);
+    var handleMouseEnter = react_1.default.useCallback(function () { return setOpen(true); }, []);
+    var handleMouseLeave = react_1.default.useCallback(function () { return setOpen(false); }, []);
+    return (react_1.default.createElement(menu_item_1.MenuItem, __assign({}, other, { endIcon: react_1.default.createElement(icons_1.ArrowRightIcon, null), ref: multiRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleMouseEnter }),
+        label,
+        react_1.default.createElement(Popper_1.Popper, { open: open, anchorEl: rootRef.current, placement: "right-start", disablePortal: true, onMouseLeave: handleMouseLeave },
+            react_1.default.createElement(Box_1.Box, { component: menu_list_1.MenuList, borderRadius: 4, background: "white", className: stylesBase() }, children))));
+});
+exports.SubMenuItem.displayName = 'SubMenuItem';
+//# sourceMappingURL=sub_menu_item.js.map

package/dist/cjs/MenuList/sub_menu_item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub_menu_item.js","sourceRoot":"","sources":["../../../src/MenuList/sub_menu_item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,oCAAmC;AACnC,8BAA6B;AAC7B,kCAAwC;AACxC,kCAA0C;AAC1C,oCAAgC;AAChC,yCAAuC;AAEvC,yCAAuC;AASvC;;GAEG;AAEH;;GAEG;AACH,IAAM,UAAU,GAAG,cAAM,OAAA,IAAA,YAAG,EAAC;IAC3B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,4BAA4B;CACxC,CAAC,EALuB,CAKvB,CAAC;AACH;;GAEG;AAEU,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CAAwB,UAAC,KAAK,EAAE,GAAG;IAE1E,IAAA,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EAJH,qBAIL,CADS,CACA;IACJ,IAAA,KAAkB,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtC,IAAI,QAAA,EAAE,OAAO,QAAyB,CAAC;IAC9C,IAAM,OAAO,GAAG,eAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,IAAA,oBAAY,EAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE5C,IAAM,gBAAgB,GAAG,eAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,IAAI,CAAC,EAAb,CAAa,EAAE,EAAE,CAAC,CAAC;IAEpE,IAAM,gBAAgB,GAAG,eAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,8BAAC,oBAAQ,eACH,KAAK,IACT,OAAO,EAAE,8BAAC,sBAAc,OAAG,EAC3B,GAAG,EAAE,QAAQ,EACb,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,gBAAgB;QAExB,KAAK;QACN,8BAAC,eAAM,IACL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,OAAO,EACzB,SAAS,EAAC,aAAa,EACvB,aAAa,QACb,YAAY,EAAE,gBAAgB;YAE9B,8BAAC,SAAG,IACF,SAAS,EAAE,oBAAQ,EACnB,YAAY,EAAE,CAAC,EACf,UAAU,EAAC,OAAO,EAClB,SAAS,EAAE,UAAU,EAAE,IAEtB,QAAQ,CACL,CACC,CACA,CACZ,CAAC;AACJ,CAAC,CAA0C,CAAC;AAE5C,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/cjs/icons/arrow_rigth.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowRightIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var ArrowRightIcon = function (props) { return (react_1.default.createElement("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: "24px", height: "24px" }),
+    react_1.default.createElement("path", { stroke: "currentColor", strokeWidth: "1.5", d: "m10 18 6-6-6-6" }))); };
+exports.ArrowRightIcon = ArrowRightIcon;
+//# sourceMappingURL=arrow_rigth.js.map

package/dist/cjs/icons/arrow_rigth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow_rigth.js","sourceRoot":"","sources":["../../../src/icons/arrow_rigth.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAInB,IAAM,cAAc,GAAwB,UAAC,KAAK,IAAK,OAAA,CAC5D,kDACM,KAAK,IACT,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM;IAEb,wCACE,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,CAAC,EAAC,gBAAgB,GAClB,CACE,CACP,EAf6D,CAe7D,CAAC;AAfW,QAAA,cAAc,kBAezB"}

package/dist/cjs/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlusIcon = exports.DotIcon = exports.WarningIcon = exports.CloseCircleIcon = exports.CheckCircleIcon = exports.ArrowDropDownIcon = exports.CloseSmallIcon = exports.CloseIcon = exports.CheckIcon = void 0;
+exports.ArrowRightIcon = exports.PlusIcon = exports.DotIcon = exports.WarningIcon = exports.CloseCircleIcon = exports.CheckCircleIcon = exports.ArrowDropDownIcon = exports.CloseSmallIcon = exports.CloseIcon = exports.CheckIcon = void 0;
 var check_icon_1 = require("./check_icon");
 Object.defineProperty(exports, "CheckIcon", { enumerable: true, get: function () { return check_icon_1.CheckIcon; } });
 var close_icon_1 = require("./close_icon");
@@ -19,4 +19,6 @@ var dot_icon_1 = require("./dot_icon");
 Object.defineProperty(exports, "DotIcon", { enumerable: true, get: function () { return dot_icon_1.DotIcon; } });
 var plus_icon_1 = require("./plus_icon");
 Object.defineProperty(exports, "PlusIcon", { enumerable: true, get: function () { return plus_icon_1.PlusIcon; } });
+var arrow_rigth_1 = require("./arrow_rigth");
+Object.defineProperty(exports, "ArrowRightIcon", { enumerable: true, get: function () { return arrow_rigth_1.ArrowRightIcon; } });
 //# sourceMappingURL=index.js.map

package/dist/cjs/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":";;;AAAA,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,uDAAoD;AAA3C,kHAAA,cAAc,OAAA;AACvB,+DAA2D;AAAlD,yHAAA,iBAAiB,OAAA;AAC1B,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":";;;AAAA,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,uDAAoD;AAA3C,kHAAA,cAAc,OAAA;AACvB,+DAA2D;AAAlD,yHAAA,iBAAiB,OAAA;AAC1B,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,6CAA+C;AAAtC,6GAAA,cAAc,OAAA"}

package/dist/esm/Menu/menu.js

@@ -22,47 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Popover } from '../Popover';
-import { Typography } from '../Typography';
+import { MenuList, MenuItem, SubMenuItem } from '../MenuList';
 import { css, cx } from '../styles';
-var stylesMenuList = function () { return css({
-    label: 'Menu-list',
-    padding: 'var(--pv-size-base-2) 0px',
-    outline: 'none',
-}); };
-var stylesMenuItem = function () { return css({
-    label: 'Menu-item',
-    padding: '0px var(--pv-size-base-2)',
-    fontFamily: 'inherit',
-    outline: 'none',
-    width: '100%',
-    height: 'var(--pv-size-base-7)',
-    display: 'flex',
-    textAlign: 'left',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    textDecoration: 'none',
-    userSelect: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 200ms',
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'var(--pv-color-black)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-4)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    },
-    '&:disabled': {
-        color: 'var(--pv-color-gray-7)',
-        cursor: 'not-allowed',
-    },
-}); };
+/**
+ *
+ */
+/**
+ * Styles.
+ */
 var stylesPopper = function () { return css({
     label: 'Menu-popover',
     '&[data-popper-placement^="bottom"]': {
@@ -78,11 +45,14 @@ var stylesPopper = function () { return css({
         margin: '0px var(--pv-size-base-3)',
     },
 }); };
+/**
+ *
+ */
 export var Menu = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var children = props.children, options = props.options, onClose = props.onClose, _c = props.popoverProps, popoverProps = _c === void 0 ? {} : _c;
-    var className = popoverProps.className, _d = popoverProps.modalProps, modalProps = _d === void 0 ? {} : _d;
-    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
+    var _a;
+    var children = props.children, options = props.options, onClose = props.onClose, _b = props.popoverProps, popoverProps = _b === void 0 ? {} : _b;
+    var className = popoverProps.className, _c = popoverProps.modalProps, modalProps = _c === void 0 ? {} : _c;
+    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
     var childRef = React.useRef(null);
     var handleChildClick = function () {
         setOpen(true);
@@ -94,14 +64,28 @@ export var Menu = React.forwardRef(function (props, ref) {
         }
     };
     var handleMenuItemClick = function (option) { return function (event) {
-        setOpen(false);
         if (option.onClick) {
             option.onClick(event);
         }
-        if (onClose) {
-            onClose();
-        }
+        handlePopoverClose();
     }; };
+    var handleKeyDown = function (event) {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            handlePopoverClose();
+        }
+    };
+    var renderOption = function (option, index) {
+        var component = option.component, disabled = option.disabled, label = option.label, subOptions = option.subOptions, classNameProp = option.className, textVariantProp = option.textVariant, onClick = option.onClick, other = __rest(option, ["component", "disabled", "label", "subOptions", "className", "textVariant", "onClick"]);
+        if (subOptions && subOptions.length) {
+            return (React.createElement(SubMenuItem, __assign({ key: index, component: component, textVariant: textVariantProp, disabled: disabled, label: label, className: classNameProp }, other), subOptions.map(renderOption)));
+        }
+        return (React.createElement(MenuItem
+        // eslint-disable-next-line react/no-array-index-key
+        , __assign({ 
+            // eslint-disable-next-line react/no-array-index-key
+            key: index, component: component, textVariant: textVariantProp, disabled: disabled, onClick: handleMenuItemClick(option), className: classNameProp }, other), label));
+    };
     var childrenProps = {
         ref: childRef,
         onClick: handleChildClick,
@@ -110,25 +94,11 @@ export var Menu = React.forwardRef(function (props, ref) {
     };
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, childrenProps),
-        React.createElement(Popover, __assign({}, popoverProps, { modalProps: __assign(__assign({}, modalProps), { disableAutoFocus: true }), ref: ref, open: open, anchorEl: childRef.current, onClose: handlePopoverClose, className: cx((_a = {},
+        React.createElement(Popover, __assign({}, popoverProps, { modalProps: __assign(__assign({}, modalProps), { disableAutoFocus: false }), ref: ref, open: open, anchorEl: childRef.current, onClose: handlePopoverClose, onKeyDown: handleKeyDown, className: cx((_a = {},
                 _a[stylesPopper()] = true,
                 _a[className] = !!className,
                 _a)) }),
-            React.createElement("div", { role: "menu", tabIndex: -1, className: cx((_b = {},
-                    _b[stylesMenuList()] = true,
-                    _b)) }, options.map(function (option, index) {
-                var _a;
-                var component = option.component, disabled = option.disabled, label = option.label, classNameProp = option.className, textVariantProp = option.textVariant, other = __rest(option, ["component", "disabled", "label", "className", "textVariant"]);
-                var Component = component || 'button';
-                var textVariant = textVariantProp || 'b3';
-                return (React.createElement(Component, __assign({}, other, { 
-                    // eslint-disable-next-line react/no-array-index-key
-                    key: index, type: "button", role: "menuitem", className: cx((_a = {},
-                        _a[stylesMenuItem()] = true,
-                        _a[classNameProp] = !!classNameProp,
-                        _a)), onClick: handleMenuItemClick(option), disabled: disabled }),
-                    React.createElement(Typography, { variant: textVariant, color: "inherit", component: "span" }, label)));
-            })))));
+            React.createElement(MenuList, null, options.map(renderOption)))));
 });
 Menu.displayName = 'Menu';
 Menu.defaultProps = {};