@envisiongroup/porygon 1.0.0-rc.9 → 1.0.0

package/dist/react-components/forms/EFWForm/index.js

@@ -1,8 +1,12 @@
-import { getEFWFormFieldDisplayText as e } from "./EFWForm.converter.js";
-import { useFormController as t } from "./EFWForm.hooks.js";
-import { EFWForm as l } from "./EFWForm.js";
+import { getFormFieldDisplayText as e } from "./EFWForm.converter.js";
+import { useFormController as F } from "./EFWForm.hooks.js";
+import { EFWForm as m } from "./EFWForm.js";
+import { EFWConversionError as f, EFWValuesToFlat as p, flatToEFWValues as s } from "./EFWForm.flatConverter.js";
 export {
-  l as EFWForm,
-  e as getEFWFormFieldDisplayText,
-  t as useFormController
+  f as EFWConversionError,
+  m as EFWForm,
+  p as EFWValuesToFlat,
+  s as flatToEFWValues,
+  e as getFormFieldDisplayText,
+  F as useFormController
 };

package/dist/react-components/forms/EFWFormMessageBarGroup/EFWFormMessageBarGroup.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { useState as b, useEffect as j } from "react";
-import { DismissRegular as v } from "@fluentui/react-icons";
-import { makeStyles as D, MessageBarGroup as F, mergeClasses as S, MessageBar as k, MessageBarBody as A, MessageBarTitle as E, MessageBarActions as T, Button as c } from "@fluentui/react-components";
-const $ = D({
+import { useState as c } from "react";
+import { DismissRegular as D } from "@fluentui/react-icons";
+import { makeStyles as E, MessageBarGroup as F, mergeClasses as S, MessageBar as k, MessageBarBody as A, MessageBarTitle as P, MessageBarActions as T, Button as m } from "@fluentui/react-components";
+const $ = E({
   efwMessageBarGroup: {
     width: "100%",
     display: "flex",
@@ -20,67 +20,67 @@ const $ = D({
     justifyContent: "end",
     gap: "5px"
   }
-}), q = (m) => {
+}), z = (g) => {
   const {
     style: d = {},
-    animate: g = void 0,
-    messages: o = [],
-    onDismiss: n
-  } = m, u = $(), [i, l] = b(o);
-  j(() => {
-    l(o);
-  }, [o]);
-  const f = (s) => {
-    if (n)
-      n(s);
+    animate: u = void 0,
+    messages: s = [],
+    onDismiss: o
+  } = g, f = $(), [i, l] = c(s), [M, x] = c(s);
+  s !== M && (x(s), l(s));
+  const y = (r) => {
+    if (o)
+      o(r);
     else {
-      const r = i.filter((t) => t.id !== s);
-      l(r), console.log({ messagesFiltered: r });
+      const t = i.filter(
+        (a) => a.id !== r
+      );
+      l(t);
     }
-  }, M = () => i.map(({
-    intent: s,
-    id: r,
-    title: t,
-    message: x = "",
-    layout: y = "multiline",
-    actions: B = [],
-    dismissable: h = !0
-  }) => /* @__PURE__ */ p(k, { layout: y, intent: s, children: [
-    /* @__PURE__ */ p(A, { children: [
-      t && /* @__PURE__ */ e(E, { children: t }),
-      x
-    ] }),
-    /* @__PURE__ */ e(
-      T,
-      {
-        containerAction: h ? /* @__PURE__ */ e(
-          c,
-          {
-            onClick: () => f(r),
-            "aria-label": "dismiss",
-            appearance: "transparent",
-            icon: /* @__PURE__ */ e(v, {})
-          }
-        ) : void 0,
-        children: B.filter((a) => a.content).map((a) => {
-          const { id: G, content: w, ...C } = a;
-          return /* @__PURE__ */ e(c, { ...C, children: w }, G);
-        })
-      }
-    )
-  ] }, `${s}-${r}`));
+  }, B = () => i.map(
+    ({
+      intent: r,
+      id: t,
+      title: a,
+      message: h = "",
+      layout: v = "multiline",
+      actions: G = [],
+      dismissable: w = !0
+    }) => /* @__PURE__ */ p(k, { layout: v, intent: r, children: [
+      /* @__PURE__ */ p(A, { children: [
+        a && /* @__PURE__ */ e(P, { children: a }),
+        h
+      ] }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          containerAction: w ? /* @__PURE__ */ e(
+            m,
+            {
+              onClick: () => y(t),
+              "aria-label": "dismiss",
+              appearance: "transparent",
+              icon: /* @__PURE__ */ e(D, {})
+            }
+          ) : void 0,
+          children: G.filter((n) => n.content).map((n) => {
+            const { id: C, content: b, ...j } = n;
+            return /* @__PURE__ */ e(m, { ...j, children: b }, C);
+          })
+        }
+      )
+    ] }, `${r}-${t}`)
+  );
   return /* @__PURE__ */ e(
     F,
     {
-      className: S(
-        u.efwMessageBarGroup
-      ),
+      className: S(f.efwMessageBarGroup),
       style: d,
-      animate: g,
-      children: M()
+      animate: u,
+      children: B()
     }
   );
 };
 export {
-  q as EFWFormMessageBarGroup
+  z as EFWFormMessageBarGroup
 };

package/dist/react-components/forms/EFWMessageBarManager/EFWMessageBarManager.js

@@ -1,32 +1,41 @@
-import { jsx as F } from "react/jsx-runtime";
-import { forwardRef as E, useState as M, useCallback as i, useImperativeHandle as b } from "react";
+import { jsx as I } from "react/jsx-runtime";
+import { forwardRef as v, useState as d, useCallback as c, useImperativeHandle as b, useMemo as j } from "react";
 import { EFWFormMessageBarGroup as W } from "../EFWFormMessageBarGroup/EFWFormMessageBarGroup.js";
-const w = E((c, d) => {
-  const {
-    style: m,
-    initialExternalMessages: f = []
-  } = c, [g, a] = M([]), [u, n] = M(f), p = i((e, s = "internal") => {
-    (s === "internal" ? a : n)((o) => o.some((r) => r.id === e.id) ? o.map((r) => r.id === e.id ? { ...e } : r) : [...o, { ...e }]);
-  }, []), l = i((e) => {
-    a((s) => s.filter((t) => t.id !== e)), n((s) => s.filter((t) => t.id !== e));
-  }, []), x = i(() => {
-    a([]), n([]);
-  }, []);
-  b(d, () => ({
-    addMessageBar: p,
-    removeMessageBar: l,
-    removeAllMessagesBar: x
-  }));
-  const B = [...g, ...u];
-  return /* @__PURE__ */ F(
-    W,
-    {
-      style: m,
-      messages: B,
-      onDismiss: l
-    }
-  );
-});
+const A = v(
+  (u, f) => {
+    const { style: x, initialExternalMessages: a = [] } = u, [M, i] = d([]), [g, t] = d(a), o = a.map((e) => String(e.id)).join("|"), [p, E] = d(o);
+    o !== p && (E(o), t(a));
+    const B = c(
+      (e, s = "internal") => {
+        (s === "internal" ? i : t)((l) => l.some((n) => n.id === e.id) ? l.map(
+          (n) => n.id === e.id ? { ...e } : n
+        ) : [...l, { ...e }]);
+      },
+      []
+    ), m = c((e) => {
+      i((s) => s.filter((r) => r.id !== e)), t((s) => s.filter((r) => r.id !== e));
+    }, []), F = c(() => {
+      i([]), t([]);
+    }, []);
+    b(f, () => ({
+      addMessageBar: B,
+      removeMessageBar: m,
+      removeAllMessagesBar: F
+    }));
+    const S = j(
+      () => [...M, ...g],
+      [M, g]
+    );
+    return /* @__PURE__ */ I(
+      W,
+      {
+        style: x,
+        messages: S,
+        onDismiss: m
+      }
+    );
+  }
+);
 export {
-  w as EFWMessageBarManager
+  A as EFWMessageBarManager
 };

package/dist/react-components/hooks/useDrawer/component/EFWDrawer/EFWDrawer.js

@@ -1,10 +1,10 @@
-import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
 import * as n from "react";
-import { makeStyles as D, useRestoreFocusTarget as B, Drawer as C, DrawerHeader as b, DrawerHeaderTitle as R, DrawerBody as z, DrawerFooter as N, tokens as r } from "@fluentui/react-components";
-import { Dismiss24Regular as S } from "@fluentui/react-icons";
-import { EFWButton as E } from "../../../../buttons/EFWButton/EFWButton.js";
-import { EFWGroupButton as T } from "../../../../buttons/EFWGroupButton/EFWGroupButton.js";
-const W = D({
+import { makeStyles as B, useRestoreFocusTarget as D, Drawer as R, DrawerHeader as z, DrawerHeaderTitle as C, DrawerBody as N, DrawerFooter as S, tokens as e } from "@fluentui/react-components";
+import { Dismiss24Regular as E } from "@fluentui/react-icons";
+import { EFWButton as T } from "../../../../buttons/EFWButton/EFWButton.js";
+import { EFWGroupButton as W } from "../../../../buttons/EFWGroupButton/EFWGroupButton.js";
+const j = B({
   drawerContainer: {
     transform: "translateZ(0px)"
   },
@@ -21,52 +21,53 @@ const W = D({
    * Aplica padding vertical y horizontal usando tokens de diseño.
    */
   drawerHeader: {
-    padding: r.spacingVerticalL,
-    paddingLeft: r.spacingHorizontalL,
-    paddingRight: r.spacingHorizontalL
+    padding: e.spacingVerticalL,
+    paddingLeft: e.spacingHorizontalL,
+    paddingRight: e.spacingHorizontalL
   },
   /**
    * Estilos para el cuerpo del drawer.
    * Aplica padding inferior y lateral usando tokens de diseño.
    */
   drawerBody: {
-    paddingBottom: r.spacingVerticalL,
-    paddingLeft: r.spacingHorizontalL,
-    paddingRight: r.spacingHorizontalL
+    paddingBottom: e.spacingVerticalL,
+    paddingLeft: e.spacingHorizontalL,
+    paddingRight: e.spacingHorizontalL
   },
   /**
    * Estilos para el pie del drawer.
    * Aplica padding, disposición flexible y espaciado entre elementos.
    */
   drawerFooter: {
-    padding: r.spacingVerticalM,
-    paddingLeft: r.spacingHorizontalL,
-    paddingRight: r.spacingHorizontalL,
+    padding: e.spacingVerticalM,
+    paddingLeft: e.spacingHorizontalL,
+    paddingRight: e.spacingHorizontalL,
     display: "flex",
     justifyContent: "flex-start",
-    gap: r.spacingHorizontalS
+    gap: e.spacingHorizontalS
   }
-}), j = n.memo(({
+}), A = n.memo(({
   isOpen: s,
-  onClose: t,
+  onClose: a,
   onOpenChange: l,
   // Nueva prop
   title: f,
-  content: i,
+  content: o,
   buttons: p = [],
   size: m,
   position: w,
-  modalType: h
+  modalType: h,
+  labels: x
 }) => {
-  const a = W(), x = B(), o = n.useRef(null), F = n.useCallback(
+  const t = j(), L = D(), i = n.useRef(null), F = n.useCallback(
     (c, u) => {
       if (!u.open && s) {
-        const d = c.target, y = c.currentTarget;
-        if ((d === y || d?.classList.contains("fui-DrawerDialog__backdrop") || d?.getAttribute("role") === "presentation") && o.current) {
-          const H = document.activeElement;
-          if (!o.current.contains(H)) {
-            const g = o.current.querySelector(
-              '[aria-label="Cerrar"]'
+        const d = c.target, H = c.currentTarget;
+        if ((d === H || d?.classList.contains("fui-DrawerDialog__backdrop") || d?.getAttribute("role") === "presentation") && i.current) {
+          const b = document.activeElement;
+          if (!i.current.contains(b)) {
+            const g = i.current.querySelector(
+              '[data-efw-drawer-close-button="true"]'
             );
             g && g.focus();
           }
@@ -75,13 +76,13 @@ const W = D({
       l(c, u);
     },
     [s, l]
-  ), L = n.useMemo(() => typeof i == "function" ? i(t) : i, [i, t]);
+  ), y = n.useMemo(() => typeof o == "function" ? o(a) : o, [o, a]);
   return /* @__PURE__ */ k(
-    C,
+    R,
     {
-      ref: o,
+      ref: i,
       as: "aside",
-      className: a.drawerContainer,
+      className: t.drawerContainer,
       "data-efw-drawer": !0,
       size: m,
       position: w,
@@ -89,44 +90,45 @@ const W = D({
       open: s,
       onOpenChange: F,
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r(
           "div",
           {
-            ...x,
-            className: a.focusSentinel,
+            ...L,
+            className: t.focusSentinel,
             tabIndex: -1,
             "data-efw-drawer-focus-sentinel": !0
           }
         ),
-        /* @__PURE__ */ e(b, { className: a.drawerHeader, children: /* @__PURE__ */ e(
-          R,
+        /* @__PURE__ */ r(z, { className: t.drawerHeader, children: /* @__PURE__ */ r(
+          C,
           {
             id: "drawer-title",
-            action: /* @__PURE__ */ e(
-              E,
+            action: /* @__PURE__ */ r(
+              T,
               {
                 appearance: "subtle",
-                icon: /* @__PURE__ */ e(S, {}),
-                "aria-label": "Cerrar",
-                onClick: t
+                icon: /* @__PURE__ */ r(E, {}),
+                "aria-label": x.closeButtonAriaLabel,
+                "data-efw-drawer-close-button": "true",
+                onClick: a
               }
             ),
             children: f
           }
         ) }),
-        /* @__PURE__ */ e(z, { className: a.drawerBody, children: L }),
-        p.length > 0 && /* @__PURE__ */ e(N, { className: a.drawerFooter, children: /* @__PURE__ */ e(
-          T,
+        /* @__PURE__ */ r(N, { className: t.drawerBody, children: y }),
+        p.length > 0 && /* @__PURE__ */ r(S, { className: t.drawerFooter, children: /* @__PURE__ */ r(
+          W,
           {
             buttons: p,
-            onClickParams: t
+            onClickParams: a
           }
         ) })
       ]
     }
   );
 });
-j.displayName = "EFWDrawer";
+A.displayName = "EFWDrawer";
 export {
-  j as EFWDrawer
+  A as EFWDrawer
 };

package/dist/react-components/hooks/useDrawer/component/EFWDrawer/EFWDrawer.types.d.ts

@@ -9,6 +9,7 @@ export interface EFWDrawerProps {
     size: DrawerState['size'];
     position: DrawerState['position'];
     modalType: DrawerState['modalType'];
+    labels: DrawerState['labels'];
     onOpenChange: (event: React.SyntheticEvent, data: {
         open: boolean;
     }) => void;

package/dist/react-components/hooks/useDrawer/component/EFWDrawerLoader/EFWDrawerLoader.d.ts

@@ -1,5 +1,7 @@
 import { default as React } from 'react';
 
-export declare const EFWDrawerLoader: React.MemoExoticComponent<({}: {
-    delay: number;
-}) => import("react/jsx-runtime").JSX.Element>;
+interface EFWDrawerLoaderProps {
+    loadingText: string;
+}
+export declare const EFWDrawerLoader: React.MemoExoticComponent<({ loadingText }: EFWDrawerLoaderProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/react-components/hooks/useDrawer/component/EFWDrawerLoader/EFWDrawerLoader.js

@@ -1,7 +1,7 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import i from "react";
-import { Spinner as t, Text as o } from "@fluentui/react-components";
-const n = i.memo(({}) => /* @__PURE__ */ r(
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import t from "react";
+import { Spinner as m, Text as o } from "@fluentui/react-components";
+const n = t.memo(({ loadingText: r }) => /* @__PURE__ */ i(
   "div",
   {
     style: {
@@ -13,8 +13,8 @@ const n = i.memo(({}) => /* @__PURE__ */ r(
       gap: "10px"
     },
     children: [
-      /* @__PURE__ */ e(t, { size: "medium" }),
-      /* @__PURE__ */ e(o, { children: "Cargando contenido..." })
+      /* @__PURE__ */ e(m, { size: "medium" }),
+      /* @__PURE__ */ e(o, { children: r })
     ]
   }
 ));

package/dist/react-components/hooks/useDrawer/index.d.ts

@@ -1,2 +1,2 @@
 export { useDrawer } from './useDrawer';
-export type { UseDrawerProps, DrawerOpenHandler, DrawerCloseHandler } from './useDrawer.types';
+export type { UseDrawerProps, DrawerOpenHandler, DrawerCloseHandler, UseDrawerLabels } from './useDrawer.types';

package/dist/react-components/hooks/useDrawer/useDrawer.d.ts

@@ -1,9 +1,11 @@
 import { DrawerCloseHandler, DrawerOpenHandler, DrawerState, UseDrawerProps } from './useDrawer.types';
 import * as React from 'react';
-export declare function useDrawer({ title: initialTitle, content: initialContent, buttons: initialButtons, size: initialSize, position: initialPosition, modalType: initialModalType, drawerOnOpen, drawerOnClose, deferContentRendering: initialDeferContentRendering, contentRenderDelay: initialContentRenderDelay, }: UseDrawerProps): {
+export declare function useDrawer({ title: initialTitle, content: initialContent, buttons: initialButtons, size: initialSize, position: initialPosition, modalType: initialModalType, drawerOnOpen, drawerOnClose, deferContentRendering: initialDeferContentRendering, contentRenderDelay: initialContentRenderDelay, labels: initialLabels, }: UseDrawerProps): {
     openDrawer: DrawerOpenHandler;
     closeDrawer: DrawerCloseHandler;
-    updateDrawer: (updates: Partial<DrawerState>) => void;
+    updateDrawer: (updates: Partial<DrawerState>, options?: {
+        force?: boolean;
+    }) => void;
     isOpen: boolean;
     isContentReady: boolean;
     DrawerElement: React.ReactPortal | null;