react-better-html 1.1.252 → 1.1.254

package/dist/index.mjs

@@ -7405,11 +7405,12 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
   const [selectedTab, setSelectedTab] = useState13(() => {
-    const selectedTabId = tabs[0]?.id ?? "";
+    const selectedTabId = tabs[0];
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
       if (!tabQueryValue) return selectedTabId;
-      if (tabs.some((tab) => tab.id === tabQueryValue)) return tabQueryValue;
+      const queryTab = tabs.find((tab) => tab.id === tabQueryValue);
+      if (queryTab) return queryTab;
     }
     return selectedTabId;
   });
@@ -7417,7 +7418,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = useCallback16(
     (tab) => {
-      setSelectedTab(tab.id);
+      setSelectedTab(tab);
       onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
@@ -7428,11 +7429,11 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     [onChange, name, urlQuery]
   );
   const width = useMemo11(
-    () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
+    () => tabsRef.current[selectedTab.id]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
   const leftSpacing = useMemo11(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab.id);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
@@ -7455,7 +7456,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
         return oldValue.map(
           (item) => item.name === (name ?? defaultTabName) ? {
             ...item,
-            selectedTab
+            selectedTab: selectedTab.id
           } : item
         );
       } else {
@@ -7463,14 +7464,14 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
           ...oldValue,
           {
             name: name ?? defaultTabName,
-            selectedTab
+            selectedTab: selectedTab.id
           }
         ];
       }
     });
   }, [selectedTab, name]);
   useEffect14(() => {
-    tabsRef.current[selectedTab]?.scrollIntoView({
+    tabsRef.current[selectedTab.id]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
@@ -7482,16 +7483,19 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       );
     };
   }, []);
+  useEffect14(() => {
+    onChange?.(selectedTab);
+  }, []);
   useImperativeHandle4(ref, () => {
     return {
-      selectedTab,
+      selectedTab: selectedTab.id,
       selectTab: onClickTab
     };
   }, [selectedTab, onClickTab]);
   return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ jsxs22(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
-        const selected = tab.id === selectedTab;
+        const selected = tab.id === selectedTab.id;
         return /* @__PURE__ */ jsxs22(
           Div_default,
           {