@acusti/dropdown 1.0.0-alpha.1 → 1.0.0-alpha.3

package/README.md

@@ -266,6 +266,14 @@ type Props = {
     onMouseDown?: (event: React.MouseEvent<HTMLElement>) => unknown;
     onMouseUp?: (event: React.MouseEvent<HTMLElement>) => unknown;
     onOpen?: () => unknown;
+    /**
+     * Opens the dropdown when the pointer hovers the trigger, and closes it a
+     * short moment after the pointer leaves the trigger and body entirely (the
+     * close is delayed so crossing the gap between them, or pausing over
+     * either, doesn’t flicker-close it). Click and keyboard opening keep
+     * working as usual alongside it.
+     */
+    openOnHover?: boolean;
     /**
      * Called when an item is selected. The payload includes:
      * - element: The DOM element that was clicked
@@ -427,6 +435,29 @@ function MultiSelectDropdown() {
 }
 ```
 
+### Open on Hover
+
+```tsx
+function HoverMenu() {
+    return (
+        <Dropdown openOnHover>
+            <button type="button">Account</button>
+            <ul>
+                <li>Profile</li>
+                <li>Settings</li>
+                <li>Sign out</li>
+            </ul>
+        </Dropdown>
+    );
+}
+```
+
+Click and keyboard opening (Enter/Space while focused) still work —
+hovering is an additional way in, not a replacement. This makes the most
+sense for a dropdown whose body is inspectable at a glance (a short menu, a
+preview card); for anything the user needs to click into, keep the default
+click-to-open behavior so a stray hover doesn’t pop it open.
+
 ### Dropdown with Interactive Content
 
 For dropdowns whose body is a form (inputs, date pickers, buttons that
@@ -645,9 +676,11 @@ Most props keep their meaning, scoped to the submenu:
 - `className`/`style`: applied to the parent item element
 
 Props that only make sense at the top level (`allowCreate`, `allowEmpty`,
-`isOpenOnMount`, `isSearchable`, `keepOpenOnSubmit`, `name`, `placeholder`,
-`tabIndex`, `value`) are ignored on a nested dropdown and warn
-(unconditionally, matching the children-count misuse error).
+`isOpenOnMount`, `isSearchable`, `keepOpenOnSubmit`, `name`, `openOnHover`,
+`placeholder`, `tabIndex`, `value`) are ignored on a nested dropdown and
+warn (unconditionally, matching the children-count misuse error). A submenu
+already discloses on hover intent — see [Submenus](#submenus) — so
+`openOnHover` has nothing to add there.
 
 ### Submenu placement and styling
 
@@ -766,8 +799,16 @@ Menubar behaviors:
 
 - renders `role="menubar"`; each dropdown trigger is a menubar item
 - at most one menu in the bar is open at a time
-- once any menu is open, hovering another trigger switches to that menu
-  without a click (matching macOS menubar behavior)
+- opening a trigger’s menu (by click or keyboard) engages the bar
+  (menu-mode). While engaged, hovering or focusing another trigger switches
+  to that menu without a click, matching the macOS menu bar
+- while engaged, hovering a non-menu control in the bar (e.g. a plain
+  button placed alongside the dropdowns) closes the open menu but keeps the
+  bar engaged, so hovering back onto a trigger reopens a menu; sliding
+  across the gaps between triggers leaves the open menu alone
+- a deliberate dismissal — **Escape**, a click outside the bar, or
+  selecting an item — leaves menu-mode, after which hovering a trigger no
+  longer opens its menu until a menu is opened again to re-engage the bar
 - **←/→** move between menus, wrapping at the ends: with the bar focused
   they move focus between triggers, and while a menu is open they slide the
   open menu to the adjacent trigger — unless the active item is a parent

package/dist/Dropdown.d.ts

@@ -57,6 +57,14 @@ export type Props = {
     onMouseUp?: (event: ReactMouseEvent<HTMLElement>) => unknown;
     onOpen?: () => unknown;
     onSubmitItem?: (payload: Item) => void;
+    /**
+     * Opens the dropdown when the pointer hovers the trigger, and closes it a
+     * short moment after the pointer leaves the trigger and body entirely (the
+     * close is delayed so crossing the gap between them, or pausing over
+     * either, doesn’t flicker-close it). Click and keyboard opening keep
+     * working as usual alongside it.
+     */
+    openOnHover?: boolean;
     /**
      * Only usable in conjunction with {isSearchable: true}.
      * Used as search input’s placeholder.