@ds-mo/ui 3.0.1 → 3.1.0

package/src/wc/components/Tooltip/Tooltip.tsx

@@ -1,413 +0,0 @@
-import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
-import {
-  CONTROL_TEXT_VARIANT,
-  resolveCssLengthPx,
-  resolveCssTimeMs,
-  TOKEN_CSS_LENGTHS,
-  TOKEN_DEFAULTS,
-} from '../../utils';
-import type { TextVariant } from '../Text/text-types';
-// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.
-import '../Text/Text';
-
-export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
-export type TooltipAlign = 'start' | 'center' | 'end';
-export type TooltipSize = 'md' | 'sm' | 'xs';
-
-const FALLBACK_HEIGHT: Record<TooltipSize, string> = {
-  md: TOKEN_DEFAULTS.size400,
-  sm: TOKEN_DEFAULTS.size300,
-  xs: TOKEN_DEFAULTS.size200,
-};
-
-let lastDismissedAt = 0;
-let tooltipIdCounter = 0;
-/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */
-let activeTooltip: Tooltip | null = null;
-
-type DsTextEl = HTMLElement & {
-  as: string;
-  variant: TextVariant;
-  emphasis: boolean;
-  color: string;
-  wrap: string;
-};
-
-function createDsText(opts: {
-  variant: TextVariant;
-  emphasis?: boolean;
-  color?: string;
-  wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';
-  text: string;
-}): DsTextEl {
-  const el = document.createElement('ds-text') as DsTextEl;
-  el.as = 'span';
-  el.variant = opts.variant;
-  el.emphasis = opts.emphasis ?? false;
-  el.color = opts.color ?? 'inherit';
-  if (opts.wrap) el.wrap = opts.wrap;
-  el.textContent = opts.text;
-  return el;
-}
-
-/**
- * Control-density label styles for portaled ds-text.
- * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`
- * overwrites imperative className — so these must be inline to stick.
- */
-function styleTooltipLabel(el: HTMLElement) {
-  el.style.flexShrink = '0';
-  el.style.minWidth = 'max-content';
-  el.style.maxWidth = 'none';
-  el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';
-  el.style.color = 'var(--color-foreground-primary)';
-}
-
-/**
- * Imperative body portal for the popup.
- * Stencil must not own the portaled node — moving a VDOM child to `document.body`
- * causes recreate → re-portal → @State loops that freeze the page.
- */
-@Component({
-  tag: 'ds-tooltip',
-  styleUrl: 'Tooltip.css',
-  scoped: true,
-})
-export class Tooltip {
-  @Element() el!: HTMLElement;
-
-  /**
-   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay
-   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).
-   */
-  @Prop() label!: string;
-
-  /** Control density (height, padding, type). */
-  @Prop() size: TooltipSize = 'md';
-
-  @Prop() side: TooltipSide = 'top';
-  @Prop() align: TooltipAlign = 'center';
-  /** Gap between anchor and tooltip — number (px) or TokoMo length. */
-  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;
-  /** Cross-axis offset — number (px) or TokoMo length. */
-  @Prop() alignOffset: number | string = 0;
-  /**
-   * Hover show delay before the tooltip appears.
-   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)
-   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the
-   * initial hover/focus show only — after a recent dismiss, reopen is instant.
-   * Prefer the default; override only for denser chrome or rare/destructive actions.
-   */
-  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;
-  @Prop() shortcutKey: string | undefined;
-  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';
-
-  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;
-  private delayTimer: ReturnType<typeof setTimeout> | null = null;
-  private closeTimer: ReturnType<typeof setTimeout> | null = null;
-  private anchor: HTMLElement | null = null;
-  private popupEl: HTMLElement | null = null;
-  private positionObserver: ResizeObserver | null = null;
-  private skipEnterAnimation = false;
-  private isOpen = false;
-  private mouseEnterHandler: () => void = () => this.show();
-  private mouseLeaveHandler: () => void = () => this.hide();
-  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */
-  private focusHandler: () => void = () => this.show();
-  private blurHandler: (e: FocusEvent) => void = (e) => {
-    const next = e.relatedTarget as Node | null;
-    if (next && this.anchor?.contains(next)) return;
-    this.hide();
-  };
-
-  componentDidLoad() {
-    this.bindAnchor();
-  }
-
-  disconnectedCallback() {
-    if (activeTooltip === this) activeTooltip = null;
-    this.unbindAnchor();
-    this.clearTimers();
-    this.destroyPopup();
-  }
-
-  @Watch('label')
-  @Watch('size')
-  @Watch('side')
-  @Watch('align')
-  @Watch('sideOffset')
-  @Watch('alignOffset')
-  @Watch('shortcutKey')
-  @Watch('shortcutKeyPosition')
-  onContentOrPositionChange() {
-    if (!this.label?.trim()) {
-      if (this.isOpen || this.popupEl) this.hideInstant();
-      return;
-    }
-    if (!this.popupEl || !this.isOpen) return;
-    this.renderPopupContent();
-    this.schedulePosition();
-  }
-
-  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 hoverDelayMs(): number {
-    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);
-  }
-
-  private get instantReopenMs(): number {
-    return resolveCssTimeMs(
-      TOKEN_DEFAULTS.animationDurationMedium1,
-      TOKEN_DEFAULTS.animationDurationMedium1,
-    );
-  }
-
-  private get fadeOutMs(): number {
-    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
-  }
-
-  private get tooltipFallbackWidthPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);
-  }
-
-  private get tooltipFallbackHeightPx(): number {
-    const token = FALLBACK_HEIGHT[this.size];
-    return resolveCssLengthPx(token, token);
-  }
-
-  private bindAnchor() {
-    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;
-    const slotted = slot?.assignedElements?.() ?? [];
-    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;
-    if (!child) return;
-    this.anchor = child;
-    child.setAttribute('aria-describedby', this.tooltipId);
-    child.addEventListener('mouseenter', this.mouseEnterHandler);
-    child.addEventListener('mouseleave', this.mouseLeaveHandler);
-    child.addEventListener('focusin', this.focusHandler);
-    child.addEventListener('focusout', this.blurHandler);
-  }
-
-  private unbindAnchor() {
-    if (!this.anchor) return;
-    this.anchor.removeAttribute('aria-describedby');
-    this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);
-    this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);
-    this.anchor.removeEventListener('focusin', this.focusHandler);
-    this.anchor.removeEventListener('focusout', this.blurHandler);
-    this.anchor = null;
-  }
-
-  private clearTimers() {
-    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }
-    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }
-  }
-
-  private destroyPopup() {
-    this.positionObserver?.disconnect();
-    this.positionObserver = null;
-    if (!this.popupEl) return;
-    this.popupEl.remove();
-    this.popupEl = null;
-  }
-
-  /**
-   * Position after `ds-text` upgrades and lays out. Measuring synchronously in
-   * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.
-   */
-  private schedulePosition() {
-    if (!this.popupEl) return;
-
-    const reapplyLabelStyles = () => {
-      const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');
-      if (label instanceof HTMLElement) styleTooltipLabel(label);
-    };
-
-    requestAnimationFrame(() => {
-      reapplyLabelStyles();
-      this.calculatePosition();
-      requestAnimationFrame(() => {
-        reapplyLabelStyles();
-        this.calculatePosition();
-      });
-    });
-
-    this.positionObserver?.disconnect();
-    this.positionObserver = new ResizeObserver(() => this.calculatePosition());
-    this.positionObserver.observe(this.popupEl);
-  }
-
-  /** Drop the open tip immediately (warm handoff to another tooltip). */
-  private hideInstant() {
-    this.clearTimers();
-    lastDismissedAt = Date.now();
-    if (activeTooltip === this) activeTooltip = null;
-    this.destroyPopup();
-    this.isOpen = false;
-    this.skipEnterAnimation = false;
-  }
-
-  private show() {
-    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)
-    // but no tip should appear.
-    if (!this.label?.trim()) return;
-    this.clearTimers();
-    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;
-    if (activeTooltip && activeTooltip !== this) {
-      activeTooltip.hideInstant();
-      instant = true;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance
-    activeTooltip = this;
-    this.skipEnterAnimation = instant;
-    if (instant) {
-      this.mountPopup();
-      return;
-    }
-    this.delayTimer = setTimeout(() => {
-      this.delayTimer = null;
-      if (!this.label?.trim()) return;
-      this.mountPopup();
-    }, this.hoverDelayMs);
-  }
-
-  private hide() {
-    this.clearTimers();
-    if (!this.popupEl && !this.isOpen) return;
-    lastDismissedAt = Date.now();
-    if (activeTooltip === this) activeTooltip = null;
-    if (!this.popupEl) {
-      this.isOpen = false;
-      return;
-    }
-    this.popupEl.classList.remove('tooltip-popup--instant');
-    this.popupEl.classList.add('tooltip-popup--closing');
-    this.closeTimer = setTimeout(() => {
-      this.closeTimer = null;
-      this.destroyPopup();
-      this.isOpen = false;
-      this.skipEnterAnimation = false;
-    }, this.fadeOutMs);
-  }
-
-  private mountPopup() {
-    if (!this.popupEl) {
-      const tip = document.createElement('div');
-      tip.id = this.tooltipId;
-      tip.setAttribute('role', 'tooltip');
-      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.
-      tip.className = 'tooltip-popup sc-ds-tooltip';
-      Object.assign(tip.style, {
-        position: 'fixed',
-        left: '0',
-        top: '0',
-        zIndex: 'var(--dimension-z-index-tooltip)',
-        pointerEvents: 'none',
-      });
-      document.body.appendChild(tip);
-      this.popupEl = tip;
-    }
-
-    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);
-    this.popupEl.classList.remove('tooltip-popup--closing');
-    this.renderPopupContent();
-    this.schedulePosition();
-    this.isOpen = true;
-  }
-
-  private renderPopupContent() {
-    if (!this.popupEl) return;
-    const textVariant = CONTROL_TEXT_VARIANT[this.size];
-    const density =
-      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';
-    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.
-    const sc = 'sc-ds-tooltip';
-
-    const inner = document.createElement('div');
-    inner.className = `tooltip-inner ${density} ${sc}`;
-
-    const appendShortcut = (position: 'start' | 'end') => {
-      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;
-      const hint = document.createElement('div');
-      hint.className = `key-hint ${sc}`;
-      hint.setAttribute('aria-hidden', 'true');
-      hint.appendChild(
-        createDsText({ variant: 'text-caption', emphasis: true, text: this.shortcutKey }),
-      );
-      inner.appendChild(hint);
-    };
-
-    appendShortcut('start');
-
-    // ds-text is the layout box (metric-box + 2px control label-inset).
-    // Inline styles required — see styleTooltipLabel.
-    const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });
-    styleTooltipLabel(label);
-    inner.appendChild(label);
-
-    appendShortcut('end');
-
-    this.popupEl.replaceChildren(inner);
-  }
-
-  private calculatePosition() {
-    if (!this.anchor || !this.popupEl) return;
-    const tip = this.popupEl;
-    const a = this.anchor.getBoundingClientRect();
-    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;
-    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;
-    const sideOffset = this.sideOffsetPx;
-    const alignOffset = this.alignOffsetPx;
-    const vpPad = this.viewportPadPx;
-    let x = 0, y = 0;
-
-    switch (this.side) {
-      case 'top':
-        y = a.top - th - sideOffset;
-        x = this.align === 'start' ? a.left + alignOffset
-          : this.align === 'end' ? a.right - tw + alignOffset
-          : a.left + a.width / 2 - tw / 2 + alignOffset;
-        break;
-      case 'bottom':
-        y = a.bottom + sideOffset;
-        x = this.align === 'start' ? a.left + alignOffset
-          : this.align === 'end' ? a.right - tw + alignOffset
-          : a.left + a.width / 2 - tw / 2 + alignOffset;
-        break;
-      case 'left':
-        x = a.left - tw - sideOffset;
-        y = this.align === 'start' ? a.top + alignOffset
-          : this.align === 'end' ? a.bottom - th + alignOffset
-          : a.top + a.height / 2 - th / 2 + alignOffset;
-        break;
-      case 'right':
-        x = a.right + sideOffset;
-        y = this.align === 'start' ? a.top + alignOffset
-          : this.align === 'end' ? a.bottom - th + alignOffset
-          : a.top + a.height / 2 - th / 2 + alignOffset;
-        break;
-    }
-
-    const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);
-    const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);
-    tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;
-  }
-
-  render() {
-    return (
-      <Host style={{ display: 'contents' }}>
-        <slot />
-      </Host>
-    );
-  }
-}

