bits-ui 2.4.0 → 2.5.0

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

@@ -309,21 +309,23 @@ export function getWeekdays({ months, formatter, weekdayFormat }) {
  * which determines the month to show in the calendar.
  */
 export function useMonthViewOptionsSync(props) {
-    const weekStartsOn = props.weekStartsOn.current;
-    const locale = props.locale.current;
-    const fixedWeeks = props.fixedWeeks.current;
-    const numberOfMonths = props.numberOfMonths.current;
-    untrack(() => {
-        const placeholder = props.placeholder.current;
-        if (!placeholder)
-            return;
-        const defaultMonthProps = {
-            weekStartsOn,
-            locale,
-            fixedWeeks,
-            numberOfMonths,
-        };
-        props.setMonths(createMonths({ ...defaultMonthProps, dateObj: placeholder }));
+    $effect(() => {
+        const weekStartsOn = props.weekStartsOn.current;
+        const locale = props.locale.current;
+        const fixedWeeks = props.fixedWeeks.current;
+        const numberOfMonths = props.numberOfMonths.current;
+        untrack(() => {
+            const placeholder = props.placeholder.current;
+            if (!placeholder)
+                return;
+            const defaultMonthProps = {
+                weekStartsOn,
+                locale,
+                fixedWeeks,
+                numberOfMonths,
+            };
+            props.setMonths(createMonths({ ...defaultMonthProps, dateObj: placeholder }));
+        });
     });
 }
 /**
@@ -529,5 +531,35 @@ export const calendarAttrs = createBitsAttrs({
         "head-cell",
         "header",
         "heading",
+        "month-select",
+        "year-select",
     ],
 });
+export function getDefaultYears(opts) {
+    const currentYear = new Date().getFullYear();
+    const latestYear = Math.max(opts.placeholderYear, currentYear);
+    // use minValue/maxValue as boundaries if provided, otherwise calculate default range
+    let minYear;
+    let maxYear;
+    if (opts.minValue) {
+        minYear = opts.minValue.year;
+    }
+    else {
+        // (111 years: latestYear - 100 to latestYear + 10)
+        const initialMinYear = latestYear - 100;
+        minYear =
+            opts.placeholderYear < initialMinYear ? opts.placeholderYear - 10 : initialMinYear;
+    }
+    if (opts.maxValue) {
+        maxYear = opts.maxValue.year;
+    }
+    else {
+        maxYear = latestYear + 10;
+    }
+    // ensure we have at least one year and minYear <= maxYear
+    if (minYear > maxYear) {
+        minYear = maxYear;
+    }
+    const totalYears = maxYear - minYear + 1;
+    return Array.from({ length: totalYears }, (_, i) => minYear + i);
+}

package/dist/internal/date-time/formatter.d.ts

@@ -1,7 +1,13 @@
 import { type DateValue } from "@internationalized/date";
 import type { HourCycle, TimeValue } from "../../shared/date/types.js";
+import type { ReadableBox } from "svelte-toolbelt";
 export type Formatter = ReturnType<typeof createFormatter>;
 export type TimeFormatter = ReturnType<typeof createTimeFormatter>;
+type CreateFormatterOptions = {
+    initialLocale: string;
+    monthFormat: ReadableBox<Intl.DateTimeFormatOptions["month"] | ((month: number) => string)>;
+    yearFormat: ReadableBox<Intl.DateTimeFormatOptions["year"] | ((year: number) => string)>;
+};
 /**
  * Creates a wrapper around the `DateFormatter`, which is
  * an improved version of the {@link Intl.DateTimeFormat} API,
@@ -10,7 +16,7 @@ export type TimeFormatter = ReturnType<typeof createTimeFormatter>;
  *
  * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
  */
-export declare function createFormatter(initialLocale: string): {
+export declare function createFormatter(opts: CreateFormatterOptions): {
     setLocale: (newLocale: string) => void;
     getLocale: () => string;
     fullMonth: (date: Date) => string;
@@ -32,3 +38,4 @@ export declare function createTimeFormatter(initialLocale: string): {
     dayPeriod: (date: Date, hourCycle?: HourCycle | undefined) => "AM" | "PM";
     selectedTime: (date: TimeValue) => string;
 };
+export {};

package/dist/internal/date-time/formatter.js

@@ -17,8 +17,8 @@ const defaultPartOptions = {
  *
  * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
  */
-export function createFormatter(initialLocale) {
-    let locale = initialLocale;
+export function createFormatter(opts) {
+    let locale = opts.initialLocale;
     function setLocale(newLocale) {
         locale = newLocale;
     }
@@ -42,7 +42,20 @@ export function createFormatter(initialLocale) {
         }
     }
     function fullMonthAndYear(date) {
-        return new DateFormatter(locale, { month: "long", year: "numeric" }).format(date);
+        if (typeof opts.monthFormat.current !== "function" &&
+            typeof opts.yearFormat.current !== "function") {
+            return new DateFormatter(locale, {
+                month: opts.monthFormat.current,
+                year: opts.yearFormat.current,
+            }).format(date);
+        }
+        const formattedMonth = typeof opts.monthFormat.current === "function"
+            ? opts.monthFormat.current(date.getMonth() + 1)
+            : new DateFormatter(locale, { month: opts.monthFormat.current }).format(date);
+        const formattedYear = typeof opts.yearFormat.current === "function"
+            ? opts.yearFormat.current(date.getFullYear())
+            : new DateFormatter(locale, { year: opts.yearFormat.current }).format(date);
+        return `${formattedMonth} ${formattedYear}`;
     }
     function fullMonth(date) {
         return new DateFormatter(locale, { month: "long" }).format(date);

package/dist/internal/floating-svelte/types.d.ts

@@ -41,6 +41,18 @@ export type UseFloatingOptions = {
      * @default undefined
      */
     whileElementsMounted?: (reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void;
+    /**
+     * The offset from the reference element along the side axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    sideOffset?: ValueOrGetValue<number | undefined>;
+    /**
+     * The offset from the reference element along the alignment axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    alignOffset?: ValueOrGetValue<number | undefined>;
 };
 export type UseFloatingReturn = {
     /**

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -9,6 +9,8 @@ export function useFloating(options) {
     const transformOption = $derived(get(options.transform) ?? true);
     const placementOption = $derived(get(options.placement) ?? "bottom");
     const strategyOption = $derived(get(options.strategy) ?? "absolute");
+    const sideOffsetOption = $derived(get(options.sideOffset) ?? 0);
+    const alignOffsetOption = $derived(get(options.alignOffset) ?? 0);
     const reference = options.reference;
     /** State */
     let x = $state(0);
@@ -19,21 +21,17 @@ export function useFloating(options) {
     let middlewareData = $state({});
     let isPositioned = $state(false);
     const floatingStyles = $derived.by(() => {
-        const initialStyles = {
-            position: strategy,
-            left: "0",
-            top: "0",
-        };
-        if (!floating.current) {
-            return initialStyles;
-        }
-        const xVal = roundByDPR(floating.current, x);
-        const yVal = roundByDPR(floating.current, y);
+        // preserve last known position when floating ref is null (during transitions)
+        const xVal = floating.current ? roundByDPR(floating.current, x) : x;
+        const yVal = floating.current ? roundByDPR(floating.current, y) : y;
         if (transformOption) {
             return {
-                ...initialStyles,
+                position: strategy,
+                left: "0",
+                top: "0",
                 transform: `translate(${xVal}px, ${yVal}px)`,
-                ...(getDPR(floating.current) >= 1.5 && {
+                ...(floating.current &&
+                    getDPR(floating.current) >= 1.5 && {
                     willChange: "transform",
                 }),
             };
@@ -54,6 +52,14 @@ export function useFloating(options) {
             placement: placementOption,
             strategy: strategyOption,
         }).then((position) => {
+            // ignore bad coordinates that cause jumping during close transitions
+            if (!openOption && x !== 0 && y !== 0) {
+                // if we had a good position and now getting coordinates near
+                // the expected offset bounds during close, ignore it
+                const maxExpectedOffset = Math.max(Math.abs(sideOffsetOption), Math.abs(alignOffsetOption), 15);
+                if (position.x <= maxExpectedOffset && position.y <= maxExpectedOffset)
+                    return;
+            }
             x = position.x;
             y = position.y;
             strategy = position.strategy;

package/dist/internal/use-grace-area.svelte.js

@@ -1,4 +1,4 @@
-import { executeCallbacks, getWindow } from "svelte-toolbelt";
+import { executeCallbacks, getDocument, getWindow } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { watch } from "runed";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
@@ -60,7 +60,10 @@ export function useGraceArea(opts) {
                 opts.onPointerExit();
             }
         };
-        return on(document, "pointermove", handleTrackPointerGrace);
+        const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
+        if (!doc)
+            return;
+        return on(doc, "pointermove", handleTrackPointerGrace);
     });
     return {
         isPointerInTransit,

package/dist/shared/attributes.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes, SVGAttributes } from "svelte/elements";
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLSelectAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes, SVGAttributes } from "svelte/elements";
 export type BitsDivAttributes = HTMLAttributes<HTMLDivElement>;
 export type BitsSpanAttributes = HTMLAttributes<HTMLSpanElement>;
 export type BitsHeadingAttributes = HTMLAttributes<HTMLHeadingElement>;
@@ -7,6 +7,7 @@ export type BitsElementAttributes = HTMLAttributes<HTMLElement>;
 export type BitsTableSectionAttributes = HTMLAttributes<HTMLTableSectionElement>;
 export type BitsTableRowAttributes = HTMLAttributes<HTMLTableRowElement>;
 export type BitsSVGElementAttributes = SVGAttributes<SVGElement>;
+export type BitsSelectAttributes = HTMLSelectAttributes;
 /**
  * We override the `id` prop type to not allow it to be `null`. We rely on the
  * `id` heavily in the internals of Bits UI for node references. We also override
@@ -35,4 +36,5 @@ export type BitsPrimitiveTbodyAttributes = BitsPrimitive<BitsTableSectionAttribu
 export type BitsPrimitiveTrAttributes = BitsPrimitive<BitsTableRowAttributes>;
 export type BitsPrimitiveTheadAttributes = BitsPrimitive<BitsTableSectionAttributes>;
 export type BitsPrimitiveHeaderAttributes = BitsPrimitive<BitsElementAttributes>;
+export type BitsPrimitiveSelectAttributes = BitsPrimitive<BitsSelectAttributes>;
 export {};

package/package.json

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