@asafarim/react-dropdowns 1.0.0

package/src/components/Dropdown.tsx

@@ -0,0 +1,158 @@
+import React, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { DropdownProps } from '../types';
+import { useDropdown } from '../hooks/useDropdown';
+import { useClickOutside } from '../hooks/useClickOutside';
+import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
+import { DropdownMenu } from './DropdownMenu';
+import { DropdownItem } from './DropdownItem';
+import { DropdownTrigger } from './DropdownTrigger';
+
+export const Dropdown: React.FC<DropdownProps> = ({
+  children,
+  items = [],
+  isOpen: controlledIsOpen,
+  onToggle,
+  placement = 'bottom-start',
+  size = 'md',
+  variant = 'primary',
+  disabled = false,
+  closeOnSelect = true,
+  showChevron = true,
+  className = '',
+  'data-testid': testId
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  const {
+    isOpen: internalIsOpen,
+    position,
+    triggerRef,
+    menuRef,
+    toggle,
+    close,
+    handleItemClick
+  } = useDropdown({
+    placement,
+    closeOnSelect
+  });
+
+  // Use controlled or internal state
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  
+  const handleToggle = () => {
+    if (disabled) return;
+    
+    if (onToggle) {
+      onToggle(!isOpen);
+    } else {
+      toggle();
+    }
+  };
+
+  const handleClose = () => {
+    if (onToggle) {
+      onToggle(false);
+    } else {
+      close();
+    }
+  };
+
+  const handleItemSelect = (index: number) => {
+    const item = items[index];
+    if (item && !item.disabled && item.onClick) {
+      item.onClick({} as React.MouseEvent<HTMLButtonElement>);
+    }
+    handleItemClick();
+  };
+
+  // Click outside to close
+  useClickOutside({
+    ref: containerRef,
+    handler: handleClose,
+    enabled: isOpen
+  });
+
+  // Keyboard navigation
+  useKeyboardNavigation({
+    isOpen,
+    menuRef,
+    onClose: handleClose,
+    onSelect: handleItemSelect
+  });
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleToggle();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (!isOpen) {
+        handleToggle();
+      }
+    }
+  };
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`asm-dropdown ${className}`}
+      data-testid={testId}
+    >
+      <DropdownTrigger
+        ref={triggerRef}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        variant={variant}
+        size={size}
+      >
+        {children}
+        {showChevron && (
+          <svg 
+            width="12" 
+            height="12" 
+            viewBox="0 0 12 12" 
+            fill="currentColor"
+            style={{ marginLeft: 'var(--asm-space-1)' }}
+          >
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+          </svg>
+        )}
+      </DropdownTrigger>
+
+      {isOpen && createPortal(
+        <DropdownMenu
+          ref={menuRef}
+          isOpen={isOpen}
+          position={position}
+          size={size}
+          data-testid={testId ? `${testId}-menu` : undefined}
+        >
+          {items.map((item, index) => (
+            <React.Fragment key={item.id || index}>
+              {item.divider ? (
+                <div className="asm-dropdown-divider" />
+              ) : (
+                <DropdownItem
+                  label={item.label}
+                  icon={item.icon}
+                  disabled={item.disabled}
+                  danger={item.danger}
+                  onClick={(event) => {
+                    if (item.onClick) {
+                      item.onClick(event);
+                    }
+                    handleItemClick();
+                  }}
+                  data-testid={item.id ? `${testId}-item-${item.id}` : undefined}
+                />
+              )}
+            </React.Fragment>
+          ))}
+        </DropdownMenu>,
+        document.body
+      )}
+    </div>
+  );
+};

