@reykjavik/hanna-react 0.10.128 → 0.10.130

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.130
+
+_2024-07-23_
+
+- `FocusTrap`:
+  - fix: Account for hidden and disabled elements not being focusable
+
+## 0.10.129
+
+_2024-07-16_
+
+- feat: Add prop `childrenHTML` to `Carousel` for Real Nasty Dirty Work™ —
+  primary use case is progressive enhancement of static HTML.
+- feat: Gracefully catch (and log) errors in Sprinkles' lifecycle methods
+
 ## 0.10.128
 
 _2024-07-01_

package/FocusTrap.js

@@ -12,7 +12,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
     return (react_1.default.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
-            var _a;
+            e.preventDefault();
             let container = e.currentTarget;
             let depth = Math.max(props.depth || 1, 1);
             while (depth-- && container) {
@@ -21,9 +21,27 @@ const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
-            const targetIdx = props.atTop ? focusables.length - 1 : 0;
-            (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
+            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const delta = props.atTop ? -1 : 1;
+            let i = delta < 0 ? focusables.length - 1 : 0;
+            let newTarget;
+            while ((newTarget = focusables[i])) {
+                newTarget.focus();
+                // See if the focus actually moved to newTarget
+                if (document.activeElement === newTarget) {
+                    return;
+                }
+                i += delta;
+            }
+            // desperationLevel++; // We've failed to find a focusable element.
+            // Let's see if we can find a non-interactive focusable to fall back on
+            const fallbackFocusElm = container.matches('[tabindex]')
+                ? container
+                : container.querySelector('[tabindex="-1"]') || container.closest('[tabindex');
+            if (fallbackFocusElm) {
+                fallbackFocusElm.focus();
+            }
+            // desperationLevel++; // Whatever, we tried. ¯\_(ツ)_/¯
         } }));
 };
 exports.FocusTrap = FocusTrap;

package/_abstract/_AbstractCarousel.d.ts

@@ -20,6 +20,12 @@ export type CarouselProps<I extends Record<string, unknown> = Record<string, nev
      * `<Fragment />` or some such.
      */
     itemCount?: number;
+}, {
+    /**
+     * HTML content that should be dangerously inserted directly into the
+     * `__itemlist` element
+     */
+    childrenHTML: string;
 }> & WrapperElmProps & DeprecatedSeenProp;
 type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
     title?: string;

package/_abstract/_AbstractCarousel.js

