@comet/admin 8.0.0-beta.0 → 8.0.0-beta.2

package/lib/theme/componentsTheme/MuiDataGrid.js

@@ -7,6 +7,8 @@ exports.getMuiDataGrid = void 0;
 var _adminIcons = require("@comet/admin-icons");
 var _material = require("@mui/material");
 var _xDataGrid = require("@mui/x-data-grid");
+var _reactIntl = require("react-intl");
+var _DataGridPanel = require("../../dataGrid/DataGridPanel");
 var _mergeOverrideStyles = require("../utils/mergeOverrideStyles");
 var _jsxRuntime = require("react/jsx-runtime");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -15,14 +17,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var getDensityHeightValue = function getDensityHeightValue(density, spacing) {
+var getDensityHeightValue = function getDensityHeightValue(density) {
   switch (density) {
     case "compact":
-      return spacing(8);
+      return 40;
     case "comfortable":
-      return spacing(16);
+      return 80;
     default:
-      return spacing(12);
+      return 60;
   }
 };
 var filtersLeftSectionWidth = 120;
@@ -30,7 +32,7 @@ var filterDeleteIconSize = 32;
 var filterLeftSectionGap = 5;
 var filterOperatorInputWidth = filtersLeftSectionWidth - filterDeleteIconSize - filterLeftSectionGap;
 var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component, _ref) {
-  var _component$defaultPro, _component$defaultPro2, _component$defaultPro3, _component$defaultPro4;
+  var _component$defaultPro, _component$defaultPro2, _component$defaultPro3, _component$defaultPro4, _component$defaultPro5;
   var palette = _ref.palette,
     shadows = _ref.shadows,
     spacing = _ref.spacing,
@@ -38,30 +40,34 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
   return _objectSpread(_objectSpread({}, component), {}, {
     defaultProps: _objectSpread(_objectSpread({}, component === null || component === void 0 ? void 0 : component.defaultProps), {}, {
       disableRowSelectionOnClick: true,
+      getRowHeight: function getRowHeight(_ref2) {
+        var densityFactor = _ref2.densityFactor;
+        if (densityFactor === _xDataGrid.COMPACT_DENSITY_FACTOR) {
+          return getDensityHeightValue("compact");
+        }
+        if (densityFactor === _xDataGrid.COMFORTABLE_DENSITY_FACTOR) {
+          return getDensityHeightValue("comfortable");
+        }
+        return getDensityHeightValue("standard");
+      },
       slots: _objectSpread({
-        QuickFilterIcon: _adminIcons.Search,
-        QuickFilterClearIcon: _adminIcons.Clear,
-        FilterPanelDeleteIcon: function FilterPanelDeleteIcon(props) {
+        quickFilterIcon: _adminIcons.Search,
+        quickFilterClearIcon: _adminIcons.Clear,
+        filterPanelDeleteIcon: function filterPanelDeleteIcon(props) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.Delete, _objectSpread(_objectSpread({}, props), {}, {
             fontSize: "medium"
           }));
         },
-        BooleanCellTrueIcon: _adminIcons.Check,
-        BooleanCellFalseIcon: _adminIcons.Close,
-        ColumnSortedAscendingIcon: _adminIcons.ArrowUp,
-        ColumnSortedDescendingIcon: _adminIcons.ArrowDown,
-        BaseTextField: function BaseTextField(props) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, props), {}, {
-            InputLabelProps: {
-              shrink: true
-            }
-          }));
-        },
-        ColumnMenuIcon: function ColumnMenuIcon(props) {
+        booleanCellTrueIcon: _adminIcons.Check,
+        booleanCellFalseIcon: _adminIcons.Close,
+        columnSortedAscendingIcon: _adminIcons.ArrowUp,
+        columnSortedDescendingIcon: _adminIcons.ArrowDown,
+        columnMenuIcon: function columnMenuIcon(props) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.MoreVertical, _objectSpread(_objectSpread({}, props), {}, {
             fontSize: "medium"
           }));
-        }
+        },
+        panel: _DataGridPanel.DataGridPanel
       }, component === null || component === void 0 || (_component$defaultPro = component.defaultProps) === null || _component$defaultPro === void 0 ? void 0 : _component$defaultPro.slots),
       slotProps: _objectSpread(_objectSpread({}, component === null || component === void 0 || (_component$defaultPro2 = component.defaultProps) === null || _component$defaultPro2 === void 0 ? void 0 : _component$defaultPro2.slotProps), {}, {
         baseButton: _objectSpread({
@@ -69,9 +75,30 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
         }, component === null || component === void 0 || (_component$defaultPro3 = component.defaultProps) === null || _component$defaultPro3 === void 0 || (_component$defaultPro3 = _component$defaultPro3.slotProps) === null || _component$defaultPro3 === void 0 ? void 0 : _component$defaultPro3.baseButton)
       }),
       localeText: _objectSpread({
-        noRowsLabel: _xDataGrid.GRID_DEFAULT_LOCALE_TEXT.noResultsOverlayLabel,
-        columnsPanelTextFieldLabel: ""
-      }, component === null || component === void 0 || (_component$defaultPro4 = component.defaultProps) === null || _component$defaultPro4 === void 0 ? void 0 : _component$defaultPro4.localeText)
+        MuiTablePagination: _objectSpread({
+          labelDisplayedRows: function labelDisplayedRows(_ref3) {
+            var from = _ref3.from,
+              to = _ref3.to,
+              count = _ref3.count;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+              id: "dataGrid.pagination.labelDisplayedRows",
+              defaultMessage: "{from}\u2013{to} of {formattedCount} {count, plural, one {item} other {items}}",
+              values: {
+                from: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedNumber, {
+                  value: from
+                }),
+                to: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedNumber, {
+                  value: to
+                }),
+                formattedCount: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedNumber, {
+                  value: count
+                }),
+                count: count
+              }
+            });
+          }
+        }, component === null || component === void 0 || (_component$defaultPro4 = component.defaultProps) === null || _component$defaultPro4 === void 0 || (_component$defaultPro4 = _component$defaultPro4.localeText) === null || _component$defaultPro4 === void 0 ? void 0 : _component$defaultPro4.MuiTablePagination)
+      }, component === null || component === void 0 || (_component$defaultPro5 = component.defaultProps) === null || _component$defaultPro5 === void 0 ? void 0 : _component$defaultPro5.localeText)
     }),
     styleOverrides: (0, _mergeOverrideStyles.mergeOverrideStyles)(component === null || component === void 0 ? void 0 : component.styleOverrides, {
       root: {
@@ -88,29 +115,21 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
         padding: "4px 4px ".concat(spacing(1), " 4px"),
         borderBottom: "1px solid ".concat(palette.divider)
       },
-      columnsManagement: {
-        padding: 0
-      },
-      columnsManagementRow: _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        marginBottom: spacing(2),
+      columnsManagement: _defineProperty({
+        padding: spacing(4)
+      }, "& .".concat(_xDataGrid.gridClasses.columnsManagementRow), _defineProperty({
+        margin: 0,
         "&:last-child": {
           marginBottom: 0
         }
-      }, "& .".concat(_material.switchClasses.root), {
-        marginRight: 0
-      }), "& .".concat(_material.switchClasses.root, " .").concat(_material.switchClasses.thumb), {
-        width: 10,
-        height: 10
-      }), "& .".concat(_material.switchClasses.root, " .").concat(_material.switchClasses.switchBase), {
-        padding: 3
-      }), "& .".concat(_material.switchClasses.root, " .").concat(_material.switchClasses.switchBase, ".").concat((0, _material.getSwitchUtilityClass)("checked")), {
-        transform: "translateX(20px)"
-      }),
-      columnHeader: function columnHeader(_ref2) {
-        var ownerState = _ref2.ownerState;
+      }, "& .".concat(_material.checkboxClasses.root), {
+        padding: 9
+      })),
+      columnHeader: function columnHeader(_ref4) {
+        var ownerState = _ref4.ownerState;
         return {
           /* !important is required to override inline styles */
-          height: "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing), " !important"),
+          height: "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density), "px !important"),
           "&:focus": {
             outline: "none"
           },
@@ -119,28 +138,13 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
           }
         };
       },
