@envisiongroup/porygon 1.0.0-rc.32 → 1.0.0-rc.34

package/dist/react-components/buttons/EFWButton/EFWButton.js

@@ -3,8 +3,8 @@ import * as y from "react";
 import { makeStyles as ne, tokens as t, Tooltip as se, Spinner as ae, Button as ie } from "@fluentui/react-components";
 import { ErrorCircleRegular as ce, CheckmarkRegular as le } from "@fluentui/react-icons";
 import { useEFWButton as ue } from "./EFWButton.hooks.js";
-import { useButtonsLocaleText as ge } from "../../i18n/PorygonI18nProvider.js";
-const de = ne({
+import { useButtonsLocaleText as de } from "../../i18n/PorygonI18nProvider.js";
+const ge = ne({
   /**
    * Estilo para botón no interactivo (estado de carga con deshabilitación).
    * Aplica opacidad reducida y deshabilita eventos de puntero.
@@ -47,6 +47,7 @@ const de = ne({
    */
   collapseLabelXs: {
     "@container (max-width: 480px)": {
+      padding: "5px",
       "& .efw-button__label": { display: "none" },
       "& .fui-Button__icon": { marginRight: 0 },
       minWidth: "auto"
@@ -58,6 +59,7 @@ const de = ne({
    */
   collapseLabelSm: {
     "@container (max-width: 640px)": {
+      padding: "5px",
       "& .efw-button__label": { display: "none" },
       "& .fui-Button__icon": { marginRight: 0 },
       minWidth: "auto"
@@ -69,6 +71,7 @@ const de = ne({
    */
   collapseLabelMd: {
     "@container (max-width: 768px)": {
+      padding: "5px",
       "& .efw-button__label": { display: "none" },
       "& .fui-Button__icon": { marginRight: 0 },
       minWidth: "auto"
@@ -80,16 +83,17 @@ const de = ne({
    */
   collapseLabelLg: {
     "@container (max-width: 1024px)": {
+      padding: "5px",
       "& .efw-button__label": { display: "none" },
       "& .fui-Button__icon": { marginRight: 0 },
       minWidth: "auto"
     }
   }
 });
-function fe(e, r) {
-  return e instanceof Error ? e : pe(e) ? e === void 0 ? new Error(r.operationFailedMessage) : e.success ? new Error(r.operationFailedMessage) : e.error instanceof Error ? e.error : new Error(e.error || r.operationFailedMessage) : new Error(String(e) || r.unknownErrorMessage);
+function pe(e, r) {
+  return e instanceof Error ? e : fe(e) ? e === void 0 ? new Error(r.operationFailedMessage) : e.success ? new Error(r.operationFailedMessage) : e.error instanceof Error ? e.error : new Error(e.error || r.operationFailedMessage) : new Error(String(e) || r.unknownErrorMessage);
 }
-function pe(e) {
+function fe(e) {
   return e === void 0 ? !0 : typeof e == "object" && e !== null && "success" in e && typeof e.success == "boolean" && (e.error === void 0 || typeof e.error == "string" || e.error instanceof Error);
 }
 const me = (e, r) => {
@@ -114,10 +118,10 @@ const me = (e, r) => {
   successConfig: I = Ee,
   errorConfig: U = be,
   labels: l,
-  tooltips: d,
+  tooltips: g,
   showStatusIcons: E = !0,
   autoReset: v = !0,
-  collapseLabel: f,
+  collapseLabel: p,
   children: b,
   disabled: M,
   className: X,
@@ -125,7 +129,7 @@ const me = (e, r) => {
   icon: u,
   ...z
 }) => {
-  const s = de(), g = ge().button.labels, _ = g.loadingText, w = g.defaultErrorMessage, F = g.operationFailedMessage, S = g.unknownErrorMessage, T = g.parseErrorMessage, B = l?.loadingText, C = l?.defaultErrorMessage, N = l?.operationFailedMessage, R = l?.unknownErrorMessage, L = l?.parseErrorMessage, a = y.useMemo(() => ({
+  const s = ge(), d = de().button.labels, _ = d.loadingText, w = d.defaultErrorMessage, F = d.operationFailedMessage, S = d.unknownErrorMessage, T = d.parseErrorMessage, B = l?.loadingText, C = l?.defaultErrorMessage, N = l?.operationFailedMessage, R = l?.unknownErrorMessage, L = l?.parseErrorMessage, a = y.useMemo(() => ({
     loadingText: B ?? _,
     defaultErrorMessage: C ?? w,
     operationFailedMessage: N ?? F,
@@ -142,14 +146,14 @@ const me = (e, r) => {
     F,
     S,
     T
-  ]), { onSuccess: A, timeout: J = 2e3, text: q } = I, { onError: H, timeout: K = 2e3, text: Q } = U, { currentState: j, isLoading: k, error: V, setLoading: P, stopLoading: $, setSuccess: W, setError: p } = ue({
+  ]), { onSuccess: A, timeout: J = 2e3, text: q } = I, { onError: H, timeout: K = 2e3, text: Q } = U, { currentState: j, isLoading: x, error: V, setLoading: P, stopLoading: $, setSuccess: W, setError: f } = ue({
     onError: H,
     onSuccess: A,
     successTimeout: J,
     errorTimeout: K,
     autoReset: v,
     fallbackErrorMessage: a.operationFailedMessage
-  }), h = y.useCallback(
+  }), k = y.useCallback(
     (o) => {
       if (!o)
         $();
@@ -158,25 +162,25 @@ const me = (e, r) => {
           W();
         else {
           const i = o.error instanceof Error ? o.error : new Error(String(o.error || a.operationFailedMessage));
-          p(i);
+          f(i);
         }
     },
-    [$, W, p, a.operationFailedMessage]
+    [$, W, f, a.operationFailedMessage]
   ), Z = y.useCallback(async (o) => {
-    if (!(!e || k || M))
+    if (!(!e || x || M))
       try {
         const i = e(o);
         if (i instanceof Promise) {
           n && P();
-          const x = await i;
-          n && h(x);
+          const h = await i;
+          n && k(h);
         } else
-          h(i);
+          k(i);
       } catch (i) {
-        const x = fe(i, a);
-        p(x);
+        const h = pe(i, a);
+        f(h);
       }
-  }, [e, k, M, n, P, h, p, a]), O = u && f ? f === "sm" ? s.collapseLabelSm : f === "md" ? s.collapseLabelMd : f === "lg" ? s.collapseLabelLg : s.collapseLabelXs : void 0, m = (o) => O ? o ? /* @__PURE__ */ c("span", { className: "efw-button__label", children: o }) : void 0 : o, ee = () => {
+  }, [e, x, M, n, P, k, f, a]), O = u && p ? p === "sm" ? s.collapseLabelSm : p === "md" ? s.collapseLabelMd : p === "lg" ? s.collapseLabelLg : s.collapseLabelXs : void 0, m = (o) => O ? o ? /* @__PURE__ */ c("span", { className: "efw-button__label", children: o }) : void 0 : o, ee = () => {
     const o = [X, O].filter(Boolean);
     switch (j) {
       case "loading":
@@ -184,28 +188,28 @@ const me = (e, r) => {
           content: m(a.loadingText),
           icon: E ? /* @__PURE__ */ c(ae, { size: "tiny" }) : u,
           className: r ? [...o, s.buttonNonInteractive].join(" ") : o.join(" "),
-          tooltip: d?.loading
+          tooltip: g?.loading
         };
       case "success":
         return {
           content: m(q ?? b),
           icon: E ? /* @__PURE__ */ c(le, {}) : u,
           className: [...o, s.buttonSuccess].join(" "),
-          tooltip: d?.success
+          tooltip: g?.success
         };
       case "error":
         return {
           content: m(Q ?? b),
           icon: E ? /* @__PURE__ */ c(ce, {}) : u,
           className: [...o, s.buttonError].join(" "),
-          tooltip: d?.error ?? me(V, a)
+          tooltip: g?.error ?? me(V, a)
         };
       default:
         return {
           content: m(b),
           icon: u,
           className: o.join(" "),
-          tooltip: d?.idle
+          tooltip: g?.idle
         };
     }
   }, { content: oe, icon: re, className: te, tooltip: G } = ee(), D = /* @__PURE__ */ c(
@@ -214,7 +218,7 @@ const me = (e, r) => {
       ...z,
       appearance: Y,
       className: te,
-      disabled: M || r && k,
+      disabled: M || r && x,
       disabledFocusable: j === "loading" && r,
       icon: re,
       onClick: Z,

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

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

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

@@ -1,12 +1,12 @@
-import { jsx as o, jsxs as ie } from "react/jsx-runtime";
-import { EFWField as oe } from "../_shared/EFWField/EFWField.js";
+import { jsx as o, jsxs as oe } from "react/jsx-runtime";
+import { EFWField as se } from "../_shared/EFWField/EFWField.js";
 import { EFWDatePicker as q } from "./EFWDatePicker.js";
-import { getDatePickerFormattedValue as se } from "./EFWDatePicker.utils.js";
-import { EFWInput as re } from "../Input/EFWInput.js";
-import { useMemo as C, useState as ce, useRef as de, useEffect as Y, useCallback as _ } from "react";
-import { makeStyles as me, mergeClasses as ue, Text as A } from "@fluentui/react-components";
-import { useFieldsLocaleText as fe } from "../../i18n/PorygonI18nProvider.js";
-const he = me({
+import { getDatePickerFormattedValue as re } from "./EFWDatePicker.utils.js";
+import { EFWInput as ce } from "../Input/EFWInput.js";
+import { useMemo as C, useState as de, useRef as me, useEffect as Y, useCallback as _ } from "react";
+import { makeStyles as ue, mergeClasses as fe, Text as A } from "@fluentui/react-components";
+import { useFieldsLocaleText as he } from "../../i18n/PorygonI18nProvider.js";
+const De = ue({
   dateTimeContainer: {
     display: "flex",
     gap: "8px",
@@ -35,7 +35,7 @@ const he = me({
       width: "75px"
     }
   }
-}), De = {}, ge = [];
+}), ge = {}, Se = [];
 function $(e, t) {
   const l = new Date(e.getTime());
   if (t && t.length === 4) {
@@ -45,23 +45,23 @@ function $(e, t) {
   }
   return l.setHours(0, 0, 0, 0), l;
 }
-function Se(e) {
+function Te(e) {
   const t = e.getHours().toString().padStart(2, "0"), l = e.getMinutes().toString().padStart(2, "0");
   return `${t}${l}`;
 }
-const Te = (e) => {
-  const t = he(), l = C(
+const be = (e) => {
+  const t = De(), l = C(
     () => ({ placeholder: e.timePlaceholder }),
     [e.timePlaceholder]
   );
   if (!e.editable) {
-    const i = se(e.currentDate, {
+    const i = re(e.currentDate, {
       includeTime: !0,
       timeValue: e.currentTime
     });
     return i ? /* @__PURE__ */ o(A, { children: i }) : /* @__PURE__ */ o(A, { style: { opacity: 0.7 }, children: e.labels?.emptyState ?? "" });
   }
-  return /* @__PURE__ */ ie("div", { className: t.dateTimeContainer, children: [
+  return /* @__PURE__ */ oe("div", { className: t.dateTimeContainer, children: [
     /* @__PURE__ */ o("div", { className: t.datePickerWrapper, children: /* @__PURE__ */ o(
       q,
       {
@@ -87,7 +87,7 @@ const Te = (e) => {
       }
     ) }),
     /* @__PURE__ */ o("div", { className: t.timeInputWrapper, children: /* @__PURE__ */ o(
-      re,
+      ce,
       {
         value: e.currentTime,
         formatType: "time",
@@ -100,13 +100,13 @@ const Te = (e) => {
       }
     ) })
   ] });
-}, Ee = (e) => {
+}, Ne = (e) => {
   const {
     title: t,
     infoLabel: l,
     hint: i,
     className: c,
-    style: U = De,
+    style: U = ge,
     required: J = !1,
     validationState: K,
     validationMessage: Q,
@@ -118,7 +118,7 @@ const Te = (e) => {
     selectedDates: s,
     defaultSelectedDates: f,
     allowRangeSelection: w = !1,
-    restrictedDates: y = ge,
+    restrictedDates: y = Se,
     allowTextInput: P = !0,
     minDate: I,
     maxDate: v,
@@ -134,8 +134,9 @@ const Te = (e) => {
     includeTime: u = !1,
     timeValue: R,
     defaultTimeValue: ee = "",
-    timePlaceholder: te = "HH:MM"
-  } = e, V = fe().datePicker.labels, H = V.placeholder, O = V.emptyState, j = M?.placeholder, z = M?.emptyState, B = C(() => ({
+    timePlaceholder: te = "HH:MM",
+    ...ae
+  } = e, V = he().datePicker.labels, H = V.placeholder, O = V.emptyState, j = M?.placeholder, z = M?.emptyState, B = C(() => ({
     placeholder: j ?? H,
     emptyState: z ?? O
   }), [
@@ -143,7 +144,7 @@ const Te = (e) => {
     z,
     H,
     O
-  ]), d = R !== void 0, [ae, D] = ce(ee), g = d ? R : ae, S = de(null), T = C(() => {
+  ]), d = R !== void 0, [ne, D] = de(ee), g = d ? R : ne, S = me(null), T = C(() => {
     const n = s ?? f ?? [];
     if (n.length === 0) return null;
     const a = n[0];
@@ -158,7 +159,7 @@ const Te = (e) => {
       return;
     }
     const n = s[0], a = n instanceof Date ? n : new Date(n);
-    isNaN(a.getTime()) || d || D(Se(a));
+    isNaN(a.getTime()) || d || D(Te(a));
   }, [s, u, d]);
   const G = _((n) => {
     const a = (r) => r instanceof Date ? r.toISOString() : r;
@@ -168,17 +169,17 @@ const Te = (e) => {
     }
     const b = n.map((r) => r instanceof Date ? $(r, g).toISOString() : r);
     m?.(b);
-  }, [u, g, m]), ne = _((n) => {
+  }, [u, g, m]), le = _((n) => {
     const a = n ?? "";
     if (d || D(a), S.current && a.length === 4) {
       const b = $(S.current, a);
       m?.([b.toISOString()]);
     }
-  }, [d, m]), le = ue(c, "efw-datePicker-field");
+  }, [d, m]), ie = fe(c, "efw-datePicker-field");
   return /* @__PURE__ */ o(
-    oe,
+    se,
     {
-      className: le,
+      className: ie,
       style: U,
       title: t,
       infoLabel: l,
@@ -190,8 +191,9 @@ const Te = (e) => {
       validationMessage: Q,
       validationMessageIcon: X,
       onValidationChange: p,
+      ...ae,
       children: u ? /* @__PURE__ */ o(
-        Te,
+        be,
         {
           editable: h,
           disabled: x,
@@ -211,7 +213,7 @@ const Te = (e) => {
           onFormatDate: L,
           labels: B,
           currentTime: g,
-          onTimeChange: ne,
+          onTimeChange: le,
           timePlaceholder: te,
           currentDate: T
         }
@@ -241,5 +243,5 @@ const Te = (e) => {
   );
 };
 export {
-  Ee as EFWDatePickerField
+  Ne as EFWDatePickerField
 };

package/dist/react-components/fields/Input/EFWInputField.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { EFWField as A } from "../_shared/EFWField/EFWField.js";
 import { EFWInput as B } from "./EFWInput.js";
-import { mergeClasses as P } from "@griffel/react";
-const G = (a) => {
+import { mergeClasses as S } from "@griffel/react";
+const H = (a) => {
   const {
     title: n,
     infoLabel: o,
@@ -14,10 +14,10 @@ const G = (a) => {
     contentBefore: f,
     contentAfter: m,
     minLength: g = 0,
-    maxLength: u = 250,
-    validationState: c,
-    validationMessage: h,
-    validationMessageIcon: p,
+    maxLength: p = 250,
+    validationState: u,
+    validationMessage: c,
+    validationMessageIcon: h,
     value: C,
     defaultValue: b,
     editable: e = !0,
@@ -31,10 +31,11 @@ const G = (a) => {
     formatFunction: M,
     labels: N,
     validationMessages: W,
-    onValidationChange: w
+    onValidationChange: w,
+    ...P
   } = a, V = (q, z) => {
     x?.(q, z);
-  }, j = P(r, "efw-input-field");
+  }, j = S(r, "efw-input-field");
   return /* @__PURE__ */ t(
     A,
     {
@@ -46,11 +47,12 @@ const G = (a) => {
       hint: i,
       size: s,
       required: d,
-      validationState: c,
-      validationMessage: h,
-      validationMessageIcon: p,
+      validationState: u,
+      validationMessage: c,
+      validationMessageIcon: h,
       onValidationChange: w,
       hidden: v,
+      ...P,
       children: /* @__PURE__ */ t(
         B,
         {
@@ -59,7 +61,7 @@ const G = (a) => {
           editable: e,
           onChange: V,
           minLength: g,
-          maxLength: u,
+          maxLength: p,
           disabled: F,
           autoComplete: L,
           type: y,
@@ -76,5 +78,5 @@ const G = (a) => {
   );
 };
 export {
-  G as EFWInputField
+  H as EFWInputField
 };

package/dist/react-components/fields/NumberInput/EFWNumberInputField.js

@@ -1,21 +1,21 @@
 import { jsx as a } from "react/jsx-runtime";
-import { EFWField as A } from "../_shared/EFWField/EFWField.js";
-import { EFWNumberInput as B } from "./EFWNumberInput.js";
+import { EFWField as B } from "../_shared/EFWField/EFWField.js";
+import { EFWNumberInput as P } from "./EFWNumberInput.js";
 import { mergeClasses as T } from "@griffel/react";
 const H = (t) => {
   const {
     title: n,
     infoLabel: o,
     hint: l,
-    className: i,
-    style: r = {},
+    className: r,
+    style: i = {},
     required: s = !1,
     contentBefore: m,
     contentAfter: d,
     minValue: u,
     maxValue: f,
-    validationState: c,
-    validationMessage: p,
+    validationState: p,
+    validationMessage: c,
     validationMessageIcon: b,
     value: g,
     defaultValue: h,
@@ -31,32 +31,34 @@ const H = (t) => {
     decimalSeparator: M,
     labels: S,
     validationMessages: W,
-    onValidationChange: w
-  } = t, y = (j, q) => {
-    v?.(j, q);
-  }, L = T(i, "efw-numberInput-field");
+    onValidationChange: w,
+    ...y
+  } = t, L = (q, A) => {
+    v?.(q, A);
+  }, j = T(r, "efw-numberInput-field");
   return /* @__PURE__ */ a(
-    A,
+    B,
     {
-      className: L,
-      style: r,
+      className: j,
+      style: i,
       title: n,
       infoLabel: o,
       weightLabel: e ? "regular" : "semibold",
       hint: l,
       required: s,
-      validationState: c,
-      validationMessage: p,
+      validationState: p,
+      validationMessage: c,
       validationMessageIcon: b,
       onValidationChange: w,
       hidden: F,
+      ...y,
       children: /* @__PURE__ */ a(
-        B,
+        P,
         {
           value: g,
           defaultValue: h,
           editable: e,
-          onChange: y,
+          onChange: L,
           disabled: C,
           autoComplete: N,
           contentBefore: m,

package/dist/react-components/fields/Switch/EFWSwitchField.js

@@ -1,16 +1,16 @@
 import { jsx as a } from "react/jsx-runtime";
-import { EFWField as N } from "../_shared/EFWField/EFWField.js";
-import { EFWSwitch as S } from "./EFWSwitch.js";
-import { mergeClasses as W } from "@griffel/react";
-const j = (l) => {
+import { EFWField as S } from "../_shared/EFWField/EFWField.js";
+import { EFWSwitch as W } from "./EFWSwitch.js";
+import { mergeClasses as x } from "@griffel/react";
+const q = (l) => {
   const {
     title: i,
-    infoLabel: t,
-    hint: s,
+    infoLabel: s,
+    hint: t,
     className: o,
     style: n = {},
-    required: d = !1,
-    validationState: r,
+    required: r = !1,
+    validationState: d,
     validationMessage: m,
     validationMessageIcon: f,
     value: h,
@@ -19,33 +19,35 @@ const j = (l) => {
     disabled: g = !1,
     hidden: u = !1,
     labels: b,
-    onChange: C,
-    onValidationChange: p
-  } = l, w = (v, E) => {
-    C?.(v, E);
-  }, F = W(o, "efw-switch-field");
+    onChange: p,
+    onValidationChange: C,
+    ...w
+  } = l, F = (E, N) => {
+    p?.(E, N);
+  }, v = x(o, "efw-switch-field");
   return /* @__PURE__ */ a(
-    N,
+    S,
     {
-      className: F,
+      className: v,
       style: n,
       title: i,
-      infoLabel: t,
+      infoLabel: s,
       weightLabel: e ? "regular" : "semibold",
-      hint: s,
-      required: d,
-      validationState: r,
+      hint: t,
+      required: r,
+      validationState: d,
       validationMessage: m,
       validationMessageIcon: f,
-      onValidationChange: p,
+      onValidationChange: C,
       hidden: u,
+      ...w,
       children: /* @__PURE__ */ a(
-        S,
+        W,
         {
           value: h,
           defaultValue: c,
           editable: e,
-          onChange: w,
+          onChange: F,
           disabled: g,
           labels: b
         }
@@ -54,5 +56,5 @@ const j = (l) => {
   );
 };
 export {
-  j as EFWSwitchField
+  q as EFWSwitchField
 };