jy-headless 0.2.31 → 0.2.34

package/cjs/index.d.ts

@@ -1,6 +1,7 @@
 export * from './buttons';
 export * from './inputs';
 export * from './selectors';
+export * from './tooltip';
 export * from './types';
 export * from './utils';
 export * from './hooks';

package/cjs/index.js

@@ -4,6 +4,7 @@ var Button = require('./buttons/Button/Button.js');
 var Input = require('./inputs/Input/Input.js');
 var ImageInput = require('./inputs/ImageInput/ImageInput.js');
 var Dropdown = require('./selectors/Dropdown/Dropdown.js');
+var Tooltip = require('./tooltip/Tooltip/Tooltip.js');
 require('react');
 var useDropdown = require('./hooks/useDropdown.js');
 
@@ -12,6 +13,7 @@ function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: nu
 var Button__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Button);
 var Input__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Input);
 var Dropdown__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Dropdown);
+var Tooltip__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Tooltip);
 
 
 
@@ -19,5 +21,6 @@ exports.Button = Button__namespace;
 exports.Input = Input__namespace;
 exports.ImageInput = ImageInput;
 exports.Dropdown = Dropdown__namespace;
+exports.Tooltip = Tooltip__namespace;
 exports.DropdownContext = useDropdown.DropdownContext;
 exports.useDropdownContext = useDropdown.useDropdownContext;

package/cjs/inputs/Input/Input.d.ts

@@ -1,3 +1,3 @@
 import { InputProps } from '../../types';
-declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, useThrottle, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ id, value, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, children, showLimit, maxLength, onThrottledChange, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/cjs/inputs/Input/Input.js

@@ -3,9 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var useThrottling = require('../../hooks/useThrottling.js');
 
-const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, useThrottle = false, children, ...props }) => {
-    const handleChange = onChange && useThrottle ? useThrottling(onChange, timeout) : onChange;
-    return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { role: 'textbox', id: id, onChange: handleChange, ...props }), suffixElement] }));
+const Input = ({ id, value, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, children, showLimit, maxLength, onThrottledChange, ...props }) => {
+    const throttledOnChange = onThrottledChange ? useThrottling(onThrottledChange, timeout) : null;
+    const handleChange = (e) => {
+        if (maxLength && e.target.value?.length > maxLength)
+            return;
+        onChange?.(e);
+        throttledOnChange?.(e);
+    };
+    return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { role: 'textbox', id: id, value: value, onChange: handleChange, ...props }), showLimit && maxLength && (jsxRuntime.jsxs("span", { id: [id, 'input-limit'].join('-'), children: [(value ?? '').toString().length, "/", maxLength] })), suffixElement] }));
 };
 
 module.exports = Input;

