@invopop/popui 0.1.4-beta.22 → 0.1.4-beta.24

package/dist/BaseDropdown.svelte

@@ -10,12 +10,16 @@
     fullWidth = false,
     placement = 'bottom-start',
     matchParentWidth = false,
+    usePortal = true,
     class: className = '',
     trigger,
     children,
     ...rest
   }: BaseDropdownProps = $props()
 
+  // Conditional portal action - noop if disabled
+  const conditionalPortal = usePortal ? portal : () => {}
+
   const middleware = [offset(6), flip(), shift()]
 
   if (matchParentWidth) {
@@ -31,14 +35,16 @@
     )
   }
 
+  let closedFromClickOutside = $state(false)
+
+  // Create floating actions with strategy based on usePortal
+  const strategy = usePortal ? 'absolute' : 'fixed'
   const [floatingRef, floatingContent] = createFloatingActions({
-    strategy: 'absolute',
+    strategy,
     placement,
     middleware
   })
 
-  let closedFromClickOutside = $state(false)
-
   export const toggle = () => {
     isOpen = !isOpen
   }
@@ -62,7 +68,7 @@
   {#if isOpen}
     <div
       class="max-h-40 absolute z-1001"
-      use:portal
+      use:conditionalPortal
       use:floatingContent
       use:clickOutside
       onclick_outside={() => {

package/dist/BaseTableHeaderContent.svelte

@@ -50,7 +50,7 @@
         {/if}
       </span>
     {/snippet}
-    <BaseDropdown bind:this={sortDropdown} {trigger} fullWidth>
+    <BaseDropdown bind:this={sortDropdown} {trigger} fullWidth usePortal={false}>
       <BaseTableHeaderOrderBy
         {sortDirection}
         isActive={sortBy === field.slug}

package/dist/DrawerContext.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DrawerContextProps, DrawerOption } from './types.ts'
+  import type { DrawerContextProps, DrawerOption, AnyProp } from './types.ts'
   import DrawerContextItem from './DrawerContextItem.svelte'
   import DrawerContextSeparator from './DrawerContextSeparator.svelte'
   import EmptyState from './EmptyState.svelte'
@@ -7,21 +7,28 @@
   import { Icon } from '@steeze-ui/svelte-icon'
   import { ChevronRight } from '@steeze-ui/heroicons'
   import { slide } from 'svelte/transition'
-  import Sortable from 'sortablejs'
+  import { flip } from 'svelte/animate'
+  import { dndzone } from 'svelte-dnd-action'
   import { onMount } from 'svelte'
 
+  const flipDurationMs = 150
+
   let {
     items = $bindable([]),
     multiple = false,
     draggable = false,
     widthClass = 'w-60',
+    collapsibleGroups = true,
     onclick,
     onselect,
     onreorder,
+    ondropitem,
     children,
     groups
   }: DrawerContextProps = $props()
 
+  type DndItem = DrawerOption & { id: string }
+
   let selectedItems = $derived(items.filter((i) => i.selected))
   let hasGroups = $derived(groups && groups.length > 0)
   let { groupedItems, ungroupedItems } = $derived.by(() => {
@@ -46,9 +53,75 @@
   })
 
   let openGroups = $state<Record<string, boolean>>({})
-  let ungroupedContainer: HTMLElement | null = $state(null)
-  let groupContainers: Record<string, HTMLElement | null> = {}
+  let groupDndItems = $state<Record<string, DndItem[]>>({})
+  let ungroupedDndItems = $state<DndItem[]>([])
+  let mounted = $state(false)
+  let itemsCache = $state<DrawerOption[]>([])
+  let isDragging = $state(false)
+  let emitTimeout: number | undefined
+
+  // Build internal DND items from external items
+  function buildListIn() {
+    if (hasGroups) {
+      // Build DND items for each group
+      groups!.forEach((group) => {
+        const groupItems = groupedItems.get(group.slug) || []
+        groupDndItems[group.slug] = groupItems.map((item: DrawerOption, i: number) => ({
+          ...item,
+          id: `${group.slug}-${item.value}-${i}`
+        }))
+      })
+    }
+
+    // Build DND items for ungrouped
+    ungroupedDndItems = ungroupedItems.map((item, i) => ({
+      ...item,
+      id: `ungrouped-${item.value}-${i}`
+    }))
+  }
+
+  // Build external items from internal DND items
+  function buildListOut() {
+    const newItems: DrawerOption[] = []
+    const used = new Set<AnyProp>()
+
+    // Add all grouped items
+    if (hasGroups) {
+      groups!.forEach((group) => {
+        const dndItems = groupDndItems[group.slug] || []
+        dndItems.forEach((dndItem) => {
+          if (!used.has(dndItem.value)) {
+            const { id, ...item } = dndItem
+            newItems.push({ ...item, groupBy: group.slug })
+            used.add(dndItem.value)
+          }
+        })
+      })
+    }
 
+    // Add ungrouped items
+    ungroupedDndItems.forEach((dndItem) => {
+      if (!used.has(dndItem.value)) {
+        const { id, ...item } = dndItem
+        newItems.push(item)
+        used.add(dndItem.value)
+      }
+    })
+
+    return newItems
+  }
+
+  // Sync items when they change from outside
+  $effect(() => {
+    if (items && mounted && !isDragging) {
+      if (JSON.stringify(items) !== JSON.stringify(itemsCache)) {
+        buildListIn()
+        itemsCache = JSON.parse(JSON.stringify(items))
+      }
+    }
+  })
+
+  // Open group with selected item on mount
   $effect(() => {
     if (hasGroups) {
       const selectedItem = items.find((i) => i.selected)
@@ -58,95 +131,78 @@
     }
   })
 
+  // Notify parent of selection changes
   $effect(() => {
     onselect?.(selectedItems)
   })
 
-  function initializeSortable() {
-    if (!draggable) return
-
-    // Initialize sortable for ungrouped items
-    if (ungroupedContainer && ungroupedItems.length > 0) {
-      Sortable.create(ungroupedContainer, {
-        animation: 150,
-        handle: '.draggable-item',
-        filter: '.no-drag',
-        preventOnFilter: false,
-        ghostClass: 'opacity-10',
-        dragClass: 'cursor-grabbing',
-        forceFallback: true,
-        onMove: (event) => {
-          // Prevent moving items above locked items
-          return !event.related.classList.contains('no-drag')
-        },
-        onEnd: (event) => {
-          if (event.oldIndex !== undefined && event.newIndex !== undefined) {
-            const newItems = [...items]
-            const ungroupedIndices = items
-              .map((item, index) => (!item.groupBy ? index : -1))
-              .filter((i) => i !== -1)
-
-            const fromIndex = ungroupedIndices[event.oldIndex]
-            const toIndex = ungroupedIndices[event.newIndex]
-
-            const [removed] = newItems.splice(fromIndex, 1)
-            newItems.splice(toIndex, 0, removed)
-
-            items = newItems
-            onreorder?.(newItems)
-          }
-        }
-      })
+  onMount(() => {
+    itemsCache = JSON.parse(JSON.stringify(items))
+    buildListIn()
+    mounted = true
+  })
+
+  function transformDraggedElement(draggedEl: HTMLElement | undefined) {
+    if (draggedEl) {
+      draggedEl.style.border = 'none'
+      draggedEl.style.outline = 'none'
     }
+  }
 
-    // Initialize sortable for grouped items
-    if (hasGroups && groups) {
-      groups.forEach((group) => {
-        const container = groupContainers[group.slug]
-        const groupItems = groupedItems.get(group.slug) || []
+  function emitGroupDistribution() {
+    if (ondropitem && hasGroups) {
+      // Clear any pending emit
+      if (emitTimeout) {
+        clearTimeout(emitTimeout)
+      }
 
-        if (container && groupItems.length > 0) {
-          Sortable.create(container, {
-            animation: 150,
-            handle: '.draggable-item',
-            filter: '.no-drag',
-            preventOnFilter: false,
-            ghostClass: 'opacity-10',
-            dragClass: 'cursor-grabbing',
-            forceFallback: true,
-            onMove: (event) => {
-              // Prevent moving items above locked items
-              return !event.related.classList.contains('no-drag')
-            },
-            onEnd: (event) => {
-              if (event.oldIndex !== undefined && event.newIndex !== undefined) {
-                const newItems = [...items]
-                const groupedIndices = items
-                  .map((item, index) => (item.groupBy === group.slug ? index : -1))
-                  .filter((i) => i !== -1)
-
-                const fromIndex = groupedIndices[event.oldIndex]
-                const toIndex = groupedIndices[event.newIndex]
-
-                const [removed] = newItems.splice(fromIndex, 1)
-                newItems.splice(toIndex, 0, removed)
-
-                items = newItems
-                onreorder?.(newItems)
-              }
-            }
-          })
-        }
-      })
+      // Debounce the emit to avoid duplicate calls when dragging between groups
+      emitTimeout = window.setTimeout(() => {
+        const groupsDistribution: Record<string, DrawerOption[]> = {}
+        groups!.forEach((group) => {
+          const dndItems = groupDndItems[group.slug] || []
+          groupsDistribution[group.slug] = dndItems.map(({ id, ...item }) => item)
+        })
+        ondropitem(groupsDistribution)
+      }, 0)
     }
   }
 
-  onMount(() => {
-    if (draggable) {
-      // Small delay to ensure DOM is ready
-      setTimeout(initializeSortable, 100)
+  function handleDndConsider(groupSlug: string, e: CustomEvent<any>) {
+    if (!isDragging) {
+      isDragging = true
     }
-  })
+    groupDndItems[groupSlug] = e.detail.items
+  }
+
+  function handleDndFinalize(groupSlug: string, e: CustomEvent<any>) {
+    isDragging = false
+    groupDndItems[groupSlug] = e.detail.items
+
+    const newItems = buildListOut()
+    items = newItems
+    itemsCache = JSON.parse(JSON.stringify(items))
+    onreorder?.(newItems)
+    emitGroupDistribution()
+  }
+
+  function handleUngroupedDndConsider(e: CustomEvent<any>) {
+    if (!isDragging) {
+      isDragging = true
+    }
+    ungroupedDndItems = e.detail.items
+  }
+
+  function handleUngroupedDndFinalize(e: CustomEvent<any>) {
+    isDragging = false
+    ungroupedDndItems = e.detail.items
+
+    const newItems = buildListOut()
+    items = newItems
+    itemsCache = JSON.parse(JSON.stringify(items))
+    onreorder?.(newItems)
+    emitGroupDistribution()
+  }
 
   function updateItem(item: DrawerOption) {
     items = items.map((i) => {
@@ -157,11 +213,6 @@
 
   function toggleGroup(groupSlug: string) {
     openGroups = openGroups[groupSlug] ? {} : { [groupSlug]: true }
-
-    // Reinitialize sortable when a group is toggled
-    if (draggable) {
-      setTimeout(initializeSortable, 100)
-    }
   }
 </script>
 
@@ -169,7 +220,7 @@
   {#if item.separator}
     <DrawerContextSeparator />
   {:else}
-    <div class:px-1={!item.groupBy} class:draggable-item={draggable && !item.locked} class:cursor-grab={draggable && !item.locked} class:no-drag={item.locked}>
+    <div class:px-1={!item.groupBy} class:cursor-grab={draggable && !item.locked}>
       <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
     </div>
   {/if}
@@ -184,50 +235,88 @@
     {#each groups as group, index}
       {@const groupItems = groupedItems.get(group.slug) || []}
       {@const isLastGroup = index === groups!.length - 1}
-      {@const isOpen = openGroups[group.slug]}
-      {@const hasOpenGroup = Object.values(openGroups).some((v) => v)}
+      {@const isOpen = collapsibleGroups ? openGroups[group.slug] : true}
+      {@const hasOpenGroup = collapsibleGroups ? Object.values(openGroups).some((v) => v) : true}
       <div
         class="px-1"
-        class:flex-1={isOpen}
+        class:flex-1={isOpen && collapsibleGroups}
         class:flex={isOpen}
         class:flex-col={isOpen}
-        class:min-h-0={isOpen}
-        class:flex-shrink-0={!isOpen && hasOpenGroup}
+        class:min-h-0={isOpen && collapsibleGroups}
+        class:flex-shrink-0={!isOpen && hasOpenGroup && 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"
-          onclick={() => toggleGroup(group.slug)}
-        >
-          <div class="flex items-center gap-1.5">
+        {#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"
+            onclick={() => toggleGroup(group.slug)}
+          >
+            <div class="flex items-center gap-1.5">
+              <span>{group.label}</span>
+              <Icon
+                src={ChevronRight}
+                class="size-3 text-icon-default-secondary transition-all transform {isOpen
+                  ? 'rotate-90'
+                  : ''}"
+              />
+            </div>
+            {#if groupItems.length && !group.hideCounter}
+              <BaseCounter value={groupItems.length} />
+            {/if}
+          </button>
+        {:else}
+          <div
+            class="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 overflow-clip flex-shrink-0"
+          >
             <span>{group.label}</span>
-            <Icon
-              src={ChevronRight}
-              class="size-3 text-icon-default-secondary transition-all transform {isOpen
-                ? 'rotate-90'
-                : ''}"
-            />
+            {#if groupItems.length && !group.hideCounter}
+              <BaseCounter value={groupItems.length} />
+            {/if}
           </div>
-          {#if groupItems.length}
-            <BaseCounter value={groupItems.length} />
-          {/if}
-        </button>
+        {/if}
 
         {#if isOpen}
           <div
-            class="w-full overflow-y-auto flex-1 min-h-0"
-            transition:slide={{ duration: 200 }}
-            bind:this={groupContainers[group.slug]}
+            class="w-full overflow-y-auto {collapsibleGroups ? 'flex-1 min-h-0' : ''}"
+            transition:slide={{ duration: collapsibleGroups ? 200 : 0 }}
           >
-            {#if !groupItems.length}
+            {#if draggable}
+              <div
+                use:dndzone={{
+                  items: groupDndItems[group.slug] || [],
+                  flipDurationMs,
+                  dropTargetStyle: {},
+                  type: 'drawer-item',
+                  transformDraggedElement
+                }}
+                onconsider={(e) => handleDndConsider(group.slug, e)}
+                onfinalize={(e) => handleDndFinalize(group.slug, e)}
+              >
+                {#if !groupItems.length}
+                  <div class="px-1 pt-1 pb-5">
+                    <EmptyState
+                      iconSource={group.emptyIcon}
+                      title={group.emptyTitle}
+                      description={group.emptyDescription}
+                    />
+                  </div>
+                {:else}
+                  {#each groupDndItems[group.slug] || [] as dndItem (dndItem.id)}
+                    <div animate:flip={{ duration: isDragging ? flipDurationMs : 0 }}>
+                      {@render drawerItem(dndItem)}
+                    </div>
+                  {/each}
+                {/if}
+              </div>
+            {:else if !groupItems.length}
               <div class="px-1 pt-1 pb-5">
                 <EmptyState
                   iconSource={group.emptyIcon}
-                  title={group.emptyTitle || 'No items here'}
-                  description={group.emptyDescription || 'Add items to get started'}
+                  title={group.emptyTitle}
+                  description={group.emptyDescription}
                 />
               </div>
             {:else}
-              {#each groupItems as item}
+              {#each groupItems as item (item.value)}
                 {@render drawerItem(item)}
               {/each}
             {/if}
@@ -241,10 +330,31 @@
   {/if}
 
   {#if ungroupedItems.length}
-    <div class="flex-shrink-0 overflow-y-auto max-h-[564px]" bind:this={ungroupedContainer}>
-      {#each ungroupedItems as item (item.value)}
-        {@render drawerItem(item)}
-      {/each}
-    </div>
+    {#if draggable}
+      <div
+        class="flex-shrink-0 overflow-y-auto max-h-[564px]"
+        use:dndzone={{
+          items: ungroupedDndItems,
+          flipDurationMs,
+          dropTargetStyle: {},
+          type: 'drawer-item',
+          transformDraggedElement
+        }}
+        onconsider={handleUngroupedDndConsider}
+        onfinalize={handleUngroupedDndFinalize}
+      >
+        {#each ungroupedDndItems as dndItem (dndItem.id)}
+          <div animate:flip={{ duration: isDragging ? flipDurationMs : 0 }}>
+            {@render drawerItem(dndItem)}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="flex-shrink-0 overflow-y-auto max-h-[564px]">
+        {#each ungroupedItems as item (item.value)}
+          {@render drawerItem(item)}
+        {/each}
+      </div>
+    {/if}
   {/if}
 </div>

package/dist/EmptyState.svelte

@@ -31,8 +31,12 @@
     </div>
   {/if}
   <div class="flex flex-col items-center gap-0.5 text-center">
-    <h4 class="font-medium text-foreground text-base">{title}</h4>
-    <p class="text-foreground-default-secondary text-base">{description}</p>
+    {#if title}
+      <h4 class="font-medium text-foreground text-base">{title}</h4>
+    {/if}
+    {#if description}
+      <p class="text-foreground-default-secondary text-base">{description}</p>
+    {/if}
   </div>
   {#if children}
     <div class="mt-4">

package/dist/data-table/data-table-toolbar.svelte

@@ -3,7 +3,7 @@
   import type { Snippet } from 'svelte'
   import { DataTableViewOptions } from './index.js'
 
-  let { table, filters, frozenColumns }: { table: Table<TData>; filters?: Snippet; frozenColumns: Set<string> } = $props()
+  let { table, filters, frozenColumns, onFreezeColumn }: { table: Table<TData>; filters?: Snippet; frozenColumns: Set<string>; onFreezeColumn: (columnId: string) => void } = $props()
 </script>
 
 <div class="flex items-center justify-between px-4 py-3">
@@ -12,5 +12,5 @@
       {@render filters()}
     </div>
   {/if}
-  <DataTableViewOptions {table} {frozenColumns} />
+  <DataTableViewOptions {table} {frozenColumns} {onFreezeColumn} />
 </div>

package/dist/data-table/data-table-toolbar.svelte.d.ts

@@ -5,6 +5,7 @@ declare function $$render<TData>(): {
         table: Table<TData>;
         filters?: Snippet;
         frozenColumns: Set<string>;
+        onFreezeColumn: (columnId: string) => void;
     };
     exports: {};
     bindings: "";

package/dist/data-table/data-table-types.d.ts

@@ -53,6 +53,7 @@ export interface DataTableProps<TData> {
     columns: DataTableColumn<TData>[];
     disableSelection?: boolean;
     disablePagination?: boolean;
+    disableKeyboardNavigation?: boolean;
     rowActions?: TableAction[];
     getRowActions?: (row: TData) => TableAction[];
     onRowAction?: (action: AnyProp, row: TData) => void;
@@ -60,6 +61,7 @@ export interface DataTableProps<TData> {
     initialPage?: number;
     initialSortColumn?: string;
     initialSortDirection?: 'asc' | 'desc';
+    initialFrozenColumns?: string[];
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
     onRowClick?: (row: TData) => void;

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

@@ -1,19 +1,39 @@
 <script lang="ts" generics="TData">
   import { Sliders, Drag } from '@invopop/ui-icons'
   import type { Table } from '@tanstack/table-core'
-  import type { DrawerOption } from '../types.js'
+  import type { DrawerOption, DrawerGroup } from '../types.js'
   import BaseDropdown from '../BaseDropdown.svelte'
   import DrawerContext from '../DrawerContext.svelte'
   import InputToggle from '../InputToggle.svelte'
   import BaseButton from '../BaseButton.svelte'
   import { capitalize } from '../helpers.js'
 
-  let { table, frozenColumns }: { table: Table<TData>; frozenColumns: Set<string> } = $props()
+  let {
+    table,
+    frozenColumns,
+    onFreezeColumn
+  }: {
+    table: Table<TData>
+    frozenColumns: Set<string>
+    onFreezeColumn: (columnId: string) => void
+  } = $props()
 
-  let itemsWithActions = $state<DrawerOption[]>([])
+  const groups: DrawerGroup[] = [
+    {
+      label: 'Frozen columns',
+      slug: 'frozen',
+      emptyDescription: 'Drop items to this list',
+      hideCounter: true
+    },
+    {
+      label: 'Table options',
+      slug: 'regular',
+      emptyDescription: 'Drop items to this list',
+      hideCounter: true
+    }
+  ]
 
-  // Initialize and update items when table state changes
-  $effect(() => {
+  let itemsWithActions = $derived.by(() => {
     const columnOrder = table.getState().columnOrder
     const allColumns = table.getAllColumns()
 
@@ -27,46 +47,53 @@
       orderedColumns = allColumns.filter((col) => col.id !== 'select' && col.id !== 'actions')
     }
 
-    const newItems = orderedColumns.map((col) => ({
-      label: (col?.columnDef.header as string) || capitalize(col?.id || ''),
-      value: col?.id,
-      icon: Drag,
-      action: toggleAction,
-      locked: frozenColumns.has(col?.id || '')
-    })) as DrawerOption[]
+    return orderedColumns.map((col) => {
+      const isFrozen = frozenColumns.has(col?.id || '')
+      return {
+        label: (col?.columnDef.header as string) || capitalize(col?.id || ''),
+        value: col?.id,
+        icon: Drag,
+        action: toggleAction,
+        groupBy: isFrozen ? 'frozen' : 'regular'
+      }
+    }) as DrawerOption[]
+  })
 
-    // Only update if the order or locked status has changed (avoid overwriting during drag)
-    const currentOrder = itemsWithActions.map((i) => i.value).join(',')
-    const newOrder = newItems.map((i) => i.value).join(',')
-    const currentLocked = itemsWithActions.map((i) => i.locked ? '1' : '0').join(',')
-    const newLocked = newItems.map((i) => i.locked ? '1' : '0').join(',')
+  function handleDropItem(groupsDistribution: Record<string, DrawerOption[]>) {
+    const frozenItems = groupsDistribution['frozen'] || []
+    const regularItems = groupsDistribution['regular'] || []
 
-    if (currentOrder !== newOrder || currentLocked !== newLocked) {
-      itemsWithActions = newItems
-    }
-  })
+    // Build sets of what should be frozen and regular after the drop
+    const shouldBeFrozen = new Set(frozenItems.map((item) => item.value as string))
+    const shouldBeRegular = new Set(regularItems.map((item) => item.value as string))
+
+    // Freeze columns that are in the frozen group but not currently frozen
+    shouldBeFrozen.forEach((columnId) => {
+      if (!frozenColumns.has(columnId)) {
+        onFreezeColumn(columnId)
+      }
+    })
 
-  function handleReorder(reorderedItems: any[]) {
-    // Update local items to match the drag order immediately
-    itemsWithActions = reorderedItems
+    // Unfreeze columns that are in the regular group but currently frozen
+    shouldBeRegular.forEach((columnId) => {
+      if (frozenColumns.has(columnId)) {
+        onFreezeColumn(columnId)
+      }
+    })
 
-    const newOrder = reorderedItems.map((item) => item.value)
     // Get all column IDs from the table
     const allColumnIds = table.getAllColumns().map((col) => col.id)
-
-    // Filter to keep select and actions in their fixed positions
     const selectColumn = 'select'
     const actionsColumn = 'actions'
 
-    // Separate frozen and non-frozen columns from reordered items
-    const frozenCols = newOrder.filter((id) => frozenColumns.has(id))
-    const nonFrozenCols = newOrder.filter((id) => !frozenColumns.has(id) && id !== selectColumn && id !== actionsColumn)
+    // Build the final column order: select, frozen (in order), regular (in order), actions
+    const frozenOrder = frozenItems.map((item) => item.value as string)
+    const regularOrder = regularItems.map((item) => item.value as string)
 
-    // Build final order: select first, then frozen columns (in order), then non-frozen columns, then actions
     const finalOrder = [
       ...(allColumnIds.includes(selectColumn) ? [selectColumn] : []),
-      ...frozenCols,
-      ...nonFrozenCols,
+      ...frozenOrder,
+      ...regularOrder,
       ...(allColumnIds.includes(actionsColumn) ? [actionsColumn] : [])
     ]
 
@@ -89,9 +116,11 @@
   {#snippet trigger()}
     <BaseButton icon={Sliders} variant="outline" size="md" />
   {/snippet}
-  <DrawerContext items={itemsWithActions} draggable={true} onreorder={handleReorder}>
-    <div class="p-3 py-1.5 text-sm font-medium text-foreground-default-secondary">
-      Table options
-    </div>
-  </DrawerContext>
+  <DrawerContext
+    items={itemsWithActions}
+    {groups}
+    draggable
+    collapsibleGroups={false}
+    ondropitem={handleDropItem}
+  />
 </BaseDropdown>

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

@@ -3,6 +3,7 @@ declare function $$render<TData>(): {
     props: {
         table: Table<TData>;
         frozenColumns: Set<string>;
+        onFreezeColumn: (columnId: string) => void;
     };
     exports: {};
     bindings: "";

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

@@ -10,6 +10,7 @@
     type VisibilityState,
     type Column
   } from '@tanstack/table-core'
+  import { onMount, onDestroy } from 'svelte'
   import DataTableToolbar from './data-table-toolbar.svelte'
   import DataTablePagination from './data-table-pagination.svelte'
   import FlexRender from './flex-render.svelte'
@@ -33,6 +34,7 @@
     columns: columnConfig,
     disableSelection = false,
     disablePagination = false,
+    disableKeyboardNavigation = false,
     rowActions = [],
     getRowActions,
     onRowAction,
@@ -40,6 +42,7 @@
     initialPage = 0,
     initialSortColumn,
     initialSortDirection,
+    initialFrozenColumns = [],
     emptyState = {
       iconSource: Search,
       title: 'No results',
@@ -84,7 +87,9 @@
   let columnOrder = $state<ColumnOrderState>([])
   let containerRef = $state<HTMLDivElement | null>(null)
   let columnDropdowns: Record<string, BaseDropdown> = {}
-  let frozenColumns = $state<Set<string>>(new Set())
+  let frozenColumns = $state<Set<string>>(new Set(initialFrozenColumns))
+  let focusedRowIndex = $state<number>(-1)
+  let tableBodyRef: HTMLTableSectionElement | null = null
 
   // Build TanStack columns from config
   const columns = $derived.by(() =>
@@ -112,6 +117,13 @@
     pagination.pageIndex = initialPage
   })
 
+  // Reorder initial frozen columns on mount
+  $effect(() => {
+    if (initialFrozenColumns.length > 0 && columnOrder.length === 0) {
+      initialFrozenColumns.forEach(columnId => reorderFrozenColumn(columnId))
+    }
+  })
+
   // Track selection changes
   $effect(() => {
     if (onSelectionChange) {
@@ -146,49 +158,44 @@
     setColumnOrder: (value) => (columnOrder = value)
   })
 
+  function reorderFrozenColumn(columnId: string) {
+    const currentOrder = table.getState().columnOrder.length > 0
+      ? table.getState().columnOrder
+      : table.getAllLeafColumns().map(col => col.id)
+
+    const newOrder = [...currentOrder]
+    const columnIndex = newOrder.indexOf(columnId)
+
+    if (columnIndex > -1) {
+      newOrder.splice(columnIndex, 1)
+
+      const selectIndex = newOrder.indexOf('select')
+      const insertIndex = selectIndex >= 0 ? selectIndex + 1 : 0
+
+      let lastFrozenIndex = insertIndex
+      for (let i = insertIndex; i < newOrder.length; i++) {
+        if (frozenColumns.has(newOrder[i])) {
+          lastFrozenIndex = i + 1
+        } else {
+          break
+        }
+      }
+
+      newOrder.splice(lastFrozenIndex, 0, columnId)
+      table.setColumnOrder(newOrder)
+    }
+  }
+
   function handleFreezeColumn(columnId: string) {
     const isFrozen = frozenColumns.has(columnId)
 
     if (isFrozen) {
-      // Unfreeze
       frozenColumns.delete(columnId)
       frozenColumns = new Set(frozenColumns)
     } else {
-      // Freeze
       frozenColumns.add(columnId)
       frozenColumns = new Set(frozenColumns)
-
-      // Reorder columns to move frozen column to the left
-      const currentOrder = table.getState().columnOrder.length > 0
-        ? table.getState().columnOrder
-        : table.getAllLeafColumns().map(col => col.id)
-
-      const newOrder = [...currentOrder]
-      const columnIndex = newOrder.indexOf(columnId)
-
-      if (columnIndex > -1) {
-        // Remove from current position
-        newOrder.splice(columnIndex, 1)
-
-        // Find position to insert (after select column if present, otherwise at start)
-        const selectIndex = newOrder.indexOf('select')
-        const insertIndex = selectIndex >= 0 ? selectIndex + 1 : 0
-
-        // Find the last frozen column position
-        let lastFrozenIndex = insertIndex
-        for (let i = insertIndex; i < newOrder.length; i++) {
-          if (frozenColumns.has(newOrder[i])) {
-            lastFrozenIndex = i + 1
-          } else {
-            break
-          }
-        }
-
-        // Insert after the last frozen column
-        newOrder.splice(lastFrozenIndex, 0, columnId)
-
-        table.setColumnOrder(newOrder)
-      }
+      reorderFrozenColumn(columnId)
     }
   }
 
@@ -208,6 +215,88 @@
 
     return offset
   }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const rows = table.getRowModel().rows
+    if (rows.length === 0) return
+
+    // Ignore if user is typing in an input or has a dropdown open
+    if ((event.target as HTMLElement).tagName === 'INPUT' ||
+        (event.target as HTMLElement).tagName === 'TEXTAREA') {
+      return
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        if (focusedRowIndex === -1 && rows.length > 0) {
+          // No row focused, focus first row
+          focusedRowIndex = 0
+          scrollToFocusedRow()
+          if (event.shiftKey && enableSelection) {
+            rows[focusedRowIndex].toggleSelected(true)
+          }
+        } else if (focusedRowIndex < rows.length - 1) {
+          // Move down
+          focusedRowIndex++
+          scrollToFocusedRow()
+          if (event.shiftKey && enableSelection) {
+            // Always select when going down
+            rows[focusedRowIndex].toggleSelected(true)
+          }
+        }
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        if (event.shiftKey && enableSelection && focusedRowIndex >= 0) {
+          // Deselect current row first when going up with shift
+          rows[focusedRowIndex].toggleSelected(false)
+        }
+        if (focusedRowIndex === -1 && rows.length > 0) {
+          // No row focused, focus first row
+          focusedRowIndex = 0
+          scrollToFocusedRow()
+        } else if (focusedRowIndex > 0) {
+          // Move up
+          focusedRowIndex--
+          scrollToFocusedRow()
+        }
+        break
+      case ' ':
+      case 'Enter':
+        event.preventDefault()
+        if (focusedRowIndex >= 0 && focusedRowIndex < rows.length && enableSelection) {
+          const row = rows[focusedRowIndex]
+          row.toggleSelected()
+        }
+        break
+      case 'Escape':
+        focusedRowIndex = -1
+        break
+    }
+  }
+
+  function scrollToFocusedRow() {
+    if (focusedRowIndex >= 0 && tableBodyRef) {
+      const rowElement = tableBodyRef.querySelector(`[data-row-index="${focusedRowIndex}"]`)
+      if (rowElement) {
+        rowElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+      }
+    }
+  }
+
+  // Add global keyboard navigation
+  onMount(() => {
+    if (!disableKeyboardNavigation) {
+      document.addEventListener('keydown', handleKeydown)
+    }
+  })
+
+  onDestroy(() => {
+    if (!disableKeyboardNavigation) {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  })
 </script>
 
 {#snippet StickyCellWrapper({
@@ -225,7 +314,7 @@
 })}
   <div
     class={cn(
-      'absolute inset-0 flex items-center bg-background group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected px-3',
+      'absolute inset-0 flex items-center bg-background group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary px-3',
       align === 'right' ? 'justify-end' : '',
       { 'pl-4': isFirst, 'pr-4': isLast, 'border-r border-border': isFrozen }
     )}
@@ -255,7 +344,7 @@
 }: { column: Column<TData>; title?: string } & HTMLAttributes<HTMLDivElement>)}
   {@const isCurrency = column.columnDef.meta?.cellType === 'currency'}
   <div class={cn('flex items-center w-full', className)} {...restProps}>
-    <BaseDropdown bind:this={columnDropdowns[column.id]} fullWidth>
+    <BaseDropdown bind:this={columnDropdowns[column.id]} fullWidth usePortal={false}>
       {#snippet trigger()}
         <button
           class={clsx('data-[state=open]:bg-accent w-full flex items-center gap-1 py-2.5', {
@@ -310,7 +399,7 @@
 {/snippet}
 
 <div class="flex flex-col h-full">
-  <DataTableToolbar {table} {filters} {frozenColumns} />
+  <DataTableToolbar {table} {filters} {frozenColumns} onFreezeColumn={handleFreezeColumn} />
   <div class="flex-1 overflow-hidden flex flex-col">
     {#if data.length === 0}
       <div class="flex-1 flex items-center justify-center bg-background">
@@ -397,10 +486,12 @@
             </Table.Row>
           {/each}
         </Table.Header>
-        <Table.Body>
-          {#each table.getRowModel().rows as row (row.id)}
+        <Table.Body bind:ref={tableBodyRef}>
+          {#each table.getRowModel().rows as row, rowIndex (row.id)}
             <Table.Row
               data-state={row.getIsSelected() ? 'selected' : undefined}
+              data-row-index={rowIndex}
+              data-focused={focusedRowIndex === rowIndex ? 'true' : undefined}
               class={cn('border-b border-border', getRowClassName?.(row.original as TData))}
               onclick={() => onRowClick?.(row.original as TData)}
             >

package/dist/table/table-row.svelte

@@ -19,7 +19,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected',
+    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected data-[focused=true]:bg-background-default-secondary',
     className
   )}
   {oncontextmenu}

package/dist/types.d.ts

@@ -23,6 +23,7 @@ export type DrawerGroup = {
     emptyIcon?: IconSource;
     emptyTitle?: string;
     emptyDescription?: string;
+    hideCounter?: boolean;
 };
 export type DrawerOption = SelectOption & {
     separator?: boolean;
@@ -217,6 +218,7 @@ export interface BaseDropdownProps {
     fullWidth?: boolean;
     placement?: Placement;
     matchParentWidth?: boolean;
+    usePortal?: boolean;
     trigger?: Snippet;
     children?: Snippet;
     [key: string]: any;
@@ -390,9 +392,11 @@ export interface DrawerContextProps {
     multiple?: boolean;
     draggable?: boolean;
     widthClass?: string;
+    collapsibleGroups?: boolean;
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
     onreorder?: (items: DrawerOption[]) => void;
+    ondropitem?: (groups: Record<string, DrawerOption[]>) => void;
     children?: Snippet;
     groups?: DrawerGroup[];
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.22",
+  "version": "0.1.4-beta.24",
   "repository": {
-    "url":  "https://github.com/invopop/popui"
+    "url": "https://github.com/invopop/popui"
   },
   "scripts": {
     "dev": "vite dev",
@@ -55,7 +55,6 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@types/lodash-es": "^4.17.12",
-    "@types/sortablejs": "^1.15.9",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.28.0",
@@ -98,7 +97,7 @@
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",
     "mode-watcher": "^1.1.0",
-    "sortablejs": "^1.15.6",
+    "svelte-dnd-action": "^0.9.69",
     "svelte-floating-ui": "^1.5.8",
     "svelte-headlessui": "^0.0.46",
     "svelte-intersection-observer-action": "^0.0.4",