bits-ui 1.0.0-next.28 → 1.0.0-next.29

package/dist/bits/combobox/components/combobox.svelte

@@ -20,6 +20,7 @@
 		controlledOpen = false,
 		controlledValue = false,
 		items = [],
+		allowDeselect = true,
 		children,
 	}: ComboboxRootProps = $props();
 
@@ -63,6 +64,7 @@
 		name: box.with(() => name),
 		isCombobox: true,
 		items: box.with(() => items),
+		allowDeselect: box.with(() => allowDeselect),
 	});
 </script>
 

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

@@ -20,6 +20,7 @@
 		controlledOpen = false,
 		controlledValue = false,
 		items = [],
+		allowDeselect = true,
 		children,
 	}: SelectRootProps = $props();
 
@@ -63,6 +64,7 @@
 		name: box.with(() => name),
 		isCombobox: false,
 		items: box.with(() => items),
+		allowDeselect: box.with(() => allowDeselect),
 	});
 </script>
 

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

@@ -18,6 +18,7 @@ type SelectBaseRootStateProps = ReadableBoxedValues<{
         label: string;
         disabled?: boolean;
     }[];
+    allowDeselect: boolean;
 }> & WritableBoxedValues<{
     open: boolean;
 }> & {
@@ -31,6 +32,7 @@ declare class SelectBaseRootState {
     open: SelectBaseRootStateProps["open"];
     scrollAlignment: SelectBaseRootStateProps["scrollAlignment"];
     items: SelectBaseRootStateProps["items"];
+    allowDeselect: SelectBaseRootStateProps["allowDeselect"];
     touchedInput: boolean;
     inputValue: string;
     inputNode: HTMLElement | null;
@@ -404,6 +406,7 @@ type InitSelectProps = {
         label: string;
         disabled?: boolean;
     }[];
+    allowDeselect: boolean;
 }> & WritableBoxedValues<{
     open: boolean;
 }> & {

package/dist/bits/select/select.svelte.js

@@ -24,6 +24,7 @@ class SelectBaseRootState {
     open;
     scrollAlignment;
     items;
+    allowDeselect;
     touchedInput = $state(false);
     inputValue = $state("");
     inputNode = $state(null);
@@ -59,6 +60,7 @@ class SelectBaseRootState {
         this.scrollAlignment = props.scrollAlignment;
         this.isCombobox = props.isCombobox;
         this.items = props.items;
+        this.allowDeselect = props.allowDeselect;
         this.bitsAttrs = getSelectBitsAttrs(this);
         $effect.pre(() => {
             if (!this.open.current) {
@@ -277,10 +279,15 @@ class SelectInputState {
         if (e.key === kbd.ENTER && !e.isComposing) {
             e.preventDefault();
             const highlightedValue = this.root.highlightedValue;
+            const isCurrentSelectedValue = highlightedValue === this.root.value.current;
+            if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+                this.root.handleClose();
+                return;
+            }
             if (highlightedValue) {
                 this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
             }
-            if (!this.root.isMulti) {
+            if (!this.root.isMulti && !isCurrentSelectedValue) {
                 this.root.handleClose();
             }
         }
@@ -328,7 +335,9 @@ class SelectInputState {
     };
     #oninput = (e) => {
         this.root.inputValue = e.currentTarget.value;
-        this.root.setHighlightedToFirstCandidate();
+        afterTick(() => {
+            this.root.setHighlightedToFirstCandidate();
+        });
     };
     props = $derived.by(() => ({
         id: this.#id.current,
@@ -474,10 +483,15 @@ class SelectTriggerState {
         if ((e.key === kbd.ENTER || e.key === kbd.SPACE) && !e.isComposing) {
             e.preventDefault();
             const highlightedValue = this.root.highlightedValue;
+            const isCurrentSelectedValue = highlightedValue === this.root.value.current;
+            if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+                this.root.handleClose();
+                return;
+            }
             if (highlightedValue) {
                 this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
             }
-            if (!this.root.isMulti) {
+            if (!this.root.isMulti && !isCurrentSelectedValue) {
                 this.root.handleClose();
             }
         }
@@ -730,6 +744,13 @@ class SelectItemState {
         if (this.disabled.current)
             return;
         const isCurrentSelectedValue = this.value.current === this.root.value.current;
+        // if allowDeselect is false and the item is already selected and we're not in a
+        // multi select, do nothing and close the menu
+        if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+            this.root.handleClose();
+            return;
+        }
+        // otherwise, toggle the item and if we're not in a multi select, close the menu
         this.root.toggleItem(this.value.current, this.label.current);
         if (!this.root.isMulti && !isCurrentSelectedValue) {
             this.root.handleClose();

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

@@ -84,6 +84,11 @@ export type SelectBaseRootPropsWithoutHTML = WithChildren<{
         label: string;
         disabled?: boolean;
     }[];
+    /**
+     * Whether to allow the user to deselect an item by clicking on an already selected item.
+     * This is only applicable to `type="single"` selects/comboboxes.
+     */
+    allowDeselect?: boolean;
 }>;
 export type SelectSingleRootPropsWithoutHTML = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.28",
+  "version": "1.0.0-next.29",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",