@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/collection/utils/floating-components.js

@@ -1,85 +1,72 @@
 // TODO: We should reevaluate this as soon as CSS Anchor Positioning is supported in all relevant browsers
-const isInView = (el) => {
-    var _a;
-    const { top, bottom, left, right } = el.getBoundingClientRect();
-    const { innerHeight, innerWidth } = window;
-    let outTop = top < 0;
-    let outBottom = bottom > innerHeight;
-    let outLeft = left < 0;
-    let outRight = right > innerWidth;
-    // We need to check if it was already outside
-    const outsideY = el.dataset['outsideVy'];
-    const outsideX = el.dataset['outsideVx'];
-    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if (parentRect) {
-        if (outsideY) {
-            const position = el.dataset['outsideVy'];
-            if (position === 'top') {
-                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
-            }
-            else {
-                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
-            }
-        }
-        if (outsideX) {
-            const position = el.dataset['outsideVx'];
-            if (position === 'left') {
-                outLeft = parentRect.left - (right - parentRect.right) < 0;
-            }
-            else {
-                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
-            }
-        }
-    }
-    return {
-        outTop,
-        outBottom,
-        outLeft,
-        outRight
-    };
-};
-export const handleDataOutside = (el) => {
-    const { outTop, outBottom, outLeft, outRight } = isInView(el);
-    let dataOutsidePair = {};
-    if (outTop || outBottom) {
-        dataOutsidePair = {
-            vy: outTop ? 'top' : 'bottom'
-        };
-        el.dataset['outsideVy'] = dataOutsidePair.vy;
-    }
-    else {
-        delete el.dataset['outsideVy'];
-    }
-    if (outLeft || outRight) {
-        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
-        el.dataset['outsideVx'] = dataOutsidePair.vx;
-    }
-    else {
-        delete el.dataset['outsideVx'];
-    }
-    return dataOutsidePair;
-};
 export const handleFixedDropdown = (element, parent, placement) => {
     if (!element || !parent)
         return;
-    // We skip this if we are in mobile it's already fixed
-    if (getComputedStyle(element).zIndex === '9999')
-        return;
-    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
     const fullWidth = element.dataset['width'] === 'full';
+    const autoWidth = element.dataset['width'] === 'auto';
+    // Reset width-specific inline styles first so a previous mode (e.g. "auto")
+    // doesn't leave a stale minInlineSize/inlineSize behind when the dropdown
+    // width changes at runtime. This must happen before getFloatingProps
+    // measures the element, otherwise the dropdown would be measured with a
+    // width it no longer has and positioned incorrectly. It also has to run
+    // before the mobile bailout below: otherwise a desktop minInlineSize would
+    // survive into the mobile sheet, where CSS min-inline-size beats the
+    // mobile max-inline-size guard and overflows the viewport.
+    element.style.inlineSize = '';
+    element.style.minInlineSize = '';
+    // We skip this if we are in mobile it's already fixed or if we don't have a floating dropdown
+    const computedStyle = getComputedStyle(element);
+    if (computedStyle.zIndex === '9999' || computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
+        return;
+    }
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
+    // For auto width the dropdown is forced to be at least as wide as the trigger,
+    // but clamped to its own max-inline-size: CSS lets a min-inline-size override
+    // the max when the minimum is larger, so a trigger wider than the viewport
+    // limit would otherwise drop the side margins or overflow horizontally.
+    let autoMinWidth = width;
+    if (autoWidth) {
+        const maxInlineSize = parseFloat(getComputedStyle(element).maxInlineSize);
+        if (!isNaN(maxInlineSize) && maxInlineSize > 0) {
+            autoMinWidth = Math.min(width, maxInlineSize);
+        }
+    }
     if (fullWidth) {
         element.style.inlineSize = `${width}px`;
     }
-    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+    else if (autoWidth) {
+        element.style.minInlineSize = `${autoMinWidth}px`;
+    }
+    // getFloatingProps measured childWidth before the inline styles were
+    // (re)applied, so use the width the dropdown will actually have:
+    // - auto: the clamped minimum, so end-aligned dropdowns don't extend past
+    //   the trigger's right edge.
+    // - full: the trigger width (the reset above drops it to content width).
+    let effectiveChildWidth = childWidth;
+    if (autoWidth) {
+        effectiveChildWidth = Math.max(childWidth, autoMinWidth);
+    }
+    else if (fullWidth) {
+        effectiveChildWidth = width;
+    }
+    // getFloatingProps detects horizontal overflow assuming a centered element
+    // (it halves childWidth). The dropdown is actually start-aligned (inset =
+    // left), so for the wider auto dropdown re-check overflow against its full
+    // width and flip to end-alignment when it would extend past the viewport.
+    let dropdownPlacement = correctedPlacement;
+    if (autoWidth && (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') && left + effectiveChildWidth > innerWidth) {
+        dropdownPlacement = dropdownPlacement.startsWith('top') ? 'top-end' : 'bottom-end';
+    }
+    if (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') {
         element.style.insetInlineStart = `${left}px`;
     }
-    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        element.style.insetInlineStart = `${right - childWidth}px`;
+    else if (dropdownPlacement === 'top-end' || dropdownPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${Math.max(right - effectiveChildWidth, 0)}px`;
     }
-    if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
+    if (dropdownPlacement === null || dropdownPlacement === void 0 ? void 0 : dropdownPlacement.startsWith('top')) {
         element.style.insetBlockStart = `${top - childHeight}px`;
     }
-    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
+    else if (dropdownPlacement === null || dropdownPlacement === void 0 ? void 0 : dropdownPlacement.startsWith('bottom')) {
         element.style.insetBlockStart = `${bottom}px`;
     }
     element.style.position = 'fixed';
@@ -106,27 +93,29 @@ export const getFloatingProps = (element, parent, placement) => {
     let childHeight = childRect.height;
     let childWidth = childRect.width;
     if (placement === 'bottom' || placement === 'top') {
-        childWidth = childWidth / 2;
+        childWidth = width > childWidth ? 0 : childWidth / 2;
     }
     if (placement === 'left' || placement === 'right') {
-        childHeight = childHeight / 2;
+        childHeight = height > childHeight ? 0 : childHeight / 2;
     }
-    const outsideBottom = bottom + childHeight > innerHeight;
-    const outsideTop = top - childHeight < 0;
-    const outsideLeft = left - childWidth < 0;
-    const outsideRight = right + childWidth > innerWidth;
+    const outsideBottom = Math.floor(bottom + childHeight) > innerHeight;
+    const outsideTop = Math.ceil(top - childHeight) < 0;
+    const outsideLeft = Math.ceil(left - childWidth) < 0;
+    const outsideRight = Math.floor(right + childWidth) > innerWidth;
     let correctedPlacement = placement;
     if (placement.startsWith('bottom')) {
         if (outsideBottom) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'top';
-            }
-            else if (outsideLeft) {
-                correctedPlacement = 'top-start';
-            }
-            else if (outsideRight) {
-                correctedPlacement = 'top-end';
+            if (!outsideTop) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'top';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'top-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'top-end';
+                }
             }
         }
         else {
@@ -143,15 +132,17 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('top')) {
         if (outsideTop) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'bottom';
-            }
-            else if (outsideLeft) {
-                correctedPlacement = 'bottom-start';
-            }
-            else if (outsideRight) {
-                correctedPlacement = 'bottom-end';
+            if (!outsideBottom) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'bottom';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'bottom-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'bottom-end';
+                }
             }
         }
         else {
@@ -168,15 +159,17 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('left')) {
         if (outsideLeft) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
-            if (outsideBottom && outsideTop) {
-                correctedPlacement = 'right';
-            }
-            else if (outsideBottom) {
-                correctedPlacement = 'right-end';
-            }
-            else if (outsideTop) {
-                correctedPlacement = 'right-start';
+            if (!outsideRight) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'right';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'right-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'right-start';
+                }
             }
         }
         else {
@@ -193,15 +186,17 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (correctedPlacement.startsWith('right')) {
         if (outsideRight) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
-            if (outsideBottom && outsideTop) {
-                correctedPlacement = 'left';
-            }
-            else if (outsideBottom) {
-                correctedPlacement = 'left-end';
-            }
-            else if (outsideTop) {
-                correctedPlacement = 'left-start';
+            if (!outsideLeft) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'left';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'left-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'left-start';
+                }
             }
         }
         else {
@@ -227,7 +222,8 @@ export const getFloatingProps = (element, parent, placement) => {
         childWidth: childRect.width,
         correctedPlacement,
         innerWidth,
-        innerHeight
+        innerHeight,
+        outsideYBoth: outsideTop && outsideBottom
     };
 };
 const MAX_ANCESTOR_DEPTH = 10;
@@ -250,15 +246,24 @@ const getAncestorHasCorrectedPlacement = (element) => {
     return null;
 };
 export const handleFixedPopover = (element, parent, placement) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!element || !parent)
         return;
     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);
+    const computedStyle = getComputedStyle(element);
+    // We skip if we don't have a floating popover
+    if (computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
+        return;
+    }
+    let distance = computedStyle.getPropertyValue('--db-popover-distance');
+    if (!distance.length) {
+        distance = '0px';
+    }
+    const elementPlacement = (_c = (_b = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a['placement']) !== null && _b !== void 0 ? _b : placement) !== null && _c !== void 0 ? _c : 'bottom';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight, outsideYBoth } = getFloatingProps(element, parent, elementPlacement);
     if (ancestorWithCorrectedPlacement) {
         const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
         left = Math.abs(left - ancestorRect.left);
@@ -354,6 +359,79 @@ export const handleFixedPopover = (element, parent, placement) => {
         element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
         element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
+    // In this case we are outside of top and bottom so we need to scroll
+    // We use the full height in this case
+    if (outsideYBoth) {
+        element.style.overflow = 'hidden auto';
+        element.style.insetBlock = distance;
+        element.style.maxBlockSize = `calc(${innerHeight}px - 2 * ${distance})`;
+    }
+    else {
+        element.style.overflow = '';
+        element.style.maxBlockSize = '';
+    }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;
+    // Set data-outside-vy / data-outside-vx for CSS-based flipping
+    handleDataOutside(element);
+};
+export const handleDataOutside = (el) => {
+    const { outTop, outBottom, outLeft, outRight } = isInView(el);
+    let dataOutsidePair = {};
+    if (outTop || outBottom) {
+        dataOutsidePair = {
+            vy: outTop ? 'top' : 'bottom'
+        };
+        el.dataset['outsideVy'] = dataOutsidePair.vy;
+    }
+    else {
+        delete el.dataset['outsideVy'];
+    }
+    if (outLeft || outRight) {
+        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
+        el.dataset['outsideVx'] = dataOutsidePair.vx;
+    }
+    else {
+        delete el.dataset['outsideVx'];
+    }
+    return dataOutsidePair;
+};
+const isInView = (el) => {
+    var _a;
+    const { top, bottom, left, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let outTop = top < 0;
+    let outBottom = bottom > innerHeight;
+    let outLeft = left < 0;
+    let outRight = right > innerWidth;
+    // We need to check if it was already outside
+    const outsideY = el.dataset['outsideVy'];
+    const outsideX = el.dataset['outsideVx'];
+    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (parentRect) {
+        if (outsideY) {
+            const position = el.dataset['outsideVy'];
+            if (position === 'top') {
+                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
+            }
+            else {
+                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
+            }
+        }
+        if (outsideX) {
+            const position = el.dataset['outsideVx'];
+            if (position === 'left') {
+                outLeft = parentRect.left - (right - parentRect.right) < 0;
+            }
+            else {
+                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
+            }
+        }
+    }
+    return {
+        outTop,
+        outBottom,
+        outLeft,
+        outRight
+    };
 };

package/dist/collection/utils/index.js

@@ -60,6 +60,16 @@ export const isIOSSafari = () => {
     return isIOS && isSafari;
 };
 export const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
+/**
+ * Checks whether a CSS custom property on an element equals '1'.
+ * Useful for detecting CSS-driven boolean state (e.g. responsive breakpoints)
+ * without coupling JS to hardcoded breakpoint values.
+ *
+ * @param element - The element to read computed styles from
+ * @param property - The CSS custom property name (e.g. '--db-my-flag')
+ * @returns `true` if the trimmed property value is '1'
+ */
+export const hasCssFlag = (element, property) => typeof window !== 'undefined' && getComputedStyle(element).getPropertyValue(property).trim() === '1';
 /**
  * Converts boolean-like inputs to "true" or "false" strings.
  * Handles HTML-style boolean attributes where an empty string or the
@@ -139,9 +149,37 @@ export const stringPropVisible = (givenString, showString) => {
     return toBool(showString) && Boolean(givenString);
 };
 export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
+// WeakMap to store generated keys for option objects without mutating them.
+// Used only as a last resort for options that have neither id, value, nor label.
+const optionKeyMap = new WeakMap();
 export const getOptionKey = (option, prefix) => {
-    var _a, _b;
-    const key = (_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : uuid();
+    var _a;
+    // 1. Consumer-provided id — stable and unique (best case).
+    if (option.id) {
+        return `${prefix}${option.id}`;
+    }
+    // 2. Data-based key from value and/or label — stable across object
+    //    recreations (e.g. inline options={[...]} on every render).
+    //    Combining both fields maximizes uniqueness: two options may share
+    //    a value but users couldn't distinguish identical labels, so in
+    //    practice the combination is unique.
+    //    We prefix each segment with its length to avoid ambiguous
+    //    concatenations (e.g. 'a-b'+'c' vs 'a'+'b-c').
+    const value = option.value !== undefined && option.value !== '' ? String(option.value) : '';
+    const label = (_a = option.label) !== null && _a !== void 0 ? _a : '';
+    if (value || label) {
+        return `${prefix}${value.length}:${value}.${label}`;
+    }
+    // 3. Last resort for truly anonymous options (no id, no value, no label).
+    //    WeakMap ties a generated uuid to the object reference so the key
+    //    persists as long as the same object is reused. If the consumer
+    //    recreates these objects every render, keys will be unstable — but
+    //    that's an unsolvable edge case without any data to anchor to.
+    let key = optionKeyMap.get(option);
+    if (!key) {
+        key = uuid();
+        optionKeyMap.set(option, key);
+    }
     return `${prefix}${key}`;
 };
 export const isKeyboardEvent = (event) => event.key !== undefined;

package/dist/collection/utils/intersection-observer-listener.js

@@ -0,0 +1,36 @@
+import { AbstractObserverListener } from "./abstract-observer-listener.js";
+export class IntersectionObserverListener extends AbstractObserverListener {
+    constructor() {
+        super();
+        if (IntersectionObserverListener._instance) {
+            return IntersectionObserverListener._instance;
+        }
+        IntersectionObserverListener._instance = this;
+        if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
+            IntersectionObserverListener.observer = new IntersectionObserver(entries => {
+                for (const entry of entries) {
+                    this.dispatchEntry(entry.target, entry);
+                }
+            });
+        }
+    }
+    getCallbacksByElement() {
+        return IntersectionObserverListener.callbacksByElement;
+    }
+    getIdToElement() {
+        return IntersectionObserverListener.idToElement;
+    }
+    getObserver() {
+        return IntersectionObserverListener.observer;
+    }
+    observeElement(observer, element) {
+        observer.observe(element);
+    }
+    unobserveElement(observer, element) {
+        observer.unobserve(element);
+    }
+}
+IntersectionObserverListener._instance = null;
+IntersectionObserverListener.callbacksByElement = new Map();
+IntersectionObserverListener.idToElement = new Map();
+IntersectionObserverListener.observer = null;