@reykjavik/hanna-react 0.10.136 → 0.10.138

package/esm/_abstract/_TogglerInput.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
 import { useDomid } from '../utils/useDomid.js';
 const defaultReqText = {

package/esm/utils/types.d.ts

@@ -1,10 +1,10 @@
-import { Modifiers } from '@hugsmidjan/qj/classUtils';
+import { ClassNameModifiers } from '@reykjavik/hanna-utils/_/classUtils';
 export type BemModifierProps = {
     /** List of CSS BEM --modifier's to add to the component's main wrapper.
      *
      * All falsy values are neatly skipped.
      */
-    modifier?: Modifiers;
+    modifier?: ClassNameModifiers;
 };
 export type BemProps<Required extends boolean = false> = BemModifierProps & (Required extends true ? {
     /** CSS BEM class-name prefix to be used for this component. Defaults to the same as the original component's displayName */

package/esm/utils/useScrollEdgeDetect.js

@@ -1,19 +1,23 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, 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 [at, setAt] = useState(opts.startAt || { start: true, end: true });
-    const [scrollerRefElm, _setScrollerRefElm] = useState(null);
-    const setScrollerRefElm = (elm) => {
-        if (scrollerRef && elm) {
+    const [at, setAt] = useState(() => opts.startAt || { start: true, end: true });
+    const _scrollerRef = useRef();
+    const setScrollerRefElm = useCallback((elm) => {
+        if (!elm) {
+            return;
+        }
+        if (scrollerRef) {
             scrollerRef.current = elm;
         }
-        _setScrollerRefElm(elm);
-    };
+        _scrollerRef.current = elm;
+    }, [scrollerRef]);
     const { getElm, axis } = opts;
     useEffect(() => {
+        const scrollerRefElm = _scrollerRef.current;
         const scrollerElm = scrollerRefElm && getElm ? getElm(scrollerRefElm) : scrollerRefElm;
         if (!(scrollerElm instanceof HTMLElement)) {
             return;
@@ -46,6 +50,6 @@ export const useScrollEdgeDetect = (options, scrollerRef) => {
             scrollerElm.removeEventListener('scroll', checkScroll);
             window.removeEventListener('resize', checkScroll);
         };
-    }, [scrollerRefElm, getElm, axis]);
+    }, [getElm, axis]);
     return [setScrollerRefElm, at];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.136",
+	"version": "0.10.138",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.14",
-		"@reykjavik/hanna-utils": "^0.2.16",
+		"@reykjavik/hanna-css": "^0.4.15",
+		"@reykjavik/hanna-utils": "^0.2.17",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",

package/utils/types.d.ts

@@ -1,10 +1,10 @@
-import { Modifiers } from '@hugsmidjan/qj/classUtils';
+import { ClassNameModifiers } from '@reykjavik/hanna-utils/_/classUtils';
 export type BemModifierProps = {
     /** List of CSS BEM --modifier's to add to the component's main wrapper.
      *
      * All falsy values are neatly skipped.
      */
-    modifier?: Modifiers;
+    modifier?: ClassNameModifiers;
 };
 export type BemProps<Required extends boolean = false> = BemModifierProps & (Required extends true ? {
     /** CSS BEM class-name prefix to be used for this component. Defaults to the same as the original component's displayName */

package/utils/useScrollEdgeDetect.js

@@ -8,16 +8,20 @@ const tolerance = 8; // px
 const throttleMs = 100;
 const useScrollEdgeDetect = (options, scrollerRef) => {
     const opts = typeof options === 'string' ? { axis: options } : options;
-    const [at, setAt] = (0, react_1.useState)(opts.startAt || { start: true, end: true });
-    const [scrollerRefElm, _setScrollerRefElm] = (0, react_1.useState)(null);
-    const setScrollerRefElm = (elm) => {
-        if (scrollerRef && elm) {
+    const [at, setAt] = (0, react_1.useState)(() => opts.startAt || { start: true, end: true });
+    const _scrollerRef = (0, react_1.useRef)();
+    const setScrollerRefElm = (0, react_1.useCallback)((elm) => {
+        if (!elm) {
+            return;
+        }
+        if (scrollerRef) {
             scrollerRef.current = elm;
         }
-        _setScrollerRefElm(elm);
-    };
+        _scrollerRef.current = elm;
+    }, [scrollerRef]);
     const { getElm, axis } = opts;
     (0, react_1.useEffect)(() => {
+        const scrollerRefElm = _scrollerRef.current;
         const scrollerElm = scrollerRefElm && getElm ? getElm(scrollerRefElm) : scrollerRefElm;
         if (!(scrollerElm instanceof HTMLElement)) {
             return;
@@ -50,7 +54,7 @@ const useScrollEdgeDetect = (options, scrollerRef) => {
             scrollerElm.removeEventListener('scroll', checkScroll);
             window.removeEventListener('resize', checkScroll);
         };
-    }, [scrollerRefElm, getElm, axis]);
+    }, [getElm, axis]);
     return [setScrollerRefElm, at];
 };
 exports.useScrollEdgeDetect = useScrollEdgeDetect;