@ds-mo/ui 1.0.1 → 1.1.0

package/src/wc/components/Modal/Modal.tsx

@@ -0,0 +1,197 @@
+import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
+
+export type ModalWidth = 'sm' | 'md' | 'lg';
+
+const WIDTH_MAP: Record<ModalWidth, string> = {
+  sm: 'var(--dimension-modal-width-sm, 400px)',
+  md: 'var(--dimension-modal-width-md, 560px)',
+  lg: 'var(--dimension-modal-width-lg, 720px)',
+};
+
+const CLOSE_ANIMATION_MS = 220;
+
+const FOCUSABLE_SEL = [
+  'a[href]',
+  'area[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'iframe',
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+let modalIdCounter = 0;
+
+@Component({
+  tag: 'ds-modal',
+  styleUrl: 'Modal.css',
+  scoped: true,
+})
+export class Modal {
+  @Element() el!: HTMLElement;
+
+  @Prop({ mutable: true }) open: boolean = false;
+  @Prop() heading!: string;
+  @Prop() subtitle: string | undefined;
+  @Prop() modalWidth: ModalWidth | string = 'md';
+
+  @State() private shouldRender: boolean = false;
+  @State() private closing: boolean = false;
+
+  @Event() dsClose!: EventEmitter<void>;
+
+  private instanceId = ++modalIdCounter;
+  private titleId = `ds-modal-title-${modalIdCounter}`;
+  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;
+  private previousFocus: HTMLElement | null = null;
+  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;
+  private tabHandler: ((e: KeyboardEvent) => void) | null = null;
+  private closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidLoad() {
+    if (this.open) this.onOpenChange(true);
+  }
+
+  disconnectedCallback() {
+    this.teardownListeners();
+  }
+
+  @Watch('open')
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      this.shouldRender = true;
+      this.closing = false;
+      this.previousFocus = document.activeElement as HTMLElement | null;
+      requestAnimationFrame(() => {
+        this.focusFirst();
+        this.setupListeners();
+      });
+    } else if (this.shouldRender) {
+      this.closing = true;
+      this.teardownListeners();
+      this.closeTimer = setTimeout(() => {
+        this.shouldRender = false;
+        this.closing = false;
+        this.closeTimer = null;
+        this.previousFocus?.focus?.();
+        this.previousFocus = null;
+      }, CLOSE_ANIMATION_MS);
+    }
+  }
+
+  private focusFirst() {
+    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;
+    if (!dialog) return;
+    const focusables = this.getFocusables(dialog);
+    (focusables[0] ?? dialog).focus();
+  }
+
+  private getFocusables(root: HTMLElement): HTMLElement[] {
+    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(
+      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'
+    );
+  }
+
+  private setupListeners() {
+    this.escapeHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+    };
+
+    this.tabHandler = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;
+      if (!dialog) return;
+      const focusables = this.getFocusables(dialog);
+      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey) {
+        if (active === first || active === dialog || !dialog.contains(active)) {
+          e.preventDefault(); last.focus();
+        }
+      } else {
+        if (active === last || !dialog.contains(active)) {
+          e.preventDefault(); first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', this.escapeHandler);
+    document.addEventListener('keydown', this.tabHandler);
+  }
+
+  private teardownListeners() {
+    if (this.escapeHandler) {
+      document.removeEventListener('keydown', this.escapeHandler);
+      this.escapeHandler = null;
+    }
+    if (this.tabHandler) {
+      document.removeEventListener('keydown', this.tabHandler);
+      this.tabHandler = null;
+    }
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  }
+
+  private close() {
+    this.dsClose.emit();
+    this.open = false;
+  }
+
+  private handleBackdropMouseDown(e: MouseEvent) {
+    if (e.target === e.currentTarget) this.close();
+  }
+
+  private get resolvedWidth(): string {
+    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {
+      return WIDTH_MAP[this.modalWidth];
+    }
+    return this.modalWidth as string;
+  }
+
+  render() {
+    // Always render slots so scoped-mode slot distribution doesn't leak content.
+    // The backdrop is hidden via CSS when not active.
+    const hidden = !this.shouldRender && !this.closing;
+
+    return (
+      <Host style={{ display: 'contents' }}>
+        <div
+          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}
+          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}
+          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}
+        >
+          <div
+            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={this.titleId}
+            aria-describedby={this.subtitle ? this.subtitleId : undefined}
+            tabIndex={-1}
+            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 32px))` }}
+          >
+            <div class="modal-header">
+              <h2 id={this.titleId} class="text-title-small modal-title">{this.heading}</h2>
+              {this.subtitle && (
+                <div id={this.subtitleId} class="modal-subtitle text-body-medium">
+                  {this.subtitle}
+                </div>
+              )}
+            </div>
+            <div class="modal-body">
+              <slot />
+            </div>
+            <div class="modal-footer">
+              <slot name="footer" />
+            </div>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Pagination/Pagination.tsx

@@ -0,0 +1,97 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+function buildRange(start: number, end: number): (number | 'ellipsis')[] {
+  const items: (number | 'ellipsis')[] = [];
+  for (let i = start; i <= end; i++) items.push(i);
+  return items;
+}
+
+function buildPages(page: number, totalPages: number, siblings: number): (number | 'ellipsis')[] {
+  const totalSlots = siblings * 2 + 5;
+  if (totalPages <= totalSlots) return buildRange(1, totalPages);
+
+  const leftSibling = Math.max(page - siblings, 2);
+  const rightSibling = Math.min(page + siblings, totalPages - 1);
+  const showLeft = leftSibling > 2;
+  const showRight = rightSibling < totalPages - 1;
+
+  if (!showLeft && showRight) return [...buildRange(1, siblings * 2 + 3), 'ellipsis', totalPages];
+  if (showLeft && !showRight) return [1, 'ellipsis', ...buildRange(totalPages - (siblings * 2 + 2), totalPages)];
+  return [1, 'ellipsis', ...buildRange(leftSibling, rightSibling), 'ellipsis', totalPages];
+}
+
+@Component({
+  tag: 'ds-pagination',
+  styleUrl: 'Pagination.css',
+  scoped: true,
+})
+export class Pagination {
+  @Prop({ mutable: true }) page: number = 1;
+  @Prop() totalPages: number = 1;
+  @Prop() siblingCount: number = 1;
+  @Prop() inactive: boolean = false;
+
+  @Event() dsPageChange!: EventEmitter<number>;
+
+  private go(p: number) {
+    if (this.inactive) return;
+    this.page = p;
+    this.dsPageChange.emit(p);
+  }
+
+  render() {
+    if (this.totalPages <= 1) return <Host style={{ display: 'none' }} />;
+
+    const pages = buildPages(this.page, this.totalPages, this.siblingCount);
+
+    return (
+      <Host>
+        <nav
+          class={{ pagination: true, 'pagination--inactive': this.inactive }}
+          aria-label="Pagination"
+        >
+          <button
+            type="button"
+            class="button button--nav"
+            disabled={this.page <= 1 || this.inactive}
+            onClick={() => this.go(this.page - 1)}
+            aria-label="Previous page"
+          >
+            &#x2039;
+          </button>
+
+          {pages.map((item, i) =>
+            item === 'ellipsis' ? (
+              <span key={`e${i}`} class="ellipsis">
+                <span class="text-body-small" style={{ color: 'var(--color-foreground-tertiary)' }}>…</span>
+              </span>
+            ) : (
+              <button
+                key={item}
+                type="button"
+                class={{ button: true, 'button--active': item === this.page }}
+                onClick={() => this.go(item)}
+                aria-current={item === this.page ? 'page' : undefined}
+                disabled={this.inactive}
+              >
+                <span class={item === this.page ? 'text-body-small-emphasis' : 'text-body-small'}>
+                  {item}
+                </span>
+              </button>
+            )
+          )}
+
+          <button
+            type="button"
+            class="button button--nav"
+            disabled={this.page >= this.totalPages || this.inactive}
+            onClick={() => this.go(this.page + 1)}
+            aria-label="Next page"
+          >
+            &#x203A;
+          </button>
+        </nav>
+      </Host>
+    );
+  }
+}