@reykjavik/hanna-react 0.10.80 → 0.10.82

package/CHANGELOG.md

@@ -4,6 +4,26 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.82
+
+_2023-03-03_
+
+- `MainMenu`:
+  - feat: Add prop `homeLink` to `MainMenuProps` for convenience
+  - feat: Add built-in support for Polish language to `MainMenu`
+  - feat: Add optional `homeLink` prop to `MainMenuI18n`
+- feat: Convert newlines in `ContactBubbleItem.extraLabel` into `<br/>`s
+- fix: Remove `role="group"` off all Checkbox and Radio Group containers
+
+## 0.10.81
+
+_2023-02-16_
+
+- feat: Add component `Tooltip`
+- fix(ts): Make `MainMenu` onClick handlers return `void`, not `undefined`
+- fix: Suppress accidental dev-mode warnings for
+  `CheckboxButton`/`RadioButtonGroup`s
+
 ## 0.10.80
 
 _2023-02-08_

package/ContactBubble.js

@@ -9,6 +9,7 @@ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/g
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_1 = require("./_abstract/_Link");
+const breakOnNL_1 = require("./_abstract/breakOnNL");
 const utils_1 = require("./utils");
 exports.defaultTexts = {
     is: {
@@ -141,7 +142,7 @@ const ContactBubble = (props) => {
                 ' ',
                 label,
                 '\n',
-                extraLabel && react_1.default.createElement("small", { key: "\uD83E\uDD21" }, extraLabel),
+                extraLabel && react_1.default.createElement("small", { key: "\uD83E\uDD21" }, (0, breakOnNL_1.breakOnNL)(extraLabel)),
                 '\n',
             ];
             return (react_1.default.createElement("li", { key: i, className: itemClass }, href && href !== '#' ? (react_1.default.createElement(_Link_1.Link, { className: "ContactBubble__link", href: href, onClick: onClickHandler, target: target }, content)) : (react_1.default.createElement("button", { className: "ContactBubble__link", onClick: onClickHandler, type: "button" }, content))));

package/FormField.js

@@ -76,7 +76,7 @@ const FormField = (props) => {
             isBrowser && empty && 'empty',
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
-        ], className), role: group ? 'group' : undefined, ref: props.wrapperRef },
+        ], className), ref: props.wrapperRef },
         LabelTag ? (react_1.default.createElement(LabelTag, { className: "FormField__label", id: labelId },
             ' ',
             reqStar,

package/MainMenu/_Auxiliary.d.ts

@@ -1,4 +1,4 @@
-import type { MegaMenuPanel } from '../MainMenu';
+import { MegaMenuPanel } from './_PrimaryPanel';
 export type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
 export type AuxiliaryPanelProps = MegaMenuPanel & {
     image?: AuxilaryPanelIllustration;

package/MainMenu/_PrimaryPanel.d.ts

@@ -1,11 +1,27 @@
 import { RefObject } from 'react';
-import { MainMenuI18n, MegaMenuPanel } from '../MainMenu';
+export type PrimaryPanelI18n = {
+    backToMenu: string;
+    backToMenuLong?: string;
+};
+export type MegaMenuItem = {
+    label: string;
+    summary?: string;
+    href: string;
+    lang?: string;
+    current?: boolean;
+    target?: string;
+};
+export type MegaMenuPanel = {
+    title: string;
+    items: Array<MegaMenuItem>;
+    id: string;
+};
 type PrimaryPanelProps = {
     setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
     isParent?: boolean;
     isActive?: boolean;
     panel: MegaMenuPanel;
-    texts: MainMenuI18n;
+    texts: PrimaryPanelI18n;
     activeRef: RefObject<HTMLLIElement>;
     isBrowser: true | undefined;
 };

package/MainMenu.d.ts

@@ -1,17 +1,27 @@
+import { Cleanup } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary';
+import { MegaMenuItem, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel';
 import { SSRSupport } from './utils';
-export type MainMenuI18n = {
+export type MainMenuI18n = Cleanup<{
     lang?: string;
-    backToMenu: string;
-    backToMenuLong?: string;
-};
-export declare const defaultMainMenuTexts: DefaultTexts<MainMenuI18n>;
-export type { AuxilaryPanelIllustration, AuxiliaryPanelProps };
+    homeLabel?: string;
+} & PrimaryPanelI18n>;
+export declare const defaultMainMenuTexts: DefaultTexts<Required<MainMenuI18n>>;
+export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuPanel, };
 export type MainMenuItem = {
     label: string;
     labelLong?: string;
     lang?: string;
+    /**
+     * Puts a modifier className on the menu item element.
+     *
+     * Example:
+     *
+     * ```html
+     * <li class="MainMenu__item MainMenu__item--${modifier}">
+     * ```
+     * */
     modifier?: string;
     current?: boolean;
     href?: string;
@@ -22,27 +32,19 @@ export type MainMenuItem = {
      * "Hamburger menu" (a.k.a. "Mobile menu")
      * … unless the `onClick` function explicitly returns `false`.
      */
-    onClick?: (index: number, item: MainMenuItem) => undefined | boolean;
+    onClick?: (index: number, item: MainMenuItem) => void | boolean;
     controlsId?: string;
 };
 export type MainMenuSeparator = '---';
 export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
-export type MegaMenuItem = {
-    label: string;
-    summary?: string;
-    href: string;
-    lang?: string;
-    current?: boolean;
-    target?: string;
-};
-export type MegaMenuPanel = {
-    title: string;
-    items: Array<MegaMenuItem>;
-    id: string;
-};
 export type MainMenuProps = {
     title: string;
     items: MainMenuItemList;
+    /**
+     * Link for the homepage - defaults to `"/"` adding a
+     * generic sounding "Home"/"Forsíða" label
+     */
+    homeLink?: string | Omit<MainMenuItem, 'modifier'>;
     megaPanels?: Array<MegaMenuPanel>;
     auxiliaryPanel?: AuxiliaryPanelProps;
     /**
@@ -50,7 +52,7 @@ export type MainMenuProps = {
      * "Hamburger menu" (a.k.a. "Mobile menu")
      * … unless the `onItemClick` function explicitly returns `false`.
      */
-    onItemClick?: (index: number, item: MainMenuItem) => undefined | boolean;
+    onItemClick?: (index: number, item: MainMenuItem) => void | boolean;
     activePanelId?: string;
     texts?: MainMenuI18n;
     lang?: string;

package/MainMenu.js

@@ -16,11 +16,77 @@ const useFormatMonitor_1 = require("./utils/useFormatMonitor");
 const utils_1 = require("./utils");
 const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
 exports.defaultMainMenuTexts = {
-    is: { lang: 'is', backToMenu: 'Loka', backToMenuLong: 'Til baka í valmynd' },
-    en: { lang: 'en', backToMenu: 'Close', backToMenuLong: 'Close and return to menu' },
+    is: {
+        lang: 'is',
+        homeLabel: 'Forsíða',
+        backToMenu: 'Loka',
+        backToMenuLong: 'Til baka í valmynd',
+    },
+    en: {
+        lang: 'en',
+        homeLabel: 'Home page',
+        backToMenu: 'Close',
+        backToMenuLong: 'Close and return to menu',
+    },
+    pl: {
+        lang: 'pl',
+        homeLabel: 'Strona główna',
+        backToMenu: 'Zamknij',
+        backToMenuLong: 'Zamknij i wróć do menu',
+    },
+};
+// ---------------------------------------------------------------------------
+const _issueHomeLinkWarnings = (hasHomeItem, hasHomeLinkProp) => {
+    const bothDefined = hasHomeItem && hasHomeLinkProp;
+    const neitherDefined = !hasHomeItem && !hasHomeLinkProp;
+    if (bothDefined) {
+        console.warn('Ignoring a redundant `MainMenuProps.homeLink` value. ' +
+            '(As `MainMenuProps.items` already starts with a "Home" item.)');
+    }
+    else if (neitherDefined) {
+        console.warn('`MainMenuProps.homeLink` is missing. Auto-inserting a generic "home link" with `href="/"`.');
+    }
+};
+const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
+    const items = itemsProp.map((item) => {
+        if (item === '---') {
+            return item;
+        }
+        const href = item.href;
+        const controlsId = item.controlsId || (href && /^#/.test(href) && href.slice(1)) || undefined;
+        const megaPanel = controlsId
+            ? megaPanels.find((panel) => panel.id === controlsId)
+            : undefined;
+        return Object.assign(Object.assign({}, item), { controlsId, megaPanel });
+    });
+    const firstItem = items[0];
+    if (firstItem) {
+        // Prepend menu item list with a "home link", unless it's already there
+        const hasHomeItem = typeof firstItem === 'object' && firstItem.modifier === 'home';
+        if (process.env.NODE_ENV !== 'production') {
+            _issueHomeLinkWarnings(hasHomeItem, !!homeLink);
+        }
+        if (!hasHomeItem) {
+            if (!homeLink || typeof homeLink === 'string') {
+                let label = texts.homeLabel;
+                let lang;
+                if (label == null) {
+                    const def = exports.defaultMainMenuTexts[texts.lang || 'en'] ||
+                        exports.defaultMainMenuTexts.en ||
+                        exports.defaultMainMenuTexts.is;
+                    label = def.homeLabel;
+                    lang = def.lang;
+                }
+                homeLink = { href: homeLink || '/', label, lang };
+            }
+            items.unshift(Object.assign(Object.assign({}, homeLink), { modifier: 'home' }));
+        }
+    }
+    return items;
 };
 const MainMenu = (props) => {
     const { title, megaPanels = [], onItemClick, ssr, auxiliaryPanel } = props;
+    const texts = (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts);
     const { closeHamburgerMenu } = (0, HannaUIState_1.useHannaUIState)();
     const isBrowser = (0, utils_1.useIsBrowserSide)(ssr);
     const menuElmRef = (0, react_1.useRef)(null);
@@ -73,14 +139,7 @@ const MainMenu = (props) => {
         }
     });
     const hasActivePanel = !!activePanel;
-    const menuItems = (0, react_1.useMemo)(() => props.items.map((item) => {
-        if (item === '---') {
-            return item;
-        }
-        const href = item.href;
-        const controlsId = item.controlsId || (href && /^#/.test(href) && href.slice(1)) || undefined;
-        return Object.assign(Object.assign({}, item), { controlsId, megaPanel: controlsId && megaPanels.find((panel) => panel.id === controlsId) });
-    }), [props.items, megaPanels]);
+    const menuItems = (0, react_1.useMemo)(() => normalizeMenuItems(props.items, megaPanels, props.homeLink, texts), [props.items, props.homeLink, megaPanels, texts]);
     (0, react_1.useEffect)(() => {
         setActivePanel(findActivePanel(megaPanels, props.activePanelId));
     }, [props.activePanelId, megaPanels, setActivePanel]);
@@ -157,7 +216,7 @@ const MainMenu = (props) => {
                     }
                     const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
                     const isParent = !!panel.items.find((item) => item.current);
-                    return (react_1.default.createElement(_PrimaryPanel_1.PrimaryPanel, { key: i, isParent: isParent, isActive: isActive, panel: panel, isBrowser: isBrowser, setActivePanel: setActivePanel, texts: (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts), activeRef: activePanelRef }));
+                    return (react_1.default.createElement(_PrimaryPanel_1.PrimaryPanel, { key: i, isParent: isParent, isActive: isActive, panel: panel, isBrowser: isBrowser, setActivePanel: setActivePanel, texts: texts, activeRef: activePanelRef }));
                 }),
                 auxiliaryPanel && react_1.default.createElement(_Auxiliary_1.AuxiliaryPanel, Object.assign({}, auxiliaryPanel)))))));
 };

