@cube-dev/ui-kit 0.0.0-canary-ac46c4b → 0.0.0-canary-9bde021

package/dist/components/overlays/Dialog/use-content-overflow.js

@@ -1,68 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { c } from "react-compiler-runtime";
-import { useState } from "react";
-
-//#region src/components/overlays/Dialog/use-content-overflow.ts
-const OVERFLOW_THRESHOLD = 2;
-const BODY_SELECTOR = ":scope > [data-id=\"Content\"], :scope > form > [data-id=\"Content\"]";
-/**
-* Whether the dialog's body is taller than the room it has, i.e. whether it
-* scrolls. The footer draws its top line on this (see `Dialog`).
-*
-* The body's own box is not enough to watch. Once the dialog reaches its max
-* height the box stops growing, and in a fixed-height dialog (`fullscreen`,
-* `panel`) it never changes at all — there, content growing past the fold is
-* visible only on the body's children. So both the body and its children are
-* observed, and the set is re-synced whenever the body or its child list is
-* replaced.
-*/
-function useContentOverflow(dialogRef) {
-	const $ = c(3);
-	const [overflows, setOverflows] = useState(false);
-	let t0;
-	let t1;
-	if ($[0] !== dialogRef) {
-		t0 = () => {
-			const dialog = dialogRef.current;
-			if (!dialog || typeof ResizeObserver === "undefined") return;
-			let body = null;
-			const measure = () => {
-				setOverflows(!!body && body.scrollHeight > body.clientHeight + OVERFLOW_THRESHOLD);
-			};
-			const resizeObserver = new ResizeObserver(measure);
-			const mutationObserver = new MutationObserver(() => sync());
-			const sync = () => {
-				body = dialog.querySelector(BODY_SELECTOR);
-				mutationObserver.disconnect();
-				resizeObserver.disconnect();
-				mutationObserver.observe(dialog, { childList: true });
-				for (const form of Array.from(dialog.querySelectorAll(":scope > form"))) mutationObserver.observe(form, { childList: true });
-				if (body) {
-					mutationObserver.observe(body, { childList: true });
-					resizeObserver.observe(body);
-					for (const child of Array.from(body.children)) resizeObserver.observe(child);
-				}
-				measure();
-			};
-			sync();
-			return () => {
-				mutationObserver.disconnect();
-				resizeObserver.disconnect();
-			};
-		};
-		t1 = [dialogRef];
-		$[0] = dialogRef;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	useLayoutEffect$1(t0, t1);
-	return overflows;
-}
-
-//#endregion
-export { useContentOverflow };
-//# sourceMappingURL=use-content-overflow.js.map

package/dist/components/overlays/Dialog/use-content-overflow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-content-overflow.js","names":["RefObject","useState","useLayoutEffect","OVERFLOW_THRESHOLD","BODY_SELECTOR","useContentOverflow","dialogRef","$","_c","overflows","setOverflows","t0","t1","dialog","current","ResizeObserver","body","measure","scrollHeight","clientHeight","resizeObserver","mutationObserver","MutationObserver","sync","querySelector","disconnect","observe","childList","form","Array","from","querySelectorAll","child","children"],"sources":["../../../../src/components/overlays/Dialog/use-content-overflow.ts"],"sourcesContent":["import { RefObject, useState } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n// Same slack as `useTinyScrollbar`: sub-pixel rounding can leave a body that\n// fits reporting a `scrollHeight` a pixel or two over its `clientHeight`.\nconst OVERFLOW_THRESHOLD = 2;\n\n// The body is the `Content` the dialog itself lays out: a direct child, or the\n// direct child of a direct-child `<form>` (a `Form` placed there lays itself\n// out as the dialog's column; see `FormElement`). Those are the two shapes in\n// which `Content` is the thing that scrolls. A `Content` nested anywhere else is\n// part of the body, not the body.\nconst BODY_SELECTOR =\n  ':scope > [data-id=\"Content\"], :scope > form > [data-id=\"Content\"]';\n\n/**\n * Whether the dialog's body is taller than the room it has, i.e. whether it\n * scrolls. The footer draws its top line on this (see `Dialog`).\n *\n * The body's own box is not enough to watch. Once the dialog reaches its max\n * height the box stops growing, and in a fixed-height dialog (`fullscreen`,\n * `panel`) it never changes at all — there, content growing past the fold is\n * visible only on the body's children. So both the body and its children are\n * observed, and the set is re-synced whenever the body or its child list is\n * replaced.\n */\nexport function useContentOverflow(dialogRef: RefObject<HTMLElement | null>) {\n  const [overflows, setOverflows] = useState(false);\n\n  useLayoutEffect(() => {\n    const dialog = dialogRef.current;\n\n    if (!dialog || typeof ResizeObserver === 'undefined') return;\n\n    let body: HTMLElement | null = null;\n\n    const measure = () => {\n      setOverflows(\n        !!body && body.scrollHeight > body.clientHeight + OVERFLOW_THRESHOLD,\n      );\n    };\n\n    const resizeObserver = new ResizeObserver(measure);\n\n    // Only the child lists of the dialog, a direct-child form and the body can\n    // move the body or change which children to watch, so those three are all\n    // it observes — never the subtree. A picker's popover is a dialog too, and\n    // a virtualized list scrolling inside it mutates on every frame. Deeper\n    // mutations that matter resize a child, which the resize observer sees.\n    const mutationObserver = new MutationObserver(() => sync());\n\n    const sync = () => {\n      body = dialog.querySelector<HTMLElement>(BODY_SELECTOR);\n\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n\n      mutationObserver.observe(dialog, { childList: true });\n\n      for (const form of Array.from(dialog.querySelectorAll(':scope > form'))) {\n        mutationObserver.observe(form, { childList: true });\n      }\n\n      if (body) {\n        mutationObserver.observe(body, { childList: true });\n        resizeObserver.observe(body);\n\n        for (const child of Array.from(body.children)) {\n          resizeObserver.observe(child);\n        }\n      }\n\n      measure();\n    };\n\n    sync();\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [dialogRef]);\n\n  return overflows;\n}\n"],"mappings":";;;;;;AAMA,MAAMG,qBAAqB;AAO3B,MAAMC,gBACJ;;;;;;;;;;;;AAaF,SAAOC,mBAAAC,WAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,CAAAC,WAAAC,gBAAkCT,SAAS,MAAM;CAAC,IAAAU;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAD,WAAA;AAElCK,aAAA;GACd,MAAAE,SAAeP,UAASQ;AAExB,OAAI,CAACD,UAAU,OAAOE,mBAAmB,YAAW;GAEpD,IAAAC,OAA+B;GAE/B,MAAAC,gBAAgB;AACdP,iBACE,CAAC,CAACM,QAAQA,KAAIE,eAAgBF,KAAIG,eAAgBhB,mBACnD;;GAGH,MAAAiB,iBAAuB,IAAIL,eAAeE,QAAQ;GAOlD,MAAAI,mBAAyB,IAAIC,uBAAuBC,MAAM,CAAC;GAE3D,MAAAA,aAAa;AACXP,WAAOH,OAAMW,cAA4BpB,cAAc;AAEvDiB,qBAAgBI,YAAa;AAC7BL,mBAAcK,YAAa;AAE3BJ,qBAAgBK,QAASb,QAAQ,EAAAc,WAAa,MAAM,CAAC;AAErD,SAAK,MAAAC,QAAcC,MAAKC,KAAMjB,OAAMkB,iBAAkB,gBAAgB,CAAC,CACrEV,kBAAgBK,QAASE,MAAM,EAAAD,WAAa,MAAM,CAAC;AAGrD,QAAIX,MAAI;AACNK,sBAAgBK,QAASV,MAAM,EAAAW,WAAa,MAAM,CAAC;AACnDP,oBAAcM,QAASV,KAAK;AAE5B,UAAK,MAAAgB,SAAeH,MAAKC,KAAMd,KAAIiB,SAAU,CAC3Cb,gBAAcM,QAASM,MAAM;;AAIjCf,aAAS;;AAGXM,SAAM;AAAA,gBAEC;AACLF,qBAAgBI,YAAa;AAC7BL,mBAAcK,YAAa;;;AAE5Bb,OAAA,CAACN,UAAU;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAD,OAAAJ,EAAA;AAAAK,OAAAL,EAAA;;AApDdL,mBAAgBS,IAoDbC,GAAY;AAAA,QAERH"}