tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/utils/positioning.js

@@ -1,244 +1,234 @@
-/**
- * Core positioning engine for floating elements
- * Adapted from ty.positioning ClojureScript implementation
- *
- * Handles smart positioning of tooltips, dropdowns, popups, and other
- * floating elements relative to anchor elements with automatic overflow
- * detection and placement fallback.
- */
-// ============================================================================
-// Placement Definitions
-// ============================================================================
-/**
- * Map of all placement configurations
- */
 export const placements = {
-    'top-start': {
-        vertical: 'top',
-        horizontal: 'start',
-    },
-    'top': {
-        vertical: 'top',
-        horizontal: 'center',
-    },
-    'top-end': {
-        vertical: 'top',
-        horizontal: 'end',
-    },
-    'right-start': {
-        vertical: 'center',
-        horizontal: 'end',
-        orientation: 'vertical',
-    },
-    'right': {
-        vertical: 'center',
-        horizontal: 'end',
-        orientation: 'vertical',
-    },
-    'right-end': {
-        vertical: 'end',
-        horizontal: 'end',
-        orientation: 'vertical',
-    },
-    'bottom-start': {
-        vertical: 'bottom',
-        horizontal: 'start',
-    },
-    'bottom': {
-        vertical: 'bottom',
-        horizontal: 'center',
-    },
-    'bottom-end': {
-        vertical: 'bottom',
-        horizontal: 'end',
-    },
-    'left-start': {
-        vertical: 'center',
-        horizontal: 'start',
-        orientation: 'vertical',
-    },
-    'left': {
-        vertical: 'center',
-        horizontal: 'start',
-        orientation: 'vertical',
-    },
-    'left-end': {
-        vertical: 'end',
-        horizontal: 'start',
-        orientation: 'vertical',
-    },
+'top-start': {
+vertical: 'top',
+horizontal: 'start',
+},
+'top': {
+vertical: 'top',
+horizontal: 'center',
+},
+'top-end': {
+vertical: 'top',
+horizontal: 'end',
+},
+'right-start': {
+vertical: 'start',
+horizontal: 'end',
+orientation: 'vertical',
+},
+'right': {
+vertical: 'center',
+horizontal: 'end',
+orientation: 'vertical',
+},
+'right-end': {
+vertical: 'end',
+horizontal: 'end',
+orientation: 'vertical',
+},
+'bottom-start': {
+vertical: 'bottom',
+horizontal: 'start',
+},
+'bottom': {
+vertical: 'bottom',
+horizontal: 'center',
+},
+'bottom-end': {
+vertical: 'bottom',
+horizontal: 'end',
+},
+'left-start': {
+vertical: 'start',
+horizontal: 'start',
+orientation: 'vertical',
+},
+'left': {
+vertical: 'center',
+horizontal: 'start',
+orientation: 'vertical',
+},
+'left-end': {
+vertical: 'end',
+horizontal: 'start',
+orientation: 'vertical',
+},
 };
-/**
- * Default placement preference lists for different use cases
- */
 export const placementPreferences = {
-    default: [
-        'bottom-start', 'bottom-end', 'top-start', 'top-end',
-        'bottom', 'top', 'left', 'right'
-    ],
-    tooltip: [
-        'top', 'bottom', 'left', 'right',
-        'top-start', 'top-end', 'bottom-start', 'bottom-end'
-    ],
-    dropdown: [
-        'bottom-start', 'bottom-end', 'top-start', 'top-end',
-        'bottom', 'top', 'right', 'left'
-    ],
+default: [
+'bottom-start', 'bottom-end', 'top-start', 'top-end',
+'bottom', 'top', 'left', 'right'
+],
+tooltip: [
+'top', 'bottom', 'left', 'right',
+'top-start', 'top-end', 'bottom-start', 'bottom-end'
+],
+dropdown: [
+'bottom-start', 'bottom-end', 'top-start', 'top-end',
+'bottom', 'top', 'right', 'left'
+],
 };
