@reykjavik/hanna-react 0.10.116 → 0.10.117

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.117
+
+_2024-01-26_
+
+- feat: Add compnent `IframeedLayout`
+- feat: Default to auto-activating the first `MainMenu2__main__item`
+- fix: Remove leftover `data-icon` attribute off `MainMenu2`'s SSR toggler
+
 ## 0.10.116
 
 _2024-01-10_

package/IframedLayout.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import type { HannaColorTheme } from '@reykjavik/hanna-css';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
+import { BemModifierProps } from './utils/types.js';
+import { WrapperElmProps } from './utils.js';
+export type IframedLayoutProps = {
+    children: ReactNode;
+    colorTheme?: HannaColorTheme;
+    lang?: HannaLang;
+} & WrapperElmProps<'div', 'data-color-theme'> & BemModifierProps;
+export declare const IframedLayout: (props: IframedLayoutProps) => JSX.Element;

package/IframedLayout.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframedLayout = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const utils_js_1 = require("./utils.js");
+const IframedLayout = (props) => {
+    (0, utils_js_1.useScrollbarWidthCSSVar)();
+    const { colorTheme, children, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('IframedLayout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }), children));
+};
+exports.IframedLayout = IframedLayout;

package/Layout.d.ts

@@ -14,7 +14,7 @@ export type LayoutI18n = {
     lang?: string;
 };
 export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
-type LayoutProps = {
+export type LayoutProps = {
     globalAlerts?: ReactNode;
     navChildren?: ReactNode;
     footerChildren?: ReactNode;
@@ -25,7 +25,7 @@ type LayoutProps = {
     lang?: HannaLang;
     /** @deprecated Not used (Will be removed in v0.11) */
     ssr?: SSRSupport;
-} & WrapperElmProps & BemModifierProps & EitherObj<{
+} & WrapperElmProps<'div', 'data-color-theme'> & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {
     children: ReactNode;

package/MainMenu2.js

@@ -45,14 +45,6 @@ exports.defaultMainMenu2Texts = {
         closeMenu: 'Zamknij',
         closeMenuLong: 'Zamknij menu główne',
     },
-    se: {
-        title: 'Huvudmeny',
-        homeLink: 'Förstasida',
-        openMenu: 'Meny',
-        openMenuLong: 'Öppna huvudmenyn',
-        closeMenu: 'Stäng',
-        closeMenuLong: 'Stäng huvudmenyn',
-    },
 };
 // ---------------------------------------------------------------------------
 const iconMap = {
@@ -165,7 +157,13 @@ const MainMenu2 = (props) => {
             const current = (_a = item.subItems.find((subItem) => 'current' in subItem && !!subItem.current)) === null || _a === void 0 ? void 0 : _a.current;
             return Object.assign(Object.assign({}, item), { current });
         });
-        const defaultActive = mainItems.findIndex((item) => 'current' in item && item.current);
+        let defaultActive = mainItems.findIndex((item) => 'current' in item && item.current);
+        // Fall back to setting the first item as active, if the first item
+        // has subItems.  If the first item is just a link/button, then we
+        // just render everything equally not active.
+        if (defaultActive < 0 && 'subItems' in (mainItems[0] || {})) {
+            defaultActive = 0;
+        }
         return { mainItems, defaultActive };
     }, [items.main]);
     const [activeSubmenu, setActiveSubmenu] = (0, react_1.useState)(defaultActive);
@@ -206,7 +204,7 @@ const MainMenu2 = (props) => {
                     'aria-label': txt.openMenuLong,
                     title: txt.openMenuLong,
                     children: txt.openMenu,
-                })))) : (react_1.default.createElement(ButtonPrimary_js_1.default, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-hidden": "true", "data-icon": "text" }, txt.title)),
+                })))) : (react_1.default.createElement(ButtonPrimary_js_1.default, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-hidden": "true" }, txt.title)),
             mainItems && (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
                 renderItem('MainMenu2__main__', homeLinkItem, { Tag: 'div' }),
                 mainItems.map((mainItem, i) => {

package/Tooltip.js

@@ -19,7 +19,6 @@ const Tooltip = (props) => {
     });
     const { arrow } = middlewareData;
     const arrowX = arrow === null || arrow === void 0 ? void 0 : arrow.x;
-    const arrowY = arrow === null || arrow === void 0 ? void 0 : arrow.y;
     (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(() => {
         setIsOpen(false);
     });
@@ -67,7 +66,7 @@ const Tooltip = (props) => {
             (_a = wrapperProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
         }, style: x == null
             ? wrapperProps.style
-            : Object.assign(Object.assign({}, wrapperProps.style), { '--tooltip-content-pos-y': `${y}px`, '--tooltip-content-pos-x': `${x}px`, '--tooltip-arrow-pos-x': `${arrowX}px`, '--tooltip-arrow-pos-y': `${arrowY}px` }) }),
+            : Object.assign(Object.assign({}, wrapperProps.style), { '--tooltip-content-pos-y': `${y}px`, '--tooltip-content-pos-x': `${x}px`, '--tooltip-arrow-pos-x': `${arrowX}px` }) }),
         react_1.default.createElement("summary", { className: (0, classUtils_1.modifiedClass)('Tooltip__trigger', iconOnly && 'icononly'), ref: refs.setReference }, label),
         react_1.default.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: refs.setFloating },
             x !== null && (react_1.default.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),

package/esm/IframedLayout.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import type { HannaColorTheme } from '@reykjavik/hanna-css';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
+import { BemModifierProps } from './utils/types.js';
+import { WrapperElmProps } from './utils.js';
+export type IframedLayoutProps = {
+    children: ReactNode;
+    colorTheme?: HannaColorTheme;
+    lang?: HannaLang;
+} & WrapperElmProps<'div', 'data-color-theme'> & BemModifierProps;
+export declare const IframedLayout: (props: IframedLayoutProps) => JSX.Element;

package/esm/IframedLayout.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { useScrollbarWidthCSSVar } from './utils.js';
+export const IframedLayout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { colorTheme, children, wrapperProps } = props;
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('IframedLayout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }), children));
+};

package/esm/Layout.d.ts

@@ -14,7 +14,7 @@ export type LayoutI18n = {
     lang?: string;
 };
 export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
-type LayoutProps = {
+export type LayoutProps = {
     globalAlerts?: ReactNode;
     navChildren?: ReactNode;
     footerChildren?: ReactNode;
@@ -25,7 +25,7 @@ type LayoutProps = {
     lang?: HannaLang;
     /** @deprecated Not used (Will be removed in v0.11) */
     ssr?: SSRSupport;
-} & WrapperElmProps & BemModifierProps & EitherObj<{
+} & WrapperElmProps<'div', 'data-color-theme'> & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {
     children: ReactNode;

package/esm/MainMenu2.js

@@ -41,14 +41,6 @@ export const defaultMainMenu2Texts = {
         closeMenu: 'Zamknij',
         closeMenuLong: 'Zamknij menu główne',
     },
-    se: {
-        title: 'Huvudmeny',
-        homeLink: 'Förstasida',
-        openMenu: 'Meny',
-        openMenuLong: 'Öppna huvudmenyn',
-        closeMenu: 'Stäng',
-        closeMenuLong: 'Stäng huvudmenyn',
-    },
 };
 // ---------------------------------------------------------------------------
 const iconMap = {
@@ -161,7 +153,13 @@ export const MainMenu2 = (props) => {
             const current = (_a = item.subItems.find((subItem) => 'current' in subItem && !!subItem.current)) === null || _a === void 0 ? void 0 : _a.current;
             return Object.assign(Object.assign({}, item), { current });
         });
-        const defaultActive = mainItems.findIndex((item) => 'current' in item && item.current);
+        let defaultActive = mainItems.findIndex((item) => 'current' in item && item.current);
+        // Fall back to setting the first item as active, if the first item
+        // has subItems.  If the first item is just a link/button, then we
+        // just render everything equally not active.
+        if (defaultActive < 0 && 'subItems' in (mainItems[0] || {})) {
+            defaultActive = 0;
+        }
         return { mainItems, defaultActive };
     }, [items.main]);
     const [activeSubmenu, setActiveSubmenu] = useState(defaultActive);
@@ -202,7 +200,7 @@ export const MainMenu2 = (props) => {
                     'aria-label': txt.openMenuLong,
                     title: txt.openMenuLong,
                     children: txt.openMenu,
-                })))) : (React.createElement(ButtonPrimary, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: handleAnchorLinkClick, "aria-hidden": "true", "data-icon": "text" }, txt.title)),
+                })))) : (React.createElement(ButtonPrimary, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: handleAnchorLinkClick, "aria-hidden": "true" }, txt.title)),
             mainItems && (React.createElement("div", { className: modifiedClass('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
                 renderItem('MainMenu2__main__', homeLinkItem, { Tag: 'div' }),
                 mainItems.map((mainItem, i) => {

package/esm/Tooltip.js

@@ -15,7 +15,6 @@ export const Tooltip = (props) => {
     });
     const { arrow } = middlewareData;
     const arrowX = arrow === null || arrow === void 0 ? void 0 : arrow.x;
-    const arrowY = arrow === null || arrow === void 0 ? void 0 : arrow.y;
     useCallbackOnEsc(() => {
         setIsOpen(false);
     });
@@ -63,7 +62,7 @@ export const Tooltip = (props) => {
             (_a = wrapperProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
         }, style: x == null
             ? wrapperProps.style
-            : Object.assign(Object.assign({}, wrapperProps.style), { '--tooltip-content-pos-y': `${y}px`, '--tooltip-content-pos-x': `${x}px`, '--tooltip-arrow-pos-x': `${arrowX}px`, '--tooltip-arrow-pos-y': `${arrowY}px` }) }),
+            : Object.assign(Object.assign({}, wrapperProps.style), { '--tooltip-content-pos-y': `${y}px`, '--tooltip-content-pos-x': `${x}px`, '--tooltip-arrow-pos-x': `${arrowX}px` }) }),
         React.createElement("summary", { className: modifiedClass('Tooltip__trigger', iconOnly && 'icononly'), ref: refs.setReference }, label),
         React.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: refs.setFloating },
             x !== null && (React.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),

package/esm/index.d.ts

@@ -54,6 +54,7 @@
 /// <reference path="./InfoBlock.d.tsx" />
 /// <reference path="./ImageCards.d.tsx" />
 /// <reference path="./Illustration.d.tsx" />
+/// <reference path="./IframedLayout.d.tsx" />
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />

package/index.d.ts

@@ -54,6 +54,7 @@
 /// <reference path="./InfoBlock.d.tsx" />
 /// <reference path="./ImageCards.d.tsx" />
 /// <reference path="./Illustration.d.tsx" />
+/// <reference path="./IframedLayout.d.tsx" />
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.116",
+	"version": "0.10.117",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.12",
-		"@reykjavik/hanna-utils": "^0.2.13",
+		"@reykjavik/hanna-css": "^0.4.14",
+		"@reykjavik/hanna-utils": "^0.2.14",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",
@@ -269,6 +269,10 @@
 			"import": "./esm/Illustration.js",
 			"require": "./Illustration.js"
 		},
+		"./IframedLayout": {
+			"import": "./esm/IframedLayout.js",
+			"require": "./IframedLayout.js"
+		},
 		"./IframeBlock": {
 			"import": "./esm/IframeBlock.js",
 			"require": "./IframeBlock.js"