react-better-html 1.1.81 → 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;
@@ -649,6 +654,7 @@ type TabsContentProps = {
     tab: string;
     tabWithDot?: boolean;
     tabsGroupName?: string;
+    isInitialTab?: boolean;
     children?: React.ReactNode;
 };
 declare const Tabs: typeof TabsComponent & {
@@ -662,6 +668,7 @@ type FoldableProps = {
     description?: string;
     icon?: IconName | AnyOtherString;
     image?: AssetName | AnyOtherString;
+    headerPaddingBlock?: React.CSSProperties["paddingBlock"];
     headerPaddingInline?: React.CSSProperties["paddingInline"];
     renderHeader?: (isOpen: boolean, toggleOpen: () => void) => React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;

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;
@@ -649,6 +654,7 @@ type TabsContentProps = {
     tab: string;
     tabWithDot?: boolean;
     tabsGroupName?: string;
+    isInitialTab?: boolean;
     children?: React.ReactNode;
 };
 declare const Tabs: typeof TabsComponent & {
@@ -662,6 +668,7 @@ type FoldableProps = {
     description?: string;
     icon?: IconName | AnyOtherString;
     image?: AssetName | AnyOtherString;
+    headerPaddingBlock?: React.CSSProperties["paddingBlock"];
     headerPaddingInline?: React.CSSProperties["paddingInline"];
     renderHeader?: (isOpen: boolean, toggleOpen: () => void) => React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;

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,8 +6756,8 @@ var TabsComponent = function Tabs({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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 = (0, import_react24.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
@@ -6768,7 +6772,7 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, child
       );
     }
   }, [tabWithDot]);
-  return thisTabGroupData?.selectedTab === tab ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
 var Tabs2 = (0, import_react24.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
@@ -6786,6 +6790,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   description,
   icon,
   image,
+  headerPaddingBlock,
   headerPaddingInline,
   renderHeader,
   onOpenChange,
@@ -6832,7 +6837,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(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,
@@ -6842,7 +6847,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
             icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { as: "h3", fontWeight: 700, children: title }),
+              title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
               description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
@@ -6880,6 +6885,7 @@ FoldableComponent.box = (0, import_react25.forwardRef)(function Box3({ ...props
       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