lightning-base-components 1.28.14-alpha → 1.28.15-alpha

package/src/lightning/overlayPositionUtils/cssAnchorPositioning.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { convertLogicalToDirectionalInsets, normalizeSizingValue, } from './overlayPositionUtils';
+export function supportsCSSAnchorPositioning() {
+    if (import.meta.env.SSR) {
+        return false;
+    }
+    const supportsAnchorName = 'anchorName' in document.documentElement.style;
+    const supportsPositionAnchor = typeof CSS !== 'undefined' &&
+        CSS.supports &&
+        CSS.supports('position-anchor', '--test');
+    return supportsAnchorName && supportsPositionAnchor;
+}
+export class CSSAnchorPositioning {
+    element;
+    config;
+    constructor(element, config = {}) {
+        this.element = element;
+        this.config = config;
+    }
+    apply() {
+        this.applyPanelStyles();
+        this.setPositionArea();
+    }
+    setPositionArea() {
+        this.element?.style?.setProperty('position-area', this.config.position);
+    }
+    applyPanelStyles() {
+        const { minWidth, maxWidth, minHeight, maxHeight, position, offsetInline, offsetBlock, } = this.config;
+        const elem = this.element;
+        const normalizedMinWidth = normalizeSizingValue(minWidth);
+        const normalizedMaxWidth = normalizeSizingValue(maxWidth);
+        const normalizedMinHeight = normalizeSizingValue(minHeight);
+        const normalizedMaxHeight = normalizeSizingValue(maxHeight);
+        if (normalizedMinWidth) {
+            elem.style.minWidth = normalizedMinWidth;
+        }
+        if (normalizedMaxWidth) {
+            elem.style.maxWidth = normalizedMaxWidth;
+        }
+        if (normalizedMinHeight) {
+            elem.style.minHeight = normalizedMinHeight;
+        }
+        if (normalizedMaxHeight) {
+            elem.style.maxHeight = normalizedMaxHeight;
+        }
+        this.applyLogicalInsets(position, offsetInline, offsetBlock);
+    }
+    applyLogicalInsets(position, offsetInline, offsetBlock) {
+        const elem = this.element;
+        const { top, bottom, left, right } = convertLogicalToDirectionalInsets(position, offsetInline, offsetBlock);
+        if (left) {
+            elem.style.setProperty('left', `${left}px`);
+        }
+        if (right) {
+            elem.style.setProperty('right', `${right}px`);
+        }
+        if (top) {
+            elem.style.setProperty('top', `${top}px`);
+        }
+        if (bottom) {
+            elem.style.setProperty('bottom', `${bottom}px`);
+        }
+    }
+    cleanup() {
+        if (this.element) {
+            const propertiesToRemove = [
+                'position-anchor',
+                'position-area',
+                'left',
+                'right',
+                'top',
+                'bottom',
+                'min-width',
+                'max-width',
+                'min-height',
+                'max-height',
+                'margin-inline-start',
+                'margin-inline-end',
+                'margin-block-start',
+                'margin-block-end',
+            ];
+            propertiesToRemove.forEach((prop) => {
+                this.element?.style?.removeProperty(prop);
+            });
+            if (this.element?.style?.position === 'absolute') {
+                this.element?.style?.removeProperty('position');
+            }
+        }
+    }
+}

package/src/lightning/overlayPositionUtils/overlayPositionUtils.d.ts

