@reykjavik/hanna-react 0.10.94 → 0.10.95

package/esm/utils/HannaUIState.d.ts

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

package/esm/utils/config.d.ts

@@ -1,4 +1,14 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
 export type { LinkRenderer } from '../_abstract/_Link.js';
 export { setLinkRenderer } from '../_abstract/_Link.js';
-export type { SSRSupport } from '@hugsmidjan/react/hooks';
 export { setDefaultSSR } from '@hugsmidjan/react/hooks';
+export type SSRSupportProps = {
+    /**
+     * Indicates whether server-side rendering is supported or not.
+     *
+     * The `ssr-only` value is useful for cases where you need
+     * to demo the server-rendered version in a browser.
+     */
+    ssr?: SSRSupport;
+};
+export type { SSRSupport };

package/esm/utils/config.js

@@ -1,2 +1,3 @@
 export { setLinkRenderer } from '../_abstract/_Link.js';
+// ---------------------------------------------------------------------------
 export { setDefaultSSR } from '@hugsmidjan/react/hooks';

package/esm/utils/types.d.ts

@@ -0,0 +1,12 @@
+import { Modifiers } from '@hugsmidjan/qj/classUtils';
+export type BemModifierProps = {
+    /** List of CSS BEM --modifier's to add to the component's main wrapper.
+     *
+     * All falsy values are neatly skipped.
+     */
+    modifier?: Modifiers;
+};
+export type BemProps = {
+    /** CSS BEM class-name prefix to be used for this component. Defaults to the same as the original component's displayName */
+    bem?: string;
+} & BemModifierProps;

package/esm/utils/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/useGetSVGtext.d.ts

@@ -6,5 +6,5 @@ type SVGMeta = {
  * Fetches a remote SVG image and returns its XML/source
  * string for inlining, or further processing
  */
-export declare const useGetSVGtext: (imageSrc: string | undefined) => SVGMeta | undefined;
+export declare const useGetSVGtext: (imageSrc: string | undefined, altText?: string) => SVGMeta | undefined;
 export {};

package/esm/utils/useGetSVGtext.js

@@ -4,12 +4,12 @@ import { getSVGtext } from '@reykjavik/hanna-utils';
  * Fetches a remote SVG image and returns its XML/source
  * string for inlining, or further processing
  */
-export const useGetSVGtext = (imageSrc) => {
+export const useGetSVGtext = (imageSrc, altText) => {
     const [inlineSvg, setInlineSvg] = useState();
     const srcRef = useRef(imageSrc);
     useEffect(() => {
         if (imageSrc) {
-            getSVGtext(imageSrc).then((code) => {
+            getSVGtext(imageSrc, altText).then((code) => {
                 if (imageSrc === srcRef.current) {
                     setInlineSvg({ imageSrc, code });
                 }

package/esm/utils/useMenuToggling.d.ts

@@ -1,8 +1,10 @@
+import { HannaUIStateState } from './HannaUIState.js';
 type MenuTogglingState = {
     isMenuActive: true | undefined;
     isMenuOpen: boolean;
     toggleMenu: () => void;
     closeMenu: () => void;
+    uiState: HannaUIStateState;
 };
 export declare const useMenuToggling: (doInitialize?: boolean) => MenuTogglingState;
 export {};

package/esm/utils/useMenuToggling.js

@@ -7,14 +7,33 @@ const htmlClass = (className, add) => {
 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 stateRef = useRef({
+        isMenuOpen: false,
+        isMenuActive: undefined,
+        toggleMenu: doInitialize
+            ? () => {
+                if (stateRef.current.isMenuActive) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    stateRef.current.isMenuOpen ? _closeMenu() : _openMenu();
+                }
+            }
+            : noop,
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        closeMenu: () => doInitialize && _closeMenu(),
+    });
+    const [{ isMenuOpen, isMenuActive, uiState }, setMenuState] = useState({
+        isMenuOpen: false,
+        isMenuActive: undefined,
+        uiState: {
+            closeHamburgerMenu: () => stateRef.current.closeMenu(),
+            isHamburgerMenuOpen: false,
+        },
+    });
+    stateRef.current.isMenuOpen = isMenuOpen;
+    stateRef.current.isMenuActive = isMenuActive;
     const _openMenu = () => {
         if (!stateRef.current.isMenuOpen) {
-            setIsMenuOpen(true);
+            setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuOpen: true, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuOpen: true }) })));
             htmlClass('menu-is-open', true);
             htmlClass('menu-is-closed', false);
             focusElement('#pagenav');
@@ -22,7 +41,7 @@ export const useMenuToggling = (doInitialize = true) => {
     };
     const _closeMenu = () => {
         if (stateRef.current.isMenuOpen) {
-            setIsMenuOpen(false);
+            setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuOpen: false, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuOpen: false }) })));
             htmlClass('menu-is-closed', true);
             htmlClass('menu-is-open', false);
             focusElement('.Layout__header__skiplink');
@@ -31,32 +50,23 @@ export const useMenuToggling = (doInitialize = true) => {
     useFormatMonitor(doInitialize
         ? (media) => {
             if (media.becameHamburger) {
-                setIsMenuActive(true);
+                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: true })));
                 htmlClass('menu-is-active', true);
                 htmlClass('menu-is-closed', true);
             }
             if (media.leftHamburger) {
                 _closeMenu();
-                setIsMenuActive(undefined);
+                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: 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,
+        toggleMenu: stateRef.current.toggleMenu,
+        closeMenu: stateRef.current.closeMenu,
+        uiState,
     };
 };

