react-better-html 1.1.80 → 1.1.82

package/dist/index.mjs

@@ -1471,6 +1471,10 @@ var appConfig = {
 // src/components/BetterHtmlProvider.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var GlobalStyle = createGlobalStyle`
+   html {
+      background-color: ${(props) => props.backgroundColor};
+   }
+
    body {
       font-family: ${(props) => props.fontFamily};
       color: ${(props) => props.color};
@@ -1501,7 +1505,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 = () => {
@@ -1622,11 +1626,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]
@@ -6530,7 +6536,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 = useRef5(false);
   const tabsRef = useRef5({});
   const [selectedTab, setSelectedTab] = useState9(() => {
     const selectedTabValue = tabs[0] ?? "";
@@ -6560,20 +6567,23 @@ var TabsComponent = function Tabs({
   );
   const leftSpacing = useMemo8(() => {
     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]);
   useEffect9(() => {
-    const timeout = setTimeout(() => setRerenderState(Math.random()), 0.01 * 1e3);
+    const timeout = setTimeout(() => {
+      setRerenderState(Math.random());
+      firstRenderPassedRef.current = true;
+    }, 0.01 * 1e3);
     return () => {
       clearTimeout(timeout);
     };
   }, []);
   useEffect9(() => {
-    tabsComponentState.setTabGroups((oldValue) => {
+    componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
         return oldValue.map(
@@ -6593,6 +6603,12 @@ var TabsComponent = function Tabs({
       }
     });
   }, [selectedTab, name]);
+  useEffect9(() => {
+    tabsRef.current[selectedTab]?.scrollIntoView({
+      behavior: firstRenderPassedRef.current ? "smooth" : void 0,
+      block: "nearest"
+    });
+  }, [selectedTab]);
   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) => {
@@ -6618,7 +6634,7 @@ var TabsComponent = function Tabs({
               tabsRef.current[tab] = ref;
             },
             children: [
-              tabsComponentState.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx21(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx21(
                 Div_default,
                 {
                   position: "absolute",
@@ -6655,29 +6671,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__ */ jsx21(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 = useMemo8(
-    () => tabsComponentState.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
-    [tabsComponentState, tabsGroupName]
+    () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
+    [componentsState.tabs, tabsGroupName]
   );
   useEffect9(() => {
     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__ */ 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;
@@ -6686,7 +6702,8 @@ 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 { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-var animationDuration = 0.2;
+var animationDurationClose = 0.15;
+var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef12(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
@@ -6694,6 +6711,7 @@ var FoldableComponent = forwardRef12(function Foldable({
   description,
   icon,
   image,
+  headerPaddingBlock,
   headerPaddingInline,
   renderHeader,
   onOpenChange,
@@ -6703,7 +6721,7 @@ var FoldableComponent = forwardRef12(function Foldable({
   const theme2 = useTheme();
   const bodyRef = useRef6(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyHeight, setBodyHeight] = useState10(defaultOpen ? void 0 : 0);
+  const [bodyVirtualHeight, setBodyVirtualHeight] = useState10(500);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
   const open = useCallback12(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
@@ -6719,29 +6737,8 @@ var FoldableComponent = forwardRef12(function Foldable({
   }, [controlledIsOpen, isOpen, onOpenChange]);
   useEffect10(() => {
     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]);
   useImperativeHandle2(
     ref,
     () => {
@@ -6754,14 +6751,14 @@ var FoldableComponent = forwardRef12(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", overflow: "hidden", ...props, children: [
+  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", ...props, children: [
     renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs17(
       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,
@@ -6771,7 +6768,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 })
             ] })
           ] }),
@@ -6787,7 +6784,18 @@ var FoldableComponent = forwardRef12(function Foldable({
       }
     ),
     /* @__PURE__ */ jsx22(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx22(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ jsx22(Div_default, { height: bodyHeight, transition: `height ${animationDuration}s ease`, ref: bodyRef, children: /* @__PURE__ */ jsx22(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children }) })
+    /* @__PURE__ */ jsx22(
+      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__ */ jsx22(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+      }
+    )
   ] });
 });
 FoldableComponent.box = forwardRef12(function Box3({ ...props }, ref) {
@@ -6798,6 +6806,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