@@ -24,17 +24,35 @@ const scrollXBy = (elm, deltaX) => {
 };
 // eslint-disable-next-line complexity
 const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const { title, items = [], Component, ComponentProps, childrenHTML, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const children = !props.children
         ? undefined
         : Array.isArray(props.children)
             ? props.children.filter(hanna_utils_1.notNully)
             : [props.children];
     const [leftOffset, setLeftOffset] = (0, react_1.useState)();
-    const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
+    const htmlChildrenCount = (0, react_1.useMemo)(() => {
+        if (!(childrenHTML === null || childrenHTML === void 0 ? void 0 : childrenHTML.trim())) {
+            return;
+        }
+        if (!isBrowser) {
+            return 1; // Return arbitrary non-zero count to avoid early return below.
+            // During SSR (and initial hydration render) we want to render the
+            // Carousel component, even though we don't know the exact number of
+            // items yet.
+        }
+        const div = document.createElement('div');
+        div.innerHTML = childrenHTML;
+        return div.children.length;
+    }, [childrenHTML, isBrowser]);
+    const itemCount = props.itemCount != null
+        ? props.itemCount
+        : childrenHTML
+            ? htmlChildrenCount
+            : (children || items).length;
     const listRef = (0, react_1.useRef)(null);
     const [activeItem, setActiveItem] = (0, react_1.useState)(0);
-    const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     // Since listElm gets unmounted and remounted based on isBrowser, we
     // wait for isBrowser is true before setting scroll and resize events.
     const listElm = isBrowser && listRef.current;
@@ -91,10 +109,12 @@ const AbstractCarousel = (props) => {
     }
     const itemList = (react_1.default.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
             ? { '--Carousel--leftOffset': `${leftOffset}px` }
-            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
-        items.map((item, i) => (
-        // @ts-expect-error  (Can't be arsed...)
-        react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
+            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef, dangerouslySetInnerHTML: childrenHTML ? { __html: childrenHTML } : undefined }, childrenHTML
+        ? undefined
+        : children ||
+            items.map((item, i) => (
+            // @ts-expect-error  (Can't be arsed...)
+            react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),

package/esm/FocusTrap.js

@@ -8,7 +8,7 @@ import React from 'react';
 export const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
     return (React.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
-            var _a;
+            e.preventDefault();
             let container = e.currentTarget;
             let depth = Math.max(props.depth || 1, 1);
             while (depth-- && container) {
@@ -17,8 +17,26 @@ export const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
-            const targetIdx = props.atTop ? focusables.length - 1 : 0;
-            (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
+            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const delta = props.atTop ? -1 : 1;
+            let i = delta < 0 ? focusables.length - 1 : 0;
+            let newTarget;
+            while ((newTarget = focusables[i])) {
+                newTarget.focus();
+                // See if the focus actually moved to newTarget
+                if (document.activeElement === newTarget) {
+                    return;
+                }
+                i += delta;
+            }
+            // desperationLevel++; // We've failed to find a focusable element.
+            // Let's see if we can find a non-interactive focusable to fall back on
+            const fallbackFocusElm = container.matches('[tabindex]')
+                ? container
+                : container.querySelector('[tabindex="-1"]') || container.closest('[tabindex');
+            if (fallbackFocusElm) {
+                fallbackFocusElm.focus();
+            }
+            // desperationLevel++; // Whatever, we tried. ¯\_(ツ)_/¯
         } }));
 };

package/esm/_abstract/_AbstractCarousel.d.ts

@@ -20,6 +20,12 @@ export type CarouselProps<I extends Record<string, unknown> = Record<string, nev
      * `<Fragment />` or some such.
      */
     itemCount?: number;
+}, {
+    /**
+     * HTML content that should be dangerously inserted directly into the
+     * `__itemlist` element
+     */
+    childrenHTML: string;
 }> & WrapperElmProps & DeprecatedSeenProp;
 type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
     title?: string;

package/esm/_abstract/_AbstractCarousel.js

@@ -20,17 +20,35 @@ const scrollXBy = (elm, deltaX) => {
 };
 // eslint-disable-next-line complexity
 export const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const { title, items = [], Component, ComponentProps, childrenHTML, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const isBrowser = useIsBrowserSide(ssr);
     const children = !props.children
         ? undefined
         : Array.isArray(props.children)
             ? props.children.filter(notNully)
             : [props.children];
     const [leftOffset, setLeftOffset] = useState();
-    const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
+    const htmlChildrenCount = useMemo(() => {
+        if (!(childrenHTML === null || childrenHTML === void 0 ? void 0 : childrenHTML.trim())) {
+            return;
+        }
+        if (!isBrowser) {
+            return 1; // Return arbitrary non-zero count to avoid early return below.
+            // During SSR (and initial hydration render) we want to render the
+            // Carousel component, even though we don't know the exact number of
+            // items yet.
+        }
+        const div = document.createElement('div');
+        div.innerHTML = childrenHTML;
+        return div.children.length;
+    }, [childrenHTML, isBrowser]);
+    const itemCount = props.itemCount != null
+        ? props.itemCount
+        : childrenHTML
+            ? htmlChildrenCount
+            : (children || items).length;
     const listRef = useRef(null);
     const [activeItem, setActiveItem] = useState(0);
-    const isBrowser = useIsBrowserSide(ssr);
     // Since listElm gets unmounted and remounted based on isBrowser, we
     // wait for isBrowser is true before setting scroll and resize events.
     const listElm = isBrowser && listRef.current;
@@ -87,10 +105,12 @@ export const AbstractCarousel = (props) => {
     }
     const itemList = (React.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
             ? { '--Carousel--leftOffset': `${leftOffset}px` }
-            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
-        items.map((item, i) => (
-        // @ts-expect-error  (Can't be arsed...)
-        React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
+            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef, dangerouslySetInnerHTML: childrenHTML ? { __html: childrenHTML } : undefined }, childrenHTML
+        ? undefined
+        : children ||
+            items.map((item, i) => (
+            // @ts-expect-error  (Can't be arsed...)
+            React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),

package/package.json

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