@tpzdsp/next-toolkit 1.13.0 → 1.14.0

package/src/components/InfoBox/utils/focusTrapConfig.test.ts

@@ -1,310 +0,0 @@
-import type { RefObject } from 'react';
-
-import { describe, expect, it, vi } from 'vitest';
-
-import { getFocusTrapConfig } from './focusTrapConfig';
-
-// Helper to create config with proper type casting
-const createConfig = (
-  mockTriggerRef: { current: HTMLElement | null },
-  mockContentRef: { current: HTMLElement | null },
-  mockIsOpenRef: { current: boolean },
-  mockDeactivatedByClick: { current: boolean },
-  mockHandleClose: () => void,
-  mockSetIsTrapActive: (active: boolean) => void,
-) =>
-  getFocusTrapConfig({
-    isOpenRef: mockIsOpenRef,
-    deactivatedByClick: mockDeactivatedByClick,
-    triggerRef: mockTriggerRef as RefObject<HTMLElement>,
-    contentRef: mockContentRef as RefObject<HTMLElement>,
-    handleClose: mockHandleClose,
-    setIsTrapActive: mockSetIsTrapActive,
-  });
-
-describe('focusTrapConfig', () => {
-  let mockTriggerRef: { current: HTMLElement | null };
-  let mockContentRef: { current: HTMLElement | null };
-  let mockIsOpenRef: { current: boolean };
-  let mockDeactivatedByClick: { current: boolean };
-  let mockHandleClose: () => void;
-  let mockSetIsTrapActive: (active: boolean) => void;
-
-  beforeEach(() => {
-    const triggerElement = document.createElement('button');
-    const contentElement = document.createElement('div');
-
-    mockTriggerRef = { current: triggerElement };
-    mockContentRef = { current: contentElement };
-    mockIsOpenRef = { current: true };
-    mockDeactivatedByClick = { current: false };
-    mockHandleClose = vi.fn();
-    mockSetIsTrapActive = vi.fn();
-  });
-
-  it('should return configuration object with all required properties', () => {
-    const config = createConfig(
-      mockTriggerRef,
-      mockContentRef,
-      mockIsOpenRef,
-      mockDeactivatedByClick,
-      mockHandleClose,
-      mockSetIsTrapActive,
-    );
-
-    expect(config).toHaveProperty('escapeDeactivates');
-    expect(config).toHaveProperty('clickOutsideDeactivates');
-    expect(config).toHaveProperty('allowOutsideClick');
-    expect(config).toHaveProperty('setReturnFocus');
-    expect(config).toHaveProperty('onDeactivate');
-    expect(config).toHaveProperty('onActivate');
-    expect(config).toHaveProperty('fallbackFocus');
-  });
-
-  describe('escapeDeactivates', () => {
-    it('should call handleClose when open', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const result = (config.escapeDeactivates as () => boolean)();
-
-      expect(mockHandleClose).toHaveBeenCalled();
-      expect(mockDeactivatedByClick.current).toBe(false);
-      expect(result).toBe(false);
-    });
-
-    it('should not call handleClose when closed', () => {
-      mockIsOpenRef.current = false;
-
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      (config.escapeDeactivates as () => boolean)();
-
-      expect(mockHandleClose).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('clickOutsideDeactivates', () => {
-    it('should return false for clicks on trigger', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const event = new MouseEvent('click');
-
-      Object.defineProperty(event, 'target', { value: mockTriggerRef.current, configurable: true });
-
-      const result = (config.clickOutsideDeactivates as (e: MouseEvent) => boolean)(event);
-
-      expect(result).toBe(false);
-      expect(mockDeactivatedByClick.current).toBe(false);
-    });
-
-    it('should return true for clicks outside', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const outsideElement = document.createElement('div');
-      const event = new MouseEvent('click');
-
-      Object.defineProperty(event, 'target', { value: outsideElement, configurable: true });
-
-      const result = (config.clickOutsideDeactivates as (e: MouseEvent) => boolean)(event);
-
-      expect(result).toBe(true);
-      expect(mockDeactivatedByClick.current).toBe(true);
-    });
-  });
-
-  describe('allowOutsideClick', () => {
-    it('should return true for clicks on trigger', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const event = new MouseEvent('click');
-
-      Object.defineProperty(event, 'target', { value: mockTriggerRef.current, configurable: true });
-
-      const result = (config.allowOutsideClick as (e: MouseEvent) => boolean)(event);
-
-      expect(result).toBe(true);
-    });
-
-    it('should return false for clicks elsewhere', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const outsideElement = document.createElement('div');
-      const event = new MouseEvent('click');
-
-      Object.defineProperty(event, 'target', { value: outsideElement, configurable: true });
-
-      const result = (config.allowOutsideClick as (e: MouseEvent) => boolean)(event);
-
-      expect(result).toBe(false);
-    });
-  });
-
-  describe('setReturnFocus', () => {
-    it('should return false when deactivated by click', () => {
-      mockDeactivatedByClick.current = true;
-
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const target = document.createElement('button');
-      const result = (config.setReturnFocus as (target: HTMLElement) => HTMLElement | false)(
-        target,
-      );
-
-      expect(result).toBe(false);
-    });
-
-    it('should return target when not deactivated by click', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const target = document.createElement('button');
-      const result = (config.setReturnFocus as (target: HTMLElement) => HTMLElement | false)(
-        target,
-      );
-
-      expect(result).toBe(target);
-    });
-  });
-
-  describe('onDeactivate', () => {
-    it('should call setIsTrapActive and handleClose', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      (config.onDeactivate as () => void)();
-
-      expect(mockSetIsTrapActive).toHaveBeenCalledWith(false);
-      expect(mockHandleClose).toHaveBeenCalled();
-    });
-  });
-
-  describe('onActivate', () => {
-    it('should call setIsTrapActive with true', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      (config.onActivate as () => void)();
-
-      expect(mockSetIsTrapActive).toHaveBeenCalledWith(true);
-    });
-  });
-
-  describe('fallbackFocus', () => {
-    it('should return contentRef when available', () => {
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const result = (config.fallbackFocus as () => HTMLElement)();
-
-      expect(result).toBe(mockContentRef.current);
-    });
-
-    it('should return triggerRef when contentRef is null', () => {
-      mockContentRef.current = null;
-
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const result = (config.fallbackFocus as () => HTMLElement)();
-
-      expect(result).toBe(mockTriggerRef.current);
-    });
-
-    it('should return document.body when both refs are null', () => {
-      mockContentRef.current = null;
-      mockTriggerRef.current = null;
-
-      const config = createConfig(
-        mockTriggerRef,
-        mockContentRef,
-        mockIsOpenRef,
-        mockDeactivatedByClick,
-        mockHandleClose,
-        mockSetIsTrapActive,
-      );
-
-      const result = (config.fallbackFocus as () => HTMLElement)();
-
-      expect(result).toBe(document.body);
-    });
-  });
-});

