@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/rhf/fields.js

@@ -1,11 +1,25 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
+import {
+  useController
+} from "react-hook-form";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";
 import { Input, Select, Textarea } from "../components/ui.js";
 import { NumberField } from "../components/number-field.js";
 import { AmountInput } from "../components/amount-input.js";
-import { DatePicker } from "../components/date-picker.js";
+import {
+  DatePicker,
+  DateRangePicker
+} from "../components/date-picker.js";
+import { TimeInput } from "../components/time-input.js";
+import { IbanInput } from "../components/iban-input.js";
+import { PhoneInput } from "../components/phone-input.js";
+import { CountrySelect } from "../components/country-select.js";
+import { MonthPicker } from "../components/month-picker.js";
+import {
+  ToggleGroup
+} from "../components/toggle-group.js";
 import { Checkbox } from "../components/checkbox.js";
 import { EntityCombobox } from "../components/entity-combobox.js";
 import { Combobox } from "../components/combobox.js";
@@ -394,6 +408,351 @@ function RhfDateField({
     }
   );
 }
+function RhfDateRangePicker({
+  fromName,
+  toName,
+  control,
+  fromRules,
+  toRules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  inputClassName,
+  emptyValue = "",
+  ...pickerProps
+}) {
+  const rhfDisabled = excludeWhenDisabled ? disabled : void 0;
+  const to = useController({
+    name: toName,
+    control,
+    rules: toRules,
+    disabled: rhfDisabled
+  });
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: fromName,
+      rules: fromRules,
+      disabled: rhfDisabled,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FormItem, { className, children: /* @__PURE__ */ jsx(
+        RangeBody,
+        {
+          from: field,
+          fromState: fieldState,
+          to: to.field,
+          toState: to.fieldState,
+          label,
+          hint,
+          required,
+          disabled: Boolean(disabled),
+          emptyValue,
+          inputClassName,
+          pickerProps
+        }
+      ) })
+    }
+  );
+}
+function RangeBody({
+  from,
+  fromState,
+  to,
+  toState,
+  label,
+  hint,
+  required,
+  disabled,
+  emptyValue,
+  inputClassName,
+  pickerProps
+}) {
+  const { id, formItemId, formMessageId, describedBy } = useFormField();
+  useFocusHandle(from.ref, () => document.getElementById(formItemId));
+  useFocusHandle(to.ref, () => document.getElementById(formItemId));
+  const invalid = fromState.invalid || toState.invalid;
+  const messages = [fromState.error?.message, toState.error?.message].filter(
+    (m, i, all) => typeof m === "string" && m !== "" && all.indexOf(m) === i
+  );
+  const messageIds = messages.map((_, i) => `${formMessageId}-${i}`);
+  const fromValue = from.value;
+  const toValue = to.value;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasContent(label) && // FormLabel colours from the START's error alone (its context is that field);
+    // the pair's state says it here.
+    /* @__PURE__ */ jsx(FormLabel, { id: `${id}-label`, required, "data-error": invalid || void 0, children: label }),
+    /* @__PURE__ */ jsx(
+      DateRangePicker,
+      {
+        ...pickerProps,
+        id: formItemId,
+        "aria-describedby": [pickerProps["aria-describedby"], describedBy, ...messageIds].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": invalid || void 0,
+        "aria-required": required || void 0,
+        from: typeof fromValue === "string" ? fromValue : "",
+        to: typeof toValue === "string" ? toValue : "",
+        onChange: (f, t) => {
+          from.onChange(f === "" ? emptyValue : f);
+          to.onChange(t === "" ? emptyValue : t);
+          if (t !== "" || f === "") {
+            from.onBlur();
+            to.onBlur();
+          }
+        },
+        disabled: disabled || from.disabled || to.disabled,
+        invalid,
+        className: inputClassName ?? "w-full"
+      }
+    ),
+    hasContent(hint) && /* @__PURE__ */ jsx(FormDescription, { children: hint }),
+    messages.map((message, i) => (
+      // FormMessage's look and its rule: no `role="alert"` — read when focus reaches
+      // the trigger, which names these in its description.
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: messageIds[i],
+          "data-slot": "form-message",
+          className: "text-[11px] leading-tight text-[var(--danger)]",
+          children: message
+        },
+        message
+      )
+    ))
+  ] });
+}
+function RhfTimeInput({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  emptyValue = "",
+  ...timeProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid }) => {
+        const value = field.value;
+        return /* @__PURE__ */ jsx(
+          TimeInput,
+          {
+            "aria-required": required || void 0,
+            ...timeProps,
+            name: field.name,
+            ref: field.ref,
+            value: typeof value === "string" ? value : "",
+            onValueChange: (v) => field.onChange(v === "" ? emptyValue : v),
+            onBlur: field.onBlur,
+            disabled: field.disabled,
+            invalid
+          }
+        );
+      }
+    }
+  );
+}
+function RhfIbanInput({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  ...ibanProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid }) => {
+        const value = field.value;
+        return /* @__PURE__ */ jsx(
+          IbanInput,
+          {
+            "aria-required": required || void 0,
+            ...ibanProps,
+            name: field.name,
+            ref: field.ref,
+            value: typeof value === "string" ? value : "",
+            onValueChange: field.onChange,
+            onBlur: field.onBlur,
+            disabled: field.disabled,
+            invalid
+          }
+        );
+      }
+    }
+  );
+}
+function RhfPhoneInput({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  ...phoneProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid }) => {
+        const value = field.value;
+        return /* @__PURE__ */ jsx(
+          PhoneInput,
+          {
+            "aria-required": required || void 0,
+            ...phoneProps,
+            name: field.name,
+            ref: field.ref,
+            value: typeof value === "string" ? value : "",
+            onValueChange: field.onChange,
+            onBlur: field.onBlur,
+            disabled: field.disabled,
+            invalid
+          }
+        );
+      }
+    }
+  );
+}
+function RhfCountrySelect({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  clearable,
+  clearValue = null,
+  selectClassName,
+  labels,
+  ...countryProps
+}) {
+  const labelled = hasContent(label);
+  const ownLabels = typeof label === "string" ? { country: label, ...labels } : labels;
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid, labelId }) => {
+        const value = field.value;
+        return (
+          // FormControl clones this element with `id` / `aria-describedby` /
+          // `aria-invalid`, which the picker routes to its trigger.
+          /* @__PURE__ */ jsx(
+            CountrySelect,
+            {
+              "aria-required": required || void 0,
+              "aria-labelledby": labelled ? labelId : void 0,
+              ...countryProps,
+              labels: ownLabels,
+              className: selectClassName,
+              ref: field.ref,
+              value: typeof value === "string" ? value : null,
+              clearable,
+              onChange: (code) => field.onChange(code ?? clearValue),
+              onBlur: field.onBlur,
+              disabled: field.disabled,
+              invalid
+            }
+          )
+        );
+      }
+    }
+  );
+}
+function MonthControl({
+  field,
+  invalid,
+  id,
+  valueAsNumber,
+  mode,
+  inputClassName,
+  pickerProps,
+  required,
+  ...aria
+}) {
+  useFocusHandle(field.ref, () => document.getElementById(id));
+  const value = field.value;
+  return /* @__PURE__ */ jsx(
+    MonthPicker,
+    {
+      ...pickerProps,
+      ...aria,
+      "aria-required": required || void 0,
+      id,
+      mode,
+      value: value === null || value === void 0 ? "" : String(value),
+      onChange: (key) => {
+        field.onChange(mode === "year" && valueAsNumber ? Number(key) : key);
+        field.onBlur();
+      },
+      disabled: field.disabled,
+      invalid,
+      className: inputClassName
+    }
+  );
+}
+function RhfMonthPicker({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  inputClassName,
+  mode,
+  valueAsNumber,
+  ...pickerProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid, id }) => (
+        // FormControl clones this element with `aria-describedby` / `aria-invalid`,
+        // which MonthControl hands on to the picker's trigger.
+        /* @__PURE__ */ jsx(
+          MonthControl,
+          {
+            field,
+            invalid,
+            id,
+            mode,
+            valueAsNumber,
+            inputClassName,
+            pickerProps,
+            required
+          }
+        )
+      )
+    }
+  );
+}
 function RhfSelect({
   name,
   control,
@@ -476,6 +835,93 @@ function RhfCheckbox({
     }
   );
 }
+function RhfToggleGroup({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  ...groupProps
+}) {
+  const labelled = hasContent(label);
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      asControl: false,
+      render: ({ field, invalid, id, labelId, describedBy }) => /* @__PURE__ */ jsx(
+        ToggleControl,
+        {
+          field,
+          invalid,
+          required,
+          id,
+          labelledBy: labelled ? labelId : void 0,
+          describedBy,
+          groupProps
+        }
+      )
+    }
+  );
+}
+function ToggleControl({
+  field,
+  invalid,
+  required,
+  id,
+  labelledBy,
+  describedBy,
+  groupProps
+}) {
+  const { groupClassName, emptyValue, allowEmpty, semantics, caption, ...rest } = groupProps;
+  useFocusHandle(field.ref, () => {
+    const group = document.getElementById(id);
+    return group?.querySelector('button[tabindex="0"], button[aria-pressed="true"]') ?? group?.querySelector("button");
+  });
+  const onBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) field.onBlur();
+  };
+  const raw = field.value;
+  const value = raw === null || raw === void 0 || raw === "" ? null : String(raw);
+  const common = {
+    ...rest,
+    id,
+    className: groupClassName,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid || void 0,
+    disabled: field.disabled,
+    onBlur
+  };
+  if (allowEmpty) {
+    return /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        ...common,
+        allowEmpty: true,
+        caption,
+        value,
+        onChange: (v) => field.onChange(v ?? emptyValue ?? null)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      ...common,
+      allowEmpty: false,
+      semantics,
+      caption,
+      "aria-required": required && semantics !== "pressed" ? true : void 0,
+      value: value ?? "",
+      onChange: (v) => field.onChange(v)
+    }
+  );
+}
 function EntityControl({
   field,
   invalid,
@@ -618,14 +1064,21 @@ function TextComboControl({
 export {
   RhfCheckbox,
   RhfCombobox,
+  RhfCountrySelect,
   RhfDateField,
+  RhfDateRangePicker,
   RhfField,
+  RhfIbanInput,
   RhfIntegerField,
   RhfMoneyField,
+  RhfMonthPicker,
   RhfNumberField,
+  RhfPhoneInput,
   RhfSelect,
   RhfTextCombobox,
   RhfTextField,
-  RhfTextarea
+  RhfTextarea,
+  RhfTimeInput,
+  RhfToggleGroup
 };
 //# sourceMappingURL=fields.js.map