@x-plat/design-system 0.8.0 → 0.8.1

package/dist/components/Tooltip/index.cjs

@@ -35,18 +35,13 @@ __export(Tooltip_exports, {
 module.exports = __toCommonJS(Tooltip_exports);
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
-var import_react = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react.default.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = import_react.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
+  return import_react_dom.default.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -68,7 +63,7 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -81,14 +76,14 @@ var Tooltip = (props) => {
     follow = false,
     disabled = false
   } = props;
-  const triggerRef = import_react2.default.useRef(null);
-  const tooltipRef = import_react2.default.useRef(null);
-  const [visible, setVisible] = import_react2.default.useState(false);
-  const [pos, setPos] = import_react2.default.useState({ left: 0, top: 0 });
-  const delayTimer = import_react2.default.useRef(0);
-  const rafRef = import_react2.default.useRef(0);
-  const cursor = import_react2.default.useRef(null);
-  const clamp = import_react2.default.useCallback((left, top, w, h) => {
+  const triggerRef = import_react.default.useRef(null);
+  const tooltipRef = import_react.default.useRef(null);
+  const [visible, setVisible] = import_react.default.useState(false);
+  const [pos, setPos] = import_react.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react.default.useRef(0);
+  const rafRef = import_react.default.useRef(0);
+  const cursor = import_react.default.useRef(null);
+  const clamp = import_react.default.useCallback((left, top, w, h) => {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     return {
@@ -96,7 +91,7 @@ var Tooltip = (props) => {
       top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
     };
   }, []);
-  const placeAtCursor = import_react2.default.useCallback((x, y) => {
+  const placeAtCursor = import_react.default.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -107,7 +102,7 @@ var Tooltip = (props) => {
     if (top < GAP) top = y + OFFSET;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const placeAtTrigger = import_react2.default.useCallback(() => {
+  const placeAtTrigger = import_react.default.useCallback(() => {
     const el = tooltipRef.current;
     const trigger = triggerRef.current;
     if (!el || !trigger) return;
@@ -119,19 +114,19 @@ var Tooltip = (props) => {
     const left = rect.left + rect.width / 2 - w / 2;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const reposition = import_react2.default.useCallback(() => {
+  const reposition = import_react.default.useCallback(() => {
     if (follow && cursor.current) {
       placeAtCursor(cursor.current.x, cursor.current.y);
     } else {
       placeAtTrigger();
     }
   }, [follow, placeAtCursor, placeAtTrigger]);
-  const handleMouseEnter = import_react2.default.useCallback((e) => {
+  const handleMouseEnter = import_react.default.useCallback((e) => {
     if (disabled) return;
     cursor.current = { x: e.clientX, y: e.clientY };
     delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = import_react2.default.useCallback((e) => {
+  const handleMouseMove = import_react.default.useCallback((e) => {
     cursor.current = { x: e.clientX, y: e.clientY };
     if (!visible || !follow) return;
     cancelAnimationFrame(rafRef.current);
@@ -139,25 +134,25 @@ var Tooltip = (props) => {
       if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
     });
   }, [visible, follow, placeAtCursor]);
-  const close = import_react2.default.useCallback(() => {
+  const close = import_react.default.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleMouseLeave = import_react2.default.useCallback(() => {
+  const handleMouseLeave = import_react.default.useCallback(() => {
     cursor.current = null;
     close();
   }, [close]);
-  const handleFocus = import_react2.default.useCallback(() => {
+  const handleFocus = import_react.default.useCallback(() => {
     if (disabled) return;
     cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  import_react2.default.useLayoutEffect(() => {
+  import_react.default.useLayoutEffect(() => {
     if (!visible) return;
     reposition();
   }, [visible, reposition]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!visible || follow) return;
     const onChange = () => placeAtTrigger();
     window.addEventListener("scroll", onChange, true);
@@ -167,12 +162,12 @@ var Tooltip = (props) => {
       window.removeEventListener("resize", onChange);
     };
   }, [visible, follow, placeAtTrigger]);
-  import_react2.default.useEffect(() => () => {
+  import_react.default.useEffect(() => () => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref: triggerRef,
@@ -185,7 +180,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             ref: tooltipRef,
@@ -193,8 +188,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", type),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })

package/dist/components/Tooltip/index.js

@@ -1,16 +1,11 @@
 // src/components/Tooltip/Tooltip.tsx
-import React2 from "react";
+import React from "react";
 
 // src/tokens/hooks/Portal.tsx
-import React from "react";
 import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = React.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
+  return ReactDOM.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -32,7 +27,7 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Tooltip/Tooltip.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -45,14 +40,14 @@ var Tooltip = (props) => {
     follow = false,
     disabled = false
   } = props;
-  const triggerRef = React2.useRef(null);
-  const tooltipRef = React2.useRef(null);
-  const [visible, setVisible] = React2.useState(false);
-  const [pos, setPos] = React2.useState({ left: 0, top: 0 });
-  const delayTimer = React2.useRef(0);
-  const rafRef = React2.useRef(0);
-  const cursor = React2.useRef(null);
-  const clamp = React2.useCallback((left, top, w, h) => {
+  const triggerRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(false);
+  const [pos, setPos] = React.useState({ left: 0, top: 0 });
+  const delayTimer = React.useRef(0);
+  const rafRef = React.useRef(0);
+  const cursor = React.useRef(null);
+  const clamp = React.useCallback((left, top, w, h) => {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     return {
@@ -60,7 +55,7 @@ var Tooltip = (props) => {
       top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
     };
   }, []);
-  const placeAtCursor = React2.useCallback((x, y) => {
+  const placeAtCursor = React.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -71,7 +66,7 @@ var Tooltip = (props) => {
     if (top < GAP) top = y + OFFSET;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const placeAtTrigger = React2.useCallback(() => {
+  const placeAtTrigger = React.useCallback(() => {
     const el = tooltipRef.current;
     const trigger = triggerRef.current;
     if (!el || !trigger) return;
@@ -83,19 +78,19 @@ var Tooltip = (props) => {
     const left = rect.left + rect.width / 2 - w / 2;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const reposition = React2.useCallback(() => {
+  const reposition = React.useCallback(() => {
     if (follow && cursor.current) {
       placeAtCursor(cursor.current.x, cursor.current.y);
     } else {
       placeAtTrigger();
     }
   }, [follow, placeAtCursor, placeAtTrigger]);
-  const handleMouseEnter = React2.useCallback((e) => {
+  const handleMouseEnter = React.useCallback((e) => {
     if (disabled) return;
     cursor.current = { x: e.clientX, y: e.clientY };
     delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = React2.useCallback((e) => {
+  const handleMouseMove = React.useCallback((e) => {
     cursor.current = { x: e.clientX, y: e.clientY };
     if (!visible || !follow) return;
     cancelAnimationFrame(rafRef.current);
@@ -103,25 +98,25 @@ var Tooltip = (props) => {
       if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
     });
   }, [visible, follow, placeAtCursor]);
-  const close = React2.useCallback(() => {
+  const close = React.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleMouseLeave = React2.useCallback(() => {
+  const handleMouseLeave = React.useCallback(() => {
     cursor.current = null;
     close();
   }, [close]);
-  const handleFocus = React2.useCallback(() => {
+  const handleFocus = React.useCallback(() => {
     if (disabled) return;
     cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  React2.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!visible) return;
     reposition();
   }, [visible, reposition]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!visible || follow) return;
     const onChange = () => placeAtTrigger();
     window.addEventListener("scroll", onChange, true);
@@ -131,11 +126,11 @@ var Tooltip = (props) => {
       window.removeEventListener("resize", onChange);
     };
   }, [visible, follow, placeAtTrigger]);
-  React2.useEffect(() => () => {
+  React.useEffect(() => () => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ jsx2(Fragment, { children });
+  if (!title && !description) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -149,7 +144,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsxs(
+        visible && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: tooltipRef,
@@ -157,8 +152,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", type),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx2("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx2("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })