@invopop/popui 0.1.4-beta.45 → 0.1.4-beta.47

package/dist/BaseDropdown.svelte

@@ -3,8 +3,8 @@
   import { createFloatingActions } from 'svelte-floating-ui'
   import { clickOutside } from './clickOutside.js'
   import { portal } from 'svelte-portal'
-  import { slide } from 'svelte/transition'
   import type { BaseDropdownProps } from './types.js'
+  import type { TransitionConfig } from 'svelte/transition'
 
   let {
     isOpen = $bindable(false),
@@ -46,6 +46,33 @@
     middleware
   })
 
+  // Custom transition that mimics shadcn style
+  function dropdownTransition(
+    node: HTMLElement,
+    { duration = 150 }: { duration?: number } = {}
+  ): TransitionConfig {
+    const side = placement.split('-')[0]
+
+    // Calculate slide direction
+    let slideY = 0
+    let slideX = 0
+    if (side === 'bottom') slideY = -8
+    if (side === 'top') slideY = 8
+    if (side === 'left') slideX = 8
+    if (side === 'right') slideX = -8
+
+    return {
+      duration,
+      css: (t) => {
+        const eased = t * (2 - t) // ease-out
+        return `
+          opacity: ${eased};
+          transform: scale(${0.95 + eased * 0.05}) translate(${slideX * (1 - eased)}px, ${slideY * (1 - eased)}px);
+        `
+      }
+    }
+  }
+
   export const toggle = () => {
     isOpen = !isOpen
   }
@@ -83,7 +110,7 @@
         }, 100)
         isOpen = false
       }}
-      transition:slide={{ duration: 100 }}
+      transition:dropdownTransition={{ duration: 150 }}
     >
       {@render children?.()}
     </div>

package/dist/DrawerContext.svelte

@@ -8,8 +8,26 @@
   import { ChevronRight } from '@steeze-ui/heroicons'
   import { slide } from 'svelte/transition'
   import { flip } from 'svelte/animate'
-  import { dndzone } from 'svelte-dnd-action'
-  import { onMount } from 'svelte'
+  import {
+    draggable as makeDraggable,
+    dropTargetForElements
+  } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+  import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+  import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'
+  import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder'
+  import {
+    attachClosestEdge,
+    extractClosestEdge,
+    type Edge
+  } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
+  import { onMount, onDestroy, untrack } from 'svelte'
+  import {
+    shouldShowDropIndicator,
+    reorderItems,
+    moveItemBetweenGroups,
+    type DropIndicatorState,
+    type DndItem as DndItemType
+  } from './drawer-dnd-helpers'
 
   const flipDurationMs = 150
 
@@ -59,6 +77,9 @@
   let itemsCache = $state<DrawerOption[]>([])
   let isDragging = $state(false)
   let emitTimeout: number | undefined
+  let draggedOverGroup = $state<string | null>(null)
+  let dropIndicator = $state<DropIndicatorState>(null)
+  let cleanupFunctions: (() => void)[] = []
 
   // Build internal DND items from external items
   function buildListIn() {
@@ -140,14 +161,18 @@
     itemsCache = JSON.parse(JSON.stringify(items))
     buildListIn()
     mounted = true
+
+    // Set up auto-scroll
+    const autoScrollCleanup = autoScrollForElements({
+      element: document.documentElement
+    })
+    cleanupFunctions.push(autoScrollCleanup)
   })
 
-  function transformDraggedElement(draggedEl: HTMLElement | undefined) {
-    if (draggedEl) {
-      draggedEl.style.border = 'none'
-      draggedEl.style.outline = 'none'
-    }
-  }
+  onDestroy(() => {
+    cleanupFunctions.forEach((cleanup) => cleanup())
+    cleanupFunctions = []
+  })
 
   function emitGroupDistribution() {
     if (ondropitem && hasGroups) {
@@ -168,40 +193,199 @@
     }
   }
 
