@oondemand/oon-core-front 0.3.31 → 0.3.33

package/dist/index.js

@@ -1369,6 +1369,111 @@ function ReferenceSelect({
   ] });
 }
 
+// src/components/internal/inputMasks.ts
+var digitsOnly = (value) => String(value ?? "").replace(/\D/g, "");
+var normalizedName = (value) => String(value ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+var hasLetters = (value) => /[a-zA-Z]/.test(String(value ?? ""));
+function personType(values) {
+  return normalizedName(values?.tipo ?? values?.tipoPessoa ?? values?.pessoaTipo);
+}
+function resolveInputMask(field, values) {
+  if (field.mask) return field.mask;
+  if (field.kind === "currency" || field.kind === "currencyConverted") return "currency";
+  if (field.kind && !["string", "number"].includes(field.kind)) return void 0;
+  const name = normalizedName(field.field);
+  if (!name) return void 0;
+  if (name.includes("cnpj")) return "cnpj";
+  if (name.includes("cpf")) return "cpf";
+  if (/documento|document|inscricaofiscal/.test(name)) {
+    const tipo = personType(values);
+    if (tipo === "est" || tipo.includes("estrangeir") || tipo.includes("foreign")) return void 0;
+    if (tipo === "pf" || tipo.includes("fisica")) return "cpf";
+    if (tipo === "pj" || tipo.includes("juridica")) return "cnpj";
+    return "document";
+  }
+  if (/telefone|celular|whatsapp|fone|phone/.test(name)) return "phone";
+  return void 0;
+}
+function formatCpf(value) {
+  const digits = digitsOnly(value).slice(0, 11);
+  return digits.replace(/^(\d{3})(\d)/, "$1.$2").replace(/^(\d{3})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1-$2");
+}
+function formatCnpj(value) {
+  const digits = digitsOnly(value).slice(0, 14);
+  return digits.replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\/\d{4})(\d)/, "$1-$2");
+}
+function formatPhone(value) {
+  const digits = digitsOnly(value).slice(0, 11);
+  if (!digits) return "";
+  if (digits.length <= 2) return `(${digits}`;
+  const ddd = digits.slice(0, 2);
+  const number = digits.slice(2);
+  const prefixLength = number.length > 8 ? 5 : 4;
+  const prefix = number.slice(0, prefixLength);
+  const suffix = number.slice(prefixLength);
+  return `(${ddd}) ${prefix}${suffix ? `-${suffix}` : ""}`;
+}
+function parseCurrencyInitial(value) {
+  if (value == null || value === "") return "";
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : "";
+  const raw = String(value).trim();
+  if (!raw) return "";
+  if (/^-?\d+(?:\.\d+)?$/.test(raw)) return raw;
+  const localized = raw.replace(/[^\d,.-]/g, "").replace(/\.(?=\d{3}(?:\D|$))/g, "").replace(",", ".");
+  const parsed = Number(localized);
+  return Number.isFinite(parsed) ? String(parsed) : "";
+}
+function formatCurrency(value) {
+  const normalized = parseCurrencyInitial(value);
+  if (!normalized) return "";
+  const numeric = Number(normalized);
+  if (!Number.isFinite(numeric)) return "";
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(numeric);
+}
+function normalizeMaskedValue(value, mask) {
+  if (!mask) return String(value ?? "");
+  if (mask === "currency") return parseCurrencyInitial(value);
+  if (mask === "document" && hasLetters(value)) return String(value ?? "").slice(0, 30);
+  const limit = mask === "cnpj" ? 14 : mask === "cpf" ? 11 : mask === "phone" ? 11 : 14;
+  return digitsOnly(value).slice(0, limit);
+}
+function formatMaskedValue(value, mask) {
+  if (!mask) return String(value ?? "");
+  if (mask === "currency") return formatCurrency(value);
+  if (mask === "phone") return formatPhone(value);
+  if (mask === "cpf") return formatCpf(value);
+  if (mask === "cnpj") return formatCnpj(value);
+  if (hasLetters(value)) return String(value ?? "");
+  const digits = digitsOnly(value);
+  return digits.length > 11 ? formatCnpj(digits) : formatCpf(digits);
+}
+function parseMaskedInput(value, mask) {
+  if (!mask) return value;
+  if (mask === "currency") {
+    const digits = digitsOnly(value);
+    if (!digits) return "";
+    const amount = Number(digits) / 100;
+    return `${value.includes("-") ? "-" : ""}${amount.toFixed(2)}`;
+  }
+  return normalizeMaskedValue(value, mask);
+}
+function inputModeForMask(mask) {
+  if (mask === "document") return "text";
+  return mask ? "numeric" : void 0;
+}
+function maxLengthForMask(mask) {
+  if (mask === "cpf") return 14;
+  if (mask === "cnpj") return 18;
+  if (mask === "document") return 30;
+  if (mask === "phone") return 15;
+  return void 0;
+}
+
 // src/components/internal/DynamicForm.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var idFor = (field) => `oon-form-field-${field.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
