@lion/ui 0.18.0-menu-system.6 → 0.18.0-menu-system.7

package/components/menu/src/InteractiveListMixin.js

@@ -1,10 +1,9 @@
 /* eslint-disable max-classes-per-file */
 /* eslint-disable import/no-extraneous-dependencies */
 import { html, css, LitElement } from 'lit';
-import { SlotMixin, DisabledMixin } from '@lion/ui/core.js';
+import { SlotMixin, DisabledMixin, uuid } from '@lion/ui/core.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { MoreButtonMenuMixin } from './MoreButtonMenuMixin.js';
-import { uuid } from './utils/uuid.js';
 import { isInView } from './utils/isInView.js';
 import {
   isDisabled,
@@ -167,7 +166,7 @@ const InteractiveListMixinImplementation = superclass =>
         multipleChoice: { type: Boolean, attribute: 'multiple-choice' },
         // TODO: align with name of open-ui
         selectionFollowsFocus: { type: Boolean, attribute: 'selection-follows-focus' },
-        // TODO: align with name of open-ui => "wrap" in focsugroup
+        // TODO: align with name of open-ui => "wrap" in focusgroup
         rotateKeyboardNavigation: { type: Boolean, attribute: 'rotate-keyboard-navigation' },
         // TODO: align with name of open-ui
         noPreselect: { type: Boolean, attribute: 'no-preselect' },
@@ -556,7 +555,7 @@ const InteractiveListMixinImplementation = superclass =>
       // having hideVisually as hide mechanism (opening on focus, closing on blur).
       // N.B. this._listNode has `display:flex`. This means we need to add `text-wrap: nowrap;`
       // to avoid elems going over two lines, or give them a max-height based on measuring the height of one item.
-      // 2. N.B. hideVisually needs to be implementd in OverlayController.
+      // 2. N.B. hideVisually needs to be implemented in OverlayController.
       // 3. when the more menu opens a next level, MultiLevelListMixin will be applied to the host as well.
       // That means it knows when a child menu is open. If _subListMap of one of the items is open, we should hide more menu like this:
       // https://jsfiddle.net/a4ocktfp/19/
@@ -588,7 +587,7 @@ const InteractiveListMixinImplementation = superclass =>
         }
       });
 
-      this.__syncCurrentPageWithLocationHref(window.location);
+      this._syncCurrentPageWithLocationHref(window.location);
     }
 
     /**
@@ -817,12 +816,12 @@ const InteractiveListMixinImplementation = superclass =>
     /**
      * @param {Location} location
      */