@@ -0,0 +1,55 @@
+export { AnchorPositioningAdapter } from './anchorPositioningAdapter';
+export type { AnchorPositioningConfig } from './anchorPositioningAdapter';
+export declare const OverlayPosition: {
+    readonly TopLeft: "top left";
+    readonly TopCenter: "top center";
+    readonly TopRight: "top right";
+    readonly TopSpanLeft: "top span-left";
+    readonly TopSpanAll: "top span-all";
+    readonly TopSpanRight: "top span-right";
+    readonly CenterLeft: "center left";
+    readonly CenterCenter: "center center";
+    readonly CenterRight: "center right";
+    readonly CenterSpanLeft: "center span-left";
+    readonly CenterSpanRight: "center span-right";
+    readonly CenterSpanAll: "center span-all";
+    readonly BottomLeft: "bottom left";
+    readonly BottomCenter: "bottom center";
+    readonly BottomRight: "bottom right";
+    readonly BottomSpanLeft: "bottom span-left";
+    readonly BottomSpanAll: "bottom span-all";
+    readonly BottomSpanRight: "bottom span-right";
+    readonly SpanTopLeft: "span-top left";
+    readonly SpanTopCenter: "span-top center";
+    readonly SpanTopRight: "span-top right";
+    readonly SpanTopSpanLeft: "span-top span-left";
+    readonly SpanTopSpanAll: "span-top span-all";
+    readonly SpanTopSpanRight: "span-top span-right";
+    readonly SpanAllLeft: "span-all left";
+    readonly SpanAllCenter: "span-all center";
+    readonly SpanAllRight: "span-all right";
+    readonly SpanAllSpanLeft: "span-all span-left";
+    readonly SpanAllSpanAll: "span-all span-all";
+    readonly SpanAllSpanRight: "span-all span-right";
+    readonly SpanBottomLeft: "span-bottom left";
+    readonly SpanBottomCenter: "span-bottom center";
+    readonly SpanBottomRight: "span-bottom right";
+    readonly SpanBottomSpanLeft: "span-bottom span-left";
+    readonly SpanBottomSpanAll: "span-bottom span-all";
+    readonly SpanBottomSpanRight: "span-bottom span-right";
+};
+export type PositionValue = (typeof OverlayPosition)[keyof typeof OverlayPosition];
+export declare const VALID_POSITION_VALUES: readonly PositionValue[];
+export declare const DEFAULT_POSITION: "top right";
+export declare const VALID_POPOVER_VALUES: readonly ["auto", "manual", "hint"];
+export type PopoverValue = (typeof VALID_POPOVER_VALUES)[number];
+export declare const DEFAULT_POPOVER = "auto";
+export declare function normalizeSizingValue(value: string | number): string;
+interface DirectionalInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export declare function convertLogicalToDirectionalInsets(position: string, offsetInline: number, offsetBlock: number): DirectionalInsets;
+//# sourceMappingURL=overlayPositionUtils.d.ts.map

package/src/lightning/overlayPositionUtils/overlayPositionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPositionUtils.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/overlayPositionUtils/overlayPositionUtils.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAM1E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC;AAKX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAKnF,eAAO,MAAM,qBAAqB,EAAE,SAAS,aAAa,EAAmC,CAAC;AAK9F,eAAO,MAAM,gBAAgB,aAA2B,CAAC;AAKzD,eAAO,MAAM,oBAAoB,qCAAsC,CAAC;AAKxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAKjE,eAAO,MAAM,eAAe,SAAS,CAAC;AAatC,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAC,MAAM,GAAG,MAAM,CAgDjE;AAED,UAAU,iBAAiB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACjB;AAWD,wBAAgB,iCAAiC,CAC7C,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,GACpB,iBAAiB,CA2BnB"}

