@ds-mo/ui 3.0.1 → 3.1.1

package/src/wc/components/Menu/Menu.tsx

@@ -1,437 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
-import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';
-import { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';
-import type { MenuItemData, MenuSection } from './menu-types';
-import { isMenuGradientPickerSection } from './menu-types';
-import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
-
-/** rAF retries while the popup mounts or the anchor resolves. */
-const POSITION_RETRY_BUDGET = 8;
-
-@Component({
-  tag: 'ds-menu',
-  styleUrl: 'Menu.css',
-  scoped: true,
-})
-export class Menu {
-  @Element() el!: HTMLElement;
-
-  @Prop({ mutable: true }) open: boolean = false;
-  @Prop() items: MenuItemData[] = [];
-  @Prop() sections: MenuSection[] = [];
-  @Prop() side: MenuSide = 'bottom';
-  @Prop() align: MenuAlign = 'start';
-  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */
-  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;
-  /** Cross-axis offset — number (px) or TokoMo length. */
-  @Prop() alignOffset: number | string = 0;
-  @Prop() menuWidth: string | undefined;
-  @Prop() minWidth: string | undefined;
-  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */
-  @Prop() anchor: HTMLElement | undefined;
-  /** ID of the external trigger element for positioning */
-  @Prop() anchorId: string | undefined;
-  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */
-  @Prop() initialFocusVisible: boolean = false;
-
-  @State() private shouldRender: boolean = false;
-  @State() private closing: boolean = false;
-  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };
-  @State() private focusedIndex: number = 0;
-  @State() private positionReady: boolean = false;
-  @State() private focusRingVisible: boolean = false;
-
-  @Event() dsClose!: EventEmitter<void>;
-  @Event() dsSelect!: EventEmitter<MenuItemData>;
-  /** Emitted when a `gradient-picker` section swatch is chosen. */
-  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;
-
-  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;
-  private scrollResizeHandler: (() => void) | null = null;
-  private closeTimer: ReturnType<typeof setTimeout> | null = null;
-  private itemEls: HTMLElement[] = [];
-  private positionRetryRaf: number | null = null;
-  private listenersReady = false;
-
-  componentDidLoad() {
-    if (this.open) this.onOpenChange(true);
-  }
-
-  disconnectedCallback() {
-    this.cancelPositionRetry();
-    this.teardownListeners();
-  }
-
-  @Watch('open')
-  onOpenChange(isOpen: boolean) {
-    if (isOpen) {
-      this.teardownListeners();
-      this.shouldRender = true;
-      this.closing = false;
-      this.positionReady = false;
-      this.listenersReady = false;
-      this.focusRingVisible = this.initialFocusVisible;
-      this.listenersReady = true;
-      this.setupListeners();
-      this.schedulePositionUpdate(() => {
-        this.focusInitialItem();
-      });
-    } else if (this.shouldRender) {
-      this.cancelPositionRetry();
-      this.closing = true;
-      this.teardownListeners();
-      this.listenersReady = false;
-      this.closeTimer = setTimeout(() => {
-        this.shouldRender = false;
-        this.closing = false;
-        this.closeTimer = null;
-      }, this.closeAnimationMs);
-    }
-  }
-
-  @Watch('anchor')
-  @Watch('anchorId')
-  onAnchorChange() {
-    if (this.open) this.schedulePositionUpdate();
-  }
-
-  @Watch('side')
-  @Watch('align')
-  @Watch('sideOffset')
-  @Watch('alignOffset')
-  onPositionPropsChange() {
-    if (this.open) this.schedulePositionUpdate();
-  }
-
-  private get viewportPadPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);
-  }
-
-  private get sideOffsetPx(): number {
-    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);
-  }
-
-  private get alignOffsetPx(): number {
-    return resolveCssLengthPx(this.alignOffset, 0);
-  }
-
-  private get popupFallbackWidthPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);
-  }
-
-  private get popupFallbackHeightPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);
-  }
-
-  private get closeAnimationMs(): number {
-    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);
-  }
-
-  private get resolvedAnchor(): HTMLElement | null {
-    if (this.anchor) return this.anchor;
-    if (this.anchorId) return document.getElementById(this.anchorId);
-    return null;
-  }
-
-  private get activeSections(): MenuSection[] {
-    if (this.sections.length > 0) return this.sections;
-    if (this.items.length > 0) return [{ items: this.items }];
-    return [];
-  }
-
-  private get flatItems(): MenuItemData[] {
-    return this.activeSections.flatMap(section =>
-      isMenuGradientPickerSection(section) ? [] : section.items,
-    );
-  }
-
-  private cancelPositionRetry() {
-    if (this.positionRetryRaf !== null) {
-      cancelAnimationFrame(this.positionRetryRaf);
-      this.positionRetryRaf = null;
-    }
-  }
-
-  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */
-  private schedulePositionUpdate(onReady?: () => void) {
-    if (!this.open) return;
-
-    this.cancelPositionRetry();
-    this.positionReady = false;
-
-    let remaining = POSITION_RETRY_BUDGET;
-
-    const attempt = () => {
-      this.positionRetryRaf = null;
-      if (!this.open) return;
-
-      if (this.calculatePosition()) {
-        this.positionReady = true;
-        onReady?.();
-        return;
-      }
-
-      if (remaining > 0) {
-        remaining -= 1;
-        this.positionRetryRaf = requestAnimationFrame(attempt);
-      }
-    };
-
-    this.positionRetryRaf = requestAnimationFrame(attempt);
-  }
-
-  /** @returns `true` when anchor and popup were found and `pos` was updated. */
-  private calculatePosition(): boolean {
-    const anchorEl = this.resolvedAnchor;
-    if (!anchorEl) return false;
-    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;
-    if (!popup) return false;
-
-    this.pos = computeMenuPosition({
-      anchorRect: anchorEl.getBoundingClientRect(),
-      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,
-      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,
-      side: this.side,
-      align: this.align,
-      sideOffsetPx: this.sideOffsetPx,
-      alignOffsetPx: this.alignOffsetPx,
-      viewportPadPx: this.viewportPadPx,
-      viewportWidth: window.innerWidth,
-      viewportHeight: window.innerHeight,
-    });
-    return true;
-  }
-
-  /** Focus the selected item when present, otherwise the first enabled item. */
-  private focusInitialItem() {
-    const flat = this.flatItems;
-    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);
-    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);
-    this.focusedIndex = selectedIdx >= 0
-      ? selectedIdx
-      : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);
-
-    requestAnimationFrame(() => {
-      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');
-      btns[this.focusedIndex]?.focus();
-    });
-  }
-
-  private setupListeners() {
-    this.clickOutsideHandler = (e: MouseEvent) => {
-      const t = e.target as Node;
-      const popup = this.el.querySelector('.menu-popup');
-      const anchorEl = this.resolvedAnchor;
-      if (popup?.contains(t) || anchorEl?.contains(t)) return;
-      this.close();
-    };
-
-    this.scrollResizeHandler = () => {
-      if (this.shouldRender && !this.closing) this.calculatePosition();
-    };
-
-    document.addEventListener('mousedown', this.clickOutsideHandler, true);
-    window.addEventListener('scroll', this.scrollResizeHandler, true);
-    window.addEventListener('resize', this.scrollResizeHandler);
-  }
-
-  private teardownListeners() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('mousedown', this.clickOutsideHandler, true);
-      this.clickOutsideHandler = null;
-    }
-    if (this.scrollResizeHandler) {
-      window.removeEventListener('scroll', this.scrollResizeHandler, true);
-      window.removeEventListener('resize', this.scrollResizeHandler);
-      this.scrollResizeHandler = null;
-    }
-    if (this.closeTimer) {
-      clearTimeout(this.closeTimer);
-      this.closeTimer = null;
-    }
-  }
-
-  private close() {
-    this.resolvedAnchor?.focus();
-    this.dsClose.emit();
-    this.open = false;
-    this.onOpenChange(false);
-  }
-
-  @Listen('keydown')
-  handleKeyDown(e: KeyboardEvent) {
-    if (!this.shouldRender || this.closing) return;
-    const flat = this.flatItems;
-    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);
-    if (!enabled.length) return;
-
-    const cur = enabled.indexOf(this.focusedIndex);
-    const safe = cur < 0 ? 0 : cur;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault(); e.stopPropagation();
-        this.focusRingVisible = true;
-        this.focusedIndex = enabled[(safe + 1) % enabled.length];
-        this.focusItem(this.focusedIndex);
-        break;
-      case 'ArrowUp':
-        e.preventDefault(); e.stopPropagation();
-        this.focusRingVisible = true;
-        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];
-        this.focusItem(this.focusedIndex);
-        break;
-      case 'Home':
-        e.preventDefault(); e.stopPropagation();
-        this.focusRingVisible = true;
-        this.focusedIndex = enabled[0];
-        this.focusItem(this.focusedIndex);
-        break;
-      case 'End':
-        e.preventDefault(); e.stopPropagation();
-        this.focusRingVisible = true;
-        this.focusedIndex = enabled[enabled.length - 1];
-        this.focusItem(this.focusedIndex);
-        break;
-      case 'Escape':
-        e.preventDefault();
-        this.close();
-        break;
-      case 'Tab':
-        e.preventDefault();
-        this.close();
-        break;
-    }
-  }
-
-  private focusItem(idx: number) {
-    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');
-    btns[idx]?.focus();
-  }
-
-  private handleItemClick(item: MenuItemData) {
-    if (item.isInactive) return;
-    this.dsSelect.emit(item);
-  }
-
-  private handleGradientSelect(preset: ShellGradientPreset) {
-    this.dsGradientSelect.emit(preset);
-  }
-
-  render() {
-    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;
-
-    const sections = this.activeSections;
-    let flatIdx = 0;
-
-    const popupStyle: Record<string, string> = {
-      position: 'fixed',
-      left: '0',
-      top: '0',
-      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,
-      zIndex: '9998',
-      visibility: this.positionReady ? 'visible' : 'hidden',
-    };
-
-    if (this.menuWidth) popupStyle['width'] = this.menuWidth;
-    if (this.minWidth) popupStyle['min-width'] = this.minWidth;
-
-    return (
-      <Host style={{ display: 'contents' }}>
-        <div
-          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}
-          style={popupStyle}
-          role="menu"
-          aria-label="Menu"
-          aria-orientation="vertical"
-        >
-          {sections.map((section, si) => (
-            <div
-              key={si}
-              class={{
-                'menu-section': true,
-                'menu-section--divided': si < sections.length - 1,
-                'menu-section--gradient-picker': isMenuGradientPickerSection(section),
-              }}
-              role={section.header ? 'group' : undefined}
-              aria-label={section.header}
-            >
-              {section.header && (
-                <ds-text
-                  class="section-header ds-control--md"
-                  as="span"
-                  variant="text-body-small"
-                  emphasis
-                  color="primary"
-                  aria-hidden="true"
-                >
-                  {section.header}
-                </ds-text>
-              )}
-              {isMenuGradientPickerSection(section) ? (
-                <ds-shell-gradient-picker
-                  value={section.value}
-                  onDsChange={(e: CustomEvent<ShellGradientPreset>) => {
-                    e.stopPropagation();
-                    this.handleGradientSelect(e.detail);
-                  }}
-                />
-              ) : (
-                section.items.map(item => {
-                const idx = flatIdx++;
-                const isFocused = this.focusedIndex === idx;
-                return (
-                  <button
-                    key={idx}
-                    type="button"
-                    class={{
-                      'menu-item': true,
-                      'ds-control--md': true,
-                      'ds-focus-ring-inset': true,
-                      'ds-focus-ring--visible': isFocused && this.focusRingVisible,
-                      'ds-interaction-fill': !item.isInactive,
-                      'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,
-                      'menu-item--selected': !!item.isSelected,
-                      'ds-control-inactive': !!item.isInactive,
-                      'menu-item--destructive': !!item.isDestructive,
-                      'menu-item--focused': isFocused,
-                    }}
-                    role="menuitem"
-                    aria-current={item.isSelected ? 'true' : undefined}
-                    disabled={item.isInactive}
-                    tabIndex={isFocused ? 0 : -1}
-                    onMouseDown={() => { this.focusRingVisible = false; }}
-                    onClick={() => this.handleItemClick(item)}
-                    onFocus={() => { this.focusedIndex = idx; }}
-                  >
-                    <div class="menu-item__content ds-interaction-fill__content">
-                      <ds-text
-                        class="menu-item__label"
-                        as="span"
-                        variant="text-body-medium"
-                        emphasis={!!item.isSelected}
-                        color={item.isSelected ? 'primary' : 'secondary'}
-                      >
-                        {item.label}
-                      </ds-text>
-                      {item.subtext && (
-                        <ds-text class="menu-item__subtext" as="span" variant="text-body-small" color="secondary">
-                          {item.subtext}
-                        </ds-text>
-                      )}
-                    </div>
-                    {item.showToggle && (
-                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue, 'ds-interaction-fill__content': true }} aria-hidden="true">
-                        <div class="menu-item__toggle-thumb" />
-                      </div>
-                    )}
-                  </button>
-                );
-              }))}
-            </div>
-          ))}
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Menu/menu-placement.ts

