react-better-html 1.1.180 → 1.1.182

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   Modal: () => Modal_default,
   PageHeader: () => PageHeader_default,
   PageHolder: () => PageHolder_default,
+  SideMenu: () => SideMenu_default,
   Table: () => Table_default,
   Tabs: () => Tabs_default,
   Text: () => Text_default,
@@ -77,6 +78,7 @@ __export(index_exports, {
   localStoragePlugin: () => localStoragePlugin,
   reactRouterDomPlugin: () => reactRouterDomPlugin,
   saturateColor: () => saturateColor,
+  sideMenuControls: () => sideMenuControls,
   useAlertControls: () => useAlertControls,
   useBetterHtmlContext: () => useBetterHtmlContext,
   useBooleanState: () => useBooleanState,
@@ -103,7 +105,7 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 var import_react10 = require("react");
-var import_react_router_dom = require("react-router-dom");
+var import_react_router_dom2 = require("react-router-dom");
 
 // src/constants/css.ts
 var cssProps = {
@@ -1612,6 +1614,7 @@ var appConfig = {
   contentMaxWidth: 1100
 };
 var defaultAlertDuration = 2.3 * 1e3;
+var defaultSideMenuWidth = 300;
 
 // src/components/alerts/AlertsHolder.tsx
 var import_react8 = require("react");
@@ -1641,7 +1644,13 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-var defaultReactRouterDomPluginOptions = {};
+var import_react_router_dom = require("react-router-dom");
+var defaultReactRouterDomPluginOptions = {
+  useNavigate: import_react_router_dom.useNavigate,
+  useLocation: import_react_router_dom.useLocation,
+  useInRouterContext: import_react_router_dom.useInRouterContext,
+  useSearchParams: import_react_router_dom.useSearchParams
+};
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
   initialize: () => {
@@ -2628,6 +2637,8 @@ function BetterHtmlProvider({ config, plugins, children }) {
   );
   const [loaders, setLoaders] = (0, import_react9.useState)(config?.loaders ?? {});
   const [alerts, setAlerts] = (0, import_react9.useState)([]);
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState();
   const [tabGroups, setTabGroups] = (0, import_react9.useState)([]);
   const [tabsWithDots, setTabsWithDots] = (0, import_react9.useState)([]);
   const readyConfig = (0, import_react9.useMemo)(
@@ -2665,6 +2676,10 @@ function BetterHtmlProvider({ config, plugins, children }) {
       setLoaders,
       alerts,
       setAlerts,
+      sideMenuIsCollapsed,
+      setSideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      setSideMenuIsOpenMobile,
       components: {
         ...config?.components
       },
@@ -2678,7 +2693,7 @@ function BetterHtmlProvider({ config, plugins, children }) {
         }
       }
     }),
-    [config, colorTheme, loaders, alerts, tabGroups, tabsWithDots]
+    [config, colorTheme, loaders, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, tabGroups, tabsWithDots]
   );
   (0, import_react9.useEffect)(() => {
     if (!plugins) return;
@@ -3120,7 +3135,7 @@ function useForm(options) {
   }, [validate, values]);
   const onSubmitFunction = (0, import_react10.useCallback)(
     async (event) => {
-      event.preventDefault();
+      event?.preventDefault();
       setIsSubmitting.setTrue();
       try {
         const validationErrors = validateForm();
@@ -3185,14 +3200,15 @@ function useUrlQuery() {
       "`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const isInRouterContext = (0, import_react_router_dom.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 = (0, import_react_router_dom.useNavigate)();
-  const [searchParams] = (0, import_react_router_dom.useSearchParams)();
+  const navigate = reactRouterDomPluginConfig.useNavigate();
+  const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
   const setQuery = (0, import_react10.useCallback)(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3201,7 +3217,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: (0, import_react_router_dom.createSearchParams)({
+          search: (0, import_react_router_dom2.createSearchParams)({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -5580,6 +5596,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;
@@ -8230,7 +8264,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       const label = valueFromList ? valueFromList.label : value;
       let searchPassed = openedFilterColumn.filter === "list" && openedFilterColumn.withSearch ? false : true;
       if (openedFilterColumn.filter === "list" && openedFilterColumn.withSearch) {
-        searchPassed = label?.toLowerCase().includes(filterForm.values.search.toLowerCase()) ?? false;
+        searchPassed = label?.toString().toLowerCase().includes(filterForm.values.search.toLowerCase()) ?? false;
       }
       if (value !== void 0 && value !== null && value !== "" && searchPassed) {
         if (previousValue.some((item) => item.value === value)) {
@@ -8242,7 +8276,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
           );
         } else
           previousValue.push({
-            label,
+            label: label?.toString() ?? "",
             value,
             count: 1
           });
@@ -8588,7 +8622,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
                       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: value.label ?? value.value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: value.label || value.value }),
                         openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                           Text_default,
                           {
@@ -9331,6 +9365,301 @@ var Foldable2 = (0, import_react28.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
+// src/components/SideMenu.tsx
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var MenuItemComponent = (0, import_react29.memo)(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 = (0, import_react29.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime27.jsxs)(
+    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__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          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__ */ (0, import_jsx_runtime27.jsx)(
+          Icon_default,
+          {
+            name: "chevronDown",
+            color: theme2.colors.textSecondary,
+            size: 14,
+            transform: isOpened ? "rotate(180deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        )
+      ]
+    }
+  );
+  (0, import_react29.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
+    );
+    setIsOpened.setState(toBeOpened);
+  }, [item]);
+  const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default, { width: "100%", children: [
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      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__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent2, { item: child, onClick }, child.text)),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            Div_default,
+            {
+              position: "absolute",
+              height: `calc(100% - ${paddingBlock + lineHeight / 2 + lineEndRadius / 2}px)`,
+              top: 0,
+              left: paddingLeft + iconSize / 2,
+              zIndex: -1,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Div_default,
+                  {
+                    position: "relative",
+                    width: lineWidth,
+                    height: "100%",
+                    backgroundColor: theme2.colors.border,
+                    zIndex: 1
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  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 = (0, import_react29.useCallback)(() => {
+    setSideMenuIsOpenMobile.setFalse();
+  }, []);
+  const readyItems = (0, import_react29.useMemo)(() => 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__ */ (0, import_jsx_runtime27.jsxs)(
+    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__ */ (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) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              Div_default.row,
+              {
+                alignItems: "center",
+                width: sideMenuCollapsedWidth ? logoSize : void 0,
+                height: logoSize,
+                whiteSpace: "nowrap",
+                gap: theme2.styles.gap,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Image_default,
+                    {
+                      name: logoAssetName,
+                      src: logoUrl,
+                      width: logoSize,
+                      height: logoSize,
+                      objectFit: "contain"
+                    }
+                  ),
+                  logoText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Text_default,
+                    {
+                      fontFamily: logoFontFamily,
+                      fontSize: 22,
+                      fontWeight: 800,
+                      opacity: !isCollapsed ? 1 : 0,
+                      transition: theme2.styles.transition,
+                      userSelect: "none",
+                      children: logoText
+                    }
+                  )
+                ]
+              }
+            ) }),
+            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)(
+            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__ */ (0, import_jsx_runtime27.jsx)(
+                Icon_default,
+                {
+                  name: "chevronRight",
+                  size: 20,
+                  color: theme2.colors.textSecondary,
+                  transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                  transition: theme2.styles.transition
+                }
+              )
+            }
+          )
+        ] }),
+        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          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__ */ (0, import_jsx_runtime27.jsx)(
+              Icon_default,
+              {
+                name: "chevronRight",
+                size: 20,
+                color: theme2.colors.textSecondary,
+                transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
+                transition: theme2.styles.transition
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+SideMenuComponent.pageHolder = function SideMenuPageHolder({ ...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__ */ (0, import_jsx_runtime27.jsx)(
+    Div_default,
+    {
+      width: "100%",
+      paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
+      transition: theme2.styles.transition,
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PageHolder_default, { ...props })
+    }
+  );
+};
+var SideMenu2 = (0, import_react29.memo)(SideMenuComponent);
+SideMenu2.pageHolder = SideMenuComponent.pageHolder;
+var SideMenu_default = SideMenu2;
+
 // src/utils/localStorage.ts
 function generateLocalStorage() {
   return {
@@ -9415,6 +9744,7 @@ function generateLocalStorage() {
   Modal,
   PageHeader,
   PageHolder,
+  SideMenu,
   Table,
   Tabs,
   Text,
@@ -9444,6 +9774,7 @@ function generateLocalStorage() {
   localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
+  sideMenuControls,
   useAlertControls,
   useBetterHtmlContext,
   useBooleanState,