@spectrum-web-components/menu 0.36.0 → 0.38.0

package/src/MenuGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["MenuGroup.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Menu } from './Menu.js';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private static instances = 0;\n\n    private headerId!: string;\n\n    public constructor() {\n        super();\n        MenuGroup.instances += 1;\n        this.headerId = `sp-menu-group-label-${MenuGroup.instances}`;\n    }\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    protected override get ownRole(): string {\n        switch (this.selects) {\n            case 'multiple':\n            case 'single':\n            case 'inherit':\n                return 'group';\n            default:\n                return 'menu';\n        }\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            <sp-menu ignore>\n                <slot></slot>\n            </sp-menu>\n        `;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,MAEG,gCACP,OACI,sBAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,QAAAC,MAAY,YAErB,MAAO,2CACP,OAAOC,MAAqB,sBAQrB,MAAMC,EAAN,MAAMA,UAAkBF,CAAK,CASzB,aAAc,CACjB,MAAM,EACNE,EAAU,WAAa,EACvB,KAAK,SAAW,uBAAuBA,EAAU,SAAS,EAC9D,CAZA,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQD,CAAe,CAC5C,CAqBA,IAAuB,SAAkB,CACrC,OAAQ,KAAK,QAAS,CAClB,IAAK,WACL,IAAK,SACL,IAAK,UACD,MAAO,QACX,QACI,MAAO,MACf,CACJ,CAEU,aAAoB,CAC1B,MAAME,EAAgB,KAAK,eAAe,OACpC,KAAK,eAAe,CAAC,EACrB,OACN,GAAIA,IAAkB,KAAK,cAIvB,GAHI,KAAK,eAAiB,KAAK,cAAc,KAAO,KAAK,UACrD,KAAK,cAAc,gBAAgB,IAAI,EAEvCA,EAAe,CACf,MAAMC,EAAWD,EAAc,IAAM,KAAK,SACrCA,EAAc,KACfA,EAAc,GAAKC,GAEvB,KAAK,aAAa,kBAAmBA,CAAQ,CACjD,MACI,KAAK,gBAAgB,iBAAiB,EAG9C,KAAK,cAAgBD,CACzB,CAEgB,QAAyB,CACrC,OAAON;AAAA,2CAC4B,CAAC,KAAK,aAAa;AAAA,kDACZ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,SAM9D,CACJ,EAlEaK,EAKM,UAAY,EAcnBG,EAAA,CAJPP,EAAmB,CAChB,KAAM,SACN,QAAS,EACb,CAAC,GAlBQI,EAmBD,8BAGAG,EAAA,CADPN,EAAM,GArBEG,EAsBD,6BAtBL,WAAM,UAANA",
-  "names": ["html", "queryAssignedNodes", "state", "Menu", "menuGroupStyles", "_MenuGroup", "headerElement", "headerId", "__decorateClass"]
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Menu } from './Menu.js';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private headerId = '';\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    protected override get ownRole(): string {\n        switch (this.selects) {\n            case 'multiple':\n            case 'single':\n            case 'inherit':\n                return 'group';\n            default:\n                return 'menu';\n        }\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                this.headerId =\n                    this.headerId ||\n                    `sp-menu-group-label-${crypto.randomUUID().slice(0, 8)}`;\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>\n        `;\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,MAEG,gCACP,OACI,sBAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,QAAAC,MAAY,YAErB,MAAO,2CACP,OAAOC,MAAqB,sBAQrB,aAAM,kBAAkBD,CAAK,CAA7B,kCAKH,KAAQ,SAAW,GAJnB,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAe,CAC5C,CAaA,IAAuB,SAAkB,CACrC,OAAQ,KAAK,QAAS,CAClB,IAAK,WACL,IAAK,SACL,IAAK,UACD,MAAO,QACX,QACI,MAAO,MACf,CACJ,CAEU,aAAoB,CAC1B,MAAMC,EAAgB,KAAK,eAAe,OACpC,KAAK,eAAe,CAAC,EACrB,OACN,GAAIA,IAAkB,KAAK,cAIvB,GAHI,KAAK,eAAiB,KAAK,cAAc,KAAO,KAAK,UACrD,KAAK,cAAc,gBAAgB,IAAI,EAEvCA,EAAe,CACf,KAAK,SACD,KAAK,UACL,uBAAuB,OAAO,WAAW,EAAE,MAAM,EAAG,CAAC,CAAC,GAC1D,MAAMC,EAAWD,EAAc,IAAM,KAAK,SACrCA,EAAc,KACfA,EAAc,GAAKC,GAEvB,KAAK,aAAa,kBAAmBA,CAAQ,CACjD,MACI,KAAK,gBAAgB,iBAAiB,EAG9C,KAAK,cAAgBD,CACzB,CAEgB,QAAyB,CACrC,OAAOL;AAAA,2CAC4B,CAAC,KAAK,aAAa;AAAA,kDACZ,KAAK,WAAW;AAAA;AAAA,8BAEpC,KAAK,mBAAmB,CAAC;AAAA,SAEnD,CACJ,CAhDYO,EAAA,CAJPN,EAAmB,CAChB,KAAM,SACN,QAAS,EACb,CAAC,GAVQ,UAWD,8BAGAM,EAAA,CADPL,EAAM,GAbE,UAcD",
+  "names": ["html", "queryAssignedNodes", "state", "Menu", "menuGroupStyles", "headerElement", "headerId", "__decorateClass"]
 }

package/src/MenuItem.d.ts

@@ -3,23 +3,18 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import type { Menu } from './Menu.js';
-export declare class MenuItemRemovedEvent extends Event {
-    constructor();
-    get item(): MenuItem;
-    _item: MenuItem;
-    focused: boolean;
-    reset(item: MenuItem): void;
-}
+import type { Overlay } from '@spectrum-web-components/overlay';
+declare type MenuCascadeItem = {
+    hadFocusRoot: boolean;
+    ancestorWithSelects?: HTMLElement;
+};
 export declare class MenuItemAddedOrUpdatedEvent extends Event {
-    constructor();
-    set focusRoot(root: Menu | undefined);
-    set selectionRoot(root: Menu);
+    constructor(item: MenuItem);
+    clear(item: MenuItem): void;
+    menuCascade: WeakMap<HTMLElement, MenuCascadeItem>;
     get item(): MenuItem;
-    _item: MenuItem;
-    set currentAncestorWithSelects(ancestor: Menu | undefined);
-    get currentAncestorWithSelects(): Menu | undefined;
-    _currentAncestorWithSelects?: Menu;
-    reset(item: MenuItem): void;
+    private _item;
+    currentAncestorWithSelects?: Menu;
 }
 export declare type MenuItemChildren = {
     icon: Element[];
@@ -39,16 +34,16 @@ declare const MenuItem_base: typeof Focusable & {
  * @element sp-menu-item
  *
  * @slot - text content to display within the Menu Item
+ * @slot description - description to be placed below the label of the Menu Item
  * @slot icon - icon element to be placed at the start of the Menu Item
  * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
  * @slot submenu - content placed in a submenu
  * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships
- * @fires sp-menu-item-removed - announces when removed from the DOM so the parent menu can remove ownership and update selected state
  */
 export declare class MenuItem extends MenuItem_base {
     static get styles(): CSSResultArray;
-    static instanceCount: number;
-    private isInSubmenu;
+    abortControllerPointer: AbortController;
+    abortControllerSubmenu: AbortController;
     active: boolean;
     focused: boolean;
     selected: boolean;
@@ -60,8 +55,11 @@ export declare class MenuItem extends MenuItem_base {
      */
     get itemText(): string;
     hasSubmenu: boolean;
+    contentSlot: HTMLSlotElement;
+    iconSlot: HTMLSlotElement;
     noWrap: boolean;
     private anchorElement;
+    overlayElement: Overlay;
     get focusElement(): HTMLElement;
     protected get hasIcon(): boolean;
     get itemChildren(): MenuItemChildren;
@@ -73,6 +71,7 @@ export declare class MenuItem extends MenuItem_base {
     private proxyFocus;
     private shouldProxyClick;
     protected breakItemChildrenCache(): void;
+    protected renderSubmenu(): TemplateResult;
     protected render(): TemplateResult;
     protected manageSubmenu(event: Event & {
         target: HTMLSlotElement;
@@ -81,10 +80,12 @@ export declare class MenuItem extends MenuItem_base {
     private handlePointerdown;
     protected firstUpdated(changes: PropertyValues): void;
     protected closeOverlaysForRoot(): void;
-    closeOverlay?: () => Promise<void>;
-    protected handleSubmenuClick(): void;
+    protected handleSubmenuClick(event: Event): void;
+    protected handleSubmenuFocus(): void;
+    protected handleBeforetoggle: (event: Event) => void;
     protected handlePointerenter(): void;
     protected leaveTimeout?: ReturnType<typeof setTimeout>;
+    protected recentlyLeftChild: boolean;
     protected handlePointerleave(): void;
     /**
      * When there is a `change` event in the submenu for this item
@@ -93,8 +94,11 @@ export declare class MenuItem extends MenuItem_base {
      * and the root of the tree to have their selection changes and
      * be closed.
      */
-    protected handleSubmenuChange: () => void;
-    protected handleSubmenuPointerenter: () => void;
+    protected handleSubmenuChange(event: Event): void;
+    protected handleSubmenuPointerenter(): void;
+    protected handleSubmenuPointerleave(): Promise<void>;
+    protected handleSubmenuOpen(event: Event): void;
+    protected cleanup(): void;
     openOverlay(): Promise<void>;
     updateAriaSelected(): void;
     setRole(role: string): void;
@@ -102,16 +106,19 @@ export declare class MenuItem extends MenuItem_base {
     connectedCallback(): void;
     _parentElement: HTMLElement;
     disconnectedCallback(): void;
+    private willDispatchUpdate;
     triggerUpdate(): Promise<void>;
+    dispatchUpdate(): void;
     menuData: {
         focusRoot?: Menu;
+        parentMenu?: Menu;
         selectionRoot?: Menu;
+        cleanupSteps: ((item: MenuItem) => void)[];
     };
 }
 declare global {
     interface GlobalEventHandlersEventMap {
         'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;
-        'sp-menu-item-removed': MenuItemRemovedEvent;
     }
 }
 export {};