bits-ui 2.8.3 → 2.8.5

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

@@ -5,7 +5,7 @@ import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { computeCommandScore } from "./index.js";
-import cssesc from "css.escape";
+import { cssEscape } from "../../internal/css-escape.js";
 const COMMAND_VALUE_ATTR = "data-value";
 const commandAttrs = createBitsAttrs({
     component: "command",
@@ -182,7 +182,7 @@ export class CommandRootState {
         }
         const sortedGroups = groups.sort((a, b) => b[1] - a[1]);
         for (const group of sortedGroups) {
-            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(group[0])}"]`);
+            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssEscape(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
         this.#selectFirstItem();
@@ -340,6 +340,8 @@ export class CommandRootState {
                 return;
             if (this.isGrid) {
                 const isFirstRowOfGroup = this.#itemIsFirstRowOfGroup(item);
+                // ensure item is visible
+                item.scrollIntoView({ block: "nearest" });
                 if (isFirstRowOfGroup) {
                     const closestGroupHeader = item
                         ?.closest(COMMAND_GROUP_SELECTOR)
@@ -1056,7 +1058,7 @@ export class CommandInputState {
     root;
     attachment;
     #selectedItemId = $derived.by(() => {
-        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(this.root.opts.value.current)}"]`);
+        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssEscape(this.root.opts.value.current)}"]`);
         if (item === undefined || item === null)
             return;
         return item.getAttribute("id") ?? undefined;

package/dist/internal/css-escape.d.ts

@@ -0,0 +1,7 @@
+/**
+ * https://github.com/mathiasbynens/CSS.escape
+ *
+ * @param value - The value to escape for use as a CSS identifier
+ * @returns The escaped CSS identifier string
+ */
+export declare function cssEscape(value: string): string;

package/dist/internal/css-escape.js

@@ -0,0 +1,59 @@
+/**
+ * https://github.com/mathiasbynens/CSS.escape
+ *
+ * @param value - The value to escape for use as a CSS identifier
+ * @returns The escaped CSS identifier string
+ */
+export function cssEscape(value) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+    }
+    const length = value.length;
+    let index = -1;
+    let codeUnit;
+    let result = "";
+    const firstCodeUnit = value.charCodeAt(0);
+    // If the character is the first character and is a `-` (U+002D), and
+    // there is no second character, escape it
+    if (length === 1 && firstCodeUnit === 0x002d)
+        return "\\" + value;
+    while (++index < length) {
+        codeUnit = value.charCodeAt(index);
+        // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD)
+        if (codeUnit === 0x0000) {
+            result += "\uFFFD";
+            continue;
+        }
+        if (
+        // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is U+007F
+        (codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
+            codeUnit === 0x007f ||
+            // If the character is the first character and is in the range [0-9] (U+0030 to U+0039)
+            (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            // If the character is the second character and is in the range [0-9] (U+0030 to U+0039)
+            // and the first character is a `-` (U+002D)
+            (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)) {
+            // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+            result += "\\" + codeUnit.toString(16) + " ";
+            continue;
+        }
+        // If the character is not handled by one of the above rules and is
+        // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+        // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to U+005A),
+        // or [a-z] (U+0061 to U+007A)
+        if (codeUnit >= 0x0080 ||
+            codeUnit === 0x002d ||
+            codeUnit === 0x005f ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a)) {
+            // Use the character itself
+            result += value.charAt(index);
+            continue;
+        }
+        // Otherwise, escape the character
+        // https://drafts.csswg.org/cssom/#escape-a-character
+        result += "\\" + value.charAt(index);
+    }
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -23,7 +23,6 @@
     "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
-    "@types/css.escape": "^1.5.2",
     "@types/node": "^20.17.6",
     "@types/resize-observer-browser": "^0.1.11",
     "csstype": "^3.1.3",
@@ -41,7 +40,6 @@
   "dependencies": {
     "@floating-ui/core": "^1.7.1",
     "@floating-ui/dom": "^1.7.1",
-    "css.escape": "^1.5.1",
     "esm-env": "^1.1.2",
     "runed": "^0.28.0",
     "svelte-toolbelt": "^0.9.2",