jy-headless 0.3.16 → 0.3.17

package/dist/cjs/Select/Select.js

@@ -1,179 +0,0 @@
-'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>
- */
-const Select = Object.assign(SelectContainer, {
-    Trigger,
-    Options,
-    Option,
-});
-
-exports.Select = Select;
-exports.useSelectContext = useSelectContext;

package/dist/cjs/Select/Select.type.d.ts

@@ -1,52 +0,0 @@
-import { HTMLProps, ReactNode } from 'react';
-/**
- * Select 루트 컴포넌트 props
- */
-export interface SelectProps {
-    /**
-     * 선택된 값 목록
-     *
-     * - single 모드에서도 배열로 관리
-     */
-    value: string[];
-    /**
-     * 값 변경 시 호출
-     */
-    onChange: (v: string[]) => void;
-    /**
-     * 다중 선택 여부
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Select.Trigger / Select.Options 등을 포함하는 children
-     */
-    children: ReactNode;
-}
-/**
- * Options 컨테이너 props
- */
-export interface SelectOptionsProps extends HTMLProps<HTMLDivElement> {
-}
-/**
- * 개별 Option props
- */
-export interface SelectOptionProps extends HTMLProps<HTMLDivElement> {
-    /**
-     * 옵션의 실제 값
-     */
-    value: string;
-    /**
-     * 비활성화 여부
-     */
-    disabled?: boolean;
-    /**
-     * 표시될 내용
-     */
-    children: ReactNode;
-}
-/**
- * Trigger 버튼 props
- */
-export interface SelectTriggerProps extends HTMLProps<HTMLDivElement> {
-}

package/dist/cjs/Select/index.d.ts

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

package/dist/cjs/Tooltip/Tooltip.d.ts

@@ -1,10 +0,0 @@
-import { TooltipProps } from './Tooltip.type';
-/**
- * 범용 Tooltip 컴포넌트
- *
- * @example
- * <Tooltip popover="안녕하세요" direction="top">
- *   <button>Hover me</button>
- * </Tooltip>
- */
-export declare const Tooltip: ({ direction, popover, children, key, gap, autoFlip }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Tooltip/Tooltip.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var usePortal = require('../hooks/usePortal.js');
-
-/**
- * 범용 Tooltip 컴포넌트
- *
- * @example
- * <Tooltip popover="안녕하세요" direction="top">
- *   <button>Hover me</button>
- * </Tooltip>
- */
-const Tooltip = ({ direction = 'top', popover, children, key, gap = 0, autoFlip = true }) => {
-    const [visible, setVisible] = react.useState(false);
-    const targetRef = react.useRef(null);
-    const popoverRef = react.useRef(null);
-    const { portal, rootDom } = usePortal({
-        content: popover,
-        key,
-        visible,
-        targetRef,
-        popoverRef,
-        direction,
-        gap,
-        autoFlip,
-    });
-    const handleMouseEnter = () => {
-        setVisible(true);
-    };
-    const handleMouseLeave = () => {
-        setVisible(false);
-    };
-    return (jsxRuntime.jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom && visible && portal] }));
-};
-
-exports.Tooltip = Tooltip;

package/dist/cjs/Tooltip/Tooltip.type.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { Direction } from '../hooks';
-export interface TooltipProps {
-    /** 툴팁을 띄울 대상 요소 */
-    children: ReactNode;
-    /** 툴팁에 표시될 내용 */
-    popover: ReactNode;
-    /** 툴팁이 나타날 방향 */
-    direction: Direction;
-    /** 특정 DOM 타겟 ID (선택) */
-    targetId?: string;
-    /** 포털로 렌더링할 DOM 노드 */
-    domNode?: Element;
-    /** React key 값 */
-    key?: string;
-    /** 타겟과 툴팁 사이 간격(px) */
-    gap?: number;
-    /** 화면 밖으로 나가면 자동 반전 여부 */
-    autoFlip?: boolean;
-}

package/dist/cjs/Tooltip/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Tooltip';
-export * from './Tooltip.type';

package/dist/cjs/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export * from './usePortal';
-export * from './useDebounce';
-export * from './useThrottle';

package/dist/cjs/hooks/useDebounce.d.ts

@@ -1 +0,0 @@
-export declare const useDebounce: (callback: (...args: any[]) => void, delay: number) => (...args: any[]) => void;

package/dist/cjs/hooks/useDebounce.js

@@ -1,24 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const useDebounce = (callback, delay) => {
-    const timeoutRef = react.useRef(0);
-    react.useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    return react.useCallback((...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            callback(...args);
-        }, delay);
-    }, [callback, delay]);
-};
-
-exports.useDebounce = useDebounce;

package/dist/cjs/hooks/usePortal.d.ts

@@ -1,23 +0,0 @@
-import { Key, ReactNode, RefObject } from 'react';
-type Position = {
-    top: number;
-    left: number;
-};
-export type Direction = 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
-type UsePortalProps = {
-    content: ReactNode;
-    key?: Key | null;
-    visible?: boolean;
-    targetRef?: RefObject<HTMLElement | null>;
-    popoverRef?: RefObject<HTMLElement | null>;
-    direction?: Direction;
-    gap?: number;
-    position?: Position;
-    autoFlip?: boolean;
-};
-declare const usePortal: ({ content, key, visible, targetRef, popoverRef, direction, gap, position: customPosition, autoFlip, }: UsePortalProps) => {
-    portal: import("react").ReactPortal;
-    rootDom: HTMLElement;
-    finalDirection: Direction;
-};
-export default usePortal;

package/dist/cjs/hooks/usePortal.js

