@invopop/popui 0.1.74 → 0.1.76

package/dist/BaseTableHeaderOrderBy.svelte

@@ -34,6 +34,7 @@
 </script>
 
 <DrawerContext
+  autofocus
   {items}
   onclick={(e) => {
     if (e === 'hide') {

package/dist/DrawerContext.svelte

@@ -9,6 +9,7 @@
   import { slide } from 'svelte/transition'
   import { flip } from 'svelte/animate'
   import clsx from 'clsx'
+  import { cn } from './utils.js'
   import {
     draggable as makeDraggable,
     dropTargetForElements
@@ -22,6 +23,7 @@
     type Edge
   } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
   import { onMount, onDestroy, untrack } from 'svelte'
+  import { Command } from 'bits-ui'
   import {
     shouldShowDropIndicator,
     reorderItems,
@@ -29,11 +31,6 @@
     type DropIndicatorState,
     type DndItem as DndItemType
   } from './drawer-dnd-helpers'
-  import {
-    getFocusableItems,
-    getNextFocusedIndex,
-    selectFocusedItem
-  } from './drawer-keyboard-helpers'
 
   const flipDurationMs = 150
 
@@ -44,24 +41,25 @@
     widthClass = 'w-60',
     collapsibleGroups = true,
     flagPosition = 'after',
+    autofocus = false,
     onclick,
     onselect,
     onreorder,
     ondropitem,
     children,
     groups,
+    class: className,
     ...rest
   }: DrawerContextProps = $props()
 
   type DndItem = DrawerOption & { id: string }
 
   let containerClasses = $derived(
-    clsx(
+    cn(
       widthClass,
-      'border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] overflow-y-auto list-none',
-      {
-        '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden': draggable
-      }
+      'border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] overflow-y-auto list-none outline-none',
+      clsx({ '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden': draggable }),
+      className
     )
   )
 
@@ -88,31 +86,11 @@
     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[]>([])
   let mounted = $state(false)
+  let commandRootEl = $state<HTMLElement | null>(null)
   let itemsCache = $state<DrawerOption[]>([])
   let isDragging = $state(false)
   let draggedItemId = $state<string | null>(null)
@@ -120,8 +98,6 @@
   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() {
@@ -204,19 +180,21 @@
     buildListIn()
     mounted = true
 
-    // Set up auto-scroll
+    if (autofocus) {
+      setTimeout(() => {
+        commandRootEl?.focus()
+      }, 10)
+    }
+
     const autoScrollCleanup = autoScrollForElements({
       element: document.documentElement
     })
     cleanupFunctions.push(autoScrollCleanup)
-
-    window.addEventListener('keydown', handleKeyDown)
   })
 
   onDestroy(() => {
     cleanupFunctions.forEach((cleanup) => cleanup())
     cleanupFunctions = []
-    window.removeEventListener('keydown', handleKeyDown)
   })
 
   function emitGroupDistribution() {
@@ -445,37 +423,11 @@
     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)
-        }
-      }
+  function handleItemSelect(item: DrawerOption) {
+    if (multiple) {
+      updateItem({ ...item, selected: !item.selected })
+    } else {
+      onclick?.(item.value)
     }
   }
 </script>
@@ -487,21 +439,28 @@
     {#snippet itemChildren()}
       {@render item.content?.(item)}
     {/snippet}
-    <div class:px-1={!item.groupBy} class:cursor-grab={draggable && !item.locked}>
+    <Command.Item
+      value={String(item.value)}
+      disabled={item.disabled || item.locked}
+      onSelect={() => handleItemSelect(item)}
+      class={clsx('group outline-none', { 'px-1': !item.groupBy, 'cursor-grab': draggable && !item.locked })}
+    >
       <DrawerContextItem
-        item={{ ...item, focused: item.value === focusedItemValue, flagPosition: item.flagPosition || flagPosition }}
+        item={{ ...item, flagPosition: item.flagPosition || flagPosition }}
         {multiple}
         {onclick}
         onchange={updateItem}
         children={item.content ? itemChildren : undefined}
       />
-    </div>
+    </Command.Item>
   {/if}
 {/snippet}
 
-<div
-  bind:this={containerRef}
+<Command.Root
+  shouldFilter={false}
+  loop
   class={containerClasses}
+  bind:ref={commandRootEl}
   {...rest}
 >
   {@render children?.()}
@@ -644,4 +603,4 @@
       </div>
     {/if}
   {/if}
-</div>
+</Command.Root>

package/dist/DrawerContextItem.svelte

@@ -31,8 +31,10 @@
     clsx(
       'px-2 py-1.5 space-x-1.5',
       { 'bg-background-selected': item?.selected && !multiple },
-      { 'bg-background-default-secondary': item?.focused && shouldShowHoverStyle },
-      { 'group-hover:bg-background-default-secondary': shouldShowHoverStyle }
+      {
+        'group-hover:bg-background-default-secondary group-data-[selected]:bg-background-default-secondary':
+          shouldShowHoverStyle
+      }
     )
   )
 
@@ -66,7 +68,7 @@
 
 <button
   bind:this={el}
-  class="cursor-pointer w-full disabled:opacity-30 group"
+  class="cursor-pointer w-full disabled:opacity-30 group focus:outline-none"
   disabled={item?.disabled}
   onclick={handleClick}
 >

package/dist/DropdownSelect.svelte

@@ -170,6 +170,10 @@
           <BaseFlag country={selectedItem.country} />
           {@render label()}
         </div>
+      {:else if !multiple && selectedItem?.content}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          {@render selectedItem.content(selectedItem)}
+        </div>
       {:else if selectedIcon || resolvedIcon}
         <div class="flex items-center gap-1 flex-1 min-w-0">
           {#if typeof selectedIcon === 'string'}
@@ -189,6 +193,7 @@
   <DrawerContext
     data-dropdown-select-content
     widthClass="min-w-[256px]"
+    autofocus
     {multiple}
     {items}
     {flagPosition}

package/dist/data-table/data-table-helpers.js

@@ -99,8 +99,13 @@ export function handleScrollEvent(event, lastScrollLeft, columnDropdowns) {
 }
 // Keyboard navigation helpers
 export function shouldIgnoreKeyEvent(event) {
-    const targetTag = event.target.tagName;
-    return targetTag === 'INPUT' || targetTag === 'TEXTAREA';
+    const target = event.target;
+    const targetTag = target.tagName;
+    if (targetTag === 'INPUT' || targetTag === 'TEXTAREA')
+        return true;
+    if (target.closest('[data-command-root]'))
+        return true;
+    return false;
 }
 export function handleArrowDown(currentIndex, rows, shiftKey, enableSelection, onScroll) {
     if (currentIndex === -1 && rows.length > 0) {

package/dist/types.d.ts

@@ -29,7 +29,6 @@ export type DrawerOption = SelectOption & {
     separator?: boolean;
     destructive?: boolean;
     selected?: boolean;
-    focused?: boolean;
     icon?: IconSource | string | undefined;
     rightIcon?: IconSource | undefined;
     country?: string;
@@ -346,12 +345,14 @@ export interface DrawerContextProps {
     widthClass?: string;
     collapsibleGroups?: boolean;
     flagPosition?: 'before' | 'after';
+    autofocus?: boolean;
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
     onreorder?: (items: DrawerOption[]) => void;
     ondropitem?: (groups: Record<string, DrawerOption[]>) => void;
     children?: Snippet;
     groups?: DrawerGroup[];
+    class?: string;
     [key: string]: unknown;
 }
 export interface DrawerContextItemProps {

package/package.json

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,41 +0,0 @@
-/**
- * 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;
-}