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

package/dist/DatePicker.svelte

@@ -120,7 +120,8 @@
     stackLeft = false,
     stackRight = false,
     icon = undefined,
-    iconTheme = 'default'
+    iconTheme = 'default',
+    isOpen = $bindable(false)
   }: DatePickerProps = $props()
 
   const [floatingRef, floatingContent] = createFloatingActions({
@@ -140,7 +141,6 @@
     start: undefined,
     end: undefined
   })
-  let isOpen = $state(false)
   let selectedLabel = $state(label)
   let isStacked = $derived(stackLeft || stackRight)
   let hasSelectedDates = $derived(value.start !== undefined)
@@ -219,6 +219,19 @@
 
     onSelect?.({ from: value.start?.toString() || '', to: value.end?.toString() || '' })
   }
+
+  // Exposed methods
+  export function open() {
+    isOpen = true
+  }
+
+  export function close() {
+    isOpen = false
+  }
+
+  export function toggle() {
+    isOpen = !isOpen
+  }
 </script>
 
 <div>

package/dist/DatePicker.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { DatePickerProps } from './types';
-declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "">;
+declare const DatePicker: import("svelte").Component<DatePickerProps, {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}, "isOpen">;
 type DatePicker = ReturnType<typeof DatePicker>;
 export default DatePicker;

package/dist/data-table/column-definitions.js

@@ -22,9 +22,9 @@ export function createSelectionColumn() {
         enableSorting: false,
         enableHiding: false,
         enableResizing: false,
-        size: 52,
-        minSize: 52,
-        maxSize: 52
+        size: 40,
+        minSize: 40,
+        maxSize: 40
     };
 }
 /**

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

@@ -7,7 +7,7 @@
   let { table, filters, frozenColumns, onFreezeColumn, disabled = false }: { table: Table<TData>; filters?: Snippet; frozenColumns: Set<string>; onFreezeColumn: (columnId: string) => void; disabled?: boolean } = $props()
 </script>
 
-<div class={clsx('flex items-center justify-between px-4 py-3', {
+<div class={clsx('flex items-center justify-between px-4 py-2.5', {
   'pointer-events-none opacity-30': disabled
 })}>
   {#if filters}

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

@@ -393,7 +393,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 group-data-[state=selected]/row:group-hover/row:bg-background-selected group-data-[state=error]/row:bg-background-critical group-data-[state=error]/row:group-hover/row:bg-background-critical group-data-[state=success]/row:bg-background-selected group-data-[state=success]/row:group-hover/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary 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-[state=selected]/row:group-hover/row:bg-background-selected group-data-[state=error]/row:bg-background-critical group-data-[state=error]/row:group-hover/row:bg-background-critical group-data-[state=success]/row:bg-background-selected group-data-[state=success]/row:group-hover/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary px-3 shadow-[inset_0_-1px_0_0_var(--color-border)]',
       align === 'right' ? 'justify-end' : '',
       { 'pl-4': isFirst, 'pr-4': isLast, 'border-r border-border': isFrozen && isLastFrozen }
     )}
@@ -600,13 +600,14 @@
               data-state={dataState}
               data-row-index={rowIndex}
               data-focused={focusedRowIndex === rowIndex ? 'true' : undefined}
-              class={cn(clsx('border-b border-border', {
+              class={cn(clsx('shadow-[inset_0_-1px_0_0_var(--color-border)]', {
                 'cursor-pointer': onRowClick
               }), getRowClassName?.(row.original as TData))}
               onclick={() => onRowClick?.(row.original as TData)}
             >
               {#each row.getVisibleCells() as cell, index (cell.id)}
                 {@const visibleCells = row.getVisibleCells()}
+                {@const allCells = row.getAllCells()}
                 {@const isLastScrollable = index === visibleCells.length - 2}
                 {@const firstDataColumnIndex = visibleCells.findIndex(
                   (c) => c.column.id !== 'select' && c.column.id !== 'actions'
@@ -615,9 +616,9 @@
                 {@const isFirstCell = index === 0}
                 {@const isLastCell = index === visibleCells.length - 1}
                 {@const isFrozen = frozenColumns.has(cell.column.id)}
-                {@const lastFrozenColumnId = visibleCells.map(c => c.column).reverse().find(col => frozenColumns.has(col.id))?.id}
+                {@const lastFrozenColumnId = allCells.map(c => c.column).reverse().find(col => frozenColumns.has(col.id))?.id}
                 {@const isLastFrozen = isFrozen && cell.column.id === lastFrozenColumnId}
-                {@const frozenOffset = isFrozen ? calculateFrozenOffset(cell.column.id, visibleCells.map(c => c.column)) : 0}
+                {@const frozenOffset = isFrozen ? calculateFrozenOffset(cell.column.id, allCells.map(c => c.column)) : 0}
                 <Table.Cell
                   style={getCellStyle(cell, isLastScrollable, isFrozen, frozenOffset)}
                   class={getCellClasses(

package/dist/data-table/table-styles.js

@@ -24,7 +24,7 @@ export function getHeaderClasses(header, isLastScrollable, isFirstHeader = false
     return clsx('relative whitespace-nowrap overflow-hidden before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border', {
         'sticky right-0 text-right bg-background before:z-20': header.id === 'actions',
         'sticky left-0 bg-background z-10 before:z-20': header.id === 'select' || isFrozen,
-        'after:content-[""] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-background-default-tertiary after:z-20': isResizable && (header.id !== 'actions' && header.id !== 'select'),
+        'after:content-[""] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-background-default-tertiary after:z-20': isResizable && (header.id !== 'actions' && header.id !== 'select') && !isLastFrozen,
         'w-full': isLastScrollable,
         '!pr-4': isLastHeader && !isSticky,
         'px-3': isSticky,

package/dist/table/table-head.svelte

@@ -13,7 +13,7 @@
   bind:this={ref}
   data-slot="table-head"
   class={cn(
-    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:p-0 [&:has(button)]:p-0 px-3 bg-background',
+    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:p-0 [&:has(button)]:p-0 px-3 bg-background shadow-[inset_0_-1px_0_0_var(--color-border)]',
     className
   )}
   {...restProps}

package/dist/table/table-header.svelte

@@ -15,7 +15,7 @@
 <thead
   bind:this={ref}
   data-slot="table-header"
-  class={cn('sticky top-0 z-20 [&_tr]:border-b [&_tr]:border-border bg-background', className)}
+  class={cn('sticky top-0 z-20 bg-background', className)}
   onclick={bubble('click')}
   onkeydown={bubble('keydown')}
 >

package/dist/tailwind.theme.css

@@ -621,7 +621,7 @@
   --color-background-warning-bold: var(--color-warning-60);
   --color-background-warning-inverse: var(--color-warning-50);
 
-  --color-background-critical-default: var(--color-critical-alpha-10);
+  --color-background-critical-default: var(--color-critical-alpha-5);
   --color-background-critical-bold: var(--color-critical-50);
   --color-background-critical-inverse: var(--color-critical-40);
 

package/dist/types.d.ts

@@ -397,6 +397,7 @@ export interface DatePickerProps {
     stackRight?: boolean;
     icon?: IconSource | string;
     iconTheme?: IconTheme;
+    isOpen?: boolean;
 }
 export interface DrawerContextProps {
     items?: DrawerOption[];

package/package.json

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