@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Dropdown/Dropdown.tsx

@@ -1,10 +1,10 @@
 import React, { useRef, useState, useCallback, createContext, useContext, useEffect } from 'react';
 import { DROPDOWN } from '../../lib/constants/components';
-import type { 
-  DropdownProps, 
-  DropdownItemProps, 
-  DropdownDividerProps, 
-  DropdownHeaderProps 
+import type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownDividerProps,
+  DropdownHeaderProps,
 } from '../../lib/types/components';
 
 // Context type definition
@@ -20,7 +20,7 @@ const DropdownContext = createContext<DropdownContextType>({
   isOpen: false,
   close: () => {},
   id: '',
-  trigger: 'click'
+  trigger: 'click',
 });
 
 /**
@@ -56,14 +56,16 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
     'c-dropdown__menu-item',
     active ? 'is-active' : '',
     disabled ? 'is-disabled' : '',
-    className
-  ].filter(Boolean).join(' ');
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   if (href && !disabled) {
     return (
       <li>
-        <a 
-          href={href} 
+        <a
+          href={href}
           className={itemClasses}
           onClick={handleClick}
           role="menuitem"
@@ -79,7 +81,7 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
 
   return (
     <li>
-      <button 
+      <button
         type="button"
         className={itemClasses}
         onClick={handleClick}
@@ -106,21 +108,17 @@ export const DropdownDivider: React.FC<DropdownDividerProps> = ({ className = ''
  * DropdownHeader component for section headers
  */
 export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, className = '' }) => {
-  return (
-    <li className={`c-dropdown__header ${className}`}>
-      {children}
-    </li>
-  );
+  return <li className={`c-dropdown__header ${className}`}>{children}</li>;
 };
 
 /**
  * Dropdown component for creating dropdown menus
  */
 export const Dropdown: React.FC<DropdownProps> = ({
-  children, 
+  children,
   menu,
   placement = 'bottom-start',
-  trigger = 'click', 
+  trigger = 'click',
   offset = DROPDOWN.DEFAULTS.OFFSET,
   isOpen: controlledIsOpen,
   onOpenChange,
@@ -136,27 +134,30 @@ export const Dropdown: React.FC<DropdownProps> = ({
   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 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
@@ -164,44 +165,48 @@ export const Dropdown: React.FC<DropdownProps> = ({
       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])');
+
+    const focusableItems = menuRef.current.querySelectorAll<HTMLElement>(
+      '[role="menuitem"]:not([disabled])'
+    );
     if (!focusableItems.length) return;
-    
-    const currentIndex = Array.from(focusableItems).findIndex(item => item === document.activeElement);
-    
+
+    const currentIndex = Array.from(focusableItems).findIndex(
+      item => item === document.activeElement
+    );
+
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
@@ -211,7 +216,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
           focusableItems[0].focus();
         }
         break;
-        
+
       case 'ArrowUp':
         e.preventDefault();
         if (currentIndex > 0) {
@@ -220,62 +225,70 @@ export const Dropdown: React.FC<DropdownProps> = ({
           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);
+  const handleToggleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (trigger === 'click') {
+        e.preventDefault();
+        e.stopPropagation();
+        toggle();
       }
-    } else if (e.key === 'Escape' && isOpen) {
-      e.preventDefault();
-      close();
-    }
-  }, [isOpen, setIsOpen, close]);
-  
+    },
+    [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(' ');
-  
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   // Menu styles
   const menuStyleProps: React.CSSProperties = {};
   if (maxHeight) menuStyleProps.maxHeight = maxHeight;
@@ -284,13 +297,13 @@ export const Dropdown: React.FC<DropdownProps> = ({
   }
 
   return (
-    <div 
-      ref={dropdownRef} 
+    <div
+      ref={dropdownRef}
       className={dropdownClasses}
       onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
       {...props}
     >
-      <div 
+      <div
         ref={toggleRef}
         className="c-dropdown__toggle"
         onClick={handleToggleClick}
@@ -302,8 +315,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
       >
         {children}
       </div>
-      
-      <div 
+
+      <div
         ref={menuRef}
         id={dropdownId}
         className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''}`}
@@ -314,20 +327,16 @@ export const Dropdown: React.FC<DropdownProps> = ({
       >
         <div className="c-dropdown__menu-inner" style={menuStyleProps}>
           <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
-            <ul className="c-dropdown__menu">
-              {menu}
-            </ul>
+            <ul className="c-dropdown__menu">{menu}</ul>
           </DropdownContext.Provider>
         </div>
       </div>
     </div>
   );
-}; 
-
-
+};
 
 export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
 
 Dropdown.displayName = 'Dropdown';
 
-export default Dropdown;
+export default Dropdown;

package/src/components/Dropdown/index.ts

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

package/src/components/Dropdown/scripts/bundle.ts

@@ -5,20 +5,20 @@ import type { DropdownOptions, DropdownPosition, DropdownTrigger } from './compo
 if (typeof window !== 'undefined') {
   // Initialize Atomix namespace if it doesn't exist
   window.Atomix = window.Atomix || {};
-  
+
   // Add Dropdown component to global Atomix namespace
   window.Atomix.Dropdown = {
     create: createDropdown,
     initialize: initializeDropdowns,
-    Dropdown
+    Dropdown,
   };
 }
 
-export { 
-  Dropdown, 
-  createDropdown, 
-  initializeDropdowns, 
-  DropdownOptions, 
-  DropdownPosition, 
-  DropdownTrigger 
-}; 
+export {
+  Dropdown,
+  createDropdown,
+  initializeDropdowns,
+  DropdownOptions,
+  DropdownPosition,
+  DropdownTrigger,
+};

package/src/components/Dropdown/scripts/componentInteractions.ts

@@ -3,7 +3,15 @@ import { DROPDOWN } from '../../../lib/constants/components';
 /**
  * Dropdown position types
  */
-export type DropdownPosition = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type DropdownPosition =
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'top-start'
+  | 'top-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
+  | 'right-end';
 
 /**
  * Dropdown trigger types
@@ -28,4 +36,4 @@ export interface DropdownOptions {
  */
 export interface TimerRef {
   current: number | null;
-} 
+}