@invopop/popui 0.1.4-beta.4 → 0.1.4-beta.40

package/dist/BaseDropdown.svelte

@@ -3,6 +3,7 @@
   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'
 
   let {
@@ -10,12 +11,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,18 +36,24 @@
     )
   }
 
+  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
   }
 
+  export const close = () => {
+    isOpen = false
+  }
+
   function handleClick(event: MouseEvent) {
     event.stopPropagation()
     if (closedFromClickOutside) return
@@ -62,7 +73,7 @@
   {#if isOpen}
     <div
       class="max-h-40 absolute z-1001"
-      use:portal
+      use:conditionalPortal
       use:floatingContent
       use:clickOutside
       onclick_outside={() => {
@@ -72,6 +83,7 @@
         }, 100)
         isOpen = false
       }}
+      transition:slide={{ duration: 100 }}
     >
       {@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,81 @@
+<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-300 ease-in-out relative rounded-md"
+  style={expanded ? 'width: 12rem;' : 'width: 2.5rem;'}
+  use:clickOutside
+  onclick_outside={handleClickOutside}
+>
+  <div
+    class="w-48 transition-opacity duration-200 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-200"
+    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,13 +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,
@@ -109,25 +113,50 @@
 
   let {
     label = 'Date',
-    position = 'left',
+    placement = 'bottom-start',
     from = '',
     to = '',
-    onSelect
+    onSelect,
+    stackLeft = false,
+    stackRight = false,
+    icon = undefined,
+    iconTheme = 'default'
   }: 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(
-    clsx({
-      'border-border-selected-bold shadow-active': isOpen,
-      'border-border-secondary hover:border-border-default-secondary-hover': !isOpen
-    })
+    isStacked
+      ? buttonVariants({
+          variant: 'ghost',
+          stackedLeft: stackLeft,
+          stackedRight: stackRight
+        })
+      : clsx('border backdrop-blur-sm backdrop-filter', {
+          'border-border-selected-bold shadow-active': isOpen,
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+        })
   )
-  let selectedLabel = $state(label)
 
   $effect(() => {
     if (!value.end) {
@@ -137,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
     }
@@ -183,19 +222,36 @@
 </script>
 
 <div>
-  <div class="relative">
-    <button
-      onclick={() => {
-        isOpen = !isOpen
-      }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-2 text-left border border-border-default-secondary 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"
@@ -207,9 +263,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
@@ -239,5 +295,5 @@
         </div>
       </div>
     </Transition>
-  </div>
+  {/if}
 </div>