@rango-dev/ui 0.39.1-next.8 → 0.40.0

package/dist/widget/ui/src/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,qBAyMjD"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,qBA8MjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.39.1-next.8",
+  "version": "0.40.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,7 +53,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.37.1-next.4",
+    "@rango-dev/wallets-shared": "^0.38.0",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
     "rango-types": "^0.1.74",
@@ -62,4 +62,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/readme.md

@@ -1,6 +1,6 @@
 # @rango-dev/ui
 
-Rango UI design system components
+Rango UI design system components.
 
 ### Icons
 

package/src/components/Tabs/Tabs.tsx

@@ -61,14 +61,12 @@ export function TabsComponent(props: TabsPropTypes) {
     }
   };
 
-  const updateIndicator = (currentIndex: number) => {
+  const updateIndicator = () => {
     if (tabRef.current && containerRef.current) {
       const tabRect = tabRef.current.getBoundingClientRect();
       const containerRect = containerRef.current.getBoundingClientRect();
       setTabWidth(tabRect.width);
-      setTransformPosition(
-        scrollable ? tabRef.current.offsetLeft : currentIndex * tabWidth
-      );
+      setTransformPosition(tabRef.current.offsetLeft);
       const itemPartiallyVisibleOnLeft = tabRect.left < containerRect.left;
       const itemPartiallyVisibleOnRight = tabRect.right > containerRect.right;
 
@@ -96,7 +94,7 @@ export function TabsComponent(props: TabsPropTypes) {
   }, []);
 
   useEffect(() => {
-    updateIndicator(currentIndex);
+    updateIndicator();
 
     const updateArrowsVisibility = () => {
       if (scrollable && containerRef.current) {
@@ -119,20 +117,23 @@ export function TabsComponent(props: TabsPropTypes) {
     };
 
     const resizeHandler: ResizeObserverCallback = (event) => {
-      if (scrollable && containerRef.current) {
-        const TOTAL_WIDTH_OF_ARROWS = 64;
-        updateIndicator(currentIndex);
-        updateArrowsVisibility();
-        const element = event[0].target;
-        if (showArrows) {
-          const tabsContainerOverflown =
-            element.scrollWidth - TOTAL_WIDTH_OF_ARROWS > element.clientWidth;
-          if (!tabsContainerOverflown) {
-            setShowArrows(false);
-          }
-        } else if (element.scrollWidth > element.clientWidth) {
-          setShowArrows(true);
-        }
+      updateIndicator();
+
+      if (!containerRef.current || !scrollable || !scrollButtons) {
+        return;
+      }
+
+      updateArrowsVisibility();
+
+      const TOTAL_WIDTH_OF_ARROWS = 64;
+      const element = event[0].target;
+      const tabsContainerOverflown =
+        element.scrollWidth - TOTAL_WIDTH_OF_ARROWS > element.clientWidth;
+
+      if (showArrows && !tabsContainerOverflown) {
+        setShowArrows(false);
+      } else if (element.scrollWidth > element.clientWidth) {
+        setShowArrows(true);
       }
     };
 
@@ -177,34 +178,38 @@ export function TabsComponent(props: TabsPropTypes) {
         type={type}
         borderRadius={borderRadius}
         scrollable={scrollable}>
-        {tabItems.map((item, index) => (
-          <Tooltip
-            key={item.id}
-            styles={{ root: { width: '100%' } }}
-            container={container}
-            side="bottom"
-            sideOffset={2}
-            content={item.tooltip}
-            open={!item.tooltip ? false : undefined}>
-            <Tab
-              className="_tab"
-              ref={index === currentIndex ? tabRef : null}
-              type={type}
-              fullWidth={scrollable ? false : true}
-              disableRipple={true}
-              borderRadius={borderRadius}
-              onClick={() => onChange(item)}
-              size="small"
-              isActive={item.id === value}
-              variant="default">
-              {item.icon}
-              {!!item.icon && !!item.title && (
-                <Divider direction="horizontal" size="2" />
-              )}
-              {item.title}
-            </Tab>
-          </Tooltip>
-        ))}
+        {tabItems.map((item, index) => {
+          const isActive = item.id === value;
+          return (
+            <Tooltip
+              key={item.id}
+              styles={{ root: { width: '100%' } }}
+              container={container}
+              side="bottom"
+              sideOffset={2}
+              content={item.tooltip}
+              open={!item.tooltip ? false : undefined}>
+              <Tab
+                className="_tab"
+                ref={index === currentIndex ? tabRef : null}
+                type={type}
+                fullWidth={scrollable ? false : true}
+                disableRipple={true}
+                borderRadius={borderRadius}
+                onClick={() => onChange(item)}
+                size="small"
+                isActive={isActive}
+                data-active={isActive}
+                variant="default">
+                {item.icon}
+                {!!item.icon && !!item.title && (
+                  <Divider direction="horizontal" size="2" />
+                )}
+                {item.title}
+              </Tab>
+            </Tooltip>
+          );
+        })}
         <BackdropTab
           type={type}
           borderRadius={borderRadius}