@jobber/components 8.27.1 → 8.27.2
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/Modal/index.cjs +2 -12
- package/dist/Modal/index.mjs +3 -13
- package/package.json +2 -2
package/dist/Modal/index.cjs
CHANGED
|
@@ -42,7 +42,8 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
|
|
|
42
42
|
const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
|
|
43
43
|
jobberHooks.useRefocusOnActivator(open);
|
|
44
44
|
const modalRef = jobberHooks.useFocusTrap(open);
|
|
45
|
-
|
|
45
|
+
jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
|
|
46
|
+
const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: containerClassName, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
|
|
46
47
|
React.createElement(framerMotion.motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
|
|
47
48
|
React.createElement(framerMotion.motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
|
|
48
49
|
duration: 0.2,
|
|
@@ -59,17 +60,6 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
|
|
|
59
60
|
onRequestClose();
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
|
-
function handleKeyDown(event) {
|
|
63
|
-
if (event.key === "Escape") {
|
|
64
|
-
// Stop the Escape from bubbling to outer overlays (e.g. a Base UI Dialog
|
|
65
|
-
// this Modal is nested within, whose dismissal listens at the document
|
|
66
|
-
// level). Without this, one Escape closes both layers; instead only the
|
|
67
|
-
// top-most layer — this Modal — should close. Mirrors SideDrawer's
|
|
68
|
-
// Escape containment.
|
|
69
|
-
event.stopPropagation();
|
|
70
|
-
handleRequestClose();
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
63
|
}
|
|
74
64
|
function Header({ title, dismissible, onRequestClose }) {
|
|
75
65
|
return (React.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
|
package/dist/Modal/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import React__default, { useRef, useEffect, createContext, useContext } from 're
|
|
|
2
2
|
import ReactDOM__default from 'react-dom';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
5
|
-
import { useRefocusOnActivator, useFocusTrap } from '@jobber/hooks';
|
|
5
|
+
import { useRefocusOnActivator, useFocusTrap, useOnKeyDown } from '@jobber/hooks';
|
|
6
6
|
import { H as Heading } from '../Heading-es.js';
|
|
7
7
|
import { B as Button } from '../Button-es.js';
|
|
8
8
|
import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
|
|
@@ -40,7 +40,8 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
|
|
|
40
40
|
const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
|
|
41
41
|
useRefocusOnActivator(open);
|
|
42
42
|
const modalRef = useFocusTrap(open);
|
|
43
|
-
|
|
43
|
+
useOnKeyDown(handleRequestClose, "Escape");
|
|
44
|
+
const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: containerClassName, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
|
|
44
45
|
React__default.createElement(motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
|
|
45
46
|
React__default.createElement(motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
|
|
46
47
|
duration: 0.2,
|
|
@@ -57,17 +58,6 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
|
|
|
57
58
|
onRequestClose();
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
|
-
function handleKeyDown(event) {
|
|
61
|
-
if (event.key === "Escape") {
|
|
62
|
-
// Stop the Escape from bubbling to outer overlays (e.g. a Base UI Dialog
|
|
63
|
-
// this Modal is nested within, whose dismissal listens at the document
|
|
64
|
-
// level). Without this, one Escape closes both layers; instead only the
|
|
65
|
-
// top-most layer — this Modal — should close. Mirrors SideDrawer's
|
|
66
|
-
// Escape containment.
|
|
67
|
-
event.stopPropagation();
|
|
68
|
-
handleRequestClose();
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
61
|
}
|
|
72
62
|
function Header({ title, dismissible, onRequestClose }) {
|
|
73
63
|
return (React__default.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "8.27.
|
|
3
|
+
"version": "8.27.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -545,5 +545,5 @@
|
|
|
545
545
|
"> 1%",
|
|
546
546
|
"IE 10"
|
|
547
547
|
],
|
|
548
|
-
"gitHead": "
|
|
548
|
+
"gitHead": "3e5a1cbd64d7740875a46c6936e16fca739eb38e"
|
|
549
549
|
}
|