@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/calendar/createCalendarGrid.ts

@@ -9,6 +9,7 @@ import { createMemo } from "solid-js";
 import { DateFormatter, startOfWeek, today } from "@internationalized/date";
 import { access, type MaybeAccessor } from "../utils/reactivity";
 import type { CalendarState, CalendarDate } from "@proyecto-viviana/solid-stately";
+import { formatVisibleRangeDescription, getCalendarHookData } from "./utils";
 
 export interface AriaCalendarGridProps {
   /** The start date of the grid (defaults to start of focused month). */
@@ -142,16 +143,49 @@ export function createCalendarGrid<T extends CalendarState>(
     }
   };
 
+  // Whether more than one date can be selected at once. Mirrors
+  // @react-aria/calendar useCalendarGrid: true for a RangeCalendar (highlightable
+  // range) or a Calendar in multiple-selection mode.
+  const isMultiSelectable = (): boolean => {
+    if ("highlightedRange" in state) {
+      return true;
+    }
+    return (
+      "selectionMode" in state &&
+      typeof state.selectionMode === "function" &&
+      state.selectionMode() === "multiple"
+    );
+  };
+
+  // The grid's accessible name combines the calendar's label with a description
+  // of this grid's visible month/range, mirroring @react-aria/calendar
+  // useCalendarGrid (useVisibleRangeDescription over the grid's own start/end so
+  // multi-month calendars name each grid by its own month).
+  const visibleRangeDescription = createMemo(() => {
+    const gridProps = access(props);
+    const start = gridProps.startDate ?? state.visibleRange().start;
+    const end = gridProps.endDate ?? state.visibleRange().end;
+    return formatVisibleRangeDescription(start, end, state.timeZone, state.locale());
+  });
+
   // Grid props
-  const gridProps = createMemo(() => ({
-    role: "grid",
-    "aria-readonly": state.isReadOnly() || undefined,
-    "aria-disabled": state.isDisabled() || undefined,
-    tabIndex: state.isFocused() ? 0 : -1,
-    onFocus: () => state.setFocused(true),
-    onBlur: () => state.setFocused(false),
-    onKeyDown: handleKeyDown,
-  }));
+  const gridProps = createMemo(() => {
+    const data = getCalendarHookData(state);
+    const gridLabel = [data?.ariaLabel, visibleRangeDescription()].filter(Boolean).join(", ");
+
+    return {
+      role: "grid",
+      "aria-label": gridLabel || undefined,
+      "aria-labelledby": data?.ariaLabelledBy,
+      "aria-readonly": state.isReadOnly() || undefined,
+      "aria-disabled": state.isDisabled() || undefined,
+      "aria-multiselectable": isMultiSelectable() || undefined,
+      tabIndex: state.isFocused() ? 0 : -1,
+      onFocus: () => state.setFocused(true),
+      onBlur: () => state.setFocused(false),
+      onKeyDown: handleKeyDown,
+    };
+  });
 
   // Header props are intentionally empty. Consumers render this on <thead>,
   // which already has correct table semantics.

package/src/calendar/createCalendarMonthPicker.ts

