jy-headless 0.3.6 → 0.3.7

package/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NumberInput';
+export * from './TextInput';

package/Popover/Popover.d.ts

@@ -1,2 +1,2 @@
-import { HoverProps } from './Popover.type';
-export declare const Popover: ({ children, direction, popover, domNode, rootId, key }: HoverProps) => import("react/jsx-runtime").JSX.Element;
+import { PopoverProps } from './Popover.type';
+export declare const Popover: ({ direction, popover, children, key, gap, autoFlip }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/Popover/Popover.js

@@ -1,75 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
+import { jsxs } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import usePortal from '../hooks/usePortal.js';
 
-const Popover = ({ children, direction, popover, domNode, rootId, key }) => {
+const Popover = ({ direction = 'top', popover, children, key, gap = 0, autoFlip = true }) => {
     const [visible, setVisible] = useState(false);
-    const [position, setPosition] = useState({ top: 0, left: 0 });
-    const rootDom = domNode ?? document.getElementById(rootId ?? 'root');
     const targetRef = useRef(null);
     const popoverRef = useRef(null);
-    const getPopoverPosition = useCallback((targetRect, popoverRect) => {
-        let top = 0;
-        let left = 0;
-        switch (direction) {
-            case 'top-left':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left;
-                break;
-            case 'top-center':
-            case 'top':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'top-right':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.right - popoverRect.width;
-                break;
-            case 'left':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.left - popoverRect.width;
-                break;
-            case 'right':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.right;
-                break;
-            case 'bottom-left':
-                top = targetRect.bottom;
-                left = targetRect.left;
-                break;
-            case 'bottom-center':
-            case 'bottom':
-                top = targetRect.bottom;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'bottom-right':
-                top = targetRect.bottom;
-                left = targetRect.right - popoverRect.width;
-                break;
-        }
-        return { top, left };
-    }, [direction]);
+    const { portal, rootDom } = usePortal({
+        content: popover,
+        key,
+        visible,
+        targetRef,
+        popoverRef,
+        direction,
+        gap,
+        autoFlip,
+    });
     const handleMouseEnter = () => {
         setVisible(true);
     };
     const handleMouseLeave = () => {
         setVisible(false);
     };
-    useLayoutEffect(() => {
-        if (visible && targetRef.current && popoverRef.current) {
-            const targetRect = targetRef.current.getBoundingClientRect();
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            const { top, left } = getPopoverPosition(targetRect, popoverRect);
-            setPosition({ top: top + window.scrollY, left: left + window.scrollX });
-        }
-    }, [visible, popover, getPopoverPosition]);
-    return (jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom &&
-                visible &&
-                createPortal(jsx("span", { ref: popoverRef, style: {
-                        position: 'absolute',
-                        top: `${position.top}px`,
-                        left: `${position.left}px`,
-                    }, children: popover }), rootDom, key)] }));
+    return (jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom && visible && portal] }));
 };
 
 export { Popover };

