react-better-html 1.1.82 → 1.1.84

package/dist/index.mjs

@@ -6520,19 +6520,12 @@ var Table2 = memo20(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tabs.tsx
-import { memo as memo21, useCallback as useCallback11, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef5, useState as useState9 } from "react";
+import { forwardRef as forwardRef12, memo as memo21, useCallback as useCallback11, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo8, useRef as useRef5, useState as useState9 } from "react";
 import { jsx as jsx21, jsxs as jsxs16 } from "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 = forwardRef12(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;
@@ -6553,13 +6546,14 @@ var TabsComponent = function Tabs({
   const onClickTab = useCallback11(
     (tab) => {
       setSelectedTab(tab);
+      onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
           [name ?? defaultTabName]: tab
         });
       }
     },
-    [name, urlQuery]
+    [onChange, name, urlQuery]
   );
   const width = useMemo8(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
@@ -6609,6 +6603,23 @@ var TabsComponent = function Tabs({
       block: "nearest"
     });
   }, [selectedTab]);
+  useEffect9(() => {
+    return () => {
+      componentsState.tabs.setTabGroups(
+        (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
+      );
+    };
+  }, []);
+  useImperativeHandle2(
+    ref,
+    () => {
+      return {
+        selectedTab,
+        selectTab: onClickTab
+      };
+    },
+    [selectedTab, onClickTab]
+  );
   return /* @__PURE__ */ jsxs16(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ jsxs16(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx21(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
@@ -6630,8 +6641,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__ */ jsx21(
@@ -6675,9 +6686,9 @@ var TabsComponent = function Tabs({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx21(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ jsx21(Div_default, { width: "100%", children })
   ] });
-};
+});
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
   const thisTabGroupData = useMemo8(
@@ -6700,11 +6711,11 @@ Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef12, memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useImperativeHandle as useImperativeHandle2, useRef as useRef6, useState as useState10 } from "react";
+import { forwardRef as forwardRef13, memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useImperativeHandle as useImperativeHandle3, useRef as useRef6, useState as useState10 } from "react";
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = forwardRef12(function Foldable({
+var FoldableComponent = forwardRef13(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -6739,7 +6750,7 @@ var FoldableComponent = forwardRef12(function Foldable({
     if (!bodyRef.current) return;
     setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
   }, [isOpen]);
-  useImperativeHandle2(
+  useImperativeHandle3(
     ref,
     () => {
       return {
@@ -6798,7 +6809,7 @@ var FoldableComponent = forwardRef12(function Foldable({
     )
   ] });
 });
-FoldableComponent.box = forwardRef12(function Box3({ ...props }, ref) {
+FoldableComponent.box = forwardRef13(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsx22(
     FoldableComponent,