@reykjavik/hanna-react 0.10.79 → 0.10.81

package/CHANGELOG.md

@@ -4,6 +4,29 @@
 
 - ... <!-- Add new lines here. -->
 
+## 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_
+
+- feat: Automatically close "Hamburger menu" when user clicks `MainMenu` links
+- feat: Support `MainMenuProps.onItemClick` `MainMenuItem.onClick` returning
+  `false` to prevent auto-closing of "Hamburger menu".
+- feat: Add `useHannaUIState` hook to "utils" — exposing `isHamburgerMenuOpen`
+  and `closeHamburgerMenu()`.
+- fix: Toggle `MainMenu` mega panels on repeated top-level link clicks
+- fix: Close the currently open `MainMenu` mega panels on intra-link click
+- fix: Close `ContactBubble` on intra-link/button click
+- fix: Update `react-datepicker` for latest upstream bugfixes
+
 ## 0.10.79
 
 _2023-01-23_

package/ContactBubble.js

@@ -128,13 +128,15 @@ const ContactBubble = (props) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = (0, exports.ensureIcon)(linkInfo.icon);
             const itemClass = (0, getBemClass_1.default)('ContactBubble__item', icon && 'type--' + icon);
-            const onClickHandler = onClick &&
-                ((e) => {
-                    if (!onClick()) {
+            const onClickHandler = (e) => {
+                if (onClick) {
+                    const doPreventDefault = onClick() !== true;
+                    if (doPreventDefault) {
                         e.preventDefault();
-                        closeBubble(false);
                     }
-                });
+                }
+                closeBubble(false);
+            };
             const content = [
                 ' ',
                 label,

package/Datepicker.js

@@ -66,16 +66,7 @@ const Datepicker = (props) => {
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
                     }) }, addFocusProps()),
