react-better-html 1.1.222 → 1.1.224

package/dist/index.d.mts

@@ -306,13 +306,13 @@ type PageHeaderProps = {
     imageSize?: number;
     /** @default false */
     imageAzProfileImage?: boolean;
-    title?: string;
+    title?: string | React.ReactNode;
     /** @default "h1" */
     titleAs?: TextAs;
     /** @default textPrimary */
     titleColor?: React.CSSProperties["color"];
     titleRightElement?: React.ReactNode;
-    description?: string;
+    description?: string | React.ReactNode;
     /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
     textAlign?: React.CSSProperties["textAlign"];
@@ -998,6 +998,7 @@ type SideMenuItem = {
     href?: string;
     disabled?: boolean;
     hidden?: boolean;
+    withDot?: boolean;
     children?: SideMenuItem[];
     /** @default true */
     onClickCloseSideMenu?: boolean;
@@ -1094,4 +1095,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$5 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$1 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$3 as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$4 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$5 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$1 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$3 as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$4 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.d.ts

@@ -306,13 +306,13 @@ type PageHeaderProps = {
     imageSize?: number;
     /** @default false */
     imageAzProfileImage?: boolean;
-    title?: string;
+    title?: string | React.ReactNode;
     /** @default "h1" */
     titleAs?: TextAs;
     /** @default textPrimary */
     titleColor?: React.CSSProperties["color"];
     titleRightElement?: React.ReactNode;
-    description?: string;
+    description?: string | React.ReactNode;
     /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
     textAlign?: React.CSSProperties["textAlign"];
@@ -998,6 +998,7 @@ type SideMenuItem = {
     href?: string;
     disabled?: boolean;
     hidden?: boolean;
+    withDot?: boolean;
     children?: SideMenuItem[];
     /** @default true */
     onClickCloseSideMenu?: boolean;
@@ -1094,4 +1095,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$5 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$1 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$3 as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$4 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$5 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$1 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$3 as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$4 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.js

@@ -1640,7 +1640,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
                   justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
                   gap: theme2.styles.space,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       Text_default,
                       {
                         as: titleAs,
@@ -1648,12 +1648,12 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
                       }
-                    ),
+                    ) : title,
                     titleRightElement
                   ]
                 }
               ),
-              description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              description && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 Text_default,
                 {
                   maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
@@ -1662,7 +1662,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
                   opacity: lightMode ? 0.7 : void 0,
                   children: description
                 }
-              )
+              ) : description)
             ]
           }
         ),
@@ -1765,8 +1765,11 @@ DivComponent.grid = (0, import_react8.forwardRef)(function Grid(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DivComponent, { display: "grid", ref, ...props });
 });
 DivComponent.box = (0, import_react8.forwardRef)(function Box({
+  icon,
+  image,
   imageUrl,
   imageSize,
+  imageAzProfileImage,
   title,
   titleAs,
   titleColor,
@@ -1815,8 +1818,11 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 PageHeader_default,
                 {
+                  icon,
+                  image,
                   imageUrl,
                   imageSize,
+                  imageAzProfileImage,
                   title,
                   titleAs,
                   titleColor,
@@ -7235,6 +7241,7 @@ var Foldable_default = Foldable2;
 var import_react31 = require("react");
 var import_react_better_core29 = require("react-better-core");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var tabDotSize2 = 6;
 var sideMenuContext = (0, import_react31.createContext)(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
 var useSideMenuContext = () => {
@@ -7272,6 +7279,10 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
       item.onClick?.(item);
     }
   }, [onClick, item, isCollapsed]);
+  const childrenHaveDot = (0, import_react31.useMemo)(
+    () => item.children?.some((child) => child.withDot) ?? false,
+    [item.children]
+  );
   const isActive = activeItem && item.href && activeItem.href === item.href;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
@@ -7331,6 +7342,20 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
                 transform: isOpened ? "rotate(180deg)" : void 0,
                 transition: theme2.styles.transition
               }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Div_default,
+              {
+                position: "absolute",
+                top: (theme2.styles.space - tabDotSize2) / 2,
+                right: (theme2.styles.space - tabDotSize2) / 2,
+                width: tabDotSize2,
+                height: tabDotSize2,
+                backgroundColor: theme2.colors.primary,
+                borderRadius: 999,
+                opacity: item.withDot || childrenHaveDot && !isOpened ? 1 : 0,
+                transition: theme2.styles.transition
+              }
             )
           ]
         }