@natoora-libs/core 0.2.43 → 0.2.44

package/dist/components/index.js

@@ -10639,8 +10639,8 @@ var ThemedDateRangePicker = ({
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-import { memo as memo24, useLayoutEffect as useLayoutEffect2, useRef as useRef12, useState as useState28 } from "react";
-import { AppBar, Box as Box50, Toolbar, useMediaQuery, useTheme as useTheme3 } from "@mui/material";
+import { memo as memo24 } from "react";
+import { AppBar, Box as Box50, Toolbar } from "@mui/material";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
 import { jsx as jsx145, jsxs as jsxs97 } from "react/jsx-runtime";
 var useStyles49 = makeStyles49()((theme) => ({
@@ -10656,8 +10656,6 @@ var useStyles49 = makeStyles49()((theme) => ({
     }
   }
 }));
-var CENTER_MIN_WIDTH = 320;
-var SAFETY_BUFFER = 24;
 var TheToolbar = ({
   imageLogoDarkSmall,
   imageLogoLightSmall,
@@ -10669,48 +10667,9 @@ var TheToolbar = ({
   isAuthenticated = true
 }) => {
   const { classes } = useStyles49();
-  const theme = useTheme3();
-  const belowXl = useMediaQuery(theme.breakpoints.down("xl"));
-  const toolbarRef = useRef12(null);
-  const leftSectionMeasureRef = useRef12(null);
-  const rightSectionMeasureRef = useRef12(null);
-  const logoRef = useRef12(null);
-  const rightSectionRef = useRef12(null);
-  const menuButtonRef = useRef12(null);
-  const [hideLeftSection, setHideLeftSection] = useState28(false);
-  const [hideRightSection, setHideRightSection] = useState28(false);
-  useLayoutEffect2(() => {
-    if (belowXl) {
-      setHideLeftSection(true);
-    }
-    const toolbar = toolbarRef.current;
-    const leftMeasure = leftSectionMeasureRef.current;
-    const rightMeasure = rightSectionMeasureRef.current;
-    if (!toolbar) return void 0;
-    const update = () => {
-      const toolbarWidth = toolbar.clientWidth;
-      const leftWidth = leftMeasure?.scrollWidth ?? 0;
-      const rightWidth = rightMeasure?.scrollWidth ?? 0;
-      const logoWidth = logoRef.current?.offsetWidth ?? 0;
-      const menuWidth = menuButtonRef.current?.offsetWidth ?? 0;
-      const availableWithoutLeft = toolbarWidth - logoWidth - menuWidth - CENTER_MIN_WIDTH - SAFETY_BUFFER;
-      const nextHideRight = rightWidth > availableWithoutLeft;
-      setHideRightSection(nextHideRight);
-      if (!belowXl) {
-        const effectiveRightWidth = nextHideRight ? 0 : rightWidth;
-        setHideLeftSection(leftWidth > availableWithoutLeft - effectiveRightWidth);
-      }
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(toolbar);
-    if (leftMeasure) observer.observe(leftMeasure);
-    if (rightMeasure) observer.observe(rightMeasure);
-    return () => observer.disconnect();
-  }, [belowXl, leftSection, rightSection]);
   return /* @__PURE__ */ jsxs97(Box50, { children: [
-    /* @__PURE__ */ jsx145(AppBar, { children: /* @__PURE__ */ jsxs97(Toolbar, { className: classes.topBar, ref: toolbarRef, children: [
-      isAuthenticated ? /* @__PURE__ */ jsx145(Box50, { ref: menuButtonRef, sx: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ jsx145(
+    /* @__PURE__ */ jsx145(AppBar, { children: /* @__PURE__ */ jsxs97(Toolbar, { className: classes.topBar, children: [
+      isAuthenticated ? /* @__PURE__ */ jsx145(Box50, { sx: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ jsx145(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -10719,30 +10678,20 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ) }) : null,
-      /* @__PURE__ */ jsx145(
-        Box50,
+      /* @__PURE__ */ jsx145(Box50, { sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
+        CompanyLogo_default,
         {
-          ref: logoRef,
-          sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 },
-          children: /* @__PURE__ */ jsx145(
-            CompanyLogo_default,
-            {
-              size: "small",
-              color: "light",
-              imageLogoDarkSmall,
-              imageLogoLightSmall
-            }
-          )
+          size: "small",
+          color: "light",
+          imageLogoDarkSmall,
+          imageLogoLightSmall
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx145(
         Box50,
         {
           ml: { xs: 0, lg: 2 },
-          sx: {
-            display: hideLeftSection ? "none" : "block",
-            flexShrink: 0
-          },
+          sx: { flexShrink: 0, display: { xs: "none", xl: "block" } },
           children: leftSection
         }
       ),
@@ -10758,49 +10707,8 @@ var TheToolbar = ({
           children: centerSection
         }
       ) : /* @__PURE__ */ jsx145(Box50, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx145(
-        Box50,
-        {
-          ref: rightSectionRef,
-          sx: { flexShrink: 0, display: hideRightSection ? "none" : "block" },
-          children: rightSection
-        }
-      )
+      /* @__PURE__ */ jsx145(Box50, { sx: { flexShrink: 0, display: { xs: "none", xl: "block" } }, children: rightSection })
     ] }) }),
-    /* @__PURE__ */ jsx145(
-      Box50,
-      {
-        ref: leftSectionMeasureRef,
-        "aria-hidden": true,
-        sx: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          visibility: "hidden",
-          pointerEvents: "none",
-          whiteSpace: "nowrap",
-          display: "inline-flex"
-        },
-        children: leftSection
-      }
-    ),
-    /* @__PURE__ */ jsx145(
-      Box50,
-      {
-        ref: rightSectionMeasureRef,
-        "aria-hidden": true,
-        sx: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          visibility: "hidden",
-          pointerEvents: "none",
-          whiteSpace: "nowrap",
-          display: "inline-flex"
-        },
-        children: rightSection
-      }
-    ),
     LeftDrawer
   ] });
 };