@natoora-libs/core 0.1.16-dev-doug-6 → 0.1.16-dev-doug-8

package/dist/components/index.js

@@ -7276,10 +7276,32 @@ var TableDesktopFooter = ({
   );
 };
 
+// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
+import { Skeleton as Skeleton4, TableCell as TableCell3, TableRow as TableRow3 } from "@mui/material";
+import { jsx as jsx114 } from "react/jsx-runtime";
+var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
+var TableDesktopLoadingState = ({
+  numRows,
+  rowsPerPage,
+  numColumns,
+  rowHeight
+}) => {
+  return getRange(Math.min(numRows, rowsPerPage)).map((rowNum) => /* @__PURE__ */ jsx114(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx114(TableCell3, { children: /* @__PURE__ */ jsx114(
+    Skeleton4,
+    {
+      animation: "pulse",
+      variant: "rounded",
+      height: rowHeight - 33,
+      sx: { bgcolor: colors.neutral100 },
+      "data-testid": "loading-skeleton"
+    }
+  ) }, colNum)) }, rowNum));
+};
+
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
 import TableBody2 from "@mui/material/TableBody";
-import TableCell3 from "@mui/material/TableCell";
-import TableRow3 from "@mui/material/TableRow";
+import TableCell4 from "@mui/material/TableCell";
+import TableRow4 from "@mui/material/TableRow";
 import Typography27 from "@mui/material/Typography";
 
 // src/components/Buttons/BaseButton/BaseIconButton.tsx
