@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/rhf/fields.js

@@ -0,0 +1,601 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+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 { Checkbox } from "../components/checkbox.js";
+import { EntityCombobox } from "../components/entity-combobox.js";
+import { Combobox } from "../components/combobox.js";
+import { cn } from "../lib/cn.js";
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function RhfLabel({ required, children }) {
+  const { id } = useFormField();
+  return /* @__PURE__ */ jsx(FormLabel, { id: `${id}-label`, required, children });
+}
+function ControlSlot({
+  field,
+  fieldState,
+  render,
+  asControl
+}) {
+  const { id, formItemId, describedBy } = useFormField();
+  const element = render({
+    field,
+    fieldState,
+    invalid: fieldState.invalid,
+    error: fieldState.error?.message,
+    id: formItemId,
+    labelId: `${id}-label`,
+    describedBy
+  });
+  return asControl ? /* @__PURE__ */ jsx(FormControl, { children: element }) : element;
+}
+function RhfField({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  render,
+  asControl = true,
+  message = true,
+  showLabel = true
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      rules,
+      disabled,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        showLabel && hasContent(label) && /* @__PURE__ */ jsx(RhfLabel, { required, children: label }),
+        /* @__PURE__ */ jsx(ControlSlot, { field, fieldState, render, asControl }),
+        hasContent(hint) && /* @__PURE__ */ jsx(FormDescription, { children: hint }),
+        message && /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function useFocusHandle(ref, find) {
+  const findRef = useRef(find);
+  useLayoutEffect(() => {
+    findRef.current = find;
+  });
+  useLayoutEffect(() => {
+    ref({ focus: () => findRef.current()?.focus() });
+  }, [ref]);
+}
+function RhfTextField({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  ...inputProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      render: ({ field, invalid }) => /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-required": required || void 0,
+          ...inputProps,
+          name: field.name,
+          ref: field.ref,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          disabled: field.disabled,
+          invalid
+        }
+      )
+    }
+  );
+}
+function RhfTextarea({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  inputClassName,
+  ...areaProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      render: ({ field, invalid }) => /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          "aria-required": required || void 0,
+          ...areaProps,
+          className: inputClassName,
+          name: field.name,
+          ref: field.ref,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          disabled: field.disabled,
+          invalid
+        }
+      )
+    }
+  );
+}
+function toNumber(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  const n = typeof value === "number" ? value : Number(String(value).replace(",", "."));
+  return Number.isFinite(n) ? n : null;
+}
+function RhfNumberField({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  emptyValue = null,
+  nullable = true,
+  ...numberProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      render: ({ field, invalid, id }) => (
+        // FormControl clones this element with `id` / `aria-describedby` /
+        // `aria-invalid`, which NumberControl hands on to the field.
+        /* @__PURE__ */ jsx(
+          NumberControl,
+          {
+            field,
+            invalid,
+            required,
+            id,
+            emptyValue,
+            nullable,
+            numberProps
+          }
+        )
+      )
+    }
+  );
+}
+function NumberControl({
+  field,
+  invalid,
+  required,
+  id,
+  emptyValue,
+  nullable,
+  numberProps,
+  ...aria
+}) {
+  useFocusHandle(field.ref, () => document.getElementById(id));
+  return /* @__PURE__ */ jsx(
+    NumberField,
+    {
+      ...numberProps,
+      "aria-describedby": aria["aria-describedby"],
+      "aria-invalid": aria["aria-invalid"],
+      "aria-required": required || void 0,
+      id,
+      value: toNumber(field.value),
+      onCommit: (n) => {
+        field.onChange(n ?? emptyValue);
+        field.onBlur();
+      },
+      nullable,
+      disabled: field.disabled,
+      invalid
+    }
+  );
+}
+function parseAmount(text) {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  if (!/^-?\d*[.,]?\d*$/.test(trimmed)) return void 0;
+  const n = Number(trimmed.replace(",", "."));
+  return Number.isFinite(n) ? n : void 0;
+}
+function MoneyControl({
+  field,
+  invalid,
+  required,
+  id,
+  describedBy,
+  props
+}) {
+  const { valueAs = "number", emptyValue = null, ariaLabel, ...amountProps } = props;
+  const value = field.value;
+  const external = value === null || value === void 0 ? "" : String(value);
+  const [draft, setDraft] = useState(external);
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    const current = valueAs === "string" ? draft : parseAmount(draft);
+    const same = valueAs === "string" ? current === external : current === toNumber(value);
+    if (!same) setDraft(external);
+  }
+  const input = useRef(null);
+  const onBlur = field.onBlur;
+  useLayoutEffect(() => {
+    const el = input.current;
+    if (!el) return;
+    el.addEventListener("blur", onBlur);
+    return () => el.removeEventListener("blur", onBlur);
+  }, [onBlur]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    AmountInput,
+    {
+      ...amountProps,
+      ariaLabel,
+      id,
+      "aria-describedby": describedBy,
+      "aria-required": required || void 0,
+      ref: (el) => {
+        input.current = el;
+        field.ref(el);
+      },
+      value: draft,
+      disabled: field.disabled,
+      invalid,
+      onChange: (text) => {
+        setDraft(text);
+        if (valueAs === "string") {
+          field.onChange(text);
+          return;
+        }
+        const parsed = parseAmount(text);
+        if (parsed === void 0) return;
+        field.onChange(parsed ?? emptyValue);
+      }
+    }
+  ) });
+}
+function RhfMoneyField({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  ...amountProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      asControl: false,
+      render: ({ field, invalid, id, describedBy }) => /* @__PURE__ */ jsx(
+        MoneyControl,
+        {
+          field,
+          invalid,
+          required,
+          id,
+          describedBy,
+          props: amountProps
+        }
+      )
+    }
+  );
+}
+function DateControl({
+  field,
+  invalid,
+  required,
+  id,
+  emptyValue,
+  inputClassName,
+  pickerProps,
+  ...aria
+}) {
+  useFocusHandle(field.ref, () => document.getElementById(id));
+  const value = field.value;
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      ...pickerProps,
+      ...aria,
+      "aria-required": required || void 0,
+      id,
+      value: typeof value === "string" ? value : "",
+      onChange: (iso) => {
+        field.onChange(iso === "" ? emptyValue : iso);
+        field.onBlur();
+      },
+      disabled: field.disabled,
+      invalid,
+      className: inputClassName ?? "w-full"
+    }
+  );
+}
+function RhfDateField({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  inputClassName,
+  emptyValue = "",
+  ...pickerProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      render: ({ field, invalid, id }) => (
+        // FormControl clones this element with `aria-describedby` / `aria-invalid`,
+        // which DateControl hands on to the picker's trigger.
+        /* @__PURE__ */ jsx(
+          DateControl,
+          {
+            field,
+            invalid,
+            required,
+            id,
+            emptyValue,
+            inputClassName,
+            pickerProps
+          }
+        )
+      )
+    }
+  );
+}
+function RhfSelect({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  options,
+  children,
+  placeholder,
+  valueAsNumber,
+  selectClassName,
+  ...selectProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      render: ({ field, invalid }) => /* @__PURE__ */ jsxs(
+        Select,
+        {
+          "aria-required": required || void 0,
+          ...selectProps,
+          className: cn("w-full", selectClassName),
+          name: field.name,
+          ref: field.ref,
+          value: field.value ?? "",
+          onChange: (e) => {
+            const raw = e.target.value;
+            field.onChange(valueAsNumber && raw !== "" ? Number(raw) : raw);
+          },
+          onBlur: field.onBlur,
+          disabled: field.disabled,
+          invalid,
+          children: [
+            placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
+            options ? options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, String(o.value))) : children
+          ]
+        }
+      )
+    }
+  );
+}
+function RhfCheckbox({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  ...boxProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, required, disabled, className },
+      showLabel: false,
+      render: ({ field, invalid }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          ...boxProps,
+          ref: field.ref,
+          name: field.name,
+          checked: Boolean(field.value),
+          onCheckedChange: field.onChange,
+          onBlur: field.onBlur,
+          disabled: field.disabled,
+          required,
+          invalid,
+          label,
+          description: hint
+        }
+      )
+    }
+  );
+}
+function EntityControl({
+  field,
+  invalid,
+  required,
+  error,
+  id,
+  describedBy,
+  clearValue,
+  comboClassName,
+  comboProps
+}) {
+  const box = useRef(null);
+  useFocusHandle(field.ref, () => document.getElementById(id));
+  const onBlur = field.onBlur;
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    el.addEventListener("focusout", onBlur);
+    return () => el.removeEventListener("focusout", onBlur);
+  }, [onBlur]);
+  const value = field.value;
+  return /* @__PURE__ */ jsx("div", { ref: box, children: /* @__PURE__ */ jsx(
+    EntityCombobox,
+    {
+      ...comboProps,
+      className: comboClassName,
+      id,
+      "aria-describedby": describedBy,
+      "aria-required": required || void 0,
+      value: value ?? null,
+      clearValue,
+      onChange: (v) => field.onChange(v),
+      disabled: field.disabled,
+      invalid,
+      error
+    }
+  ) });
+}
+function RhfCombobox({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  clearValue = null,
+  comboClassName,
+  ...comboProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      asControl: false,
+      message: false,
+      render: ({ field, invalid, error, id, describedBy }) => /* @__PURE__ */ jsx(
+        EntityControl,
+        {
+          field,
+          invalid,
+          required,
+          error,
+          id,
+          describedBy,
+          clearValue,
+          comboClassName,
+          comboProps
+        }
+      )
+    }
+  );
+}
+function RhfTextCombobox({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  className,
+  comboClassName,
+  ...comboProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, className },
+      asControl: false,
+      message: false,
+      render: ({ field, invalid, error, id, describedBy }) => /* @__PURE__ */ jsx(
+        TextComboControl,
+        {
+          field,
+          invalid,
+          required,
+          error,
+          id,
+          describedBy,
+          className: comboClassName,
+          comboProps
+        }
+      )
+    }
+  );
+}
+function TextComboControl({
+  field,
+  invalid,
+  required,
+  error,
+  id,
+  describedBy,
+  className,
+  comboProps
+}) {
+  useFocusHandle(field.ref, () => document.getElementById(id));
+  const value = field.value;
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      ...comboProps,
+      id,
+      "aria-describedby": describedBy,
+      "aria-required": required || void 0,
+      className,
+      value: typeof value === "string" ? value : value == null ? "" : String(value),
+      onChange: field.onChange,
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      invalid,
+      error
+    }
+  );
+}
+export {
+  RhfCheckbox,
+  RhfCombobox,
+  RhfDateField,
+  RhfField,
+  RhfMoneyField,
+  RhfNumberField,
+  RhfSelect,
+  RhfTextCombobox,
+  RhfTextField,
+  RhfTextarea
+};
+//# sourceMappingURL=fields.js.map