package/esm/utils.d.ts

@@ -1,9 +1,10 @@
 export * from './utils/browserSide.js';
 export * from './utils/config.js';
-export * from './utils/HannaUIState.js';
+export { HannaUIState, useHannaUIState } from './utils/HannaUIState.js';
 export * from './utils/useDidChange.js';
 export * from './utils/useFormatMonitor.js';
 export * from './utils/useGetSVGtext.js';
+export * from './utils/useMenuToggling.js';
 export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';
 /**

package/esm/utils.js

@@ -1,8 +1,9 @@
 export * from './utils/browserSide.js';
 export * from './utils/config.js';
-export * from './utils/HannaUIState.js';
+export { HannaUIState, useHannaUIState } from './utils/HannaUIState.js';
 export * from './utils/useDidChange.js';
 export * from './utils/useFormatMonitor.js';
 export * from './utils/useGetSVGtext.js';
+export * from './utils/useMenuToggling.js';
 export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.94",
+	"version": "0.10.95",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -14,10 +14,10 @@
 	"license": "MIT",
 	"dependencies": {
 		"@floating-ui/react": "^0.19.2",
-		"@hugsmidjan/qj": "^4.20.0",
+		"@hugsmidjan/qj": "^4.21.0",
 		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.3",
-		"@reykjavik/hanna-utils": "^0.2.7",
+		"@reykjavik/hanna-utils": "^0.2.8",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
@@ -28,7 +28,8 @@
 		"react-datepicker": "4.11.0",
 		"react-dropzone": "^10.2.2",
 		"react-intersection-observer": "^8.30.1",
-		"react-transition-group": "^4.4.1"
+		"react-transition-group": "^4.4.1",
+		"tslib": "^2.4.0"
 	},
 	"engines": {
 		"node": ">=16"

package/utils/HannaUIState.d.ts

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

package/utils/config.d.ts

@@ -1,4 +1,14 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
 export type { LinkRenderer } from '../_abstract/_Link.js';
 export { setLinkRenderer } from '../_abstract/_Link.js';
-export type { SSRSupport } from '@hugsmidjan/react/hooks';
 export { setDefaultSSR } from '@hugsmidjan/react/hooks';
+export type SSRSupportProps = {
+    /**
+     * Indicates whether server-side rendering is supported or not.
+     *
+     * The `ssr-only` value is useful for cases where you need
+     * to demo the server-rendered version in a browser.
+     */
+    ssr?: SSRSupport;
+};
+export type { SSRSupport };

