@asafarim/react-dropdowns 1.0.0

package/src/hooks/useDropdown.ts

@@ -0,0 +1,195 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { DropdownPlacement, DropdownPosition } from '../types';
+
+interface UseDropdownProps {
+  placement?: DropdownPlacement;
+  offset?: number;
+  closeOnSelect?: boolean;
+}
+
+export const useDropdown = ({
+  placement = 'bottom-start',
+  offset = 8,
+  closeOnSelect = true
+}: UseDropdownProps = {}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState<DropdownPosition>({});
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const calculatePosition = useCallback(() => {
+    if (!triggerRef.current || !menuRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const menuRect = menuRef.current.getBoundingClientRect();
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    let newPosition: DropdownPosition = {};
+
+    // Calculate base position based on placement
+    switch (placement) {
+      case 'top':
+        newPosition = {
+          bottom: viewport.height - triggerRect.top + offset,
+          left: triggerRect.left + (triggerRect.width - menuRect.width) / 2
+        };
+        break;
+      case 'top-start':
+        newPosition = {
+          bottom: viewport.height - triggerRect.top + offset,
+          left: triggerRect.left
+        };
+        break;
+      case 'top-end':
+        newPosition = {
+          bottom: viewport.height - triggerRect.top + offset,
+          right: viewport.width - triggerRect.right
+        };
+        break;
+      case 'bottom':
+        newPosition = {
+          top: triggerRect.bottom + offset,
+          left: triggerRect.left + (triggerRect.width - menuRect.width) / 2
+        };
+        break;
+      case 'bottom-start':
+        newPosition = {
+          top: triggerRect.bottom + offset,
+          left: triggerRect.left
+        };
+        break;
+      case 'bottom-end':
+        newPosition = {
+          top: triggerRect.bottom + offset,
+          right: viewport.width - triggerRect.right
+        };
+        break;
+      case 'left':
+        newPosition = {
+          top: triggerRect.top + (triggerRect.height - menuRect.height) / 2,
+          right: viewport.width - triggerRect.left + offset
+        };
+        break;
+      case 'left-start':
+        newPosition = {
+          top: triggerRect.top,
+          right: viewport.width - triggerRect.left + offset
+        };
+        break;
+      case 'left-end':
+        newPosition = {
+          bottom: viewport.height - triggerRect.bottom,
+          right: viewport.width - triggerRect.left + offset
+        };
+        break;
+      case 'right':
+        newPosition = {
+          top: triggerRect.top + (triggerRect.height - menuRect.height) / 2,
+          left: triggerRect.right + offset
+        };
+        break;
+      case 'right-start':
+        newPosition = {
+          top: triggerRect.top,
+          left: triggerRect.right + offset
+        };
+        break;
+      case 'right-end':
+        newPosition = {
+          bottom: viewport.height - triggerRect.bottom,
+          left: triggerRect.right + offset
+        };
+        break;
+    }
+
+    // Adjust for viewport boundaries
+    if (newPosition.left !== undefined) {
+      if (newPosition.left < 0) {
+        newPosition.left = 8;
+      } else if (newPosition.left + menuRect.width > viewport.width) {
+        newPosition.left = viewport.width - menuRect.width - 8;
+      }
+    }
+
+    if (newPosition.right !== undefined) {
+      if (newPosition.right < 0) {
+        newPosition.right = 8;
+      }
+    }
+
+    if (newPosition.top !== undefined) {
+      if (newPosition.top < 0) {
+        newPosition.top = 8;
+      } else if (newPosition.top + menuRect.height > viewport.height) {
+        newPosition.top = viewport.height - menuRect.height - 8;
+      }
+    }
+
+    if (newPosition.bottom !== undefined) {
+      if (newPosition.bottom < 0) {
+        newPosition.bottom = 8;
+      }
+    }
+
+    setPosition(newPosition);
+  }, [placement, offset]);
+
+  const toggle = useCallback(() => {
+    setIsOpen(prev => !prev);
+  }, []);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleItemClick = useCallback(() => {
+    if (closeOnSelect) {
+      close();
+    }
+  }, [closeOnSelect, close]);
+
+  // Recalculate position when opened
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay to ensure DOM is updated
+      const timer = setTimeout(calculatePosition, 0);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, calculatePosition]);
+
+  // Recalculate position on window resize and scroll
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleResize = () => calculatePosition();
+    const handleScroll = () => calculatePosition();
+    
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    document.addEventListener('scroll', handleScroll, { passive: true });
+    
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', handleScroll);
+      document.removeEventListener('scroll', handleScroll);
+    };
+  }, [isOpen, calculatePosition]);
+
+  return {
+    isOpen,
+    position,
+    triggerRef,
+    menuRef,
+    toggle,
+    open,
+    close,
+    handleItemClick
+  };
+};

package/src/hooks/useKeyboardNavigation.ts

