@reykjavik/hanna-react 0.10.53

package/lib/utils/seenEffect.cjs

@@ -0,0 +1,93 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var seenEffect_exports = {};
+__export(seenEffect_exports, {
+  DATA_ATTR_NAME: () => DATA_ATTR_NAME,
+  assertEffectType: () => assertEffectType,
+  getEffectAttr: () => getEffectAttr,
+  getObserver: () => getObserver,
+  seenEffectOptOut: () => seenEffectOptOut,
+  useSeenEffect: () => useSeenEffect
+});
+module.exports = __toCommonJS(seenEffect_exports);
+var import_react = require("react");
+const DATA_ATTR_NAME = "is-seen";
+const STACKING_DELAY = 400;
+const dataAttr = "data-" + DATA_ATTR_NAME;
+const inTargetSourceOrder = (a, b) => a.target.compareDocumentPosition(b.target) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+const options = {
+  rootMargin: "-100px 0px 0px 0px",
+  threshold: 0
+};
+let observer;
+const getObserver = (target, callback) => {
+  if (target.hasAttribute(dataAttr)) {
+    return;
+  }
+  if (!observer) {
+    observer = new IntersectionObserver((entries, observer2) => entries.filter((e) => e.isIntersecting).sort(inTargetSourceOrder).forEach(({ target: target2 }, i) => {
+      setTimeout(() => {
+        target2.setAttribute(dataAttr, "true");
+        callback && callback(target2);
+        observer2.unobserve(target2);
+      }, STACKING_DELAY * i);
+    }), options);
+  }
+  if (target.matches("[" + dataAttr + "] *")) {
+    target.setAttribute(dataAttr, "");
+    return;
+  }
+  target.setAttribute(dataAttr, "false");
+  observer.observe(target);
+  return () => observer.unobserve(target);
+};
+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
+};
+const assertEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : void 0;
+const getEffectAttr = (maybeType) => ({
+  "data-seen-effect": assertEffectType(maybeType) || ""
+});
+const useSeenEffect = (startSeen, customRef) => {
+  const localRef = (0, import_react.useRef)(null);
+  const [isSeen, setSeen] = (0, import_react.useState)(startSeen || void 0);
+  const ref = !startSeen && (customRef || localRef);
+  (0, import_react.useEffect)(() => {
+    setSeen(startSeen || void 0);
+    if (ref && ref.current) {
+      seenEffectOptOut(ref.current, false);
+      return getObserver(ref.current, () => setSeen(true));
+    }
+  }, [ref, startSeen]);
+  return [ref || void 0, isSeen];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DATA_ATTR_NAME,
+  assertEffectType,
+  getEffectAttr,
+  getObserver,
+  seenEffectOptOut,
+  useSeenEffect
+});

package/lib/utils/seenEffect.mjs

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from "react";
+const DATA_ATTR_NAME = "is-seen";
+const STACKING_DELAY = 400;
+const dataAttr = "data-" + DATA_ATTR_NAME;
+const inTargetSourceOrder = (a, b) => a.target.compareDocumentPosition(b.target) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+const options = {
+  rootMargin: "-100px 0px 0px 0px",
+  threshold: 0
+};
+let observer;
+const getObserver = (target, callback) => {
+  if (target.hasAttribute(dataAttr)) {
+    return;
+  }
+  if (!observer) {
+    observer = new IntersectionObserver((entries, observer2) => entries.filter((e) => e.isIntersecting).sort(inTargetSourceOrder).forEach(({ target: target2 }, i) => {
+      setTimeout(() => {
+        target2.setAttribute(dataAttr, "true");
+        callback && callback(target2);
+        observer2.unobserve(target2);
+      }, STACKING_DELAY * i);
+    }), options);
+  }
+  if (target.matches("[" + dataAttr + "] *")) {
+    target.setAttribute(dataAttr, "");
+    return;
+  }
+  target.setAttribute(dataAttr, "false");
+  observer.observe(target);
+  return () => observer.unobserve(target);
+};
+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
+};
+const assertEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : void 0;
+const getEffectAttr = (maybeType) => ({
+  "data-seen-effect": assertEffectType(maybeType) || ""
+});
+const useSeenEffect = (startSeen, customRef) => {
+  const localRef = useRef(null);
+  const [isSeen, setSeen] = useState(startSeen || void 0);
+  const ref = !startSeen && (customRef || localRef);
+  useEffect(() => {
+    setSeen(startSeen || void 0);
+    if (ref && ref.current) {
+      seenEffectOptOut(ref.current, false);
+      return getObserver(ref.current, () => setSeen(true));
+    }
+  }, [ref, startSeen]);
+  return [ref || void 0, isSeen];
+};
+export {
+  DATA_ATTR_NAME,
+  assertEffectType,
+  getEffectAttr,
+  getObserver,
+  seenEffectOptOut,
+  useSeenEffect
+};

package/lib/utils/useFormatMonitor.cjs

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFormatMonitor_exports = {};
+__export(useFormatMonitor_exports, {
+  useFormatMonitor: () => useFormatMonitor
+});
+module.exports = __toCommonJS(useFormatMonitor_exports);
+var import_hanna_utils = require("@reykjavik/hanna-utils");
+var import_react = require("formatchange/react");
+const useFormatMonitor = (0, import_react.makeFormatMonitorHook)(import_hanna_utils.formatMonitor);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFormatMonitor
+});

package/lib/utils/useFormatMonitor.mjs

