@diabolic/hangover 0.1.4 → 0.1.6

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

package/dist/hangover.css

@@ -59,6 +59,12 @@
 .hangoverDropdown--dark .hangoverDropdown-list:hover::-webkit-scrollbar-thumb, .hangoverDropdown--dark .hangoverDropdown-list:focus-within::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.18);
 }
+.hangoverDropdown--dark .hangoverDropdown-column.forNavigation:hover, .hangoverDropdown--dark .hangoverDropdown-column.forNavigation:focus-within {
+  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.hangoverDropdown--dark .hangoverDropdown-column.forNavigation:hover::-webkit-scrollbar-thumb, .hangoverDropdown--dark .hangoverDropdown-column.forNavigation:focus-within::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.18);
+}
 
 @keyframes hangoverDropdownIn {
   from {
@@ -147,7 +153,28 @@
   box-sizing: border-box;
   flex-shrink: 0;
   flex: none;
-  transition: width 330ms ease, min-width 330ms ease;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+  transition: width 330ms ease, min-width 330ms ease, scrollbar-color 330ms ease;
+}
+.hangoverDropdown-column.forNavigation:hover, .hangoverDropdown-column.forNavigation:focus-within {
+  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
+}
+.hangoverDropdown-column.forNavigation::-webkit-scrollbar {
+  width: 4px;
+}
+.hangoverDropdown-column.forNavigation::-webkit-scrollbar-track {
+  background: transparent;
+}
+.hangoverDropdown-column.forNavigation::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 2px;
+  transition: background 330ms ease;
+}
+.hangoverDropdown-column.forNavigation:hover::-webkit-scrollbar-thumb, .hangoverDropdown-column.forNavigation:focus-within::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.18);
 }
 .hangoverDropdown-column.forNavigation .hangoverDropdown-nav-item {
   transition: width 330ms ease, padding 330ms ease, justify-content 330ms ease, gap 330ms ease, background 330ms ease;
@@ -463,7 +490,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

@@ -450,9 +450,39 @@ function DropdownNavItem({
     t
   } = useDropdownContext();
   const isActive = activeNavId === id;
+  const buttonRef = react.useRef(null);
   react.useEffect(() => {
     registerNavLabel(id, typeof children === 'string' ? children : '');
   }, [id, children, registerNavLabel]);
+
+  // When this item becomes active (e.g. via scroll-spy on the right column),
+  // keep it visible inside the scrollable nav column.
+  react.useEffect(() => {
+    if (!isActive) return;
+    const el = buttonRef.current;
+    if (!el) return;
+    const container = el.closest('.hangoverDropdown-column.forNavigation');
+    if (!container) return;
+
+    // Leave a gap-sized breathing space so the active item never sits flush
+    // against the top/bottom edge of the nav column.
+    const navList = el.parentElement;
+    const gap = navList ? parseFloat(getComputedStyle(navList).rowGap || getComputedStyle(navList).gap) || 0 : 0;
+    const containerRect = container.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    let delta = 0;
+    if (elRect.top < containerRect.top + gap) {
+      delta = elRect.top - containerRect.top - gap;
+    } else if (elRect.bottom > containerRect.bottom - gap) {
+      delta = elRect.bottom - containerRect.bottom + gap;
+    }
+    if (delta !== 0) {
+      container.scrollTo({
+        top: container.scrollTop + delta,
+        behavior: 'smooth'
+      });
+    }
+  }, [isActive]);
   function handleClick() {
     fireEvent('navChange', {
       id
@@ -498,6 +528,7 @@ function DropdownNavItem({
   }
   return /*#__PURE__*/jsxRuntime.jsxs("button", {
     type: "button",
+    ref: buttonRef,
     className: `hangoverDropdown-nav-item${isActive ? ' isActive' : ''}`,
     onClick: () => {
       handleClick();
@@ -647,6 +678,8 @@ function DropdownContent({
     setScrollSpyActive,
     t
   } = useDropdownContext();
+  const searchInputRef = react.useRef(null);
+  const bottomPadRef = react.useRef(0);
 
   // Scroll spy: update active nav based on scroll position
   react.useEffect(() => {
@@ -695,11 +728,114 @@ function DropdownContent({
     if (displayMode !== 'tab') return;
     if (contentRef.current) contentRef.current.scrollTop = 0;
   }, [displayMode, activeNavId, contentRef]);
+
+  // Scroll mode: reserve enough space at the bottom of the list so the last
+  // section (even a short single-entry one) can be scrolled all the way to the
+  // top. Without this, a short last section can never reach the top because the
+  // container has already hit its maximum scroll position.
+  react.useEffect(() => {
+    if (displayMode !== 'scroll') return;
+    const list = contentRef.current;
+    if (!list) return;
+    function updateBottomSpace() {
+      const sections = list.querySelectorAll('[data-section-for]');
+      const lastSection = sections[sections.length - 1];
+      if (!lastSection) {
+        list.style.paddingBottom = '';
+        bottomPadRef.current = 0;
+        return;
+      }
+
+      // Derive the natural content height by subtracting our own reserved
+      // space, so recomputes never compound. Using real geometry for the last
+      // section's top keeps this margin-safe (bottom padding sits after it, so
+      // it never shifts the section's top position).
+      const available = list.clientHeight;
+      const naturalScrollHeight = list.scrollHeight - bottomPadRef.current;
+      const listTop = list.getBoundingClientRect().top;
+      const lastTopWithinContent = lastSection.getBoundingClientRect().top - listTop + list.scrollTop;
+      const spaceBelowLastTop = naturalScrollHeight - lastTopWithinContent;
+      const pad = Math.max(0, available - spaceBelowLastTop);
+      bottomPadRef.current = pad;
+      list.style.paddingBottom = `${pad}px`;
+    }
+    updateBottomSpace();
+
+    // Observe both the container (viewport resize) and every section (group
+    // expand/collapse, late reflows) so the reserved space stays accurate.
+    const observer = new ResizeObserver(updateBottomSpace);
+    observer.observe(list);
+    list.querySelectorAll('[data-section-for]').forEach(section => {
+      observer.observe(section);
+    });
+    return () => observer.disconnect();
+  }, [displayMode, contentRef, children, searchQuery]);
   function handleSearch(e) {
     fireEvent('search', {
       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 +849,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

@@ -446,9 +446,39 @@ function DropdownNavItem({
     t
   } = useDropdownContext();
   const isActive = activeNavId === id;
+  const buttonRef = useRef(null);
   useEffect(() => {
     registerNavLabel(id, typeof children === 'string' ? children : '');
   }, [id, children, registerNavLabel]);
+
+  // When this item becomes active (e.g. via scroll-spy on the right column),
+  // keep it visible inside the scrollable nav column.
+  useEffect(() => {
+    if (!isActive) return;
+    const el = buttonRef.current;
+    if (!el) return;
+    const container = el.closest('.hangoverDropdown-column.forNavigation');
+    if (!container) return;
+
+    // Leave a gap-sized breathing space so the active item never sits flush
+    // against the top/bottom edge of the nav column.
+    const navList = el.parentElement;
+    const gap = navList ? parseFloat(getComputedStyle(navList).rowGap || getComputedStyle(navList).gap) || 0 : 0;
+    const containerRect = container.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    let delta = 0;
+    if (elRect.top < containerRect.top + gap) {
+      delta = elRect.top - containerRect.top - gap;
+    } else if (elRect.bottom > containerRect.bottom - gap) {
+      delta = elRect.bottom - containerRect.bottom + gap;
+    }
+    if (delta !== 0) {
+      container.scrollTo({
+        top: container.scrollTop + delta,
+        behavior: 'smooth'
+      });
+    }
+  }, [isActive]);
   function handleClick() {
     fireEvent('navChange', {
       id
@@ -494,6 +524,7 @@ function DropdownNavItem({
   }
   return /*#__PURE__*/jsxs("button", {
     type: "button",
+    ref: buttonRef,
     className: `hangoverDropdown-nav-item${isActive ? ' isActive' : ''}`,
     onClick: () => {
       handleClick();
@@ -643,6 +674,8 @@ function DropdownContent({
     setScrollSpyActive,
     t
   } = useDropdownContext();
+  const searchInputRef = useRef(null);
+  const bottomPadRef = useRef(0);
 
   // Scroll spy: update active nav based on scroll position
   useEffect(() => {
@@ -691,11 +724,114 @@ function DropdownContent({
     if (displayMode !== 'tab') return;
     if (contentRef.current) contentRef.current.scrollTop = 0;
   }, [displayMode, activeNavId, contentRef]);
+
+  // Scroll mode: reserve enough space at the bottom of the list so the last
+  // section (even a short single-entry one) can be scrolled all the way to the
+  // top. Without this, a short last section can never reach the top because the
+  // container has already hit its maximum scroll position.
+  useEffect(() => {
+    if (displayMode !== 'scroll') return;
+    const list = contentRef.current;
+    if (!list) return;
+    function updateBottomSpace() {
+      const sections = list.querySelectorAll('[data-section-for]');
+      const lastSection = sections[sections.length - 1];
+      if (!lastSection) {
+        list.style.paddingBottom = '';
+        bottomPadRef.current = 0;
+        return;
+      }
+
+      // Derive the natural content height by subtracting our own reserved
+      // space, so recomputes never compound. Using real geometry for the last
+      // section's top keeps this margin-safe (bottom padding sits after it, so
+      // it never shifts the section's top position).
+      const available = list.clientHeight;
+      const naturalScrollHeight = list.scrollHeight - bottomPadRef.current;
+      const listTop = list.getBoundingClientRect().top;
+      const lastTopWithinContent = lastSection.getBoundingClientRect().top - listTop + list.scrollTop;
+      const spaceBelowLastTop = naturalScrollHeight - lastTopWithinContent;
+      const pad = Math.max(0, available - spaceBelowLastTop);
+      bottomPadRef.current = pad;
+      list.style.paddingBottom = `${pad}px`;
+    }
+    updateBottomSpace();
+
+    // Observe both the container (viewport resize) and every section (group
+    // expand/collapse, late reflows) so the reserved space stays accurate.
+    const observer = new ResizeObserver(updateBottomSpace);
+    observer.observe(list);
+    list.querySelectorAll('[data-section-for]').forEach(section => {
+      observer.observe(section);
+    });
+    return () => observer.disconnect();
+  }, [displayMode, contentRef, children, searchQuery]);
   function handleSearch(e) {
     fireEvent('search', {
       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 +845,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.4",
+  "version": "0.1.6",
   "description": "A headless-style, compound React dropdown/field-picker component library",
   "license": "MIT",
   "author": "bugrakaan",