-// ============================================================================
-// DOM Measurement Helpers
-// ============================================================================
-/**
- * Get element dimensions relative to viewport with calculated center points
- */
+const OPPOSITE_SIDE = {
+top: 'bottom',
+bottom: 'top',
+left: 'right',
+right: 'left',
+};
+export function parsePlacement(placement) {
+const [side, align] = placement.split('-');
+return { side, align };
+}
+export function preferenceChain(placement) {
+const { side, align } = parsePlacement(placement);
+const opposite = OPPOSITE_SIDE[side];
+const perpendicular = side === 'top' || side === 'bottom' ? ['right', 'left'] : ['bottom', 'top'];
+const exact = (s) => (align ? `${s}-${align}` : s);
+const rest = (s) => (align
+? [s, `${s}-${align === 'start' ? 'end' : 'start'}`]
+: [`${s}-start`, `${s}-end`]);
+return [
+exact(side),
+exact(opposite),
+...rest(side),
+...rest(opposite),
+...perpendicular.flatMap((s) => [exact(s), ...rest(s)]),
+];
+}
+export function placementToAnchored(placement) {
+if (!placement)
+return { side: 'auto', align: 'start' };
+const { side, align } = parsePlacement(placement);
+return {
+side: side === 'top' || side === 'bottom' ? side : 'auto',
+align: align ?? 'start',
+};
+}
 function getElementRect(el) {
-    const rect = el.getBoundingClientRect();
-    return {
-        top: rect.top,
-        left: rect.left,
-        right: rect.right,
-        bottom: rect.bottom,
-        width: rect.width,
-        height: rect.height,
-        centerX: rect.left + rect.width / 2,
-        centerY: rect.top + rect.height / 2,
-    };
-}
-/**
- * Get viewport dimensions and scroll position
- */
+const rect = el.getBoundingClientRect();
+return {
+top: rect.top,
+left: rect.left,
+right: rect.right,
+bottom: rect.bottom,
+width: rect.width,
+height: rect.height,
+centerX: rect.left + rect.width / 2,
+centerY: rect.top + rect.height / 2,
+};
+}
 function getViewportRect() {
-    return {
-        width: window.innerWidth,
-        height: window.innerHeight,
-        scrollX: window.scrollX,
-        scrollY: window.scrollY,
-    };
-}
-// ============================================================================
-// Position Calculation
-// ============================================================================
-/**
- * Calculate position for a specific placement
- * Returns x, y coordinates and overflow information
- */
+return {
+width: window.innerWidth,
+height: window.innerHeight,
+scrollX: window.scrollX,
+scrollY: window.scrollY,
+};
+}
 function calculatePlacement(options) {
-    const { targetRect, floatingRect, placement, offset, padding, scrollbarWidth, containerPadding, } = options;
-    const config = placements[placement];
-    const { vertical, horizontal, orientation } = config;
-    const viewport = getViewportRect();
-    // Calculate X position
-    let x;
-    if (orientation === 'vertical') {
-        // Left/right placements
-        if (horizontal === 'start') {
-            x = targetRect.left - floatingRect.width - offset + containerPadding;
-        }
-        else {
-            x = targetRect.right + offset - containerPadding;
-        }
-    }
-    else {
-        // Top/bottom placements
-        if (horizontal === 'start') {
-            x = targetRect.left;
-        }
-        else if (horizontal === 'center') {
-            x = targetRect.centerX - floatingRect.width / 2;
-        }
-        else {
-            x = targetRect.right - floatingRect.width;
-        }
-    }
-    // Calculate Y position
-    let y;
-    if (orientation === 'vertical') {
-        // Left/right placements
-        if (vertical === 'center') {
-            y = targetRect.centerY - floatingRect.height / 2;
-        }
-        else if (vertical === 'end') {
-            y = targetRect.bottom - floatingRect.height - containerPadding;
-        }
-        else {
-            y = targetRect.top;
-        }
-    }
-    else {
-        // Top/bottom placements
-        if (vertical === 'top') {
-            y = targetRect.top - floatingRect.height - offset + containerPadding;
-        }
-        else {
-            y = targetRect.bottom + offset - containerPadding;
-        }
-    }
-    // Calculate overflow for each edge
-    const overflow = {
-        top: Math.min(0, y - padding),
-        left: Math.min(0, x - padding),
-        bottom: Math.min(0, viewport.height - (y + floatingRect.height + padding)),
-        right: Math.min(0, viewport.width - (x + floatingRect.width + padding + scrollbarWidth)),
-    };
-    // Sum of absolute overflow values
-    const overflowAmount = Object.values(overflow).reduce((sum, val) => sum + Math.abs(val), 0);
-    return {
-        x: Math.round(x),
-        y: Math.round(y),
-        placement,
-        overflow,
-        overflowAmount,
-        fits: overflowAmount === 0,
-    };
-}
-/**
- * Find the best position for the floating element
- * Tries all preference placements and returns the one that fits best
- */
+const { targetRect, floatingRect, placement, offset, padding, scrollbarWidth, containerPadding, } = options;
+const config = placements[placement];
+const { vertical, horizontal, orientation } = config;
+const viewport = getViewportRect();
+let x;
+if (orientation === 'vertical') {
+if (horizontal === 'start') {
+x = targetRect.left - floatingRect.width - offset + containerPadding;
+}
+else {
+x = targetRect.right + offset - containerPadding;
+}
+}
+else {
+if (horizontal === 'start') {
+x = targetRect.left - containerPadding;
+}
+else if (horizontal === 'center') {
+x = targetRect.centerX - floatingRect.width / 2;
+}
+else {
+x = targetRect.right - floatingRect.width + containerPadding;
+}
+}
+let y;
+if (orientation === 'vertical') {
+if (vertical === 'center') {
+y = targetRect.centerY - floatingRect.height / 2;
+}
+else if (vertical === 'end') {
+y = targetRect.bottom - floatingRect.height + containerPadding;
+}
+else {
+y = targetRect.top - containerPadding;
+}
+}
+else {
+if (vertical === 'top') {
+y = targetRect.top - floatingRect.height - offset + containerPadding;
+}
+else {
+y = targetRect.bottom + offset - containerPadding;
+}
+}
+const overflow = {
+top: Math.min(0, y - padding),
+left: Math.min(0, x - padding),
+bottom: Math.min(0, viewport.height - (y + floatingRect.height + padding)),
+right: Math.min(0, viewport.width - (x + floatingRect.width + padding + scrollbarWidth)),
+};
+const overflowAmount = Object.values(overflow).reduce((sum, val) => sum + Math.abs(val), 0);
+return {
+x: Math.round(x),
+y: Math.round(y),
+placement,
+overflow,
+overflowAmount,
+fits: overflowAmount === 0,
+};
+}
 export function findBestPosition(options) {
-    const { targetEl, floatingEl, preferences = placementPreferences.default, offset = 8, padding = 8, containerPadding = 0, } = options;
-    const targetRect = getElementRect(targetEl);
-    const floatingRect = getElementRect(floatingEl);
-    const scrollbarWidth = 15;
-    // Calculate all candidate positions
-    const candidates = preferences.map(placement => calculatePlacement({
-        targetRect,
-        floatingRect,
-        placement,
-        offset,
-        padding,
-        containerPadding,
-        scrollbarWidth,
-    }));
-    // Find first that fits, or one with least overflow
-    const bestPosition = candidates.find(c => c.fits) ||
-        candidates.reduce((best, current) => current.overflowAmount < best.overflowAmount ? current : best);
-    // Adjust for scrollbar if needed
-    if (bestPosition.overflow.right < 0) {
-        bestPosition.x += bestPosition.overflow.right;
-    }
-    return bestPosition;
+const { targetEl, floatingEl, preferences = placementPreferences.default, offset = 8, padding = 8, containerPadding = 0, } = options;
+const targetRect = getElementRect(targetEl);
+const floatingRect = getElementRect(floatingEl);
+const scrollbarWidth = 15;
+const candidates = preferences.map(placement => calculatePlacement({
+targetRect,
+floatingRect,
+placement,
+offset,
+padding,
+containerPadding,
+scrollbarWidth,
+}));
+const bestPosition = candidates.find(c => c.fits) ||
+candidates.reduce((best, current) => current.overflowAmount < best.overflowAmount ? current : best);
+if (bestPosition.overflow.right < 0) {
+bestPosition.x += bestPosition.overflow.right;
+}
+return bestPosition;
 }
 export function computeAnchoredPosition(o) {
-    const gap = o.gap ?? 4;
-    const padding = o.padding ?? 8;
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const spaceBelow = vh - o.anchorRect.bottom;
-    const spaceAbove = o.anchorRect.top;
-    // Below when it fits — and when neither side fits, the side with MORE room
-    // instead of blindly flipping up (a trigger near the viewport top used to
-    // clip the popup off-screen).
-    const below = spaceBelow >= o.popupHeight + gap + padding || spaceBelow >= spaceAbove;
-    // Anchor to the trigger's left edge ("start") or right edge ("end"),
-    // clamped into the viewport either way.
-    const rawX = o.align === "end" ? o.anchorRect.right - o.popupWidth : o.anchorRect.left;
-    const x = Math.max(padding, Math.min(rawX, vw - o.popupWidth - padding));
-    return {
-        x,
-        topY: o.anchorRect.bottom + gap,
-        bottomY: vh - o.anchorRect.top + gap,
-        below,
-    };
-}
-//# sourceMappingURL=positioning.js.map
+const gap = o.gap ?? 4;
+const padding = o.padding ?? 8;
+const vw = window.innerWidth;
+const vh = window.innerHeight;
+const spaceBelow = vh - o.anchorRect.bottom;
+const spaceAbove = o.anchorRect.top;
+const needed = o.popupHeight + gap + padding;
+const fitsBelow = spaceBelow >= needed;
+const fitsAbove = spaceAbove >= needed;
+const side = o.side ?? "auto";
+const below = side === "bottom" ? (fitsBelow || !fitsAbove ? true : false)
+: side === "top" ? (fitsAbove || !fitsBelow ? false : true)
+: fitsBelow || spaceBelow >= spaceAbove;
+const rawX = o.align === "end" ? o.anchorRect.right - o.popupWidth
+: o.align === "center"
+? o.anchorRect.left + (o.anchorRect.width - o.popupWidth) / 2
+: o.anchorRect.left;
+const x = Math.max(padding, Math.min(rawX, vw - o.popupWidth - padding));
+return {
+x,
+topY: o.anchorRect.bottom + gap,
+bottomY: vh - o.anchorRect.top + gap,
+below,
+};
+}