package/utils/config.js

@@ -3,5 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setDefaultSSR = exports.setLinkRenderer = void 0;
 var _Link_js_1 = require("../_abstract/_Link.js");
 Object.defineProperty(exports, "setLinkRenderer", { enumerable: true, get: function () { return _Link_js_1.setLinkRenderer; } });
+// ---------------------------------------------------------------------------
 var hooks_1 = require("@hugsmidjan/react/hooks");
 Object.defineProperty(exports, "setDefaultSSR", { enumerable: true, get: function () { return hooks_1.setDefaultSSR; } });

package/utils/types.d.ts

@@ -0,0 +1,12 @@
+import { Modifiers } from '@hugsmidjan/qj/classUtils';
+export type BemModifierProps = {
+    /** List of CSS BEM --modifier's to add to the component's main wrapper.
+     *
+     * All falsy values are neatly skipped.
+     */
+    modifier?: Modifiers;
+};
+export type BemProps = {
+    /** CSS BEM class-name prefix to be used for this component. Defaults to the same as the original component's displayName */
+    bem?: string;
+} & BemModifierProps;

package/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/utils/useGetSVGtext.d.ts

@@ -6,5 +6,5 @@ type SVGMeta = {
  * Fetches a remote SVG image and returns its XML/source
  * string for inlining, or further processing
  */
-export declare const useGetSVGtext: (imageSrc: string | undefined) => SVGMeta | undefined;
+export declare const useGetSVGtext: (imageSrc: string | undefined, altText?: string) => SVGMeta | undefined;
 export {};

package/utils/useGetSVGtext.js

@@ -7,12 +7,12 @@ const hanna_utils_1 = require("@reykjavik/hanna-utils");
  * Fetches a remote SVG image and returns its XML/source
  * string for inlining, or further processing
  */
-const useGetSVGtext = (imageSrc) => {
+const useGetSVGtext = (imageSrc, altText) => {
     const [inlineSvg, setInlineSvg] = (0, react_1.useState)();
     const srcRef = (0, react_1.useRef)(imageSrc);
     (0, react_1.useEffect)(() => {
         if (imageSrc) {
-            (0, hanna_utils_1.getSVGtext)(imageSrc).then((code) => {
+            (0, hanna_utils_1.getSVGtext)(imageSrc, altText).then((code) => {
                 if (imageSrc === srcRef.current) {
                     setInlineSvg({ imageSrc, code });
                 }

package/utils/useMenuToggling.d.ts

@@ -1,8 +1,10 @@
+import { HannaUIStateState } from './HannaUIState.js';
 type MenuTogglingState = {
     isMenuActive: true | undefined;
     isMenuOpen: boolean;
     toggleMenu: () => void;
     closeMenu: () => void;
+    uiState: HannaUIStateState;
 };
 export declare const useMenuToggling: (doInitialize?: boolean) => MenuTogglingState;
 export {};

package/utils/useMenuToggling.js

@@ -10,14 +10,33 @@ const htmlClass = (className, add) => {
 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 stateRef = (0, react_1.useRef)({
+        isMenuOpen: false,
+        isMenuActive: undefined,
+        toggleMenu: doInitialize
+            ? () => {
+                if (stateRef.current.isMenuActive) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    stateRef.current.isMenuOpen ? _closeMenu() : _openMenu();
+                }
+            }
+            : noop,
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        closeMenu: () => doInitialize && _closeMenu(),
+    });
+    const [{ isMenuOpen, isMenuActive, uiState }, setMenuState] = (0, react_1.useState)({
+        isMenuOpen: false,
+        isMenuActive: undefined,
+        uiState: {
+            closeHamburgerMenu: () => stateRef.current.closeMenu(),
+            isHamburgerMenuOpen: false,
+        },
+    });
+    stateRef.current.isMenuOpen = isMenuOpen;
+    stateRef.current.isMenuActive = isMenuActive;
     const _openMenu = () => {
         if (!stateRef.current.isMenuOpen) {
-            setIsMenuOpen(true);
+            setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuOpen: true, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuOpen: true }) })));
             htmlClass('menu-is-open', true);
             htmlClass('menu-is-closed', false);
             (0, hanna_utils_1.focusElement)('#pagenav');
@@ -25,7 +44,7 @@ const useMenuToggling = (doInitialize = true) => {
     };
     const _closeMenu = () => {
         if (stateRef.current.isMenuOpen) {
-            setIsMenuOpen(false);
+            setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuOpen: false, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuOpen: false }) })));
             htmlClass('menu-is-closed', true);
             htmlClass('menu-is-open', false);
             (0, hanna_utils_1.focusElement)('.Layout__header__skiplink');
@@ -34,33 +53,24 @@ const useMenuToggling = (doInitialize = true) => {
     (0, useFormatMonitor_js_1.useFormatMonitor)(doInitialize
         ? (media) => {
             if (media.becameHamburger) {
-                setIsMenuActive(true);
+                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: true })));
                 htmlClass('menu-is-active', true);
                 htmlClass('menu-is-closed', true);
             }
             if (media.leftHamburger) {
                 _closeMenu();
-                setIsMenuActive(undefined);
+                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: undefined })));
                 htmlClass('menu-is-active', false);
                 htmlClass('menu-is-closed', false);
             }
         }
         : noop);
