@invopop/popui 0.1.76 → 0.1.78

package/dist/BaseTableActions.svelte

@@ -15,7 +15,7 @@
   let items = $derived(
     actions.map((a) => ({
       label: a.label,
-      value: a,
+      value: a.slug || a.label,
       icon: a.icon,
       separator: a.separator,
       destructive: a.destructive,
@@ -42,9 +42,11 @@
 
 <BaseDropdown bind:isOpen bind:this={actionDropdown} {trigger}>
   <DrawerContext
+    autofocus
     {items}
     onclick={(e) => {
-      onclick?.(e)
+      const action = actions.find((a) => (a.slug || a.label) === e)
+      onclick?.(action)
       actionDropdown?.toggle()
     }}
   />

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,35 +169,22 @@
             {/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

package/dist/MenuItem.svelte

@@ -104,7 +104,7 @@
 
 <div class={wrapperStyles}>
   {#if isFolderItem && (highlight || active)}
-    <div class="border-l border-white h-3 w-px absolute top-[14px] left-0 -m-px"></div>
+    <div class="border-l border-white h-3 w-px absolute top-3.5 left-0 -m-px"></div>
   {/if}
   <button
     use:floatingRef
@@ -147,7 +147,7 @@
           onmouseleave={handleBlur}
           class="pt-4 z-30"
         >
-          <DrawerContext onclick={handleClickChild} {items} />
+          <DrawerContext autofocus onclick={handleClickChild} {items} />
         </div>
       {/if}
     {:else if open || !collapsable}

package/dist/data-table/data-table-view-options.svelte

@@ -122,6 +122,7 @@
     <BaseButton icon={Sliders} variant="outline" size="md" />
   {/snippet}
   <DrawerContext
+    autofocus
     items={itemsWithActions}
     {groups}
     draggable

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/package.json

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