@reykjavik/hanna-react 0.10.90 → 0.10.92

package/CHANGELOG.md

@@ -4,7 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.90
+## 0.10.92
+
+_2023-06-06_
+
+- feat: Add component `ReadSpeakerPlayer` and a `stopReading` helper
+- fix: Update dependencies for minor esm and `Modal`-related bugfixes
+
+## 0.10.90 – 0.10.91
 
 _2023-06-01_
 

package/Datepicker.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const react_datepicker_1 = require("react-datepicker"); // Docs: https://reactdatepicker.com/
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"));
 const index_js_2 = tslib_1.__importDefault(require("date-fns/locale/pl/index.js"));
+const ReactDatepicker_js_1 = require("./_mixed_export_resolution_/ReactDatepicker.js"); // Docs: https://reactdatepicker.com/
 const FormField_js_1 = require("./FormField.js");
-(0, react_datepicker_1.registerLocale)('is', index_js_1.default);
-(0, react_datepicker_1.registerLocale)('pl', index_js_2.default);
+(0, ReactDatepicker_js_1.registerLocale)('is', index_js_1.default);
+(0, ReactDatepicker_js_1.registerLocale)('pl', index_js_2.default);
 const getDateDiff = (date, diff) => {
     const newDate = new Date(date);
     newDate.setDate(newDate.getDate() + diff);
@@ -65,7 +65,7 @@ const Datepicker = (props) => {
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
                     }) }, addFocusProps()),
-                react_1.default.createElement(react_datepicker_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: 
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: 
                     // NOTE: Force all dateFormat values into Array<string> to temporarily work around
                     // a bug in the current version of react-datepicker where invalid **string** values
                     // are re-parsed with `new Date()`, causing surprising (weird) false positives

package/ReadSpeakerPlayer.d.ts

@@ -0,0 +1,64 @@
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { HTMLProps } from './utils.js';
+export type ReadSpeakerPlayerI18n = {
+    linkText: string;
+    linkLabel?: string;
+};
+export declare const defaultReadSpeakerPlayerTexts: DefaultTexts<ReadSpeakerPlayerI18n>;
+export type ReadSpeakerPlayerProps = {
+    /**
+     * Your ReadSpeaker account/customer ID
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#customer-id
+     */
+    customerId?: string;
+    /**
+     * 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.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
+     */
+    lang?: Lowercase<string>;
+    /**
+     * Reading voice for the ReadSpeaker player.
+     *
+     * This prop only makes sense if you specfy a reading `lang`, as
+     * the voices are language-specific.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#voice
+     */
+    voice?: string;
+    /**
+     * The DOM `id=""` of the element to read.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-id
+     */
+    readId?: string;
+    /**
+     * The DOM class-name of the element(s) to read
+     *
+     * Comma-separated list of class-names may also work...
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-class
+     */
+    readClass?: string;
+    texts?: ReadSpeakerPlayerI18n;
+    align?: 'left' | 'right';
+    /** Tooggles CSS float layout */
+    float?: boolean;
+    /** Custom HTML attributes for the wrapper element. */
+    wrapperProps?: HTMLProps<'div'>;
+};
+/**
+ * Embeds a ReadSpeaker player in the page
+ *
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
+ */
+export declare const ReadSpeakerPlayer: (props: ReadSpeakerPlayerProps) => JSX.Element;
+/**
+ * Run this function if you find that the player keeps reading when a user
+ * swaps pages.
+ */
+export declare const stopReading: () => void | undefined;

package/ReadSpeakerPlayer.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopReading = exports.ReadSpeakerPlayer = exports.defaultReadSpeakerPlayerTexts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const scriptTagId = 'rs_req_Init';
+const scriptTagSelector = `script#${scriptTagId}`;
+let buttons = 0;
+exports.defaultReadSpeakerPlayerTexts = {
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
+    pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
+};
+/**
+ * Embeds a ReadSpeaker player in the page
+ *
+ * @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 { linkText, linkLabel } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (buttons < 0) {
+            return;
+        }
+        if (buttons === 0) {
+            if (document.querySelector(scriptTagSelector)) {
+                buttons = -1;
+                return;
+            }
+            const script = document.createElement('script');
+            script.id = scriptTagId;
+            script.src = `https://cdn-eu.readspeaker.com/script/${customerId}/webReader/webReader.js?pids=wr`;
+            script.onload = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents(); };
+            script.async = true;
+            document.head.appendChild(script);
+        }
+        buttons++;
+        (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents();
+        return () => {
+            var _a;
+            buttons--;
+            if (buttons === 0) {
+                (_a = document.querySelector(scriptTagSelector)) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+    // We're not trying to support dynamic changes to `customerId`
+    // or multiple different `customerId`s on the same page.
+    // If you try that, things will be weird and wonky.
+    ]);
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, getBemClass_1.default)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+        react_1.default.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
+            react_1.default.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
+                    customerid: customerId,
+                    lang,
+                    voice: lang && voice,
+                    autoLang: !lang ? 'true' : 'false',
+                    readclass: readClass,
+                    readid: readId,
+                })}` },
+                react_1.default.createElement("span", { className: "rsbtn_left rsimg rspart" },
+                    react_1.default.createElement("span", { className: "rsbtn_text" },
+                        react_1.default.createElement("span", null, linkText))),
+                react_1.default.createElement("span", { className: "rsbtn_right rsimg rsplay rspart" })))));
+};
+exports.ReadSpeakerPlayer = ReadSpeakerPlayer;
+/**
+ * Run this function if you find that the player keeps reading when a user
+ * swaps pages.
+ */
+const stopReading = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.destroyActivePlayer(); };
+exports.stopReading = stopReading;

