@invopop/popui 0.1.4-beta.5 → 0.1.4-beta.50

package/dist/BaseDropdown.svelte

@@ -4,18 +4,23 @@
   import { clickOutside } from './clickOutside.js'
   import { portal } from 'svelte-portal'
   import type { BaseDropdownProps } from './types.js'
+  import type { TransitionConfig } from 'svelte/transition'
 
   let {
     isOpen = $bindable(false),
     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,18 +36,51 @@
     )
   }
 
+  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)
+  // 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
   }
 
+  export const close = () => {
+    isOpen = false
+  }
+
   function handleClick(event: MouseEvent) {
     event.stopPropagation()
     if (closedFromClickOutside) return
@@ -62,7 +100,7 @@
   {#if isOpen}
     <div
       class="max-h-40 absolute z-1001"
-      use:portal
+      use:conditionalPortal
       use:floatingContent
       use:clickOutside
       onclick_outside={() => {
@@ -72,6 +110,7 @@
         }, 100)
         isOpen = false
       }}
+      transition:dropdownTransition={{ duration: 150 }}
     >
       {@render children?.()}
     </div>

package/dist/BaseDropdown.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { BaseDropdownProps } from './types.js';
 declare const BaseDropdown: import("svelte").Component<BaseDropdownProps, {
     toggle: () => void;
+    close: () => void;
 }, "isOpen">;
 type BaseDropdown = ReturnType<typeof BaseDropdown>;
 export default BaseDropdown;

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/BaseTableHeaderOrderBy.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
-  import { SortAscending, SortDescending, Preview } from '@invopop/ui-icons'
+  import { SortAscending, SortDescending, Preview, Filter, Lock } from '@invopop/ui-icons'
   import type { TableSortBy, DrawerOption, BaseTableHeaderOrderByProps } from './types.js'
   import DrawerContext from './DrawerContext.svelte'
 
-  let { isActive = false, sortDirection, onOrderBy, onHide }: BaseTableHeaderOrderByProps = $props()
+  let { isActive = false, sortDirection, onOrderBy, onHide, onFilter, onFreeze, isFrozen = false, showSortOptions = true, showFilterOption = true }: BaseTableHeaderOrderByProps = $props()
 
   let items = $derived([
-    {
-      icon: SortAscending,
-      label: 'Sort Ascending',
-      value: 'asc',
-      selected: isActive && sortDirection === 'asc'
-    },
-    {
-      icon: SortDescending,
-      label: 'Sort Descending',
-      value: 'desc',
-      selected: isActive && sortDirection === 'desc'
-    },
-    { label: '', value: '', separator: true },
-    { icon: Preview, label: 'Hide', value: 'hide' }
+    ...(showSortOptions ? [
+      {
+        icon: SortAscending,
+        label: 'Sort Ascending',
+        value: 'asc',
+        selected: isActive && sortDirection === 'asc'
+      },
+      {
+        icon: SortDescending,
+        label: 'Sort Descending',
+        value: 'desc',
+        selected: isActive && sortDirection === 'desc'
+      },
+      { label: '', value: 'sep-1', separator: true }
+    ] : []),
+    ...(showFilterOption ? [
+      { icon: Filter, label: 'Filter by column', value: 'filter' },
+      { label: '', value: 'sep-2', separator: true }
+    ] : []),
+    { icon: Lock, label: isFrozen ? 'Unfreeze column' : 'Freeze column', value: 'freeze' },
+    { label: '', value: 'sep-3', separator: true },
+    { icon: Preview, label: 'Hide column', value: 'hide' }
   ] as DrawerOption[])
 </script>
 
@@ -28,6 +36,10 @@
   onclick={(e) => {
     if (e === 'hide') {
       onHide?.()
+    } else if (e === 'filter') {
+      onFilter?.()
+    } else if (e === 'freeze') {
+      onFreeze?.()
     } else {
       onOrderBy?.(e as TableSortBy)
     }

package/dist/ButtonSearch.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { Search, Pulse } from '@invopop/ui-icons'
+  import BaseButton from './BaseButton.svelte'
+  import InputSearch from './InputSearch.svelte'
+  import { clickOutside } from './clickOutside.js'
+  import type { ButtonSearchProps } from './types.js'
+
+  let {
+    value = $bindable(''),
+    expanded = $bindable(false),
+    placeholder = 'Search...',
+    size = 'sm',
+    loading = false,
+    autofocus = false,
+    oninput,
+    onExpand,
+    onCollapse
+  }: ButtonSearchProps = $props()
+
+  let inputSearch: InputSearch | undefined = $state()
+  let isLoadingCollapsed = $derived(loading && !expanded)
+
+  function handleExpand() {
+    expanded = true
+    onExpand?.()
+  }
+
+  function handleClickOutside() {
+    if (expanded && value.trim() === '') {
+      expanded = false
+      onCollapse?.()
+    }
+  }
+
+  function handleInput(newValue: string) {
+    value = newValue
+    oninput?.(newValue)
+  }
+
+  $effect(() => {
+    if (expanded && inputSearch) {
+      inputSearch.focus()
+    }
+  })
+</script>
+
+<div
+  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-100 absolute left-0 top-0"
+    class:opacity-0={!expanded}
+    class:opacity-100={expanded}
+    class:pointer-events-none={!expanded}
+  >
+    <InputSearch
+      bind:this={inputSearch}
+      bind:value
+      {placeholder}
+      {size}
+      {loading}
+      {autofocus}
+      oninput={handleInput}
+    />
+  </div>
+  <div
+    class="transition-opacity duration-100"
+    class:opacity-0={expanded}
+    class:opacity-100={!expanded}
+    class:pointer-events-none={expanded}
+  >
+    <BaseButton
+      icon={isLoadingCollapsed ? Pulse : Search}
+      class={isLoadingCollapsed ? 'pulse-icon' : ''}
+      onclick={handleExpand}
+    />
+  </div>
+</div>

package/dist/ButtonSearch.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonSearchProps } from './types.js';
+declare const ButtonSearch: import("svelte").Component<ButtonSearchProps, {}, "value" | "expanded">;
+type ButtonSearch = ReturnType<typeof ButtonSearch>;
+export default ButtonSearch;

package/dist/DatePicker.svelte

@@ -3,14 +3,17 @@
   import RangeCalendar from './range-calendar/range-calendar.svelte'
   import { parseDate, type DateValue } from '@internationalized/date'
   import type { DateRange } from 'bits-ui'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { Calendar } from '@invopop/ui-icons'
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
   import Transition from 'svelte-transition'
   import type { DatePickerProps } from './types'
   import { clickOutside } from './clickOutside'
   import BaseButton from './BaseButton.svelte'
-  import { datesFromToday, toCalendarDate } from './helpers'
+  import { datesFromToday, toCalendarDate, resolveIcon } from './helpers'
   import { buttonVariants } from './button/button.svelte'
+  import { offset, flip, shift } from 'svelte-floating-ui/dom'
+  import { createFloatingActions } from 'svelte-floating-ui'
+  import { portal } from 'svelte-portal'
+  import { cn } from './utils'
 
   const {
     startOfThisWeek,
@@ -110,21 +113,38 @@
 
   let {
     label = 'Date',
-    position = 'left',
+    placement = 'bottom-start',
     from = '',
     to = '',
     onSelect,
     stackLeft = false,
-    stackRight = false
+    stackRight = false,
+    icon = undefined,
+    iconTheme = 'default',
+    isOpen = $bindable(false)
   }: DatePickerProps = $props()
 
+  const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    placement,
+    middleware: [offset(8), flip(), shift()]
+  })
+
+  let resolvedIcon: IconSource | undefined = $state()
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
   let selectedPeriod = $state('custom')
   let value = $state<DateRange>({
     start: undefined,
     end: undefined
   })
