@designbasekorea/ui 0.6.1 → 0.7.0

package/dist/index.umd.js

@@ -4451,7 +4451,53 @@
     });
     Checkbox.displayName = 'Checkbox';
 
-    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, showShortcut = false, shortcutLabel = '⌘K', className, ...rest }) => {
+    const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
+        // 사이즈별 아이콘 크기
+        const getIconSize = () => {
+            switch (size) {
+                case 's':
+                    return 12;
+                case 'm':
+                    return 16;
+                case 'l':
+                    return 20;
+                default:
+                    return 16;
+            }
+        };
+        const iconSize = getIconSize();
+        const handleDelete = (e) => {
+            e.stopPropagation();
+            if (!disabled && onDelete) {
+                onDelete();
+            }
+        };
+        const handleClick = () => {
+            if (!disabled && onClick) {
+                onClick();
+            }
+        };
+        const classes = clsx('designbase-chip', `designbase-chip--${size}`, `designbase-chip--${variant}`, {
+            'designbase-chip--deletable': deletable,
+            'designbase-chip--disabled': disabled,
+            'designbase-chip--selected': selected,
+            'designbase-chip--clickable': onClick,
+            'designbase-chip--full-width': fullWidth,
+        }, className);
+        return (jsxRuntime.jsxs("div", { className: classes, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, onClick: handleClick, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleClick();
+                }
+            }, ...props, children: [startIcon && (jsxRuntime.jsx("span", { className: "designbase-chip__start-icon", children: React.isValidElement(startIcon)
+                        ? React.cloneElement(startIcon, { size: iconSize })
+                        : startIcon })), jsxRuntime.jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsxRuntime.jsx("span", { className: "designbase-chip__end-icon", children: React.isValidElement(endIcon)
+                        ? React.cloneElement(endIcon, { size: iconSize })
+                        : endIcon })), deletable && (jsxRuntime.jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsxRuntime.jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+    };
+    Chip.displayName = 'Chip';
+
+    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', recentSearchesLayout = 'vertical', suggestedSearches = [], suggestionRollingInterval = 5000, categories = [], selectedCategory = '', onCategoryChange, searchResults, renderSearchResult, onSearchResultClick, emptyStateMessage, onChange, onSearch, onFocus, onBlur, onKeyDown, showShortcut = false, shortcutLabel = '⌘K', className, ...rest }) => {
         const [internalValue, setInternalValue] = React.useState(defaultValue);
         const [recentSearches, setRecentSearches] = React.useState([]);
         const [showRecentSearches, setShowRecentSearches] = React.useState(false);
@@ -4498,6 +4544,26 @@
                 setInternalValue(value);
             }
         }, [value]);
+        // 전역 단축키 포커스
+        React.useEffect(() => {
+            if (!showShortcut || disabled || readOnly)
+                return;
+            const handleGlobalKeyDown = (e) => {
+                const isModifier = e.metaKey || e.ctrlKey;
+                let keyToMatch = 'k'; // 기본값 (⌘K)
+                if (shortcutLabel) {
+                    const lastChar = shortcutLabel.slice(-1).toLowerCase();
+                    if (lastChar)
+                        keyToMatch = lastChar;
+                }
+                if (isModifier && e.key.toLowerCase() === keyToMatch) {
+                    e.preventDefault();
+                    inputRef.current?.focus();
+                }
+            };
+            window.addEventListener('keydown', handleGlobalKeyDown);
+            return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+        }, [showShortcut, shortcutLabel, disabled, readOnly]);
         const handleChange = (e) => {
             const newValue = e.target.value;
             setInternalValue(newValue);
@@ -4582,6 +4648,20 @@
             }
             handleSearch(suggestion);
         };
