@invopop/popui 0.1.43 → 0.1.45

package/dist/BaseDropdown.svelte

@@ -90,7 +90,7 @@
 
 <div class="flex {className}" class:w-full={fullWidth} role="menu">
   <button
-    class="cursor-pointer text-left w-full min-w-0"
+    class="cursor-pointer text-left w-full min-w-0 outline-none"
     use:floatingRef
     {...rest}
     onclick={handleClick}

package/dist/DrawerContext.svelte

@@ -28,6 +28,11 @@
     type DropIndicatorState,
     type DndItem as DndItemType
   } from './drawer-dnd-helpers'
+  import {
+    getFocusableItems,
+    getNextFocusedIndex,
+    selectFocusedItem
+  } from './drawer-keyboard-helpers'
 
   const flipDurationMs = 150
 
@@ -70,6 +75,27 @@
     return { groupedItems: grouped, ungroupedItems: ungrouped }
   })
 
+  // Items in display order (matches visual rendering order)
+  let itemsInDisplayOrder = $derived.by(() => {
+    const displayOrder: DrawerOption[] = []
+
+    if (hasGroups && groups) {
+      // Add grouped items in group order, only if group is open (when collapsible)
+      groups.forEach((group) => {
+        const isOpen = collapsibleGroups ? openGroups[group.slug] : true
+        if (isOpen) {
+          const groupItems = groupedItems.get(group.slug) || []
+          displayOrder.push(...groupItems)
+        }
+      })
+    }
+
+    // Add ungrouped items
+    displayOrder.push(...ungroupedItems)
+
+    return displayOrder
+  })
+
   let openGroups = $state<Record<string, boolean>>({})
   let groupDndItems = $state<Record<string, DndItem[]>>({})
   let ungroupedDndItems = $state<DndItem[]>([])
@@ -81,6 +107,8 @@
   let draggedOverGroup = $state<string | null>(null)
   let dropIndicator = $state<DropIndicatorState>(null)
   let cleanupFunctions: (() => void)[] = []
+  let focusedIndex = $state<number>(-1)
+  let containerRef = $state<HTMLDivElement | null>(null)
 
   // Build internal DND items from external items
   function buildListIn() {
@@ -168,11 +196,14 @@
       element: document.documentElement
     })
     cleanupFunctions.push(autoScrollCleanup)
+
+    window.addEventListener('keydown', handleKeyDown)
   })
 
   onDestroy(() => {
     cleanupFunctions.forEach((cleanup) => cleanup())
     cleanupFunctions = []
+    window.removeEventListener('keydown', handleKeyDown)
   })
 
   function emitGroupDistribution() {
@@ -400,6 +431,40 @@
   function toggleGroup(groupSlug: string) {
     openGroups = openGroups[groupSlug] ? {} : { [groupSlug]: true }
   }
+
+  let focusedItemValue = $derived.by(() => {
+    const focusableItems = getFocusableItems(itemsInDisplayOrder)
+    if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {
+      return focusableItems[focusedIndex].value
+    }
+    return null
+  })
+
+  function handleKeyDown(event: KeyboardEvent) {
+    // Don't handle if container doesn't exist
+    if (!containerRef || !document.body.contains(containerRef)) return
+
+    const focusableItems = getFocusableItems(itemsInDisplayOrder)
+    if (focusableItems.length === 0) return
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      focusedIndex = getNextFocusedIndex(focusedIndex, 'down', focusableItems.length)
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      focusedIndex = getNextFocusedIndex(focusedIndex, 'up', focusableItems.length)
+    } else if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault()
+      const result = selectFocusedItem(itemsInDisplayOrder, focusedIndex, multiple)
+      if (result) {
+        if (result.shouldUpdate) {
+          updateItem(result.item)
+        } else {
+          onclick?.(result.item.value)
+        }
+      }
+    }
+  }
 </script>
 
 {#snippet drawerItem(item: DrawerOption)}
@@ -407,12 +472,18 @@
     <DrawerContextSeparator />
   {:else}
     <div class:px-1={!item.groupBy} class:cursor-grab={draggable && !item.locked}>
-      <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
+      <DrawerContextItem
+        item={{ ...item, focused: item.value === focusedItemValue }}
+        {multiple}
+        {onclick}
+        onchange={updateItem}
+      />
     </div>
   {/if}
 {/snippet}
 
 <div
+  bind:this={containerRef}
   class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] list-none"
 >
   {@render children?.()}
