@spectrum-web-components/overlay 0.13.3-express.0 → 0.14.0

package/custom-elements.json

@@ -32,6 +32,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "sync/overlay-trigger.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/ActiveOverlay.ts",
@@ -81,11 +87,11 @@
             },
             {
               "kind": "field",
-              "name": "popper",
+              "name": "childrenReady",
               "type": {
-                "text": "Instance | undefined"
+                "text": "Promise<unknown[]>"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "field",
@@ -126,7 +132,7 @@
               "kind": "field",
               "name": "theme",
               "type": {
-                "text": "{\n        color?: Color;\n        scale?: Scale;\n        lang?: string;\n        theme?: Flavor;\n    }"
+                "text": "{\n        color?: Color;\n        scale?: Scale;\n        lang?: string;\n    }"
               },
               "privacy": "public",
               "default": "{}"
@@ -164,15 +170,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "dataPopperPlacement",
-              "type": {
-                "text": "Placement | undefined"
-              },
-              "privacy": "public",
-              "attribute": "data-popper-placement"
-            },
             {
               "kind": "method",
               "name": "focus",
@@ -272,11 +269,11 @@
             },
             {
               "kind": "method",
-              "name": "updateOverlayPopperPlacement",
-              "privacy": "private",
+              "name": "openCallback",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               }
             },
@@ -339,7 +336,7 @@
                 {
                   "name": "element",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "HTMLElement & { placement: Placement }"
                   }
                 }
               ]
@@ -364,14 +361,26 @@
               }
             },
             {
-              "kind": "method",
+              "kind": "field",
+              "name": "initialHeight",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isConstrained",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
               "name": "updateOverlayPosition",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
+              "privacy": "public"
             },
             {
               "kind": "method",
@@ -513,13 +522,6 @@
                 "text": "Placement | undefined"
               },
               "fieldName": "placement"
-            },
-            {
-              "name": "data-popper-placement",
-              "type": {
-                "text": "Placement | undefined"
-              },
-              "fieldName": "dataPopperPlacement"
             }
           ],
           "superclass": {
@@ -545,6 +547,14 @@
       "kind": "javascript-module",
       "path": "src/OverlayTrigger.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "LONGPRESS_INSTRUCTIONS",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n    touch: 'Double tap and long press for additional options',\n    keyboard: 'Press Space or Alt+Down Arrow for additional options',\n    mouse: 'Click and hold for additional options',\n}"
+        },
         {
           "kind": "class",
           "description": "",
@@ -644,6 +654,23 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hasLongpressContent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "longpressDescriptor",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "clickContent",
@@ -676,6 +703,12 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_longpressId",
+              "privacy": "private",
+              "default": "`longpress-describedby-descriptor`"
+            },
             {
               "kind": "method",
               "name": "handleClose",
@@ -695,6 +728,16 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "manageLongpressDescriptor",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "closeAllOverlays",
@@ -1013,7 +1056,7 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
+            "name": "SpectrumElement",
             "package": "@spectrum-web-components/base"
           },
           "tagName": "overlay-trigger",
