@natoora-libs/core 0.2.82 → 0.2.92-dev-doug-1

package/dist/{TableDesktop-CZe649rr.d.cts → TableDesktop-Z0KE59L4.d.cts}

@@ -32,7 +32,7 @@ type ExportCsvDialogProps = {
 };
 type BulkChangesDialogProps = {
     bulkChanges: BulkChanges;
-    selectedRows: (string | number)[];
+    selectedRows: RowId[];
     shouldUpdateAll: boolean;
     visibleEditableColumns: HeadCell[];
     isBulkChangesDialogOpen: boolean;
@@ -43,7 +43,7 @@ type TableDesktopToolbarProps = {
     toolbarLabel?: string;
     headCells: HeadCell[];
     headerFilters: HeaderFilters;
-    selectedRows: (string | number)[];
+    selectedRows: RowId[];
     isDataEmpty: boolean;
     totalDataCount?: number;
     isRowsFromAllPagesSelected: boolean;
@@ -73,11 +73,12 @@ type HeaderFilters = {
     [key: string]: HeaderFilterOptions;
 };
 type UpdateEditableCellParams = {
-    rowId?: number;
+    rowId?: RowId;
     columnId: string;
     value: string | number | boolean | (string | number)[] | null;
     label: string | number | boolean | (string | number)[] | null;
 };
+type RowId = string | number;
 type HeadCell = {
     id: string;
     label?: string;
@@ -122,7 +123,7 @@ type TableDesktopProps = {
     showClearFilterButton?: boolean;
     handleClickOnClearFiltersButton?: () => void;
     deleteItem?: (id: number, contentTypeName?: string, appTypeName?: string) => void;
-    keyField?: string;
+    keyField?: string | ((rowData: any) => string);
     tableLayout?: 'fixed' | 'auto';
     onApplyFilters?: (updatedFilters: HeaderFilters, shouldSave: boolean) => void;
     refetchData?: () => Promise<unknown>;
@@ -130,4 +131,4 @@ type TableDesktopProps = {
 };
 declare const TableDesktop: ({ data, headCells, RenderItem, renderToolbar, renderFooter, appliedFilters, headerFilters, children, height, rowHeight, rowsPerPage, totalDataCount, isLoading, enableEditMode, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, tableLayout, onApplyFilters, shouldShowCheckOnFilter, refetchData, }: TableDesktopProps) => react_jsx_runtime.JSX.Element;
 
-export { type BulkChanges as B, type EditableCellType as E, type HeadCell as H, type Order as O, type TableDesktopProps as T, type UpdateEditableCellParams as U, type HeaderFilters as a, type HeaderFilterOptions as b, type HeaderFilterObject as c, TableDesktop as d, TableDesktopFooter as e, type TableDesktopFooterProps as f, TableDesktopToolbar as g, type TableDesktopToolbarProps as h, type TableColumnConfigurationMenuProps as i, type BulkChangesDialogProps as j, type ExportCsvDialogProps as k };
+export { type BulkChanges as B, type EditableCellType as E, type HeadCell as H, type Order as O, type RowId as R, type TableDesktopProps as T, type UpdateEditableCellParams as U, type HeaderFilters as a, type HeaderFilterOptions as b, type HeaderFilterObject as c, TableDesktop as d, TableDesktopFooter as e, type TableDesktopFooterProps as f, TableDesktopToolbar as g, type TableDesktopToolbarProps as h, type TableColumnConfigurationMenuProps as i, type BulkChangesDialogProps as j, type ExportCsvDialogProps as k };

package/dist/{TableDesktop-CZe649rr.d.ts → TableDesktop-Z0KE59L4.d.ts}

@@ -32,7 +32,7 @@ type ExportCsvDialogProps = {
 };
 type BulkChangesDialogProps = {
     bulkChanges: BulkChanges;
-    selectedRows: (string | number)[];
+    selectedRows: RowId[];
     shouldUpdateAll: boolean;
     visibleEditableColumns: HeadCell[];
     isBulkChangesDialogOpen: boolean;
@@ -43,7 +43,7 @@ type TableDesktopToolbarProps = {
     toolbarLabel?: string;
     headCells: HeadCell[];
     headerFilters: HeaderFilters;
-    selectedRows: (string | number)[];
+    selectedRows: RowId[];
     isDataEmpty: boolean;
     totalDataCount?: number;
     isRowsFromAllPagesSelected: boolean;
@@ -73,11 +73,12 @@ type HeaderFilters = {
     [key: string]: HeaderFilterOptions;
 };
 type UpdateEditableCellParams = {
-    rowId?: number;
+    rowId?: RowId;
     columnId: string;
     value: string | number | boolean | (string | number)[] | null;
     label: string | number | boolean | (string | number)[] | null;
 };
+type RowId = string | number;
 type HeadCell = {
     id: string;
     label?: string;
@@ -122,7 +123,7 @@ type TableDesktopProps = {
     showClearFilterButton?: boolean;
     handleClickOnClearFiltersButton?: () => void;
     deleteItem?: (id: number, contentTypeName?: string, appTypeName?: string) => void;
-    keyField?: string;
+    keyField?: string | ((rowData: any) => string);
     tableLayout?: 'fixed' | 'auto';
     onApplyFilters?: (updatedFilters: HeaderFilters, shouldSave: boolean) => void;
     refetchData?: () => Promise<unknown>;
@@ -130,4 +131,4 @@ type TableDesktopProps = {
 };
 declare const TableDesktop: ({ data, headCells, RenderItem, renderToolbar, renderFooter, appliedFilters, headerFilters, children, height, rowHeight, rowsPerPage, totalDataCount, isLoading, enableEditMode, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, tableLayout, onApplyFilters, shouldShowCheckOnFilter, refetchData, }: TableDesktopProps) => react_jsx_runtime.JSX.Element;
 
-export { type BulkChanges as B, type EditableCellType as E, type HeadCell as H, type Order as O, type TableDesktopProps as T, type UpdateEditableCellParams as U, type HeaderFilters as a, type HeaderFilterOptions as b, type HeaderFilterObject as c, TableDesktop as d, TableDesktopFooter as e, type TableDesktopFooterProps as f, TableDesktopToolbar as g, type TableDesktopToolbarProps as h, type TableColumnConfigurationMenuProps as i, type BulkChangesDialogProps as j, type ExportCsvDialogProps as k };
+export { type BulkChanges as B, type EditableCellType as E, type HeadCell as H, type Order as O, type RowId as R, type TableDesktopProps as T, type UpdateEditableCellParams as U, type HeaderFilters as a, type HeaderFilterOptions as b, type HeaderFilterObject as c, TableDesktop as d, TableDesktopFooter as e, type TableDesktopFooterProps as f, TableDesktopToolbar as g, type TableDesktopToolbarProps as h, type TableColumnConfigurationMenuProps as i, type BulkChangesDialogProps as j, type ExportCsvDialogProps as k };

package/dist/components/index.cjs

@@ -3730,7 +3730,7 @@ var CheckboxFilterMenuContent = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material23.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material23.Divider, { sx: { mt: 0.5 } }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
       import_material23.Box,
       {
@@ -5955,15 +5955,15 @@ var useStyles35 = (0, import_mui37.makeStyles)()((theme) => ({
      * https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
      */
     "& input::-webkit-inner-spin-button": {
-      WebkitAppearance: "none",
+      "-webkit-appearance": "none",
       margin: 0
     },
     "& input::-webkit-outer-spin-button": {
-      WebkitAppearance: "none",
+      "-webkit-appearance": "none",
       margin: 0
     },
     "& input[type=number]": {
-      MozAppearance: "textfield"
+      "-moz-appearance": "textfield"
     }
   },
   formControlLabel: {
@@ -7311,6 +7311,7 @@ var SmartMultipleSelect = ({
   inputLabel,
   variant = "standard",
   size,
+  error,
   values,
   defaultValues,
   onChange,
@@ -7365,37 +7366,47 @@ var SmartMultipleSelect = ({
       option.value ?? index
     );
   }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.FormControl, { fullWidth: true, variant, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.InputLabel, { children: inputLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-      import_material62.Select,
-      {
-        multiple: true,
-        size,
-        disabled,
-        value: values ?? localValues,
-        defaultValue: defaultValues,
-        onOpen,
-        onClose: () => onClose?.(localValues),
-        renderValue: (selectedValues) => {
-          const valuesString = selectedValues.map((v) => v.label)?.join(", ");
-          return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
-        },
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-          import_material62.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+    import_material62.FormControl,
+    {
+      fullWidth: true,
+      variant,
+      size,
+      disabled,
+      error,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.InputLabel, { children: inputLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+          import_material62.Select,
           {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
+            multiple: true,
+            label: inputLabel,
+            error,
+            value: values ?? localValues,
+            defaultValue: defaultValues,
+            onOpen,
+            onClose: () => onClose?.(localValues),
+            renderValue: (selectedValues) => {
+              const valuesString = selectedValues.map((v) => v.label)?.join(", ");
+              return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.CircularProgress, { size: 24 })
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+              import_material62.Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.CircularProgress, { size: 24 })
+              }
+            ) : renderMenuContent()
           }
-        ) : renderMenuContent()
-      }
-    ),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.FormHelperText, { children: helperText })
-  ] });
+        ),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.FormHelperText, { children: helperText })
+      ]
+    }
+  );
 };
 
 // src/components/SmartSelect/SmartSelect.tsx
@@ -8204,7 +8215,7 @@ var TableDesktopRows = ({
   data,
   RenderItem,
   visibleHeadCells,
-  keyField,
+  getRowId,
   order,
   orderBy,
   disableInternalSort,
@@ -8217,7 +8228,8 @@ var TableDesktopRows = ({
 }) => {
   const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
   return sortedData.map((row, index) => {
-    const isItemSelected = selectedRows.has(row[keyField]);
+    const rowId = getRowId(row);
+    const isItemSelected = selectedRows.has(rowId);
     return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       RenderItem,
       {
@@ -8229,12 +8241,12 @@ var TableDesktopRows = ({
           enableEditMode,
           enableCheckboxSelection,
           rowHeight,
-          rowId: row[keyField],
+          rowId,
           onRowCheckboxChange,
           visibleHeadCells
         }
       },
-      row[keyField] ?? index
+      rowId ?? index
     );
   });
 };
@@ -8335,6 +8347,12 @@ var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
+var resolveKeyValue = (keyField, rowData) => {
+  if (typeof keyField === "string") {
+    return rowData[keyField];
+  }
+  return keyField?.(rowData);
+};
 var TableDesktop = ({
   data = [],
   headCells,
@@ -8367,14 +8385,14 @@ var TableDesktop = ({
   const [orderBy, setOrderBy] = (0, import_react41.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selectedRows, setSelectedRows] = (0, import_react41.useState)(
-    /* @__PURE__ */ new Set()
-  );
+  const [selectedRows, setSelectedRows] = (0, import_react41.useState)(/* @__PURE__ */ new Set());
   const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react41.useState)(false);
   const [isBulkChangesMode, setIsBulkChangesMode] = (0, import_react41.useState)(false);
   const numRows = data.length;
   const numSelectedRows = (0, import_react41.useMemo)(() => {
-    const currentPageIds = new Set(data.map((row) => row[keyField]));
+    const currentPageIds = new Set(
+      data.map((row) => resolveKeyValue(keyField, row))
+    );
     return [...selectedRows].filter((id) => currentPageIds.has(id)).length;
   }, [data, selectedRows, keyField]);
   const isEveryRowInPageSelected = numRows > 0 && numSelectedRows === numRows;
@@ -8395,7 +8413,9 @@ var TableDesktop = ({
     }
   };
   const selectAllRowsInPage = () => {
-    const allRowsIds = new Set(data.map((obj) => obj[keyField]));
+    const allRowsIds = new Set(
+      data.map((row) => resolveKeyValue(keyField, row))
+    );
     setSelectedRows(allRowsIds);
   };
   const resetSelectedRows = () => {
@@ -8474,7 +8494,7 @@ var TableDesktop = ({
         data,
         RenderItem,
         visibleHeadCells,
-        keyField,
+        getRowId: (rowData) => resolveKeyValue(keyField, rowData),
         order,
         orderBy,
         disableInternalSort,
@@ -8617,7 +8637,7 @@ var TableDesktopSmartMultipleSelect = ({
   onUpdateEditableCell
 }) => {
   const defaultValues = (0, import_react42.useMemo)(() => {
-    return initialValue.map((val) => ({
+    return initialValue?.map((val) => ({
       value: val.id,
       label: val[fieldName].toString()
     }));
@@ -8639,11 +8659,12 @@ var TableDesktopSmartMultipleSelect = ({
       },
       onClose: (values) => {
         const optionsValues = values.map((option) => option.value ?? "");
+        const optionsLabels = values.map((option) => option.label ?? "");
         onUpdateEditableCell?.({
           rowId,
           columnId,
           value: optionsValues,
-          label: optionsValues
+          label: optionsLabels
         });
       }
     }
@@ -8901,10 +8922,9 @@ var TableDesktopEditableField = ({
     date: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       import_x_date_pickers.DatePicker,
       {
-        defaultValue: (0, import_moment3.default)(editInitialValue),
+        defaultValue: editInitialValue ? (0, import_moment3.default)(editInitialValue, "HH:mm:ss") : void 0,
         label: inputLabel,
         format: "DD/MM/YYYY",
-        sx: { overflowY: "hidden" },
         onAccept: (value) => {
           const formattedValue = value?.format("YYYY-MM-DD") ?? null;
           const formattedLabel = value?.format("DD/MM/YYYY") ?? null;
@@ -8921,7 +8941,8 @@ var TableDesktopEditableField = ({
           clearButton: { sx: { p: 0.5 } },
           openPickerButton: { sx: { p: 0 } },
           textField: {
-            variant: "standard",
+            variant,
+            size,
             error: false
           }
         }
@@ -8930,9 +8951,8 @@ var TableDesktopEditableField = ({
     time: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       import_x_date_pickers.TimePicker,
       {
-        defaultValue: (0, import_moment3.default)(editInitialValue, "HH:mm:ss"),
+        defaultValue: editInitialValue ? (0, import_moment3.default)(editInitialValue, "HH:mm:ss") : void 0,
         label: inputLabel,
-        sx: { overflowY: "hidden" },
         onAccept: (value) => {
           const formattedValue = value?.format("HH:mm") ?? null;
           onUpdateEditableCell?.({
@@ -8948,7 +8968,8 @@ var TableDesktopEditableField = ({
           clearButton: { sx: { p: 0.5 } },
           openPickerButton: { sx: { p: 0 } },
           textField: {
-            variant: "standard",
+            variant,
+            size,
             error: false
           }
         }
@@ -8994,6 +9015,7 @@ var TableDesktopFooter = ({
             variant: "text",
             onClick: () => refetchData(),
             disabled: isFetching,
+            "aria-label": "refresh-button",
             sx: {
               ml: 1,
               gap: 1
@@ -9340,7 +9362,7 @@ var TableDesktopToolbar = ({
                 )
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material79.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                renderExportCsvDialog ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Tooltip, { title: "Download Customer List", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                renderExportCsvDialog ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Tooltip, { title: "Download List", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
                   import_material79.IconButton,
                   {
                     disableRipple: true,