@kubex/zinc 1.1.185 → 2.0.0

package/src/components/menu-item/menu-item.test.ts

@@ -1,8 +1,19 @@
 import '../../../dist/zn.min.js';
 import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnConfirm from '../confirm/confirm.component';
 import type ZnDropdown from '../dropdown/dropdown.component';
+import type ZnMenuItem from './menu-item.component';
 
 describe('<zn-menu-item>', () => {
+  it('should show its shortcut as a key cap only when set', async () => {
+    const el = await fixture<ZnMenuItem>(html`<zn-menu-item>Send email</zn-menu-item>`);
+    expect(el.shadowRoot!.querySelector('[part="shortcut"]')).to.be.null;
+
+    el.shortcut = 'E';
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('[part="shortcut"]')!.textContent).to.equal('E');
+  });
+
   it('should render a component', async () => {
     const el = await fixture(html` <zn-menu-item></zn-menu-item> `);
 
@@ -45,4 +56,24 @@ describe('<zn-menu-item>', () => {
       expect(dropdown.open).to.be.false;
     });
   });
+
+  it('closes its dropdown once the confirm dialog closes', async () => {
+    const dropdown = await fixture<ZnDropdown>(html`
+      <zn-dropdown>
+        <zn-button slot="trigger">Open</zn-button>
+        <zn-menu>
+          <zn-confirm trigger="delete-item" content="Delete?"></zn-confirm>
+          <zn-menu-item id="delete-item" confirm>Delete</zn-menu-item>
+        </zn-menu>
+      </zn-dropdown>`);
+    await dropdown.show();
+    const confirm = dropdown.querySelector<ZnConfirm>('zn-confirm')!;
+
+    dropdown.querySelector('zn-menu-item')!.click();
+    await dropdown.updateComplete;
+    expect(dropdown.open).to.be.true;
+
+    confirm.hide();
+    await waitUntil(() => !dropdown.open);
+  });
 });

package/src/components/menu-item/submenu-controller.ts

@@ -6,14 +6,18 @@ import type {ReactiveController, ReactiveControllerHost} from 'lit';
 import type ZnMenuItem from '../menu-item';
 import type ZnPopup from '../popup';
 
