feat: Tabs disabled 일 때 index 처리

daangn · Dec 2, 2024 · 6bf919c · 6bf919c
1 parent 7b8e41f
commit 6bf919c
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 8 deletions.
diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.23.1-1d26281f3d-8.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.23.1-1d26281f3d-8.zip
diff --git a/docs/package.json b/docs/package.json
@@ -22,7 +22,7 @@
     "@seed-design/react-checkbox": "0.0.0-alpha-20241030023710",
     "@seed-design/react-dismissible": "0.0.0",
     "@seed-design/react-icon": "^0.7.3",
-    "@seed-design/react-tabs": "0.0.0-alpha-20241030023710",
+    "@seed-design/react-tabs": "0.0.0-alpha-20241202031729",
     "@seed-design/recipe": "0.0.0-alpha-20241114011809",
     "@seed-design/rootage-cli": "0.0.0",
     "@seed-design/rootage-core": "0.0.0",

diff --git a/docs/registry/ui/tabs.tsx b/docs/registry/ui/tabs.tsx
@@ -213,7 +213,7 @@ export const TabContentList = React.forwardRef<
       currentTabEnabledIndex === tabEnabledCount - 1;
     const swipeOffset = isSide ? swipeMoveX / MODIFIER : swipeMoveX;
 
-    return `calc(var(--seed-design-current-tab-index) * var(--seed-design-tab-camera-width) * -1px + ${swipeOffset}px)`;
+    return `calc(var(--seed-design-current-tab-enabled-index) * var(--seed-design-tab-camera-width) * -1px + ${swipeOffset}px)`;
   };
 
   return (

diff --git a/examples/stackflow-spa/package.json b/examples/stackflow-spa/package.json
@@ -13,7 +13,7 @@
     "@seed-design/react-popover": "0.0.0-alpha-20241030023710",
     "@seed-design/react-radio-group": "0.0.0-alpha-20241030023710",
     "@seed-design/react-switch": "0.0.0-alpha-20241030023710",
-    "@seed-design/react-tabs": "0.0.0-alpha-20241030023710",
+    "@seed-design/react-tabs": "0.0.0-alpha-20241202031729",
     "@seed-design/react-text-field": "0.0.0-alpha-20241030023710",
     "@seed-design/recipe": "0.0.0-alpha-20241114011809",
     "@seed-design/stylesheet": "3.0.0-alpha-20241121055833",

diff --git a/packages/react-headless/tabs/CHANGELOG.md b/packages/react-headless/tabs/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @seed-design/react-tabs
 
+## 0.0.0-alpha-20241202031729
+
+### Patch Changes
+
+- add --seed-design-current-tab-enabled-index css variable in root
+
+## 0.0.0-alpha-20241202030714
+
+### Patch Changes
+
+- SSR 문제를 해결해요
+
 ## 0.0.0-alpha-20241030023710
 
 ### Patch Changes

diff --git a/packages/react-headless/tabs/package.json b/packages/react-headless/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-tabs",
-  "version": "0.0.0-alpha-20241030023710",
+  "version": "0.0.0-alpha-20241202031729",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

diff --git a/packages/react-headless/tabs/src/useTabs.ts b/packages/react-headless/tabs/src/useTabs.ts
@@ -126,8 +126,12 @@ export function useTabs(props: UseTabsProps) {
   const updateCurrentIndex = React.useCallback(() => {
     if (rootEl) {
       rootEl.style.setProperty("--seed-design-current-tab-index", `${currentTabIndex}`);
+      rootEl.style.setProperty(
+        "--seed-design-current-tab-enabled-index",
+        `${currentTabEnabledIndex}`,
+      );
     }
-  }, [currentTabIndex, rootEl]);
+  }, [currentTabIndex, currentTabEnabledIndex, rootEl]);
 
   const updateTabCount = React.useCallback(() => {
     if (rootEl) {

diff --git a/yarn.lock b/yarn.lock
@@ -6406,7 +6406,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@seed-design/[email protected]20241030023710, @seed-design/react-tabs@workspace:packages/react-headless/tabs":
+"@seed-design/[email protected]20241202030714, @seed-design/react-tabs@workspace:packages/react-headless/tabs":
   version: 0.0.0-use.local
   resolution: "@seed-design/react-tabs@workspace:packages/react-headless/tabs"
   dependencies:
@@ -6548,7 +6548,7 @@ __metadata:
     "@seed-design/react-popover": 0.0.0-alpha-20241030023710
     "@seed-design/react-radio-group": 0.0.0-alpha-20241030023710
     "@seed-design/react-switch": 0.0.0-alpha-20241030023710
-    "@seed-design/react-tabs": 0.0.0-alpha-20241030023710
+    "@seed-design/react-tabs": 0.0.0-alpha-20241202030714
     "@seed-design/react-text-field": 0.0.0-alpha-20241030023710
     "@seed-design/recipe": 0.0.0-alpha-20241114011809
     "@seed-design/stylesheet": 3.0.0-alpha-20241121055833
@@ -10795,7 +10795,7 @@ __metadata:
     "@seed-design/react-checkbox": 0.0.0-alpha-20241030023710
     "@seed-design/react-dismissible": 0.0.0
     "@seed-design/react-icon": ^0.7.3
-    "@seed-design/react-tabs": 0.0.0-alpha-20241030023710
+    "@seed-design/react-tabs": 0.0.0-alpha-20241202030714
     "@seed-design/recipe": 0.0.0-alpha-20241114011809
     "@seed-design/rootage-cli": 0.0.0
     "@seed-design/rootage-core": 0.0.0