package/Tooltip.d.ts

@@ -0,0 +1,7 @@
+export type TooltipProps = {
+    label: string;
+    text: string | JSX.Element;
+    iconOnly?: boolean;
+};
+declare const ToolTip: (props: TooltipProps) => JSX.Element;
+export default ToolTip;

package/Tooltip.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_2 = require("@floating-ui/react");
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const getSide = (placement) => placement.split('-')[0];
+const ToolTip = (props) => {
+    const { text, label, iconOnly } = props;
+    const arrowRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, hooks_1.useLaggedState)(false, 300);
+    const { x, y, reference, floating, middlewareData, placement } = (0, react_2.useFloating)({
+        placement: 'top',
+        middleware: [(0, react_2.offset)(10), (0, react_2.flip)(), (0, react_2.shift)(), (0, react_2.arrow)({ element: arrowRef })],
+        whileElementsMounted: react_2.autoUpdate,
+    });
+    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, hooks_1.useCallbackOnEsc)(() => {
+        setIsOpen(false);
+    });
+    return (react_1.default.createElement("details", { className: `Tooltip Tooltip--${getSide(placement)}`, open: isOpen, onMouseEnter: () => setIsOpen(true, 100), onFocus: () => {
+            if (isOpen) {
+                setIsOpen(true, 0);
+            }
+        }, onBlur: () => setIsOpen(false), onClick: (e) => {
+            e.preventDefault();
+            setIsOpen(!isOpen, 0);
+        }, onMouseDown: () => {
+            if (isOpen) {
+                setTimeout(() => {
+                    setIsOpen(true, 0);
+                }, 100);
+            }
+        }, onMouseLeave: (e) => {
+            if (e.currentTarget.$contextClicked_firefox_fix) {
+                return;
+            }
+            setIsOpen(false);
+        }, onContextMenu: (e) => {
+            const elm = e.currentTarget;
+            clearTimeout(elm.$contextClicked_firefox_fix);
+            elm.$contextClicked_firefox_fix = setTimeout(() => {
+                delete elm.$contextClicked_firefox_fix;
+            }, 300);
+        }, style: x == null
+            ? undefined
+            : {
+                '--tooltip-content-pos-y': `${y}px`,
+                '--tooltip-content-pos-x': `${x}px`,
+                '--tooltip-arrow-pos-x': `${arrowX}px`,
+                '--tooltip-arrow-pos-y': `${arrowY}px`,
+            } },
+        react_1.default.createElement("summary", { className: (0, getBemClass_1.default)('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
+        react_1.default.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: floating },
+            x !== null && (react_1.default.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),
+            text)));
+};
+exports.default = ToolTip;

