takeat-design-system-ui-kit 0.2.13 → 0.2.14
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/dist/cjs/components/Modal/index.d.ts +2 -1
- package/dist/cjs/components/Modal/index.js +5 -4
- package/dist/cjs/components/Modal/index.js.map +1 -1
- package/dist/cjs/components/Modal/styles.d.ts +554 -6
- package/dist/cjs/components/Modal/styles.js +3 -5
- package/dist/cjs/components/Modal/styles.js.map +1 -1
- package/dist/esm/components/Modal/index.d.ts +2 -1
- package/dist/esm/components/Modal/index.js +5 -4
- package/dist/esm/components/Modal/index.js.map +1 -1
- package/dist/esm/components/Modal/styles.d.ts +554 -6
- package/dist/esm/components/Modal/styles.js +3 -5
- package/dist/esm/components/Modal/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,18 +2,16 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ModalFooter = exports.ModalBody = exports.ModalTitles = exports.ModalHeader = exports.ModalContent = exports.ModalOverlay = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
|
+
var framer_motion_1 = require("framer-motion");
|
|
5
6
|
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100dvw;\n height: 100dvh;\n padding: ", ";\n background-color: ", "33;\n display:
|
|
7
|
+
exports.ModalOverlay = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100dvw;\n height: 100dvh;\n padding: ", ";\n background-color: ", "33;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: blur(2px);\n z-index: 999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100dvw;\n height: 100dvh;\n padding: ", ";\n background-color: ", "33;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: blur(2px);\n z-index: 999;\n"])), function (_a) {
|
|
7
8
|
var theme = _a.theme;
|
|
8
9
|
return theme.spacing.m;
|
|
9
10
|
}, function (_a) {
|
|
10
11
|
var theme = _a.theme;
|
|
11
12
|
return theme.colors.neutral.darker;
|
|
12
|
-
}, function (_a) {
|
|
13
|
-
var open = _a.open;
|
|
14
|
-
return (open ? "flex" : "none");
|
|
15
13
|
});
|
|
16
|
-
exports.ModalContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n background-color: white;\n border-radius: ", ";\n box-shadow: ", ";\n width: 100%;\n height: 100%;\n min-width: fit-content;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n background-color: white;\n border-radius: ", ";\n box-shadow: ", ";\n width: 100%;\n height: 100%;\n min-width: fit-content;\n"])), function (_a) {
|
|
14
|
+
exports.ModalContent = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n background-color: white;\n border-radius: ", ";\n box-shadow: ", ";\n width: 100%;\n height: 100%;\n min-width: fit-content;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n background-color: white;\n border-radius: ", ";\n box-shadow: ", ";\n width: 100%;\n height: 100%;\n min-width: fit-content;\n"])), function (_a) {
|
|
17
15
|
var theme = _a.theme;
|
|
18
16
|
return theme.spacing.s;
|
|
19
17
|
}, function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Modal/styles.ts"],"names":[],"mappings":";;;;AAAA,gFAAuC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Modal/styles.ts"],"names":[],"mappings":";;;;AAAA,+CAAuC;AACvC,gFAAuC;AAE1B,QAAA,YAAY,GAAG,IAAA,2BAAM,EAAC,sBAAM,CAAC,GAAG,CAAC,oUAAA,+FAMjC,EAA8B,yBACrB,EAA0C,6HAM/D,KAPY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EACrB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAM9D;AAEW,QAAA,YAAY,GAAG,IAAA,2BAAM,EAAC,sBAAM,CAAC,GAAG,CAAC,+QAAA,wDAGrC,EAA8B,kDAEpB,EAA6B,mBAChC,EAAoC,iEAInD,KAPQ,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAEpB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,CAAC;AAAd,CAAc,EAChC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,OAAO;AAArB,CAAqB,EAIlD;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,8OAAA,gGAIxB,EAA8B,iEAM1C,KANY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAMzC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,ucAAA,uGAOxB,EAA0C,6IAS1C,EAAwC,oIAOpD,KAhBY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAS1C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAOnD;AAEW,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,uIAAA,qDAGtB,EAA8B,KAC1C,KADY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EACzC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,kLAAA,2DAG5B,EAA+B,gBAC3B,EAA8B,wBAE1C,KAHQ,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,EAAE;AAAhB,CAAgB,EAC3B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAEzC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
2
|
+
import { MotionProps } from "framer-motion";
|
|
3
|
+
interface ModalProps extends MotionProps {
|
|
3
4
|
open?: boolean;
|
|
4
5
|
toggle?: () => void;
|
|
5
6
|
overlayStyles?: React.CSSProperties;
|
|
@@ -6,6 +6,7 @@ import { Divider } from "../Divider";
|
|
|
6
6
|
import { IconClose } from "../icons";
|
|
7
7
|
import { useTheme } from "styled-components";
|
|
8
8
|
import { createPortal } from "react-dom";
|
|
9
|
+
import { AnimatePresence } from "framer-motion";
|
|
9
10
|
var Modal = forwardRef(function Modal(_a, ref) {
|
|
10
11
|
var open = _a.open, toggle = _a.toggle, overlayStyles = _a.overlayStyles, children = _a.children, props = __rest(_a, ["open", "toggle", "overlayStyles", "children"]);
|
|
11
12
|
var modifiedChildren = React.Children.map(children, function (child) {
|
|
@@ -15,10 +16,10 @@ var Modal = forwardRef(function Modal(_a, ref) {
|
|
|
15
16
|
}
|
|
16
17
|
return child;
|
|
17
18
|
});
|
|
18
|
-
return createPortal(_jsx(ModalOverlay, { ref: ref, style: overlayStyles,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
return createPortal(_jsx(AnimatePresence, { children: open && (_jsx(ModalOverlay, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, ref: ref, style: overlayStyles, onClick: function (e) {
|
|
20
|
+
e.stopPropagation();
|
|
21
|
+
toggle === null || toggle === void 0 ? void 0 : toggle();
|
|
22
|
+
}, children: _jsx(ModalContent, __assign({ onClick: function (e) { return e.stopPropagation(); } }, props, { children: modifiedChildren })) })) }), document.body);
|
|
22
23
|
});
|
|
23
24
|
var Header = function (_a) {
|
|
24
25
|
var children = _a.children, hasClose = _a.hasClose, toggle = _a.toggle, props = __rest(_a, ["children", "hasClose", "toggle"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Modal/index.tsx"],"names":[],"mappings":"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"}
|