-                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: 
-                    // NOTE: Force all dateFormat values into Array<string> to temporarily work around
-                    // a bug in the current version of react-datepicker where invalid **string** values
-                    // are re-parsed with `new Date()`, causing surprising behavior in certain situations
-                    // AND wheree Arrayed formats get parsed in order of "increasing priority".
-                    // Revert back to the plain `dateFormat={dateFormat}` pass-through once this PR has been
-                    // accepted and released: https://github.com/Hacker0x01/react-datepicker/pull/3903
-                    typeof dateFormat === 'string'
-                        ? [dateFormat]
-                        : dateFormat.slice(0).reverse(), onChange: (date) => {
+                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
                         onChange(date || undefined);
                         const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
                         if (inputElm) {

package/Gallery/_GalleryModalContext.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { GalleryProps } from '../Gallery';
 import { GalleryItemProps } from './_GalleryItem';
 type ModalContextProps = {
     setCurrentImage: (item: GalleryItemProps | undefined) => void;
     currentImage: GalleryItemProps | undefined;
 } & GalleryProps;
-export declare const GalleryModalContext: React.Context<ModalContextProps>;
+export declare const GalleryModalContext: import("react").Context<ModalContextProps>;
 export {};

package/Gallery/_GalleryModalContext.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GalleryModalContext = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-exports.GalleryModalContext = react_1.default.createContext({});
+const react_1 = require("react");
+exports.GalleryModalContext = (0, react_1.createContext)({});

package/Layout.js

@@ -8,6 +8,7 @@ const assets_1 = require("@reykjavik/hanna-utils/assets");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Image_1 = require("./_abstract/_Image");
 const _Link_1 = require("./_abstract/_Link");
+const HannaUIState_1 = require("./utils/HannaUIState");
 const useMenuToggling_1 = require("./utils/useMenuToggling");
 const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
 const utils_1 = require("./utils");
@@ -28,7 +29,7 @@ exports.defaultLayoutTexts = {
 const Layout = (props) => {
     (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
     const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
-    const { isMenuActive, closeMenu, toggleMenu } = (0, useMenuToggling_1.useMenuToggling)(ssr !== 'ssr-only');
+    const { isMenuActive, isMenuOpen, closeMenu, toggleMenu } = (0, useMenuToggling_1.useMenuToggling)(ssr !== 'ssr-only');
     const isBrowser = (0, utils_1.useIsBrowserSide)( /* ssr */);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
     return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
@@ -49,7 +50,10 @@ const Layout = (props) => {
                         }), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             react_1.default.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", role: "navigation" },
-                navChildren,
+                react_1.default.createElement(HannaUIState_1.HannaUIState, { value: {
+                        closeHamburgerMenu: closeMenu,
+                        isHamburgerMenuOpen: isMenuOpen,
+                    } }, navChildren),
                 isMenuActive && (react_1.default.createElement("button", { className: "Layout__nav__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel)))),
             react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
 };

package/MainMenu.d.ts

@@ -15,7 +15,14 @@ export type MainMenuItem = {
     modifier?: string;
     current?: boolean;
     href?: string;
-    onClick?: (index: number, item: MainMenuItem) => void;
+    /**
+     * Adding `onClick` automatically results in a <button/> element being rendered.
+     *
+     * NOTE: Clicking a MainMenu item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (index: number, item: MainMenuItem) => void | boolean;
     controlsId?: string;
 };
 export type MainMenuSeparator = '---';
@@ -38,7 +45,12 @@ export type MainMenuProps = {
     items: MainMenuItemList;
     megaPanels?: Array<MegaMenuPanel>;
     auxiliaryPanel?: AuxiliaryPanelProps;
-    onItemClick?: (index: number, item: MainMenuItem) => void;
+    /**
+     * NOTE: Clicking a MainMenu item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (index: number, item: MainMenuItem) => void | boolean;
     activePanelId?: string;
     texts?: MainMenuI18n;
     lang?: string;

package/MainMenu.js

@@ -11,6 +11,7 @@ const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_1 = require("./_abstract/_Link");
 const _Auxiliary_1 = require("./MainMenu/_Auxiliary");
 const _PrimaryPanel_1 = require("./MainMenu/_PrimaryPanel");
+const HannaUIState_1 = require("./utils/HannaUIState");
 const useFormatMonitor_1 = require("./utils/useFormatMonitor");
 const utils_1 = require("./utils");
 const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
@@ -20,52 +21,52 @@ exports.defaultMainMenuTexts = {
 };
 const MainMenu = (props) => {
     const { title, megaPanels = [], onItemClick, ssr, auxiliaryPanel } = props;
+    const { closeHamburgerMenu } = (0, HannaUIState_1.useHannaUIState)();
     const isBrowser = (0, utils_1.useIsBrowserSide)(ssr);
     const menuElmRef = (0, react_1.useRef)(null);
     const pressedLinkRef = (0, react_1.useRef)(null);
     const activePanelRef = (0, react_1.useRef)(null);
     const [activePanel, _setActivePanel] = (0, react_1.useState)(() => isBrowser && findActivePanel(megaPanels, props.activePanelId));
     const [laggyActivePanel, setLaggyActivePanel] = (0, useShortState_1.default)();
-    const setActivePanel = (0, react_1.useCallback)((newActive, setFocus = true) => {
-        if (!isBrowser) {
-            return;
+    const setActivePanel = (0, react_1.useMemo)(() => isBrowser
+        ? (newActive, setFocus = true) => {
+            const htmlElmDataset = document.documentElement.dataset;
+            // const menuElm = menuElmRef.current as HTMLElement;
+            _setActivePanel((activePanel) => {
+                const scrollElm = (0, hanna_utils_1.getPageScrollElm)();
+                if (!newActive) {
+                    activePanel && setLaggyActivePanel(activePanel, 1000);
+                    scrollElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
+                    delete htmlElmDataset.scrollTop;
+                    delete htmlElmDataset.megaPanelActive;
+                }
+                else {
+                    setLaggyActivePanel(undefined, 0);
+                    htmlElmDataset.scrollTop = String(scrollElm.scrollTop);
+                    scrollElm.scrollTop = 0;
+                    htmlElmDataset.megaPanelActive = '';
+                }
+                if (setFocus) {
+                    const pressedLinkElm = pressedLinkRef.current; // pressedLinkElm will be undefined when setTimeout fires
+                    setTimeout(() => {
+                        if (!newActive) {
+                            // const buttonElm = menuElm.querySelector<HTMLButtonElement>(
+                            // 	'button.MainMenu__link[aria-pressed="true"]'
+                            // );
+                            (0, focusElm_1.default)(pressedLinkElm);
+                        }
+                        else if (newActive !== activePanel) {
+                            // const panelElm = menuElm.querySelector<HTMLButtonElement>(
+                            // 	'.PrimaryPanel--active'
+                            // );
+                            (0, focusElm_1.default)(activePanelRef.current);
+                        }
+                    }, 100);
+                }
+                return newActive;
+            });
         }
-        const htmlElmDataset = document.documentElement.dataset;
-        // const menuElm = menuElmRef.current as HTMLElement;
-        _setActivePanel((activePanel) => {
-            const scrollElm = (0, hanna_utils_1.getPageScrollElm)();
-            if (!newActive) {
-                activePanel && setLaggyActivePanel(activePanel, 1000);
-                scrollElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
-                delete htmlElmDataset.scrollTop;
-                delete htmlElmDataset.megaPanelActive;
-            }
-            else {
-                setLaggyActivePanel(undefined, 0);
-                htmlElmDataset.scrollTop = String(scrollElm.scrollTop);
-                scrollElm.scrollTop = 0;
-                htmlElmDataset.megaPanelActive = '';
-            }
-            if (setFocus) {
-                const pressedLinkElm = pressedLinkRef.current; // pressedLinkElm will be undefined when setTimeout fires
-                setTimeout(() => {
-                    if (!newActive) {
-                        // const buttonElm = menuElm.querySelector<HTMLButtonElement>(
-                        // 	'button.MainMenu__link[aria-pressed="true"]'
-                        // );
-                        (0, focusElm_1.default)(pressedLinkElm);
-                    }
-                    else if (newActive !== activePanel) {
-                        // const panelElm = menuElm.querySelector<HTMLButtonElement>(
-                        // 	'.PrimaryPanel--active'
-                        // );
-                        (0, focusElm_1.default)(activePanelRef.current);
-                    }
-                }, 100);
-            }
-            return newActive;
-        });
-    }, [setLaggyActivePanel, isBrowser]);
+        : () => undefined, [setLaggyActivePanel, isBrowser]);
     (0, useFormatMonitor_1.useFormatMonitor)((media) => {
         if (media.leftTopmenu) {
             setActivePanel(undefined);
@@ -108,6 +109,17 @@ const MainMenu = (props) => {
     if (menuItems.length === 0) {
         return null;
     }
+    /** Close mega panels on clicks their links. */
+    const handleMegaPanelClicks = (e) => {
+        if (
+        // NOTE: We can NOT check for `e.defaultPrevented` because if the current
+        // LinkRenderer is something like Next.js or Remix's <Link/> compponent
+        // then default is ALWAYS prevented
+        e.target.closest('a[href]')) {
+            setActivePanel(undefined);
+            closeHamburgerMenu();
+        }
+    };
     return (react_1.default.createElement("nav", { className: "MainMenu", "aria-label": title, "data-sprinkled": isBrowser, ref: menuElmRef },
         react_1.default.createElement("h2", { className: "MainMenu__title" }, title),
         react_1.default.createElement("ul", { className: "MainMenu__items" }, menuItems.map((item, i) => {
@@ -119,17 +131,26 @@ const MainMenu = (props) => {
             return (react_1.default.createElement("li", { key: i, className: (0, getBemClass_1.default)('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
             // only print script-driven buttons in the browser
             react_1.default.createElement("button", { className: "MainMenu__link", onClick: () => {
-                    item.megaPanel && setActivePanel(item.megaPanel);
-                    onClick && onClick(i, item);
-                    onItemClick && onItemClick(i, item);
+                    const keepOpen1 = onClick && onClick(i, item) === false;
+                    const keepOpen2 = onItemClick && onItemClick(i, item) === false;
+                    const { megaPanel } = item;
+                    if (megaPanel) {
+                        setActivePanel(megaPanel !== activePanel ? megaPanel : undefined);
+                    }
+                    else {
+                        !(keepOpen1 || keepOpen2) && closeHamburgerMenu();
+                    }
                 }, ref: pressed && pressedLinkRef, "aria-pressed": pressed, "aria-controls": controlsId, "aria-label": labelLong, title: labelLong, lang: lang, type: "button" }, label)) : item.href != null ? (
             // always render links server-side
-            react_1.default.createElement(_Link_1.Link, { className: "MainMenu__link", href: item.href, "aria-label": labelLong, title: labelLong, onClick: onItemClick && (() => onItemClick(i, item)), lang: lang }, label)) : undefined // skip rendering non-link menu items server side
+            react_1.default.createElement(_Link_1.Link, { className: "MainMenu__link", href: item.href, "aria-label": labelLong, title: labelLong, onClick: () => {
+                    const keepOpen = onItemClick && onItemClick(i, item) === false;
+                    !keepOpen && closeHamburgerMenu();
+                }, lang: lang }, label)) : undefined // skip rendering non-link menu items server side
             ));
         })),
         '\n\n',
         megaPanels.length > 0 && (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('MainMenu__panelsWrap', [activePanel && 'active']) },
-            react_1.default.createElement("ul", { className: "MainMenu__panels" },
+            react_1.default.createElement("ul", { className: "MainMenu__panels", onClick: handleMegaPanelClicks },
                 megaPanels.map((panel, i) => {
                     if (!panel.items.length) {
                         return;

package/SearchResults.d.ts

@@ -14,7 +14,9 @@ export type SearchResultsFilter = {
 };
 export type { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
 export type SearchResultsProps = {
+    /** Grand total number of searach results */
     totalHits?: number;
+    /** Grand total number of searach results */
     hits?: number;
     query?: string;
     items?: Array<SearchResultsItemProps>;
@@ -23,7 +25,9 @@ export type SearchResultsProps = {
     setFilter?: (activeTab: number) => void;
     status: SearchStatus;
     errorText?: string | ReactNode;
+    /** Number of results returned in each page/batch */
     pageSize: number;
+    /** Total number of pages */
     pages?: number;
     loadMore?: () => void;
     texts?: SearchReesultI18n;

package/SiteSearchInput.d.ts

@@ -20,5 +20,5 @@ export type SiteSearchInputProps = {
     children?: never;
     ssr?: SSRSupport;
 } & WrappingProps & InputElmProps;
-export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "pattern" | "value" | "ssr" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "size" | "src" | "multiple" | "alt" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
+export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "value" | "pattern" | "ssr" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "size" | "src" | "multiple" | "alt" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
 export default SiteSearchInput;

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/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.79",
+	"version": "0.10.81",
 	"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.11",
-		"@reykjavik/hanna-utils": "^0.2.1",
+		"@reykjavik/hanna-css": "^0.3.13",
+		"@reykjavik/hanna-utils": "^0.2.3",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
@@ -24,7 +25,7 @@
 		"@types/react-transition-group": "^4.4.0",
 		"iframe-resizer-react": "^1.1.0",
 		"react-autosuggest": "^10.1.0",
-		"react-datepicker": "^4.8.0",
+		"react-datepicker": "^4.9.0",
 		"react-dropzone": "^10.2.2",
 		"react-intersection-observer": "^8.30.1",
 		"react-transition-group": "^4.4.1"

package/utils/HannaUIState.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type HannaUIStateProps = {
+    closeHamburgerMenu: () => void;
+    isHamburgerMenuOpen: boolean | undefined;
+};
+export declare const HannaUIState: import("react").Provider<HannaUIStateProps>;
+export declare const useHannaUIState: () => HannaUIStateProps;
+export {};

package/utils/HannaUIState.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHannaUIState = exports.HannaUIState = void 0;
+const react_1 = require("react");
+const _HannaUIContext = (0, react_1.createContext)({
+    closeHamburgerMenu: () => undefined,
+    isHamburgerMenuOpen: undefined,
+});
+exports.HannaUIState = _HannaUIContext.Provider;
+const useHannaUIState = () => (0, react_1.useContext)(_HannaUIContext);
+exports.useHannaUIState = useHannaUIState;

package/utils/useMenuToggling.js

@@ -12,9 +12,9 @@ const noop = () => undefined;
 const useMenuToggling = (doInitialize = true) => {
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
     const [isMenuActive, setIsMenuActive] = (0, react_1.useState)();
-    const state = { isMenuOpen, isMenuActive };
-    const stateRef = (0, react_1.useRef)(state);
-    stateRef.current = state;
+    const _state = { isMenuOpen, isMenuActive };
+    const stateRef = (0, react_1.useRef)(_state);
+    stateRef.current = _state;
     const _openMenu = () => {
         if (!stateRef.current.isMenuOpen) {
             setIsMenuOpen(true);

package/utils.d.ts

@@ -1,5 +1,6 @@
 export * from './utils/browserSide';
 export * from './utils/config';
+export * from './utils/HannaUIState';
 export * from './utils/useDidChange';
 export * from './utils/useFormatMonitor';
 export * from './utils/useGetSVGtext';

package/utils.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./utils/browserSide"), exports);
 tslib_1.__exportStar(require("./utils/config"), exports);
+tslib_1.__exportStar(require("./utils/HannaUIState"), exports);
 tslib_1.__exportStar(require("./utils/useDidChange"), exports);
 tslib_1.__exportStar(require("./utils/useFormatMonitor"), exports);
 tslib_1.__exportStar(require("./utils/useGetSVGtext"), exports);