@uniflowed/ui 0.0.0-alpha.42 → 0.0.0-alpha.44

package/calendar.js

@@ -67,6 +67,7 @@ import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 import type { DateTimeFormatOptions, PlainDate } from "@uniflowed/core/temporal";
 import { Temporal } from "@uniflowed/core/temporal";
 
+import { useLocale } from "./i18n-provider.js";
 import { useControlled } from "./internal/controlled-state.js";
 import type { Rest } from "./internal/merge-props.js";
 import {
@@ -127,6 +128,7 @@ type CalendarState = {|
    */
   readonly focusedDayRef: { current: HTMLElement | null },
   readonly isDisabled: (date: PlainDate) => boolean,
+  readonly isDateSelected: ((date: PlainDate) => boolean) | void,
   readonly locale: string | void,
   readonly moveFocus: (date: PlainDate, viaKeyboard: boolean) => void,
   /**
@@ -180,6 +182,7 @@ export component CalendarRoot(
   focusedDayRef?: { current: HTMLElement | null },
   /** Whether a date may be chosen. A rejected date stays reachable; see the header. */
   isDateDisabled?: (date: PlainDate) => boolean,
+  isDateSelected?: (date: PlainDate) => boolean,
   locale?: string,
   onMonthChange?: (firstOfMonth: PlainDate) => mixed,
   onValueChange?: (value: PlainDate) => mixed,
@@ -189,6 +192,8 @@ export component CalendarRoot(
   weekStartsOn?: number,
   ...rest: Rest
 ) {
+  const inherited = useLocale();
+  const resolvedLocale = locale ?? inherited.locale;
   const base = useId();
   const pendingFocusRef = useRef<string | null>(null);
   // One is always allocated, because a hook may not be called conditionally;
@@ -228,8 +233,8 @@ export component CalendarRoot(
   });
 
   const weekStart = useMemo(
-    () => (weekStartsOn == null ? firstDayOfWeekFor(locale) : weekStartsOn),
-    [locale, weekStartsOn],
+    () => (weekStartsOn == null ? firstDayOfWeekFor(resolvedLocale) : weekStartsOn),
+    [resolvedLocale, weekStartsOn],
   );
 
   const isDisabled = useStableCallback((date: PlainDate) => isDateDisabled?.(date) === true);
@@ -256,7 +261,10 @@ export component CalendarRoot(
     setFocused((current) => (current.equals(date) ? current : date));
   });
 
-  const caption = useMemo(() => focused.toLocaleString(locale, CAPTION_FORMAT), [focused, locale]);
+  const caption = useMemo(
+    () => focused.toLocaleString(resolvedLocale, CAPTION_FORMAT),
+    [focused, resolvedLocale],
+  );
 
   const [announcement, setAnnouncement] = useState("");
   const shown = useRef(`${focused.year}-${focused.month}`);
@@ -284,7 +292,8 @@ export component CalendarRoot(
       focused,
       focusedDayRef: dayRef,
       isDisabled,
-      locale,
+      isDateSelected,
+      locale: resolvedLocale,
       moveFocus,
       pendingFocusRef,
       select,
@@ -299,7 +308,8 @@ export component CalendarRoot(
       dayRef,
       focused,
       isDisabled,
-      locale,
+      isDateSelected,
+      resolvedLocale,
       moveFocus,
       select,
       selected,
@@ -354,7 +364,7 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
       return;
     }
     const at = focused.toString();
-    const cell: HTMLElement | null = (grid.querySelector(`[data-date="${at}"]`): $FlowFixMe);
+    const cell: HTMLElement | null = grid.querySelector(`[data-date="${at}"]`) as $FlowFixMe;
     focusedDayRef.current = cell;
     // Only when a key asked for it, and only once the render it asked for has
     // happened: `ArrowRight` off the end of October sets this to the 1st of
@@ -379,6 +389,7 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
       // attribute points at the caption that is there either way, so the two
       // answers cannot disagree.
       aria-labelledby={`${calendar.base}-caption`}
+      aria-multiselectable={calendar.isDateSelected != null || undefined}
       onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
         const grid: $FlowFixMe = event.currentTarget;
         const movement = movementForDateKey(event, directionOf(grid));
@@ -452,7 +463,9 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
 export component CalendarDay(date: PlainDate, children?: React.Node, ...rest: Rest) {
   const calendar = useCalendar("Calendar.Day");
   const disabled = calendar.isDisabled(date);
-  const chosen = calendar.selected != null && calendar.selected.equals(date);
+  const chosen =
+    calendar.isDateSelected?.(date) ??
+    (calendar.selected != null && calendar.selected.equals(date));
   const passed = withoutComposed(rest, ["onClick", "onFocus", "onKeyDown"]);
 
   return (

package/color-picker.js

@@ -0,0 +1,172 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { createContext, useContext, useState } from "@uniflowed/react";
+import { useControlled } from "./internal/controlled-state.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { composeHandlers, withProps } from "./internal/merge-props.js";
+import { directionOf } from "./internal/roving-focus.js";
+
+/** Canonical #rrggbb or #rrggbbaa, with CSS's short hex forms accepted at the boundary. */
+export function parseColor(value: string): string | null {
+  let hex = value.trim().toLowerCase();
+  if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(hex)) return null;
+  if (hex.length <= 5)
+    hex =
+      "#" +
+      Array.from(hex.slice(1))
+        .map((char) => char + char)
+        .join("");
+  return hex;
+}
+type ColorState = { value: string, disabled: boolean, set: (value: string) => void };
+const ColorContext: React.Context<ColorState | null> = createContext(null);
+hook useColor(): ColorState {
+  const color = useContext(ColorContext);
+  if (color == null) throw new Error("ColorPicker parts must be inside ColorPicker.Root");
+  return color;
+}
+export component ColorPickerRoot(
+  children: React.Node,
+  value?: string,
+  defaultValue?: string = "#000000",
+  onValueChange?: (value: string) => void,
+  disabled?: boolean = false,
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const [current, setCurrent] = useControlled(value, defaultValue, onValueChange);
+  const normalized = parseColor(current);
+  if (normalized == null) throw new RangeError("ColorPicker value must be a CSS hex color");
+  const state = {
+    value: normalized,
+    disabled,
+    set: (next: string) => {
+      const color = parseColor(next);
+      if (!disabled && color != null) setCurrent(color);
+    },
+  };
+  const props = withProps(rest, { children });
+  return (
+    <ColorContext.Provider value={state}>
+      {render != null ? render(props) : <div {...props} />}
+    </ColorContext.Provider>
+  );
+}
+export component ColorPickerInput(render?: RenderProp, ...rest: Rest) {
+  const color = useColor();
+  const props = withProps(rest, {
+    type: "color",
+    value: color.value.slice(0, 7),
+    disabled: color.disabled,
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      color.set(event.currentTarget.value + color.value.slice(7)),
+    ),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+export component ColorPickerField(render?: RenderProp, ...rest: Rest) {
+  const color = useColor();
+  const [draft, setDraft] = useState<string | null>(null);
+  const text = draft ?? color.value;
+  const invalid = parseColor(text) == null;
+  const commit = () => {
+    if (!invalid) {
+      color.set(text);
+      setDraft(null);
+    }
+  };
+  const props = withProps(rest, {
+    type: "text",
+    value: text,
+    disabled: color.disabled,
+    "aria-invalid": invalid ? "true" : rest["aria-invalid"],
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      setDraft(event.currentTarget.value),
+    ),
+    onBlur: composeHandlers(rest.onBlur, commit),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commit();
+      }
+    }),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+export component ColorPickerChannel(
+  channel: "red" | "green" | "blue" | "alpha",
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const color = useColor();
+  const at = ["red", "green", "blue", "alpha"].indexOf(channel);
+  const value = parseInt(
+    (color.value + (color.value.length === 7 ? "ff" : "")).slice(1 + at * 2, 3 + at * 2),
+    16,
+  );
+  const change = (next: number) => {
+    const hex = color.value.slice(1).padEnd(8, "f");
+    const byte = Math.max(0, Math.min(255, Math.round(next)))
+      .toString(16)
+      .padStart(2, "0");
+    const full = hex.slice(0, at * 2) + byte + hex.slice(at * 2 + 2);
+    color.set("#" + (at === 3 || color.value.length === 9 ? full : full.slice(0, 6)));
+  };
+  const props = withProps(rest, {
+    type: "range",
+    min: 0,
+    max: 255,
+    step: 1,
+    value,
+    disabled: color.disabled,
+    "aria-label": rest["aria-label"] ?? channel,
+    "aria-valuetext": channel === "alpha" ? `${Math.round((value / 255) * 100)}%` : String(value),
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      change(Number(event.currentTarget.value)),
+    ),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
+      if (color.disabled) return;
+      const key = event.key;
+      if (
+        ![
+          "ArrowLeft",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowDown",
+          "PageUp",
+          "PageDown",
+          "Home",
+          "End",
+        ].includes(key)
+      )
+        return;
+      event.preventDefault();
+      const rtl = directionOf(event.currentTarget) === "rtl";
+      change(
+        key === "Home"
+          ? 0
+          : key === "End"
+            ? 255
+            : value +
+              (key === "PageUp"
+                ? 10
+                : key === "PageDown"
+                  ? -10
+                  : key === "ArrowUp" || key === (rtl ? "ArrowLeft" : "ArrowRight")
+                    ? 1
+                    : -1),
+      );
+    }),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+export component ColorPickerSwatch(render?: RenderProp, ...rest: Rest) {
+  const color = useColor();
+  const props = withProps(rest, {
+    "aria-hidden": "true",
+    "data-color": color.value,
+    style: { ...(rest.style as $FlowFixMe), backgroundColor: color.value },
+  });
+  return render != null ? render(props) : <span {...props} />;
+}

package/date-field.js

@@ -0,0 +1,9 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { SegmentedField } from "./internal/segmented-field.js";
+import type { DateFieldProps } from "./internal/segmented-field.js";
+export component DateField(...props: DateFieldProps) {
+  return <SegmentedField options={props} time={false} />;
+}
+export type { DateFieldProps } from "./internal/segmented-field.js";

package/date-range-picker.js

@@ -0,0 +1,120 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { createContext, useContext, useRef } from "@uniflowed/react";
+import type { PlainDate } from "@uniflowed/core/temporal";
+import { useControlled } from "./internal/controlled-state.js";
+import type { Rest } from "./internal/merge-props.js";
+import { forwarded } from "./internal/merge-props.js";
+import type { DateRange } from "./internal/date-range.js";
+import { validateRange, unavailableInRange } from "./internal/date-range.js";
+import { CalendarMonth } from "./calendar.js";
+import { RangeCalendarRoot } from "./range-calendar.js";
+import { DateField } from "./date-field.js";
+import { PopoverRoot, PopoverBody, PopoverTrigger } from "./popover.js";
+
+type Picker = {
+  range: DateRange | null,
+  set: (range: DateRange | null) => void,
+  close: () => void,
+  minValue: string | void,
+  maxValue: string | void,
+  isDateDisabled: ((date: PlainDate) => boolean) | void,
+};
+const PickerContext: React.Context<Picker | null> = createContext(null);
+hook usePicker(): Picker {
+  const picker = useContext(PickerContext);
+  if (picker == null) throw new Error("DateRangePicker parts must be inside DateRangePicker.Root");
+  return picker;
+}
+export component DateRangePickerRoot(
+  children: React.Node,
+  value?: DateRange | null,
+  defaultValue?: DateRange | null = null,
+  onValueChange?: (range: DateRange | null) => void,
+  open?: boolean,
+  defaultOpen?: boolean = false,
+  onOpenChange?: (open: boolean) => void,
+  minValue?: string,
+  maxValue?: string,
+  isDateDisabled?: (date: PlainDate) => boolean,
+) {
+  const [range, setRange] = useControlled(value, defaultValue, onValueChange);
+  const [isOpen, setOpen] = useControlled(open, defaultOpen, onOpenChange);
+  validateRange(range);
+  const state = {
+    range,
+    set: setRange,
+    close: () => setOpen(false),
+    minValue,
+    maxValue,
+    isDateDisabled,
+  };
+  return (
+    <PickerContext.Provider value={state}>
+      <PopoverRoot open={isOpen} onOpenChange={setOpen}>
+        {children}
+      </PopoverRoot>
+    </PickerContext.Provider>
+  );
+}
+export component DateRangePickerStartField(...rest: Rest) {
+  const picker = usePicker();
+  return (
+    <DateField
+      {...forwarded(rest)}
+      value={picker.range?.start ?? null}
+      minValue={picker.minValue}
+      maxValue={picker.range?.end ?? picker.maxValue}
+      isDateUnavailable={(start) =>
+        unavailableInRange(start, picker.range?.end ?? start, picker.isDateDisabled)
+      }
+      onValueChange={(start) => {
+        if (start == null) picker.set(null);
+        else picker.set({ start, end: picker.range?.end ?? start });
+      }}
+    />
+  );
+}
+export component DateRangePickerEndField(...rest: Rest) {
+  const picker = usePicker();
+  return (
+    <DateField
+      {...forwarded(rest)}
+      value={picker.range?.end ?? null}
+      minValue={picker.range?.start ?? picker.minValue}
+      maxValue={picker.maxValue}
+      isDateUnavailable={(end) =>
+        unavailableInRange(picker.range?.start ?? end, end, picker.isDateDisabled)
+      }
+      onValueChange={(end) => {
+        if (end == null) picker.set(null);
+        else picker.set({ start: picker.range?.start ?? end, end });
+      }}
+    />
+  );
+}
+export component DateRangePickerTrigger(children: React.Node, ...rest: Rest) {
+  return <PopoverTrigger {...forwarded(rest)}>{children}</PopoverTrigger>;
+}
+export component DateRangePickerCalendar(children?: React.Node = <CalendarMonth />, ...rest: Rest) {
+  const picker = usePicker();
+  const dayRef = useRef<HTMLElement | null>(null);
+  return (
+    <PopoverBody {...forwarded(rest)} initialFocus={dayRef}>
+      <RangeCalendarRoot
+        value={picker.range}
+        minValue={picker.minValue}
+        maxValue={picker.maxValue}
+        isDateDisabled={picker.isDateDisabled}
+        focusedDayRef={dayRef}
+        onValueChange={(range) => {
+          picker.set(range);
+          picker.close();
+        }}
+      >
+        {children}
+      </RangeCalendarRoot>
+    </PopoverBody>
+  );
+}

package/drag-drop.js

@@ -0,0 +1,125 @@
+// @flow
+"use client";
+import { useState } from "@uniflowed/react";
+
+export type Drop = {| readonly keys: $ReadOnlyArray<string>, readonly target: string |};
+export type DragAndDrop = {
+  dragging: boolean,
+  announcement: string,
+  start: (key: string, label: string) => void,
+  drop: (target: string, incoming?: $ReadOnlyArray<string>, label?: string) => void,
+  cancel: () => void,
+  getDragProps: (
+    key: string,
+    label: string,
+  ) => {
+    draggable: boolean,
+    onDragStart: (event: $FlowFixMe) => void,
+    onDragEnd: () => void,
+    onKeyDown: (event: $FlowFixMe) => void,
+  },
+  getDropProps: (
+    target: string,
+    label?: string,
+  ) => {
+    onDragOver: (event: $FlowFixMe) => void,
+    onDrop: (event: $FlowFixMe) => void,
+    onKeyDown: (event: $FlowFixMe) => void,
+  },
+};
+const MIME = "application/x-uf-collection";
+
+/** Pointer drag data and keyboard lift/drop share one validated payload. */
+export hook useDragAndDrop(options: {
+  onDrop: (drop: Drop) => void,
+  disabled?: boolean,
+}): DragAndDrop {
+  const [keys, setKeys] = useState<$ReadOnlyArray<string>>([]);
+  const [announcement, announce] = useState("");
+  const cancel = () => {
+    setKeys([]);
+    announce("Drag cancelled");
+  };
+  const start = (key: string, label: string) => {
+    if (options.disabled) return;
+    setKeys([key]);
+    announce(`Picked up ${label}. Move to a drop target and press Enter. Escape cancels.`);
+  };
+  const drop = (
+    target: string,
+    incoming: $ReadOnlyArray<string> = keys,
+    label: string = target,
+  ) => {
+    if (options.disabled || incoming.length === 0) return;
+    options.onDrop({ keys: incoming, target });
+    setKeys([]);
+    announce(`Dropped on ${label}`);
+  };
+  return {
+    dragging: keys.length > 0,
+    announcement,
+    start,
+    drop,
+    cancel,
+    getDragProps: (key: string, label: string) => ({
+      draggable: !options.disabled,
+      onDragStart: (event: $FlowFixMe) => {
+        if (options.disabled) {
+          event.preventDefault();
+          return;
+        }
+        start(key, label);
+        event.dataTransfer.setData(MIME, JSON.stringify([key]));
+        event.dataTransfer.setData("text/plain", label);
+        event.dataTransfer.effectAllowed = "move";
+      },
+      onDragEnd: () => setKeys([]),
+      onKeyDown: (event: $FlowFixMe) => {
+        if (event.key === "Escape" && keys.length > 0) {
+          event.preventDefault();
+          cancel();
+        } else if (event.key === " " && !keys.length) {
+          event.preventDefault();
+          start(key, label);
+        }
+      },
+    }),
+    getDropProps: (target: string, label: string = target) => ({
+      onDragOver: (event: $FlowFixMe) => {
+        if (!options.disabled && Array.from(event.dataTransfer.types).includes(MIME)) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "move";
+        }
+      },
+      onDrop: (event: $FlowFixMe) => {
+        if (options.disabled) return;
+        const raw = event.dataTransfer.getData(MIME);
+        if (raw.length > 64000) return;
+        let incoming;
+        try {
+          incoming = JSON.parse(raw);
+        } catch {
+          return;
+        }
+        if (
+          !Array.isArray(incoming) ||
+          incoming.length === 0 ||
+          !incoming.every((key) => typeof key === "string")
+        )
+          return;
+        event.preventDefault();
+        drop(target, incoming, label);
+      },
+      onKeyDown: (event: $FlowFixMe) => {
+        if (keys.length === 0) return;
+        if (event.key === "Enter") {
+          event.preventDefault();
+          drop(target, keys, label);
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          cancel();
+        }
+      },
+    }),
+  };
+}

package/grid-list.js

@@ -0,0 +1,8 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { CollectionRoot } from "./internal/collection.js";
+import type { CollectionProps } from "./internal/collection.js";
+export component GridList(...props: CollectionProps) {
+  return <CollectionRoot options={props} kind="grid" />;
+}

package/i18n-provider.js

@@ -0,0 +1,89 @@
+// @flow
+"use client";
+
+import * as React from "@uniflowed/react";
+import { createContext, useContext, useMemo } from "@uniflowed/react";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { withProps } from "./internal/merge-props.js";
+
+export type Locale = {| readonly locale: string, readonly direction: "ltr" | "rtl" |};
+const LocaleContext: React.Context<Locale> = createContext({ locale: "en-US", direction: "ltr" });
+
+/** An explicit locale keeps server and client output identical. Nested providers form islands. */
+export component I18nProvider(
+  children: React.Node,
+  locale?: string,
+  direction?: "ltr" | "rtl",
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const parent = useLocale();
+  const state = useMemo((): Locale => {
+    const resolved = new Intl.Locale(locale ?? parent.locale);
+    const script = resolved.maximize().script;
+    const rtl = ["Arab", "Hebr", "Thaa", "Nkoo", "Adlm", "Rohg"].includes(script ?? "");
+    return {
+      locale: resolved.toString(),
+      direction: direction ?? (locale == null ? parent.direction : rtl ? "rtl" : "ltr"),
+    };
+  }, [locale, direction, parent]);
+  const props = withProps(rest, { children, lang: state.locale, dir: state.direction });
+  return (
+    <LocaleContext.Provider value={state}>
+      {render != null ? render(props) : <div {...props} />}
+    </LocaleContext.Provider>
+  );
+}
+
+export hook useLocale(): Locale {
+  return useContext(LocaleContext);
+}
+
+/** Share Intl's language-specific ordering with caller-owned collections. */
+export hook useCollator(options?: Intl$CollatorOptions): Intl$Collator {
+  const { locale } = useLocale();
+  return useMemo(() => new Intl.Collator(locale, options), [locale, options]);
+}
+
+// Bound the cache when a long-lived server serves many requested locales.
+const searchCollators = new Map<string, Intl$Collator>();
+function searchCollator(locale: string): Intl$Collator {
+  const cached = searchCollators.get(locale);
+  if (cached != null) return cached;
+  const collator = new Intl.Collator(locale, { usage: "search", sensitivity: "base" });
+  if (searchCollators.size >= 32) searchCollators.clear();
+  searchCollators.set(locale, collator);
+  return collator;
+}
+
+export function startsWithLocale(text: string, query: string, locale: string): boolean {
+  const value = text.normalize("NFC");
+  const needle = query.normalize("NFC");
+  return (
+    searchCollator(locale).compare(
+      Array.from(value).slice(0, Array.from(needle).length).join(""),
+      needle,
+    ) === 0
+  );
+}
+
+/** Filtering uses the same collation as typeahead; consumers own the result list. */
+export hook useFilter(): {
+  startsWith: (text: string, query: string) => boolean,
+  contains: (text: string, query: string) => boolean,
+} {
+  const { locale } = useLocale();
+  return useMemo(
+    () => ({
+      startsWith: (text, query) => startsWithLocale(text, query, locale),
+      contains: (text, query) => {
+        const chars = Array.from(text.normalize("NFC"));
+        return (
+          query === "" ||
+          chars.some((_, index) => startsWithLocale(chars.slice(index).join(""), query, locale))
+        );
+      },
+    }),
+    [locale],
+  );
+}