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

package/dist/components/index.cjs

@@ -7449,6 +7449,28 @@ var TableDesktopFooter = ({
   );
 };
 
+// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
+var import_material63 = require("@mui/material");
+var import_jsx_runtime115 = require("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__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    import_material63.Skeleton,
+    {
+      animation: "pulse",
+      variant: "rounded",
+      height: rowHeight - 33,
+      sx: { bgcolor: colors.neutral100 },
+      "data-testid": "loading-skeleton"
+    }
+  ) }, colNum)) }, rowNum));
+};
+
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
 var import_TableBody = __toESM(require("@mui/material/TableBody"), 1);
 var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
@@ -7456,11 +7478,11 @@ var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
 var import_Typography = __toESM(require("@mui/material/Typography"), 1);
 
 // src/components/Buttons/BaseButton/BaseIconButton.tsx
-var import_material63 = require("@mui/material");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_material64 = require("@mui/material");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var BaseIconButton = ({ icon, sx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
-    import_material63.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+    import_material64.Button,
     {
       sx: {
         display: "flex",
@@ -7480,10 +7502,10 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
   import_TableCell.default,
   {
     sx: {
@@ -7496,9 +7518,9 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
-      /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
         import_Typography.default,
         {
           variant: "subtitle1",
@@ -7511,18 +7533,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -7530,28 +7552,6 @@ var TableDesktopNoColumnsMessage = ({
   }
 ) }) });
 
-// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
-var import_material64 = require("@mui/material");
-var import_jsx_runtime117 = require("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__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    import_material64.Skeleton,
-    {
-      animation: "pulse",
-      variant: "rounded",
-      height: rowHeight - 33,
-      sx: { bgcolor: colors.neutral100 },
-      "data-testid": "loading-skeleton"
-    }
-  ) }, colNum)) }, rowNum));
-};
-
 // src/components/TableDesktopRows/TableDesktopRows.tsx
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var descendingComparator2 = (a, b, orderBy) => {
@@ -7588,8 +7588,6 @@ var TableDesktopRows = ({
   keyField,
   order,
   orderBy,
-  rowsPerPage,
-  isLoading,
   disableInternalSort,
   enableCheckboxSelection,
   enableEditMode,
@@ -7599,17 +7597,6 @@ var TableDesktopRows = ({
   deleteItem
 }) => {
   const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
-  if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-      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__ */ (0, import_jsx_runtime118.jsx)(
@@ -7730,7 +7717,7 @@ var TableEmptyResult_default = TableEmptyResult;
 // src/components/TableDesktop/TableDesktop.tsx
 var import_jsx_runtime121 = require("react/jsx-runtime");
 var TableDesktop = ({
-  data,
+  data = [],
   headCells,
   RenderItem,
   appliedFilters,
@@ -7847,6 +7834,53 @@ var TableDesktop = ({
       );
     }
   }, [data, setSelectedRows, isEveryRowInPageSelected, isRowsFromAllPagesSelected]);
+  const renderBody = (0, import_react35.useMemo)(
+    () => rowsPerPage !== emptyRows ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      TableDesktopRows,
+      {
+        data,
+        RenderItem,
+        visibleHeadCells,
+        keyField,
+        order,
+        orderBy,
+        disableInternalSort,
+        enableCheckboxSelection,
+        enableEditMode,
+        selectedRows,
+        handleRowCheckboxChange,
+        rowHeight,
+        deleteItem
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      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__ */ (0, import_jsx_runtime121.jsx)(
     import_material67.Box,
     {
@@ -7913,7 +7947,7 @@ var TableDesktop = ({
                     stickyHeader: true,
                     "aria-label": "sticky-table",
                     sx: { tableLayout },
-                    children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                    children: visibleHeadCells.length === 0 && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                       TableDesktopNoColumnsMessage,
                       {
                         onClickNoColumnsMessageOpenMenu: toolbarProps?.onClickToolbarMenuOpen
@@ -7935,31 +7969,13 @@ var TableDesktop = ({
                           shouldShowCheckOnFilter
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.TableBody, { children: rowsPerPage !== emptyRows ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                        TableDesktopRows,
+                      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.TableBody, { children: !isLoading ? renderBody : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                        TableDesktopLoadingState,
                         {
-                          data,
-                          RenderItem,
-                          visibleHeadCells,
-                          keyField,
-                          order,
-                          orderBy,
+                          numRows: data.length,
                           rowsPerPage,
-                          isLoading,
-                          disableInternalSort,
-                          enableCheckboxSelection,
-                          enableEditMode,
-                          selectedRows,
-                          handleRowCheckboxChange,
-                          rowHeight,
-                          deleteItem
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                        TableEmptyResult_default,
-                        {
-                          colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
-                          showClearFilterButton,
-                          handleClickOnClearFiltersButton
+                          numColumns: visibleHeadCells.length + (enableCheckboxSelection ? 1 : 0),
+                          rowHeight
                         }
                       ) })
                     ] })
@@ -7991,14 +8007,18 @@ var TableDesktopNumericField = ({
   field,
   variant = "standard",
   size,
+  validateInput,
   onUpdateEditableCell
 }) => {
   const [input, setInput] = (0, import_react36.useState)(initialValue);
+  const oldValue = (0, import_react36.useRef)(initialValue);
+  const isDirty = (0, import_react36.useMemo)(() => input !== oldValue.current, [input, oldValue.current]);
+  const hasValidationError = (0, import_react36.useMemo)(() => 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) => {
@@ -8016,6 +8036,7 @@ var TableDesktopNumericField = ({
       value: input,
       disabled,
       label: inputLabel,
+      error: hasValidationError,
       onKeyDown: handleKeyDown,
       onChange: (e) => {
         e.target.value = e.target.value.replace(/\D/g, "");
@@ -8122,12 +8143,14 @@ var TableDesktopTextField = ({
   onUpdateEditableCell
 }) => {
   const [input, setInput] = (0, import_react38.useState)(initialValue);
-  const hasValidationError = (0, import_react38.useMemo)(() => !validateInput?.(input), [input, validateInput]);
+  const oldValue = (0, import_react38.useRef)(initialValue);
+  const isDirty = (0, import_react38.useMemo)(() => input !== oldValue.current, [input, oldValue.current]);
+  const hasValidationError = (0, import_react38.useMemo)(() => 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) => {
@@ -8238,6 +8261,7 @@ var TableDesktopEditableComponent = ({
         field,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
+        validateInput,
         onUpdateEditableCell
       }
     )