react-better-html 1.1.139 → 1.1.141

package/dist/index.mjs

@@ -2348,6 +2348,7 @@ function AlertsHolder() {
       gap: theme2.styles.gap,
       alignItems: pluginConfig.align === "center" ? "center" : pluginConfig.align === "right" ? "flex-end" : void 0,
       transform: pluginConfig.align === "center" ? "translateX(-50%)" : void 0,
+      zIndex: 1e3,
       children: alerts.map((alert) => /* @__PURE__ */ jsx7(Alert_default, { alert }, alert.id))
     }
   );
@@ -7121,10 +7122,10 @@ var Form_default = Form2;
 // src/components/FormRow.tsx
 import { forwardRef as forwardRef14, memo as memo20 } from "react";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
+  const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
   return /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
@@ -7135,6 +7136,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   icon,
   title,
   description,
+  isLoading,
   withActions,
   saveButtonLoaderName,
   resetButtonLoaderName,
@@ -7146,20 +7148,43 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   return /* @__PURE__ */ jsxs15(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ jsxs15(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
-      icon && /* @__PURE__ */ jsx20(Icon_default, { name: icon }),
-      /* @__PURE__ */ jsxs15(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ jsx20(Text_default, { as: "h3", children: title }),
-        description && /* @__PURE__ */ jsx20(Text_default, { color: theme2.colors.textSecondary, children: description })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs15(
       Div_default.row,
       {
+        width: "100%",
+        alignItems: "center",
+        gap: theme2.styles.space,
+        paddingRight: isLoading ? 26 : void 0,
+        transition: theme2.styles.transition,
+        children: [
+          icon && /* @__PURE__ */ jsx20(Icon_default, { name: icon }),
+          /* @__PURE__ */ jsxs15(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+            /* @__PURE__ */ jsx20(Text_default, { as: "h3", children: title }),
+            description && /* @__PURE__ */ jsx20(Text_default, { color: theme2.colors.textSecondary, children: description })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs15(
+      Div_default.row,
+      {
+        position: "relative",
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
         children: [
+          /* @__PURE__ */ jsx20(
+            Div_default,
+            {
+              position: "absolute",
+              top: "50%",
+              right: `calc(100% + ${theme2.styles.space}px)`,
+              transform: "translateY(-50%)",
+              opacity: !isLoading ? 0 : void 0,
+              pointerEvents: !isLoading ? "none" : void 0,
+              children: /* @__PURE__ */ jsx20(Loader_default, {})
+            }
+          ),
           children,
           withActions && /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ jsx20(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
@@ -8692,6 +8717,18 @@ var FoldableComponent = forwardRef18(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
+  useEffect13(() => {
+    if (!isOpen) return;
+    if (!bodyRef.current) return;
+    const observer = new ResizeObserver(() => {
+      if (!bodyRef.current) return;
+      setBodyVirtualHeight(bodyRef.current.scrollHeight * 2);
+    });
+    observer.observe(bodyRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [isOpen]);
   useImperativeHandle5(
     ref,
     () => {