@natoora-libs/core 0.2.39 → 0.2.40

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
@@ -15,9 +15,9 @@ import {
   __toESM
 } from "../chunk-5WRI5ZAA.js";
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isObject.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isObject.js
 var require_isObject = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isObject.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isObject.js"(exports, module) {
     function isObject(value) {
       var type = typeof value;
       return value != null && (type == "object" || type == "function");
@@ -26,17 +26,17 @@ var require_isObject = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_freeGlobal.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_freeGlobal.js
 var require_freeGlobal = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_freeGlobal.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_freeGlobal.js"(exports, module) {
     var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
     module.exports = freeGlobal;
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_root.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_root.js
 var require_root = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_root.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_root.js"(exports, module) {
     var freeGlobal = require_freeGlobal();
     var freeSelf = typeof self == "object" && self && self.Object === Object && self;
     var root = freeGlobal || freeSelf || Function("return this")();
@@ -44,9 +44,9 @@ var require_root = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/now.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/now.js
 var require_now = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/now.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/now.js"(exports, module) {
     var root = require_root();
     var now = function() {
       return root.Date.now();
@@ -55,9 +55,9 @@ var require_now = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_trimmedEndIndex.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_trimmedEndIndex.js
 var require_trimmedEndIndex = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_trimmedEndIndex.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_trimmedEndIndex.js"(exports, module) {
     var reWhitespace = /\s/;
     function trimmedEndIndex(string) {
       var index = string.length;
@@ -69,9 +69,9 @@ var require_trimmedEndIndex = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_baseTrim.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_baseTrim.js
 var require_baseTrim = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_baseTrim.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_baseTrim.js"(exports, module) {
     var trimmedEndIndex = require_trimmedEndIndex();
     var reTrimStart = /^\s+/;
     function baseTrim(string) {
@@ -81,18 +81,18 @@ var require_baseTrim = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_Symbol.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_Symbol.js
 var require_Symbol = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_Symbol.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_Symbol.js"(exports, module) {
     var root = require_root();
     var Symbol = root.Symbol;
     module.exports = Symbol;
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_getRawTag.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_getRawTag.js
 var require_getRawTag = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_getRawTag.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_getRawTag.js"(exports, module) {
     var Symbol = require_Symbol();
     var objectProto = Object.prototype;
     var hasOwnProperty = objectProto.hasOwnProperty;
@@ -119,9 +119,9 @@ var require_getRawTag = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_objectToString.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_objectToString.js
 var require_objectToString = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_objectToString.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_objectToString.js"(exports, module) {
     var objectProto = Object.prototype;
     var nativeObjectToString = objectProto.toString;
     function objectToString(value) {
@@ -131,9 +131,9 @@ var require_objectToString = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_baseGetTag.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_baseGetTag.js
 var require_baseGetTag = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_baseGetTag.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/_baseGetTag.js"(exports, module) {
     var Symbol = require_Symbol();
     var getRawTag = require_getRawTag();
     var objectToString = require_objectToString();
@@ -150,9 +150,9 @@ var require_baseGetTag = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isObjectLike.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isObjectLike.js
 var require_isObjectLike = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isObjectLike.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isObjectLike.js"(exports, module) {
     function isObjectLike(value) {
       return value != null && typeof value == "object";
     }
@@ -160,9 +160,9 @@ var require_isObjectLike = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isSymbol.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isSymbol.js
 var require_isSymbol = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isSymbol.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isSymbol.js"(exports, module) {
     var baseGetTag = require_baseGetTag();
     var isObjectLike = require_isObjectLike();
     var symbolTag = "[object Symbol]";
@@ -173,9 +173,9 @@ var require_isSymbol = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/toNumber.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/toNumber.js
 var require_toNumber = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/toNumber.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/toNumber.js"(exports, module) {
     var baseTrim = require_baseTrim();
     var isObject = require_isObject();
     var isSymbol = require_isSymbol();
@@ -206,9 +206,9 @@ var require_toNumber = __commonJS({
   }
 });
 
-// ../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/debounce.js
+// ../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/debounce.js
 var require_debounce = __commonJS({
-  "../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/debounce.js"(exports, module) {
+  "../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/debounce.js"(exports, module) {
     var isObject = require_isObject();
     var now = require_now();
     var toNumber = require_toNumber();
@@ -5757,8 +5757,14 @@ var FixedFooter_default = React4.memo(FixedFooter);
 
 // src/components/GlobalSearchTrigger/GlobalSearchTrigger.tsx
 import { memo as memo14 } from "react";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
-import { Box as Box29, InputBase, Paper as Paper3 } from "@mui/material";
+import {
+  Box as Box29,
+  IconButton as IconButton5,
+  InputBase,
+  Paper as Paper3
+} from "@mui/material";
 import { alpha as alpha2 } from "@mui/material/styles";
 import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
 var GlobalSearchTrigger = ({
@@ -5776,6 +5782,7 @@ var GlobalSearchTrigger = ({
   ref,
   inputRef
 }) => {
+  const showClearButton = !readOnly && value.length > 0;
   return /* @__PURE__ */ jsxs61(
     Paper3,
     {
@@ -5829,7 +5836,23 @@ var GlobalSearchTrigger = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx97(
+        showClearButton ? /* @__PURE__ */ jsx97(
+          IconButton5,
+          {
+            size: "small",
+            "aria-label": "Clear search",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => onChange?.(""),
+            sx: {
+              color: alpha2(colors.white, 0.72),
+              p: 0.25,
+              "&:hover": {
+                color: colors.white
+              }
+            },
+            children: /* @__PURE__ */ jsx97(CloseRoundedIcon, { sx: { fontSize: 18 } })
+          }
+        ) : /* @__PURE__ */ jsx97(
           Box29,
           {
             sx: {
@@ -8066,7 +8089,7 @@ var SearchHeader = ({
 // src/components/SectionName/SectionName.tsx
 import HistoryIcon from "@mui/icons-material/History";
 import InfoIcon from "@mui/icons-material/Info";
-import { Box as Box40, Divider as Divider10, IconButton as IconButton5, Tooltip as Tooltip10, Typography as Typography28 } from "@mui/material";
+import { Box as Box40, Divider as Divider10, IconButton as IconButton6, Tooltip as Tooltip10, Typography as Typography28 } from "@mui/material";
 import { makeStyles as makeStyles42 } from "tss-react/mui";
 import { jsx as jsx119, jsxs as jsxs82 } from "react/jsx-runtime";
 var useStyles42 = makeStyles42()((theme) => ({
@@ -8159,7 +8182,7 @@ var SectionName = ({
         }
       ) : null,
       openHistoryLog && buttonText && /* @__PURE__ */ jsx119(Divider10, { orientation: "vertical", sx: { height: "24px" } }),
-      openHistoryLog && /* @__PURE__ */ jsx119(IconButton5, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ jsx119(HistoryIcon, {}) })
+      openHistoryLog && /* @__PURE__ */ jsx119(IconButton6, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ jsx119(HistoryIcon, {}) })
     ] })
   ] });
 };
@@ -10013,7 +10036,7 @@ import { useEffect as useEffect16, useState as useState25 } from "react";
 import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
-import { IconButton as IconButton6, TableCell as TableCell6, Tooltip as Tooltip12 } from "@mui/material";
+import { IconButton as IconButton7, TableCell as TableCell6, Tooltip as Tooltip12 } from "@mui/material";
 import { Fragment as Fragment16, jsx as jsx140, jsxs as jsxs94 } from "react/jsx-runtime";
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
@@ -10077,7 +10100,7 @@ var TableDesktopCell = ({
       },
       children: /* @__PURE__ */ jsx140(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs94(Fragment16, { children: [
         enableEditMode && isCellHovered ? /* @__PURE__ */ jsx140(Tooltip12, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx140(
-          IconButton6,
+          IconButton7,
           {
             onClick: handleEditClick,
             sx: {
@@ -10123,7 +10146,7 @@ import {
   Button as Button19,
   Divider as Divider11,
   FormControlLabel as FormControlLabel7,
-  IconButton as IconButton7,
+  IconButton as IconButton8,
   Switch as Switch2,
   Tooltip as Tooltip13,
   Typography as Typography36
@@ -10243,7 +10266,7 @@ var TableDesktopToolbar = ({
                 }
               ),
               isScrollable && /* @__PURE__ */ jsx141(
-                IconButton7,
+                IconButton8,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
@@ -10294,7 +10317,7 @@ var TableDesktopToolbar = ({
                 }
               ),
               isScrollable && /* @__PURE__ */ jsx141(
-                IconButton7,
+                IconButton8,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
@@ -10330,7 +10353,7 @@ var TableDesktopToolbar = ({
               ] }) : /* @__PURE__ */ jsxs95(Box48, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
                 renderExportCsvDialog ? /* @__PURE__ */ jsx141(Tooltip13, { title: "Download List", children: /* @__PURE__ */ jsx141("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx141(
-                  IconButton7,
+                  IconButton8,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
@@ -10340,7 +10363,7 @@ var TableDesktopToolbar = ({
                   }
                 ) }) }) : null,
                 renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx141(Tooltip13, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx141(
-                  IconButton7,
+                  IconButton8,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
@@ -10627,7 +10650,10 @@ var useStyles49 = makeStyles49()((theme) => ({
   topBar: {
     display: "flex",
     gap: theme.spacing(1),
-    backgroundColor: colors.topBar
+    backgroundColor: colors.topBar,
+    [theme.breakpoints.down("xl")]: {
+      gap: theme.spacing(0.5)
+    }
   }
 }));
 var TheToolbar = ({
@@ -10652,7 +10678,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ) : null,
-      /* @__PURE__ */ jsx145(
+      /* @__PURE__ */ jsx145(Box50, { sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
         CompanyLogo_default,
         {
           size: "small",
@@ -10660,8 +10686,15 @@ var TheToolbar = ({
           imageLogoDarkSmall,
           imageLogoLightSmall
         }
+      ) }),
+      /* @__PURE__ */ jsx145(
+        Box50,
+        {
+          ml: { xs: 0, lg: 2 },
+          sx: { display: { xs: "none", xl: "block" }, flexShrink: 0 },
+          children: leftSection
+        }
       ),
-      /* @__PURE__ */ jsx145(Box50, { ml: 2, children: leftSection }),
       centerSection ? /* @__PURE__ */ jsx145(
         Box50,
         {
@@ -10674,7 +10707,7 @@ var TheToolbar = ({
           children: centerSection
         }
       ) : /* @__PURE__ */ jsx145(Box50, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx145(Box50, { children: rightSection })
+      /* @__PURE__ */ jsx145(Box50, { sx: { flexShrink: 0 }, children: rightSection })
     ] }) }),
     LeftDrawer
   ] });