@@ -1,26 +0,0 @@
-import { TOKEN_CSS_LENGTHS } from '../../utils/token-defaults';
-import type { MenuAlign, MenuSide } from './menu-position';
-
-/** Placement props bindable on `ds-menu` (side, align, offsets). */
-export interface MenuPlacement {
-  side: MenuSide;
-  align: MenuAlign;
-  sideOffset: number | string;
-  alignOffset: number | string;
-}
-
-/**
- * Canonical `ds-menu` placement for the **panel-nav footer user menu**.
- * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).
- *
- * Not for BarNav overflow menus — those use `side="bottom"` / `align="end"` internally.
- * `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:
- * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).
- * - `alignOffset` space-050 (4px): 4px below the footer user row.
- */
-export const PANEL_NAV_USER_MENU_PLACEMENT = {
-  side: 'right',
-  align: 'end',
-  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',
-  alignOffset: TOKEN_CSS_LENGTHS.space050,
-} as const satisfies MenuPlacement;

package/src/wc/components/Menu/menu-position.ts

@@ -1,78 +0,0 @@
-export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
-export type MenuAlign = 'start' | 'center' | 'end';
-
-export interface MenuPositionInput {
-  anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
-  popupWidth: number;
-  popupHeight: number;
-  side: MenuSide;
-  align: MenuAlign;
-  sideOffsetPx: number;
-  alignOffsetPx: number;
-  viewportPadPx: number;
-  viewportWidth: number;
-  viewportHeight: number;
-}
-
-/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
-export function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {
-  const {
-    anchorRect: a,
-    popupWidth: pw,
-    popupHeight: ph,
-    side,
-    align,
-    sideOffsetPx,
-    alignOffsetPx,
-    viewportPadPx: vpPad,
-    viewportWidth,
-    viewportHeight,
-  } = input;
-
-  let x = 0;
-  let y = 0;
-
-  switch (side) {
-    case 'top':
-      y = a.top - ph - sideOffsetPx;
-      x =
-        align === 'start'
-          ? a.left + alignOffsetPx
-          : align === 'end'
-            ? a.right - pw + alignOffsetPx
-            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;
-      break;
-    case 'bottom':
-      y = a.bottom + sideOffsetPx;
-      x =
-        align === 'start'
-          ? a.left + alignOffsetPx
-          : align === 'end'
-            ? a.right - pw + alignOffsetPx
-            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;
-      break;
-    case 'left':
-      x = a.left - pw - sideOffsetPx;
-      y =
-        align === 'start'
-          ? a.top + alignOffsetPx
-          : align === 'end'
-            ? a.bottom - ph + alignOffsetPx
-            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;
-      break;
-    case 'right':
-      x = a.right + sideOffsetPx;
-      y =
-        align === 'start'
-          ? a.top + alignOffsetPx
-          : align === 'end'
-            ? a.bottom - ph + alignOffsetPx
-            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;
-      break;
-  }
-
-  return {
-    x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),
-    y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),
-  };
-}

package/src/wc/components/Menu/menu-types.ts

@@ -1,39 +0,0 @@
-import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
-
-export type { MenuAlign, MenuSide } from './menu-position';
-export {
-  PANEL_NAV_USER_MENU_PLACEMENT,
-  type MenuPlacement,
-} from './menu-placement';
-
-export interface MenuItemData {
-  label: string;
-  value?: string;
-  subtext?: string;
-  isSelected?: boolean;
-  isInactive?: boolean;
-  isDestructive?: boolean;
-  showToggle?: boolean;
-  toggleValue?: boolean;
-}
-
-export interface MenuItemsSection {
-  header?: string;
-  items: MenuItemData[];
-}
-
-export interface MenuGradientPickerSection {
-  header?: string;
-  variant: 'gradient-picker';
-  value: ShellGradientPreset;
-}
-
-export type MenuSection = MenuItemsSection | MenuGradientPickerSection;
-
-export function isMenuGradientPickerSection(
-  section: MenuSection,
-): section is MenuGradientPickerSection {
-  return 'variant' in section && section.variant === 'gradient-picker';
-}
-
-export type { ShellGradientPreset };