@reykjavik/hanna-react 0.10.78 → 0.10.80

package/CHANGELOG.md

@@ -4,9 +4,29 @@
 
 - ... <!-- Add new lines here. -->
 
+## 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_
+
+- feat: Support passing Array of `dateFormat`s to `Datepicker`
+
 ## 0.10.77 – 0.10.78
 
-_2022-12-18_
+_2023-01-18_
 
 - feat: Add standalone component `.CheckboxButton`
 - feat: Add `.CheckboxButton__label__wrap` and `.RadioButton__label__wrap`

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.d.ts

@@ -10,7 +10,7 @@ export type DatepickerProps = {
     minDate?: Date;
     maxDate?: Date;
     localeCode?: 'is' | 'en' | 'pl';
-    dateFormat?: string;
+    dateFormat?: string | Array<string>;
     isStartDate?: boolean;
     isEndDate?: boolean;
     inputRef?: RefObject<HTMLInputElement>;

package/Datepicker.js

@@ -56,11 +56,11 @@ const i18n = {
 const Datepicker = (props) => {
     const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
     const domid = (0, hooks_1.useDomid)(id);
-    const txts = (localeCode && i18n[localeCode]) || {};
+    const txts = i18n[localeCode] || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('Datepicker', [], className), ssr: ssr, label: label, small: small, assistText: assistText, hideLabel: hideLabel, invalid: invalid, required: required, reqText: reqText, disabled: disabled, readOnly: readOnly, filled: filled, empty: empty, errorMessage: errorMessage, renderInput: (className, inputProps, addFocusProps) => {
-            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => target === currentTarget && currentTarget.querySelector('input').focus(), ref: inputRef &&
+            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
@@ -75,10 +75,7 @@ const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => {
-                        // TODO: if we use costom locale we don't need this
-                        return weekday.charAt(0).toUpperCase();
-                    }, showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
         } }));
 };
 exports.Datepicker = Datepicker;

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) => undefined | 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) => undefined | 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.78",
+	"version": "0.10.80",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -15,7 +15,7 @@
 	"dependencies": {
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.23",
-		"@reykjavik/hanna-css": "^0.3.11",
+		"@reykjavik/hanna-css": "^0.3.13",
 		"@reykjavik/hanna-utils": "^0.2.1",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
@@ -24,7 +24,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);