package/_abstract/_TogglerInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerInput = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const TogglerInput = (props) => {
@@ -12,17 +12,16 @@ const TogglerInput = (props) => {
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
         // TODO: add mo-better i18n thinking
         title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
-    const InnerWrap = innerWrap ? 'span' : react_1.Fragment;
+    const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        ' ',
+        reqStar,
+        " ",
+        label,
+        ' '));
     return (react_1.default.createElement(Wrapper, { className: (0, getBemClass_1.default)(bem, modifier, className) },
         react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
         ' ',
-        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },
-            react_1.default.createElement(InnerWrap, { className: bem + '__label__wrap' },
-                ' ',
-                reqStar,
-                " ",
-                label,
-                ' ')),
+        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid }, innerWrap ? (react_1.default.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent)),
         errorMessage && (react_1.default.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };
 exports.TogglerInput = TogglerInput;

package/_abstract/breakOnNL.js

@@ -8,5 +8,5 @@ const breakOnNL = (text) => text &&
         .trim()
         .replace(/(?:\n\s*)+/g, '\n\n')
         .split(/\n/)
-        .map((bit) => bit || react_1.default.createElement("br", null));
+        .map((bit, i) => bit || react_1.default.createElement("br", { key: i }));
 exports.breakOnNL = breakOnNL;