package/Popover/Popover.type.d.ts

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
-export interface HoverProps {
+import { Direction } from '../hooks';
+export interface PopoverProps {
     children: ReactNode;
     popover: ReactNode;
-    direction: 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
-    rootId?: string;
+    direction: Direction;
+    targetId?: string;
     domNode?: Element;
     key?: string;
+    gap?: number;
+    autoFlip?: boolean;
 }

package/Select/Select.js

@@ -0,0 +1,176 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
+import usePortal from '../hooks/usePortal.js';
+
+const SelectContext = createContext(null);
+/**
+ * Select Context 접근 훅
+ *
+ * @throws Select 외부에서 사용할 경우 에러
+ */
+const useSelectContext = () => {
+    const ctx = useContext(SelectContext);
+    if (!ctx)
+        throw new Error('Select components must be used within <Select>');
+    return ctx;
+};
+/**
+ * Select 루트 컨테이너
+ *
+ * - 상태 관리 담당
+ * - Context Provider 역할
+ */
+const SelectContainer = ({ value, onChange, multiple = false, children }) => {
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const optionRefs = useRef([]);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const toggleValue = (v) => {
+        if (!multiple) {
+            onChange([v]);
+            setOpen(false);
+            return;
+        }
+        onChange(value.includes(v)
+            ? value.filter(i => i !== v)
+            : [...value, v]);
+    };
+    return (jsx(SelectContext.Provider, { value: {
+            open,
+            setOpen,
+            value,
+            toggleValue,
+            multiple,
+            triggerRef,
+            optionRefs,
+            focusedIndex,
+            setFocusedIndex,
+        }, children: children }));
+};
+/**
+ * Select 트리거 버튼
+ *
+ * - 클릭 시 Options 열림
+ * - 최초 포커스를 첫 옵션으로 이동
+ */
+const Trigger = (props) => {
+    const { open, setOpen, triggerRef, setFocusedIndex } = useSelectContext();
+    return (jsx("div", { ref: triggerRef, role: 'button', "aria-expanded": open, onClick: (e) => {
+            setOpen(!open);
+            setFocusedIndex(0);
+            props.onClick?.(e);
+        }, ...props }));
+};
+/**
+ * Options 드롭다운 영역
+ *
+ * 기능:
+ * - 외부 클릭 시 닫힘
+ * - ESC 키 닫기
+ * - ↑ ↓ 키 포커스 이동
+ * - portal 렌더링
+ */
+const Options = ({ children, ...props }) => {
+    const { open, triggerRef, setOpen, setFocusedIndex, optionRefs } = useSelectContext();
+    const popoverRef = useRef(null);
+    const triggerWidth = triggerRef.current?.getBoundingClientRect().width;
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleOutsideClick = (e) => {
+            const target = e.target;
+            if (triggerRef.current?.contains(target) ||
+                popoverRef.current?.contains(target)) {
+                return;
+            }
+            setOpen(false);
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [open, setOpen, triggerRef]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            e.preventDefault();
+            if (e.key === 'Escape') {
+                setOpen(false);
+                setFocusedIndex(-1);
+            }
+            if (e.key === 'ArrowUp') {
+                setFocusedIndex(prev => prev - 1 < 0 ? optionRefs.current.length - 1 : prev - 1);
+            }
+            if (e.key === 'ArrowDown') {
+                setFocusedIndex(prev => prev + 1 >= optionRefs.current.length ? 0 : prev + 1);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            optionRefs.current = [];
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open]);
+    const { portal } = usePortal({
+        visible: open,
+        targetRef: triggerRef,
+        popoverRef,
+        direction: 'bottom',
+        gap: 4,
+        content: (jsx("div", { ref: popoverRef, style: { width: triggerWidth }, ...props, children: children })),
+    });
+    return open ? portal : null;
+};
+/**
+ * 개별 선택 옵션
+ *
+ * 기능:
+ * - 선택 상태 표시
+ * - 포커스 관리
+ * - disabled 지원
+ */
+const Option = ({ value, disabled, children, ...props }) => {
+    const { value: selected, toggleValue, optionRefs, focusedIndex } = useSelectContext();
+    const isSelected = selected.includes(value);
+    const [index, setIndex] = useState(null);
+    const isFocused = useMemo(() => focusedIndex === index, [focusedIndex, index]);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current && index === null) {
+            setIndex(optionRefs.current.length);
+            optionRefs.current[optionRefs.current.length] = ref.current;
+        }
+    }, []);
+    useEffect(() => {
+        ref.current?.setAttribute('data-focused', String(focusedIndex === index));
+        if (focusedIndex === index) {
+            ref.current?.focus();
+        }
+    }, [focusedIndex, index]);
+    return (jsx("div", { ref: ref, role: 'option', "aria-selected": isSelected, "aria-disabled": disabled, "data-focused": isFocused, onClick: () => {
+            if (!disabled)
+                toggleValue(value);
+        }, ...props, children: children }));
+};
+/**
+ * Compound Select 컴포넌트
+ *
+ * 사용 예시:
+ *
+ * @example
+ * <Select value={value} onChange={setValue}>
+ *   <Select.Trigger>열기</Select.Trigger>
+ *   <Select.Options>
+ *     <Select.Option value="a">A</Select.Option>
+ *     <Select.Option value="b">B</Select.Option>
+ *   </Select.Options>
+ * </Select>
+ */
+Object.assign(SelectContainer, {
+    Trigger,
+    Options,
+    Option,
+});
+
+export { useSelectContext };

