react-better-html 1.1.247 → 1.1.248

package/dist/index.mjs

@@ -7365,23 +7365,23 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
   const [selectedTab, setSelectedTab] = useState13(() => {
-    const selectedTabValue = tabs[0] ?? "";
+    const selectedTabId = tabs[0]?.id ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
-      if (!tabQueryValue) return selectedTabValue;
-      if (tabs.includes(tabQueryValue)) return tabQueryValue;
+      if (!tabQueryValue) return selectedTabId;
+      if (tabs.some((tab) => tab.id === tabQueryValue)) return tabQueryValue;
     }
-    return selectedTabValue;
+    return selectedTabId;
   });
   const [rerenderState, setRerenderState] = useState13(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = useCallback16(
     (tab) => {
-      setSelectedTab(tab);
+      setSelectedTab(tab.id);
       onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
-          [name ?? defaultTabName]: tab
+          [name ?? defaultTabName]: tab.id
         });
       }
     },
@@ -7392,7 +7392,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     [rerenderState, selectedTab]
   );
   const leftSpacing = useMemo11(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
@@ -7451,7 +7451,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   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 === selectedTab;
+        const selected = tab.id === selectedTab;
         return /* @__PURE__ */ jsxs22(
           Div_default,
           {
@@ -7470,10 +7470,10 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
             isTabAccessed: true,
             onClickWithValue: onClickTab,
             ref: (ref2) => {
-              tabsRef.current[tab] = ref2;
+              tabsRef.current[tab.id] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx25(
+              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ jsx25(
                 Div_default,
                 {
                   position: "absolute",
@@ -7493,12 +7493,12 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
                   color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
                   transition: theme2.styles.transition,
                   whiteSpace: "nowrap",
-                  children: tab
+                  children: tab.label ?? tab.id
                 }
               )
             ]
           },
-          tab
+          tab.id
         );
       }) }),
       style !== "box" && /* @__PURE__ */ jsx25(