@syuttechnologies/layout 1.0.2 → 1.0.21

package/src/components/ui/ActionMenu/ActionMenu.tsx

@@ -0,0 +1,222 @@
+import React, { useState, useRef, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import IconSystem from '../../../icon-collection/icon-systems';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface ActionMenuItem<T = any> {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  onClick: (() => void) | ((row: T) => void);
+  variant?: 'default' | 'danger';
+  disabled?: boolean;
+  // Legacy props for conditional visibility
+  isVisible?: (row: T) => boolean;
+}
+
+// Type for ActionMenu's items prop - onClick is always () => void after processing
+export interface ProcessedActionMenuItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  variant?: 'default' | 'danger';
+  disabled?: boolean;
+}
+
+export interface ActionMenuProps {
+  /** Unique identifier for the menu */
+  id?: string;
+  /** Array of menu items to display - accepts both processed and raw items */
+  items: ProcessedActionMenuItem[] | ActionMenuItem[];
+  /** Custom trigger button content */
+  triggerContent?: ReactNode;
+  /** Additional class name for the trigger button */
+  triggerClassName?: string;
+  /** Menu position preference */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Callback when menu opens/closes */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * ActionMenu - A reusable dropdown menu component that uses React Portal
+ * to render outside of parent containers, avoiding overflow clipping issues.
+ *
+ * @example
+ * ```tsx
+ * <ActionMenu
+ *   items={[
+ *     { id: 'view', label: 'View', icon: <EyeIcon />, onClick: () => handleView() },
+ *     { id: 'edit', label: 'Edit', icon: <EditIcon />, onClick: () => handleEdit() },
+ *     { id: 'delete', label: 'Delete', icon: <TrashIcon />, onClick: () => handleDelete(), variant: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export const ActionMenu: React.FC<ActionMenuProps> = ({
+  id,
+  items,
+  triggerContent,
+  triggerClassName = '',
+  position = 'bottom-right',
+  onOpenChange,
+  disabled = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const calculatePosition = () => {
+    if (!triggerRef.current) return;
+
+    const rect = triggerRef.current.getBoundingClientRect();
+    const menuHeight = 200; // Approximate menu height
+    const menuWidth = 180; // Approximate menu width
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceRight = viewportWidth - rect.right;
+
+    let top: number;
+    let left: number;
+
+    // Determine vertical position
+    const shouldOpenUpward = position.startsWith('top') || spaceBelow < menuHeight;
+    if (shouldOpenUpward) {
+      top = rect.top - menuHeight - 4;
+    } else {
+      top = rect.bottom + 4;
+    }
+
+    // Determine horizontal position
+    const shouldOpenLeft = position.endsWith('left') || spaceRight < menuWidth;
+    if (shouldOpenLeft) {
+      left = Math.max(8, rect.left);
+    } else {
+      left = Math.max(8, rect.right - menuWidth);
+    }
+
+    // Ensure menu stays within viewport
+    top = Math.max(8, Math.min(top, viewportHeight - menuHeight - 8));
+    left = Math.max(8, Math.min(left, viewportWidth - menuWidth - 8));
+
+    setMenuPosition({ top, left });
+  };
+
+  const openMenu = () => {
+    if (disabled) return;
+    calculatePosition();
+    setIsOpen(true);
+    onOpenChange?.(true);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    onOpenChange?.(false);
+  };
+
+  const handleItemClick = (item: ProcessedActionMenuItem | ActionMenuItem) => {
+    if (item.disabled) return;
+    // Both processed and raw items should have onClick as () => void when used directly
+    (item.onClick as () => void)();
+    closeMenu();
+  };
+
+  const handleTriggerClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  };
+
+  return (
+    <div className="action-menu-container" id={id}>
+      <button
+        ref={triggerRef}
+        className={`action-menu-trigger ${isOpen ? 'active' : ''} ${triggerClassName}`}
+        onClick={handleTriggerClick}
+        type="button"
+        disabled={disabled}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+      >
+        {triggerContent || <IconSystem.moreVertical size={16} />}
+      </button>
+
+      {isOpen && createPortal(
+        <>
+          {/* Backdrop */}
+          <div
+            onClick={closeMenu}
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 9998,
+              background: 'transparent',
+            }}
+            aria-hidden="true"
+          />
+          {/* Menu */}
+          <div
+            role="menu"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              position: 'fixed',
+              top: menuPosition.top,
+              left: menuPosition.left,
+              zIndex: 9999,
+              minWidth: '180px',
+              maxHeight: '280px',
+              overflowY: 'auto',
+              background: 'white',
+              border: '2px solid var(--primary)',
+              borderRadius: '8px',
+              boxShadow: '0 12px 32px rgba(37, 99, 235, 0.2)',
+              padding: '0.5rem',
+            }}
+          >
+            {items.map((item, index) => {
+              // Check if we should add a divider before this item
+              const prevItem = items[index - 1];
+              const showDivider = prevItem && prevItem.variant !== 'danger' && item.variant === 'danger';
+
+              return (
+                <React.Fragment key={item.id}>
+                  {showDivider && <div className="action-menu-divider" />}
+                  <button
+                    role="menuitem"
+                    className={`action-menu-item ${item.variant === 'danger' ? 'action-menu-item-danger' : ''}`}
+                    onClick={() => handleItemClick(item)}
+                    disabled={item.disabled}
+                  >
+                    {item.icon}
+                    <span>{item.label}</span>
+                  </button>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </>,
+        document.body
+      )}
+    </div>
+  );
+};
+
+export default ActionMenu;

package/src/components/ui/ActionMenu/index.ts

@@ -0,0 +1,2 @@
+export { ActionMenu, type ActionMenuProps, type ActionMenuItem, type ProcessedActionMenuItem } from './ActionMenu';
+export { default } from './ActionMenu';