jy-headless 0.3.0 → 0.3.7

package/cjs/hooks/usePortal.js

@@ -0,0 +1,80 @@
+'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/cjs/hooks/useThrottle.d.ts

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

package/cjs/hooks/useThrottle.js

@@ -0,0 +1,34 @@
+'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/cjs/index.d.ts

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

package/cjs/index.js

@@ -1,7 +1,16 @@
 'use strict';
 
-var Popover = require('./Popover/Popover.js');
+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 Select = require('./Select/Select.js');
 
 
 
-exports.Popover = Popover.Popover;
+exports.useDebounce = useDebounce.useDebounce;
+exports.useThrottle = useThrottle.useThrottle;
+exports.Tooltip = Tooltip.Tooltip;
+exports.useSelectContext = Select.useSelectContext;

package/hooks/index.d.ts

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

package/hooks/useDebounce.d.ts

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

package/hooks/useDebounce.js

@@ -0,0 +1,22 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+const useDebounce = (callback, delay) => {
+    const timeoutRef = useRef(0);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            callback(...args);
+        }, delay);
+    }, [callback, delay]);
+};
+
+export { useDebounce };

package/hooks/usePortal.d.ts

@@ -0,0 +1,23 @@
+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/hooks/usePortal.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+const usePortal = ({ content, key, visible = true, targetRef, popoverRef, direction = 'top', gap = 0, position: customPosition, autoFlip = true, }) => {
+    const rootDom = useMemo(() => document.body, []);
+    const [position, setPosition] = useState(customPosition || { top: 0, left: 0 });
+    const [finalDirection, setFinalDirection] = 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 // 우측 밖
+        );
+    };
+    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 ? (jsx("span", { ref: popoverRef, style: {
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+        }, children: content })) : content;
+    const portal = createPortal(wrappedContent, rootDom, key);
+    return { portal, rootDom, finalDirection };
+};
+
+export { usePortal as default };

package/hooks/useThrottle.d.ts

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

package/hooks/useThrottle.js

@@ -0,0 +1,32 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+const useThrottle = (callback, delay) => {
+    const lastRun = useRef(Date.now());
+    const timeoutRef = useRef(0);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return 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]);
+};
+
+export { useThrottle };

package/index.d.ts

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

package/index.js

@@ -1 +1,7 @@
-export { Popover } from './Popover/Popover.js';
+import 'react/jsx-runtime';
+import 'react';
+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.0",
+  "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,20 +13,45 @@
       "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",
       "types": "./cjs/index.d.ts"
     },
+    "./useDebounce": {
+      "import": "./hooks/useDebounce.js",
+      "require": "./cjs/hooks/useDebounce.js",
+      "types": "./hooks/useDebounce.d.ts"
+    },
+    "./usePortal": {
+      "import": "./hooks/usePortal.js",
+      "require": "./cjs/hooks/usePortal.js",
+      "types": "./hooks/usePortal.d.ts"
+    },
+    "./useThrottle": {
+      "import": "./hooks/useThrottle.js",
+      "require": "./cjs/hooks/useThrottle.js",
+      "types": "./hooks/useThrottle.d.ts"
+    },
     "./index": {
       "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"
     }
   },
   "keywords": [

package/version.txt

@@ -1 +1 @@
-0.3.0
+0.3.7