-      columnHeaderTitleContainer: function columnHeaderTitleContainer(_ref3) {
-        var ownerState = _ref3.ownerState;
-        return {
-          height: "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing))
-        };
-      },
       pinnedColumns: {
         backgroundColor: "white",
         boxShadow: shadows[2]
       },
-      row: function row(_ref4) {
-        var ownerState = _ref4.ownerState;
-        return {
-          height: "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing)),
-          /* !important is required to override inline styles */
-          minHeight: "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing), " !important"),
-          maxHeight: "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing), " !important")
-        };
-      },
       cell: function cell(_ref5) {
         var ownerState = _ref5.ownerState;
-        return _defineProperty(_defineProperty(_defineProperty({
+        return _defineProperty(_defineProperty({
           borderTop: "1px solid ".concat(palette.grey[100]),
           "&:focus": {
             outline: "none"
@@ -150,20 +154,20 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
           }
         }, "& .".concat((0, _xDataGrid.getDataGridUtilityClass)("booleanCell")), {
           color: palette.grey[900]
-        }), "height", "".concat(getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing))), "alignContent", "center");
+        }), "alignContent", "center");
       },
       footerContainer: function footerContainer(_ref7) {
         var ownerState = _ref7.ownerState;
-        return {
+        return _defineProperty(_defineProperty({
           borderTop: "1px solid ".concat(palette.grey[100]),
           boxSizing: "border-box",
-          minHeight: getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing),
-          maxHeight: getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing),
-          "& .MuiTablePagination-root > .MuiToolbar-root": {
-            height: getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing),
-            minHeight: getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density, spacing)
-          }
-        };
+          minHeight: getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density)
+        }, "& .".concat(_material.tablePaginationClasses.selectLabel, ", & .").concat(_material.tablePaginationClasses.displayedRows), {
+          marginTop: 0,
+          marginBottom: 0
+        }), "& .".concat(_material.tablePaginationClasses.root, " > .").concat(_material.toolbarClasses.root), {
+          minHeight: getDensityHeightValue(ownerState === null || ownerState === void 0 ? void 0 : ownerState.density)
+        });
       },
       iconSeparator: {
         backgroundColor: palette.grey[100],
@@ -196,7 +200,7 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
         paddingBottom: spacing(2),
         marginBottom: spacing(2),
         borderBottomColor: palette.grey[50]
-      })), "&:first-child .".concat(_xDataGrid.gridClasses.filterFormOperatorInput), {
+      })), "&:first-child .".concat(_xDataGrid.gridClasses.filterFormLogicOperatorInput), {
         // The first "Operator"-select is fully hidden by default when there is only one filter.
         // Setting `display: block` makes sure it takes up it's space as if it were visible to prevent the alignment from breaking.
         // Even though `display: block` is set now, it's still not visible, due to it's default styling of `visibility: hidden`.
@@ -244,7 +248,7 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
         marginTop: 0,
         width: 110
       }),
