bits-ui 1.3.14 → 1.3.16

package/README.md

@@ -5,17 +5,22 @@
 [![npm version](https://flat.badgen.net/npm/v/bits-ui?color=pink)](https://npmjs.com/package/bits-ui)
 [![npm downloads](https://flat.badgen.net/npm/dm/bits-ui?color=pink)](https://npmjs.com/package/bits-ui)
 [![license](https://flat.badgen.net/github/license/huntabyte/bits-ui?color=pink)](https://github.com/huntabyte/bits-ui/blob/main/LICENSE)
+[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)
 
-<!-- /automd -->
+<img style="max-width: 100%" alt="hero" src="https://github.com/user-attachments/assets/19cac792-6a93-4289-b9c7-647794a7de79" />
+
+**Bits UI** – the headless components for Svelte.
 
-The headless components for Svelte.
+Flexible, unstyled, and accessible primitives that provide the foundation for building your own high-quality component library.
 
-[Read the docs](https://bits-ui.com)
+## Documentation
+
+Visit https://bits-ui.com/docs to view the documentation.
 
 ## Credits
 
 -   [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
--   [Melt UI](https://melt-ui.com) - The underlying builder API that powers Bits.
+-   [Melt UI](https://melt-ui.com) - A powerful builder API that inspired the internal architecture of Bits UI.
 -   [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
 -   [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.
 
@@ -41,3 +46,14 @@ Built by [@huntabyte](https://github.com/huntabyte) and [community](https://gith
 </a>
 
 <!-- /automd -->
+
+## Community
+
+Join the Discord server to ask questions, find collaborators, or just say hi!
+
+<a href="https://discord.gg/fdXy3Sk8Gq" alt="Svecosystem Discord community">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/fdXy3Sk8Gq">
+  <img alt="Svecosystem Discord community" src="https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light">
+</picture>
+</a>

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

@@ -14,6 +14,8 @@ type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
 declare class CommandRootState {
     #private;
     readonly opts: CommandRootStateProps;
+    sortAfterTick: boolean;
+    sortAndFilterAfterTick: boolean;
     allItems: Set<string>;
     allGroups: Map<string, Set<string>>;
     allIds: Map<string, {

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

@@ -32,6 +32,8 @@ const CommandGroupContainerContext = new Context("Command.Group");
 class CommandRootState {
     opts;
     #updateScheduled = false;
+    sortAfterTick = false;
+    sortAndFilterAfterTick = false;
     allItems = new Set();
     allGroups = new Map();
     allIds = new Map();
@@ -401,7 +403,14 @@ class CommandRootState {
             return noop;
         this.allIds.set(id, { value, keywords });
         this._commandState.filtered.items.set(id, this.#score(value, keywords));
-        this.#sort();
+        // Schedule sorting to run after this tick when all items are added not each time an item is added
+        if (!this.sortAfterTick) {
+            this.sortAfterTick = true;
+            afterTick(() => {
+                this.#sort();
+                this.sortAfterTick = false;
+            });
+        }
         return () => {
             this.allIds.delete(id);
         };
@@ -425,8 +434,15 @@ class CommandRootState {
                 this.allGroups.get(groupId).add(id);
             }
         }
-        this.#filterItems();
-        this.#sort();
+        // Schedule sorting and filtering to run after this tick when all items are added not each time an item is added
+        if (!this.sortAndFilterAfterTick) {
+            this.sortAndFilterAfterTick = true;
+            afterTick(() => {
+                this.#filterItems();
+                this.#sort();
+                this.sortAndFilterAfterTick = false;
+            });
+        }
         this.#scheduleUpdate();
         return () => {
             const selectedItem = this.#getSelectedItem();

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

@@ -423,6 +423,7 @@ class SelectTriggerState {
                 this.root.opts.value.current = matchedItem.value;
             },
             enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
+            candidateValues: () => (this.root.isMulti ? [] : this.root.candidateLabels),
         });
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -437,6 +438,29 @@ class SelectTriggerState {
     #handlePointerOpen(_) {
         this.#handleOpen();
     }
+    /**
+     * Logic used to handle keyboard selection/deselection.
+     *
+     * If it returns true, it means the item was selected and whatever is calling
+     * this function should return early
+     *
+     */
+    #handleKeyboardSelection() {
+        const isCurrentSelectedValue = this.root.highlightedValue === this.root.opts.value.current;
+        if (!this.root.opts.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+            this.root.handleClose();
+            return true;
+        }
+        // "" is a valid value for a select item so we need to check for that
+        if (this.root.highlightedValue !== null) {
+            this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
+        }
+        if (!this.root.isMulti && !isCurrentSelectedValue) {
+            this.root.handleClose();
+            return true;
+        }
+        return false;
+    }
     onkeydown(e) {
         this.root.isUsingKeyboard = true;
         if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN)
@@ -450,7 +474,7 @@ class SelectTriggerState {
                 this.root.handleOpen();
             }
             else if (!this.root.isMulti && this.root.dataTypeaheadEnabled) {
-                this.#dataTypeahead.handleTypeaheadSearch(e.key, this.root.candidateLabels);
+                this.#dataTypeahead.handleTypeaheadSearch(e.key);
                 return;
             }
             // we need to wait for a tick after the menu opens to ensure
@@ -474,23 +498,16 @@ class SelectTriggerState {
             this.root.handleClose();
             return;
         }
-        if ((e.key === kbd.ENTER || e.key === kbd.SPACE) && !e.isComposing) {
+        if ((e.key === kbd.ENTER ||
+            // if we're currently "typing ahead", we don't want to select the item
+            // just yet as the item the user is trying to get to may have a space in it,
+            // so we defer handling the close for this case until further down
+            (e.key === kbd.SPACE && this.#domTypeahead.search.current === "")) &&
+            !e.isComposing) {
             e.preventDefault();
-            const isCurrentSelectedValue = this.root.highlightedValue === this.root.opts.value.current;
-            if (!this.root.opts.allowDeselect.current &&
-                isCurrentSelectedValue &&
-                !this.root.isMulti) {
-                this.root.handleClose();
-                return;
-            }
-            //"" is a valid value for a select item so we need to check for that
-            if (this.root.highlightedValue !== null) {
-                this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
-            }
-            if (!this.root.isMulti && !isCurrentSelectedValue) {
-                this.root.handleClose();
+            const shouldReturn = this.#handleKeyboardSelection();
+            if (shouldReturn)
                 return;
-            }
         }
         if (e.key === kbd.ARROW_UP && e.altKey) {
             this.root.handleClose();
@@ -529,14 +546,16 @@ class SelectTriggerState {
         }
         const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
         const isCharacterKey = e.key.length === 1;
-        // prevent space from being considered with typeahead
-        if (e.code === "Space")
-            return;
+        const isSpaceKey = e.key === kbd.SPACE;
         const candidateNodes = this.root.getCandidateNodes();
         if (e.key === kbd.TAB)
             return;
-        if (!isModifierKey && isCharacterKey) {
-            this.#domTypeahead.handleTypeaheadSearch(e.key, candidateNodes);
+        if (!isModifierKey && (isCharacterKey || isSpaceKey)) {
+            const matchedNode = this.#domTypeahead.handleTypeaheadSearch(e.key, candidateNodes);
+            if (!matchedNode && isSpaceKey) {
+                e.preventDefault();
+                this.#handleKeyboardSelection();
+            }
             return;
         }
         if (!this.root.highlightedNode) {

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

@@ -18,6 +18,8 @@ declare class SliderBaseRootState {
     direction: "rl" | "lr" | "tb" | "bt";
     constructor(opts: SliderBaseRootStateProps);
     getAllThumbs: () => HTMLElement[];
+    getThumbScale: () => [number, number];
+    getPositionFromValue: (thumbValue: number) => number;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -46,7 +48,6 @@ declare class SliderSingleRootState extends SliderBaseRootState {
     handlePointerMove: (e: PointerEvent) => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    getPositionFromValue: (thumbValue: number) => number;
     thumbsPropsArr: {
         readonly role: "slider";
         readonly "aria-valuemin": number;
@@ -98,7 +99,6 @@ declare class SliderMultiRootState extends SliderBaseRootState {
     handlePointerMove: (e: PointerEvent) => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    getPositionFromValue: (thumbValue: number) => number;
     getAllThumbs: () => HTMLElement[];
     updateValue: (thumbValue: number, idx: number) => void;
     thumbsPropsArr: {

package/dist/bits/slider/slider.svelte.js

@@ -11,7 +11,7 @@ import { getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientatio
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
-import { snapValueToStep } from "../../internal/math.js";
+import { linearScale, snapValueToStep } from "../../internal/math.js";
 const SLIDER_ROOT_ATTR = "data-slider-root";
 const SLIDER_THUMB_ATTR = "data-slider-thumb";
 const SLIDER_RANGE_ATTR = "data-slider-range";
@@ -42,6 +42,32 @@ class SliderBaseRootState {
             return [];
         return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
     };
+    getThumbScale = () => {
+        const isVertical = this.opts.orientation.current === "vertical";
+        // this assumes all thumbs are the same width
+        const activeThumb = this.getAllThumbs()[0];
+        const thumbSize = isVertical ? activeThumb?.offsetHeight : activeThumb?.offsetWidth;
+        // if thumb size is undefined or 0, fallback to a 0-100 scale
+        if (thumbSize === undefined || Number.isNaN(thumbSize) || thumbSize === 0)
+            return [0, 100];
+        const trackSize = isVertical
+            ? this.opts.ref.current?.offsetHeight
+            : this.opts.ref.current?.offsetWidth;
+        // if track size is undefined or 0, fallback to a 0-100 scale
+        if (trackSize === undefined || Number.isNaN(trackSize) || trackSize === 0)
+            return [0, 100];
+        // the padding on either side
+        // half the width of the thumb
+        const percentPadding = (thumbSize / 2 / trackSize) * 100;
+        const min = percentPadding;
+        const max = 100 - percentPadding;
+        return [min, max];
+    };
+    getPositionFromValue = (thumbValue) => {
+        const thumbScale = this.getThumbScale();
+        const scale = linearScale([this.opts.min.current, this.opts.max.current], thumbScale);
+        return scale(thumbValue);
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
@@ -169,16 +195,11 @@ class SliderSingleRootState extends SliderBaseRootState {
         }
         this.isActive = false;
     };
-    getPositionFromValue = (thumbValue) => {
-        const min = this.opts.min.current;
-        const max = this.opts.max.current;
-        return ((thumbValue - min) / (max - min)) * 100;
-    };
     thumbsPropsArr = $derived.by(() => {
         const currValue = this.opts.value.current;
         return Array.from({ length: 1 }, () => {
             const thumbValue = currValue;
-            const thumbPosition = this.getPositionFromValue(thumbValue ?? 0);
+            const thumbPosition = this.getPositionFromValue(thumbValue);
             const style = getThumbStyles(this.direction, thumbPosition);
             return {
                 role: "slider",
@@ -209,10 +230,11 @@ class SliderSingleRootState extends SliderBaseRootState {
         const currValue = this.opts.value.current;
         return Array.from({ length: count }, (_, i) => {
             const tickPosition = i * (step / difference) * 100;
+            const scale = linearScale([this.opts.min.current, this.opts.max.current], this.getThumbScale());
             const isFirst = i === 0;
             const isLast = i === count - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
-            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+            const style = getTickStyles(this.direction, scale(tickPosition), offsetPercentage);
             const tickValue = min + i * step;
             const bounded = tickValue <= currValue;
             return {
@@ -379,11 +401,6 @@ class SliderMultiRootState extends SliderBaseRootState {
         }
         this.isActive = false;
     };
-    getPositionFromValue = (thumbValue) => {
-        const min = this.opts.min.current;
-        const max = this.opts.max.current;
-        return ((thumbValue - min) / (max - min)) * 100;
-    };
     getAllThumbs = () => {
         const node = this.opts.ref.current;
         if (!node)

package/dist/internal/arrays.d.ts

@@ -66,21 +66,26 @@ export declare function forward<T>(array: T[], index: number, increment: number,
  */
 export declare function backward<T>(array: T[], index: number, decrement: number, loop?: boolean): T | undefined;
 /**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
+ * Finds the next matching item from a list of values based on a search string.
  *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
+ * This function handles several special cases in typeahead behavior:
  *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
+ * 1. Space handling: When a search string ends with a space, it handles it specially:
+ *    - If there's only one match for the text before the space, it ignores the space
+ *    - If there are multiple matches and the current match already starts with the search prefix
+ *      followed by a space, it keeps the current match (doesn't change selection on space)
+ *    - Only after typing characters beyond the space will it move to a more specific match
  *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
+ * 2. Repeated character handling: If a search consists of repeated characters (e.g., "aaa"),
+ *    it treats it as a single character for matching purposes
+ *
+ * 3. Cycling behavior: The function wraps around the values array starting from the current match
+ *    to find the next appropriate match, creating a cycling selection behavior
+ *
+ * @param values - Array of string values to search through (e.g., the text content of menu items)
+ * @param search - The current search string typed by the user
+ * @param currentMatch - The currently selected/matched item, if any
+ * @returns The next matching value that should be selected, or undefined if no match is found
  */
 export declare function getNextMatch(values: string[], search: string, currentMatch?: string): string | undefined;
 /**

package/dist/internal/arrays.js

@@ -169,31 +169,76 @@ export function backward(array, index, decrement, loop = true) {
     return array[targetIndex];
 }
 /**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
+ * Finds the next matching item from a list of values based on a search string.
  *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
+ * This function handles several special cases in typeahead behavior:
  *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
+ * 1. Space handling: When a search string ends with a space, it handles it specially:
+ *    - If there's only one match for the text before the space, it ignores the space
+ *    - If there are multiple matches and the current match already starts with the search prefix
+ *      followed by a space, it keeps the current match (doesn't change selection on space)
+ *    - Only after typing characters beyond the space will it move to a more specific match
  *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
+ * 2. Repeated character handling: If a search consists of repeated characters (e.g., "aaa"),
+ *    it treats it as a single character for matching purposes
+ *
+ * 3. Cycling behavior: The function wraps around the values array starting from the current match
+ *    to find the next appropriate match, creating a cycling selection behavior
+ *
+ * @param values - Array of string values to search through (e.g., the text content of menu items)
+ * @param search - The current search string typed by the user
+ * @param currentMatch - The currently selected/matched item, if any
+ * @returns The next matching value that should be selected, or undefined if no match is found
  */
 export function getNextMatch(values, search, currentMatch) {
+    const lowerSearch = search.toLowerCase();
+    if (lowerSearch.endsWith(" ")) {
+        const searchWithoutSpace = lowerSearch.slice(0, -1);
+        const matchesWithoutSpace = values.filter((value) => value.toLowerCase().startsWith(searchWithoutSpace));
+        /**
+         * If there's only one match for the prefix without space, we don't
+         * watch to match with space.
+         */
+        if (matchesWithoutSpace.length <= 1) {
+            return getNextMatch(values, searchWithoutSpace, currentMatch);
+        }
+        const currentMatchLowercase = currentMatch?.toLowerCase();
+        /**
+         * If the current match already starts with the search prefix and has a space afterward,
+         * and the user has only typed up to that space, keep the current match until they
+         * disambiguate.
+         */
+        if (currentMatchLowercase &&
+            currentMatchLowercase.startsWith(searchWithoutSpace) &&
+            currentMatchLowercase.charAt(searchWithoutSpace.length) === " " &&
+            search.trim() === searchWithoutSpace) {
+            return currentMatch;
+        }
+        /**
+         * With multiple matches, find items that match the full search string with space
+         */
+        const spacedMatches = values.filter((value) => value.toLowerCase().startsWith(lowerSearch));
+        /**
+         * If we found matches with the space, use the first one that's not the current match
+         */
+        if (spacedMatches.length > 0) {
+            const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+            let wrappedMatches = wrapArray(spacedMatches, Math.max(currentMatchIndex, 0));
+            // return the first match that is not the current one.
+            const nextMatch = wrappedMatches.find((match) => match !== currentMatch);
+            // fallback to current if no other is found.
+            return nextMatch || currentMatch;
+        }
+    }
     const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
     const normalizedSearch = isRepeated ? search[0] : search;
+    const normalizedLowerSearch = normalizedSearch.toLowerCase();
     const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
     let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
     const excludeCurrentMatch = normalizedSearch.length === 1;
     if (excludeCurrentMatch)
         wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
-    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedLowerSearch));
     return nextMatch !== currentMatch ? nextMatch : undefined;
 }
 /**

package/dist/internal/math.d.ts

@@ -2,3 +2,4 @@
  * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
  */
 export declare function snapValueToStep(value: number, min: number, max: number, step: number): number;
+export declare function linearScale(domain: [number, number], range: [number, number], clamp?: boolean): (x: number) => number;

package/dist/internal/math.js

@@ -26,3 +26,18 @@ export function snapValueToStep(value, min, max, step) {
     }
     return snappedValue;
 }
+export function linearScale(domain, range, clamp = true) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const slope = (r1 - r0) / (d1 - d0);
+    return (x) => {
+        const result = r0 + slope * (x - d0);
+        if (!clamp)
+            return result;
+        if (result > Math.max(r0, r1))
+            return Math.max(r0, r1);
+        if (result < Math.min(r0, r1))
+            return Math.min(r0, r1);
+        return result;
+    };
+}

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -1,12 +1,14 @@
+import type { Getter } from "svelte-toolbelt";
 export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
 type UseDataTypeaheadOpts = {
     onMatch: (value: string) => void;
     getCurrentItem: () => string;
+    candidateValues: Getter<string[]>;
     enabled: boolean;
 };
 export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
     search: import("svelte-toolbelt").WritableBox<string>;
-    handleTypeaheadSearch: (key: string, candidateValues: string[]) => string | undefined;
+    handleTypeaheadSearch: (key: string) => string | undefined;
     resetTypeahead: () => void;
 };
 export {};

package/dist/internal/use-data-typeahead.svelte.js

@@ -3,7 +3,8 @@ import { boxAutoReset } from "./box-auto-reset.svelte.js";
 export function useDataTypeahead(opts) {
     // Reset `search` 1 second after it was last updated
     const search = boxAutoReset("", 1000);
-    function handleTypeaheadSearch(key, candidateValues) {
+    const candidateValues = $derived(opts.candidateValues());
+    function handleTypeaheadSearch(key) {
         if (!opts.enabled)
             return;
         if (!candidateValues.length)

package/dist/internal/use-dom-typeahead.svelte.js

@@ -10,10 +10,10 @@ export function useDOMTypeahead(opts) {
             return;
         search.current = search.current + key;
         const currentItem = getCurrentItem();
-        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
-        const values = candidates.map((item) => item.textContent?.trim() ?? "");
+        const currentMatch = candidates.find((item) => item === currentItem)?.textContent ?? "";
+        const values = candidates.map((item) => item.textContent ?? "");
         const nextMatch = getNextMatch(values, search.current, currentMatch);
-        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+        const newItem = candidates.find((item) => item.textContent === nextMatch);
         if (newItem) {
             onMatch(newItem);
         }

package/package.json

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