compote-ui 0.79.1 → 0.80.0

package/dist/components/data-table-v9/virtual/data-table-virtualized.svelte

@@ -1,79 +1,82 @@
-<script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/svelte-table';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { DataTableInstance } from '../data-table-utils';
-	import { createTableViewState } from '../table-view-state.svelte';
-	import DataTableHead from '../data-table-head.svelte';
-	import DataTableFoot from '../data-table-foot.svelte';
-	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
-	import { tableSizeStyle } from '../data-table-utils';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTableInstance<T>;
-		caption?: string;
-		emptyMessage?: string;
-		class?: ClassValue;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		table,
-		caption,
-		emptyMessage = 'No rows found',
-		class: className,
-		onRowClick,
-		onRowDoubleClick,
-		...rest
-	}: Props = $props();
-
-	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
-
-	const view = createTableViewState(() => table);
-</script>
-
-<div
-	class={cn(
-		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
-		className
-	)}
-	{...rest}
->
-	{#if view.isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-	<div class="min-h-0 flex-1 overflow-auto" bind:this={scrollContainerRef}>
-		<table
-			class="table-fixed border-separate border-spacing-0 text-sm"
-			style="display: grid; {tableSizeStyle(table, view.isRowSelectionEnabled, view)}"
-		>
-			{#if caption}
-				<caption class="sr-only">{caption}</caption>
-			{/if}
-			<DataTableHead {table} {view} isVirtual />
-			{#if scrollContainerRef}
-				<DataTableVirtualRows
-					{table}
-					{view}
-					scrollContainer={scrollContainerRef}
-					{emptyMessage}
-					{onRowClick}
-					{onRowDoubleClick}
-				/>
-			{/if}
-			{#if view.hasFooter}
-				<DataTableFoot {table} {view} hasGrowColumn={false} isVirtual />
-			{/if}
-		</table>
-	</div>
-
-	<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
-		{#if view.isRowSelectionEnabled}
-			{view.selectedRowCount} of {view.rowModel.rows.length} rows selected
-		{:else}
-			{view.rowModel.rows.length} rows
-		{/if}
-	</div>
-</div>
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import type { DataTableInstance } from '../data-table-utils';
+	import { createTableViewState } from '../table-view-state.svelte';
+	import DataTableHead from '../data-table-head.svelte';
+	import DataTableFoot from '../data-table-foot.svelte';
+	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
+	import { tableSizeStyle } from '../data-table-utils';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		table: DataTableInstance<T>;
+		caption?: string;
+		emptyMessage?: string;
+		class?: ClassValue;
+		/** Show a filter funnel in the header of every filterable column. */
+		headerFilters?: boolean;
+		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
+		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+	};
+
+	let {
+		table,
+		caption,
+		emptyMessage = 'No rows found',
+		class: className,
+		headerFilters = false,
+		onRowClick,
+		onRowDoubleClick,
+		...rest
+	}: Props = $props();
+
+	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
+
+	const view = createTableViewState(() => table);
+</script>
+
+<div
+	class={cn(
+		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
+		className
+	)}
+	{...rest}
+>
+	{#if view.isColumnResizing}
+		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
+	{/if}
+
+	<div class="min-h-0 flex-1 overflow-auto" bind:this={scrollContainerRef}>
+		<table
+			class="table-fixed border-separate border-spacing-0 text-sm"
+			style="display: grid; {tableSizeStyle(table, view.isRowSelectionEnabled, view)}"
+		>
+			{#if caption}
+				<caption class="sr-only">{caption}</caption>
+			{/if}
+			<DataTableHead {table} {view} isVirtual {headerFilters} />
+			{#if scrollContainerRef}
+				<DataTableVirtualRows
+					{table}
+					{view}
+					scrollContainer={scrollContainerRef}
+					{emptyMessage}
+					{onRowClick}
+					{onRowDoubleClick}
+				/>
+			{/if}
+			{#if view.hasFooter}
+				<DataTableFoot {table} {view} hasGrowColumn={false} isVirtual />
+			{/if}
+		</table>
+	</div>
+
+	<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
+		{#if view.isRowSelectionEnabled}
+			{view.selectedRowCount} of {view.rowModel.rows.length} rows selected
+		{:else}
+			{view.rowModel.rows.length} rows
+		{/if}
+	</div>
+</div>

package/dist/components/data-table-v9/virtual/data-table-virtualized.svelte.d.ts

@@ -8,6 +8,8 @@ declare function $$render<T extends RowData>(): {
         caption?: string;
         emptyMessage?: string;
         class?: ClassValue;
+        /** Show a filter funnel in the header of every filterable column. */
+        headerFilters?: boolean;
         onRowClick?: (details: {
             row: T;
             event: MouseEvent;

package/dist/components/dialog/alert-dialog.svelte

@@ -1,71 +1,73 @@
-<script lang="ts">
-	import { PhX } from '../../icons';
-	import { Dialog } from '@ark-ui/svelte/dialog';
-	import { Portal } from '@ark-ui/svelte/portal';
-	import type { AlertDialogProps } from './dialog.types';
-
-	let {
-		open = $bindable(),
-		title,
-		description,
-		confirmLabel = 'Confirm',
-		cancelLabel = 'Cancel',
-		onConfirm,
-		onCancel,
-		variant = 'default',
-		lazyMount = true,
-		unmountOnExit = true,
-		...restProps
-	}: AlertDialogProps = $props();
-
-	const confirmClass = $derived(
-		variant === 'destructive'
-			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-	);
-</script>
-
-<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
-	<Portal>
-		<Dialog.Backdrop
-			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		/>
-		<Dialog.Positioner
-			class="fixed inset-0 flex items-center justify-center"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		>
-			<Dialog.Content
-				class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
-			>
-				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
-					{title}
-				</Dialog.Title>
-				{#if description}
-					<Dialog.Description class="mt-2 text-sm text-ink-dim">
-						{#each Array.isArray(description) ? description : [description] as line, i (i)}
-							<span class="block">{line}</span>
-						{/each}
-					</Dialog.Description>
-				{/if}
-				<div class="mt-6 flex justify-end gap-3">
-					<Dialog.CloseTrigger
-						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-						onclick={onCancel}
-					>
-						{cancelLabel}
-					</Dialog.CloseTrigger>
-					<button type="button" class={confirmClass} onclick={onConfirm}>
-						{confirmLabel}
-					</button>
-				</div>
-				<Dialog.CloseTrigger
-					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none"
-				>
-					<PhX class="h-4 w-4" />
-					<span class="sr-only">Close</span>
-				</Dialog.CloseTrigger>
-			</Dialog.Content>
-		</Dialog.Positioner>
-	</Portal>
-</Dialog.Root>
+<script lang="ts">
+	import { PhX } from '../../icons';
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
+	import type { AlertDialogProps } from './dialog.types';
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		onConfirm,
+		onCancel,
+		variant = 'default',
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: AlertDialogProps = $props();
+
+	const confirmClass = $derived(
+		variant === 'destructive'
+			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+	);
+</script>
+
+<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	<Portal>
+		<Dialog.Backdrop
+			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		/>
+		<Dialog.Positioner
+			class="fixed inset-0 flex items-center justify-center"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		>
+			<Dialog.Content
+				class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+				{...releaseFocusOnExitProps}
+			>
+				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
+					{title}
+				</Dialog.Title>
+				{#if description}
+					<Dialog.Description class="mt-2 text-sm text-ink-dim">
+						{#each Array.isArray(description) ? description : [description] as line, i (i)}
+							<span class="block">{line}</span>
+						{/each}
+					</Dialog.Description>
+				{/if}
+				<div class="mt-6 flex justify-end gap-3">
+					<Dialog.CloseTrigger
+						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+						onclick={onCancel}
+					>
+						{cancelLabel}
+					</Dialog.CloseTrigger>
+					<button type="button" class={confirmClass} onclick={onConfirm}>
+						{confirmLabel}
+					</button>
+				</div>
+				<Dialog.CloseTrigger
+					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none"
+				>
+					<PhX class="h-4 w-4" />
+					<span class="sr-only">Close</span>
+				</Dialog.CloseTrigger>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

package/dist/components/dialog/dialog-root.svelte

@@ -1,43 +1,45 @@
-<script lang="ts">
-	import { Dialog } from '@ark-ui/svelte/dialog';
-	import { Portal } from '@ark-ui/svelte/portal';
-	import { cn } from 'tailwind-variants';
-	import type { DialogProps } from './dialog.types';
-
-	let {
-		open = $bindable(),
-		children,
-		contentClass,
-		lazyMount = true,
-		unmountOnExit = true,
-		onOpenChange,
-		...restProps
-	}: DialogProps = $props();
-
-	function handleOpenChange(details: { open: boolean }) {
-		open = details.open;
-		onOpenChange?.(details);
-	}
-</script>
-
-<Dialog.Root {open} {lazyMount} {unmountOnExit} onOpenChange={handleOpenChange} {...restProps}>
-	<Portal>
-		<Dialog.Backdrop
-			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		/>
-		<Dialog.Positioner
-			class="fixed inset-0 flex items-center justify-center p-4"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		>
-			<Dialog.Content
-				class={cn(
-					'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-					contentClass
-				)}
-			>
-				{@render children()}
-			</Dialog.Content>
-		</Dialog.Positioner>
-	</Portal>
-</Dialog.Root>
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
+	import { cn } from 'tailwind-variants';
+	import type { DialogProps } from './dialog.types';
+
+	let {
+		open = $bindable(),
+		children,
+		contentClass,
+		lazyMount = true,
+		unmountOnExit = true,
+		onOpenChange,
+		...restProps
+	}: DialogProps = $props();
+
+	function handleOpenChange(details: { open: boolean }) {
+		open = details.open;
+		onOpenChange?.(details);
+	}
+</script>
+
+<Dialog.Root {open} {lazyMount} {unmountOnExit} onOpenChange={handleOpenChange} {...restProps}>
+	<Portal>
+		<Dialog.Backdrop
+			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		/>
+		<Dialog.Positioner
+			class="fixed inset-0 flex items-center justify-center p-4"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		>
+			<Dialog.Content
+				class={cn(
+					'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+					contentClass
+				)}
+				{...releaseFocusOnExitProps}
+			>
+				{@render children()}
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>