@aglyn/shared-ui-jsx 1.0.0-beta.230 → 1.0.0-beta.232

package/src/lib/hooks/use-viewport-fill.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { useCallback, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+/**
+ * The height that takes an element from where it starts on the page to the
+ * bottom of the viewport.
+ *
+ * `100dvh` is the whole window, so a full-screen tool placed under the
+ * console's header, site nav, notices and page title came out taller than
+ * the screen by exactly that chrome, and the page scrolled to reach its own
+ * bottom (the POS register). This measures the element's top in DOCUMENT
+ * coordinates, which its own height never changes, so resizing to the
+ * answer cannot feed back into the measurement. It re-measures when the
+ * window resizes and when anything above it changes size (a notice
+ * dismissed, the nav wrapping).
+ *
+ * Until the first measurement (and on the server) it answers `fallback`.
+ */ export function useViewportFill(options = {}) {
+    const { min = 0, fallback = '100dvh' } = options;
+    const [element, setElement] = useState(null);
+    const [height, setHeight] = useState(null);
+    const ref = useCallback((node)=>setElement(node), []);
+    useIsomorphicLayoutEffect(()=>{
+        if (!element) return;
+        const measure = ()=>{
+            const top = element.getBoundingClientRect().top + window.scrollY;
+            const next = Math.max(min, Math.floor(window.innerHeight - top));
+            setHeight((current)=>current === next ? current : next);
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+        observer == null ? void 0 : observer.observe(document.body);
+        return ()=>{
+            window.removeEventListener('resize', measure);
+            observer == null ? void 0 : observer.disconnect();
+        };
+    }, [
+        element,
+        min
+    ]);
+    return {
+        ref,
+        height: height === null ? fallback : `${height}px`
+    };
+}
+export default useViewportFill;
+
+//# sourceMappingURL=use-viewport-fill.js.map

package/src/lib/hooks/use-viewport-fill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/hooks/use-viewport-fill.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { useCallback, useState } from 'react'\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect'\n\n/**\n * The height that takes an element from where it starts on the page to the\n * bottom of the viewport.\n *\n * `100dvh` is the whole window, so a full-screen tool placed under the\n * console's header, site nav, notices and page title came out taller than\n * the screen by exactly that chrome, and the page scrolled to reach its own\n * bottom (the POS register). This measures the element's top in DOCUMENT\n * coordinates, which its own height never changes, so resizing to the\n * answer cannot feed back into the measurement. It re-measures when the\n * window resizes and when anything above it changes size (a notice\n * dismissed, the nav wrapping).\n *\n * Until the first measurement (and on the server) it answers `fallback`.\n */\nexport function useViewportFill(options: { min?: number; fallback?: string } = {}) {\n  const { min = 0, fallback = '100dvh' } = options\n  const [element, setElement] = useState<HTMLElement | null>(null)\n  const [height, setHeight] = useState<number | null>(null)\n  const ref = useCallback((node: HTMLElement | null) => setElement(node), [])\n\n  useIsomorphicLayoutEffect(() => {\n    if (!element) return\n    const measure = () => {\n      const top = element.getBoundingClientRect().top + window.scrollY\n      const next = Math.max(min, Math.floor(window.innerHeight - top))\n      setHeight((current) => (current === next ? current : next))\n    }\n    measure()\n    window.addEventListener('resize', measure)\n    const observer =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure)\n    observer?.observe(document.body)\n    return () => {\n      window.removeEventListener('resize', measure)\n      observer?.disconnect()\n    }\n  }, [element, min])\n\n  return { ref, height: height === null ? fallback : `${height}px` }\n}\n\nexport default useViewportFill\n"],"names":["useCallback","useState","useIsomorphicLayoutEffect","useViewportFill","options","min","fallback","element","setElement","height","setHeight","ref","node","measure","top","getBoundingClientRect","window","scrollY","next","Math","max","floor","innerHeight","current","addEventListener","observer","ResizeObserver","observe","document","body","removeEventListener","disconnect"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAC7C,SAASC,yBAAyB,QAAQ,oCAAgC;AAE1E;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASC,gBAAgBC,UAA+C,CAAC,CAAC;IAC/E,MAAM,EAAEC,MAAM,CAAC,EAAEC,WAAW,QAAQ,EAAE,GAAGF;IACzC,MAAM,CAACG,SAASC,WAAW,GAAGP,SAA6B;IAC3D,MAAM,CAACQ,QAAQC,UAAU,GAAGT,SAAwB;IACpD,MAAMU,MAAMX,YAAY,CAACY,OAA6BJ,WAAWI,OAAO,EAAE;IAE1EV,0BAA0B;QACxB,IAAI,CAACK,SAAS;QACd,MAAMM,UAAU;YACd,MAAMC,MAAMP,QAAQQ,qBAAqB,GAAGD,GAAG,GAAGE,OAAOC,OAAO;YAChE,MAAMC,OAAOC,KAAKC,GAAG,CAACf,KAAKc,KAAKE,KAAK,CAACL,OAAOM,WAAW,GAAGR;YAC3DJ,UAAU,CAACa,UAAaA,YAAYL,OAAOK,UAAUL;QACvD;QACAL;QACAG,OAAOQ,gBAAgB,CAAC,UAAUX;QAClC,MAAMY,WACJ,OAAOC,mBAAmB,cAAc,OAAO,IAAIA,eAAeb;QACpEY,4BAAAA,SAAUE,OAAO,CAACC,SAASC,IAAI;QAC/B,OAAO;YACLb,OAAOc,mBAAmB,CAAC,UAAUjB;YACrCY,4BAAAA,SAAUM,UAAU;QACtB;IACF,GAAG;QAACxB;QAASF;KAAI;IAEjB,OAAO;QAAEM;QAAKF,QAAQA,WAAW,OAAOH,WAAW,GAAGG,OAAO,EAAE,CAAC;IAAC;AACnE;AAEA,eAAeN,gBAAe"}