package/lib/utils/property-capture.d.ts

@@ -1,32 +1,11 @@
 /**
  * Property Capture Utility
  *
- * Solves the problem of frameworks (React, Reagent, etc.) setting properties
- * on custom elements BEFORE connectedCallback runs.
- *
- * PROBLEM:
- * 1. Framework creates element: document.createElement('ty-dropdown')
- * 2. Framework sets properties: element.value = "foo"
- * 3. Constructor runs and defines getters/setters
- * 4. BUT properties were already set, creating instance properties
- * 5. Instance properties shadow the class getters/setters
- * 6. connectedCallback runs - too late!
- *
- * SOLUTION:
- * In connectedCallback, capture any pre-set properties and apply them properly.
- *
- * @example
- * ```typescript
- * connectedCallback(): void {
- *   const preSetProps = capturePreSetProperties(this, [
- *     'value', 'clearable', 'disabled'
- *   ])
- *
- *   if (preSetProps.value !== undefined) {
- *     this._value = preSetProps.value
- *   }
- * }
- * ```
+ * Frameworks (React, Reagent, ...) set properties on a custom element before
+ * the constructor defines its getters/setters, so those assignments become
+ * *instance* properties that permanently shadow the class accessors — by the
+ * time connectedCallback runs, the setters have never been called.
+ * Fix: in connectedCallback, capture the pre-set values and re-apply them.
  */
 /**
  * Captured property data
@@ -129,4 +108,3 @@ export declare function applyPreSetProperties(element: any, propertyNames: strin
  * ```
  */
 export declare function captureAndApplyProperties(element: any, propertyNames: string[], transformer?: (name: string, value: any) => any, options?: PropertyCaptureOptions): void;
-//# sourceMappingURL=property-capture.d.ts.map