package/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/cjs/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NumberInput';
+export * from './TextInput';

package/cjs/Popover/Popover.d.ts

@@ -1,2 +1,2 @@
-import { HoverProps } from './Popover.type';
-export declare const Popover: ({ children, direction, popover, domNode, rootId, key }: HoverProps) => import("react/jsx-runtime").JSX.Element;
+import { PopoverProps } from './Popover.type';
+export declare const Popover: ({ direction, popover, children, key, gap, autoFlip }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/Popover/Popover.js

@@ -2,76 +2,29 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var reactDom = require('react-dom');
+var usePortal = require('../hooks/usePortal.js');
 
-const Popover = ({ children, direction, popover, domNode, rootId, key }) => {
+const Popover = ({ direction = 'top', popover, children, key, gap = 0, autoFlip = true }) => {
     const [visible, setVisible] = react.useState(false);
-    const [position, setPosition] = react.useState({ top: 0, left: 0 });
-    const rootDom = domNode ?? document.getElementById(rootId ?? 'root');
     const targetRef = react.useRef(null);
     const popoverRef = react.useRef(null);
-    const getPopoverPosition = react.useCallback((targetRect, popoverRect) => {
-        let top = 0;
-        let left = 0;
-        switch (direction) {
-            case 'top-left':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left;
-                break;
-            case 'top-center':
-            case 'top':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'top-right':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.right - popoverRect.width;
-                break;
-            case 'left':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.left - popoverRect.width;
-                break;
-            case 'right':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.right;
-                break;
-            case 'bottom-left':
-                top = targetRect.bottom;
-                left = targetRect.left;
-                break;
-            case 'bottom-center':
-            case 'bottom':
-                top = targetRect.bottom;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'bottom-right':
-                top = targetRect.bottom;
-                left = targetRect.right - popoverRect.width;
-                break;
-        }
-        return { top, left };
-    }, [direction]);
+    const { portal, rootDom } = usePortal({
+        content: popover,
+        key,
+        visible,
+        targetRef,
+        popoverRef,
+        direction,
+        gap,
+        autoFlip,
+    });
     const handleMouseEnter = () => {
         setVisible(true);
     };
     const handleMouseLeave = () => {
         setVisible(false);
     };
-    react.useLayoutEffect(() => {
-        if (visible && targetRef.current && popoverRef.current) {
-            const targetRect = targetRef.current.getBoundingClientRect();
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            const { top, left } = getPopoverPosition(targetRect, popoverRect);
-            setPosition({ top: top + window.scrollY, left: left + window.scrollX });
-        }
-    }, [visible, popover, getPopoverPosition]);
-    return (jsxRuntime.jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom &&
-                visible &&
-                reactDom.createPortal(jsxRuntime.jsx("span", { ref: popoverRef, style: {
-                        position: 'absolute',
-                        top: `${position.top}px`,
-                        left: `${position.left}px`,
-                    }, children: popover }), rootDom, key)] }));
+    return (jsxRuntime.jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom && visible && portal] }));
 };
 
 exports.Popover = Popover;

