react-better-html 1.1.181 → 1.1.183

package/dist/index.mjs

@@ -9,7 +9,7 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
-import { createSearchParams, useInRouterContext, useNavigate, useSearchParams } from "react-router-dom";
+import { createSearchParams } from "react-router-dom";
 
 // src/constants/css.ts
 var cssProps = {
@@ -1518,6 +1518,7 @@ var appConfig = {
   contentMaxWidth: 1100
 };
 var defaultAlertDuration = 2.3 * 1e3;
+var defaultSideMenuWidth = 300;
 
 // src/components/alerts/AlertsHolder.tsx
 import { memo as memo7 } from "react";
@@ -1547,7 +1548,13 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-var defaultReactRouterDomPluginOptions = {};
+import { useInRouterContext, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+var defaultReactRouterDomPluginOptions = {
+  useNavigate,
+  useLocation,
+  useInRouterContext,
+  useSearchParams
+};
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
   initialize: () => {
@@ -2534,6 +2541,8 @@ function BetterHtmlProvider({ config, plugins, children }) {
   );
   const [loaders, setLoaders] = useState2(config?.loaders ?? {});
   const [alerts, setAlerts] = useState2([]);
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState();
   const [tabGroups, setTabGroups] = useState2([]);
   const [tabsWithDots, setTabsWithDots] = useState2([]);
   const readyConfig = useMemo2(
@@ -2571,6 +2580,10 @@ function BetterHtmlProvider({ config, plugins, children }) {
       setLoaders,
       alerts,
       setAlerts,
+      sideMenuIsCollapsed,
+      setSideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      setSideMenuIsOpenMobile,
       components: {
         ...config?.components
       },
@@ -2584,7 +2597,7 @@ function BetterHtmlProvider({ config, plugins, children }) {
         }
       }
     }),
-    [config, colorTheme, loaders, alerts, tabGroups, tabsWithDots]
+    [config, colorTheme, loaders, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, tabGroups, tabsWithDots]
   );
   useEffect4(() => {
     if (!plugins) return;
@@ -3091,14 +3104,15 @@ function useUrlQuery() {
       "`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const isInRouterContext = useInRouterContext();
+  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
+  const isInRouterContext = reactRouterDomPluginConfig.useInRouterContext();
   if (!isInRouterContext) {
     throw new Error(
       "`useUrlQuery` hook must be used inside a React Router context. Make sure your component is wrapped in a `<BrowserRouter>`, or another Router component."
     );
   }
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
+  const navigate = reactRouterDomPluginConfig.useNavigate();
+  const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
   const setQuery = useCallback4(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -5486,6 +5500,24 @@ var alertControls = {
     externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
   }
 };
+var sideMenuControls = {
+  expand: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
+  },
+  collapse: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
+  },
+  open: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
+  },
+  close: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  }
+};
 var colorThemeControls = {
   toggleTheme: (theme2) => {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
@@ -8504,7 +8536,7 @@ var TableComponent = forwardRef15(function Table({
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
                       children: /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ jsx22(Text_default, { children: value.label ?? value.value }),
+                        /* @__PURE__ */ jsx22(Text_default, { children: value.label || value.value }),
                         openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs18(
                           Text_default,
                           {
@@ -9247,6 +9279,305 @@ var Foldable2 = memo25(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
+// src/components/SideMenu.tsx
+import { memo as memo26, useCallback as useCallback15, useEffect as useEffect14, useMemo as useMemo11 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
+  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
+  if (!reactRouterDomPlugin2) {
+    throw new Error(
+      "`SideMenu` component requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const location = reactRouterDomPluginConfig.useLocation();
+  const { colorTheme, components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const [isOpened, setIsOpened] = useBooleanState();
+  const onClickElement = useCallback15(() => {
+    if (item.disabled) return;
+    onClick?.();
+    item.onClick?.(item);
+  }, [onClick, item]);
+  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
+  const isActive = item.href ? location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/" : false;
+  const iconSize = 16;
+  const paddingBlock = theme2.styles.gap;
+  const paddingLeft = theme2.styles.gap + 2;
+  const iconGap = theme2.styles.gap;
+  const lineHeight = 20;
+  const lineWidth = 2;
+  const lineEndRadius = iconSize / 2 + iconGap * 2;
+  const content = /* @__PURE__ */ jsxs22(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: iconGap,
+      whiteSpace: "nowrap",
+      backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundBase,
+      borderRadius: theme2.styles.borderRadius,
+      paddingBlock,
+      paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
+      paddingRight: theme2.styles.space,
+      filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
+      overflow: isCollapsed ? "hidden" : void 0,
+      cursor: item.disabled ? "not-allowed" : "pointer",
+      opacity: item.disabled ? 0.6 : void 0,
+      onClick: item.children ? setIsOpened.toggle : void 0,
+      children: [
+        /* @__PURE__ */ jsx26(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+        /* @__PURE__ */ jsx26(
+          Text_default,
+          {
+            flex: 1,
+            lineHeight: `${lineHeight}px`,
+            color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
+            opacity: isCollapsed ? 0 : void 0,
+            transition: theme2.styles.transition,
+            children: item.text
+          }
+        ),
+        item.children && /* @__PURE__ */ jsx26(
+          Icon_default,
+          {
+            name: "chevronDown",
+            color: theme2.colors.textSecondary,
+            size: 14,
+            transform: isOpened ? "rotate(180deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        )
+      ]
+    }
+  );
+  useEffect14(() => {
+    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
+    );
+    setIsOpened.setState(toBeOpened);
+  }, [item]);
+  const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
+  return /* @__PURE__ */ jsxs22(Div_default, { width: "100%", children: [
+    item.href ? /* @__PURE__ */ jsx26(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ jsxs22(
+      Div_default.column,
+      {
+        position: "relative",
+        maxHeight: isOpened ? 1e3 : 0,
+        gap: theme2.styles.gap / 2,
+        marginTop: isOpened ? theme2.styles.gap / 2 : void 0,
+        paddingLeft: paddingLeft + iconSize + iconGap,
+        overflow: "hidden",
+        transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
+        children: [
+          item.children.map((child) => /* @__PURE__ */ jsx26(MenuItemComponent2, { item: child, onClick }, child.text)),
+          /* @__PURE__ */ jsxs22(
+            Div_default,
+            {
+              position: "absolute",
+              height: `calc(100% - ${paddingBlock + lineHeight / 2 + lineEndRadius / 2}px)`,
+              top: 0,
+              left: paddingLeft + iconSize / 2,
+              zIndex: -1,
+              children: [
+                /* @__PURE__ */ jsx26(
+                  Div_default,
+                  {
+                    position: "relative",
+                    width: lineWidth,
+                    height: "100%",
+                    backgroundColor: theme2.colors.border,
+                    zIndex: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx26(
+                  Div_default,
+                  {
+                    position: "absolute",
+                    width: lineEndRadius,
+                    height: lineEndRadius,
+                    top: `calc(100% - ${lineEndRadius / 2}px)`,
+                    left: 0,
+                    border: `${lineWidth}px solid ${theme2.colors.border}`,
+                    borderRadius: 999,
+                    borderTopColor: theme2.colors.backgroundBase,
+                    borderLeftColor: theme2.colors.backgroundBase,
+                    borderRightColor: theme2.colors.backgroundBase,
+                    transform: "rotate(45deg)"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var SideMenuComponent = function SideMenu({
+  items,
+  logoAssetName,
+  logoUrl,
+  logoText,
+  logoFontFamily,
+  collapsable,
+  widthMobileHandle
+}) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
+  const onClickXButton = useCallback15(() => {
+    setSideMenuIsOpenMobile.setFalse();
+  }, []);
+  const readyItems = useMemo11(() => items.filter((item) => !item.hidden), [items]);
+  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
+  const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
+  const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
+  const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
+  return /* @__PURE__ */ jsxs22(
+    Div_default.column,
+    {
+      position: "fixed",
+      width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+      height: "100svh",
+      backgroundColor: theme2.colors.backgroundBase,
+      borderRight: `solid 1px ${theme2.colors.border}`,
+      transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
+      paddingInline: theme2.styles.space,
+      paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
+      paddingBottom: theme2.styles.space,
+      transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
+      userSelect: "none",
+      zIndex: 11,
+      children: [
+        /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || mediaQuery.size1000) && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", children: [
+            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx26(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs22(
+              Div_default.row,
+              {
+                alignItems: "center",
+                width: sideMenuCollapsedWidth ? logoSize : void 0,
+                height: logoSize,
+                whiteSpace: "nowrap",
+                gap: theme2.styles.gap,
+                children: [
+                  /* @__PURE__ */ jsx26(
+                    Image_default,
+                    {
+                      name: logoAssetName,
+                      src: logoUrl,
+                      width: logoSize,
+                      height: logoSize,
+                      objectFit: "contain"
+                    }
+                  ),
+                  logoText && /* @__PURE__ */ jsx26(
+                    Text_default,
+                    {
+                      fontFamily: logoFontFamily,
+                      fontSize: 22,
+                      fontWeight: 800,
+                      opacity: !isCollapsed ? 1 : 0,
+                      transition: theme2.styles.transition,
+                      userSelect: "none",
+                      children: logoText
+                    }
+                  )
+                ]
+              }
+            ) }),
+            mediaQuery.size1000 && /* @__PURE__ */ jsx26(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+          ] }),
+          /* @__PURE__ */ jsx26(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) }),
+          collapsable && !mediaQuery.size1000 && /* @__PURE__ */ jsx26(
+            Div_default.row,
+            {
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: theme2.colors.backgroundBase,
+              borderRadius: theme2.styles.borderRadius,
+              marginTop: "auto",
+              cursor: "pointer",
+              filterHover: filterHover().z1,
+              paddingBlock: theme2.styles.gap,
+              isTabAccessed: true,
+              onClick: setSideMenuIsCollapsed.toggle,
+              children: /* @__PURE__ */ jsx26(
+                Icon_default,
+                {
+                  name: "chevronRight",
+                  size: 20,
+                  color: theme2.colors.textSecondary,
+                  transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                  transition: theme2.styles.transition
+                }
+              )
+            }
+          )
+        ] }),
+        widthMobileHandle && /* @__PURE__ */ jsx26(
+          Div_default.row,
+          {
+            position: "absolute",
+            top: theme2.styles.space,
+            left: "100%",
+            backgroundColor: theme2.colors.backgroundBase,
+            border: `solid 1px ${theme2.colors.border}`,
+            borderLeft: "none",
+            borderTopRightRadius: theme2.styles.borderRadius,
+            borderBottomRightRadius: theme2.styles.borderRadius,
+            alignItems: "center",
+            cursor: "pointer",
+            opacity: !mediaQuery.size1000 ? 0 : void 0,
+            pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
+            padding: theme2.styles.gap,
+            paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
+            transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
+            transition: theme2.styles.transition,
+            onClick: setSideMenuIsOpenMobile.toggle,
+            children: /* @__PURE__ */ jsx26(
+              Icon_default,
+              {
+                name: "chevronRight",
+                size: 20,
+                color: theme2.colors.textSecondary,
+                transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
+                transition: theme2.styles.transition
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, ...props }) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
+  return /* @__PURE__ */ jsxs22(
+    Div_default,
+    {
+      position: "relative",
+      width: "100%",
+      paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
+      transition: theme2.styles.transition,
+      children: [
+        outsideComponent,
+        /* @__PURE__ */ jsx26(PageHolder_default, { ...props })
+      ]
+    }
+  );
+};
+var SideMenu2 = memo26(SideMenuComponent);
+SideMenu2.pageHolder = SideMenuComponent.pageHolder;
+var SideMenu_default = SideMenu2;
+
 // src/utils/localStorage.ts
 function generateLocalStorage() {
   return {
@@ -9330,6 +9661,7 @@ export {
   Modal_default as Modal,
   PageHeader_default as PageHeader,
   PageHolder_default as PageHolder,
+  SideMenu_default as SideMenu,
   Table_default as Table,
   Tabs_default as Tabs,
   Text_default as Text,
@@ -9359,6 +9691,7 @@ export {
   localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
+  sideMenuControls,
   useAlertControls,
   useBetterHtmlContext,
   useBooleanState,