-  let isOpen = $state(false)
+  let selectedLabel = $state(label)
   let isStacked = $derived(stackLeft || stackRight)
+  let hasSelectedDates = $derived(value.start !== undefined)
+  let hasConfirmedDates = $derived(selectedLabel !== label)
   let styles = $derived(
     isStacked
       ? buttonVariants({
@@ -132,12 +152,11 @@
           stackedLeft: stackLeft,
           stackedRight: stackRight
         })
-      : clsx({
+      : clsx('border backdrop-blur-sm backdrop-filter', {
           'border-border-selected-bold shadow-active': isOpen,
-          'border-border-secondary hover:border-border-default-secondary-hover': !isOpen
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
         })
   )
-  let selectedLabel = $state(label)
 
   $effect(() => {
     if (!value.end) {
@@ -147,9 +166,19 @@
 
   $effect(() => {
     if (from) {
+      const startDate = parseDate(from)
+      const endDate = to ? parseDate(to) : undefined
+
       value = {
-        start: parseDate(from),
-        end: to ? parseDate(to) : undefined
+        start: startDate,
+        end: endDate
+      }
+
+      // Update label directly without calling getLabel() to avoid circular dependency
+      if (startDate === endDate) {
+        selectedLabel = getDisplayFromValue(startDate)
+      } else {
+        selectedLabel = `${getDisplayFromValue(startDate)} → ${getDisplayFromValue(endDate)}`
       }
       return
     }
@@ -190,24 +219,52 @@
 
     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>
-  <div class="relative">
-    <button
-      onclick={() => {
-        isOpen = !isOpen
-      }}
-      class="{styles} {isStacked
-        ? 'h-7 py-1.5'
-        : 'py-1.25 border border-border-default-secondary'} datepicker-trigger w-full pl-7 pr-2 text-left rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
+  <button
+    use:floatingRef
+    onclick={() => {
+      isOpen = !isOpen
+    }}
+    class="{styles} {isStacked
+      ? 'h-7 py-1.5'
+      : 'py-1.5'} datepicker-trigger flex items-center w-full {resolvedIcon
+      ? 'pl-7'
+      : 'pl-2'} pr-2 text-left rounded-lg bg-background cursor-pointer relative overflow-hidden"
+  >
+    {#if resolvedIcon}
+      <Icon
+        src={resolvedIcon}
+        theme={iconTheme}
+        class="h-4 w-4 absolute top-1.5 left-2 text-foreground-default-secondary"
+      />
+    {/if}
+    <span
+      class={clsx('flex-1 text-base truncate', {
+        'text-foreground': hasConfirmedDates,
+        'text-foreground-default-secondary': !hasConfirmedDates,
+        'font-normal': isStacked && !hasConfirmedDates
+      })}
     >
       {selectedLabel}
-    </button>
-    <Icon src={Calendar} class="h-4 w-4 absolute top-2 left-2 text-foreground-default-secondary" />
-  </div>
+    </span>
+  </button>
 
-  <div class="relative">
+  {#if isOpen}
     <Transition
       show={isOpen}
       enter="transition ease-out duration-100"
@@ -219,9 +276,9 @@
     >
       <!-- @ts-ignore -->
       <div
-        class:left-0={position === 'left'}
-        class:right-0={position === 'right'}
-        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute right-0 top-2 z-40 border border-border"
+        use:portal
+        use:floatingContent
+        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute z-1001 border border-border"
         use:clickOutside
         onclick_outside={() => {
           if (!isOpen) return
@@ -251,5 +308,5 @@
         </div>
       </div>
     </Transition>
-  </div>
+  {/if}
 </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;