@x-plat/design-system 0.14.18 → 0.15.0

package/dist/components/TimePicker/index.js

@@ -1,11 +1,11 @@
 // src/components/TimePicker/TimePicker.tsx
-import React4 from "react";
+import React5 from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return ReactDOM.createPortal(children, document.body);
+  return ReactDOM.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -68,10 +68,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const scrollParentRef = React.useRef(null);
   const placedRef = React.useRef(false);
   const frozenMaxRef = React.useRef(void 0);
+  const cssCapRef = React.useRef(void 0);
   const calculatePosition = React.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
     if (remeasure) frozenMaxRef.current = void 0;
+    if (cssCapRef.current === void 0) {
+      pop.style.maxHeight = "";
+      const raw = getComputedStyle(pop).maxHeight;
+      cssCapRef.current = raw === "none" ? null : Number.parseFloat(raw) || null;
+    }
     if (remeasure || !sizeRef.current) {
       sizeRef.current = {
         w: pop.offsetWidth,
@@ -93,8 +99,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     };
     const first = !placedRef.current;
     if (first) pop.style.transition = "none";
+    const cap = cssCapRef.current;
+    const desiredH = cap == null ? popH : Math.min(popH, cap);
     const frozen = frozenMaxRef.current;
-    const effectiveH = frozen == null ? popH : Math.min(popH, frozen);
+    const effectiveH = frozen == null ? desiredH : Math.min(desiredH, frozen);
     const { direction: next, top, left, over, maxHeight: suggested } = computePlacement(
       triggerRect,
       popW,
@@ -103,8 +111,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     if (frozenMaxRef.current === void 0) frozenMaxRef.current = suggested;
     const maxHeight = frozenMaxRef.current;
-    pop.style.top = `${top + window.scrollY}px`;
-    pop.style.left = `${left + window.scrollX}px`;
+    const hostRect = (pop.offsetParent ?? pop.parentElement)?.getBoundingClientRect();
+    pop.style.top = `${top - (hostRect?.top ?? 0)}px`;
+    pop.style.left = `${left - (hostRect?.left ?? 0)}px`;
     pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
     pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
     directionRef.current = next;
@@ -122,6 +131,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       scrollParentRef.current = null;
       placedRef.current = false;
       frozenMaxRef.current = void 0;
+      cssCapRef.current = void 0;
       return;
     }
     if (triggerRef.current) {
@@ -178,8 +188,34 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/useOverlayKeyboard.ts
+// src/tokens/hooks/useOverlayHost.ts
 import React3 from "react";
+var useOverlayHost = (triggerRef, enabled) => {
+  const [host, setHost] = React3.useState(null);
+  React3.useLayoutEffect(() => {
+    if (!enabled || !triggerRef.current) {
+      setHost(null);
+      return;
+    }
+    const el = document.createElement("div");
+    el.dataset.xplatOverlayHost = "";
+    el.style.position = "relative";
+    el.style.width = "0";
+    el.style.height = "0";
+    const parent = findScrollParent(triggerRef.current) ?? document.body;
+    parent.appendChild(el);
+    setHost(el);
+    return () => {
+      el.remove();
+      setHost(null);
+    };
+  }, [enabled, triggerRef]);
+  return host;
+};
+var useOverlayHost_default = useOverlayHost;
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React4 from "react";
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -189,7 +225,7 @@ var FOCUSABLE = [
   "[tabindex]:not([tabindex='-1'])"
 ].join(",");
 var useEscapeKey = (enabled, onEscape) => {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -202,9 +238,9 @@ var useEscapeKey = (enabled, onEscape) => {
   }, [enabled, onEscape]);
 };
 var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
-  const onCloseRef = React3.useRef(onClose);
+  const onCloseRef = React4.useRef(onClose);
   onCloseRef.current = onClose;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const trigger = triggerRef.current;
     if (!enabled || !trigger) return;
     const observer = new IntersectionObserver(
@@ -414,13 +450,13 @@ var TimePicker = (props) => {
     required,
     validations
   } = props;
-  const fieldId = React4.useId();
-  const triggerRef = React4.useRef(null);
-  const contentRef = React4.useRef(null);
-  const [isOpen, setOpen] = React4.useState(false);
-  const [mounted, setMounted] = React4.useState(false);
-  const [visible, setVisible] = React4.useState(false);
-  const options = React4.useMemo(() => {
+  const fieldId = React5.useId();
+  const triggerRef = React5.useRef(null);
+  const contentRef = React5.useRef(null);
+  const [isOpen, setOpen] = React5.useState(false);
+  const [mounted, setMounted] = React5.useState(false);
+  const [visible, setVisible] = React5.useState(false);
+  const options = React5.useMemo(() => {
     const safeStep = step > 0 && step <= 720 ? step : 30;
     const lo = toMinutes(min) ?? 0;
     const hi = toMinutes(max) ?? 24 * 60 - 1;
@@ -428,18 +464,19 @@ var TimePicker = (props) => {
     for (let t = lo; t <= hi; t += safeStep) out.push(toHHmm(t));
     return out;
   }, [step, min, max]);
-  const close = React4.useCallback(() => setOpen(false), []);
+  const close = React5.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, contentRef, mounted);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -477,7 +514,7 @@ var TimePicker = (props) => {
         children: /* @__PURE__ */ jsx5("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
       }
     ),
-    mounted && /* @__PURE__ */ jsx5(Portal_default, { children: /* @__PURE__ */ jsx5(
+    mounted && /* @__PURE__ */ jsx5(Portal_default, { container: host, children: /* @__PURE__ */ jsx5(
       "div",
       {
         ref: contentRef,

package/dist/components/Tooltip/index.cjs

@@ -39,9 +39,9 @@ var import_react = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom = __toESM(require("react-dom"), 1);
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return import_react_dom.default.createPortal(children, document.body);
+  return import_react_dom.default.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;

package/dist/components/Tooltip/index.js

@@ -3,9 +3,9 @@ import React from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return ReactDOM.createPortal(children, document.body);
+  return ReactDOM.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;