@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,352 @@
+import React, { useRef, useState, useCallback, createContext, useContext, useEffect } from 'react';
+import { DROPDOWN } from '../../lib/constants/components';
+import type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownDividerProps,
+  DropdownHeaderProps,
+} from '../../lib/types/components';
+
+// Context type definition
+export type DropdownContextType = {
+  isOpen: boolean;
+  close: () => void;
+  id: string;
+  trigger: string;
+};
+
+// Create context for dropdown state management
+const DropdownContext = createContext<DropdownContextType>({
+  isOpen: false,
+  close: () => {},
+  id: '',
+  trigger: 'click',
+});
+
+/**
+ * DropdownItem component for menu items
+ */
+export const DropdownItem: React.FC<DropdownItemProps> = ({
+  children,
+  href,
+  active = false,
+  disabled = false,
+  icon,
+  onClick,
+  className = '',
+  LinkComponent,
+  ...props
+}) => {
+  const { close } = useContext(DropdownContext);
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (onClick) {
+      onClick(e);
+    }
+
+    // Always close the dropdown when an item is clicked
+    close();
+  };
+
+  const itemClasses = [
+    'c-dropdown__menu-item',
+    active ? 'is-active' : '',
+    disabled ? 'is-disabled' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const linkProps = {
+    href,
+    className: itemClasses,
+    onClick: handleClick,
+    role: 'menuitem',
+    tabIndex: 0,
+    ...props,
+  };
+
+  if (href && !disabled) {
+    return (
+      <li>
+        {LinkComponent ? (
+          <LinkComponent {...linkProps}>
+            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+            {children}
+          </LinkComponent>
+        ) : (
+          <a {...linkProps}>
+            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+            {children}
+          </a>
+        )}
+      </li>
+    );
+  }
+
+  return (
+    <li>
+      <button
+        type="button"
+        className={itemClasses}
+        onClick={handleClick}
+        disabled={disabled}
+        role="menuitem"
+        tabIndex={0}
+        {...props}
+      >
+        {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+        {children}
+      </button>
+    </li>
+  );
+};
+
+/**
+ * DropdownDivider component for separating groups of items
+ */
+export const DropdownDivider: React.FC<DropdownDividerProps> = ({ className = '' }) => {
+  return <li className={`c-dropdown__divider ${className}`} role="separator" />;
+};
+
+/**
+ * DropdownHeader component for section headers
+ */
+export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, className = '' }) => {
+  return <li className={`c-dropdown__header ${className}`}>{children}</li>;
+};
+
+/**
+ * Dropdown component for creating dropdown menus
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  children,
+  menu,
+  placement = 'bottom-start',
+  trigger = 'click',
+  offset = DROPDOWN.DEFAULTS.OFFSET,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  maxHeight,
+  minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH,
+  variant,
+  className = '',
+  ...props
+}) => {
+  // Set up controlled vs uncontrolled state
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(false);
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+
+  // Create refs
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Generate unique ID
+  const dropdownId = useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current;
+
+  // State change handlers
+  const setIsOpen = useCallback(
+    (nextIsOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledIsOpen(nextIsOpen);
+      }
+      if (onOpenChange) {
+        onOpenChange(nextIsOpen);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    // Return focus to the toggle button after closing
+    setTimeout(() => {
+      toggleRef.current?.focus();
+    }, 0);
+  }, [setIsOpen]);
+
+  // Click outside handler
+  useEffect(() => {
+    if (!isOpen || !closeOnClickOutside) return undefined;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        close();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, closeOnClickOutside, close]);
+
+  // Escape key handler
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return undefined;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, closeOnEscape, close]);
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!menuRef.current) return;
+
+    const focusableItems = menuRef.current.querySelectorAll<HTMLElement>(
+      '[role="menuitem"]:not([disabled])'
+    );
+    if (!focusableItems.length) return;
+
+    const currentIndex = Array.from(focusableItems).findIndex(
+      item => item === document.activeElement
+    );
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (currentIndex < focusableItems.length - 1) {
+          focusableItems[currentIndex + 1]?.focus();
+        } else {
+          focusableItems[0]?.focus();
+        }
+        break;
+
+      case 'ArrowUp':
+        e.preventDefault();
+        if (currentIndex > 0) {
+          focusableItems[currentIndex - 1]?.focus();
+        } else {
+          focusableItems[focusableItems.length - 1]?.focus();
+        }
+        break;
+
+      case 'Home':
+        e.preventDefault();
+        focusableItems[0]?.focus();
+        break;
+
+      case 'End':
+        e.preventDefault();
+        focusableItems[focusableItems.length - 1]?.focus();
+        break;
+    }
+  }, []);
+
+  // Event handlers
+  const handleToggleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (trigger === 'click') {
+        e.preventDefault();
+        e.stopPropagation();
+        toggle();
+      }
+    },
+    [trigger, toggle]
+  );
+
+  const handleToggleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') && !isOpen) {
+        e.preventDefault();
+        setIsOpen(true);
+
+        // Only focus the first menu item when using keyboard navigation
+        if (e.key === 'ArrowDown' && menuRef.current) {
+          setTimeout(() => {
+            const firstItem = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]');
+            firstItem?.focus();
+          }, 100);
+        }
+      } else if (e.key === 'Escape' && isOpen) {
+        e.preventDefault();
+        close();
+      }
+    },
+    [isOpen, setIsOpen, close]
+  );
+
+  // Hover handlers for trigger="hover"
+  const handleHoverOpen = useCallback(() => {
+    if (trigger === 'hover') {
+      setIsOpen(true);
+    }
+  }, [trigger, setIsOpen]);
+
+  // Build class names
+  const dropdownClasses = [
+    'c-dropdown',
+    trigger === 'click' ? 'c-dropdown--onclick' : '',
+    variant ? `c-dropdown--${variant}` : '',
+    isOpen ? 'is-open' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Menu styles
+  const menuStyleProps: React.CSSProperties = {};
+  if (maxHeight) menuStyleProps.maxHeight = maxHeight;
+  if (minWidth !== undefined) {
+    menuStyleProps.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
+  }
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={dropdownClasses}
+      onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
+      {...props}
+    >
+      <div
+        ref={toggleRef}
+        className="c-dropdown__toggle"
+        onClick={handleToggleClick}
+        onKeyDown={handleToggleKeyDown}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={dropdownId}
+        tabIndex={0}
+      >
+        {children}
+      </div>
+
+      <div
+        ref={menuRef}
+        id={dropdownId}
+        className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''}`}
+        role="menu"
+        aria-orientation="vertical"
+        aria-hidden={!isOpen}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="c-dropdown__menu-inner" style={menuStyleProps}>
+          <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
+            <ul className="c-dropdown__menu">{menu}</ul>
+          </DropdownContext.Provider>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
+
+Dropdown.displayName = 'Dropdown';
+
+export default Dropdown;

package/src/components/Dropdown/index.ts

@@ -0,0 +1,14 @@
+import { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from './Dropdown';
+import type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownDividerProps,
+  DropdownHeaderProps,
+} from '../../lib/types/components';
+
+// Export React components
+export { Dropdown, DropdownItem, DropdownDivider, DropdownHeader };
+export { default } from './Dropdown';
+
+// Export types for React components
+export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };

package/src/components/Dropdown/readme.md

@@ -0,0 +1,151 @@
+# Dropdown Component
+
+The Dropdown component provides a toggleable menu that displays a list of actions or navigation options. It offers a space-efficient way to organize related actions and navigation links.
+
+## Features
+
+- Multiple trigger methods (click, hover)
+- Customizable positioning
+- Support for items with icons
+- Headers and dividers for organizing content
+- Keyboard navigation support
+- ARIA attributes for accessibility
+- Automatic positioning based on available space
+- Responsive design
+
+## Usage
+
+### React Component
+
+```jsx
+import { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from '@shohojdhara/atomix';
+
+function App() {
+  return (
+    <Dropdown
+      trigger="click"
+      placement="bottom-start"
+      children={
+        <button className="c-btn c-btn--primary">
+          Dropdown <i className="c-dropdown__toggle-icon icon-atomix-caret-down"></i>
+        </button>
+      }
+      menu={
+        <>
+          <DropdownHeader>Options</DropdownHeader>
+          <DropdownItem>Profile</DropdownItem>
+          <DropdownItem>Settings</DropdownItem>
+          <DropdownDivider />
+          <DropdownItem href="#logout">Logout</DropdownItem>
+        </>
+      }
+    />
+  );
+}
+```
+
+### Vanilla JS
+
+```html
+<div class="c-dropdown js-atomix-dropdown" data-dropdown-trigger="click" data-dropdown-placement="bottom-start">
+  <button class="c-dropdown__toggle c-btn c-btn--primary">
+    Dropdown <i class="c-dropdown__toggle-icon icon-atomix-caret-down"></i>
+  </button>
+  <div class="c-dropdown__menu-wrapper">
+    <div class="c-dropdown__menu-inner">
+      <ul class="c-dropdown__menu">
+        <li class="c-dropdown__header">Options</li>
+        <li class="c-dropdown__menu-item">
+          <button class="c-dropdown__menu-link">Profile</button>
+        </li>
+        <li class="c-dropdown__menu-item">
+          <button class="c-dropdown__menu-link">Settings</button>
+        </li>
+        <li class="c-dropdown__divider"></li>
+        <li class="c-dropdown__menu-item">
+          <a href="#logout" class="c-dropdown__menu-link">Logout</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Auto-initialization
+  Atomix.initDropdowns();
+  
+  // Manual initialization
+  const dropdown = new Atomix.Dropdown(document.querySelector('.c-dropdown'), {
+    placement: 'bottom-start',
+    trigger: 'click',
+    offset: 4,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    minWidth: '10rem',
+    maxHeight: '20rem'
+  });
+  
+  // API usage
+  dropdown.open();
+  dropdown.close();
+  dropdown.toggle();
+  dropdown.destroy();
+</script>
+```
+
+## Props (React)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | ReactNode | - | The trigger element that will toggle the dropdown |
+| `menu` | ReactNode | - | The content of the dropdown menu |
+| `trigger` | 'click' \| 'hover' | 'click' | How the dropdown is triggered |
+| `placement` | DropdownPlacement | 'bottom-start' | The position of the dropdown relative to the trigger |
+| `defaultOpen` | boolean | false | Whether the dropdown is initially open |
+| `isOpen` | boolean | - | Controlled state of the dropdown |
+| `onOpenChange` | (isOpen: boolean) => void | - | Callback when the dropdown open state changes |
+| `offset` | number | 4 | Offset from the trigger element (in pixels) |
+| `closeOnClickOutside` | boolean | true | Whether to close the dropdown when clicking outside |
+| `closeOnEscape` | boolean | true | Whether to close the dropdown when pressing escape key |
+| `maxHeight` | string | - | Max height for the dropdown menu |
+| `minWidth` | string | '10rem' | Min width for the dropdown menu |
+| `variant` | ThemeColor | - | Color variant for the dropdown trigger |
+| `id` | string | - | Optional ID for the dropdown |
+| `className` | string | - | Additional CSS class for the dropdown |
+| `disabled` | boolean | false | Whether the dropdown is disabled |
+
+## DropdownItem Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | ReactNode | - | Item content |
+| `href` | string | - | URL if item is a link |
+| `active` | boolean | false | Whether item is active |
+| `disabled` | boolean | false | Whether item is disabled |
+| `icon` | ReactNode | - | Icon to display before item text |
+| `onClick` | (event) => void | - | Click handler |
+| `className` | string | - | Additional CSS class for the item |
+
+## Accessibility
+
+The Dropdown component is built with accessibility in mind:
+
+- Uses ARIA attributes to indicate expanded/collapsed state
+- Supports keyboard navigation for menu items (Arrow Up/Down, Home, End, Enter, Space, Escape)
+- Maintains sufficient color contrast in all states
+- Properly associates trigger elements with their dropdown menus
+
+## Placement Options
+
+The `placement` prop supports the following values:
+
+- `'top-start'` - Above the trigger, aligned with left edge
+- `'top-end'` - Above the trigger, aligned with right edge
+- `'bottom-start'` - Below the trigger, aligned with left edge
+- `'bottom-end'` - Below the trigger, aligned with right edge
+- `'left-start'` - Left of the trigger, aligned with top edge
+- `'left-end'` - Left of the trigger, aligned with bottom edge
+- `'right-start'` - Right of the trigger, aligned with top edge
+- `'right-end'` - Right of the trigger, aligned with bottom edge
+
+The dropdown will automatically adjust its placement if there's not enough space in the specified direction.