@wireapp/react-ui-kit 9.22.0 → 9.23.1

package/lib/Form/SelectComponents.js

@@ -12,7 +12,7 @@ const SelectContainer = (props) => {
 };
 exports.SelectContainer = SelectContainer;
 const isGroup = (options) => {
-    return options.length > 0 && 'options' in options[0];
+    return options?.length > 0 && 'options' in options[0];
 };
 exports.isGroup = isGroup;
 const DropdownIndicator = (props) => {

package/lib/Form/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAsHrF,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC7D,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAiCzD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAoJrF,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC7D,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAmCzD,CAAC"}

package/lib/Form/Tooltip.js

@@ -62,52 +62,78 @@ const tooltipStyle = theme => ({
         position: 'absolute',
     },
 });
-const PortalComponent = ({ children, bounding, selector = '#wire-app' }) => {
+const TooltipArrow = ({ wrapperRect }) => {
+    const tooltipArrowRef = (element) => {
+        if (!element) {
+            return;
+        }
+        const { parentElement } = element;
+        if (!parentElement) {
+            return;
+        }
+        const tooltipRect = parentElement.getBoundingClientRect();
+        const isTouchingLeftEdge = wrapperRect.x <= tooltipRect.width / 2 + paddingDistance * 2;
+        const isTouchingRightEdge = wrapperRect.left + tooltipRect.width / 2 + paddingDistance * 2 >= window.innerWidth;
+        if (isTouchingLeftEdge) {
+            element.style.left = `${wrapperRect.left - paddingDistance}px`;
+        }
+        else if (isTouchingRightEdge) {
+            const calculateX = window.innerWidth - wrapperRect.right - paddingDistance;
+            element.style.right = `${calculateX}px`;
+        }
+        else {
+            element.style.left = `50%`;
+            element.style.transform = `translateX(-50%)`;
+        }
+    };
+    return (0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow" });
+};
+const PortalComponent = ({ children, wrapperRect, selector = '#wire-app' }) => {
     const [isTouchingTop, setIsTouchingTop] = (0, react_1.useState)(false);
     const targetElement = document.querySelector(selector);
-    if (!targetElement) {
+    if (!targetElement || !wrapperRect) {
         return null;
     }
     const tooltipRef = (element) => {
-        if (!bounding || !element) {
+        if (!element) {
             return;
         }
-        const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingDistance * 2;
+        const tooltipRect = element.getBoundingClientRect();
+        const isTouchingTopEdge = wrapperRect.y <= tooltipRect.height + paddingDistance * 2;
         setIsTouchingTop(isTouchingTopEdge);
-        const elementWidth = (element.scrollWidth - bounding.width) / 2;
-        element.style.left = `${bounding.x - elementWidth}px`;
-        if (isTouchingTopEdge) {
-            element.style.top = `${bounding.y + bounding.height}px`;
+        const isTouchingLeftEdge = wrapperRect.x <= tooltipRect.width / 2 + paddingDistance * 2;
+        const isTouchingRightEdge = wrapperRect.left + tooltipRect.width / 2 + paddingDistance * 2 >= window.innerWidth;
+        if (isTouchingLeftEdge) {
+            element.style.left = `${paddingDistance}px`;
+        }
+        else if (isTouchingRightEdge) {
+            element.style.right = `${paddingDistance}px`;
         }
         else {
-            element.style.top = `${bounding.y - element.clientHeight}px`;
+            const elementWidth = (element.scrollWidth - wrapperRect.width) / 2;
+            element.style.left = `${wrapperRect.x - elementWidth}px`;
         }
-    };
-    const tooltipArrowRef = (element) => {
-        if (!element) {
-            return;
+        if (isTouchingTopEdge) {
+            element.style.top = `${wrapperRect.y + wrapperRect.height}px`;
         }
-        const { parentElement } = element;
-        if (!parentElement) {
-            return;
+        else {
+            element.style.top = `${wrapperRect.y - element.clientHeight}px`;
         }
-        const parentElementRect = parentElement.getBoundingClientRect();
-        element.style.left = `${parentElementRect.width / 2 - paddingDistance}px`;
     };
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), "data-position": isTouchingTop ? 'bottom' : 'top', children: [(0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow" }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), "data-position": isTouchingTop ? 'bottom' : 'top', children: [(0, jsx_runtime_1.jsx)(TooltipArrow, { wrapperRect: wrapperRect }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
 };
-const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['body']);
+const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['body', 'selector']);
 const Tooltip = ({ children, ...props }) => {
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const boundingRectRef = (0, react_1.useRef)();
+    const wrapperRectRef = (0, react_1.useRef)();
     const filteredProps = filterTooltipProps(props);
     const { body, selector = '#wire-app' } = props;
-    const onElementEnter = (event) => {
-        const boundingRect = event.currentTarget.getBoundingClientRect();
+    const onElementEnter = ({ currentTarget }) => {
+        const wrapperRect = currentTarget.getBoundingClientRect();
         setIsHovered(true);
-        boundingRectRef.current = boundingRect;
+        wrapperRectRef.current = wrapperRect;
     };
     const onElementLeave = () => setIsHovered(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { role: "presentation", ...filteredProps, "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave, ...props, children: [children, isHovered && ((0, jsx_runtime_1.jsx)(PortalComponent, { bounding: boundingRectRef.current, selector: selector, children: body }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "presentation", "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave, style: { width: 'max-content' }, ...filteredProps, children: [(0, jsx_runtime_1.jsx)("div", { id: "childrenElement", children: children }), isHovered && ((0, jsx_runtime_1.jsx)(PortalComponent, { wrapperRect: wrapperRectRef.current, selector: selector, children: body }))] }));
 };
 exports.Tooltip = Tooltip;

package/package.json

@@ -16,8 +16,8 @@
   },
   "devDependencies": {
     "@babel/cli": "7.24.8",
-    "@babel/core": "7.24.9",
-    "@babel/preset-env": "7.25.0",
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.3",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
     "@emotion/babel-preset-css-prop": "^11.10.0",
@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.22.0",
-  "gitHead": "4d0125c6e80d6f1753631221f1be493861a5cefd"
+  "version": "9.23.1",
+  "gitHead": "770b4a01d2b88aa3e07a0f737c481fcb0819bcc6"
 }