react-better-html 1.1.81 → 1.1.83

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,16 @@ var TabsComponent = function Tabs({
       block: "nearest"
     });
   }, [selectedTab]);
+  useImperativeHandle2(
+    ref,
+    () => {
+      return {
+        selectedTab,
+        setSelectedTab: 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 +6634,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(
@@ -6677,8 +6681,8 @@ var TabsComponent = function Tabs({
     ] }),
     /* @__PURE__ */ jsx21(Div_default, { width: "100%", children })
   ] });
-};
-TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
+});
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
   const thisTabGroupData = useMemo8(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
@@ -6693,24 +6697,25 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, child
       );
     }
   }, [tabWithDot]);
-  return thisTabGroupData?.selectedTab === tab ? /* @__PURE__ */ jsx21(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ jsx21(Div_default, { width: "100%", children }) : void 0;
 };
 var Tabs2 = memo21(TabsComponent);
 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,
   description,
   icon,
   image,
+  headerPaddingBlock,
   headerPaddingInline,
   renderHeader,
   onOpenChange,
@@ -6738,7 +6743,7 @@ var FoldableComponent = forwardRef12(function Foldable({
     if (!bodyRef.current) return;
     setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
   }, [isOpen]);
-  useImperativeHandle2(
+  useImperativeHandle3(
     ref,
     () => {
       return {
@@ -6757,7 +6762,7 @@ var FoldableComponent = forwardRef12(function Foldable({
         width: "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
-        paddingBlock: theme2.styles.gap,
+        paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
         onClick: toggleOpen,
@@ -6767,7 +6772,7 @@ var FoldableComponent = forwardRef12(function Foldable({
             icon && /* @__PURE__ */ jsx22(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ jsx22(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
             /* @__PURE__ */ jsxs17(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsx22(Text_default, { as: "h3", fontWeight: 700, children: title }),
+              title && /* @__PURE__ */ jsx22(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
               description && /* @__PURE__ */ jsx22(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
@@ -6797,7 +6802,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,
@@ -6805,6 +6810,7 @@ FoldableComponent.box = forwardRef12(function Box3({ ...props }, ref) {
       backgroundColor: theme2.colors.backgroundContent,
       border: `1px solid ${theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
+      headerPaddingBlock: (theme2.styles.gap + theme2.styles.space) / 2,
       headerPaddingInline: theme2.styles.space,
       ...props,
       ref