@invopop/popui 0.1.75 → 0.1.77

package/dist/BaseTableHeaderOrderBy.svelte

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

package/dist/DrawerContext.svelte

@@ -41,6 +41,7 @@
     widthClass = 'w-60',
     collapsibleGroups = true,
     flagPosition = 'after',
+    autofocus = false,
     onclick,
     onselect,
     onreorder,
@@ -89,6 +90,7 @@
   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)
@@ -178,6 +180,12 @@
     buildListIn()
     mounted = true
 
+    if (autofocus) {
+      setTimeout(() => {
+        commandRootEl?.focus()
+      }, 10)
+    }
+
     const autoScrollCleanup = autoScrollForElements({
       element: document.documentElement
     })
@@ -452,6 +460,7 @@
   shouldFilter={false}
   loop
   class={containerClasses}
+  bind:ref={commandRootEl}
   {...rest}
 >
   {@render children?.()}

package/dist/DropdownSelect.svelte

@@ -137,6 +137,16 @@
   </span>
 {/snippet}
 
+{#snippet triggerIcon()}
+  {#if typeof selectedIcon === 'string'}
+    <img src={selectedIcon} alt="" class="size-4 flex-shrink-0 text-icon" />
+  {:else if selectedIcon}
+    <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} size-4 flex-shrink-0" />
+  {:else if resolvedIcon}
+    <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
+  {/if}
+{/snippet}
+
 <BaseDropdown
   data-dropdown-select
   bind:isOpen
@@ -149,8 +159,8 @@
 >
   {#snippet trigger()}
     <div data-dropdown-select-trigger class={styles}>
-      {#if hasMultipleColors}
-        <div class="flex items-center gap-1 flex-1 min-w-0">
+      <div class="flex items-center gap-1 flex-1 min-w-0 whitespace-nowrap">
+        {#if hasMultipleColors}
           <div class="flex items-center -space-x-0.5">
             {#each selectedColors.slice(0, 3) as color}
               <span class="border-l border-background rounded-xs flex first:border-l-0">
@@ -159,40 +169,28 @@
             {/each}
           </div>
           {@render label()}
-        </div>
-      {:else if selectedColor}
-        <div class="flex items-center gap-1 flex-1 min-w-0">
+        {:else if selectedColor}
           <TagStatus dot status={selectedColor} />
           {@render label()}
-        </div>
-      {:else if !multiple && selectedItem?.country}
-        <div class="flex items-center gap-1 flex-1 min-w-0">
+        {:else if !multiple && selectedItem?.country}
           <BaseFlag country={selectedItem.country} />
           {@render label()}
-        </div>
-      {:else if !multiple && selectedItem?.content}
-        <div class="flex items-center gap-1 flex-1 min-w-0">
+        {:else if !multiple && selectedItem?.content}
+          {@render triggerIcon()}
           {@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'}
-            <img src={selectedIcon} alt="" class="size-4 flex-shrink-0 text-icon" />
-          {:else if selectedIcon}
-            <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} size-4 flex-shrink-0" />
-          {:else if resolvedIcon}
-            <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
-          {/if}
+        {:else if selectedIcon || resolvedIcon}
+          {@render triggerIcon()}
+          {@render label()}
+        {:else}
           {@render label()}
-        </div>
-      {:else}
-        {@render label()}
-      {/if}
+        {/if}
+      </div>
     </div>
   {/snippet}
   <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/tooltip/index.d.ts

@@ -2,7 +2,7 @@ import { Tooltip as TooltipPrimitive } from 'bits-ui';
 import Trigger from './tooltip-trigger.svelte';
 import Content from './tooltip-content.svelte';
 import AutoHide from './tooltip-auto-hide.svelte';
-declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
-declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
-declare const Portal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+declare const Root: typeof TooltipPrimitive.Root;
+declare const Provider: typeof TooltipPrimitive.Provider;
+declare const Portal: typeof TooltipPrimitive.Portal;
 export { Root, Trigger, Content, Provider, Portal, AutoHide, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal, AutoHide as TooltipAutoHide };

package/dist/types.d.ts

@@ -345,6 +345,7 @@ export interface DrawerContextProps {
     widthClass?: string;
     collapsibleGroups?: boolean;
     flagPosition?: 'before' | 'after';
+    autofocus?: boolean;
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
     onreorder?: (items: DrawerOption[]) => void;

package/package.json

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