@@ -433,7 +504,7 @@
       >
         {#if collapsibleGroups}
           <button
-            class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip flex-shrink-0"
+            class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip flex-shrink-0 outline-none"
             onclick={() => toggleGroup(group.slug)}
           >
             <div class="flex items-center gap-1.5">

package/dist/DrawerContextItem.svelte

@@ -15,19 +15,24 @@
     item = $bindable(),
     scrollIfSelected = false,
     onchange,
-    onclick
+    onclick,
+    onfocus
   }: DrawerContextItemProps = $props()
 
   let el: HTMLElement | undefined = $state()
 
+  let shouldShowHoverStyle = $derived.by(() => {
+    if (multiple) return true
+    if (item?.selected || item?.disabled) return false
+    return true
+  })
+
   let styles = $derived(
     clsx(
       'px-2 py-1.5 space-x-1.5',
       { 'bg-background-selected': item?.selected && !multiple },
-      {
-        'group-hover:bg-background-default-secondary':
-          (!item?.selected && !item?.disabled) || multiple
-      }
+      { 'bg-background-default-secondary': item?.focused && shouldShowHoverStyle },
+      { 'group-hover:bg-background-default-secondary': shouldShowHoverStyle }
     )
   )
 
@@ -67,50 +72,53 @@
 >
   <div class="bg-background rounded-md">
     <div class="{styles} rounded-md pr-2 flex items-center justify-start w-full">
