react-better-html 1.1.80 → 1.1.82

package/dist/index.d.mts

@@ -649,6 +649,7 @@ type TabsContentProps = {
     tab: string;
     tabWithDot?: boolean;
     tabsGroupName?: string;
+    isInitialTab?: boolean;
     children?: React.ReactNode;
 };
 declare const Tabs: typeof TabsComponent & {
@@ -662,6 +663,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

@@ -649,6 +649,7 @@ type TabsContentProps = {
     tab: string;
     tabWithDot?: boolean;
     tabsGroupName?: string;
+    isInitialTab?: boolean;
     children?: React.ReactNode;
 };
 declare const Tabs: typeof TabsComponent & {
@@ -662,6 +663,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

@@ -1546,6 +1546,10 @@ var appConfig = {
 // src/components/BetterHtmlProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var GlobalStyle = import_styled_components.createGlobalStyle`
+   html {
+      background-color: ${(props) => props.backgroundColor};
+   }
+
    body {
       font-family: ${(props) => props.fontFamily};
       color: ${(props) => props.color};
@@ -1576,7 +1580,7 @@ var useBetterHtmlContext = () => {
     throw new Error(
       "`useBetterHtmlContext()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
-  const { setLoaders, plugins, tabsComponentState, ...rest } = context;
+  const { setLoaders, plugins, componentsState, ...rest } = context;
   return rest;
 };
 var useBetterHtmlContextInternal = () => {
@@ -1697,11 +1701,13 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
         ...value?.components
       },
       plugins,
-      tabsComponentState: {
-        tabGroups,
-        setTabGroups,
-        tabsWithDots,
-        setTabsWithDots
+      componentsState: {
+        tabs: {
+          tabGroups,
+          setTabGroups,
+          tabsWithDots,
+          setTabsWithDots
+        }
       }
     }),
     [value, colorTheme, loaders, plugins, tabGroups, tabsWithDots]
@@ -6605,7 +6611,8 @@ var TabsComponent = function Tabs({
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
-  const { colorTheme, tabsComponentState } = useBetterHtmlContextInternal();
+  const { colorTheme, componentsState } = useBetterHtmlContextInternal();
+  const firstRenderPassedRef = (0, import_react24.useRef)(false);
   const tabsRef = (0, import_react24.useRef)({});
   const [selectedTab, setSelectedTab] = (0, import_react24.useState)(() => {
     const selectedTabValue = tabs[0] ?? "";
@@ -6635,20 +6642,23 @@ var TabsComponent = function Tabs({
   );
   const leftSpacing = (0, import_react24.useMemo)(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
-    let totalWidth = 0;
+    let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
-      if (index < selectedTabIndex) totalWidth += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
+      if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
     });
-    return totalWidth;
+    return spacing;
   }, [selectedTab, tabs, tabsGap]);
   (0, import_react24.useEffect)(() => {
-    const timeout = setTimeout(() => setRerenderState(Math.random()), 0.01 * 1e3);
+    const timeout = setTimeout(() => {
+      setRerenderState(Math.random());
+      firstRenderPassedRef.current = true;
+    }, 0.01 * 1e3);
     return () => {
       clearTimeout(timeout);
     };
   }, []);
   (0, import_react24.useEffect)(() => {
-    tabsComponentState.setTabGroups((oldValue) => {
+    componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
         return oldValue.map(
@@ -6668,6 +6678,12 @@ var TabsComponent = function Tabs({
       }
     });
   }, [selectedTab, name]);
+  (0, import_react24.useEffect)(() => {
+    tabsRef.current[selectedTab]?.scrollIntoView({
+      behavior: firstRenderPassedRef.current ? "smooth" : void 0,
+      block: "nearest"
+    });
+  }, [selectedTab]);
   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) => {
@@ -6693,7 +6709,7 @@ var TabsComponent = function Tabs({
               tabsRef.current[tab] = ref;
             },
             children: [
-              tabsComponentState.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -6730,29 +6746,29 @@ var TabsComponent = function Tabs({
           bottom: 0,
           left: leftSpacing,
           backgroundColor: accentColor ?? theme2.colors.primary,
-          transition: theme2.styles.transition
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none"
         }
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
   ] });
 };
-TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
-  const { tabsComponentState } = useBetterHtmlContextInternal();
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
+  const { componentsState } = useBetterHtmlContextInternal();
   const thisTabGroupData = (0, import_react24.useMemo)(
-    () => tabsComponentState.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
-    [tabsComponentState, tabsGroupName]
+    () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
+    [componentsState.tabs, tabsGroupName]
   );
   (0, import_react24.useEffect)(() => {
     if (tabWithDot) {
-      tabsComponentState.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
+      componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
-      tabsComponentState.setTabsWithDots?.(
+      componentsState.tabs.setTabsWithDots?.(
         (oldValue) => oldValue.includes(tab) ? oldValue.filter((tab2) => tab2 !== tab2) : oldValue
       );
     }
   }, [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;
@@ -6761,7 +6777,8 @@ var Tabs_default = Tabs2;
 // src/components/Foldable.tsx
 var import_react25 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var animationDuration = 0.2;
+var animationDurationClose = 0.15;
+var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
@@ -6769,6 +6786,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   description,
   icon,
   image,
+  headerPaddingBlock,
   headerPaddingInline,
   renderHeader,
   onOpenChange,
@@ -6778,7 +6796,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   const theme2 = useTheme();
   const bodyRef = (0, import_react25.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyHeight, setBodyHeight] = (0, import_react25.useState)(defaultOpen ? void 0 : 0);
+  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react25.useState)(500);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
   const open = (0, import_react25.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
@@ -6794,29 +6812,8 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   }, [controlledIsOpen, isOpen, onOpenChange]);
   (0, import_react25.useEffect)(() => {
     if (!bodyRef.current) return;
-    if (isOpen) {
-      const height = bodyRef.current.scrollHeight;
-      setBodyHeight(height);
-      const timeout = setTimeout(() => {
-        setBodyHeight(void 0);
-      }, animationDuration * 1e3);
-      return () => {
-        clearTimeout(timeout);
-      };
-    } else {
-      if (bodyHeight === void 0) {
-        const height = bodyRef.current.scrollHeight;
-        setBodyHeight(height);
-        bodyRef.current.offsetHeight;
-      }
-      const timeout = setTimeout(() => {
-        setBodyHeight(0);
-      }, 0.01 * 1e3);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [isOpen, animationDuration, bodyHeight]);
+    setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
+  }, [isOpen]);
   (0, import_react25.useImperativeHandle)(
     ref,
     () => {
@@ -6829,14 +6826,14 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { width: "100%", overflow: "hidden", ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { width: "100%", ...props, children: [
     renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       Div_default.row,
       {
         width: "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
-        paddingBlock: theme2.styles.gap,
+        paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
         onClick: toggleOpen,
@@ -6846,7 +6843,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 })
             ] })
           ] }),
@@ -6862,7 +6859,18 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { height: bodyHeight, transition: `height ${animationDuration}s ease`, ref: bodyRef, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Div_default,
+      {
+        maxHeight: isOpen ? bodyVirtualHeight : 0,
+        opacity: !isOpen ? 0 : void 0,
+        transition: `max-height ${isOpen ? animationDurationOpen : animationDurationClose}s ease, opacity ${theme2.styles.transition}`,
+        overflow: !isOpen ? "hidden" : void 0,
+        pointerEvents: !isOpen ? "none" : void 0,
+        ref: bodyRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+      }
+    )
   ] });
 });
 FoldableComponent.box = (0, import_react25.forwardRef)(function Box3({ ...props }, ref) {
@@ -6873,6 +6881,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