@designbasekorea/ui 0.2.36 → 0.2.38

package/dist/index.umd.js

@@ -5323,14 +5323,13 @@
     /* ----------------------- 유틸 ----------------------- */
     const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
     const normalizeHex = (s) => (s || '').trim().toUpperCase();
-    /** #RRGGBB → {r,g,b} */
+    const isHex = (s) => /^#?[0-9A-Fa-f]{6}$/.test(s || '');
     const hexToRgb = (hex) => {
         const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
         if (!m)
             return null;
         return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
     };
-    /** RGB → HEX */
     const toHex = (r, g, b) => {
         const h = (x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, '0');
         return `#${h(r)}${h(g)}${h(b)}`.toUpperCase();
@@ -5429,9 +5428,9 @@
         return { h, s: s * 100, l: l * 100 };
     };
     /* ----------------------- 컴포넌트 ----------------------- */
-    const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChangeFormat = 'hex', fireOnInit = false, changeDebounceMs = 0, onChange, onApply, onCancel, className, }) => {
-        /** 초기 HSV는 props에서 즉시 도출(StrictMode 안전) */
-        const initialHex = normalizeHex(value || defaultValue) || '#006FFF';
+    const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, showEyedropper = true, disabled = false, readonly = false, onChangeFormat = 'hex', fireOnInit = false, changeDebounceMs = 0, emitDuringDrag = true, onChange, onApply, onCancel, className, }) => {
+        /** 초기 HSV — StrictMode에서도 안전하도록 lazy init */
+        const initialHex = (isHex(value) ? normalizeHex(value) : normalizeHex(defaultValue)) || '#006FFF';
         const initialRgb = hexToRgb(initialHex) || { r: 0, g: 111, b: 255 };
         const initialHsv = rgbToHsv(initialRgb.r, initialRgb.g, initialRgb.b);
         const [h, setH] = React.useState(() => initialHsv.h);
@@ -5446,17 +5445,26 @@
         const [tempColor, setTempColor] = React.useState('');
         const pickerRef = React.useRef(null);
         const areaRef = React.useRef(null);
+        /** 드래그 상태/자체 발사 억제 */
         const dragging = React.useRef(false);
-        /** onChange 보호 상태 */
-        const lastEmittedRef = React.useRef(normalizeHex(initialHex)); // ✅ 초기값 미리 기록
-        const didMountRef = React.useRef(false); // ✅ 첫 렌더 감지
+        const didMountRef = React.useRef(false);
+        const lastEmittedHexRef = React.useRef(initialHex);
+        const suppressNextValueSyncRef = React.useRef(false);
         const emitErrorCountRef = React.useRef(0);
         const emitBlockedUntilRef = React.useRef(0);
-        /** 제어형(value) 변화 → HSV 반영 */
+        const debounceTimerRef = React.useRef(null);
+        /** 외부 value 변화 → 내부 HSV 반영(자기 발사 직후는 무시 가능) */
         React.useEffect(() => {
             if (value == null)
                 return;
             const norm = normalizeHex(value);
+            if (!isHex(norm))
+                return;
+            // 자기 자신이 방금 보낸 값이면 동기화 스킵(미세 진동 방지)
+            if (suppressNextValueSyncRef.current && norm === lastEmittedHexRef.current) {
+                suppressNextValueSyncRef.current = false;
+                return;
+            }
             const rgb = hexToRgb(norm);
             if (!rgb)
                 return;
@@ -5470,7 +5478,7 @@
         const rgb = React.useMemo(() => hsvToRgb(h, s, v), [h, s, v]);
         const hex = React.useMemo(() => toHex(rgb.r, rgb.g, rgb.b), [rgb]);
         const hsl = React.useMemo(() => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb]);
-        /** UI 표시 문자열 */
+        /** 표시 문자열(UI 포맷) */
         const uiFormatted = React.useMemo(() => {
             const alpha = a / 100;
             switch (format) {
@@ -5482,56 +5490,9 @@
                 default: return hex;
             }
         }, [format, hex, rgb, hsl, a]);
-        /** 콜백으로 내보낼 문자열 */
-        const outward = React.useMemo(() => {
-            if (onChangeFormat === 'hex')
-                return hex;
-            return uiFormatted;
-        }, [hex, uiFormatted, onChangeFormat]);
-        /** 최초 렌더 스킵 + 동일값/레이트리밋 검사 후 onChange */
-        React.useEffect(() => {
-            if (!onChange)
-                return;
-            // 첫 렌더는 기본 차단 (옵션으로 허용)
-            if (!didMountRef.current) {
-                didMountRef.current = true;
-                if (!fireOnInit)
-                    return; // 기본: 초기 발사 금지
-            }
-            const now = Date.now();
-            if (emitBlockedUntilRef.current > now)
-                return;
-            const currentHexNorm = normalizeHex(outward);
-            const last = lastEmittedRef.current;
-            // 제어형: 부모 value와 동일하면 발사 금지
-            if (value && normalizeHex(value) === currentHexNorm)
-                return;
-            // 직전 발사값과 동일하면 금지
-            if (last === currentHexNorm)
-                return;
-            const fire = () => {
-                try {
-                    lastEmittedRef.current = currentHexNorm;
-                    onChange(onChangeFormat === 'hex' ? currentHexNorm : outward);
-                    emitErrorCountRef.current = 0;
-                }
-                catch (e) {
-                    emitErrorCountRef.current += 1;
-                    if (emitErrorCountRef.current >= 20) {
-                        emitBlockedUntilRef.current = Date.now() + 3000;
-                        // eslint-disable-next-line no-console
-                        console.warn('[ColorPicker] onChange errors too frequent; temporarily muted.');
-                    }
-                }
-            };
-            if (changeDebounceMs > 0) {
-                const t = setTimeout(fire, changeDebounceMs);
-                return () => clearTimeout(t);
-            }
-            fire();
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [outward]); // 의도적으로 onChange/value 제외
-        /** colorInput 동기화(표시 전용) */
+        /** 바깥으로 내보낼 문자열 */
+        const outward = React.useMemo(() => (onChangeFormat === 'hex' ? hex : uiFormatted), [hex, uiFormatted, onChangeFormat]);
+        /** colorInput(표시 전용) 동기화 — 순수 표시만, 포커스 중이면 건드리지 않는 게 안전하지만 간단히 비교 후 반영 */
         React.useEffect(() => {
             const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
             if (colorInput !== next)
@@ -5548,7 +5509,67 @@
                 document.addEventListener('mousedown', handler);
             return () => document.removeEventListener('mousedown', handler);
         }, [isOpen, type]);
-        /** S/V 영역 업데이트 */
+        /** ===== onChange 발사 컨트롤러 ===== */
+        const actuallyEmit = React.useCallback(() => {
+            if (!onChange)
+                return;
+            const now = Date.now();
+            if (emitBlockedUntilRef.current > now)
+                return;
+            const currentHex = normalizeHex(hex);
+            const parentHex = isHex(value) ? normalizeHex(value) : null;
+            // 부모값과 동치면 발사 금지
+            if (parentHex && parentHex === currentHex)
+                return;
+            // 직전 발사와 동일하면 발사 금지
+            if (lastEmittedHexRef.current === currentHex)
+                return;
+            try {
+                lastEmittedHexRef.current = currentHex;
+                suppressNextValueSyncRef.current = true; // 다음 value 동기화 스킵(왕복 진동 방지)
+                onChange(onChangeFormat === 'hex' ? currentHex : outward);
+                emitErrorCountRef.current = 0;
+            }
+            catch {
+                emitErrorCountRef.current += 1;
+                if (emitErrorCountRef.current >= 20) {
+                    emitBlockedUntilRef.current = Date.now() + 3000;
+                    console.warn('[ColorPicker] onChange errors too frequent; temporarily muted.');
+                }
+            }
+        }, [hex, outward, onChange, onChangeFormat, value]);
+        /** 변경 감지 → 발사(드래그 중 정책 + 디바운스 반영) */
+        React.useEffect(() => {
+            // 첫 렌더
+            if (!didMountRef.current) {
+                didMountRef.current = true;
+                if (!fireOnInit)
+                    return;
+            }
+            // 드래그 중이면 정책 적용
+            if (dragging.current && !emitDuringDrag) {
+                // 드래그 끝에서 발사하므로 지금은 무시
+                return;
+            }
+            if (!onChange)
+                return;
+            if (changeDebounceMs > 0) {
+                if (debounceTimerRef.current)
+                    window.clearTimeout(debounceTimerRef.current);
+                debounceTimerRef.current = window.setTimeout(() => {
+                    actuallyEmit();
+                }, changeDebounceMs);
+                return () => {
+                    if (debounceTimerRef.current)
+                        window.clearTimeout(debounceTimerRef.current);
+                };
+            }
+            else {
+                actuallyEmit();
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [hex, a, format]); // h/s/v → hex로 수렴됨. a/format도 외부로 나갈 수 있으니 포함.
+        /** ===== SV 영역 ===== */
         const updateFromArea = (clientX, clientY) => {
             const el = areaRef.current;
             if (!el)
@@ -5558,26 +5579,69 @@
             const y = clamp(clientY - rect.top, 0, rect.height);
             const newS = (x / rect.width) * 100;
             const newV = 100 - (y / rect.height) * 100;
+            // 소수점 그대로 보관 → 색 떨림 감소
             setS(newS);
             setV(newV);
         };
-        const onAreaMouseDown = (e) => { dragging.current = true; updateFromArea(e.clientX, e.clientY); };
-        const onAreaMouseMove = (e) => { if (dragging.current)
-            updateFromArea(e.clientX, e.clientY); };
-        const onAreaMouseUp = () => { dragging.current = false; };
-        const onAreaLeave = () => { dragging.current = false; };
-        const onAreaTouchStart = (e) => { dragging.current = true; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
-        const onAreaTouchMove = (e) => { if (!dragging.current)
-            return; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
-        const onAreaTouchEnd = () => { dragging.current = false; };
+        const onAreaMouseDown = (e) => {
+            if (disabled || readonly)
+                return;
+            dragging.current = true;
+            updateFromArea(e.clientX, e.clientY);
+        };
+        const onAreaMouseMove = (e) => {
+            if (!dragging.current || disabled || readonly)
+                return;
+            updateFromArea(e.clientX, e.clientY);
+        };
+        const finishDrag = () => {
+            if (!dragging.current)
+                return;
+            dragging.current = false;
+            // 드래그 종료 시 한 번만 발사
+            if (!emitDuringDrag) {
+                if (changeDebounceMs > 0) {
+                    if (debounceTimerRef.current)
+                        window.clearTimeout(debounceTimerRef.current);
+                    debounceTimerRef.current = window.setTimeout(() => {
+                        actuallyEmit();
+                    }, changeDebounceMs);
+                }
+                else {
+                    actuallyEmit();
+                }
+            }
+        };
+        const onAreaMouseUp = finishDrag;
+        const onAreaLeave = finishDrag;
+        const onAreaTouchStart = (e) => {
+            if (disabled || readonly)
+                return;
+            dragging.current = true;
+            const t = e.touches[0];
+            updateFromArea(t.clientX, t.clientY);
+        };
+        const onAreaTouchMove = (e) => {
+            if (!dragging.current || disabled || readonly)
+                return;
+            const t = e.touches[0];
+            updateFromArea(t.clientX, t.clientY);
+        };
+        const onAreaTouchEnd = finishDrag;
         /** 슬라이더 */
-        const onHueChange = React.useCallback((e) => setH(parseFloat(e.target.value)), []);
+        const onHueChange = React.useCallback((e) => {
+            if (disabled || readonly)
+                return;
+            setH(parseFloat(e.target.value));
+        }, [disabled, readonly]);
         const onAlphaChange = React.useCallback((e) => {
+            if (disabled || readonly)
+                return;
             const newAlpha = parseInt(e.target.value, 10);
             setA(newAlpha);
             setAlphaInput(String(newAlpha));
-        }, []);
-        /** 컬러 인풋 확정 */
+        }, [disabled, readonly]);
+        /** 입력 확정 */
         const commitColorInput = React.useCallback(() => {
             const str = colorInput.trim();
             if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
@@ -5617,7 +5681,9 @@
                 return;
             }
             // 인식 실패 → 표시값으로 원복
-            setColorInput(format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted);
+            const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+            if (colorInput !== next)
+                setColorInput(next);
         }, [colorInput, uiFormatted, format]);
         const onColorKeyDown = (e) => { if (e.key === 'Enter')
             commitColorInput(); };
@@ -5626,7 +5692,7 @@
             if (colorInput !== next)
                 setColorInput(next);
         };
-        /** 알파 인풋 확정 */
+        /** 알파 입력 확정 */
         const commitAlphaInput = React.useCallback(() => {
             const n = Number(alphaInput.trim());
             if (!Number.isNaN(n) && n >= 0 && n <= 100) {
@@ -5671,6 +5737,7 @@
                 console.error(e);
             }
         }, []);
+        const isEyedropperAvailable = typeof window !== 'undefined' && 'EyeDropper' in window;
         /** 모달 */
         const handleModalOpen = React.useCallback(() => {
             if (type === 'modal')
@@ -5735,7 +5802,7 @@
         const Trigger = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && (type === 'modal' ? handleModalOpen() : setIsOpen(v => !v)), children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-display", children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-box", style: {
                             backgroundColor: showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})` : hex
                         } }) }), showInput && (jsxRuntime.jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => { e.stopPropagation(); onCopy(); }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) })), jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] }));
-        const Selector = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-area", children: jsxRuntime.jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.EyedropperIcon, {}) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__slider-container", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__hue-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 360, value: h, onChange: onHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue", style: hueTrackStyle }) }), showAlpha && (jsxRuntime.jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] })] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxRuntime.jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
+        const Selector = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-area", children: jsxRuntime.jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [showEyedropper && isEyedropperAvailable && (jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.EyedropperIcon, {}) })), jsxRuntime.jsxs("div", { className: "designbase-color-picker__slider-container", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__hue-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 360, value: h, onChange: onHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue", style: hueTrackStyle }) }), showAlpha && (jsxRuntime.jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] })] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxRuntime.jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
                                 { label: 'HEX', value: 'hex' },
                                 { label: 'RGB', value: 'rgb' },
                                 { label: 'RGBA', value: 'rgba' },