@designbasekorea/ui 0.2.26 → 0.2.28

package/dist/index.js

@@ -4058,7 +4058,7 @@ const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminat
 });
 Checkbox.displayName = 'Checkbox';
 
-const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', maxHeight = 200, showClearButton = true, className, onChange, onFocus, onBlur, ...props }) => {
+const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', position = 'bottom', maxHeight = 200, showClearButton = true, className, onChange, onFocus, onBlur, ...props }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? (multiple ? [] : ''));
     const [searchTerm, setSearchTerm] = React.useState('');
@@ -4216,7 +4216,7 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
     const triggerClasses = clsx('designbase-select__trigger', {
         'designbase-select__trigger--focused': isOpen,
     });
-    const dropdownClasses = clsx('designbase-select__dropdown', `designbase-select__dropdown--${dropdownWidth}`, {
+    const dropdownClasses = clsx('designbase-select__dropdown', `designbase-select__dropdown--${dropdownWidth}`, `designbase-select__dropdown--${position}`, {
         'designbase-select__dropdown--open': isOpen,
     });
     const filteredOptions = getFilteredOptions();
@@ -5479,12 +5479,14 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         return; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
     const onAreaTouchEnd = () => { dragging.current = false; };
     /** 슬라이더 */
-    const onHueChange = (e) => setH(parseInt(e.target.value, 10));
-    const onAlphaChange = (e) => {
+    const onHueChange = React.useCallback((e) => {
+        setH(parseInt(e.target.value, 10));
+    }, []);
+    const onAlphaChange = React.useCallback((e) => {
         const newAlpha = parseInt(e.target.value, 10);
         setA(newAlpha);
         setAlphaInput(String(newAlpha)); // 실시간 동기화
-    };
+    }, []);
     /** 컬러 인풋: 엔터로만 확정 */
     const tryCommitColorInput = () => {
         const str = colorInput.trim();
@@ -5553,7 +5555,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         setAlphaInput(String(a));
     };
     /** 복사 */
-    const onCopy = async () => {
+    const onCopy = React.useCallback(async () => {
         try {
             await navigator.clipboard.writeText(formatted);
             setIsCopied(true);
@@ -5562,9 +5564,9 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         catch (e) {
             console.error(e);
         }
-    };
+    }, [formatted]);
     /** EyeDropper */
-    const onEyedrop = async () => {
+    const onEyedrop = React.useCallback(async () => {
         try {
             if ('EyeDropper' in window) {
                 const eye = new window.EyeDropper();
@@ -5582,21 +5584,21 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         catch (e) {
             console.error(e);
         }
-    };
+    }, []);
     /** 모달용 핸들러 */
-    const handleModalOpen = () => {
+    const handleModalOpen = React.useCallback(() => {
         if (type === 'modal') {
             setTempColor(formatted);
         }
         setIsOpen(true);
-    };
-    const handleModalApply = () => {
+    }, [type, formatted]);
+    const handleModalApply = React.useCallback(() => {
         if (type === 'modal') {
             onApply?.(formatted);
             setIsOpen(false);
         }
-    };
-    const handleModalCancel = () => {
+    }, [type, formatted, onApply]);
+    const handleModalCancel = React.useCallback(() => {
         if (type === 'modal') {
             // 원래 색상으로 복원
             const rgb = hexToRgb(tempColor);
@@ -5609,9 +5611,9 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             onCancel?.();
             setIsOpen(false);
         }
-    };
+    }, [type, tempColor, onCancel]);
     /** 배경 스타일 */
-    const hueTrackStyle = {
+    const hueTrackStyle = React.useMemo(() => ({
         background: `linear-gradient(to right,
       hsl(0,100%,50%),
       hsl(60,100%,50%),
@@ -5620,15 +5622,15 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
       hsl(240,100%,50%),
       hsl(300,100%,50%),
       hsl(360,100%,50%))`,
-    };
-    const areaBackground = {
+    }), []);
+    const areaBackground = React.useMemo(() => ({
         backgroundImage: `
       linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
       linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
     `,
-    };
+    }), [h]);
     /** ✔︎ 알파 트랙: 색상 무관, 고정 흑백 그라디언트 */
-    const alphaTrackStyle = {
+    const alphaTrackStyle = React.useMemo(() => ({
         backgroundImage: `
       linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
       linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
@@ -5639,7 +5641,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         backgroundSize: '8px 8px,8px 8px,8px 8px,8px 8px,100% 100%',
         backgroundPosition: '0 0,0 4px,4px -4px,-4px 0,0 0',
         backgroundColor: 'var(--db-surface-base)',
-    };
+    }), []);
     const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, `designbase-color-picker--${position}`, {
         'designbase-color-picker--disabled': disabled,
         'designbase-color-picker--readonly': readonly,
@@ -5653,8 +5655,8 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
                             { label: 'RGBA', value: 'rgba' },
                             { label: 'HSL', value: 'hsl' },
                             { label: 'HSLA', value: 'hsla' },
-                        ], size: "s" })), jsxRuntime.jsx(Input, { type: "text", value: colorInput, onChange: setColorInput, onKeyDown: onColorKeyDown, onBlur: onColorBlur, placeholder: "#000000", size: "s", className: "designbase-color-picker__value-input" }), showAlpha && (jsxRuntime.jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsxRuntime.jsx(Input, { type: "text", inputMode: "numeric", value: alphaInput, onChange: (value) => setAlphaInput(value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, placeholder: "100", size: "s", className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsxRuntime.jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, {}) : jsxRuntime.jsx(icons.CopyIcon, {}) }))] })] }));
-    return (jsxRuntime.jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsxRuntime.jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [Selector, jsxRuntime.jsx(ModalFooter, { children: jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [jsxRuntime.jsx(Button, { variant: "secondary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntime.jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
+                        ], size: "s", position: "top" })), jsxRuntime.jsx(Input, { type: "text", value: colorInput, onChange: setColorInput, onKeyDown: onColorKeyDown, onBlur: onColorBlur, placeholder: "#000000", size: "s", className: "designbase-color-picker__value-input" }), showAlpha && (jsxRuntime.jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsxRuntime.jsx(Input, { type: "text", inputMode: "numeric", value: alphaInput, onChange: (value) => setAlphaInput(value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, placeholder: "100", size: "s", className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsxRuntime.jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, {}) : jsxRuntime.jsx(icons.CopyIcon, {}) }))] })] }));
+    return (jsxRuntime.jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsxRuntime.jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsxRuntime.jsx(ModalBody, { children: Selector }), jsxRuntime.jsx(ModalFooter, { children: jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [jsxRuntime.jsx(Button, { variant: "tertiary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntime.jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
 };
 ColorPicker.displayName = 'ColorPicker';