@reykjavik/hanna-react 0.10.147 → 0.10.149

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 (6) hide show
  1. package/BreadCrumbs.js +1 -1
  2. package/CHANGELOG.md +13 -0
  3. package/_abstract/_AbstractModal.js +17 -14
  4. package/esm/BreadCrumbs.js +1 -1
  5. package/esm/_abstract/_AbstractModal.js +17 -14
  6. package/package.json +3 -3
package/BreadCrumbs.js CHANGED
@@ -32,7 +32,7 @@ const BreadCrumbs = (props) => {
32
32
  return (react_1.default.createElement(react_1.default.Fragment, { key: i },
33
33
  react_1.default.createElement(BreadCrumbs__item, { link: link }),
34
34
  ' ',
35
- react_1.default.createElement("span", { className: "BreadCrumbs__separator", "aria-label": "" }, ">"),
35
+ react_1.default.createElement("span", { className: "BreadCrumbs__separator", role: "none" }, ">"),
36
36
  ' '));
37
37
  }),
38
38
  react_1.default.createElement(BreadCrumbs__item, { link: current, current: true })));
package/CHANGELOG.md CHANGED
@@ -4,6 +4,19 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.149
8
+
9
+ _2025-04-02_
10
+
11
+ - perf: Don't render `Modal`s (and their contents) unless "visible"
12
+
13
+ ## 0.10.148
14
+
15
+ _2025-03-26_
16
+
17
+ - `BreadCrumbs`:
18
+ - fix: Drop `aria-lebel=""` for `role="none"` on `BreadCrumbs__separator`
19
+
7
20
  ## 0.10.147
8
21
 
9
22
  _2025-02-25_
package/_abstract/_AbstractModal.js CHANGED
@@ -58,9 +58,11 @@ const AbstractModal = (props) => {
58
58
  const domid = wrapperProps.id || privateDomId;
59
59
  const modalElmRef = (0, react_1.useRef)(null);
60
60
  const [open, setOpen] = (0, react_1.useState)(() => !!props.startOpen && openProp);
61
+ const [visible, setVisible] = (0, react_1.useState)(open);
61
62
  const openModal = () => {
62
63
  if (!open) {
63
64
  addToModalStack(privateDomId);
65
+ setVisible(true);
64
66
  setTimeout(() => {
65
67
  setOpen(true);
66
68
  (0, focusElm_1.focusElm)(modalElmRef.current, { delay: 50 });
@@ -73,7 +75,10 @@ const AbstractModal = (props) => {
73
75
  setOpen(false);
74
76
  removeFromModalStack(privateDomId);
75
77
  props.onClose && props.onClose();
76
- setTimeout(props.onClosed, closeDelay);
78
+ setTimeout(() => {
79
+ setVisible(false);
80
+ props.onClosed();
81
+ }, closeDelay);
77
82
  }
78
83
  };
79
84
  // ---
@@ -113,20 +118,18 @@ const AbstractModal = (props) => {
113
118
  }, [] // eslint-disable-line react-hooks/exhaustive-deps
114
119
  );
115
120
  const PortalOrFragment = props.portal !== false ? _Portal_js_1.Portal : react_1.Fragment;
116
- const children = props.render ? props.render({ closeModal }) : props.children;
117
121
  const closeButtonLabel = txt.closeButtonLabel || txt.closeButton;
118
122
  const { onClick, className } = wrapperProps;
119
- return (react_1.default.createElement(PortalOrFragment, null,
120
- react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
121
- ? (e) => {
122
- closeOnCurtainClick(e);
123
- onClick(e);
124
- }
125
- : closeOnCurtainClick || onClick, id: domid }),
126
- isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
127
- react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
128
- children,
129
- isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
130
- isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null))));
123
+ return (react_1.default.createElement(PortalOrFragment, null, visible && (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
124
+ ? (e) => {
125
+ closeOnCurtainClick(e);
126
+ onClick(e);
127
+ }
128
+ : closeOnCurtainClick || onClick, id: domid }),
129
+ isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
130
+ react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
131
+ props.render ? props.render({ closeModal }) : props.children,
132
+ isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
133
+ isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null)))));
131
134
  };
132
135
  exports.AbstractModal = AbstractModal;
