@envisiongroup/porygon 1.0.0-rc.9 → 1.0.1

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

@@ -1,32 +1,33 @@
-var H = Object.defineProperty;
-var Y = (o, t, r) => t in o ? H(o, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[t] = r;
-var a = (o, t, r) => Y(o, typeof t != "symbol" ? t + "" : t, r);
-import { jsx as y } from "react/jsx-runtime";
-import * as n from "react";
-import { createPortal as x } from "react-dom";
-import { motionTokens as m } from "@fluentui/react-components";
-import { EFWDrawerLoader as M } from "./component/EFWDrawerLoader/EFWDrawerLoader.js";
-import { EFWDrawer as U } from "./component/EFWDrawer/EFWDrawer.js";
-const j = {
-  small: m.durationGentle,
-  medium: m.durationSlow,
-  large: m.durationSlower,
-  full: m.durationUltraSlow
-}, B = 1e3, d = class d {
+var te = Object.defineProperty;
+var ne = (n, t, r) => t in n ? te(n, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[t] = r;
+var d = (n, t, r) => ne(n, typeof t != "symbol" ? t + "" : t, r);
+import { jsx as S } from "react/jsx-runtime";
+import * as s from "react";
+import { createPortal as re } from "react-dom";
+import { motionTokens as b } from "@fluentui/react-components";
+import { useButtonsLocaleText as se } from "../../i18n/PorygonI18nProvider.js";
+import { EFWDrawerLoader as q } from "./component/EFWDrawerLoader/EFWDrawerLoader.js";
+import { EFWDrawer as oe } from "./component/EFWDrawer/EFWDrawer.js";
+const ie = {
+  small: b.durationGentle,
+  medium: b.durationSlow,
+  large: b.durationSlower,
+  full: b.durationUltraSlow
+}, ue = 1e3, h = class h {
   constructor() {
-    a(this, "listenerCount", 0);
-    a(this, "doc", null);
-    a(this, "supportsPointerEvents", null);
-    a(this, "supportsWeakRef", typeof WeakRef < "u");
-    a(this, "lastTargetRef", null);
-    a(this, "lastTargetTime", 0);
-    a(this, "handleInteraction", (t) => {
+    d(this, "listenerCount", 0);
+    d(this, "doc", null);
+    d(this, "supportsPointerEvents", null);
+    d(this, "supportsWeakRef", typeof WeakRef < "u");
+    d(this, "lastTargetRef", null);
+    d(this, "lastTargetTime", 0);
+    d(this, "handleInteraction", (t) => {
       const r = t.target;
       r instanceof HTMLElement && (this.lastTargetRef = this.supportsWeakRef ? new WeakRef(r) : r, this.lastTargetTime = Date.now());
     });
   }
   static getInstance() {
-    return d.instance || (d.instance = new d()), d.instance;
+    return h.instance || (h.instance = new h()), h.instance;
   }
   register(t) {
     if (this.listenerCount += 1, this.listenerCount === 1) {
@@ -48,35 +49,99 @@ const j = {
   consumeLastTarget() {
     if (!this.lastTargetRef)
       return null;
-    const t = this.supportsWeakRef ? this.lastTargetRef.deref() : this.lastTargetRef, r = t && Date.now() - this.lastTargetTime <= B;
+    const t = this.supportsWeakRef ? this.lastTargetRef.deref() : this.lastTargetRef, r = t && Date.now() - this.lastTargetTime <= ue;
     return this.lastTargetRef = null, r ? t : null;
   }
 };
-a(d, "instance", null);
-let E = d;
-const A = E.getInstance(), V = (o, t) => {
+d(h, "instance", null);
+let A = h;
+const G = A.getInstance(), H = (n) => {
+  if (n === null || typeof n != "object") return !1;
+  const t = Object.getPrototypeOf(n);
+  return t === Object.prototype || t === null;
+}, ae = (n, t) => !s.isValidElement(n) || !s.isValidElement(t) ? !1 : n.type === t.type && n.key === t.key, k = (n, t) => {
+  if (Object.is(n, t) || ae(n, t))
+    return !0;
+  if (Array.isArray(n) && Array.isArray(t)) {
+    if (n.length !== t.length) return !1;
+    for (let r = 0; r < n.length; r += 1)
+      if (!k(n[r], t[r]))
+        return !1;
+    return !0;
+  }
+  if (H(n) && H(t)) {
+    const r = /* @__PURE__ */ new Set([...Object.keys(n), ...Object.keys(t)]);
+    for (const i of r)
+      if (!k(n[i], t[i]))
+        return !1;
+    return !0;
+  }
+  return !1;
+}, le = (n, t) => {
+  if (n.length !== t.length) return !1;
+  for (let r = 0; r < n.length; r += 1) {
+    const i = n[r], u = t[r];
+    if (i.kind !== u.kind || !k(i.props, u.props))
+      return !1;
+  }
+  return !0;
+}, M = (n, t) => {
+  if (!t)
+    return n;
+  const r = Object.entries(t);
+  if (r.length === 0)
+    return n;
+  let i = !1;
+  const u = { ...n };
+  for (const [p, c] of r)
+    Object.is(n[p], c) || (i = !0, u[p] = c);
+  return i ? u : n;
+}, Y = (n, t) => {
+  const r = Object.entries(t);
+  if (r.length === 0) return !1;
+  for (const [i, u] of r) {
+    const p = n[i];
+    if (i === "buttons") {
+      if (!le(p ?? [], u ?? []))
+        return !0;
+      continue;
+    }
+    if (i === "labels") {
+      const c = p ?? {};
+      if (M(c, u) !== c)
+        return !0;
+      continue;
+    }
+    if (!Object.is(p, u))
+      return !0;
+  }
+  return !1;
+}, ce = (n, t) => {
   switch (t.type) {
-    case "OPEN":
+    case "OPEN": {
+      const i = t.payload ?? {}, u = M(n.labels, i.labels);
       return {
-        ...o,
+        ...n,
         isOpen: !0,
         isMounted: !0,
         isClosing: !1,
         isContentReady: !1,
         wasContentShown: !1,
-        ...t.payload || {}
+        ...i,
+        labels: u
       };
+    }
     case "START_CLOSE":
       return {
-        ...o,
+        ...n,
         isOpen: !1,
         isClosing: !0,
         // Mantener el estado de qué se estaba mostrando
-        wasContentShown: o.isContentReady
+        wasContentShown: n.isContentReady
       };
     case "FINISH_CLOSE":
       return {
-        ...o,
+        ...n,
         isClosing: !1,
         isMounted: !1,
         isContentReady: !1,
@@ -84,62 +149,76 @@ const A = E.getInstance(), V = (o, t) => {
       };
     case "CONTENT_READY":
       return {
-        ...o,
+        ...n,
         isContentReady: !0,
         wasContentShown: !0
       };
     case "UPDATE_CONTENT":
+      if (!t.payload || !Y(n, t.payload))
+        return n;
+      const r = M(n.labels, t.payload.labels);
       return {
-        ...o,
-        ...t.payload
+        ...n,
+        ...t.payload,
+        labels: r
       };
     default:
-      return o;
+      return n;
   }
 };
-function $({
-  title: o = "",
+function Ce({
+  title: n = "",
   content: t,
   buttons: r = [],
-  size: g = "small",
-  position: b = "end",
-  modalType: _ = "modal",
-  drawerOnOpen: C,
-  drawerOnClose: h,
-  deferContentRendering: k = !1,
-  contentRenderDelay: P = 500
+  size: i = "small",
+  position: u = "end",
+  modalType: p = "modal",
+  drawerOnOpen: c,
+  drawerOnClose: g,
+  deferContentRendering: X = !1,
+  contentRenderDelay: Z = 500,
+  labels: J
 }) {
-  const i = n.useRef(null), [T, z] = n.useState(null), u = n.useRef(), c = n.useRef(), R = n.useRef(null), w = n.useRef(g), O = n.useRef(!1), v = n.useRef(h), S = n.useRef(C), [e, f] = n.useReducer(V, {
+  const N = se(), a = s.useRef(null), [v, K] = s.useState(null), f = s.useRef(), m = s.useRef(), O = s.useRef(null), T = s.useRef(null), R = s.useRef(null), w = s.useRef(!1), I = s.useRef(i), P = s.useRef(!1), _ = s.useRef(g), j = s.useRef(c), [e, C] = s.useReducer(ce, {
     isOpen: !1,
     isMounted: !1,
     isClosing: !1,
     isContentReady: !1,
     wasContentShown: !1,
-    title: o,
+    title: n,
     content: t,
     buttons: r,
-    size: g,
-    position: b,
-    modalType: _,
-    deferContentRendering: k,
-    contentRenderDelay: P
-  });
-  n.useLayoutEffect(() => {
+    size: i,
+    position: u,
+    modalType: p,
+    deferContentRendering: X,
+    contentRenderDelay: Z,
+    labels: J ?? {}
+  }), U = s.useRef(e), E = s.useMemo(
+    () => ({
+      ...N.drawer.labels,
+      ...e.labels ?? {}
+    }),
+    [N.drawer.labels, e.labels]
+  );
+  s.useLayoutEffect(() => {
     if (!(typeof document > "u"))
-      return i.current || (i.current = document.createElement("div"), i.current.className = "drawer-portal-container", document.body.appendChild(i.current), z(i.current)), () => {
-        i.current && document.body.contains(i.current) && (document.body.removeChild(i.current), i.current = null), u.current && clearTimeout(u.current), c.current && clearTimeout(c.current);
+      return a.current || (a.current = document.createElement("div"), a.current.className = "drawer-portal-container", document.body.appendChild(a.current), K(a.current)), () => {
+        a.current && document.body.contains(a.current) && (document.body.removeChild(a.current), a.current = null), f.current && clearTimeout(f.current), m.current && clearTimeout(m.current), R.current !== null && typeof window < "u" && (window.cancelAnimationFrame(R.current), R.current = null), T.current = null, w.current = !1;
       };
-  }, []), n.useEffect(() => {
+  }, []), s.useEffect(() => {
     if (!(typeof document > "u"))
-      return A.register(document);
-  }, []), n.useLayoutEffect(() => {
-    w.current = e.size, O.current = e.isOpen;
-  }, [e.size, e.isOpen]), n.useLayoutEffect(() => {
-    v.current = h, S.current = C;
-  }, [h, C]), n.useEffect(() => (e.isOpen && !e.isContentReady && !e.isClosing && (u.current && clearTimeout(u.current), e.deferContentRendering && e.contentRenderDelay > 0 ? u.current = setTimeout(() => {
-    f({ type: "CONTENT_READY" });
-  }, e.contentRenderDelay) : f({ type: "CONTENT_READY" })), () => {
-    u.current && clearTimeout(u.current);
+      return G.register(document);
+  }, []), s.useLayoutEffect(() => {
+    U.current = e;
+  }, [e]), s.useLayoutEffect(() => {
+    I.current = e.size, P.current = e.isOpen;
+  }, [e.size, e.isOpen]), s.useLayoutEffect(() => {
+    _.current = g, j.current = c;
+  }, [g, c]), s.useEffect(() => (e.isOpen && !e.isContentReady && !e.isClosing && (f.current && clearTimeout(f.current), e.deferContentRendering && e.contentRenderDelay > 0 ? f.current = setTimeout(() => {
+    C({ type: "CONTENT_READY" });
+  }, e.contentRenderDelay) : C({ type: "CONTENT_READY" })), () => {
+    f.current && clearTimeout(f.current);
   }), [
     e.isOpen,
     e.isContentReady,
@@ -147,42 +226,65 @@ function $({
     e.deferContentRendering,
     e.contentRenderDelay
   ]);
-  const D = n.useCallback(() => {
+  const F = s.useCallback(() => {
     if (typeof document > "u") return;
-    const p = A.consumeLastTarget() ?? document.activeElement;
-    p instanceof HTMLElement && p !== document.body ? R.current = p : R.current = null;
-  }, []), N = n.useCallback(() => {
+    const l = G.consumeLastTarget() ?? document.activeElement;
+    l instanceof HTMLElement && l !== document.body ? O.current = l : O.current = null;
+  }, []), W = s.useCallback(() => {
     if (typeof document > "u") return;
-    const s = R.current;
-    R.current = null, !(!s || !s.isConnected) && (i.current && i.current.contains(s) || s.focus?.());
-  }, []), W = n.useCallback(
-    (s) => {
-      c.current && (clearTimeout(c.current), c.current = void 0), D(), f({ type: "OPEN", payload: s }), S.current?.()?.catch?.(console.error);
+    const o = O.current;
+    O.current = null, !(!o || !o.isConnected) && (a.current && a.current.contains(o) || o.focus?.());
+  }, []), z = s.useCallback(
+    (o) => {
+      m.current && (clearTimeout(m.current), m.current = void 0), F(), C({ type: "OPEN", payload: o }), j.current?.()?.catch?.(console.error);
     },
-    [D]
-  ), l = n.useCallback(() => {
-    u.current && (clearTimeout(u.current), u.current = void 0), c.current && clearTimeout(c.current), f({ type: "START_CLOSE" }), v.current?.()?.catch?.(console.error);
-    const s = j[w.current] ?? m.durationGentle;
-    c.current = setTimeout(() => {
-      N(), f({ type: "FINISH_CLOSE" });
-    }, s);
-  }, [N]), F = n.useCallback((s) => {
-    f({ type: "UPDATE_CONTENT", payload: s });
-  }, []), L = n.useCallback(
-    (s, p) => {
-      !p.open && O.current && l();
+    [F]
+  ), y = s.useCallback(() => {
+    f.current && (clearTimeout(f.current), f.current = void 0), m.current && clearTimeout(m.current), C({ type: "START_CLOSE" }), _.current?.()?.catch?.(console.error);
+    const o = ie[I.current] ?? b.durationGentle;
+    m.current = setTimeout(() => {
+      W(), C({ type: "FINISH_CLOSE" });
+    }, o);
+  }, [W]), D = s.useCallback(() => {
+    R.current = null;
+    const o = T.current;
+    T.current = null;
+    const l = w.current === !0;
+    w.current = !1, o && (!l && !Y(U.current, o) || C({ type: "UPDATE_CONTENT", payload: o }));
+  }, []), L = s.useCallback((o, l) => {
+    const V = {
+      ...T.current ?? {},
+      ...o
+    };
+    T.current = V;
+    const ee = l?.force === !0 || w.current === !0;
+    if (w.current = ee, R.current === null) {
+      if (typeof window > "u" || typeof window.requestAnimationFrame != "function") {
+        D();
+        return;
+      }
+      R.current = window.requestAnimationFrame(() => {
+        D();
+      });
+    }
+  }, [D]), Q = s.useMemo(() => {
+    const o = (l) => z(l);
+    return o.updateDrawer = L, o;
+  }, [z, L]), x = s.useCallback(
+    (o, l) => {
+      !l.open && P.current && y();
     },
-    [l]
-  ), I = n.useMemo(() => {
+    [y]
+  ), B = s.useMemo(() => {
     if (!e.isMounted || !e.content)
       return null;
     if (e.isClosing)
-      return e.wasContentShown ? typeof e.content == "function" ? e.content(l) : e.content : e.deferContentRendering && !e.wasContentShown ? /* @__PURE__ */ y(M, { delay: e.contentRenderDelay }) : null;
+      return e.wasContentShown ? typeof e.content == "function" ? e.content(y) : e.content : e.deferContentRendering && !e.wasContentShown ? /* @__PURE__ */ S(q, { loadingText: E.loadingContentText }) : null;
     if (e.isOpen) {
       if (e.deferContentRendering && !e.isContentReady)
-        return /* @__PURE__ */ y(M, { delay: e.contentRenderDelay });
+        return /* @__PURE__ */ S(q, { loadingText: E.loadingContentText });
       if (e.isContentReady)
-        return typeof e.content == "function" ? e.content(l) : e.content;
+        return typeof e.content == "function" ? e.content(y) : e.content;
     }
     return null;
   }, [
@@ -194,23 +296,25 @@ function $({
     e.wasContentShown,
     e.deferContentRendering,
     e.contentRenderDelay,
-    l
-  ]), G = n.useMemo(() => !e.isMounted || !T ? null : x(
-    /* @__PURE__ */ y(
-      U,
+    y,
+    E.loadingContentText
+  ]), $ = s.useMemo(() => !e.isMounted || !v ? null : re(
+    /* @__PURE__ */ S(
+      oe,
       {
         isOpen: e.isOpen,
-        onClose: l,
-        onOpenChange: L,
+        onClose: y,
+        onOpenChange: x,
         title: e.title,
-        content: I,
+        content: B,
         buttons: e.buttons,
         size: e.size,
         position: e.position,
-        modalType: e.modalType
+        modalType: e.modalType,
+        labels: E
       }
     ),
-    T
+    v
   ), [
     e.isMounted,
     e.isOpen,
@@ -219,20 +323,21 @@ function $({
     e.size,
     e.position,
     e.modalType,
-    I,
-    T,
-    l,
-    L
+    B,
+    v,
+    y,
+    x,
+    E
   ]);
   return {
-    openDrawer: W,
-    closeDrawer: l,
-    updateDrawer: F,
+    openDrawer: Q,
+    closeDrawer: y,
+    updateDrawer: L,
     isOpen: e.isOpen,
     isContentReady: e.isContentReady,
-    DrawerElement: G
+    DrawerElement: $
   };
 }
 export {
-  $ as useDrawer
+  Ce as useDrawer
 };

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

@@ -1,5 +1,9 @@
 import { EFWGroupButtonConfig } from '../../buttons/EFWGroupButton';
 import * as React from 'react';
+export interface UseDrawerLabels {
+    closeButtonAriaLabel?: string;
+    loadingContentText?: string;
+}
 /**
  * Interfaz que define las propiedades base para el componente Drawer.
  * @interface DrawerBase
@@ -10,7 +14,7 @@ import * as React from 'react';
  * @property {'start' | 'end' | 'bottom'} position - Posición del drawer en la pantalla.
  * @property {'small' | 'medium' | 'large' | 'full'} size - Tamaño del drawer.
  */
-export interface DrawerBase {
+interface DrawerBase {
     title?: React.ReactNode;
     content?: React.ReactNode | ((closeDrawer: DrawerCloseHandler) => React.ReactNode);
     buttons?: EFWGroupButtonConfig<DrawerCloseHandler>[];
@@ -19,6 +23,7 @@ export interface DrawerBase {
     size?: 'small' | 'medium' | 'large' | 'full';
     deferContentRendering?: boolean;
     contentRenderDelay?: number;
+    labels?: UseDrawerLabels;
 }
 /**
  * Interfaz para las opciones de apertura del drawer.
@@ -43,7 +48,13 @@ export interface UseDrawerProps extends DrawerBase {
  * @typedef {function} DrawerOpenHandler
  * @param {DrawerOpenOptions} [options] - Opciones para abrir el drawer.
  */
-export type DrawerOpenHandler = (options?: DrawerOpenOptions) => void;
+export type DrawerUpdateHandler = (updates: Partial<DrawerState>, options?: {
+    force?: boolean;
+}) => void;
+export interface DrawerOpenHandler {
+    (options?: DrawerOpenOptions): void;
+    updateDrawer?: DrawerUpdateHandler;
+}
 /**
  * Tipo para la función que cierra el drawer.
  * @typedef {function} DrawerCloseHandler
@@ -73,4 +84,6 @@ export interface DrawerState {
     isContentReady: boolean;
     deferContentRendering: boolean;
     contentRenderDelay: number;
+    labels: UseDrawerLabels;
 }
+export {};

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

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook que usa `useLayoutEffect` en el cliente y `useEffect` en el servidor (SSR).
+ *
+ * ## Por que existe
+ *
+ * `useLayoutEffect` ejecuta sincronicamente despues del render y **antes** del paint del
+ * navegador, lo cual es necesario cuando el efecto debe completarse antes de que el usuario
+ * vea la pantalla (ej. registrar callbacks, medir DOM, prevenir parpadeos visuales).
+ *
+ * Sin embargo, en SSR no existe DOM ni paint, asi que React emite un warning si detecta
+ * `useLayoutEffect` en el servidor. Este hook resuelve el problema eligiendo automaticamente
+ * el hook correcto segun el entorno.
+ *
+ * ## Cuando usarlo
+ *
+ * - Registrar funciones/refs que otros layout effects necesitan en el mismo ciclo de commit.
+ * - Leer o mutar el DOM antes del paint (medir dimensiones, scroll, focus).
+ * - Sincronizar estado que debe estar listo antes de que el usuario vea el frame.
+ *
+ * Para efectos que no requieren timing pre-paint (fetch, suscripciones, logging),
+ * usa `useEffect` directamente.
+ *
+ * ## Ejemplo
+ *
+ * ```tsx
+ * import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
+ *
+ * // Registrar un callback antes de que el padre lo use en su propio layout effect
+ * useIsomorphicLayoutEffect(() => {
+ *     registerUpdateProps(field.internalName, updateProps);
+ * }, [field.internalName, registerUpdateProps, updateProps]);
+ *
+ * // Medir un elemento del DOM sin parpadeo visual
+ * useIsomorphicLayoutEffect(() => {
+ *     const { height } = ref.current.getBoundingClientRect();
+ *     setHeight(height);
+ * }, [dependency]);
+ * ```
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/react-components/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect as e, useEffect as o } from "react";
+const t = typeof window < "u" ? e : o;
+export {
+  t as useIsomorphicLayoutEffect
+};

package/dist/react-components/i18n/PorygonI18nProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { EFWFormLocaleText, EFWFieldsLocaleText, EFWButtonsLocaleText, EFWTableLocaleText, PorygonLocaleText } from './porygonI18n.types';
+
+export interface PorygonI18nProviderProps {
+    children: ReactNode;
+    localeText?: PorygonLocaleText;
+}
+export declare const PorygonI18nProvider: ({ children, localeText }: PorygonI18nProviderProps) => React.ReactElement;
+export declare const usePorygonLocaleText: () => PorygonLocaleText;
+export declare const useFormLocaleText: (localeText?: Partial<EFWFormLocaleText>) => EFWFormLocaleText;
+export declare const useFieldsLocaleText: () => EFWFieldsLocaleText;
+export declare const useButtonsLocaleText: () => EFWButtonsLocaleText;
+export declare const useTableLocaleText: (localeText?: Partial<EFWTableLocaleText>) => EFWTableLocaleText;