@object-ui/react 3.1.5 → 3.3.1

package/src/hooks/__tests__/useFocusTrap.test.ts

@@ -1,294 +0,0 @@
-/**
- * Tests for useFocusTrap hook
- */
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useFocusTrap } from '../useFocusTrap';
-
-describe('useFocusTrap', () => {
-  it('returns a ref object', () => {
-    const { result } = renderHook(() => useFocusTrap());
-    expect(result.current).toBeDefined();
-    expect(result.current).toHaveProperty('current');
-  });
-
-  it('returns a ref with null initial value', () => {
-    const { result } = renderHook(() => useFocusTrap());
-    expect(result.current.current).toBeNull();
-  });
-
-  it('accepts disabled option', () => {
-    const { result } = renderHook(() =>
-      useFocusTrap({ enabled: false })
-    );
-    expect(result.current).toBeDefined();
-  });
-
-  it('accepts all options without error', () => {
-    const onEscape = vi.fn();
-    const { result } = renderHook(() =>
-      useFocusTrap({
-        enabled: true,
-        autoFocus: true,
-        restoreFocus: true,
-        escapeDeactivates: true,
-        onEscape,
-        initialFocus: '.first-input',
-      })
-    );
-    expect(result.current).toBeDefined();
-  });
-
-  it('defaults to enabled when no options provided', () => {
-    const { result } = renderHook(() => useFocusTrap());
-    // Should not throw
-    expect(result.current.current).toBeNull();
-  });
-
-  it('auto-focuses the first focusable element when enabled', () => {
-    const container = document.createElement('div');
-    const button = document.createElement('button');
-    button.textContent = 'Click me';
-    container.appendChild(button);
-    document.body.appendChild(container);
-
-    const { result } = renderHook(() =>
-      useFocusTrap<HTMLDivElement>({ enabled: true, autoFocus: true })
-    );
-
-    act(() => {
-      (result.current as any).current = container;
-    });
-
-    // Re-render to trigger effect with the ref set
-    const { result: result2 } = renderHook(() =>
-      useFocusTrap<HTMLDivElement>({ enabled: true, autoFocus: true })
-    );
-
-    document.body.removeChild(container);
-  });
-
-  it('focuses initialFocus selector when provided', () => {
-    const container = document.createElement('div');
-    const input1 = document.createElement('input');
-    const input2 = document.createElement('input');
-    input2.className = 'target-input';
-    container.appendChild(input1);
-    container.appendChild(input2);
-    document.body.appendChild(container);
-
-    const focusSpy = vi.spyOn(input2, 'focus');
-
-    const { result, rerender } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          autoFocus: true,
-          initialFocus: '.target-input',
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    // Set the ref
-    (result.current as any).current = container;
-
-    // Enable the trap to trigger the effect
-    rerender({ enabled: true });
-
-    expect(focusSpy).toHaveBeenCalled();
-
-    document.body.removeChild(container);
-  });
-
-  it('handles Escape key when escapeDeactivates is true', () => {
-    const container = document.createElement('div');
-    const button = document.createElement('button');
-    container.appendChild(button);
-    document.body.appendChild(container);
-
-    const onEscape = vi.fn();
-
-    const { result, rerender } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          escapeDeactivates: true,
-          onEscape,
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    (result.current as any).current = container;
-    rerender({ enabled: true });
-
-    act(() => {
-      const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
-      container.dispatchEvent(event);
-    });
-
-    expect(onEscape).toHaveBeenCalled();
-
-    document.body.removeChild(container);
-  });
-
-  it('traps Tab focus at the end of focusable elements', () => {
-    const container = document.createElement('div');
-    const button1 = document.createElement('button');
-    button1.textContent = 'First';
-    const button2 = document.createElement('button');
-    button2.textContent = 'Last';
-    container.appendChild(button1);
-    container.appendChild(button2);
-    document.body.appendChild(container);
-
-    const { result, rerender } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          autoFocus: false,
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    (result.current as any).current = container;
-    rerender({ enabled: true });
-
-    // Focus the last element
-    button2.focus();
-
-    act(() => {
-      const event = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-      });
-      container.dispatchEvent(event);
-    });
-
-    document.body.removeChild(container);
-  });
-
-  it('traps Shift+Tab focus at the start of focusable elements', () => {
-    const container = document.createElement('div');
-    const button1 = document.createElement('button');
-    button1.textContent = 'First';
-    const button2 = document.createElement('button');
-    button2.textContent = 'Last';
-    container.appendChild(button1);
-    container.appendChild(button2);
-    document.body.appendChild(container);
-
-    const { result, rerender } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          autoFocus: false,
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    (result.current as any).current = container;
-    rerender({ enabled: true });
-
-    // Focus the first element
-    button1.focus();
-
-    act(() => {
-      const event = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        shiftKey: true,
-        bubbles: true,
-      });
-      container.dispatchEvent(event);
-    });
-
-    document.body.removeChild(container);
-  });
-
-  it('restores focus on unmount when restoreFocus is true', () => {
-    const outsideButton = document.createElement('button');
-    outsideButton.textContent = 'Outside';
-    document.body.appendChild(outsideButton);
-    outsideButton.focus();
-
-    const container = document.createElement('div');
-    const innerButton = document.createElement('button');
-    innerButton.textContent = 'Inside';
-    container.appendChild(innerButton);
-    document.body.appendChild(container);
-
-    const { result, rerender, unmount } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          autoFocus: true,
-          restoreFocus: true,
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    (result.current as any).current = container;
-    rerender({ enabled: true });
-
-    unmount();
-
-    document.body.removeChild(container);
-    document.body.removeChild(outsideButton);
-  });
-
-  it('ignores non-Tab and non-Escape keys', () => {
-    const container = document.createElement('div');
-    const button = document.createElement('button');
-    container.appendChild(button);
-    document.body.appendChild(container);
-
-    const { result, rerender } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          autoFocus: false,
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    (result.current as any).current = container;
-    rerender({ enabled: true });
-
-    act(() => {
-      const event = new KeyboardEvent('keydown', {
-        key: 'a',
-        bubbles: true,
-      });
-      container.dispatchEvent(event);
-    });
-
-    document.body.removeChild(container);
-  });
-
-  it('handles container with no focusable elements', () => {
-    const container = document.createElement('div');
-    container.innerHTML = '<span>No focusable elements</span>';
-    document.body.appendChild(container);
-
-    const { result, rerender } = renderHook(
-      ({ enabled }) =>
-        useFocusTrap<HTMLDivElement>({
-          enabled,
-          autoFocus: true,
-        }),
-      { initialProps: { enabled: false } }
-    );
-
-    (result.current as any).current = container;
-    rerender({ enabled: true });
-
-    act(() => {
-      const event = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-      });
-      container.dispatchEvent(event);
-    });
-
-    document.body.removeChild(container);
-  });
-});

