@reykjavik/hanna-react 0.10.60 → 0.10.61

package/Alert.js

@@ -8,7 +8,7 @@ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/g
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Button_1 = tslib_1.__importDefault(require("./_abstract/_Button"));
 const env_1 = require("./utils/env");
-// FIXME: Eventually import from @reykjavik/hanna-styles/constants
+// FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
 const useAutoClosing = (autoClose) => {
     const [temp, setTemp] = (0, react_1.useState)(0);
@@ -40,7 +40,7 @@ exports.alertTypes = {
 };
 const Alert = (props) => {
     const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, } = props;
-    const autoClose = props.autoClose && props.autoClose > 0 ? props.autoClose : 0;
+    const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = (0, react_1.useRef)();
     const [open, setOpen] = (0, react_1.useState)(!!ssr);
     const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
@@ -51,7 +51,7 @@ const Alert = (props) => {
     });
     const closeAlert = (0, react_1.useCallback)((event) => {
         const ret = onClose &&
-            // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.9)
+            // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.11)
             onClose(event);
         if (ret !== false) {
             setOpen(false);

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.61
+
+_2022-08-11_
+
+- feat: Add mouse-cursor scroll controls for `Carousel`-related components —
+  Remove mousewheel hijacking behavior.
+- fix: `startSeen` hiding components with `html.before-sprinkling` present
+
 ## 0.10.60
 
 _2022-06-24_
@@ -22,6 +30,7 @@ _2022-06-20_
 - feat: Add prop `small` to `ArticleMeta`
 - fix: Suppress redundant className `.Heading--normal`
 - feat: Add prop `focalPoint` to all `ImageProps`
+- feat: Add `EffectProp.effectType` prop value `none` for opting out
 
 ## 0.10.56 – 0.10.58
 
@@ -213,6 +222,7 @@ _2022-03-09_
 
 - feat: Add props `autoClose` and `onClosed` to `Alert` — use `onClosed` when
   removing the Alert from the DOM
+- feat: Deprecate the `event` argument for `Alert`'s `onClose` callback
 - feat: Add prop `align?: 'right'` to `ButtonBar`
 - fix: Make `FileInput` image previews (thumbnails) more resilient overall
 - fix: Plug memory-leaks caused by `FileInput` image thumbnails.

package/_abstract/_AbstractCarousel.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const A_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/A"));
+const debounce_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/debounce"));
 const focusElm_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/focusElm"));
 const throttle_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/throttle"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
@@ -10,8 +11,7 @@ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/g
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const CarouselStepper_1 = tslib_1.__importDefault(require("../CarouselStepper"));
 const seenEffect_1 = require("../utils/seenEffect");
-const WHEEL_AMPLIFIER = 3;
-const WHEEL_HIJACK_TIMEOUT_MS = 667;
+// ---------------------------------------------------------------------------
 const scrollXBy = (elm, deltaX) => {
     const left = elm.scrollLeft + deltaX;
     elm.scrollTo(left, elm.scrollTop);
@@ -22,54 +22,6 @@ const scrollXBy = (elm, deltaX) => {
     // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
     // while Firefox is more smooth. Haven't found a way around that.
 };
-const exitWheelHijack = (elm) => () => {
-    elm.style.scrollSnapType = '';
-    const lastElmOffset = elm.lastElementChild
-        ? elm.lastElementChild.offsetLeft
-        : 0;
-    // trigger one last scroll event, to make sure the element's
-    // `style.scrollSnapType`'s behavior kicks in.
-    // Otherwise the list may stay stuck in an over-scrolled state —
-    // off to the right.
-    scrollXBy(elm, Math.min(0, lastElmOffset - elm.scrollLeft));
-};
-const handleMouseWheel = (e) => {
-    const elm = e.currentTarget;
-    if (e.deltaX || elm.$hasXDeltaed) {
-        elm.$hasXDeltaed = true;
-        exitWheelHijack(elm);
-        return;
-    }
-    if (e.deltaY && !e.deltaX) {
-        if (e.deltaY < 0) {
-            // Stop scroll-capture when list is at left-edge
-            if (elm.scrollLeft < 50) {
-                return;
-            }
-        }
-        else {
-            // Stop scroll-capture when list is beyond left edge of last list item
-            if (elm.scrollLeft >
-                (elm.lastElementChild ? elm.lastElementChild.offsetLeft : 0)) {
-                exitWheelHijack(elm);
-                return;
-            }
-        }
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        // Disable `scroll-snap-style` because otherwise
-        // small-scale elm.scrollTo() calls have no effect
-        elm.style.scrollSnapType = 'initial';
-        scrollXBy(elm, e.deltaY * WHEEL_AMPLIFIER);
-        clearTimeout(elm.$timeout);
-        elm.$timeout = setTimeout(exitWheelHijack(elm), WHEEL_HIJACK_TIMEOUT_MS);
-    }
-};
-const handleMouseLeave = (e) => {
-    const elm = e.currentTarget;
-    exitWheelHijack(elm);
-    elm.$hasXDeltaed = undefined;
-};
 const AbstractCarousel = (props) => {
     const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
     const children = props.children && props.children.filter(hanna_utils_1.notNully);
@@ -78,9 +30,10 @@ const AbstractCarousel = (props) => {
     const listRef = (0, react_1.useRef)(null);
     const [activeItem, setActiveItem] = (0, react_1.useState)(0);
     const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
-    // update on activeItem state change
+    // 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;
     (0, react_1.useEffect)(() => {
-        const listElm = listRef.current;
         if (!listElm) {
             return;
         }
@@ -100,34 +53,56 @@ const AbstractCarousel = (props) => {
             });
         }, 300, true);
         calcLeftOffset();
-        listElm.addEventListener('wheel', handleMouseWheel);
         listElm.addEventListener('scroll', calcActiveItem, { passive: true });
         window.addEventListener('resize', calcLeftOffset, { passive: true });
         return () => {
-            listElm.removeEventListener('wheel', handleMouseWheel);
             listElm.removeEventListener('scroll', calcActiveItem);
             window.removeEventListener('resize', calcLeftOffset);
         };
-    }, []);
+    }, [listElm]);
     const scrollToItem = (newActive) => {
-        setActiveItem(newActive);
         const listElm = listRef.current;
         const newItem = listElm.children[newActive];
-        listElm.scrollTo(newItem ? newItem.offsetLeft : 0, 0);
+        if (!newItem) {
+            return;
+        }
+        setActiveItem(newActive);
+        listElm.scrollLeft = newItem.offsetLeft || 1;
         setTimeout(() => (0, focusElm_1.default)(newItem), 500);
     };
+    const { delayedScrollLeft, delayedScrollRight } = (0, react_1.useMemo)(() => {
+        const delayedScrollLeft = (0, debounce_1.default)((currentActive) => {
+            scrollToItem(currentActive - 1);
+            setTimeout(() => delayedScrollLeft(currentActive - 1), 0);
+        }, 1000);
+        const delayedScrollRight = (0, debounce_1.default)((currentActive) => {
+            scrollToItem(currentActive + 1);
+            setTimeout(() => delayedScrollRight(currentActive + 1), 0);
+        }, 1000);
+        return { delayedScrollLeft, delayedScrollRight };
+    }, []);
     const [outerRef] = (0, seenEffect_1.useSeenEffect)(startSeen);
     if (!itemCount) {
         return null;
     }
+    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))))));
     return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
         title && react_1.default.createElement("h2", { className: bem + '__title' }, title),
