@designbasekorea/ui 0.2.38 → 0.2.39

package/dist/index.esm.js

@@ -11122,6 +11122,8 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
     const [activeTabId, setActiveTabId] = useState(selectedId ?? defaultSelectedId ?? items[0]?.id ?? '');
     const [focusedTabId, setFocusedTabId] = useState('');
     const [isDragging, setIsDragging] = useState(false);
+    const [isMouseDown, setIsMouseDown] = useState(false);
+    const [showRightGradient, setShowRightGradient] = useState(false);
     const tabListRef = useRef(null);
     const tabRefs = useRef(new Map());
     const dragStartRef = useRef(null);
@@ -11132,6 +11134,29 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
             setActiveTabId(selectedId);
         }
     }, [selectedId]);
+    // 스크롤 가능 여부 감지
+    useEffect(() => {
+        const checkScrollable = () => {
+            if (tabListRef.current) {
+                const isScrollable = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;
+                const isScrolledToEnd = tabListRef.current.scrollLeft + tabListRef.current.clientWidth >=
+                    tabListRef.current.scrollWidth - 5; // 5px 여유
+                setShowRightGradient(isScrollable && !isScrolledToEnd);
+            }
+        };
+        checkScrollable();
+        window.addEventListener('resize', checkScrollable);
+        const listElement = tabListRef.current;
+        if (listElement) {
+            listElement.addEventListener('scroll', checkScrollable);
+        }
+        return () => {
+            window.removeEventListener('resize', checkScrollable);
+            if (listElement) {
+                listElement.removeEventListener('scroll', checkScrollable);
+            }
+        };
+    }, [items]);
     // 키보드 네비게이션
     const handleKeyDown = useCallback((event, currentTabId) => {
         const currentIndex = items.findIndex(item => item.id === currentTabId);
@@ -11226,6 +11251,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
             x: e.pageX - tabListRef.current.offsetLeft,
             scrollLeft: tabListRef.current.scrollLeft
         };
+        setIsMouseDown(true);
     }, [orientation]);
     const handleMouseMove = useCallback((e) => {
         if (!dragStartRef.current || !tabListRef.current)
@@ -11249,11 +11275,13 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
     }, [isDragging]);
     const handleMouseUp = useCallback(() => {
         setIsDragging(false);
+        setIsMouseDown(false);
         dragStartRef.current = null;
         clickStartRef.current = null;
     }, []);
     const handleMouseLeave = useCallback(() => {
         setIsDragging(false);
+        setIsMouseDown(false);
         dragStartRef.current = null;
         clickStartRef.current = null;
     }, []);
@@ -11272,6 +11300,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
             x: touch.pageX - tabListRef.current.offsetLeft,
             scrollLeft: tabListRef.current.scrollLeft
         };
+        setIsMouseDown(true);
     }, [orientation]);
     const handleTouchMove = useCallback((e) => {
         if (!dragStartRef.current || !tabListRef.current)
@@ -11297,12 +11326,13 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
     }, [isDragging]);
     const handleTouchEnd = useCallback(() => {
         setIsDragging(false);
+        setIsMouseDown(false);
         dragStartRef.current = null;
         clickStartRef.current = null;
     }, []);
     // 드래그 이벤트 리스너 등록/해제
     useEffect(() => {
-        if (isDragging) {
+        if (isMouseDown) {
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
             document.addEventListener('mouseleave', handleMouseLeave);
@@ -11316,7 +11346,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
             document.removeEventListener('touchmove', handleTouchMove);
             document.removeEventListener('touchend', handleTouchEnd);
         };
-    }, [isDragging, handleMouseMove, handleMouseUp, handleMouseLeave, handleTouchMove, handleTouchEnd]);
+    }, [isMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, handleTouchMove, handleTouchEnd]);
     const activeTab = items.find(item => item.id === activeTabId);
     items.findIndex(item => item.id === activeTabId);
     const classes = clsx('designbase-tabs', `designbase-tabs--${orientation}`, `designbase-tabs--${size}`, `designbase-tabs--${variant}`, {
@@ -11325,6 +11355,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
     const tabListClasses = clsx('designbase-tabs__list', `designbase-tabs__list--${orientation}`, {
         'designbase-tabs__list--full-width': fullWidth,
         'designbase-tabs__list--dragging': isDragging,
+        'designbase-tabs__list--show-gradient': showRightGradient,
     });
     return (jsxs("div", { className: classes, ...props, children: [jsx("div", { ref: tabListRef, className: tabListClasses, role: "tablist", "aria-orientation": orientation, "aria-label": "\uD0ED \uBAA9\uB85D", onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: items.map((item, index) => {
                     const isSelected = item.id === activeTabId;
@@ -11334,6 +11365,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
                         'designbase-tabs__tab--selected': isSelected,
                         'designbase-tabs__tab--focused': isFocused,
                         'designbase-tabs__tab--disabled': isDisabled,
+                        'designbase-tabs__tab--dragging': isDragging,
                     });
                     return (jsxs("button", { ref: (el) => {
                             if (el) {
@@ -11342,7 +11374,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
                             else {
                                 tabRefs.current.delete(item.id);
                             }
-                        }, className: tabClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-controls": `panel-${item.id}`, id: `tab-${item.id}`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleTabSelect(item.id), onKeyDown: (e) => handleKeyDown(e, item.id), onFocus: () => handleTabFocus(item.id), onBlur: handleTabBlur, children: [item.icon && (jsx("span", { className: "designbase-tabs__tab-icon", children: jsx(item.icon, { size: size === 's' ? 16 : size === 'l' ? 20 : 18 }) })), jsx("span", { className: "designbase-tabs__tab-label", children: item.label })] }, item.id));
+                        }, className: tabClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-controls": `panel-${item.id}`, id: `tab-${item.id}`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onClick: () => handleTabSelect(item.id), onKeyDown: (e) => handleKeyDown(e, item.id), onFocus: () => handleTabFocus(item.id), onBlur: handleTabBlur, children: [item.icon && (jsx("span", { className: "designbase-tabs__tab-icon", children: jsx(item.icon, { size: size === 's' ? 16 : size === 'l' ? 20 : 18 }) })), jsx("span", { className: "designbase-tabs__tab-label", children: item.label })] }, item.id));
                 }) }), activeTab && (jsx("div", { className: "designbase-tabs__panel", role: "tabpanel", id: `panel-${activeTab.id}`, "aria-labelledby": `tab-${activeTab.id}`, tabIndex: 0, children: activeTab.content }))] }));
 };
 Tabs.displayName = 'Tabs';