draft-components 1.0.0-beta.5 → 1.0.0-beta.7

package/cjs/components/menu/menu-item.cjs

@@ -4,11 +4,18 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const MenuItem = react.forwardRef(function MenuItem({ icon = null, appearance = 'default', className, children, ...props }, ref) {
-    return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsxs("button", { ...props, ref: ref, className: reactHelpers.classNames(className, {
-                'dc-menu-btn': true,
+const MenuItem = react.forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', iconLeft = null, iconRight = null, className, children, ...props }, ref) {
+    let label = children;
+    if (iconLeft || iconRight) {
+        const className = reactHelpers.classNames('dc-menu-btn__label', {
+            'dc-menu-btn__label_gap_left': iconLeft,
+            'dc-menu-btn__label_gap_right': iconRight,
+        });
+        label = jsxRuntime.jsx("span", { className: className, children: label });
+    }
+    return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsxs("button", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-menu-btn', {
                 [`dc-menu-btn_${appearance}`]: appearance,
-            }), type: "button", role: "menuitem", tabIndex: -1, children: [Boolean(icon) && jsxRuntime.jsx("span", { className: "dc-menu-btn__icon", children: icon }), jsxRuntime.jsx("span", { className: "dc-menu-btn__label", children: children })] }) }));
+            }), type: "button", role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
 });
 
 exports.MenuItem = MenuItem;

package/cjs/components/menu/menu.cjs

@@ -10,7 +10,7 @@ require('../button/icon-button.cjs');
 const popover = require('../popover/popover.cjs');
 const menuItem = require('./menu-item.cjs');
 
-function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonAppearance = 'default', buttonVariant = 'filled', button: button$1, className, children, onOpen, onClose, onKeyDown, ...props }) {
+function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonAppearance = 'default', buttonVariant = 'filled', button: button$1, className, children, onOpen, onClose, onKeyDown, ...props }) {
     const id = react.useId();
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
@@ -83,12 +83,11 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
     const handleButtonClick = (event) => {
         if (isOpen) {
             closeMenu();
-            focusMenuButton();
         }
         else {
             openMenu();
-            window.setTimeout(focusFirstMenuItem);
         }
+        focusMenuButton();
         event.preventDefault();
         event.stopPropagation();
     };
@@ -159,7 +158,7 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
                 closeMenu,
             });
         }
-        return (jsxRuntime.jsx(button.Button, { ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, appearance: buttonAppearance, variant: buttonVariant, children: button$1 }));
+        return (jsxRuntime.jsx(button.Button, { "data-testid": "menu-button", ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, className: buttonClassName, appearance: buttonAppearance, variant: buttonVariant, children: button$1 }));
     };
     return (jsxRuntime.jsx(popover.Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: jsxRuntime.jsx("ul", { ...props, className: reactHelpers.classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: react.Children.map(children, (child) => {
                 if (isMenuItem(child)) {