@arbor-education/design-system.components 0.5.5 → 0.7.0

package/src/utils/isSelectAllChord.test.ts

@@ -0,0 +1,24 @@
+import { isSelectAllChord } from 'Utils/isSelectAllChord';
+import { describe, expect, test } from 'vitest';
+
+const chord = (init: Partial<KeyboardEvent> & Pick<KeyboardEvent, 'key'>): KeyboardEvent =>
+  ({ metaKey: false, ctrlKey: false, ...init } as KeyboardEvent);
+
+describe('isSelectAllChord', () => {
+  test('true for metaKey + a', () => {
+    expect(isSelectAllChord(chord({ key: 'a', metaKey: true }))).toBe(true);
+    expect(isSelectAllChord(chord({ key: 'A', metaKey: true }))).toBe(true);
+  });
+
+  test('true for ctrlKey + a', () => {
+    expect(isSelectAllChord(chord({ key: 'a', ctrlKey: true }))).toBe(true);
+  });
+
+  test('false without modifier', () => {
+    expect(isSelectAllChord(chord({ key: 'a' }))).toBe(false);
+  });
+
+  test('false for other keys with modifier', () => {
+    expect(isSelectAllChord(chord({ key: 'b', metaKey: true }))).toBe(false);
+  });
+});

package/src/utils/isSelectAllChord.ts

@@ -0,0 +1,8 @@
+/**
+ * True when the event is Cmd/Ctrl+A (select-all shortcut).
+ */
+export function isSelectAllChord(
+  e: Pick<KeyboardEvent, 'key' | 'metaKey' | 'ctrlKey'>,
+): boolean {
+  return (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'a';
+}

package/src/utils/nextCircularIndex.test.ts

@@ -0,0 +1,26 @@
+import { nextCircularIndex } from 'Utils/nextCircularIndex';
+import { describe, expect, test } from 'vitest';
+
+describe('nextCircularIndex', () => {
+  test('returns 0 when length is 0', () => {
+    expect(nextCircularIndex(3, 0, 'next')).toBe(0);
+    expect(nextCircularIndex(3, 0, 'previous')).toBe(0);
+  });
+
+  test('next advances and wraps from last to first', () => {
+    expect(nextCircularIndex(0, 3, 'next')).toBe(1);
+    expect(nextCircularIndex(1, 3, 'next')).toBe(2);
+    expect(nextCircularIndex(2, 3, 'next')).toBe(0);
+  });
+
+  test('previous goes back and wraps from first to last', () => {
+    expect(nextCircularIndex(2, 3, 'previous')).toBe(1);
+    expect(nextCircularIndex(1, 3, 'previous')).toBe(0);
+    expect(nextCircularIndex(0, 3, 'previous')).toBe(2);
+  });
+
+  test('single item wraps to same index for both directions', () => {
+    expect(nextCircularIndex(0, 1, 'next')).toBe(0);
+    expect(nextCircularIndex(0, 1, 'previous')).toBe(0);
+  });
+});

package/src/utils/nextCircularIndex.ts

@@ -0,0 +1,15 @@
+export type CircularDirection = 'next' | 'previous';
+
+export function nextCircularIndex(
+  current: number,
+  length: number,
+  direction: CircularDirection,
+): number {
+  if (length <= 0) {
+    return 0;
+  }
+  if (direction === 'next') {
+    return current < length - 1 ? current + 1 : 0;
+  }
+  return current > 0 ? current - 1 : length - 1;
+}

package/src/utils/scrollElementIntoViewById.test.ts

@@ -0,0 +1,38 @@
+import { scrollElementIntoViewById } from 'Utils/scrollElementIntoViewById';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+describe('scrollElementIntoViewById', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('no-op when container is null', () => {
+    expect(() => scrollElementIntoViewById(null, 'x')).not.toThrow();
+  });
+
+  test('calls scrollIntoView on matching descendant', () => {
+    const container = document.createElement('div');
+    const target = document.createElement('div');
+    target.id = 'opt-1';
+    container.appendChild(target);
+    const scrollIntoView = vi.fn();
+    target.scrollIntoView = scrollIntoView;
+
+    scrollElementIntoViewById(container, 'opt-1');
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' });
+  });
+
+  test('escapes id for querySelector', () => {
+    const container = document.createElement('div');
+    const target = document.createElement('div');
+    target.id = 'bad:id';
+    container.appendChild(target);
+    const scrollIntoView = vi.fn();
+    target.scrollIntoView = scrollIntoView;
+
+    scrollElementIntoViewById(container, 'bad:id');
+
+    expect(scrollIntoView).toHaveBeenCalled();
+  });
+});

package/src/utils/scrollElementIntoViewById.ts

@@ -0,0 +1,20 @@
+function escapeCssIdentifier(value: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, ch => `\\${ch}`);
+}
+
+export function scrollElementIntoViewById(
+  container: Element | null | undefined,
+  elementId: string,
+  options: ScrollIntoViewOptions = { block: 'nearest' },
+): void {
+  if (!container) {
+    return;
+  }
+  const el = container.querySelector(`#${escapeCssIdentifier(elementId)}`);
+  if (el && typeof el.scrollIntoView === 'function') {
+    el.scrollIntoView(options);
+  }
+}