package/cjs/tooltip/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from '../../types/tooltip';
+declare const Tooltip: (({ children, style, position, space, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element) & {
+    Label: ({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Tooltip;

package/cjs/tooltip/Tooltip/Tooltip.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../../types/tooltip/index.js');
+
+const TooltipRoot = ({ children, style, position = 'top', space = 8, ...props }) => {
+    const [showTooltip, setShowTooltip] = react.useState(false);
+    const [tooltipPosition, setTooltipPosition] = react.useState({});
+    react.useEffect(() => {
+        if (!showTooltip)
+            return;
+        const positionStyles = {
+            zIndex: 1000,
+        };
+        switch (position) {
+            case 'top':
+                positionStyles.bottom = `calc(100% + ${space}px)`;
+                positionStyles.left = '50%';
+                positionStyles.transform = 'translateX(-50%)';
+                break;
+            case 'bottom':
+                positionStyles.top = `calc(100% + ${space}px)`;
+                positionStyles.left = '50%';
+                positionStyles.transform = 'translateX(-50%)';
+                break;
+            case 'left':
+                positionStyles.right = `calc(100% + ${space}px)`;
+                positionStyles.top = '50%';
+                positionStyles.transform = 'translateY(-50%)';
+                break;
+            case 'right':
+                positionStyles.left = `calc(100% + ${space}px)`;
+                positionStyles.top = '50%';
+                positionStyles.transform = 'translateY(-50%)';
+                break;
+        }
+        setTooltipPosition(positionStyles);
+    }, [showTooltip, position]);
+    const onMouseOver = () => setShowTooltip(true);
+    const onMouseLeave = () => setShowTooltip(false);
+    return (jsxRuntime.jsx("div", { style: {
+            position: 'relative',
+            display: 'inline-block', // 자식 크기에 영향 안 받도록
+            ...style,
+        }, onMouseOver: onMouseOver, onMouseLeave: onMouseLeave, ...props, children: jsxRuntime.jsx(index.TooltipContext.Provider, { value: { show: showTooltip, tooltipPosition }, children: children }) }));
+};
+const TooltipLabel = ({ children, style, ...props }) => {
+    const context = react.useContext(index.TooltipContext);
+    if (!context) {
+        throw new Error('Tooltip.* 컴포넌트는 Tooltip 내에서만 사용해야 합니다.');
+    }
+    const { show, tooltipPosition } = context;
+    const labelStyle = {
+        position: 'absolute',
+        visibility: show ? 'visible' : 'hidden',
+        ...tooltipPosition,
+        ...style,
+    };
+    return (jsxRuntime.jsx("div", { style: labelStyle, ...props, children: children }));
+};
+const Tooltip = Object.assign(TooltipRoot, {
+    Label: TooltipLabel,
+});
+
+module.exports = Tooltip;

package/cjs/tooltip/index.d.ts

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

package/cjs/types/inputs/index.d.ts

@@ -1,11 +1,13 @@
-import { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { ChangeEvent, CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffixElement?: ReactElement | ReactNode;
     prefixElement?: ReactElement | ReactNode;
     wrapperStyle?: CSSProperties;
     wrapperClass?: string[];
-    useThrottle?: boolean;
     timeout?: number;
+    showLimit?: boolean;
+    maxLength?: number;
+    onThrottledChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export interface ImageInputContextData {
     id?: string;

package/cjs/types/tooltip/index.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    position?: TooltipPosition;
+    style?: CSSProperties;
+    space?: number;
+}
+interface TooltipContextProps {
+    show: boolean;
+    tooltipPosition: CSSProperties;
+}
+export declare const TooltipContext: import("react").Context<TooltipContextProps | null>;
+export {};

package/cjs/types/tooltip/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var react = require('react');
+
+const TooltipContext = react.createContext(null);
+
+exports.TooltipContext = TooltipContext;

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from './buttons';
 export * from './inputs';
 export * from './selectors';
+export * from './tooltip';
 export * from './types';
 export * from './utils';
 export * from './hooks';

package/index.js

@@ -6,5 +6,7 @@ import * as ImageInput from './inputs/ImageInput/ImageInput.js';
 export { ImageInput };
 import * as Dropdown from './selectors/Dropdown/Dropdown.js';
 export { Dropdown };
+import * as Tooltip from './tooltip/Tooltip/Tooltip.js';
+export { Tooltip };
 import 'react';
 export { DropdownContext, useDropdownContext } from './hooks/useDropdown.js';

package/inputs/Input/Input.d.ts

@@ -1,3 +1,3 @@
 import { InputProps } from '../../types';
-declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, useThrottle, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ id, value, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, children, showLimit, maxLength, onThrottledChange, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/inputs/Input/Input.js

@@ -1,9 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import useThrottling from '../../hooks/useThrottling.js';
 
-const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, useThrottle = false, children, ...props }) => {
-    const handleChange = onChange && useThrottle ? useThrottling(onChange, timeout) : onChange;
-    return (jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsx("input", { role: 'textbox', id: id, onChange: handleChange, ...props }), suffixElement] }));
+const Input = ({ id, value, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, children, showLimit, maxLength, onThrottledChange, ...props }) => {
+    const throttledOnChange = onThrottledChange ? useThrottling(onThrottledChange, timeout) : null;
+    const handleChange = (e) => {
+        if (maxLength && e.target.value?.length > maxLength)
+            return;
+        onChange?.(e);
+        throttledOnChange?.(e);
+    };
+    return (jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsx("input", { role: 'textbox', id: id, value: value, onChange: handleChange, ...props }), showLimit && maxLength && (jsxs("span", { id: [id, 'input-limit'].join('-'), children: [(value ?? '').toString().length, "/", maxLength] })), suffixElement] }));
 };
 
 export { Input as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.2.31",
+  "version": "0.2.34",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -39,9 +39,9 @@
       "types": "./hooks/useThrottling.d.ts"
     },
     "./index": {
-      "import": "./index.js",
-      "require": "./cjs/index.js",
-      "types": "./index.d.ts"
+      "import": "./types/tooltip/index.js",
+      "require": "./cjs/types/tooltip/index.js",
+      "types": "./types/tooltip/index.d.ts"
     },
     "./ImageInput": {
       "import": "./inputs/ImageInput/ImageInput.js",
@@ -57,6 +57,21 @@
       "import": "./selectors/Dropdown/Dropdown.js",
       "require": "./cjs/selectors/Dropdown/Dropdown.js",
       "types": "./selectors/Dropdown/Dropdown.d.ts"
+    },
+    "./Tooltip": {
+      "import": "./tooltip/Tooltip/Tooltip.js",
+      "require": "./cjs/tooltip/Tooltip/Tooltip.js",
+      "types": "./tooltip/Tooltip/Tooltip.d.ts"
+    },
+    "./cjs/types/tooltip": {
+      "import": "./cjs/types/tooltip/index.js",
+      "require": "./cjs/cjs/types/tooltip/index.js",
+      "types": "./cjs/types/tooltip/index.d.ts"
+    },
+    "./types/tooltip": {
+      "import": "./types/tooltip/index.js",
+      "require": "./cjs/types/tooltip/index.js",
+      "types": "./types/tooltip/index.d.ts"
     }
   },
   "keywords": [

package/tooltip/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from '../../types/tooltip';
+declare const Tooltip: (({ children, style, position, space, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element) & {
+    Label: ({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Tooltip;

package/tooltip/Tooltip/Tooltip.js

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useContext } from 'react';
+import { TooltipContext } from '../../types/tooltip/index.js';
+
+const TooltipRoot = ({ children, style, position = 'top', space = 8, ...props }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipPosition, setTooltipPosition] = useState({});
+    useEffect(() => {
+        if (!showTooltip)
+            return;
+        const positionStyles = {
+            zIndex: 1000,
+        };
+        switch (position) {
+            case 'top':
+                positionStyles.bottom = `calc(100% + ${space}px)`;
+                positionStyles.left = '50%';
+                positionStyles.transform = 'translateX(-50%)';
+                break;
+            case 'bottom':
+                positionStyles.top = `calc(100% + ${space}px)`;
+                positionStyles.left = '50%';
+                positionStyles.transform = 'translateX(-50%)';
+                break;
+            case 'left':
+                positionStyles.right = `calc(100% + ${space}px)`;
+                positionStyles.top = '50%';
+                positionStyles.transform = 'translateY(-50%)';
+                break;
+            case 'right':
+                positionStyles.left = `calc(100% + ${space}px)`;
+                positionStyles.top = '50%';
+                positionStyles.transform = 'translateY(-50%)';
+                break;
+        }
+        setTooltipPosition(positionStyles);
+    }, [showTooltip, position]);
+    const onMouseOver = () => setShowTooltip(true);
+    const onMouseLeave = () => setShowTooltip(false);
+    return (jsx("div", { style: {
+            position: 'relative',
+            display: 'inline-block', // 자식 크기에 영향 안 받도록
+            ...style,
+        }, onMouseOver: onMouseOver, onMouseLeave: onMouseLeave, ...props, children: jsx(TooltipContext.Provider, { value: { show: showTooltip, tooltipPosition }, children: children }) }));
+};
+const TooltipLabel = ({ children, style, ...props }) => {
+    const context = useContext(TooltipContext);
+    if (!context) {
+        throw new Error('Tooltip.* 컴포넌트는 Tooltip 내에서만 사용해야 합니다.');
+    }
+    const { show, tooltipPosition } = context;
+    const labelStyle = {
+        position: 'absolute',
+        visibility: show ? 'visible' : 'hidden',
+        ...tooltipPosition,
+        ...style,
+    };
+    return (jsx("div", { style: labelStyle, ...props, children: children }));
+};
+const Tooltip = Object.assign(TooltipRoot, {
+    Label: TooltipLabel,
+});
+
+export { Tooltip as default };

package/tooltip/index.d.ts

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

package/types/inputs/index.d.ts

@@ -1,11 +1,13 @@
-import { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { ChangeEvent, CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffixElement?: ReactElement | ReactNode;
     prefixElement?: ReactElement | ReactNode;
     wrapperStyle?: CSSProperties;
     wrapperClass?: string[];
-    useThrottle?: boolean;
     timeout?: number;
+    showLimit?: boolean;
+    maxLength?: number;
+    onThrottledChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export interface ImageInputContextData {
     id?: string;

package/types/tooltip/index.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    position?: TooltipPosition;
+    style?: CSSProperties;
+    space?: number;
+}
+interface TooltipContextProps {
+    show: boolean;
+    tooltipPosition: CSSProperties;
+}
+export declare const TooltipContext: import("react").Context<TooltipContextProps | null>;
+export {};

package/types/tooltip/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TooltipContext = createContext(null);
+
+export { TooltipContext };

package/version.txt

@@ -1 +1 @@
-0.2.31
+0.2.34