@lion/ui 0.18.0-menu-system.2 → 0.18.0-menu-system.4

package/components/menu/src/InteractiveListMixin.js

@@ -457,7 +457,7 @@ const InteractiveListMixinImplementation = superclass =>
          * menuitemradios or -checkboxes.
          * When no role at all, we might deal with a wrapped node (for instance triggering a
          * submenu)
-         * Alternatively, when _activeMode is ['disclosure'](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html),
+         * Alternatively, when _activeMode is ['tabbable-disclosure'](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html),
          * we search for a[href]
          */
         if (node.getAttribute('role') === 'group') {

package/components/menu/src/MoreButtonMenuMixin.js

@@ -1,62 +1,31 @@
-// @ts-nocheck
-/**
- * @param {any} superclass
- */
-/** @type {any} */
-
-const styles = `
-  <style>
-    /** More button is hidden by default */
-    [data-more-button-wrapper] {
-      display: none;
-    }
-
-    [data-more-button-menu]:has([role='listitem'] [active]:focus):not(
-        :has([role='listitem'] [active][aria-expanded='true'])
-      ) {
-      overflow: visible;
-      width: auto;
-      height: auto;
-      position: absolute;
-      top: 100%;
-      background-color: var(--oj2_bg_default);
-    }
-    [data-more-button-menu],
-    [data-more-button-menu]:has([role='listitem'] [active][aria-expanded='true']) {
-      overflow: hidden;
-      width: 1px;
-      height: 1px;
-    }
-
-    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > button,
-    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > a,
-    :host([responsive-mode='desktop'])
-      [level='1']
-      > [slot='list']
-      > [data-more-button-wrapper]
-      > [role='listitem']
-      > button,
-    :host([responsive-mode='desktop'])
-      [level='1']
-      > [slot='list']
-      > [data-more-button-wrapper]
-      > [role='listitem']
-      > a {
-      white-space: nowrap;
-    }
-    /**
-    * TODO listitem rigth margin/gap is not taken at the account ATM
-    */
-    /**
-     * More button relies on the fact that the menu items do not break the line
-     * TODO is it optimal?
-     */
-    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > button,
-    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > a {
-      white-space: nowrap;
-    }    
-  </style>
-  `;
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from 'lit';
+
+const styles = css`
+  /** More button is hidden by default */
+  [data-more-button-wrapper] {
+    display: none;
+  }
+
+  [data-more-button-menu][data-open]:not(:has([role='listitem'] [aria-expanded='true'])) {
+    position: absolute;
+    overflow: visible;
+    height: auto;
+    width: auto;
+    top: 100%;
+  }
+
+  /** N.B. this is a simplified version of sr-only. when we move to overlayctrl, we should build this into overlayctrl */
+  [data-more-button-menu] {
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+  }
+
+  [role='list']:has(> [data-more-button-wrapper]) > [role='listitem'] > :is(button, a) {
+    white-space: nowrap;
+  }
+`;
 
 // @ts-ignore - JS mixin typing
 export const MoreButtonMenuMixin = superclass =>
@@ -85,7 +54,7 @@ export const MoreButtonMenuMixin = superclass =>
     // eslint-disable-next-line class-methods-use-this
     _getDeepActiveElement() {
       let host = document.activeElement || document.body;
-      while (host && host.shadowRoot && host.shadowRoot.activeElement) {
+      while (host?.shadowRoot?.activeElement) {
         host = host.shadowRoot.activeElement;
       }
       return host;
@@ -94,7 +63,7 @@ export const MoreButtonMenuMixin = superclass =>
     _createMoreButtonWrapper() {
       const moreButtonWrapper = document.createElement('div');
       const style = document.createElement('style');
-      style.textContent = styles;
+      style.textContent = styles.cssText;
       moreButtonWrapper.appendChild(style);
       moreButtonWrapper.setAttribute('data-more-button-wrapper', '');
       [...this.getMoreButtonSlotProjection().childNodes].forEach(node =>
@@ -107,32 +76,38 @@ export const MoreButtonMenuMixin = superclass =>
       const moreButtonMenu = document.createElement('div');
       moreButtonMenu.setAttribute('data-more-button-menu', '');
       moreButtonWrapper.appendChild(moreButtonMenu);
-      moreButtonMenu.setAttribute('role', 'none');
       this._listNode.appendChild(moreButtonWrapper);
 
-      const isElementDirectFocusableItemUnderMoreButtonMenu = element => {
-        const targetTagName = element?.tagName;
-        return (
-          element?.parentElement?.parentElement === moreButtonMenu &&
-          (targetTagName === 'BUTTON' || targetTagName === 'A')
-        );
-      };
+      const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {Element} */ element) =>
+        this.listItems.includes(element) && moreButtonMenu.contains(element);
 
-      moreButtonMenu.addEventListener('focusin', event => {
-        const target = event?.target;
-        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+      moreButtonMenu.addEventListener(
+        'focusin',
+        /** @type {FocusEvent} */ event => {
+          const target = /** @type {HTMLElement} */ (event?.target);
+          if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
+
+          // A user did `Shift + Tab` from L2 menu to More menu
           if (target?.getAttribute('aria-expanded') === 'true') {
+            // close L2 menu
             target?.click();
           }
           moreButton?.setAttribute('aria-expanded', 'true');
-        }
-      });
+          moreButtonMenu.setAttribute('data-open', '');
+        },
+      );
 
-      moreButtonMenu.addEventListener('focusout', event => {
-        const target = event?.target;
-        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+      moreButtonMenu.addEventListener('focusout', () => {
+        // We need this timeout for Safari/WebKit.
+        // Unfortunately, an in progress click gets canceled when overflow:hidden is applied.
+        // Although mousedown would work instead, the consuming developer should have the freedom to apply all possible interaction pattterns.
+        // Especially, we should be compatible with 'withClickInteraction'
+        setTimeout(() => {
+          if (isElementDirectFocusableItemUnderMoreButtonMenu(this._getDeepActiveElement())) return;
           moreButton?.setAttribute('aria-expanded', 'false');
-        }
+
+          moreButtonMenu.removeAttribute('data-open');
+        }, 100);
       });
 
       this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
@@ -140,22 +115,26 @@ export const MoreButtonMenuMixin = superclass =>
       moreButton?.addEventListener('mousedown', () => {
         this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
         const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
-          ':scope > [role="listitem"] > a, :scope > [role="listitem"] > button',
+          ':scope > [role="listitem"] > :is(a, button)',
         );
 
-        [...focusableFirstLevelItems]?.forEach(focusableFirstLevelItem => {
+        // @ts-ignore Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
+        for (const focusableFirstLevelItem of focusableFirstLevelItems) {
           if (this._getDeepActiveElement() === focusableFirstLevelItem) {
             this.hasMoreButtonMenuAnyFocusedFirstLevelItems = true;
           }
-        });
+        }
       });
 
       moreButton?.addEventListener('click', () => {
-        if (!this.hasMoreButtonMenuAnyFocusedFirstLevelItems) {
-          moreButtonMenu
-            .querySelector(':scope > [role="listitem"] > a, :scope > [role="listitem"] > button')
-            ?.focus();
-        }
+        if (this.hasMoreButtonMenuAnyFocusedFirstLevelItems) return;
+        /** @type {HTMLElement | null} */
+        const firstInteractiveItem = moreButtonMenu.querySelector(
+          ':scope > [role="listitem"] > :is(a, button)',
+        );
+
+        firstInteractiveItem?.focus();
+        moreButtonMenu.setAttribute('data-open', '');
       });
     }
 
@@ -232,13 +211,13 @@ export const MoreButtonMenuMixin = superclass =>
       return fragment;
     };
 
-    moveItemToMoreButtonMenuFromMainMenu() {
-      const moreButtonMenuElement = this.getMoreButtonMenu();
-      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
-      const listItem = listItems[listItems.length - 1];
-
+    /**
+     * @param {{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }} opts
+     */
+    moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem }) {
       const fragment = this.getListItemWithAdjacentNodes(listItem);
       moreButtonMenuElement.prepend(fragment);
+      // eslint-disable-next-line no-param-reassign
       listItem.style.display = '';
       this.displayMoreButton();
     }
