@reykjavik/hanna-react 0.10.121 → 0.10.123

package/CHANGELOG.md

@@ -4,6 +4,19 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.123
+
+_2024-03-21_
+
+- feat: Add component `HannaCssLink` for flicker-free CSS URL changes
+- feat: Make `'is'` the default language for `ReadSpeakerPlayer`
+
+## 0.10.122
+
+_2024-03-18_
+
+- fix: Bad module import path in checkbox and radio inputs
+
 ## 0.10.121
 
 _2024-03-14_

package/HannaCssLink.d.ts

@@ -0,0 +1,15 @@
+import { CssModuleToken, getCssBundleUrl } from '@reykjavik/hanna-css';
+import { EitherObj } from '@reykjavik/hanna-utils';
+type HannaCssLinkProps = EitherObj<{
+    tokens: Array<CssModuleToken> | string;
+    options?: Parameters<typeof getCssBundleUrl>[1];
+}, {
+    href: string;
+}>;
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+export declare const HannaCssLink: (props: HannaCssLinkProps) => JSX.Element;
+export {};

package/HannaCssLink.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HannaCssLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hanna_css_1 = require("@reykjavik/hanna-css");
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+const HannaCssLink = (props) => {
+    var _a;
+    const newHref = (_a = props.href) !== null && _a !== void 0 ? _a : (0, hanna_css_1.getCssBundleUrl)(props.tokens, props.options);
+    const linkRef = (0, react_1.useRef)(null);
+    const currentHrefRef = (0, react_1.useRef)(newHref);
+    (0, react_1.useEffect)(() => {
+        const linkElm = linkRef.current;
+        if (!linkElm || newHref === currentHrefRef.current) {
+            return;
+        }
+        let newLinkElm = document.createElement('link');
+        newLinkElm.rel = 'stylesheet';
+        newLinkElm.href = newHref;
+        linkElm.after(newLinkElm);
+        newLinkElm.onload = () => {
+            if (!newLinkElm) {
+                return;
+            }
+            linkElm.href = newHref;
+            currentHrefRef.current = newHref;
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+        return () => {
+            if (!newLinkElm) {
+                return;
+            }
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+    }, [newHref]);
+    return react_1.default.createElement("link", { ref: linkRef, rel: "stylesheet", href: currentHrefRef.current });
+};
+exports.HannaCssLink = HannaCssLink;

package/ReadSpeakerPlayer.d.ts

@@ -15,8 +15,7 @@ export type ReadSpeakerPlayerProps = {
     /**
      * Reading language/locale for the ReadSpeaker player.
      *
-     * If you don't specify a `lang`, the player will try to auto-detect
-     * the language of the page, and pick a default `voice` for that language.
+     * Default: `is`
      *
      * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
      */

package/ReadSpeakerPlayer.js

@@ -16,7 +16,7 @@ const scriptTagSelector = `script#${scriptTagId}`;
  */
 let buttons = 0;
 exports.defaultReadSpeakerPlayerTexts = {
-    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read out loud' },
     is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
     pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
 };
@@ -26,7 +26,7 @@ exports.defaultReadSpeakerPlayerTexts = {
  * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
  */
 const ReadSpeakerPlayer = (props) => {
-    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
+    const { align, float, customerId = '11315', lang = 'is', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
     const { linkText, linkLabel } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
     (0, react_1.useEffect)(() => {
         var _a, _b;

package/_abstract/_TogglerInput.js

@@ -4,7 +4,7 @@ exports.TogglerInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const i18n_js_1 = require("@reykjavik/hanna-utils/i18n.js");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const useDomid_js_1 = require("../utils/useDomid.js");
 const defaultReqText = {
     is: 'Þarf að haka í',
@@ -18,7 +18,7 @@ const TogglerInput = (props) => {
     const errorId = errorMessage && `error${domid}`;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: `${bem}__label__reqstar`, 
         // FIXME: add mo-better i18n thinking
-        title: `${reqText || defaultReqText[i18n_js_1.DEFAULT_LANG]}: ` }, "*"));
+        title: `${reqText || defaultReqText[i18n_1.DEFAULT_LANG]}: ` }, "*"));
     const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
         ' ',

package/esm/HannaCssLink.d.ts

@@ -0,0 +1,15 @@
+import { CssModuleToken, getCssBundleUrl } from '@reykjavik/hanna-css';
+import { EitherObj } from '@reykjavik/hanna-utils';
+type HannaCssLinkProps = EitherObj<{
+    tokens: Array<CssModuleToken> | string;
+    options?: Parameters<typeof getCssBundleUrl>[1];
+}, {
+    href: string;
+}>;
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+export declare const HannaCssLink: (props: HannaCssLinkProps) => JSX.Element;
+export {};

package/esm/HannaCssLink.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react';
+import { getCssBundleUrl } from '@reykjavik/hanna-css';
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+export const HannaCssLink = (props) => {
+    var _a;
+    const newHref = (_a = props.href) !== null && _a !== void 0 ? _a : getCssBundleUrl(props.tokens, props.options);
+    const linkRef = useRef(null);
+    const currentHrefRef = useRef(newHref);
+    useEffect(() => {
+        const linkElm = linkRef.current;
+        if (!linkElm || newHref === currentHrefRef.current) {
+            return;
+        }
+        let newLinkElm = document.createElement('link');
+        newLinkElm.rel = 'stylesheet';
+        newLinkElm.href = newHref;
+        linkElm.after(newLinkElm);
+        newLinkElm.onload = () => {
+            if (!newLinkElm) {
+                return;
+            }
+            linkElm.href = newHref;
+            currentHrefRef.current = newHref;
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+        return () => {
+            if (!newLinkElm) {
+                return;
+            }
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+    }, [newHref]);
+    return React.createElement("link", { ref: linkRef, rel: "stylesheet", href: currentHrefRef.current });
+};

package/esm/ReadSpeakerPlayer.d.ts

@@ -15,8 +15,7 @@ export type ReadSpeakerPlayerProps = {
     /**
      * Reading language/locale for the ReadSpeaker player.
      *
-     * If you don't specify a `lang`, the player will try to auto-detect
-     * the language of the page, and pick a default `voice` for that language.
+     * Default: `is`
      *
      * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
      */

package/esm/ReadSpeakerPlayer.js

@@ -12,7 +12,7 @@ const scriptTagSelector = `script#${scriptTagId}`;
  */
 let buttons = 0;
 export const defaultReadSpeakerPlayerTexts = {
-    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read out loud' },
     is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
     pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
 };
@@ -22,7 +22,7 @@ export const defaultReadSpeakerPlayerTexts = {
  * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
  */
 export const ReadSpeakerPlayer = (props) => {
-    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
+    const { align, float, customerId = '11315', lang = 'is', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
     const { linkText, linkLabel } = getTexts({ lang: lang.slice(0, 2), texts }, defaultReadSpeakerPlayerTexts);
     useEffect(() => {
         var _a, _b;

package/esm/_abstract/_TogglerInput.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n.js';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
 import { useDomid } from '../utils/useDomid.js';
 const defaultReqText = {
     is: 'Þarf að haka í',

package/esm/index.d.ts

@@ -59,6 +59,7 @@
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />
+/// <reference path="./HannaCssLink.d.tsx" />
 /// <reference path="./GridBlocks.d.tsx" />
 /// <reference path="./Gallery.d.tsx" />
 /// <reference path="./FormField.d.tsx" />

package/index.d.ts

@@ -59,6 +59,7 @@
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />
+/// <reference path="./HannaCssLink.d.tsx" />
 /// <reference path="./GridBlocks.d.tsx" />
 /// <reference path="./Gallery.d.tsx" />
 /// <reference path="./FormField.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.121",
+	"version": "0.10.123",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -289,6 +289,10 @@
 			"import": "./esm/Heading.js",
 			"require": "./Heading.js"
 		},
+		"./HannaCssLink": {
+			"import": "./esm/HannaCssLink.js",
+			"require": "./HannaCssLink.js"
+		},
 		"./GridBlocks": {
 			"import": "./esm/GridBlocks.js",
 			"require": "./GridBlocks.js"