npm - @stenajs-webui/modal - Versions diffs - 19.0.0-next.11 → 19.0.0-next.13 - Mend

@stenajs-webui/modal 19.0.0-next.11 → 19.0.0-next.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/components/drawer/Drawer.d.ts +4 -0
package/dist/index.es.js +185 -187
package/dist/index.es.js.map +1 -1
package/dist/index.js +2 -2
package/dist/index.js.map +1 -1
package/package.json +5 -5

package/dist/components/drawer/Drawer.d.ts CHANGED Viewed

@@ -24,6 +24,10 @@ interface DrawerBaseTopBottom extends DrawerBaseProps {
 }
 interface DrawerBaseProps extends Omit<ReactModal.Props, "closeTimeoutMS" | "portalClassName" | "overlayClassName" | "className" | "style" | "parentSelector"> {
     background?: string;
+    /**
+     * When true, there will be a gap between the drawer and the viewport.
+     */
+    floating?: boolean;
     zIndex?: number;
     onRequestClose?: () => void;
     /**

package/dist/index.es.js CHANGED Viewed

@@ -1,9 +1,9 @@
-(function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._overlay_5x3op_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-max-width: 100%;--swui-modal-header-border-color: var(--lhds-color-ui-300);--swui-modal-shadow: var(--swui-shadow-modal);--swui-modal-footer-shadow: var(--swui-shadow-modal);position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;background-color:var(--swui-modal-overlay-bg-color);overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;-webkit-animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1{background-color:#fff}}._overlay_5x3op_1 ._modal_5x3op_31{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_5x3op_1 ._modal_5x3op_31{width:100%}}._overlay_5x3op_1 ._content_5x3op_41{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;top:calc(var(--swui-metrics-space) * 2);width:var(--swui-modal-width);max-width:var(--swui-modal-max-width)}@media (max-width: 768px){._overlay_5x3op_1 ._content_5x3op_41{top:0;width:100%;max-width:100%}}._overlay_5x3op_1 ._content_5x3op_41{-webkit-animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1 ._content_5x3op_41{box-shadow:none;top:0}}._overlay_5x3op_1 ._content_5x3op_41 :focus{outline:0}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle{cursor:move}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle .draggable-modal-cancel,._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}._footer_5x3op_101{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_5x3op_105{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_5x3op_105{position:static;box-shadow:none}}._portal_8w3m4_1{--drawer-width: 370px}._portal_8w3m4_1 ._overlay_8w3m4_4{position:fixed;inset:0}._portal_8w3m4_1 ._content_8w3m4_9{box-shadow:var(--swui-shadow-modal);background:white;position:absolute;transition:-webkit-transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out,-webkit-transform var(--swui-animation-time-medium) ease-in-out}._portal_8w3m4_1 ._content_8w3m4_9:focus-visible{outline:unset}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19,._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20{-webkit-transform:translateX(var(--translate-x-outside-screen, 0));transform:translate(var(--translate-x-outside-screen, 0));overflow-y:auto;top:0;bottom:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19._afterOpen_8w3m4_26,._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20._afterOpen_8w3m4_26{-webkit-transform:translateX(0);transform:translate(0)}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19._beforeClose_8w3m4_30,._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20._beforeClose_8w3m4_30{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35,._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36{-webkit-transform:translateY(var(--translate-y-outside-screen, 0));transform:translateY(var(--translate-y-outside-screen, 0));overflow-x:auto;left:0;right:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35._afterOpen_8w3m4_26,._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36._afterOpen_8w3m4_26{-webkit-transform:translateY(0);transform:translateY(0)}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35._beforeClose_8w3m4_30,._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36._beforeClose_8w3m4_30{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19{--translate-x-outside-screen: -100%;width:var(--drawer-width);left:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20{--translate-x-outside-screen: 100%;width:var(--drawer-width);right:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35{--translate-y-outside-screen: -100%;height:var(--drawer-width);top:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36{--translate-y-outside-screen: 100%;height:var(--drawer-width);bottom:0}._modal_4fwgb_1{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:transparent}._overlay_4fwgb_13{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--swui-overlay-bg-color)}")),document.head.appendChild(o)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(){"use strict";try{var t=document.createElement("style");t.appendChild(document.createTextNode("._overlay_5x3op_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-max-width: 100%;--swui-modal-header-border-color: var(--lhds-color-ui-300);--swui-modal-shadow: var(--swui-shadow-modal);--swui-modal-footer-shadow: var(--swui-shadow-modal);position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;background-color:var(--swui-modal-overlay-bg-color);overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;-webkit-animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1{background-color:#fff}}._overlay_5x3op_1 ._modal_5x3op_31{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_5x3op_1 ._modal_5x3op_31{width:100%}}._overlay_5x3op_1 ._content_5x3op_41{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;top:calc(var(--swui-metrics-space) * 2);width:var(--swui-modal-width);max-width:var(--swui-modal-max-width)}@media (max-width: 768px){._overlay_5x3op_1 ._content_5x3op_41{top:0;width:100%;max-width:100%}}._overlay_5x3op_1 ._content_5x3op_41{-webkit-animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1 ._content_5x3op_41{box-shadow:none;top:0}}._overlay_5x3op_1 ._content_5x3op_41 :focus{outline:0}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle{cursor:move}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle .draggable-modal-cancel,._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}._footer_5x3op_101{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_5x3op_105{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_5x3op_105{position:static;box-shadow:none}}._portal_9t5bd_1{--drawer-width: 370px}._portal_9t5bd_1 ._overlay_9t5bd_4{position:fixed;inset:0}._portal_9t5bd_1 ._content_9t5bd_9{box-shadow:var(--swui-shadow-modal);background:white;position:absolute;transition:-webkit-transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out,-webkit-transform var(--swui-animation-time-medium) ease-in-out}._portal_9t5bd_1 ._content_9t5bd_9._floating_9t5bd_15{margin:var(--swui-metrics-space);border-radius:var(--swui-border-radius)}._portal_9t5bd_1 ._content_9t5bd_9:focus-visible{outline:unset}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24,._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25{-webkit-transform:translateX(var(--translate-x-outside-screen, 0));transform:translate(var(--translate-x-outside-screen, 0));overflow-y:auto;top:0;bottom:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24._afterOpen_9t5bd_31,._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25._afterOpen_9t5bd_31{-webkit-transform:translateX(0);transform:translate(0)}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24._beforeClose_9t5bd_35,._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25._beforeClose_9t5bd_35{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40,._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41{-webkit-transform:translateY(var(--translate-y-outside-screen, 0));transform:translateY(var(--translate-y-outside-screen, 0));overflow-x:auto;left:0;right:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40._afterOpen_9t5bd_31,._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41._afterOpen_9t5bd_31{-webkit-transform:translateY(0);transform:translateY(0)}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40._beforeClose_9t5bd_35,._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41._beforeClose_9t5bd_35{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24{--translate-x-outside-screen: -100%;width:var(--drawer-width);left:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25{--translate-x-outside-screen: 100%;width:var(--drawer-width);right:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40{--translate-y-outside-screen: -100%;height:var(--drawer-width);top:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41{--translate-y-outside-screen: 100%;height:var(--drawer-width);bottom:0}._modal_4fwgb_1{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:transparent}._overlay_4fwgb_13{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--swui-overlay-bg-color)}")),document.head.appendChild(t)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { jsx as e, jsxs as c, Fragment as h } from "react/jsx-runtime";
 import _ from "react-modal";
-import N from "react-draggable";
-import g from "classnames";
-import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
-import { exhaustSwitchCase as x, Column as v, Box as m, Spacing as S, Row as f, Indent as A, Heading as B, Txt as L } from "@stenajs-webui/core";
+import w from "react-draggable";
+import b from "classnames";
+import { exhaustSwitchCase as x, Column as u, Box as m, Spacing as S, Row as g, Indent as A, Heading as B, Txt as L } from "@stenajs-webui/core";
 import { Spinner as M, Icon as D, FlatButton as I, stenaTimes as O } from "@stenajs-webui/elements";
 const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", k = "_modal_5x3op_31", E = "_content_5x3op_41", j = "_appear_5x3op_1", G = "_isDraggable_5x3op_70", z = "_footer_5x3op_101", H = "_stickyFooter_5x3op_105", n = {
   overlay: R,
@@ -14,82 +14,88 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", k = "_modal_5x3op_31", E =
   isDraggable: G,
   footer: z,
   stickyFooter: H
-}, b = "draggable-modal-handle", w = "draggable-modal-cancel", T = ({
+}, v = "draggable-modal-handle", F = "draggable-modal-cancel", T = ({
   width: o,
   maxWidth: t,
   draggable: l = !1,
   children: r,
   ...s
-}) => /* @__PURE__ */ e(_, {
-  overlayClassName: n.overlay,
-  className: n.modal,
-  ...s,
-  children: /* @__PURE__ */ e(N, {
-    handle: `.${b}`,
-    cancel: `.${w}, button, [role="tooltip"]`,
-    bounds: ".ReactModal__Overlay",
-    disabled: !l,
-    children: /* @__PURE__ */ e("div", {
-      style: {
-        ["--swui-modal-width"]: o,
-        ["--swui-modal-max-width"]: t
-      },
-      className: g(n.content, {
-        [n.isDraggable]: l
-      }),
-      children: r
-    })
-  })
-}), J = "_portal_8w3m4_1", K = "_overlay_8w3m4_4", Q = "_content_8w3m4_9", U = "_slideFromLeft_8w3m4_19", V = "_slideFromRight_8w3m4_20", W = "_afterOpen_8w3m4_26", X = "_beforeClose_8w3m4_30", Y = "_slideFromTop_8w3m4_35", Z = "_slideFromBottom_8w3m4_36", a = {
+}) => /* @__PURE__ */ e(
+  _,
+  {
+    overlayClassName: n.overlay,
+    className: n.modal,
+    ...s,
+    children: /* @__PURE__ */ e(
+      w,
+      {
+        handle: `.${v}`,
+        cancel: `.${F}, button, [role="tooltip"]`,
+        bounds: ".ReactModal__Overlay",
+        disabled: !l,
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              ["--swui-modal-width"]: o,
+              ["--swui-modal-max-width"]: t
+            },
+            className: b(n.content, {
+              [n.isDraggable]: l
+            }),
+            children: r
+          }
+        )
+      }
+    )
+  }
+), J = "_portal_9t5bd_1", K = "_overlay_9t5bd_4", Q = "_content_9t5bd_9", U = "_floating_9t5bd_15", V = "_slideFromLeft_9t5bd_24", W = "_slideFromRight_9t5bd_25", X = "_afterOpen_9t5bd_31", Y = "_beforeClose_9t5bd_35", Z = "_slideFromTop_9t5bd_40", q = "_slideFromBottom_9t5bd_41", a = {
   portal: J,
   overlay: K,
   content: Q,
-  slideFromLeft: U,
-  slideFromRight: V,
-  afterOpen: W,
-  beforeClose: X,
-  slideFromTop: Y,
-  slideFromBottom: Z
-}, me = ({
+  floating: U,
+  slideFromLeft: V,
+  slideFromRight: W,
+  afterOpen: X,
+  beforeClose: Y,
+  slideFromTop: Z,
+  slideFromBottom: q
+}, _e = ({
   background: o,
   zIndex: t,
   children: l,
   slideFrom: r = "left",
   portalTarget: s,
+  floating: p,
   ...i
 }) => {
-  const {
-    height: d,
-    width: p
-  } = i;
-  return /* @__PURE__ */ e(_, {
-    closeTimeoutMS: 250,
-    portalClassName: a.portal,
-    overlayClassName: {
-      base: a.overlay,
-      afterOpen: a.afterOpen,
-      beforeClose: a.beforeClose
-    },
-    className: {
-      base: g(a.content, q(r)),
-      afterOpen: a.afterOpen,
-      beforeClose: a.beforeClose
-    },
-    style: {
-      content: {
-        width: p,
-        height: d,
-        background: o
+  const { height: f, width: d } = i;
+  return /* @__PURE__ */ e(
+    _,
+    {
+      closeTimeoutMS: 250,
+      portalClassName: a.portal,
+      overlayClassName: {
+        base: a.overlay,
+        afterOpen: a.afterOpen,
+        beforeClose: a.beforeClose
       },
-      overlay: {
-        zIndex: t
-      }
-    },
-    parentSelector: s ? () => s : void 0,
-    ...i,
-    children: l
-  });
-}, q = (o) => {
+      className: {
+        base: b(
+          a.content,
+          P(r),
+          p && a.floating
+        ),
+        afterOpen: a.afterOpen,
+        beforeClose: a.beforeClose
+      },
+      style: { content: { width: d, height: f, background: o }, overlay: { zIndex: t } },
+      parentSelector: s ? () => s : void 0,
+      ...i,
+      children: l
+    }
+  );
+}, P = (o) => {
   switch (o) {
     case "left":
       return a.slideFromLeft;
@@ -102,143 +108,135 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", k = "_modal_5x3op_31", E =
     default:
       return x(o, a.slideFromLeft);
   }
-}, P = {
-  overlay: {
-    justifyContent: "center"
-  }
-}, _e = ({
+}, ee = { overlay: { justifyContent: "center" } }, pe = ({
   children: o,
   ...t
-}) => /* @__PURE__ */ e(_, {
-  overlayClassName: n.overlay,
-  className: n.modal,
-  style: P,
-  ...t,
-  children: /* @__PURE__ */ e("div", {
-    className: n.content,
-    style: {
-      ["--swui-modal-width"]: "fit-content"
-    },
-    children: o
-  })
-}), ee = "_modal_4fwgb_1", oe = "_overlay_4fwgb_13", u = {
-  modal: ee,
-  overlay: oe
-}, pe = ({
+}) => /* @__PURE__ */ e(
+  _,
+  {
+    overlayClassName: n.overlay,
+    className: n.modal,
+    style: ee,
+    ...t,
+    children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: n.content,
+        style: { ["--swui-modal-width"]: "fit-content" },
+        children: o
+      }
+    )
+  }
+), oe = "_modal_4fwgb_1", te = "_overlay_4fwgb_13", y = {
+  modal: oe,
+  overlay: te
+}, fe = ({
   headerIconLeft: o,
   headerText: t,
   ...l
-}) => /* @__PURE__ */ e(_, {
-  ...l,
-  isOpen: !0,
-  className: u.modal,
-  overlayClassName: u.overlay,
-  children: /* @__PURE__ */ c(v, {
-    spacing: 2,
-    alignItems: "center",
-    children: [/* @__PURE__ */ e(m, {
-      alignItems: "center",
-      justifyContent: "center",
-      width: "64px",
-      height: "64px",
-      borderRadius: "50%",
-      background: "white",
-      shadow: "modal",
-      children: /* @__PURE__ */ e(M, {
-        size: "small"
-      })
-    }), (o || t) && /* @__PURE__ */ c(y, {
-      children: [/* @__PURE__ */ e(S, {}), /* @__PURE__ */ c(f, {
-        indent: 2,
-        children: [o && /* @__PURE__ */ c(y, {
-          children: [/* @__PURE__ */ e(D, {
-            size: 14,
-            icon: o,
-            color: "white"
-          }), /* @__PURE__ */ e(A, {})]
-        }), t && /* @__PURE__ */ e(B, {
-          variant: "h4",
-          color: "white",
-          children: t
-        })]
-      })]
-    })]
-  })
-}), te = ({
+}) => /* @__PURE__ */ e(
+  _,
+  {
+    ...l,
+    isOpen: !0,
+    className: y.modal,
+    overlayClassName: y.overlay,
+    children: /* @__PURE__ */ c(u, { spacing: 2, alignItems: "center", children: [
+      /* @__PURE__ */ e(
+        m,
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          width: "64px",
+          height: "64px",
+          borderRadius: "50%",
+          background: "white",
+          shadow: "modal",
+          children: /* @__PURE__ */ e(M, { size: "small" })
+        }
+      ),
+      (o || t) && /* @__PURE__ */ c(h, { children: [
+        /* @__PURE__ */ e(S, {}),
+        /* @__PURE__ */ c(g, { indent: 2, children: [
+          o && /* @__PURE__ */ c(h, { children: [
+            /* @__PURE__ */ e(D, { size: 14, icon: o, color: "white" }),
+            /* @__PURE__ */ e(A, {})
+          ] }),
+          t && /* @__PURE__ */ e(B, { variant: "h4", color: "white", children: t })
+        ] })
+      ] })
+    ] })
+  }
+), ae = ({
   onRequestClose: o,
   header: t,
   headerText: l,
   closeButtonClassName: r
-}) => /* @__PURE__ */ c(f, {
-  spacing: 2,
-  indent: 2,
-  borderBottom: "1px solid var(--swui-modal-header-border-color)",
-  className: b,
-  children: [/* @__PURE__ */ c(f, {
-    flex: 1,
-    indent: !0,
-    alignItems: "center",
-    children: [l && /* @__PURE__ */ e(L, {
-      className: w,
-      size: "large",
-      children: l
-    }), t]
-  }), /* @__PURE__ */ e(m, {
-    alignSelf: "flex-start",
-    children: /* @__PURE__ */ e(I, {
-      className: r,
-      onClick: o,
-      "aria-label": "Close",
-      leftIcon: O
-    })
-  })]
-}), fe = ({
+}) => /* @__PURE__ */ c(
+  g,
+  {
+    spacing: 2,
+    indent: 2,
+    borderBottom: "1px solid var(--swui-modal-header-border-color)",
+    className: v,
+    children: [
+      /* @__PURE__ */ c(g, { flex: 1, indent: !0, alignItems: "center", children: [
+        l && /* @__PURE__ */ e(L, { className: F, size: "large", children: l }),
+        t
+      ] }),
+      /* @__PURE__ */ e(m, { alignSelf: "flex-start", children: /* @__PURE__ */ e(
+        I,
+        {
+          className: r,
+          onClick: o,
+          "aria-label": "Close",
+          leftIcon: O
+        }
+      ) })
+    ]
+  }
+), ge = ({
   header: o,
   headerText: t,
   children: l,
   spacing: r,
   indent: s,
-  draggable: i = !1,
-  onRequestClose: d,
-  closeButtonClassName: p,
-  footer: h,
-  disableStickyFooter: F = !1,
-  ...C
-}) => /* @__PURE__ */ c(T, {
-  ...C,
-  onRequestClose: d,
-  draggable: i,
-  children: [/* @__PURE__ */ e(te, {
-    onRequestClose: d,
-    header: o,
-    headerText: t,
-    closeButtonClassName: p
-  }), /* @__PURE__ */ e(m, {
-    spacing: typeof r == "number" ? r : 1,
-    indent: typeof s == "number" ? s : 1,
-    children: l
-  }), h && /* @__PURE__ */ e(m, {
-    className: g(n.footer, {
-      [n.stickyFooter]: !F
-    }),
-    children: h
-  })]
-}), ge = ({
-  children: o
-}) => /* @__PURE__ */ e(v, {
-  indent: 2,
-  spacing: 2,
-  children: o
-});
+  draggable: p = !1,
+  onRequestClose: i,
+  closeButtonClassName: f,
+  footer: d,
+  disableStickyFooter: C = !1,
+  ...N
+}) => /* @__PURE__ */ c(T, { ...N, onRequestClose: i, draggable: p, children: [
+  /* @__PURE__ */ e(
+    ae,
+    {
+      onRequestClose: i,
+      header: o,
+      headerText: t,
+      closeButtonClassName: f
+    }
+  ),
+  /* @__PURE__ */ e(m, { spacing: typeof r == "number" ? r : 1, indent: typeof s == "number" ? s : 1, children: l }),
+  d && /* @__PURE__ */ e(
+    m,
+    {
+      className: b(n.footer, {
+        [n.stickyFooter]: !C
+      }),
+      children: d
+    }
+  )
+] }), be = ({ children: o }) => /* @__PURE__ */ e(u, { indent: 2, spacing: 2, children: o });
 export {
   T as BaseModal,
-  _e as CenterModal,
-  w as DRAGGABLE_CANCEL_CLASSNAME,
-  b as DRAGGABLE_HANDLE_CLASSNAME,
-  me as Drawer,
-  pe as LoadingModal,
-  fe as Modal,
-  ge as ModalFooter,
-  te as ModalHeader
+  pe as CenterModal,
+  F as DRAGGABLE_CANCEL_CLASSNAME,
+  v as DRAGGABLE_HANDLE_CLASSNAME,
+  _e as Drawer,
+  fe as LoadingModal,
+  ge as Modal,
+  be as ModalFooter,
+  ae as ModalHeader
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n maxWidth?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n maxWidth,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{\n [\"--swui-modal-width\" as string]: width,\n [\"--swui-modal-max-width\" as string]: maxWidth,\n }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight \| SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" \| \"right\";\nexport type SlideFromTopBottom = \"top\" \| \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight \| DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n width?: string;\n /*\n Which direction the drawer will appear from.\n * @default left\n * @param {String('left'\|'right')}\n /\n slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n height?: string;\n /\n Which direction the drawer will appear from.\n * @default left\n * @param {String('top'\|'bottom')}\n /\n slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n extends Omit<\n ReactModal.Props,\n \| \"closeTimeoutMS\"\n \| \"portalClassName\"\n \| \"overlayClassName\"\n \| \"className\"\n \| \"style\"\n \| \"parentSelector\"\n > {\n background?: string;\n zIndex?: number;\n onRequestClose?: () => void;\n /\n Portal target, HTML element. If not set, portal is not used.\n /\n portalTarget?: HTMLElement \| null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n ...reactModalProps\n}) => {\n const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(styles.content, getClassNameForSlide(slideFrom)),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, height, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n switch (slideFrom) {\n case \"left\":\n return styles.slideFromLeft;\n case \"right\":\n return styles.slideFromRight;\n case \"top\":\n return styles.slideFromTop;\n case \"bottom\":\n return styles.slideFromBottom;\n default:\n return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n }\n};\n","import as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft \|\| headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={stenaTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <Box\n className={cx(styles.footer, {\n [styles.stickyFooter]: !disableStickyFooter,\n })}\n >\n {footer}\n </Box>\n )}\n </BaseModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n <Column indent={2} spacing={2}>\n {children}\n </Column>\n);\n"],"names":["DRAGGABLE_HANDLE_CLASSNAME","DRAGGABLE_CANCEL_CLASSNAME","BaseModal","width","maxWidth","draggable","children","reactModalProps","ReactModal","styles","overlay","modal","Draggable","cx","content","isDraggable","Drawer","background","zIndex","slideFrom","portalTarget","height","portal","base","afterOpen","beforeClose","getClassNameForSlide","undefined","slideFromLeft","slideFromRight","slideFromTop","slideFromBottom","exhaustSwitchCase","style","justifyContent","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","_jsx","Box","Spinner","_Fragment","Spacing","Row","_jsxs","Icon","Indent","Heading","ModalHeader","onRequestClose","header","closeButtonClassName","Txt","FlatButton","stenaTimes","Modal","spacing","indent","footer","disableStickyFooter","props","stickyFooter","ModalFooter"],"mappings":"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"}
1	+ {"version":3,"file":"index.es.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n maxWidth?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n maxWidth,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{\n [\"--swui-modal-width\" as string]: width,\n [\"--swui-modal-max-width\" as string]: maxWidth,\n }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight \| SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" \| \"right\";\nexport type SlideFromTopBottom = \"top\" \| \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight \| DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n width?: string;\n /*\n Which direction the drawer will appear from.\n * @default left\n * @param {String('left'\|'right')}\n /\n slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n height?: string;\n /\n Which direction the drawer will appear from.\n * @default left\n * @param {String('top'\|'bottom')}\n /\n slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n extends Omit<\n ReactModal.Props,\n \| \"closeTimeoutMS\"\n \| \"portalClassName\"\n \| \"overlayClassName\"\n \| \"className\"\n \| \"style\"\n \| \"parentSelector\"\n > {\n background?: string;\n\n /\n When true, there will be a gap between the drawer and the viewport.\n /\n floating?: boolean;\n\n zIndex?: number;\n onRequestClose?: () => void;\n /\n Portal target, HTML element. If not set, portal is not used.\n /\n portalTarget?: HTMLElement \| null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n floating,\n ...reactModalProps\n}) => {\n const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(\n styles.content,\n getClassNameForSlide(slideFrom),\n floating && styles.floating\n ),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, height, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n switch (slideFrom) {\n case \"left\":\n return styles.slideFromLeft;\n case \"right\":\n return styles.slideFromRight;\n case \"top\":\n return styles.slideFromTop;\n case \"bottom\":\n return styles.slideFromBottom;\n default:\n return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n }\n};\n","import as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft \|\| headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={stenaTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <Box\n className={cx(styles.footer, {\n [styles.stickyFooter]: !disableStickyFooter,\n })}\n >\n {footer}\n </Box>\n )}\n </BaseModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n <Column indent={2} spacing={2}>\n {children}\n </Column>\n);\n"],"names":["DRAGGABLE_HANDLE_CLASSNAME","DRAGGABLE_CANCEL_CLASSNAME","BaseModal","width","maxWidth","draggable","children","reactModalProps","jsx","ReactModal","styles","Draggable","cx","Drawer","background","zIndex","slideFrom","portalTarget","floating","height","getClassNameForSlide","exhaustSwitchCase","style","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","jsxs","Column","Box","Spinner","Fragment","Spacing","Row","Icon","Indent","Heading","ModalHeader","onRequestClose","header","closeButtonClassName","Txt","FlatButton","stenaTimes","Modal","spacing","indent","footer","disableStickyFooter","props","ModalFooter"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-(function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._overlay_5x3op_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-max-width: 100%;--swui-modal-header-border-color: var(--lhds-color-ui-300);--swui-modal-shadow: var(--swui-shadow-modal);--swui-modal-footer-shadow: var(--swui-shadow-modal);position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;background-color:var(--swui-modal-overlay-bg-color);overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;-webkit-animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1{background-color:#fff}}._overlay_5x3op_1 ._modal_5x3op_31{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_5x3op_1 ._modal_5x3op_31{width:100%}}._overlay_5x3op_1 ._content_5x3op_41{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;top:calc(var(--swui-metrics-space) * 2);width:var(--swui-modal-width);max-width:var(--swui-modal-max-width)}@media (max-width: 768px){._overlay_5x3op_1 ._content_5x3op_41{top:0;width:100%;max-width:100%}}._overlay_5x3op_1 ._content_5x3op_41{-webkit-animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1 ._content_5x3op_41{box-shadow:none;top:0}}._overlay_5x3op_1 ._content_5x3op_41 :focus{outline:0}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle{cursor:move}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle .draggable-modal-cancel,._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}._footer_5x3op_101{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_5x3op_105{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_5x3op_105{position:static;box-shadow:none}}._portal_8w3m4_1{--drawer-width: 370px}._portal_8w3m4_1 ._overlay_8w3m4_4{position:fixed;inset:0}._portal_8w3m4_1 ._content_8w3m4_9{box-shadow:var(--swui-shadow-modal);background:white;position:absolute;transition:-webkit-transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out,-webkit-transform var(--swui-animation-time-medium) ease-in-out}._portal_8w3m4_1 ._content_8w3m4_9:focus-visible{outline:unset}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19,._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20{-webkit-transform:translateX(var(--translate-x-outside-screen, 0));transform:translate(var(--translate-x-outside-screen, 0));overflow-y:auto;top:0;bottom:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19._afterOpen_8w3m4_26,._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20._afterOpen_8w3m4_26{-webkit-transform:translateX(0);transform:translate(0)}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19._beforeClose_8w3m4_30,._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20._beforeClose_8w3m4_30{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35,._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36{-webkit-transform:translateY(var(--translate-y-outside-screen, 0));transform:translateY(var(--translate-y-outside-screen, 0));overflow-x:auto;left:0;right:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35._afterOpen_8w3m4_26,._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36._afterOpen_8w3m4_26{-webkit-transform:translateY(0);transform:translateY(0)}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35._beforeClose_8w3m4_30,._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36._beforeClose_8w3m4_30{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_8w3m4_1 ._content_8w3m4_9._slideFromLeft_8w3m4_19{--translate-x-outside-screen: -100%;width:var(--drawer-width);left:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromRight_8w3m4_20{--translate-x-outside-screen: 100%;width:var(--drawer-width);right:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromTop_8w3m4_35{--translate-y-outside-screen: -100%;height:var(--drawer-width);top:0}._portal_8w3m4_1 ._content_8w3m4_9._slideFromBottom_8w3m4_36{--translate-y-outside-screen: 100%;height:var(--drawer-width);bottom:0}._modal_4fwgb_1{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:transparent}._overlay_4fwgb_13{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--swui-overlay-bg-color)}")),document.head.appendChild(o)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react-modal"),M=require("react-draggable"),A=require("classnames"),e=require("react/jsx-runtime"),t=require("@stenajs-webui/core"),m=require("@stenajs-webui/elements"),f=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},_=f(N),L=f(M),x=f(A),S="_overlay_5x3op_1",B="_fadeIn_5x3op_1",D="_modal_5x3op_31",R="_content_5x3op_41",E="_appear_5x3op_1",O="_isDraggable_5x3op_70",G="_footer_5x3op_101",I="_stickyFooter_5x3op_105",n={overlay:S,fadeIn:B,modal:D,content:R,appear:E,isDraggable:O,footer:G,stickyFooter:I},p="draggable-modal-handle",g="draggable-modal-cancel",b=({width:o,maxWidth:s,draggable:l=!1,children:r,...c})=>e.jsx(_.default,{overlayClassName:n.overlay,className:n.modal,...c,children:e.jsx(L.default,{handle:`.${p}`,cancel:`.${g}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!l,children:e.jsx("div",{style:{["--swui-modal-width"]:o,["--swui-modal-max-width"]:s},className:x.default(n.content,{[n.isDraggable]:l}),children:r})})}),$="_portal_8w3m4_1",k="_overlay_8w3m4_4",q="_content_8w3m4_9",H="_slideFromLeft_8w3m4_19",T="_slideFromRight_8w3m4_20",z="_afterOpen_8w3m4_26",J="_beforeClose_8w3m4_30",K="_slideFromTop_8w3m4_35",P="_slideFromBottom_8w3m4_36",a={portal:$,overlay:k,content:q,slideFromLeft:H,slideFromRight:T,afterOpen:z,beforeClose:J,slideFromTop:K,slideFromBottom:P},Q=({background:o,zIndex:s,children:l,slideFrom:r="left",portalTarget:c,...i})=>{const{height:d,width:u}=i;return e.jsx(_.default,{closeTimeoutMS:250,portalClassName:a.portal,overlayClassName:{base:a.overlay,afterOpen:a.afterOpen,beforeClose:a.beforeClose},className:{base:x.default(a.content,U(r)),afterOpen:a.afterOpen,beforeClose:a.beforeClose},style:{content:{width:u,height:d,background:o},overlay:{zIndex:s}},parentSelector:c?()=>c:void 0,...i,children:l})},U=o=>{switch(o){case"left":return a.slideFromLeft;case"right":return a.slideFromRight;case"top":return a.slideFromTop;case"bottom":return a.slideFromBottom;default:return t.exhaustSwitchCase(o,a.slideFromLeft)}},V={overlay:{justifyContent:"center"}},W=({children:o,...s})=>e.jsx(_.default,{overlayClassName:n.overlay,className:n.modal,style:V,...s,children:e.jsx("div",{className:n.content,style:{["--swui-modal-width"]:"fit-content"},children:o})}),X="_modal_4fwgb_1",Y="_overlay_4fwgb_13",h={modal:X,overlay:Y},Z=({headerIconLeft:o,headerText:s,...l})=>e.jsx(_.default,{...l,isOpen:!0,className:h.modal,overlayClassName:h.overlay,children:e.jsxs(t.Column,{spacing:2,alignItems:"center",children:[e.jsx(t.Box,{alignItems:"center",justifyContent:"center",width:"64px",height:"64px",borderRadius:"50%",background:"white",shadow:"modal",children:e.jsx(m.Spinner,{size:"small"})}),(o||s)&&e.jsxs(e.Fragment,{children:[e.jsx(t.Spacing,{}),e.jsxs(t.Row,{indent:2,children:[o&&e.jsxs(e.Fragment,{children:[e.jsx(m.Icon,{size:14,icon:o,color:"white"}),e.jsx(t.Indent,{})]}),s&&e.jsx(t.Heading,{variant:"h4",color:"white",children:s})]})]})]})}),j=({onRequestClose:o,header:s,headerText:l,closeButtonClassName:r})=>e.jsxs(t.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:p,children:[e.jsxs(t.Row,{flex:1,indent:!0,alignItems:"center",children:[l&&e.jsx(t.Txt,{className:g,size:"large",children:l}),s]}),e.jsx(t.Box,{alignSelf:"flex-start",children:e.jsx(m.FlatButton,{className:r,onClick:o,"aria-label":"Close",leftIcon:m.stenaTimes})})]}),ee=({header:o,headerText:s,children:l,spacing:r,indent:c,draggable:i=!1,onRequestClose:d,closeButtonClassName:u,footer:y,disableStickyFooter:w=!1,...v})=>{const C=typeof r=="number"?r:1,F=typeof c=="number"?c:1;return e.jsxs(b,{...v,onRequestClose:d,draggable:i,children:[e.jsx(j,{onRequestClose:d,header:o,headerText:s,closeButtonClassName:u}),e.jsx(t.Box,{spacing:C,indent:F,children:l}),y&&e.jsx(t.Box,{className:x.default(n.footer,{[n.stickyFooter]:!w}),children:y})]})},oe=({children:o})=>e.jsx(t.Column,{indent:2,spacing:2,children:o});exports.BaseModal=b;exports.CenterModal=W;exports.DRAGGABLE_CANCEL_CLASSNAME=g;exports.DRAGGABLE_HANDLE_CLASSNAME=p;exports.Drawer=Q;exports.LoadingModal=Z;exports.Modal=ee;exports.ModalFooter=oe;exports.ModalHeader=j;
+(function(){"use strict";try{var t=document.createElement("style");t.appendChild(document.createTextNode("._overlay_5x3op_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-max-width: 100%;--swui-modal-header-border-color: var(--lhds-color-ui-300);--swui-modal-shadow: var(--swui-shadow-modal);--swui-modal-footer-shadow: var(--swui-shadow-modal);position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;background-color:var(--swui-modal-overlay-bg-color);overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;-webkit-animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1{background-color:#fff}}._overlay_5x3op_1 ._modal_5x3op_31{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_5x3op_1 ._modal_5x3op_31{width:100%}}._overlay_5x3op_1 ._content_5x3op_41{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;top:calc(var(--swui-metrics-space) * 2);width:var(--swui-modal-width);max-width:var(--swui-modal-max-width)}@media (max-width: 768px){._overlay_5x3op_1 ._content_5x3op_41{top:0;width:100%;max-width:100%}}._overlay_5x3op_1 ._content_5x3op_41{-webkit-animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1 ._content_5x3op_41{box-shadow:none;top:0}}._overlay_5x3op_1 ._content_5x3op_41 :focus{outline:0}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle{cursor:move}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle .draggable-modal-cancel,._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}._footer_5x3op_101{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_5x3op_105{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_5x3op_105{position:static;box-shadow:none}}._portal_9t5bd_1{--drawer-width: 370px}._portal_9t5bd_1 ._overlay_9t5bd_4{position:fixed;inset:0}._portal_9t5bd_1 ._content_9t5bd_9{box-shadow:var(--swui-shadow-modal);background:white;position:absolute;transition:-webkit-transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out,-webkit-transform var(--swui-animation-time-medium) ease-in-out}._portal_9t5bd_1 ._content_9t5bd_9._floating_9t5bd_15{margin:var(--swui-metrics-space);border-radius:var(--swui-border-radius)}._portal_9t5bd_1 ._content_9t5bd_9:focus-visible{outline:unset}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24,._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25{-webkit-transform:translateX(var(--translate-x-outside-screen, 0));transform:translate(var(--translate-x-outside-screen, 0));overflow-y:auto;top:0;bottom:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24._afterOpen_9t5bd_31,._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25._afterOpen_9t5bd_31{-webkit-transform:translateX(0);transform:translate(0)}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24._beforeClose_9t5bd_35,._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25._beforeClose_9t5bd_35{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40,._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41{-webkit-transform:translateY(var(--translate-y-outside-screen, 0));transform:translateY(var(--translate-y-outside-screen, 0));overflow-x:auto;left:0;right:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40._afterOpen_9t5bd_31,._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41._afterOpen_9t5bd_31{-webkit-transform:translateY(0);transform:translateY(0)}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40._beforeClose_9t5bd_35,._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41._beforeClose_9t5bd_35{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_9t5bd_1 ._content_9t5bd_9._slideFromLeft_9t5bd_24{--translate-x-outside-screen: -100%;width:var(--drawer-width);left:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromRight_9t5bd_25{--translate-x-outside-screen: 100%;width:var(--drawer-width);right:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromTop_9t5bd_40{--translate-y-outside-screen: -100%;height:var(--drawer-width);top:0}._portal_9t5bd_1 ._content_9t5bd_9._slideFromBottom_9t5bd_41{--translate-y-outside-screen: 100%;height:var(--drawer-width);bottom:0}._modal_4fwgb_1{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:transparent}._overlay_4fwgb_13{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--swui-overlay-bg-color)}")),document.head.appendChild(t)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("react-modal"),M=require("react-draggable"),A=require("classnames"),o=require("@stenajs-webui/core"),_=require("@stenajs-webui/elements"),g=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=g(N),L=g(M),x=g(A),S="_overlay_5x3op_1",B="_fadeIn_5x3op_1",D="_modal_5x3op_31",R="_content_5x3op_41",E="_appear_5x3op_1",O="_isDraggable_5x3op_70",G="_footer_5x3op_101",I="_stickyFooter_5x3op_105",n={overlay:S,fadeIn:B,modal:D,content:R,appear:E,isDraggable:O,footer:G,stickyFooter:I},p="draggable-modal-handle",b="draggable-modal-cancel",h=({width:t,maxWidth:s,draggable:l=!1,children:r,...c})=>e.jsx(m.default,{overlayClassName:n.overlay,className:n.modal,...c,children:e.jsx(L.default,{handle:`.${p}`,cancel:`.${b}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!l,children:e.jsx("div",{style:{["--swui-modal-width"]:t,["--swui-modal-max-width"]:s},className:x.default(n.content,{[n.isDraggable]:l}),children:r})})}),$="_portal_9t5bd_1",k="_overlay_9t5bd_4",q="_content_9t5bd_9",H="_floating_9t5bd_15",T="_slideFromLeft_9t5bd_24",z="_slideFromRight_9t5bd_25",J="_afterOpen_9t5bd_31",K="_beforeClose_9t5bd_35",P="_slideFromTop_9t5bd_40",Q="_slideFromBottom_9t5bd_41",a={portal:$,overlay:k,content:q,floating:H,slideFromLeft:T,slideFromRight:z,afterOpen:J,beforeClose:K,slideFromTop:P,slideFromBottom:Q},U=({background:t,zIndex:s,children:l,slideFrom:r="left",portalTarget:c,floating:f,...d})=>{const{height:u,width:i}=d;return e.jsx(m.default,{closeTimeoutMS:250,portalClassName:a.portal,overlayClassName:{base:a.overlay,afterOpen:a.afterOpen,beforeClose:a.beforeClose},className:{base:x.default(a.content,V(r),f&&a.floating),afterOpen:a.afterOpen,beforeClose:a.beforeClose},style:{content:{width:i,height:u,background:t},overlay:{zIndex:s}},parentSelector:c?()=>c:void 0,...d,children:l})},V=t=>{switch(t){case"left":return a.slideFromLeft;case"right":return a.slideFromRight;case"top":return a.slideFromTop;case"bottom":return a.slideFromBottom;default:return o.exhaustSwitchCase(t,a.slideFromLeft)}},W={overlay:{justifyContent:"center"}},X=({children:t,...s})=>e.jsx(m.default,{overlayClassName:n.overlay,className:n.modal,style:W,...s,children:e.jsx("div",{className:n.content,style:{["--swui-modal-width"]:"fit-content"},children:t})}),Y="_modal_4fwgb_1",Z="_overlay_4fwgb_13",y={modal:Y,overlay:Z},ee=({headerIconLeft:t,headerText:s,...l})=>e.jsx(m.default,{...l,isOpen:!0,className:y.modal,overlayClassName:y.overlay,children:e.jsxs(o.Column,{spacing:2,alignItems:"center",children:[e.jsx(o.Box,{alignItems:"center",justifyContent:"center",width:"64px",height:"64px",borderRadius:"50%",background:"white",shadow:"modal",children:e.jsx(_.Spinner,{size:"small"})}),(t||s)&&e.jsxs(e.Fragment,{children:[e.jsx(o.Spacing,{}),e.jsxs(o.Row,{indent:2,children:[t&&e.jsxs(e.Fragment,{children:[e.jsx(_.Icon,{size:14,icon:t,color:"white"}),e.jsx(o.Indent,{})]}),s&&e.jsx(o.Heading,{variant:"h4",color:"white",children:s})]})]})]})}),j=({onRequestClose:t,header:s,headerText:l,closeButtonClassName:r})=>e.jsxs(o.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:p,children:[e.jsxs(o.Row,{flex:1,indent:!0,alignItems:"center",children:[l&&e.jsx(o.Txt,{className:b,size:"large",children:l}),s]}),e.jsx(o.Box,{alignSelf:"flex-start",children:e.jsx(_.FlatButton,{className:r,onClick:t,"aria-label":"Close",leftIcon:_.stenaTimes})})]}),te=({header:t,headerText:s,children:l,spacing:r,indent:c,draggable:f=!1,onRequestClose:d,closeButtonClassName:u,footer:i,disableStickyFooter:v=!1,...C})=>{const F=typeof r=="number"?r:1,w=typeof c=="number"?c:1;return e.jsxs(h,{...C,onRequestClose:d,draggable:f,children:[e.jsx(j,{onRequestClose:d,header:t,headerText:s,closeButtonClassName:u}),e.jsx(o.Box,{spacing:F,indent:w,children:l}),i&&e.jsx(o.Box,{className:x.default(n.footer,{[n.stickyFooter]:!v}),children:i})]})},oe=({children:t})=>e.jsx(o.Column,{indent:2,spacing:2,children:t});exports.BaseModal=h;exports.CenterModal=X;exports.DRAGGABLE_CANCEL_CLASSNAME=b;exports.DRAGGABLE_HANDLE_CLASSNAME=p;exports.Drawer=U;exports.LoadingModal=ee;exports.Modal=te;exports.ModalFooter=oe;exports.ModalHeader=j;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n maxWidth?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n maxWidth,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{\n [\"--swui-modal-width\" as string]: width,\n [\"--swui-modal-max-width\" as string]: maxWidth,\n }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight \| SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" \| \"right\";\nexport type SlideFromTopBottom = \"top\" \| \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight \| DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n width?: string;\n /*\n Which direction the drawer will appear from.\n * @default left\n * @param {String('left'\|'right')}\n /\n slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n height?: string;\n /\n Which direction the drawer will appear from.\n * @default left\n * @param {String('top'\|'bottom')}\n /\n slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n extends Omit<\n ReactModal.Props,\n \| \"closeTimeoutMS\"\n \| \"portalClassName\"\n \| \"overlayClassName\"\n \| \"className\"\n \| \"style\"\n \| \"parentSelector\"\n > {\n background?: string;\n zIndex?: number;\n onRequestClose?: () => void;\n /\n Portal target, HTML element. If not set, portal is not used.\n /\n portalTarget?: HTMLElement \| null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n ...reactModalProps\n}) => {\n const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(styles.content, getClassNameForSlide(slideFrom)),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, height, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n switch (slideFrom) {\n case \"left\":\n return styles.slideFromLeft;\n case \"right\":\n return styles.slideFromRight;\n case \"top\":\n return styles.slideFromTop;\n case \"bottom\":\n return styles.slideFromBottom;\n default:\n return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n }\n};\n","import as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft \|\| headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={stenaTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <Box\n className={cx(styles.footer, {\n [styles.stickyFooter]: !disableStickyFooter,\n })}\n >\n {footer}\n </Box>\n )}\n </BaseModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n <Column indent={2} spacing={2}>\n {children}\n </Column>\n);\n"],"names":["DRAGGABLE_HANDLE_CLASSNAME","DRAGGABLE_CANCEL_CLASSNAME","BaseModal","width","maxWidth","draggable","children","reactModalProps","ReactModal","styles","overlay","modal","Draggable","cx","content","isDraggable","Drawer","background","zIndex","slideFrom","portalTarget","height","portal","base","afterOpen","beforeClose","getClassNameForSlide","undefined","slideFromLeft","slideFromRight","slideFromTop","slideFromBottom","exhaustSwitchCase","style","justifyContent","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","_jsx","Box","Spinner","_Fragment","Spacing","Row","_jsxs","Icon","Indent","Heading","ModalHeader","onRequestClose","header","closeButtonClassName","Txt","FlatButton","stenaTimes","Modal","spacing","indent","footer","disableStickyFooter","props","activeSpacing","activeIndent","stickyFooter","ModalFooter"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n maxWidth?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n maxWidth,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{\n [\"--swui-modal-width\" as string]: width,\n [\"--swui-modal-max-width\" as string]: maxWidth,\n }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight \| SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" \| \"right\";\nexport type SlideFromTopBottom = \"top\" \| \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight \| DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n width?: string;\n /*\n Which direction the drawer will appear from.\n * @default left\n * @param {String('left'\|'right')}\n /\n slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n height?: string;\n /\n Which direction the drawer will appear from.\n * @default left\n * @param {String('top'\|'bottom')}\n /\n slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n extends Omit<\n ReactModal.Props,\n \| \"closeTimeoutMS\"\n \| \"portalClassName\"\n \| \"overlayClassName\"\n \| \"className\"\n \| \"style\"\n \| \"parentSelector\"\n > {\n background?: string;\n\n /\n When true, there will be a gap between the drawer and the viewport.\n /\n floating?: boolean;\n\n zIndex?: number;\n onRequestClose?: () => void;\n /\n Portal target, HTML element. If not set, portal is not used.\n /\n portalTarget?: HTMLElement \| null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n floating,\n ...reactModalProps\n}) => {\n const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(\n styles.content,\n getClassNameForSlide(slideFrom),\n floating && styles.floating\n ),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, height, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n switch (slideFrom) {\n case \"left\":\n return styles.slideFromLeft;\n case \"right\":\n return styles.slideFromRight;\n case \"top\":\n return styles.slideFromTop;\n case \"bottom\":\n return styles.slideFromBottom;\n default:\n return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n }\n};\n","import as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft \|\| headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={stenaTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <Box\n className={cx(styles.footer, {\n [styles.stickyFooter]: !disableStickyFooter,\n })}\n >\n {footer}\n </Box>\n )}\n </BaseModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n <Column indent={2} spacing={2}>\n {children}\n </Column>\n);\n"],"names":["DRAGGABLE_HANDLE_CLASSNAME","DRAGGABLE_CANCEL_CLASSNAME","BaseModal","width","maxWidth","draggable","children","reactModalProps","jsx","ReactModal","styles","Draggable","cx","Drawer","background","zIndex","slideFrom","portalTarget","floating","height","getClassNameForSlide","exhaustSwitchCase","style","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","jsxs","Column","Box","Spinner","Fragment","Spacing","Row","Icon","Indent","Heading","ModalHeader","onRequestClose","header","closeButtonClassName","Txt","FlatButton","stenaTimes","Modal","spacing","indent","footer","disableStickyFooter","props","activeSpacing","activeIndent","ModalFooter"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/modal",
-  "version": "19.0.0-next.11",
+  "version": "19.0.0-next.13",
   "description": "",
   "author": "mattias800",
   "license": "MIT",
@@ -26,9 +26,9 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "19.0.0-next.11",
-    "@stenajs-webui/elements": "19.0.0-next.11",
-    "@stenajs-webui/theme": "19.0.0-next.11",
+    "@stenajs-webui/core": "19.0.0-next.13",
+    "@stenajs-webui/elements": "19.0.0-next.13",
+    "@stenajs-webui/theme": "19.0.0-next.13",
     "@types/react-modal": "^3.13.1",
     "classnames": "^2.3.1",
     "react-draggable": "^4.4.5",
@@ -58,5 +58,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "6ae8f099492aed7fad3120099a43c6cdbb3f2de1"
+  "gitHead": "55e05b5f7db76c2114582b386d1dd807c20ff7de"
 }