@db-ux/react-core-components 4.4.0 → 4.4.1-floating-components-066d296

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/react-core-components
 
+## 4.4.1
+
+### Patch Changes
+
+- fix: issue with tailwind not reflecting adaptive color changes with `[data-color="xxx"]` - [see commit 936638d](https://github.com/db-ux-design-system/core-web/commit/936638d672bbb6c0f8a0ecf77bf41fafa0e31656)
+
+- DBCustomSelect: Prevent floating label from flickering during initial render - [see commit e5ceff8](https://github.com/db-ux-design-system/core-web/commit/e5ceff861534186cf86d1f5f0a876e04aeac9e41)
+
 ## 4.4.0
 
 ### Minor Changes

package/dist/components/popover/popover.js

@@ -26,7 +26,7 @@ function DBPopoverFn(props, component) {
         const article = _ref.current.querySelector("article");
         if (article) {
             // This is a workaround for angular
-            utilsDelay(() => {
+            void utilsDelay(() => {
                 var _a;
                 handleFixedPopover(article, _ref.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);

package/dist/components/tooltip/tooltip.js

@@ -36,7 +36,7 @@ function DBTooltipFn(props, component) {
             return;
         if (_ref.current) {
             // This is a workaround for angular
-            utilsDelay(() => {
+            void utilsDelay(() => {
                 var _a;
                 // Due to race conditions we need to check for _ref again
                 if (_ref.current) {
@@ -70,6 +70,7 @@ function DBTooltipFn(props, component) {
         if (_ref.current && initialized && _id) {
             const parent = getParent();
             if (parent) {
+                handleAutoPlacement(parent);
                 ["mouseenter", "focusin"].forEach((event) => {
                     parent.addEventListener(event, () => handleEnter(parent));
                 });

package/dist/utils/floating-components.js

@@ -228,10 +228,54 @@ export const getFloatingProps = (element, parent, placement) => {
         innerHeight
     };
 };
+const MAX_ANCESTOR_DEPTH = 10;
+const ancestorCache = new WeakMap();
+const getAncestorHasCorrectedPlacement = (element) => {
+    if (ancestorCache.has(element)) {
+        return ancestorCache.get(element);
+    }
+    let current = element.parentElement;
+    let anchor = 0;
+    while (current && anchor < MAX_ANCESTOR_DEPTH) {
+        if (current.dataset['correctedPlacement']) {
+            ancestorCache.set(element, current);
+            return current;
+        }
+        current = current.parentElement;
+        anchor += 1;
+    }
+    ancestorCache.set(element, null);
+    return null;
+};
 export const handleFixedPopover = (element, parent, placement) => {
-    var _a;
-    const distance = (_a = getComputedStyle(element).getPropertyValue('--db-popover-distance')) !== null && _a !== void 0 ? _a : '0px';
-    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    var _a, _b;
+    const parentComputedStyles = getComputedStyle(parent);
+    const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
+    const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
+    const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
+    const distance = (_b = (_a = getComputedStyle(element)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--db-popover-distance')) !== null && _b !== void 0 ? _b : '0px';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    if (ancestorWithCorrectedPlacement) {
+        const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
+        left = Math.abs(left - ancestorRect.left);
+        right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
+        top = Math.abs(top - ancestorRect.top);
+        bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
+    }
+    if (parentHasFloatingPosition) {
+        /*
+         * If we have a floating element inside an element with position:absolute/fixed
+         * we need to calculate with relative values
+         * */
+        left = 0;
+        right = width;
+        top = 0;
+        bottom = height;
+        if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
+            // We need the default zIndex for floating elements on the parent
+            parent.style.zIndex = '1';
+        }
+    }
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -241,6 +285,9 @@ export const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
+        }
     }
     if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
         const diff = height / 2 / childHeight * 100;
@@ -250,6 +297,9 @@ export const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
+        }
     }
     // Popover position
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
@@ -259,11 +309,11 @@ export const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
         const end = top + childHeight;
         element.style.insetBlockStart = `${top}px`;
-        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+        element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
     }
     else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
         const start = bottom - childHeight;
-        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
         element.style.insetBlockEnd = `${bottom}px`;
     }
     else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
@@ -273,32 +323,32 @@ export const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
         const end = left + childWidth;
         element.style.insetInlineStart = `${left}px`;
-        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+        element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
     }
     else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        const start = left - childWidth;
-        element.style.insetInlineStart = `${right - childWidth}px`;
-        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+        const start = right - childWidth;
+        element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
+        element.style.insetInlineEnd = `${right}px`;
     }
     if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('right')) {
         const end = right + childWidth;
         element.style.insetInlineStart = `calc(${right}px + ${distance})`;
-        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('left')) {
         const start = left - childWidth;
-        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
         element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
         const start = top - childHeight;
-        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
-        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+        element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
         const end = bottom + childHeight;
-        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
-        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+        element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.4.0",
+  "version": "4.4.1-floating-components-066d296",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -31,9 +31,9 @@
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.57.0",
-    "@types/react": "19.2.9",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "@types/react": "19.2.10",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.4.0",
-    "@db-ux/core-foundations": "4.4.0"
+    "@db-ux/core-components": "4.4.1-floating-components-066d296",
+    "@db-ux/core-foundations": "4.4.1-floating-components-066d296"
   }
 }