@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Modal/Modal.tsx

@@ -76,144 +76,147 @@ function useModal({
 /**
  * Modal component for displaying overlay content
  */
-export const Modal: React.FC<ModalProps> = memo(({
-  children,
-  isOpen = false,
-  onOpenChange,
-  onClose,
-  onOpen,
-  title,
-  subtitle,
-  size = 'md',
-  backdrop = true,
-  keyboard = true,
-  className = '',
-  style,
-  closeButton = true,
-  footer,
-  glass,
-  ...props
-}) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const backdropRef = useRef<HTMLDivElement>(null);
-
-  const {
-    isOpen: isOpenState,
-    open,
-    close,
-  } = useModal({
-    isOpen,
+export const Modal: React.FC<ModalProps> = memo(
+  ({
+    children,
+    isOpen = false,
     onOpenChange,
     onClose,
     onOpen,
-  });
-
-  // Handle keyboard events for Escape key
-  useEffect(() => {
-    if (!keyboard) return undefined;
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpenState) {
+    title,
+    subtitle,
+    size = 'md',
+    backdrop = true,
+    keyboard = true,
+    className = '',
+    style,
+    closeButton = true,
+    footer,
+    glass,
+    ...props
+  }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const backdropRef = useRef<HTMLDivElement>(null);
+
+    const {
+      isOpen: isOpenState,
+      open,
+      close,
+    } = useModal({
+      isOpen,
+      onOpenChange,
+      onClose,
+      onOpen,
+    });
+
+    // Handle keyboard events for Escape key
+    useEffect(() => {
+      if (!keyboard) return undefined;
+
+      const handleKeydown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape' && isOpenState) {
+          close();
+        }
+      };
+
+      document.addEventListener('keydown', handleKeydown);
+      return () => {
+        document.removeEventListener('keydown', handleKeydown);
+      };
+    }, [isOpenState, close, keyboard]);
+
+    // Handle backdrop click
+    const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (backdrop && event.target === event.currentTarget) {
         close();
       }
     };
 
-    document.addEventListener('keydown', handleKeydown);
-    return () => {
-      document.removeEventListener('keydown', handleKeydown);
-    };
-  }, [isOpenState, close, keyboard]);
-
-  // Handle backdrop click
-  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (backdrop && event.target === event.currentTarget) {
-      close();
-    }
-  };
-
-  // Assemble classes
-  const modalClasses = [
-    'c-modal',
-    isOpenState ? MODAL.CLASSES.IS_OPEN : '',
-    size ? `c-modal--${size}` : '',
-    glass ? 'c-modal--glass' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const modalContent = (
-    <div className="c-modal__content">
-      {(title || closeButton) && (
-        <div className="c-modal__header">
-          <div className="c-modal__header-content">
-            {title && <h3 className="c-modal__title">{title}</h3>}
-            {subtitle && <p className="c-modal__sub">{subtitle}</p>}
-          </div>
-          {closeButton && (
-            <button
-              type="button"
-              className="c-modal__close c-btn js-modal-close"
-              onClick={close}
-              aria-label="Close modal"
-            >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
+    // Assemble classes
+    const modalClasses = [
+      'c-modal',
+      isOpenState ? MODAL.CLASSES.IS_OPEN : '',
+      size ? `c-modal--${size}` : '',
+      glass ? 'c-modal--glass' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const modalContent = (
+      <div className="c-modal__content">
+        {(title || closeButton) && (
+          <div className="c-modal__header">
+            <div className="c-modal__header-content">
+              {title && <h3 className="c-modal__title">{title}</h3>}
+              {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+            </div>
+            {closeButton && (
+              <button
+                type="button"
+                className="c-modal__close c-btn js-modal-close"
+                onClick={close}
+                aria-label="Close modal"
               >
-                <path
-                  d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
-                  fill="#141414"
-                />
-              </svg>
-            </button>
-          )}
-        </div>
-      )}
-
-      <div className="c-modal__body">{children}</div>
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                    fill="#141414"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+        )}
 
-      {footer && <div className="c-modal__footer">{footer}</div>}
-    </div>
-  );
+        <div className="c-modal__body">{children}</div>
 
-  return (
-    <div
-      ref={modalRef}
-      className={modalClasses}
-      style={{ display: isOpenState ? 'block' : 'none', ...style }}
-      role="dialog"
-      aria-modal="true"
-      aria-hidden={!isOpenState}
-      {...props}
-    >
-      <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
-      <div ref={dialogRef} className="c-modal__dialog">
-        {glass
-          ? // Default glass settings for modals
-            (() => {
-              const defaultGlassProps = {
-                displacementScale: document.querySelector('.c-modal---glass .c-modal__content')?.clientHeight,
-                blurAmount: 2.2,
-                elasticity: 0,
-                mode: 'shader' as const,
-                shaderMode: 'premiumGlass'
-              };
-
-              const glassProps =
-                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-              return <AtomixGlass {...glassProps}>{modalContent}</AtomixGlass>;
-            })()
-          : modalContent}
+        {footer && <div className="c-modal__footer">{footer}</div>}
       </div>
-    </div>
-  );
-});
+    );
+
+    return (
+      <div
+        ref={modalRef}
+        className={modalClasses}
+        style={{ display: isOpenState ? 'block' : 'none', ...style }}
+        role="dialog"
+        aria-modal="true"
+        aria-hidden={!isOpenState}
+        {...props}
+      >
+        <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
+        <div ref={dialogRef} className="c-modal__dialog">
+          {glass
+            ? // Default glass settings for modals
+              (() => {
+                const defaultGlassProps = {
+                  displacementScale: document.querySelector('.c-modal---glass .c-modal__content')
+                    ?.clientHeight,
+                  blurAmount: 2.2,
+                  elasticity: 0,
+                  mode: 'shader' as const,
+                  shaderMode: 'premiumGlass',
+                };
+
+                const glassProps =
+                  glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+                return <AtomixGlass {...glassProps}>{modalContent}</AtomixGlass>;
+              })()
+            : modalContent}
+        </div>
+      </div>
+    );
+  }
+);
 
 Modal.displayName = 'Modal';
 

package/src/components/Navigation/Menu/MegaMenu.tsx

@@ -33,83 +33,83 @@ export const MegaMenu = forwardRef<HTMLDivElement, MegaMenuProps>(
 
 MegaMenu.displayName = 'MegaMenu';
 
-export const MegaMenuColumn = forwardRef<
-  HTMLDivElement,
-  MegaMenuColumnProps
->(({ title, icon, children, width = 'auto', className = '', disabled = false }, ref) => {
-  const columnClass = `o-grid__col o-grid__col--${width} ${className}`;
+export const MegaMenuColumn = forwardRef<HTMLDivElement, MegaMenuColumnProps>(
+  ({ title, icon, children, width = 'auto', className = '', disabled = false }, ref) => {
+    const columnClass = `o-grid__col o-grid__col--${width} ${className}`;
 
-  return (
-    <div ref={ref} className={columnClass}>
-      {(title || icon) && (
-        <div className="c-menu__header">
-          {icon &&
-            (typeof icon === 'string' ? (
-              icon.startsWith('c-icon-') ? (
-                <Icon
-                  name={mapIconName(icon.replace('c-icon-', ''))}
-                  size="sm"
-                  className="c-menu__header-icon"
-                />
+    return (
+      <div ref={ref} className={columnClass}>
+        {(title || icon) && (
+          <div className="c-menu__header">
+            {icon &&
+              (typeof icon === 'string' ? (
+                icon.startsWith('c-icon-') ? (
+                  <Icon
+                    name={mapIconName(icon.replace('c-icon-', ''))}
+                    size="sm"
+                    className="c-menu__header-icon"
+                  />
+                ) : (
+                  <i className={`c-menu__header-icon ${icon}`}>
+                    {typeof icon !== 'string' && icon}
+                  </i>
+                )
               ) : (
-                <i className={`c-menu__header-icon ${icon}`}>{typeof icon !== 'string' && icon}</i>
-              )
-            ) : (
-              <span className="c-menu__header-icon">{icon}</span>
-            ))}
-          {title && <div className="c-menu__header-title">{title}</div>}
-        </div>
-      )}
+                <span className="c-menu__header-icon">{icon}</span>
+              ))}
+            {title && <div className="c-menu__header-title">{title}</div>}
+          </div>
+        )}
 
-      <ul className="c-menu__subitems-list" role="menu">
-        {React.Children.map(children, child => {
-          if (React.isValidElement(child)) {
-            // Pass disabled prop down to all children if column is disabled
-            const childProps = child.props as any;
-            return (
-              <li className="c-menu__subitem" role="menuitem">
-                {React.cloneElement(child as React.ReactElement<any>, {
-                  ...childProps,
-                  disabled: disabled ? true : childProps?.disabled,
-                })}
-              </li>
-            );
-          }
-          return null;
-        })}
-      </ul>
-    </div>
-  );
-});
+        <ul className="c-menu__subitems-list" role="menu">
+          {React.Children.map(children, child => {
+            if (React.isValidElement(child)) {
+              // Pass disabled prop down to all children if column is disabled
+              const childProps = child.props as any;
+              return (
+                <li className="c-menu__subitem" role="menuitem">
+                  {React.cloneElement(child as React.ReactElement<any>, {
+                    ...childProps,
+                    disabled: disabled ? true : childProps?.disabled,
+                  })}
+                </li>
+              );
+            }
+            return null;
+          })}
+        </ul>
+      </div>
+    );
+  }
+);
 
 MegaMenuColumn.displayName = 'MegaMenuColumn';
 
-export const MegaMenuLink = forwardRef<
-  HTMLAnchorElement,
-  MegaMenuLinkProps
->(({ href, children, className = '', disabled = false, onClick }, ref) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
+export const MegaMenuLink = forwardRef<HTMLAnchorElement, MegaMenuLinkProps>(
+  ({ href, children, className = '', disabled = false, onClick }, ref) => {
+    const handleClick = (e: React.MouseEvent) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
 
-    if (onClick) {
-      onClick();
-    }
-  };
+      if (onClick) {
+        onClick();
+      }
+    };
 
-  return (
-    <a
-      ref={ref}
-      href={href}
-      className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
-      onClick={handleClick}
-      aria-disabled={disabled}
-    >
-      {children}
-    </a>
-  );
-});
+    return (
+      <a
+        ref={ref}
+        href={href}
+        className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
+        onClick={handleClick}
+        aria-disabled={disabled}
+      >
+        {children}
+      </a>
+    );
+  }
+);
 
 MegaMenuLink.displayName = 'MegaMenuLink';

package/src/components/Navigation/Nav/NavDropdown.tsx

@@ -84,11 +84,7 @@ export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement,
 
     const MenuTag = megaMenu ? 'div' : 'ul';
     const menuContent = (
-      <MenuTag
-        className={dropdownMenuClass}
-        ref={dropdownRef as any}
-        aria-hidden={!isActive}
-      >
+      <MenuTag className={dropdownMenuClass} ref={dropdownRef as any} aria-hidden={!isActive}>
         {children}
       </MenuTag>
     );