@natoora-libs/core 0.2.12 → 0.2.14

package/dist/{TableDesktop-Z0KE59L4.d.cts → TableDesktop-BrpwT-lM.d.cts}

@@ -55,6 +55,7 @@ type TableDesktopToolbarProps = {
     disableBulkChangesMode?: boolean;
     isBulkChangesMode: boolean;
     onChangeBulkChangesMode: (checked: boolean) => void;
+    onActivateBulkChangesMode?: () => void;
     renderExportCsvDialog?: (props: ExportCsvDialogProps) => ReactNode;
     renderBulkChangesDialog?: (props: BulkChangesDialogProps) => ReactNode;
     renderTableColumnConfigurationMenu?: (props: TableColumnConfigurationMenuProps) => ReactNode;

package/dist/{TableDesktop-Z0KE59L4.d.ts → TableDesktop-BrpwT-lM.d.ts}

@@ -55,6 +55,7 @@ type TableDesktopToolbarProps = {
     disableBulkChangesMode?: boolean;
     isBulkChangesMode: boolean;
     onChangeBulkChangesMode: (checked: boolean) => void;
+    onActivateBulkChangesMode?: () => void;
     renderExportCsvDialog?: (props: ExportCsvDialogProps) => ReactNode;
     renderBulkChangesDialog?: (props: BulkChangesDialogProps) => ReactNode;
     renderTableColumnConfigurationMenu?: (props: TableColumnConfigurationMenuProps) => ReactNode;

package/dist/components/index.cjs

@@ -480,7 +480,9 @@ var AlertDialog = ({
   rejectCopy,
   acceptCopy,
   content,
-  disabledContentPadding
+  disabledContentPadding,
+  disableEnforceFocus,
+  disableRestoreFocus
 }) => {
   const { classes } = useStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -491,6 +493,8 @@ var AlertDialog = ({
       maxWidth,
       fullScreen,
       fullWidth,
+      disableEnforceFocus,
+      disableRestoreFocus,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { className: classes.topSection, children: [
           alertTitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "h5", className: classes.title, children: alertTitle }) : null,
@@ -3559,7 +3563,8 @@ var RoundButton = ({
     knife: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconKnife_default, {}),
     bicycle: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconBicycle_default, {}),
     heart: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconHeart_default, {}),
-    airplane: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconAirplane_default, {})
+    airplane: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconAirplane_default, {}),
+    swapHoriz: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.SwapHoriz, { fontSize: iconSize })
   };
   const filteredSize = size === "double" ? void 0 : size;
   const handleClick = (e) => {
@@ -5144,10 +5149,12 @@ var useStyles27 = (0, import_mui29.makeStyles)()((theme) => ({
     borderTop: `1px solid ${colors.neutral400}`,
     width: "100%",
     height: footerHeight,
-    padding: theme.spacing(0, 2)
+    padding: theme.spacing(0, 2),
+    zIndex: 999
   },
   fixedOffset: {
-    height: footerHeight
+    height: footerHeight,
+    backgroundColor: "white"
   }
 }));
 var FixedFooter = ({ justifyContent, children }) => {
@@ -5842,7 +5849,8 @@ var useStyles34 = (0, import_mui36.makeStyles)()((theme) => ({
     left: 0
   },
   fixedOffset: {
-    height: paginationHeight
+    height: paginationHeight,
+    backgroundColor: "white"
   }
 }));
 var PaginationForTable = ({
@@ -6504,7 +6512,7 @@ var RenderAvatar_default = RenderAvatar;
 
 // src/components/RenderContentList/RenderContentList.tsx
 var import_react29 = require("react");
-var import_icons_material8 = require("@mui/icons-material");
+var import_WarningAmber = __toESM(require("@mui/icons-material/WarningAmber"), 1);
 var import_material53 = require("@mui/material");
 var import_mui41 = require("tss-react/mui");
 
@@ -6536,8 +6544,31 @@ var RenderContentList = ({
   const { classes } = useStyles36();
   const [active, setActive] = (0, import_react29.useState)(activeSection);
   const observer = (0, import_react29.useRef)(null);
+  const isScrolling = (0, import_react29.useRef)(false);
+  const timeoutScrolling = (0, import_react29.useRef)(null);
   (0, import_react29.useEffect)(() => {
-    setActive(activeSection);
+    if (!activeSection) {
+      return void 0;
+    }
+    isScrolling.current = true;
+    const targetId = transformNameToID(activeSection);
+    setActive(targetId);
+    const element = document.getElementById(targetId);
+    if (element) {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    }
+    if (timeoutScrolling.current) {
+      clearTimeout(timeoutScrolling.current);
+    }
+    timeoutScrolling.current = setTimeout(() => {
+      isScrolling.current = false;
+    }, 1e3);
+    return () => {
+      if (timeoutScrolling.current) clearTimeout(timeoutScrolling.current);
+    };
   }, [activeSection]);
   (0, import_react29.useEffect)(() => {
     const sections = items.map((item) => ({
@@ -6547,9 +6578,14 @@ var RenderContentList = ({
     if (observer.current) {
       observer.current.disconnect();
     }
-    if (sections.length === 0) return;
+    if (sections.length === 0) {
+      return void 0;
+    }
     observer.current = new IntersectionObserver(
       (entries) => {
+        if (isScrolling.current) {
+          return;
+        }
         const visibleSection = entries.find((entry) => entry.isIntersecting);
         if (visibleSection) {
           setActive(visibleSection.target.id);
@@ -6568,6 +6604,21 @@ var RenderContentList = ({
       observer.current?.disconnect();
     };
   }, [items]);
+  const handleMenuClick = (id) => {
+    isScrolling.current = true;
+    setActive(id);
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    }
+    if (timeoutScrolling.current) clearTimeout(timeoutScrolling.current);
+    timeoutScrolling.current = setTimeout(() => {
+      isScrolling.current = false;
+    }, 1e3);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     import_material53.List,
     {
@@ -6581,19 +6632,10 @@ var RenderContentList = ({
           {
             selected: active === id,
             classes: { root: classes.root, selected: classes.selected },
-            onClick: () => {
-              setActive(id);
-              const element = document.getElementById(id);
-              if (element) {
-                element.scrollIntoView({
-                  behavior: "smooth",
-                  block: "start"
-                });
-              }
-            },
+            onClick: () => handleMenuClick(id),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material53.ListItemText, { primary: item }),
-              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material53.Tooltip, { title: warningMessage, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_icons_material8.WarningAmber, { color: "warning" }) })
+              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material53.Tooltip, { title: warningMessage, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_WarningAmber.default, { color: "warning" }) })
             ]
           },
           id
@@ -6841,7 +6883,7 @@ var import_mui45 = require("tss-react/mui");
 // src/components/SearchWithFilters/SearchWithFilters.tsx
 var import_react31 = require("react");
 var React6 = __toESM(require("react"), 1);
-var import_icons_material9 = require("@mui/icons-material");
+var import_icons_material8 = require("@mui/icons-material");
 var import_material56 = require("@mui/material");
 var import_mui44 = require("tss-react/mui");
 var import_jsx_runtime109 = require("react/jsx-runtime");
@@ -6905,7 +6947,7 @@ var SearchWithFilters = ({
     setSearchText(searchValue);
   }, [searchValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material56.Paper, { className: classes.searchContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material9.Search, { className: classes.icon, fontSize: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material8.Search, { className: classes.icon, fontSize: "small" }),
     /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       import_material56.InputBase,
       {
@@ -6927,7 +6969,7 @@ var SearchWithFilters = ({
         disabled,
         children: [
           "Filters",
-          showFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material9.ArrowDropUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material9.ArrowDropDown, {})
+          showFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material8.ArrowDropUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material8.ArrowDropDown, {})
         ]
       }
     )
@@ -7002,7 +7044,7 @@ var import_mui47 = require("tss-react/mui");
 
 // src/components/SearchWithFilters/SearchWithFiltersForTable.tsx
 var import_react32 = require("react");
-var import_icons_material10 = require("@mui/icons-material");
+var import_icons_material9 = require("@mui/icons-material");
 var import_material58 = require("@mui/material");
 var import_mui46 = require("tss-react/mui");
 var import_jsx_runtime111 = require("react/jsx-runtime");
@@ -7079,9 +7121,9 @@ var SearchWithFiltersForTable = (props) => {
       enterPressedInSearch();
     }
   };
-  const ArrowIcon = isOpen ? import_icons_material10.ArrowDropUp : import_icons_material10.ArrowDropDown;
+  const ArrowIcon = isOpen ? import_icons_material9.ArrowDropUp : import_icons_material9.ArrowDropDown;
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material58.Paper, { className: classes.c_search, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material58.Box, { className: classes.c_search__icon, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_icons_material10.Search, { className: classes.icon, fontSize: "small" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material58.Box, { className: classes.c_search__icon, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_icons_material9.Search, { className: classes.icon, fontSize: "small" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
       import_material58.InputBase,
       {
@@ -7215,7 +7257,8 @@ var SearchHeader = (0, import_react33.memo)(
 );
 
 // src/components/SectionName/SectionName.tsx
-var import_icons_material11 = require("@mui/icons-material");
+var import_History = __toESM(require("@mui/icons-material/History"), 1);
+var import_Info = __toESM(require("@mui/icons-material/Info"), 1);
 var import_material61 = require("@mui/material");
 var import_mui48 = require("tss-react/mui");
 var import_jsx_runtime114 = require("react/jsx-runtime");
@@ -7261,20 +7304,32 @@ var SectionName = ({
   openHistoryLog
 }) => {
   const { classes } = useStyles43();
+  const handleScroll = (e) => {
+    e.preventDefault();
+    if (sectionId) {
+      const targetId = sectionId.startsWith("#") ? sectionId.slice(1) : sectionId;
+      const element = document.getElementById(targetId);
+      if (element) {
+        element.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material61.Box, { className: classes.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material61.Box, { className: classes.titleContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
         import_material61.Typography,
         {
           variant: "h5",
-          component: "a",
-          href: sectionId,
+          onClick: handleScroll,
           className: classes.typography,
           children: name
         }
       ),
       tooltipDescription ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.Tooltip, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-        import_icons_material11.Info,
+        import_Info.default,
         {
           fontSize: "small",
           "data-testid": "InfoIcon",
@@ -7297,7 +7352,7 @@ var SectionName = ({
         }
       ) : null,
       openHistoryLog && buttonText && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.Divider, { orientation: "vertical", sx: { height: "24px" } }),
-      openHistoryLog && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.IconButton, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_icons_material11.History, {}) })
+      openHistoryLog && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.IconButton, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_History.default, {}) })
     ] })
   ] });
 };
@@ -8445,12 +8500,12 @@ var TableDesktop = ({
     setIsBulkChangesMode(checked);
     if (!checked) {
       resetSelectedRows();
+      refetchData?.();
     }
   };
   (0, import_react41.useEffect)(() => {
     if (isRowsFromAllPagesSelected) {
       selectAllRowsInPage();
-      selectAllRowsInPage();
     }
   }, [isRowsFromAllPagesSelected, data]);
   const renderBody = () => {
@@ -9169,6 +9224,7 @@ var TableDesktopToolbar = ({
   disableBulkChangesMode = false,
   isBulkChangesMode,
   onChangeBulkChangesMode,
+  onActivateBulkChangesMode,
   refetchData,
   renderExportCsvDialog,
   renderBulkChangesDialog,
@@ -9193,8 +9249,8 @@ var TableDesktopToolbar = ({
   const handleChangeBulkChangesMode = (_, checked) => {
     setBulkChanges([]);
     onChangeBulkChangesMode(checked);
-    if (!checked) {
-      refetchData?.();
+    if (checked) {
+      onActivateBulkChangesMode?.();
     }
   };
   const handleUpdateEditableCell = ({
@@ -9401,7 +9457,7 @@ var TableDesktopToolbar = ({
 
 // src/components/TableHeader/TableHeader.tsx
 var import_react48 = require("react");
-var import_icons_material12 = require("@mui/icons-material");
+var import_icons_material10 = require("@mui/icons-material");
 var import_material80 = require("@mui/material");
 var import_mui53 = require("tss-react/mui");
 var import_jsx_runtime137 = require("react/jsx-runtime");
@@ -9454,7 +9510,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
-      IconComponent: import_icons_material12.ImportExport,
+      IconComponent: import_icons_material10.ImportExport,
       onClick: () => handleSortClick(cell),
       children: cell.label
     }
@@ -9648,7 +9704,11 @@ var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
   topBar: {
     display: "flex",
     gap: theme.spacing(1),
-    backgroundColor: colors.topBar
+    backgroundColor: colors.topBar,
+    maxWidth: 2e3,
+    margin: "0 auto",
+    left: 0,
+    right: 0
   }
 }));
 var TheToolbar = ({