colibri-ui 0.8.24 → 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.
Files changed (9) hide show
  1. package/Icons/Close.js +4 -5
  2. package/Modal/Modal.module.css +5 -0
  3. package/Modal/components/Close/Close.module.css +0 -1
  4. package/Modal/index.js +27 -17
  5. package/esm/Icons/Close.js +4 -5
  6. package/esm/Modal/Modal.module.css +5 -0
  7. package/esm/Modal/components/Close/Close.module.css +0 -1
  8. package/esm/Modal/index.js +28 -18
  9. package/package.json +1 -1
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
- viewBox: "0 0 12 12"
25
+ fill: "none"
27
26
  }), /*#__PURE__*/React__default.default.createElement("path", {
27
+ fill: "currentColor",
28
28
  fillRule: "evenodd",
29
- clipRule: "evenodd",
30
- d: "M3.14645 3.14645C3.34171 2.95118 3.65829 2.95118 3.85355 3.14645L6 5.29289L8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645C9.04882 3.34171 9.04882 3.65829 8.85355 3.85355L6.70711 6L8.85355 8.14645C9.04882 8.34171 9.04882 8.65829 8.85355 8.85355C8.65829 9.04882 8.34171 9.04882 8.14645 8.85355L6 6.70711L3.85355 8.85355C3.65829 9.04882 3.34171 9.04882 3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645L5.29289 6L3.14645 3.85355C2.95118 3.65829 2.95118 3.34171 3.14645 3.14645Z",
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/components/Close/Close.module.css CHANGED
@@ -1,4 +1,3 @@
1
1
  .close {
2
2
  cursor: pointer;
3
- margin-right: 16px;
4
3
  }
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 onEsc = function onEsc(e) {
41
- if (!modalRef.current || e.code !== "Escape") return;
42
- onCloseHandler();
43
+ var handleEscape = function handleEscape(event) {
44
+ if (event.key === "Escape") {
45
+ handleClose();
46
+ }
43
47
  };
44
- document.addEventListener("keydown", onEsc);
48
+ document.addEventListener("keydown", handleEscape);
45
49
  return function () {
46
- document.removeEventListener("keydown", onEsc);
50
+ return document.removeEventListener("keydown", handleEscape);
47
51
  };
48
- }, [onCloseHandler]);
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: onCloseHandler
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 ? 1 : 0,
57
- "modal-wrapper_mobile": !isDesktop ? 1 : 0
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: onCloseHandler
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: onCloseHandler
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/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
- viewBox: "0 0 12 12"
17
+ fill: "none"
19
18
  }), /*#__PURE__*/React__default.createElement("path", {
19
+ fill: "currentColor",
20
20
  fillRule: "evenodd",
21
- clipRule: "evenodd",
22
- d: "M3.14645 3.14645C3.34171 2.95118 3.65829 2.95118 3.85355 3.14645L6 5.29289L8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645C9.04882 3.34171 9.04882 3.65829 8.85355 3.85355L6.70711 6L8.85355 8.14645C9.04882 8.34171 9.04882 8.65829 8.85355 8.85355C8.65829 9.04882 8.34171 9.04882 8.14645 8.85355L6 6.70711L3.85355 8.85355C3.65829 9.04882 3.34171 9.04882 3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645L5.29289 6L3.14645 3.85355C2.95118 3.65829 2.95118 3.34171 3.14645 3.14645Z",
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
 
package/esm/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/esm/Modal/components/Close/Close.module.css CHANGED
@@ -1,4 +1,3 @@
1
1
  .close {
2
2
  cursor: pointer;
3
- margin-right: 16px;
4
3
  }
package/esm/Modal/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { useRef, useMemo, useEffect } from 'react';
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 onEsc = function onEsc(e) {
31
- if (!modalRef.current || e.code !== "Escape") return;
32
- onCloseHandler();
33
+ var handleEscape = function handleEscape(event) {
34
+ if (event.key === "Escape") {
35
+ handleClose();
36
+ }
33
37
  };
34
- document.addEventListener("keydown", onEsc);
38
+ document.addEventListener("keydown", handleEscape);
35
39
  return function () {
36
- document.removeEventListener("keydown", onEsc);
40
+ return document.removeEventListener("keydown", handleEscape);
37
41
  };
38
- }, [onCloseHandler]);
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: onCloseHandler
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 ? 1 : 0,
47
- "modal-wrapper_mobile": !isDesktop ? 1 : 0
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: onCloseHandler
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: onCloseHandler
66
+ onClick: handleClose,
67
+ "aria-label": "Close modal"
58
68
  }))), /*#__PURE__*/React__default.createElement(Content, null, children))));
59
69
  };
60
70
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.24",
3
+ "version": "0.8.25",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},