@@ -268,9 +247,15 @@ export const MoreButtonMenuMixin = superclass =>
       return hiddenItemsCount;
     }
 
+    /**
+     * @param {number} hiddenItemsCount
+     */
     moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount) {
+      const moreButtonMenuElement = this.getMoreButtonMenu();
+      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
       for (let i = 0; i < hiddenItemsCount; i += 1) {
-        this.moveItemToMoreButtonMenuFromMainMenu();
+        const listItem = listItems[listItems.length - 1 - i];
+        this.moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem });
       }
     }
 
@@ -279,6 +264,8 @@ export const MoreButtonMenuMixin = superclass =>
         return;
       }
 
+      this.style.visibility = 'hidden';
+
       this.__resizeTimeout = setTimeout(() => {
         this.__resizeTimeout = null;
 

package/components/menu/src/MultiLevelListMixin.js

@@ -214,7 +214,7 @@ const MultiLevelListMixinImplementation = superclass =>
           if (
             this.orientation === 'horizontal' &&
             subListOfActiveItem &&
-            this._activeMode !== 'disclosure'
+            this._activeMode !== 'tabbable-disclosure'
           ) {
             this.activeItem.click();
           }

package/components/navigation-bar/src/LionNavigationBar.js

@@ -199,7 +199,7 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
           openableConfig: {
             // We want to do the absolute positioning ourselves, popper is not suited for this...
             placementMode: 'custom',
-            isOpenable: false,
+            isActivated: false,
             hidesOnOutsideClick: false,
             inheritsReferenceWidth: 'none',
           },
@@ -231,7 +231,7 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
           // We want disclosure behavior
           placementMode: 'custom',
           // N.B. we don't have an invoker...
-          isOpenable: false,
+          isActivated: false,
           inheritsReferenceWidth: 'none',
           focusContentOnOpen: true,
         },

package/custom-elements.json

@@ -2252,6 +2252,36 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-action-logger.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-action-logger",
+          "declaration": {
+            "name": "SbActionLogger",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-locale-switcher.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-locale-switcher",
+          "declaration": {
+            "name": "SbLocaleSwitcher",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "exports/define/lion-accordion.js",
@@ -3047,36 +3077,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-action-logger.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-action-logger",
-          "declaration": {
-            "name": "SbActionLogger",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-locale-switcher.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-locale-switcher",
-          "declaration": {
-            "name": "SbLocaleSwitcher",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordion/src/LionAccordion.js",
@@ -125214,6 +125214,17 @@
             {
               "kind": "method",
               "name": "moveItemToMoreButtonMenuFromMainMenu",
+              "parameters": [
+                {
+                  "name": "{ moreButtonMenuElement, listItem }"
+                },
+                {
+                  "name": "opts",
+                  "type": {
+                    "text": "{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "MoreButtonMenuMixin",
                 "module": "components/menu/src/MoreButtonMenuMixin.js"
@@ -125248,7 +125259,10 @@
               "name": "moveHiddenItemsFromMainMenuToMoreButtonMenu",
               "parameters": [
                 {
-                  "name": "hiddenItemsCount"
+                  "name": "hiddenItemsCount",
+                  "type": {
+                    "text": "number"
+                  }
                 }
               ],
               "inheritedFrom": {
@@ -129621,6 +129635,17 @@
             {
               "kind": "method",
               "name": "moveItemToMoreButtonMenuFromMainMenu",
+              "parameters": [
+                {
+                  "name": "{ moreButtonMenuElement, listItem }"
+                },
+                {
+                  "name": "opts",
+                  "type": {
+                    "text": "{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "MoreButtonMenuMixin",
                 "module": "components/menu/src/MoreButtonMenuMixin.js"
@@ -129655,7 +129680,10 @@
               "name": "moveHiddenItemsFromMainMenuToMoreButtonMenu",
               "parameters": [
                 {
-                  "name": "hiddenItemsCount"
+                  "name": "hiddenItemsCount",
+                  "type": {
+                    "text": "number"
+                  }
                 }
               ],
               "inheritedFrom": {
@@ -164090,6 +164118,17 @@
             {
               "kind": "method",
               "name": "moveItemToMoreButtonMenuFromMainMenu",
+              "parameters": [
+                {
+                  "name": "{ moreButtonMenuElement, listItem }"
+                },
+                {
+                  "name": "opts",
+                  "type": {
+                    "text": "{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "MoreButtonMenuMixin",
                 "module": "components/menu/src/MoreButtonMenuMixin.js"
@@ -164124,7 +164163,10 @@
               "name": "moveHiddenItemsFromMainMenuToMoreButtonMenu",
               "parameters": [
                 {
-                  "name": "hiddenItemsCount"
+                  "name": "hiddenItemsCount",
+                  "type": {
+                    "text": "number"
+                  }
                 }
               ],
               "inheritedFrom": {
@@ -164608,7 +164650,18 @@
             },
             {
               "kind": "method",
-              "name": "moveItemToMoreButtonMenuFromMainMenu"
+              "name": "moveItemToMoreButtonMenuFromMainMenu",
+              "parameters": [
+                {
+                  "name": "{ moreButtonMenuElement, listItem }"
+                },
+                {
+                  "name": "opts",
+                  "type": {
+                    "text": "{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -164627,7 +164680,10 @@
               "name": "moveHiddenItemsFromMainMenuToMoreButtonMenu",
               "parameters": [
                 {
-                  "name": "hiddenItemsCount"
+                  "name": "hiddenItemsCount",
+                  "type": {
+                    "text": "number"
+                  }
                 }
               ]
             },

package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts

@@ -20,11 +20,20 @@ export function MoreButtonMenuMixin(superclass: any): {
          * @param {Node} listItem
          */
         getListItemWithAdjacentNodes: (listItem: Node) => DocumentFragment;
-        moveItemToMoreButtonMenuFromMainMenu(): void;
+        /**
+         * @param {{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }} opts
+         */
+        moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem }: {
+            moreButtonMenuElement: HTMLButtonElement;
+            listItem: HTMLElement;
+        }): void;
         moveAllItemsToMainMenuFromMoreButtonMenu(): void;
         renderAllItemsInMainMenu(): void;
         hideItemsOneByOneInMainMenuUntilTheyFit(): number;
-        moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount: any): void;
+        /**
+         * @param {number} hiddenItemsCount
+         */
+        moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount: number): void;
     };
     [x: string]: any;
 };

package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreButtonMenuMixin.d.ts","sourceRoot":"","sources":["../../../../components/menu/src/MoreButtonMenuMixin.js"],"names":[],"mappings":"AA6DO;;;;;;;;;;;;;;;;;;QAyIH;;WAEG;iDADQ,IAAI;;;;;;;;EAoGhB"}
+{"version":3,"file":"MoreButtonMenuMixin.d.ts","sourceRoot":"","sources":["../../../../components/menu/src/MoreButtonMenuMixin.js"],"names":[],"mappings":"AA8BO;;;;;;;;;;;;;;;;;;QAmJH;;WAEG;iDADQ,IAAI;QAmCf;;WAEG;kFADQ;YAAE,qBAAqB,EAAE,iBAAiB,CAAC;YAAC,QAAQ,EAAE,WAAW,CAAA;SAAE;;;;QAmC9E;;WAEG;sEADQ,MAAM;;;EAoClB"}

package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts

@@ -66,7 +66,7 @@ export class LionNavigationBar extends LionNavigationBar_base {
             isBar: boolean;
             openableConfig: {
                 placementMode: string;
-                isOpenable: boolean;
+                isActivated: boolean;
                 hidesOnOutsideClick: boolean;
                 inheritsReferenceWidth: string;
                 focusContentOnOpen?: undefined;
@@ -97,7 +97,7 @@ export class LionNavigationBar extends LionNavigationBar_base {
             hasFullWidthFlyout: boolean;
             openableConfig: {
                 placementMode: string;
-                isOpenable: boolean;
+                isActivated: boolean;
                 inheritsReferenceWidth: string;
                 focusContentOnOpen: boolean;
                 hidesOnOutsideClick?: undefined;
@@ -138,7 +138,7 @@ export class LionNavigationBar extends LionNavigationBar_base {
             isBar: boolean;
             openableConfig: {
                 placementMode: string;
-                isOpenable: boolean;
+                isActivated: boolean;
                 hidesOnOutsideClick: boolean;
                 inheritsReferenceWidth: string;
                 focusContentOnOpen?: undefined;
@@ -169,7 +169,7 @@ export class LionNavigationBar extends LionNavigationBar_base {
             hasFullWidthFlyout: boolean;
             openableConfig: {
                 placementMode: string;
-                isOpenable: boolean;
+                isActivated: boolean;
                 inheritsReferenceWidth: string;
                 focusContentOnOpen: boolean;
                 hidesOnOutsideClick?: undefined;