-      filterFormValueInput: _defineProperty(_defineProperty(_defineProperty({
+      filterFormValueInput: _defineProperty(_defineProperty(_defineProperty(_defineProperty({
         width: "calc(100% - ".concat(filtersLeftSectionWidth, "px)"),
         paddingLeft: spacing(2),
         boxSizing: "border-box",
@@ -255,7 +259,11 @@ var getMuiDataGrid = exports.getMuiDataGrid = function getMuiDataGrid(component,
         marginTop: 0
       }), "&:empty", {
         display: "none" // Make space for `filterFormOperatorInput` to expand and take up the full width
-      }), "& .".concat(_material.inputBaseClasses.root), {
+      }), "&& .".concat(_material.autocompleteClasses.inputRoot), _defineProperty({
+        paddingBottom: 0
+      }, "& > .".concat(_material.autocompleteClasses.input), {
+        padding: "calc(".concat(spacing(2), " - 1px)")
+      })), "& .".concat(_material.inputBaseClasses.root), {
         marginTop: 0
       }),
       panelFooter: {

package/lib/theme/componentsTheme/MuiLink.js

@@ -19,7 +19,7 @@ var getMuiLink = exports.getMuiLink = function getMuiLink(component, _ref) {
     }, component === null || component === void 0 ? void 0 : component.defaultProps),
     styleOverrides: (0, _mergeOverrideStyles.mergeOverrideStyles)(component === null || component === void 0 ? void 0 : component.styleOverrides, {
       root: {
-        color: palette.grey[600],
+        color: palette.primary.main,
         fontWeight: 250,
         fontSize: 16,
         lineHeight: "16px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/admin",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "repository": {
     "directory": "packages/admin/admin",
     "type": "git",
@@ -13,8 +13,7 @@
     "lib"
   ],
   "dependencies": {
-    "@comet/admin-icons": "^8.0.0-beta.0",
-    "@mui/utils": "^6.4.3",
+    "@mui/utils": "^6.4.8",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "final-form-set-field-data": "^1.0.2",
@@ -25,21 +24,19 @@
     "query-string": "^7.1.3",
     "react-dropzone": "^14.3.8",
     "use-constant": "^1.1.1",
-    "uuid": "^11.0.5"
+    "uuid": "^11.1.0",
+    "@comet/admin-icons": "8.0.0-beta.2"
   },
   "devDependencies": {
-    "@apollo/client": "^3.13.1",
+    "@apollo/client": "^3.13.4",
     "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.9",
-    "@comet/admin-babel-preset": "^8.0.0-beta.0",
-    "@comet/eslint-config": "^8.0.0-beta.0",
-    "@comet/eslint-plugin": "^8.0.0-beta.0",
+    "@babel/core": "^7.26.10",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/material": "^6.4.5",
-    "@mui/system": "^6.4.3",
-    "@mui/x-data-grid": "^7.27.1",
-    "@mui/x-data-grid-pro": "^7.27.1",
+    "@mui/material": "^6.4.8",
+    "@mui/system": "^6.4.8",
+    "@mui/x-data-grid": "^7.27.3",
+    "@mui/x-data-grid-pro": "^7.27.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -50,12 +47,12 @@
     "@types/jest": "^29.5.14",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.isequal": "^4.5.8",
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.13.10",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "eslint": "^9.20.1",
+    "eslint": "^9.22.0",
     "final-form": "^4.20.10",
     "graphql": "^15.10.1",
     "history": "^4.10.1",
@@ -63,17 +60,20 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-final-form": "^6.5.9",
-    "react-intl": "^6.8.9",
+    "react-intl": "^7.1.6",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
     "rimraf": "^6.0.1",
     "ts-jest": "^29.2.6",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@comet/admin-babel-preset": "8.0.0-beta.2",
+    "@comet/eslint-config": "8.0.0-beta.2",
+    "@comet/eslint-plugin": "8.0.0-beta.2"
   },
   "peerDependencies": {
     "@apollo/client": "^3.7.0",
@@ -90,7 +90,7 @@
     "react-dnd": "^16.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-final-form": "^6.3.1",
-    "react-intl": "^5.0.0 || ^6.0.0",
+    "react-intl": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2"
   },
@@ -102,6 +102,9 @@
       "optional": true
     }
   },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

package/lib/common/buttons/save/SaveButton.d.ts

@@ -1,34 +0,0 @@
-import { type ButtonClassKey, type ButtonProps, type ComponentsOverrides } from "@mui/material";
-import { type Theme } from "@mui/material/styles";
-import { type ReactNode } from "react";
-export type SaveButtonClassKey = "saving" | "error" | "success" | "conflict" | ButtonClassKey;
-export interface SaveButtonProps extends ButtonProps {
-    saving?: boolean;
-    hasErrors?: boolean;
-    hasConflict?: boolean;
-    savingItem?: ReactNode;
-    successItem?: ReactNode;
-    errorItem?: ReactNode;
-    conflictItem?: ReactNode;
-    saveIcon?: ReactNode;
-    savingIcon?: ReactNode;
-    successIcon?: ReactNode;
-    errorIcon?: ReactNode;
-    conflictIcon?: ReactNode;
-}
-export declare function SaveButton(inProps: SaveButtonProps): import("react/jsx-runtime").JSX.Element;
-declare module "@mui/material/styles" {
-    interface ComponentNameToClassKey {
-        CometAdminSaveButton: SaveButtonClassKey;
-    }
-    interface ComponentsPropsList {
-        CometAdminSaveButton: SaveButtonProps;
-    }
-    interface Components {
-        CometAdminSaveButton?: {
-            defaultProps?: Partial<ComponentsPropsList["CometAdminSaveButton"]>;
-            styleOverrides?: ComponentsOverrides<Theme>["CometAdminSaveButton"];
-        };
-    }
-}
-//# sourceMappingURL=SaveButton.d.ts.map

package/lib/common/buttons/save/SaveButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SaveButton.d.ts","sourceRoot":"","sources":["../../../../src/common/buttons/save/SaveButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAsB,KAAK,WAAW,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5H,OAAO,EAAO,KAAK,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO5D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,cAAc,CAAC;AA8D9F,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B;AAID,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,2CAsHlD;AACD,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,oBAAoB,EAAE,kBAAkB,CAAC;KAC5C;IAED,UAAU,mBAAmB;QACzB,oBAAoB,EAAE,eAAe,CAAC;KACzC;IAED,UAAU,UAAU;QAChB,oBAAoB,CAAC,EAAE;YACnB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,sBAAsB,CAAC,CAAC,CAAC;YACpE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,sBAAsB,CAAC,CAAC;SACvE,CAAC;KACL;CACJ"}

package/lib/common/buttons/save/SaveButton.js

@@ -1,173 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SaveButton = SaveButton;
-var _adminIcons = require("@comet/admin-icons");
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _react = require("react");
-var _reactIntl = require("react-intl");
-var _createComponentSlot = require("../../../helpers/createComponentSlot");
-var _messages = require("../../../messages");
-var _useSplitButtonContext = require("../split/useSplitButtonContext");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["saving", "hasErrors", "hasConflict", "children", "savingItem", "successItem", "errorItem", "conflictItem", "saveIcon", "savingIcon", "successIcon", "errorIcon", "conflictIcon", "variant", "color", "disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var Root = (0, _createComponentSlot.createComponentSlot)(_material.Button)({
-  componentName: "SaveButton",
-  slotName: "root",
-  classesResolver: function classesResolver(ownerState) {
-    return [ownerState.displayState === "saving" && "saving", ownerState.displayState === "error" && "error", ownerState.displayState === "success" && "success", ownerState.displayState === "conflict" && "conflict"];
-  }
-})(function (_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
-  return (0, _styles.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", "\n        ", "\n        ", "\n        ", "\n    "])), ownerState.displayState === "saving" && (0, _styles.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            &:disabled {\n                ", ";\n                ", "\n            }\n        "])), ownerState.variant === "contained" && ownerState.color === "primary" && (0, _styles.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                    color: ", ";\n                    background-color: ", ";\n                "])), theme.palette.primary.contrastText, theme.palette.primary.main), ownerState.variant === "contained" && ownerState.color === "secondary" && (0, _styles.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                    color: ", ";\n                    background-color: ", ";\n                "])), theme.palette.secondary.contrastText, theme.palette.secondary.main)), ownerState.displayState === "error" && (0, _styles.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            &:disabled {\n                color: ", ";\n                background-color: ", ";\n            }\n        "])), theme.palette.error.contrastText, theme.palette.error.light), ownerState.displayState === "success" && (0, _styles.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            &:disabled {\n                color: ", ";\n                background-color: ", ";\n            }\n        "])), theme.palette.success.contrastText, theme.palette.success.light), ownerState.displayState === "conflict" && (0, _styles.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            color: ", ";\n            background-color: ", ";\n            &:hover {\n                background-color: ", ";\n            }\n            &.", ":not(:last-child) {\n                border-right-color: ", ";\n            }\n        "])), theme.palette.error.contrastText, theme.palette.error.main, theme.palette.error.dark, _material.buttonGroupClasses.grouped, theme.palette.error.dark));
-});
-function SaveButton(inProps) {
-  var _useThemeProps = (0, _styles.useThemeProps)({
-      props: inProps,
-      name: "CometAdminSaveButton"
-    }),
-    _useThemeProps$saving = _useThemeProps.saving,
-    saving = _useThemeProps$saving === void 0 ? false : _useThemeProps$saving,
-    _useThemeProps$hasErr = _useThemeProps.hasErrors,
-    hasErrors = _useThemeProps$hasErr === void 0 ? false : _useThemeProps$hasErr,
-    _useThemeProps$hasCon = _useThemeProps.hasConflict,
-    hasConflict = _useThemeProps$hasCon === void 0 ? false : _useThemeProps$hasCon,
-    _useThemeProps$childr = _useThemeProps.children,
-    children = _useThemeProps$childr === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, _objectSpread({}, _messages.messages.save)) : _useThemeProps$childr,
-    _useThemeProps$saving2 = _useThemeProps.savingItem,
-    savingItem = _useThemeProps$saving2 === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "comet.saveButton.savingItem.title",
-      defaultMessage: "Saving"
-    }) : _useThemeProps$saving2,
-    _useThemeProps$succes = _useThemeProps.successItem,
-    successItem = _useThemeProps$succes === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "comet.saveButton.successItem.title",
-      defaultMessage: "Successfully Saved"
-    }) : _useThemeProps$succes,
-    _useThemeProps$errorI = _useThemeProps.errorItem,
-    errorItem = _useThemeProps$errorI === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "comet.saveButton.errorItem.title",
-      defaultMessage: "Save Error"
-    }) : _useThemeProps$errorI,
-    _useThemeProps$confli = _useThemeProps.conflictItem,
-    conflictItem = _useThemeProps$confli === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, _objectSpread({}, _messages.messages.saveConflict)) : _useThemeProps$confli,
-    _useThemeProps$saveIc = _useThemeProps.saveIcon,
-    saveIcon = _useThemeProps$saveIc === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.Save, {}) : _useThemeProps$saveIc,
-    _useThemeProps$saving3 = _useThemeProps.savingIcon,
-    savingIcon = _useThemeProps$saving3 === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.ThreeDotSaving, {}) : _useThemeProps$saving3,
-    _useThemeProps$succes2 = _useThemeProps.successIcon,
-    successIcon = _useThemeProps$succes2 === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.Check, {}) : _useThemeProps$succes2,
-    _useThemeProps$errorI2 = _useThemeProps.errorIcon,
-    errorIcon = _useThemeProps$errorI2 === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.Error, {}) : _useThemeProps$errorI2,
-    _useThemeProps$confli2 = _useThemeProps.conflictIcon,
-    conflictIcon = _useThemeProps$confli2 === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.Error, {}) : _useThemeProps$confli2,
-    _useThemeProps$varian = _useThemeProps.variant,
-    variant = _useThemeProps$varian === void 0 ? "contained" : _useThemeProps$varian,
-    _useThemeProps$color = _useThemeProps.color,
-    color = _useThemeProps$color === void 0 ? "primary" : _useThemeProps$color,
-    disabled = _useThemeProps.disabled,
-    restProps = _objectWithoutProperties(_useThemeProps, _excluded);
-  var _useState = (0, _react.useState)("idle"),
-    _useState2 = _slicedToArray(_useState, 2),
-    displayState = _useState2[0],
-    setDisplayState = _useState2[1];
-  var saveSplitButton = (0, _useSplitButtonContext.useSplitButtonContext)();
-  var ownerState = {
-    displayState: displayState,
-    variant: variant,
-    color: color
-  };
-  var resolveIconForDisplayState = function resolveIconForDisplayState(displayState) {
-    if (displayState === "saving") {
-      return savingIcon;
-    } else if (displayState === "success") {
-      return successIcon;
-    } else if (displayState === "error") {
-      return errorIcon;
-    } else if (displayState === "conflict") {
-      return conflictIcon;
-    }
-    return saveIcon;
-  };
-  (0, _react.useEffect)(function () {
-    var timeoutId;
-    if ((displayState === "idle" || displayState === "conflict") && saving) {
-      setDisplayState("saving");
-    }
-    // Display Conflict
-    else if (displayState === "idle" && hasConflict) {
-      setDisplayState("conflict");
-    }
-    // Display Error
-    else if (displayState === "saving" && hasErrors === true) {
-      timeoutId = window.setTimeout(function () {
-        setDisplayState("error");
-      }, 500);
-    }
-    // Display Success
-    else if (displayState === "saving" && saving === false && hasErrors === false) {
-      timeoutId = window.setTimeout(function () {
-        setDisplayState("success");
-      }, 500);
-    }
-    // Return to idle
-    else if (displayState === "error") {
-      timeoutId = window.setTimeout(function () {
-        setDisplayState("idle");
-      }, 5000);
-    }
-    // Return to idle
-    else if (displayState === "success") {
-      timeoutId = window.setTimeout(function () {
-        setDisplayState("idle");
-      }, 2000);
-    }
-    return function () {
-      if (timeoutId !== undefined) {
-        window.clearTimeout(timeoutId);
-      }
-    };
-  }, [displayState, saving, hasErrors, hasConflict]);
-  (0, _react.useEffect)(function () {
-    if (displayState === "idle") {
-      saveSplitButton === null || saveSplitButton === void 0 || saveSplitButton.setShowSelectButton(undefined);
-    } else if (displayState === "saving") {
-      saveSplitButton === null || saveSplitButton === void 0 || saveSplitButton.setShowSelectButton(false);
-    } else if (displayState === "success") {
-      saveSplitButton === null || saveSplitButton === void 0 || saveSplitButton.setShowSelectButton(false);
-    } else if (displayState === "error") {
-      saveSplitButton === null || saveSplitButton === void 0 || saveSplitButton.setShowSelectButton(false);
-    } else if (displayState === "conflict") {
-      saveSplitButton === null || saveSplitButton === void 0 || saveSplitButton.setShowSelectButton(undefined);
-    }
-  }, [displayState, saveSplitButton]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
-    ownerState: ownerState
-  }, restProps), {}, {
-    startIcon: resolveIconForDisplayState(displayState),
-    variant: variant,
-    color: color,
-    disabled: disabled || displayState != "idle" && displayState != "conflict",
-    children: [displayState === "idle" && children, displayState === "saving" && savingItem, displayState === "success" && successItem, displayState === "error" && errorItem, displayState === "conflict" && conflictItem]
-  }));
-}