@simplybusiness/mobius 4.0.0-beta.11 → 4.0.0-beta.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.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/components/Button/Button.d.ts +1 -1
- package/dist/cjs/components/Button/Button.js +1 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Button/Button.stories.js +12 -12
- package/dist/cjs/components/Button/Button.stories.js.map +1 -1
- package/dist/cjs/components/Drawer/Drawer.js +22 -36
- package/dist/cjs/components/Drawer/Drawer.js.map +1 -1
- package/dist/cjs/components/Flex/Flex.stories.js +8 -13
- package/dist/cjs/components/Flex/Flex.stories.js.map +1 -1
- package/dist/cjs/components/Grid/Grid.stories.js +11 -16
- package/dist/cjs/components/Grid/Grid.stories.js.map +1 -1
- package/dist/cjs/components/Icon/Icon.js +1 -2
- package/dist/cjs/components/Icon/Icon.js.map +1 -1
- package/dist/cjs/components/Icon/Icon.stories.js +1 -1
- package/dist/cjs/components/Icon/types.d.ts +1 -1
- package/dist/cjs/components/LinkButton/LinkButton.stories.js +1 -1
- package/dist/cjs/components/LinkButton/LinkButton.stories.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js +24 -41
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.stories.d.ts +2 -0
- package/dist/cjs/components/Modal/Modal.stories.js +18 -1
- package/dist/cjs/components/Modal/Modal.stories.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.test.js +29 -6
- package/dist/cjs/components/Modal/Modal.test.js.map +1 -1
- package/dist/cjs/components/Radio/Radio.stories.js +1 -1
- package/dist/cjs/components/Segment/Segment.stories.js +11 -13
- package/dist/cjs/components/Segment/Segment.stories.js.map +1 -1
- package/dist/cjs/components/Segment/SegmentGroup.d.ts +1 -1
- package/dist/cjs/components/Segment/SegmentGroup.js.map +1 -1
- package/dist/cjs/components/Text/Text.d.ts +2 -2
- package/dist/cjs/components/Text/Text.js +1 -1
- package/dist/cjs/components/Text/Text.js.map +1 -1
- package/dist/cjs/components/Text/Text.stories.js +2 -2
- package/dist/cjs/components/Text/Text.stories.js.map +1 -1
- package/dist/cjs/components/Text/Text.test.js +2 -2
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.js +1 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/Button/Button.js +1 -1
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Drawer/Drawer.js +22 -36
- package/dist/esm/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +1 -2
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Modal/Modal.js +24 -41
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Segment/SegmentGroup.js.map +1 -1
- package/dist/esm/components/Text/Text.js +1 -1
- package/dist/esm/components/Text/Text.js.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/mobius.d.ts +46 -5
- package/package.json +2 -2
- package/src/components/Button/Button.mdx +7 -7
- package/src/components/Button/Button.stories.tsx +12 -12
- package/src/components/Button/Button.story.styles.css +1 -1
- package/src/components/Button/Button.tsx +2 -2
- package/src/components/Checkbox/Checkbox.mdx +4 -1
- package/src/components/Drawer/Drawer.tsx +34 -46
- package/src/components/Flex/Flex.mdx +18 -23
- package/src/components/Flex/Flex.stories.tsx +8 -13
- package/src/components/Grid/Grid.mdx +13 -18
- package/src/components/Grid/Grid.stories.tsx +11 -16
- package/src/components/Icon/Icon.stories.tsx +1 -1
- package/src/components/Icon/Icon.tsx +1 -1
- package/src/components/Icon/types.ts +1 -17
- package/src/components/LinkButton/LinkButton.stories.tsx +1 -1
- package/src/components/Modal/Modal.mdx +51 -0
- package/src/components/Modal/Modal.stories.tsx +53 -0
- package/src/components/Modal/Modal.test.tsx +49 -6
- package/src/components/Modal/Modal.tsx +35 -50
- package/src/components/Progress/Progress.mdx +3 -3
- package/src/components/Radio/Radio.mdx +5 -2
- package/src/components/Radio/Radio.stories.tsx +1 -1
- package/src/components/Segment/Segment.mdx +22 -24
- package/src/components/Segment/Segment.stories.tsx +22 -24
- package/src/components/Segment/SegmentGroup.tsx +1 -9
- package/src/components/Text/Text.stories.tsx +3 -5
- package/src/components/Text/Text.test.tsx +2 -2
- package/src/components/Text/Text.tsx +3 -13
- package/src/components/index.tsx +1 -0
|
@@ -17,7 +17,7 @@ import { Loading } from "./Loading";
|
|
|
17
17
|
import { useButton } from "../../hooks/useButton";
|
|
18
18
|
let HAS_DEPRECATION_WARNING_SHOWN = false;
|
|
19
19
|
const Button = forwardRef((props, ref) => {
|
|
20
|
-
const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "
|
|
20
|
+
const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", icon, iconPosition,
|
|
21
21
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
22
22
|
onPress,
|
|
23
23
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAO,UAAU,EAA4B,MAAM,OAAO,CAAC;AAClE,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAkB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElE,IAAI,6BAA6B,GAAG,KAAK,CAAC;AAyC1C,MAAM,MAAM,GACV,UAAU,CAAC,CAAC,KAAkB,EAAE,GAAc,EAAE,EAAE;IAChD,MAAM,EACJ,QAAQ,EACR,WAAW,EAAE,SAAS,GAAG,QAAQ,EACjC,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAO,UAAU,EAA4B,MAAM,OAAO,CAAC;AAClE,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAkB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElE,IAAI,6BAA6B,GAAG,KAAK,CAAC;AAyC1C,MAAM,MAAM,GACV,UAAU,CAAC,CAAC,KAAkB,EAAE,GAAc,EAAE,EAAE;IAChD,MAAM,EACJ,QAAQ,EACR,WAAW,EAAE,SAAS,GAAG,QAAQ,EACjC,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,YAAY;IACZ,6DAA6D;IAC7D,OAAO;IACP,6DAA6D;IAC7D,OAAO,KAEL,KAAK,EADJ,UAAU,UACX,KAAK,EAfH,oIAeL,CAAQ,CAAC;IACV,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEzC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,6BAA6B,EAAE;QAC5D,sCAAsC;QACtC,OAAO,CAAC,IAAI,CACV,uJAAuJ,CACxJ,CAAC;QACF,6BAA6B,GAAG,IAAI,CAAC;KACtC;IAED,gDAAgD;IAChD,MAAM,OAAO,GAAG,UAAU,CACxB,QAAQ,EACR,eAAe,EACf,aAAa,OAAO,EAAE,EACtB,UAAU,IAAI,EAAE,EAChB;QACE,eAAe,EAAE,UAAU;QAC3B,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS,IAAI,CAAC,SAAS;KACxC,EACD,UAAU,CAAC,SAAS,CACrB,CAAC;IACF,UAAU,CAAC,SAAS,GAAG,OAAO,CAAC;IAE/B,OAAO,CACL,KAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,IAAM,WAAW,EAAM,UAAU,cACjD,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ,IACrC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -4,14 +4,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
5
5
|
import classNames from "classnames/dedupe";
|
|
6
6
|
import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef, } from "react";
|
|
7
|
-
import { useOnClickOutside } from "../../hooks";
|
|
8
7
|
import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
|
|
9
8
|
import { supportsDialog } from "../../utils/polyfill-tests";
|
|
10
9
|
import { VisuallyHidden } from "../VisuallyHidden";
|
|
11
10
|
const Drawer = ({ isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children, }) => {
|
|
12
11
|
const hasOpened = useRef(false);
|
|
13
|
-
const
|
|
14
|
-
const dialog =
|
|
12
|
+
const modalRef = useRef(null);
|
|
13
|
+
const dialog = modalRef.current;
|
|
15
14
|
// Fire onOpen once
|
|
16
15
|
if (onOpen && !hasOpened.current) {
|
|
17
16
|
onOpen();
|
|
@@ -19,35 +18,22 @@ const Drawer = ({ isOpen, className, closeLabel, direction, announce = "Drawer o
|
|
|
19
18
|
}
|
|
20
19
|
useBodyScrollLock({ enabled: isOpen });
|
|
21
20
|
// Add close handler, to enable closing animations
|
|
22
|
-
const handleClose = useCallback(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
const rect = dialog.getBoundingClientRect();
|
|
37
|
-
const isInDialog = rect.top <= event.clientY &&
|
|
38
|
-
event.clientY <= rect.top + rect.height &&
|
|
39
|
-
rect.left <= event.clientX &&
|
|
40
|
-
event.clientX <= rect.left + rect.width;
|
|
41
|
-
if (!isInDialog) {
|
|
42
|
-
handleClose();
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
// Close modal if Escape button is pressed
|
|
46
|
-
useOnClickOutside(ref, () => {
|
|
47
|
-
if (ref.current && isOpen) {
|
|
48
|
-
handleClose();
|
|
21
|
+
const handleClose = useCallback(event => {
|
|
22
|
+
if (event) {
|
|
23
|
+
event.preventDefault();
|
|
24
|
+
event.stopPropagation();
|
|
25
|
+
const doClose = () => {
|
|
26
|
+
dialog.close();
|
|
27
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
28
|
+
};
|
|
29
|
+
// Delay close to allow exit animation
|
|
30
|
+
dialog.classList.add("close");
|
|
31
|
+
dialog.addEventListener("animationend", () => {
|
|
32
|
+
dialog.classList.remove("close");
|
|
33
|
+
doClose();
|
|
34
|
+
}, { once: true });
|
|
49
35
|
}
|
|
50
|
-
});
|
|
36
|
+
}, [onClose, dialog]);
|
|
51
37
|
const modalClasses = classNames("mobius", "mobius/Drawer", `--${direction}`, className);
|
|
52
38
|
// Add polyfill for HTML Dialog in old browsers
|
|
53
39
|
useEffect(() => {
|
|
@@ -56,19 +42,19 @@ const Drawer = ({ isOpen, className, closeLabel, direction, announce = "Drawer o
|
|
|
56
42
|
if (!supportsDialog() && typeof window !== "undefined") {
|
|
57
43
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
58
44
|
const { default: dialogPolyfill } = await import("dialog-polyfill");
|
|
59
|
-
dialogPolyfill.registerDialog(
|
|
45
|
+
dialogPolyfill.registerDialog(modalRef.current);
|
|
60
46
|
}
|
|
61
47
|
if (isOpen) {
|
|
62
|
-
(_a =
|
|
48
|
+
(_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
63
49
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
64
50
|
}
|
|
65
|
-
else if ((_b =
|
|
66
|
-
(_c =
|
|
51
|
+
else if ((_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.open) {
|
|
52
|
+
(_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.close();
|
|
67
53
|
}
|
|
68
54
|
}
|
|
69
55
|
toggleModal();
|
|
70
56
|
}, [isOpen, onOpen]);
|
|
71
|
-
return (_jsxs("dialog", { ref:
|
|
57
|
+
return (_jsxs("dialog", { ref: modalRef, onCancel: handleClose, className: modalClasses, "aria-describedby": "screen-reader-announce", children: [_jsx(VisuallyHidden, { children: _jsx("div", { id: "screen-reader-announce", children: announce }) }), Children.map(children, child => {
|
|
72
58
|
if (isValidElement(child)) {
|
|
73
59
|
return cloneElement(child, {
|
|
74
60
|
onClose: handleClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,+BAA+B;AAE/B,YAAY,CAAC;;AAEb,6DAA6D;AAC7D,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,QAAQ,
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,8 +18,7 @@ export function Icon(_a) {
|
|
|
18
18
|
if (!icon) {
|
|
19
19
|
throw new Error("Must specify icon object");
|
|
20
20
|
}
|
|
21
|
-
const classes = classNames("mobius", "mobius/Icon", `svg-inline--${ICON_PREFIX}`, className, {
|
|
22
|
-
[`${ICON_PREFIX}-${size}`]: size,
|
|
21
|
+
const classes = classNames("mobius", "mobius/Icon", `svg-inline--${ICON_PREFIX}`, `--size-${size}`, className, {
|
|
23
22
|
[`${ICON_PREFIX}-fw`]: fixedWidth,
|
|
24
23
|
[`${ICON_PREFIX}-spin`]: spin || spinReverse,
|
|
25
24
|
[`${ICON_PREFIX}-spin-reverse`]: spinReverse,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,UAAU,IAAI,CAAC,EAST;QATS,EACnB,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,OAED,EADP,UAAU,cARM,2EASpB,CADc;IAEb,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;KAC7C;IAED,MAAM,OAAO,GAAG,UAAU,CACxB,QAAQ,EACR,aAAa,EACb,eAAe,WAAW,EAAE,EAC5B,
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,UAAU,IAAI,CAAC,EAST;QATS,EACnB,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,OAED,EADP,UAAU,cARM,2EASpB,CADc;IAEb,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;KAC7C;IAED,MAAM,OAAO,GAAG,UAAU,CACxB,QAAQ,EACR,aAAa,EACb,eAAe,WAAW,EAAE,EAC5B,UAAU,IAAI,EAAE,EAChB,SAAS,EACT;QACE,CAAC,GAAG,WAAW,KAAK,CAAC,EAAE,UAAU;QACjC,CAAC,GAAG,WAAW,OAAO,CAAC,EAAE,IAAI,IAAI,WAAW;QAC5C,CAAC,GAAG,WAAW,eAAe,CAAC,EAAE,WAAW;KAC7C,CACF,CAAC;IAEF,WAAW,EAAE,CAAC;IAEd,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAEtD,OAAO,CACL,2CACc,MAAM,EAClB,SAAS,EAAC,OAAO,eACN,QAAQ,EACnB,SAAS,EAAE,OAAO,EAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,IACZ,UAAU,cAEd,eAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,WAAW,GAAI,IACxC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -4,7 +4,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
4
4
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
5
5
|
import classNames from "classnames/dedupe";
|
|
6
6
|
import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef, } from "react";
|
|
7
|
-
import { useOnClickOutside } from "../../hooks";
|
|
8
7
|
import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
|
|
9
8
|
import { supportsDialog } from "../../utils/polyfill-tests";
|
|
10
9
|
const Modal = ({ isOpen, onClose, children, className, closeLabel, isFullScreen, animation,
|
|
@@ -22,47 +21,31 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector, })
|
|
|
22
21
|
hasWarnedAboutMissingLabels.current = true;
|
|
23
22
|
}
|
|
24
23
|
}
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
const dialog = ref.current;
|
|
24
|
+
const modalRef = useRef(null);
|
|
25
|
+
const dialog = modalRef.current;
|
|
28
26
|
const noPreference = window === null || window === void 0 ? void 0 : window.matchMedia("(prefers-reduced-motion: no-preference)");
|
|
29
27
|
useBodyScrollLock({ enabled: isOpen });
|
|
30
28
|
// Add close handler, to enable closing animations
|
|
31
|
-
const handleClose = useCallback(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
const handleClose = useCallback(event => {
|
|
30
|
+
if (event) {
|
|
31
|
+
event.preventDefault();
|
|
32
|
+
event.stopPropagation();
|
|
33
|
+
const doClose = () => {
|
|
34
|
+
dialog.close();
|
|
35
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
36
|
+
};
|
|
37
|
+
if (animation) {
|
|
38
|
+
dialog.classList.add("close");
|
|
39
|
+
dialog.addEventListener("animationend", () => {
|
|
40
|
+
dialog.classList.remove("close");
|
|
41
|
+
doClose();
|
|
42
|
+
}, { once: true });
|
|
36
43
|
}
|
|
37
|
-
|
|
38
|
-
if (animation) {
|
|
39
|
-
dialog.classList.add("close");
|
|
40
|
-
dialog.addEventListener("animationend", () => {
|
|
41
|
-
dialog.classList.remove("close");
|
|
44
|
+
else {
|
|
42
45
|
doClose();
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
doClose();
|
|
47
|
-
}
|
|
48
|
-
}, [onClose, animation, dialog]);
|
|
49
|
-
// Close modal if backdrop is clicked
|
|
50
|
-
dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("click", event => {
|
|
51
|
-
const rect = dialog.getBoundingClientRect();
|
|
52
|
-
const isInDialog = rect.top <= event.clientY &&
|
|
53
|
-
event.clientY <= rect.top + rect.height &&
|
|
54
|
-
rect.left <= event.clientX &&
|
|
55
|
-
event.clientX <= rect.left + rect.width;
|
|
56
|
-
if (!isInDialog) {
|
|
57
|
-
handleClose();
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
// Close modal if Escape button is pressed
|
|
61
|
-
useOnClickOutside(ref, () => {
|
|
62
|
-
if (ref.current && isOpen) {
|
|
63
|
-
handleClose();
|
|
46
|
+
}
|
|
64
47
|
}
|
|
65
|
-
});
|
|
48
|
+
}, [animation, dialog, onClose]);
|
|
66
49
|
const modalClasses = classNames("mobius", "mobius/Modal", {
|
|
67
50
|
animation,
|
|
68
51
|
"--slide-up": animation === "slideUp",
|
|
@@ -77,18 +60,18 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector, })
|
|
|
77
60
|
if (!supportsDialog() && typeof window !== "undefined") {
|
|
78
61
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
79
62
|
const { default: dialogPolyfill } = await import("dialog-polyfill");
|
|
80
|
-
dialogPolyfill.registerDialog(
|
|
63
|
+
dialogPolyfill.registerDialog(modalRef.current);
|
|
81
64
|
}
|
|
82
65
|
if (isOpen) {
|
|
83
|
-
(_a =
|
|
66
|
+
(_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
84
67
|
}
|
|
85
|
-
else if ((_b =
|
|
86
|
-
(_c =
|
|
68
|
+
else if ((_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.open) {
|
|
69
|
+
(_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.close();
|
|
87
70
|
}
|
|
88
71
|
}
|
|
89
72
|
toggleModal();
|
|
90
73
|
}, [isOpen]);
|
|
91
|
-
return (_jsx("dialog", { ref:
|
|
74
|
+
return (_jsx("dialog", { ref: modalRef, onCancel: handleClose, className: modalClasses, children: Children.map(children, child => {
|
|
92
75
|
if (isValidElement(child)) {
|
|
93
76
|
return cloneElement(child, {
|
|
94
77
|
onClose: handleClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,+BAA+B;AAE/B,YAAY,CAAC;;AAEb,6DAA6D;AAC7D,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,QAAQ,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAU3C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA5D,iDAAoD,CAAQ,CAAC;IAEnE,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACrD,MAAM,OAAO,GAAG,UAAU,CACxB,QAAQ,EACR,qBAAqB,EACrB,SAAS,EACT,EAAE,UAAU,EAAE,EACd,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,4BAAK,SAAS,EAAE,OAAO,IAAM,IAAI,cAC9B,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -14,7 +14,7 @@ import { forwardRef } from "react";
|
|
|
14
14
|
import classNames from "classnames/dedupe";
|
|
15
15
|
const getElementType = (variant, elementType) => {
|
|
16
16
|
if (variant) {
|
|
17
|
-
return ["h1", "h2", "h3", "h4"
|
|
17
|
+
return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
|
|
18
18
|
}
|
|
19
19
|
return elementType || "p";
|
|
20
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAiC,MAAM,OAAO,CAAC;AAClE,OAAO,UAAU,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAiC,MAAM,OAAO,CAAC;AAClE,OAAO,UAAU,MAAM,mBAAmB,CAAC;AA6B3C,MAAM,cAAc,GAAG,CACrB,OAAoC,EACpC,WAAoC,EACpC,EAAE;IACF,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;KACnE;IACD,OAAO,WAAW,IAAI,GAAG,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,IAAI,GAAsD,UAAU,CACxE,CAAC,EAAqD,EAAE,GAAY,EAAE,EAAE;QAAvE,EAAE,WAAW,EAAE,SAAS,GAAG,GAAG,OAAuB,EAAlB,KAAK,cAAxC,eAA0C,CAAF;IACvC,oCAAoC;IACpC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,KAAoB,KAAK,EAApB,UAAU,UAAK,KAAK,EAAtD,mCAA8C,CAAQ,CAAC;IAE7D,gEAAgE;IAChE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,OAAO,IAAI,WAAW,CAAC;IAC3C,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,eAAe,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,UAAU,CACxB,QAAQ,EACR,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,CACV,CAAC;IAEF,OAAO,KAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,IAAM,UAAU,IAAE,SAAS,EAAE,OAAO,IAAI,CAAC;AACrE,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}
|