@peculiar/react-components 0.2.3 → 0.3.0

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 = {};

package/dist/esm/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/esm/MenuList/index.js

@@ -0,0 +1,4 @@
+export { MenuList } from './menu_list';
+export { MenuItem } from './menu_item';
+export { SubMenuItem } from './sub_menu_item';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MenuList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/esm/MenuList/menu_item.js

@@ -0,0 +1,70 @@
+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;
+};
+import React from 'react';
+import { Typography } from '../Typography';
+import { css, cx } from '../styles';
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var stylesBase = function (props) { return 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',
+}))); };
+/**
+ *
+ */
+export var MenuItem = React.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.createElement(Component, __assign({ ref: ref, tabIndex: -1, role: "menuitem", className: cx((_a = {},
+            _a[stylesBase(props)] = true,
+            _a[className] = !!className,
+            _a)), "aria-disabled": disabled, onKeyDown: handleKeyDown, onClick: onClick }, other),
+        React.createElement(Typography, { variant: textVariant, color: "inherit", component: "span" }, children),
+        endIcon));
+});
+MenuItem.displayName = 'MenuItem';
+//# sourceMappingURL=menu_item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu_item.js","sourceRoot":"","sources":["../../../src/MenuList/menu_item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,EAAE,EAAkB,MAAM,WAAW,CAAC;AA+BpD;;GAEG;AAEH;;GAEG;AACH,IAAM,UAAU,GAAG,UAAC,KAAuB,IAAK,OAAA,GAAG,YACjD,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;AAEH,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,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,oBAAC,SAAS,aACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE;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,oBAAC,UAAU,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,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/esm/MenuList/menu_list.js

@@ -0,0 +1,117 @@
+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;
+};
+import React from 'react';
+import { css, cx } from '../styles';
+import { useMergedRef, useEnhancedEffect } from '../hooks';
+import { ownerDocument } from '../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 css({
+    label: 'MenuList',
+    padding: 'var(--pv-size-base-2) 0px',
+    outline: 'none',
+    listStyle: 'none',
+    margin: 0,
+}); };
+/**
+ *
+ */
+export var MenuList = React.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.useRef(null);
+    var multiRef = useMergedRef(rootRef, ref);
+    var Component = component || 'ul';
+    var handleKeyDown = function (event) {
+        var list = rootRef.current;
+        var key = event.key;
+        var currentFocus = 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);
+        }
+    };
+    useEnhancedEffect(function () {
+        rootRef.current.focus();
+    }, []);
+    return (React.createElement(Component, __assign({ ref: multiRef, role: "menu", tabIndex: -1, className: cx((_a = {},
+            _a[stylesBase()] = true,
+            _a[className] = !!className,
+            _a)), onKeyDown: handleKeyDown }, other), children));
+});
+MenuList.displayName = 'MenuList';
+//# sourceMappingURL=menu_list.js.map

package/dist/esm/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/esm/MenuList/sub_menu_item.js

@@ -0,0 +1,59 @@
+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;
+};
+import React from 'react';
+import { Popper } from '../Popper';
+import { Box } from '../Box';
+import { useMergedRef } from '../hooks';
+import { ArrowRightIcon } from '../icons';
+import { css } from '../styles';
+import { MenuItem } from './menu_item';
+import { MenuList } from './menu_list';
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var stylesBase = function () { return css({
+    label: 'SubMenu-MenuList',
+    minWidth: '16px',
+    minHeight: '16px',
+    boxShadow: 'var(--pv-shadow-light-low)',
+}); };
+/**
+ *
+ */
+export var SubMenuItem = React.forwardRef(function (props, ref) {
+    var label = props.label, children = props.children, other = __rest(props, ["label", "children"]);
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var rootRef = React.useRef(null);
+    var multiRef = useMergedRef(ref, rootRef);
+    var handleMouseEnter = React.useCallback(function () { return setOpen(true); }, []);
+    var handleMouseLeave = React.useCallback(function () { return setOpen(false); }, []);
+    return (React.createElement(MenuItem, __assign({}, other, { endIcon: React.createElement(ArrowRightIcon, null), ref: multiRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleMouseEnter }),
+        label,
+        React.createElement(Popper, { open: open, anchorEl: rootRef.current, placement: "right-start", disablePortal: true, onMouseLeave: handleMouseLeave },
+            React.createElement(Box, { component: MenuList, borderRadius: 4, background: "white", className: stylesBase() }, children))));
+});
+SubMenuItem.displayName = 'SubMenuItem';
+//# sourceMappingURL=sub_menu_item.js.map

