@reykjavik/hanna-react 0.10.60 → 0.10.63

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,28 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.63
+
+_2022-08-29_
+
+- fix: `FileInput` in single-file mode doesn't report deleted files on add
+- fix: Hide `Carousel` mouse-cursor scroll controls at start/end positions
+- fix: Pass `id` and other HTML props to static (span) `TagPill`s
+
+## 0.10.62
+
+_2022-08-23_
+
+- feat: Add `diff` object to `FileInput`'s `onFilesUpdated` callback signature
+
+## 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 +44,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 +236,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/FileInput/FileInput.utils.d.ts

@@ -0,0 +1,36 @@
+export declare type CustomFile = {
+    preview?: string;
+} & File;
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+export declare const addPreview: (file: CustomFile) => void;
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+export declare const releasePreview: (file: CustomFile) => void;
+/**
+ * Small+stupid file size pretty-printer.
+ */
+export declare const formatBytes: (bytes: number, decimals?: number) => string;
+/**
+ * Figures out how to handle adding files to a FileInput
+ * Which files to retaine, which too delete, and
+ * what the updated fileList should look like.
+ *
+ *
+ */
+export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
+    fileList: File[];
+    diff: {
+        added: File[];
+        deleted: File[];
+    } | {
+        added: File[];
+        deleted?: undefined;
+    };
+};

package/FileInput/FileInput.utils.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileListUpdate = exports.formatBytes = exports.releasePreview = exports.addPreview = void 0;
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+const addPreview = (file) => {
+    if (!('preview' in file)) {
+        file.preview = file.type.includes('image/') ? URL.createObjectURL(file) : undefined;
+    }
+};
+exports.addPreview = addPreview;
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+const releasePreview = (file) => {
+    file.preview && URL.revokeObjectURL(file.preview);
+    delete file.preview;
+};
+exports.releasePreview = releasePreview;
+/**
+ * Small+stupid file size pretty-printer.
+ */
+const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+};
+exports.formatBytes = formatBytes;
+/**
+ * Figures out how to handle adding files to a FileInput
+ * Which files to retaine, which too delete, and
+ * what the updated fileList should look like.
+ *
+ *
+ */
+const getFileListUpdate = (oldFileList, added, 
+/**
+ * `replaceMode: true` is the default "single-file" input behavior.
+ *
+ * Pass `false` to this argument when the "multiple" prop is true.
+ */
+replaceMode) => {
+    const deleted = replaceMode ? oldFileList : [];
+    const retained = [];
+    if (!replaceMode) {
+        oldFileList.forEach((oldFile) => {
+            if (added.find(({ name }) => name === oldFile.name)) {
+                deleted.push(oldFile);
+            }
+            else {
+                retained.push(oldFile);
+            }
+        });
+    }
+    return {
+        fileList: retained.concat(added),
+        diff: deleted.length ? { added, deleted } : { added },
+    };
+};
+exports.getFileListUpdate = getFileListUpdate;

package/FileInput.d.ts

@@ -1,15 +1,30 @@
 import { FormFieldWrappingProps } from './FormField';
