tyrell-components 1.0.0-TC51 → 1.0.0-TC53

package/lib/utils/positioning.js

@@ -1,234 +1,234 @@
 export const placements = {
-    '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',
-    },
+'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',
+},
 };
 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'
+],
 };
 const OPPOSITE_SIDE = {
-    top: 'bottom',
-    bottom: 'top',
-    left: 'right',
-    right: 'left',
+top: 'bottom',
+bottom: 'top',
+left: 'right',
+right: 'left',
 };
 export function parsePlacement(placement) {
-    const [side, align] = placement.split('-');
-    return { side, align };
+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)]),
-    ];
+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',
-    };
+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,
-    };
+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,
-    };
+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();
-    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,
-    };
+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;
-    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;
+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;
-    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,
-    };
+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.js

@@ -1,44 +1,44 @@
 export function capturePreSetProperties(element, propertyNames, options = { cleanup: true }) {
-    const captured = {};
-    for (const name of propertyNames) {
-        const descriptor = Object.getOwnPropertyDescriptor(element, name);
-        captured[name] = {
-            name,
-            value: descriptor?.value,
-            hadProperty: descriptor !== undefined && descriptor.value !== undefined
-        };
-        if (options.cleanup && captured[name].hadProperty) {
-            delete element[name];
-        }
-    }
-    return captured;
+const captured = {};
+for (const name of propertyNames) {
+const descriptor = Object.getOwnPropertyDescriptor(element, name);
+captured[name] = {
+name,
+value: descriptor?.value,
+hadProperty: descriptor !== undefined && descriptor.value !== undefined
+};
+if (options.cleanup && captured[name].hadProperty) {
+delete element[name];
+}
+}
+return captured;
 }
 export function getCapturedValues(element, propertyNames, options) {
-    const captured = capturePreSetProperties(element, propertyNames, options);
-    const values = {};
-    for (const [name, data] of Object.entries(captured)) {
-        if (data.hadProperty) {
-            values[name] = data.value;
-        }
-    }
-    return values;
+const captured = capturePreSetProperties(element, propertyNames, options);
+const values = {};
+for (const [name, data] of Object.entries(captured)) {
+if (data.hadProperty) {
+values[name] = data.value;
+}
+}
+return values;
 }
 export function applyPreSetProperties(element, propertyNames, propertyMap, options) {
-    const captured = capturePreSetProperties(element, propertyNames, options);
-    for (const [name, data] of Object.entries(captured)) {
-        if (data.hadProperty) {
-            const privateName = propertyMap?.[name] || `_${name}`;
-            element[privateName] = data.value;
-        }
-    }
+const captured = capturePreSetProperties(element, propertyNames, options);
+for (const [name, data] of Object.entries(captured)) {
+if (data.hadProperty) {
+const privateName = propertyMap?.[name] || `_${name}`;
+element[privateName] = data.value;
+}
+}
 }
 export function captureAndApplyProperties(element, propertyNames, transformer, options) {
-    const captured = capturePreSetProperties(element, propertyNames, options);
-    for (const [name, data] of Object.entries(captured)) {
-        if (data.hadProperty) {
-            const privateName = `_${name}`;
-            const value = transformer ? transformer(name, data.value) : data.value;
-            element[privateName] = value;
-        }
-    }
+const captured = capturePreSetProperties(element, propertyNames, options);
+for (const [name, data] of Object.entries(captured)) {
+if (data.hadProperty) {
+const privateName = `_${name}`;
+const value = transformer ? transformer(name, data.value) : data.value;
+element[privateName] = value;
+}
+}
 }