@kakadu/components 3.2.2 → 3.2.3

package/build/components/modal.d.ts

@@ -3,6 +3,7 @@ import { type DecoratorType } from './decorators';
 type InitialFocusElement = HTMLElement | null;
 type ModalProviderProperties<Data = any> = {
     isVisible: boolean;
+    isInteractive: boolean;
     setInitialFocus?: (initialFocus?: InitialFocusElement) => void;
     close?: (data?: Data) => void;
 };

package/build/components/modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),v=require("@kuma-ui/core"),P=require("react-dom"),$=require("../focus-trap-react-CcpTuiJi.js"),B=require("../icons/icon.js"),A=require("./text-button.js"),C=require("./decorators.js"),I=e.createContext({isVisible:!1}),{Provider:D}=I;function y(){return e.useContext(I)}function z(){const{close:o}=y(),c=e.useCallback(()=>{o==null||o()},[o]);return n.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2566044647",children:n.jsxRuntimeExports.jsx(A.default,{iconLeft:B.IconType.times,label:"Close",onClick:c})})}function G({root:o,outerDecorators:c=[],innerDecorators:u=[],label:x,maxWidth:r,className:m,isVisible:s,isFullWidth:l=!1,shouldCloseOnOutsideClick:a=!0,shouldCloseOnEscapePress:d=!0,showCloseButton:L=!0,onClose:k,children:S}){const E=e.useRef(null),R=e.useRef(null),[M,g]=e.useState(!1),[i,f]=e.useState(!1),h=e.useCallback(t=>{E.current=t,f(!1)},[]),j=e.useRef(null),b=e.useCallback(t=>{t&&(j.current=t)},[]),[w,T]=e.useState(s??!1),N=e.useMemo(()=>({isVisible:w,setInitialFocus:b,close:h}),[w,b,h]);e.useEffect(()=>{s&&(g(!0),T(!0))},[s]),e.useEffect(()=>{if(s){const t=setTimeout(()=>{f(!0)},100);return()=>{clearTimeout(t)}}f(!1)},[s]),e.useEffect(()=>{if(M&&!i){const t=setTimeout(()=>{k==null||k(E.current??void 0),T(!1)},370);return()=>{clearTimeout(t)}}},[M,i,k]),e.useEffect(()=>{const t=R.current;if(s&&a&&t){const p=F=>{t===F.target&&f(!1)};return t.addEventListener("click",p),()=>{t.removeEventListener("click",p)}}},[s,a]),e.useEffect(()=>{if(!s||!d)return;const t=p=>{p.key==="Escape"&&f(!1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[s,d]);const _=e.useMemo(()=>({initialFocus:()=>j.current??void 0,onActivate:()=>{var t;return(t=j.current)==null?void 0:t.focus()}}),[]),q=n.jsxRuntimeExports.jsx(C.default,{decorators:c,children:n.jsxRuntimeExports.jsx("div",{"aria-hidden":!i,style:{"--max-width":r?`${r}px`:void 0},className:v.cx("kakadu-components-4119461136",i&&"kakadu-components-2522346797",m),children:n.jsxRuntimeExports.jsx(C.default,{decorators:u,children:n.jsxRuntimeExports.jsx($.focusTrapReactExports.FocusTrap,{active:i,focusTrapOptions:_,children:n.jsxRuntimeExports.jsx("div",{ref:R,className:"kakadu-components-4011815997",children:n.jsxRuntimeExports.jsx("div",{role:"dialog","aria-modal":"true","aria-label":x??"Modal",className:v.cx("kakadu-components-3324483532",l&&"kakadu-components-3799971070",i&&"kakadu-components-968755580"),children:n.jsxRuntimeExports.jsxs(D,{value:N,children:[L?n.jsxRuntimeExports.jsx(z,{}):null,n.jsxRuntimeExports.jsx("div",{className:v.cx("kakadu-components-633990035",l&&"kakadu-components-171969824"),children:S})]})})})})})})});return o?P.createPortal(q,o):q}function H(o,c){const[u,x]=e.useState(!1),r=e.useRef(void 0),m=e.useCallback(async()=>(x(!0),new Promise(a=>{r.current=a})),[]),s=e.useCallback(a=>{var d;x(!1),(d=r.current)==null||d.call(r,a),r.current=void 0},[]),l=e.useMemo(()=>n.jsxRuntimeExports.jsx(o,{...c,isVisible:u,onClose:s}),[o,c,u,s]);return e.useMemo(()=>({isVisible:u,show:m,modal:l}),[u,m,l])}exports.default=G;exports.useModal=H;exports.useModalContext=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),v=require("@kuma-ui/core"),P=require("react-dom"),$=require("../focus-trap-react-CcpTuiJi.js"),B=require("../icons/icon.js"),A=require("./text-button.js"),q=require("./decorators.js"),C=e.createContext({isVisible:!1,isInteractive:!1}),{Provider:D}=C;function y(){return e.useContext(C)}function z(){const{isInteractive:u,close:o}=y(),r=e.useCallback(()=>{o==null||o()},[o]);return n.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2566044647",children:n.jsxRuntimeExports.jsx(A.default,{iconLeft:B.IconType.times,label:"Close",disabled:!u,onClick:r})})}function G({root:u,outerDecorators:o=[],innerDecorators:r=[],label:x,maxWidth:c,className:m,isVisible:s,isFullWidth:l=!1,shouldCloseOnOutsideClick:i=!0,shouldCloseOnEscapePress:d=!0,showCloseButton:L=!0,onClose:k,children:S}){const E=e.useRef(null),R=e.useRef(null),[M,g]=e.useState(!1),[a,f]=e.useState(!1),b=e.useCallback(t=>{E.current=t,f(!1)},[]),j=e.useRef(null),h=e.useCallback(t=>{t&&(j.current=t)},[]),[I,w]=e.useState(s??!1),N=e.useMemo(()=>({isVisible:I,isInteractive:a,setInitialFocus:h,close:b}),[I,a,h,b]);e.useEffect(()=>{s&&(g(!0),w(!0))},[s]),e.useEffect(()=>{if(s){const t=setTimeout(()=>{f(!0)},100);return()=>{clearTimeout(t)}}f(!1)},[s]),e.useEffect(()=>{if(M&&!a){const t=setTimeout(()=>{k==null||k(E.current??void 0),w(!1)},370);return()=>{clearTimeout(t)}}},[M,a,k]),e.useEffect(()=>{const t=R.current;if(s&&i&&t){const p=F=>{t===F.target&&f(!1)};return t.addEventListener("click",p),()=>{t.removeEventListener("click",p)}}},[s,i]),e.useEffect(()=>{if(!s||!d)return;const t=p=>{p.key==="Escape"&&f(!1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[s,d]);const _=e.useMemo(()=>({initialFocus:()=>j.current??void 0,onActivate:()=>{var t;return(t=j.current)==null?void 0:t.focus()}}),[]),T=n.jsxRuntimeExports.jsx(q.default,{decorators:o,children:n.jsxRuntimeExports.jsx("div",{"aria-hidden":!a,style:{"--max-width":c?`${c}px`:void 0},className:v.cx("kakadu-components-4119461136",a&&"kakadu-components-2522346797",m),children:n.jsxRuntimeExports.jsx(q.default,{decorators:r,children:n.jsxRuntimeExports.jsx($.focusTrapReactExports.FocusTrap,{active:a,focusTrapOptions:_,children:n.jsxRuntimeExports.jsx("div",{ref:R,className:"kakadu-components-4011815997",children:n.jsxRuntimeExports.jsx("div",{role:"dialog","aria-modal":"true","aria-label":x??"Modal",className:v.cx("kakadu-components-3324483532",l&&"kakadu-components-3799971070",a&&"kakadu-components-968755580"),children:n.jsxRuntimeExports.jsxs(D,{value:N,children:[L?n.jsxRuntimeExports.jsx(z,{}):null,n.jsxRuntimeExports.jsx("div",{className:v.cx("kakadu-components-633990035",l&&"kakadu-components-171969824"),children:S})]})})})})})})});return u?P.createPortal(T,u):T}function H(u,o){const[r,x]=e.useState(!1),c=e.useRef(void 0),m=e.useCallback(async()=>(x(!0),new Promise(i=>{c.current=i})),[]),s=e.useCallback(i=>{var d;x(!1),(d=c.current)==null||d.call(c,i),c.current=void 0},[]),l=e.useMemo(()=>n.jsxRuntimeExports.jsx(u,{...o,isVisible:r,onClose:s}),[u,o,r,s]);return e.useMemo(()=>({isVisible:r,show:m,modal:l}),[r,m,l])}exports.default=G;exports.useModal=H;exports.useModalContext=y;

package/build/components/modal.mjs

@@ -1,13 +1,14 @@
 import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
-import { createContext as q, useRef as j, useState as h, useCallback as m, useMemo as w, useEffect as f, useContext as z } from "react";
-import { cx as I } from "@kuma-ui/core";
+import { createContext as q, useRef as j, useState as h, useCallback as m, useMemo as I, useEffect as f, useContext as z } from "react";
+import { cx as T } from "@kuma-ui/core";
 import { createPortal as G } from "react-dom";
 import { f as H } from "../focus-trap-react-DYXrtbDH.mjs";
 import { IconType as J } from "../icons/icon.mjs";
 import K from "./text-button.mjs";
 import g from "./decorators.mjs";
 const C = q({
-  isVisible: !1
+  isVisible: !1,
+  isInteractive: !1
 }), {
   Provider: Q
 } = C;
@@ -16,38 +17,40 @@ function U() {
 }
 function V() {
   const {
-    close: o
-  } = U(), r = m(() => {
-    o == null || o();
-  }, [o]);
-  return /* @__PURE__ */ n.jsx("div", { className: "kakadu-components-2566044647", children: /* @__PURE__ */ n.jsx(K, { iconLeft: J.times, label: "Close", onClick: r }) });
+    isInteractive: c,
+    close: s
+  } = U(), o = m(() => {
+    s == null || s();
+  }, [s]);
+  return /* @__PURE__ */ n.jsx("div", { className: "kakadu-components-2566044647", children: /* @__PURE__ */ n.jsx(K, { iconLeft: J.times, label: "Close", disabled: !c, onClick: o }) });
 }
 function ne({
-  root: o,
-  outerDecorators: r = [],
-  innerDecorators: a = [],
+  root: c,
+  outerDecorators: s = [],
+  innerDecorators: o = [],
   label: k,
-  maxWidth: s,
+  maxWidth: r,
   className: x,
   isVisible: t,
   isFullWidth: u = !1,
-  shouldCloseOnOutsideClick: c = !0,
+  shouldCloseOnOutsideClick: i = !0,
   shouldCloseOnEscapePress: l = !0,
   showCloseButton: B = !0,
   onClose: p,
   children: P
 }) {
-  const E = j(null), y = j(null), [L, A] = h(!1), [i, d] = h(!1), M = m((e) => {
+  const E = j(null), y = j(null), [L, A] = h(!1), [a, d] = h(!1), M = m((e) => {
     E.current = e, d(!1);
-  }, []), T = j(null), R = m((e) => {
-    e && (T.current = e);
-  }, []), [N, b] = h(t ?? !1), D = w(() => ({
-    isVisible: N,
+  }, []), w = j(null), R = m((e) => {
+    e && (w.current = e);
+  }, []), [b, N] = h(t ?? !1), D = I(() => ({
+    isVisible: b,
+    isInteractive: a,
     setInitialFocus: R,
     close: M
-  }), [N, R, M]);
+  }), [b, a, R, M]);
   f(() => {
-    t && (A(!0), b(!0));
+    t && (A(!0), N(!0));
   }, [t]), f(() => {
     if (t) {
       const e = setTimeout(() => {
@@ -59,17 +62,17 @@ function ne({
     }
     d(!1);
   }, [t]), f(() => {
-    if (L && !i) {
+    if (L && !a) {
       const e = setTimeout(() => {
-        p == null || p(E.current ?? void 0), b(!1);
+        p == null || p(E.current ?? void 0), N(!1);
       }, 370);
       return () => {
         clearTimeout(e);
       };
     }
-  }, [L, i, p]), f(() => {
+  }, [L, a, p]), f(() => {
     const e = y.current;
-    if (t && c && e) {
+    if (t && i && e) {
       const v = ($) => {
         e === $.target && d(!1);
       };
@@ -77,7 +80,7 @@ function ne({
         e.removeEventListener("click", v);
       };
     }
-  }, [t, c]), f(() => {
+  }, [t, i]), f(() => {
     if (!t || !l)
       return;
     const e = (v) => {
@@ -87,35 +90,35 @@ function ne({
       window.removeEventListener("keydown", e);
     };
   }, [t, l]);
-  const S = w(() => ({
-    initialFocus: () => T.current ?? void 0,
+  const S = I(() => ({
+    initialFocus: () => w.current ?? void 0,
     onActivate: () => {
       var e;
-      return (e = T.current) == null ? void 0 : e.focus();
+      return (e = w.current) == null ? void 0 : e.focus();
     }
-  }), []), F = /* @__PURE__ */ n.jsx(g, { decorators: r, children: /* @__PURE__ */ n.jsx("div", { "aria-hidden": !i, style: {
-    "--max-width": s ? `${s}px` : void 0
-  }, className: I("kakadu-components-4119461136", i && "kakadu-components-2522346797", x), children: /* @__PURE__ */ n.jsx(g, { decorators: a, children: /* @__PURE__ */ n.jsx(H.FocusTrap, { active: i, focusTrapOptions: S, children: /* @__PURE__ */ n.jsx("div", { ref: y, className: "kakadu-components-4011815997", children: /* @__PURE__ */ n.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": k ?? "Modal", className: I("kakadu-components-3324483532", u && "kakadu-components-3799971070", i && "kakadu-components-968755580"), children: /* @__PURE__ */ n.jsxs(Q, { value: D, children: [
+  }), []), F = /* @__PURE__ */ n.jsx(g, { decorators: s, children: /* @__PURE__ */ n.jsx("div", { "aria-hidden": !a, style: {
+    "--max-width": r ? `${r}px` : void 0
+  }, className: T("kakadu-components-4119461136", a && "kakadu-components-2522346797", x), children: /* @__PURE__ */ n.jsx(g, { decorators: o, children: /* @__PURE__ */ n.jsx(H.FocusTrap, { active: a, focusTrapOptions: S, children: /* @__PURE__ */ n.jsx("div", { ref: y, className: "kakadu-components-4011815997", children: /* @__PURE__ */ n.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": k ?? "Modal", className: T("kakadu-components-3324483532", u && "kakadu-components-3799971070", a && "kakadu-components-968755580"), children: /* @__PURE__ */ n.jsxs(Q, { value: D, children: [
     B ? /* @__PURE__ */ n.jsx(V, {}) : null,
-    /* @__PURE__ */ n.jsx("div", { className: I("kakadu-components-633990035", u && "kakadu-components-171969824"), children: P })
+    /* @__PURE__ */ n.jsx("div", { className: T("kakadu-components-633990035", u && "kakadu-components-171969824"), children: P })
   ] }) }) }) }) }) }) });
-  return o ? G(F, o) : F;
+  return c ? G(F, c) : F;
 }
-function oe(o, r) {
-  const [a, k] = h(!1), s = j(void 0), x = m(async () => (k(!0), new Promise((c) => {
-    s.current = c;
-  })), []), t = m((c) => {
+function se(c, s) {
+  const [o, k] = h(!1), r = j(void 0), x = m(async () => (k(!0), new Promise((i) => {
+    r.current = i;
+  })), []), t = m((i) => {
     var l;
-    k(!1), (l = s.current) == null || l.call(s, c), s.current = void 0;
-  }, []), u = w(() => /* @__PURE__ */ n.jsx(o, { ...r, isVisible: a, onClose: t }), [o, r, a, t]);
-  return w(() => ({
-    isVisible: a,
+    k(!1), (l = r.current) == null || l.call(r, i), r.current = void 0;
+  }, []), u = I(() => /* @__PURE__ */ n.jsx(c, { ...s, isVisible: o, onClose: t }), [c, s, o, t]);
+  return I(() => ({
+    isVisible: o,
     show: x,
     modal: u
-  }), [a, x, u]);
+  }), [o, x, u]);
 }
 export {
   ne as default,
-  oe as useModal,
+  se as useModal,
   U as useModalContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kakadu/components",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Kakadu components library",
   "license": "MIT",
   "main": "./build/index.js",