-    {#if item?.useAvatar}
-      <ProfileAvatar name={item?.label || ''} picture={item?.picture || ''} variant="sm" />
-    {:else if item?.picture}
-      <ProfileAvatar name={item?.label || ''} picture={item?.picture} variant="sm" />
-    {:else if item?.icon}
-      <Icon
-        src={item.icon}
-        class="w-4 h-4 {item?.destructive
-          ? 'text-icon-critical'
-          : item?.iconClass || 'text-icon'} {item?.locked ? 'opacity-30' : ''}"
-      />
-    {/if}
-    <div class="whitespace-nowrap flex-1 text-left flex items-center space-x-1.5 truncate" {title}>
-      {#if item?.color}
-        <TagStatus status={item.color} dot />
+      {#if item?.useAvatar}
+        <ProfileAvatar name={item?.label || ''} picture={item?.picture || ''} variant="sm" />
+      {:else if item?.picture}
+        <ProfileAvatar name={item?.label || ''} picture={item?.picture} variant="sm" />
+      {:else if item?.icon}
+        <Icon
+          src={item.icon}
+          class="w-4 h-4 {item?.destructive
+            ? 'text-icon-critical'
+            : item?.iconClass || 'text-icon'} {item?.locked ? 'opacity-30' : ''}"
+        />
       {/if}
-      <span class="{labelStyles} text-base font-medium truncate">{item?.label || ''}</span>
+      <div
+        class="whitespace-nowrap flex-1 text-left flex items-center space-x-1.5 truncate"
+        {title}
+      >
+        {#if item?.color}
+          <TagStatus status={item.color} dot />
+        {/if}
+        <span class="{labelStyles} text-base font-medium truncate">{item?.label || ''}</span>
 
-      {#if item?.country}
-        <BaseFlag country={item.country} />
-        <span class="text-xs font-medium text-foreground-default-secondary uppercase">
-          {item.country}
-        </span>
-      {/if}
-    </div>
-    {#if item?.action}
-      <div class="no-drag !cursor-default">
-        {@render item.action(item)}
+        {#if item?.country}
+          <BaseFlag country={item.country} />
+          <span class="text-xs font-medium text-foreground-default-secondary uppercase">
+            {item.country}
+          </span>
+        {/if}
       </div>
-    {:else if multiple}
-      <InputCheckbox
-        checked={item?.selected ?? false}
-        onchange={(value) => {
-          if (item) {
-            item.selected = value
-            onchange?.(item)
-          }
-        }}
-      />
-    {:else if item?.selected}
-      <Icon src={Success} class="size-4 text-icon-selected" />
-    {:else if item?.rightIcon}
-      <Icon src={item.rightIcon} class="size-4 text-icon-default-secondary" />
-    {/if}
+      {#if item?.action}
+        <div class="no-drag !cursor-default">
+          {@render item.action(item)}
+        </div>
+      {:else if multiple}
+        <InputCheckbox
+          checked={item?.selected ?? false}
+          onchange={(value) => {
+            if (item) {
+              item.selected = value
+              onchange?.(item)
+            }
+          }}
+        />
+      {:else if item?.selected}
+        <Icon src={Success} class="size-4 text-icon-selected" />
+      {:else if item?.rightIcon}
+        <Icon src={item.rightIcon} class="size-4 text-icon-default-secondary" />
+      {/if}
     </div>
   </div>
 </button>

package/dist/drawer-keyboard-helpers.d.ts

@@ -0,0 +1,16 @@
+import type { DrawerOption } from './types';
+/**
+ * Get all focusable items (non-separator, non-disabled, non-locked)
+ */
+export declare function getFocusableItems(items: DrawerOption[]): DrawerOption[];
+/**
+ * Calculate next focused index based on arrow key direction
+ */
+export declare function getNextFocusedIndex(currentIndex: number, direction: 'up' | 'down', itemsCount: number): number;
+/**
+ * Handle selection of focused item
+ */
+export declare function selectFocusedItem(items: DrawerOption[], focusedIndex: number, multiple: boolean): {
+    item: DrawerOption;
+    shouldUpdate: boolean;
+} | null;

package/dist/drawer-keyboard-helpers.js

@@ -0,0 +1,41 @@
+/**
+ * Get all focusable items (non-separator, non-disabled, non-locked)
+ */
+export function getFocusableItems(items) {
+    return items.filter((item) => !item.separator && !item.disabled && !item.locked);
+}
+/**
+ * Calculate next focused index based on arrow key direction
+ */
+export function getNextFocusedIndex(currentIndex, direction, itemsCount) {
+    if (itemsCount === 0)
+        return -1;
+    if (direction === 'down') {
+        return currentIndex < itemsCount - 1 ? currentIndex + 1 : 0;
+    }
+    else {
+        return currentIndex > 0 ? currentIndex - 1 : itemsCount - 1;
+    }
+}
+/**
+ * Handle selection of focused item
+ */
+export function selectFocusedItem(items, focusedIndex, multiple) {
+    const focusableItems = getFocusableItems(items);
+    if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {
+        const focusedItem = focusableItems[focusedIndex];
+        if (multiple) {
+            return {
+                item: { ...focusedItem, selected: !focusedItem.selected },
+                shouldUpdate: true
+            };
+        }
+        else {
+            return {
+                item: focusedItem,
+                shouldUpdate: false
+            };
+        }
+    }
+    return null;
+}

package/dist/types.d.ts

@@ -29,6 +29,7 @@ export type DrawerOption = SelectOption & {
     separator?: boolean;
     destructive?: boolean;
     selected?: boolean;
+    focused?: boolean;
     icon?: IconSource | undefined;
     rightIcon?: IconSource | undefined;
     country?: string;
@@ -349,6 +350,7 @@ export interface DrawerContextItemProps {
     scrollIfSelected?: boolean;
     onclick?: (value: AnyProp) => void;
     onchange?: (item: DrawerOption) => void;
+    onfocus?: (item: DrawerOption) => void;
 }
 export interface DropdownSelectProps {
     value?: AnyProp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },