[ { "id": "oj-c.Popup", "name": "Popup", "memberof": "oj-c", "kind": "class", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "ojcomponent": true, "isvcomponent": true, "since": "17.0.0", "longname": "oj-c.Popup", "pack": "oj-c", "classdesc": "

\n JET Popup\n \n

\n

Description: A popup temporarily 'pops up' content in the foreground.

\n
\n\n<oj-c-popup>\n   Popup content\n</oj-c-popup>\n\n<oj-c-popup opened=\"true\">\n   Opened Popup\n</oj-c-popup>\n\n<oj-c-popup placement=\"bottom\">\n   Popup positioned at the bottom of the anchor\n</oj-c-popup>\n\nMain section content\n
\n\n

A popup temporarily 'pops up' content in the foreground.

\n\n

\n Keyboard End User Information\n \n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Focus within PopupTab or Shift + TabNavigate the content of the popup.
F6Move focus to the launcher for a popup with modeless modality.
EscClose the open popup.
Popup LauncherF6Move focus to the first tab stop within the open popup. If there is not a tab stop\n within the content, focus is established on the popup.
\n\n

\n Accessibility\n \n

\n\n

For WAI-ARIA compliance, JET automatically adds\nrole=\"dialog\" to the popup root dom element, if not\nalready specificed. This is not a component property but rather the standard html\nrole attribute. Depending on how the\npopup is used in the page, the page developer should choose from the following:\n

\n

\n

\n The page developer should consider adding the aria-haspopup=\"dialog\" to the launcher element.\n

\n

\nDepending on the aria role and popup content, the page developer may also need to\nset the aria-labelledby and (optionally)\naria-describedby attributes on the oj-popup\nelement in order to make the popup and its content accessible.\n

\n\n

One point often overlooked is making the gestures that launch a popup accessible.\n There are no constraints to what events a page developer might choose to trigger opening a\n popup. The choice should be accessible for screen reader users. Page\n developers should take care when using mouse events to trigger opening of a popup.\n This is especially important if the content of the popup can't be derived from other\n visible areas on the page. In cases that mouseover, mouseout, mouseenter, mouseleave and\n hover events are used to launch popups, there needs to be a keyboard functional equivalency.\n

\n\n

\n Reparenting\n \n

\n

\n When popups are open, they will be reparented in the document and reparented back when\n closed. When open, the location of the popup within the document will be in context of\n how it's used. Popups open from other popups will be relocated in the document into the\n nearest parent popup's layer. The popups layer defines its z-index weight \"stacking\n context\". The ojPopup's layer is marked with the \"oj-popup-layer\" style.\n The context of opening is defined by the launcher argument passed to the open method. If\n not open from another popup, the popup will be reparented to a container in the document\n body. Popups of the same type are assigned the same z-index values. The layering between\n peer popups reflect the opening order.\n

\n

\n There are known caveats with this design. However, these scenarios are considered \"bad use\"\n based on our JET popup strategy.\n

\n
    \n
  1. Events raised within the popup will not bubble up to the popup's original ancestors.\n Instead, listeners for popup events should be applied to either the popup's root\n element, or the document.
    2. \n
  2. Likewise, developers should not use CSS descendant selectors, or similar logic, that\n assumes that the popup will remain a child of its original parent.
    3. \n
  3. Popups containing iframes are problematic. The iframe elements \"may\" fire a HTTP GET\n request for its src attribute each time the iframe is reparented in the document.
    4. \n
  4. If an iframe is added to the popup's content, it must not be the first or last tab stop\n within the popup or keyboard and VoiceOver navigation will not remain within the popup.
    5. \n
  5. In some browsers, reparenting a popup that contains elements having overflow, will cause\n these overflow elements to reset their scrollTop.
    6. \n
\n\n

\n Event Handling\n \n

\n\n\n

\n Reading direction\n \n

\n\n

Setting the reading direction (LTR or RTL) is supported by setting the \"dir\" attribute on the\n<html> element of the page. As with any JET component, in the unusual case that the reading direction\nis changed post-init, the page must be reloaded.", "scope": "static", "tagWithoutBrackets": "oj-c-popup", "tagWithBrackets": "", "domInterface": "CPopupElement", "ojPageTitle": "<oj-c-popup>", "camelCaseName": "Popup", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CPopupElement extends JetElement" }, "ojsignature": [ { "target": "Type", "value": "interface CPopupElement extends JetElement" } ], "tsdeprecated": [ { "type": "supersedes", "since": "19.0.0", "value": [ "oj-popup" ] } ], "extension": { "catalog": { "category": "Layout & Nav" }, "vbdt": { "module": "oj-c/popup" }, "oracle": { "icon": "oj-ux-ico-popup", "uxSpecs": [ "popup" ] } }, "ojmodule": "popup" }, { "id": "oj-c.Popup#opened", "name": "opened", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#opened", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": false, "ojdisplayname": "Opened", "ojwriteback": true, "description": "Specifies whether the Popup is open.", "defaultvalue": false }, { "id": "oj-c.Popup#launcher", "name": "launcher", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#launcher", "scope": "instance", "type": { "names": [ "string|Element" ] }, "optional": true, "ojdisplayname": "Launcher", "ojshortdesc": "Specifies Popup's launcher. After Popup closes, it returns focus to the launcher.", "description": "Specifies Popup's launcher. After Popup closes, it returns focus to launcher.", "tstype": [ { "target": "Type", "value": "string|Element", "jsdocOverride": true } ] }, { "id": "oj-c.Popup#anchor", "name": "anchor", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#anchor", "scope": "instance", "type": { "names": [ "string|Element|object" ] }, "optional": true, "ojdisplayname": "Anchor", "description": "Specifies Popup's anchor. Popup is placed relative to its anchor.", "tstype": [ { "target": "Type", "value": "string|Element|oj-c.Popup.Coords", "jsdocOverride": true } ] }, { "id": "oj-c.Popup#placement", "name": "placement", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#placement", "scope": "instance", "type": { "names": [ "\"center\"", "\"end\"", "\"start\"", "\"top\"", "\"bottom\"", "\"top-start\"", "\"top-end\"", "\"top-start-corner\"", "\"top-end-corner\"", "\"start-top\"", "\"start-bottom\"", "\"start-top-corner\"", "\"start-bottom-corner\"", "\"bottom-start\"", "\"bottom-end\"", "\"bottom-start-corner\"", "\"bottom-end-corner\"", "\"end-top\"", "\"end-bottom\"", "\"end-top-corner\"", "\"end-bottom-corner\"" ] }, "optional": true, "ojdisplayname": "Placement", "ojshortdesc": "Specifies the location the popup will appear relative to another element.", "description": "

Specifies the location the popup will appear relative to another element.

\n\n

If not specified, the default popup position is \"center\" on desktop and \"bottom-start\" on phone.

" }, { "id": "oj-c.Popup#modality", "name": "modality", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#modality", "scope": "instance", "type": { "names": [ "\"modal\"", "\"modeless\"" ] }, "optional": true, "ojdisplayname": "Modality", "description": "Specifies modality of the Popup.", "defaultvalue": "'modeless'" }, { "id": "oj-c.Popup#autoDismiss", "name": "autoDismiss", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#autoDismiss", "scope": "instance", "type": { "names": [ "\"none\"", "\"focusLoss\"" ] }, "optional": true, "ojdisplayname": "Auto Dismiss", "description": "Specifies the auto dismissal behavior.", "defaultvalue": "'focusLoss'" }, { "id": "oj-c.Popup#tail", "name": "tail", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#tail", "scope": "instance", "type": { "names": [ "\"none\"", "\"simple\"" ] }, "optional": true, "ojdisplayname": "Tail", "description": "Specifies Popup's tail. Simple tail is an arrow pointing to Popup's anchor.", "defaultvalue": "'none'" }, { "id": "oj-c.Popup#variant", "name": "variant", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#variant", "scope": "instance", "type": { "names": [ "\"standard\"", "\"unstyled\"" ] }, "optional": true, "ojdisplayname": "Variant", "ojshortdesc": "Specifies Popup's style variant.", "description": "Specifies Popup's style variant. If unstyled is set, standard styles are not applied.", "defaultvalue": "'standard'" }, { "id": "oj-c.Popup#initialFocus", "name": "initialFocus", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#initialFocus", "scope": "instance", "type": { "names": [ "\"auto\"", "\"none\"", "\"popup\"", "\"firstFocusable\"" ] }, "optional": true, "ojdisplayname": "Initial Focus", "description": "Specifies if the Popup sets focus to its content when initially open.", "defaultvalue": "'auto'" }, { "id": "oj-c.Popup#offset", "name": "offset", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#offset", "scope": "instance", "type": { "names": [ "object" ] }, "optional": true, "ojdisplayname": "Offset", "ojshortdesc": "Specifies displacement of the Popup from the anchor element along the specified axes.", "description": "Specifies displacement of the Popup from the anchor element along the specified axes.\nThe offset object consists of x and y properties.\n\nThe x property represents horizontal diviation.\nThe y property represents vertical deviation.", "tstype": [ { "target": "Type", "value": "oj-c.Popup.Offset", "jsdocOverride": true } ] }, { "id": "oj-c.Popup#collision", "name": "collision", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#collision", "scope": "instance", "type": { "names": [ "\"none\"", "\"flip\"", "\"fit\"", "\"flipfit\"", "\"flipcenter\"" ] }, "optional": true, "ojdisplayname": "Collision", "description": "Specifies rule for alternate placement alignment.", "defaultvalue": "'fit'" }, { "id": "oj-c.Popup#width", "name": "width", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#width", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Width", "description": "Specifies width of the Popup content." }, { "id": "oj-c.Popup#minWidth", "name": "minWidth", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#minWidth", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Min Width", "description": "Specifies minWidth of the Popup content." }, { "id": "oj-c.Popup#maxWidth", "name": "maxWidth", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#maxWidth", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Max Width", "description": "Specifies maxWidth of the Popup content.", "defaultvalue": "'calc(100vw - 3rem)'" }, { "id": "oj-c.Popup#height", "name": "height", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#height", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Height", "description": "Specifies height of the Popup content." }, { "id": "oj-c.Popup#minHeight", "name": "minHeight", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#minHeight", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Min Height", "description": "Specifies minHeight of the Popup content." }, { "id": "oj-c.Popup#maxHeight", "name": "maxHeight", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#maxHeight", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Max Height", "description": "Specifies maxHeight of the Popup content.", "defaultvalue": "'calc(100vh - 3rem)'" }, { "id": "oj-c.Popup#backgroundColor", "name": "backgroundColor", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#backgroundColor", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Background Color", "description": "Specifies background color of the Popup." }, { "id": "oj-c.Popup#setProperty", "name": "setProperty", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "function", "longname": "oj-c.Popup#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.Popup#getProperty", "name": "getProperty", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "function", "longname": "oj-c.Popup#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.Popup#setProperties", "name": "setProperties", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "function", "longname": "oj-c.Popup#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.Popup#event:ojOpen", "name": "ojOpen", "kind": "event", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup#event:ojOpen", "scope": "instance", "ojdisplayname": "ojOpen", "description": "Triggered immediately after the popup opens." }, { "id": "oj-c.Popup#event:ojBeforeClose", "name": "ojBeforeClose", "kind": "event", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup#event:ojBeforeClose", "scope": "instance", "ojshortdesc": "Triggered immediately before the popup closes.", "ojdisplayname": "ojBeforeClose", "description": "

Note: The event detail contains the following properties: [oj-c.Popup.OnCloseDetail]{@link oj-c.Popup.OnCloseDetail}

Triggered immediately before the popup closes.\nCall event.preventDefault() in the event listener to veto the event synchronously, which prevents the popup from closing.\nCall event.detail.accept(Promise.reject()); in the event listener to veto the event asynchronously, which prevents the popup from closing." }, { "id": "oj-c.Popup#event:ojClose", "name": "ojClose", "kind": "event", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup#event:ojClose", "scope": "instance", "ojdisplayname": "ojClose", "description": "Triggered immediately after the popup closes." }, { "id": "oj-c.Popup#event:ojFocus", "name": "ojFocus", "kind": "event", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup#event:ojFocus", "scope": "instance", "ojdisplayname": "ojFocus", "description": "Triggered immediately after the popup receives focus." }, { "id": "oj-c.Popup#Default", "name": "Default", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "kind": "member", "longname": "oj-c.Popup#Default", "scope": "instance", "ojdisplayname": "default", "description": "The default slot is the content of the Popup.", "ojshortdesc": "The default slot is the content of the Popup.", "ojchild": true }, { "id": "oj-c.Popup.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.Popup.keyboardDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Focus within PopupTab or Shift + TabNavigate the content of the popup.
F6Move focus to the launcher for a popup with modeless modality.
EscClose the open popup.
Popup LauncherF6Move focus to the first tab stop within the open popup. If there is not a tab stop\n within the content, focus is established on the popup.
", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "ojfragment": true }, { "id": "oj-c.Popup.Coords", "name": "Coords", "kind": "typedef", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup.Coords", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "x", "optional": false, "type": { "names": [ "number" ] } }, { "name": "y", "optional": false, "type": { "names": [ "number" ] } }, { "name": "contextElement", "optional": true, "type": { "names": [ "Element" ] }, "tstype": [ { "target": "Type", "value": "Element", "jsdocOverride": true, "for": "contextElement" } ] } ] }, { "id": "oj-c.Popup.Offset", "name": "Offset", "kind": "typedef", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup.Offset", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "x", "optional": true, "type": { "names": [ "number" ] } }, { "name": "y", "optional": true, "type": { "names": [ "number" ] } } ] }, { "id": "oj-c.Popup.OnCloseDetail", "name": "OnCloseDetail", "kind": "typedef", "memberof": "oj-c.Popup", "meta": { "filename": "popup.tsx", "path": "web/components/oj-c/popup" }, "longname": "oj-c.Popup.OnCloseDetail", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "reason", "description": "reason for closing the popup", "optional": false, "type": { "names": [ "\"outsideClick\"", "\"escapeKey\"", "\"closeSkipLink\"" ] }, "ojshortdesc": "reason for closing the popup" }, { "name": "detail", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "{ reason: 'escapeKey' | 'outsideClick' | 'closeSkipLink'; }", "jsdocOverride": true, "for": "detail" } ], "tsdeprecated": [ { "type": "deprecated", "since": "20.0.0", "description": "use sibling 'reason' property instead" } ] }, { "name": "accept", "tstype": [ { "target": "Type", "value": "(acceptPromise:Promise) => void", "for": "accept", "jsdocOverride": true } ], "description": "This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.", "type": { "names": [ "function" ] } } ] } ]