package/_mixed_export_resolution_/ReactDatepicker.d.ts

@@ -0,0 +1,6 @@
+import * as reactDropzonePkg from 'react-datepicker';
+export declare const ReactDatePicker: typeof reactDropzonePkg.ReactDatePicker;
+export declare const registerLocale: typeof reactDropzonePkg.registerLocale;
+export declare const setDefaultLocale: typeof reactDropzonePkg.setDefaultLocale;
+export declare const getDefaultLocale: typeof reactDropzonePkg.getDefaultLocale;
+export declare const CalendarContainer: typeof reactDropzonePkg.CalendarContainer;

package/_mixed_export_resolution_/ReactDatepicker.js

@@ -0,0 +1,17 @@
+"use strict";
+// See <file://./_WAT.md> for info on why this file exists
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarContainer = exports.getDefaultLocale = exports.setDefaultLocale = exports.registerLocale = exports.ReactDatePicker = void 0;
+const tslib_1 = require("tslib");
+const reactDropzonePkg = tslib_1.__importStar(require("react-datepicker")); // Docs: https://reactdatepicker.com/
+const _default = reactDropzonePkg.default;
+// This defensive code is required to get around the fact that react-dropzone
+// mixes default and named exports.
+// Depending whether this module is run as ESM or CJS, then `_default` may be
+// either the actual default export or an object with a default property.
+// Rejoice in the woeful borderlands of modern ESM and legacy CJS interop.
+exports.ReactDatePicker = 'default' in _default ? _default.default : _default;
+exports.registerLocale = reactDropzonePkg.registerLocale;
+exports.setDefaultLocale = reactDropzonePkg.setDefaultLocale;
+exports.getDefaultLocale = reactDropzonePkg.getDefaultLocale;
+exports.CalendarContainer = reactDropzonePkg.CalendarContainer;

package/esm/Datepicker.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ReactDatePicker, registerLocale } from 'react-datepicker'; // Docs: https://reactdatepicker.com/
 import { useDomid } from '@hugsmidjan/react/hooks';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 import is from 'date-fns/locale/is/index.js';
 import pl from 'date-fns/locale/pl/index.js';
+import { ReactDatePicker, registerLocale, } from './_mixed_export_resolution_/ReactDatepicker.js'; // Docs: https://reactdatepicker.com/
 import { FormField } from './FormField.js';
 registerLocale('is', is);
 registerLocale('pl', pl);

package/esm/ReadSpeakerPlayer.d.ts

@@ -0,0 +1,64 @@
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { HTMLProps } from './utils.js';
+export type ReadSpeakerPlayerI18n = {
+    linkText: string;
+    linkLabel?: string;
+};
+export declare const defaultReadSpeakerPlayerTexts: DefaultTexts<ReadSpeakerPlayerI18n>;
+export type ReadSpeakerPlayerProps = {
+    /**
+     * Your ReadSpeaker account/customer ID
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#customer-id
+     */
+    customerId?: string;
+    /**
+     * 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.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
+     */
+    lang?: Lowercase<string>;
+    /**
+     * Reading voice for the ReadSpeaker player.
+     *
+     * This prop only makes sense if you specfy a reading `lang`, as
+     * the voices are language-specific.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#voice
+     */
+    voice?: string;
+    /**
+     * The DOM `id=""` of the element to read.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-id
+     */
+    readId?: string;
+    /**
+     * The DOM class-name of the element(s) to read
+     *
+     * Comma-separated list of class-names may also work...
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-class
+     */
+    readClass?: string;
+    texts?: ReadSpeakerPlayerI18n;
+    align?: 'left' | 'right';
+    /** Tooggles CSS float layout */
+    float?: boolean;
+    /** Custom HTML attributes for the wrapper element. */
+    wrapperProps?: HTMLProps<'div'>;
+};
+/**
+ * Embeds a ReadSpeaker player in the page
+ *
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
+ */
+export declare const ReadSpeakerPlayer: (props: ReadSpeakerPlayerProps) => JSX.Element;
+/**
+ * Run this function if you find that the player keeps reading when a user
+ * swaps pages.
+ */
+export declare const stopReading: () => void | undefined;