-    __syncCurrentPageWithLocationHref(location) {
+    _syncCurrentPageWithLocationHref(location) {
       this.listItems.forEach(item => {
         if (/** @type {HTMLAnchorElement} */ (item).href) {
-          const pathname = location.pathname.endsWith('/')
-            ? location.pathname.substring(0, location.pathname.length - 1)
-            : location.pathname;
+          const pathname = location.href.endsWith('/')
+            ? location.href.substring(0, location.href.length - 1)
+            : location.href;
           if (pathname === /** @type {HTMLAnchorElement} */ (item).href) {
             setChecked(item);
           } else {
@@ -834,7 +833,7 @@ const InteractiveListMixinImplementation = superclass =>
 
     /** @protected */
     _onPopState = () => {
-      this.__syncCurrentPageWithLocationHref(document.location);
+      this._syncCurrentPageWithLocationHref(document.location);
     };
   };
 // @ts-ignore

package/components/menu/src/LionMenu.js

@@ -187,7 +187,7 @@ export class LionMenu extends MultiLevelListMixin(LitElement) {
     }
 
     if (!multiple) {
-      // Uncheck all
+      // Uncheck all within group
       listItemsWithinGroup.forEach(listItem => {
         setChecked(listItem, true);
       });

package/components/menu/src/LionTree.js

@@ -22,7 +22,7 @@ export class LionTree extends MultiLevelListMixin(LitElement) {
     super.updated(changedProperties);
 
     if (changedProperties.has('level')) {
-      if (this.level > 0) {
+      if (this.level > 1) {
         this._listNode.setAttribute('role', 'group');
       }
       this.__setAriaLevelForListItems();

package/components/menu/src/MultiLevelListMixin.js

@@ -3,10 +3,12 @@ import { html } from 'lit';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 // import { DisclosureMixin } from '@lion/ui/collapsible.js';
 import { InteractiveListMixin } from './InteractiveListMixin.js';
-
+import { isChecked, setChecked } from './utils/listItemInteractions.js';
 /**
  * @typedef {import('./InteractiveListMixin.js').LionItem} LionItem
  * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListHost} InteractiveList
+ * @typedef {typeof import('../../overlays/types/OverlayMixinTypes.js').OverlayHost} OverlayHost
+ * @typedef {import('./LionMenuOverlay.js').LionMenuOverlay} LionMenuOverlay
  */
 
 /**
@@ -37,8 +39,13 @@ const MultiLevelListMixinImplementation = superclass =>
      * @configure DisclosureMixin
      */
     get _invokerNode() {
-      // @ts-ignore - accessing static method and super property
-      return this.constructor._getFocusableInvokerEl(this.invokerNode) || super._invokerNode;
+      const ctor = /** @type {OverlayHost} */ (this.constructor);
+      if (ctor._getFocusableInvokerEl && this.invokerNode) {
+        // @ts-ignore - accessing static method and super property
+        return ctor._getFocusableInvokerEl(this.invokerNode);
+      }
+      // @ts-ignore
+      return super._invokerNode;
     }
 
     /**
@@ -84,6 +91,7 @@ const MultiLevelListMixinImplementation = superclass =>
       this.noPreselect = true;
       /**
        * @configure InteractiveListMixin
+       * @type {'activedescendant'|'roving-tabindex'|'tabbable-disclosure'}
        */
       this._activeMode = 'roving-tabindex';
       /**
@@ -184,12 +192,12 @@ const MultiLevelListMixinImplementation = superclass =>
      * @param {*} ev
      */
     _onListKeyDown(ev) {
-      const targetFromsubList = Array.from(this._subListMap).find(
+      const targetFromSubList = Array.from(this._subListMap).find(
         // @ts-ignore - contains method on InteractiveListHost
         ([, s]) => s === ev.target || s.contains(ev.target),
       );
 
-      if (targetFromsubList) {
+      if (targetFromSubList) {
         return;
       }
 
@@ -228,22 +236,51 @@ const MultiLevelListMixinImplementation = superclass =>
           if (this.orientation === 'horizontal' && parentListOfActiveItem) {
             // @ts-ignore - close method
             this.close();
-            // @ts-ignore - _onOverlayShow method
-            parentListOfActiveItem._onOverlayShow();
+            if (
+              /** @type {InteractiveList & LionMenuOverlay} */ (parentListOfActiveItem)
+                ._onOverlayShow
+            ) {
+              // @ts-ignore - _onOverlayShow method
+              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
+            }
           }
           break;
         case 'ArrowLeft':
           if (this.orientation === 'vertical' && parentListOfActiveItem) {
             // @ts-ignore - close method
             this.close();
-            // @ts-ignore - _onOverlayShow method
-            parentListOfActiveItem._onOverlayShow();
+            if (
+              /** @type {InteractiveList & LionMenuOverlay} */ (parentListOfActiveItem)
+                ._onOverlayShow
+            ) {
+              // @ts-ignore - _onOverlayShow method
+              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
+            }
           }
           break;
         /* no default */
       }
     }
 
+    /**
+     * @param {Location} location
+     */
+    _syncCurrentPageWithLocationHref(location) {
+      super._syncCurrentPageWithLocationHref(location);
+
+      this._subListMap.forEach(subList => {
+        subList.listItems.forEach(
+          /** @param {LionItem|HTMLElement} item */ item => {
+            // @ts-ignore
+            if (isChecked(item) && subList._invokerNode) {
+              // @ts-ignore
+              setChecked(subList._invokerNode);
+            }
+          },
+        );
+      });
+    }
+
     // /**
     //  * @enhance DisclosureMixin
     //  */

package/components/menu/test/InteractiveListMixin.test.js

@@ -0,0 +1,3 @@
+import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+
+runInteractiveListMixinSuite();

package/components/menu/test/MoreButtonMenuMixin.test.js

@@ -0,0 +1,4 @@
+import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
+import '@lion/ui/define/lion-menu.js';
+
+runMoreButtonMenuMixinSuite({ tagString: 'lion-menu' });

package/components/menu/test/MultiLevelListMixin.test.js

@@ -0,0 +1,3 @@
+import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+
+runMultiLevelListMixinSuite();

package/components/menu/test/lion-menu-hybrid.test.js

@@ -0,0 +1,3 @@
+import { runLionMenuHybridSuite } from '../test-suites/LionMenuHybrid.suite.js';
+
+runLionMenuHybridSuite();

package/components/menu/test/lion-menu.test.js

@@ -1,6 +1,11 @@
 import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
+import { runLionMenuSuite } from '../test-suites/LionMenu.suite.js';
 import '@lion/ui/define/lion-menu.js';
-import { runLionMenuHybridSuite } from '../test-suites/LionMenuHybrid.suite.js';
+import '@lion/ui/define/lion-menu-overlay.js';
 
 runInteractiveListMixinSuite({ tagString: 'lion-menu' });
-runLionMenuHybridSuite();
+runMultiLevelListMixinSuite({ tagString: 'lion-menu', tagChildString: 'lion-menu-overlay' });
+runMoreButtonMenuMixinSuite({ tagString: 'lion-menu' });
+runLionMenuSuite({ tagString: 'lion-menu' });

package/components/menu/test/lion-toolbar.test.js

@@ -0,0 +1,8 @@
+// import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+// import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
+import '@lion/ui/define/lion-toolbar.js';
+
+// runInteractiveListMixinSuite({ tagString: 'lion-toolbar' }); // 1 test fails
+// runMultiLevelListMixinSuite({ tagString: 'lion-toolbar', tagChildString: 'lion-toolbar' }); // hangs
+runMoreButtonMenuMixinSuite({ tagString: 'lion-toolbar' });

package/components/menu/test/lion-tree.test.js

@@ -0,0 +1,7 @@
+import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+// import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+import '@lion/ui/define/lion-tree.js';
+
+runInteractiveListMixinSuite({ tagString: 'lion-tree' });
+// TODO: fix failing tests. LionTree is missing a close function, should this be coming from the DisclosureMixin?
+// runMultiLevelListMixinSuite({ tagString: 'lion-tree', tagChildString: 'lion-tree' });

package/components/menu/test-helpers/mimicKeyPress.js

@@ -0,0 +1,9 @@
+/**
+ * @param {HTMLElement} el
+ * @param {string} key
+ * @param {string} code
+ */
+export function mimicKeyPress(el, key, code = '') {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
+  el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
+}