react-better-html 1.1.184 → 1.1.186

package/dist/index.d.mts

@@ -931,28 +931,30 @@ declare const Foldable: typeof FoldableComponent & {
     box: typeof FoldableComponent.box;
 };
 
-type MenuItem = {
+type SideMenuItem = {
     text: string;
     iconName: IconName | AnyOtherString;
     href?: string;
-    onClick?: (item: MenuItem) => void;
+    onClick?: (item: SideMenuItem) => void;
     disabled?: boolean;
     hidden?: boolean;
-    children?: MenuItem[];
+    children?: SideMenuItem[];
 };
 type SideMenuProps = {
-    items: MenuItem[];
+    items: SideMenuItem[];
     topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;
     logoText?: string;
     logoFontFamily?: string;
     collapsable?: boolean;
+    withCloseButton?: boolean;
     widthMobileHandle?: boolean;
 };
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;
     pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
+    burgerButton: () => React.ReactElement;
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
@@ -960,6 +962,7 @@ type SideMenuPageHolderProps = PageHolderProps & {
 };
 declare const SideMenu: typeof SideMenuComponent & {
     pageHolder: typeof SideMenuComponent.pageHolder;
+    burgerButton: typeof SideMenuComponent.burgerButton;
 };
 
 type AppConfig = {
@@ -1059,8 +1062,10 @@ declare const alertControls: {
 declare const sideMenuControls: {
     expand: () => void;
     collapse: () => void;
+    toggleExpanded: () => void;
     open: () => void;
     close: () => void;
+    toggleOpened: () => void;
 };
 declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
@@ -1118,4 +1123,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, type MenuItem, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -931,28 +931,30 @@ declare const Foldable: typeof FoldableComponent & {
     box: typeof FoldableComponent.box;
 };
 
-type MenuItem = {
+type SideMenuItem = {
     text: string;
     iconName: IconName | AnyOtherString;
     href?: string;
-    onClick?: (item: MenuItem) => void;
+    onClick?: (item: SideMenuItem) => void;
     disabled?: boolean;
     hidden?: boolean;
-    children?: MenuItem[];
+    children?: SideMenuItem[];
 };
 type SideMenuProps = {
-    items: MenuItem[];
+    items: SideMenuItem[];
     topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;
     logoText?: string;
     logoFontFamily?: string;
     collapsable?: boolean;
+    withCloseButton?: boolean;
     widthMobileHandle?: boolean;
 };
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;
     pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
+    burgerButton: () => React.ReactElement;
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
@@ -960,6 +962,7 @@ type SideMenuPageHolderProps = PageHolderProps & {
 };
 declare const SideMenu: typeof SideMenuComponent & {
     pageHolder: typeof SideMenuComponent.pageHolder;
+    burgerButton: typeof SideMenuComponent.burgerButton;
 };
 
 type AppConfig = {
@@ -1059,8 +1062,10 @@ declare const alertControls: {
 declare const sideMenuControls: {
     expand: () => void;
     collapse: () => void;
+    toggleExpanded: () => void;
     open: () => void;
     close: () => void;
+    toggleOpened: () => void;
 };
 declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
@@ -1118,4 +1123,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, type MenuItem, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -5605,6 +5605,10 @@ var sideMenuControls = {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
     externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
   },
+  toggleExpanded: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
+  },
   open: () => {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
     externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
@@ -5612,6 +5616,10 @@ var sideMenuControls = {
   close: () => {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
     externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  },
+  toggleOpened: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
   }
 };
 var colorThemeControls = {
@@ -9401,7 +9409,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       alignItems: "center",
       gap: iconGap,
       whiteSpace: "nowrap",
-      backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundBase,
+      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : theme2.colors.backgroundContent,
       borderRadius: theme2.styles.borderRadius,
       paddingBlock,
       paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
@@ -9488,9 +9496,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
                     left: 0,
                     border: `${lineWidth}px solid ${theme2.colors.border}`,
                     borderRadius: 999,
-                    borderTopColor: theme2.colors.backgroundBase,
-                    borderLeftColor: theme2.colors.backgroundBase,
-                    borderRightColor: theme2.colors.backgroundBase,
+                    borderTopColor: theme2.colors.backgroundContent,
+                    borderLeftColor: theme2.colors.backgroundContent,
+                    borderRightColor: theme2.colors.backgroundContent,
                     transform: "rotate(45deg)"
                   }
                 )
@@ -9510,6 +9518,7 @@ var SideMenuComponent = function SideMenu({
   logoText,
   logoFontFamily,
   collapsable,
+  withCloseButton,
   widthMobileHandle
 }) {
   const theme2 = useTheme();
@@ -9532,7 +9541,7 @@ var SideMenuComponent = function SideMenu({
       height: `calc(100svh - ${topSpace}px)`,
       top: topSpace,
       left: 0,
-      backgroundColor: theme2.colors.backgroundBase,
+      backgroundColor: theme2.colors.backgroundContent,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingInline: theme2.styles.space,
@@ -9543,7 +9552,7 @@ var SideMenuComponent = function SideMenu({
       zIndex: 11,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               Div_default.row,
               {
@@ -9578,7 +9587,7 @@ var SideMenuComponent = function SideMenu({
                 ]
               }
             ) }),
-            mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) }),
           collapsable && !mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -9586,7 +9595,7 @@ var SideMenuComponent = function SideMenu({
             {
               alignItems: "center",
               justifyContent: "center",
-              backgroundColor: theme2.colors.backgroundBase,
+              backgroundColor: theme2.colors.backgroundContent,
               borderRadius: theme2.styles.borderRadius,
               marginTop: "auto",
               cursor: "pointer",
@@ -9613,7 +9622,7 @@ var SideMenuComponent = function SideMenu({
             position: "absolute",
             top: theme2.styles.space,
             left: "100%",
-            backgroundColor: theme2.colors.backgroundBase,
+            backgroundColor: theme2.colors.backgroundContent,
             border: `solid 1px ${theme2.colors.border}`,
             borderLeft: "none",
             borderTopRightRadius: theme2.styles.borderRadius,
@@ -9663,8 +9672,73 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
     }
   );
 };
+SideMenuComponent.burgerButton = function BurgerButton() {
+  const theme2 = useTheme();
+  const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
+  const [isHovered, setIsHovered] = useBooleanState();
+  const width = 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    Div_default,
+    {
+      position: "relative",
+      width: 32,
+      height: 20,
+      cursor: "pointer",
+      onMouseOver: setIsHovered.setTrue,
+      onMouseLeave: setIsHovered.setFalse,
+      onMouseOut: setIsHovered.setFalse,
+      onClick: setSideMenuIsOpenMobile.toggle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Div_default,
+          {
+            position: "absolute",
+            width: isHovered || sideMenuIsOpenMobile ? "100%" : "50%",
+            height: width,
+            top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
+            left: 0,
+            backgroundColor: theme2.colors.border,
+            borderRadius: 999,
+            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Div_default,
+          {
+            position: "absolute",
+            width: isHovered ? "100%" : "100%",
+            height: width,
+            top: "50%",
+            left: 0,
+            backgroundColor: theme2.colors.border,
+            borderRadius: 999,
+            transform: "translateY(-50%)",
+            opacity: sideMenuIsOpenMobile ? 0 : void 0,
+            transition: theme2.styles.transition
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Div_default,
+          {
+            position: "absolute",
+            width: isHovered || sideMenuIsOpenMobile ? "100%" : "75%",
+            height: width,
+            bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
+            left: 0,
+            backgroundColor: theme2.colors.border,
+            borderRadius: 999,
+            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        )
+      ]
+    }
+  );
+};
 var SideMenu2 = (0, import_react29.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
+SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
 
 // src/utils/localStorage.ts