@@ -1,80 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var reactDom = require('react-dom');
-
-const usePortal = ({ content, key, visible = true, targetRef, popoverRef, direction = 'top', gap = 0, position: customPosition, autoFlip = true, }) => {
-    const rootDom = react.useMemo(() => document.body, []);
-    const [position, setPosition] = react.useState(customPosition || { top: 0, left: 0 });
-    const [finalDirection, setFinalDirection] = react.useState(direction);
-    const getOppositeDirection = (dir) => {
-        if (dir.startsWith('top'))
-            return dir.replace('top', 'bottom');
-        if (dir.startsWith('bottom'))
-            return dir.replace('bottom', 'top');
-        if (dir === 'left')
-            return 'right';
-        if (dir === 'right')
-            return 'left';
-        return dir;
-    };
-    const getPopoverPosition = (targetRect, popoverRect, dir) => {
-        let top = (dir.startsWith('top')
-            ? targetRect.top - popoverRect.height
-            : dir.startsWith('bottom')
-                ? targetRect.top + targetRect.height
-                : targetRect.top + targetRect.height / 2 - popoverRect.height / 2) - gap;
-        let left = dir.endsWith('left')
-            ? targetRect.left - popoverRect.width - gap
-            : (dir.endsWith('right')
-                ? targetRect.left + targetRect.width + gap
-                : targetRect.left + targetRect.width / 2 - popoverRect.width / 2);
-        return { top, left };
-    };
-    const isOutOfViewport = (pos, popoverRect) => {
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        return (pos.top < 0 || // 상단 밖
-            pos.left < 0 || // 좌측 밖
-            pos.top + popoverRect.height > viewportHeight + window.scrollY || // 하단 밖
-            pos.left + popoverRect.width > viewportWidth + window.scrollX // 우측 밖
-        );
-    };
-    react.useLayoutEffect(() => {
-        if (visible && targetRef?.current && popoverRef?.current) {
-            const targetRect = targetRef.current.getBoundingClientRect();
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            // 원래 방향으로 위치 계산
-            let calculatedPosition = getPopoverPosition(targetRect, popoverRect, direction);
-            let currentDirection = direction;
-            // autoFlip이 활성화되어 있고 화면 밖으로 나가면 반대 방향 시도
-            if (autoFlip && isOutOfViewport(calculatedPosition, popoverRect)) {
-                const oppositeDir = getOppositeDirection(direction);
-                const oppositePosition = getPopoverPosition(targetRect, popoverRect, oppositeDir);
-                // 반대 방향이 더 나으면 반대 방향 사용
-                if (!isOutOfViewport(oppositePosition, popoverRect)) {
-                    calculatedPosition = oppositePosition;
-                    currentDirection = oppositeDir;
-                }
-            }
-            setFinalDirection(currentDirection);
-            setPosition({
-                top: calculatedPosition.top + window.scrollY,
-                left: calculatedPosition.left + window.scrollX,
-            });
-        }
-        else if (customPosition) {
-            setPosition(customPosition);
-        }
-    }, [visible, direction, gap, customPosition, autoFlip]);
-    const wrappedContent = targetRef ? (jsxRuntime.jsx("span", { ref: popoverRef, style: {
-            position: 'absolute',
-            top: `${position.top}px`,
-            left: `${position.left}px`,
-        }, children: content })) : content;
-    const portal = reactDom.createPortal(wrappedContent, rootDom, key);
-    return { portal, rootDom, finalDirection };
-};
-
-module.exports = usePortal;

package/dist/cjs/hooks/useThrottle.d.ts

@@ -1 +0,0 @@
-export declare const useThrottle: (callback: (...args: any[]) => void, delay: number) => (...args: any[]) => void;

package/dist/cjs/hooks/useThrottle.js

@@ -1,34 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const useThrottle = (callback, delay) => {
-    const lastRun = react.useRef(Date.now());
-    const timeoutRef = react.useRef(0);
-    react.useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    return react.useCallback((...args) => {
-        const now = Date.now();
-        const timeSinceLastRun = now - lastRun.current;
-        if (timeSinceLastRun >= delay) {
-            callback(...args);
-            lastRun.current = now;
-        }
-        else {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            timeoutRef.current = setTimeout(() => {
-                callback(...args);
-                lastRun.current = Date.now();
-            }, delay - timeSinceLastRun);
-        }
-    }, [callback, delay]);
-};
-
-exports.useThrottle = useThrottle;

package/dist/cjs/index.d.ts

@@ -1,5 +0,0 @@
-export * from './hooks';
-export * from './Tooltip';
-export * from './Input';
-export * from './Select';
-export * from './Autocomplete';

package/dist/cjs/index.js

@@ -1,23 +0,0 @@
-'use strict';
-
-require('react/jsx-runtime');
-require('react');
-require('react-dom');
-var useDebounce = require('./hooks/useDebounce.js');
-var useThrottle = require('./hooks/useThrottle.js');
-var Tooltip = require('./Tooltip/Tooltip.js');
-var NumberInput = require('./Input/NumberInput.js');
-var TextInput = require('./Input/TextInput.js');
-var Select = require('./Select/Select.js');
-var Autocomplete = require('./Autocomplete/Autocomplete.js');
-
-
-
-exports.useDebounce = useDebounce.useDebounce;
-exports.useThrottle = useThrottle.useThrottle;
-exports.Tooltip = Tooltip.Tooltip;
-exports.NumberInput = NumberInput.NumberInput;
-exports.TextInput = TextInput.TextInput;
-exports.Select = Select.Select;
-exports.useSelectContext = Select.useSelectContext;
-exports.Autocomplete = Autocomplete.Autocomplete;