Feat: WalletIsland mobile design

src/internal/components/BottomSheet.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BottomSheet } from './BottomSheet';
+
+vi.mock('../../internal/hooks/useTheme', () => ({
+  useTheme: vi.fn(),
+}));
+
+describe('BottomSheet', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    children: <div>Test Content</div>,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders children when open', () => {
+    render(<BottomSheet {...defaultProps} />);
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('does not render children when closed', () => {
+    render(<BottomSheet {...defaultProps} isOpen={false} />);
+    expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when Escape key is pressed on overlay', () => {
+    render(<BottomSheet {...defaultProps} />);
+    fireEvent.keyDown(screen.getByTestId('ockDismissableLayer'), {
+      key: 'Escape',
+    });
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('applies custom className when provided', () => {
+    render(<BottomSheet {...defaultProps} className="custom-class" />);
+    expect(screen.getByTestId('ockBottomSheet')).toHaveClass('custom-class');
+  });
+
+  it('sets all ARIA attributes correctly', () => {
+    render(
+      <BottomSheet
+        {...defaultProps}
+        aria-label="Test Dialog"
+        aria-describedby="desc"
+        aria-labelledby="title"
+      >
+        <div>Content</div>
+      </BottomSheet>,
+    );
+
+    const sheet = screen.getByTestId('ockBottomSheet');
+    expect(sheet).toHaveAttribute('role', 'dialog');
+    expect(sheet).toHaveAttribute('aria-label', 'Test Dialog');
+    expect(sheet).toHaveAttribute('aria-describedby', 'desc');
+    expect(sheet).toHaveAttribute('aria-labelledby', 'title');
+  });
+});

src/internal/components/BottomSheet.tsx

@@ -0,0 +1,64 @@
+import { DismissableLayer } from '@/internal/components/primitives/DismissableLayer';
+import { FocusTrap } from '@/internal/components/primitives/FocusTrap';
+import { useTheme } from '@/internal/hooks/useTheme';
+import { background, cn } from '@/styles/theme';
+import { createPortal } from 'react-dom';
+
+type BottomSheetProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  triggerRef?: React.RefObject<HTMLElement>;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+};
+
+export function BottomSheet({
+  children,
+  className,
+  isOpen,
+  onClose,
+  triggerRef,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
+}: BottomSheetProps) {
+  const componentTheme = useTheme();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  // TODO: add overlay when DismissableLayer can handle overlay/trigger clicks
+  const bottomSheet = (
+    <FocusTrap active={isOpen}>
+      <DismissableLayer
+        onDismiss={onClose}
+        triggerRef={triggerRef}
+        preventTriggerEvents={!!triggerRef}
+      >
+        <div
+          aria-describedby={ariaDescribedby}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          data-testid="ockBottomSheet"
+          role="dialog"
+          className={cn(
+            componentTheme,
+            background.default,
+            'fixed right-0 bottom-0 left-0',
+            'transform rounded-t-3xl p-2 transition-transform',
+            'fade-in slide-in-from-bottom-1/2 animate-in',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </DismissableLayer>
+    </FocusTrap>
+  );
+
+  return createPortal(bottomSheet, document.body);
+}

src/internal/components/Draggable/Draggable.tsx

@@ -4,6 +4,7 @@ import { zIndex } from '@/styles/constants';
 import { cn } from '@/styles/theme';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { getBoundedPosition } from './getBoundedPosition';
+import { useRespositionOnWindowResize } from './useRepositionOnResize';
 
 type DraggableProps = {
   children: React.ReactNode;
@@ -104,6 +105,8 @@ export function Draggable({
     dragStartPosition,
   ]);
 
+  useRespositionOnWindowResize(draggableRef, position, setPosition);
+
   return (
     <div
       ref={draggableRef}

src/internal/components/Draggable/useRepositionOnResize.test.ts

@@ -0,0 +1,157 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useRespositionOnWindowResize } from './useRepositionOnResize';
+
+describe('useRespositionOnWindowResize', () => {
+  const mockRef = { current: document.createElement('div') };
+  const mockResetPosition = vi.fn();
+
+  beforeEach(() => {
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1024);
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(768);
+    mockRef.current = document.createElement('div');
+
+    vi.clearAllMocks();
+  });
+
+  it('should not reposition when element is within viewport', () => {
+    const initialPosition = { x: 100, y: 100 };
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 100,
+      right: 200,
+      bottom: 200,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(mockRef, initialPosition, mockResetPosition),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+
+    // Get the callback function that was passed to resetPosition
+    const callback = mockResetPosition.mock.calls[0][0];
+    // Call the callback with current position and verify it returns same position
+    expect(callback(initialPosition)).toEqual(initialPosition);
+  });
+
+  it('should not reposition when ref.current is falsey', () => {
+    const initialPosition = { x: 100, y: 100 };
+    // @ts-expect-error - we are testing the case where ref.current is falsey
+    mockRef.current = null;
+
+    renderHook(() =>
+      useRespositionOnWindowResize(mockRef, initialPosition, mockResetPosition),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    expect(mockResetPosition).not.toHaveBeenCalled();
+  });
+
+  it('should reposition when element is outside right viewport boundary', () => {
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 1000,
+      right: 1100,
+      bottom: 200,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: 1000, y: 100 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: 1000, y: 100 });
+    expect(newPosition.x).toBe(914); // 1024 - 100 - 10
+    expect(newPosition.y).toBe(100); // y shouldn't change
+  });
+
+  it('should reposition when element is outside bottom viewport boundary', () => {
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 700,
+      left: 100,
+      right: 200,
+      bottom: 800,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: 100, y: 700 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: 100, y: 700 });
+    expect(newPosition.x).toBe(100); // x shouldn't change
+    expect(newPosition.y).toBe(658); // 768 - 100 - 10
+  });
+
+  it('should reposition when element is outside left viewport boundary', () => {
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: -100,
+      right: 0,
+      bottom: 200,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: -100, y: 100 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: -100, y: 100 });
+    expect(newPosition.x).toBe(10); // reset to 10
+    expect(newPosition.y).toBe(100); // y shouldn't change
+  });
+
+  it('should reposition when element is outside top viewport boundary', () => {
+    // Mock viewport size
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(800);
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(600);
+
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: -50,
+      left: 100,
+      right: 200,
+      bottom: 50,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: 100, y: -50 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: 100, y: -50 });
+    expect(newPosition.x).toBe(100); // x shouldn't change
+    expect(newPosition.y).toBe(10); // reset to 10
+  });
+});

