@natoora-libs/core 0.2.42 → 0.2.43

package/dist/components/index.js

@@ -1,11 +1,11 @@
+import {
+  useDynamicScroll
+} from "../chunk-IXEF6LYV.js";
 import {
   Loading_default,
   colors,
   isDarkModeEnabled
 } from "../chunk-CKW5LT7K.js";
-import {
-  useDynamicScroll
-} from "../chunk-IXEF6LYV.js";
 import {
   getFlattenedFiltersLabels,
   getSelectOptionFromKeyPress
@@ -10639,8 +10639,8 @@ var ThemedDateRangePicker = ({
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-import { memo as memo24 } from "react";
-import { AppBar, Box as Box50, Toolbar } from "@mui/material";
+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 { makeStyles as makeStyles49 } from "tss-react/mui";
 import { jsx as jsx145, jsxs as jsxs97 } from "react/jsx-runtime";
 var useStyles49 = makeStyles49()((theme) => ({
@@ -10656,6 +10656,8 @@ var useStyles49 = makeStyles49()((theme) => ({
     }
   }
 }));
+var CENTER_MIN_WIDTH = 320;
+var SAFETY_BUFFER = 24;
 var TheToolbar = ({
   imageLogoDarkSmall,
   imageLogoLightSmall,
@@ -10667,9 +10669,48 @@ 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, children: [
-      isAuthenticated ? /* @__PURE__ */ jsx145(
+    /* @__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(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -10677,21 +10718,31 @@ var TheToolbar = ({
           noStrokes: true,
           onClick: handleOpen
         }
-      ) : null,
-      /* @__PURE__ */ jsx145(Box50, { sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
-        CompanyLogo_default,
+      ) }) : null,
+      /* @__PURE__ */ jsx145(
+        Box50,
         {
-          size: "small",
-          color: "light",
-          imageLogoDarkSmall,
-          imageLogoLightSmall
+          ref: logoRef,
+          sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 },
+          children: /* @__PURE__ */ jsx145(
+            CompanyLogo_default,
+            {
+              size: "small",
+              color: "light",
+              imageLogoDarkSmall,
+              imageLogoLightSmall
+            }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsx145(
         Box50,
         {
           ml: { xs: 0, lg: 2 },
-          sx: { display: { xs: "none", xl: "block" }, flexShrink: 0 },
+          sx: {
+            display: hideLeftSection ? "none" : "block",
+            flexShrink: 0
+          },
           children: leftSection
         }
       ),
@@ -10707,8 +10758,49 @@ var TheToolbar = ({
           children: centerSection
         }
       ) : /* @__PURE__ */ jsx145(Box50, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx145(Box50, { sx: { flexShrink: 0 }, children: rightSection })
+      /* @__PURE__ */ jsx145(
+        Box50,
+        {
+          ref: rightSectionRef,
+          sx: { flexShrink: 0, display: hideRightSection ? "none" : "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
   ] });
 };