package/src/components/InfoBox/utils/focusTrapConfig.ts

@@ -1,59 +0,0 @@
-import type { RefObject } from 'react';
-
-import type { Options as FocusTrapOptions } from 'focus-trap';
-
-type FocusTrapConfigProps = {
-  isOpenRef: { current: boolean };
-  deactivatedByClick: { current: boolean };
-  triggerRef: RefObject<HTMLElement | null>;
-  contentRef: RefObject<HTMLElement | null>;
-  handleClose: () => void;
-  setIsTrapActive: (active: boolean) => void;
-};
-
-/**
- * Generate focus trap configuration options
- */
-export const getFocusTrapConfig = ({
-  isOpenRef,
-  deactivatedByClick,
-  triggerRef,
-  contentRef,
-  handleClose,
-  setIsTrapActive,
-}: FocusTrapConfigProps): FocusTrapOptions => ({
-  escapeDeactivates: () => {
-    deactivatedByClick.current = false;
-
-    if (isOpenRef.current) {
-      handleClose();
-    }
-
-    return false;
-  },
-  clickOutsideDeactivates: (e) => {
-    // Don't let focus trap handle trigger button clicks - let the button handle it
-    if (e.target && triggerRef.current?.contains(e.target as Node)) {
-      return false;
-    }
-
-    deactivatedByClick.current = true;
-
-    return true;
-  },
-  allowOutsideClick: (e) => {
-    // Allow clicks on the trigger button to pass through
-    return !!(e.target && triggerRef.current?.contains(e.target as Node));
-  },
-  // eslint-disable-next-line sonarjs/function-return-type
-  setReturnFocus: (target) => {
-    // Don't return focus if user clicked outside - it would steal focus from their click target
-    return deactivatedByClick.current ? false : target;
-  },
-  onDeactivate: () => {
-    setIsTrapActive(false);
-    handleClose();
-  },
-  onActivate: () => setIsTrapActive(true),
-  fallbackFocus: () => contentRef.current ?? triggerRef.current ?? document.body,
-});