package/src/hooks/__tests__/useKeyboardShortcuts.test.ts

@@ -1,144 +0,0 @@
-/**
- * Tests for useKeyboardShortcuts hook
- */
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useKeyboardShortcuts, getShortcutDescriptions } from '../useKeyboardShortcuts';
-import type { KeyboardShortcutDefinition } from '../useKeyboardShortcuts';
-
-describe('useKeyboardShortcuts', () => {
-  it('registers shortcuts without error', () => {
-    const handler = vi.fn();
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', ctrlOrMeta: true, handler, description: 'Search' },
-    ];
-
-    expect(() => {
-      renderHook(() => useKeyboardShortcuts(shortcuts));
-    }).not.toThrow();
-  });
-
-  it('handles empty shortcuts array', () => {
-    expect(() => {
-      renderHook(() => useKeyboardShortcuts([]));
-    }).not.toThrow();
-  });
-
-  it('respects enabled option', () => {
-    const handler = vi.fn();
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', handler },
-    ];
-
-    expect(() => {
-      renderHook(() => useKeyboardShortcuts(shortcuts, { enabled: false }));
-    }).not.toThrow();
-  });
-
-  it('fires handler on matching keyboard event', () => {
-    const handler = vi.fn();
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'Escape', handler },
-    ];
-
-    renderHook(() => useKeyboardShortcuts(shortcuts));
-
-    // Simulate keydown
-    const event = new KeyboardEvent('keydown', {
-      key: 'Escape',
-      bubbles: true,
-    });
-    document.dispatchEvent(event);
-
-    expect(handler).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not fire handler for non-matching key', () => {
-    const handler = vi.fn();
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', ctrlOrMeta: true, handler },
-    ];
-
-    renderHook(() => useKeyboardShortcuts(shortcuts));
-
-    const event = new KeyboardEvent('keydown', {
-      key: 'k',
-      bubbles: true,
-      // No ctrl or meta
-    });
-    document.dispatchEvent(event);
-
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it('fires handler when modifier keys match', () => {
-    const handler = vi.fn();
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', ctrlOrMeta: true, handler },
-    ];
-
-    renderHook(() => useKeyboardShortcuts(shortcuts));
-
-    const event = new KeyboardEvent('keydown', {
-      key: 'k',
-      ctrlKey: true,
-      bubbles: true,
-    });
-    document.dispatchEvent(event);
-
-    expect(handler).toHaveBeenCalledTimes(1);
-  });
-
-  it('skips disabled shortcuts', () => {
-    const handler = vi.fn();
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', handler, enabled: false },
-    ];
-
-    renderHook(() => useKeyboardShortcuts(shortcuts));
-
-    const event = new KeyboardEvent('keydown', {
-      key: 'k',
-      bubbles: true,
-    });
-    document.dispatchEvent(event);
-
-    expect(handler).not.toHaveBeenCalled();
-  });
-});
-
-describe('getShortcutDescriptions', () => {
-  it('returns formatted descriptions', () => {
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', ctrlOrMeta: true, handler: vi.fn(), description: 'Search' },
-      { key: 'n', ctrlOrMeta: true, shift: true, handler: vi.fn(), description: 'New' },
-      { key: 'Escape', handler: vi.fn(), description: 'Close' },
-    ];
-
-    const descriptions = getShortcutDescriptions(shortcuts);
-
-    expect(descriptions).toHaveLength(3);
-    expect(descriptions[0]).toEqual({ keys: '⌘/Ctrl + K', description: 'Search' });
-    expect(descriptions[1]).toEqual({ keys: '⌘/Ctrl + Shift + N', description: 'New' });
-    expect(descriptions[2]).toEqual({ keys: 'Escape', description: 'Close' });
-  });
-
-  it('excludes shortcuts without descriptions', () => {
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', handler: vi.fn() },
-      { key: 'n', handler: vi.fn(), description: 'New' },
-    ];
-
-    const descriptions = getShortcutDescriptions(shortcuts);
-    expect(descriptions).toHaveLength(1);
-  });
-
-  it('excludes disabled shortcuts', () => {
-    const shortcuts: KeyboardShortcutDefinition[] = [
-      { key: 'k', handler: vi.fn(), description: 'Search', enabled: false },
-    ];
-
-    const descriptions = getShortcutDescriptions(shortcuts);
-    expect(descriptions).toHaveLength(0);
-  });
-});