@@ -1404,6 +1509,9 @@ function toValue(value, kind) {
   }
   return String(value);
 }
+function initialFieldValue(field, value) {
+  return normalizeMaskedValue(toValue(value, field.kind), resolveInputMask(field));
+}
 function coerce(value, kind) {
   if (value === "") return void 0;
   if (["number", "currency", "currencyConverted"].includes(kind ?? "")) return Number(value);
@@ -1509,7 +1617,7 @@ function resolveReference(field, values) {
   return { filters, disabled: missing.length > 0 };
 }
 function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submitting, error, onSubmit, onCancel, onFieldChange }) {
-  const [values, setValues] = useState5(() => Object.fromEntries(fields.map((field) => [field.field, toValue(initialValues?.[field.field], field.kind)])));
+  const [values, setValues] = useState5(() => Object.fromEntries(fields.map((field) => [field.field, initialFieldValue(field, initialValues?.[field.field])])));
   const [errors, setErrors] = useState5({});
   const [dismissed, setDismissed] = useState5(false);
   const items = useMemo4(() => buildItems(fields), [fields]);
@@ -1632,7 +1740,7 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
     }
     if (field.kind === "ref" && field.ref) {
       const reference = resolveReference(field, values);
-      return wrap(/* @__PURE__ */ jsx9(ReferenceSelect, { field: field.field, inputId: id, errorId, label, refModel: field.ref, value: values[field.field] ?? "", initialValue: initialValues?.[field.field], required: field.required, invalid: !!message, error: message, filters: reference.filters, emptyFields: field.referenceEmptyFields, disabled: reference.disabled, disabledMessage: field.referenceDisabledMessage, onChange: (value) => change(field.field, value) }));
+      return wrap(/* @__PURE__ */ jsx9(ReferenceSelect, { field: field.field, inputId: id, errorId, label, refModel: field.ref, value: values[field.field] ?? "", initialValue: initialValues?.[field.field], required: field.required, invalid: !!message, error: message, filters: reference.filters, emptyFields: field.referenceEmptyFields, disabled: reference.disabled, disabledMessage: field.referenceDisabledMessage, onChange: (value2) => change(field.field, value2) }));
     }
     if (field.kind === "enum" && field.options?.length) return wrap(/* @__PURE__ */ jsxs5(NativeSelect2.Root, { size: "sm", children: [
       /* @__PURE__ */ jsxs5(NativeSelect2.Field, { id, "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value), children: [
@@ -1650,8 +1758,27 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
       /* @__PURE__ */ jsx9(NativeSelect2.Indicator, {})
     ] }));
     if (multiline) return wrap(/* @__PURE__ */ jsx9(Textarea, { id, rows: field.rows ?? 4, resize: "vertical", "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), lineHeight: "1.5", onChange: (event) => change(field.field, event.currentTarget.value) }));
-    const type = field.kind === "date" ? "date" : ["number", "currency", "currencyConverted"].includes(field.kind ?? "") ? "number" : "text";
-    return wrap(/* @__PURE__ */ jsx9(Input3, { id, type, step: type === "number" ? "any" : void 0, autoComplete: "off", "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value) }));
+    const mask = resolveInputMask(field);
+    const type = mask ? "text" : field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text";
+    const value = values[field.field] ?? "";
+    return wrap(
+      /* @__PURE__ */ jsx9(
+        Input3,
+        {
+          id,
+          type,
+          step: type === "number" ? "any" : void 0,
+          inputMode: inputModeForMask(mask),
+          maxLength: maxLengthForMask(mask),
+          autoComplete: "off",
+          "aria-invalid": !!message,
+          "aria-describedby": errorId,
+          value: mask ? formatMaskedValue(value, mask) : value,
+          ...controlProps(!!message),
+          onChange: (event) => change(field.field, parseMaskedInput(event.currentTarget.value, mask))
+        }
+      )
+    );
   };
   const invalid = fields.filter((field) => errors[field.field]);
   const generic = dismissed ? null : messageOf(error);
@@ -1775,7 +1902,13 @@ import { Input as Input4, NativeSelect as NativeSelect3, Textarea as Textarea2 }
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function CoreInlineEditableCell({ column, meta, value, onChange }) {
   const kind = column.editor ?? meta?.kind ?? column.kind ?? "string";
-  const common = { size: "xs", fontSize: "11px", value: value == null ? "" : String(value), onChange: (event) => onChange(event.currentTarget.value) };
+  const plainValue = value == null ? "" : String(value);
+  const common = {
+    size: "xs",
+    fontSize: "11px",
+    value: plainValue,
+    onChange: (event) => onChange(event.currentTarget.value)
+  };
   if (kind === "boolean") return /* @__PURE__ */ jsxs7(NativeSelect3.Root, { size: "xs", children: [
     /* @__PURE__ */ jsxs7(NativeSelect3.Field, { ...common, children: [
       /* @__PURE__ */ jsx11("option", { value: "", children: "\u2014" }),
@@ -1792,8 +1925,21 @@ function CoreInlineEditableCell({ column, meta, value, onChange }) {
     /* @__PURE__ */ jsx11(NativeSelect3.Indicator, {})
   ] });
   if (kind === "textarea") return /* @__PURE__ */ jsx11(Textarea2, { ...common, rows: 2 });
-  const type = kind === "date" ? "date" : ["number", "currency"].includes(kind) ? "number" : "text";
-  return /* @__PURE__ */ jsx11(Input4, { ...common, type, step: type === "number" ? "any" : void 0 });
+  const mask = resolveInputMask({ field: column.field, kind });
+  const type = mask ? "text" : kind === "date" ? "date" : kind === "number" ? "number" : "text";
+  return /* @__PURE__ */ jsx11(
+    Input4,
+    {
+      size: "xs",
+      fontSize: "11px",
+      type,
+      step: type === "number" ? "any" : void 0,
+      inputMode: inputModeForMask(mask),
+      maxLength: maxLengthForMask(mask),
+      value: mask ? formatMaskedValue(plainValue, mask) : plainValue,
+      onChange: (event) => onChange(parseMaskedInput(event.currentTarget.value, mask))
+    }
+  );
 }
 
 // src/components/internal/CoreRowAction.tsx
@@ -2120,6 +2266,9 @@ function toValue2(value, kind) {
   }
   return String(value);
 }
+function initialFieldValue2(field, value) {
+  return normalizeMaskedValue(toValue2(value, field.kind), resolveInputMask(field));
+}
 function isMultiline2(field) {
   return /observa|descricao|mensagem|detalhe|necessidade/i.test(field.field);
 }
@@ -2273,6 +2422,7 @@ function FieldControl({
       )
     ] });
   }
+  const mask = resolveInputMask(field);
   const control = field.kind === "enum" && field.options?.length ? /* @__PURE__ */ jsxs10(NativeSelect4.Root, { size: "sm", children: [
     /* @__PURE__ */ jsxs10(NativeSelect4.Field, { id: inputId, value, ...invalidProps, onChange: (event) => onChange(event.currentTarget.value), children: [
       /* @__PURE__ */ jsx14("option", { value: "", children: "\u2014 Selecione \u2014" }),
@@ -2291,10 +2441,13 @@ function FieldControl({
     {
       id: inputId,
       size: "sm",
-      type: field.kind === "date" ? "date" : ["number", "currency", "currencyConverted"].includes(field.kind ?? "") ? "number" : "text",
-      value,
+      type: mask ? "text" : field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text",
+      step: !mask && field.kind === "number" ? "any" : void 0,
+      inputMode: inputModeForMask(mask),
+      maxLength: maxLengthForMask(mask),
+      value: mask ? formatMaskedValue(value, mask) : value,
       ...invalidProps,
-      onChange: (event) => onChange(event.currentTarget.value)
+      onChange: (event) => onChange(parseMaskedInput(event.currentTarget.value, mask))
     }
   );
   return /* @__PURE__ */ jsxs10(Box7, { children: [
@@ -2343,7 +2496,7 @@ function InlineParentForm({
   const [error, setError] = useState8(null);
   const [fieldErrors, setFieldErrors] = useState8({});
   useEffect5(() => {
-    setValues(Object.fromEntries(fields.map((field) => [field.field, toValue2(parent[field.field], field.kind)])));
+    setValues(Object.fromEntries(fields.map((field) => [field.field, initialFieldValue2(field, parent[field.field])])));
     setError(null);
     setFieldErrors({});
   }, [parent, rawFields]);