package/src/components/InfoBox/utils/index.ts

@@ -1,2 +0,0 @@
-export { calculatePosition, calculateContentPosition, getTransformClasses } from './positionUtils';
-export { getFocusTrapConfig } from './focusTrapConfig';

package/src/components/InfoBox/utils/positionUtils.test.ts

@@ -1,170 +0,0 @@
-import {
-  POSITION_TOP_LEFT,
-  POSITION_TOP_RIGHT,
-  POSITION_BOTTOM_LEFT,
-  POSITION_BOTTOM_RIGHT,
-} from '../types';
-import { calculatePosition, calculateContentPosition, getTransformClasses } from './positionUtils';
-
-// Mock factory helper to avoid deep nesting
-const createMockRect = (top: number, left: number, width = 24, height = 24) => ({
-  top,
-  left,
-  bottom: top + height,
-  right: left + width,
-  width,
-  height,
-  x: left,
-  y: top,
-  toJSON: () => ({}),
-});
-
-describe('positionUtils', () => {
-  let mockElement: HTMLElement;
-
-  beforeEach(() => {
-    mockElement = document.createElement('button');
-
-    // Mock window dimensions
-    Object.defineProperty(globalThis, 'innerWidth', {
-      value: 1000,
-      writable: true,
-      configurable: true,
-    });
-    Object.defineProperty(globalThis, 'innerHeight', {
-      value: 800,
-      writable: true,
-      configurable: true,
-    });
-  });
-
-  describe('calculatePosition', () => {
-    it('should return forced position when provided', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(100, 100));
-
-      const result = calculatePosition(mockElement, POSITION_TOP_LEFT);
-
-      expect(result).toBe(POSITION_TOP_LEFT);
-    });
-
-    it('should calculate bottom-right for top-left quadrant', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(100, 100));
-
-      const result = calculatePosition(mockElement);
-
-      // top=100 < 400 (half of 800) -> bottom
-      // left=100 < 500 (half of 1000) -> right
-      expect(result).toBe(POSITION_BOTTOM_RIGHT);
-    });
-
-    it('should calculate top-left for bottom-right quadrant', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(700, 800));
-
-      const result = calculatePosition(mockElement);
-
-      // top=700 >= 400 (half of 800) -> top
-      // left=800 >= 500 (half of 1000) -> left
-      expect(result).toBe(POSITION_TOP_LEFT);
-    });
-
-    it('should calculate bottom-left for top-right quadrant', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(100, 800));
-
-      const result = calculatePosition(mockElement);
-
-      // top=100 < 400 (half of 800) -> bottom
-      // left=800 >= 500 (half of 1000) -> left
-      expect(result).toBe(POSITION_BOTTOM_LEFT);
-    });
-
-    it('should calculate top-right for bottom-left quadrant', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(700, 100));
-
-      const result = calculatePosition(mockElement);
-
-      // top=700 >= 400 (half of 800) -> top
-      // left=100 < 500 (half of 1000) -> right
-      expect(result).toBe(POSITION_TOP_RIGHT);
-    });
-  });
-
-  describe('calculateContentPosition', () => {
-    beforeEach(() => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(100, 100));
-    });
-
-    it('should calculate position for bottom-right', () => {
-      const result = calculateContentPosition(mockElement, POSITION_BOTTOM_RIGHT);
-
-      // bottom (124) + offset (8) = 132
-      // left = 100
-      expect(result.top).toBe(132);
-      expect(result.left).toBe(100);
-    });
-
-    it('should calculate position for bottom-left', () => {
-      const result = calculateContentPosition(mockElement, POSITION_BOTTOM_LEFT);
-
-      // bottom (124) + offset (8) = 132
-      // right = 124
-      expect(result.top).toBe(132);
-      expect(result.left).toBe(124);
-    });
-
-    it('should calculate position for top-right', () => {
-      const result = calculateContentPosition(mockElement, POSITION_TOP_RIGHT);
-
-      // top (100) - offset (8) = 92
-      // left = 100
-      expect(result.top).toBe(92);
-      expect(result.left).toBe(100);
-    });
-
-    it('should calculate position for top-left', () => {
-      const result = calculateContentPosition(mockElement, POSITION_TOP_LEFT);
-
-      // top (100) - offset (8) = 92
-      // right = 124
-      expect(result.top).toBe(92);
-      expect(result.left).toBe(124);
-    });
-
-    it('should clamp to minimum viewport padding', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(5, 5));
-
-      const result = calculateContentPosition(mockElement, 'top-left');
-
-      // Should be clamped to minimum 16px from edge
-      expect(result.top).toBeGreaterThanOrEqual(16);
-      expect(result.left).toBeGreaterThanOrEqual(16);
-    });
-
-    it('should clamp to maximum viewport bounds', () => {
-      mockElement.getBoundingClientRect = vi.fn(() => createMockRect(790, 990));
-
-      const result = calculateContentPosition(mockElement, 'bottom-right');
-
-      // Should be clamped to maximum (viewport - 16px padding)
-      expect(result.top).toBeLessThanOrEqual(800 - 16);
-      expect(result.left).toBeLessThanOrEqual(1000 - 16);
-    });
-  });
-
-  describe('getTransformClasses', () => {
-    it('should return empty string for bottom-right', () => {
-      expect(getTransformClasses(POSITION_BOTTOM_RIGHT)).toBe('');
-    });
-
-    it('should return x-transform for bottom-left', () => {
-      expect(getTransformClasses(POSITION_BOTTOM_LEFT)).toBe('-translate-x-full');
-    });
-
-    it('should return y-transform for top-right', () => {
-      expect(getTransformClasses(POSITION_TOP_RIGHT)).toBe('-translate-y-full');
-    });
-
-    it('should return both transforms for top-left', () => {
-      expect(getTransformClasses(POSITION_TOP_LEFT)).toBe('-translate-x-full -translate-y-full');
-    });
-  });
-});

