Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Overlays: API Table

class: OverlayController

Fields

NamePrivacyTypeDefaultDescriptionInherited From
invokerpublicHTMLElement | undefinedThe invokerNode
contentpublicHTMLDialogElement | HTMLDivElementThe contentWrapperNode
placementModepublic'global' | 'local' | undefinedDetermines the connection point in DOM (body vs next to invoker).
invokerNodepublicHTMLElement | undefinedThe interactive element (usually a button) invoking the dialog or tooltip
referenceNodepublicHTMLElementThe element that is used to position the overlay content relative to. Usually, this is the same element as invokerNode. Should only be provided when invokerNode should not be positioned against.
contentNodepublicHTMLElementThe most important element: the overlay itself
contentWrapperNodepublicHTMLElementThe wrapper element of contentNode, used to supply inline positioning styles. When a Popper arrow is needed, it acts as parent of the arrow node. Will be automatically created for global and non projected contentNodes. Required when used in shadow dom mode or when Popper arrow is supplied. Essential for allowing webcomponents to style their projected contentNodes
backdropNodepublicHTMLElementThe element that is placed behind the contentNode. When not provided and `hasBackdrop` is true, a backdropNode will be automatically created
elementToFocusAfterHidepublicHTMLElementThe element that should be called `.focus()` on after dialog closes
hasBackdroppublicbooleanWhether it should have a backdrop (currently exclusive to globalOverlayController)
isBlockingpublicbooleanHides other overlays when mutiple are opened (currently exclusive to globalOverlayController)
preventsScrollpublicbooleanHides other overlays when mutiple are opened (currently exclusive to globalOverlayController)
trapsKeyboardFocuspublicbooleanRotates tab, implicitly set when 'isModal'
hidesOnEscpublicbooleanHides the overlay when pressing [ esc ]
hidesOnOutsideClickpublicbooleanHides the overlay when clicking next to it, exluding invoker
hidesOnOutsideEscpublicbooleanHides the overlay when pressing esc, even when contentNode has no focus
inheritsReferenceWidthpublic'max' | 'full' | 'min' | 'none' | undefinedWill align contentNode with referenceNode (invokerNode by default) for local overlays. Usually needed for dropdowns. 'max' will prevent contentNode from exceeding width of referenceNode, 'min' guarantees that contentNode will be at least as wide as referenceNode. 'full' will make sure that the invoker width always is the same.
handlesAccessibilitypublicbooleanFor non `isTooltip`: - sets aria-expanded="true/false" and aria-haspopup="true" on invokerNode - sets aria-controls on invokerNode - returns focus to invokerNode on hide - sets focus to overlay content(?) For `isTooltip`: - sets role="tooltip" and aria-labelledby/aria-describedby on the content
isTooltippublicbooleanHas a totally different interaction- and accessibility pattern from all other overlays. Will behave as role="tooltip" element instead of a role="dialog" element
invokerRelationpublic'label' | 'description'| undefinedBy default, the tooltip content is a 'description' for the invoker (uses aria-describedby). Setting this property to 'label' makes the content function as a label (via aria-labelledby)
popperConfigpublicPopperOptionsPopper configuration. Will be used when placementMode is 'local'
viewportConfigpublicViewportConfigViewport configuration. Will be used when placementMode is 'global'
visibilityTriggerFunctionpublic
_referenceNodeprotectedHTMLElement | undefined
elevationpublicnumber
isShownpublic
hasActiveBackdroppublic
hasActiveTrapsKeyboardFocuspublic
managerpublicmanager
configpublicOverlayConfig{}
_defaultConfigprotectedOverlayConfig`{
  placementMode: undefined,
  contentNode: config.contentNode,
  contentWrapperNode: config.contentWrapperNode,
  invokerNode: config.invokerNode,
  backdropNode: config.backdropNode,
  referenceNode: undefined,
  elementToFocusAfterHide: config.invokerNode,
  inheritsReferenceWidth: 'none',
  hasBackdrop: false,
  isBlocking: false,
  preventsScroll: false,
  trapsKeyboardFocus: false,
  hidesOnEsc: false,
  hidesOnOutsideEsc: false,
  hidesOnOutsideClick: false,
  isTooltip: false,
  invokerRelation: 'description',
  visibilityTriggerFunction: undefined,
  handlesAccessibility: false,
  popperConfig: {
    placement: 'top',
    strategy: 'fixed',
    modifiers: [
      {
        name: 'preventOverflow',
        enabled: true,
        options: {
          boundariesElement: 'viewport',
          padding: 8, // viewport-margin for shifting/sliding
        },
      },
      {
        name: 'flip',
        options: {
          boundariesElement: 'viewport',
          padding: 16, // viewport-margin for flipping
        },
      },
      {
        name: 'offset',
        enabled: true,
        options: {
          offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement)
        },
      },
      {
        name: 'arrow',
        enabled: false,
      },
    ],
  },
  viewportConfig: {
    placement: 'center',
  },
  zIndex: 9999,
}` |                                                                                                                                                                                                                                                                                                                                                                                           |                |

