react-better-html 1.1.80 → 1.1.81

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,7 +6746,7 @@ var TabsComponent = function Tabs({
           bottom: 0,
           left: leftSpacing,
           backgroundColor: accentColor ?? theme2.colors.primary,
-          transition: theme2.styles.transition
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none"
         }
       )
     ] }),
@@ -6738,16 +6754,16 @@ var TabsComponent = function Tabs({
   ] });
 };
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
-  const { tabsComponentState } = useBetterHtmlContextInternal();
+  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
       );
     }
@@ -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,
@@ -6778,7 +6795,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 +6811,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,7 +6825,7 @@ 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,
       {
@@ -6862,7 +6858,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) {