@natoora-libs/core 0.1.9-dev-doug-4 → 0.1.9-dev-doug-6

package/dist/components/index.cjs

@@ -383,7 +383,7 @@ __export(components_exports, {
   Switch: () => Switch_default,
   Table: () => Table_default,
   TableDesktop: () => TableDesktop_default,
-  TableDesktopRowActions: () => TableDesktopRowActions,
+  TableDesktopFooter: () => TableDesktopFooter,
   TableDesktopRowCell: () => TableDesktopRowCell,
   TableDesktopSmartSelect: () => TableDesktopSmartSelect,
   TableEmptyResult: () => TableEmptyResult_default,
@@ -3082,7 +3082,7 @@ var RoundButton = ({
       onClick(e);
     }
   };
-  const Button14 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const Button15 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_material16.Fab,
     {
       className: cx(
@@ -3106,7 +3106,7 @@ var RoundButton = ({
       children: icon ? iconComponentMap[icon] : children || ""
     }
   );
-  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button14 }) : Button14;
+  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button15 }) : Button15;
 };
 var RoundButton_default = RoundButton;
 
@@ -7060,6 +7060,7 @@ var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
 var import_jsx_runtime111 = require("react/jsx-runtime");
+var ROW_HEIGHT = 56;
 var useStyles48 = (0, import_mui54.makeStyles)()((theme) => ({
   root: {
     justifyContent: "space-between",
@@ -7145,14 +7146,14 @@ var TableDesktop = ({
   onApplyFilters,
   shouldShowCheckOnFilter
 }) => {
+  const { classes } = useStyles48();
   const [order, setOrder] = (0, import_react33.useState)(appliedFilters?.sortDir || "desc");
   const [orderBy, setOrderBy] = (0, import_react33.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
   const [selected, setSelected] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
   const [page] = (0, import_react33.useState)(0);
-  const { classes } = useStyles48();
-  const rowHeight = 56;
+  const numRows = data.length;
   const emptyRows = (0, import_react33.useMemo)(
     () => rowsPerPage - data.length,
     [rowsPerPage, data]
@@ -7198,6 +7199,18 @@ var TableDesktop = ({
   );
   const renderTableRows = (0, import_react33.useMemo)(() => {
     const sortedData = disableInternalSort ? data : stableSort(data, getComparator(order, orderBy));
+    if (isLoading) {
+      return [...Array(Math.min(numRows, rowsPerPage))].map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        import_material60.Skeleton,
+        {
+          animation: "pulse",
+          variant: "rounded",
+          height: ROW_HEIGHT - 33,
+          sx: { bgcolor: colors.neutral150 },
+          "data-testid": "loading-skeleton"
+        }
+      ) }, cellIndex)) }, rowIndex));
+    }
     return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
       const isItemSelected = selected.has(row[keyField]);
       return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
@@ -7209,8 +7222,8 @@ var TableDesktop = ({
             deleteItem,
             isItemSelected,
             enableCheckboxSelection,
-            enableRowActions,
-            keyFieldValue: row[keyField],
+            rowHeight: ROW_HEIGHT,
+            rowId: row[keyField],
             handleRowCheckboxChange,
             visibleHeadCells
           }
@@ -7240,17 +7253,7 @@ var TableDesktop = ({
     }
   }, [enableCheckboxSelection]);
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material60.Paper, { className: classes.paper, children: [
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Box, { width: "100%", overflow: "hidden", children: [...Array(Math.floor(rowsPerPage ?? 50))].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-      import_material60.Skeleton,
-      {
-        animation: "pulse",
-        variant: "rounded",
-        sx: { margin: 1 },
-        height: rowHeight,
-        "data-testid": "loading-skeleton"
-      },
-      index
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
       import_material60.Table,
       {
         stickyHeader: true,
@@ -7265,7 +7268,7 @@ var TableDesktop = ({
               order,
               orderBy,
               numSelected: selected.size,
-              numRows: data.length,
+              numRows,
               enableCheckboxSelection,
               headerFilters: headerFilters ?? {},
               onRequestSort: handleRequestSort,
@@ -7693,41 +7696,84 @@ var Table2 = ({
 };
 var Table_default = Table2;
 
-// src/components/TableDesktopRowActions/TableDesktopRowActions.tsx
+// src/components/TableDesktopFooter/TableDesktopFooter.tsx
+var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
 var import_material64 = require("@mui/material");
 var import_jsx_runtime115 = require("react/jsx-runtime");
-var TableDesktopRowActions = ({
-  isRowHovered,
-  children,
-  sx,
-  zIndex = 1,
-  backgroundColor
+var TableDesktopFooter = ({
+  numPages,
+  page,
+  pageSize,
+  pageSizeOptions,
+  handlePageChange,
+  handlePageSizeChange,
+  refetch,
+  isFetching
 }) => {
-  return isRowHovered ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-    import_material64.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+    import_material64.Box,
     {
-      padding: "none",
-      sx: {
-        top: 0,
-        right: 0,
-        zIndex,
-        position: "sticky",
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-        import_material64.Box,
-        {
-          sx,
-          display: "flex",
-          flexDirection: "row",
-          bgcolor: backgroundColor ?? colors.neutral100,
-          children
-        }
-      )
+      py: 1,
+      gap: 2,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      borderTop: `1px solid ${colors.neutral300}`,
+      bgcolor: (theme) => theme.palette.background.default,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+          import_material64.Button,
+          {
+            disableRipple: true,
+            variant: "outlined",
+            onClick: () => refetch(),
+            disabled: isFetching,
+            sx: {
+              ml: 1,
+              gap: 1,
+              borderRadius: 25,
+              color: colors.neutral800,
+              borderColor: colors.neutral600
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                import_Refresh.default,
+                {
+                  fontSize: "small",
+                  color: isFetching ? "disabled" : "primary"
+                }
+              ),
+              "REFRESH"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material64.Box, { display: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material64.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+              import_material64.Select,
+              {
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                size: "small",
+                variant: "standard",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.MenuItem, { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            import_material64.Pagination,
+            {
+              color: "standard",
+              count: numPages,
+              page,
+              onChange: handlePageChange
+            }
+          )
+        ] })
+      ]
     }
-  ) : null;
+  );
 };
 
 // src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
@@ -7749,6 +7795,7 @@ var TableDesktopSmartSelect = (0, import_react36.memo)(({
   inputLabel,
   fieldName,
   rowId,
+  disabled,
   filterOptions,
   refetchFilterOptions,
   isFetchingFilterOptions,
@@ -7774,6 +7821,7 @@ var TableDesktopSmartSelect = (0, import_react36.memo)(({
       value: valueId,
       inputLabel,
       options,
+      disabled,
       refetch: refetchFilterOptions,
       isFetching: isFetchingFilterOptions,
       defaultOption: {
@@ -7799,11 +7847,12 @@ var TableDesktopTextField = ({
   rowId,
   editInitialValue,
   inputLabel,
+  disabled,
   validateInput,
   onUpdateEditableCell
 }) => {
   const [value, setValue] = (0, import_react37.useState)(editInitialValue);
-  const hasError = (0, import_react37.useMemo)(() => validateInput?.(value), [value, validateInput]);
+  const hasError = (0, import_react37.useMemo)(() => !validateInput?.(value), [value, validateInput]);
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     import_TextField.default,
     {
@@ -7812,6 +7861,7 @@ var TableDesktopTextField = ({
       defaultValue: value,
       label: inputLabel,
       error: hasError,
+      disabled,
       onChange: ({ target: { value: value2 } }) => {
         setValue(value2);
       },
@@ -7826,38 +7876,55 @@ var TableDesktopTextField = ({
 };
 
 // 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_runtime118 = require("react/jsx-runtime");
 var TableDesktopRowCell = ({
-  ref,
   inputLabel,
   editInitialValue,
   rowId,
   fieldName,
   width,
-  isEditMode,
+  disabled,
   readOnlyValue,
   editableCellType,
   filterOptions,
   refetchFilterOptions,
   isFetchingFilterOptions,
   validateInput,
-  onUpdateEditableCell
+  onUpdateEditableCell,
+  onCellClick
 }) => {
   const cellRef = (0, import_react38.useRef)(null);
   const [isOverflowed, setIsOverflowed] = (0, import_react38.useState)(false);
+  const [isCellHovered, setIsCellHovered] = (0, import_react38.useState)(false);
+  const [isEditMode, setIsEditMode] = (0, import_react38.useState)(false);
   (0, import_react38.useEffect)(() => {
-    const ref2 = cellRef.current;
-    if (ref2) {
-      setIsOverflowed(ref2.scrollWidth > ref2.clientWidth);
+    const ref = cellRef.current;
+    if (ref) {
+      setIsOverflowed(ref.scrollWidth > ref.clientWidth);
     }
   }, [readOnlyValue, width]);
+  (0, import_react38.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsEditMode(false);
+      }
+    };
+    if (isEditMode) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isEditMode]);
   const editableComponents = {
     "select": /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
       TableDesktopSmartSelect,
       {
-        ref,
         rowId,
         fieldName,
+        disabled,
         initialValue: editInitialValue,
         inputLabel: inputLabel ?? "",
         filterOptions,
@@ -7870,6 +7937,7 @@ var TableDesktopRowCell = ({
       import_material65.Checkbox,
       {
         disableRipple: true,
+        disabled,
         defaultChecked: editInitialValue,
         onChange: ({ target: { checked } }) => {
           onUpdateEditableCell?.(rowId, checked);
@@ -7880,6 +7948,7 @@ var TableDesktopRowCell = ({
       TableDesktopTextField,
       {
         rowId,
+        disabled,
         editInitialValue,
         inputLabel: inputLabel ?? "",
         validateInput,
@@ -7891,6 +7960,7 @@ var TableDesktopRowCell = ({
       {
         fullWidth: true,
         variant: "standard",
+        disabled,
         defaultValue: editInitialValue,
         label: inputLabel,
         onChange: (e) => {
@@ -7913,18 +7983,49 @@ var TableDesktopRowCell = ({
     }
     return "-";
   };
+  const handleEditClick = (e) => {
+    e.stopPropagation();
+    setIsEditMode((prev) => !prev);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
     import_material65.TableCell,
     {
       ref: cellRef,
       align: "left",
+      onMouseEnter: () => editableCellType && !disabled && setIsCellHovered(true),
+      onMouseLeave: () => editableCellType && !disabled && setIsCellHovered(false),
+      onClick: (event) => !disabled && onCellClick?.(event, isEditMode),
       sx: {
+        padding: 1,
         width: width ?? "auto",
         overflow: "hidden",
         textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
+        whiteSpace: "nowrap",
+        position: "relative",
+        cursor: disabled ? "default" : "pointer",
+        opacity: disabled ? 0.2 : 1,
+        ":hover": editableCellType && {
+          background: isEditMode ? colors.lightBlueBackground : colors.neutral100
+        },
+        background: isEditMode ? colors.lightBlueBackground : (theme) => theme.palette.background.default
       },
-      children: isEditMode && editableCellType ? editableComponents[editableCellType] : typeof readOnlyValue === "boolean" ? getReadOnlyBooleanIcon(readOnlyValue) : readOnlyValue
+      children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Box, { p: 1, children: [
+        isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Tooltip, { title: "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          import_material65.IconButton,
+          {
+            onClick: handleEditClick,
+            sx: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              zIndex: 1,
+              borderRadius: 0
+            },
+            children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_Edit.default, { fontSize: "small" })
+          }
+        ) }) : null,
+        isEditMode && editableCellType ? editableComponents[editableCellType] : typeof readOnlyValue === "boolean" ? getReadOnlyBooleanIcon(readOnlyValue) : readOnlyValue
+      ] })
     }
   ) });
 };
@@ -8470,7 +8571,7 @@ var IconChart_default = SvgIconChart;
   Switch,
   Table,
   TableDesktop,
-  TableDesktopRowActions,
+  TableDesktopFooter,
   TableDesktopRowCell,
   TableDesktopSmartSelect,
   TableEmptyResult,