package/esm/BreadCrumbs.js CHANGED
@@ -28,7 +28,7 @@ export const BreadCrumbs = (props) => {
28
28
  return (React.createElement(React.Fragment, { key: i },
29
29
  React.createElement(BreadCrumbs__item, { link: link }),
30
30
  ' ',
31
- React.createElement("span", { className: "BreadCrumbs__separator", "aria-label": "" }, ">"),
31
+ React.createElement("span", { className: "BreadCrumbs__separator", role: "none" }, ">"),
32
32
  ' '));
33
33
  }),
34
34
  React.createElement(BreadCrumbs__item, { link: current, current: true })));
package/esm/_abstract/_AbstractModal.js CHANGED
@@ -54,9 +54,11 @@ export const AbstractModal = (props) => {
54
54
  const domid = wrapperProps.id || privateDomId;
55
55
  const modalElmRef = useRef(null);
56
56
  const [open, setOpen] = useState(() => !!props.startOpen && openProp);
57
+ const [visible, setVisible] = useState(open);
57
58
  const openModal = () => {
58
59
  if (!open) {
59
60
  addToModalStack(privateDomId);
61
+ setVisible(true);
60
62
  setTimeout(() => {
61
63
  setOpen(true);
62
64
  focusElm(modalElmRef.current, { delay: 50 });
@@ -69,7 +71,10 @@ export const AbstractModal = (props) => {
69
71
  setOpen(false);
70
72
  removeFromModalStack(privateDomId);
71
73
  props.onClose && props.onClose();
72
- setTimeout(props.onClosed, closeDelay);
74
+ setTimeout(() => {
75
+ setVisible(false);
76
+ props.onClosed();
77
+ }, closeDelay);
73
78
  }
74
79
  };
75
80
  // ---
@@ -109,19 +114,17 @@ export const AbstractModal = (props) => {
109
114
  }, [] // eslint-disable-line react-hooks/exhaustive-deps
110
115
  );
111
116
  const PortalOrFragment = props.portal !== false ? Portal : Fragment;
112
- const children = props.render ? props.render({ closeModal }) : props.children;
113
117
  const closeButtonLabel = txt.closeButtonLabel || txt.closeButton;
114
118
  const { onClick, className } = wrapperProps;
115
- return (React.createElement(PortalOrFragment, null,
116
- React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
117
- ? (e) => {
118
- closeOnCurtainClick(e);
119
- onClick(e);
120
- }
121
- : closeOnCurtainClick || onClick, id: domid }),
122
- isBrowser && React.createElement(FocusTrap, { atTop: true }),
123
- React.createElement("div", { className: modifiedClass(bem, modifier), ref: modalElmRef },
124
- children,
125
- isBrowser && !props.noCloseButton && (React.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
126
- isBrowser && React.createElement(FocusTrap, null))));
119
+ return (React.createElement(PortalOrFragment, null, visible && (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
120
+ ? (e) => {
121
+ closeOnCurtainClick(e);
122
+ onClick(e);
123
+ }
124
+ : closeOnCurtainClick || onClick, id: domid }),
125
+ isBrowser && React.createElement(FocusTrap, { atTop: true }),
126
+ React.createElement("div", { className: modifiedClass(bem, modifier), ref: modalElmRef },
127
+ props.render ? props.render({ closeModal }) : props.children,
128
+ isBrowser && !props.noCloseButton && (React.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
129
+ isBrowser && React.createElement(FocusTrap, null)))));
127
130
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.147",
3
+ "version": "0.10.149",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
17
17
  "@floating-ui/react": "^0.19.2",
18
18
  "@hugsmidjan/qj": "^4.22.1",
19
19
  "@hugsmidjan/react": "^0.4.32",
20
- "@reykjavik/hanna-css": "^0.4.16",
21
- "@reykjavik/hanna-utils": "^0.2.19",
20
+ "@reykjavik/hanna-css": "^0.4.17",
21
+ "@reykjavik/hanna-utils": "^0.2.20",
22
22
  "@types/react-autosuggest": "^10.1.0",
23
23
  "@types/react-datepicker": "^4.8.0",
24
24
  "@types/react-transition-group": "^4.4.0",