package/cjs/Popover/Popover.type.d.ts

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
-export interface HoverProps {
+import { Direction } from '../hooks';
+export interface PopoverProps {
     children: ReactNode;
     popover: ReactNode;
-    direction: 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
-    rootId?: string;
+    direction: Direction;
+    targetId?: string;
     domNode?: Element;
     key?: string;
+    gap?: number;
+    autoFlip?: boolean;
 }

package/cjs/Select/Select.js

@@ -0,0 +1,178 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var usePortal = require('../hooks/usePortal.js');
+
+const SelectContext = react.createContext(null);
+/**
+ * Select Context 접근 훅
+ *
+ * @throws Select 외부에서 사용할 경우 에러
+ */
+const useSelectContext = () => {
+    const ctx = react.useContext(SelectContext);
+    if (!ctx)
+        throw new Error('Select components must be used within <Select>');
+    return ctx;
+};
+/**
+ * Select 루트 컨테이너
+ *
+ * - 상태 관리 담당
+ * - Context Provider 역할
+ */
+const SelectContainer = ({ value, onChange, multiple = false, children }) => {
+    const [open, setOpen] = react.useState(false);
+    const triggerRef = react.useRef(null);
+    const optionRefs = react.useRef([]);
+    const [focusedIndex, setFocusedIndex] = react.useState(-1);
+    const toggleValue = (v) => {
+        if (!multiple) {
+            onChange([v]);
+            setOpen(false);
+            return;
+        }
+        onChange(value.includes(v)
+            ? value.filter(i => i !== v)
+            : [...value, v]);
+    };
+    return (jsxRuntime.jsx(SelectContext.Provider, { value: {
+            open,
+            setOpen,
+            value,
+            toggleValue,
+            multiple,
+            triggerRef,
+            optionRefs,
+            focusedIndex,
+            setFocusedIndex,
+        }, children: children }));
+};
+/**
+ * Select 트리거 버튼
+ *
+ * - 클릭 시 Options 열림
+ * - 최초 포커스를 첫 옵션으로 이동
+ */
+const Trigger = (props) => {
+    const { open, setOpen, triggerRef, setFocusedIndex } = useSelectContext();
+    return (jsxRuntime.jsx("div", { ref: triggerRef, role: 'button', "aria-expanded": open, onClick: (e) => {
+            setOpen(!open);
+            setFocusedIndex(0);
+            props.onClick?.(e);
+        }, ...props }));
+};
+/**
+ * Options 드롭다운 영역
+ *
+ * 기능:
+ * - 외부 클릭 시 닫힘
+ * - ESC 키 닫기
+ * - ↑ ↓ 키 포커스 이동
+ * - portal 렌더링
+ */
+const Options = ({ children, ...props }) => {
+    const { open, triggerRef, setOpen, setFocusedIndex, optionRefs } = useSelectContext();
+    const popoverRef = react.useRef(null);
+    const triggerWidth = triggerRef.current?.getBoundingClientRect().width;
+    react.useEffect(() => {
+        if (!open)
+            return;
+        const handleOutsideClick = (e) => {
+            const target = e.target;
+            if (triggerRef.current?.contains(target) ||
+                popoverRef.current?.contains(target)) {
+                return;
+            }
+            setOpen(false);
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [open, setOpen, triggerRef]);
+    react.useEffect(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            e.preventDefault();
+            if (e.key === 'Escape') {
+                setOpen(false);
+                setFocusedIndex(-1);
+            }
+            if (e.key === 'ArrowUp') {
+                setFocusedIndex(prev => prev - 1 < 0 ? optionRefs.current.length - 1 : prev - 1);
+            }
+            if (e.key === 'ArrowDown') {
+                setFocusedIndex(prev => prev + 1 >= optionRefs.current.length ? 0 : prev + 1);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            optionRefs.current = [];
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open]);
+    const { portal } = usePortal({
+        visible: open,
+        targetRef: triggerRef,
+        popoverRef,
+        direction: 'bottom',
+        gap: 4,
+        content: (jsxRuntime.jsx("div", { ref: popoverRef, style: { width: triggerWidth }, ...props, children: children })),
+    });
+    return open ? portal : null;
+};
+/**
+ * 개별 선택 옵션
+ *
+ * 기능:
+ * - 선택 상태 표시
+ * - 포커스 관리
+ * - disabled 지원
+ */
+const Option = ({ value, disabled, children, ...props }) => {
+    const { value: selected, toggleValue, optionRefs, focusedIndex } = useSelectContext();
+    const isSelected = selected.includes(value);
+    const [index, setIndex] = react.useState(null);
+    const isFocused = react.useMemo(() => focusedIndex === index, [focusedIndex, index]);
+    const ref = react.useRef(null);
+    react.useEffect(() => {
+        if (ref.current && index === null) {
+            setIndex(optionRefs.current.length);
+            optionRefs.current[optionRefs.current.length] = ref.current;
+        }
+    }, []);
+    react.useEffect(() => {
+        ref.current?.setAttribute('data-focused', String(focusedIndex === index));
+        if (focusedIndex === index) {
+            ref.current?.focus();
+        }
+    }, [focusedIndex, index]);
+    return (jsxRuntime.jsx("div", { ref: ref, role: 'option', "aria-selected": isSelected, "aria-disabled": disabled, "data-focused": isFocused, onClick: () => {
+            if (!disabled)
+                toggleValue(value);
+        }, ...props, children: children }));
+};
+/**
+ * Compound Select 컴포넌트
+ *
+ * 사용 예시:
+ *
+ * @example
+ * <Select value={value} onChange={setValue}>
+ *   <Select.Trigger>열기</Select.Trigger>
+ *   <Select.Options>
+ *     <Select.Option value="a">A</Select.Option>
+ *     <Select.Option value="b">B</Select.Option>
+ *   </Select.Options>
+ * </Select>
+ */
+Object.assign(SelectContainer, {
+    Trigger,
+    Options,
+    Option,
+});
+
+exports.useSelectContext = useSelectContext;

package/cjs/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 export * from './hooks';
 export * from './Tooltip';
-export * from './Input/TextInput';
-export * from './Input/NumberInput';
+export * from './Input';
+export * from './Select';

package/cjs/index.js

@@ -6,9 +6,11 @@ require('react-dom');
 var useDebounce = require('./hooks/useDebounce.js');
 var useThrottle = require('./hooks/useThrottle.js');
 var Tooltip = require('./Tooltip/Tooltip.js');
+var Select = require('./Select/Select.js');
 
 
 
 exports.useDebounce = useDebounce.useDebounce;
 exports.useThrottle = useThrottle.useThrottle;
 exports.Tooltip = Tooltip.Tooltip;
+exports.useSelectContext = Select.useSelectContext;

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from './hooks';
 export * from './Tooltip';
-export * from './Input/TextInput';
-export * from './Input/NumberInput';
+export * from './Input';
+export * from './Select';

package/index.js

@@ -4,3 +4,4 @@ import 'react-dom';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useThrottle } from './hooks/useThrottle.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
+export { useSelectContext } from './Select/Select.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -13,6 +13,21 @@
       "require": "./cjs/index.js",
       "types": "./index.d.ts"
     },
+    "./Popover": {
+      "import": "./cjs/Popover/Popover.js",
+      "require": "./cjs/cjs/Popover/Popover.js",
+      "types": "./cjs/Popover/Popover.d.ts"
+    },
+    "./Select": {
+      "import": "./cjs/Select/Select.js",
+      "require": "./cjs/cjs/Select/Select.js",
+      "types": "./cjs/Select/Select.d.ts"
+    },
+    "./Tooltip": {
+      "import": "./cjs/Tooltip/Tooltip.js",
+      "require": "./cjs/cjs/Tooltip/Tooltip.js",
+      "types": "./cjs/Tooltip/Tooltip.d.ts"
+    },
     "./cjs": {
       "import": "./cjs/index.js",
       "require": "./cjs/cjs/index.js",
@@ -37,16 +52,6 @@
       "import": "./index.js",
       "require": "./cjs/index.js",
       "types": "./index.d.ts"
-    },
-    "./Popover": {
-      "import": "./Popover/Popover.js",
-      "require": "./cjs/Popover/Popover.js",
-      "types": "./Popover/Popover.d.ts"
-    },
-    "./Tooltip": {
-      "import": "./Tooltip/Tooltip.js",
-      "require": "./cjs/Tooltip/Tooltip.js",
-      "types": "./Tooltip/Tooltip.d.ts"
     }
   },
   "keywords": [

package/version.txt

@@ -1 +1 @@
-0.3.6
+0.3.7