@diabolic/hangover 0.1.3 → 0.1.5

package/README.md

@@ -11,6 +11,7 @@ A React 18 compound-component Dropdown / Field Picker library.
 
 - **Compound Components** - Composable `Dropdown.Trigger`, `Panel`, `Navigation`, `Section`, `Group`, `Item` API
 - **Fuzzy Search** - Built-in fuzzy filtering across items (powered by fuse.js)
+- **Keyboard Navigation** - Arrow up/down to move between visible items (before and after searching), Enter to trigger
 - **Two Display Modes** - Scroll-spy with smooth scroll or one-section-at-a-time tab mode
 - **Left Navigation** - Optional nav column with auto-collapse and single-section auto-transform
 - **Checkbox Items** - Multi-select with select-all support
@@ -970,6 +971,7 @@ All visual properties are configurable via CSS custom properties:
   /* Layout */
   --hangover-nav-width: 172px;
   --hangover-content-max-width: 240px;
+  --hangover-panel-nonav-width: 240px;
   --hangover-list-max-height: 280px;
 
   --hangover-transition: 330ms ease;

package/dist/hangover.css

@@ -27,6 +27,7 @@
     0 2px 4px 0 rgba(37, 45, 91, 0.04);
   --hangover-nav-width: 172px;
   --hangover-content-max-width: 240px;
+  --hangover-panel-nonav-width: 240px;
   --hangover-list-max-height: 280px;
   --hangover-transition: 330ms ease;
 }