@@ -0,0 +1,108 @@
+import { useEffect, useCallback, RefObject } from 'react';
+
+interface UseKeyboardNavigationProps {
+  isOpen: boolean;
+  menuRef: RefObject<HTMLElement>;
+  onClose: () => void;
+  onSelect?: (index: number) => void;
+}
+
+export const useKeyboardNavigation = ({
+  isOpen,
+  menuRef,
+  onClose,
+  onSelect
+}: UseKeyboardNavigationProps) => {
+  const getMenuItems = useCallback(() => {
+    if (!menuRef.current) return [];
+    return Array.from(
+      menuRef.current.querySelectorAll('[role="menuitem"]:not([disabled])')
+    ) as HTMLElement[];
+  }, [menuRef]);
+
+  const focusItem = useCallback((index: number) => {
+    const items = getMenuItems();
+    if (items[index]) {
+      items[index].focus();
+    }
+  }, [getMenuItems]);
+
+  const getCurrentIndex = useCallback(() => {
+    const items = getMenuItems();
+    const activeElement = document.activeElement as HTMLElement;
+    return items.indexOf(activeElement);
+  }, [getMenuItems]);
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (!isOpen) return;
+
+    const items = getMenuItems();
+    const currentIndex = getCurrentIndex();
+
+    switch (event.key) {
+      case 'Escape':
+        event.preventDefault();
+        onClose();
+        break;
+
+      case 'ArrowDown':
+        event.preventDefault();
+        if (items.length > 0) {
+          const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+          focusItem(nextIndex);
+        }
+        break;
+
+      case 'ArrowUp':
+        event.preventDefault();
+        if (items.length > 0) {
+          const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+          focusItem(prevIndex);
+        }
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        if (items.length > 0) {
+          focusItem(0);
+        }
+        break;
+
+      case 'End':
+        event.preventDefault();
+        if (items.length > 0) {
+          focusItem(items.length - 1);
+        }
+        break;
+
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (currentIndex >= 0 && onSelect) {
+          onSelect(currentIndex);
+        }
+        break;
+
+      case 'Tab':
+        onClose();
+        break;
+    }
+  }, [isOpen, getMenuItems, getCurrentIndex, focusItem, onClose, onSelect]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, handleKeyDown]);
+
+  // Focus first item when menu opens
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        focusItem(0);
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, focusItem]);
+};

package/src/index.ts

@@ -0,0 +1,26 @@
+// Import styles
+import './styles/dropdown.css';
+
+// Export components
+export { Dropdown } from './components/Dropdown';
+export { DropdownItem } from './components/DropdownItem';
+export { DropdownMenu } from './components/DropdownMenu';
+export { DropdownTrigger } from './components/DropdownTrigger';
+
+// Export hooks
+export { useDropdown } from './hooks/useDropdown';
+export { useClickOutside } from './hooks/useClickOutside';
+export { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
+
+// Export types
+export type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownMenuProps,
+  DropdownTriggerProps,
+  DropdownPosition,
+  DropdownPlacement,
+  DropdownSize,
+  DropdownVariant,
+  DropdownItemData
+} from './types';

package/src/styles/dropdown.css