@@ -7307,11 +7329,11 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-import { jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs78 } from "react/jsx-runtime";
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__PURE__ */ jsx114(TableBody2, { children: /* @__PURE__ */ jsx114(TableRow3, { children: /* @__PURE__ */ jsxs78(
-  TableCell3,
+}) => /* @__PURE__ */ jsx115(TableBody2, { children: /* @__PURE__ */ jsx115(TableRow4, { children: /* @__PURE__ */ jsxs78(
+  TableCell4,
   {
     sx: {
       py: 8,
@@ -7323,8 +7345,8 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ jsx114(Typography27, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ jsx114(Typography27, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ jsx115(Typography27, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ jsx115(Typography27, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
       /* @__PURE__ */ jsxs78(
         Typography27,
         {
@@ -7338,18 +7360,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ jsx114(Typography27, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ jsx115(Typography27, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ jsx114(
+      /* @__PURE__ */ jsx115(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ jsx114(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ jsx115(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -7357,28 +7379,6 @@ var TableDesktopNoColumnsMessage = ({
   }
 ) }) });
 
-// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
-import { Skeleton as Skeleton4, TableCell as TableCell4, TableRow as TableRow4 } from "@mui/material";
-import { jsx as jsx115 } from "react/jsx-runtime";
-var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
-var TableDesktopLoadingState = ({
-  numRows,
-  rowsPerPage,
-  numColumns,
-  rowHeight
-}) => {
-  return getRange(Math.min(numRows, rowsPerPage)).map((rowNum) => /* @__PURE__ */ jsx115(TableRow4, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx115(TableCell4, { children: /* @__PURE__ */ jsx115(
-    Skeleton4,
-    {
-      animation: "pulse",
-      variant: "rounded",
-      height: rowHeight - 33,
-      sx: { bgcolor: colors.neutral100 },
-      "data-testid": "loading-skeleton"
-    }
-  ) }, colNum)) }, rowNum));
-};
-
 // src/components/TableDesktopRows/TableDesktopRows.tsx
 import { jsx as jsx116 } from "react/jsx-runtime";
 var descendingComparator2 = (a, b, orderBy) => {
@@ -7415,8 +7415,6 @@ var TableDesktopRows = ({
   keyField,
   order,
   orderBy,
-  rowsPerPage,
-  isLoading,
   disableInternalSort,
   enableCheckboxSelection,
   enableEditMode,
@@ -7426,17 +7424,6 @@ var TableDesktopRows = ({
   deleteItem
 }) => {
   const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
-  if (isLoading) {
-    return /* @__PURE__ */ jsx116(
-      TableDesktopLoadingState,
-      {
-        numRows: data.length,
-        rowsPerPage,
-        numColumns: visibleHeadCells.length + (enableCheckboxSelection ? 1 : 0),
-        rowHeight
-      }
-    );
-  }
   return sortedData.map((row, index) => {
     const isItemSelected = selectedRows.has(row[keyField]);
     return /* @__PURE__ */ jsx116(
@@ -7557,7 +7544,7 @@ var TableEmptyResult_default = TableEmptyResult;
 // src/components/TableDesktop/TableDesktop.tsx
 import { Fragment as Fragment12, jsx as jsx119, jsxs as jsxs81 } from "react/jsx-runtime";
 var TableDesktop = ({
-  data,
+  data = [],
   headCells,
   RenderItem,
   appliedFilters,
@@ -7674,6 +7661,53 @@ var TableDesktop = ({
       );
     }
   }, [data, setSelectedRows, isEveryRowInPageSelected, isRowsFromAllPagesSelected]);
+  const renderBody = useMemo3(
+    () => rowsPerPage !== emptyRows ? /* @__PURE__ */ jsx119(
+      TableDesktopRows,
+      {
+        data,
+        RenderItem,
+        visibleHeadCells,
+        keyField,
+        order,
+        orderBy,
+        disableInternalSort,
+        enableCheckboxSelection,
+        enableEditMode,
+        selectedRows,
+        handleRowCheckboxChange,
+        rowHeight,
+        deleteItem
+      }
+    ) : /* @__PURE__ */ jsx119(
+      TableEmptyResult_default,
+      {
+        colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+        showClearFilterButton,
+        handleClickOnClearFiltersButton
+      }
+    ),
+    [
+      rowsPerPage,
+      emptyRows,
+      data,
+      RenderItem,
+      visibleHeadCells,
+      keyField,
+      order,
+      orderBy,
+      isLoading,
+      disableInternalSort,
+      enableCheckboxSelection,
+      enableEditMode,
+      selectedRows,
+      handleRowCheckboxChange,
+      rowHeight,
+      deleteItem,
+      showClearFilterButton,
+      handleClickOnClearFiltersButton
+    ]
+  );
   return /* @__PURE__ */ jsx119(
     Box34,
     {
@@ -7740,7 +7774,7 @@ var TableDesktop = ({
                     stickyHeader: true,
                     "aria-label": "sticky-table",
                     sx: { tableLayout },
-                    children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx119(
+                    children: visibleHeadCells.length === 0 && !isLoading ? /* @__PURE__ */ jsx119(
                       TableDesktopNoColumnsMessage,
                       {
                         onClickNoColumnsMessageOpenMenu: toolbarProps?.onClickToolbarMenuOpen
@@ -7762,31 +7796,13 @@ var TableDesktop = ({
                           shouldShowCheckOnFilter
                         }
                       ),
-                      /* @__PURE__ */ jsx119(TableBody3, { children: rowsPerPage !== emptyRows ? /* @__PURE__ */ jsx119(
-                        TableDesktopRows,
+                      /* @__PURE__ */ jsx119(TableBody3, { children: !isLoading ? renderBody : /* @__PURE__ */ jsx119(
+                        TableDesktopLoadingState,
                         {
-                          data,
-                          RenderItem,
-                          visibleHeadCells,
-                          keyField,
-                          order,
-                          orderBy,
+                          numRows: data.length,
                           rowsPerPage,
-                          isLoading,
-                          disableInternalSort,
-                          enableCheckboxSelection,
-                          enableEditMode,
-                          selectedRows,
-                          handleRowCheckboxChange,
-                          rowHeight,
-                          deleteItem
-                        }
-                      ) : /* @__PURE__ */ jsx119(
-                        TableEmptyResult_default,
-                        {
-                          colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
-                          showClearFilterButton,
-                          handleClickOnClearFiltersButton
+                          numColumns: visibleHeadCells.length + (enableCheckboxSelection ? 1 : 0),
+                          rowHeight
                         }
                       ) })
                     ] })
@@ -7807,7 +7823,7 @@ var TableDesktop = ({
 import { Checkbox as Checkbox6, FormControlLabel as FormControlLabel4 } from "@mui/material";
 
 // src/components/TableDesktopEditableComponent/TableDesktopNumericField.tsx
-import { useState as useState18 } from "react";
+import { useState as useState18, useRef as useRef5, useMemo as useMemo4 } from "react";
 import { TextField as TextField8 } from "@mui/material";
 import { jsx as jsx120 } from "react/jsx-runtime";
 var TableDesktopNumericField = ({
@@ -7818,14 +7834,18 @@ var TableDesktopNumericField = ({
   field,
   variant = "standard",
   size,
+  validateInput,
   onUpdateEditableCell
 }) => {
   const [input, setInput] = useState18(initialValue);
+  const oldValue = useRef5(initialValue);
+  const isDirty = useMemo4(() => input !== oldValue.current, [input, oldValue.current]);
+  const hasValidationError = useMemo4(() => isDirty && !validateInput?.(input), [input, validateInput, isDirty]);
   const commitValue = (value) => {
-    const isDirty = value !== initialValue;
-    if (!onUpdateEditableCell || !isDirty) {
+    if (hasValidationError || !onUpdateEditableCell || !isDirty) {
       return;
     }
+    oldValue.current = value;
     onUpdateEditableCell(rowId ?? 0, field, value, value);
   };
   const handleKeyDown = (e) => {
@@ -7843,6 +7863,7 @@ var TableDesktopNumericField = ({
       value: input,
       disabled,
       label: inputLabel,
+      error: hasValidationError,
       onKeyDown: handleKeyDown,
       onChange: (e) => {
         e.target.value = e.target.value.replace(/\D/g, "");
@@ -7934,7 +7955,7 @@ var TableDesktopSmartSelect = memo22(({
 });
 
 // src/components/TableDesktopEditableComponent/TableDesktopTextField.tsx
-import { useMemo as useMemo4, useState as useState20 } from "react";
+import { useMemo as useMemo5, useState as useState20, useRef as useRef6 } from "react";
 import { TextField as TextField9 } from "@mui/material";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
@@ -7949,12 +7970,14 @@ var TableDesktopTextField = ({
   onUpdateEditableCell
 }) => {
   const [input, setInput] = useState20(initialValue);
-  const hasValidationError = useMemo4(() => !validateInput?.(input), [input, validateInput]);
+  const oldValue = useRef6(initialValue);
+  const isDirty = useMemo5(() => input !== oldValue.current, [input, oldValue.current]);
+  const hasValidationError = useMemo5(() => isDirty && !validateInput?.(input), [input, validateInput]);
   const commitValue = (value) => {
-    const isDirty = value !== initialValue;
     if (hasValidationError || !onUpdateEditableCell || !isDirty) {
       return;
     }
+    oldValue.current = value;
     onUpdateEditableCell(rowId ?? 0, field, value, value);
   };
   const handleKeyDown = (e) => {
@@ -8065,6 +8088,7 @@ var TableDesktopEditableComponent = ({
         field,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
+        validateInput,
         onUpdateEditableCell
       }
     )
@@ -8073,7 +8097,7 @@ var TableDesktopEditableComponent = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-import { useEffect as useEffect13, useRef as useRef5, useState as useState21 } from "react";
+import { useEffect as useEffect13, useRef as useRef7, useState as useState21 } from "react";
 import CheckIcon2 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
@@ -8112,7 +8136,7 @@ var TableDesktopCell = ({
   onUpdateEditableCell,
   onCellClick
 }) => {
-  const cellRef = useRef5(null);
+  const cellRef = useRef7(null);
   const [isOverflowed, setIsOverflowed] = useState21(false);
   const [isCellHovered, setIsCellHovered] = useState21(false);
   const [isCellInEditMode, setIsCellInEditMode] = useState21(false);