-        react_1.default.createElement("div", { className: bem + '__itemlist', style: leftOffset
-                ? { '--Carousel--leftOffset': `${leftOffset}px` }
-                : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, onMouseLeave: handleMouseLeave, 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))))),
+        isBrowser ? (react_1.default.createElement("div", { className: bem + '__itemlist-wrapper' },
+            itemList,
+            react_1.default.createElement("div", { className: bem + '__itemlist-goLeft', onClick: () => {
+                    delayedScrollLeft.cancel();
+                    scrollToItem(activeItem - 1);
+                }, onMouseOver: () => delayedScrollLeft(activeItem), onMouseOut: () => delayedScrollLeft.cancel() }),
+            react_1.default.createElement("div", { className: bem + '__itemlist-goRight', onClick: () => {
+                    delayedScrollRight.cancel();
+                    scrollToItem(activeItem + 1);
+                }, onMouseOver: () => delayedScrollRight(activeItem), onMouseOut: () => delayedScrollRight.cancel() }))) : (itemList),
         isBrowser && (react_1.default.createElement(CarouselStepper_1.default, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
 };
 exports.default = AbstractCarousel;

package/assets.d.ts

@@ -27,7 +27,7 @@ getIllustrationUrl,
 /** @deprecated  Instead `import type { illustrations } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
 illustrations, };
 /** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
-export declare const getCssBundleUrl: (cssTokens: string | Array<string>, version?: string | undefined) => string;
+export declare const getCssBundleUrl: (cssTokens: string | Array<string>, version?: string) => string;
 /** @deprecated  (Will be removed in v0.11) */
 export declare const efnistakn_menu: readonly ["menu/borgarstjori", "menu/borgarstjorn", "menu/bygg_framkv", "menu/fjarmal", "menu/fundargerdir", "menu/itrottir_aftreying", "menu/log_reglugerdir", "menu/mannaudur", "menu/menning", "menu/rad_nefndir", "menu/skipulag", "menu/skolar_fristund", "menu/svid_deildir", "menu/umhverfi_samgongur", "menu/velferd_fjolskylda"];
 /** @deprecated  (Will be removed in v0.11) */

package/package.json

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

package/utils/seenEffect.d.ts

@@ -4,7 +4,6 @@ export declare const getObserver: {
     (target: Element, callback?: ((target: Element) => void) | undefined): (() => void) | undefined;
     DATA_ATTR_NAME: string;
 };
-export declare const seenEffectOptOut: (target: Element, setFlag?: boolean) => void;
 declare const effects: {
     readonly fadein: 1;
     readonly fadeup: 1;
@@ -16,13 +15,13 @@ export declare type EffectProp = {
     effectType?: SeenEffectType | 'none';
 };
 /** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
-export declare const assertEffectType: (maybeType?: string | undefined) => SeenEffectType | undefined;
-export declare const getEffectAttr: (maybeType?: string | undefined) => {
+export declare const ensureEffectType: (maybeType?: string) => SeenEffectType | undefined;
+export declare const getEffectAttr: (maybeType?: string) => {
     'data-seen-effect': string | undefined;
 };
 export declare type SeenProp = {
     /** Should the component appear instantly, and not transition-in once seen */
     startSeen?: boolean;
 };
-export declare const useSeenEffect: <E extends Element = HTMLDivElement>(startSeen?: boolean | undefined, customRef?: RefObject<E> | undefined) => [RefObject<E> | undefined, true | undefined];
+export declare const useSeenEffect: <E extends Element = HTMLDivElement>(startSeen?: boolean, customRef?: RefObject<E> | undefined) => [RefObject<E> | undefined, true | undefined];
 export {};

package/utils/seenEffect.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSeenEffect = exports.getEffectAttr = exports.assertEffectType = exports.seenEffectOptOut = exports.getObserver = exports.DATA_ATTR_NAME = void 0;
+exports.useSeenEffect = exports.getEffectAttr = exports.ensureEffectType = exports.getObserver = exports.DATA_ATTR_NAME = void 0;
 const react_1 = require("react");
 exports.DATA_ATTR_NAME = 'is-seen';
 const STACKING_DELAY = 400; // ms
@@ -36,13 +36,10 @@ const getObserver = (target, callback) => {
     }
     target.setAttribute(dataAttr, 'false');
     observer.observe(target);
+    // return teardown/unmount effect
     return () => observer.unobserve(target);
 };
 exports.getObserver = getObserver;