@@ -0,0 +1,231 @@
+/* Import design tokens */
+@import '@asafarim/design-tokens/css/index.css';
+
+/* Dropdown Container */
+.asm-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Trigger */
+.asm-dropdown-trigger {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.asm-dropdown-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.asm-dropdown-trigger:focus-visible {
+  outline: 2px solid var(--asm-color-primary-500);
+  outline-offset: 2px;
+  border-radius: var(--asm-radius-sm);
+}
+
+/* Dropdown Menu */
+.asm-dropdown-menu {
+  background-color: var(--asm-color-surface);
+  border: 1px solid var(--asm-color-border);
+  border-radius: var(--asm-radius-lg);
+  box-shadow: var(--asm-effect-shadow-lg);
+  padding: var(--asm-space-1);
+  min-width: 160px;
+  max-width: 320px;
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: var(--asm-z-dropdown);
+  
+  /* Animation */
+  animation: asm-dropdown-enter 0.15s ease-out;
+  transform-origin: top;
+}
+
+@keyframes asm-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Size variants */
+.asm-dropdown-menu--sm {
+  min-width: 120px;
+  padding: var(--asm-space-0-5);
+}
+
+.asm-dropdown-menu--md {
+  min-width: 160px;
+  padding: var(--asm-space-1);
+}
+
+.asm-dropdown-menu--lg {
+  min-width: 200px;
+  padding: var(--asm-space-1-5);
+}
+
+/* Dropdown Item */
+.asm-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--asm-space-2);
+  width: 100%;
+  padding: var(--asm-space-2) var(--asm-space-3);
+  border: none;
+  background: transparent;
+  color: var(--asm-color-text);
+  font-size: var(--asm-font-size-sm);
+  font-weight: var(--asm-font-weight-400);
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--asm-radius-md);
+  transition: var(--asm-transition-fade);
+  min-height: 36px;
+}
+
+.asm-dropdown-item:hover:not(:disabled) {
+  background-color: var(--asm-color-button-ghost-bg-hover);
+  color: var(--asm-color-text);
+}
+
+.asm-dropdown-item:focus {
+  outline: none;
+  background-color: var(--asm-color-button-ghost-bg-hover);
+  color: var(--asm-color-text);
+}
+
+.asm-dropdown-item:active:not(:disabled) {
+  background-color: var(--asm-color-button-ghost-bg-hover);
+}
+
+/* Dropdown Item States */
+.asm-dropdown-item--disabled {
+  color: var(--asm-color-text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.asm-dropdown-item--danger {
+  color: var(--asm-color-danger-600);
+}
+
+.asm-dropdown-item--danger:hover:not(:disabled) {
+  background-color: var(--asm-color-danger-50);
+  color: var(--asm-color-danger-700);
+}
+
+.asm-dropdown-item--danger:focus {
+  background-color: var(--asm-color-danger-50);
+  color: var(--asm-color-danger-700);
+}
+
+/* Dropdown Item Elements */
+.asm-dropdown-item__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.asm-dropdown-item__label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dropdown Divider */
+.asm-dropdown-divider {
+  height: 1px;
+  background-color: var(--asm-color-border);
+  margin: var(--asm-space-1) 0;
+}
+
+/* Dark theme support */
+[data-theme="dark"] .asm-dropdown-menu {
+  background-color: var(--asm-color-surface);
+  border-color: var(--asm-color-border);
+  box-shadow: var(--asm-effect-shadow-lg);
+}
+
+[data-theme="dark"] .asm-dropdown-item {
+  color: var(--asm-color-text);
+}
+
+[data-theme="dark"] .asm-dropdown-item:hover:not(:disabled) {
+  background-color: var(--asm-color-button-ghost-bg-hover);
+}
+
+[data-theme="dark"] .asm-dropdown-item--danger {
+  color: var(--asm-color-danger-400);
+}
+
+[data-theme="dark"] .asm-dropdown-item--danger:hover:not(:disabled) {
+  background-color: var(--asm-color-danger-900);
+  color: var(--asm-color-danger-300);
+}
+
+/* Mobile optimizations */
+@media (max-width: 640px) {
+  .asm-dropdown-menu {
+    min-width: 200px;
+    max-width: calc(100vw - 32px);
+    max-height: 60vh;
+  }
+  
+  .asm-dropdown-item {
+    padding: var(--asm-space-3) var(--asm-space-4);
+    min-height: 44px;
+    font-size: var(--asm-font-size-md);
+  }
+  
+  .asm-dropdown-item__icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .asm-dropdown-item {
+    min-height: 44px;
+    padding: var(--asm-space-3) var(--asm-space-4);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .asm-dropdown-menu {
+    animation: none;
+  }
+  
+  .asm-dropdown-item {
+    transition: none;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .asm-dropdown-menu {
+    border-width: 2px;
+  }
+  
+  .asm-dropdown-item:focus {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+}

package/src/types/css-modules.d.ts

@@ -0,0 +1,14 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/types/index.ts

@@ -0,0 +1,86 @@
+import { ReactNode, MouseEvent, KeyboardEvent } from 'react';
+
+export type DropdownPlacement = 
+  | 'top' | 'top-start' | 'top-end'
+  | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end'
+  | 'right' | 'right-start' | 'right-end';
+
+export type DropdownSize = 'sm' | 'md' | 'lg';
+export type DropdownVariant = 
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'ghost'
+  | 'outline'
+  | 'link'
+  | 'brand';
+
+export interface DropdownPosition {
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+  transform?: string;
+}
+
+export interface DropdownItemData {
+  id?: string;
+  label: string;
+  value?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  danger?: boolean;
+  divider?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export interface DropdownProps {
+  children: ReactNode;
+  items?: DropdownItemData[];
+  isOpen?: boolean;
+  onToggle?: (isOpen: boolean) => void;
+  placement?: DropdownPlacement;
+  size?: DropdownSize;
+  variant?: DropdownVariant;
+  disabled?: boolean;
+  closeOnSelect?: boolean;
+  showChevron?: boolean;
+  className?: string;
+  'data-testid'?: string;
+}
+
+export interface DropdownItemProps {
+  children?: ReactNode;
+  label?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  danger?: boolean;
+  divider?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  'data-testid'?: string;
+}
+
+export interface DropdownMenuProps {
+  children: ReactNode;
+  isOpen: boolean;
+  position: DropdownPosition;
+  size?: DropdownSize;
+  className?: string;
+  'data-testid'?: string;
+}
+
+export interface DropdownTriggerProps {
+  children: ReactNode;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  variant?: DropdownVariant;
+  size?: DropdownSize;
+  className?: string;
+  'data-testid'?: string;
+}