@carbon/web-components 2.58.1 → 2.59.0

package/es-custom/components/floating-menu/floating-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-menu.js","names":[],"sources":["../../../src/components/floating-menu/floating-menu.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport Handle from '../../globals/internal/handle';\nimport {\n  FLOATING_MENU_DIRECTION,\n  FLOATING_MENU_POSITION_DIRECTION,\n} from './defs';\nimport CDSFloatingMenuTrigger from './floating-menu-trigger';\nimport { prefix } from '../../globals/settings';\n\nexport { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };\n\nexport interface Offset {\n  top: number;\n  left: number;\n}\n\nexport type MenuDirection = FLOATING_MENU_DIRECTION;\n\nexport type MenuOffset =\n  | Offset\n  | ((\n      menuBody: HTMLElement,\n      menuDirection: MenuDirection,\n      trigger?: HTMLElement | null,\n      flipped?: boolean\n    ) => Offset);\n\n/**\n * Calculates the offset for the floating menu.\n *\n * @param menuBody - The menu body element.\n * @param menuDirection - The floating menu direction.\n * @param trigger - The trigger element.\n * @param flipped - Whether the menu is flipped.\n * @returns The adjustment of the floating menu position.\n */\nexport const getMenuOffset = (\n  menuBody: HTMLElement,\n  menuDirection: MenuDirection,\n  trigger?: HTMLElement,\n  flipped?: boolean\n): Offset => {\n  const { offsetWidth: menuWidth } = menuBody;\n\n  switch (menuDirection) {\n    case FLOATING_MENU_DIRECTION.TOP:\n    case FLOATING_MENU_DIRECTION.BOTTOM: {\n      const triggerWidth = !trigger ? 0 : trigger.offsetWidth;\n      return {\n        left: (!flipped ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),\n        top: 0,\n      };\n    }\n    default:\n      return { left: 0, top: 0 };\n  }\n};\n\n/**\n * Position of floating menu, or trigger button of floating menu.\n */\nexport interface FloatingMenuPosition {\n  /**\n   * The LTR/RTL direction used for positioning floating menu.\n   */\n  direction: FLOATING_MENU_POSITION_DIRECTION;\n\n  /**\n   * The start position (Left position for LTR, right position for RTL).\n   */\n  start: number;\n\n  /**\n   * The top position.\n   */\n  top: number;\n}\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * @param elem The starting element.\n * @param selector The CSS selector.\n * @returns {Element}\n *   The closest ancestor node of the given element that matches the given selector, crossing Shadow DOM boundary.\n */\nconst closestComposed = (elem: Element, selector: string) => {\n  const found = elem.closest(selector);\n  if (found) {\n    return found;\n  }\n  const { host } = elem.getRootNode() as ShadowRoot;\n  if (host) {\n    return closestComposed(host, selector);\n  }\n  return null;\n};\n\n/**\n * Floating menu.\n */\nabstract class CDSFloatingMenu extends HostListenerMixin(\n  FocusMixin(LitElement)\n) {\n  /**\n   * The handle for observing resize of the element containing the trigger button.\n   */\n  private _hObserveResizeParent: Handle | null = null;\n\n  /**\n   * The handle for observing resize of the floating menu container.\n   */\n  private _hObserveResizeContainer: Handle | null = null;\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    const { container, open, parent, position } = this;\n    if (container && open && parent) {\n      const { top } = position;\n      this.style.top = `${top}px`;\n    }\n  });\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (!this.contains(relatedTarget as Node)) {\n      const { parent } = this;\n      if (parent && parent !== relatedTarget) {\n        parent.open = false;\n        HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method\n      }\n    }\n  };\n\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _click = () => {\n    const { parent } = this;\n    if (parent) {\n      parent.open = false;\n    }\n  };\n\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        const { parent } = this;\n        if (parent) {\n          parent.open = false;\n        }\n      }\n    }\n  };\n\n  /**\n   * The DOM element, typically a custom element in this library, launching this floating menu.\n   */\n  protected parent: CDSFloatingMenuTrigger | null = null;\n\n  /**\n   * The menu direction.\n   */\n  abstract direction: FLOATING_MENU_DIRECTION;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  abstract open: boolean;\n\n  /**\n   * `true` if the menu alignment should be flipped.\n   */\n  abstract flipped: boolean;\n\n  /**\n   * Gets the menu offset configuration (object or function).\n   * Subclasses override this to specify custom offset configs.\n   *\n   * @returns The menu offset configuration, or undefined for no offset.\n   */\n  protected getOffsetConfig(): MenuOffset | undefined {\n    return undefined;\n  }\n\n  /**\n   * Resolves the final menu offset by evaluating the offset configuration.\n   * Handles both static offset objects and dynamic offset functions.\n   *\n   * @returns The resolved offset with left and top values.\n   */\n  protected resolveOffset(): Offset {\n    const config = this.getOffsetConfig();\n\n    if (!config) {\n      return { left: 0, top: 0 };\n    }\n\n    if (typeof config === 'function') {\n      const trigger = this.parent as HTMLElement;\n      return config(this, this.direction, trigger, this.flipped);\n    }\n\n    return config;\n  }\n\n  /**\n   * The DOM element to put this menu into.\n   */\n  get container() {\n    return (\n      closestComposed(\n        this,\n        (this.constructor as typeof CDSFloatingMenu).selectorContainer\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      ) || this.ownerDocument!.body\n    );\n  }\n\n  /**\n   * The position of this floating menu.\n   */\n  get position(): FloatingMenuPosition {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const { triggerPosition } = this.parent!;\n    if (!triggerPosition) {\n      throw new TypeError('Missing information of trigger button position.');\n    }\n\n    const { container } = this;\n    const {\n      left: refLeft = 0,\n      top: refTop = 0,\n      right: refRight = 0,\n      bottom: refBottom = 0,\n    } = triggerPosition;\n    const { width, height } = this.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    const containerComputedStyle =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      container.ownerDocument!.defaultView!.getComputedStyle(container);\n    const containerPosition =\n      containerComputedStyle.getPropertyValue('position');\n    const positionDirection = containerComputedStyle.getPropertyValue(\n      'direction'\n    ) as FLOATING_MENU_POSITION_DIRECTION;\n\n    const scrollX = globalThis.scrollX ?? 0;\n    const scrollY = globalThis.scrollY ?? 0;\n    const effectiveScrollX = containerPosition !== 'static' ? 0 : scrollX;\n    const effectiveScrollY = containerPosition !== 'static' ? 0 : scrollY;\n\n    const relativeDiff = {\n      top: containerPosition !== 'static' ? containerRect.top : 0,\n      left: containerPosition !== 'static' ? containerRect.left : 0,\n    };\n\n    const refCenterHorizontal = (refLeft + refRight) / 2;\n    const refCenterVertical = (refTop + refBottom) / 2;\n\n    const offset = this.resolveOffset();\n    const { top = 0, left = 0 } = offset;\n\n    const { direction } = this;\n    if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {\n      throw new Error(`Wrong menu position direction: ${direction}`);\n    }\n\n    const positions: Record<MenuDirection, () => Offset> = {\n      [FLOATING_MENU_DIRECTION.LEFT]: () => ({\n        left: refLeft - width + effectiveScrollX - left - relativeDiff.left,\n        top:\n          refCenterVertical -\n          height / 2 +\n          effectiveScrollY +\n          top -\n          9 -\n          relativeDiff.top,\n      }),\n      [FLOATING_MENU_DIRECTION.TOP]: () => ({\n        left:\n          refCenterHorizontal -\n          width / 2 +\n          effectiveScrollX +\n          left -\n          relativeDiff.left,\n        top: refTop - height + effectiveScrollY - top - relativeDiff.top,\n      }),\n      [FLOATING_MENU_DIRECTION.RIGHT]: () => ({\n        left: refRight + effectiveScrollX + left - relativeDiff.left,\n        top:\n          refCenterVertical -\n          height / 2 +\n          effectiveScrollY +\n          top +\n          3 -\n          relativeDiff.top,\n      }),\n      [FLOATING_MENU_DIRECTION.BOTTOM]: () => ({\n        left:\n          refCenterHorizontal -\n          width / 2 +\n          effectiveScrollX +\n          left -\n          relativeDiff.left,\n        top: refBottom + effectiveScrollY + top - relativeDiff.top,\n      }),\n    };\n\n    const { left: calculatedLeft, top: calculatedTop } = positions[direction]();\n\n    return {\n      direction: positionDirection,\n      start: calculatedLeft,\n      top: calculatedTop,\n    };\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResizeContainer) {\n      this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n    }\n    if (this._hObserveResizeParent) {\n      this._hObserveResizeParent = this._hObserveResizeParent.release();\n    }\n  }\n\n  updated(changedProperties) {\n    const { container, open, parent } = this;\n    if (\n      (changedProperties.has('flipped') ||\n        changedProperties.has('direction') ||\n        changedProperties.has('open')) &&\n      open\n    ) {\n      if (!parent) {\n        this.parent = this.parentElement as CDSFloatingMenuTrigger;\n        container.appendChild(this);\n      }\n      // Note: `this.position` cannot be referenced until `this.parent` is set\n      const { start, top } = this.position;\n      this.style.left = `${start}px`;\n      this.style.right = 'auto';\n      this.style.top = `${top}px`;\n    }\n    if (changedProperties.has('open')) {\n      if (this._hObserveResizeContainer) {\n        this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n      }\n      if (this._hObserveResizeParent) {\n        this._hObserveResizeParent = this._hObserveResizeParent.release();\n      }\n      if (open) {\n        const { parentElement } = this.parent ?? {};\n        this._hObserveResizeContainer = observeResize(\n          this._resizeObserver,\n          container\n        );\n        if (parentElement) {\n          this._hObserveResizeParent = observeResize(\n            this._resizeObserver,\n            parentElement\n          );\n        }\n      }\n    }\n  }\n\n  /**\n   * A constant indicating that this class is a floating menu.\n   */\n  static FLOATING_MENU = true;\n\n  /**\n   * The CSS selector to find the element to put this floating menu in.\n   */\n  static get selectorContainer() {\n    return `[data-floating-menu-container],${prefix}-modal`;\n  }\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n}\n\nexport default CDSFloatingMenu;\n"],"mappings":"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"}
+{"version":3,"file":"floating-menu.js","names":[],"sources":["../../../src/components/floating-menu/floating-menu.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport Handle from '../../globals/internal/handle';\nimport {\n  FLOATING_MENU_DIRECTION,\n  FLOATING_MENU_POSITION_DIRECTION,\n} from './defs';\nimport CDSFloatingMenuTrigger from './floating-menu-trigger';\nimport { prefix } from '../../globals/settings';\n\nexport { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };\n\nexport interface Offset {\n  top: number;\n  left: number;\n}\n\nexport type MenuDirection = FLOATING_MENU_DIRECTION;\n\nexport type MenuOffset =\n  | Offset\n  | ((\n      menuBody: HTMLElement,\n      menuDirection: MenuDirection,\n      trigger?: HTMLElement | null,\n      flipped?: boolean\n    ) => Offset);\n\n/**\n * Calculates the offset for the floating menu.\n *\n * @param menuBody - The menu body element.\n * @param menuDirection - The floating menu direction.\n * @param trigger - The trigger element.\n * @param flipped - Whether the menu is flipped.\n * @returns The adjustment of the floating menu position.\n */\nexport const getMenuOffset = (\n  menuBody: HTMLElement,\n  menuDirection: MenuDirection,\n  trigger?: HTMLElement,\n  flipped?: boolean\n): Offset => {\n  const { offsetWidth: menuWidth } = menuBody;\n\n  switch (menuDirection) {\n    case FLOATING_MENU_DIRECTION.TOP:\n    case FLOATING_MENU_DIRECTION.BOTTOM: {\n      const triggerWidth = !trigger ? 0 : trigger.offsetWidth;\n      return {\n        left: (!flipped ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),\n        top: 0,\n      };\n    }\n    default:\n      return { left: 0, top: 0 };\n  }\n};\n\n/**\n * Position of floating menu, or trigger button of floating menu.\n */\nexport interface FloatingMenuPosition {\n  /**\n   * The LTR/RTL direction used for positioning floating menu.\n   */\n  direction: FLOATING_MENU_POSITION_DIRECTION;\n\n  /**\n   * The start position (Left position for LTR, right position for RTL).\n   */\n  start: number;\n\n  /**\n   * The top position.\n   */\n  top: number;\n}\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * @param elem The starting element.\n * @param selector The CSS selector.\n * @returns {Element}\n *   The closest ancestor node of the given element that matches the given selector, crossing Shadow DOM boundary.\n */\nconst closestComposed = (elem: Element, selector: string) => {\n  const found = elem.closest(selector);\n  if (found) {\n    return found;\n  }\n  const { host } = elem.getRootNode() as ShadowRoot;\n  if (host) {\n    return closestComposed(host, selector);\n  }\n  return null;\n};\n\n/**\n * Floating menu.\n */\nabstract class CDSFloatingMenu extends HostListenerMixin(\n  FocusMixin(LitElement)\n) {\n  /**\n   * The handle for observing resize of the element containing the trigger button.\n   */\n  private _hObserveResizeParent: Handle | null = null;\n\n  /**\n   * The handle for observing resize of the floating menu container.\n   */\n  private _hObserveResizeContainer: Handle | null = null;\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    const { container, open, parent, position } = this;\n    if (container && open && parent) {\n      const { top } = position;\n      this.style.top = `${top}px`;\n    }\n  });\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (!this.contains(relatedTarget as Node)) {\n      const { parent } = this;\n      if (parent && parent !== relatedTarget) {\n        parent.open = false;\n        HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method\n      }\n    }\n  };\n\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _click = () => {\n    const { parent } = this;\n    if (parent) {\n      parent.open = false;\n    }\n  };\n\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        const { parent } = this;\n        if (parent) {\n          parent.open = false;\n        }\n      }\n    }\n  };\n\n  /**\n   * The DOM element, typically a custom element in this library, launching this floating menu.\n   */\n  protected parent: CDSFloatingMenuTrigger | null = null;\n\n  /**\n   * The menu direction.\n   */\n  abstract direction: FLOATING_MENU_DIRECTION;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  abstract open: boolean;\n\n  /**\n   * `true` if the menu alignment should be flipped.\n   */\n  abstract flipped: boolean;\n\n  /**\n   * Gets the menu offset configuration (object or function).\n   * Subclasses override this to specify custom offset configs.\n   *\n   * @returns The menu offset configuration, or undefined for no offset.\n   */\n  protected getOffsetConfig(): MenuOffset | undefined {\n    return undefined;\n  }\n\n  /**\n   * Resolves the final menu offset by evaluating the offset configuration.\n   * Handles both static offset objects and dynamic offset functions.\n   *\n   * @returns The resolved offset with left and top values.\n   */\n  protected resolveOffset(): Offset {\n    const config = this.getOffsetConfig();\n\n    if (!config) {\n      return { left: 0, top: 0 };\n    }\n\n    if (typeof config === 'function') {\n      const trigger = this.parent as HTMLElement;\n      return config(this, this.direction, trigger, this.flipped);\n    }\n\n    return config;\n  }\n\n  /**\n   * The DOM element to put this menu into.\n   */\n  get container() {\n    return (\n      closestComposed(\n        this,\n        (this.constructor as typeof CDSFloatingMenu).selectorContainer\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      ) || this.ownerDocument!.body\n    );\n  }\n\n  /**\n   * The position of this floating menu.\n   */\n  get position(): FloatingMenuPosition {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const { triggerPosition } = this.parent!;\n    if (!triggerPosition) {\n      throw new TypeError('Missing information of trigger button position.');\n    }\n\n    const { container } = this;\n    const {\n      left: refLeft = 0,\n      top: refTop = 0,\n      right: refRight = 0,\n      bottom: refBottom = 0,\n    } = triggerPosition;\n    const { width, height } = this.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    const containerComputedStyle =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      container.ownerDocument!.defaultView!.getComputedStyle(container);\n    const containerPosition =\n      containerComputedStyle.getPropertyValue('position');\n    const positionDirection = containerComputedStyle.getPropertyValue(\n      'direction'\n    ) as FLOATING_MENU_POSITION_DIRECTION;\n\n    const scrollX = globalThis.scrollX ?? 0;\n    const scrollY = globalThis.scrollY ?? 0;\n    const effectiveScrollX = containerPosition !== 'static' ? 0 : scrollX;\n    const effectiveScrollY = containerPosition !== 'static' ? 0 : scrollY;\n\n    const relativeDiff = {\n      top: containerPosition !== 'static' ? containerRect.top : 0,\n      left: containerPosition !== 'static' ? containerRect.left : 0,\n    };\n\n    const refCenterHorizontal = (refLeft + refRight) / 2;\n    const refCenterVertical = (refTop + refBottom) / 2;\n\n    const offset = this.resolveOffset();\n    const { top = 0, left = 0 } = offset;\n\n    const { direction } = this;\n    if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {\n      throw new Error(`Wrong menu position direction: ${direction}`);\n    }\n\n    const positions: Record<MenuDirection, () => Offset> = {\n      [FLOATING_MENU_DIRECTION.LEFT]: () => ({\n        left: refLeft - width + effectiveScrollX - left - relativeDiff.left,\n        top:\n          refCenterVertical -\n          height / 2 +\n          effectiveScrollY +\n          top -\n          9 -\n          relativeDiff.top,\n      }),\n      [FLOATING_MENU_DIRECTION.TOP]: () => ({\n        left:\n          refCenterHorizontal -\n          width / 2 +\n          effectiveScrollX +\n          left -\n          relativeDiff.left,\n        top: refTop - height + effectiveScrollY - top - relativeDiff.top,\n      }),\n      [FLOATING_MENU_DIRECTION.RIGHT]: () => ({\n        left: refRight + effectiveScrollX + left - relativeDiff.left,\n        top:\n          refCenterVertical -\n          height / 2 +\n          effectiveScrollY +\n          top +\n          3 -\n          relativeDiff.top,\n      }),\n      [FLOATING_MENU_DIRECTION.BOTTOM]: () => ({\n        left:\n          refCenterHorizontal -\n          width / 2 +\n          effectiveScrollX +\n          left -\n          relativeDiff.left,\n        top: refBottom + effectiveScrollY + top - relativeDiff.top,\n      }),\n    };\n\n    const { left: calculatedLeft, top: calculatedTop } = positions[direction]();\n\n    return {\n      direction: positionDirection,\n      start: calculatedLeft,\n      top: calculatedTop,\n    };\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResizeContainer) {\n      this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n    }\n    if (this._hObserveResizeParent) {\n      this._hObserveResizeParent = this._hObserveResizeParent.release();\n    }\n  }\n\n  updated(changedProperties) {\n    const { container, open, parent } = this;\n    if (\n      (changedProperties.has('flipped') ||\n        changedProperties.has('direction') ||\n        changedProperties.has('open')) &&\n      open\n    ) {\n      if (!parent) {\n        this.parent = this.parentElement as CDSFloatingMenuTrigger;\n        container.appendChild(this);\n      }\n      // Note: `this.position` cannot be referenced until `this.parent` is set\n      const { start, top } = this.position;\n      this.style.left = `${start}px`;\n      this.style.right = 'auto';\n      this.style.top = `${top}px`;\n    }\n    if (changedProperties.has('open')) {\n      if (this._hObserveResizeContainer) {\n        this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n      }\n      if (this._hObserveResizeParent) {\n        this._hObserveResizeParent = this._hObserveResizeParent.release();\n      }\n      if (open) {\n        const { parentElement } = this.parent ?? {};\n        this._hObserveResizeContainer = observeResize(\n          this._resizeObserver,\n          container\n        );\n        if (parentElement) {\n          this._hObserveResizeParent = observeResize(\n            this._resizeObserver,\n            parentElement\n          );\n        }\n      }\n    }\n  }\n\n  /**\n   * A constant indicating that this class is a floating menu.\n   */\n  static FLOATING_MENU = true;\n\n  /**\n   * The CSS selector to find the element to put this floating menu in.\n   */\n  static get selectorContainer() {\n    return `[data-floating-menu-container],${prefix}-layout,${prefix}-modal`;\n  }\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n}\n\nexport default CDSFloatingMenu;\n"],"mappings":"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"}