@tensor_1/react 2.35.0 → 2.36.0

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,129 @@
+import * as react from 'react';
+import { AriaAttributes, CSSProperties } from 'react';
+import { CalendarWeekday } from '../calendar-model.js';
+import { Placement } from '../overlay-position.js';
+
+/** Every word `DatePicker` renders or announces. */
+interface DatePickerLabels {
+    /** The calendar button's name while no date is set. */
+    open: string;
+    /** The calendar button's name with a date set; `{date}` is the date in full. */
+    openSelected: string;
+    /** The calendar popover's name. */
+    calendar: string;
+    previousMonth: string;
+    nextMonth: string;
+    /**
+     * Shown when the typed text is not a date; `{pattern}` is the expected shape: the
+     * `placeholder` when one is given, else the locale's (`DD.MM.YYYY`).
+     */
+    invalidDate: string;
+    /** The same, when the shape is not known: a custom `parseDate` and no `placeholder`. */
+    notADate: string;
+    /** Shown when the typed date is outside `min` / `max` or refused by `isUnavailable`. */
+    unavailable: string;
+}
+declare const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels;
+/** Why typed text was refused: not a date, or a date that cannot be chosen. */
+type DateInputProblem = 'format' | 'unavailable';
+interface DatePickerProps {
+    /** The date as `YYYY-MM-DD`, or `null` for none. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    /** First and last selectable day (`YYYY-MM-DD`). The calendar does not go past them. */
+    min?: string;
+    max?: string;
+    /** Days inside `min` / `max` that cannot be chosen (weekends, a freeze, days already taken). */
+    isUnavailable?: (date: string) => boolean;
+    /**
+     * How the field writes a date. Default: the locale's numeric date (22.11.2026, 11/22/2026).
+     * Pass `parseDate` with it when your format is not three numbers, so typing still works.
+     */
+    formatDate?: (date: string) => string;
+    /** Read typed text into `YYYY-MM-DD`, or `null` when it is not a date. Default: ISO or the locale's order. */
+    parseDate?: (text: string) => string | null;
+    locale?: string;
+    /** First column of the calendar, in `Date.getUTCDay()` numbering (0 = Sunday). Default 1, Monday. */
+    weekStartsOn?: CalendarWeekday;
+    /**
+     * The ISO date that gets the today ring. Defaults to the viewer's local date; pass it when
+     * the product works in another zone, or `null` for no today marker.
+     */
+    today?: string | null;
+    /** Default: the locale's date shape, e.g. `DD.MM.YYYY`. */
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    /** Submits the ISO value under this name (a hidden input), whatever the field shows. */
+    name?: string;
+    /** Lands on the text input, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-required'?: AriaAttributes['aria-required'];
+    /** Where the calendar opens. Default `'bottom-start'`; it flips and shifts to stay on screen. */
+    placement?: Placement;
+    /** Told when typed text is refused, and `null` once the field is fine again. */
+    onInputProblem?: (problem: DateInputProblem | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** Translatable words; English defaults in {@link DEFAULT_DATE_PICKER_LABELS}. */
+    labels?: Partial<DatePickerLabels>;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A single date as a form field (HAR-1383): a text input that shows the formatted date and
+ * accepts a typed one, and a calendar button that opens one month in a popover. The value is an
+ * ISO `YYYY-MM-DD` string. Typed text is read on Enter and when focus leaves the field: ISO or
+ * the locale's own order (`3.4.2026` in German, `4/3/2026` in en-US); text that is not a date,
+ * or a date that cannot be chosen, marks the field invalid, says why, and leaves `value` alone.
+ * ArrowDown in the field opens the calendar; Escape closes it and focus returns to the field.
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+/** The words `DateTimePicker` adds to the date field's own ({@link DatePickerLabels}). */
+interface DateTimePickerLabels extends DatePickerLabels {
+    /** Name of the date input when the picker has its own `aria-label`. */
+    date: string;
+    /** Name of the time input. */
+    time: string;
+    /** Name of the time input inside a labelled field; `{label}` is the field's label. */
+    timeOf: string;
+    /** Read after the time; `{zone}` is the zone shown beside it. */
+    timeZone: string;
+}
+declare const DEFAULT_DATE_TIME_PICKER_LABELS: DateTimePickerLabels;
+interface DateTimePickerProps extends Omit<DatePickerProps, 'value' | 'onValueChange' | 'labels' | 'min' | 'max'> {
+    /** A wall-clock date and time, `YYYY-MM-DDTHH:mm` (what `datetime-local` holds), or `null`. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    /** First and last selectable day; a date-time is read by its date. */
+    min?: string;
+    max?: string;
+    /**
+     * The IANA zone the wall clock is in (`Europe/Vienna`). Its short name on the chosen day is
+     * shown beside the time. Without it the viewer's own zone is shown. The value itself carries
+     * no zone: turning it into an instant is the product's job.
+     */
+    timeZone?: string;
+    /** Text shown instead of the zone's short name ("Vienna time", "UTC+2"); `null` shows none. */
+    timeZoneLabel?: string | null;
+    /** Minutes between time steps. Default 1. */
+    minuteStep?: number;
+    /** The time a date gets when it is chosen before any time. Default `'00:00'`. */
+    defaultTime?: string;
+    labels?: Partial<DateTimePickerLabels>;
+}
+/**
+ * A date and a time as one field (HAR-1383): the {@link DatePicker} and a time input, with the
+ * time zone the pair is in shown beside them. The value is `YYYY-MM-DDTHH:mm`, the shape
+ * `datetime-local` uses, so it replaces that input without changing what a form submits.
+ * Clearing the date clears the value; a time alone is not a value.
+ */
+declare const DateTimePicker: react.ForwardRefExoticComponent<DateTimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+export { DEFAULT_DATE_PICKER_LABELS, DEFAULT_DATE_TIME_PICKER_LABELS, type DateInputProblem, DatePicker, type DatePickerLabels, type DatePickerProps, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps };

package/dist/components/DatePicker.js

@@ -0,0 +1,340 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { isDateUnavailable } from "../calendar-model.js";
+import { cx } from "../cx.js";
+import { datePattern, formatDateKey, isValidDateKey, joinDateTime, parseDateInput, splitDateTime, timeZoneName } from "../date-field-model.js";
+import { fillLabel } from "../fill-label.js";
+import { CalendarIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+import { fullDateLabel, localDateKey, MonthCalendar, useFieldPopover } from "./DateFieldParts.js";
+import { Popover } from "./Popover.js";
+const DEFAULT_DATE_PICKER_LABELS = {
+  open: "Choose date",
+  openSelected: "Change date, {date}",
+  calendar: "Calendar",
+  previousMonth: "Show previous month",
+  nextMonth: "Show next month",
+  invalidDate: "Enter a date as {pattern}.",
+  notADate: "That is not a date.",
+  unavailable: "That date is not available."
+};
+const DatePicker = forwardRef(function DatePicker2({
+  value,
+  onValueChange,
+  min,
+  max,
+  isUnavailable,
+  formatDate,
+  parseDate,
+  locale,
+  weekStartsOn = 1,
+  today,
+  placeholder,
+  size = "md",
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  name,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  placement = "bottom-start",
+  onInputProblem,
+  onOpenChange,
+  labels: labelOverrides,
+  className,
+  style
+}, forwardedRef) {
+  const uid = useId();
+  const id = idProp ?? `${uid}-input`;
+  const popoverId = `${uid}-calendar`;
+  const errorId = `${uid}-error`;
+  const labels = { ...DEFAULT_DATE_PICKER_LABELS, ...useUixLabels().datePicker, ...labelOverrides };
+  const anchorRef = useRef(null);
+  const inputRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
+  const [text, setText] = useState(() => value ? format(value) : "");
+  const [problem, setProblemState] = useState(null);
+  const reported = useRef(null);
+  const setProblem = (next) => {
+    if (next !== reported.current) {
+      reported.current = next;
+      onInputProblem?.(next);
+    }
+    setProblemState(next);
+  };
+  useEffect(() => {
+    setText(value ? format(value) : "");
+    setProblem(null);
+  }, [value, locale]);
+  const { open, show, hide, triggerProps } = useFieldPopover(popoverId, () => inputRef.current?.focus({ preventScroll: true }), onOpenChange);
+  const locked = !!disabled || !!readOnly;
+  const commit = () => {
+    const typed = text.trim();
+    if (!typed) {
+      setProblem(null);
+      if (text) setText("");
+      if (value !== null) onValueChange(null);
+      return true;
+    }
+    if (value && typed === format(value)) {
+      setProblem(null);
+      return true;
+    }
+    const parsed = parseDate ? parseDate(typed) : parseDateInput(typed, locale);
+    if (!parsed || !isValidDateKey(parsed)) {
+      setProblem("format");
+      return false;
+    }
+    if (isDateUnavailable(parsed, { min, max, isDisabled: isUnavailable })) {
+      setProblem("unavailable");
+      return false;
+    }
+    setProblem(null);
+    setText(format(parsed));
+    if (parsed !== value) onValueChange(parsed);
+    return true;
+  };
+  const onInputKeyDown = (event) => {
+    if (locked) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      show();
+    } else if (event.key === "Enter" && text.trim() !== (value ? format(value) : "")) {
+      event.preventDefault();
+      commit();
+    }
+  };
+  const choose = (date) => {
+    setProblem(null);
+    setText(format(date));
+    if (date !== value) onValueChange(date);
+    hide(false);
+    inputRef.current?.focus({ preventScroll: true });
+  };
+  const todayDate = today === void 0 ? localDateKey() : today;
+  const pattern = datePattern(locale);
+  const expected = placeholder ?? (parseDate ? null : pattern);
+  const describedBy = [ariaDescribedBy, problem ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const isInvalid = !!invalid || !!problem || ariaInvalid === true || ariaInvalid === "true";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: cx("uix-date-picker", size === "sm" && "uix-date-picker--sm", className),
+      style,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !open) return;
+        event.stopPropagation();
+        event.preventDefault();
+        hide();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__control", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "text",
+              autoComplete: "off",
+              spellCheck: false,
+              className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-picker__input"),
+              value: text,
+              placeholder: placeholder ?? (formatDate ? void 0 : pattern),
+              disabled,
+              readOnly,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": describedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": ariaRequired,
+              onChange: (event) => {
+                setText(event.target.value);
+                if (problem) setProblem(null);
+              },
+              onBlur: () => {
+                if (!locked) commit();
+              },
+              onKeyDown: onInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-date-picker__toggle",
+              disabled: locked,
+              "aria-label": value && isValidDateKey(value) ? fillLabel(labels.openSelected, { date: fullDateLabel(value, locale) }) : labels.open,
+              ...triggerProps,
+              children: /* @__PURE__ */ jsx(CalendarIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", disabled }),
+        problem && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error uix-date-picker__error", role: "alert", children: problem !== "format" ? labels.unavailable : expected ? fillLabel(labels.invalidDate, { pattern: expected }) : labels.notADate }),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: popoverId,
+            anchor: anchorRef,
+            placement,
+            className: "uix-date-picker__popover",
+            role: "dialog",
+            "aria-label": labels.calendar,
+            closeWhenAnchorHidden: true,
+            children: open && /* @__PURE__ */ jsx(
+              MonthCalendar,
+              {
+                value,
+                onSelect: choose,
+                initialDate: value && isValidDateKey(value) ? value : todayDate ?? localDateKey(),
+                min,
+                max,
+                isUnavailable,
+                locale,
+                weekStartsOn,
+                today: todayDate,
+                labels,
+                autoFocus: true
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+const DEFAULT_DATE_TIME_PICKER_LABELS = {
+  ...DEFAULT_DATE_PICKER_LABELS,
+  date: "Date",
+  time: "Time",
+  timeOf: "{label}, time",
+  timeZone: "Time zone: {zone}"
+};
+const DateTimePicker = forwardRef(function DateTimePicker2({
+  value,
+  onValueChange,
+  timeZone,
+  timeZoneLabel,
+  minuteStep = 1,
+  defaultTime = "00:00",
+  min,
+  max,
+  name,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  labels: labelOverrides,
+  locale,
+  size = "md",
+  disabled,
+  readOnly,
+  required,
+  className,
+  style,
+  ...dateProps
+}, forwardedRef) {
+  const uid = useId();
+  const id = idProp ?? `${uid}-date`;
+  const zoneId = `${uid}-zone`;
+  const labels = { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...useUixLabels().dateTimePicker, ...labelOverrides };
+  const { date, time } = splitDateTime(value);
+  const dateRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => dateRef.current);
+  const [pendingTime, setPendingTime] = useState("");
+  const shownTime = date ? time : pendingTime;
+  const [fieldLabel, setFieldLabel] = useState("");
+  const [viewerZone, setViewerZone] = useState(null);
+  const grouped = !!ariaLabel || !!ariaLabelledBy;
+  useEffect(() => {
+    if (!grouped) setFieldLabel(dateRef.current?.labels?.[0]?.textContent?.trim() ?? "");
+    if (!timeZone) {
+      try {
+        setViewerZone(new Intl.DateTimeFormat().resolvedOptions().timeZone);
+      } catch {
+      }
+    }
+  }, [grouped, timeZone]);
+  const zone = timeZone ?? viewerZone;
+  const zoneText = timeZoneLabel === null ? null : timeZoneLabel ?? (zone ? timeZoneName(zone, date, locale) : null);
+  const timeName = grouped ? labels.time : fieldLabel ? fillLabel(labels.timeOf, { label: fieldLabel }) : labels.time;
+  const step = Math.max(1, Math.round(minuteStep)) * 60;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-date-time-picker", size === "sm" && "uix-date-time-picker--sm", className),
+      style,
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: [
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            ...dateProps,
+            ref: dateRef,
+            id,
+            value: date,
+            locale,
+            size,
+            min: min?.slice(0, 10),
+            max: max?.slice(0, 10),
+            disabled,
+            readOnly,
+            required,
+            "aria-label": grouped ? labels.date : void 0,
+            "aria-describedby": ariaDescribedBy,
+            labels,
+            onValueChange: (next) => {
+              if (!next) {
+                setPendingTime("");
+                onValueChange(null);
+                return;
+              }
+              onValueChange(joinDateTime(next, shownTime, defaultTime));
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "time",
+            className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-time-picker__time"),
+            value: shownTime,
+            step,
+            disabled,
+            readOnly,
+            required: required && !!date,
+            "aria-label": timeName,
+            "aria-describedby": zoneText ? zoneId : void 0,
+            onChange: (event) => {
+              const next = event.target.value;
+              if (date) onValueChange(joinDateTime(date, next, defaultTime));
+              else setPendingTime(next);
+            }
+          }
+        ),
+        zoneText && /* @__PURE__ */ jsxs("span", { className: "uix-date-time-picker__zone", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: zoneText }),
+          /* @__PURE__ */ jsx("span", { id: zoneId, className: "uix-visually-hidden", children: fillLabel(labels.timeZone, { zone: zoneText }) })
+        ] }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", disabled })
+      ]
+    }
+  );
+});
+export {
+  DEFAULT_DATE_PICKER_LABELS,
+  DEFAULT_DATE_TIME_PICKER_LABELS,
+  DatePicker,
+  DateTimePicker
+};

package/dist/components/DateRangePicker.d.ts

@@ -1,5 +1,7 @@
 import * as react from 'react';
-import { DateRangeValue } from '../calendar-model.js';
+import { AriaAttributes } from 'react';
+import { DateRangeValue, CalendarWeekday } from '../calendar-model.js';
+import { Placement } from '../overlay-position.js';
 
 /**
  * Every word the picker renders or announces (TENSOR RX-125, UIX-13). `{start}` and
@@ -16,6 +18,12 @@ interface DateRangePickerLabels {
     rangeStart: string;
     rangeEnd: string;
     inRange: string;
+    /** Field mode: what the trigger shows while no range is set. */
+    placeholder: string;
+    /** Field mode: the trigger's text for a start without an end; `{start}`. */
+    fieldStart: string;
+    /** Field mode: the trigger's text for a range; `{start}`, `{end}`. */
+    fieldRange: string;
 }
 declare const DEFAULT_DATE_RANGE_PICKER_LABELS: DateRangePickerLabels;
 interface DateRangePickerProps {
@@ -41,8 +49,31 @@ interface DateRangePickerProps {
      * clock and zone may differ from the viewer's), or `null` for no today marker.
      */
     today?: string | null;
+    /** First column of each month, in `Date.getUTCDay()` numbering (0 = Sunday). Default 1, Monday. */
+    weekStartsOn?: CalendarWeekday;
+    /**
+     * `'inline'` (default) draws the months in the page. `'field'` draws a form control that
+     * shows the range and opens the same months in a popover (HAR-1383): for forms and filter
+     * bars. It closes once the range has both ends; Escape closes it and returns focus.
+     */
+    mode?: 'inline' | 'field';
+    /** Field mode: how the trigger writes a date. Default: the locale's numeric date. */
+    formatDate?: (date: string) => string;
+    /** Field mode: lands on the trigger, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    /** Field mode. */
+    size?: 'sm' | 'md';
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    /** Field mode: where the popover opens. Default `'bottom-start'`. */
+    placement?: Placement;
+    /** Field mode. */
+    onOpenChange?: (open: boolean) => void;
 }
-/** Controlled, two-month range picker using the UIx calendar language. */
-declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, labels: labelOverrides, today, }: DateRangePickerProps): react.JSX.Element;
+/**
+ * Controlled date-range picker using the UIx calendar language: two months inline, or with
+ * `mode="field"` a form control that opens them in a popover.
+ */
+declare function DateRangePicker({ labels: labelOverrides, ...props }: DateRangePickerProps): react.JSX.Element;
 
 export { DEFAULT_DATE_RANGE_PICKER_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps };