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

package/dist/ButtonSearch.svelte

@@ -45,14 +45,14 @@
 </script>
 
 <div
-  class="overflow-hidden transition-all duration-300 ease-in-out relative rounded-md"
+  class="overflow-hidden transition-all duration-150 ease-in-out relative rounded-md"
   class:w-[280px]={expanded}
   class:w-10={!expanded}
   use:clickOutside
   onclick_outside={handleClickOutside}
 >
   <div
-    class="w-[280px] transition-opacity duration-200 absolute left-0 top-0"
+    class="w-[280px] transition-opacity duration-100 absolute left-0 top-0"
     class:opacity-0={!expanded}
     class:opacity-100={expanded}
     class:pointer-events-none={!expanded}
@@ -68,7 +68,7 @@
     />
   </div>
   <div
-    class="transition-opacity duration-200"
+    class="transition-opacity duration-100"
     class:opacity-0={expanded}
     class:opacity-100={!expanded}
     class:pointer-events-none={expanded}

package/dist/DrawerContext.svelte

@@ -76,6 +76,7 @@
   let mounted = $state(false)
   let itemsCache = $state<DrawerOption[]>([])
   let isDragging = $state(false)
+  let draggedItemId = $state<string | null>(null)
   let emitTimeout: number | undefined
   let draggedOverGroup = $state<string | null>(null)
   let dropIndicator = $state<DropIndicatorState>(null)
@@ -203,10 +204,12 @@
       getInitialData: () => ({ id: dndItem.id, groupSlug, type: 'drawer-item' }),
       onDragStart: () => {
         isDragging = true
+        draggedItemId = dndItem.id
         dropIndicator = null
       },
       onDrop: () => {
         isDragging = false
+        draggedItemId = null
         dropIndicator = null
       }
     })
@@ -225,8 +228,7 @@
     const cleanup = dropTargetForElements({
       element,
       getData: () => {
-        const items =
-          groupSlug === 'ungrouped' ? ungroupedDndItems : groupDndItems[groupSlug] || []
+        const items = groupSlug === 'ungrouped' ? ungroupedDndItems : groupDndItems[groupSlug] || []
         return { groupSlug, items: items.map((i) => i.id) }
       },
       canDrop: ({ source }) => source.data.type === 'drawer-item',
@@ -464,10 +466,7 @@
             transition:slide={{ duration: collapsibleGroups ? 200 : 0 }}
           >
             {#if draggable}
-              <div
-                use:setupDropZone={group.slug}
-                class="min-h-[40px]"
-              >
+              <div use:setupDropZone={group.slug} class="min-h-[40px]">
                 {#if !groupItems.length}
                   <div class="px-1 pt-1 pb-5">
                     <EmptyState
@@ -482,14 +481,17 @@
                       dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'top'}
                     {@const showBottomIndicator =
                       dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'bottom'}
+                    {@const isBeingDragged = draggedItemId === dndItem.id}
                     <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-t-accent-50={showTopIndicator}
                       class:border-b-2={showBottomIndicator}
-                      class:border-b-border-selected={showBottomIndicator}
+                      class:border-b-accent-50={showBottomIndicator}
+                      class:opacity-40={isBeingDragged}
+                      class="transition-opacity"
                     >
                       {@render drawerItem(dndItem)}
                     </div>
@@ -529,14 +531,17 @@
             dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'top'}
           {@const showBottomIndicator =
             dropIndicator?.itemId === dndItem.id && dropIndicator?.edge === 'bottom'}
+          {@const isBeingDragged = draggedItemId === dndItem.id}
           <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-t-accent-50={showTopIndicator}
             class:border-b-2={showBottomIndicator}
-            class:border-b-border-selected={showBottomIndicator}
+            class:border-b-accent-50={showBottomIndicator}
+            class:opacity-40={isBeingDragged}
+            class="transition-opacity"
           >
             {@render drawerItem(dndItem)}
           </div>

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

@@ -79,6 +79,7 @@ export interface DataTableProps<TData> {
     initialFrozenColumns?: string[];
     initialColumnOrder?: string[];
     initialColumnVisibility?: Record<string, boolean>;
+    initialColumnSizing?: Record<string, number>;
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
     onRowClick?: (row: TData) => void;

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

@@ -46,6 +46,7 @@
     initialFrozenColumns = [],
     initialColumnOrder = [],
     initialColumnVisibility = {},
+    initialColumnSizing = {},
     emptyState = {
       iconSource: Search,
       title: 'No results',
@@ -83,7 +84,7 @@
       : []
   )
   let pagination = $state<PaginationState>({ pageIndex: initialPage, pageSize: initialPageSize })
-  let columnSizing = $state<ColumnSizingState>({})
+  let columnSizing = $state<ColumnSizingState>(initialColumnSizing)
   let columnSizingInfo = $state<ColumnSizingInfoState>({
     columnSizingStart: [],
     deltaOffset: null,
@@ -100,6 +101,7 @@
   let tableBodyRef: HTMLTableSectionElement | null = null
   let animatingRows = $state<Set<any>>(new Set())
   let previousData = $state<TData[]>([])
+  let tableRenderKey = $state<number>(0) // Force re-render when visibility changes
 
   // Build TanStack columns from config
   const columns = $derived.by(() =>
@@ -177,7 +179,11 @@
     getColumnSizingInfo: () => columnSizingInfo,
     getColumnOrder: () => columnOrder,
     setRowSelection: (value) => (rowSelection = value),
-    setColumnVisibility: (value) => (columnVisibility = value),
+    setColumnVisibility: (value) => {
+      columnVisibility = value
+      // Increment render key to force table rebuild after visibility changes
+      tableRenderKey++
+    },
     setSorting: (value) => (sorting = value),
     setPagination: (value) => (pagination = value),
     setColumnSizing: (value) => {
@@ -433,7 +439,7 @@
   hasSelectColumn = false,
   ...restProps
 }: { column: Column<TData>; title?: string; isFirst?: boolean; hasSelectColumn?: boolean } & HTMLAttributes<HTMLDivElement>)}
-  {@const isCurrency = column.columnDef.meta?.cellType === 'currency'}
+  {@const isCurrency = column.columnDef.cellType === 'currency'}
   {@const needsEdgePadding = isFirst && !hasSelectColumn}
   <div
     class={cn('flex items-center w-full [th[data-last-frozen=true]_&]:border-r [th[data-last-frozen=true]_&]:border-border', className)}
@@ -518,7 +524,7 @@
       {:else}
         <Table.Root>
           <Table.Header>
-            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+            {#each table.getHeaderGroups() as headerGroup (`${headerGroup.id}-${tableRenderKey}`)}
               {@const hasSelectColumn = headerGroup.headers.some(h => h.id === 'select')}
               <Table.Row class="hover:!bg-transparent">
               {#each headerGroup.headers as header, index (header.id)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.47",
+  "version": "0.1.4-beta.49",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },