@plurix/ecom-components 1.19.5 → 1.20.0

package/dist/packages/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, Dispatch, SetStateAction } from 'react';
 
-interface ModalProps {
+export interface ModalProps {
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     children: ReactNode;
@@ -11,6 +11,11 @@ interface ModalProps {
     Footer?: ReactNode;
     hideHeader?: boolean;
     PreContent?: ReactNode;
+    /** Fecha o modal com a tecla Esc. Default: true. */
+    closeOnEsc?: boolean;
+    /** Mantém o foco do teclado dentro do modal enquanto aberto. Default: true. */
+    trapFocus?: boolean;
+    /** Texto acessível do botão de fechar. Default: 'Fechar'. */
+    closeButtonLabel?: string;
 }
 export declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/packages/Modal/Modal.js

@@ -1,62 +1,151 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { useRef as s, useEffect as p } from "react";
-import { ArrowIcon as g } from "../../assets/svgs/ArrowIcon.js";
-import { CloseIcon as k } from "../../assets/svgs/CloseIcon.js";
-import { HAS_WINDOW as v } from "../../constants/index.js";
-/* empty css                  */const R = (w) => {
+var j = Object.defineProperty, B = Object.defineProperties;
+var K = Object.getOwnPropertyDescriptors;
+var v = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
+var N = (r, t, o) => t in r ? j(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o, R = (r, t) => {
+  for (var o in t || (t = {}))
+    T.call(t, o) && N(r, o, t[o]);
+  if (v)
+    for (var o of v(t))
+      $.call(t, o) && N(r, o, t[o]);
+  return r;
+}, F = (r, t) => B(r, K(t));
+import { jsx as i, jsxs as E } from "react/jsx-runtime";
+import { useRef as m, useId as M, useEffect as w } from "react";
+import { ArrowIcon as W } from "../../assets/svgs/ArrowIcon.js";
+import { CloseIcon as _ } from "../../assets/svgs/CloseIcon.js";
+import { HAS_WINDOW as H } from "../../constants/index.js";
+/* empty css                  */const q = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(","), X = (r) => {
   const {
-    isOpen: r,
-    setIsOpen: C,
-    children: L,
-    className: N,
-    title: d,
-    titleAction: a,
-    hasTitleArrow: x,
-    Footer: m,
-    hideHeader: b,
-    PreContent: u
-  } = w, t = s(null), n = s(null), l = s(null), f = () => C(!1);
-  return p(() => {
-    if (v)
-      return r ? window.document.body.classList.add("no-scroll") : window.document.body.classList.remove("no-scroll"), () => {
+    isOpen: t,
+    setIsOpen: o,
+    children: O,
+    className: S,
+    title: f,
+    titleAction: L,
+    hasTitleArrow: D,
+    Footer: g,
+    hideHeader: d,
+    PreContent: x,
+    closeOnEsc: A = !0,
+    trapFocus: s = !0,
+    closeButtonLabel: I = "Fechar"
+  } = r, h = m(null), b = m(null), u = m(null), C = m(null), p = `modal-title-${M()}`, y = () => o == null ? void 0 : o(!1);
+  return w(() => {
+    if (H)
+      return t ? window.document.body.classList.add("no-scroll") : window.document.body.classList.remove("no-scroll"), () => {
         window.document.body.classList.remove("no-scroll");
       };
-  }, [r]), p(() => {
-    n.current && t.current && (t.current.style.maxHeight = `calc(100% - 56px - ${n.current.offsetHeight}px)`);
-    const c = (e) => {
-      var h;
-      l.current && (e == null ? void 0 : e.target) instanceof Node && !((h = l.current) != null && h.contains(e == null ? void 0 : e.target)) && f();
+  }, [t]), w(() => {
+    if (b.current && h.current) {
+      const n = d ? 0 : 56;
+      h.current.style.maxHeight = `calc(100% - ${n}px - ${b.current.offsetHeight}px)`;
+    }
+    const c = (n) => {
+      var e;
+      u.current && (n == null ? void 0 : n.target) instanceof Node && !((e = u.current) != null && e.contains(n == null ? void 0 : n.target)) && y();
     };
-    return r ? document.addEventListener("mousedown", c) : document.removeEventListener("mousedown", c), () => {
+    return t ? document.addEventListener("mousedown", c) : document.removeEventListener("mousedown", c), () => {
       document.removeEventListener("mousedown", c);
     };
-  }, [r]), r ? /* @__PURE__ */ o(
+  }, [t, d]), w(() => {
+    if (!t || !H)
+      return;
+    C.current = document.activeElement;
+    const c = () => {
+      var e, l;
+      return Array.from(
+        (l = (e = u.current) == null ? void 0 : e.querySelectorAll(q)) != null ? l : []
+      ).filter(
+        (a) => !a.hasAttribute("hidden") && a.getAttribute("aria-hidden") !== "true"
+      );
+    };
+    if (s) {
+      const [e] = c();
+      e == null || e.focus();
+    }
+    const n = (e) => {
+      if (A && e.key === "Escape") {
+        y();
+        return;
+      }
+      if (!s || e.key !== "Tab")
+        return;
+      const l = c();
+      if (l.length === 0)
+        return;
+      const a = l[0], k = l[l.length - 1];
+      if (e.shiftKey && document.activeElement === a) {
+        e.preventDefault(), k.focus();
+        return;
+      }
+      !e.shiftKey && document.activeElement === k && (e.preventDefault(), a.focus());
+    };
+    return document.addEventListener("keydown", n), () => {
+      var e, l;
+      document.removeEventListener("keydown", n), s && ((l = (e = C.current) == null ? void 0 : e.focus) == null || l.call(e));
+    };
+  }, [t, A, s]), t ? /* @__PURE__ */ i(
     "div",
     {
       id: "modal-container",
       "data-testid": "modal-container",
-      className: N,
-      children: /* @__PURE__ */ o("div", { id: "modal-content-container", children: /* @__PURE__ */ i("div", { id: "modal-content", ref: l, children: [
-        !b && /* @__PURE__ */ i("header", { children: [
-          a ? /* @__PURE__ */ i("button", { onClick: a, className: "modal-title", children: [
-            x && /* @__PURE__ */ o(
-              g,
-              {
-                rotate: "Left",
-                color: "var(--color-support-links)"
-              }
-            ),
-            d
-          ] }) : /* @__PURE__ */ o("h2", { className: "modal-title", children: d }),
-          /* @__PURE__ */ o("button", { onClick: f, className: "modal-close", children: /* @__PURE__ */ o(k, { color: "var(--color-main)" }) })
-        ] }),
-        !!u && u,
-        /* @__PURE__ */ o("div", { ref: t, children: L }),
-        m && /* @__PURE__ */ o("footer", { className: "modal-footer", ref: n, children: m })
-      ] }) })
+      className: S,
+      children: /* @__PURE__ */ i("div", { id: "modal-content-container", children: /* @__PURE__ */ E(
+        "div",
+        F(R({
+          id: "modal-content",
+          ref: u,
+          role: "dialog",
+          "aria-modal": "true"
+        }, d ? { "aria-label": f } : { "aria-labelledby": p }), {
+          children: [
+            !d && /* @__PURE__ */ E("header", { children: [
+              L ? /* @__PURE__ */ E(
+                "button",
+                {
+                  id: p,
+                  onClick: L,
+                  className: "modal-title",
+                  children: [
+                    D && /* @__PURE__ */ i(
+                      W,
+                      {
+                        rotate: "Left",
+                        color: "var(--color-support-links)"
+                      }
+                    ),
+                    f
+                  ]
+                }
+              ) : /* @__PURE__ */ i("h2", { id: p, className: "modal-title", children: f }),
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  onClick: y,
+                  className: "modal-close",
+                  type: "button",
+                  "aria-label": I,
+                  children: /* @__PURE__ */ i(_, { color: "var(--color-main)" })
+                }
+              )
+            ] }),
+            !!x && x,
+            /* @__PURE__ */ i("div", { ref: h, children: O }),
+            g && /* @__PURE__ */ i("footer", { className: "modal-footer", ref: b, children: g })
+          ]
+        })
+      ) })
     }
   ) : null;
 };
 export {
-  R as Modal
+  X as Modal
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@plurix/ecom-components",
   "author": "Plurix",
   "private": false,
-  "version": "1.19.5",
+  "version": "1.20.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",