package/dist/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC;;GAEG;AAEH;;GAEG;AACH,IAAM,UAAU,GAAG,cAAM,OAAA,GAAG,CAAC;IAC3B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,4BAA4B;CACxC,CAAC,EALuB,CAKvB,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,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,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtC,IAAI,QAAA,EAAE,OAAO,QAAyB,CAAC;IAC9C,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE5C,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,IAAI,CAAC,EAAb,CAAa,EAAE,EAAE,CAAC,CAAC;IAEpE,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,oBAAC,QAAQ,eACH,KAAK,IACT,OAAO,EAAE,oBAAC,cAAc,OAAG,EAC3B,GAAG,EAAE,QAAQ,EACb,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,gBAAgB;QAExB,KAAK;QACN,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,OAAO,EACzB,SAAS,EAAC,aAAa,EACvB,aAAa,QACb,YAAY,EAAE,gBAAgB;YAE9B,oBAAC,GAAG,IACF,SAAS,EAAE,QAAQ,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,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/esm/icons/arrow_rigth.js

@@ -0,0 +1,15 @@
+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);
+};
+import React from 'react';
+export var ArrowRightIcon = function (props) { return (React.createElement("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: "24px", height: "24px" }),
+    React.createElement("path", { stroke: "currentColor", strokeWidth: "1.5", d: "m10 18 6-6-6-6" }))); };
+//# sourceMappingURL=arrow_rigth.js.map

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

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

package/dist/esm/icons/index.js

@@ -7,4 +7,5 @@ export { CloseCircleIcon } from './close_circle_icon';
 export { WarningIcon } from './warning_icon';
 export { DotIcon } from './dot_icon';
 export { PlusIcon } from './plus_icon';
+export { ArrowRightIcon } from './arrow_rigth';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/styles/default_theme.js