src/internal/components/Draggable/useRepositionOnResize.ts

@@ -0,0 +1,76 @@
+import { type Dispatch, useCallback, useEffect } from 'react';
+
+export function useRespositionOnWindowResize(
+  draggableRef: React.RefObject<HTMLDivElement>,
+  position: { x: number; y: number },
+  resetPosition: Dispatch<
+    React.SetStateAction<{
+      x: number;
+      y: number;
+    }>
+  >,
+) {
+  const isElementInViewport = useCallback((rect: DOMRect) => {
+    return (
+      rect.right <= window.innerWidth &&
+      rect.bottom <= window.innerHeight &&
+      rect.left >= 0 &&
+      rect.top >= 0
+    );
+  }, []);
+
+  const repositionDraggable = useCallback(
+    (rect: DOMRect, currentPosition: { x: number; y: number }) => {
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let newX: number;
+      let newY: number;
+
+      if (rect.right > viewportWidth) {
+        newX = viewportWidth - rect.width - 10;
+      } else if (rect.left < 0) {
+        newX = 10;
+      } else {
+        newX = currentPosition.x;
+      }
+
+      if (rect.bottom > viewportHeight) {
+        newY = viewportHeight - rect.height - 10;
+      } else if (rect.top < 0) {
+        newY = 10;
+      } else {
+        newY = currentPosition.y;
+      }
+
+      return { x: newX, y: newY };
+    },
+    [],
+  );
+
+  const handleWindowResize = useCallback(() => {
+    if (!draggableRef.current) {
+      return;
+    }
+
+    const el = draggableRef.current;
+    const rect = el.getBoundingClientRect();
+
+    const newPosition = repositionDraggable(rect, position);
+
+    resetPosition((currentPos) =>
+      isElementInViewport(rect) ? currentPos : newPosition,
+    );
+  }, [
+    draggableRef,
+    position,
+    repositionDraggable,
+    resetPosition,
+    isElementInViewport,
+  ]);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, [handleWindowResize]);
+}

src/styles/constants.ts

@@ -4,5 +4,6 @@ export const zIndex = {
   dropdown: 10,
   tooltip: 20,
   modal: 40,
+  bottomSheet: 45,
   notification: 50,
-};
+} as const;