@reykjavik/hanna-react 0.10.53 → 0.10.56

package/esm/constants.d.ts

@@ -0,0 +1,39 @@
+/** @depcrecated import `colorFamilies` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export declare const colorFamilies: readonly ["esja", "faxafloi", "nautholsvik", "heidmork", "ellidaardalur", "blafjoll", "sund", "rokkur", "suld"] & {
+    readonly esja: "esja";
+    readonly faxafloi: "faxafloi";
+    readonly nautholsvik: "nautholsvik";
+    readonly heidmork: "heidmork";
+    readonly ellidaardalur: "ellidaardalur";
+    readonly blafjoll: "blafjoll";
+    readonly sund: "sund";
+    readonly rokkur: "rokkur";
+    readonly suld: "suld";
+} & {
+    /** @deprecated  This is a typo  (Will be removed in v0.11) */
+    ellidarardalur: string;
+};
+/** @depcrecated import type `ColorFamily` from `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export type { ColorFamily } from '@reykjavik/hanna-css';
+/** @depcrecated import `colorThemes` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export declare const themeOptions: readonly ["trustworthy", "dependable", "friendly", "lively", "colorful"] & {
+    readonly trustworthy: "trustworthy";
+    readonly dependable: "dependable";
+    readonly friendly: "friendly";
+    readonly lively: "lively";
+    readonly colorful: "colorful";
+};
+/** @depcrecated import type `HannaColorTheme` from `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export type { HannaColorTheme as ThemeOption } from '@reykjavik/hanna-css';
+export declare type Alignment = 'right' | 'left';
+export declare const aligns: Record<string, true | undefined>;
+export declare type ComponentLayoutProps<Align extends string = 'right'> = {
+    wide?: undefined;
+    align?: undefined;
+} | {
+    wide: boolean;
+    align?: undefined;
+} | {
+    wide?: undefined;
+    align: Align;
+};

package/esm/constants.js

@@ -0,0 +1,22 @@
+import { colorFamilies as _colorFamilies, colorThemes } from '@reykjavik/hanna-css';
+/** @depcrecated import `colorFamilies` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export const colorFamilies = Object.assign([
+    'esja',
+    'faxafloi',
+    'nautholsvik',
+    'heidmork',
+    'ellidaardalur',
+    'blafjoll',
+    'sund',
+    'rokkur',
+    'suld',
+], _colorFamilies, {
+    /** @deprecated  This is a typo  (Will be removed in v0.11) */
+    ellidarardalur: 'ellidaardalur',
+});
+/** @depcrecated import `colorThemes` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export const themeOptions = Object.assign(['trustworthy', 'dependable', 'friendly', 'lively', 'colorful'], colorThemes);
+export const aligns = {
+    right: true,
+    left: true,
+};

package/esm/focus-visible.js

@@ -0,0 +1 @@
+import '@reykjavik/hanna-utils/focus-visible';

package/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/esm/utils/env.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const isPreact = 
+// imported from 'preact'
+'h' in React ||
+    // imported from 'preact/compat' (has all of `react-dom` bundled)
+    ('hydrate' in React && 'render' in React) ||
+    // `undefined` instead of `false` for nicer prop usage
+    undefined;

package/esm/utils/seenEffect.js

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+export const DATA_ATTR_NAME = 'is-seen';
+const STACKING_DELAY = 400; // ms
+const dataAttr = 'data-' + DATA_ATTR_NAME;
+const inTargetSourceOrder = (a, b) => a.target.compareDocumentPosition(b.target) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+const options = {
+    // root: window
+    rootMargin: '-100px 0px 0px 0px',
+    threshold: 0, // 0
+};
+let observer;
+export const getObserver = (target, callback) => {
+    if (target.hasAttribute(dataAttr)) {
+        return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!observer) {
+        observer = new IntersectionObserver((entries, observer) => entries
+            .filter((e) => e.isIntersecting)
+            .sort(inTargetSourceOrder)
+            .forEach(({ target }, i) => {
+            setTimeout(() => {
+                target.setAttribute(dataAttr, 'true');
+                callback && callback(target);
+                observer.unobserve(target);
+            }, STACKING_DELAY * i);
+        }), options);
+    }
+    if (target.matches('[' + dataAttr + '] *')) {
+        // opt out if target is contained by another "seen-effect" element
+        target.setAttribute(dataAttr, '');
+        return;
+    }
+    target.setAttribute(dataAttr, 'false');
+    observer.observe(target);
+    return () => observer.unobserve(target);
+};
+export const seenEffectOptOut = (target, setFlag = true) => {
+    setFlag ? target.setAttribute(dataAttr, '') : target.removeAttribute(dataAttr);
+};
+getObserver.DATA_ATTR_NAME = DATA_ATTR_NAME;
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+const effects = {
+    fadein: 1,
+    fadeup: 1,
+    fadeleft: 1,
+};
+/** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
+export const assertEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
+export const getEffectAttr = (maybeType) => ({
+    'data-seen-effect': assertEffectType(maybeType) || '',
+});
+export const useSeenEffect = (
+/** Should the component appear instantly, and not transition-in once seen */
+startSeen, 
+/** Bring Your Own RefObject */
+customRef) => {
+    const localRef = useRef(null);
+    const [isSeen, setSeen] = useState(startSeen || undefined);
+    const ref = !startSeen && (customRef || localRef);
+    useEffect(() => {
+        setSeen(startSeen || undefined);
+        if (ref && ref.current) {
+            // NOTE: Given that `ref` is defined, then
+            // `startSeen` is implicily `false | undefined` at
+            // this point.
+            seenEffectOptOut(ref.current, false);
+            return getObserver(ref.current, () => setSeen(true));
+        }
+    }, [ref, startSeen]);
+    return [ref || undefined, isSeen];
+};

package/esm/utils/useFormatMonitor.js

@@ -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);

package/esm/utils/useGetSVGtext.js

@@ -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;
+};

package/esm/utils/useMenuToggling.js

@@ -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,
+    };
+};

package/esm/utils/useScrollbarWidthCSSVar.js

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

package/esm/utils.js

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

package/focus-visible.d.ts

@@ -0,0 +1 @@
+import '@reykjavik/hanna-utils/focus-visible';

package/focus-visible.js

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