+const SUBMENU_GAP = 4;
+
 /** A reactive controller to manage the registration of event listeners for submenus. */
 export class SubmenuController implements ReactiveController {
+  private static readonly openSubmenus = new WeakMap<Element, SubmenuController>();
   private host: ReactiveControllerHost & ZnMenuItem;
   private popupRef: Ref<ZnPopup> = createRef();
   private enableSubmenuTimer = -1;
   private isConnected = false;
   private isPopupConnected = false;
   private skidding = 0;
+  private distance = 0;
   private readonly hasSlotController: HasSlotController;
   private readonly localize: LocalizeController;
   private readonly submenuOpenDelay = 100;
@@ -35,13 +39,13 @@ export class SubmenuController implements ReactiveController {
   }
 
   hostDisconnected() {
+    this.disableSubmenu();
     this.removeListeners();
   }
 
   hostUpdated() {
     if (this.hasSlotController.test('submenu') && !this.host.disabled) {
       this.addListeners();
-      this.updateSkidding();
     } else {
       this.removeListeners();
     }
@@ -210,16 +214,6 @@ export class SubmenuController implements ReactiveController {
 
     const {left, top, width, height} = menu.getBoundingClientRect();
 
-    const parentMenu = this.host.parentElement;
-    const parentPanel = parentMenu?.shadowRoot?.querySelector('.menu') ?? parentMenu;
-    if (parentMenu && parentPanel) {
-      const parent = parentPanel.getBoundingClientRect();
-      menu.toggleAttribute('data-extends-below', top + height > parent.bottom + 1);
-      // Flags the parent's corners the submenu covers, so the parent squares them off.
-      parentMenu.toggleAttribute('data-submenu-top', top <= parent.top + 1);
-      parentMenu.toggleAttribute('data-submenu-bottom', top + height >= parent.bottom - 1);
-    }
-
     this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
     this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
     this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);
@@ -227,21 +221,31 @@ export class SubmenuController implements ReactiveController {
   };
 
   private setSubmenuState(state: boolean) {
+    const parent = this.host.parentElement;
+    if (state && parent) {
+      const sibling = SubmenuController.openSubmenus.get(parent);
+      if (sibling && sibling !== this) sibling.disableSubmenu();
+      SubmenuController.openSubmenus.set(parent, this);
+      // Measured on open, not per update: reading styles forces a style recalc (costly in Safari on large pages).
+      this.updateSkidding();
+    }
     if (this.popupRef.value) {
       if (this.popupRef.value.active !== state) {
         this.popupRef.value.active = state;
         this.host.requestUpdate();
       }
     }
-    if (!state) {
-      this.host.parentElement?.removeAttribute('data-submenu-top');
-      this.host.parentElement?.removeAttribute('data-submenu-bottom');
+    if (!state && parent && SubmenuController.openSubmenus.get(parent) === this) {
+      SubmenuController.openSubmenus.delete(parent);
     }
   }
 
   // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
   // newly opened menu.
   private enableSubmenu(delay = true) {
+    // Mouseover fires again when moving between a row's icon and label.
+    // Keep one timer so focusout can cancel every pending opening.
+    clearTimeout(this.enableSubmenuTimer);
     if (delay) {
       this.enableSubmenuTimer = window.setTimeout(() => {
         this.setSubmenuState(true);
@@ -256,7 +260,8 @@ export class SubmenuController implements ReactiveController {
     this.setSubmenuState(false);
   }
 
-  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  // Aligns the submenu's first item with the activating item, and places the submenu SUBMENU_GAP outside the
+  // parent menu's edge rather than the item's.
   private updateSkidding(): void {
     // zn-menu's padding and border sit on its inner `.menu`, not the host.
     const menu = this.host.parentElement;
@@ -264,6 +269,10 @@ export class SubmenuController implements ReactiveController {
     if (!panel) return;
     const style = getComputedStyle(panel);
     this.skidding = -(parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth) + parseFloat(style.marginTop));
+    const isLtr = this.localize.dir() === 'ltr';
+    this.distance = parseFloat(isLtr ? style.paddingRight : style.paddingLeft)
+      + parseFloat(isLtr ? style.borderRightWidth : style.borderLeftWidth)
+      + SUBMENU_GAP;
   }
 
   isExpanded(): boolean {
@@ -287,6 +296,7 @@ export class SubmenuController implements ReactiveController {
         flip
         flip-fallback-strategy="best-fit"
         skidding="${this.skidding}"
+        distance="${this.distance}"
         strategy="fixed"
       >
         <slot name="submenu"></slot>

package/src/components/menu-label/index.ts

@@ -0,0 +1,12 @@
+import ZnMenuLabel from './menu-label.component';
+
+export * from './menu-label.component';
+export default ZnMenuLabel;
+
+ZnMenuLabel.define('zn-menu-label');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-menu-label': ZnMenuLabel;
+  }
+}

package/src/components/menu-label/menu-label.component.ts

@@ -0,0 +1,30 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './menu-label.scss';
+
+/**
+ * @summary A heading for a group of items in a `zn-menu`. It is skipped by the menu's keyboard navigation.
+ * @documentation https://zinc.style/components/menu
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The label text.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --zn-menu-label-padding - Space around the label.
+ * @cssproperty --zn-menu-label-color - The label's text colour.
+ */
+export default class ZnMenuLabel extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'presentation');
+  }
+
+  render() {
+    return html`<div part="base" class="menu-label"><slot></slot></div>`;
+  }
+}

package/src/components/menu-label/menu-label.scss

@@ -0,0 +1,18 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  user-select: none;
+}
+
+.menu-label {
+  // Inline padding matches a dropdown zn-menu-item's, so the label lines up with the items' content
+  padding: var(--zn-menu-label-padding, 6px var(--zn-spacing-large) 3px);
+  font-size: 11px;
+  font-weight: var(--zn-font-weight-semibold);
+  line-height: 1;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--zn-menu-label-color, var(--zn-color-neutral-500));
+}

package/src/components/nav-item/index.ts

@@ -0,0 +1,12 @@
+import ZnNavItem from './nav-item.component';
+
+export * from './nav-item.component';
+export default ZnNavItem;
+
+ZnNavItem.define('zn-nav-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-nav-item': ZnNavItem;
+  }
+}

package/src/components/nav-item/nav-item.component.ts

@@ -0,0 +1,83 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from '../icon';
+
+import styles from './nav-item.scss';
+
+/**
+ * @summary A selectable row in a `zn-nav-list`, with an optional description and count.
+ * @documentation https://zinc.style/components/nav-list
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The item's label.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The label, truncated with an ellipsis.
+ * @csspart description - The description shown below the label.
+ * @csspart count - The count shown at the end of the row.
+ * @csspart handle - The drag handle, shown when the list is sortable.
+ */
+export default class ZnNavItem extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-icon': ZnIcon,
+  };
+
+  /** A count shown at the end of the row, such as the number of entries in the group. */
+  @property() count: string;
+
+  /** A line of detail shown below the label. */
+  @property() description: string;
+
+  private readonly _classObserver = new MutationObserver(() => this._syncSelected());
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'tab');
+    if (!this.hasAttribute('tabindex')) {
+      this.tabIndex = -1;
+    }
+    this.addEventListener('keydown', this._handleKeyDown);
+    // zn-tabs marks the active trigger with a class rather than an attribute
+    this._classObserver.observe(this, {attributes: true, attributeFilter: ['class']});
+    this._syncSelected();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this._handleKeyDown);
+    this._classObserver.disconnect();
+  }
+
+  get selected() {
+    return this.classList.contains('zn-tb-active');
+  }
+
+  private _syncSelected() {
+    this.setAttribute('aria-selected', String(this.selected));
+  }
+
+  private _handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.click();
+    }
+  };
+
+  render() {
+    return html`
+      <div part="base" class="nav-item">
+        <zn-icon part="handle" class="nav-item__handle" src="drag_indicator" size="16" aria-hidden="true"></zn-icon>
+        <span class="nav-item__text">
+          <span part="label" class="nav-item__label"><slot></slot></span>
+          ${this.description ? html`<span part="description" class="nav-item__description">${this.description}</span>` : ''}
+        </span>
+        ${this.count !== undefined && this.count !== null && this.count !== ''
+          ? html`<span part="count" class="nav-item__count">${this.count}</span>`
+          : ''}
+      </div>
+    `;
+  }
+}