-declare type dropzonePropsProps = {
+declare type DropzonePropsProps = {
     accept?: string;
     multiple?: boolean;
 };
 export declare type FileInputProps = {
-    dropzoneProps: dropzonePropsProps;
+    dropzoneProps: DropzonePropsProps;
     dropzoneText: string | JSX.Element;
     showFileSize?: boolean;
     showImagePreviews?: boolean;
     removeFileText: string;
-    onFilesUpdated?: (files: Array<File>) => void;
+    onFilesUpdated?: (
+    /** Updated, full list of Files. */
+    files: Array<File>, 
+    /** Information about which Files were added or removed during with this update.
+     *
+     * NOTE: When a diff contains both added and deleted files, this indicates a
+     * name-conflict occurred — i.e. one of the added files has a name that
+     * existed in the old file list.
+     * In such cases the deletion is more implicit than explicit, and depending
+     * on the circumstances, you MIGHT wish to either warn the user, rename
+     * one of the files, instead of overwriting/deleting the older file, etc.
+     */
+    diff: {
+        deleted?: Array<File>;
+        added?: Array<File>;
+    }) => void;
     name?: string;
     value?: ReadonlyArray<File>;
 } & FormFieldWrappingProps;

package/FileInput.js

@@ -5,26 +5,8 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone"); // https://react-dropzone.js.org/#!/Dropzone
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const FileInput_utils_1 = require("./FileInput/FileInput.utils");
 const FormField_1 = tslib_1.__importDefault(require("./FormField"));
-/**
- * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
- *
- * The preview's value is either a data URI (for image-type files) or `undefined`
- */
-const addPreview = (file) => {
-    if (!('preview' in file)) {
-        file.preview = file.type.includes('image/') ? URL.createObjectURL(file) : undefined;
-    }
-};
-/**
- * Revokes `preview` data URIs to avoid memory leaks
- *
- * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
- */
-const releasePreview = (file) => {
-    file.preview && URL.revokeObjectURL(file.preview);
-    delete file.preview;
-};
 const arrayToFileList = (arr) => {
     const fileList = new DataTransfer();
     arr.forEach((item) => {
@@ -32,29 +14,6 @@ const arrayToFileList = (arr) => {
     });
     return fileList.files;
 };
-const dedupeFilesArray = (files) => {
-    const newArray = [];
-    const found = {};
-    files.forEach((file) => {
-        if (!(file.name in found)) {
-            newArray.push(file);
-            found[file.name] = true;
-        }
-        else {
-            releasePreview(file);
-        }
-    });
-    return newArray;
-};
-const formatBytes = (bytes, decimals = 2) => {
-    if (bytes === 0) {
-        return '0 Bytes';
-    }
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
-};
 const FileInput = (props) => {
     const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, dropzoneText, removeFileText, assistText, disabled, invalid, errorMessage, required, reqText, onFilesUpdated = () => undefined, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "dropzoneText", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "onFilesUpdated", "showFileSize", "showImagePreviews", "value"]);
     const domid = (0, hooks_1.useDomid)(id);
@@ -64,7 +23,7 @@ const FileInput = (props) => {
     const [isHover, setIsHover] = (0, react_1.useState)(false);
     const { getRootProps, getInputProps, isDragReject, inputRef } = (0, react_dropzone_1.useDropzone)(Object.assign({ onDrop: (acceptedFiles) => {
             acceptedFiles = acceptedFiles.map((file) => {
-                addPreview(file);
+                (0, FileInput_utils_1.addPreview)(file);
                 return file;
             });
             addFiles(acceptedFiles); // eslint-disable-line
@@ -90,30 +49,31 @@ const FileInput = (props) => {
         } }, dropzoneProps));
     // Add previews on incoming files
     // (NOTE: `addPreview` ignores files that already have preview.)
-    files.forEach(addPreview);
+    files.forEach(FileInput_utils_1.addPreview);
     (0, react_1.useEffect)(() => () => {
         // Make sure to revoke the data uris on unmount to avoid memory leaks
-        files.forEach(releasePreview);
+        files.forEach(FileInput_utils_1.releasePreview);
     }, [files]);
     const removeFile = (name) => {
         if (fileInput.current) {
+            const deleted = [];
             const newFileList = files.filter((file) => {
                 if (file.name !== name) {
                     return true;
                 }
-                releasePreview(file);
+                deleted.push(file);
+                (0, FileInput_utils_1.releasePreview)(file);
+                return false;
             });
             fileInput.current.files = arrayToFileList(newFileList);
-            onFilesUpdated(newFileList);
+            onFilesUpdated(newFileList, { deleted });
         }
     };
-    const addFiles = (filelist) => {
+    const addFiles = (added) => {
         if (fileInput.current) {
-            const newFileList = dropzoneProps.multiple
-                ? dedupeFilesArray(files.concat(filelist))
-                : filelist;
-            fileInput.current.files = arrayToFileList(newFileList);
-            onFilesUpdated(newFileList);
+            const { fileList, diff } = (0, FileInput_utils_1.getFileListUpdate)(files, added, !dropzoneProps.multiple);
+            fileInput.current.files = arrayToFileList(fileList);
+            onFilesUpdated(fileList, diff);
         }
         if (inputRef.current) {
             // Empty on every add
@@ -130,7 +90,7 @@ const FileInput = (props) => {
             react_1.default.createElement("span", { className: "FileInput__filename" }, file.name),
             showFileSize && (react_1.default.createElement("small", { className: "FileInput__filesize" },
                 " - (",
-                formatBytes(file.size),
+                (0, FileInput_utils_1.formatBytes)(file.size),
                 ")"))))));
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('FileInput', [dropzoneProps.multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
             return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },

package/TagPill.js

@@ -18,10 +18,11 @@ const TagPill = (props) => {
         removable &&
         isStatic &&
         !onRemove &&
-        console.warn('static (non-button) `TagPill`s must not be removable');
+        console.warn('Removable static (non-button) `TagPill`s ' +
+            'must have an `onRemove` handler defined');
     const modifiers = [modifier, large && 'large', colors[color]];
     const removeBtn = removable && (react_1.default.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
-    return isStatic ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },
+    return isStatic ? (react_1.default.createElement("span", Object.assign({ className: (0, getBemClass_1.default)('TagPill', modifiers) }, buttonProps),
         label,
         " ",
         removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },

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,
+            activeItem > 0 && (react_1.default.createElement("div", { className: bem + '__itemlist-goLeft', onClick: () => {
+                    delayedScrollLeft.cancel();
+                    scrollToItem(activeItem - 1);
+                }, onMouseOver: () => delayedScrollLeft(activeItem), onMouseOut: () => delayedScrollLeft.cancel() })),
+            activeItem < itemCount - 1 && (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.63",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -15,8 +15,8 @@
 	"dependencies": {
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.17",
-		"@reykjavik/hanna-css": "^0.3.3",
-		"@reykjavik/hanna-utils": "^0.1.7",
+		"@reykjavik/hanna-css": "^0.3.7",
+		"@reykjavik/hanna-utils": "^0.1.11",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^3.0.2",

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;