+        const handleSearchResultClick = (result) => {
+            onSearchResultClick?.(result);
+            setShowRecentSearches(false); // Close dropdown
+        };
+        const handleCategoryClick = (category) => {
+            onCategoryChange?.(category);
+        };
+        const hasSearchResults = searchResults !== undefined && searchResults.length > 0;
+        const hasValue = currentValue && currentValue.length > 0;
+        const showDropdown = isFocused && (categories.length > 0 ||
+            (enableRecentSearches && recentSearches.length > 0 && !hasValue) ||
+            (suggestedSearches.length > 0 && !hasValue) ||
+            (searchResults !== undefined && hasValue) ||
+            (emptyStateMessage && !hasValue && (!enableRecentSearches || recentSearches.length === 0) && suggestedSearches.length === 0));
         const classes = clsx('designbase-search-bar', `designbase-search-bar--${size}`, `designbase-search-bar--${variant}`, {
             'designbase-search-bar--disabled': disabled,
             'designbase-search-bar--readonly': readOnly,
@@ -4597,9 +4677,30 @@
             ? suggestedSearches[currentSuggestion]
             : placeholder;
         const shortcutBadgeSize = size === 'l' ? 'm' : 's';
-        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...rest }), showShortcut && !currentValue && !disabled && !readOnly && (jsxRuntime.jsx(Badge, { className: "designbase-search-bar__shortcut-badge", size: shortcutBadgeSize, variant: "secondary", style: "text", "aria-hidden": "true", children: shortcutLabel })), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
-                                    'designbase-search-bar__suggestion-item--active': index === currentSuggestion
-                                }), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) })] }))] }));
+        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...rest }), showShortcut && !currentValue && !disabled && !readOnly && (jsxRuntime.jsx(Badge, { className: "designbase-search-bar__shortcut-badge", size: shortcutBadgeSize, variant: "secondary", style: "text", "aria-hidden": "true", children: shortcutLabel })), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showDropdown && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__dropdown", children: [categories.length > 0 && (jsxRuntime.jsx("div", { className: "designbase-search-bar__categories", children: categories.map((category) => (jsxRuntime.jsx(Chip, { label: category, size: "s", variant: category === selectedCategory ? 'primary' : 'default', onClick: () => { }, onMouseDown: (e) => {
+                                    // prevent blur
+                                    e.preventDefault();
+                                    handleCategoryClick(category);
+                                } }, category))) })), hasValue && searchResults !== undefined ? (jsxRuntime.jsx("div", { className: "designbase-search-bar__results", children: hasSearchResults ? (jsxRuntime.jsx("ul", { className: "designbase-search-bar__results-list", children: searchResults.map((result, index) => (jsxRuntime.jsx("li", { className: "designbase-search-bar__result-item", onMouseDown: (e) => {
+                                        e.preventDefault();
+                                        handleSearchResultClick(result);
+                                    }, children: renderSearchResult ? renderSearchResult(result, index) : result.toString() }, index))) })) : (jsxRuntime.jsx("div", { className: "designbase-search-bar__results-empty", children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })) })) : (
+                        /* 2. 최근 검색어 & 추천 검색어 (검색어가 없을 때) */
+                        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enableRecentSearches && !hasValue && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: clsx('designbase-search-bar__recent-searches', `designbase-search-bar__recent-searches--${recentSearchesLayout}`), children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onMouseDown: (e) => {
+                                                        e.preventDefault();
+                                                        handleClearAllRecentSearches();
+                                                    }, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onMouseDown: (e) => {
+                                                            e.preventDefault();
+                                                            handleRecentSearchClick(searchTerm);
+                                                        }, children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onMouseDown: (e) => {
+                                                            e.preventDefault();
+                                                            handleRemoveRecentSearch(searchTerm);
+                                                        }, "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && !hasValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
+                                                    'designbase-search-bar__suggestion-item--active': index === currentSuggestion
+                                                }), onMouseDown: (e) => {
+                                                    e.preventDefault();
+                                                    handleSuggestionClick(suggestion);
+                                                }, children: suggestion }, index))) })] })), emptyStateMessage && !hasValue && (!enableRecentSearches || recentSearches.length === 0) && suggestedSearches.length === 0 && (jsxRuntime.jsx("div", { className: "designbase-search-bar__empty-state", children: emptyStateMessage }))] }))] }))] }));
     };
     SearchBar.displayName = 'SearchBar';
 
@@ -5771,52 +5872,6 @@
                                                 }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsxRuntime.jsx(icons.DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--prev'), onClick: goToPrevious, disabled: disabled || readonly || isPrevDisabled, title: "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntime.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntime.jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--next'), onClick: goToNext, disabled: disabled || readonly || isNextDisabled, title: "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntime.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--first", onClick: goToFirst, disabled: disabled || readonly || currentIndex === 0, title: "\uCCAB \uBC88\uC9F8 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntime.jsx(icons.ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntime.jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--last", onClick: goToLast, disabled: disabled || readonly || currentIndex === items.length - 1, title: "\uB9C8\uC9C0\uB9C9 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntime.jsx(icons.ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsxRuntime.jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntime.jsx(icons.ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsxRuntime.jsx(icons.ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxRuntime.jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsxRuntime.jsx("div", { className: "designbase-carousel__indicators", children: jsxRuntime.jsx(Indicator, { current: currentIndex, total: items.length, type: indicatorStyle === 'lines' ? 'line' : indicatorStyle === 'numbers' ? 'numbers' : 'dots', size: "s", clickable: true, onStepClick: goToSlide }) })), showAutoPlayControl && items.length > 1 && (jsxRuntime.jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsxRuntime.jsx(icons.PauseIcon, { size: iconSize, color: "currentColor" }) : jsxRuntime.jsx(icons.PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
     };
 
-    const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
-        // 사이즈별 아이콘 크기
-        const getIconSize = () => {
-            switch (size) {
-                case 's':
-                    return 12;
-                case 'm':
-                    return 16;
-                case 'l':
-                    return 20;
-                default:
-                    return 16;
-            }
-        };
-        const iconSize = getIconSize();
-        const handleDelete = (e) => {
-            e.stopPropagation();
-            if (!disabled && onDelete) {
-                onDelete();
-            }
-        };
-        const handleClick = () => {
-            if (!disabled && onClick) {
-                onClick();
-            }
-        };
-        const classes = clsx('designbase-chip', `designbase-chip--${size}`, `designbase-chip--${variant}`, {
-            'designbase-chip--deletable': deletable,
-            'designbase-chip--disabled': disabled,
-            'designbase-chip--selected': selected,
-            'designbase-chip--clickable': onClick,
-            'designbase-chip--full-width': fullWidth,
-        }, className);
-        return (jsxRuntime.jsxs("div", { className: classes, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, onClick: handleClick, onKeyDown: (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    handleClick();
-                }
-            }, ...props, children: [startIcon && (jsxRuntime.jsx("span", { className: "designbase-chip__start-icon", children: React.isValidElement(startIcon)
-                        ? React.cloneElement(startIcon, { size: iconSize })
-                        : startIcon })), jsxRuntime.jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsxRuntime.jsx("span", { className: "designbase-chip__end-icon", children: React.isValidElement(endIcon)
-                        ? React.cloneElement(endIcon, { size: iconSize })
-                        : endIcon })), deletable && (jsxRuntime.jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsxRuntime.jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
-    };
-    Chip.displayName = 'Chip';
-
     /* ----------------------- 유틸 ----------------------- */
     const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
     const normalizeHex = (s) => (s || '').trim().toUpperCase();