odaptos_design_system 2.0.150 → 2.0.152

package/dist/Molecules/Tabs/TabsUnderLine.d.ts

@@ -2,12 +2,13 @@ import React from 'react';
 interface TabsUnderlineProps {
     id?: string;
     type?: 'underline' | 'filled';
-    defaultValue: number;
+    defaultValue?: number;
+    value?: number;
     onChange: (index: number, item: any) => void;
     tabs: any[];
     className?: string;
     isArrowIconDisplay?: boolean;
 }
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2946-50988&mode=dev  */
-export declare const TabsUnderline: ({ id, type, defaultValue, onChange, tabs, className, isArrowIconDisplay, }: TabsUnderlineProps) => React.JSX.Element;
+export declare const TabsUnderline: ({ id, type, defaultValue, value, onChange, tabs, className, isArrowIconDisplay, }: TabsUnderlineProps) => React.JSX.Element;
 export {};

package/dist/odaptos_design_system.cjs.development.js

@@ -16222,30 +16222,34 @@ const TabsUnderline = ({
   id,
   type = 'underline',
   defaultValue,
+  value,
   onChange,
   tabs,
   className,
   isArrowIconDisplay = false
 }) => {
-  const [value, setValue] = React.useState(defaultValue ? defaultValue : 0);
+  const [internalValue, setInternalValue] = React.useState(value !== undefined ? value : defaultValue ?? 0);
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  React.useEffect(() => {
+    if (value === undefined && defaultValue !== undefined) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, value]);
   const onClickTab = (_event, index) => {
     if (tabs[index].disabled) return;else {
-      setValue(index);
+      setInternalValue(index);
       onChange(index, tabs[index].value);
     }
   };
-  React.useEffect(() => {
-    if (defaultValue === undefined) return;
-    if (defaultValue !== value) {
-      setValue(defaultValue);
-      onChange(defaultValue, tabs[defaultValue].value);
-    }
-  }, [defaultValue]);
   if (type === 'underline') return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$T.tabbar} ${className && className}`,
     id: id
   }, /*#__PURE__*/React__default.createElement(Tabs$1, {
-    value: value,
+    value: internalValue,
     onChange: onClickTab,
     className: styles$T.tabs_root,
     variant: "scrollable",
@@ -16270,14 +16274,14 @@ const TabsUnderline = ({
         textTransform: 'none'
       },
       label: /*#__PURE__*/React__default.createElement("div", {
-        className: `${styles$T.tab_label_content} ${value === index ? styles$T.selected : ''}`,
+        className: `${styles$T.tab_label_content} ${internalValue === index ? styles$T.selected : ''}`,
         id: item.id,
         onClick: e => onClickTab(e, index)
       }, /*#__PURE__*/React__default.createElement(Title, {
         text: item.label,
-        weight: value === index ? 'semi-bold' : 'regular',
+        weight: internalValue === item.value ? 'semi-bold' : 'regular',
         size: "base",
-        color: index === value ? 'black' : 'gray'
+        color: internalValue === item.value ? 'black' : 'gray'
       }), item.betaIconDescription === undefined || item.betaIconDescription === '' ? null : /*#__PURE__*/React__default.createElement(PopoverBeta, {
         description: item.betaIconDescription,
         placement: "bottom",
@@ -16297,10 +16301,10 @@ const TabsUnderline = ({
       }, /*#__PURE__*/React__default.createElement(Title, {
         key: `tab#${index}`,
         className: `${!isArrowIconDisplay ? styles$T.tab_label_replacement : styles$T.tab_label_replacement_icon} ${styles$T.disabled}`,
-        weight: value === index ? 'semi-bold' : 'regular',
+        weight: internalValue === item.value ? 'semi-bold' : 'regular',
         size: "base",
         text: item.label,
-        color: index === value ? 'black' : 'gray'
+        color: internalValue === item.value ? 'black' : 'gray'
       }), item.betaIconDescription === undefined || item.betaIconDescription === '' ? null : /*#__PURE__*/React__default.createElement(PopoverBeta, {
         description: item.betaIconDescription,
         placement: "bottom",
@@ -16327,10 +16331,10 @@ const TabsUnderline = ({
       }, /*#__PURE__*/React__default.createElement(Title, {
         key: `tab#${index}`,
         className: `${!isArrowIconDisplay ? styles$T.tab_label_replacement : styles$T.tab_label_replacement_icon} ${styles$T.disabled}`,
-        weight: value === index ? 'semi-bold' : 'regular',
+        weight: internalValue === item.value ? 'semi-bold' : 'regular',
         size: "base",
         text: item.label,
-        color: index === value ? 'black' : 'gray'
+        color: internalValue === item.value ? 'black' : 'gray'
       }), item.betaIconDescription === undefined || item.betaIconDescription === '' ? null : /*#__PURE__*/React__default.createElement(PopoverBeta, {
         description: item.betaIconDescription,
         placement: "bottom",
@@ -16358,7 +16362,7 @@ const TabsUnderline = ({
     id: id,
     className: `${styles$T.tabFilled} ${className && className}`
   }, /*#__PURE__*/React__default.createElement(Tabs$1, {
-    value: value,
+    value: internalValue,
     onChange: onClickTab,
     className: styles$T.tabs_root,
     variant: "scrollable",
@@ -16380,12 +16384,12 @@ const TabsUnderline = ({
         textTransform: 'none'
       },
       label: /*#__PURE__*/React__default.createElement("div", {
-        className: `${styles$T.tab_label_content} ${item.disabled ? styles$T.tab_label_disabled : ''} ${value === index ? styles$T.selected : ''}`,
+        className: `${styles$T.tab_label_content} ${item.disabled ? styles$T.tab_label_disabled : ''} ${internalValue === index ? styles$T.selected : ''}`,
         id: item.id
       }, /*#__PURE__*/React__default.createElement(TextForButton, {
         text: item.label,
         size: "base",
-        color: index === value ? 'black' : 'gray'
+        color: internalValue === index ? 'black' : 'gray'
       }), item.betaIconDescription === undefined || item.betaIconDescription === '' ? null : /*#__PURE__*/React__default.createElement(PopoverBeta, {
         description: item.betaIconDescription,
         placement: "bottom",
@@ -16401,7 +16405,7 @@ const TabsUnderline = ({
         className: `${!isArrowIconDisplay ? styles$T.tab_label_replacement : styles$T.tab_label_replacement_icon} ${styles$T.disabled}`,
         size: "base",
         text: item.label,
-        color: index === value ? 'black' : 'gray'
+        color: internalValue === index ? 'black' : 'gray'
       }), item.betaIconDescription === undefined || item.betaIconDescription === '' ? null : /*#__PURE__*/React__default.createElement(PopoverBeta, {
         description: item.betaIconDescription,
         placement: "bottom",
@@ -16429,7 +16433,7 @@ const TabsUnderline = ({
         className: `${!isArrowIconDisplay ? styles$T.tab_label_replacement : styles$T.tab_label_replacement_icon} ${styles$T.disabled}`,
         size: "base",
         text: item.label,
-        color: index === value ? 'black' : 'gray'
+        color: internalValue === index ? 'black' : 'gray'
       }), item.betaIconDescription === undefined || item.betaIconDescription === '' ? null : /*#__PURE__*/React__default.createElement(PopoverBeta, {
         description: item.betaIconDescription,
         placement: "bottom",