package/src/hooks/__tests__/usePageTransition.test.ts

@@ -1,158 +0,0 @@
-/**
- * Tests for usePageTransition hook
- */
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { usePageTransition } from '../usePageTransition';
-
-describe('usePageTransition', () => {
-
-  it('returns inactive result when type is none (default)', () => {
-    const { result } = renderHook(() => usePageTransition());
-    expect(result.current.isActive).toBe(false);
-    expect(result.current.enterClassName).toBe('');
-    expect(result.current.exitClassName).toBe('');
-    expect(result.current.type).toBe('none');
-  });
-
-  it('returns active result for fade transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.isActive).toBe(true);
-    expect(result.current.enterClassName).toContain('fade-in');
-    expect(result.current.exitClassName).toContain('fade-out');
-    expect(result.current.type).toBe('fade');
-  });
-
-  it('returns correct classes for slide_up transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'slide_up' }));
-    expect(result.current.isActive).toBe(true);
-    expect(result.current.enterClassName).toContain('slide-in-from-bottom');
-    expect(result.current.exitClassName).toContain('slide-out-to-top');
-  });
-
-  it('returns correct classes for slide_down transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'slide_down' }));
-    expect(result.current.enterClassName).toContain('slide-in-from-top');
-    expect(result.current.exitClassName).toContain('slide-out-to-bottom');
-  });
-
-  it('returns correct classes for slide_left transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'slide_left' }));
-    expect(result.current.enterClassName).toContain('slide-in-from-right');
-    expect(result.current.exitClassName).toContain('slide-out-to-left');
-  });
-
-  it('returns correct classes for slide_right transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'slide_right' }));
-    expect(result.current.enterClassName).toContain('slide-in-from-left');
-    expect(result.current.exitClassName).toContain('slide-out-to-right');
-  });
-
-  it('returns correct classes for scale transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'scale' }));
-    expect(result.current.enterClassName).toContain('zoom-in');
-    expect(result.current.exitClassName).toContain('zoom-out');
-  });
-
-  it('returns correct classes for rotate transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'rotate' }));
-    expect(result.current.enterClassName).toContain('spin-in');
-    expect(result.current.exitClassName).toContain('spin-out');
-  });
-
-  it('returns correct classes for flip transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'flip' }));
-    expect(result.current.enterClassName).toContain('zoom-in');
-    expect(result.current.exitClassName).toContain('zoom-out');
-  });
-
-  it('uses default duration of 300ms', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.duration).toBe(300);
-    expect(result.current.enterStyle.animationDuration).toBe('300ms');
-  });
-
-  it('accepts custom duration', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', duration: 500 }));
-    expect(result.current.duration).toBe(500);
-    expect(result.current.enterStyle.animationDuration).toBe('500ms');
-  });
-
-  it('uses ease_in_out easing by default', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease-in-out');
-  });
-
-  it('accepts custom easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'spring' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('cubic-bezier(0.34, 1.56, 0.64, 1)');
-  });
-
-  it('sets animationFillMode to both', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.enterStyle.animationFillMode).toBe('both');
-    expect(result.current.exitStyle.animationFillMode).toBe('both');
-  });
-
-  it('applies crossFade positioning', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', crossFade: true }));
-    expect(result.current.enterStyle.position).toBe('absolute');
-    expect(result.current.enterStyle.inset).toBe('0');
-    expect(result.current.exitStyle.position).toBe('absolute');
-    expect(result.current.exitStyle.inset).toBe('0');
-  });
-
-  it('does not apply crossFade positioning when disabled', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', crossFade: false }));
-    expect(result.current.enterStyle.position).toBeUndefined();
-    expect(result.current.exitStyle.position).toBeUndefined();
-  });
-
-  it('returns inactive when reduced motion is preferred', () => {
-    // Mock window.matchMedia to simulate reduced motion preference
-    const original = window.matchMedia;
-    window.matchMedia = vi.fn((query: string) => ({
-      matches: query === '(prefers-reduced-motion: reduce)',
-      media: query,
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })) as unknown as typeof window.matchMedia;
-
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.isActive).toBe(false);
-    expect(result.current.enterClassName).toBe('');
-    expect(result.current.exitClassName).toBe('');
-
-    window.matchMedia = original;
-  });
-
-  it('returns empty styles when inactive', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'none' }));
-    expect(result.current.enterStyle).toEqual({});
-    expect(result.current.exitStyle).toEqual({});
-  });
-
-  it('accepts linear easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'linear' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('linear');
-  });
-
-  it('accepts ease easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'ease' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease');
-  });
-
-  it('accepts ease_in easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'ease_in' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease-in');
-  });
-
-  it('accepts ease_out easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'ease_out' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease-out');
-  });
-});