@reykjavik/hanna-react 0.10.107 → 0.10.109

package/BasicTable.js

@@ -21,8 +21,7 @@ const BasicTable = (props) => {
                 : align === 'right'
                     ? 'BasicTable--align--' + align
                     : undefined,
-        ], wrapperProps: props.wrapperProps, innerWrap // TODO: Remove this once the CSS style-server has been updated
-        : true },
+        ], wrapperProps: props.wrapperProps },
         react_1.default.createElement(_Table_js_1.Table, Object.assign({ className: (0, classUtils_1.modifiedClass)('BasicTable', [
                 props.compact && 'compact',
                 type && tableTypes[type],

package/CHANGELOG.md

@@ -4,6 +4,23 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.109
+
+_2023-10-25_
+
+- feat: Allow simple JSX in `HeroBlockProps.title`
+- feat: Stop inserting `.TableWrapper__scroller` inner wrapping element
+- fix: Conflicted/ambigious `wrapperProps` element type for `BasicTableProps`
+- fix: Make `Pagination` root-element into a `<nav />`
+
+## 0.10.108
+
+_2023-10-09_
+
+- fix: Add `rel="nofollow"` to all `Pagination` links
+- fix: Fix esm import inside `useDomid` causing build errors in React<=v17
+- fix: Make `useDomid` more efficient in React<=v17
+
 ## 0.10.107
 
 _2023-10-05_

package/HeroBlock.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
@@ -11,8 +12,8 @@ type HeroBlockImageProps = {
     illustration?: undefined;
 };
 export type HeroBlockProps = {
-    title: string;
-    summary: string | JSX.Element;
+    title: string | ReactElement;
+    summary: string | ReactElement;
     primaryButton?: ButtonProps;
     secondaryButton?: ButtonProps;
 } & HeroBlockImageProps & WrapperElmProps & DeprecatedSeenProp;

package/Pagination.js

@@ -22,7 +22,7 @@ const PaginationButton = (props) => {
         'aria-current': modifier === 'active' || undefined,
         'aria-controls': props.ariaControls,
     };
-    return href && !disabled ? (react_1.default.createElement(_Link_js_1.Link, Object.assign({ href: href(page) }, btnProps))) : (react_1.default.createElement("button", Object.assign({ type: props.type, disabled: disabled }, btnProps)));
+    return href && !disabled ? (react_1.default.createElement(_Link_js_1.Link, Object.assign({ href: href(page), rel: "nofollow" }, btnProps))) : (react_1.default.createElement("button", Object.assign({ type: props.type, disabled: disabled }, btnProps)));
 };
 // ---------------------------------------------------------------------------
 const getBtnRenderer = (cfg) => {
@@ -74,7 +74,7 @@ exports.Pagination = (0, react_1.memo)((props) => {
     const pageList = (0, Pagination_privates_js_1.generatePageList)(current, pageCount);
     const texts = (0, i18n_1.getTexts)(props, exports.defaultPaginationTexts);
     const btn = getBtnRenderer(props);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Pagination', null, (wrapperProps || {}).className), "aria-label": props.title || texts.defaultTitle.replace(/\$\{pageCount\}/, `${pageCount}`) }),
+    return (react_1.default.createElement("nav", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Pagination', null, (wrapperProps || {}).className), "aria-label": props.title || texts.defaultTitle.replace(/\$\{pageCount\}/, `${pageCount}`) }),
         btn({
             page: current + 1,
             modifier: 'next',

package/_abstract/_Layouts.d.ts

@@ -1,4 +1,5 @@
 export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
+export declare const renderLegacyLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
 export declare const issueSiteNameWarningInDev: (props: {
     siteName?: string;
 }) => void;

package/_abstract/_Layouts.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.issueSiteNameWarningInDev = exports.renderLayoutHomeLink = void 0;
+exports.issueSiteNameWarningInDev = exports.renderLegacyLayoutHomeLink = exports.renderLayoutHomeLink = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const assets_1 = require("@reykjavik/hanna-utils/assets");
@@ -15,6 +15,14 @@ const renderLayoutHomeLink = (bem, logoLink, siteName) => (react_1.default.creat
     ' '));
 exports.renderLayoutHomeLink = renderLayoutHomeLink;
 // ---------------------------------------------------------------------------
+const renderLegacyLayoutHomeLink = (bem, logoLink, siteName) => (react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__logo", href: logoLink },
+    ' ',
+    react_1.default.createElement(_Image_js_1.Image, { bem: undefined, inline: true, src: (0, assets_1.getRvkLogoUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
+    ' ',
+    siteName,
+    ' '));
+exports.renderLegacyLayoutHomeLink = renderLegacyLayoutHomeLink;
+// ---------------------------------------------------------------------------
 const issueSiteNameWarningInDev = (props) => {
     if (process.env.NODE_ENV !== 'production') {
         if (!('siteName' in props)) {

package/_abstract/_Table.d.ts

@@ -64,8 +64,8 @@ declare const TableSection: ({ section, cols, Tag, getRowProps }: TableSectionPr
 export type TableProps = TableData & {
     cols?: TableCols;
     rowProps?: HTMLProps<'tr'> | RowPropsFunction;
-} & WrapperElmProps<'table'>;
+};
 export declare const Table: React.MemoExoticComponent<(props: TableProps & {
     className?: string;
-}) => JSX.Element>;
+} & WrapperElmProps<'table'>) => JSX.Element>;
 export {};

package/esm/BasicTable.js

@@ -17,8 +17,7 @@ export const BasicTable = (props) => {
                 : align === 'right'
                     ? 'BasicTable--align--' + align
                     : undefined,
-        ], wrapperProps: props.wrapperProps, innerWrap // TODO: Remove this once the CSS style-server has been updated
-        : true },
+        ], wrapperProps: props.wrapperProps },
         React.createElement(Table, Object.assign({ className: modifiedClass('BasicTable', [
                 props.compact && 'compact',
                 type && tableTypes[type],

package/esm/HeroBlock.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
@@ -11,8 +12,8 @@ type HeroBlockImageProps = {
     illustration?: undefined;
 };
 export type HeroBlockProps = {
-    title: string;
-    summary: string | JSX.Element;
+    title: string | ReactElement;
+    summary: string | ReactElement;
     primaryButton?: ButtonProps;
     secondaryButton?: ButtonProps;
 } & HeroBlockImageProps & WrapperElmProps & DeprecatedSeenProp;

package/esm/Pagination.js

@@ -18,7 +18,7 @@ const PaginationButton = (props) => {
         'aria-current': modifier === 'active' || undefined,
         'aria-controls': props.ariaControls,
     };
-    return href && !disabled ? (React.createElement(Link, Object.assign({ href: href(page) }, btnProps))) : (React.createElement("button", Object.assign({ type: props.type, disabled: disabled }, btnProps)));
+    return href && !disabled ? (React.createElement(Link, Object.assign({ href: href(page), rel: "nofollow" }, btnProps))) : (React.createElement("button", Object.assign({ type: props.type, disabled: disabled }, btnProps)));
 };
 // ---------------------------------------------------------------------------
 const getBtnRenderer = (cfg) => {
@@ -70,7 +70,7 @@ export const Pagination = memo((props) => {
     const pageList = generatePageList(current, pageCount);
     const texts = getTexts(props, defaultPaginationTexts);
     const btn = getBtnRenderer(props);
-    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Pagination', null, (wrapperProps || {}).className), "aria-label": props.title || texts.defaultTitle.replace(/\$\{pageCount\}/, `${pageCount}`) }),
+    return (React.createElement("nav", Object.assign({}, wrapperProps, { className: modifiedClass('Pagination', null, (wrapperProps || {}).className), "aria-label": props.title || texts.defaultTitle.replace(/\$\{pageCount\}/, `${pageCount}`) }),
         btn({
             page: current + 1,
             modifier: 'next',

package/esm/_abstract/_Layouts.d.ts

@@ -1,4 +1,5 @@
 export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
+export declare const renderLegacyLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
 export declare const issueSiteNameWarningInDev: (props: {
     siteName?: string;
 }) => void;

package/esm/_abstract/_Layouts.js

@@ -10,6 +10,13 @@ export const renderLayoutHomeLink = (bem, logoLink, siteName) => (React.createEl
     siteName && React.createElement("span", { className: `${bem}__header__sitename` }, siteName),
     ' '));
 // ---------------------------------------------------------------------------
+export const renderLegacyLayoutHomeLink = (bem, logoLink, siteName) => (React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
+    ' ',
+    React.createElement(Image, { bem: undefined, inline: true, src: getRvkLogoUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
+    ' ',
+    siteName,
+    ' '));
+// ---------------------------------------------------------------------------
 export const issueSiteNameWarningInDev = (props) => {
     if (process.env.NODE_ENV !== 'production') {
         if (!('siteName' in props)) {

package/esm/_abstract/_Table.d.ts

@@ -64,8 +64,8 @@ declare const TableSection: ({ section, cols, Tag, getRowProps }: TableSectionPr
 export type TableProps = TableData & {
     cols?: TableCols;
     rowProps?: HTMLProps<'tr'> | RowPropsFunction;
-} & WrapperElmProps<'table'>;
+};
 export declare const Table: React.MemoExoticComponent<(props: TableProps & {
     className?: string;
-}) => JSX.Element>;
+} & WrapperElmProps<'table'>) => JSX.Element>;
 export {};

package/esm/utils/useDomid.d.ts

@@ -1,8 +1,10 @@
 /**
  * Returns a stable, unique ID string.
  *
- * Uses useId from React@18 when available, but falls back on a custom id
- * generator. (The custom generator causes angry hydration warnings in dev
- * mode).
+ * Uses useId from React (v18+) when available, falling back on a custom
+ * unique id generator.
+ *
+ * (NOTE: The custom generator causes angry hydration warnings in dev
+ * mode and there's nothing we can do about it.)
  */
 export declare const useDomid: (staticId?: string) => string;

package/esm/utils/useDomid.js

@@ -1,17 +1,25 @@
-import * as React from 'react';
+import React from 'react';
 import domid from '@hugsmidjan/qj/domid';
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = React.useId;
 /**
  * Returns a stable, unique ID string.
  *
- * Uses useId from React@18 when available, but falls back on a custom id
- * generator. (The custom generator causes angry hydration warnings in dev
- * mode).
+ * Uses useId from React (v18+) when available, falling back on a custom
+ * unique id generator.
+ *
+ * (NOTE: The custom generator causes angry hydration warnings in dev
+ * mode and there's nothing we can do about it.)
  */
 export const useDomid = useId
     ? (staticId) => {
         const id = useId();
         return staticId || id;
     }
-    : (staticId) => React.useRef(staticId || domid()).current;
+    : (staticId) => {
+        const idRef = React.useRef();
+        if (!idRef.current) {
+            idRef.current = staticId || domid();
+        }
+        return idRef.current;
+    };

package/esm/utils/useScrollEdgeDetect.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { LegacyRef, RefObject } from 'react';
 type ScrollAxis = 'horizontal' | 'vertical';
 type AtState = {
     start: boolean;
@@ -11,5 +11,5 @@ export type ScrollEdgeDetectOptions<RefElm extends HTMLElement = HTMLElement> =
     /** Initial `at` status */
     startAt?: AtState;
 };
-export declare const useScrollEdgeDetect: <RefElm extends HTMLElement = HTMLElement>(options: ScrollAxis | ScrollEdgeDetectOptions<RefElm>, scrollerRef?: RefObject<RefElm> | undefined) => [scrollElmRef: RefObject<RefElm>, at: AtState];
+export declare const useScrollEdgeDetect: <RefElm extends HTMLElement = HTMLElement>(options: ScrollAxis | ScrollEdgeDetectOptions<RefElm>, scrollerRef?: RefObject<RefElm> | undefined) => [scrollElmRef: LegacyRef<RefElm>, at: AtState];
 export {};

package/esm/utils/useScrollEdgeDetect.js

@@ -1,38 +1,44 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import throttle from '@hugsmidjan/qj/throttle';
 const tolerance = 8; // px
 const throttleMs = 100;
 export const useScrollEdgeDetect = (options, scrollerRef) => {
     const opts = typeof options === 'string' ? { axis: options } : options;
-    const _scrollerRef = useRef(null);
-    scrollerRef = scrollerRef || _scrollerRef;
     const [at, setAt] = useState(opts.startAt || { start: true, end: true });
-    const scrollerRefElm = scrollerRef.current;
+    const [scrollerRefElm, _setScrollerRefElm] = useState(null);
+    const setScrollerRefElm = (elm) => {
+        if (scrollerRef && elm) {
+            scrollerRef.current = elm;
+        }
+        _setScrollerRefElm(elm);
+    };
     const { getElm, axis } = opts;
     useEffect(() => {
         const scrollerElm = scrollerRefElm && getElm ? getElm(scrollerRefElm) : scrollerRefElm;
         if (!(scrollerElm instanceof HTMLElement)) {
             return;
         }
-        const checkScroll = throttle(() => setAt((at) => {
-            let scroll, offsetSize, totalSize;
-            if (axis === 'horizontal') {
-                scroll = scrollerElm.scrollLeft;
-                offsetSize = scrollerElm.offsetWidth;
-                totalSize = scrollerElm.scrollWidth;
-            }
-            else {
-                scroll = scrollerElm.scrollTop;
-                offsetSize = scrollerElm.offsetHeight;
-                totalSize = scrollerElm.scrollHeight;
-            }
-            const start = scroll < tolerance;
-            const end = totalSize - (offsetSize + scroll) < tolerance;
-            if (at.start === start && at.end === end) {
-                return at;
-            }
-            return { start, end };
-        }), throttleMs);
+        const checkScroll = throttle(() => {
+            setAt((at) => {
+                let scroll, offsetSize, totalSize;
+                if (axis === 'horizontal') {
+                    scroll = scrollerElm.scrollLeft;
+                    offsetSize = scrollerElm.offsetWidth;
+                    totalSize = scrollerElm.scrollWidth;
+                }
+                else {
+                    scroll = scrollerElm.scrollTop;
+                    offsetSize = scrollerElm.offsetHeight;
+                    totalSize = scrollerElm.scrollHeight;
+                }
+                const start = scroll < tolerance;
+                const end = totalSize - (offsetSize + scroll) < tolerance;
+                if (at.start === start && at.end === end) {
+                    return at;
+                }
+                return { start, end };
+            });
+        }, throttleMs);
         scrollerElm.addEventListener('scroll', checkScroll);
         window.addEventListener('resize', checkScroll);
         checkScroll();
@@ -41,5 +47,5 @@ export const useScrollEdgeDetect = (options, scrollerRef) => {
             window.removeEventListener('resize', checkScroll);
         };
     }, [scrollerRefElm, getElm, axis]);
-    return [scrollerRef, at];
+    return [setScrollerRefElm, at];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.107",
+	"version": "0.10.109",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",

package/utils/useDomid.d.ts

@@ -1,8 +1,10 @@
 /**
  * Returns a stable, unique ID string.
  *
- * Uses useId from React@18 when available, but falls back on a custom id
- * generator. (The custom generator causes angry hydration warnings in dev
- * mode).
+ * Uses useId from React (v18+) when available, falling back on a custom
+ * unique id generator.
+ *
+ * (NOTE: The custom generator causes angry hydration warnings in dev
+ * mode and there's nothing we can do about it.)
  */
 export declare const useDomid: (staticId?: string) => string;

package/utils/useDomid.js

@@ -2,20 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDomid = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
-const useId = React.useId;
+const useId = react_1.default.useId;
 /**
  * Returns a stable, unique ID string.
  *
- * Uses useId from React@18 when available, but falls back on a custom id
- * generator. (The custom generator causes angry hydration warnings in dev
- * mode).
+ * Uses useId from React (v18+) when available, falling back on a custom
+ * unique id generator.
+ *
+ * (NOTE: The custom generator causes angry hydration warnings in dev
+ * mode and there's nothing we can do about it.)
  */
 exports.useDomid = useId
     ? (staticId) => {
         const id = useId();
         return staticId || id;
     }
-    : (staticId) => React.useRef(staticId || (0, domid_1.default)()).current;
+    : (staticId) => {
+        const idRef = react_1.default.useRef();
+        if (!idRef.current) {
+            idRef.current = staticId || (0, domid_1.default)();
+        }
+        return idRef.current;
+    };

package/utils/useScrollEdgeDetect.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { LegacyRef, RefObject } from 'react';
 type ScrollAxis = 'horizontal' | 'vertical';
 type AtState = {
     start: boolean;
@@ -11,5 +11,5 @@ export type ScrollEdgeDetectOptions<RefElm extends HTMLElement = HTMLElement> =
     /** Initial `at` status */
     startAt?: AtState;
 };
-export declare const useScrollEdgeDetect: <RefElm extends HTMLElement = HTMLElement>(options: ScrollAxis | ScrollEdgeDetectOptions<RefElm>, scrollerRef?: RefObject<RefElm> | undefined) => [scrollElmRef: RefObject<RefElm>, at: AtState];
+export declare const useScrollEdgeDetect: <RefElm extends HTMLElement = HTMLElement>(options: ScrollAxis | ScrollEdgeDetectOptions<RefElm>, scrollerRef?: RefObject<RefElm> | undefined) => [scrollElmRef: LegacyRef<RefElm>, at: AtState];
 export {};

package/utils/useScrollEdgeDetect.js

@@ -8,35 +8,41 @@ const tolerance = 8; // px
 const throttleMs = 100;
 const useScrollEdgeDetect = (options, scrollerRef) => {
     const opts = typeof options === 'string' ? { axis: options } : options;
-    const _scrollerRef = (0, react_1.useRef)(null);
-    scrollerRef = scrollerRef || _scrollerRef;
     const [at, setAt] = (0, react_1.useState)(opts.startAt || { start: true, end: true });
-    const scrollerRefElm = scrollerRef.current;
+    const [scrollerRefElm, _setScrollerRefElm] = (0, react_1.useState)(null);
+    const setScrollerRefElm = (elm) => {
+        if (scrollerRef && elm) {
+            scrollerRef.current = elm;
+        }
+        _setScrollerRefElm(elm);
+    };
     const { getElm, axis } = opts;
     (0, react_1.useEffect)(() => {
         const scrollerElm = scrollerRefElm && getElm ? getElm(scrollerRefElm) : scrollerRefElm;
         if (!(scrollerElm instanceof HTMLElement)) {
             return;
         }
-        const checkScroll = (0, throttle_1.default)(() => setAt((at) => {
-            let scroll, offsetSize, totalSize;
-            if (axis === 'horizontal') {
-                scroll = scrollerElm.scrollLeft;
-                offsetSize = scrollerElm.offsetWidth;
-                totalSize = scrollerElm.scrollWidth;
-            }
-            else {
-                scroll = scrollerElm.scrollTop;
-                offsetSize = scrollerElm.offsetHeight;
-                totalSize = scrollerElm.scrollHeight;
-            }
-            const start = scroll < tolerance;
-            const end = totalSize - (offsetSize + scroll) < tolerance;
-            if (at.start === start && at.end === end) {
-                return at;
-            }
-            return { start, end };
-        }), throttleMs);
+        const checkScroll = (0, throttle_1.default)(() => {
+            setAt((at) => {
+                let scroll, offsetSize, totalSize;
+                if (axis === 'horizontal') {
+                    scroll = scrollerElm.scrollLeft;
+                    offsetSize = scrollerElm.offsetWidth;
+                    totalSize = scrollerElm.scrollWidth;
+                }
+                else {
+                    scroll = scrollerElm.scrollTop;
+                    offsetSize = scrollerElm.offsetHeight;
+                    totalSize = scrollerElm.scrollHeight;
+                }
+                const start = scroll < tolerance;
+                const end = totalSize - (offsetSize + scroll) < tolerance;
+                if (at.start === start && at.end === end) {
+                    return at;
+                }
+                return { start, end };
+            });
+        }, throttleMs);
         scrollerElm.addEventListener('scroll', checkScroll);
         window.addEventListener('resize', checkScroll);
         checkScroll();
@@ -45,6 +51,6 @@ const useScrollEdgeDetect = (options, scrollerRef) => {
             window.removeEventListener('resize', checkScroll);
         };
     }, [scrollerRefElm, getElm, axis]);
-    return [scrollerRef, at];
+    return [setScrollerRefElm, at];
 };
 exports.useScrollEdgeDetect = useScrollEdgeDetect;