package/src/lightning/overlayPositionUtils/overlayPositionUtils.js

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export { AnchorPositioningAdapter } from './anchorPositioningAdapter';
+export const OverlayPosition = {
+    TopLeft: 'top left',
+    TopCenter: 'top center',
+    TopRight: 'top right',
+    TopSpanLeft: 'top span-left',
+    TopSpanAll: 'top span-all',
+    TopSpanRight: 'top span-right',
+    CenterLeft: 'center left',
+    CenterCenter: 'center center',
+    CenterRight: 'center right',
+    CenterSpanLeft: 'center span-left',
+    CenterSpanRight: 'center span-right',
+    CenterSpanAll: 'center span-all',
+    BottomLeft: 'bottom left',
+    BottomCenter: 'bottom center',
+    BottomRight: 'bottom right',
+    BottomSpanLeft: 'bottom span-left',
+    BottomSpanAll: 'bottom span-all',
+    BottomSpanRight: 'bottom span-right',
+    SpanTopLeft: 'span-top left',
+    SpanTopCenter: 'span-top center',
+    SpanTopRight: 'span-top right',
+    SpanTopSpanLeft: 'span-top span-left',
+    SpanTopSpanAll: 'span-top span-all',
+    SpanTopSpanRight: 'span-top span-right',
+    SpanAllLeft: 'span-all left',
+    SpanAllCenter: 'span-all center',
+    SpanAllRight: 'span-all right',
+    SpanAllSpanLeft: 'span-all span-left',
+    SpanAllSpanAll: 'span-all span-all',
+    SpanAllSpanRight: 'span-all span-right',
+    SpanBottomLeft: 'span-bottom left',
+    SpanBottomCenter: 'span-bottom center',
+    SpanBottomRight: 'span-bottom right',
+    SpanBottomSpanLeft: 'span-bottom span-left',
+    SpanBottomSpanAll: 'span-bottom span-all',
+    SpanBottomSpanRight: 'span-bottom span-right',
+};
+export const VALID_POSITION_VALUES = Object.values(OverlayPosition);
+export const DEFAULT_POSITION = OverlayPosition.TopRight;
+export const VALID_POPOVER_VALUES = ['auto', 'manual', 'hint'];
+export const DEFAULT_POPOVER = 'auto';
+export function normalizeSizingValue(value) {
+    if (value === null || value === undefined || value === '') {
+        return 'auto';
+    }
+    const strValue = String(value).trim();
+    const cssUnitPattern = /^-?\d*\.?\d+(px|rem|em|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/i;
+    if (cssUnitPattern.test(strValue)) {
+        return strValue;
+    }
+    const plainNumberPattern = /^-?\d*\.?\d+$/;
+    if (plainNumberPattern.test(strValue)) {
+        return `${strValue}rem`;
+    }
+    const validKeywords = [
+        'auto',
+        'max-content',
+        'min-content',
+        'fit-content',
+        'inherit',
+        'initial',
+        'unset',
+        'revert',
+    ];
+    if (validKeywords.includes(strValue.toLowerCase())) {
+        return strValue.toLowerCase();
+    }
+    if (strValue.includes('calc(') ||
+        strValue.includes('var(') ||
+        strValue.includes('min(') ||
+        strValue.includes('max(') ||
+        strValue.includes('clamp(')) {
+        return strValue;
+    }
+    return 'auto';
+}
+export function convertLogicalToDirectionalInsets(position, offsetInline, offsetBlock) {
+    let top = 0;
+    let bottom = 0;
+    let left = 0;
+    let right = 0;
+    const [vertical, horizontal] = position.toLowerCase().split(/\s+/);
+    if (horizontal) {
+        if (horizontal.includes('right')) {
+            left = offsetInline;
+        }
+        else if (horizontal.includes('left')) {
+            right = offsetInline;
+        }
+    }
+    if (vertical) {
+        if (vertical.includes('top')) {
+            bottom = offsetBlock;
+        }
+        else if (vertical.includes('bottom')) {
+            top = offsetBlock;
+        }
+    }
+    return { top, bottom, left, right };
+}

package/src/lightning/overlayPositionUtils/overlayPositionUtils.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderable</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/overlayPositionUtils/positionLibraryFallback.d.ts

@@ -0,0 +1,30 @@
+import { AutoPosition } from 'lightning/positionLibrary';
+import type { AnchorPositioningConfig } from './anchorPositioningAdapter';
+import type { PositionValue } from 'lightning/overlayPositionUtils';
+type horizontalDirection = "left" | "right" | "center";
+type verticalDirection = "top" | "bottom" | "center";
+interface Alignment {
+    align: {
+        horizontal: horizontalDirection;
+        vertical: verticalDirection;
+    };
+    targetAlign: {
+        horizontal: horizontalDirection;
+        vertical: verticalDirection;
+    };
+}
+export declare class PositionLibraryFallback {
+    element: HTMLElement;
+    config: AnchorPositioningConfig;
+    autoPosition: AutoPosition | null;
+    positionUpdater: Promise<any> | null;
+    constructor(element: HTMLElement, config?: AnchorPositioningConfig);
+    getPhysicalDirection(direction: horizontalDirection): horizontalDirection;
+    shouldAlignWidth(position: PositionValue): boolean;
+    apply(): void;
+    applySizingStyles(): void;
+    convertPositionToAlignment(position: PositionValue): Alignment;
+    cleanup(): void;
+}
+export {};
+//# sourceMappingURL=positionLibraryFallback.d.ts.map

package/src/lightning/overlayPositionUtils/positionLibraryFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionLibraryFallback.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/overlayPositionUtils/positionLibraryFallback.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAa,MAAM,2BAA2B,CAAC;AAEpE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEpE,KAAK,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACvD,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErD,UAAU,SAAS;IACf,KAAK,EAAE;QACH,UAAU,EAAE,mBAAmB,CAAC;QAChC,QAAQ,EAAE,iBAAiB,CAAC;KAC/B,CAAC;IACF,WAAW,EAAE;QACT,UAAU,EAAE,mBAAmB,CAAC;QAChC,QAAQ,EAAE,iBAAiB,CAAC;KAC/B,CAAC;CACL;AAED,qBAAa,uBAAuB;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,uBAAuB,CAAC;IAChC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,eAAe,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;gBAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,GAAE,uBAA4B;IAmBtE,oBAAoB,CAChB,SAAS,EAAE,mBAAmB,GAC/B,mBAAmB;IAiBtB,gBAAgB,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO;IAQlD,KAAK,IAAI,IAAI;IA2Eb,iBAAiB,IAAI,IAAI;IAyBzB,0BAA0B,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS;IAwV9D,OAAO,IAAI,IAAI;CAelB"}