@@ -0,0 +1,6 @@
+import { formatMonitor } from "@reykjavik/hanna-utils";
+import { makeFormatMonitorHook } from "formatchange/react";
+const useFormatMonitor = makeFormatMonitorHook(formatMonitor);
+export {
+  useFormatMonitor
+};

package/lib/utils/useGetSVGtext.cjs

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGetSVGtext_exports = {};
+__export(useGetSVGtext_exports, {
+  useGetSVGtext: () => useGetSVGtext
+});
+module.exports = __toCommonJS(useGetSVGtext_exports);
+var import_react = require("react");
+var import_hanna_utils = require("@reykjavik/hanna-utils");
+const useGetSVGtext = (imageSrc) => {
+  const [inlineSvg, setInlineSvg] = (0, import_react.useState)();
+  const srcRef = (0, import_react.useRef)(imageSrc);
+  (0, import_react.useEffect)(() => {
+    if (imageSrc) {
+      (0, import_hanna_utils.getSVGtext)(imageSrc).then((code) => {
+        if (imageSrc === srcRef.current) {
+          setInlineSvg({ imageSrc, code });
+        }
+      });
+    }
+    srcRef.current = imageSrc;
+    setInlineSvg(void 0);
+  }, [imageSrc]);
+  return inlineSvg;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGetSVGtext
+});

package/lib/utils/useGetSVGtext.mjs

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useState } from "react";
+import { getSVGtext } from "@reykjavik/hanna-utils";
+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(void 0);
+  }, [imageSrc]);
+  return inlineSvg;
+};
+export {
+  useGetSVGtext
+};

package/lib/utils/useMenuToggling.cjs

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useMenuToggling_exports = {};
+__export(useMenuToggling_exports, {
+  useMenuToggling: () => useMenuToggling
+});
+module.exports = __toCommonJS(useMenuToggling_exports);
+var import_react = require("react");
+var import_hanna_utils = require("@reykjavik/hanna-utils");
+var import_useFormatMonitor = require("./useFormatMonitor");
+const htmlClass = (className, add) => {
+  document.documentElement.classList[add ? "add" : "remove"](className);
+};
+const noop = () => void 0;
+const useMenuToggling = (doInitialize = true) => {
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react.useState)(false);
+  const [isMenuActive, setIsMenuActive] = (0, import_react.useState)();
+  const state = { isMenuOpen, isMenuActive };
+  const stateRef = (0, import_react.useRef)(state);
+  stateRef.current = state;
+  const _openMenu = () => {
+    if (!stateRef.current.isMenuOpen) {
+      setIsMenuOpen(true);
+      htmlClass("menu-is-open", true);
+      htmlClass("menu-is-closed", false);
+      (0, import_hanna_utils.focusElement)("#pagenav");
+    }
+  };
+  const _closeMenu = () => {
+    if (stateRef.current.isMenuOpen) {
+      setIsMenuOpen(false);
+      htmlClass("menu-is-closed", true);
+      htmlClass("menu-is-open", false);
+      (0, import_hanna_utils.focusElement)(".Layout__header__skiplink");
+    }
+  };
+  (0, import_useFormatMonitor.useFormatMonitor)(doInitialize ? (media) => {
+    if (media.becameHamburger) {
+      setIsMenuActive(true);
+      htmlClass("menu-is-active", true);
+      htmlClass("menu-is-closed", true);
+    }
+    if (media.leftHamburger) {
+      _closeMenu();
+      setIsMenuActive(void 0);
+      htmlClass("menu-is-active", false);
+      htmlClass("menu-is-closed", false);
+    }
+  } : noop);
+  const { toggleMenu, closeMenu } = (0, import_react.useRef)(doInitialize ? {
+    toggleMenu: () => {
+      if (stateRef.current.isMenuActive) {
+        stateRef.current.isMenuOpen ? _closeMenu() : _openMenu();
+      }
+    },
+    closeMenu: _closeMenu
+  } : { toggleMenu: noop, closeMenu: noop }).current;
+  return {
+    isMenuActive,
+    isMenuOpen,
+    toggleMenu,
+    closeMenu
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMenuToggling
+});

package/lib/utils/useMenuToggling.mjs

@@ -0,0 +1,60 @@
+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 = () => void 0;
+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(void 0);
+      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
+  };
+};
+export {
+  useMenuToggling
+};

package/lib/utils/useScrollbarWidthCSSVar.cjs

@@ -0,0 +1,32 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useScrollbarWidthCSSVar_exports = {};
+__export(useScrollbarWidthCSSVar_exports, {
+  useScrollbarWidthCSSVar: () => useScrollbarWidthCSSVar
+});
+module.exports = __toCommonJS(useScrollbarWidthCSSVar_exports);
+var import_getScrollbarWidth = __toESM(require("@hugsmidjan/qj/getScrollbarWidth"));
+var import_hooks = require("@hugsmidjan/react/hooks");
+const useScrollbarWidthCSSVar = () => (0, import_hooks.useOnMount)(() => import_getScrollbarWidth.default.setCSSvar());
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScrollbarWidthCSSVar
+});

package/lib/utils/useScrollbarWidthCSSVar.mjs

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

package/lib/utils.cjs

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+module.exports = __toCommonJS(utils_exports);
+__reExport(utils_exports, require("./utils/useFormatMonitor"), module.exports);
+__reExport(utils_exports, require("./utils/useGetSVGtext"), module.exports);

package/lib/utils.mjs

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