@stenajs-webui/modal 17.26.0 → 17.27.1
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.
- package/CHANGELOG.md +12 -0
- package/dist/index.es.js +31 -31
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v17.27.0 (Wed Nov 09 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Modal is fullscreen on mobile [#527](https://github.com/StenaIT/stenajs-webui/pull/527) ([@mattias800](https://github.com/mattias800))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Mattias Andersson ([@mattias800](https://github.com/mattias800))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v17.7.0 (Fri Jul 01 2022)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
package/dist/index.es.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
(function(){"use strict";try{var
|
|
1
|
+
(function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._overlay_1c4b8_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-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_1c4b8_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_1c4b8_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_1c4b8_1{background-color:#fff}}._overlay_1c4b8_1 ._modal_1c4b8_30{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_1c4b8_1 ._modal_1c4b8_30{width:100%}}._overlay_1c4b8_1 ._content_1c4b8_40{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:100%;-webkit-animation:_appear_1c4b8_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_1c4b8_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media (max-width: 768px){._overlay_1c4b8_1 ._content_1c4b8_40{top:0}}@media print{._overlay_1c4b8_1 ._content_1c4b8_40{box-shadow:none;top:0}}._overlay_1c4b8_1 ._content_1c4b8_40 :focus{outline:0}._overlay_1c4b8_1 ._content_1c4b8_40._isDraggable_1c4b8_67 .draggable-modal-handle{cursor:move}._overlay_1c4b8_1 ._content_1c4b8_40._isDraggable_1c4b8_67 .draggable-modal-handle .draggable-modal-cancel,._overlay_1c4b8_1 ._content_1c4b8_40._isDraggable_1c4b8_67 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_1c4b8_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_1c4b8_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_1c4b8_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_1c4b8_1{0%{opacity:0}to{opacity:1}}._footer_1c4b8_98{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_1c4b8_102{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_1c4b8_102{position:static;box-shadow:none}}._portal_17quq_1 ._overlay_17quq_2{position:fixed;inset:0}._portal_17quq_1 ._content_17quq_7{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_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{-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_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._afterOpen_17quq_20{-webkit-transform:translateX(0);transform:translate(0)}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._beforeClose_17quq_24{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{-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_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._afterOpen_17quq_20{-webkit-transform:translateY(0);transform:translateY(0)}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._beforeClose_17quq_24{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13{--translate-x-outside-screen: -100%;width:370px;left:0}._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{--translate-x-outside-screen: 100%;width:370px;right:0}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29{--translate-y-outside-screen: -100%;height:370px;top:0}._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{--translate-y-outside-screen: 100%;height:370px;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)}})();
|
|
2
2
|
import _ from "react-modal";
|
|
3
3
|
import q from "react-draggable";
|
|
4
4
|
import u from "classnames";
|
|
5
|
-
import { jsx as e, jsxs as s, Fragment as
|
|
6
|
-
import { exhaustSwitchCase as w, Column as
|
|
7
|
-
import { Spinner as
|
|
8
|
-
const
|
|
9
|
-
overlay:
|
|
10
|
-
fadeIn:
|
|
11
|
-
modal:
|
|
12
|
-
content:
|
|
5
|
+
import { jsx as e, jsxs as s, Fragment as g } from "react/jsx-runtime";
|
|
6
|
+
import { exhaustSwitchCase as w, Column as y, Box as m, Spacing as S, Row as p, Indent as A, Heading as B, Txt as L } from "@stenajs-webui/core";
|
|
7
|
+
import { Spinner as M, Icon as x, FlatButton as D, stenaTimes as I } from "@stenajs-webui/elements";
|
|
8
|
+
const O = "_overlay_1c4b8_1", R = "_fadeIn_1c4b8_1", $ = "_modal_1c4b8_30", k = "_content_1c4b8_40", E = "_appear_1c4b8_1", j = "_isDraggable_1c4b8_67", G = "_footer_1c4b8_98", z = "_stickyFooter_1c4b8_102", n = {
|
|
9
|
+
overlay: O,
|
|
10
|
+
fadeIn: R,
|
|
11
|
+
modal: $,
|
|
12
|
+
content: k,
|
|
13
13
|
appear: E,
|
|
14
14
|
isDraggable: j,
|
|
15
15
|
footer: G,
|
|
16
16
|
stickyFooter: z
|
|
17
|
-
},
|
|
17
|
+
}, v = "draggable-modal-handle", F = "draggable-modal-cancel", H = ({
|
|
18
18
|
width: o,
|
|
19
19
|
draggable: t = !1,
|
|
20
20
|
children: l,
|
|
@@ -24,7 +24,7 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
24
24
|
className: n.modal,
|
|
25
25
|
...r,
|
|
26
26
|
children: /* @__PURE__ */ e(q, {
|
|
27
|
-
handle: `.${
|
|
27
|
+
handle: `.${v}`,
|
|
28
28
|
cancel: `.${F}, button, [role="tooltip"]`,
|
|
29
29
|
bounds: ".ReactModal__Overlay",
|
|
30
30
|
disabled: !t,
|
|
@@ -119,7 +119,7 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
119
119
|
},
|
|
120
120
|
children: o
|
|
121
121
|
})
|
|
122
|
-
}), ee = "_modal_4fwgb_1", oe = "_overlay_4fwgb_13",
|
|
122
|
+
}), ee = "_modal_4fwgb_1", oe = "_overlay_4fwgb_13", h = {
|
|
123
123
|
modal: ee,
|
|
124
124
|
overlay: oe
|
|
125
125
|
}, fe = ({
|
|
@@ -129,9 +129,9 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
129
129
|
}) => /* @__PURE__ */ e(_, {
|
|
130
130
|
...l,
|
|
131
131
|
isOpen: !0,
|
|
132
|
-
className:
|
|
133
|
-
overlayClassName:
|
|
134
|
-
children: /* @__PURE__ */ s(
|
|
132
|
+
className: h.modal,
|
|
133
|
+
overlayClassName: h.overlay,
|
|
134
|
+
children: /* @__PURE__ */ s(y, {
|
|
135
135
|
spacing: 2,
|
|
136
136
|
alignItems: "center",
|
|
137
137
|
children: [/* @__PURE__ */ e(m, {
|
|
@@ -142,19 +142,19 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
142
142
|
borderRadius: "50%",
|
|
143
143
|
background: "white",
|
|
144
144
|
shadow: "modal",
|
|
145
|
-
children: /* @__PURE__ */ e(
|
|
145
|
+
children: /* @__PURE__ */ e(M, {
|
|
146
146
|
size: "small"
|
|
147
147
|
})
|
|
148
|
-
}), (o || t) && /* @__PURE__ */ s(
|
|
149
|
-
children: [/* @__PURE__ */ e(
|
|
148
|
+
}), (o || t) && /* @__PURE__ */ s(g, {
|
|
149
|
+
children: [/* @__PURE__ */ e(S, {}), /* @__PURE__ */ s(p, {
|
|
150
150
|
indent: 2,
|
|
151
|
-
children: [o && /* @__PURE__ */ s(
|
|
152
|
-
children: [/* @__PURE__ */ e(
|
|
151
|
+
children: [o && /* @__PURE__ */ s(g, {
|
|
152
|
+
children: [/* @__PURE__ */ e(x, {
|
|
153
153
|
size: 14,
|
|
154
154
|
icon: o,
|
|
155
155
|
color: "white"
|
|
156
|
-
}), /* @__PURE__ */ e(
|
|
157
|
-
}), t && /* @__PURE__ */ e(
|
|
156
|
+
}), /* @__PURE__ */ e(A, {})]
|
|
157
|
+
}), t && /* @__PURE__ */ e(B, {
|
|
158
158
|
variant: "h4",
|
|
159
159
|
color: "white",
|
|
160
160
|
children: t
|
|
@@ -171,23 +171,23 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
171
171
|
spacing: 2,
|
|
172
172
|
indent: 2,
|
|
173
173
|
borderBottom: "1px solid var(--swui-modal-header-border-color)",
|
|
174
|
-
className:
|
|
174
|
+
className: v,
|
|
175
175
|
children: [/* @__PURE__ */ s(p, {
|
|
176
176
|
flex: 1,
|
|
177
177
|
indent: !0,
|
|
178
178
|
alignItems: "center",
|
|
179
|
-
children: [l && /* @__PURE__ */ e(
|
|
179
|
+
children: [l && /* @__PURE__ */ e(L, {
|
|
180
180
|
className: F,
|
|
181
181
|
size: "large",
|
|
182
182
|
children: l
|
|
183
183
|
}), t]
|
|
184
184
|
}), /* @__PURE__ */ e(m, {
|
|
185
185
|
alignSelf: "flex-start",
|
|
186
|
-
children: /* @__PURE__ */ e(
|
|
186
|
+
children: /* @__PURE__ */ e(D, {
|
|
187
187
|
className: r,
|
|
188
188
|
onClick: o,
|
|
189
189
|
"aria-label": "Close",
|
|
190
|
-
leftIcon:
|
|
190
|
+
leftIcon: I
|
|
191
191
|
})
|
|
192
192
|
})]
|
|
193
193
|
}), pe = ({
|
|
@@ -199,7 +199,7 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
199
199
|
draggable: i = !1,
|
|
200
200
|
onRequestClose: d,
|
|
201
201
|
closeButtonClassName: f,
|
|
202
|
-
footer:
|
|
202
|
+
footer: b,
|
|
203
203
|
disableStickyFooter: C = !1,
|
|
204
204
|
...N
|
|
205
205
|
}) => /* @__PURE__ */ s(H, {
|
|
@@ -215,15 +215,15 @@ const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ =
|
|
|
215
215
|
spacing: typeof r == "number" ? r : 1,
|
|
216
216
|
indent: typeof c == "number" ? c : 1,
|
|
217
217
|
children: l
|
|
218
|
-
}),
|
|
218
|
+
}), b && /* @__PURE__ */ e(m, {
|
|
219
219
|
className: u(n.footer, {
|
|
220
220
|
[n.stickyFooter]: !C
|
|
221
221
|
}),
|
|
222
|
-
children:
|
|
222
|
+
children: b
|
|
223
223
|
})]
|
|
224
224
|
}), ue = ({
|
|
225
225
|
children: o
|
|
226
|
-
}) => /* @__PURE__ */ e(
|
|
226
|
+
}) => /* @__PURE__ */ e(y, {
|
|
227
227
|
indent: 2,
|
|
228
228
|
spacing: 2,
|
|
229
229
|
children: o
|
|
@@ -232,7 +232,7 @@ export {
|
|
|
232
232
|
H as BaseModal,
|
|
233
233
|
_e as CenterModal,
|
|
234
234
|
F as DRAGGABLE_CANCEL_CLASSNAME,
|
|
235
|
-
|
|
235
|
+
v as DRAGGABLE_HANDLE_CLASSNAME,
|
|
236
236
|
me as Drawer,
|
|
237
237
|
fe as LoadingModal,
|
|
238
238
|
pe as Modal,
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
(function(){"use strict";try{var
|
|
2
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react-modal"),w=require("react-draggable"),M=require("classnames"),e=require("react/jsx-runtime"),s=require("@stenajs-webui/core"),_=require("@stenajs-webui/elements"),f=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=f(q),A=f(w),g=f(M),L="
|
|
1
|
+
(function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._overlay_1c4b8_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-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_1c4b8_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_1c4b8_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_1c4b8_1{background-color:#fff}}._overlay_1c4b8_1 ._modal_1c4b8_30{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_1c4b8_1 ._modal_1c4b8_30{width:100%}}._overlay_1c4b8_1 ._content_1c4b8_40{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:100%;-webkit-animation:_appear_1c4b8_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_1c4b8_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media (max-width: 768px){._overlay_1c4b8_1 ._content_1c4b8_40{top:0}}@media print{._overlay_1c4b8_1 ._content_1c4b8_40{box-shadow:none;top:0}}._overlay_1c4b8_1 ._content_1c4b8_40 :focus{outline:0}._overlay_1c4b8_1 ._content_1c4b8_40._isDraggable_1c4b8_67 .draggable-modal-handle{cursor:move}._overlay_1c4b8_1 ._content_1c4b8_40._isDraggable_1c4b8_67 .draggable-modal-handle .draggable-modal-cancel,._overlay_1c4b8_1 ._content_1c4b8_40._isDraggable_1c4b8_67 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_1c4b8_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_1c4b8_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_1c4b8_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_1c4b8_1{0%{opacity:0}to{opacity:1}}._footer_1c4b8_98{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_1c4b8_102{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_1c4b8_102{position:static;box-shadow:none}}._portal_17quq_1 ._overlay_17quq_2{position:fixed;inset:0}._portal_17quq_1 ._content_17quq_7{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_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{-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_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._afterOpen_17quq_20{-webkit-transform:translateX(0);transform:translate(0)}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._beforeClose_17quq_24{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{-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_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._afterOpen_17quq_20{-webkit-transform:translateY(0);transform:translateY(0)}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._beforeClose_17quq_24{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13{--translate-x-outside-screen: -100%;width:370px;left:0}._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{--translate-x-outside-screen: 100%;width:370px;right:0}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29{--translate-y-outside-screen: -100%;height:370px;top:0}._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{--translate-y-outside-screen: 100%;height:370px;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)}})();
|
|
2
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react-modal"),w=require("react-draggable"),M=require("classnames"),e=require("react/jsx-runtime"),s=require("@stenajs-webui/core"),_=require("@stenajs-webui/elements"),f=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=f(q),A=f(w),g=f(M),L="_overlay_1c4b8_1",S="_fadeIn_1c4b8_1",B="_modal_1c4b8_30",D="_content_1c4b8_40",R="_appear_1c4b8_1",E="_isDraggable_1c4b8_67",O="_footer_1c4b8_98",G="_stickyFooter_1c4b8_102",n={overlay:L,fadeIn:S,modal:B,content:D,appear:R,isDraggable:E,footer:O,stickyFooter:G},b="draggable-modal-handle",x="draggable-modal-cancel",h=({width:t,draggable:o=!1,children:l,...r})=>e.jsx(m.default,{overlayClassName:n.overlay,className:n.modal,...r,children:e.jsx(A.default,{handle:`.${b}`,cancel:`.${x}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!o,children:e.jsx("div",{style:{["--swui-modal-width"]:t},className:g.default(n.content,{[n.isDraggable]:o}),children:l})})}),I="_portal_17quq_1",$="_overlay_17quq_2",k="_content_17quq_7",H="_slideFromLeft_17quq_13",T="_slideFromRight_17quq_14",z="_afterOpen_17quq_20",J="_beforeClose_17quq_24",K="_slideFromTop_17quq_29",P="_slideFromBottom_17quq_30",a={portal:I,overlay:$,content:k,slideFromLeft:H,slideFromRight:T,afterOpen:z,beforeClose:J,slideFromTop:K,slideFromBottom:P},Q=({background:t,zIndex:o,children:l,slideFrom:r="left",portalTarget:c,...i})=>{const{height:d,width:u}=i;return e.jsx(m.default,{closeTimeoutMS:250,portalClassName:a.portal,overlayClassName:{base:a.overlay,afterOpen:a.afterOpen,beforeClose:a.beforeClose},className:{base:g.default(a.content,U(r)),afterOpen:a.afterOpen,beforeClose:a.beforeClose},style:{content:{width:u,height:d,background:t},overlay:{zIndex:o}},parentSelector:c?()=>c:void 0,...i,children:l})},U=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 s.exhaustSwitchCase(t,a.slideFromLeft)}},V={overlay:{justifyContent:"center"}},W=({children:t,...o})=>e.jsx(m.default,{overlayClassName:n.overlay,className:n.modal,style:V,...o,children:e.jsx("div",{className:n.content,style:{["--swui-modal-width"]:"fit-content"},children:t})}),X="_modal_4fwgb_1",Y="_overlay_4fwgb_13",y={modal:X,overlay:Y},Z=({headerIconLeft:t,headerText:o,...l})=>e.jsx(m.default,{...l,isOpen:!0,className:y.modal,overlayClassName:y.overlay,children:e.jsxs(s.Column,{spacing:2,alignItems:"center",children:[e.jsx(s.Box,{alignItems:"center",justifyContent:"center",width:"64px",height:"64px",borderRadius:"50%",background:"white",shadow:"modal",children:e.jsx(_.Spinner,{size:"small"})}),(t||o)&&e.jsxs(e.Fragment,{children:[e.jsx(s.Spacing,{}),e.jsxs(s.Row,{indent:2,children:[t&&e.jsxs(e.Fragment,{children:[e.jsx(_.Icon,{size:14,icon:t,color:"white"}),e.jsx(s.Indent,{})]}),o&&e.jsx(s.Heading,{variant:"h4",color:"white",children:o})]})]})]})}),j=({onRequestClose:t,header:o,headerText:l,closeButtonClassName:r})=>e.jsxs(s.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:b,children:[e.jsxs(s.Row,{flex:1,indent:!0,alignItems:"center",children:[l&&e.jsx(s.Txt,{className:x,size:"large",children:l}),o]}),e.jsx(s.Box,{alignSelf:"flex-start",children:e.jsx(_.FlatButton,{className:r,onClick:t,"aria-label":"Close",leftIcon:_.stenaTimes})})]}),ee=({header:t,headerText:o,children:l,spacing:r,indent:c,draggable:i=!1,onRequestClose:d,closeButtonClassName:u,footer:p,disableStickyFooter:v=!1,...C})=>{const F=typeof r=="number"?r:1,N=typeof c=="number"?c:1;return e.jsxs(h,{...C,onRequestClose:d,draggable:i,children:[e.jsx(j,{onRequestClose:d,header:t,headerText:o,closeButtonClassName:u}),e.jsx(s.Box,{spacing:F,indent:N,children:l}),p&&e.jsx(s.Box,{className:g.default(n.footer,{[n.stickyFooter]:!v}),children:p})]})},te=({children:t})=>e.jsx(s.Column,{indent:2,spacing:2,children:t});exports.BaseModal=h;exports.CenterModal=W;exports.DRAGGABLE_CANCEL_CLASSNAME=x;exports.DRAGGABLE_HANDLE_CLASSNAME=b;exports.Drawer=Q;exports.LoadingModal=Z;exports.Modal=ee;exports.ModalFooter=te;exports.ModalHeader=j;
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -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 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 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={{ [\"--swui-modal-width\" as string]: width }}\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","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 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 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={{ [\"--swui-modal-width\" as string]: width }}\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","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":"4nBAYaA,EAA6B,yBAC7BC,EAA6B,yBAE7BC,EAAsC,CAAC,CAClDC,MAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,KACGC,CAJ+C,UAO/CC,EAAAA,QAAD,CACE,iBAAkBC,EAAOC,QACzB,UAAWD,EAAOE,MAFpB,GAGMJ,EAHN,eAKGK,UAAD,CACE,OAAS,IAAGX,IACZ,OAAS,IAAGC,8BACZ,OAAO,uBACP,SAAU,CAACG,EAJb,eAME,MAAA,CACE,MAAO,CAAE,CAAC,sBAAiCD,CAApC,EACP,UAAWS,EAAAA,QAAGJ,EAAOK,QAAS,CAC5B,CAACL,EAAOM,aAAcV,CAAAA,CADX,EAFf,SAAAC,CAAA,CAAA,CAAA,CANF,CAAA,CANJ,iWC8BWU,EAAgC,CAAC,CAC5CC,WAAAA,EACAC,OAAAA,EACAZ,SAAAA,EACAa,UAAAA,EAAY,OACZC,aAAAA,KACGb,CANyC,IAOxC,CACE,KAAA,CAAEc,OAAAA,EAAQjB,MAAAA,CAAUG,EAAAA,EAE1B,aACGC,EAAAA,QAAD,CACE,eAAgB,IAChB,gBAAiBC,EAAOa,OACxB,iBAAkB,CAChBC,KAAMd,EAAOC,QACbc,UAAWf,EAAOe,UAClBC,YAAahB,EAAOgB,WAHJ,EAKlB,UAAW,CACTF,KAAMV,EAAGJ,QAAAA,EAAOK,QAASY,EAAqBP,CAAD,CAArC,EACRK,UAAWf,EAAOe,UAClBC,YAAahB,EAAOgB,WAHX,EAKX,MAAO,CAAEX,QAAS,CAAEV,MAAAA,EAAOiB,OAAAA,EAAQJ,WAAAA,CAAjB,EAA+BP,QAAS,CAAEQ,OAAAA,CAAF,CAAnD,EACP,eAAgBE,EAAe,IAAMA,EAAeO,OAdtD,GAeMpB,EAfN,SAAAD,CAAA,CADF,CAqBD,EAEKoB,EAAwBP,GAAiC,CACrDA,OAAAA,OACD,OACH,OAAOV,EAAOmB,kBACX,QACH,OAAOnB,EAAOoB,mBACX,MACH,OAAOpB,EAAOqB,iBACX,SACH,OAAOrB,EAAOsB,wBAEPC,OAAAA,oBAAkBb,EAAWV,EAAOmB,aAAnB,EAE7B,ECxFKK,EAAQ,CAAEvB,QAAS,CAAEwB,eAAgB,QAAlB,CAAX,EAEDC,EAA0C,CAAC,CACtD7B,SAAAA,KACGC,CAFmD,UAKnDC,EAAAA,QAAD,CACE,iBAAkBC,EAAOC,QACzB,UAAWD,EAAOE,MAClB,MAAAsB,EAHF,GAIM1B,EAJN,eAME,MAAA,CACE,UAAWE,EAAOK,QAClB,MAAO,CAAE,CAAC,sBAAiC,aAApC,EAFT,SAAAR,CAAA,CAAA,CAAA,CAPJ,iECIW8B,EAA4C,CAAC,CACxDC,eAAAA,EACAC,WAAAA,KACGC,CAHqD,UAMrD/B,EAAAA,QAAD,CAAA,GACM+B,EACJ,OAFF,GAGE,UAAW9B,EAAOE,MAClB,iBAAkBF,EAAOC,QAJ3B,gBAMG8B,SAAD,CAAQ,QAAS,EAAG,WAAY,SAAhC,SAAA,CACEC,EAAA,IAACC,MAAD,CACE,WAAY,SACZ,eAAgB,SAChB,MAAO,OACP,OAAQ,OACR,aAAc,MACd,WAAY,QACZ,OAAQ,QAPV,eASGC,UAAD,CAAS,KAAM,OAAA,CAAf,CATF,CAAA,GAWEN,GAAkBC,WAClBM,EAAAA,SAAA,CAAA,SAAA,CACGH,EAAAA,IAAAI,EAAAA,QADH,CAAA,CAAA,SAEGC,MAAD,CAAK,OAAQ,EAAb,SAAA,CACGT,GACCU,EAAA,KAAAH,WAAA,CAAA,SAAA,CACEH,EAAA,IAACO,OAAD,CAAM,KAAM,GAAI,KAAMX,EAAgB,MAAO,OAD/C,CAAA,EAEEI,EAAA,IAACQ,SAFH,CAAA,CAAA,CAAA,CAAA,CAAA,EAKDX,GACCG,EAAA,IAACS,UAAD,CAAS,QAAS,KAAM,MAAO,QAA/B,SACGZ,CAAAA,CATP,CAAA,CAAA,CAFF,CAAA,CAAA,CAbJ,CAAA,CAAA,CAAA,CAAA,CAPJ,ECRWa,EAA0C,CAAC,CACtDC,eAAAA,EACAC,OAAAA,EACAf,WAAAA,EACAgB,qBAAAA,CAJsD,WAOnDR,EAAAA,IAAD,CACE,QAAS,EACT,OAAQ,EACR,aAAc,kDACd,UAAW7C,EAJb,SAAA,CAME8C,EAAA,KAACD,MAAD,CAAK,KAAM,EAAG,OAAd,GAAqB,WAAY,SAAjC,SACGR,CAAAA,GACCG,EAAA,IAACc,MAAD,CAAK,UAAWrD,EAA4B,KAAM,QAAlD,SACGoC,CADH,CAAA,EAIDe,CANH,CAAA,CANF,EAcEZ,EAAA,IAACC,MAAD,CAAK,UAAW,aAAhB,eACGc,aAAD,CACE,UAAWF,EACX,QAASF,EACT,aAAY,QACZ,SAAUK,EAAAA,UAAAA,CAJZ,CAAA,CAfJ,CAAA,CAAA,CADF,ECPWC,GAA8B,CAAC,CAC1CL,OAAAA,EACAf,WAAAA,EACAhC,SAAAA,EACAqD,QAAAA,EACAC,OAAAA,EACAvD,UAAAA,EAAY,GACZ+C,eAAAA,EACAE,qBAAAA,EACAO,OAAAA,EACAC,oBAAAA,EAAsB,MACnBC,CAXuC,IAYtC,CACJ,MAAMC,EAAgB,OAAOL,GAAY,SAAWA,EAAU,EACxDM,EAAe,OAAOL,GAAW,SAAWA,EAAS,EAE3D,cACGzD,EAAD,CAAA,GAAe4D,EAAO,eAAAX,EAAgC,UAAA/C,EAAtD,SAAA,CACEoC,EAAA,IAACU,EAAD,CACE,eAAAC,EACA,OAAAC,EACA,WAAAf,EACA,qBAAAgB,CAAA,CALJ,EAOEb,EAAA,IAACC,MAAD,CAAK,QAASsB,EAAe,OAAQC,EAArC,SAAA3D,CAAA,CAAA,EAGCuD,GACCpB,EAAA,IAACC,MAAD,CACE,UAAW7B,EAAAA,QAAGJ,EAAOoD,OAAQ,CAC3B,CAACpD,EAAOyD,cAAe,CAACJ,CAAAA,CADb,EADf,SAKGD,CAAAA,CAhBP,CAAA,CAAA,CADF,CAsBD,EC7CYM,GAA0C,CAAC,CAAE7D,SAAAA,CAAF,UACrDkC,EAAAA,OAAD,CAAQ,OAAQ,EAAG,QAAS,EAA5B,SAAAlC,CAAA,CADK"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/modal",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.27.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "mattias800",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"deploy": "gh-pages -d example/build"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@stenajs-webui/core": "17.
|
|
30
|
-
"@stenajs-webui/elements": "17.
|
|
31
|
-
"@stenajs-webui/theme": "17.
|
|
29
|
+
"@stenajs-webui/core": "17.27.1",
|
|
30
|
+
"@stenajs-webui/elements": "17.27.1",
|
|
31
|
+
"@stenajs-webui/theme": "17.27.1",
|
|
32
32
|
"@types/react-modal": "^3.13.1",
|
|
33
33
|
"classnames": "^2.3.1",
|
|
34
34
|
"react-draggable": "^4.4.5",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"files": [
|
|
59
59
|
"dist"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "715ec9466ccb18ddc932d4ad3092c353cfd268dd"
|
|
62
62
|
}
|