package/assets.js

@@ -14,7 +14,9 @@ Object.defineProperty(exports, "illustrations", { enumerable: true, get: functio
 /** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
 const getCssBundleUrl = (cssTokens, 
 /** If you want to pin your CSS files to a specific version */
-version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, { version: version });
+version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, {
+    version: version,
+});
 exports.getCssBundleUrl = getCssBundleUrl;
 // ---------------------------------------------------------------------------
 // Based on "https://styles.reykjavik.is/assets/efnistakn/menu/files.json"

package/index.d.ts

@@ -86,6 +86,7 @@
 /// <reference path="./TextBlock.d.tsx" />
 /// <reference path="./TextButton.d.tsx" />
 /// <reference path="./TextInput.d.tsx" />
+/// <reference path="./Tooltip.d.tsx" />
 /// <reference path="./utils.d.ts" />
 /// <reference path="./VerticalTabsTOC.d.tsx" />
 /// <reference path="./VSpacer.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.80",
+	"version": "0.10.82",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -13,10 +13,11 @@
 	"homepage": "https://github.com/rvk-utd/hanna/blob/main/modules/hanna-react/README.md",
 	"license": "MIT",
 	"dependencies": {
+		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.23",
-		"@reykjavik/hanna-css": "^0.3.13",
-		"@reykjavik/hanna-utils": "^0.2.1",
+		"@reykjavik/hanna-css": "^0.3.14",
+		"@reykjavik/hanna-utils": "^0.2.3",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",