package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx

@@ -1,145 +0,0 @@
-import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';
-import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
-
-const CURSOR_OFFSET_PX = 12;
-const VIEWPORT_PAD_PX = 8;
-
-export type TooltipDataVizSide = 'left' | 'right';
-export type TooltipDataVizAlign = 'top' | 'bottom';
-
-/**
- * Positioned value/label callout for chart hover interactions (bar, line point, …).
- * Donut charts skip this — legend sync already surfaces the hovered slice.
- * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
- * charts hover-highlight data that lives inside an SVG, so the chart itself computes
- * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
- *
- * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
- * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right
- * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge
- * keeps it on-screen.
- *
- * Mount (or remount) when a hover session starts so `delay` applies once per hover;
- * keep the instance mounted while the cursor moves so tracking stays instant.
- */
-@Component({
-  tag: 'ds-tooltip-data-viz',
-  styleUrl: 'TooltipDataViz.css',
-  scoped: true,
-})
-export class TooltipDataViz {
-  @Element() el!: HTMLElement;
-
-  @Prop() value: string | number = '';
-  @Prop() label: string = '';
-  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */
-  @Prop() x: number = 0;
-  @Prop() y: number = 0;
-
-  /**
-   * Show delay after mount before the callout appears.
-   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)
-   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need
-   * immediate feedback while scrubbing; prefer the default. Mount once per
-   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.
-   */
-  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;
-
-  @State() private side: TooltipDataVizSide = 'right';
-  @State() private align: TooltipDataVizAlign = 'bottom';
-  @State() private visible: boolean = false;
-
-  private delayTimer: ReturnType<typeof setTimeout> | null = null;
-
-  componentDidLoad() {
-    this.scheduleShow();
-    this.calculatePlacement();
-  }
-
-  disconnectedCallback() {
-    this.clearDelayTimer();
-  }
-
-  @Watch('x')
-  @Watch('y')
-  onAnchorChange() {
-    requestAnimationFrame(() => this.calculatePlacement());
-  }
-
-  @Watch('delay')
-  onDelayChange() {
-    if (!this.visible) this.scheduleShow();
-  }
-
-  private get showDelayMs(): number {
-    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);
-  }
-
-  private clearDelayTimer() {
-    if (this.delayTimer) {
-      clearTimeout(this.delayTimer);
-      this.delayTimer = null;
-    }
-  }
-
-  private scheduleShow() {
-    this.clearDelayTimer();
-    this.visible = false;
-    const ms = this.showDelayMs;
-    if (ms <= 0) {
-      this.visible = true;
-      return;
-    }
-    this.delayTimer = setTimeout(() => {
-      this.delayTimer = null;
-      this.visible = true;
-      requestAnimationFrame(() => this.calculatePlacement());
-    }, ms);
-  }
-
-  private calculatePlacement() {
-    const rect = this.el.getBoundingClientRect();
-    if (!rect.width || !rect.height) return;
-
-    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';
-    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';
-
-    if (nextSide !== this.side) this.side = nextSide;
-    if (nextAlign !== this.align) this.align = nextAlign;
-  }
-
-  render() {
-    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;
-    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;
-
-    return (
-      <Host
-        class={{
-          'tooltip-data-viz': true,
-          'tooltip-data-viz--visible': this.visible,
-        }}
-        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}
-      >
-        <div class="tooltip-data-viz__item ds-control--md">
-          <ds-text
-            class="tooltip-data-viz__label"
-            as="span"
-            variant="text-body-medium"
-            color="var(--color-foreground-on-translucent-background-secondary)"
-          >
-            {this.label}
-          </ds-text>
-          <ds-text
-            class="tooltip-data-viz__value"
-            as="span"
-            variant="text-body-medium"
-            emphasis
-            color="var(--color-foreground-on-translucent-background-primary)"
-          >
-            {this.value}
-          </ds-text>
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/TooltipDataViz/index.ts

@@ -1 +0,0 @@
-export type { TooltipDataVizSide, TooltipDataVizAlign } from './TooltipDataViz';