| _contentId | protected | | `overlay-content--${Math.random().toString(36).slice(2, 10)}` | | |

Methods

NamePrivacyDescriptionParametersReturnInherited From
updateConfigpublicAllows to dynamically change the overlay configuration. Needed in case the presentation of the overlay changes depending on screen size. Note that this method is the only allowed way to update a configuration of an OverlayController instance.cfgToAdd: OverlayConfig
_initprotected
_handleZIndexprotectedDisplay local overlays on top of elements with no z-index that appear later in the DOM{ phase }, config: { phase: OverlayPhase }
showpublicelementToFocusAfterHide: HTMLElement
_handlePositionprotected{ phase }, config: { phase: OverlayPhase }
_keepBodySizeprotected{ phase }, config: { phase: OverlayPhase }
hidepublic
transitionHidepublicMethod to be overriden by subclassershideConfig: {backdropNode:HTMLElement, contentNode:HTMLElement}
_transitionHideprotected{ backdropNode, contentNode }, hideConfig: {backdropNode:HTMLElement, contentNode:HTMLElement}
transitionShowpublicTo be overridden by subclassersshowConfig: {backdropNode:HTMLElement; contentNode:HTMLElement}
_transitionShowprotectedshowConfig: {backdropNode:HTMLElement; contentNode:HTMLElement}
_restoreFocusprotected
togglepublic
_handleFeaturesprotectedAll features are handled here.{ phase }, config: { phase: OverlayPhase }
_handleVisibilityTriggersprotected{ phase }, config: { phase: OverlayPhase }
_handlePreventsScrollprotected{ phase }, config: { phase: OverlayPhase }
_handleBlockingprotected{ phase }, config: { phase: OverlayPhase }
_handleBackdropprotectedSets up backdrop on the given overlay. If there was a backdrop on another element it is removed. Otherwise this is the first time displaying a backdrop, so a animation-in animation is played.{ phase }, config: { animation?: boolean, phase: OverlayPhase }
_handleTrapsKeyboardFocusprotected{ phase }, config: { phase: OverlayPhase }
enableTrapsKeyboardFocuspublic
disableTrapsKeyboardFocuspublic{ findNewTrap = true }
_handleHidesOnEscprotected{ phase }, config: { phase: OverlayPhase }
_handleHidesOnOutsideEscprotected{ phase }, config: { phase: OverlayPhase }
_handleInheritsReferenceWidthprotected
_handleHidesOnOutsideClickprotected{ phase }, config: { phase: OverlayPhase }
_handleAccessibilityprotected{ phase }, config: { phase: OverlayPhase }
teardownpublic
_hasDisabledInvokerprotected

Events

NameTypeDescriptionInherited From
showEvent
hideEvent

class: OverlaysManager

Fields

NamePrivacyTypeDefaultDescriptionInherited From
listpublicno setter as .list is intended to be read-only You can use .add or .remove to modify it
shownListpublicno setter as .shownList is intended to be read-only You can use .show or .hide on individual controllers to modify
siblingsInertpublicFeatures right now only for Global Overlay Manager

Methods

NamePrivacyDescriptionParametersReturnInherited From
addpublicRegisters an overlay controller.ctrlToAdd: OverlayControllerOverlayController
removepublicctrlToRemove: OverlayController
showpublicctrlToShow: OverlayController
hidepublicctrlToHide: any
teardownpublic
disableTrapsKeyboardFocusForAllpublic
informTrapsKeyboardFocusGotEnabledpublicplacementMode: 'local' | 'global' | undefined
informTrapsKeyboardFocusGotDisabledpublic{ disabledCtrl, findNewTrap = true }, options: { disabledCtrl?:OverlayController, findNewTrap?:boolean }
requestToPreventScrollpublicPreventsScroll
requestToEnableScrollpublic
requestToShowOnlypublicBlockingblockingCtrl: OverlayController
retractRequestToShowOnlypublicblockingCtrl: OverlayController