@envisiongroup/porygon 1.0.0-rc.9 → 1.0.0

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

@@ -0,0 +1,8 @@
+import { EFWAttachmentsValue } from './EFWAttachments.types';
+
+/**
+ * Retorna una representación textual de los archivos adjuntos,
+ * útil para formularios, tablas u otros contextos donde se necesite
+ * una versión en texto plano del valor.
+ */
+export declare const getAttachmentsFormattedValue: (value: EFWAttachmentsValue[] | undefined | null) => string;

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

@@ -0,0 +1,4 @@
+const n = (t) => !t || t.length === 0 ? "" : t.map((e) => e.name).join(", ");
+export {
+  n as getAttachmentsFormattedValue
+};

package/dist/react-components/fields/{EFWAttachments/EFWAttachmentsCard → Attachments}/EFWAttachmentsCard.d.ts

@@ -1,14 +1,5 @@
-import { EFWAttachmentsCardProps, EFWAttachmentsContainerProps } from './EFWAttachmentsCard.types';
+import { EFWAttachmentsContainerProps } from './EFWAttachmentsCard.types';
 
-/**
- * Componente de tarjeta para mostrar un adjunto con opciones de apertura, descarga y eliminación.
- * @param {EFWAttachmentsCardProps} props - Propiedades del componente.
- * @param {EFWAttachmentsValue} props.attachment - El adjunto que se mostrará en la tarjeta.
- * @param {(id: string) => void} [props.onRemoveAttachment] - Función opcional para eliminar el adjunto.
- * @param {boolean} [props.enableRemoveButton=true] - Indica si el botón de eliminación está habilitado.
- * @returns {JSX.Element} Elemento JSX que representa la tarjeta del adjunto.
- */
-declare const EFWAttachmentsCard: React.FC<EFWAttachmentsCardProps>;
 /**
  * Componente contenedor para mostrar una lista de tarjetas de adjuntos.
  * @param {EFWAttachmentsContainerProps} props - Propiedades del componente.
@@ -20,4 +11,4 @@ declare const EFWAttachmentsCard: React.FC<EFWAttachmentsCardProps>;
  * @returns {JSX.Element | undefined} Elemento JSX que representa el contenedor de adjuntos o undefined si no hay adjuntos.
  */
 declare const EFWAttachmentsContainer: React.FC<EFWAttachmentsContainerProps>;
-export { EFWAttachmentsCard, EFWAttachmentsContainer };
+export { EFWAttachmentsContainer };

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

