bits-ui 1.0.0-next.17 → 1.0.0-next.19

package/dist/bits/select/components/select-trigger.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectTriggerProps } from "../types.js";
 	import { useSelectTrigger } from "../select.svelte.js";
+	import type { SelectTriggerProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
-	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
+	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
 	let {
 		id = useId(),
-		disabled = false,
 		ref = $bindable(null),
-		children,
 		child,
+		children,
 		...restProps
 	}: SelectTriggerProps = $props();
 
 	const triggerState = useSelectTrigger({
 		id: box.with(() => id),
-		disabled: box.with(() => disabled ?? false),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
@@ -26,7 +24,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayer.Anchor {id}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
@@ -34,4 +32,4 @@
 			{@render children?.()}
 		</button>
 	{/if}
-</FloatingLayerAnchor>
+</FloatingLayer.Anchor>

package/dist/bits/select/components/select-viewport.svelte

@@ -38,6 +38,16 @@
 		-ms-overflow-style: none !important;
 		-webkit-overflow-scrolling: touch !important;
 	}
+
+	:global([data-combobox-viewport]) {
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		-webkit-overflow-scrolling: touch !important;
+	}
+
+	:global([data-combobox-viewport])::-webkit-scrollbar {
+		display: none !important;
+	}
 	:global([data-select-viewport])::-webkit-scrollbar {
 		display: none !important;
 	}

package/dist/bits/select/components/select.svelte

@@ -1,28 +1,52 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { SelectRootProps } from "../types.js";
+	import { type WritableBox, box } from "svelte-toolbelt";
 	import { useSelectRoot } from "../select.svelte.js";
-	import SelectNative from "./select-native.svelte";
-	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import type { SelectRootProps } from "../types.js";
+	import SelectHiddenInput from "./select-hidden-input.svelte";
 	import { noop } from "../../../internal/noop.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 
 	let {
+		value = $bindable(),
+		onValueChange = noop,
+		name = "",
+		disabled = false,
+		type,
 		open = $bindable(false),
-		value = $bindable(""),
-		children,
 		onOpenChange = noop,
-		onValueChange = noop,
-		name = undefined,
+		loop = false,
+		scrollAlignment = "nearest",
 		required = false,
-		disabled = false,
-		autocomplete = undefined,
-		dir = "ltr",
 		controlledOpen = false,
 		controlledValue = false,
-		form,
+		items = [],
+		children,
 	}: SelectRootProps = $props();
 
+	if (value === undefined) {
+		const defaultValue = type === "single" ? "" : [];
+		if (controlledValue) {
+			onValueChange(defaultValue as any);
+		} else {
+			value = defaultValue;
+		}
+	}
+
 	const rootState = useSelectRoot({
+		type,
+		value: box.with(
+			() => value!,
+			(v) => {
+				if (controlledValue) {
+					onValueChange(v as any);
+				} else {
+					value = v;
+					onValueChange(v as any);
+				}
+			}
+		) as WritableBox<string> | WritableBox<string[]>,
+		disabled: box.with(() => disabled),
+		required: box.with(() => required),
 		open: box.with(
 			() => open,
 			(v) => {
@@ -30,56 +54,30 @@
 					onOpenChange(v);
 				} else {
 					open = v;
-					onOpenChange?.(v);
-				}
-			}
-		),
-		value: box.with(
-			() => value,
-			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange?.(v);
+					onOpenChange(v);
 				}
 			}
 		),
-		required: box.with(() => required),
-		disabled: box.with(() => disabled),
-		dir: box.with(() => dir),
+		loop: box.with(() => loop),
+		scrollAlignment: box.with(() => scrollAlignment),
+		name: box.with(() => name),
+		isCombobox: false,
+		items: box.with(() => items),
 	});
 </script>
 
 <FloatingLayer>
 	{@render children?.()}
