react-better-html 1.1.82 → 1.1.83

package/dist/index.d.mts

@@ -638,10 +638,15 @@ type TabsProps = {
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
+    onChange?: (tab: string) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
+type TabsRef = {
+    selectedTab: string;
+    setSelectedTab: (tab: string) => void;
+};
 type TabsComponent = {
-    (props: TabsProps): React.ReactElement;
+    (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
     content: (props: TabsContentProps) => React.ReactElement;
 };
 declare const TabsComponent: TabsComponent;

package/dist/index.d.ts

@@ -638,10 +638,15 @@ type TabsProps = {
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
+    onChange?: (tab: string) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
+type TabsRef = {
+    selectedTab: string;
+    setSelectedTab: (tab: string) => void;
+};
 type TabsComponent = {
-    (props: TabsProps): React.ReactElement;
+    (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
     content: (props: TabsContentProps) => React.ReactElement;
 };
 declare const TabsComponent: TabsComponent;

package/dist/index.js

@@ -6600,14 +6600,7 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = function Tabs({
-  tabs,
-  name,
-  accentColor,
-  style = "default",
-  children,
-  ...props
-}) {
+var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
@@ -6628,13 +6621,14 @@ var TabsComponent = function Tabs({
   const onClickTab = (0, import_react24.useCallback)(
     (tab) => {
       setSelectedTab(tab);
+      onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
           [name ?? defaultTabName]: tab
         });
       }
     },
-    [name, urlQuery]
+    [onChange, name, urlQuery]
   );
   const width = (0, import_react24.useMemo)(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
@@ -6684,6 +6678,16 @@ var TabsComponent = function Tabs({
       block: "nearest"
     });
   }, [selectedTab]);
+  (0, import_react24.useImperativeHandle)(
+    ref,
+    () => {
+      return {
+        selectedTab,
+        setSelectedTab: onClickTab
+      };
+    },
+    [selectedTab, onClickTab]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
@@ -6705,8 +6709,8 @@ var TabsComponent = function Tabs({
             cursor: "pointer",
             isTabAccessed: true,
             onClickWithValue: onClickTab,
-            ref: (ref) => {
-              tabsRef.current[tab] = ref;
+            ref: (ref2) => {
+              tabsRef.current[tab] = ref2;
             },
             children: [
               componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -6752,7 +6756,7 @@ var TabsComponent = function Tabs({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
   ] });
-};
+});
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
   const thisTabGroupData = (0, import_react24.useMemo)(