react-better-html 1.1.110 → 1.1.112

package/dist/index.d.mts

@@ -318,10 +318,14 @@ type PageHolderProps = {
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        decorationImageSrc?: string;
-        decorationImageName?: AssetName | AnyOtherString;
+        pageBackgroundColor?: string;
+        sideImageSrc?: string;
+        sideImageName?: AssetName | AnyOtherString;
         /** @default "right" */
-        decorationImagePosition?: "left" | "right";
+        sideImagePosition?: "left" | "right";
+        /** @default "center" */
+        sideImageAlignment?: "left" | "center" | "right";
+        sideImageFooter?: React.ReactNode;
     }>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;

package/dist/index.d.ts

@@ -318,10 +318,14 @@ type PageHolderProps = {
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        decorationImageSrc?: string;
-        decorationImageName?: AssetName | AnyOtherString;
+        pageBackgroundColor?: string;
+        sideImageSrc?: string;
+        sideImageName?: AssetName | AnyOtherString;
         /** @default "right" */
-        decorationImagePosition?: "left" | "right";
+        sideImagePosition?: "left" | "right";
+        /** @default "center" */
+        sideImageAlignment?: "left" | "center" | "right";
+        sideImageFooter?: React.ReactNode;
     }>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;

package/dist/index.js

@@ -3184,9 +3184,12 @@ var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ n
   );
 });
 PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
-  decorationImageSrc,
-  decorationImageName,
-  decorationImagePosition = "right",
+  pageBackgroundColor,
+  sideImageSrc,
+  sideImageName,
+  sideImagePosition = "right",
+  sideImageAlignment = "center",
+  sideImageFooter,
   noMaxContentWidth,
   children,
   ...props
@@ -3195,14 +3198,17 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { width: "100%", minHeight: "100svh", alignItems: "center", justifyContent: "center", children: [
-    decorationImagePosition === "left" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Div_default.column,
-      {
-        width: `${!breakingPoint && (decorationImageSrc || decorationImageName) ? 50 : 100}%`,
-        alignItems: "center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    Div_default.row,
+    {
+      width: "100%",
+      minHeight: "100svh",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: pageBackgroundColor,
+      children: [
+        sideImagePosition === "left" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${!breakingPoint && (sideImageSrc || sideImageName) ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space}px * 2)`,
@@ -3213,25 +3219,38 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
             ref,
             children
           }
+        ) }),
+        sideImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
+        (sideImageSrc || sideImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          Div_default,
+          {
+            position: "fixed",
+            width: "50%",
+            height: "100svh",
+            top: 0,
+            left: sideImagePosition === "left" ? 0 : "auto",
+            right: sideImagePosition === "right" ? 0 : "auto",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Div_default.row,
+                {
+                  position: "absolute",
+                  width: "100%",
+                  height: "100%",
+                  top: 0,
+                  left: 0,
+                  justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
+                  overflow: "hidden",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
+            ]
+          }
         )
-      }
-    ),
-    decorationImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
-    (decorationImageSrc || decorationImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Image_default,
-      {
-        position: "fixed",
-        name: decorationImageName,
-        src: decorationImageSrc,
-        width: "50%",
-        height: "100svh",
-        top: 0,
-        left: decorationImagePosition === "left" ? 0 : "auto",
-        right: decorationImagePosition === "right" ? 0 : "auto",
-        objectFit: "cover"
-      }
-    )
-  ] });
+      ]
+    }
+  );
 });
 var PageHolder2 = (0, import_react12.memo)(PageHolderComponent);
 PageHolder2.center = PageHolderComponent.center;
@@ -5296,7 +5315,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
       Div_default.row,
       {
         position: "absolute",
-        top: 46 / 2 + (label ? 16 + theme2.styles.gap : 0),
+        top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
         right: theme2.styles.space + 1,
         alignItems: "center",
         gap: theme2.styles.gap,
@@ -6999,7 +7018,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
-          return column.format ? column.format(item, index) : String(value ?? "");
+          return column.format?.(item, index) ?? String(value);
         }
         case "element": {
           return column.render?.(item, index) ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
@@ -7295,7 +7314,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                     {
                       width: "100%",
                       alignItems: "center",
-                      justifyContent: "space-between",
+                      justifyContent: column.filter ? "space-between" : column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
                       gap: theme2.styles.gap,
                       children: [
                         column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(