-  function handleDndConsider(groupSlug: string, e: CustomEvent<any>) {
-    if (!isDragging) {
-      isDragging = true
+  // Setup draggable item (Svelte action)
+  function setupDraggableItem(element: HTMLElement, params: [DndItem, string]) {
+    const [dndItem, groupSlug] = params
+    if (!element || dndItem.locked) return
+
+    const cleanup = makeDraggable({
+      element,
+      getInitialData: () => ({ id: dndItem.id, groupSlug, type: 'drawer-item' }),
+      onDragStart: () => {
+        isDragging = true
+        dropIndicator = null
+      },
+      onDrop: () => {
+        isDragging = false
+        dropIndicator = null
+      }
+    })
+
+    return {
+      destroy() {
+        cleanup()
+      }
     }
-    groupDndItems[groupSlug] = e.detail.items
   }
 
-  function handleDndFinalize(groupSlug: string, e: CustomEvent<any>) {
-    isDragging = false
-    groupDndItems[groupSlug] = e.detail.items
+  // Setup drop zone for a container (group or ungrouped) (Svelte action)
+  function setupDropZone(element: HTMLElement, groupSlug: string) {
+    if (!element) return
+
+    const cleanup = dropTargetForElements({
+      element,
+      getData: () => {
+        const items =
+          groupSlug === 'ungrouped' ? ungroupedDndItems : groupDndItems[groupSlug] || []
+        return { groupSlug, items: items.map((i) => i.id) }
+      },
+      canDrop: ({ source }) => source.data.type === 'drawer-item',
+      onDragEnter: () => {
+        draggedOverGroup = groupSlug
+      },
+      onDragLeave: () => {
+        if (draggedOverGroup === groupSlug) {
+          draggedOverGroup = null
+        }
+      },
+      onDrop: ({ source, location }) => {
+        draggedOverGroup = null
+        dropIndicator = null
+        const sourceId = source.data.id as string
+        const sourceGroup = source.data.groupSlug as string
+        const targetGroup = groupSlug
+
+        // Get source and target arrays
+        const sourceItems =
+          sourceGroup === 'ungrouped' ? ungroupedDndItems : groupDndItems[sourceGroup] || []
+        const targetItems =
+          targetGroup === 'ungrouped' ? ungroupedDndItems : groupDndItems[targetGroup] || []
+
+        // Find the dragged item
+        const sourceIndex = sourceItems.findIndex((item) => item.id === sourceId)
+        if (sourceIndex === -1) return
+
+        const draggedItem = sourceItems[sourceIndex]
+
+        // If moving within the same group, we need to handle reordering
+        if (sourceGroup === targetGroup) {
+          // Check if we're dropping on another item
+          const dropTargets = location.current.dropTargets
+          const itemDropTarget = dropTargets.find((target) => target.data.itemId)
+
+          if (itemDropTarget) {
+            const targetItemId = itemDropTarget.data.itemId as string
+            const edge = extractClosestEdge(itemDropTarget.data)
+
+            if (edge) {
+              const newItems = reorderItems(targetItems, sourceId, targetItemId, edge)
+
+              if (targetGroup === 'ungrouped') {
+                ungroupedDndItems = newItems
+              } else {
+                groupDndItems[targetGroup] = newItems
+              }
+            }
+          }
+        } else {
+          // Moving between groups
+          const dropTargets = location.current.dropTargets
+          const itemDropTarget = dropTargets.find((target) => target.data.itemId)
 
-    const newItems = buildListOut()
-    items = newItems
-    itemsCache = JSON.parse(JSON.stringify(items))
-    onreorder?.(newItems)
-    emitGroupDistribution()
-  }
+          let targetItemId: string | undefined
+          let edge: Edge | undefined
+
+          if (itemDropTarget) {
+            targetItemId = itemDropTarget.data.itemId as string
+            edge = extractClosestEdge(itemDropTarget.data) || undefined
+          }
+
+          const { newSourceItems, newTargetItems } = moveItemBetweenGroups(
+            sourceItems,
+            targetItems,
+            sourceId,
+            targetItemId,
+            edge
+          )
+
+          if (sourceGroup === 'ungrouped') {
+            ungroupedDndItems = newSourceItems
+          } else {
+            groupDndItems[sourceGroup] = newSourceItems
+          }
 
-  function handleUngroupedDndConsider(e: CustomEvent<any>) {
-    if (!isDragging) {
-      isDragging = true
+          if (targetGroup === 'ungrouped') {
+            ungroupedDndItems = newTargetItems
+          } else {
+            groupDndItems[targetGroup] = newTargetItems
+          }
+        }
+
+        // Update items and notify
+        const newItems = buildListOut()
+        items = newItems
+        itemsCache = JSON.parse(JSON.stringify(items))
+        onreorder?.(newItems)
+        emitGroupDistribution()
+      }
+    })
+
+    return {
+      destroy() {
+        cleanup()
+      }
     }
-    ungroupedDndItems = e.detail.items
   }
 
-  function handleUngroupedDndFinalize(e: CustomEvent<any>) {
-    isDragging = false
-    ungroupedDndItems = e.detail.items
+  // Setup drop zone for individual items (for reordering within same group) (Svelte action)
+  function setupItemDropZone(element: HTMLElement, params: [DndItem, string]) {
+    const [dndItem, groupSlug] = params
+    if (!element) return
+
+    const cleanup = dropTargetForElements({
+      element,
+      getData: ({ input }) => {
+        const data = { itemId: dndItem.id, groupSlug }
+        return attachClosestEdge(data, {
+          element,
+          input,
+          allowedEdges: ['top', 'bottom']
+        })
+      },
+      canDrop: ({ source }) => {
+        return source.data.type === 'drawer-item' && source.data.id !== dndItem.id
+      },
+      onDragEnter: ({ self, source }) => {
+        const edge = extractClosestEdge(self.data)
+        if (!edge) return
+
+        const sourceId = source.data.id as string
+        const sourceGroup = source.data.groupSlug as string
+        const items = groupSlug === 'ungrouped' ? ungroupedDndItems : groupDndItems[groupSlug] || []
+
+        if (shouldShowDropIndicator(sourceId, dndItem.id, sourceGroup, groupSlug, edge, items)) {
+          dropIndicator = { itemId: dndItem.id, edge }
+        }
+      },
+      onDrag: ({ self, source }) => {
+        const edge = extractClosestEdge(self.data)
+        if (!edge) return
+
+        const sourceId = source.data.id as string
+        const sourceGroup = source.data.groupSlug as string
+        const items = groupSlug === 'ungrouped' ? ungroupedDndItems : groupDndItems[groupSlug] || []
+
+        if (shouldShowDropIndicator(sourceId, dndItem.id, sourceGroup, groupSlug, edge, items)) {
+          dropIndicator = { itemId: dndItem.id, edge }
+        } else {
+          dropIndicator = null
+        }
+      },
+      onDragLeave: () => {
+        if (dropIndicator?.itemId === dndItem.id) {
+          dropIndicator = null
+        }
+      },
+      onDrop: () => {
+        dropIndicator = null
+      }
+    })
 
-    const newItems = buildListOut()
-    items = newItems
-    itemsCache = JSON.parse(JSON.stringify(items))
-    onreorder?.(newItems)
-    emitGroupDistribution()
+    return {
+      destroy() {
+        cleanup()
+      }
+    }
   }
 
   function updateItem(item: DrawerOption) {
@@ -231,7 +415,7 @@
 >
   {@render children?.()}
 
-  {#if hasGroups}
+  {#if hasGroups && groups}
     {#each groups as group, index}
       {@const groupItems = groupedItems.get(group.slug) || []}
       {@const isLastGroup = index === groups!.length - 1}
@@ -281,15 +465,8 @@
           >
             {#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)}
+                use:setupDropZone={group.slug}
+                class="min-h-[40px]"
               >
                 {#if !groupItems.length}
                   <div class="px-1 pt-1 pb-5">
@@ -301,7 +478,19 @@
                   </div>
                 {:else}
                   {#each groupDndItems[group.slug] || [] as dndItem (dndItem.id)}
-                    <div animate:flip={{ duration: isDragging ? flipDurationMs : 0 }}>
+                    {@const showTopIndicator =
+                      dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'top'}
+                    {@const showBottomIndicator =
+                      dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'bottom'}
+                    <div
+                      animate:flip={{ duration: isDragging ? flipDurationMs : 0 }}
+                      use:setupDraggableItem={[dndItem, group.slug]}
+                      use:setupItemDropZone={[dndItem, group.slug]}
+                      class:border-t-2={showTopIndicator}
+                      class:border-t-border-selected={showTopIndicator}
+                      class:border-b-2={showBottomIndicator}
+                      class:border-b-border-selected={showBottomIndicator}
+                    >
                       {@render drawerItem(dndItem)}
                     </div>
                   {/each}
@@ -332,19 +521,23 @@
   {#if ungroupedItems.length}
     {#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}
+        class="flex-shrink-0 overflow-y-auto max-h-[564px] min-h-[40px]"
+        use:setupDropZone={'ungrouped'}
       >
         {#each ungroupedDndItems as dndItem (dndItem.id)}
-          <div animate:flip={{ duration: isDragging ? flipDurationMs : 0 }}>
+          {@const showTopIndicator =
+            dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'top'}
+          {@const showBottomIndicator =
+            dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'bottom'}
+          <div
+            animate:flip={{ duration: isDragging ? flipDurationMs : 0 }}
+            use:setupDraggableItem={[dndItem, 'ungrouped']}
+            use:setupItemDropZone={[dndItem, 'ungrouped']}
+            class:border-t-2={showTopIndicator}
+            class:border-t-border-selected={showTopIndicator}
+            class:border-b-2={showBottomIndicator}
+            class:border-b-border-selected={showBottomIndicator}
+          >
             {@render drawerItem(dndItem)}
           </div>
         {/each}

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

@@ -78,6 +78,7 @@ export interface DataTableProps<TData> {
     initialSortDirection?: TableSortBy;
     initialFrozenColumns?: string[];
     initialColumnOrder?: string[];
+    initialColumnVisibility?: Record<string, boolean>;
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
     onRowClick?: (row: TData) => void;
@@ -96,6 +97,7 @@ export interface DataTableProps<TData> {
     onFreezeChange?: (columnId: string) => void;
     onColumnResize?: (columnSizes: Record<string, number>) => void;
     onColumnOrderChange?: (columnOrder: string[]) => void;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
     getRowClassName?: (row: TData) => string;
     getRowState?: (row: TData) => {
         isSuccess?: boolean;

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

@@ -45,6 +45,7 @@
     initialSortDirection,
     initialFrozenColumns = [],
     initialColumnOrder = [],
+    initialColumnVisibility = {},
     emptyState = {
       iconSource: Search,
       title: 'No results',
@@ -65,6 +66,7 @@
     onFreezeChange,
     onColumnResize,
     onColumnOrderChange,
+    onColumnVisibilityChange,
     getRowClassName,
     getRowState,
     children
@@ -74,7 +76,7 @@
   const enablePagination = !disablePagination
 
   let rowSelection = $state<RowSelectionState>({})
-  let columnVisibility = $state<VisibilityState>({})
+  let columnVisibility = $state<VisibilityState>(initialColumnVisibility)
   let sorting = $state<SortingState>(
     initialSortColumn && initialSortDirection
       ? [{ id: initialSortColumn, desc: initialSortDirection === 'desc' }]
@@ -151,6 +153,13 @@
     }
   })
 
+  // Track column visibility changes
+  $effect(() => {
+    if (onColumnVisibilityChange && Object.keys(columnVisibility).length > 0) {
+      onColumnVisibilityChange(columnVisibility)
+    }
+  })
+
   const table = setupTable({
     getData: () => data,
     getColumns: () => columns,
@@ -263,8 +272,9 @@
       if (header.id === columnId) {
         break
       }
-      // Add width of previous frozen columns (or select column)
-      if (frozenColumns.has(header.id) || header.id === 'select') {
+      // Only add width of previous frozen columns that are visible (or select column)
+      const isVisible = header.column?.getIsVisible?.() ?? true
+      if (isVisible && (frozenColumns.has(header.id) || header.id === 'select')) {
         offset += header.getSize()
       }
     }

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

@@ -0,0 +1,30 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+export type DndItem = {
+    id: string;
+    locked?: boolean;
+    [key: string]: any;
+};
+export type DropIndicatorState = {
+    itemId: string;
+    edge: Edge;
+} | null;
+/**
+ * Checks if dropping an item would result in no position change
+ * (i.e., dropping right next to its current position)
+ */
+export declare function shouldShowDropIndicator(sourceId: string, targetId: string, sourceGroup: string, targetGroup: string, edge: Edge, items: DndItem[]): boolean;
+/**
+ * Calculates the new index where a dragged item should be inserted
+ */
+export declare function calculateInsertIndex(sourceIndex: number, targetIndex: number, edge: Edge): number;
+/**
+ * Reorders items within the same group
+ */
+export declare function reorderItems<T extends DndItem>(items: T[], sourceId: string, targetId: string, edge: Edge): T[];
+/**
+ * Moves an item from one group to another
+ */
+export declare function moveItemBetweenGroups<T extends DndItem>(sourceItems: T[], targetItems: T[], sourceId: string, targetId?: string, edge?: Edge): {
+    newSourceItems: T[];
+    newTargetItems: T[];
+};

package/dist/drawer-dnd-helpers.js

@@ -0,0 +1,72 @@
+/**
+ * Checks if dropping an item would result in no position change
+ * (i.e., dropping right next to its current position)
+ */
+export function shouldShowDropIndicator(sourceId, targetId, sourceGroup, targetGroup, edge, items) {
+    // Always show for cross-group drops
+    if (sourceGroup !== targetGroup) {
+        return true;
+    }
+    // Check if dropping would result in no position change
+    const sourceIndex = items.findIndex((item) => item.id === sourceId);
+    const targetIndex = items.findIndex((item) => item.id === targetId);
+    // Don't show indicator if dropping adjacent to current position
+    const isAdjacentTop = edge === 'top' && targetIndex === sourceIndex + 1;
+    const isAdjacentBottom = edge === 'bottom' && targetIndex === sourceIndex - 1;
+    return !isAdjacentTop && !isAdjacentBottom;
+}
+/**
+ * Calculates the new index where a dragged item should be inserted
+ */
+export function calculateInsertIndex(sourceIndex, targetIndex, edge) {
+    let insertIndex = targetIndex;
+    // Adjust target index if source was before target (array shifts after removal)
+    if (sourceIndex < targetIndex) {
+        insertIndex = targetIndex - 1;
+    }
+    // If dropping on bottom edge, insert after
+    if (edge === 'bottom') {
+        insertIndex = insertIndex + 1;
+    }
+    return insertIndex;
+}
+/**
+ * Reorders items within the same group
+ */
+export function reorderItems(items, sourceId, targetId, edge) {
+    const sourceIndex = items.findIndex((item) => item.id === sourceId);
+    const targetIndex = items.findIndex((item) => item.id === targetId);
+    if (sourceIndex === -1 || targetIndex === -1) {
+        return items;
+    }
+    const newItems = [...items];
+    const [draggedItem] = newItems.splice(sourceIndex, 1);
+    const insertIndex = calculateInsertIndex(sourceIndex, targetIndex, edge);
+    newItems.splice(insertIndex, 0, draggedItem);
+    return newItems;
+}
+/**
+ * Moves an item from one group to another
+ */
+export function moveItemBetweenGroups(sourceItems, targetItems, sourceId, targetId, edge) {
+    const draggedItem = sourceItems.find((item) => item.id === sourceId);
+    if (!draggedItem) {
+        return { newSourceItems: sourceItems, newTargetItems: targetItems };
+    }
+    const newSourceItems = sourceItems.filter((item) => item.id !== sourceId);
+    // If no target specified, append to end
+    if (!targetId || !edge) {
+        const newTargetItems = [...targetItems, draggedItem];
+        return { newSourceItems, newTargetItems };
+    }
+    // Insert at specific position based on target and edge
+    const targetIndex = targetItems.findIndex((item) => item.id === targetId);
+    if (targetIndex === -1) {
+        const newTargetItems = [...targetItems, draggedItem];
+        return { newSourceItems, newTargetItems };
+    }
+    const newTargetItems = [...targetItems];
+    const insertIndex = edge === 'bottom' ? targetIndex + 1 : targetIndex;
+    newTargetItems.splice(insertIndex, 0, draggedItem);
+    return { newSourceItems, newTargetItems };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.45",
+  "version": "0.1.4-beta.47",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },
@@ -81,6 +81,9 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.5",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@floating-ui/core": "^1.5.1",
     "@invopop/ui-icons": "^0.0.78",
     "@steeze-ui/heroicons": "^2.2.3",
@@ -97,7 +100,6 @@
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",
     "mode-watcher": "^1.1.0",
-    "svelte-dnd-action": "^0.9.69",
     "svelte-floating-ui": "^1.5.8",
     "svelte-headlessui": "^0.0.46",
     "svelte-intersection-observer-action": "^0.0.4",
@@ -106,6 +108,7 @@
     "svelte-transition": "^0.0.17",
     "svelte-viewport-info": "^1.0.2",
     "tailwind-variants": "^1.0.0",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^4.3.5"
   }
 }