bits-ui 1.0.0-next.27 → 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/command/command.svelte.d.ts

@@ -153,9 +153,8 @@ declare class CommandItemState {
         readonly "data-selected": "" | undefined;
         readonly "data-command-item": "";
         readonly role: "option";
-        readonly onpointerdown: (e: PointerEvent) => void;
         readonly onpointermove: () => void;
-        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onclick: () => void;
     };
 }
 type CommandLoadingStateProps = WithRefProps<ReadableBoxedValues<{

package/dist/bits/command/command.svelte.js

@@ -236,7 +236,7 @@ class CommandRootState {
             if (!grandparent)
                 return;
             const firstChildOfParent = getFirstNonCommentChild(grandparent);
-            if (firstChildOfParent && firstChildOfParent.dataset.value === item.dataset.value) {
+            if (firstChildOfParent && firstChildOfParent.dataset?.value === item.dataset?.value) {
                 item
                     ?.closest(GROUP_SELECTOR)
                     ?.querySelector(GROUP_HEADING_SELECTOR)
@@ -696,21 +696,11 @@ class CommandItemState {
             return;
         this.#select();
     };
-    #onpointerdown = (e) => {
+    #onclick = () => {
         if (this.#disabled.current)
             return;
-        if (e.pointerType === "touch" || e.button !== 0)
-            return e.preventDefault();
         this.#onSelect();
     };
-    #onpointerup = (e) => {
-        if (this.#disabled.current)
-            return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.#onSelect();
-        }
-    };
     props = $derived.by(() => ({
         id: this.id.current,
         "aria-disabled": getAriaDisabled(this.#disabled.current),
@@ -719,9 +709,8 @@ class CommandItemState {
         "data-selected": getDataSelected(this.isSelected),
         [ITEM_ATTR]: "",
         role: "option",
-        onpointerdown: this.#onpointerdown,
         onpointermove: this.#onpointermove,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
     }));
 }
 class CommandLoadingState {

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.27",
+  "version": "1.0.0-next.29",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",