-    const { toggleMenu, closeMenu } = (0, react_1.useRef)(doInitialize
-        ? {
-            toggleMenu: () => {
-                if (stateRef.current.isMenuActive) {
-                    stateRef.current.isMenuOpen ? _closeMenu() : _openMenu();
-                }
-            },
-            closeMenu: _closeMenu,
-        }
-        : { toggleMenu: noop, closeMenu: noop }).current;
     return {
         isMenuActive,
         isMenuOpen,
-        toggleMenu,
-        closeMenu,
+        toggleMenu: stateRef.current.toggleMenu,
+        closeMenu: stateRef.current.closeMenu,
+        uiState,
     };
 };
 exports.useMenuToggling = useMenuToggling;

package/utils.d.ts

@@ -1,9 +1,10 @@
 export * from './utils/browserSide.js';
 export * from './utils/config.js';
-export * from './utils/HannaUIState.js';
+export { HannaUIState, useHannaUIState } from './utils/HannaUIState.js';
 export * from './utils/useDidChange.js';
 export * from './utils/useFormatMonitor.js';
 export * from './utils/useGetSVGtext.js';
+export * from './utils/useMenuToggling.js';
 export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';
 /**

package/utils.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHannaUIState = exports.HannaUIState = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./utils/browserSide.js"), exports);
 tslib_1.__exportStar(require("./utils/config.js"), exports);
-tslib_1.__exportStar(require("./utils/HannaUIState.js"), exports);
+var HannaUIState_js_1 = require("./utils/HannaUIState.js");
+Object.defineProperty(exports, "HannaUIState", { enumerable: true, get: function () { return HannaUIState_js_1.HannaUIState; } });
+Object.defineProperty(exports, "useHannaUIState", { enumerable: true, get: function () { return HannaUIState_js_1.useHannaUIState; } });
 tslib_1.__exportStar(require("./utils/useDidChange.js"), exports);
 tslib_1.__exportStar(require("./utils/useFormatMonitor.js"), exports);
 tslib_1.__exportStar(require("./utils/useGetSVGtext.js"), exports);
+tslib_1.__exportStar(require("./utils/useMenuToggling.js"), exports);
 tslib_1.__exportStar(require("./utils/useMixedControlState.js"), exports);
 tslib_1.__exportStar(require("./utils/useScrollbarWidthCSSVar.js"), exports);