@liiift-studio/mac-os9-ui 0.2.21 → 0.2.23

package/dist/index.js

@@ -913,7 +913,7 @@ const Dialog = forwardRef(({ open = false, onClose, closeOnBackdropClick = true,
 });
 Dialog.displayName = 'Dialog';
 
-var styles$4 = {"menuBar":"MenuBar-module_menuBar","leftContent":"MenuBar-module_leftContent","menusContainer":"MenuBar-module_menusContainer","menuContainer":"MenuBar-module_menuContainer","rightContent":"MenuBar-module_rightContent","menuButton":"MenuBar-module_menuButton","menuButton--disabled":"MenuBar-module_menuButton--disabled","menuButton--open":"MenuBar-module_menuButton--open","dropdown":"MenuBar-module_dropdown"};
+var styles$4 = {"menuBar":"MenuBar-module_menuBar","leftContent":"MenuBar-module_leftContent","menusContainer":"MenuBar-module_menusContainer","menuContainer":"MenuBar-module_menuContainer","rightContent":"MenuBar-module_rightContent","menuButton":"MenuBar-module_menuButton","menuButton--disabled":"MenuBar-module_menuButton--disabled","menuButton--open":"MenuBar-module_menuButton--open","dropdown":"MenuBar-module_dropdown","dropdown--right":"MenuBar-module_dropdown--right"};
 
 /**
  * Mac OS 9 style MenuBar component
@@ -970,41 +970,56 @@ var styles$4 = {"menuBar":"MenuBar-module_menuBar","leftContent":"MenuBar-module
 const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, className = '', dropdownClassName = '', leftContent, rightContent, }, ref) => {
     const [menuBarElement, setMenuBarElement] = useState(null);
     const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [internalOpenIndex, setInternalOpenIndex] = useState(undefined);
+    const isControlled = openMenuIndex !== undefined;
+    const activeOpenIndex = isControlled ? openMenuIndex : internalOpenIndex;
+    const handleMenuOpenInternal = (index) => {
+        if (!isControlled) {
+            setInternalOpenIndex(index);
+        }
+        onMenuOpen?.(index);
+    };
+    const handleMenuCloseInternal = () => {
+        if (!isControlled) {
+            setInternalOpenIndex(undefined);
+        }
+        onMenuClose?.();
+    };
     // Handle click outside to close menu
     useEffect(() => {
-        if (openMenuIndex === undefined || !menuBarElement)
+        if (activeOpenIndex === undefined || !menuBarElement)
             return;
         const handleClickOutside = (event) => {
             if (menuBarElement && !menuBarElement.contains(event.target)) {
-                onMenuClose?.();
+                handleMenuCloseInternal();
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [openMenuIndex, onMenuClose, menuBarElement]);
+    }, [activeOpenIndex, onMenuClose, menuBarElement, isControlled]);
     // Handle Escape key to close menu
     useEffect(() => {
-        if (openMenuIndex === undefined)
+        if (activeOpenIndex === undefined)
             return;
         const handleEscape = (event) => {
             if (event.key === 'Escape') {
                 event.preventDefault();
-                onMenuClose?.();
+                handleMenuCloseInternal();
             }
         };
         document.addEventListener('keydown', handleEscape);
         return () => document.removeEventListener('keydown', handleEscape);
-    }, [openMenuIndex, onMenuClose]);
+    }, [activeOpenIndex, onMenuClose, isControlled]);
     // Handle keyboard navigation
     const handleKeyDown = useCallback((event) => {
         switch (event.key) {
             case 'ArrowLeft':
                 event.preventDefault();
-                if (openMenuIndex !== undefined) {
+                if (activeOpenIndex !== undefined) {
                     // Move to previous menu
-                    const prevIndex = openMenuIndex > 0 ? openMenuIndex - 1 : menus.length - 1;
+                    const prevIndex = activeOpenIndex > 0 ? activeOpenIndex - 1 : menus.length - 1;
                     if (!menus[prevIndex]?.disabled) {
-                        onMenuOpen?.(prevIndex);
+                        handleMenuOpenInternal(prevIndex);
                     }
                 }
                 else if (focusedIndex > 0) {
@@ -1013,11 +1028,11 @@ const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, cla
                 break;
             case 'ArrowRight':
                 event.preventDefault();
-                if (openMenuIndex !== undefined) {
+                if (activeOpenIndex !== undefined) {
                     // Move to next menu
-                    const nextIndex = openMenuIndex < menus.length - 1 ? openMenuIndex + 1 : 0;
+                    const nextIndex = activeOpenIndex < menus.length - 1 ? activeOpenIndex + 1 : 0;
                     if (!menus[nextIndex]?.disabled) {
-                        onMenuOpen?.(nextIndex);
+                        handleMenuOpenInternal(nextIndex);
                     }
                 }
                 else if (focusedIndex < menus.length - 1) {
@@ -1026,18 +1041,18 @@ const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, cla
                 break;
             case 'ArrowDown':
                 event.preventDefault();
-                if (openMenuIndex === undefined && focusedIndex >= 0) {
+                if (activeOpenIndex === undefined && focusedIndex >= 0) {
                     // Open the focused menu (only if it's a dropdown)
                     const menu = menus[focusedIndex];
                     if (!menu?.disabled && menu?.type !== 'link') {
-                        onMenuOpen?.(focusedIndex);
+                        handleMenuOpenInternal(focusedIndex);
                     }
                 }
                 break;
             case 'Enter':
             case ' ':
                 event.preventDefault();
-                if (openMenuIndex === undefined && focusedIndex >= 0) {
+                if (activeOpenIndex === undefined && focusedIndex >= 0) {
                     const menu = menus[focusedIndex];
                     if (!menu?.disabled) {
                         if (menu.type === 'link') {
@@ -1046,13 +1061,13 @@ const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, cla
                         }
                         else {
                             // Open the focused dropdown menu
-                            onMenuOpen?.(focusedIndex);
+                            handleMenuOpenInternal(focusedIndex);
                         }
                     }
                 }
                 break;
         }
-    }, [openMenuIndex, focusedIndex, menus, onMenuOpen, onMenuClose]);
+    }, [activeOpenIndex, focusedIndex, menus, onMenuOpen, onMenuClose, isControlled]);
     // Handle menu button click
     const handleMenuClick = (index) => {
         const menu = menus[index];
@@ -1063,13 +1078,13 @@ const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, cla
             menu.onClick?.();
             return;
         }
-        if (openMenuIndex === index) {
+        if (activeOpenIndex === index) {
             // Clicking the same menu closes it
-            onMenuClose?.();
+            handleMenuCloseInternal();
         }
         else {
             // Open the clicked menu
-            onMenuOpen?.(index);
+            handleMenuOpenInternal(index);
         }
     };
     // Class names
@@ -1086,7 +1101,7 @@ const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, cla
         }
     }, [ref]);
     return (jsxs("div", { ref: handleRef, className: menuBarClassNames, role: "menubar", onKeyDown: handleKeyDown, children: [leftContent && (jsx("div", { className: styles$4.leftContent, children: leftContent })), jsx("div", { className: styles$4.menusContainer, children: menus.map((menu, index) => {
-                    const isOpen = openMenuIndex === index;
+                    const isOpen = activeOpenIndex === index;
                     const isDropdown = menu.type !== 'link';
                     const menuButtonClassNames = [
                         styles$4.menuButton,
@@ -1105,14 +1120,14 @@ const MenuBar = forwardRef(({ menus, openMenuIndex, onMenuOpen, onMenuClose, cla
                                 }, onFocus: () => setFocusedIndex(index), onBlur: () => setFocusedIndex(-1), "aria-disabled": menu.disabled, children: jsx("h3", { children: menu.label }) }) }, index));
                     }
                     // Standard dropdown menu or link without href
-                    return (jsxs("div", { className: styles$4.menuContainer, children: [jsx("button", { type: "button", className: menuButtonClassNames, onClick: () => handleMenuClick(index), onFocus: () => setFocusedIndex(index), onBlur: () => setFocusedIndex(-1), disabled: menu.disabled, "aria-haspopup": isDropdown ? 'true' : undefined, "aria-expanded": isOpen, "aria-disabled": menu.disabled, children: menu.label }), isOpen && isDropdown && menu.items && (jsx("div", { className: dropdownClassNames, role: "menu", children: menu.items }))] }, index));
+                    return (jsxs("div", { className: styles$4.menuContainer, children: [jsx("button", { type: "button", className: menuButtonClassNames, onClick: () => handleMenuClick(index), onFocus: () => setFocusedIndex(index), onBlur: () => setFocusedIndex(-1), disabled: menu.disabled, "aria-haspopup": isDropdown ? 'true' : undefined, "aria-expanded": isOpen, "aria-disabled": menu.disabled, children: jsx("h3", { children: menu.label }) }), isOpen && isDropdown && menu.items && (jsx("div", { className: dropdownClassNames, role: "menu", children: menu.items }))] }, index));
                 }) }), rightContent && (jsx("div", { className: styles$4.rightContent, children: Array.isArray(rightContent)
                     ? rightContent.map((item, index) => (jsx(React.Fragment, { children: item }, index)))
                     : rightContent }))] }));
 });
 MenuBar.displayName = 'MenuBar';
 
-var styles$3 = {"menuItem":"MenuItem-module_menuItem","menuItem--disabled":"MenuItem-module_menuItem--disabled","menuItem--selected":"MenuItem-module_menuItem--selected","menuItem--separator":"MenuItem-module_menuItem--separator","checkmark":"MenuItem-module_checkmark","icon":"MenuItem-module_icon","label":"MenuItem-module_label","shortcut":"MenuItem-module_shortcut","submenuArrow":"MenuItem-module_submenuArrow","separatorLine":"MenuItem-module_separatorLine"};
+var styles$3 = {"menuItem":"MenuItem-module_menuItem","menuItem--disabled":"MenuItem-module_menuItem--disabled","menuItem--selected":"MenuItem-module_menuItem--selected","menuItem--separator":"MenuItem-module_menuItem--separator","checkmark":"MenuItem-module_checkmark","icon":"MenuItem-module_icon","label":"MenuItem-module_label","shortcut":"MenuItem-module_shortcut","submenuArrow":"MenuItem-module_submenuArrow","submenu":"MenuItem-module_submenu","separatorLine":"MenuItem-module_separatorLine"};
 
 /**
  * Mac OS 9 style MenuItem component
@@ -1151,7 +1166,9 @@ var styles$3 = {"menuItem":"MenuItem-module_menuItem","menuItem--disabled":"Menu
  * <MenuItem label="Recent Files" hasSubmenu />
  * ```
  */
-const MenuItem = forwardRef(({ label, shortcut, disabled = false, selected = false, separator = false, checked = false, icon, onClick, onFocus, onBlur, className = '', hasSubmenu = false, }, ref) => {
+const MenuItem = forwardRef(({ label, shortcut, disabled = false, selected = false, separator = false, checked = false, icon, onClick, onFocus, onBlur, className = '', hasSubmenu = false, items, }, ref) => {
+    const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+    const effectiveHasSubmenu = hasSubmenu || !!items;
     // Class names
     const menuItemClassNames = [
         styles$3.menuItem,
@@ -1170,10 +1187,66 @@ const MenuItem = forwardRef(({ label, shortcut, disabled = false, selected = fal
         }
         onClick?.(event);
     };
-    return (jsxs(Fragment, { children: [jsxs("button", { ref: ref, type: "button", className: menuItemClassNames, onClick: handleClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, role: "menuitem", "aria-disabled": disabled, "aria-checked": checked ? 'true' : undefined, children: [jsx("span", { className: styles$3.checkmark, children: checked && '✓' }), icon && jsx("span", { className: styles$3.icon, children: icon }), jsx("span", { className: styles$3.label, children: label }), shortcut && jsx("span", { className: styles$3.shortcut, children: shortcut }), hasSubmenu && jsx("span", { className: styles$3.submenuArrow, children: "\u25B6" })] }), separator && jsx("div", { className: styles$3.separatorLine, role: "separator" })] }));
+    return (jsxs("div", { className: styles$3.menuItemContainer, onMouseEnter: () => setIsSubmenuOpen(true), onMouseLeave: () => setIsSubmenuOpen(false), style: { position: 'relative', width: '100%' }, children: [jsxs("button", { ref: ref, type: "button", className: menuItemClassNames, onClick: handleClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, role: "menuitem", "aria-disabled": disabled, "aria-checked": checked ? 'true' : undefined, children: [jsx("span", { className: styles$3.checkmark, children: checked && '✓' }), icon && jsx("span", { className: styles$3.icon, children: icon }), jsx("span", { className: styles$3.label, children: label }), shortcut && jsx("span", { className: styles$3.shortcut, children: shortcut }), effectiveHasSubmenu && jsx("span", { className: styles$3.submenuArrow, children: "\u25B6" })] }), items && isSubmenuOpen && (jsx("div", { className: styles$3.submenu, role: "menu", children: items })), separator && jsx("div", { className: styles$3.separatorLine, role: "separator" })] }));
 });
 MenuItem.displayName = 'MenuItem';
 
+/**
+ * Mac OS 9 style MenuDropdown component
+ *
+ * A standalone dropdown menu that shares the styling of the MenuBar.
+ * Useful for placing menus in the status area (rightContent) or other parts of the app.
+ */
+const MenuDropdown = ({ label, items, disabled = false, className = '', dropdownClassName = '', align = 'left', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    // Handle click outside to close menu
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+    // Handle Escape key to close menu
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const menuContainerClassNames = [
+        styles$4.menuContainer,
+        className
+    ].filter(Boolean).join(' ');
+    const menuButtonClassNames = [
+        styles$4.menuButton,
+        isOpen ? styles$4['menuButton--open'] : '',
+        disabled ? styles$4['menuButton--disabled'] : '',
+    ].filter(Boolean).join(' ');
+    const dropdownClassNames = [
+        styles$4.dropdown,
+        align === 'right' ? styles$4['dropdown--right'] : '',
+        dropdownClassName
+    ].filter(Boolean).join(' ');
+    return (jsxs("div", { ref: containerRef, className: menuContainerClassNames, children: [jsx("button", { type: "button", className: menuButtonClassNames, onClick: handleToggle, disabled: disabled, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, children: typeof label === 'string' ? jsx("h3", { children: label }) : label }), isOpen && (jsx("div", { className: dropdownClassNames, role: "menu", onClick: () => setIsOpen(false), children: items }))] }));
+};
+
 var styles$2 = {"scrollbar":"Scrollbar-module_scrollbar","scrollbar--vertical":"Scrollbar-module_scrollbar--vertical","scrollbar--horizontal":"Scrollbar-module_scrollbar--horizontal","scrollbar--disabled":"Scrollbar-module_scrollbar--disabled","arrow":"Scrollbar-module_arrow","arrowIcon":"Scrollbar-module_arrowIcon","arrow--start":"Scrollbar-module_arrow--start","arrow--end":"Scrollbar-module_arrow--end","track":"Scrollbar-module_track","thumb":"Scrollbar-module_thumb"};
 
 // Scrollbar component - Mac OS 9 style
@@ -1637,5 +1710,5 @@ const tokens = {
     transitions,
 };
 
-export { Button, Checkbox, Dialog, DividerIcon, FolderList, Icon, IconButton, IconLibrary, ListView, MenuBar, MenuItem, Radio, Scrollbar, Select, TabPanel, Tabs, TextField, Window, borders, colors, shadows, spacing, tokens, transitions, typography, zIndex };
+export { Button, Checkbox, Dialog, DividerIcon, FolderList, Icon, IconButton, IconLibrary, ListView, MenuBar, MenuDropdown, MenuItem, Radio, Scrollbar, Select, TabPanel, Tabs, TextField, Window, borders, colors, shadows, spacing, tokens, transitions, typography, zIndex };
 //# sourceMappingURL=index.js.map