draft-components 1.0.0-beta.6 → 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)) {

package/css/draft-components.css

@@ -3232,6 +3232,7 @@
 }
 
 .dc-menu {
+  --dc-menu-item-icon-gap: 8px;
   --dc-menu-item-color: var(--dc-button-default-plain-text-color);
   --dc-menu-item-bg: var(--dc-button-default-bg-hover);
   --dc-menu-item-color-destructive: var(--dc-button-danger-plain-text-color);
@@ -3272,6 +3273,7 @@
   width: 100%;
   height: 32px;
   padding: 0 12px;
+  text-align: left;
   white-space: nowrap;
   border: none;
   border-radius: 6px;
@@ -3287,9 +3289,16 @@
   background: var(--dc-menu-item-bg);
 }
 
-.dc-menu-btn__icon {
-  display: inline-flex;
-  margin-right: 8px;
+.dc-menu-btn__label {
+  flex-grow: 1;
+}
+
+.dc-menu-btn__label_gap_left {
+  padding-left: var(--dc-menu-item-icon-gap);
+}
+
+.dc-menu-btn__label_gap_right {
+  padding-right: var(--dc-menu-item-icon-gap);
 }
 
 .dc-menu-btn_destructive {

package/esm/components/menu/menu-item.js

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

package/esm/components/menu/menu.js

@@ -8,7 +8,7 @@ import '../button/icon-button.js';
 import { Popover } from '../popover/popover.js';
 import { MenuItem } from './menu-item.js';
 
-function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonAppearance = 'default', buttonVariant = 'filled', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
+function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonAppearance = 'default', buttonVariant = 'filled', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
     const id = useId();
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
@@ -81,12 +81,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();
     };
@@ -157,7 +156,7 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
                 closeMenu,
             });
         }
-        return (jsx(Button, { ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, appearance: buttonAppearance, variant: buttonVariant, children: button }));
+        return (jsx(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 }));
     };
     return (jsx(Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: jsx("ul", { ...props, className: classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: Children.map(children, (child) => {
                 if (isMenuItem(child)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/menu/menu-item.d.ts

@@ -1,11 +1,14 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 type MenuItemHTMLProps = ComponentPropsWithRef<'button'>;
-type MenuItemBaseProps = Omit<MenuItemHTMLProps, 'children'>;
+type MenuItemBaseProps = Omit<MenuItemHTMLProps, 'children' | 'role'>;
 export type MenuItemAppearance = 'default' | 'destructive';
+export type MenuItemRole = 'menuitem' | 'menuitemradio';
 export type MenuItemProps = {
+    role?: MenuItemRole;
     appearance?: MenuItemAppearance;
-    icon?: ReactNode;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
     children: ReactNode;
 } & MenuItemBaseProps;
-export declare const MenuItem: import("react").ForwardRefExoticComponent<Pick<MenuItemProps, "hidden" | "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "appearance" | "value" | "type" | "name" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenuItem: import("react").ForwardRefExoticComponent<Pick<MenuItemProps, "hidden" | "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "appearance" | "value" | "type" | "name" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconLeft" | "iconRight"> & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/types/components/menu/menu.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithoutRef, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback } from 'react';
 import { type ButtonAppearance, type ButtonVariant } from '../button';
 import { type PopoverAlignment, type PopoverPlacement } from '../popover';
-export type MenuAnchorRenderFn = (props: {
+export type MenuButtonRenderFn = (props: {
     ref: RefCallback<HTMLElement>;
     id: string;
     'aria-haspopup': true;
@@ -23,9 +23,10 @@ export type MenuProps = {
     alignment?: MenuAlignment;
     onOpen?: () => void;
     onClose?: () => void;
-    button: ReactNode | MenuAnchorRenderFn;
+    button: ReactNode | MenuButtonRenderFn;
+    buttonClassName?: string;
     buttonAppearance?: ButtonAppearance;
     buttonVariant?: ButtonVariant;
 } & MenuHTMLProps;
-export declare function Menu({ defaultIsOpen, placement, alignment, buttonAppearance, buttonVariant, button, className, children, onOpen, onClose, onKeyDown, ...props }: MenuProps): JSX.Element;
+export declare function Menu({ defaultIsOpen, placement, alignment, buttonClassName, buttonAppearance, buttonVariant, button, className, children, onOpen, onClose, onKeyDown, ...props }: MenuProps): JSX.Element;
 export {};