@envisiongroup/porygon 1.0.0-rc.36 → 1.0.0-rc.37

package/dist/react-components/commons/valueNormalization.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Normaliza valores textuales para mantener un contrato estable de render y callbacks.
+ */
+export declare const normalizeTextValue: (value: string | null | undefined) => string;
+/**
+ * Determina si un valor debe considerarse vacío para validaciones semánticas.
+ * Los strings compuestos solo por whitespace se consideran vacíos.
+ */
+export declare const isSemanticallyEmptyValue: (value: unknown) => boolean;
+/**
+ * Normaliza listas opcionales a arrays para evitar null checks repetidos.
+ */
+export declare const normalizeArrayValue: <T>(value: T[] | null | undefined) => T[];
+/**
+ * Normaliza booleanos opcionales a un fallback explícito.
+ */
+export declare const normalizeBooleanValue: (value: boolean | null | undefined, fallback?: boolean) => boolean;

package/dist/react-components/commons/valueNormalization.js

@@ -0,0 +1,7 @@
+const n = (r) => r ?? "", e = (r) => r == null ? !0 : typeof r == "string" ? r.trim() === "" : Array.isArray(r) ? r.length === 0 : !1, i = (r) => Array.isArray(r) ? r : [], o = (r, t = !1) => r ?? t;
+export {
+  e as isSemanticallyEmptyValue,
+  i as normalizeArrayValue,
+  o as normalizeBooleanValue,
+  n as normalizeTextValue
+};

package/dist/react-components/fields/Attachments/EFWAttachments.js

