@invopop/popui 0.1.55 → 0.1.57

package/dist/DrawerContext.svelte

@@ -8,6 +8,7 @@
   import { ChevronRight } from '@steeze-ui/heroicons'
   import { slide } from 'svelte/transition'
   import { flip } from 'svelte/animate'
+  import clsx from 'clsx'
   import {
     draggable as makeDraggable,
     dropTargetForElements
@@ -53,6 +54,16 @@
 
   type DndItem = DrawerOption & { id: string }
 
+  let containerClasses = $derived(
+    clsx(
+      widthClass,
+      'border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] overflow-y-auto list-none',
+      {
+        '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden': draggable
+      }
+    )
+  )
+
   let selectedItems = $derived(items.filter((i) => i.selected))
   let hasGroups = $derived(groups && groups.length > 0)
   let { groupedItems, ungroupedItems } = $derived.by(() => {
@@ -485,7 +496,7 @@
 
 <div
   bind:this={containerRef}
-  class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] list-none"
+  class={containerClasses}
 >
   {@render children?.()}
 

package/dist/FeedItemDetail.svelte

@@ -2,7 +2,7 @@
   import clsx from 'clsx'
   import type { FeedItemDetailProps } from './types.ts'
   import FeedIconStatus from './FeedIconStatus.svelte'
-  import UuidCopy from './UuidCopy.svelte'
+  import ButtonUuidCopy from './ButtonUuidCopy.svelte'
   import FeedEvents from './FeedEvents.svelte'
   import { slide } from 'svelte/transition'
   import SeparatorHorizontal from './SeparatorHorizontal.svelte'
@@ -52,7 +52,7 @@
   <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">
     <span class="text-sm text-foreground-default-secondary whitespace-nowrap">{idLabel}</span>
     {#if uuid}
-      <UuidCopy {uuid} full small {onCopied} />
+      <ButtonUuidCopy {uuid} full oncopied={onCopied} />
     {/if}
   </div>
   {#if events.length}

package/dist/InputToggle.svelte

@@ -4,12 +4,15 @@
   import type { InputToggleProps } from './types'
   import { cn } from './utils.js'
   import { onMount } from 'svelte'
+  import { TooltipAutoHide, TooltipContent, TooltipTrigger } from './tooltip'
   const sw = createSwitch({ label: 'Set Preference' })
 
   let {
     id = Math.random().toString(36).slice(2, 7),
     label = '',
     checked = $bindable(false),
+    disabled = false,
+    hint,
     onchange,
     class: className = ''
   }: InputToggleProps = $props()
@@ -35,7 +38,8 @@
       {
         'bg-background-default-tertiary': !$sw.checked,
         'bg-background-accent': $sw.checked,
-        'transition-colors duration-200 ease-in-out': hasInteracted
+        'transition-colors duration-200 ease-in-out': hasInteracted,
+        'opacity-30 cursor-not-allowed': disabled
       }
     )
   )
@@ -51,19 +55,45 @@
     )
   )
 
+  let labelStyles = $derived(
+    clsx(
+      'inline-flex items-center gap-2',
+      {
+        'cursor-not-allowed': disabled,
+        'cursor-pointer': !disabled
+      }
+    )
+  )
+
   function handleChange() {
+    if (disabled) return
     hasInteracted = true
     onchange?.($sw.checked)
     checked = $sw.checked
   }
 </script>
 
