react-better-html 1.1.235 → 1.1.237

package/dist/index.mjs

@@ -19,6 +19,7 @@ import {
   loaderControls,
   colorThemeControls as colorThemeControls2,
   generateApi,
+  isApiError,
   generateEventEmitter,
   log
 } from "react-better-core";
@@ -5513,7 +5514,12 @@ var FormComponent = forwardRef13(function Form({
   return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
       child,
-      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, { width: theme2.styles.borderWidth })
+      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(
+        Divider_default.horizontal,
+        {
+          width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth
+        }
+      )
     ] }, index)) : children }) : children,
     submitButtonText && /* @__PURE__ */ jsxs16(
       Div_default.row,
@@ -6966,7 +6972,15 @@ TooltipComponent.item = forwardRef16(function Item({
 });
 TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
   const theme2 = useTheme26();
-  return /* @__PURE__ */ jsx24(Divider_default.horizontal, { width: theme2.styles.borderWidth, marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ jsx24(
+    Divider_default.horizontal,
+    {
+      width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth,
+      marginBlock: theme2.styles.gap,
+      ...props,
+      ref
+    }
+  );
 });
 TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme26();
@@ -7297,7 +7311,7 @@ var FoldableComponent = forwardRef18(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, { width: theme2.styles.borderWidth }) }),
+    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
     /* @__PURE__ */ jsx26(
       Div_default,
       {
@@ -7561,10 +7575,16 @@ var SideMenuComponent = function SideMenu({
   withCloseButton,
   widthMobileHandle,
   absoluteComponent,
-  additionalComponent,
+  itemsAdditionalComponent,
+  betweenItemsAdditionalComponent,
+  bottomItemsAdditionalComponent,
   isLoading,
   backgroundColor,
-  paddingTop
+  gap,
+  paddingTop,
+  paddingBottom,
+  renderItemsHolder,
+  renderBottomItemsHolder
 }) {
   const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
@@ -7589,9 +7609,49 @@ var SideMenuComponent = function SideMenu({
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
+  const itemsComponent = /* @__PURE__ */ jsx27(
+    Div_default.column,
+    {
+      width: "100%",
+      height: "100%",
+      overflowY: !isCollapsed ? "auto" : void 0,
+      paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderItemsHolder ? !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0 : void 0,
+      children: /* @__PURE__ */ jsx27(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
+        MenuItemComponent,
+        {
+          item,
+          backgroundColor: readyBackgroundColor,
+          onClick: onClickXButton
+        },
+        item.text
+      )) })
+    }
+  );
+  const bottomItemsComponent = /* @__PURE__ */ jsx27(
+    Div_default.column,
+    {
+      borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
+      gap: theme2.styles.gap / 2,
+      marginTop: "auto",
+      paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
+      paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderItemsHolder ? !isCollapsable ? theme2.styles.space : void 0 : void 0,
+      children: readyBottomItems?.map((item) => /* @__PURE__ */ jsx27(
+        MenuItemComponent,
+        {
+          item,
+          backgroundColor: readyBackgroundColor,
+          onClick: onClickXButton
+        },
+        item.text
+      ))
+    }
+  );
   return /* @__PURE__ */ jsx27(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
     Div_default.column,
     {
+      as: "aside",
       position: "fixed",
       width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
       height: `calc(100svh - ${topSpace}px)`,
@@ -7601,11 +7661,12 @@ var SideMenuComponent = function SideMenu({
       borderRight: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
+      paddingBottom,
       transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+        /* @__PURE__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
           (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ jsx27(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs24(
               Div_default.row,
@@ -7643,48 +7704,13 @@ var SideMenuComponent = function SideMenu({
             ) }),
             withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx27(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
+          itemsAdditionalComponent,
           !isLoading ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
-            /* @__PURE__ */ jsx27(
-              Div_default.column,
-              {
-                width: "100%",
-                height: "100%",
-                overflowY: !isCollapsed ? "auto" : void 0,
-                paddingInline: theme2.styles.space,
-                paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-                children: /* @__PURE__ */ jsx27(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
-                  MenuItemComponent,
-                  {
-                    item,
-                    backgroundColor: readyBackgroundColor,
-                    onClick: onClickXButton
-                  },
-                  item.text
-                )) })
-              }
-            ),
-            readyBottomItems && /* @__PURE__ */ jsx27(
-              Div_default.column,
-              {
-                borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
-                gap: theme2.styles.gap / 2,
-                marginTop: "auto",
-                paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
-                paddingInline: theme2.styles.space,
-                paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
-                children: readyBottomItems.map((item) => /* @__PURE__ */ jsx27(
-                  MenuItemComponent,
-                  {
-                    item,
-                    backgroundColor: readyBackgroundColor,
-                    onClick: onClickXButton
-                  },
-                  item.text
-                ))
-              }
-            )
+            renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
+            betweenItemsAdditionalComponent,
+            readyBottomItems && /* @__PURE__ */ jsx27(Fragment8, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
           ] }) : /* @__PURE__ */ jsx27(Div_default, { flex: 1, children: /* @__PURE__ */ jsx27(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
-          additionalComponent,
+          bottomItemsAdditionalComponent,
           isCollapsable && /* @__PURE__ */ jsx27(
             Div_default,
             {
@@ -7891,6 +7917,7 @@ export {
   getBrowser,
   getFormErrorObject,
   getPluralWord2 as getPluralWord,
+  isApiError,
   isMobileDevice,
   lightenColor4 as lightenColor,
   loaderControls,