@rango-dev/ui 0.39.1-next.7 → 0.39.1-next.9

package/dist/widget/ui/src/components/IconButton/IconButton.types.d.ts

@@ -1,6 +1,7 @@
 import type { ButtonPropTypes } from '../Button/Button.types.js';
 import type { CSSProperties } from 'react';
 export type IconButtonPropTypes = {
+    id?: ButtonPropTypes['id'];
     size?: ButtonPropTypes['size'];
     type?: ButtonPropTypes['type'];
     variant?: ButtonPropTypes['variant'];

package/dist/widget/ui/src/components/IconButton/IconButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/widget/ui/src/components/ListItem/ListItem.types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export type ListItemPropTypes = {
+    id?: string;
     title?: string | React.ReactElement;
     description?: string | React.ReactElement;
     start?: React.ReactNode;
@@ -9,5 +10,6 @@ export type ListItemPropTypes = {
     onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
     hasDivider?: boolean;
     tabIndex?: number;
+    className?: string;
 };
 //# sourceMappingURL=ListItem.types.d.ts.map

package/dist/widget/ui/src/components/ListItem/ListItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}
+{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAoBjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAqBjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

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.7",
+  "version": "0.39.1-next.9",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -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/IconButton/IconButton.types.ts

@@ -2,6 +2,7 @@ import type { ButtonPropTypes } from '../Button/Button.types.js';
 import type { CSSProperties } from 'react';
 
 export type IconButtonPropTypes = {
+  id?: ButtonPropTypes['id'];
   size?: ButtonPropTypes['size'];
   type?: ButtonPropTypes['type'];
   variant?: ButtonPropTypes['variant'];

package/src/components/List/List.tsx

@@ -20,7 +20,7 @@ function List(props: ListPropTypes) {
             id,
           });
         }
-        return <ListItem key={id} {...itemProps} />;
+        return <ListItem key={id} id={id} {...itemProps} />;
       })}
     </BaseList>
   );

package/src/components/ListItem/ListItem.types.ts

@@ -1,4 +1,5 @@
 export type ListItemPropTypes = {
+  id?: string;
   title?: string | React.ReactElement;
   description?: string | React.ReactElement;
   start?: React.ReactNode;
@@ -8,4 +9,5 @@ export type ListItemPropTypes = {
   onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
   hasDivider?: boolean;
   tabIndex?: number;
+  className?: string;
 };

package/src/components/ListItemButton/ListItemButton.tsx

@@ -15,6 +15,7 @@ function ListItemButton(props: ListItemButtonProps) {
   return (
     <BaseListItemButton
       onClick={onClickWithKey}
+      id={id}
       aria-label="button"
       selected={selected}
       onKeyUp={(e: { key: string }) => {

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}