@@ -0,0 +1,164 @@
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { makeStyles as g, Text as f, Menu as w, MenuTrigger as b, SplitButton as v, Caption2 as y, Image as k, MenuPopover as C, MenuList as L, MenuItem as m } from "@fluentui/react-components";
+import { ArrowDownload20Regular as N, Dismiss20Regular as R } from "@fluentui/react-icons";
+import { formatFileSize as U, getFileIconUrl as j } from "../../commons/utils.js";
+const T = g({
+  text: {
+    overflow: "hidden",
+    maxWidth: "170px",
+    display: "block"
+  },
+  wrapper: {
+    columnGap: "15px",
+    display: "flex",
+    minWidth: "min-content"
+  },
+  iconImage: {
+    width: "20px",
+    height: "20px"
+  },
+  textContainer: {
+    //gap: "16px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "baseline"
+  }
+}), A = (e) => {
+  const i = e.split(".").pop()?.toLowerCase() || "";
+  return [
+    "pdf",
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "webp",
+    "svg",
+    "txt",
+    "html",
+    "htm"
+  ].includes(i);
+}, h = (e) => URL.createObjectURL(e), u = (e, i) => {
+  try {
+    const o = h(e), r = document.createElement("a");
+    r.href = o, r.download = i, r.classList.add("external"), r.target = "_blank", r.style.display = "none", document.body.appendChild(r), r.click(), document.body.removeChild(r), setTimeout(() => {
+      URL.revokeObjectURL(o);
+    }, 1e3);
+  } catch (o) {
+    console.error("Error al descargar el archivo:", o);
+  }
+}, E = ({
+  attachment: e,
+  onRemoveAttachment: i,
+  enableRemoveButton: o = !0,
+  downloadMenuItemLabel: r = "Descargar",
+  removeMenuItemLabel: c = "Quitar datos adjuntos"
+}) => {
+  const l = T(), a = e.name.split(".").pop() || "", d = () => {
+    i && i(e.id);
+  }, s = () => {
+    console.log({ attachment: e });
+    try {
+      if (!e.file) {
+        console.error("No se encontró el archivo en el attachment");
+        return;
+      }
+      const t = h(e.file);
+      A(e.name) ? window.open(t, "_blank") ? setTimeout(() => {
+        URL.revokeObjectURL(t);
+      }, 6e4) : (console.warn("No se pudo abrir nueva ventana, iniciando descarga..."), u(e.file, e.name)) : (u(e.file, e.name), URL.revokeObjectURL(t));
+    } catch (t) {
+      console.error("Error al abrir el archivo:", t);
+    }
+  }, x = () => {
+    if (!e.file) {
+      console.error("No se encontró el archivo en el attachment");
+      return;
+    }
+    u(e.file, e.name);
+  };
+  return /* @__PURE__ */ n("div", { className: l.wrapper, children: /* @__PURE__ */ p(w, { positioning: "below-end", children: [
+    /* @__PURE__ */ n(b, { disableButtonEnhancement: !0, children: (t) => /* @__PURE__ */ n(
+      v,
+      {
+        style: { maxWidth: "250px" },
+        primaryActionButton: { onClick: s },
+        menuButton: t,
+        icon: /* @__PURE__ */ n(
+          k,
+          {
+            className: l.iconImage,
+            src: j(a, 64)
+          }
+        ),
+        children: /* @__PURE__ */ p("div", { className: l.textContainer, children: [
+          /* @__PURE__ */ n(
+            f,
+            {
+              block: !0,
+              size: 200,
+              weight: "semibold",
+              wrap: !1,
+              truncate: !0,
+              className: l.text,
+              children: e.name
+            }
+          ),
+          e.size && /* @__PURE__ */ n(y, { block: !0, truncate: !0, className: l.text, children: U(e.size) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ n(C, { children: /* @__PURE__ */ p(L, { children: [
+      /* @__PURE__ */ n(
+        m,
+        {
+          onClick: x,
+          icon: /* @__PURE__ */ n(N, {}),
+          children: r
+        }
+      ),
+      o && /* @__PURE__ */ n(
+        m,
+        {
+          onClick: d,
+          icon: /* @__PURE__ */ n(R, {}),
+          children: c
+        }
+      )
+    ] }) })
+  ] }) });
+}, W = [], S = ({
+  attachments: e = W,
+  onRemoveAttachment: i,
+  className: o = "",
+  cardClassName: r = "",
+  enableRemoveButtons: c = !0,
+  emptyMessage: l = "Sin archivos disponibles",
+  downloadMenuItemLabel: a = "Descargar",
+  removeMenuItemLabel: d = "Quitar datos adjuntos"
+}) => e.length === 0 ? /* @__PURE__ */ n(f, { style: { opacity: 0.7 }, children: l }) : /* @__PURE__ */ n(
+  "div",
+  {
+    className: `attachments-container ${o}`.trim(),
+    style: {
+      display: "flex",
+      gap: "8px",
+      flexWrap: "wrap",
+      margin: "8px 0 8px"
+    },
+    children: e.map((s) => /* @__PURE__ */ n(
+      E,
+      {
+        attachment: s,
+        onRemoveAttachment: i,
+        className: r,
+        enableRemoveButton: c,
+        downloadMenuItemLabel: a,
+        removeMenuItemLabel: d
+      },
+      s.id
+    ))
+  }
+);
+export {
+  S as EFWAttachmentsContainer
+};

package/dist/react-components/fields/{EFWAttachments/EFWAttachmentsCard → Attachments}/EFWAttachmentsCard.types.d.ts

@@ -1,4 +1,4 @@
-import { EFWAttachmentsValue } from '../EFWAttachments.types';
+import { EFWAttachmentsValue } from './EFWAttachments.types';
 
 /**
  * Propiedades para el componente de tarjeta de adjunto.
@@ -27,6 +27,16 @@ export interface EFWAttachmentsCardProps {
      * @default false
      */
     enableRemoveButton?: boolean;
+    /**
+     * Texto del item de menú para descargar.
+     * @type {string}
+     */
+    downloadMenuItemLabel?: string;
+    /**
+     * Texto del item de menú para eliminar adjunto.
+     * @type {string}
+     */
+    removeMenuItemLabel?: string;
 }
 /**
  * Propiedades para el contenedor de múltiples adjuntos.
@@ -60,6 +70,16 @@ export interface EFWAttachmentsContainerProps {
      * @default false
      */
     enableRemoveButtons?: boolean;
+    /**
+     * Texto del item de menú para descargar.
+     * @type {string}
+     */
+    downloadMenuItemLabel?: string;
+    /**
+     * Texto del item de menú para eliminar adjunto.
+     * @type {string}
+     */
+    removeMenuItemLabel?: string;
     /**
      * Mensaje opcional que se muestra cuando no hay adjuntos.
      * @type {string}

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

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

package/dist/react-components/fields/{EFWAttachmentsField → Attachments}/EFWAttachmentsField.types.d.ts

@@ -1,5 +1,5 @@
-import { EFWFieldProps } from '../EFWField/EFWField.types';
-import { EFWAttachmentsProps, EFWAttachmentsValue, EFWAttachmentsOnChange } from '../EFWAttachments/EFWAttachments.types';
+import { EFWFieldProps } from '../_shared/EFWField/EFWField.types';
+import { EFWAttachmentsProps, EFWAttachmentsValue, EFWAttachmentsOnChange } from './EFWAttachments.types';
 
 export type EFWAttachmentsFieldValue = EFWAttachmentsValue;
 export type EFWAttachmentsFieldOnChange = EFWAttachmentsOnChange;

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

@@ -0,0 +1,5 @@
+export { EFWAttachment } from './EFWAttachments';
+export { getAttachmentsFormattedValue } from './EFWAttachments.utils';
+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/Attachments/index.js

@@ -0,0 +1,8 @@
+import { EFWAttachment as m } from "./EFWAttachments.js";
+import { getAttachmentsFormattedValue as r } from "./EFWAttachments.utils.js";
+import { EFWAttachmentsField as F } from "./EFWAttachmentsField.js";
+export {
+  m as EFWAttachment,
+  F as EFWAttachmentsField,
+  r as getAttachmentsFormattedValue
+};

package/dist/react-components/fields/{EFWDatePicker → DatePicker}/EFWDatePicker.d.ts

@@ -8,10 +8,9 @@ import { EFWDatePickerProps } from './EFWDatePicker.types';
  * @param {EFWDatePickerProps} props - Propiedades del componente.
  * @param {boolean} [props.editable=true] - Indica si el DatePicker es editable.
  * @param {boolean} [props.disabled=false] - Indica si el DatePicker está deshabilitado.
- * @param {string} [props.placeholder='DD/MM/YYYY'] - Texto placeholder para el campo de entrada.
  * @param {any[]} [props.selectedDates=[]] - Valores iniciales para el estado del componente.
  * @param {boolean} [props.allowTextInput=true] - Permite la entrada de texto para introducir fechas manualmente.
- * @param {object} [props.localizedStrings=esLocalizedStrings] - Objeto con cadenas localizadas para el componente.
+ * @param {object} [props.localizedStrings] - Objeto con cadenas localizadas para el componente. Si no se proporciona, se resuelve desde el contexto i18n.
  * @param {Date} [props.minDate] - Fecha mínima seleccionable.
  * @param {Date} [props.maxDate] - Fecha máxima seleccionable.
  * @param {boolean} [props.showGoToToday=true] - Muestra el botón "Ir a hoy" en el calendario.
@@ -26,7 +25,6 @@ import { EFWDatePickerProps } from './EFWDatePicker.types';
  * @example
  * <EFWDatePicker
  *   editable={true}
- *   placeholder="DD/MM/YYYY"
  *   onSelectDate={(date) => console.log(date)}
  *   friendlyDateFormat={true}
  * />

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

@@ -0,0 +1,134 @@
+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,
+      color: n.colorNeutralForeground2,
+      "&::placeholder": {
+        color: "transparent"
+      }
+    },
+    // Afectar el span que contiene el input disabled
+    "&:has([disabled])": {
+      backgroundColor: n.colorNeutralBackground3
+    }
+  },
+  efwDatePickerControlError: {
+    backgroundColor: n.colorPaletteRedBackground1,
+    "::after": {
+      borderBottomColor: n.colorPaletteRedBorder2,
+      borderBottomStyle: "solid",
+      borderBottomWidth: "2px"
+    }
+  }
+}), ke = (k) => {
+  const {
+    editable: w = !0,
+    disabled: I = !1,
+    className: Y = "",
+    selectedDates: y = C,
+    defaultSelectedDates: d = C,
+    allowTextInput: L = !0,
+    localizedStrings: z,
+    minDate: A,
+    maxDate: O,
+    showGoToToday: W = !0,
+    showCloseButton: j = !0,
+    restrictedDates: G = C,
+    friendlyDateFormat: P = !1,
+    onSelectDate: s,
+    onFormatDate: U,
+    onChange: u,
+    labels: b,
+    readOnlyRenderer: _,
+    validationState: q = "none",
+    setParentComponentState: m
+  } = 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,
+    E
+  ]), [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 = t < 10 ? `0${t}` : t, l = a + 1 < 10 ? `0${a + 1}` : a + 1;
+      return `${i}/${l}/${c}`;
+    }
+  }, [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 (o.length > 0 && o[0] instanceof Date ? o[0].getTime() === e.getTime() : !1) {
+      s?.(e);
+      return;
+    }
+    const a = [e];
+    r || h(a), s?.(e), u?.(a), m?.("none", "");
+  }, [o, r, s, u, m]);
+  ie(() => {
+    r || h(M);
+  }, [r, M]);
+  const oe = le(
+    Y,
+    x.efwDatePickerControl,
+    q === "error" && x.efwDatePickerControlError
+  );
+  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: X,
+        restrictedDates: G
+      },
+      strings: f,
+      className: oe,
+      ref: Q,
+      id: F,
+      name: F,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: "false",
+      allowTextInput: L,
+      disableAutoFocus: !0,
+      value: o.length > 0 ? o[0] : null,
+      minDate: A,
+      maxDate: O,
+      disabled: I,
+      onSelectDate: te,
+      formatDate: U ?? Z,
+      parseDateFromString: ee,
+      placeholder: N.placeholder,
+      showGoToToday: W,
+      showCloseButton: j
+    }
+  );
+};
+export {
+  ke as EFWDatePicker
+};

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

@@ -1,13 +1,24 @@
-import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
+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;
+}
 /**
  * Propiedades del componente EFWDatePicker que extiende las funcionalidades del DatePicker de Fluent UI
  * con características adicionales para formularios y validación.
  */
-export interface EFWDatePickerProps extends Omit<Partial<DatePickerProps>, 'onChange' | 'id' | 'value'>, EFWFieldChildrenProps {
+export interface EFWDatePickerProps extends Omit<Partial<DatePickerProps>, 'onChange' | 'id' | 'value' | 'placeholder'>, EFWFieldChildrenProps {
     /**
      * Array de fechas seleccionadas iniciales. Puede contener objetos Date o strings que representen fechas.
      * Si se proporciona, el componente opera en modo controlled.
@@ -23,11 +34,6 @@ export interface EFWDatePickerProps extends Omit<Partial<DatePickerProps>, 'onCh
      * @default true
      */
     allowTextInput?: boolean;
-    /**
-     * Texto de marcador de posición que se muestra cuando el campo está vacío.
-     * @default 'DD/MM/YYYY'
-     */
-    placeholder?: string;
     /**
      * Determina si el DatePicker es editable o de solo lectura.
      * @default true
@@ -83,4 +89,10 @@ export interface EFWDatePickerProps extends Omit<Partial<DatePickerProps>, 'onCh
      * Recibe un array con los nuevos valores seleccionados.
      */
     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;
 }

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

@@ -0,0 +1,19 @@
+import { CalendarStrings } from '@fluentui/react-datepicker-compat';
+import { EFWDatePickerValue } from './EFWDatePicker.types';
+
+/** Cadenas localizadas del calendario en español. */
+declare const esLocalizedStrings: CalendarStrings;
+/** Cadenas localizadas del calendario en inglés. */
+declare const enLocalizedStrings: CalendarStrings;
+/** Cadenas localizadas del calendario en portugués. */
+declare const ptLocalizedStrings: CalendarStrings;
+export declare const mapToValidDates: (arr?: unknown[]) => Date[];
+/**
+ * Retorna el valor formateado que EFWDatePicker muestra cuando no está en modo editable.
+ * Soporta opcionalmente la inclusión de hora.
+ */
+export declare const getDatePickerFormattedValue: (value: EFWDatePickerValue | null | undefined, options?: {
+    includeTime?: boolean;
+    timeValue?: string;
+}) => string;
+export { esLocalizedStrings, enLocalizedStrings, ptLocalizedStrings };