react-better-html 1.1.267 → 1.1.269

package/dist/index.d.mts

@@ -164,7 +164,7 @@ declare const InputField: typeof InputFieldComponent & {
     color: typeof InputFieldComponent.color;
 };
 
-type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
+type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label" | "li";
 type TextProps<As extends TextAs = "p"> = {
     /** @default "p" */
     as?: As;
@@ -694,7 +694,7 @@ type IconComponent = {
 };
 declare const _default: IconComponent;
 
-type ModalProps = {
+type InternalModalProps = {
     /**
      * If you want to have a small modal, you can use 660px as it looks good on most screens.
      *
@@ -717,8 +717,10 @@ type ModalProps = {
     defaultIsOpened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    isAlert?: boolean;
     children?: React.ReactNode;
 };
+type ModalProps = OmitProps<InternalModalProps, "isAlert">;
 type ModalRef = {
     isOpened: boolean;
     open: () => void;
@@ -1074,16 +1076,20 @@ declare const Foldable: typeof FoldableComponent & {
 
 type SideMenuItem = {
     text: string;
+    hidden?: boolean;
+} & ({
+    type: "item";
     iconName: IconName | AnyOtherString;
     href?: string;
     disabled?: boolean;
-    hidden?: boolean;
     withDot?: boolean;
     children?: SideMenuItem[];
     /** @default true */
     onClickCloseSideMenu?: boolean;
     onClick?: (item: SideMenuItem) => void;
-};
+} | {
+    type: "divider";
+});
 type SideMenuProps = {
     items: SideMenuItem[];
     bottomItems?: SideMenuItem[];

package/dist/index.d.ts

@@ -164,7 +164,7 @@ declare const InputField: typeof InputFieldComponent & {
     color: typeof InputFieldComponent.color;
 };
 
-type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
+type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label" | "li";
 type TextProps<As extends TextAs = "p"> = {
     /** @default "p" */
     as?: As;
@@ -694,7 +694,7 @@ type IconComponent = {
 };
 declare const _default: IconComponent;
 
-type ModalProps = {
+type InternalModalProps = {
     /**
      * If you want to have a small modal, you can use 660px as it looks good on most screens.
      *
@@ -717,8 +717,10 @@ type ModalProps = {
     defaultIsOpened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    isAlert?: boolean;
     children?: React.ReactNode;
 };
+type ModalProps = OmitProps<InternalModalProps, "isAlert">;
 type ModalRef = {
     isOpened: boolean;
     open: () => void;
@@ -1074,16 +1076,20 @@ declare const Foldable: typeof FoldableComponent & {
 
 type SideMenuItem = {
     text: string;
+    hidden?: boolean;
+} & ({
+    type: "item";
     iconName: IconName | AnyOtherString;
     href?: string;
     disabled?: boolean;
-    hidden?: boolean;
     withDot?: boolean;
     children?: SideMenuItem[];
     /** @default true */
     onClickCloseSideMenu?: boolean;
     onClick?: (item: SideMenuItem) => void;
-};
+} | {
+    type: "divider";
+});
 type SideMenuProps = {
     items: SideMenuItem[];
     bottomItems?: SideMenuItem[];

package/dist/index.js

@@ -2183,7 +2183,10 @@ var ButtonElement = import_styled_components6.default.button.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ButtonComponent = function Button(buttonProps) {
+var ButtonComponent = function Button({
+  fromSubcomponent,
+  ...buttonProps
+}) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const {
     href,
@@ -2209,7 +2212,7 @@ var ButtonComponent = function Button(buttonProps) {
     onClickWithValue,
     ...props
   } = useComponentsPropsMerger(
-    !buttonProps.fromSubcomponent ? betterHtmlContextInternal.components.button?.style?.default : {},
+    !fromSubcomponent ? betterHtmlContextInternal.components.button?.style?.default : {},
     buttonProps
   );
   const theme2 = (0, import_react_better_core9.useTheme)();
@@ -2425,6 +2428,9 @@ var import_react_dom = require("react-dom");
 var import_react_better_core10 = require("react-better-core");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var isAlertModalProps = {
+  isAlert: true
+};
 var DialogStylesElement = import_styled_components7.default.dialog.withConfig({
   shouldForwardProp: (prop) => !["theme", "colorTheme", "opacity"].includes(prop)
 })`
@@ -2481,10 +2487,11 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
   defaultIsOpened = false,
   onOpen,
   onClose,
+  isAlert,
   children
 }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
-  const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
+  const urlQuery = reactRouterDomPlugin2 && !isAlert ? useUrlQuery() : void 0;
   const theme2 = (0, import_react_better_core10.useTheme)();
   const { app } = useBetterHtmlContextInternal();
   const { colorTheme } = (0, import_react_better_core10.useBetterCoreContext)();
@@ -2990,7 +2997,7 @@ function Alert2({ alert }) {
   const animation = `${isRemoved ? getAnimationOutName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align] : getAnimationInName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align]} ${theme2.styles.transition}`;
   const alertTitle = alert.title ?? alertData[alert.type].title;
   return defaultAlertDisplay === "prominent" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    Modal_default,
+    ModalComponent,
     {
       defaultIsOpened: true,
       icon: alertData[alert.type].icon,
@@ -3002,6 +3009,7 @@ function Alert2({ alert }) {
       headerBackgroundColor: alertData[alert.type].backgroundColor,
       withoutCloseButton: true,
       ref: modalRef,
+      ...isAlertModalProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.row, { width: "100%", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Button_default,
         {
@@ -7869,7 +7877,7 @@ var useSideMenuContext = () => {
   }
   return context;
 };
-var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
+var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
   item,
   backgroundColor,
   activeItemColor,
@@ -7897,8 +7905,8 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
     }
   }, [onClick, item, isCollapsed]);
   const childrenHaveDot = (0, import_react31.useMemo)(
-    () => item.children?.some((child) => child.withDot) ?? false,
-    [item.children]
+    () => item.children?.some((child) => child.type === "item" && child.withDot) ?? false,
+    [item]
   );
   const isActive = activeItem && item.href && activeItem.href === item.href;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
@@ -8003,7 +8011,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
   (0, import_react31.useEffect)(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
-      (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
+      (child) => child.type === "item" ? child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false : false
     );
     if (!isCollapsed) setIsOpened.setState(toBeOpened);
   }, [item, isCollapsed]);
@@ -8012,7 +8020,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
     setIsOpened.setFalse();
   }, [isCollapsed]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default, { width: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     item.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
     item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Div_default.column,
@@ -8026,7 +8034,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
           item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            MenuItemComponent2,
+            MenuItemComponent,
             {
               item: child,
               backgroundColor: readyBackgroundColor,
@@ -8078,6 +8086,13 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
     )
   ] });
 });
+var MenuItemTypeDivider = (0, import_react31.memo)(function MenuItemTypeDivider2({ item }) {
+  const theme2 = (0, import_react_better_core29.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.row, { paddingTop: theme2.styles.space, paddingInline: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: theme2.colors.textSecondary, children: item.text }) });
+});
+var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ item, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemTypeDivider, { item }) : void 0 });
+});
 var SideMenuComponent = function SideMenu({
   items,
   bottomItems,