@qoretechnologies/reqore 0.74.2 → 0.74.3-pr.651.gfd5ecd9

package/dist/hooks/useScrollFade.d.ts

@@ -0,0 +1,61 @@
+import { RefObject } from 'react';
+export interface IReqoreScrollFadeMeasurement {
+    /** Content is scrolled out of view past the start edge (left / top). */
+    start: boolean;
+    /** Content is scrolled out of view past the end edge (right / bottom). */
+    end: boolean;
+    /** The content is wider / taller than the scroll box at all. */
+    overflows: boolean;
+    /** The scroll box that was measured. */
+    element: HTMLElement;
+}
+export interface IReqoreScrollFadeOptions {
+    /** The box that scrolls. */
+    scrollRef: RefObject<HTMLElement | null | undefined>;
+    /**
+     * The element that carries the edge classes — normally the overlay wrapper
+     * whose `::before` / `::after` paint the fades. Defaults to the scroll box.
+     */
+    targetRef?: RefObject<HTMLElement | null | undefined>;
+    /**
+     * Which axis scrolls.
+     * @default x
+     */
+    axis?: 'x' | 'y';
+    /** Class toggled on the target while content is hidden past the start edge (left / top). */
+    startClassName: string;
+    /** Class toggled on the target while content is hidden past the end edge (right / bottom). */
+    endClassName: string;
+    /**
+     * When `false` both classes are cleared regardless of the measurement (the
+     * fades are off). `onMeasure` still fires.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Runs after every measurement with the raw result, for anything else that
+     * should follow the same pass (a drag cursor, a "more" hint) — so it can never
+     * disagree with the fades about whether the box overflows.
+     */
+    onMeasure?: (measurement: IReqoreScrollFadeMeasurement) => void;
+}
+/**
+ * Measures which edges of a scroll box still have content out of view and carries
+ * the answer as CLASSES on a target element — never as React state.
+ *
+ * A fade is a measurement. Routing a measurement through state means a layout
+ * effect that runs after every render and calls `setState`, guarded only by
+ * comparing booleans: correct while the measurement is stable, and an unbreakable
+ * render loop the moment it is not. Toggling a class cannot re-enter the render at
+ * all, and that is what lets the pass run after EVERY render — which it must,
+ * because children change size without the scroll box resizing (a label loads, an
+ * item is removed).
+ *
+ * Re-measures on scroll, on resize (`ResizeObserver`, degrading gracefully where it
+ * is unavailable) and after every render. Shared by `ReqoreFadeScroller` (x) and
+ * the expanded, scrolling `ReqoreNavRail` (y).
+ *
+ * @returns the measurement pass, for callers that need to trigger it by hand.
+ */
+export declare const useScrollFade: ({ scrollRef, targetRef, axis, startClassName, endClassName, enabled, onMeasure, }: IReqoreScrollFadeOptions) => (() => void);
+//# sourceMappingURL=useScrollFade.d.ts.map

package/dist/hooks/useScrollFade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollFade.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollFade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAC;AAEnF,MAAM,WAAW,4BAA4B;IAC3C,wEAAwE;IACxE,KAAK,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,GAAG,EAAE,OAAO,CAAC;IACb,gEAAgE;IAChE,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,4FAA4F;IAC5F,cAAc,EAAE,MAAM,CAAC;IACvB,8FAA8F;IAC9F,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,4BAA4B,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,GAAI,mFAQ3B,wBAAwB,KAAG,CAAC,MAAM,IAAI,CAyDxC,CAAC"}

package/dist/hooks/useScrollFade.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollFade = void 0;
+var react_1 = require("react");
+/**
+ * Measures which edges of a scroll box still have content out of view and carries
+ * the answer as CLASSES on a target element — never as React state.
+ *
+ * A fade is a measurement. Routing a measurement through state means a layout
+ * effect that runs after every render and calls `setState`, guarded only by
+ * comparing booleans: correct while the measurement is stable, and an unbreakable
+ * render loop the moment it is not. Toggling a class cannot re-enter the render at
+ * all, and that is what lets the pass run after EVERY render — which it must,
+ * because children change size without the scroll box resizing (a label loads, an
+ * item is removed).
+ *
+ * Re-measures on scroll, on resize (`ResizeObserver`, degrading gracefully where it
+ * is unavailable) and after every render. Shared by `ReqoreFadeScroller` (x) and
+ * the expanded, scrolling `ReqoreNavRail` (y).
+ *
+ * @returns the measurement pass, for callers that need to trigger it by hand.
+ */
+var useScrollFade = function (_a) {
+    var scrollRef = _a.scrollRef, targetRef = _a.targetRef, _b = _a.axis, axis = _b === void 0 ? 'x' : _b, startClassName = _a.startClassName, endClassName = _a.endClassName, _c = _a.enabled, enabled = _c === void 0 ? true : _c, onMeasure = _a.onMeasure;
+    // Read inside `update`, which is deliberately dependency-free so it can be
+    // handed to listeners and observers once and never rebuilt.
+    var enabledRef = (0, react_1.useRef)(enabled);
+    enabledRef.current = enabled;
+    var onMeasureRef = (0, react_1.useRef)(onMeasure);
+    onMeasureRef.current = onMeasure;
+    var classNamesRef = (0, react_1.useRef)({ startClassName: startClassName, endClassName: endClassName });
+    classNamesRef.current = { startClassName: startClassName, endClassName: endClassName };
+    var update = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        var element = scrollRef.current;
+        if (!element) {
+            return;
+        }
+        var vertical = axis === 'y';
+        var position = vertical ? element.scrollTop : element.scrollLeft;
+        var viewport = vertical ? element.clientHeight : element.clientWidth;
+        var total = vertical ? element.scrollHeight : element.scrollWidth;
+        var start = position > 1;
+        var end = position + viewport < total - 1;
+        var target = (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _a !== void 0 ? _a : element;
+        var on = enabledRef.current;
+        target.classList.toggle(classNamesRef.current.startClassName, on && start);
+        target.classList.toggle(classNamesRef.current.endClassName, on && end);
+        (_b = onMeasureRef.current) === null || _b === void 0 ? void 0 : _b.call(onMeasureRef, { start: start, end: end, overflows: total > viewport, element: element });
+    }, [scrollRef, targetRef, axis]);
+    // After every render: it only writes classes, so there is no state for it to
+    // feed back into and nothing to guard.
+    (0, react_1.useLayoutEffect)(update);
+    (0, react_1.useEffect)(function () {
+        var element = scrollRef.current;
+        if (!element) {
+            return undefined;
+        }
+        element.addEventListener('scroll', update, { passive: true });
+        var observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        return function () {
+            element.removeEventListener('scroll', update);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [scrollRef, update]);
+    return update;
+};
+exports.useScrollFade = useScrollFade;
+//# sourceMappingURL=useScrollFade.js.map

package/dist/hooks/useScrollFade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollFade.js","sourceRoot":"","sources":["../../src/hooks/useScrollFade.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.74.2",
+  "version": "0.74.3-pr.651.gfd5ecd9",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",