@@ -0,0 +1,105 @@
+/**
+ * createCalendarMonthPicker hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a month picker
+ * within a calendar — a listbox/select that jumps the focused date to a chosen
+ * month of the focused year.
+ * Based on @react-aria/calendar useCalendarMonthPicker.
+ */
+
+import { createMemo } from "solid-js";
+import { DateFormatter, type CalendarDate } from "@internationalized/date";
+import type { CalendarState, RangeCalendarState } from "@proyecto-viviana/solid-stately";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { useLocale } from "../i18n";
+
+type Key = string | number;
+
+export interface CalendarMonthPickerProps {
+  /** The format of the month to display in the picker. @default 'short' */
+  format?: "numeric" | "2-digit" | "long" | "short" | "narrow";
+}
+
+export interface CalendarMonthPickerItem {
+  /** The 1-based month number, used as the item's key. */
+  id: number;
+  /** The first day of the month. */
+  date: CalendarDate;
+  /** The localized month name. */
+  formatted: string;
+}
+
+export interface CalendarMonthPickerAria {
+  /** An accessible label for the month picker. */
+  "aria-label": string;
+  /** The key of the currently focused month (its 1-based number). */
+  value: Key;
+  /** Handler that moves focus to the selected month. */
+  onChange: (key: Key | null) => void;
+  /** The list of selectable months in the focused year. */
+  items: CalendarMonthPickerItem[];
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a month picker
+ * within a calendar.
+ */
+export function createCalendarMonthPicker(
+  props: MaybeAccessor<CalendarMonthPickerProps>,
+  state: CalendarState | RangeCalendarState,
+): CalendarMonthPickerAria {
+  const getProps = () => access(props);
+  const locale = useLocale();
+
+  const formatter = createMemo(
+    () =>
+      new DateFormatter(locale().locale, {
+        month: getProps().format ?? "short",
+        calendar: state.focusedDate().calendar.identifier,
+        timeZone: state.timeZone,
+      }),
+  );
+
+  // Build the list of months in the focused year. The number of months can vary
+  // by year in some calendar systems (e.g. the Hebrew leap year), so derive it
+  // from the focused date rather than assuming twelve.
+  const items = createMemo<CalendarMonthPickerItem[]>(() => {
+    const focused = state.focusedDate();
+    const fmt = formatter();
+    const numMonths = focused.calendar.getMonthsInYear(focused);
+    const months: CalendarMonthPickerItem[] = [];
+    for (let i = 1; i <= numMonths; i++) {
+      const date = focused.set({ month: i });
+      // Calendars that offset their month numbering (e.g. fiscal calendars)
+      // expose getFormattableMonth to map back to the displayable month.
+      const displayDate = date.calendar.getFormattableMonth?.(date) ?? date;
+      months.push({
+        id: i,
+        date,
+        formatted: fmt.format(displayDate.toDate(state.timeZone)),
+      });
+    }
+    return months;
+  });
+
+  const ariaLabel = createMemo(
+    () => new Intl.DisplayNames(locale().locale, { type: "dateTimeField" }).of("month") ?? "month",
+  );
+
+  return {
+    get "aria-label"() {
+      return ariaLabel();
+    },
+    get value() {
+      return state.focusedDate().month;
+    },
+    onChange: (key) => {
+      if (key != null) {
+        state.setFocusedDate(items()[Number(key) - 1].date);
+      }
+    },
+    get items() {
+      return items();
+    },
+  };
+}

package/src/calendar/createCalendarYearPicker.ts

@@ -0,0 +1,144 @@
+/**
+ * createCalendarYearPicker hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a year picker
+ * within a calendar — a listbox/select that jumps the focused date to a chosen
+ * year within a sliding window centered on the focused year.
+ * Based on @react-aria/calendar useCalendarYearPicker.
+ */
+
+import { createMemo } from "solid-js";
+import {
+  DateFormatter,
+  isSameYear,
+  toCalendarDate,
+  type CalendarDate,
+} from "@internationalized/date";
+import type { CalendarState, RangeCalendarState } from "@proyecto-viviana/solid-stately";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { useLocale } from "../i18n";
+
+type Key = string | number;
+
+export interface CalendarYearPickerFormatOptions {
+  /** The format of the year. @default 'numeric' */
+  year?: "numeric" | "2-digit";
+  /** The format of the era. */
+  era?: "long" | "short" | "narrow";
+}
+
+export interface CalendarYearPickerProps {
+  /** The number of years to display in the picker. @default 20 */
+  visibleYears?: number;
+  /** The format of the year/era to display. */
+  format?: CalendarYearPickerFormatOptions;
+}
+
+export interface CalendarYearPickerItem {
+  /** The index of the year within the visible window, used as the item's key. */
+  id: number;
+  /** The first day of the year. */
+  date: CalendarDate;
+  /** The localized year name. */
+  formatted: string;
+}
+
+export interface CalendarYearPickerAria {
+  /** An accessible label for the year picker. */
+  "aria-label": string;
+  /** The key of the currently focused year (its index in the visible window). */
+  value: Key;
+  /** Handler that moves focus to the selected year. */
+  onChange: (key: Key | null) => void;
+  /** The list of selectable years in the visible window. */
+  items: CalendarYearPickerItem[];
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a year picker
+ * within a calendar.
+ */
+export function createCalendarYearPicker(
+  props: MaybeAccessor<CalendarYearPickerProps>,
+  state: CalendarState | RangeCalendarState,
+): CalendarYearPickerAria {
+  const getProps = () => access(props);
+  const locale = useLocale();
+
+  const formatter = createMemo(() => {
+    const focused = state.focusedDate();
+    const format = getProps().format;
+    return new DateFormatter(locale().locale, {
+      year: format?.year ?? "numeric",
+      era:
+        format?.era ??
+        (focused.calendar.identifier === "gregory" && focused.era === "BC" ? "short" : undefined),
+      calendar: focused.calendar.identifier,
+      timeZone: state.timeZone,
+    });
+  });
+
+  // Compute a window of years centered on the focused year, then clamp it to the
+  // calendar's min/max so the picker never offers an out-of-range year.
+  const data = createMemo(() => {
+    const focused = state.focusedDate();
+    const fmt = formatter();
+    // Falsy coercion (not `??`) mirrors upstream `props.visibleYears || 20`, so a
+    // `0`/`NaN` visibleYears falls back to the default 20 rather than producing an
+    // empty window.
+    const visibleYears = getProps().visibleYears || 20;
+    let minDate = focused.subtract({ years: Math.floor(visibleYears / 2) });
+    let maxDate = focused.add({ years: Math.ceil(visibleYears / 2) - 1 });
+
+    const stateMax = state.maxValue();
+    const stateMin = state.minValue();
+    if (stateMax && maxDate.compare(stateMax) > 0) {
+      maxDate = toCalendarDate(stateMax);
+      minDate = maxDate.subtract({ years: visibleYears - 1 });
+    }
+    if (stateMin && minDate.compare(stateMin) < 0) {
+      minDate = toCalendarDate(stateMin);
+      maxDate = minDate.add({ years: visibleYears - 1 });
+      if (stateMax && maxDate.compare(stateMax) > 0) {
+        maxDate = toCalendarDate(stateMax);
+      }
+    }
+
+    const years: CalendarYearPickerItem[] = [];
+    let value: number = 0;
+    let date = minDate;
+    while (date.compare(maxDate) <= 0) {
+      if (isSameYear(date, focused)) {
+        value = years.length;
+      }
+      years.push({
+        id: years.length,
+        date,
+        formatted: fmt.format(date.toDate(state.timeZone)),
+      });
+      date = date.add({ years: 1 });
+    }
+    return { items: years, value };
+  });
+
+  const ariaLabel = createMemo(
+    () => new Intl.DisplayNames(locale().locale, { type: "dateTimeField" }).of("year") ?? "year",
+  );
+
+  return {
+    get "aria-label"() {
+      return ariaLabel();
+    },
+    get value() {
+      return data().value;
+    },
+    onChange: (key) => {
+      if (key != null) {
+        state.setFocusedDate(data().items[Number(key)].date);
+      }
+    },
+    get items() {
+      return data().items;
+    },
+  };
+}

package/src/calendar/createRangeCalendar.ts

@@ -86,6 +86,8 @@ export function createRangeCalendar<T extends RangeCalendarState>(
       initialProps.errorMessage || initialProps.errorMessageId
         ? errorMessageId
         : existingHookData?.errorMessageId,
+    ariaLabel: initialProps["aria-label"],
+    ariaLabelledBy: initialProps["aria-labelledby"],
     get selectedDateDescription() {
       return selectedDateDescription();
     },

package/src/calendar/index.ts

@@ -1,6 +1,23 @@
 // Calendar
 export { createCalendar, type AriaCalendarProps, type CalendarAria } from "./createCalendar";
 
+// Calendar Month Picker
+export {
+  createCalendarMonthPicker,
+  type CalendarMonthPickerProps,
+  type CalendarMonthPickerItem,
+  type CalendarMonthPickerAria,
+} from "./createCalendarMonthPicker";
+
+// Calendar Year Picker
+export {
+  createCalendarYearPicker,
+  type CalendarYearPickerProps,
+  type CalendarYearPickerFormatOptions,
+  type CalendarYearPickerItem,
+  type CalendarYearPickerAria,
+} from "./createCalendarYearPicker";
+
 // Calendar Grid
 export {
   createCalendarGrid,

package/src/calendar/utils.ts

@@ -11,6 +11,10 @@ import { formatCalendarLabel } from "./intl";
 export interface CalendarHookData {
   errorMessageId?: string;
   selectedDateDescription?: string;
+  /** The calendar's accessible label, shared with each grid (mirrors @react-aria/calendar hookData.ariaLabel). */
+  ariaLabel?: string;
+  /** The id of an element labelling the calendar, shared with each grid (mirrors hookData.ariaLabelledBy). */
+  ariaLabelledBy?: string;
 }
 
 const hookData = new WeakMap<CalendarState | RangeCalendarState, CalendarHookData>();

package/src/checkbox/createCheckbox.ts

@@ -37,6 +37,10 @@ export interface CheckboxAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the checkbox description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the checkbox is selected. */
   isSelected: Accessor<boolean>;
   /** Whether the checkbox is in a pressed state. */
@@ -118,6 +122,12 @@ export function createCheckbox(
         required: isRequired && validationBehavior === "native",
       }) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
+    get descriptionProps() {
+      return toggleResult.descriptionProps;
+    },
+    get errorMessageProps() {
+      return toggleResult.errorMessageProps;
+    },
     isSelected,
     isPressed,
     isDisabled,

package/src/checkbox/createCheckboxGroupItem.ts

@@ -80,22 +80,18 @@ export function createCheckboxGroupItem(
       const baseInputProps = result.inputProps;
       const groupData = getGroupData();
 
-      const describedByIds: string[] = [];
-
-      const propsDescribedBy = getProps()["aria-describedby"];
-      if (propsDescribedBy) {
-        describedByIds.push(propsDescribedBy);
-      }
-
-      if (state.isInvalid && groupData?.errorMessageId) {
-        describedByIds.push(groupData.errorMessageId);
-      }
-
-      if (groupData?.descriptionId) {
-        describedByIds.push(groupData.descriptionId);
-      }
-
-      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : undefined;
+      // Mirror upstream useCheckboxGroupItem: keep the checkbox's own
+      // aria-describedby (its description/error slot ids from createCheckbox/
+      // createToggle, which already fold in the user's aria-describedby) and append
+      // the group's shared description/error ids.
+      const ariaDescribedBy =
+        [
+          baseInputProps["aria-describedby"],
+          state.isInvalid && groupData?.errorMessageId ? groupData.errorMessageId : null,
+          groupData?.descriptionId,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined;
 
       return {
         ...baseInputProps,

package/src/datepicker/createDateSegment.ts

@@ -7,6 +7,7 @@
 
 import { createSignal, createMemo, onCleanup } from "solid-js";
 import { access, type MaybeAccessor } from "../utils/reactivity";
+import { scrollIntoViewport, getScrollParent } from "../utils";
 import type { DateFieldState, DateSegment, DateSegmentType } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 
@@ -288,8 +289,12 @@ export function createDateSegment<T extends DateFieldState>(
     }
     hadPointerDown = false;
 
-    // Select all text in the segment
     const el = ref?.();
+    if (el) {
+      scrollIntoViewport(el, { containingElement: getScrollParent(el) });
+    }
+
+    // Select all text in the segment
     if (el && typeof window !== "undefined") {
       const selection = window.getSelection();
       if (selection) {

package/src/dnd/createDroppableCollection.ts

@@ -12,6 +12,7 @@ import type {
   DropTarget,
   DropOperation,
   DropItem,
+  DragType,
   DragTypes,
   Key,
 } from "@proyecto-viviana/solid-stately";
@@ -390,7 +391,9 @@ export function createDroppableCollection(
           return { has: () => true };
         }
         return {
-          has: (type: string | symbol) => typeof type === "string" && draggingTypes.has(type),
+          // Keyboard drag mirrors upstream's raw Set<string> delegate: no
+          // wildcard expansion (that lives in the DataTransfer-backed DragTypes).
+          has: (type: DragType | DragType[]) => typeof type === "string" && draggingTypes.has(type),
         };
       };
       const isValidDropTarget = (target: DropTarget) =>

package/src/dnd/utils.ts

@@ -4,12 +4,14 @@
 
 import type {
   DragItem,
+  DragType,
   DropItem,
   TextDropItem,
   FileDropItem,
   DirectoryDropItem,
   DropOperation,
 } from "@proyecto-viviana/solid-stately";
+import { DIRECTORY_DRAG_TYPE } from "@proyecto-viviana/solid-stately";
 
 // Native drag types that can be transferred between applications
 export const NATIVE_DRAG_TYPES: Set<string> = new Set(["text/plain", "text/uri-list", "text/html"]);
@@ -231,11 +233,33 @@ export class DragTypesImpl {
     this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes("Files");
   }
 
-  has(type: string | symbol): boolean {
-    if (this.includesUnknownTypes || (typeof type === "symbol" && this.types.has(GENERIC_TYPE))) {
+  has(type: DragType | DragType[]): boolean {
+    if (Array.isArray(type)) {
+      return type.some((t) => this.has(t));
+    }
+
+    if (
+      this.includesUnknownTypes ||
+      (type === DIRECTORY_DRAG_TYPE && this.types.has(GENERIC_TYPE)) ||
+      type === "*/*"
+    ) {
       return true;
     }
-    return typeof type === "string" && this.types.has(type);
+
+    if (typeof type === "string") {
+      // Wildcard MIME match, e.g. "image/*" accepts "image/png".
+      if (type.endsWith("/*")) {
+        for (const key of this.types) {
+          if (key.startsWith(type.slice(0, -2))) {
+            return true;
+          }
+        }
+        return false;
+      }
+      return this.types.has(type);
+    }
+
+    return false;
   }
 }