@@ -118,7 +118,7 @@ export var defaultTheme = {
             weight: '700',
             size: '14px',
             height: '20px',
-            spacing: '0.5px',
+            spacing: '0.2px',
         },
         /**
          * button2
@@ -127,7 +127,7 @@ export var defaultTheme = {
             weight: '700',
             size: '13px',
             height: '17px',
-            spacing: '0.5px',
+            spacing: '0.2px',
         },
         /**
          * caption1

package/dist/esm/styles/utils.js

@@ -32,7 +32,7 @@ export var createTheme = function (options) {
             : defaultTheme.color.black;
     }
     var partialTheme = deepmerge(options, {
-        color: __assign(__assign(__assign(__assign(__assign({}, primary), secondary), wrong), attention), { 'primary-contrast': getContrastText(primary.primary), 'secondary-contrast': getContrastText(secondary.secondary), 'wrong-contrast': getContrastText(wrong.wrong) }),
+        color: __assign(__assign(__assign(__assign(__assign(__assign({}, primary), secondary), wrong), attention), { 'primary-contrast': getContrastText(primary.primary), 'secondary-contrast': getContrastText(secondary.secondary), 'wrong-contrast': getContrastText(wrong.wrong) }), options === null || options === void 0 ? void 0 : options.color),
         size: size,
     });
     return deepmerge(defaultTheme, partialTheme);

package/dist/esm/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/styles/utils.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,CAAC,IAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,IAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,OAA0B;;IACpD,IAAM,OAAO,GAAG,qBAAqB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,OAAO,CAAC,CAAC;IAC/D,IAAM,SAAS,GAAG,uBAAuB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC;IACrE,IAAM,KAAK,GAAG,mBAAmB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IACzD,IAAM,SAAS,GAAG,uBAAuB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC;IACrE,IAAM,IAAI,GAAG,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC;IAE7C,SAAS,eAAe,CAAC,UAAkB;QACzC,IAAM,aAAa,GAAG,IAAI,KAAK,CAAC,UAAU,CAAC;aACxC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAE9C,OAAO,aAAa,GAAG,iBAAiB;YACtC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK;YAC1B,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,IAAM,YAAY,GAAG,SAAS,CAAC,OAAO,EAAE;QACtC,KAAK,EAAE,iDACF,OAAO,GACP,SAAS,GACT,KAAK,GACL,SAAS,KACZ,kBAAkB,EAAE,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,EACpD,oBAAoB,EAAE,eAAe,CAAC,SAAS,CAAC,SAAS,CAAC,EAC1D,gBAAgB,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,GACT;QACvC,IAAI,MAAA;KACL,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iCAAiC,GAAG,UAAC,MAA2B;;IAC3E,IAAM,OAAO,GAAG,IAAI;QAEhB,GAAC,YAAK,sBAAsB,CAAE,IAAG,MAAM;aAEzC,EAAE,SAAS,EAAE,GAAG,EAAE,CACnB,CAAC;IAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/styles/utils.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,CAAC,IAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,IAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,OAA0B;;IACpD,IAAM,OAAO,GAAG,qBAAqB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,OAAO,CAAC,CAAC;IAC/D,IAAM,SAAS,GAAG,uBAAuB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC;IACrE,IAAM,KAAK,GAAG,mBAAmB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IACzD,IAAM,SAAS,GAAG,uBAAuB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC;IACrE,IAAM,IAAI,GAAG,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC;IAE7C,SAAS,eAAe,CAAC,UAAkB;QACzC,IAAM,aAAa,GAAG,IAAI,KAAK,CAAC,UAAU,CAAC;aACxC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAE9C,OAAO,aAAa,GAAG,iBAAiB;YACtC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK;YAC1B,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,IAAM,YAAY,GAAG,SAAS,CAAC,OAAO,EAAE;QACtC,KAAK,EAAE,0DACF,OAAO,GACP,SAAS,GACT,KAAK,GACL,SAAS,KACZ,kBAAkB,EAAE,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,EACpD,oBAAoB,EAAE,eAAe,CAAC,SAAS,CAAC,SAAS,CAAC,EAC1D,gBAAgB,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,KAC3C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CACoB;QACvC,IAAI,MAAA;KACL,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iCAAiC,GAAG,UAAC,MAA2B;;IAC3E,IAAM,OAAO,GAAG,IAAI;QAEhB,GAAC,YAAK,sBAAsB,CAAE,IAAG,MAAM;aAEzC,EAAE,SAAS,EAAE,GAAG,EAAE,CACnB,CAAC;IAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/dist/esnext/Menu/menu.js

@@ -1,46 +1,13 @@
 import React from 'react';
 import { Popover } from '../Popover';
-import { Typography } from '../Typography';
+import { MenuList, MenuItem, SubMenuItem } from '../MenuList';
 import { css, cx } from '../styles';
-const stylesMenuList = () => css({
-    label: 'Menu-list',
-    padding: 'var(--pv-size-base-2) 0px',
-    outline: 'none',
-});
-const stylesMenuItem = () => 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.
+ */
 const stylesPopper = () => css({
     label: 'Menu-popover',
     '&[data-popper-placement^="bottom"]': {
@@ -56,6 +23,9 @@ const stylesPopper = () => css({
         margin: '0px var(--pv-size-base-3)',
     },
 });
+/**
+ *
+ */
 export const Menu = React.forwardRef((props, ref) => {
     const { children, options, onClose, popoverProps = {}, } = props;
     const { className, modalProps = {}, } = popoverProps;
@@ -71,13 +41,27 @@ export const Menu = React.forwardRef((props, ref) => {
         }
     };
     const handleMenuItemClick = (option) => (event) => {
-        setOpen(false);
         if (option.onClick) {
             option.onClick(event);
         }
-        if (onClose) {
-            onClose();
+        handlePopoverClose();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            handlePopoverClose();
+        }
+    };
+    const renderOption = (option, index) => {
+        const { component, disabled, label, subOptions, className: classNameProp, textVariant: textVariantProp, onClick, ...other } = option;
+        if (subOptions && subOptions.length) {
+            return (React.createElement(SubMenuItem, { 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
+        , { 
+            // eslint-disable-next-line react/no-array-index-key
+            key: index, component: component, textVariant: textVariantProp, disabled: disabled, onClick: handleMenuItemClick(option), className: classNameProp, ...other }, label));
     };
     const childrenProps = {
         ref: childRef,
@@ -89,25 +73,12 @@ export const Menu = React.forwardRef((props, ref) => {
         React.cloneElement(children, childrenProps),
         React.createElement(Popover, { ...popoverProps, modalProps: {
                 ...modalProps,
-                disableAutoFocus: true,
-            }, ref: ref, open: open, anchorEl: childRef.current, onClose: handlePopoverClose, className: cx({
+                disableAutoFocus: false,
+            }, ref: ref, open: open, anchorEl: childRef.current, onClose: handlePopoverClose, onKeyDown: handleKeyDown, className: cx({
                 [stylesPopper()]: true,
                 [className]: !!className,
             }) },
-            React.createElement("div", { role: "menu", tabIndex: -1, className: cx({
-                    [stylesMenuList()]: true,
-                }) }, options.map((option, index) => {
-                const { component, disabled, label, className: classNameProp, textVariant: textVariantProp, ...other } = option;
-                const Component = component || 'button';
-                const textVariant = textVariantProp || 'b3';
-                return (React.createElement(Component, { ...other, 
-                    // eslint-disable-next-line react/no-array-index-key
-                    key: index, type: "button", role: "menuitem", className: cx({
-                        [stylesMenuItem()]: true,
-                        [classNameProp]: !!classNameProp,
-                    }), 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 = {};