-	{#if rootState.isFormControl.current}
-		{#key rootState.nativeSelectKey}
-			<SelectNative
-				bind:value
-				aria-hidden="true"
-				tabindex={-1}
-				{required}
-				{name}
-				{autocomplete}
-				{disabled}
-				{form}
-				onchange={(e) => (value = e.currentTarget.value)}
-			>
-				{#if value === ""}
-					<option value=""></option>
-				{/if}
-				{#each rootState.nativeOptionsArr as opt, idx (opt.current.key + idx)}
-					<option
-						value={opt.current.value}
-						disabled={opt.current.disabled}
-						selected={opt.current.value === rootState.value.current}
-					>
-						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-						{@html opt.current.innerHTML}
-					</option>
-				{/each}
-			</SelectNative>
-		{/key}
-	{/if}
 </FloatingLayer>
+
+{#if Array.isArray(rootState.value.current)}
+	{#if rootState.value.current.length === 0}
+		<SelectHiddenInput value="" />
+	{:else}
+		{#each rootState.value.current as item}
+			<SelectHiddenInput value={item} />
+		{/each}
+	{/if}
+{:else}
+	<SelectHiddenInput bind:value={rootState.value.current as string} />
+{/if}

package/dist/bits/select/exports.d.ts

@@ -1,15 +1,12 @@
 export { default as Root } from "./components/select.svelte";
-export { default as Arrow } from "./components/select-arrow.svelte";
 export { default as Content } from "./components/select-content.svelte";
+export { default as ContentStatic } from "./components/select-content-static.svelte";
+export { default as Item } from "./components/select-item.svelte";
 export { default as Group } from "./components/select-group.svelte";
 export { default as GroupHeading } from "./components/select-group-heading.svelte";
-export { default as Item } from "./components/select-item.svelte";
-export { default as ItemText } from "./components/select-item-text.svelte";
-export { default as Separator } from "./components/select-separator.svelte";
 export { default as Trigger } from "./components/select-trigger.svelte";
-export { default as Value } from "./components/select-value.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
 export { default as Viewport } from "./components/select-viewport.svelte";
 export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte";
 export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { SelectRootProps as RootProps, SelectContentProps as ContentProps, SelectItemProps as ItemProps, SelectTriggerProps as TriggerProps, SelectValueProps as ValueProps, SelectItemTextProps as ItemTextProps, SelectContentImplProps as ContentImplProps, SelectViewportProps as ViewportProps, SelectPortalProps as PortalProps, SelectScrollUpButtonProps as ScrollDownButtonProps, SelectScrollUpButtonProps as ScrollUpButtonProps, SelectIconProps as IconProps, SelectGroupProps as GroupProps, SelectGroupHeadingProps as GroupHeadingProps, SelectSeparatorProps as SeparatorProps, SelectArrowProps as ArrowProps, } from "./types.js";
+export type { SelectRootProps as RootProps, SelectContentProps as ContentProps, SelectContentStaticProps as ContentStaticProps, SelectItemProps as ItemProps, SelectGroupProps as GroupProps, SelectGroupHeadingProps as GroupHeadingProps, SelectTriggerProps as TriggerProps, SelectViewportProps as ViewportProps, SelectScrollUpButtonProps as ScrollUpButtonProps, SelectScrollDownButtonProps as ScrollDownButtonProps, SelectPortalProps as PortalProps, } from "./types.js";

package/dist/bits/select/exports.js

@@ -1,14 +1,11 @@
 export { default as Root } from "./components/select.svelte";
-export { default as Arrow } from "./components/select-arrow.svelte";
 export { default as Content } from "./components/select-content.svelte";
+export { default as ContentStatic } from "./components/select-content-static.svelte";
+export { default as Item } from "./components/select-item.svelte";
 export { default as Group } from "./components/select-group.svelte";
 export { default as GroupHeading } from "./components/select-group-heading.svelte";
-export { default as Item } from "./components/select-item.svelte";
-export { default as ItemText } from "./components/select-item-text.svelte";
-export { default as Separator } from "./components/select-separator.svelte";
 export { default as Trigger } from "./components/select-trigger.svelte";
-export { default as Value } from "./components/select-value.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
 export { default as Viewport } from "./components/select-viewport.svelte";
 export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte";
 export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";