package/src/components/DropdownItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { DropdownItemProps } from '../types';
+
+export const DropdownItem: React.FC<DropdownItemProps> = ({
+  children,
+  label,
+  icon,
+  disabled = false,
+  danger = false,
+  divider = false,
+  onClick,
+  className = '',
+  'data-testid': testId
+}) => {
+  if (divider) {
+    return <div className="asm-dropdown-divider" data-testid={testId} />;
+  }
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    onClick?.(event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (!disabled && onClick) {
+        onClick(event as any);
+      }
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className={`asm-dropdown-item ${danger ? 'asm-dropdown-item--danger' : ''} ${disabled ? 'asm-dropdown-item--disabled' : ''} ${className}`}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+      role="menuitem"
+      tabIndex={-1}
+      data-testid={testId}
+    >
+      {icon && (
+        <span className="asm-dropdown-item__icon">
+          {icon}
+        </span>
+      )}
+      <span className="asm-dropdown-item__label">
+        {label || children}
+      </span>
+    </button>
+  );
+};

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+import { DropdownMenuProps } from '../types';
+
+export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(({
+  children,
+  isOpen,
+  position,
+  size = 'md',
+  className = '',
+  'data-testid': testId
+}, ref) => {
+  if (!isOpen) return null;
+
+  const positionStyles: React.CSSProperties = {
+    position: 'fixed',
+    zIndex: 1000,
+    ...position
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={`asm-dropdown-menu asm-dropdown-menu--${size} ${className}`}
+      style={positionStyles}
+      role="menu"
+      aria-orientation="vertical"
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+});
+
+DropdownMenu.displayName = 'DropdownMenu';

package/src/components/DropdownTrigger.module.css

@@ -0,0 +1,204 @@
+@import "@asafarim/design-tokens/css/index.css";
+
+.trigger {
+  font-family: var(--asm-font-family-primary);
+  font-size: var(--asm-font-size-md);
+  font-weight: var(--asm-font-weight-500);
+  border: none;
+  border-radius: var(--asm-radius-md);
+  cursor: pointer;
+  transition: all var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--asm-space-2);
+  white-space: nowrap;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--asm-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Size variants */
+.sm {
+  padding: calc(var(--asm-space-control-padding-y) * 0.75) calc(var(--asm-space-control-padding-x) * 0.75);
+  font-size: var(--asm-font-size-sm);
+}
+
+.md {
+  padding: var(--asm-space-control-padding-y) var(--asm-space-control-padding-x);
+  font-size: var(--asm-font-size-md);
+}
+
+.lg {
+  padding: calc(var(--asm-space-control-padding-y) * 1.25) calc(var(--asm-space-control-padding-x) * 1.25);
+  font-size: var(--asm-font-size-lg);
+}
+
+/* Primary variant */
+.primary {
+  background-color: var(--asm-color-button-primary-bg);
+  color: var(--asm-color-button-primary-text);
+  border: 1px solid transparent;
+}
+
+.primary:hover:not(:disabled) {
+  background-color: var(--asm-color-button-primary-bg-hover);
+}
+
+.primary:active:not(:disabled) {
+  background-color: var(--asm-color-button-primary-bg-active);
+}
+
+/* Secondary variant */
+.secondary {
+  background-color: var(--asm-color-button-secondary-bg);
+  color: var(--asm-color-button-secondary-text);
+  border: 1px solid var(--asm-color-border);
+}
+
+.secondary:hover:not(:disabled) {
+  border-color: var(--asm-color-text);
+  background-color: var(--asm-color-surface-muted);
+}
+
+.secondary:active:not(:disabled) {
+  background-color: var(--asm-color-surface-muted);
+}
+
+/* Success variant */
+.success {
+  background-color: var(--asm-color-success-400);
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+
+.success:hover:not(:disabled) {
+  background-color: var(--asm-color-success-500);
+}
+
+.success:active:not(:disabled) {
+  background-color: var(--asm-color-success-600);
+}
+
+/* Warning variant */
+.warning {
+  background-color: var(--asm-color-warning-400);
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+
+.warning:hover:not(:disabled) {
+  background-color: var(--asm-color-warning-500);
+}
+
+.warning:active:not(:disabled) {
+  background-color: var(--asm-color-warning-600);
+}
+
+/* Danger variant */
+.danger {
+  background-color: var(--asm-color-button-destructive-bg);
+  color: var(--asm-color-button-destructive-text);
+  border: 1px solid transparent;
+}
+
+.danger:hover:not(:disabled) {
+  background-color: var(--asm-color-danger-500);
+}
+
+.danger:active:not(:disabled) {
+  background-color: var(--asm-color-danger-600);
+}
+
+/* Info variant */
+.info {
+  background-color: var(--asm-color-info-400);
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+
+.info:hover:not(:disabled) {
+  background-color: var(--asm-color-info-500);
+}
+
+.info:active:not(:disabled) {
+  background-color: var(--asm-color-info-600);
+}
+
+/* Ghost variant */
+.ghost {
+  background-color: transparent;
+  color: var(--asm-color-text);
+  border: 1px solid transparent;
+}
+
+.ghost:hover:not(:disabled) {
+  background-color: var(--asm-color-button-ghost-bg-hover);
+}
+
+.ghost:active:not(:disabled) {
+  background-color: var(--asm-color-button-ghost-bg-hover);
+}
+
+/* Outline variant */
+.outline {
+  background-color: transparent;
+  color: var(--asm-color-text);
+  border: 1px solid var(--asm-color-border);
+}
+
+.outline:hover:not(:disabled) {
+  border-color: var(--asm-color-text);
+  background-color: var(--asm-color-surface-muted);
+}
+
+.outline:active:not(:disabled) {
+  background-color: var(--asm-color-surface-muted);
+}
+
+/* Link variant */
+.link {
+  background-color: transparent;
+  color: var(--asm-color-primary-500);
+  border: none;
+  text-decoration: none;
+  padding: 0;
+}
+
+.link:hover:not(:disabled) {
+  text-decoration: underline;
+  color: var(--asm-color-primary-600);
+}
+
+.link:active:not(:disabled) {
+  color: var(--asm-color-primary-700);
+}
+
+/* Brand variant */
+.brand {
+  background-color: var(--asm-color-brand-primary-500);
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+
+.brand:hover:not(:disabled) {
+  background-color: var(--asm-color-brand-primary-600);
+}
+
+.brand:active:not(:disabled) {
+  background-color: var(--asm-color-brand-primary-700);
+}
+
+/* Disabled state */
+.trigger:disabled {
+  background-color: var(--asm-color-button-disabled-bg);
+  color: var(--asm-color-button-disabled-text);
+  border-color: transparent;
+}

package/src/components/DropdownTrigger.module.css.d.ts

@@ -0,0 +1,14 @@
+export const trigger: string;
+export const sm: string;
+export const md: string;
+export const lg: string;
+export const primary: string;
+export const secondary: string;
+export const success: string;
+export const warning: string;
+export const danger: string;
+export const info: string;
+export const ghost: string;
+export const outline: string;
+export const link: string;
+export const brand: string;

package/src/components/DropdownTrigger.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { DropdownTriggerProps } from '../types';
+import styles from './DropdownTrigger.module.css';
+
+export const DropdownTrigger = React.forwardRef<HTMLElement, DropdownTriggerProps>(({
+  children,
+  onClick,
+  onKeyDown,
+  disabled = false,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+  'data-testid': testId
+}, ref) => {
+  const variantClass = styles[variant] || styles.primary;
+  const sizeClass = styles[size] || styles.md;
+  const triggerClass = `${styles.trigger} ${variantClass} ${sizeClass} ${className}`.trim();
+
+  // Check if children is already a button element
+  const isButtonChild = React.isValidElement(children) && 
+    (children.type === 'button' || 
+     (typeof children.type === 'string' && children.type === 'button'));
+
+  if (isButtonChild) {
+    // Clone the button and add our props
+    return React.cloneElement(children as React.ReactElement<any>, {
+      className: `${(children as any).props.className || ''} ${triggerClass}`.trim(),
+      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(e);
+        (children as any).props.onClick?.(e);
+      },
+      onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        onKeyDown?.(e);
+        (children as any).props.onKeyDown?.(e);
+      },
+      disabled: disabled || (children as any).props.disabled,
+      'aria-haspopup': 'menu',
+      'aria-expanded': false,
+      'data-testid': testId || (children as any).props['data-testid'],
+      ref: ref
+    });
+  }
+
+  // For non-button children, wrap in a button
+  return (
+    <button
+      ref={ref as React.RefObject<HTMLButtonElement>}
+      type="button"
+      className={triggerClass}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      aria-haspopup="menu"
+      aria-expanded={false}
+      data-testid={testId}
+    >
+      {children}
+    </button>
+  );
+});

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,34 @@
+import { useEffect, RefObject } from 'react';
+
+interface UseClickOutsideProps {
+  ref: RefObject<HTMLDivElement>;
+  handler: () => void;
+  enabled?: boolean;
+}
+
+export const useClickOutside = ({ ref, handler, enabled = true }: UseClickOutsideProps) => {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleMouseDown = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler();
+      }
+    };
+
+    const handleTouchStart = (event: TouchEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler();
+      }
+    };
+
+    // Add event listeners
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('touchstart', handleTouchStart);
+
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, [ref, handler, enabled]);
+};