@@ -96,7 +97,10 @@
 }
 .hangoverDropdown-panel.hasNoNav {
   min-width: unset;
-  width: 240px;
+  width: var(--hangover-panel-nonav-width);
+}
+.hangoverDropdown-panel.hasNoNav .hangoverDropdown-column.forItems {
+  max-width: none;
 }
 .hangoverDropdown-panel-inner {
   display: flex;
@@ -459,7 +463,9 @@
   background: var(--hangover-color-bg-hover);
 }
 .hangoverDropdown-item:focus-visible {
-  box-shadow: 0 0 0 2px var(--hangover-color-focus);
+  background: var(--hangover-color-bg-hover);
+  box-shadow: none;
+  outline: none;
 }
 .hangoverDropdown-item.isSelected {
   background: var(--hangover-color-bg-selected);

package/dist/index.cjs.js

@@ -647,6 +647,7 @@ function DropdownContent({
     setScrollSpyActive,
     t
   } = useDropdownContext();
+  const searchInputRef = react.useRef(null);
 
   // Scroll spy: update active nav based on scroll position
   react.useEffect(() => {
@@ -700,6 +701,67 @@ function DropdownContent({
       query: e.target.value
     });
   }
+
+  // Keyboard navigation: ArrowDown/ArrowUp move focus across the currently
+  // visible items (works before and after searching, since filtered items
+  // are removed from the DOM). Enter is handled by each item itself.
+  function scrollItemIntoView(el) {
+    const list = contentRef.current;
+    if (!list || !el) return;
+
+    // Offset by the sticky section header so the item stays fully visible
+    // when navigating upwards.
+    const stickyEl = list.querySelector('.hangoverDropdown-section-title');
+    const stickyHeight = stickyEl ? stickyEl.offsetHeight : 0;
+    const listRect = list.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    let delta = 0;
+    if (elRect.top < listRect.top + stickyHeight) {
+      delta = elRect.top - (listRect.top + stickyHeight);
+    } else if (elRect.bottom > listRect.bottom) {
+      delta = elRect.bottom - listRect.bottom;
+    }
+    if (delta !== 0) {
+      list.scrollTo({
+        top: list.scrollTop + delta,
+        behavior: 'smooth'
+      });
+    }
+  }
+  function moveItemFocus(direction) {
+    const list = contentRef.current;
+    if (!list) return;
+    const items = Array.from(list.querySelectorAll('.hangoverDropdown-item')).filter(el => el.offsetParent !== null);
+    if (items.length === 0) return;
+    const active = document.activeElement;
+    const idx = items.indexOf(active);
+    if (direction === 1) {
+      const next = idx < 0 ? items[0] : items[idx + 1];
+      if (next) {
+        next.focus({
+          preventScroll: true
+        });
+        scrollItemIntoView(next);
+      }
+    } else if (idx > 0) {
+      const prev = items[idx - 1];
+      prev.focus({
+        preventScroll: true
+      });
+      scrollItemIntoView(prev);
+    } else if (idx === 0 && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }
+  function handleKeyNav(e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      moveItemFocus(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveItemFocus(-1);
+    }
+  }
   const isEmpty = react.Children.count(children) === 0;
   const inner = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!isEmpty && /*#__PURE__*/jsxRuntime.jsxs("label", {
@@ -713,12 +775,15 @@ function DropdownContent({
         placeholder: t(searchPlaceholder),
         "aria-label": t(searchPlaceholder),
         value: searchQuery,
-        onChange: handleSearch
+        onChange: handleSearch,
+        onKeyDown: handleKeyNav,
+        ref: searchInputRef
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       role: "listbox",
       className: `hangoverDropdown-list${displayMode === 'tab' ? ' isTabMode' : ''}${displayMode === 'tab' && activeNavId === '__all__' ? ' isAllActive' : ''}`,
       ref: contentRef,
+      onKeyDown: handleKeyNav,
       children: isEmpty ? /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "hangoverDropdown-content-empty",
         children: t(emptyText)

package/dist/index.esm.js

@@ -643,6 +643,7 @@ function DropdownContent({
     setScrollSpyActive,
     t
   } = useDropdownContext();
+  const searchInputRef = useRef(null);
 
   // Scroll spy: update active nav based on scroll position
   useEffect(() => {
@@ -696,6 +697,67 @@ function DropdownContent({
       query: e.target.value
     });
   }
+
+  // Keyboard navigation: ArrowDown/ArrowUp move focus across the currently
+  // visible items (works before and after searching, since filtered items
+  // are removed from the DOM). Enter is handled by each item itself.
+  function scrollItemIntoView(el) {
+    const list = contentRef.current;
+    if (!list || !el) return;
+
+    // Offset by the sticky section header so the item stays fully visible
+    // when navigating upwards.
+    const stickyEl = list.querySelector('.hangoverDropdown-section-title');
+    const stickyHeight = stickyEl ? stickyEl.offsetHeight : 0;
+    const listRect = list.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    let delta = 0;
+    if (elRect.top < listRect.top + stickyHeight) {
+      delta = elRect.top - (listRect.top + stickyHeight);
+    } else if (elRect.bottom > listRect.bottom) {
+      delta = elRect.bottom - listRect.bottom;
+    }
+    if (delta !== 0) {
+      list.scrollTo({
+        top: list.scrollTop + delta,
+        behavior: 'smooth'
+      });
+    }
+  }
+  function moveItemFocus(direction) {
+    const list = contentRef.current;
+    if (!list) return;
+    const items = Array.from(list.querySelectorAll('.hangoverDropdown-item')).filter(el => el.offsetParent !== null);
+    if (items.length === 0) return;
+    const active = document.activeElement;
+    const idx = items.indexOf(active);
+    if (direction === 1) {
+      const next = idx < 0 ? items[0] : items[idx + 1];
+      if (next) {
+        next.focus({
+          preventScroll: true
+        });
+        scrollItemIntoView(next);
+      }
+    } else if (idx > 0) {
+      const prev = items[idx - 1];
+      prev.focus({
+        preventScroll: true
+      });
+      scrollItemIntoView(prev);
+    } else if (idx === 0 && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }
+  function handleKeyNav(e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      moveItemFocus(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveItemFocus(-1);
+    }
+  }
   const isEmpty = Children.count(children) === 0;
   const inner = /*#__PURE__*/jsxs(Fragment, {
     children: [!isEmpty && /*#__PURE__*/jsxs("label", {
@@ -709,12 +771,15 @@ function DropdownContent({
         placeholder: t(searchPlaceholder),
         "aria-label": t(searchPlaceholder),
         value: searchQuery,
-        onChange: handleSearch
+        onChange: handleSearch,
+        onKeyDown: handleKeyNav,
+        ref: searchInputRef
       })]
     }), /*#__PURE__*/jsx("div", {
       role: "listbox",
       className: `hangoverDropdown-list${displayMode === 'tab' ? ' isTabMode' : ''}${displayMode === 'tab' && activeNavId === '__all__' ? ' isAllActive' : ''}`,
       ref: contentRef,
+      onKeyDown: handleKeyNav,
       children: isEmpty ? /*#__PURE__*/jsx("div", {
         className: "hangoverDropdown-content-empty",
         children: t(emptyText)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diabolic/hangover",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A headless-style, compound React dropdown/field-picker component library",
   "license": "MIT",
   "author": "bugrakaan",