package/esm/ReadSpeakerPlayer.js

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+const scriptTagId = 'rs_req_Init';
+const scriptTagSelector = `script#${scriptTagId}`;
+let buttons = 0;
+export const defaultReadSpeakerPlayerTexts = {
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
+    pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
+};
+/**
+ * Embeds a ReadSpeaker player in the page
+ *
+ * @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 { linkText, linkLabel } = getTexts({ lang: lang.slice(0, 2), texts }, defaultReadSpeakerPlayerTexts);
+    useEffect(() => {
+        var _a, _b;
+        if (buttons < 0) {
+            return;
+        }
+        if (buttons === 0) {
+            if (document.querySelector(scriptTagSelector)) {
+                buttons = -1;
+                return;
+            }
+            const script = document.createElement('script');
+            script.id = scriptTagId;
+            script.src = `https://cdn-eu.readspeaker.com/script/${customerId}/webReader/webReader.js?pids=wr`;
+            script.onload = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents(); };
+            script.async = true;
+            document.head.appendChild(script);
+        }
+        buttons++;
+        (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents();
+        return () => {
+            var _a;
+            buttons--;
+            if (buttons === 0) {
+                (_a = document.querySelector(scriptTagSelector)) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+    // We're not trying to support dynamic changes to `customerId`
+    // or multiple different `customerId`s on the same page.
+    // If you try that, things will be weird and wonky.
+    ]);
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: getBemClass('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+        React.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
+            React.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
+                    customerid: customerId,
+                    lang,
+                    voice: lang && voice,
+                    autoLang: !lang ? 'true' : 'false',
+                    readclass: readClass,
+                    readid: readId,
+                })}` },
+                React.createElement("span", { className: "rsbtn_left rsimg rspart" },
+                    React.createElement("span", { className: "rsbtn_text" },
+                        React.createElement("span", null, linkText))),
+                React.createElement("span", { className: "rsbtn_right rsimg rsplay rspart" })))));
+};
+/**
+ * Run this function if you find that the player keeps reading when a user
+ * swaps pages.
+ */
+export const stopReading = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.destroyActivePlayer(); };

package/esm/_mixed_export_resolution_/ReactDatepicker.d.ts

@@ -0,0 +1,6 @@
+import * as reactDropzonePkg from 'react-datepicker';
+export declare const ReactDatePicker: typeof reactDropzonePkg.ReactDatePicker;
+export declare const registerLocale: typeof reactDropzonePkg.registerLocale;
+export declare const setDefaultLocale: typeof reactDropzonePkg.setDefaultLocale;
+export declare const getDefaultLocale: typeof reactDropzonePkg.getDefaultLocale;
+export declare const CalendarContainer: typeof reactDropzonePkg.CalendarContainer;

package/esm/_mixed_export_resolution_/ReactDatepicker.js

@@ -0,0 +1,13 @@
+// See <file://./_WAT.md> for info on why this file exists
+import * as reactDropzonePkg from 'react-datepicker'; // Docs: https://reactdatepicker.com/
+const _default = reactDropzonePkg.default;
+// This defensive code is required to get around the fact that react-dropzone
+// mixes default and named exports.
+// Depending whether this module is run as ESM or CJS, then `_default` may be
+// either the actual default export or an object with a default property.
+// Rejoice in the woeful borderlands of modern ESM and legacy CJS interop.
+export const ReactDatePicker = 'default' in _default ? _default.default : _default;
+export const registerLocale = reactDropzonePkg.registerLocale;
+export const setDefaultLocale = reactDropzonePkg.setDefaultLocale;
+export const getDefaultLocale = reactDropzonePkg.getDefaultLocale;
+export const CalendarContainer = reactDropzonePkg.CalendarContainer;

package/esm/index.d.ts

@@ -27,6 +27,7 @@
 /// <reference path="./RowBlockColumn.d.tsx" />
 /// <reference path="./RowBlock.d.tsx" />
 /// <reference path="./RelatedLinks.d.tsx" />
+/// <reference path="./ReadSpeakerPlayer.d.tsx" />
 /// <reference path="./RadioGroup.d.tsx" />
 /// <reference path="./RadioButtonsGroup.d.tsx" />
 /// <reference path="./PullQuote.d.tsx" />

package/index.d.ts

@@ -27,6 +27,7 @@
 /// <reference path="./RowBlockColumn.d.tsx" />
 /// <reference path="./RowBlock.d.tsx" />
 /// <reference path="./RelatedLinks.d.tsx" />
+/// <reference path="./ReadSpeakerPlayer.d.tsx" />
 /// <reference path="./RadioGroup.d.tsx" />
 /// <reference path="./RadioButtonsGroup.d.tsx" />
 /// <reference path="./PullQuote.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.90",
+	"version": "0.10.92",
 	"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.19.0",
-		"@hugsmidjan/react": "^0.4.31",
+		"@hugsmidjan/qj": "^4.20.0",
+		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.2",
-		"@reykjavik/hanna-utils": "^0.2.5",
+		"@reykjavik/hanna-utils": "^0.2.6",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
@@ -161,6 +161,10 @@
 			"import": "./esm/RelatedLinks.js",
 			"require": "./RelatedLinks.js"
 		},
+		"./ReadSpeakerPlayer": {
+			"import": "./esm/ReadSpeakerPlayer.js",
+			"require": "./ReadSpeakerPlayer.js"
+		},
 		"./RadioGroup": {
 			"import": "./esm/RadioGroup.js",
 			"require": "./RadioGroup.js"