react-better-html 1.1.139 → 1.1.141

package/dist/index.d.mts

@@ -114,7 +114,7 @@ type LoaderProps = {
     width?: number;
     /** @default false */
     disabled?: boolean;
-} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
+} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
     box: (props: OmitProps<LoaderProps, "size"> & {
@@ -614,6 +614,11 @@ type FormRowProps = {
      * @default false
      */
     noBreakingPoint?: boolean;
+    /**
+     * @description Weather to render the children as a column or not
+     * @default false
+     */
+    asColumn?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -623,6 +628,7 @@ type FormRowComponentType = {
         icon?: IconName | AnyOtherString;
         title?: string;
         description?: string;
+        isLoading?: boolean;
         withActions?: boolean;
         saveButtonLoaderName?: LoaderName | AnyOtherString;
         resetButtonLoaderName?: LoaderName | AnyOtherString;

package/dist/index.d.ts

@@ -114,7 +114,7 @@ type LoaderProps = {
     width?: number;
     /** @default false */
     disabled?: boolean;
-} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
+} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
     box: (props: OmitProps<LoaderProps, "size"> & {
@@ -614,6 +614,11 @@ type FormRowProps = {
      * @default false
      */
     noBreakingPoint?: boolean;
+    /**
+     * @description Weather to render the children as a column or not
+     * @default false
+     */
+    asColumn?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -623,6 +628,7 @@ type FormRowComponentType = {
         icon?: IconName | AnyOtherString;
         title?: string;
         description?: string;
+        isLoading?: boolean;
         withActions?: boolean;
         saveButtonLoaderName?: LoaderName | AnyOtherString;
         resetButtonLoaderName?: LoaderName | AnyOtherString;

package/dist/index.js

@@ -2434,6 +2434,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__ */ (0, import_jsx_runtime7.jsx)(Alert_default, { alert }, alert.id))
     }
   );
@@ -7207,10 +7208,10 @@ var Form_default = Form2;
 // src/components/FormRow.tsx
 var import_react23 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormRowComponent = (0, import_react23.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+var FormRowComponent = (0, import_react23.forwardRef)(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__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
@@ -7221,6 +7222,7 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
   icon,
   title,
   description,
+  isLoading,
   withActions,
   saveButtonLoaderName,
   resetButtonLoaderName,
@@ -7232,20 +7234,43 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { as: "h3", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
-      ] })
-    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       Div_default.row,
       {
+        width: "100%",
+        alignItems: "center",
+        gap: theme2.styles.space,
+        paddingRight: isLoading ? 26 : void 0,
+        transition: theme2.styles.transition,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { as: "h3", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      Div_default.row,
+      {
+        position: "relative",
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            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__ */ (0, import_jsx_runtime21.jsx)(Loader_default, {})
+            }
+          ),
           children,
           withActions && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
@@ -8768,6 +8793,18 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
+  (0, import_react28.useEffect)(() => {
+    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]);
   (0, import_react28.useImperativeHandle)(
     ref,
     () => {