react-core-ts 2.1.41 → 2.1.43

package/src/styles/components/autocomplete.css

@@ -705,6 +705,11 @@ span.dropdown-search-icon {
   border-color: transparent transparent #000 transparent;
 }
 
+.custom_tooltip_style_class.up.tooltiptext::after,
+.custom_tooltip_style_class.down.tooltiptext::after {
+  left: var(--tooltip-arrow-left, 50%);
+}
+
 .autocomplete-suggections .qbs-autocomplete-suggections-items {
   display: flex;
   /* justify-content: space-between; */

package/src/utilities/NewTooltip.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { getPortalTooltipCoords } from './getPosition';
 
 const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
   const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-  const dropRef = useRef(null);
+  const dropRef = useRef<HTMLDivElement | null>(null);
   const menuButtonRef = useRef<HTMLDivElement>(null);
   const [isTooltipMounted, setIsTooltipMounted] = useState(false);
 
@@ -11,11 +12,11 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
   const [tooltipStyle, setTooltipStyle] = useState({
     top: 0,
     left: 0,
-    width: 0,
+    arrowOffset: 50,
   });
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handleMouseEnter = (e: React.MouseEvent) => {
+  const handleMouseEnter = () => {
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
@@ -25,63 +26,45 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
     }
   };
 
-  useEffect(() => {
-    if (
-      visible &&
-      isTooltipMounted &&
-      menuButtonRef.current &&
+  const updatePosition = useCallback(() => {
+    if (!menuButtonRef.current || !dropRef.current) return;
+
+    const coords = getPortalTooltipCoords(
+      menuButtonRef.current,
       dropRef.current
-    ) {
-      const inputBoxRect = menuButtonRef.current.getBoundingClientRect();
-      const tooltipHeight = dropRef.current.offsetHeight;
-      const tooltipWidth = dropRef.current.offsetWidth;
-      const boxWidth = inputBoxRect.width;
-      const viewportHeight = window.innerHeight;
-
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-
-      let dropPosition: 'top-position' | 'bottom-position' = 'bottom-position';
-      if (spaceBelow >= tooltipHeight + 20) {
-        dropPosition = 'bottom-position';
-      } else if (spaceAbove >= tooltipHeight + 20) {
-        dropPosition = 'top-position';
-      } else {
-        dropPosition =
-          spaceBelow > spaceAbove ? 'bottom-position' : 'top-position';
+    );
+    setDropdownPosition(coords.placement);
+    setTooltipStyle((prev) => {
+      if (
+        prev.top === coords.top &&
+        prev.left === coords.left &&
+        prev.arrowOffset === coords.arrowOffset
+      ) {
+        return prev;
       }
-      setDropdownPosition(dropPosition);
-
-      let top =
-        dropPosition === 'bottom-position'
-          ? inputBoxRect.bottom + 8 + window.scrollY
-          : inputBoxRect.top - tooltipHeight - 8 + window.scrollY;
-
-      const left = inputBoxRect.left + boxWidth / 2 - 200 / 2 + window.scrollX;
-
-      setTooltipStyle({
-        top,
-        left: Math.max(left, 8),
-        width: 200,
-      });
-
-      // ✨ Recalculate again after a small delay
-      setTimeout(() => {
-        if (dropRef.current) {
-          const correctedHeight = dropRef.current.offsetHeight;
-          const correctedTop =
-            dropPosition === 'bottom-position'
-              ? inputBoxRect.bottom + 8 + window.scrollY
-              : inputBoxRect.top - correctedHeight - 8 + window.scrollY;
-
-          setTooltipStyle((prev) => ({
-            ...prev,
-            top: correctedTop,
-          }));
-        }
-      }, 0);
-    }
-  }, [visible]);
+      return {
+        top: coords.top,
+        left: coords.left,
+        arrowOffset: coords.arrowOffset,
+      };
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!visible || !isTooltipMounted) return;
+
+    updatePosition();
+    const frame = window.requestAnimationFrame(updatePosition);
+
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [visible, isTooltipMounted, updatePosition]);
 
   useEffect(() => {
     const handleMouseMove = (event: MouseEvent) => {
@@ -152,17 +135,19 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
             className={`tooltiptext custom_tooltip_style_class ${
               dropdownPosition == 'bottom-position' ? 'down' : 'up'
             }`}
-            style={{
-              top: tooltipStyle.top,
-              left: tooltipStyle.left,
-              opacity: visible ? 1 : 0,
-              visibility: visible ? 'visible' : 'hidden',
-              width: tooltipStyle.width,
-              minWidth: '60px',
-              maxWidth: '200px',
-              pointerEvents: 'auto',
-              maxHeight: '210px',
-            }}
+            style={
+              {
+                top: tooltipStyle.top,
+                left: tooltipStyle.left,
+                opacity: visible ? 1 : 0,
+                visibility: visible ? 'visible' : 'hidden',
+                minWidth: '60px',
+                maxWidth: '200px',
+                pointerEvents: 'auto',
+                maxHeight: '210px',
+                '--tooltip-arrow-left': `${tooltipStyle.arrowOffset}px`,
+              } as React.CSSProperties
+            }
           >
             <div
               className=""

package/src/utilities/expandableTootltip.tsx

@@ -1,99 +1,65 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { getPortalTooltipCoords } from './getPosition';
 
 const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
   const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-  const dropRef = useRef(null);
+  const dropRef = useRef<HTMLSpanElement | null>(null);
   const menuButtonRef = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
   const [tooltipStyle, setTooltipStyle] = useState({
     top: 0,
     left: 0,
-    width: 0,
+    arrowOffset: 50,
   });
-  const adjustDropdownPosition = (): string => {
-    if (menuButtonRef.current) {
-      const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
 
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-      if (spaceAbove > spaceBelow) {
-        if (spaceAbove > 90 && spaceBelow < 120) {
-          return 'top-position';
-        } else {
-          return 'bottom-position';
-        }
-      } else {
-        const diff: number = spaceBelow - spaceAbove;
-        if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
-          return 'top-position';
-        } else {
-          return 'bottom-position';
-        }
-      }
-    }
-  };
-
-  const handleMouseEnter = (e: React.MouseEvent) => {
-    if (menuButtonRef.current) {
-      const dropPosition = adjustDropdownPosition();
-      setDropdownPosition(dropPosition);
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
-      let top = rect.bottom + window.scrollY;
-      let left = rect.left + window.scrollX;
-      const height = rect.height;
-      const width = dropRef?.current?.offsetWidth;
-      if (dropPosition === 'bottom-position') {
-        top = top + height / 2 - 5;
-      } else {
-        top = top - height * 2 + 15;
-      }
-
-      setTooltipStyle({
-        top: top,
-        left: left,
-        width: width,
-      });
-      setVisible(true);
-    }
+  const handleMouseEnter = () => {
+    setVisible(true);
   };
 
   const handleMouseLeave = () => {
     setVisible(false);
   };
 
-  useLayoutEffect(() => {
-    const updateTooltipPosition = () => {
-      if (dropRef.current && visible && tooltipStyle) {
-        const tooltipHeight = dropRef.current.offsetHeight;
-        const tooltipWidth = dropRef.current.offsetWidth;
-        const boxWidth = menuButtonRef.current.offsetWidth;
-        setTooltipStyle((prevStyle) => ({
-          ...prevStyle,
-          left:
-            prevStyle.left + boxWidth / 2 - tooltipWidth / 2 < 0
-              ? 20
-              : prevStyle.left + boxWidth / 2 - tooltipWidth / 2,
-          width: tooltipWidth,
-          top:
-            dropdownPosition === 'bottom-position'
-              ? prevStyle.top
-              : prevStyle.top - tooltipHeight,
-        }));
+  const updatePosition = useCallback(() => {
+    if (!menuButtonRef.current || !dropRef.current) return;
+
+    const coords = getPortalTooltipCoords(
+      menuButtonRef.current,
+      dropRef.current
+    );
+    setDropdownPosition(coords.placement);
+    setTooltipStyle((prev) => {
+      if (
+        prev.top === coords.top &&
+        prev.left === coords.left &&
+        prev.arrowOffset === coords.arrowOffset
+      ) {
+        return prev;
       }
-    };
+      return {
+        top: coords.top,
+        left: coords.left,
+        arrowOffset: coords.arrowOffset,
+      };
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!visible) return;
 
-    if (visible) {
-      updateTooltipPosition();
-    }
+    updatePosition();
+    const frame = window.requestAnimationFrame(updatePosition);
 
-    window.addEventListener('resize', updateTooltipPosition);
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
 
     return () => {
-      window.removeEventListener('resize', updateTooltipPosition);
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
     };
-  }, [visible, dropdownPosition]);
+  }, [visible, updatePosition]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -122,19 +88,23 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
         tooltipStyle &&
         ReactDOM.createPortal(
           <span
-            ref={(node) => (dropRef.current = node)}
+            ref={(node) => {
+              dropRef.current = node;
+            }}
             className={`tooltiptext custom_tooltip_style_class  ${
               dropdownPosition == 'bottom-position' ? 'down' : 'up'
             }`}
-            style={{
-              top: tooltipStyle.top,
-              left: tooltipStyle.left,
-              opacity: 1,
-              width: tooltipStyle.width,
-              minWidth: '60px',
-              maxWidth: '200px',
-              visibility: 'visible',
-            }}
+            style={
+              {
+                top: tooltipStyle.top,
+                left: tooltipStyle.left,
+                opacity: 1,
+                minWidth: '60px',
+                maxWidth: '200px',
+                visibility: 'visible',
+                '--tooltip-arrow-left': `${tooltipStyle.arrowOffset}px`,
+              } as React.CSSProperties
+            }
           >
             <span className="tooltip-text-container">{title}</span>
           </span>,

package/src/utilities/getPosition.ts

@@ -59,3 +59,65 @@ export const applyToolTipPositionClass = (
     textFieldElement.classList.add(positionClass);
   }
 };
+
+export type PortalTooltipPlacement = 'top-position' | 'bottom-position';
+
+export type PortalTooltipCoords = {
+  top: number;
+  left: number;
+  arrowOffset: number;
+  placement: PortalTooltipPlacement;
+};
+
+const VIEWPORT_PAD = 8;
+const TOOLTIP_GAP = 8;
+const ARROW_HALF = 5;
+
+/** Center a portaled tooltip on its trigger and keep the arrow on the trigger. */
+export const getPortalTooltipCoords = (
+  anchorEl: HTMLElement,
+  tooltipEl: HTMLElement
+): PortalTooltipCoords => {
+  const anchor = anchorEl.getBoundingClientRect();
+  const tooltipWidth = Math.max(tooltipEl.offsetWidth, 60);
+  const tooltipHeight = tooltipEl.offsetHeight;
+
+  const spaceAbove = anchor.top;
+  const spaceBelow = window.innerHeight - anchor.bottom;
+
+  let placement: PortalTooltipPlacement = 'bottom-position';
+  if (spaceBelow >= tooltipHeight + 20) {
+    placement = 'bottom-position';
+  } else if (spaceAbove >= tooltipHeight + 20) {
+    placement = 'top-position';
+  } else {
+    placement = spaceBelow > spaceAbove ? 'bottom-position' : 'top-position';
+  }
+
+  const top =
+    placement === 'bottom-position'
+      ? anchor.bottom + TOOLTIP_GAP + window.scrollY
+      : anchor.top - tooltipHeight - TOOLTIP_GAP + window.scrollY;
+
+  const triggerCenterX = anchor.left + anchor.width / 2;
+  const minLeft = VIEWPORT_PAD;
+  const maxLeft = window.innerWidth - tooltipWidth - VIEWPORT_PAD;
+  let left =
+    maxLeft < minLeft
+      ? minLeft
+      : Math.min(Math.max(triggerCenterX - tooltipWidth / 2, minLeft), maxLeft);
+
+  const minArrow = ARROW_HALF + 6;
+  const maxArrow = Math.max(minArrow, tooltipWidth - ARROW_HALF - 6);
+  const arrowOffset = Math.min(
+    Math.max(triggerCenterX - left, minArrow),
+    maxArrow
+  );
+
+  return {
+    top,
+    left: left + window.scrollX,
+    arrowOffset,
+    placement,
+  };
+};

package/dist/styles/components/modern-input.css

@@ -1,208 +0,0 @@
-/**
- * Self-contained modern TextField / Autocomplete input styles.
- * These used to live in host apps; the library must ship them for Vite / local preview.
- */
-
-/* Base peer input (height + border) */
-input.qbs-peer,
-.qbs-textfield input[class*='qbs-h-'] {
-  box-sizing: border-box !important;
-  display: block;
-  width: 100%;
-  height: 2.5rem !important;
-  min-height: 2.5rem !important;
-  margin: 0;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #d0d5dd;
-  border-radius: 4px;
-  background-color: #fff;
-  color: #111827;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-  padding-top: 0;
-  padding-bottom: 0;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-input.qbs-peer.qbs-h-\[34px\],
-.qbs-textfield input.qbs-h-\[34px\] {
-  height: 34px !important;
-  min-height: 34px !important;
-}
-
-input.qbs-peer.qbs-h-\[25px\],
-.qbs-textfield input.qbs-h-\[25px\] {
-  height: 25px !important;
-  min-height: 25px !important;
-  font-size: 0.75rem;
-}
-
-input.qbs-peer:focus:not(.qbs-input-error) {
-  border-color: #001f3f;
-}
-
-input.qbs-peer:disabled {
-  color: #98a2b3;
-  background-color: #f2f4f7;
-  cursor: not-allowed;
-}
-
-/*
- * Error state — must beat `input.qbs-peer` / `:focus` (element+class specificity).
- * Broken Tailwind classes like `focus:qbs-border-error-[#FDA29B]` never ship in CSS.
- */
-input.qbs-peer.qbs-input-error,
-.qbs-textfield input.qbs-input-error,
-.qbs-autocomplete-container-table-view input.qbs-input-error {
-  border-color: #fda29b !important;
-  outline: none;
-}
-
-input.qbs-peer.qbs-input-error:focus,
-.qbs-textfield input.qbs-input-error:focus,
-.qbs-autocomplete-container-table-view input.qbs-input-error:focus {
-  border-color: #fda29b !important;
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(253, 162, 155, 0.35);
-}
-
-/* Host-token fallbacks (prefixed utilities that are not in default Tailwind theme) */
-.qbs-border-input-light {
-  border-color: #d0d5dd;
-}
-.qbs-text-input-text {
-  color: #111827;
-}
-.qbs-text-input-disabled,
-.disabled\:qbs-text-input-disabled:disabled {
-  color: #98a2b3;
-}
-.qbs-bg-disabled,
-.disabled\:qbs-bg-disabled:disabled {
-  background-color: #f2f4f7;
-}
-.qbs-text-grey-dark {
-  color: #344054;
-}
-.qbs-text-error-light {
-  color: #f04438;
-}
-.qbs-text-error-icon,
-.qbs-text-error-label {
-  color: #f04438;
-}
-.qbs-text-warning-icon,
-.qbs-text-warning-label {
-  color: #f79009;
-}
-.qbs-text-tick-label {
-  color: #28b440;
-}
-.qbs-text-grey-medium {
-  color: #667085;
-}
-.qbs-border-grey-light {
-  border-color: #d0d5dd;
-}
-.qbs-text-table-bodyColor {
-  color: #667085;
-}
-.placeholder-input-label::placeholder {
-  color: #667085;
-}
-.qbs-bg-bodyBG {
-  background-color: #f9fafb;
-}
-.qbs-text-xxs {
-  font-size: 0.625rem;
-  line-height: 0.875rem;
-}
-.qbs-input-outline {
-  outline: none;
-}
-.text-common {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.text-error {
-  color: #f04438;
-}
-.text-grey-secondary {
-  color: #667085;
-}
-.text-text-primary {
-  color: #101828;
-}
-
-/* Floating label: hide native placeholder when modern label is used */
-.placeholder-transparent::placeholder {
-  color: transparent !important;
-}
-.placeholder-transparent::-webkit-input-placeholder {
-  color: transparent !important;
-}
-.focus\:placeholder-grey-secondary:focus::placeholder {
-  color: #98a2b3;
-}
-
-.modern-input-label-truncate {
-  max-width: calc(100% - 1.75rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  pointer-events: none;
-  background-color: transparent;
-}
-
-.modern-input-label-size {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.modern-input-peer-focus-label-size,
-.peer-focus\:modern-input-peer-focus-label-size {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-/* When peer has value / is focused, shrink label (Tailwind peer-focus variant class name) */
-.qbs-peer:focus ~ .peer-focus\:modern-input-peer-focus-label-size,
-.qbs-peer:not(:placeholder-shown) ~ .modern-input-peer-focus-label-size,
-.qbs-peer:not(:placeholder-shown) ~ label.modern-input-label-truncate {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.active-input-label-bg {
-  background-color: #fff;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.disabled-input-label-bg {
-  background-color: #f2f4f7;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-/* Ensure bordered utility actually draws a border */
-.qbs-border {
-  border-style: solid;
-}
-
-/* Utilities that apps expect but Tailwind may not emit / lose specificity */
-.qbs-z-1 {
-  z-index: 1;
-}
-.qbs-start-\[14px\] {
-  inset-inline-start: 14px;
-}
-.hover\:qbs-text-dark:hover {
-  color: #101828;
-}