-const seenEffectOptOut = (target, setFlag = true) => {
-    setFlag ? target.setAttribute(dataAttr, '') : target.removeAttribute(dataAttr);
-};
-exports.seenEffectOptOut = seenEffectOptOut;
 exports.getObserver.DATA_ATTR_NAME = exports.DATA_ATTR_NAME;
 // ---------------------------------------------------------------------------
 // ---------------------------------------------------------------------------
@@ -52,10 +49,10 @@ const effects = {
     fadeleft: 1,
 };
 /** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
-const assertEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
-exports.assertEffectType = assertEffectType;
+const ensureEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
+exports.ensureEffectType = ensureEffectType;
 const getEffectAttr = (maybeType) => ({
-    'data-seen-effect': maybeType === 'none' ? undefined : (0, exports.assertEffectType)(maybeType) || '',
+    'data-seen-effect': maybeType === 'none' ? undefined : (0, exports.ensureEffectType)(maybeType) || '',
 });
 exports.getEffectAttr = getEffectAttr;
 const useSeenEffect = (
@@ -63,19 +60,23 @@ const useSeenEffect = (
 startSeen, 
 /** Bring Your Own RefObject */
 customRef) => {
+    const _startSeen = startSeen || undefined; // normalize
+    const [isSeen, setSeen] = (0, react_1.useState)(_startSeen);
     const localRef = (0, react_1.useRef)(null);
-    const [isSeen, setSeen] = (0, react_1.useState)(startSeen || undefined);
-    const ref = !startSeen && (customRef || localRef);
+    const ref = customRef || localRef;
     (0, react_1.useEffect)(() => {
-        setSeen(startSeen || undefined);
-        if (ref && ref.current) {
-            // NOTE: Given that `ref` is defined, then
-            // `startSeen` is implicily `false | undefined` at
-            // this point.
-            (0, exports.seenEffectOptOut)(ref.current, false);
-            return (0, exports.getObserver)(ref.current, () => setSeen(true));
+        setSeen(_startSeen);
+        const refElm = ref.current;
+        if (refElm) {
+            if (_startSeen) {
+                refElm.setAttribute(dataAttr, '');
+            }
+            else {
+                refElm.removeAttribute(dataAttr);
+                return (0, exports.getObserver)(refElm, () => setSeen(true));
+            }
         }
-    }, [ref, startSeen]);
-    return [ref || undefined, isSeen];
+    }, [_startSeen, ref]);
+    return [ref, isSeen];
 };
 exports.useSeenEffect = useSeenEffect;