@reykjavik/hanna-react 0.10.148 → 0.10.150

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/CHANGELOG.md +14 -0
  2. package/InfoBlock.js +1 -1
  3. package/_abstract/_AbstractModal.js +17 -14
  4. package/esm/InfoBlock.js +1 -1
  5. package/esm/_abstract/_AbstractModal.js +17 -14
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.150
8
+
9
+ _2025-05-08_
10
+
11
+ - `InfoBlock`:
12
+ - feat: Suppress rendering empty `div.InfoBlock__items` list element
13
+
14
+ ## 0.10.149
15
+
16
+ _2025-04-02_
17
+
18
+ - `Modal`:
19
+ - perf: Don't render `Modal`s (and their contents) unless "visible"
20
+
7
21
  ## 0.10.148
8
22
 
9
23
  _2025-03-26_
package/InfoBlock.js CHANGED
@@ -9,7 +9,7 @@ const InfoBlock = (props) => {
9
9
  return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('InfoBlock', null, (wrapperProps || {}).className) }),
10
10
  react_1.default.createElement("h2", { className: "InfoBlock__title" }, title),
11
11
  subtitle && react_1.default.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
12
- react_1.default.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),
12
+ items.length > 0 && (react_1.default.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: "InfoBlock__item" }, item))))),
13
13
  'extraInfo' in props && (react_1.default.createElement("div", { className: "InfoBlock__extrainfo" }, props.extraInfo)),
14
14
  'attention' in props && (react_1.default.createElement("div", { className: "InfoBlock__attention" }, props.attention))));
15
15
  };
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/InfoBlock.js CHANGED
@@ -5,7 +5,7 @@ export const InfoBlock = (props) => {
5
5
  return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('InfoBlock', null, (wrapperProps || {}).className) }),
6
6
  React.createElement("h2", { className: "InfoBlock__title" }, title),
7
7
  subtitle && React.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
8
- React.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),
8
+ items.length > 0 && (React.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "InfoBlock__item" }, item))))),
9
9
  'extraInfo' in props && (React.createElement("div", { className: "InfoBlock__extrainfo" }, props.extraInfo)),
10
10
  'attention' in props && (React.createElement("div", { className: "InfoBlock__attention" }, props.attention))));
11
11
  };
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.148",
3
+ "version": "0.10.150",
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.18",
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",