bits-ui 2.3.0 → 2.4.0

package/dist/internal/attrs.js

@@ -67,3 +67,21 @@ export function getAriaPressed(condition) {
 export function getRequired(condition) {
     return condition ? true : undefined;
 }
+export function createBitsAttrs(config) {
+    const variant = config.getVariant?.();
+    const prefix = variant ? `data-${variant}-` : `data-${config.component}-`;
+    function getAttr(part, variantOverride) {
+        if (variantOverride)
+            return `data-${variantOverride}-${part}`;
+        return `${prefix}${part}`;
+    }
+    function selector(part, variantOverride) {
+        return `[${getAttr(part, variantOverride)}]`;
+    }
+    const attrs = Object.fromEntries(config.parts.map((part) => [part, getAttr(part)]));
+    return {
+        ...attrs,
+        selector,
+        getAttr,
+    };
+}

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -198,4 +198,5 @@ export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defa
     defaultPlaceholder: DateValue;
 }): void;
 export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
+export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading"]>;
 export {};

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -2,7 +2,7 @@ import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationa
 import { afterTick, getDocument, styleToString, } from "svelte-toolbelt";
 import { untrack } from "svelte";
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
-import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
+import { createBitsAttrs, getDataDisabled, getDataInvalid, getDataReadonly, } from "../attrs.js";
 import { chunk, isValidIndex } from "../arrays.js";
 import { isBrowser, isHTMLElement } from "../is.js";
 import { kbd } from "../kbd.js";
@@ -514,3 +514,20 @@ export function getDateWithPreviousTime(date, prev) {
     }
     return date;
 }
+export const calendarAttrs = createBitsAttrs({
+    component: "calendar",
+    parts: [
+        "root",
+        "grid",
+        "cell",
+        "next-button",
+        "prev-button",
+        "day",
+        "grid-body",
+        "grid-head",
+        "grid-row",
+        "head-cell",
+        "header",
+        "heading",
+    ],
+});

package/dist/internal/use-arrow-navigation.d.ts

@@ -8,9 +8,9 @@ interface ArrowNavigationOptions {
      */
     arrowKeyOptions?: ArrowKeyOptions;
     /**
-     * The attribute name to find the collection items in the parent element.
+     * The selector to find the collection items in the parent element.
      */
-    attributeName: string;
+    candidateSelector: string;
     /**
      * The parent element where contains all the collection items, this will collect every item to be used when nav
      * It will be ignored if attributeName is provided

package/dist/internal/use-arrow-navigation.js

@@ -12,7 +12,7 @@ export function useArrowNavigation(e, currentElement, parentElement, options) {
         (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))) {
         return null;
     }
-    const { arrowKeyOptions = "both", attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
+    const { arrowKeyOptions = "both", candidateSelector: attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
     const [right, left, up, down, home, end] = [
         e.key === "ArrowRight",
         e.key === "ArrowLeft",

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

@@ -4,7 +4,7 @@ type UseDataTypeaheadOpts = {
     onMatch: (value: string) => void;
     getCurrentItem: () => string;
     candidateValues: Getter<string[]>;
-    enabled: boolean;
+    enabled: Getter<boolean>;
     getWindow: () => Window & typeof globalThis;
 };
 export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {

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

@@ -8,7 +8,7 @@ export function useDataTypeahead(opts) {
     });
     const candidateValues = $derived(opts.candidateValues());
     function handleTypeaheadSearch(key) {
-        if (!opts.enabled)
+        if (!opts.enabled())
             return;
         if (!candidateValues.length)
             return;

package/dist/types.d.ts

@@ -40,4 +40,5 @@ export type * from "./bits/toggle/types.js";
 export type * from "./bits/toggle-group/types.js";
 export type * from "./bits/toolbar/types.js";
 export type * from "./bits/tooltip/types.js";
+export type * from "./bits/utilities/config/types.js";
 export type { PortalProps } from "./bits/utilities/portal/types.js";

package/package.json

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