igniteui-webcomponents 7.3.2 → 7.4.0

package/components/popover/popover.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { PopoverScrollStrategy } from '../types.js';
 /**
  * Describes the preferred placement of a toggle component.
  */
@@ -9,29 +10,24 @@ export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bot
  * @slot - Content of the popover.
  * @slot anchor - The element the popover will be anchored to.
  *
+ * @fires igcPopoverScrollClose - The popover emits this event on each document scroll,
+ * but only while it shows against its anchor and the scroll strategy is `close`.
+ * The popover does not control its own `open` state, so the component that owns that state must close it.
+ * The event does not bubble, so add the listener on the popover element.
+ *
  * @csspart container - The container wrapping the slotted content in the popover.
  */
 export default class IgcPopoverComponent extends LitElement {
     static readonly tagName = "igc-popover";
     static styles: import("lit").CSSResult;
     static register(): void;
-    private _dispose?;
     private _target?;
-    private _middleware?;
-    private _positionId;
-    /**
-     * The positioning strategy resolved when the popover is opened. The `fixed`
-     * strategy is used when the anchor has a `position: sticky` ancestor, otherwise
-     * the default `absolute` strategy is used. Cached here to avoid repeated DOM
-     * traversals and style reflows on every scroll/resize reposition.
-     *
-     * Also, time to migrate to CSS Anchor positioning!!!
-     */
-    private _strategy;
+    private _positionStrategy?;
+    private _positionMode?;
     private readonly _slots;
     private readonly _container;
     /**
-     * Pass an IDREF or an DOM element reference to use as the
+     * Pass an IDREF or a DOM element reference to use as the
      * anchor target for the floating element.
      */
     anchor?: Element | string;
@@ -41,11 +37,6 @@ export default class IgcPopoverComponent extends LitElement {
     arrow: HTMLElement | null;
     /** Additional offset to apply to the arrow element if enabled. */
     arrowOffset: number;
-    /**
-     * Improves positioning for inline reference elements that span over multiple lines.
-     * Useful for tooltips or similar components.
-     */
-    inline: boolean;
     /**
      * When enabled this changes the placement of the floating element in order to keep it
      * in view along the main axis.
@@ -68,34 +59,54 @@ export default class IgcPopoverComponent extends LitElement {
      */
     sameWidth: boolean;
     /**
-     * When enabled this tries to shift the floating element along the main axis
-     * keeping it in view, preventing overflow while maintaining the desired placement.
-     */
-    shift: boolean;
-    /**
-     * Virtual padding for the resolved overflow detection offsets in pixels.
+     * Sets the behavior of the popover when an ancestor scroll container
+     * scrolls and the popover is open.
+     *
+     * If the value is `hide`, the popover hides while the anchor is fully out
+     * of view. The popover shows again when the anchor returns to view. `hide`
+     * is the default value.
+     *
+     * If the value is `scroll`, the popover stays visible. The popover also
+     * stays anchored while the anchor is out of view.
+     *
+     * If the value is `close`, the popover behaves as for `hide`. The popover
+     * also emits `igcPopoverScrollClose` for each scroll. The component that
+     * owns the `open` state must then close the popover.
      */
-    shiftPadding: number;
+    scrollStrategy: PopoverScrollStrategy;
     protected update(properties: PropertyValues<this>): void;
     protected firstUpdated(): void;
+    /**
+     * Waits also for the position strategy. The fallback strategy positions
+     * asynchronously, so the container has no position when Lit ends the update.
+     */
+    protected getUpdateComplete(): Promise<boolean>;
     /** @internal */
     connectedCallback(): void;
     /** @internal */
     disconnectedCallback(): void;
     private _handleSlotChange;
-    private _handleToggle;
+    private _getPositionStrategy;
     /**
-     * An unresolved IDREF keeps the current target, so that an anchor rendered
-     * after this popover is picked up the next time it opens.
+     * Hides the container if the anchor leaves the DOM. The `open` property
+     * keeps its value, so the popover shows again when a new anchor resolves.
+     */
+    private readonly _handleAnchorRemoved;
+    /**
+     * An IDREF that does not resolve keeps the current target, so the popover
+     * finds an anchor that renders later, at the next open.
      */
     private _resolveTarget;
     private _setOpenState;
-    private _setPopoverState;
-    private _clearDispose;
-    private get _placement();
-    private _createMiddleware;
-    private _updatePosition;
-    private _updateArrowPosition;
+    /**
+     * Binds one document `scroll` listener while the container shows and the
+     * scroll strategy is `close`. Reads the container, which can stay closed
+     * while `open` is true.
+     */
+    private _syncScrollStrategy;
+    private readonly _handleRootScroll;
+    /** Shows or hides the container and then syncs the scroll listener. */
+    private _syncContainerState;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/popover/popover.js

@@ -4,41 +4,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from '@floating-ui/dom';
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { addSlotController, setSlots, } from '#internals/controllers/slot.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { firstOf } from '#internals/utils/arrays.js';
-import { getElementByIdFromRoot, hasStickyAncestor, isPopoverOpen, roundByDPR, setStyles, } from '#internals/utils/dom.js';
+import { getElementByIdFromRoot, isPopoverOpen } from '#internals/utils/dom.js';
+import { toggleEventListener } from '#internals/utils/events.js';
 import { isString } from '#internals/utils/types.js';
+import { FloatingPositionStrategy } from './position/floating.js';
+import { NativePositionStrategy, shouldUseNativeAnchorPositioning, } from './position/native.js';
+import { resolvePlacement, SCROLL_LISTENER_OPTIONS, } from './position/types.js';
 import { styles } from './themes/light/popover.base.css.js';
-const OPPOSITE_SIDE = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
-const SIDES = Object.keys(OPPOSITE_SIDE);
 export default class IgcPopoverComponent extends LitElement {
     constructor() {
         super(...arguments);
-        this._positionId = 0;
-        this._strategy = 'absolute';
         this._slots = addSlotController(this, {
             slots: setSlots('anchor'),
             onChange: this._handleSlotChange,
         });
         this.arrow = null;
         this.arrowOffset = 0;
-        this.inline = false;
         this.flip = false;
         this.offset = 0;
         this.open = false;
         this.placement = 'bottom-start';
         this.sameWidth = false;
-        this.shift = false;
-        this.shiftPadding = 0;
+        this.scrollStrategy = 'hide';
+        this._handleAnchorRemoved = () => {
+            this._target = undefined;
+            this._setOpenState(false);
+        };
+        this._handleRootScroll = () => {
+            this.dispatchEvent(new CustomEvent('igcPopoverScrollClose'));
+        };
     }
     static { this.tagName = 'igc-popover'; }
     static { this.styles = styles; }
@@ -47,15 +46,14 @@ export default class IgcPopoverComponent extends LitElement {
     }
     update(properties) {
         if (this.hasUpdated) {
-            this._middleware = undefined;
-            if (properties.has('sameWidth') && !this.sameWidth) {
-                setStyles(this._container, { width: '' });
-            }
             if (properties.has('open') || properties.has('anchor')) {
                 this._setOpenState(this.open);
             }
             else if (this.open) {
-                this._updatePosition();
+                this._positionStrategy?.update();
+            }
+            if (properties.has('scrollStrategy')) {
+                this._syncScrollStrategy();
             }
         }
         super.update(properties);
@@ -63,6 +61,11 @@ export default class IgcPopoverComponent extends LitElement {
     firstUpdated() {
         this._setOpenState(this.open);
     }
+    async getUpdateComplete() {
+        const complete = await super.getUpdateComplete();
+        await this._positionStrategy?.whenPositioned();
+        return complete;
+    }
     connectedCallback() {
         super.connectedCallback();
         if (this.hasUpdated) {
@@ -79,10 +82,21 @@ export default class IgcPopoverComponent extends LitElement {
         }
         this._setOpenState(this.open);
     }
-    _handleToggle() {
-        if (!isPopoverOpen(this._container)) {
-            this._clearDispose();
+    _getPositionStrategy(target) {
+        const mode = shouldUseNativeAnchorPositioning(target)
+            ? 'native'
+            : 'floating';
+        if (this._positionStrategy && this._positionMode === mode) {
+            return this._positionStrategy;
         }
+        this._positionStrategy?.detach();
+        this._positionStrategy?.clear();
+        this._positionMode = mode;
+        this._positionStrategy =
+            mode === 'native'
+                ? new NativePositionStrategy(this, this._handleAnchorRemoved)
+                : new FloatingPositionStrategy(this, this._handleAnchorRemoved);
+        return this._positionStrategy;
     }
     _resolveTarget() {
         if (isString(this.anchor)) {
@@ -92,108 +106,31 @@ export default class IgcPopoverComponent extends LitElement {
             firstOf(this._slots.getAssignedElements('anchor', { flatten: true })));
     }
     _setOpenState(state) {
-        this._clearDispose();
         if (state) {
             this._target = this._resolveTarget();
-            if (this._target) {
-                this._strategy = hasStickyAncestor(this._target) ? 'fixed' : 'absolute';
-                this._dispose = autoUpdate(this._target, this._container, this._updatePosition.bind(this));
-            }
         }
-        this._setPopoverState(state);
-    }
-    _setPopoverState(state) {
-        const container = this._container;
-        if (!container) {
-            return;
+        if (state && this._target) {
+            this._getPositionStrategy(this._target).attach(this._target, this._container);
         }
-        const shouldOpen = state && this._target != null;
-        if (shouldOpen !== isPopoverOpen(container)) {
-            shouldOpen ? container.showPopover() : container.hidePopover();
+        else {
+            this._positionStrategy?.detach();
         }
+        this._syncContainerState(state);
     }
-    _clearDispose() {
-        this._dispose?.();
-        this._dispose = undefined;
+    _syncScrollStrategy() {
+        toggleEventListener(document, isPopoverOpen(this._container) && this.scrollStrategy === 'close', 'scroll', this._handleRootScroll, SCROLL_LISTENER_OPTIONS);
     }
-    get _placement() {
-        return this.placement ?? 'bottom-start';
-    }
-    _createMiddleware() {
-        const shiftMiddleware = this.shift
-            ? shift({ padding: this.shiftPadding, limiter: limitShift() })
-            : null;
-        const flipMiddleware = this.flip ? flip() : null;
-        const positioners = this._placement.includes('-')
-            ? [flipMiddleware, shiftMiddleware]
-            : [shiftMiddleware, flipMiddleware];
-        const chain = [
-            this.offset !== 0 ? offset(this.offset) : null,
-            this.inline ? inline() : null,
-            ...positioners,
-            this.sameWidth
-                ? size({
-                    apply: ({ rects }) => setStyles(this._container, {
-                        width: `${rects.reference.width}px`,
-                    }),
-                })
-                : null,
-            this.arrow ? arrow({ element: this.arrow }) : null,
-        ];
-        return chain.filter((entry) => entry !== null);
-    }
-    async _updatePosition() {
-        if (!this.open) {
-            return;
-        }
-        if (!this._target?.isConnected) {
-            this._target = undefined;
-            this._clearDispose();
-            this._setPopoverState(false);
+    _syncContainerState(state) {
+        if (!this._container) {
             return;
         }
-        const positionId = ++this._positionId;
-        const strategy = this._strategy;
-        const { x, y, middlewareData, placement } = await computePosition(this._target, this._container, {
-            placement: this._placement,
-            middleware: (this._middleware ??= this._createMiddleware()),
-            strategy,
-        });
-        if (positionId !== this._positionId || !this.open) {
-            return;
+        if (state && this._target) {
+            this._positionStrategy?.show();
         }
-        setStyles(this._container, {
-            position: strategy,
-            left: '0',
-            top: '0',
-            transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
-        });
-        this._updateArrowPosition(placement, middlewareData);
-    }
-    _updateArrowPosition(placement, data) {
-        const element = this.arrow;
-        if (!(data.arrow && element)) {
-            return;
+        else {
+            this._positionStrategy?.hide();
         }
-        const { x, y } = data.arrow;
-        const offset = this.arrowOffset;
-        const [side] = placement.split('-');
-        const staticSide = OPPOSITE_SIDE[side];
-        if (!element.part.contains(side)) {
-            element.part.remove(...SIDES);
-            element.part.add(side);
-        }
-        const inset = staticSide === 'top' || staticSide === 'bottom'
-            ? element.offsetHeight
-            : element.offsetWidth;
-        const styles = {
-            top: y != null ? `${roundByDPR(y + offset)}px` : '',
-            right: '',
-            bottom: '',
-            left: x != null ? `${roundByDPR(x + offset)}px` : '',
-        };
-        styles[staticSide] = `${-inset}px`;
-        setStyles(element, styles);
+        this._syncScrollStrategy();
     }
     render() {
         return html `
@@ -202,7 +139,8 @@ export default class IgcPopoverComponent extends LitElement {
         id="container"
         part="container"
         popover="manual"
-        @toggle=${this._handleToggle}
+        data-placement=${resolvePlacement(this)}
+        data-scroll-strategy=${this.scrollStrategy}
       >
         <slot></slot>
       </div>
@@ -221,9 +159,6 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'arrow-offset' })
 ], IgcPopoverComponent.prototype, "arrowOffset", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcPopoverComponent.prototype, "inline", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcPopoverComponent.prototype, "flip", void 0);
@@ -240,9 +175,6 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'same-width' })
 ], IgcPopoverComponent.prototype, "sameWidth", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], IgcPopoverComponent.prototype, "shift", void 0);
-__decorate([
-    property({ type: Number, attribute: 'shift-padding' })
-], IgcPopoverComponent.prototype, "shiftPadding", void 0);
+    property({ attribute: 'scroll-strategy' })
+], IgcPopoverComponent.prototype, "scrollStrategy", void 0);
 //# sourceMappingURL=popover.js.map

package/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  inline,\n  limitShift,\n  type Middleware,\n  type MiddlewareData,\n  offset,\n  type Placement,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport {\n  addSlotController,\n  type SlotChangeCallbackParameters,\n  setSlots,\n} from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport {\n  getElementByIdFromRoot,\n  hasStickyAncestor,\n  isPopoverOpen,\n  roundByDPR,\n  setStyles,\n} from '#internals/utils/dom.js';\nimport { isString } from '#internals/utils/types.js';\nimport { styles } from './themes/light/popover.base.css.js';\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\nconst OPPOSITE_SIDE = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n} as const;\n\ntype PopoverSide = keyof typeof OPPOSITE_SIDE;\n\nconst SIDES = Object.keys(OPPOSITE_SIDE) as PopoverSide[];\n\n/* blazorSuppress */\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n *\n * @csspart container - The container wrapping the slotted content in the popover.\n */\nexport default class IgcPopoverComponent extends LitElement {\n  public static readonly tagName = 'igc-popover';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcPopoverComponent);\n  }\n\n  //#region Internal properties and state\n\n  private _dispose?: ReturnType<typeof autoUpdate>;\n  private _target?: Element;\n  private _middleware?: Middleware[];\n  private _positionId = 0;\n\n  /**\n   * The positioning strategy resolved when the popover is opened. The `fixed`\n   * strategy is used when the anchor has a `position: sticky` ancestor, otherwise\n   * the default `absolute` strategy is used. Cached here to avoid repeated DOM\n   * traversals and style reflows on every scroll/resize reposition.\n   *\n   * Also, time to migrate to CSS Anchor positioning!!!\n   */\n  private _strategy: 'absolute' | 'fixed' = 'absolute';\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('anchor'),\n    onChange: this._handleSlotChange,\n  });\n\n  @query('#container', true)\n  private readonly _container!: HTMLElement;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Pass an IDREF or an DOM element reference to use as the\n   * anchor target for the floating element.\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * Element to render as an \"arrow\" element for the current popover.\n   */\n  @property({ attribute: false })\n  public arrow: HTMLElement | null = null;\n\n  /** Additional offset to apply to the arrow element if enabled. */\n  @property({ type: Number, attribute: 'arrow-offset' })\n  public arrowOffset = 0;\n\n  /**\n   * Improves positioning for inline reference elements that span over multiple lines.\n   * Useful for tooltips or similar components.\n   */\n  @property({ type: Boolean, reflect: true })\n  public inline = false;\n\n  /**\n   * When enabled this changes the placement of the floating element in order to keep it\n   * in view along the main axis.\n   */\n  @property({ type: Boolean, reflect: true })\n  public flip = false;\n\n  /**\n   * Placement modifier which translates the floating element along the main axis.\n   */\n  @property({ type: Number })\n  public offset = 0;\n\n  /**\n   * The visibility state of the popover component.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   */\n  @property()\n  public placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * When enabled the floating element will match the width of its parent anchor element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n  public sameWidth = false;\n\n  /**\n   * When enabled this tries to shift the floating element along the main axis\n   * keeping it in view, preventing overflow while maintaining the desired placement.\n   */\n  @property({ type: Boolean, reflect: true })\n  public shift = false;\n\n  /**\n   * Virtual padding for the resolved overflow detection offsets in pixels.\n   */\n  @property({ type: Number, attribute: 'shift-padding' })\n  public shiftPadding = 0;\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (this.hasUpdated) {\n      this._middleware = undefined;\n\n      if (properties.has('sameWidth') && !this.sameWidth) {\n        setStyles(this._container, { width: '' });\n      }\n\n      if (properties.has('open') || properties.has('anchor')) {\n        this._setOpenState(this.open);\n      } else if (this.open) {\n        this._updatePosition();\n      }\n    }\n\n    super.update(properties);\n  }\n\n  protected override firstUpdated(): void {\n    this._setOpenState(this.open);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasUpdated) {\n      this._setOpenState(this.open);\n    }\n  }\n\n  /** @internal */\n  public override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._setOpenState(false);\n  }\n\n  //#endregion\n\n  private _handleSlotChange({\n    isDefault,\n  }: SlotChangeCallbackParameters<unknown>): void {\n    if (isDefault || this.anchor) {\n      return;\n    }\n\n    this._setOpenState(this.open);\n  }\n\n  private _handleToggle(): void {\n    if (!isPopoverOpen(this._container)) {\n      this._clearDispose();\n    }\n  }\n\n  //#region Internal open state API\n\n  /**\n   * An unresolved IDREF keeps the current target, so that an anchor rendered\n   * after this popover is picked up the next time it opens.\n   */\n  private _resolveTarget(): Element | undefined {\n    if (isString(this.anchor)) {\n      return getElementByIdFromRoot(this, this.anchor) ?? this._target;\n    }\n\n    return (\n      this.anchor ??\n      firstOf(this._slots.getAssignedElements('anchor', { flatten: true }))\n    );\n  }\n\n  private _setOpenState(state: boolean): void {\n    this._clearDispose();\n\n    if (state) {\n      this._target = this._resolveTarget();\n\n      if (this._target) {\n        this._strategy = hasStickyAncestor(this._target) ? 'fixed' : 'absolute';\n        this._dispose = autoUpdate(\n          this._target,\n          this._container,\n          this._updatePosition.bind(this)\n        );\n      }\n    }\n\n    this._setPopoverState(state);\n  }\n\n  private _setPopoverState(state: boolean): void {\n    const container = this._container;\n\n    if (!container) {\n      return;\n    }\n\n    const shouldOpen = state && this._target != null;\n\n    if (shouldOpen !== isPopoverOpen(container)) {\n      shouldOpen ? container.showPopover() : container.hidePopover();\n    }\n  }\n\n  private _clearDispose(): void {\n    this._dispose?.();\n    this._dispose = undefined;\n  }\n\n  //#endregion\n\n  //#region Internal position API\n\n  private get _placement(): PopoverPlacement {\n    return this.placement ?? 'bottom-start';\n  }\n\n  private _createMiddleware(): Middleware[] {\n    const shiftMiddleware = this.shift\n      ? shift({ padding: this.shiftPadding, limiter: limitShift() })\n      : null;\n    const flipMiddleware = this.flip ? flip() : null;\n\n    // Aligned placements flip before shifting, base placements shift first.\n    // See https://floating-ui.com/docs/flip\n    const positioners = this._placement.includes('-')\n      ? [flipMiddleware, shiftMiddleware]\n      : [shiftMiddleware, flipMiddleware];\n\n    const chain = [\n      this.offset !== 0 ? offset(this.offset) : null,\n      this.inline ? inline() : null,\n      ...positioners,\n      this.sameWidth\n        ? size({\n            apply: ({ rects }) =>\n              setStyles(this._container, {\n                width: `${rects.reference.width}px`,\n              }),\n          })\n        : null,\n      this.arrow ? arrow({ element: this.arrow }) : null,\n    ];\n\n    return chain.filter((entry): entry is Middleware => entry !== null);\n  }\n\n  private async _updatePosition(): Promise<void> {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._target?.isConnected) {\n      this._target = undefined;\n      this._clearDispose();\n      this._setPopoverState(false);\n      return;\n    }\n\n    const positionId = ++this._positionId;\n    const strategy = this._strategy;\n\n    const { x, y, middlewareData, placement } = await computePosition(\n      this._target,\n      this._container,\n      {\n        placement: this._placement,\n        middleware: (this._middleware ??= this._createMiddleware()),\n        strategy,\n      }\n    );\n\n    if (positionId !== this._positionId || !this.open) {\n      return;\n    }\n\n    setStyles(this._container, {\n      position: strategy,\n      left: '0',\n      top: '0',\n      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n    });\n\n    this._updateArrowPosition(placement, middlewareData);\n  }\n\n  private _updateArrowPosition(\n    placement: Placement,\n    data: MiddlewareData\n  ): void {\n    const element = this.arrow;\n\n    if (!(data.arrow && element)) {\n      return;\n    }\n\n    const { x, y } = data.arrow;\n    const offset = this.arrowOffset;\n    const [side] = placement.split('-') as [PopoverSide];\n    const staticSide = OPPOSITE_SIDE[side];\n\n    if (!element.part.contains(side)) {\n      element.part.remove(...SIDES);\n      element.part.add(side);\n    }\n\n    // Measured after the part switch, since it is what gives the arrow its size.\n    const inset =\n      staticSide === 'top' || staticSide === 'bottom'\n        ? element.offsetHeight\n        : element.offsetWidth;\n\n    // Every side is reset, otherwise the inset of the previous placement is left\n    // behind and over-constrains the arrow.\n    const styles: Partial<CSSStyleDeclaration> = {\n      top: y != null ? `${roundByDPR(y + offset)}px` : '',\n      right: '',\n      bottom: '',\n      left: x != null ? `${roundByDPR(x + offset)}px` : '',\n    };\n\n    styles[staticSide] = `${-inset}px`;\n\n    setStyles(element, styles);\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`\n      <slot name=\"anchor\"></slot>\n      <div\n        id=\"container\"\n        part=\"container\"\n        popover=\"manual\"\n        @toggle=${this._handleToggle}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-popover': IgcPopoverComponent;\n  }\n}\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport {\n  addSlotController,\n  type SlotChangeCallbackParameters,\n  setSlots,\n} from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getElementByIdFromRoot, isPopoverOpen } from '#internals/utils/dom.js';\nimport { toggleEventListener } from '#internals/utils/events.js';\nimport { isString } from '#internals/utils/types.js';\nimport type { PopoverScrollStrategy } from '../types.js';\nimport { FloatingPositionStrategy } from './position/floating.js';\nimport {\n  NativePositionStrategy,\n  shouldUseNativeAnchorPositioning,\n} from './position/native.js';\nimport type { PopoverPositionStrategy } from './position/strategy.js';\nimport {\n  type PopoverPositionStrategyMode,\n  resolvePlacement,\n  SCROLL_LISTENER_OPTIONS,\n} from './position/types.js';\nimport { styles } from './themes/light/popover.base.css.js';\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n/* blazorSuppress */\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n *\n * @fires igcPopoverScrollClose - The popover emits this event on each document scroll,\n * but only while it shows against its anchor and the scroll strategy is `close`.\n * The popover does not control its own `open` state, so the component that owns that state must close it.\n * The event does not bubble, so add the listener on the popover element.\n *\n * @csspart container - The container wrapping the slotted content in the popover.\n */\nexport default class IgcPopoverComponent extends LitElement {\n  public static readonly tagName = 'igc-popover';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcPopoverComponent);\n  }\n\n  //#region Internal properties and state\n\n  private _target?: Element;\n  private _positionStrategy?: PopoverPositionStrategy;\n  private _positionMode?: PopoverPositionStrategyMode;\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('anchor'),\n    onChange: this._handleSlotChange,\n  });\n\n  @query('#container', true)\n  private readonly _container!: HTMLElement;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Pass an IDREF or a DOM element reference to use as the\n   * anchor target for the floating element.\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * Element to render as an \"arrow\" element for the current popover.\n   */\n  @property({ attribute: false })\n  public arrow: HTMLElement | null = null;\n\n  /** Additional offset to apply to the arrow element if enabled. */\n  @property({ type: Number, attribute: 'arrow-offset' })\n  public arrowOffset = 0;\n\n  /**\n   * When enabled this changes the placement of the floating element in order to keep it\n   * in view along the main axis.\n   */\n  @property({ type: Boolean, reflect: true })\n  public flip = false;\n\n  /**\n   * Placement modifier which translates the floating element along the main axis.\n   */\n  @property({ type: Number })\n  public offset = 0;\n\n  /**\n   * The visibility state of the popover component.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   */\n  @property()\n  public placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * When enabled the floating element will match the width of its parent anchor element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n  public sameWidth = false;\n\n  /**\n   * Sets the behavior of the popover when an ancestor scroll container\n   * scrolls and the popover is open.\n   *\n   * If the value is `hide`, the popover hides while the anchor is fully out\n   * of view. The popover shows again when the anchor returns to view. `hide`\n   * is the default value.\n   *\n   * If the value is `scroll`, the popover stays visible. The popover also\n   * stays anchored while the anchor is out of view.\n   *\n   * If the value is `close`, the popover behaves as for `hide`. The popover\n   * also emits `igcPopoverScrollClose` for each scroll. The component that\n   * owns the `open` state must then close the popover.\n   */\n  @property({ attribute: 'scroll-strategy' })\n  public scrollStrategy: PopoverScrollStrategy = 'hide';\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (this.hasUpdated) {\n      if (properties.has('open') || properties.has('anchor')) {\n        this._setOpenState(this.open);\n      } else if (this.open) {\n        this._positionStrategy?.update();\n      }\n\n      if (properties.has('scrollStrategy')) {\n        this._syncScrollStrategy();\n      }\n    }\n\n    super.update(properties);\n  }\n\n  protected override firstUpdated(): void {\n    this._setOpenState(this.open);\n  }\n\n  /**\n   * Waits also for the position strategy. The fallback strategy positions\n   * asynchronously, so the container has no position when Lit ends the update.\n   */\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const complete = await super.getUpdateComplete();\n    await this._positionStrategy?.whenPositioned();\n\n    return complete;\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasUpdated) {\n      this._setOpenState(this.open);\n    }\n  }\n\n  /** @internal */\n  public override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._setOpenState(false);\n  }\n\n  //#endregion\n\n  private _handleSlotChange({\n    isDefault,\n  }: SlotChangeCallbackParameters<unknown>): void {\n    if (isDefault || this.anchor) {\n      return;\n    }\n\n    this._setOpenState(this.open);\n  }\n\n  //#region Internal open state API\n\n  private _getPositionStrategy(target: Element): PopoverPositionStrategy {\n    const mode = shouldUseNativeAnchorPositioning(target)\n      ? 'native'\n      : 'floating';\n\n    if (this._positionStrategy && this._positionMode === mode) {\n      return this._positionStrategy;\n    }\n\n    this._positionStrategy?.detach();\n    this._positionStrategy?.clear();\n\n    this._positionMode = mode;\n    this._positionStrategy =\n      mode === 'native'\n        ? new NativePositionStrategy(this, this._handleAnchorRemoved)\n        : new FloatingPositionStrategy(this, this._handleAnchorRemoved);\n\n    return this._positionStrategy;\n  }\n\n  /**\n   * Hides the container if the anchor leaves the DOM. The `open` property\n   * keeps its value, so the popover shows again when a new anchor resolves.\n   */\n  private readonly _handleAnchorRemoved = (): void => {\n    this._target = undefined;\n    this._setOpenState(false);\n  };\n\n  /**\n   * An IDREF that does not resolve keeps the current target, so the popover\n   * finds an anchor that renders later, at the next open.\n   */\n  private _resolveTarget(): Element | undefined {\n    if (isString(this.anchor)) {\n      return getElementByIdFromRoot(this, this.anchor) ?? this._target;\n    }\n\n    return (\n      this.anchor ??\n      firstOf(this._slots.getAssignedElements('anchor', { flatten: true }))\n    );\n  }\n\n  private _setOpenState(state: boolean): void {\n    if (state) {\n      this._target = this._resolveTarget();\n    }\n\n    if (state && this._target) {\n      // `attach` also detaches the previous open cycle.\n      this._getPositionStrategy(this._target).attach(\n        this._target,\n        this._container\n      );\n    } else {\n      this._positionStrategy?.detach();\n    }\n\n    this._syncContainerState(state);\n  }\n\n  /**\n   * Binds one document `scroll` listener while the container shows and the\n   * scroll strategy is `close`. Reads the container, which can stay closed\n   * while `open` is true.\n   */\n  private _syncScrollStrategy(): void {\n    toggleEventListener(\n      document,\n      isPopoverOpen(this._container) && this.scrollStrategy === 'close',\n      'scroll',\n      this._handleRootScroll,\n      SCROLL_LISTENER_OPTIONS\n    );\n  }\n\n  private readonly _handleRootScroll = (): void => {\n    this.dispatchEvent(new CustomEvent('igcPopoverScrollClose'));\n  };\n\n  /** Shows or hides the container and then syncs the scroll listener. */\n  private _syncContainerState(state: boolean): void {\n    if (!this._container) {\n      return;\n    }\n\n    if (state && this._target) {\n      this._positionStrategy?.show();\n    } else {\n      this._positionStrategy?.hide();\n    }\n\n    this._syncScrollStrategy();\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`\n      <slot name=\"anchor\"></slot>\n      <div\n        id=\"container\"\n        part=\"container\"\n        popover=\"manual\"\n        data-placement=${resolvePlacement(this)}\n        data-scroll-strategy=${this.scrollStrategy}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-popover': IgcPopoverComponent;\n  }\n}\n"]}

package/components/popover/position/arrow.d.ts

@@ -0,0 +1,19 @@
+export declare const OPPOSITE_SIDE: {
+    readonly top: "bottom";
+    readonly right: "left";
+    readonly bottom: "top";
+    readonly left: "right";
+};
+export type PopoverSide = keyof typeof OPPOSITE_SIDE;
+/** Returns the side of a placement, without the alignment. */
+export declare function getPlacementSide(placement: string): PopoverSide;
+/** True if `side` is on the block axis. */
+export declare function isBlockSide(side: PopoverSide): boolean;
+/**
+ * Sets the part and the inline styles of the arrow. Both strategies call it,
+ * so the arrow gets the same styles.
+ *
+ * `side` is the side of the container that touches the anchor. `distance` is
+ * the position of the arrow on the cross axis of that side.
+ */
+export declare function applyArrowStyles(element: HTMLElement, side: PopoverSide, distance: number, offset: number): void;

package/components/popover/position/arrow.js

@@ -0,0 +1,33 @@
+import { roundByDPR, setStyles } from '#internals/utils/dom.js';
+export const OPPOSITE_SIDE = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+const SIDES = Object.keys(OPPOSITE_SIDE);
+export function getPlacementSide(placement) {
+    return placement.split('-')[0];
+}
+export function isBlockSide(side) {
+    return side === 'top' || side === 'bottom';
+}
+export function applyArrowStyles(element, side, distance, offset) {
+    const staticSide = OPPOSITE_SIDE[side];
+    if (!element.part.contains(side)) {
+        element.part.remove(...SIDES);
+        element.part.add(side);
+    }
+    const block = isBlockSide(staticSide);
+    const inset = block ? element.offsetHeight : element.offsetWidth;
+    const styles = {
+        top: '',
+        right: '',
+        bottom: '',
+        left: '',
+        [block ? 'left' : 'top']: `${roundByDPR(distance + offset)}px`,
+    };
+    styles[staticSide] = `${-inset}px`;
+    setStyles(element, styles);
+}
+//# sourceMappingURL=arrow.js.map

package/components/popover/position/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","sourceRoot":"","sources":["../../../../src/components/popover/position/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,OAAO;CACL,CAAC;AAIX,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAkB,CAAC;AAG1D,MAAM,UAAU,gBAAgB,CAAC,SAAiB;IAChD,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAgB,CAAC;AAChD,CAAC;AAGD,MAAM,UAAU,WAAW,CAAC,IAAiB;IAC3C,OAAO,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC;AAC7C,CAAC;AASD,MAAM,UAAU,gBAAgB,CAC9B,OAAoB,EACpB,IAAiB,EACjB,QAAgB,EAChB,MAAc;IAEd,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAGD,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;IAGjE,MAAM,MAAM,GAAiC;QAC3C,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,EAAE;QACR,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI;KAC/D,CAAC;IAEF,MAAM,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,KAAK,IAAI,CAAC;IAEnC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["import { roundByDPR, setStyles } from '#internals/utils/dom.js';\n\nexport const OPPOSITE_SIDE = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n} as const;\n\nexport type PopoverSide = keyof typeof OPPOSITE_SIDE;\n\nconst SIDES = Object.keys(OPPOSITE_SIDE) as PopoverSide[];\n\n/** Returns the side of a placement, without the alignment. */\nexport function getPlacementSide(placement: string): PopoverSide {\n  return placement.split('-')[0] as PopoverSide;\n}\n\n/** True if `side` is on the block axis. */\nexport function isBlockSide(side: PopoverSide): boolean {\n  return side === 'top' || side === 'bottom';\n}\n\n/**\n * Sets the part and the inline styles of the arrow. Both strategies call it,\n * so the arrow gets the same styles.\n *\n * `side` is the side of the container that touches the anchor. `distance` is\n * the position of the arrow on the cross axis of that side.\n */\nexport function applyArrowStyles(\n  element: HTMLElement,\n  side: PopoverSide,\n  distance: number,\n  offset: number\n): void {\n  const staticSide = OPPOSITE_SIDE[side];\n\n  if (!element.part.contains(side)) {\n    element.part.remove(...SIDES);\n    element.part.add(side);\n  }\n\n  // The part gives the arrow its size. Measure after the part changes.\n  const block = isBlockSide(staticSide);\n  const inset = block ? element.offsetHeight : element.offsetWidth;\n\n  // Reset all sides. A stale inset over-constrains the arrow.\n  const styles: Partial<CSSStyleDeclaration> = {\n    top: '',\n    right: '',\n    bottom: '',\n    left: '',\n    [block ? 'left' : 'top']: `${roundByDPR(distance + offset)}px`,\n  };\n\n  styles[staticSide] = `${-inset}px`;\n\n  setStyles(element, styles);\n}\n"]}

package/components/popover/position/floating.d.ts

@@ -0,0 +1,40 @@
+import { PopoverPositionStrategy } from './strategy.js';
+/**
+ * The fallback strategy, for a browser without the native CSS anchor
+ * positioning. It positions the container with `@floating-ui/dom`.
+ */
+export declare class FloatingPositionStrategy extends PopoverPositionStrategy {
+    private _dispose?;
+    private _middleware?;
+    private _positionId;
+    /** The module load of the current open cycle, with its first position. */
+    private _pendingLoad?;
+    /** The position update that runs now. */
+    private _pendingPosition?;
+    /**
+     * Identifies the open cycle. Each `attach` and `detach` increments it.
+     * Every `attach` chains a callback onto the shared module loader, so a
+     * callback of a replaced cycle must not start an update.
+     */
+    private _attachId;
+    /**
+     * `fixed` if an ancestor of the anchor has `position: sticky`, `absolute`
+     * in all other cases. The value updates one time for each open cycle,
+     * because the calculation walks the DOM and forces a style reflow.
+     */
+    private _strategy;
+    attach(target: Element, container: HTMLElement): void;
+    /**
+     * This strategy loads its module on demand and then positions
+     * asynchronously, so the host waits for both.
+     */
+    whenPositioned(): Promise<void>;
+    show(): void;
+    update(): void;
+    detach(): void;
+    clear(): void;
+    private _startAutoUpdate;
+    private _createMiddleware;
+    private _updatePosition;
+    private _computePosition;
+}