jy-headless 0.3.11 → 0.3.13

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AutocompleteInputProps, AutocompleteOptionProps, AutocompleteOptionsProps, AutocompleteProps } from './Autocomplete.type';
 declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
-    Input: ({ onKeyDown, onFocus, onChange, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     Options: ({ items, renderItem, itemHeight, maxVisibleItems, overscan, children, ...props }: AutocompleteOptionsProps) => React.ReactPortal | null;
     Option: ({ value, label, disabled, children, ...props }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/Autocomplete/Autocomplete.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useState, useRef, useId, useMemo, useEffect, useContext } from 'react';
 import usePortal from '../hooks/usePortal.js';
+import TextInput from '../Input/TextInput.js';
 
 const AutocompleteContext = createContext(null);
 const useAutocomplete = () => {
@@ -104,8 +105,11 @@ const useItemsBridge = () => useContext(ItemsBridgeContext);
  * - 포커스는 input 유지
  * - aria-activedescendant로 active option을 알려줌
  */
-const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
+// ...생략
+const Input = ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }) => {
     const { open, setOpen, query, setQuery, disabled, listboxId, activeIndex, setActiveIndex, filtered, commitByIndex, close, inputRef, } = useAutocomplete();
+    // ✅ IME 조합 중에는 방향키/엔터로 옵션 선택하지 않게 막기
+    const composingRef = useRef(false);
     const activeId = activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined;
     const move = (delta) => {
         if (!filtered.length)
@@ -113,15 +117,7 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
         setOpen(true);
         setActiveIndex(activeIndex < 0 ? 0 : (activeIndex + delta + filtered.length) % filtered.length);
     };
-    const pageMove = (deltaPages) => {
-        if (!filtered.length)
-            return;
-        setOpen(true);
-        // 10개 단위 이동(관례). 필요하면 props로 빼도 됨
-        const jump = 10 * deltaPages;
-        setActiveIndex(Math.max(0, Math.min(filtered.length - 1, (activeIndex < 0 ? 0 : activeIndex) + jump)));
-    };
-    return (jsxs(Fragment, { children: [jsx("input", { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
+    return (jsxs(Fragment, { children: [jsx(TextInput, { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
                     if (!disabled) {
                         setOpen(true);
                         setActiveIndex(filtered.length ? 0 : -1);
@@ -134,9 +130,20 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
                     setOpen(true);
                     setActiveIndex(0);
                     onChange?.(e);
+                }, onCompositionStart: (e) => {
+                    composingRef.current = true;
+                    onCompositionStart?.(e);
+                }, onCompositionEnd: (e) => {
+                    composingRef.current = false;
+                    onCompositionEnd?.(e);
                 }, onKeyDown: (e) => {
                     if (disabled)
                         return;
+                    // ✅ 조합중이면 Autocomplete 키처리 하지 않음
+                    if (composingRef.current) {
+                        onKeyDown?.(e);
+                        return;
+                    }
                     switch (e.key) {
                         case 'ArrowDown':
                             e.preventDefault();
@@ -146,24 +153,6 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
                             e.preventDefault();
                             move(-1);
                             break;
-                        case 'Home':
-                            e.preventDefault();
-                            setOpen(true);
-                            setActiveIndex(filtered.length ? 0 : -1);
-                            break;
-                        case 'End':
-                            e.preventDefault();
-                            setOpen(true);
-                            setActiveIndex(filtered.length ? filtered.length - 1 : -1);
-                            break;
-                        case 'PageDown':
-                            e.preventDefault();
-                            pageMove(1);
-                            break;
-                        case 'PageUp':
-                            e.preventDefault();
-                            pageMove(-1);
-                            break;
                         case 'Enter':
                             if (open && activeIndex >= 0) {
                                 e.preventDefault();
@@ -175,7 +164,6 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
                             close();
                             break;
                         case 'Tab':
-                            // 관례: 탭 이동 시 팝오버 닫기
                             close();
                             break;
                     }

package/dist/Autocomplete/Autocomplete.type.d.ts

@@ -1,4 +1,5 @@
-import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { TextInputProps } from '../Input/TextInput.type';
 export type AutocompleteItem = {
     value: string;
     label: string;
@@ -14,7 +15,7 @@ export interface AutocompleteProps {
     filterFn?: (item: AutocompleteItem, query: string) => boolean;
     children: ReactNode;
 }
-export interface AutocompleteInputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface AutocompleteInputProps extends TextInputProps {
     /** label 연결용 (없으면 aria-label 필수) */
     'aria-label'?: string;
 }

package/dist/Autocomplete/index.d.ts

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

package/dist/Input/TextInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TextInputProps } from './TextInput.type';
-declare const TextInput: ({ maxLength, onChange, pattern, onValidate, validator, onCompositionStart, onCompositionEnd, disallowPattern, trimWhitespace, debounceMs, throttleMs, onDebouncedChange, onThrottledChange, onBlur, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/Input/TextInput.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useMemo } from 'react';
+import 'react-dom';
+import { useDebounce } from '../hooks/useDebounce.js';
+import { useThrottle } from '../hooks/useThrottle.js';
+
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function')
+                ref(value);
+            else
+                ref.current = value;
+        });
+    };
+}
+const TextInput = forwardRef(({ maxLength, onChange, pattern, onValidate, validator, onCompositionStart, onCompositionEnd, disallowPattern, trimWhitespace, debounceMs, throttleMs, onDebouncedChange, onThrottledChange, onBlur, ...props }, ref) => {
+    const [isComposing, setIsComposing] = useState(false);
+    const innerRef = useRef(null);
+    const combinedRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
+    const debouncedChange = useDebounce((value) => onDebouncedChange?.(value), debounceMs || 0);
+    const throttledChange = useThrottle((value) => onThrottledChange?.(value), throttleMs || 0);
+    const handleCompositionStart = (e) => {
+        setIsComposing(true);
+        onCompositionStart?.(e);
+    };
+    const handleCompositionEnd = (e) => {
+        setIsComposing(false);
+        onCompositionEnd?.(e);
+    };
+    const handleChange = (e) => {
+        if (maxLength && !isComposing && e.target.value.length > maxLength)
+            return;
+        if (pattern) {
+            const regex = new RegExp(pattern);
+            if (!regex.test(e.target.value))
+                return;
+        }
+        if (disallowPattern && !disallowPattern.test(e.target.value))
+            return;
+        if (debounceMs && onDebouncedChange)
+            debouncedChange(e.target.value);
+        if (throttleMs && onThrottledChange)
+            throttledChange(e.target.value);
+        if (validator) {
+            const result = validator(e.target.value);
+            const isValid = typeof result === 'boolean' ? result : true;
+            const error = typeof result === 'string' ? result : undefined;
+            onValidate?.(isValid, error);
+            if (!isValid)
+                return;
+        }
+        onChange?.(e);
+    };
+    const handleBlur = (e) => {
+        if (trimWhitespace && innerRef.current) {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                innerRef.current.value = trimmedValue;
+                const syntheticEvent = {
+                    ...e,
+                    target: innerRef.current,
+                    currentTarget: innerRef.current,
+                    type: 'change',
+                };
+                onChange?.(syntheticEvent);
+            }
+        }
+        onBlur?.(e);
+    };
+    return (jsx("input", { ref: combinedRef, ...props, onBlur: handleBlur, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }));
+});
+TextInput.displayName = 'TextInput';
+
+export { TextInput as default };

package/dist/Input/index.d.ts

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

package/dist/Select/index.d.ts

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

package/dist/cjs/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AutocompleteInputProps, AutocompleteOptionProps, AutocompleteOptionsProps, AutocompleteProps } from './Autocomplete.type';
 declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
-    Input: ({ onKeyDown, onFocus, onChange, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     Options: ({ items, renderItem, itemHeight, maxVisibleItems, overscan, children, ...props }: AutocompleteOptionsProps) => React.ReactPortal | null;
     Option: ({ value, label, disabled, children, ...props }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/cjs/Autocomplete/Autocomplete.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var usePortal = require('../hooks/usePortal.js');
+var TextInput = require('../Input/TextInput.js');
 
 const AutocompleteContext = react.createContext(null);
 const useAutocomplete = () => {
@@ -106,8 +107,11 @@ const useItemsBridge = () => react.useContext(ItemsBridgeContext);
  * - 포커스는 input 유지
  * - aria-activedescendant로 active option을 알려줌
  */
-const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
+// ...생략
+const Input = ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }) => {
     const { open, setOpen, query, setQuery, disabled, listboxId, activeIndex, setActiveIndex, filtered, commitByIndex, close, inputRef, } = useAutocomplete();
+    // ✅ IME 조합 중에는 방향키/엔터로 옵션 선택하지 않게 막기
+    const composingRef = react.useRef(false);
     const activeId = activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined;
     const move = (delta) => {
         if (!filtered.length)
@@ -115,15 +119,7 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
         setOpen(true);
         setActiveIndex(activeIndex < 0 ? 0 : (activeIndex + delta + filtered.length) % filtered.length);
     };
-    const pageMove = (deltaPages) => {
-        if (!filtered.length)
-            return;
-        setOpen(true);
-        // 10개 단위 이동(관례). 필요하면 props로 빼도 됨
-        const jump = 10 * deltaPages;
-        setActiveIndex(Math.max(0, Math.min(filtered.length - 1, (activeIndex < 0 ? 0 : activeIndex) + jump)));
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
                     if (!disabled) {
                         setOpen(true);
                         setActiveIndex(filtered.length ? 0 : -1);
@@ -136,9 +132,20 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
                     setOpen(true);
                     setActiveIndex(0);
                     onChange?.(e);
+                }, onCompositionStart: (e) => {
+                    composingRef.current = true;
+                    onCompositionStart?.(e);
+                }, onCompositionEnd: (e) => {
+                    composingRef.current = false;
+                    onCompositionEnd?.(e);
                 }, onKeyDown: (e) => {
                     if (disabled)
                         return;
+                    // ✅ 조합중이면 Autocomplete 키처리 하지 않음
+                    if (composingRef.current) {
+                        onKeyDown?.(e);
+                        return;
+                    }
                     switch (e.key) {
                         case 'ArrowDown':
                             e.preventDefault();
@@ -148,24 +155,6 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
                             e.preventDefault();
                             move(-1);
                             break;
-                        case 'Home':
-                            e.preventDefault();
-                            setOpen(true);
-                            setActiveIndex(filtered.length ? 0 : -1);
-                            break;
-                        case 'End':
-                            e.preventDefault();
-                            setOpen(true);
-                            setActiveIndex(filtered.length ? filtered.length - 1 : -1);
-                            break;
-                        case 'PageDown':
-                            e.preventDefault();
-                            pageMove(1);
-                            break;
-                        case 'PageUp':
-                            e.preventDefault();
-                            pageMove(-1);
-                            break;
                         case 'Enter':
                             if (open && activeIndex >= 0) {
                                 e.preventDefault();
@@ -177,7 +166,6 @@ const Input = ({ onKeyDown, onFocus, onChange, ...props }) => {
                             close();
                             break;
                         case 'Tab':
-                            // 관례: 탭 이동 시 팝오버 닫기
                             close();
                             break;
                     }

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

@@ -1,4 +1,5 @@
-import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { TextInputProps } from '../Input/TextInput.type';
 export type AutocompleteItem = {
     value: string;
     label: string;
@@ -14,7 +15,7 @@ export interface AutocompleteProps {
     filterFn?: (item: AutocompleteItem, query: string) => boolean;
     children: ReactNode;
 }
-export interface AutocompleteInputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface AutocompleteInputProps extends TextInputProps {
     /** label 연결용 (없으면 aria-label 필수) */
     'aria-label'?: string;
 }

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

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

package/dist/cjs/Input/TextInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TextInputProps } from './TextInput.type';
-declare const TextInput: ({ maxLength, onChange, pattern, onValidate, validator, onCompositionStart, onCompositionEnd, disallowPattern, trimWhitespace, debounceMs, throttleMs, onDebouncedChange, onThrottledChange, onBlur, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/cjs/Input/TextInput.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('react-dom');
+var useDebounce = require('../hooks/useDebounce.js');
+var useThrottle = require('../hooks/useThrottle.js');
+
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function')
+                ref(value);
+            else
+                ref.current = value;
+        });
+    };
+}
+const TextInput = react.forwardRef(({ maxLength, onChange, pattern, onValidate, validator, onCompositionStart, onCompositionEnd, disallowPattern, trimWhitespace, debounceMs, throttleMs, onDebouncedChange, onThrottledChange, onBlur, ...props }, ref) => {
+    const [isComposing, setIsComposing] = react.useState(false);
+    const innerRef = react.useRef(null);
+    const combinedRef = react.useMemo(() => mergeRefs(innerRef, ref), [ref]);
+    const debouncedChange = useDebounce.useDebounce((value) => onDebouncedChange?.(value), debounceMs || 0);
+    const throttledChange = useThrottle.useThrottle((value) => onThrottledChange?.(value), throttleMs || 0);
+    const handleCompositionStart = (e) => {
+        setIsComposing(true);
+        onCompositionStart?.(e);
+    };
+    const handleCompositionEnd = (e) => {
+        setIsComposing(false);
+        onCompositionEnd?.(e);
+    };
+    const handleChange = (e) => {
+        if (maxLength && !isComposing && e.target.value.length > maxLength)
+            return;
+        if (pattern) {
+            const regex = new RegExp(pattern);
+            if (!regex.test(e.target.value))
+                return;
+        }
+        if (disallowPattern && !disallowPattern.test(e.target.value))
+            return;
+        if (debounceMs && onDebouncedChange)
+            debouncedChange(e.target.value);
+        if (throttleMs && onThrottledChange)
+            throttledChange(e.target.value);
+        if (validator) {
+            const result = validator(e.target.value);
+            const isValid = typeof result === 'boolean' ? result : true;
+            const error = typeof result === 'string' ? result : undefined;
+            onValidate?.(isValid, error);
+            if (!isValid)
+                return;
+        }
+        onChange?.(e);
+    };
+    const handleBlur = (e) => {
+        if (trimWhitespace && innerRef.current) {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                innerRef.current.value = trimmedValue;
+                const syntheticEvent = {
+                    ...e,
+                    target: innerRef.current,
+                    currentTarget: innerRef.current,
+                    type: 'change',
+                };
+                onChange?.(syntheticEvent);
+            }
+        }
+        onBlur?.(e);
+    };
+    return (jsxRuntime.jsx("input", { ref: combinedRef, ...props, onBlur: handleBlur, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }));
+});
+TextInput.displayName = 'TextInput';
+
+module.exports = TextInput;

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

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

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

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

package/dist/cjs/index.js

@@ -6,6 +6,7 @@ require('react-dom');
 var useDebounce = require('./hooks/useDebounce.js');
 var useThrottle = require('./hooks/useThrottle.js');
 var Tooltip = require('./Tooltip/Tooltip.js');
+require('./Input/TextInput.js');
 var Select = require('./Select/Select.js');
 require('./Autocomplete/Autocomplete.js');
 

package/dist/index.js

@@ -4,5 +4,6 @@ import 'react-dom';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useThrottle } from './hooks/useThrottle.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
+import './Input/TextInput.js';
 export { useSelectContext } from './Select/Select.js';
 import './Autocomplete/Autocomplete.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "A lightweight and customizable headless UI library for React components",
   "main": "dist/index.js",
   "module": "dist/index.js",