npm - @reykjavik/hanna-react - Versions diffs - 0.10.55 → 0.10.56 - Mend

@@ -0,0 +1,38 @@
+/**
+ * Pass a callback that gets called whenever the browser window
+ * resizes past one of the preconfigured "media-format" breakpoints.
+ *
+ * Exmple use:
+ *
+ * ```ts
+ * useFormatMonitor((media) => {
+ *   if (media.is === 'phone') {
+ *     // do something clever because the window
+ *     // just became "phone" sized.
+ *   }
+ *   if (media.was === 'phone') {
+ *     // do something clever because the window
+ *     // just stopped being "phone" sized.
+ *   }
+ * })
+ * ```
+ *
+ * The `media` argument has the following properties:
+ *
+ * ```ts
+ *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
+ *  media.is //: Format
+ *  media.was //?: Format
+ *  // Category/mode boolean flags
+ *  // (Hamburger refers to the "mobile menu" mode)
+ *  media.isTopmenu
+ *  media.isHamburger
+ *  media.wasTopmenu
+ *  media.wasHamburger
+ *  media.becameTopmenu
+ *  media.becameHamburger
+ *  media.leftTopmenu
+ *  media.leftHamburger
+ * ```
+ */
+export declare const useFormatMonitor: (callback: (media: import("formatchange").BaseMedia & Record<"isHamburger" | "isTopmenu" | "wasHamburger" | "wasTopmenu" | "becameHamburger" | "becameTopmenu" | "leftHamburger" | "leftTopmenu", boolean>) => void) => void;

@@ -0,0 +1,41 @@
+import { formatMonitor } from '@reykjavik/hanna-utils';
+import { makeFormatMonitorHook } from 'formatchange/react';
+// ==================================================
+/**
+ * Pass a callback that gets called whenever the browser window
+ * resizes past one of the preconfigured "media-format" breakpoints.
+ *
+ * Exmple use:
+ *
+ * ```ts
+ * useFormatMonitor((media) => {
+ *   if (media.is === 'phone') {
+ *     // do something clever because the window
+ *     // just became "phone" sized.
+ *   }
+ *   if (media.was === 'phone') {
+ *     // do something clever because the window
+ *     // just stopped being "phone" sized.
+ *   }
+ * })
+ * ```
+ *
+ * The `media` argument has the following properties:
+ *
+ * ```ts
+ *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
+ *  media.is //: Format
+ *  media.was //?: Format
+ *  // Category/mode boolean flags
+ *  // (Hamburger refers to the "mobile menu" mode)
+ *  media.isTopmenu
+ *  media.isHamburger
+ *  media.wasTopmenu
+ *  media.wasHamburger
+ *  media.becameTopmenu
+ *  media.becameHamburger
+ *  media.leftTopmenu
+ *  media.leftHamburger
+ * ```
+ */
+export const useFormatMonitor = makeFormatMonitorHook(formatMonitor);

@@ -0,0 +1,6 @@
+declare type SVGMeta = {
+    imageSrc: string;
+    code: string;
+};
+export declare const useGetSVGtext: (imageSrc: string | undefined) => SVGMeta | undefined;
+export {};

@@ -0,0 +1,19 @@
+import { useEffect, useRef, useState } from 'react';
+import { getSVGtext } from '@reykjavik/hanna-utils';
+export const useGetSVGtext = (imageSrc) => {
+    const [inlineSvg, setInlineSvg] = useState();
+    const srcRef = useRef(imageSrc);
+    useEffect(() => {
+        if (imageSrc) {
+            getSVGtext(imageSrc).then((code) => {
+                if (imageSrc === srcRef.current) {
+                    setInlineSvg({ imageSrc, code });
+                }
+            });
+        }
+        srcRef.current = imageSrc;
+        setInlineSvg(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [imageSrc]);
+    return inlineSvg;
+};

@@ -0,0 +1,8 @@
+declare type MenuTogglingState = {
+    isMenuActive: true | undefined;
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    closeMenu: () => void;
+};
+export declare const useMenuToggling: (doInitialize?: boolean) => MenuTogglingState;
+export {};

@@ -0,0 +1,62 @@
+import { useRef, useState } from 'react';
+import { focusElement } from '@reykjavik/hanna-utils';
+import { useFormatMonitor } from './useFormatMonitor';
+const htmlClass = (className, add) => {
+    document.documentElement.classList[add ? 'add' : 'remove'](className);
+};
+const noop = () => undefined;
+// ---------------------------------------------------------------------------
+export const useMenuToggling = (doInitialize = true) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isMenuActive, setIsMenuActive] = useState();
+    const state = { isMenuOpen, isMenuActive };
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const _openMenu = () => {
+        if (!stateRef.current.isMenuOpen) {
+            setIsMenuOpen(true);
+            htmlClass('menu-is-open', true);
+            htmlClass('menu-is-closed', false);
+            focusElement('#pagenav');
+        }
+    };
+    const _closeMenu = () => {
+        if (stateRef.current.isMenuOpen) {
+            setIsMenuOpen(false);
+            htmlClass('menu-is-closed', true);
+            htmlClass('menu-is-open', false);
+            focusElement('.Layout__header__skiplink');
+        }
+    };
+    useFormatMonitor(doInitialize
+        ? (media) => {
+            if (media.becameHamburger) {
+                setIsMenuActive(true);
+                htmlClass('menu-is-active', true);
+                htmlClass('menu-is-closed', true);
+            }
+            if (media.leftHamburger) {
+                _closeMenu();
+                setIsMenuActive(undefined);
+                htmlClass('menu-is-active', false);
+                htmlClass('menu-is-closed', false);
+            }
+        }
+        : noop);
+    const { toggleMenu, closeMenu } = useRef(doInitialize
+        ? {
+            toggleMenu: () => {
+                if (stateRef.current.isMenuActive) {
+                    stateRef.current.isMenuOpen ? _closeMenu() : _openMenu();
+                }
+            },
+            closeMenu: _closeMenu,
+        }
+        : { toggleMenu: noop, closeMenu: noop }).current;
+    return {
+        isMenuActive,
+        isMenuOpen,
+        toggleMenu,
+        closeMenu,
+    };
+};

	@@ -0,0 +1 @@
1	+ export declare const useScrollbarWidthCSSVar: () => void;

@@ -0,0 +1,3 @@
+import getScrollbarWidth from '@hugsmidjan/qj/getScrollbarWidth';
+import { useOnMount } from '@hugsmidjan/react/hooks';
+export const useScrollbarWidthCSSVar = () => useOnMount(() => getScrollbarWidth.setCSSvar());

	@@ -0,0 +1,2 @@
1	+ export * from './utils/useFormatMonitor';
2	+ export * from './utils/useGetSVGtext';

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@reykjavik/hanna-utils/focus-visible");

@reykjavik/hanna-react 0.10.55 → 0.10.56