@natoora-libs/core 0.1.14 → 0.1.16

package/dist/components/index.cjs

@@ -6910,7 +6910,7 @@ var SmartTableHeader = ({
             flexDirection: "row",
             gap: headCell.disableSort ? 1 : 0,
             children: [
-              headCell.disableSort ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+              headCell.disableSort ? headCell.RenderHeader ?? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
                 import_material58.TableSortLabel,
                 {
                   "data-testid": "table-sort-label",
@@ -6922,7 +6922,7 @@ var SmartTableHeader = ({
                     orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
                   ]
                 }
-              ),
+              ) }),
               headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 SmartTableHeaderFilterMenu_default,
                 {
@@ -7740,7 +7740,10 @@ var TableDesktopFooter = ({
 
 // src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
 var import_react38 = require("react");
-var import_material65 = require("@mui/material");
+var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
+var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
+var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
+var import_material66 = require("@mui/material");
 
 // src/components/TableDesktopRowCell/TableDesktopSmartSelect.tsx
 var import_react36 = require("react");
@@ -7798,12 +7801,9 @@ var TableDesktopSmartSelect = (0, import_react36.memo)(({
   );
 });
 
-// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
-var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
-
 // src/components/TableDesktopRowCell/TableDesktopTextField.tsx
-var import_TextField = __toESM(require("@mui/material/TextField"), 1);
 var import_react37 = require("react");
+var import_material65 = require("@mui/material");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var TableDesktopTextField = ({
   rowId,
@@ -7813,34 +7813,54 @@ var TableDesktopTextField = ({
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = (0, import_react37.useState)(editInitialValue);
-  const hasError = (0, import_react37.useMemo)(() => !validateInput?.(value), [value, validateInput]);
+  const [input, setInput] = (0, import_react37.useState)(editInitialValue);
+  const hasValidationError = (0, import_react37.useMemo)(() => !validateInput?.(input), [input, validateInput]);
+  const commitValue = (value) => {
+    if (hasValidationError) {
+      return;
+    }
+    onUpdateEditableCell?.(rowId, value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitValue(input);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-    import_TextField.default,
+    import_material65.TextField,
     {
       fullWidth: true,
       variant: "standard",
-      defaultValue: value,
+      value: input,
       label: inputLabel,
-      error: hasError,
+      error: hasValidationError,
       disabled,
-      onChange: ({ target: { value: value2 } }) => {
-        setValue(value2);
+      onKeyDown: handleKeyDown,
+      onChange: ({ target: { value } }) => {
+        setInput(value);
       },
-      onBlur: ({ target: { value: value2 } }) => {
-        if (hasError) {
-          return;
-        }
-        onUpdateEditableCell?.(rowId, value2);
+      onBlur: ({ target: { value } }) => {
+        commitValue(value);
       }
     }
   );
 };
 
 // src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
-var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
-var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
 var import_jsx_runtime119 = require("react/jsx-runtime");
+var getReadOnlyBooleanIcon = (value) => {
+  if (value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
+  }
+  return "-";
+};
+var renderReadOnlyValue = (value) => {
+  if (typeof value === "boolean") {
+    return getReadOnlyBooleanIcon(value);
+  }
+  return value;
+};
 var TableDesktopRowCell = ({
   inputLabel,
   editInitialValue,
@@ -7896,7 +7916,7 @@ var TableDesktopRowCell = ({
       }
     ),
     "checkbox": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material65.Checkbox,
+      import_material66.Checkbox,
       {
         disableRipple: true,
         disabled,
@@ -7918,7 +7938,7 @@ var TableDesktopRowCell = ({
       }
     ),
     "numeric": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material65.TextField,
+      import_material66.TextField,
       {
         fullWidth: true,
         variant: "standard",
@@ -7939,18 +7959,12 @@ var TableDesktopRowCell = ({
       }
     )
   };
-  const getReadOnlyBooleanIcon = (value) => {
-    if (value) {
-      return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
-    }
-    return "-";
-  };
   const handleEditClick = (e) => {
     e.stopPropagation();
     setIsEditMode((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material65.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_material65.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    import_material66.TableCell,
     {
       align: "left",
       onMouseEnter: () => editableCellType && !disabled && setIsCellHovered(true),
@@ -7968,7 +7982,7 @@ var TableDesktopRowCell = ({
         background: isEditMode ? colors.lightBlueBackground : (theme) => theme.palette.background.default
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-        import_material65.Box,
+        import_material66.Box,
         {
           p: 1,
           ref: cellRef,
@@ -7976,8 +7990,8 @@ var TableDesktopRowCell = ({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           children: [
-            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material65.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              import_material65.IconButton,
+            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              import_material66.IconButton,
               {
                 onClick: handleEditClick,
                 sx: {
@@ -7994,7 +8008,7 @@ var TableDesktopRowCell = ({
                 children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Edit.default, { fontSize: "small" })
               }
             ) }) : null,
-            isEditMode && editableCellType ? editableComponents[editableCellType] : typeof readOnlyValue === "boolean" ? getReadOnlyBooleanIcon(readOnlyValue) : readOnlyValue
+            isEditMode && editableCellType ? editableComponents[editableCellType] : renderReadOnlyValue(readOnlyValue)
           ]
         }
       )
@@ -8005,7 +8019,7 @@ var TableDesktopRowCell = ({
 // src/components/TableHeader/TableHeader.tsx
 var import_react39 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material66 = require("@mui/material");
+var import_material67 = require("@mui/material");
 var import_mui57 = require("tss-react/mui");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
@@ -8052,8 +8066,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material66.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material66.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material66.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-    import_material66.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    import_material67.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -8066,7 +8080,7 @@ var TableHeader = ({ cells, onSort = null }) => {
 var TableHeader_default = (0, import_react39.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material67 = require("@mui/material");
+var import_material68 = require("@mui/material");
 var import_mui58 = require("tss-react/mui");
 var import_jsx_runtime121 = require("react/jsx-runtime");
 var useStyles52 = (0, import_mui58.makeStyles)()(() => ({
@@ -8106,18 +8120,18 @@ var TextDivider = ({
   const { classes } = useStyles52();
   const iconColor = color ?? colors.neutral900;
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
-    import_material67.Box,
+    import_material68.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material67.Box, { className: classes.center, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.Box, { className: classes.center, children: [
           Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
           /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-            import_material67.Typography,
+            import_material68.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -8127,7 +8141,7 @@ var TextDivider = ({
           ),
           Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -8241,7 +8255,7 @@ var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
 var import_react40 = require("react");
-var import_material68 = require("@mui/material");
+var import_material69 = require("@mui/material");
 var import_mui60 = require("tss-react/mui");
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
@@ -8263,8 +8277,8 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles54();
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material68.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material68.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material68.Toolbar, { className: classes.topBar, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material69.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material69.Toolbar, { className: classes.topBar, children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         RoundButton_default,
         {
@@ -8283,8 +8297,8 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material68.Box, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material68.Box, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Box, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
@@ -8292,7 +8306,7 @@ var TheToolbar = ({
 var TheToolbar_default = (0, import_react40.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material69 = require("@mui/material");
+var import_material70 = require("@mui/material");
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
@@ -8300,14 +8314,14 @@ var ToastMessage = ({
   open,
   onClose
 }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-  import_material69.Snackbar,
+  import_material70.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
     children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material69.Alert,
+      import_material70.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -8333,7 +8347,7 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material70 = require("@mui/material");
+var import_material71 = require("@mui/material");
 var import_mui61 = require("tss-react/mui");
 var import_jsx_runtime125 = require("react/jsx-runtime");
 var useStyles55 = (0, import_mui61.makeStyles)()((theme) => ({
@@ -8366,19 +8380,19 @@ var TwoButtonDialog = ({
 }) => {
   const { classes } = useStyles55();
   return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    import_material70.Dialog,
+    import_material71.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material70.Backdrop,
+      BackdropComponent: import_material71.Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-            import_material70.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material71.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material71.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+            import_material71.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8387,21 +8401,21 @@ var TwoButtonDialog = ({
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
-            import_material70.Box,
+            import_material71.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Box, { className: classes.buttonContainer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material71.Box, { className: classes.buttonContainer, children: [
           /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
             FilledButton_default,
             {
@@ -8433,11 +8447,11 @@ var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
 var import_react41 = require("react");
-var import_material71 = require("@mui/material");
+var import_material72 = require("@mui/material");
 var import_jsx_runtime126 = require("react/jsx-runtime");
 var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
   /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-    import_material71.Avatar,
+    import_material72.Avatar,
     {
       src: user.profile_picture,
       alt: "user_avatar",
@@ -8445,8 +8459,8 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, i
     }
   ),
   /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Typography, { ...typographyProps.username, children: user.username })
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Typography, { ...typographyProps.username, children: user.username })
   ] })
 ] });
 var UserBust_default = (0, import_react41.memo)(UserBust);