@thangnqdev/ui 0.2.0 → 0.2.2

package/src/overlays/Popover.tsx

@@ -1,156 +1,156 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { Portal } from './Portal';
-import { cn } from '../utils/cn';
-import { useControllableState } from '../utils/useControllableState';
-
-export interface PopoverProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  open?: boolean;
-  isOpen?: boolean; // Legacy alias
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onClose?: () => void;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-  className?: string;
-}
-
-export const Popover = ({
-  trigger,
-  children,
-  open: controlledOpen,
-  isOpen: legacyIsOpen,
-  defaultOpen = false,
-  onOpenChange,
-  onClose,
-  placement = 'bottom',
-  className,
-}: PopoverProps) => {
-  // Resolve controlled open state with legacy support
-  const activeControlled = controlledOpen !== undefined ? controlledOpen : legacyIsOpen;
-
-  const handleStateChange = useCallback(
-    (nextOpen: boolean) => {
-      onOpenChange?.(nextOpen);
-      if (!nextOpen) {
-        onClose?.();
-      }
-    },
-    [onOpenChange, onClose]
-  );
-
-  const [isOpen, setIsOpen] = useControllableState<boolean>({
-    value: activeControlled,
-    defaultValue: defaultOpen,
-    onChange: handleStateChange,
-    name: 'Popover',
-  });
-
-  const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
-  const triggerRef = useRef<HTMLDivElement | null>(null);
-  const popoverRef = useRef<HTMLDivElement | null>(null);
-
-  const calculatePosition = useCallback(() => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      let top = 0;
-      let left = 0;
-
-      if (placement === 'bottom') {
-        top = rect.bottom + window.scrollY + 8;
-        left = rect.left + window.scrollX;
-      } else if (placement === 'top') {
-        top = rect.top + window.scrollY - 8;
-        left = rect.left + window.scrollX;
-      } else if (placement === 'right') {
-        top = rect.top + window.scrollY;
-        left = rect.right + window.scrollX + 8;
-      } else if (placement === 'left') {
-        top = rect.top + window.scrollY;
-        left = rect.left + window.scrollX - 8;
-      }
-
-      setCoords({ top, left });
-    }
-  }, [placement]);
-
-  const handleToggle = () => {
-    if (!isOpen) {
-      calculatePosition();
-    }
-    setIsOpen(!isOpen);
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      calculatePosition();
-    }
-  }, [isOpen, calculatePosition]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleOutside = (e: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(e.target as Node) &&
-        triggerRef.current &&
-        !triggerRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleOutside);
-    document.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('resize', calculatePosition);
-    window.addEventListener('scroll', calculatePosition);
-
-    return () => {
-      document.removeEventListener('mousedown', handleOutside);
-      document.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('resize', calculatePosition);
-      window.removeEventListener('scroll', calculatePosition);
-    };
-  }, [isOpen, setIsOpen, calculatePosition]);
-
-  return (
-    <>
-      <div
-        ref={triggerRef}
-        onClick={handleToggle}
-        className="w-full inline-block cursor-pointer"
-        aria-expanded={isOpen}
-      >
-        {trigger}
-      </div>
-
-      {isOpen && (
-        <Portal>
-          <div
-            ref={popoverRef}
-            style={{
-              top: `${coords.top}px`,
-              left: `${coords.left}px`,
-              position: 'absolute',
-            }}
-            className={cn(
-              'z-50 min-w-[12rem] rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-4 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95',
-              placement === 'top' && '-translate-y-full',
-              placement === 'left' && '-translate-x-full',
-              className
-            )}
-          >
-            {children}
-          </div>
-        </Portal>
-      )}
-    </>
-  );
-};
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { Portal } from './Portal';
+import { cn } from '../utils/cn';
+import { useControllableState } from '../utils/useControllableState';
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  open?: boolean;
+  isOpen?: boolean; // Legacy alias
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClose?: () => void;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+}
+
+export const Popover = ({
+  trigger,
+  children,
+  open: controlledOpen,
+  isOpen: legacyIsOpen,
+  defaultOpen = false,
+  onOpenChange,
+  onClose,
+  placement = 'bottom',
+  className,
+}: PopoverProps) => {
+  // Resolve controlled open state with legacy support
+  const activeControlled = controlledOpen !== undefined ? controlledOpen : legacyIsOpen;
+
+  const handleStateChange = useCallback(
+    (nextOpen: boolean) => {
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        onClose?.();
+      }
+    },
+    [onOpenChange, onClose]
+  );
+
+  const [isOpen, setIsOpen] = useControllableState<boolean>({
+    value: activeControlled,
+    defaultValue: defaultOpen,
+    onChange: handleStateChange,
+    name: 'Popover',
+  });
+
+  const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+
+  const calculatePosition = useCallback(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      let top = 0;
+      let left = 0;
+
+      if (placement === 'bottom') {
+        top = rect.bottom + window.scrollY + 8;
+        left = rect.left + window.scrollX;
+      } else if (placement === 'top') {
+        top = rect.top + window.scrollY - 8;
+        left = rect.left + window.scrollX;
+      } else if (placement === 'right') {
+        top = rect.top + window.scrollY;
+        left = rect.right + window.scrollX + 8;
+      } else if (placement === 'left') {
+        top = rect.top + window.scrollY;
+        left = rect.left + window.scrollX - 8;
+      }
+
+      setCoords({ top, left });
+    }
+  }, [placement]);
+
+  const handleToggle = () => {
+    if (!isOpen) {
+      calculatePosition();
+    }
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen, calculatePosition]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleOutside = (e: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('resize', calculatePosition);
+    window.addEventListener('scroll', calculatePosition);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('resize', calculatePosition);
+      window.removeEventListener('scroll', calculatePosition);
+    };
+  }, [isOpen, setIsOpen, calculatePosition]);
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onClick={handleToggle}
+        className="w-full inline-block cursor-pointer"
+        aria-expanded={isOpen}
+      >
+        {trigger}
+      </div>
+
+      {isOpen && (
+        <Portal>
+          <div
+            ref={popoverRef}
+            style={{
+              top: `${coords.top}px`,
+              left: `${coords.left}px`,
+              position: 'absolute',
+            }}
+            className={cn(
+              'z-50 min-w-[12rem] rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-4 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95',
+              placement === 'top' && '-translate-y-full',
+              placement === 'left' && '-translate-x-full',
+              className
+            )}
+          >
+            {children}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};

package/src/overlays/Portal.tsx

@@ -1,23 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export interface PortalProps {
-  children: React.ReactNode;
-  container?: Element | null;
-}
-
-export function Portal({ children, container }: PortalProps) {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
-  }, []);
-
-  if (!mounted) return null;
-
-  const target = container || (typeof document !== 'undefined' ? document.body : null);
-  if (!target) return null;
-
-  return createPortal(children, target);
-}
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface PortalProps {
+  children: React.ReactNode;
+  container?: Element | null;
+}
+
+export function Portal({ children, container }: PortalProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) return null;
+
+  const target = container || (typeof document !== 'undefined' ? document.body : null);
+  if (!target) return null;
+
+  return createPortal(children, target);
+}