@reykjavik/hanna-react 0.10.133 → 0.10.134

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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/MainMenu.js +4 -1
  3. package/MainMenu2.d.ts +3 -2
  4. package/MainMenu2.js +17 -7
  5. package/esm/MainMenu.js +4 -1
  6. package/esm/MainMenu2.d.ts +3 -2
  7. package/esm/MainMenu2.js +17 -7
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,18 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.134
8
+
9
+ _2024-08-19_
10
+
11
+ - `MainÞMenu2`:
12
+ - feat: Pass `openMenu()` prop to `MainMenu2CustomItem` callbacks
13
+ - feat: Allow rich-text (JSX) `label`s for menu items
14
+ - feat: Allow `icon` prop on related items
15
+ - fix: links with empty-string `href` not rendered server-side
16
+ - `MainMenu`:
17
+ - fix: Unnecessary scroll-reset when resizing window to enter hamburger-mode
18
+
7
19
  ## 0.10.133
8
20
 
9
21
  _2024-08-08_
package/MainMenu.js CHANGED
@@ -108,8 +108,11 @@ const _MainMenu = (props) => {
108
108
  const htmlElmDataset = htmlElm.dataset;
109
109
  // const menuElm = menuElmRef.current as HTMLElement;
110
110
  _setActivePanel((activePanel) => {
111
+ if (!newActive && !activePanel) {
112
+ return undefined;
113
+ }
111
114
  if (!newActive) {
112
- activePanel && setLaggyActivePanel(activePanel, 1000);
115
+ setLaggyActivePanel(activePanel, 1000);
113
116
  htmlElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
114
117
  delete htmlElmDataset.scrollTop;
115
118
  delete htmlElmDataset.megaPanelActive;
package/MainMenu2.d.ts CHANGED
@@ -16,7 +16,7 @@ export type MainMenu2I18n = {
16
16
  export declare const defaultMainMenu2Texts: DefaultTexts<MainMenu2I18n>;
17
17
  export type MainMenu2Item = {
18
18
  /** Visible label text */
19
- label: string;
19
+ label: string | NonNullable<ReactElement>;
20
20
  /** Un-abbreviated label set as `title=""` and `aria-label=""` */
21
21
  labelLong?: string;
22
22
  /** Language of the link label */
@@ -57,6 +57,7 @@ export type MainMenu2ButtonItem = MainMenu2Item & {
57
57
  };
58
58
  export type MainMenu2CustomItem = (props: {
59
59
  closeMenu: () => void;
60
+ openMenu: () => void;
60
61
  }) => ReactElement;
61
62
  export type MainMenu2SubMenuItem = MainMenu2Item & {
62
63
  descr?: string;
@@ -98,7 +99,7 @@ export type MainMenu2Props = {
98
99
  hot?: MainMenu2ButtonItemList;
99
100
  extra?: MainMenu2ButtonItemList;
100
101
  relatedTitle?: string;
101
- related?: MainMenu2ItemList;
102
+ related?: MainMenu2ButtonItemList;
102
103
  };
103
104
  /**
104
105
  * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
package/MainMenu2.js CHANGED
@@ -62,13 +62,13 @@ const iconMap = {
62
62
  * Whether we're rendering the menu on the server or in the browser, etc.
63
63
  */
64
64
  const getRenderers = (props) => {
65
- const { onItemClick, closeMenu, isBrowser } = props;
65
+ const { onItemClick, closeMenu, openMenu, isBrowser } = props;
66
66
  const renderItem = (classPrefix, item, opts = {}) => {
67
67
  const { key, Tag = 'li', button } = opts;
68
68
  if (typeof item === 'function') {
69
69
  const Item = item;
70
70
  return (react_1.default.createElement("li", { key: key, className: `${classPrefix}item` },
71
- react_1.default.createElement(Item, { closeMenu: closeMenu })));
71
+ react_1.default.createElement(Item, { closeMenu: closeMenu, openMenu: openMenu })));
72
72
  }
73
73
  const linkClassName = `${classPrefix}link`;
74
74
  const { label, labelLong, href, target, lang, controlsId, onClick, descr, icon } = item;
@@ -77,23 +77,32 @@ const getRenderers = (props) => {
77
77
  react_1.default.createElement("small", { className: `${linkClassName}__descr` }, descr)));
78
78
  const ButtonTag = button ? ButtonSecondary_js_1.default : 'button';
79
79
  const LinkTag = button ? ButtonSecondary_js_1.default : _Link_js_1.Link;
80
+ const commonProps = {
81
+ className: linkClassName,
82
+ 'data-icon': icon ? iconMap[icon] : undefined,
83
+ 'arial-label': labelLong,
84
+ title: labelLong,
85
+ lang,
86
+ };
80
87
  const buttonCompProps = button
81
88
  ? {
82
89
  size: 'small',
83
- 'data-icon': icon && iconMap[icon],
84
90
  }
85
91
  : undefined;
86
- return (react_1.default.createElement(Tag, { key: key, className: (0, classUtils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || !href) ? (react_1.default.createElement(ButtonTag, Object.assign({ className: linkClassName, type: "button", onClick: () => {
92
+ if (label === 'Græna planið') {
93
+ console.log('FOOBAR', icon, icon && iconMap[icon]);
94
+ }
95
+ return (react_1.default.createElement(Tag, { key: key, className: (0, classUtils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
87
96
  const keepOpen1 = onClick && onClick(item) === false;
88
97
  const keepOpen2 = onItemClick && onItemClick(item) === false;
89
98
  !(keepOpen1 || keepOpen2) && closeMenu();
90
- }, "aria-controls": controlsId, "aria-label": labelLong, title: labelLong, lang: lang }, buttonCompProps),
99
+ } }, buttonCompProps),
91
100
  label,
92
101
  " ",
93
- itemDescr)) : href ? (react_1.default.createElement(LinkTag, Object.assign({ className: linkClassName, href: href, target: target, "aria-label": labelLong, title: labelLong, onClick: () => {
102
+ itemDescr)) : href != null ? (react_1.default.createElement(LinkTag, Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: target, onClick: () => {
94
103
  const keepOpen = onItemClick && onItemClick(item) === false;
95
104
  !keepOpen && closeMenu();
96
- }, lang: lang, hrefLang: item.hrefLang }, buttonCompProps),
105
+ } }, buttonCompProps),
97
106
  label,
98
107
  " ",
99
108
  itemDescr)) : null));
@@ -181,6 +190,7 @@ const MainMenu2 = (props) => {
181
190
  const { renderItem, renderList } = getRenderers({
182
191
  onItemClick,
183
192
  closeMenu,
193
+ openMenu,
184
194
  isBrowser,
185
195
  });
186
196
  const homeLinkItem = Object.assign(Object.assign({}, (typeof homeLink === 'string'
package/esm/MainMenu.js CHANGED
@@ -104,8 +104,11 @@ export const _MainMenu = (props) => {
104
104
  const htmlElmDataset = htmlElm.dataset;
105
105
  // const menuElm = menuElmRef.current as HTMLElement;
106
106
  _setActivePanel((activePanel) => {
107
+ if (!newActive && !activePanel) {
108
+ return undefined;
109
+ }
107
110
  if (!newActive) {
108
- activePanel && setLaggyActivePanel(activePanel, 1000);
111
+ setLaggyActivePanel(activePanel, 1000);
109
112
  htmlElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
110
113
  delete htmlElmDataset.scrollTop;
111
114
  delete htmlElmDataset.megaPanelActive;
package/esm/MainMenu2.d.ts CHANGED
@@ -16,7 +16,7 @@ export type MainMenu2I18n = {
16
16
  export declare const defaultMainMenu2Texts: DefaultTexts<MainMenu2I18n>;
17
17
  export type MainMenu2Item = {
18
18
  /** Visible label text */
19
- label: string;
19
+ label: string | NonNullable<ReactElement>;
20
20
  /** Un-abbreviated label set as `title=""` and `aria-label=""` */
21
21
  labelLong?: string;
22
22
  /** Language of the link label */
@@ -57,6 +57,7 @@ export type MainMenu2ButtonItem = MainMenu2Item & {
57
57
  };
58
58
  export type MainMenu2CustomItem = (props: {
59
59
  closeMenu: () => void;
60
+ openMenu: () => void;
60
61
  }) => ReactElement;
61
62
  export type MainMenu2SubMenuItem = MainMenu2Item & {
62
63
  descr?: string;
@@ -98,7 +99,7 @@ export type MainMenu2Props = {
98
99
  hot?: MainMenu2ButtonItemList;
99
100
  extra?: MainMenu2ButtonItemList;
100
101
  relatedTitle?: string;
101
- related?: MainMenu2ItemList;
102
+ related?: MainMenu2ButtonItemList;
102
103
  };
103
104
  /**
104
105
  * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
package/esm/MainMenu2.js CHANGED
@@ -58,13 +58,13 @@ const iconMap = {
58
58
  * Whether we're rendering the menu on the server or in the browser, etc.
59
59
  */
60
60
  const getRenderers = (props) => {
61
- const { onItemClick, closeMenu, isBrowser } = props;
61
+ const { onItemClick, closeMenu, openMenu, isBrowser } = props;
62
62
  const renderItem = (classPrefix, item, opts = {}) => {
63
63
  const { key, Tag = 'li', button } = opts;
64
64
  if (typeof item === 'function') {
65
65
  const Item = item;
66
66
  return (React.createElement("li", { key: key, className: `${classPrefix}item` },
67
- React.createElement(Item, { closeMenu: closeMenu })));
67
+ React.createElement(Item, { closeMenu: closeMenu, openMenu: openMenu })));
68
68
  }
69
69
  const linkClassName = `${classPrefix}link`;
70
70
  const { label, labelLong, href, target, lang, controlsId, onClick, descr, icon } = item;
@@ -73,23 +73,32 @@ const getRenderers = (props) => {
73
73
  React.createElement("small", { className: `${linkClassName}__descr` }, descr)));
74
74
  const ButtonTag = button ? ButtonSecondary : 'button';
75
75
  const LinkTag = button ? ButtonSecondary : Link;
76
+ const commonProps = {
77
+ className: linkClassName,
78
+ 'data-icon': icon ? iconMap[icon] : undefined,
79
+ 'arial-label': labelLong,
80
+ title: labelLong,
81
+ lang,
82
+ };
76
83
  const buttonCompProps = button
77
84
  ? {
78
85
  size: 'small',
79
- 'data-icon': icon && iconMap[icon],
80
86
  }
81
87
  : undefined;
82
- return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || !href) ? (React.createElement(ButtonTag, Object.assign({ className: linkClassName, type: "button", onClick: () => {
88
+ if (label === 'Græna planið') {
89
+ console.log('FOOBAR', icon, icon && iconMap[icon]);
90
+ }
91
+ return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
83
92
  const keepOpen1 = onClick && onClick(item) === false;
84
93
  const keepOpen2 = onItemClick && onItemClick(item) === false;
85
94
  !(keepOpen1 || keepOpen2) && closeMenu();
86
- }, "aria-controls": controlsId, "aria-label": labelLong, title: labelLong, lang: lang }, buttonCompProps),
95
+ } }, buttonCompProps),
87
96
  label,
88
97
  " ",
89
- itemDescr)) : href ? (React.createElement(LinkTag, Object.assign({ className: linkClassName, href: href, target: target, "aria-label": labelLong, title: labelLong, onClick: () => {
98
+ itemDescr)) : href != null ? (React.createElement(LinkTag, Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: target, onClick: () => {
90
99
  const keepOpen = onItemClick && onItemClick(item) === false;
91
100
  !keepOpen && closeMenu();
92
- }, lang: lang, hrefLang: item.hrefLang }, buttonCompProps),
101
+ } }, buttonCompProps),
93
102
  label,
94
103
  " ",
95
104
  itemDescr)) : null));
@@ -177,6 +186,7 @@ export const MainMenu2 = (props) => {
177
186
  const { renderItem, renderList } = getRenderers({
178
187
  onItemClick,
179
188
  closeMenu,
189
+ openMenu,
180
190
  isBrowser,
181
191
  });
182
192
  const homeLinkItem = Object.assign(Object.assign({}, (typeof homeLink === 'string'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.133",
3
+ "version": "0.10.134",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",