colibri-ui 0.8.23 → 0.8.25
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/Calendar/index.js +6 -0
- package/Icons/Close.js +4 -5
- package/Modal/Modal.module.css +5 -0
- package/Modal/components/Close/Close.module.css +0 -1
- package/Modal/index.js +27 -17
- package/esm/Calendar/index.js +6 -0
- package/esm/Icons/Close.js +4 -5
- package/esm/Modal/Modal.module.css +5 -0
- package/esm/Modal/components/Close/Close.module.css +0 -1
- package/esm/Modal/index.js +28 -18
- package/package.json +1 -1
package/Calendar/index.js
CHANGED
|
@@ -165,6 +165,12 @@ var Calendar = function Calendar(_a) {
|
|
|
165
165
|
React.useEffect(function () {
|
|
166
166
|
setSelectedPeriod(initialSelectedPeriod);
|
|
167
167
|
}, [initialSelectedPeriod]);
|
|
168
|
+
React.useEffect(function () {
|
|
169
|
+
if (initialSelectedDate) {
|
|
170
|
+
var newOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
|
|
171
|
+
setCurrentMonthOffset(newOffset);
|
|
172
|
+
}
|
|
173
|
+
}, [initialSelectedDate, startMonth]);
|
|
168
174
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
169
175
|
className: clx(styles__default.default.root, className),
|
|
170
176
|
style: {
|
package/Icons/Close.js
CHANGED
|
@@ -18,17 +18,16 @@ var CloseIcon = (function (_a) {
|
|
|
18
18
|
props = tslib.__rest(_a, ["width", "height", "ref"]);
|
|
19
19
|
return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
|
|
20
20
|
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
-
fill: "none",
|
|
22
21
|
width: width,
|
|
23
22
|
height: height,
|
|
24
23
|
ref: ref
|
|
25
24
|
}, props, {
|
|
26
|
-
|
|
25
|
+
fill: "none"
|
|
27
26
|
}), /*#__PURE__*/React__default.default.createElement("path", {
|
|
27
|
+
fill: "currentColor",
|
|
28
28
|
fillRule: "evenodd",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
fill: "currentColor"
|
|
29
|
+
d: "M.536.541A1.9 1.9 0 0 0 0 1.848c0 .49.203.959.536 1.306l8.868 8.857-8.868 8.857c-.333.35-.518.815-.518 1.299 0 .486.204.948.555 1.291A1.8 1.8 0 0 0 1.848 24a1.86 1.86 0 0 0 1.311-.52l8.85-8.856 8.85 8.857a1.86 1.86 0 0 0 1.312.519c.48-.006.942-.2 1.275-.541A1.8 1.8 0 0 0 24 22.167c0-.484-.185-.95-.517-1.3l-8.869-8.856 8.869-8.857c.332-.349.517-.815.517-1.299a1.8 1.8 0 0 0-.554-1.291A1.8 1.8 0 0 0 22.17.022a1.86 1.86 0 0 0-1.312.52l-8.85 8.856L3.16.541a1.857 1.857 0 0 0-2.623 0",
|
|
30
|
+
clipRule: "evenodd"
|
|
32
31
|
}));
|
|
33
32
|
});
|
|
34
33
|
|
package/Modal/Modal.module.css
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.title-wrapper {
|
|
11
|
+
padding-right: 20px;
|
|
11
12
|
align-items: center;
|
|
12
13
|
border-bottom: 1px solid var(--palette-bg-2);
|
|
13
14
|
display: flex;
|
|
@@ -15,7 +16,11 @@
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.close-wrapper {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
padding: 0 20px;
|
|
21
|
+
min-height: 70px;
|
|
18
22
|
display: flex;
|
|
23
|
+
align-items: center;
|
|
19
24
|
justify-content: flex-end;
|
|
20
25
|
}
|
|
21
26
|
|
package/Modal/index.js
CHANGED
|
@@ -29,42 +29,52 @@ var Modal = function Modal(_a) {
|
|
|
29
29
|
var isDesktop = index.default(function (bp) {
|
|
30
30
|
return bp.up("md");
|
|
31
31
|
});
|
|
32
|
-
var onCloseHandler = React.useMemo(function () {
|
|
33
|
-
return onClose || function () {
|
|
34
|
-
return {};
|
|
35
|
-
};
|
|
36
|
-
}, [onClose]);
|
|
37
32
|
index$1.default();
|
|
38
33
|
index$2.default(modalRef);
|
|
34
|
+
var handleClose = React.useCallback(function () {
|
|
35
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
36
|
+
}, [onClose]);
|
|
37
|
+
var handleOverlayClick = React.useCallback(function (e) {
|
|
38
|
+
if (e.target === e.currentTarget) {
|
|
39
|
+
handleClose();
|
|
40
|
+
}
|
|
41
|
+
}, [handleClose]);
|
|
39
42
|
React.useEffect(function () {
|
|
40
|
-
var
|
|
41
|
-
if (
|
|
42
|
-
|
|
43
|
+
var handleEscape = function handleEscape(event) {
|
|
44
|
+
if (event.key === "Escape") {
|
|
45
|
+
handleClose();
|
|
46
|
+
}
|
|
43
47
|
};
|
|
44
|
-
document.addEventListener("keydown",
|
|
48
|
+
document.addEventListener("keydown", handleEscape);
|
|
45
49
|
return function () {
|
|
46
|
-
document.removeEventListener("keydown",
|
|
50
|
+
return document.removeEventListener("keydown", handleEscape);
|
|
47
51
|
};
|
|
48
|
-
}, [
|
|
52
|
+
}, [handleClose]);
|
|
49
53
|
return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
|
|
50
|
-
className: clx("root")
|
|
54
|
+
className: clx("root"),
|
|
55
|
+
role: "dialog",
|
|
56
|
+
"aria-modal": "true",
|
|
57
|
+
"aria-labelledby": title ? "modal-title" : undefined
|
|
51
58
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
52
59
|
className: clx("modal-overlay"),
|
|
53
|
-
onClick:
|
|
60
|
+
onClick: handleOverlayClick,
|
|
61
|
+
"aria-hidden": "true"
|
|
54
62
|
}), /*#__PURE__*/React__default.default.createElement("div", {
|
|
55
63
|
className: clx("modal-wrapper", {
|
|
56
|
-
"modal-wrapper_desktop": isDesktop
|
|
57
|
-
"modal-wrapper_mobile": !isDesktop
|
|
64
|
+
"modal-wrapper_desktop": isDesktop,
|
|
65
|
+
"modal-wrapper_mobile": !isDesktop
|
|
58
66
|
}, className),
|
|
59
67
|
ref: modalRef
|
|
60
68
|
}, title ? (/*#__PURE__*/React__default.default.createElement("div", {
|
|
61
69
|
className: clx("title-wrapper")
|
|
62
70
|
}, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
|
|
63
|
-
onClick:
|
|
71
|
+
onClick: handleClose,
|
|
72
|
+
"aria-label": "Close modal"
|
|
64
73
|
}))) : (/*#__PURE__*/React__default.default.createElement("div", {
|
|
65
74
|
className: clx("close-wrapper")
|
|
66
75
|
}, /*#__PURE__*/React__default.default.createElement(index$5.default, {
|
|
67
|
-
onClick:
|
|
76
|
+
onClick: handleClose,
|
|
77
|
+
"aria-label": "Close modal"
|
|
68
78
|
}))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));
|
|
69
79
|
};
|
|
70
80
|
|
package/esm/Calendar/index.js
CHANGED
|
@@ -155,6 +155,12 @@ var Calendar = function Calendar(_a) {
|
|
|
155
155
|
useEffect(function () {
|
|
156
156
|
setSelectedPeriod(initialSelectedPeriod);
|
|
157
157
|
}, [initialSelectedPeriod]);
|
|
158
|
+
useEffect(function () {
|
|
159
|
+
if (initialSelectedDate) {
|
|
160
|
+
var newOffset = getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
|
|
161
|
+
setCurrentMonthOffset(newOffset);
|
|
162
|
+
}
|
|
163
|
+
}, [initialSelectedDate, startMonth]);
|
|
158
164
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
159
165
|
className: clx(styles.root, className),
|
|
160
166
|
style: {
|
package/esm/Icons/Close.js
CHANGED
|
@@ -10,17 +10,16 @@ var CloseIcon = (function (_a) {
|
|
|
10
10
|
props = __rest(_a, ["width", "height", "ref"]);
|
|
11
11
|
return /*#__PURE__*/React__default.createElement("svg", __assign({
|
|
12
12
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13
|
-
fill: "none",
|
|
14
13
|
width: width,
|
|
15
14
|
height: height,
|
|
16
15
|
ref: ref
|
|
17
16
|
}, props, {
|
|
18
|
-
|
|
17
|
+
fill: "none"
|
|
19
18
|
}), /*#__PURE__*/React__default.createElement("path", {
|
|
19
|
+
fill: "currentColor",
|
|
20
20
|
fillRule: "evenodd",
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
fill: "currentColor"
|
|
21
|
+
d: "M.536.541A1.9 1.9 0 0 0 0 1.848c0 .49.203.959.536 1.306l8.868 8.857-8.868 8.857c-.333.35-.518.815-.518 1.299 0 .486.204.948.555 1.291A1.8 1.8 0 0 0 1.848 24a1.86 1.86 0 0 0 1.311-.52l8.85-8.856 8.85 8.857a1.86 1.86 0 0 0 1.312.519c.48-.006.942-.2 1.275-.541A1.8 1.8 0 0 0 24 22.167c0-.484-.185-.95-.517-1.3l-8.869-8.856 8.869-8.857c.332-.349.517-.815.517-1.299a1.8 1.8 0 0 0-.554-1.291A1.8 1.8 0 0 0 22.17.022a1.86 1.86 0 0 0-1.312.52l-8.85 8.856L3.16.541a1.857 1.857 0 0 0-2.623 0",
|
|
22
|
+
clipRule: "evenodd"
|
|
24
23
|
}));
|
|
25
24
|
});
|
|
26
25
|
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.title-wrapper {
|
|
11
|
+
padding-right: 20px;
|
|
11
12
|
align-items: center;
|
|
12
13
|
border-bottom: 1px solid var(--palette-bg-2);
|
|
13
14
|
display: flex;
|
|
@@ -15,7 +16,11 @@
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.close-wrapper {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
padding: 0 20px;
|
|
21
|
+
min-height: 70px;
|
|
18
22
|
display: flex;
|
|
23
|
+
align-items: center;
|
|
19
24
|
justify-content: flex-end;
|
|
20
25
|
}
|
|
21
26
|
|
package/esm/Modal/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { useRef,
|
|
1
|
+
import React__default, { useRef, useCallback, useEffect } from 'react';
|
|
2
2
|
import classNames from 'classnames/bind';
|
|
3
3
|
import useScrollLock from '../hooks/useScrollLock/index.js';
|
|
4
4
|
import useTrapFocus from '../hooks/useTrapFocus/index.js';
|
|
@@ -19,42 +19,52 @@ var Modal = function Modal(_a) {
|
|
|
19
19
|
var isDesktop = useMediaSizes(function (bp) {
|
|
20
20
|
return bp.up("md");
|
|
21
21
|
});
|
|
22
|
-
var onCloseHandler = useMemo(function () {
|
|
23
|
-
return onClose || function () {
|
|
24
|
-
return {};
|
|
25
|
-
};
|
|
26
|
-
}, [onClose]);
|
|
27
22
|
useScrollLock();
|
|
28
23
|
useTrapFocus(modalRef);
|
|
24
|
+
var handleClose = useCallback(function () {
|
|
25
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
26
|
+
}, [onClose]);
|
|
27
|
+
var handleOverlayClick = useCallback(function (e) {
|
|
28
|
+
if (e.target === e.currentTarget) {
|
|
29
|
+
handleClose();
|
|
30
|
+
}
|
|
31
|
+
}, [handleClose]);
|
|
29
32
|
useEffect(function () {
|
|
30
|
-
var
|
|
31
|
-
if (
|
|
32
|
-
|
|
33
|
+
var handleEscape = function handleEscape(event) {
|
|
34
|
+
if (event.key === "Escape") {
|
|
35
|
+
handleClose();
|
|
36
|
+
}
|
|
33
37
|
};
|
|
34
|
-
document.addEventListener("keydown",
|
|
38
|
+
document.addEventListener("keydown", handleEscape);
|
|
35
39
|
return function () {
|
|
36
|
-
document.removeEventListener("keydown",
|
|
40
|
+
return document.removeEventListener("keydown", handleEscape);
|
|
37
41
|
};
|
|
38
|
-
}, [
|
|
42
|
+
}, [handleClose]);
|
|
39
43
|
return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", {
|
|
40
|
-
className: clx("root")
|
|
44
|
+
className: clx("root"),
|
|
45
|
+
role: "dialog",
|
|
46
|
+
"aria-modal": "true",
|
|
47
|
+
"aria-labelledby": title ? "modal-title" : undefined
|
|
41
48
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
42
49
|
className: clx("modal-overlay"),
|
|
43
|
-
onClick:
|
|
50
|
+
onClick: handleOverlayClick,
|
|
51
|
+
"aria-hidden": "true"
|
|
44
52
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
45
53
|
className: clx("modal-wrapper", {
|
|
46
|
-
"modal-wrapper_desktop": isDesktop
|
|
47
|
-
"modal-wrapper_mobile": !isDesktop
|
|
54
|
+
"modal-wrapper_desktop": isDesktop,
|
|
55
|
+
"modal-wrapper_mobile": !isDesktop
|
|
48
56
|
}, className),
|
|
49
57
|
ref: modalRef
|
|
50
58
|
}, title ? (/*#__PURE__*/React__default.createElement("div", {
|
|
51
59
|
className: clx("title-wrapper")
|
|
52
60
|
}, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(Close, {
|
|
53
|
-
onClick:
|
|
61
|
+
onClick: handleClose,
|
|
62
|
+
"aria-label": "Close modal"
|
|
54
63
|
}))) : (/*#__PURE__*/React__default.createElement("div", {
|
|
55
64
|
className: clx("close-wrapper")
|
|
56
65
|
}, /*#__PURE__*/React__default.createElement(Close, {
|
|
57
|
-
onClick:
|
|
66
|
+
onClick: handleClose,
|
|
67
|
+
"aria-label": "Close modal"
|
|
58
68
|
}))), /*#__PURE__*/React__default.createElement(Content, null, children))));
|
|
59
69
|
};
|
|
60
70
|
|