package/src/components/nav-item/nav-item.scss

@@ -0,0 +1,128 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  border-radius: var(--zn-border-radius-medium, var(--zn-border-radius));
+  cursor: pointer;
+  user-select: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(:focus-visible) {
+  outline: 2px solid rgb(var(--zn-primary));
+  outline-offset: -2px;
+}
+
+.nav-item {
+  @include wc.text-style(menu-link);
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-nav-item-padding, 7px 10px);
+  border-radius: inherit;
+}
+
+:host(:hover) .nav-item {
+  background: var(--zn-color-neutral-50);
+}
+
+:host(.zn-tb-active) .nav-item {
+  background: rgba(var(--zn-primary), 0.08);
+  color: rgb(var(--zn-primary));
+  font-weight: var(--zn-font-weight-semibold);
+}
+
+.nav-item__text {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.nav-item__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-item__description {
+  font-size: var(--zn-font-size-small);
+  font-weight: var(--zn-font-weight-normal);
+  color: var(--zn-color-neutral-500);
+}
+
+.nav-item__count {
+  flex: 0 0 auto;
+  font-size: var(--zn-font-size-small);
+  color: var(--zn-color-neutral-500);
+}
+
+// Set by a zn-nav-list with divide
+:host([divide]) {
+  border-radius: 0;
+}
+
+:host([divide]) .nav-item {
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-nav-item-padding, var(--zn-spacing-small) var(--zn-spacing-medium));
+}
+
+:host([divide]) .nav-item__label {
+  font-weight: var(--zn-font-weight-semibold);
+}
+
+:host([divide].zn-tb-active) .nav-item {
+  background: rgba(var(--zn-primary), 0.06);
+  box-shadow: inset 3px 0 0 rgb(var(--zn-primary));
+  color: inherit;
+}
+
+:host([divide]) .nav-item__count {
+  padding: 1px var(--zn-spacing-x-small);
+  border-radius: 999px;
+  background: var(--zn-color-neutral-100);
+  font-weight: var(--zn-font-weight-semibold);
+  color: var(--zn-color-neutral-700);
+}
+
+.nav-item__handle {
+  display: none;
+  flex: 0 0 auto;
+  margin-inline-start: -4px;
+  color: var(--zn-color-neutral-400);
+  cursor: grab;
+}
+
+// Set by a sortable zn-nav-list
+:host([sortable]) {
+  // Its own layer, or Chrome draws the drag image over a white box that shows at the rounded corners
+  transform: translate(0, 0);
+  // Opaque, or the drag image shows the page through the row
+  background: rgb(var(--zn-panel));
+  cursor: grab;
+}
+
+:host([sortable]) .nav-item__handle {
+  display: inline-flex;
+}
+
+// The dragged item's slot, matching a zn-priority-list placeholder
+:host([sortable][dragging]) .nav-item,
+:host([sortable][dragging]:hover) .nav-item {
+  outline: 1px dashed var(--zn-color-primary-400);
+  outline-offset: -1px;
+  background: rgba(var(--zn-primary), 0.06);
+  box-shadow: none;
+
+  > * {
+    opacity: 0;
+  }
+}
+
+// Set while dragging to the radius of any card corner the row sits in
+:host([divide][sortable][dragging]) .nav-item {
+  border-radius: var(--zn-nav-item-drag-radius, 0);
+}

package/src/components/nav-list/index.ts

@@ -0,0 +1,12 @@
+import ZnNavList from './nav-list.component';
+
+export * from './nav-list.component';
+export default ZnNavList;
+
+ZnNavList.define('zn-nav-list');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-nav-list': ZnNavList;
+  }
+}