react-better-html 1.1.109 → 1.1.111

package/dist/index.d.mts

@@ -318,10 +318,13 @@ type PageHolderProps = {
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        decorationImageSrc?: string;
-        decorationImageName?: AssetName | AnyOtherString;
+        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,13 @@ type PageHolderProps = {
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        decorationImageSrc?: string;
-        decorationImageName?: AssetName | AnyOtherString;
+        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,11 @@ var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ n
   );
 });
 PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
-  decorationImageSrc,
-  decorationImageName,
-  decorationImagePosition = "right",
+  sideImageSrc,
+  sideImageName,
+  sideImagePosition = "right",
+  sideImageAlignment = "center",
+  sideImageFooter,
   noMaxContentWidth,
   children,
   ...props
@@ -3196,39 +3198,45 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
   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,
+    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: `${!breakingPoint && (decorationImageSrc || decorationImageName) ? 50 : 100}%`,
-        alignItems: "center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Div_default.box,
-          {
-            width: `calc(100% - ${theme2.styles.space}px * 2)`,
-            maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
-            marginInline: theme2.styles.space,
-            marginBlock: theme2.styles.space,
-            ...props,
-            ref,
-            children
-          }
-        )
+        width: `calc(100% - ${theme2.styles.space}px * 2)`,
+        maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
+        marginInline: theme2.styles.space,
+        marginBlock: theme2.styles.space,
+        ...props,
+        ref,
+        children
       }
-    ),
-    decorationImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
-    (decorationImageSrc || decorationImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Image_default,
+    ) }),
+    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",
-        name: decorationImageName,
-        src: decorationImageSrc,
         width: "50%",
         height: "100svh",
         top: 0,
-        left: decorationImagePosition === "left" ? 0 : "auto",
-        right: decorationImagePosition === "right" ? 0 : "auto",
-        objectFit: "cover"
+        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 })
+        ]
       }
     )
   ] });
@@ -6860,7 +6868,7 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 var import_react23 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var defaultImageWidth = 120;
+var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components11.default.table.withConfig({
   shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
@@ -6999,22 +7007,14 @@ 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, {});
         }
         case "image": {
           const src = column.getImageSrc?.(item, index) ?? (column.keyName ? item[column.keyName] : void 0);
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            Image_default,
-            {
-              src,
-              width: defaultImageWidth,
-              borderRadius: theme2.styles.borderRadius / 2,
-              ...column.imageProps
-            }
-          );
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Image_default, { src, width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...column.imageProps });
         }
         case "checkbox": {
           const { onChange, ...toggleInputProps } = column.toggleInputProps ?? {};
@@ -7294,7 +7294,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 ThStyledComponent,
                 {
-                  width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
+                  width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
@@ -7303,7 +7303,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)(