wex-ui-lib 1.4.1 → 1.4.2

package/dist/index.d.ts

@@ -190,12 +190,13 @@ type EntrySelectorProps = {
 declare function EntrySelector(props: EntrySelectorProps): React$1.JSX.Element;
 
 interface TabsProps {
+    activeTabId?: string;
     tabPadding?: string;
     accentColor?: string;
     displayMode?: DisplayMode;
     font?: Font;
     tabs: {
-        id?: string;
+        id: string;
         label: string;
         content: React$1.ReactNode;
     }[];

package/dist/index.esm.js

@@ -2536,29 +2536,37 @@ var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __ma
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
 var Tabs = function (_a) {
-    var tabs = _a.tabs, font = _a.font, _b = _a.displayMode, displayMode = _b === undefined ? "dark" : _b, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange;
-    var _c = useState(0), activeTab = _c[0], setActiveTab = _c[1];
-    var _d = useState({ left: 0, width: 0 }), indicatorStyle = _d[0], setIndicatorStyle = _d[1];
+    var _b, _c;
+    var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
+    var _e = useState((_b = tabs[0]) === null || _b === undefined ? undefined : _b.id), internalActiveTabId = _e[0], setInternalActiveTabId = _e[1];
+    var isControlled = activeTabId !== undefined;
+    var activeTab = isControlled ? activeTabId : internalActiveTabId;
+    var _f = useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
     var tabRefs = useRef([]);
     useEffect(function () {
-        onTabChange && onTabChange(tabs[activeTab].id || tabs[activeTab].label);
-        var updateIndicator = function (index) {
-            var tab = tabRefs.current[index];
-            if (tab) {
-                setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
+        onTabChange && onTabChange(activeTab);
+        var updateIndicator = function () {
+            var index = tabs.findIndex(function (tab) { return tab.id === activeTab; });
+            if (index !== -1) {
+                var tab = tabRefs.current[index];
+                if (tab) {
+                    setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
+                }
             }
         };
-        updateIndicator(activeTab);
+        updateIndicator();
     }, [activeTab]);
+    var handleTabClick = function (id) {
+        if (!isControlled) {
+            setInternalActiveTabId(id);
+        }
+        onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
+    };
     return (React__default.createElement(TabsContainer, null,
         React__default.createElement(TabsList, null,
-            tabs.map(function (tab, index) { return (React__default.createElement(Tab
-            // @ts-ignore
-            , { 
-                // @ts-ignore
-                ref: function (el) { return (tabRefs.current[index] = el); }, key: index, active: activeTab === index, onClick: function () { return setActiveTab(index); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
+            tabs.map(function (tab, index) { return (React__default.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
             React__default.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
-        React__default.createElement(TabPanel, null, tabs[activeTab].content)));
+        React__default.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
 };
 var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  position: relative;\n"])));
 var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: relative;\n"], ["\n  display: flex;\n  justify-content: center;\n  position: relative;\n"])));