-<label for={id} class={cn("inline-flex items-center gap-2 cursor-pointer", className)}>
-  <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange}>
-    <span class="sr-only">Use setting</span>
-    <span aria-hidden="true" class={circleStyles}></span>
-  </button>
-  {#if label}
-    <span class="text-base text-foreground">{label}</span>
-  {/if}
-</label>
+{#snippet toggleContent()}
+  <label for={id} class={cn(labelStyles, className)}>
+    <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange} disabled={disabled}>
+      <span class="sr-only">Use setting</span>
+      <span aria-hidden="true" class={circleStyles}></span>
+    </button>
+    {#if label}
+      <span class="text-base text-foreground">{label}</span>
+    {/if}
+  </label>
+{/snippet}
+
+{#if disabled && hint}
+  <TooltipAutoHide>
+    <TooltipTrigger>
+      {@render toggleContent()}
+    </TooltipTrigger>
+    <TooltipContent>
+      {hint}
+    </TooltipContent>
+  </TooltipAutoHide>
+{:else}
+  {@render toggleContent()}
+{/if}

package/dist/button/button.svelte

@@ -177,6 +177,7 @@
 <script lang="ts">
   import { Icon } from '@steeze-ui/svelte-icon'
   import ShortcutWrapper from '../ShortcutWrapper.svelte'
+  import clsx from 'clsx'
 
   let {
     class: className,
@@ -239,10 +240,10 @@
 
 {#snippet buttonContent()}
   <div
-    class={cn(
-      'inline-flex items-center transition-transform group-active:translate-y-px',
-      !iconOnly && 'gap-1'
-    )}
+    class={clsx('inline-flex items-center transition-transform group-active:translate-y-px', {
+      'gap-1': !iconOnly && !shortcut,
+      'gap-1.5': !iconOnly && shortcut
+    })}
   >
     {#if icon && !children}
       {@render iconContent()}

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

@@ -103,13 +103,18 @@
 
 {#snippet toggleAction(item: DrawerOption)}
   {@const column = table.getColumn(String(item.value))}
-  {#if column?.getCanHide()}
-    <InputToggle
-      class="cursor-default"
-      checked={column?.getIsVisible() ?? false}
-      onchange={(v) => column?.toggleVisibility(!!v)}
-    />
-  {/if}
+  {@const canHide = column?.getCanHide() ?? false}
+  <InputToggle
+    class="cursor-default"
+    checked={column?.getIsVisible() ?? false}
+    disabled={!canHide}
+    hint={!canHide ? 'This column cannot be hidden' : undefined}
+    onchange={(v) => {
+      if (canHide) {
+        column?.toggleVisibility(!!v)
+      }
+    }}
+  />
 {/snippet}
 
 <BaseDropdown class="ms-auto hidden lg:flex">

package/dist/index.d.ts

@@ -75,7 +75,6 @@ import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import { TooltipAutoHide } from './tooltip';
-import UuidCopy from './UuidCopy.svelte';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
@@ -87,4 +86,4 @@ import { FlexRender } from './data-table';
 import { createSvelteTable } from './data-table';
 import { renderComponent } from './data-table';
 import { renderSnippet } from './data-table';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, StepIcon, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, StepIcon, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -68,7 +68,6 @@ import TitleMain from './TitleMain.svelte'
 import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide } from './tooltip'
-import UuidCopy from './UuidCopy.svelte'
 import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
 import { buttonVariants } from './button/button.svelte' // Ensure button styles are included
 import {
@@ -159,7 +158,6 @@ export {
   TooltipContent,
   TooltipTrigger,
   TooltipAutoHide,
-  UuidCopy,
   resolveIcon,
   getCountryName,
   getStatusType,

package/dist/tooltip/tooltip-content.svelte

@@ -20,7 +20,7 @@
     {sideOffset}
     {side}
     class={cn(
-      'bg-background-default-negative border border-border-inverse z-50 rounded-md px-2 py-1 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md',
+      'bg-background-default-negative border border-border-inverse z-[1002] rounded-md px-2 py-1 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md',
       className
     )}
   >
@@ -29,7 +29,7 @@
       {#snippet child({ props })}
         <div
           class={cn(
-            'bg-background-default-negative z-50 size-2.5 rotate-45 rounded-[2px]',
+            'bg-background-default-negative z-[1002] size-2.5 rotate-45 rounded-[2px]',
             'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
             'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
             'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',

package/dist/types.d.ts

@@ -506,6 +506,8 @@ export interface InputToggleProps {
     id?: string;
     checked?: boolean;
     label?: string;
+    disabled?: boolean;
+    hint?: string;
     onchange?: (checked: boolean) => void;
     [key: string]: any;
 }
@@ -585,17 +587,4 @@ export interface ShortcutWrapperProps {
     theme?: 'light' | 'navigation';
     children?: Snippet;
 }
-export interface UuidCopyProps {
-    uuid?: string;
-    small?: boolean;
-    dark?: boolean;
-    rightAlign?: boolean;
-    prefixLength?: number;
-    suffixLength?: number;
-    full?: boolean;
-    compact?: boolean;
-    link?: boolean;
-    onCopied?: (uuid: string) => void;
-    onLinkClick?: (uuid: string) => void;
-}
 export type { DataTableColumn, DataTableProps, CellType, TextCellConfig, BooleanCellConfig, TagCellConfig, DateCellConfig, CurrencyCellConfig, CellConfig } from './data-table/data-table-types.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },

package/dist/UuidCopy.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import { Duplicate, ExternalLink } from '@invopop/ui-icons'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import clsx from 'clsx'
-  import type { UuidCopyProps } from './types'
-
-  let {
-    uuid = '',
-    small = false,
-    dark = false,
-    rightAlign = false,
-    prefixLength = 4,
-    suffixLength = 4,
-    full = false,
-    compact = false,
-    link = false,
-    onCopied,
-    onLinkClick
-  }: UuidCopyProps = $props()
-
-  function shortenString(inputString: string, prefixLength: number, suffixLength: number) {
-    if (inputString.length <= prefixLength + suffixLength) {
-      return inputString // Return the whole string if it's too short
-    }
-
-    const prefix = inputString.substring(0, prefixLength)
-    const suffix = inputString.substring(inputString.length - suffixLength)
-
-    return prefix + '...' + suffix
-  }
-
-  let formattedUuid = $derived(full ? uuid : shortenString(uuid, prefixLength, suffixLength))
-  let styles = $derived(
-    clsx({
-      'justify-end': rightAlign,
-      'text-sm': small,
-      'text-base': !small,
-      'text-foreground': dark,
-      'text-foreground-default-secondary': !dark,
-      'justify-between': !compact,
-      'w-full': full,
-      'border border-border rounded-md pl-2.5 pr-2 py-[5px]': !full
-    })
-  )
-
-  async function handleClick(event: MouseEvent) {
-    event.stopPropagation()
-    await navigator.clipboard.writeText(uuid)
-    onCopied?.(uuid)
-  }
-
-  async function handleIconClick(event: MouseEvent) {
-    event.stopPropagation()
-    await navigator.clipboard.writeText(uuid)
-    if (link) {
-      onLinkClick?.(uuid)
-    } else {
-      onCopied?.(uuid)
-    }
-  }
-</script>
-
-<div class="{styles} relative inline-flex items-center space-x-1 text-left whitespace-nowrap">
-  <button class="tracking-wide font-mono text-base cursor-pointer" onclick={handleClick}>
-    {formattedUuid}
-  </button>
-  <button class="p-1 cursor-pointer" onclick={handleIconClick}>
-    <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-foreground-default-secondary" />
-  </button>
-</div>

package/dist/UuidCopy.svelte.d.ts

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