@@ -1,12 +1,14 @@
-import { jsxs as T, jsx as u } from "react/jsx-runtime";
-import { makeStyles as Q, mergeClasses as X, CardFooter as Y, Button as Z, Text as _ } from "@fluentui/react-components";
-import { useMemo as D, useId as ee, useRef as te, useState as ae, useEffect as $, useCallback as f } from "react";
-import { EFWAttachmentsContainer as ne } from "./EFWAttachmentsCard.js";
-import { Attach20Regular as oe } from "@fluentui/react-icons";
-import { formatFileSize as se } from "../../commons/utils.js";
-import { v4 as le } from "uuid";
-import { useFieldsLocaleText as ce } from "../../i18n/PorygonI18nProvider.js";
-const ie = Q({
+import { jsx as s, jsxs as V } from "react/jsx-runtime";
+import { makeStyles as _, mergeClasses as ee, Text as te, CardFooter as ae, Button as ne } from "@fluentui/react-components";
+import { useMemo as $, useId as oe, useRef as se, useState as le, useEffect as j, useCallback as f } from "react";
+import { EFWAttachmentsContainer as q } from "./EFWAttachmentsCard.js";
+import { Attach20Regular as ce } from "@fluentui/react-icons";
+import { formatFileSize as me } from "../../commons/utils.js";
+import { v4 as re } from "uuid";
+import { getAttachmentsFormattedValue as v } from "./EFWAttachments.utils.js";
+import { normalizeArrayValue as O } from "../../commons/valueNormalization.js";
+import { useFieldsLocaleText as ie } from "../../i18n/PorygonI18nProvider.js";
+const de = _({
   efwAttachmentError: {
     //...
   },
@@ -19,76 +21,80 @@ const ie = Q({
   efwAttachmentsContainer: {
     display: "flex"
   }
-}), xe = (j) => {
+}), Ae = (P) => {
   const {
-    editable: h = !0,
-    disabled: l = !1,
-    files: F,
-    defaultFiles: p,
-    className: q = "",
-    validationState: P = "none",
-    setParentComponentState: M,
-    multiple: b = !0,
-    acceptedTypes: U = "*/*",
-    maxFileSize: c = 100 * 1024 * 1024,
+    editable: U = !0,
+    disabled: c = !1,
+    files: L,
+    defaultFiles: h,
+    className: G = "",
+    validationState: H = "none",
+    setParentComponentState: p,
+    multiple: M = !0,
+    acceptedTypes: J = "*/*",
+    maxFileSize: m = 100 * 1024 * 1024,
     // 100MB por defecto
-    labels: i,
-    onChange: r,
-    onRemoveAttachment: x
-  } = j, m = ce().attachments.labels, A = m.attachButtonLabel, L = m.emptyMessage, v = m.downloadMenuItemLabel, E = m.removeMenuItemLabel, w = m.maxFileSizeExceededMessage, z = i?.attachButtonLabel, S = i?.emptyMessage, I = i?.downloadMenuItemLabel, C = i?.removeMenuItemLabel, R = i?.maxFileSizeExceededMessage, o = D(() => ({
-    attachButtonLabel: z ?? A,
-    emptyMessage: S ?? L,
-    downloadMenuItemLabel: I ?? v,
+    labels: r,
+    onChange: i,
+    onRemoveAttachment: b,
+    readOnlyRenderer: K
+  } = P, d = ie().attachments.labels, A = d.attachButtonLabel, F = d.emptyMessage, w = d.downloadMenuItemLabel, E = d.removeMenuItemLabel, z = d.maxFileSizeExceededMessage, I = r?.attachButtonLabel, S = r?.emptyMessage, R = r?.downloadMenuItemLabel, C = r?.removeMenuItemLabel, B = r?.maxFileSizeExceededMessage, o = $(() => ({
+    attachButtonLabel: I ?? A,
+    emptyMessage: S ?? F,
+    downloadMenuItemLabel: R ?? w,
     removeMenuItemLabel: C ?? E,
-    maxFileSizeExceededMessage: R ?? w
+    maxFileSizeExceededMessage: B ?? z
   }), [
-    z,
-    S,
     I,
-    C,
+    S,
     R,
+    C,
+    B,
     A,
-    L,
-    v,
+    F,
+    w,
     E,
-    w
-  ]), V = ee(), g = ie(), d = te(null), s = F !== void 0, B = D(() => p ?? [], [p]), [G, y] = ae(() => p ?? []), n = s ? F ?? [] : G;
-  $(() => {
-    s || y(B);
-  }, [s, B]);
+    z
+  ]), Q = oe(), g = de(), u = se(null), l = L !== void 0, N = $(() => h ?? [], [h]), [X, x] = le(() => h ?? []), n = l ? L ?? [] : X;
+  j(() => {
+    l || x(N);
+  }, [l, N]);
   const W = f((a) => {
     for (const e of a)
-      if (e.size !== void 0 && e.size > c)
+      if (e.size !== void 0 && e.size > m)
         return !1;
     return !0;
-  }, [c]), k = f(() => {
-    const a = se(c), e = o.maxFileSizeExceededMessage;
-    return typeof e == "function" ? e(c, a) : typeof e == "string" && e.trim().length > 0 ? e : `Existe un adjunto que excede el peso máximo de ${a}.`;
-  }, [c, o.maxFileSizeExceededMessage]);
-  $(() => {
-    n.length > 0 && !W(n) ? M?.("error", k()) : M?.("none");
-  }, [n, W, M, k]);
-  const H = f(() => {
-    d.current && !l && d.current.click();
-  }, [l]), J = f(async (a) => {
+  }, [m]), k = f(() => {
+    const a = me(m), e = o.maxFileSizeExceededMessage;
+    return typeof e == "function" ? e(m, a) : typeof e == "string" && e.trim().length > 0 ? e : `Existe un adjunto que excede el peso máximo de ${a}.`;
+  }, [m, o.maxFileSizeExceededMessage]);
+  j(() => {
+    n.length > 0 && !W(n) ? p?.("error", k()) : p?.("none");
+  }, [n, W, p, k]);
+  const Y = f(() => {
+    u.current && !c && u.current.click();
+  }, [c]), T = f(async (a) => {
     const e = n.find((t) => t.id === a);
     if (!e) {
       console.warn(`[EFWAttachment]: Attachment with id ${a} not found`);
       return;
     }
     try {
-      if (x && !await x(e)) {
+      if (b && !await b(e)) {
         console.log(`[EFWAttachment]: Removal of file ${a} was cancelled`);
         return;
       }
-      const t = n.filter((N) => N.id !== a);
-      s || y(t), r && r(t), console.log(`[EFWAttachment]: File ${a} removed successfully`);
+      const t = n.filter((D) => D.id !== a);
+      l || x(t), i && i(
+        t,
+        v(O(t))
+      ), console.log(`[EFWAttachment]: File ${a} removed successfully`);
     } catch (t) {
       console.error("[EFWAttachment]: Detele file error:", t);
     }
-  }, [n, x, r, s]), K = f((a) => {
+  }, [n, b, i, l]), Z = f((a) => {
     const e = Array.from(a.target.files || []).map((t) => ({
-      id: le(),
+      id: re(),
       name: t.name,
       size: t.size,
       type: t.type,
@@ -96,46 +102,66 @@ const ie = Q({
       file: t
     }));
     if (e.length > 0) {
-      const t = b ? [...n, ...e] : e;
-      s || y(t), r?.(t);
+      const t = M ? [...n, ...e] : e;
+      l || x(t), i?.(
+        t,
+        v(O(t))
+      );
     }
-    d.current && (d.current.value = "");
-  }, [n, b, r, s]), O = X(
-    q,
-    P === "error" && g.efwAttachmentError
+    u.current && (u.current.value = "");
+  }, [n, M, i, l]), y = ee(
+    G,
+    H === "error" && g.efwAttachmentError
   );
-  return /* @__PURE__ */ T("div", { className: O, children: [
-    h && /* @__PURE__ */ T(Y, { style: { display: "disabled" }, children: [
-      /* @__PURE__ */ u(
+  if (!U) {
+    const a = v(n) || o.emptyMessage, e = K?.(
+      n,
+      a
+    );
+    return e != null ? /* @__PURE__ */ s("div", { className: y, children: e }) : /* @__PURE__ */ s("div", { className: y, children: n.length === 0 ? /* @__PURE__ */ s(te, { style: { opacity: 0.7 }, children: o.emptyMessage }) : /* @__PURE__ */ s(
+      q,
+      {
+        enableRemoveButtons: !1,
+        onRemoveAttachment: T,
+        attachments: n,
+        emptyMessage: o.emptyMessage,
+        downloadMenuItemLabel: o.downloadMenuItemLabel,
+        removeMenuItemLabel: o.removeMenuItemLabel
+      }
+    ) });
+  }
+  return /* @__PURE__ */ V("div", { className: y, children: [
+    /* @__PURE__ */ V(ae, { style: { display: "disabled" }, children: [
+      /* @__PURE__ */ s(
         "input",
         {
-          ref: d,
-          id: V,
+          ref: u,
+          id: Q,
           type: "file",
           className: g.efwAttachmentInput,
-          accept: U,
-          multiple: b,
-          onChange: K,
-          disabled: l
+          accept: J,
+          multiple: M,
+          onChange: Z,
+          disabled: c
         }
       ),
-      /* @__PURE__ */ u(
-        Z,
+      /* @__PURE__ */ s(
+        ne,
         {
           size: "medium",
-          onClick: H,
-          icon: /* @__PURE__ */ u(oe, {}),
-          disabled: l,
+          onClick: Y,
+          icon: /* @__PURE__ */ s(ce, {}),
+          disabled: c,
           className: g.efwAttachmentsButton,
           children: o.attachButtonLabel
         }
       )
     ] }),
-    !h && n.length === 0 ? /* @__PURE__ */ u(_, { style: { opacity: 0.7 }, children: o.emptyMessage }) : /* @__PURE__ */ u(
-      ne,
+    /* @__PURE__ */ s(
+      q,
       {
-        enableRemoveButtons: h && !l,
-        onRemoveAttachment: J,
+        enableRemoveButtons: !c,
+        onRemoveAttachment: T,
         attachments: n,
         emptyMessage: o.emptyMessage,
         downloadMenuItemLabel: o.downloadMenuItemLabel,
@@ -145,5 +171,5 @@ const ie = Q({
   ] });
 };
 export {
-  xe as EFWAttachment
+  Ae as EFWAttachment
 };

package/dist/react-components/fields/Attachments/EFWAttachments.types.d.ts

@@ -1,4 +1,5 @@
 import { EFWFieldChildrenProps } from '../_shared/EFWField/EFWField.types';
+import { ReactNode } from 'react';
 
 /**
  * Valor que representa un archivo adjunto en el componente EFWAttachments.
@@ -25,9 +26,10 @@ export type EFWAttachmentsValue = {
 /**
  * Función callback ejecutada cuando cambia la lista de archivos adjuntos.
  * @param values - Array de archivos adjuntos actualizados
- * @param displayValue - Valor de visualización opcional
+ * @param displayValue - Texto formateado de la lista de adjuntos
  */
 export type EFWAttachmentsOnChange = (values: EFWAttachmentsValue[], displayValue?: string) => void;
+export type EFWAttachmentsNonEditableRenderer = (value: EFWAttachmentsValue[], displayValue: string) => ReactNode;
 /**
  * Textos de la UI del componente EFWAttachments.
  */
@@ -104,4 +106,9 @@ export interface EFWAttachmentsProps extends EFWFieldChildrenProps {
      * @param displayValue - Valor de visualización opcional
      */
     onChange?: EFWAttachmentsOnChange;
+    /**
+     * Renderiza contenido custom cuando `editable={false}`.
+     * Si retorna `null` o `undefined`, se utiliza el render no editable por defecto.
+     */
+    readOnlyRenderer?: EFWAttachmentsNonEditableRenderer;
 }

package/dist/react-components/fields/Attachments/EFWAttachmentsField.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
-import { EFWField as L } from "../_shared/EFWField/EFWField.js";
-import { EFWAttachment as M } from "./EFWAttachments.js";
+import { EFWField as M } from "../_shared/EFWField/EFWField.js";
+import { EFWAttachment as R } from "./EFWAttachments.js";
 import { mergeClasses as S } from "@griffel/react";
-const P = (t) => {
+const O = (t) => {
   const {
     title: l,
     infoLabel: s,
@@ -10,8 +10,8 @@ const P = (t) => {
     className: n,
     style: o = {},
     required: r = !1,
-    validationState: m,
-    validationMessage: d,
+    validationState: d,
+    validationMessage: m,
     validationMessageIcon: c,
     disabled: f = !1,
     editable: e = !0,
@@ -24,13 +24,14 @@ const P = (t) => {
     labels: C,
     onRemoveAttachment: v,
     onChange: x,
+    readOnlyRenderer: y,
     onValidationChange: A,
     ...E
-  } = t, N = (w, y) => {
-    x?.(w, y);
+  } = t, N = (w, L) => {
+    x?.(w, L);
   }, W = S(n, "efw-attachments-field");
   return /* @__PURE__ */ a(
-    L,
+    M,
     {
       className: W,
       style: o,
@@ -40,13 +41,13 @@ const P = (t) => {
       hint: i,
       hidden: h,
       required: r,
-      validationState: m,
-      validationMessage: d,
+      validationState: d,
+      validationMessage: m,
       validationMessageIcon: c,
       onValidationChange: A,
       ...E,
       children: /* @__PURE__ */ a(
-        M,
+        R,
         {
           files: g,
           defaultFiles: p,
@@ -57,12 +58,13 @@ const P = (t) => {
           acceptedTypes: F,
           maxFileSize: b,
           labels: C,
-          onRemoveAttachment: v
+          onRemoveAttachment: v,
+          readOnlyRenderer: y
         }
       )
     }
   );
 };
 export {
-  P as EFWAttachmentsField
+  O as EFWAttachmentsField
 };

package/dist/react-components/fields/Attachments/index.d.ts

@@ -1,5 +1,5 @@
 export { EFWAttachment } from './EFWAttachments';
 export { getAttachmentsFormattedValue } from './EFWAttachments.utils';
-export type { EFWAttachmentsProps, EFWAttachmentsValue, EFWAttachmentsOnChange } from './EFWAttachments.types';
+export type { EFWAttachmentsProps, EFWAttachmentsValue, EFWAttachmentsOnChange, EFWAttachmentsNonEditableRenderer } from './EFWAttachments.types';
 export { EFWAttachmentsField } from './EFWAttachmentsField';
 export type { EFWAttachmentsFieldProps, EFWAttachmentsFieldValue, EFWAttachmentsFieldOnChange } from './EFWAttachmentsField.types';

package/dist/react-components/fields/DatePicker/EFWDatePicker.js

@@ -1,10 +1,10 @@
-import { jsx as g, Fragment as oe } from "react/jsx-runtime";
-import { makeStyles as ae, tokens as n, mergeClasses as re, Text as le } from "@fluentui/react-components";
-import { useId as ne, useMemo as p, useState as se, useRef as I, useCallback as D, useEffect as ce } from "react";
-import { DatePicker as ie } from "@fluentui/react-datepicker-compat";
-import { mapToValidDates as S, getDatePickerFormattedValue as de } from "./EFWDatePicker.utils.js";
-import { useFieldsLocaleText as ue } from "../../i18n/PorygonI18nProvider.js";
-const C = [], me = ae({
+import { jsx as g, Fragment as ae } from "react/jsx-runtime";
+import { makeStyles as re, tokens as n, mergeClasses as le, Text as ne } from "@fluentui/react-components";
+import { useId as se, useMemo as p, useState as ce, useRef as R, useCallback as D, useEffect as ie } from "react";
+import { DatePicker as de } from "@fluentui/react-datepicker-compat";
+import { mapToValidDates as S, getDatePickerFormattedValue as ue } from "./EFWDatePicker.utils.js";
+import { useFieldsLocaleText as me } from "../../i18n/PorygonI18nProvider.js";
+const C = [], fe = re({
   efwDatePickerControl: {
     "& [disabled]": {
       backgroundColor: n.colorNeutralBackground3,
@@ -26,78 +26,88 @@ const C = [], me = ae({
       borderBottomWidth: "2px"
     }
   }
-}), Ce = (k) => {
+}), ke = (k) => {
   const {
-    editable: N = !0,
-    disabled: R = !1,
+    editable: w = !0,
+    disabled: I = !1,
     className: Y = "",
-    selectedDates: P = C,
+    selectedDates: y = C,
     defaultSelectedDates: d = C,
     allowTextInput: L = !0,
     localizedStrings: z,
     minDate: A,
-    maxDate: W,
-    showGoToToday: j = !0,
-    showCloseButton: G = !0,
-    restrictedDates: O = C,
-    friendlyDateFormat: y = !1,
+    maxDate: O,
+    showGoToToday: W = !0,
+    showCloseButton: j = !0,
+    restrictedDates: G = C,
+    friendlyDateFormat: P = !1,
     onSelectDate: s,
     onFormatDate: U,
     onChange: u,
     labels: b,
-    validationState: _ = "none",
+    readOnlyRenderer: _,
+    validationState: q = "none",
     setParentComponentState: m
-  } = k, F = ne(), x = me(), r = k.selectedDates !== void 0, q = p(() => S(P ?? []), [P]), M = p(() => S(d), [d]), T = ue(), H = T.datePicker.calendarStrings, f = z ?? H, V = T.datePicker.labels, B = V.placeholder, E = V.emptyState, $ = b?.placeholder, v = b?.emptyState, w = p(() => ({
-    placeholder: $ ?? B,
-    emptyState: v ?? E
+  } = k, F = se(), x = fe(), r = k.selectedDates !== void 0, H = p(() => S(y ?? []), [y]), M = p(() => S(d), [d]), T = me(), J = T.datePicker.calendarStrings, f = z ?? J, V = T.datePicker.labels, v = V.placeholder, E = V.emptyState, B = b?.placeholder, $ = b?.emptyState, N = p(() => ({
+    placeholder: B ?? v,
+    emptyState: $ ?? E
   }), [
+    B,
     $,
     v,
-    B,
     E
-  ]), [J, h] = se(() => S(d)), t = r ? q : J, K = I(null), Q = I(null), X = D((o) => {
-    if (!o) return "";
-    const a = o.getDate(), e = o.getMonth(), c = o.getFullYear();
-    if (y)
-      return `${f.months[e]} ${a}, ${c}`;
+  ]), [K, h] = ce(() => S(d)), o = r ? H : K, Q = R(null), X = R(null), Z = D((e) => {
+    if (!e) return "";
+    const t = e.getDate(), a = e.getMonth(), c = e.getFullYear();
+    if (P)
+      return `${f.months[a]} ${t}, ${c}`;
     {
-      const i = a < 10 ? `0${a}` : a, l = e + 1 < 10 ? `0${e + 1}` : e + 1;
+      const i = t < 10 ? `0${t}` : t, l = a + 1 < 10 ? `0${a + 1}` : a + 1;
       return `${i}/${l}/${c}`;
     }
-  }, [y, f]), Z = D((o) => {
-    const a = t.length && t[0] instanceof Date ? t[0] : /* @__PURE__ */ new Date(), e = (o || "").trim().split("/"), c = e.length > 0 ? Math.max(1, Math.min(31, parseInt(e[0], 10))) : a.getDate(), i = e.length > 1 ? Math.max(1, Math.min(12, parseInt(e[1], 10))) - 1 : a.getMonth();
-    let l = e.length > 2 ? parseInt(e[2], 10) : a.getFullYear();
-    return l < 100 && (l += a.getFullYear() - a.getFullYear() % 100), new Date(l, i, c);
-  }, [t]), ee = D((o) => {
-    if (!(o instanceof Date)) {
-      !r && t.length > 0 && h([]), s?.(null), u?.([]), m?.("none", "");
+  }, [P, f]), ee = D((e) => {
+    const t = o.length && o[0] instanceof Date ? o[0] : /* @__PURE__ */ new Date(), a = (e || "").trim().split("/"), c = a.length > 0 ? Math.max(1, Math.min(31, parseInt(a[0], 10))) : t.getDate(), i = a.length > 1 ? Math.max(1, Math.min(12, parseInt(a[1], 10))) - 1 : t.getMonth();
+    let l = a.length > 2 ? parseInt(a[2], 10) : t.getFullYear();
+    return l < 100 && (l += t.getFullYear() - t.getFullYear() % 100), new Date(l, i, c);
+  }, [o]), te = D((e) => {
+    if (!(e instanceof Date)) {
+      !r && o.length > 0 && h([]), s?.(null), u?.([]), m?.("none", "");
       return;
     }
-    if (t.length > 0 && t[0] instanceof Date ? t[0].getTime() === o.getTime() : !1) {
-      s?.(o);
+    if (o.length > 0 && o[0] instanceof Date ? o[0].getTime() === e.getTime() : !1) {
+      s?.(e);
       return;
     }
-    const e = [o];
-    r || h(e), s?.(o), u?.(e), m?.("none", "");
-  }, [t, r, s, u, m]);
-  ce(() => {
+    const a = [e];
+    r || h(a), s?.(e), u?.(a), m?.("none", "");
+  }, [o, r, s, u, m]);
+  ie(() => {
     r || h(M);
   }, [r, M]);
-  const te = re(
+  const oe = le(
     Y,
     x.efwDatePickerControl,
-    _ === "error" && x.efwDatePickerControlError
+    q === "error" && x.efwDatePickerControlError
   );
-  return /* @__PURE__ */ g(oe, { children: N ? /* @__PURE__ */ g(
-    ie,
+  if (!w) {
+    const e = ue(o[0]) || N.emptyState, t = _?.(
+      o,
+      e,
+      !1,
+      void 0
+    );
+    return t != null ? /* @__PURE__ */ g(ae, { children: t }) : /* @__PURE__ */ g(ne, { style: o.length ? void 0 : { opacity: 0.7 }, children: e });
+  }
+  return /* @__PURE__ */ g(
+    de,
     {
       calendar: {
-        componentRef: Q,
-        restrictedDates: O
+        componentRef: X,
+        restrictedDates: G
       },
       strings: f,
-      className: te,
-      ref: K,
+      className: oe,
+      ref: Q,
       id: F,
       name: F,
       autoComplete: "off",
@@ -106,19 +116,19 @@ const C = [], me = ae({
       spellCheck: "false",
       allowTextInput: L,
       disableAutoFocus: !0,
-      value: t.length > 0 ? t[0] : null,
+      value: o.length > 0 ? o[0] : null,
       minDate: A,
-      maxDate: W,
-      disabled: R,
-      onSelectDate: ee,
-      formatDate: U ?? X,
-      parseDateFromString: Z,
-      placeholder: w.placeholder,
-      showGoToToday: j,
-      showCloseButton: G
+      maxDate: O,
+      disabled: I,
+      onSelectDate: te,
+      formatDate: U ?? Z,
+      parseDateFromString: ee,
+      placeholder: N.placeholder,
+      showGoToToday: W,
+      showCloseButton: j
     }
-  ) : /* @__PURE__ */ g(le, { style: t.length ? void 0 : { opacity: 0.7 }, children: de(t[0]) || w.emptyState }) });
+  );
 };
 export {
-  Ce as EFWDatePicker
+  ke as EFWDatePicker
 };

package/dist/react-components/fields/DatePicker/EFWDatePicker.types.d.ts

@@ -1,9 +1,15 @@
 import { EFWFieldChildrenProps } from '../_shared/EFWField/EFWField.types';
 import { DatePickerProps, CalendarStrings } from '@fluentui/react-datepicker-compat';
+import { ReactNode } from 'react';
 
 export type { CalendarStrings } from '@fluentui/react-datepicker-compat';
+/**
+ * Valor de fecha individual. La ausencia de valor se representa con
+ * `selectedDates?: []` o `selectedDates: []`, no con elementos `undefined`.
+ */
 export type EFWDatePickerValue = (Date | string);
 export type EFWDatePickerOnChange = (value: EFWDatePickerValue[]) => void;
+export type EFWDatePickerNonEditableRenderer = (value: EFWDatePickerValue[], displayValue: string, includeTime?: boolean, timeValue?: string) => ReactNode;
 export interface EFWDatePickerLabels {
     placeholder?: string;
     emptyState?: string;
@@ -84,4 +90,9 @@ export interface EFWDatePickerProps extends Omit<Partial<DatePickerProps>, 'onCh
      */
     onChange?: EFWDatePickerOnChange;
     labels?: EFWDatePickerLabels;
+    /**
+     * Renderiza contenido custom cuando `editable={false}`.
+     * Si retorna `null` o `undefined`, se utiliza el render no editable por defecto.
+     */
+    readOnlyRenderer?: EFWDatePickerNonEditableRenderer;
 }