@@ -1021,6 +1064,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "LONGPRESS_INSTRUCTIONS",
+          "declaration": {
+            "name": "LONGPRESS_INSTRUCTIONS",
+            "module": "src/OverlayTrigger.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "OverlayTrigger",
@@ -1113,7 +1164,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n@keyframes sp-overlay-fade-in{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes sp-overlay-fade-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{display:inline-block;left:0;pointer-events:none;position:absolute;top:0;z-index:1000}:host(:focus){outline:none}#contents,sp-theme{height:100%}#contents{animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(\n--spectrum-global-animation-ease-out,ease-out\n);display:inline-block;opacity:1;pointer-events:none;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}:host([animating]) ::slotted(*){pointer-events:none}:host(:not([animating])) ::slotted(*){pointer-events:auto}#contents ::slotted(*){position:relative}\n`"
+          "default": "css`\n@keyframes sp-overlay-fade-in{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes sp-overlay-fade-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{display:inline-block;left:0;pointer-events:none;position:absolute;top:0;z-index:1000}:host(:focus){outline:none}:host([placement=none]){max-height:var(--swc-visual-viewport-height)}#contents,sp-theme{height:100%}#contents{animation-duration:var(\n--swc-test-duration,var(--spectrum-global-animation-duration-200,.16s)\n);animation-timing-function:var(\n--spectrum-global-animation-ease-out,ease-out\n);display:inline-block;opacity:1;pointer-events:none;visibility:visible}:host([actual-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75));align-items:flex-end;display:inline-flex}:host([actual-placement*=right]) #contents{--sp-overlay-from:translateX(calc(var(--spectrum-global-dimension-size-75)*-1))}:host([actual-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(var(--spectrum-global-dimension-size-75)*-1))}:host([actual-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}:host([animating]) ::slotted(*){pointer-events:none}:host(:not([animating])) ::slotted(*){pointer-events:auto}#contents ::slotted(*){position:relative}\n`"
         }
       ],
       "exports": [
@@ -1127,30 +1178,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/apply-max-size.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "applyMaxSize",
-          "type": {
-            "text": "Modifier<'applyMaxSize', Record<string, unknown>>"
-          },
-          "default": "{\n    name: 'applyMaxSize',\n    enabled: true,\n    phase: 'beforeWrite',\n    requires: ['maxSize'],\n    fn({ state }: ModifierArguments<Record<string, unknown>>): void {\n        const { height: maxHeight } = state.modifiersData.maxSize;\n        if (!appliedSizeDefaults.has(state.elements.popper)) {\n            appliedSizeDefaults.set(\n                state.elements.popper,\n                state.rects.popper.height\n            );\n        }\n        const actualHeight = appliedSizeDefaults.get(state.elements.popper);\n        const constrainHeight = maxHeight < actualHeight;\n        const appliedHeight = constrainHeight ? `${maxHeight}px` : '';\n        state.styles.popper.maxHeight = appliedHeight;\n        state.styles.popper.height = appliedHeight;\n    },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "applyMaxSize",
-          "declaration": {
-            "name": "applyMaxSize",
-            "module": "src/apply-max-size.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -2013,72 +2040,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/popper.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "createPopper"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "createPopper",
-          "declaration": {
-            "name": "createPopper",
-            "module": "src/popper.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Instance",
-          "declaration": {
-            "name": "Instance",
-            "module": "src/popper.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Placement",
-          "declaration": {
-            "name": "Placement",
-            "module": "src/popper.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "VirtualElement",
-          "declaration": {
-            "name": "VirtualElement",
-            "module": "src/popper.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "maxSize",
-          "declaration": {
-            "name": "maxSize",
-            "module": "src/popper.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "applyMaxSize",
-          "declaration": {
-            "name": "applyMaxSize",
-            "module": "src/popper.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "sync/overlay-trigger.ts",
-      "declarations": [],
-      "exports": []
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.13.3-express.0+5d9e2a2ca",
+    "version": "0.14.0",
     "publishConfig": {
         "access": "public"
     },
@@ -48,12 +48,11 @@
         "lit-html"
     ],
     "dependencies": {
-        "@popperjs/core": "^2.11.0",
-        "@spectrum-web-components/action-button": "^0.7.3-express.0+5d9e2a2ca",
-        "@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
-        "@spectrum-web-components/shared": "^0.13.3-express.0+5d9e2a2ca",
-        "@spectrum-web-components/theme": "^0.9.3-express.0+5d9e2a2ca",
-        "popper-max-size-modifier": "^0.2.0",
+        "@floating-ui/dom": "^0.2.0",
+        "@spectrum-web-components/action-button": "^0.7.3",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/shared": "^0.13.3",
+        "@spectrum-web-components/theme": "^0.9.3",
         "tslib": "^2.0.0"
     },
     "types": "./src/index.d.ts",
@@ -64,5 +63,5 @@
         "./sync/overlay-trigger.js",
         "./stories/overlay-story-components.js"
     ],
-    "gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
+    "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
 }

package/src/ActiveOverlay.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
-import { Color, Flavor, Scale } from '@spectrum-web-components/theme';
+import { Color, Scale } from '@spectrum-web-components/theme';
 import { OverlayOpenDetail, Placement, TriggerInteractions } from './overlay-types.js';
-import { VirtualTrigger } from './VirtualTrigger.js';
+import type { VirtualTrigger } from './VirtualTrigger.js';
 export interface PositionResult {
     arrowOffsetLeft: number;
     arrowOffsetTop: number;
@@ -10,7 +10,7 @@ export interface PositionResult {
     positionLeft: number;
     positionTop: number;
 }
-declare type OverlayStateType = 'idle' | 'active' | 'visible' | 'hiding' | 'dispose' | 'disposed';
+declare type OverlayStateType = 'idle' | 'active' | 'hiding' | 'dispose' | 'disposed';
 declare type ContentAnimation = 'sp-overlay-fade-in' | 'sp-overlay-fade-out';
 /**
  * @element active-overlay
@@ -22,7 +22,7 @@ export declare class ActiveOverlay extends SpectrumElement {
     overlayContentTip?: HTMLElement;
     trigger: HTMLElement;
     virtualTrigger?: VirtualTrigger;
-    private popper?;
+    protected childrenReady: Promise<unknown[]>;
     _state: OverlayStateType;
     get state(): OverlayStateType;
     set state(state: OverlayStateType);
@@ -32,18 +32,11 @@ export declare class ActiveOverlay extends SpectrumElement {
         color?: Color;
         scale?: Scale;
         lang?: string;
-        theme?: Flavor;
     };
     receivesFocus?: 'auto';
     tabbingAway: boolean;
     private originalPlacement?;
     private restoreContent?;
-    /**
-     * @prop Used by the popper library to indicate where the overlay was
-     *       actually rendered. Popper may switch which side an overlay
-     *       is rendered on to fit it on the screen
-     */
-    dataPopperPlacement?: Placement;
     focus(): void;
     private get hasTheme();
     offset: number;
@@ -56,21 +49,21 @@ export declare class ActiveOverlay extends SpectrumElement {
     get hasModalRoot(): boolean;
     feature(): void;
     obscure(nextOverlayInteraction: TriggerInteractions): ActiveOverlay | undefined;
-    firstUpdated(changedProperties: PropertyValues): void;
-    private updateOverlayPopperPlacement;
-    updated(changedProperties: PropertyValues): void;
+    firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    openCallback(): Promise<void>;
     private open;
     private extractDetail;
     dispose(): void;
     private stealOverlayContent;
     private willNotifyClosed;
     private returnOverlayContent;
-    updateOverlayPosition(): Promise<void>;
+    private initialHeight;
+    private isConstrained;
+    updateOverlayPosition: () => Promise<void>;
     hide(animated?: boolean): Promise<void>;
     private schedulePositionUpdate;
     private onSlotChange;
     handleInlineTriggerKeydown: (event: KeyboardEvent) => void;
-    connectedCallback(): void;
     applyContentAnimation(animation: ContentAnimation): Promise<boolean>;
     renderTheme(content: TemplateResult): TemplateResult;
     render(): TemplateResult;
@@ -78,5 +71,6 @@ export declare class ActiveOverlay extends SpectrumElement {
     private stealOverlayContentPromise;
     private stealOverlayContentResolver;
     protected getUpdateComplete(): Promise<boolean>;
+    disconnectedCallback(): void;
 }
 export {};