package/src/components/InfoBox/utils/positionUtils.ts

@@ -1,89 +0,0 @@
-import type { Position } from '../types';
-import {
-  POSITION_TOP_LEFT,
-  POSITION_TOP_RIGHT,
-  POSITION_BOTTOM_LEFT,
-  POSITION_BOTTOM_RIGHT,
-} from '../types';
-
-const OFFSET = 8; // gap between trigger and content
-const VIEWPORT_PADDING = 16; // minimum distance from viewport edges
-
-/**
- * Calculate optimal position based on trigger location in viewport
- */
-export const calculatePosition = (
-  triggerElement: HTMLElement,
-  forcedPosition?: Position,
-): Position => {
-  if (forcedPosition) {
-    return forcedPosition;
-  }
-
-  const rect = triggerElement.getBoundingClientRect();
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-
-  const horizontal = rect.left < viewportWidth / 2 ? 'right' : 'left';
-  const vertical = rect.top < viewportHeight / 2 ? 'bottom' : 'top';
-
-  return `${vertical}-${horizontal}` as Position;
-};
-
-/**
- * Calculate absolute position for portal content with viewport clamping
- */
-export const calculateContentPosition = (
-  triggerElement: HTMLElement,
-  position: Position,
-): { top: number; left: number } => {
-  const rect = triggerElement.getBoundingClientRect();
-  let top: number;
-  let left: number;
-
-  switch (position) {
-    case POSITION_BOTTOM_LEFT:
-      top = rect.bottom + OFFSET;
-      left = rect.right;
-      break;
-    case POSITION_TOP_RIGHT:
-      top = rect.top - OFFSET;
-      left = rect.left;
-      break;
-    case POSITION_TOP_LEFT:
-      top = rect.top - OFFSET;
-      left = rect.right;
-      break;
-    case POSITION_BOTTOM_RIGHT:
-    default:
-      // POSITION_BOTTOM_RIGHT (default behavior)
-      top = rect.bottom + OFFSET;
-      left = rect.left;
-      break;
-  }
-
-  // Clamp to viewport bounds to prevent overflow
-  const maxLeft = window.innerWidth - VIEWPORT_PADDING;
-  const maxTop = window.innerHeight - VIEWPORT_PADDING;
-
-  left = Math.max(VIEWPORT_PADDING, Math.min(left, maxLeft));
-  top = Math.max(VIEWPORT_PADDING, Math.min(top, maxTop));
-
-  return { top, left };
-};
-
-/**
- * Get Tailwind transform classes based on position
- */
-export const getTransformClasses = (position: Position): string => {
-  switch (position) {
-    case POSITION_BOTTOM_LEFT:
-      return '-translate-x-full';
-    case POSITION_TOP_RIGHT:
-      return '-translate-y-full';
-    case POSITION_TOP_LEFT:
-      return '-translate-x-full -translate-y-full';
-    default:
-      return '';
-  }
-};