@johly/bits-ui 2.18.1

package/dist/bits/filter/components/filter-menu-node.svelte

@@ -0,0 +1,276 @@
+<script lang="ts" generics="TContext = any">
+	import MenuItem from "../../menu/components/menu-item.svelte";
+	import MenuCheckboxItem from "../../menu/components/menu-checkbox-item.svelte";
+	import MenuRadioGroup from "../../menu/components/menu-radio-group.svelte";
+	import MenuRadioItem from "../../menu/components/menu-radio-item.svelte";
+	import MenuGroup from "../../menu/components/menu-group.svelte";
+	import MenuSeparator from "../../menu/components/menu-separator.svelte";
+	import MenuSub from "../../menu/components/menu-sub.svelte";
+	import MenuSubTrigger from "../../menu/components/menu-sub-trigger.svelte";
+	import MenuSubContent from "../../menu/components/menu-sub-content.svelte";
+	import Portal from "../../utilities/portal/portal.svelte";
+	import DataSurface from "../../menu-data/components/data-surface.svelte";
+	import DataInput from "../../menu-data/components/data-input.svelte";
+	import DataList from "../../menu-data/components/data-list.svelte";
+	import DataEmpty from "../../menu-data/components/data-empty.svelte";
+	import type { DisplayNode, DisplayRowNode } from "../../menu-data/types.js";
+	import {
+		isDisplayGroupNode,
+		isDisplayRadioGroupNode,
+		isDisplaySeparatorNode,
+	} from "../../menu-data/types.js";
+	import type {
+		Column,
+		DataTableFilterActions,
+		DurationUnit,
+		FilterModel,
+		FilterStrategy,
+		FiltersState,
+		Locale,
+	} from "../types.js";
+	import { filterAttrs } from "../filter.svelte.js";
+	import { t } from "../i18n.js";
+	import { formatNumberWithUnit } from "../units.js";
+	import type { FilterMenuNodeMeta } from "../menu-nodes.js";
+	import FilterLabelWithBreadcrumbs from "./filter-label-with-breadcrumbs.svelte";
+	import FilterTextEditor from "./filter-text-editor.svelte";
+	import FilterNumberEditor from "./filter-number-editor.svelte";
+	import FilterOptionEditor from "./filter-option-editor.svelte";
+	import FilterDateEditor from "./filter-date-editor.svelte";
+	import FilterIcon from "./filter-icon.svelte";
+	import Self from "./filter-menu-node.svelte";
+
+	let {
+		displayNode,
+		actions,
+		filters = [],
+		locale = "en",
+		strategy = "client",
+	}: {
+		displayNode: DisplayNode<FilterMenuNodeMeta>;
+		actions: DataTableFilterActions<TContext>;
+		filters?: FiltersState;
+		locale?: Locale;
+		strategy?: FilterStrategy;
+	} = $props();
+
+	function rowLabel(row: DisplayRowNode<FilterMenuNodeMeta>) {
+		const node = row.node;
+		if (node.kind === "submenu") return node.label ?? node.title;
+		if (node.meta?.kind === "operator") return node.meta.label;
+		return node.label;
+	}
+
+	function findFilter<TType extends FilterModel["type"]>(column: Column<unknown>, type: TType) {
+		return filters.find(
+			(filter): filter is FilterModel<TType> =>
+				filter.columnId === column.id && filter.type === type
+		);
+	}
+
+	function unitLabel(value: number, unit?: DurationUnit) {
+		if (!unit) return String(Math.round(value * 1000) / 1000);
+		return formatNumberWithUnit(value, unit);
+	}
+
+	function numberDisplay(
+		data: NonNullable<Extract<FilterMenuNodeMeta, { kind: "number" }>["data"]>
+	) {
+		const [first, second] = data.values;
+		if (data.isRange) {
+			return `${unitLabel(first ?? 0, data.displayUnit)} ${t("and", locale)} ${unitLabel(
+				second ?? 0,
+				data.displayUnit
+			)}`;
+		}
+		return unitLabel(first ?? 0, data.displayUnit);
+	}
+
+	function getSubmenuAlign(meta: FilterMenuNodeMeta | undefined) {
+		if (meta?.kind !== "column") return "list";
+		return meta.editor === "option" || meta.editor === "multiOption" || !meta.editor
+			? "list"
+			: "start";
+	}
+</script>
+
+{#if isDisplayGroupNode(displayNode)}
+	<MenuGroup aria-label={displayNode.group.label}>
+		{#each displayNode.items as item (`group-${displayNode.group.id}-${item.node.id}`)}
+			<Self displayNode={item} {actions} {filters} {locale} {strategy} />
+		{/each}
+	</MenuGroup>
+{:else if isDisplayRadioGroupNode(displayNode)}
+	<MenuRadioGroup
+		value={displayNode.radioGroup.value ?? ""}
+		onValueChange={(value) => displayNode.radioGroup.onValueChange?.(value)}
+		aria-label={displayNode.radioGroup.label}
+	>
+		{#each displayNode.items as item (`radio-${displayNode.radioGroup.id}-${item.node.id}`)}
+			<Self displayNode={item} {actions} {filters} {locale} {strategy} />
+		{/each}
+	</MenuRadioGroup>
+{:else if isDisplaySeparatorNode(displayNode)}
+	<MenuSeparator />
+{:else}
+	{@const row = displayNode}
+	{@const node = row.node}
+	{#if node.kind === "submenu"}
+		{@const meta = node.meta}
+		{@const column = meta?.kind === "column" ? meta.column : undefined}
+		<MenuSub>
+			<MenuSubTrigger id={node.id} disabled={node.disabled} openDelay={0}>
+				<span>
+					{#if column?.icon}
+						<FilterIcon icon={column.icon} part="menu" />
+					{/if}
+					<FilterLabelWithBreadcrumbs
+						label={rowLabel(row)}
+						breadcrumbs={row.context.isDeepSearchResult ? row.context.breadcrumbs : []}
+					/>
+				</span>
+				<span aria-hidden="true" {...{ [filterAttrs["menu-caret"]]: "" }}>
+					<svg viewBox="0 0 15 15" focusable="false">
+						<path d="M6 11V4l4.5 3.5L6 11Z" fill="currentColor" />
+					</svg>
+				</span>
+			</MenuSubTrigger>
+			<Portal>
+				<MenuSubContent sideOffset={8} align={getSubmenuAlign(meta)}>
+					{#if column && meta?.kind === "column" && meta.editor === "text"}
+						<FilterTextEditor column={column as Column<unknown, "text">} {actions} />
+					{:else if column && meta?.kind === "column" && meta.editor === "number"}
+						<FilterNumberEditor
+							column={column as Column<unknown, "number">}
+							{actions}
+							baseUnit={(
+								column.meta as { number?: { unit?: DurationUnit } } | undefined
+							)?.number?.unit}
+						/>
+					{:else if column && meta?.kind === "column" && meta.editor === "date"}
+						<FilterDateEditor
+							filter={findFilter(column, "date") as FilterModel<"date"> | undefined}
+							column={column as Column<unknown, "date">}
+							{actions}
+						/>
+					{:else if column && meta?.kind === "column" && (meta.editor === "option" || meta.editor === "multiOption")}
+						<FilterOptionEditor
+							column={column as
+								| Column<unknown, "option">
+								| Column<unknown, "multiOption">}
+							{actions}
+							filter={findFilter(column, meta.editor) as
+								| FilterModel<"option">
+								| FilterModel<"multiOption">
+								| undefined}
+							{locale}
+							{strategy}
+						/>
+					{:else}
+						<DataSurface content={node.nodes ?? []}>
+							<DataInput
+								placeholder={meta?.kind === "column"
+									? meta.inputPlaceholder
+									: "Search..."}
+							/>
+							<DataList>
+								{#snippet children({ nodes })}
+									{#each nodes as childNode, index (`submenu-${node.id}-${index}`)}
+										<Self
+											displayNode={childNode}
+											{actions}
+											{filters}
+											{locale}
+											{strategy}
+										/>
+									{/each}
+								{/snippet}
+							</DataList>
+							<DataEmpty>No matching options.</DataEmpty>
+						</DataSurface>
+					{/if}
+				</MenuSubContent>
+			</Portal>
+		</MenuSub>
+	{:else if node.kind === "checkbox-item"}
+		{@const option = node.meta?.kind === "option" ? node.meta.option : undefined}
+		<MenuCheckboxItem
+			id={node.id}
+			checked={node.checked ?? false}
+			onCheckedChange={(checked) => node.onCheckedChange?.(checked)}
+			disabled={node.disabled}
+			closeOnSelect={node.closeOnSelect ?? false}
+		>
+			{#snippet children({ checked })}
+				<span
+					aria-hidden="true"
+					data-state={checked ? "checked" : "unchecked"}
+					{...{ [filterAttrs["menu-checkbox-indicator"]]: "" }}
+				>
+					<svg viewBox="0 0 24 24" focusable="false">
+						<path
+							d="m20 6-11 11-5-5"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</span>
+				<span>
+					{#if option?.icon}
+						<FilterIcon icon={option.icon} part="menu" />
+					{/if}
+					<FilterLabelWithBreadcrumbs
+						label={option?.label ?? node.label}
+						breadcrumbs={row.context.isDeepSearchResult ? row.context.breadcrumbs : []}
+					/>
+				</span>
+				{#if option?.count}
+					<span {...{ [filterAttrs["menu-count"]]: "" }}>
+						{new Intl.NumberFormat().format(option.count)}
+					</span>
+				{/if}
+			{/snippet}
+		</MenuCheckboxItem>
+	{:else if node.meta?.kind === "operator"}
+		{@const shortcut = node.shortcut ?? node.meta.shortcut}
+		<MenuRadioItem
+			id={node.id}
+			value={node.value ?? node.id}
+			disabled={node.disabled}
+			closeOnSelect={node.closeOnSelect ?? true}
+		>
+			<span>{node.meta.label}</span>
+			{#if shortcut}
+				<span aria-hidden="true" {...{ [filterAttrs["menu-shortcut"]]: "" }}>
+					{shortcut}
+				</span>
+			{/if}
+		</MenuRadioItem>
+	{:else}
+		<MenuItem
+			id={node.id}
+			disabled={node.disabled}
+			closeOnSelect={node.closeOnSelect ?? true}
+			onSelect={() => node.onSelect?.()}
+		>
+			{#if node.meta?.kind === "boolean" && node.meta.column.icon}
+				<FilterIcon icon={node.meta.column.icon} part="menu" />
+			{/if}
+			{#if node.meta?.kind === "text"}
+				<span>{node.meta.data.operator}</span>
+				<span>{node.meta.data.values[0]}</span>
+			{:else if node.meta?.kind === "number"}
+				<span>{node.meta.data.operator}</span>
+				<span>{numberDisplay(node.meta.data)}</span>
+			{:else}
+				<FilterLabelWithBreadcrumbs
+					label={rowLabel(row)}
+					breadcrumbs={row.context.isDeepSearchResult ? row.context.breadcrumbs : []}
+				/>
+			{/if}
+		</MenuItem>
+	{/if}
+{/if}

package/dist/bits/filter/components/filter-menu-node.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { DisplayNode } from "../../menu-data/types.js";
+import type { DataTableFilterActions, FilterStrategy, FiltersState, Locale } from "../types.js";
+import type { FilterMenuNodeMeta } from "../menu-nodes.js";
+declare class __sveltets_Render<TContext = any> {
+    props(): {
+        displayNode: DisplayNode<FilterMenuNodeMeta>;
+        actions: DataTableFilterActions<TContext>;
+        filters?: FiltersState;
+        locale?: Locale;
+        strategy?: FilterStrategy;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TContext = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TContext>['props']>, ReturnType<__sveltets_Render<TContext>['events']>, ReturnType<__sveltets_Render<TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TContext>['exports']>;
+    <TContext = any>(internal: unknown, props: ReturnType<__sveltets_Render<TContext>['props']> & {}): ReturnType<__sveltets_Render<TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FilterMenuNode: $$IsomorphicComponent;
+type FilterMenuNode<TContext = any> = InstanceType<typeof FilterMenuNode<TContext>>;
+export default FilterMenuNode;

package/dist/bits/filter/components/filter-menu.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" generics="TData = unknown, TContext = any">
+	import Root from "../../menu/components/menu.svelte";
+	import Trigger from "../../menu/components/menu-trigger.svelte";
+	import Portal from "../../utilities/portal/portal.svelte";
+	import Content from "../../dropdown-menu/components/dropdown-menu-content.svelte";
+	import DataSurface from "../../menu-data/components/data-surface.svelte";
+	import DataInput from "../../menu-data/components/data-input.svelte";
+	import DataList from "../../menu-data/components/data-list.svelte";
+	import DataEmpty from "../../menu-data/components/data-empty.svelte";
+	import type { FilterMenuProps } from "../types.js";
+	import { filterAttrs, useFilterContext } from "../filter.svelte.js";
+	import { createColumnNodes, type FilterMenuNodeMeta } from "../menu-nodes.js";
+	import FilterTrigger from "./filter-trigger.svelte";
+	import FilterMenuNode from "./filter-menu-node.svelte";
+
+	let {
+		columns: columnsProp,
+		filters: filtersProp,
+		actions: actionsProp,
+		strategy: strategyProp,
+		locale: localeProp,
+		variant: variantProp,
+		children,
+		open = $bindable(false),
+		onOpenChange,
+	}: FilterMenuProps<TData, TContext> = $props();
+
+	const context = useFilterContext<TData, TContext>();
+	const columns = $derived(columnsProp ?? context.columns);
+	const filters = $derived(filtersProp ?? context.filters);
+	const actions = $derived(actionsProp ?? context.actions);
+	const strategy = $derived(strategyProp ?? context.strategy);
+	const locale = $derived(localeProp ?? context.locale ?? "en");
+	const variant = $derived(variantProp ?? context.variant);
+	const visibleColumns = $derived(columns.filter((column) => !column.hidden));
+	const visibleFilters = $derived(
+		filters.filter((filter) => visibleColumns.some((column) => column.id === filter.columnId))
+	);
+	const nodes = $derived<ReturnType<typeof createColumnNodes>>(
+		createColumnNodes({ columns, filters, actions, locale, strategy })
+	);
+</script>
+
+<Root bind:open {onOpenChange}>
+	<Trigger>
+		{#snippet child({ props })}
+			{#if children}
+				<FilterTrigger
+					{...props}
+					hasVisibleFilters={visibleFilters.length > 0}
+					{locale}
+					{variant}
+				>
+					{@render children()}
+				</FilterTrigger>
+			{:else}
+				<FilterTrigger
+					{...props}
+					hasVisibleFilters={visibleFilters.length > 0}
+					{locale}
+					{variant}
+				/>
+			{/if}
+		{/snippet}
+	</Trigger>
+	<Portal>
+		<Content align="start" sideOffset={8} data-filter-menu-content>
+			<DataSurface content={nodes}>
+				<DataInput placeholder="Search filters..." data-filter-menu-input />
+				<DataList data-filter-menu-list>
+					{#snippet children({ nodes: displayNodes })}
+						{#each displayNodes as node, index (`filter-menu-${index}-${"kind" in node ? node.kind : node.node.id}`)}
+							<FilterMenuNode
+								displayNode={node}
+								{actions}
+								{filters}
+								{locale}
+								{strategy}
+							/>
+						{/each}
+					{/snippet}
+				</DataList>
+				<DataEmpty data-filter-menu-empty>No matching filters.</DataEmpty>
+			</DataSurface>
+		</Content>
+	</Portal>
+</Root>

package/dist/bits/filter/components/filter-menu.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { FilterMenuProps } from "../types.js";
+declare class __sveltets_Render<TData = unknown, TContext = any> {
+    props(): FilterMenuProps<TData, TContext>;
+    events(): {};
+    slots(): {};
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = unknown, TContext = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TContext>['props']>, ReturnType<__sveltets_Render<TData, TContext>['events']>, ReturnType<__sveltets_Render<TData, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    <TData = unknown, TContext = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FilterMenu: $$IsomorphicComponent;
+type FilterMenu<TData = unknown, TContext = any> = InstanceType<typeof FilterMenu<TData, TContext>>;
+export default FilterMenu;

package/dist/bits/filter/components/filter-number-editor.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" generics="TData = unknown, TContext = any">
+	import DataSurface from "../../menu-data/components/data-surface.svelte";
+	import DataInput from "../../menu-data/components/data-input.svelte";
+	import DataList from "../../menu-data/components/data-list.svelte";
+	import { dataMenuAttrs } from "../../menu-data/menu-data.svelte.js";
+	import type { Column, DataTableFilterActions, DurationUnit } from "../types.js";
+	import { createNumberFilterItems, type FilterMenuNodeMeta } from "../menu-nodes.js";
+	import { filterAttrs } from "../filter.svelte.js";
+	import FilterMenuNode from "./filter-menu-node.svelte";
+
+	let {
+		column,
+		actions,
+		baseUnit = "ms",
+	}: {
+		column: Column<TData, "number">;
+		actions: DataTableFilterActions<TContext>;
+		baseUnit?: DurationUnit;
+	} = $props();
+
+	let query = $state("");
+	const nodes = $derived(createNumberFilterItems({ query, column, actions, baseUnit }));
+	const placeholder = $derived(
+		baseUnit && baseUnit !== "ms"
+			? "Type number or duration (e.g. 1hr, 30min)..."
+			: "Type a number..."
+	);
+</script>
+
+<DataSurface content={nodes} search={query}>
+	<DataInput {placeholder} onValueChange={(value) => (query = value)} />
+	<DataList>
+		{#snippet children({ nodes: displayNodes })}
+			{#if displayNodes.length > 0}
+				{#each displayNodes as node, index (`number-${index}-${"kind" in node ? node.kind : node.node.id}`)}
+					<FilterMenuNode displayNode={node} {actions} />
+				{/each}
+			{:else if query.trim()}
+				<div {...{ [dataMenuAttrs.empty]: "", [filterAttrs["menu-empty"]]: "" }}>
+					Enter a valid number
+				</div>
+			{/if}
+		{/snippet}
+	</DataList>
+</DataSurface>

package/dist/bits/filter/components/filter-number-editor.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Column, DataTableFilterActions, DurationUnit } from "../types.js";
+declare class __sveltets_Render<TData = unknown, TContext = any> {
+    props(): {
+        column: Column<TData, "number">;
+        actions: DataTableFilterActions<TContext>;
+        baseUnit?: DurationUnit;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = unknown, TContext = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TContext>['props']>, ReturnType<__sveltets_Render<TData, TContext>['events']>, ReturnType<__sveltets_Render<TData, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    <TData = unknown, TContext = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FilterNumberEditor: $$IsomorphicComponent;
+type FilterNumberEditor<TData = unknown, TContext = any> = InstanceType<typeof FilterNumberEditor<TData, TContext>>;
+export default FilterNumberEditor;

package/dist/bits/filter/components/filter-operator.svelte

@@ -0,0 +1,107 @@
+<script
+	lang="ts"
+	generics="TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType, TContext = any"
+>
+	import { mergeProps } from "svelte-toolbelt";
+	import Root from "../../menu/components/menu.svelte";
+	import Trigger from "../../menu/components/menu-trigger.svelte";
+	import Portal from "../../utilities/portal/portal.svelte";
+	import Content from "../../dropdown-menu/components/dropdown-menu-content.svelte";
+	import DataSurface from "../../menu-data/components/data-surface.svelte";
+	import DataInput from "../../menu-data/components/data-input.svelte";
+	import DataList from "../../menu-data/components/data-list.svelte";
+	import DataEmpty from "../../menu-data/components/data-empty.svelte";
+	import type { FilterOperatorProps } from "../types.js";
+	import {
+		filterAttrs,
+		useFilterActions,
+		useFilterContext,
+		useFilterItemContext,
+	} from "../filter.svelte.js";
+	import { filterTypeOperatorDetails } from "../operators.js";
+	import { t } from "../i18n.js";
+	import { createOperatorNodes } from "../menu-nodes.js";
+	import FilterMenuNode from "./filter-menu-node.svelte";
+
+	let {
+		column: columnProp,
+		filter: filterProp,
+		actions: actionsProp,
+		locale: localeProp,
+		children,
+		child: childProp,
+		ref = $bindable(null),
+		type = "button",
+		variant,
+		...restProps
+	}: FilterOperatorProps<TData, TType, TContext> = $props();
+
+	const context = useFilterContext<TData, TContext>();
+	const itemContext = useFilterItemContext<TData, TType, TContext>();
+	const fallbackActions = useFilterActions<TContext>();
+	const column = $derived(columnProp ?? itemContext?.column);
+	const filter = $derived(filterProp ?? itemContext?.filter);
+	const actions = $derived(actionsProp ?? itemContext?.actions ?? fallbackActions);
+	const locale = $derived(localeProp ?? itemContext?.locale ?? context.locale ?? "en");
+	const resolvedVariant = $derived(variant ?? itemContext?.variant ?? context.variant);
+	const nodes = $derived(
+		column && filter && actions ? createOperatorNodes({ filter, column, actions, locale }) : []
+	);
+	const operatorLabel = $derived.by(() => {
+		if (!column || !filter) return "";
+		const details = filterTypeOperatorDetails[column.type] as Record<string, { key: string }>;
+		const operator = details[filter.operator];
+		return operator ? t(operator.key, locale) : filter.operator;
+	});
+	const triggerProps = $derived(
+		mergeProps(restProps, {
+			type,
+			"data-column-type": column?.type,
+			"data-operator": filter?.operator,
+			"data-variant": resolvedVariant,
+			[filterAttrs.operator]: "",
+		})
+	);
+</script>
+
+{#if !column || !filter || !actions}
+	{@const _error = (() => {
+		throw new Error(
+			"Filter.Operator requires column/filter/actions props or must be used within Filter.Item"
+		);
+	})()}
+{:else}
+	<Root>
+		<Trigger>
+			{#snippet child({ props })}
+				{@const delegatedProps = mergeProps(props, triggerProps)}
+				{#if childProp}
+					{@render childProp({ props: delegatedProps })}
+				{:else}
+					<button bind:this={ref} {...delegatedProps}>
+						{#if children}
+							{@render children()}
+						{:else}
+							{operatorLabel}
+						{/if}
+					</button>
+				{/if}
+			{/snippet}
+		</Trigger>
+		<Portal>
+			<Content align="start" sideOffset={8}>
+				<DataSurface content={nodes}>
+					<DataInput hideUntilActive />
+					<DataList>
+						{#snippet children({ nodes: displayNodes })}
+							{#each displayNodes as node, index (`operator-${index}-${"kind" in node ? node.kind : node.node.id}`)}
+								<FilterMenuNode displayNode={node} {actions} {locale} />
+							{/each}
+						{/snippet}
+					</DataList>
+					<DataEmpty />
+				</DataSurface>
+			</Content>
+		</Portal>
+	</Root>
+{/if}

package/dist/bits/filter/components/filter-operator.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { FilterOperatorProps } from "../types.js";
+declare class __sveltets_Render<TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType, TContext = any> {
+    props(): FilterOperatorProps<TData, TType, TContext>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType, TContext = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TType, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TType, TContext>['props']>, ReturnType<__sveltets_Render<TData, TType, TContext>['events']>, ReturnType<__sveltets_Render<TData, TType, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TType, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TType, TContext>['exports']>;
+    <TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType, TContext = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TType, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TType, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FilterOperator: $$IsomorphicComponent;
+type FilterOperator<TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType, TContext = any> = InstanceType<typeof FilterOperator<TData, TType, TContext>>;
+export default FilterOperator;