@designbasekorea/ui 0.2.37 → 0.2.39

package/dist/index.umd.js

@@ -11123,6 +11123,8 @@
         const [activeTabId, setActiveTabId] = React.useState(selectedId ?? defaultSelectedId ?? items[0]?.id ?? '');
         const [focusedTabId, setFocusedTabId] = React.useState('');
         const [isDragging, setIsDragging] = React.useState(false);
+        const [isMouseDown, setIsMouseDown] = React.useState(false);
+        const [showRightGradient, setShowRightGradient] = React.useState(false);
         const tabListRef = React.useRef(null);
         const tabRefs = React.useRef(new Map());
         const dragStartRef = React.useRef(null);
@@ -11133,6 +11135,29 @@
                 setActiveTabId(selectedId);
             }
         }, [selectedId]);
+        // 스크롤 가능 여부 감지
+        React.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 = React.useCallback((event, currentTabId) => {
             const currentIndex = items.findIndex(item => item.id === currentTabId);
@@ -11227,6 +11252,7 @@
                 x: e.pageX - tabListRef.current.offsetLeft,
                 scrollLeft: tabListRef.current.scrollLeft
             };
+            setIsMouseDown(true);
         }, [orientation]);
         const handleMouseMove = React.useCallback((e) => {
             if (!dragStartRef.current || !tabListRef.current)
@@ -11250,11 +11276,13 @@
         }, [isDragging]);
         const handleMouseUp = React.useCallback(() => {
             setIsDragging(false);
+            setIsMouseDown(false);
             dragStartRef.current = null;
             clickStartRef.current = null;
         }, []);
         const handleMouseLeave = React.useCallback(() => {
             setIsDragging(false);
+            setIsMouseDown(false);
             dragStartRef.current = null;
             clickStartRef.current = null;
         }, []);
@@ -11273,6 +11301,7 @@
                 x: touch.pageX - tabListRef.current.offsetLeft,
                 scrollLeft: tabListRef.current.scrollLeft
             };
+            setIsMouseDown(true);
         }, [orientation]);
         const handleTouchMove = React.useCallback((e) => {
             if (!dragStartRef.current || !tabListRef.current)
@@ -11298,12 +11327,13 @@
         }, [isDragging]);
         const handleTouchEnd = React.useCallback(() => {
             setIsDragging(false);
+            setIsMouseDown(false);
             dragStartRef.current = null;
             clickStartRef.current = null;
         }, []);
         // 드래그 이벤트 리스너 등록/해제
         React.useEffect(() => {
-            if (isDragging) {
+            if (isMouseDown) {
                 document.addEventListener('mousemove', handleMouseMove);
                 document.addEventListener('mouseup', handleMouseUp);
                 document.addEventListener('mouseleave', handleMouseLeave);
@@ -11317,7 +11347,7 @@
                 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}`, {
@@ -11326,6 +11356,7 @@
         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 (jsxRuntime.jsxs("div", { className: classes, ...props, children: [jsxRuntime.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;
@@ -11335,6 +11366,7 @@
                             'designbase-tabs__tab--selected': isSelected,
                             'designbase-tabs__tab--focused': isFocused,
                             'designbase-tabs__tab--disabled': isDisabled,
+                            'designbase-tabs__tab--dragging': isDragging,
                         });
                         return (jsxRuntime.jsxs("button", { ref: (el) => {
                                 if (el) {
@@ -11343,7 +11375,7 @@
                                 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 && (jsxRuntime.jsx("span", { className: "designbase-tabs__tab-icon", children: jsxRuntime.jsx(item.icon, { size: size === 's' ? 16 : size === 'l' ? 20 : 18 }) })), jsxRuntime.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 && (jsxRuntime.jsx("span", { className: "designbase-tabs__tab-icon", children: jsxRuntime.jsx(item.icon, { size: size === 's' ? 16 : size === 'l' ? 20 : 18 }) })), jsxRuntime.jsx("span", { className: "designbase-tabs__tab-label", children: item.label })] }, item.id));
                     }) }), activeTab && (jsxRuntime.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';