@gridsuite/commons-ui 0.34.1 → 0.35.0

package/lib/components/TreeViewFinder/TreeViewFinder.js

@@ -1,11 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports.generateTreeViewFinderClass = exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _styles = require("../../utils/styles");
+var _system = require("@mui/system");
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
@@ -18,37 +19,45 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _defaultStyles;
 /**
  * Copyright (c) 2021, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// As a bunch of individual variables to try to make it easier
+// to track that they are all used. Not sure, maybe group them in an object ?
+var cssDialogPaper = 'dialogPaper';
+var cssLabelRoot = 'labelRoot';
+var cssLabelText = 'labelText';
+var cssLabelIcon = 'labelIcon';
+var cssIcon = 'icon';
 
-var defaultStyles = {
-  dialogPaper: {
-    minWidth: '50%'
-  },
-  labelRoot: {
-    display: 'flex',
-    alignContent: 'center',
-    alignItems: 'center'
-  },
-  labelText: {
-    fontWeight: 'inherit',
-    flexGrow: 1
-  },
-  labelIcon: {
-    display: 'flex',
-    alignContent: 'center',
-    alignItems: 'center',
-    marginRight: '4px'
-  },
-  icon: {}
+// converted to nested rules
+var defaultStyles = (_defaultStyles = {}, _defaultStyles[cssDialogPaper] = {
+  minWidth: '50%'
+}, _defaultStyles[cssLabelRoot] = {
+  display: 'flex',
+  alignContent: 'center',
+  alignItems: 'center'
+}, _defaultStyles[cssLabelText] = {
+  fontWeight: 'inherit',
+  flexGrow: 1
+}, _defaultStyles[cssLabelIcon] = {
+  display: 'flex',
+  alignContent: 'center',
+  alignItems: 'center',
+  marginRight: '4px'
+}, _defaultStyles[cssIcon] = {}, _defaultStyles);
+var generateTreeViewFinderClass = function generateTreeViewFinderClass(className) {
+  return "GsiTreeViewFinder-" + className;
 };
+exports.generateTreeViewFinderClass = generateTreeViewFinderClass;
+var composeClasses = (0, _styles.makeComposeClasses)(generateTreeViewFinderClass);
 
 /**
  * This callback type is called `onTreeBrowseCallback` and is displayed as a global symbol.
@@ -63,7 +72,7 @@ var defaultStyles = {
  * It is flexible and allow controlled props to let Parent component manage
  * data.
  *
- * @param {Object}          classes - CSS classes, please use withStyles API from MaterialUI
+ * @param {Object}          classes - Deprecated, use sx or styled instead. - Otherwise, CSS classes, please use withStyles API from MaterialUI
  * @param {String}          [title] - Title of the Dialog
  * @param {String}          [contentText] - Content text of the Dialog
  * @param {Boolean}         open - dialog state boolean handler (Controlled)
@@ -96,7 +105,8 @@ var TreeViewFinder = function TreeViewFinder(props) {
     validationButtonText = props.validationButtonText,
     onlyLeaves = props.onlyLeaves,
     multiselect = props.multiselect,
-    sortMethod = props.sortMethod;
+    sortMethod = props.sortMethod,
+    className = props.className;
   var _useState = (0, _react.useState)({}),
     mapPrintedNodes = _useState[0],
     setMapPrintedNodes = _useState[1];
@@ -194,12 +204,12 @@ var TreeViewFinder = function TreeViewFinder(props) {
       return nodeId === node.id;
     })) {
       return /*#__PURE__*/_react["default"].createElement(_Check["default"], {
-        className: classes.labelIcon
+        className: composeClasses(classes, cssLabelIcon)
       });
     } else {
       if (node.icon) {
         return /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.labelIcon
+          className: composeClasses(classes, cssLabelIcon)
         }, node.icon);
       } else {
         return null;
@@ -208,9 +218,9 @@ var TreeViewFinder = function TreeViewFinder(props) {
   };
   var renderTreeItemLabel = function renderTreeItemLabel(node) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.labelRoot
+      className: composeClasses(classes, cssLabelRoot)
     }, getNodeIcon(node), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-      className: classes.labelText
+      className: composeClasses(classes, cssLabelText)
     }, node.name));
   };
   var showChevron = function showChevron(node) {
@@ -226,10 +236,10 @@ var TreeViewFinder = function TreeViewFinder(props) {
       nodeId: node.id,
       label: renderTreeItemLabel(node),
       expandIcon: showChevron(node) ? /*#__PURE__*/_react["default"].createElement(_ChevronRight["default"], {
-        className: classes.icon
+        className: composeClasses(classes, cssIcon)
       }) : null,
       collapseIcon: showChevron(node) ? /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
-        className: classes.icon
+        className: composeClasses(classes, cssIcon)
       }) : null
     }, Array.isArray(node.children) ? node.children.length ? node.children.sort(sortMethod).map(function (child) {
       return renderTree(child);
@@ -245,8 +255,9 @@ var TreeViewFinder = function TreeViewFinder(props) {
       }
     },
     "aria-labelledby": "TreeViewFindertitle",
+    className: className,
     classes: {
-      paper: classes.dialogPaper
+      paper: composeClasses(classes, cssDialogPaper)
     }
   }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
     id: "TreeViewFindertitle"
@@ -310,7 +321,7 @@ TreeViewFinder.propTypes = process.env.NODE_ENV !== "production" ? {
   })).isRequired,
   onTreeBrowse: _propTypes["default"].func,
   //uncontrolled
-  classes: _propTypes["default"].object.isRequired,
+  classes: _propTypes["default"].object,
   title: _propTypes["default"].string,
   contentText: _propTypes["default"].string,
   validationButtonText: _propTypes["default"].string,
@@ -327,8 +338,9 @@ TreeViewFinder.defaultProps = {
   defaultExpanded: [],
   onlyLeaves: true,
   multiselect: false,
-  sortMethod: undefined
+  sortMethod: undefined,
+  classes: {}
 };
-var _default = (0, _withStyles["default"])(defaultStyles)(TreeViewFinder);
-exports["default"] = _default;
-module.exports = exports.default;
+var nestedGlobalSelectorsStyles = (0, _styles.toNestedGlobalSelectors)(defaultStyles, generateTreeViewFinderClass);
+var _default = (0, _system.styled)(TreeViewFinder)(nestedGlobalSelectorsStyles);
+exports["default"] = _default;

package/lib/components/TreeViewFinder/index.js

@@ -1,8 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = void 0;
-var _TreeViewFinder = _interopRequireDefault(require("./TreeViewFinder"));
+exports.generateTreeViewFinderClass = exports["default"] = void 0;
+var _TreeViewFinder = _interopRequireWildcard(require("./TreeViewFinder"));
 exports["default"] = _TreeViewFinder["default"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-module.exports = exports.default;
+exports.generateTreeViewFinderClass = _TreeViewFinder.generateTreeViewFinderClass;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/components/translations/top-bar-en.js

@@ -19,7 +19,8 @@ var top_bar_en = {
   'top-bar/equipmentLabel': 'Equipment label',
   'top-bar/id': 'Id',
   'top-bar/name': 'Name',
-  'top-bar/language': 'Language'
+  'top-bar/language': 'Language',
+  'top-bar/customTheme': 'Custom theme'
 };
 var _default = top_bar_en;
 exports["default"] = _default;

package/lib/components/translations/top-bar-fr.js

@@ -19,7 +19,8 @@ var top_bar_fr = {
   'top-bar/equipmentLabel': 'Label des ouvrages',
   'top-bar/id': 'Id',
   'top-bar/name': 'Nom',
-  'top-bar/language': 'Langue'
+  'top-bar/language': 'Langue',
+  'top-bar/customTheme': 'Choix de theme'
 };
 var _default = top_bar_fr;
 exports["default"] = _default;

package/lib/utils/EquipmentType.js

@@ -14,41 +14,41 @@ var TYPE_TAG_MAX_SIZE = '90px';
 exports.TYPE_TAG_MAX_SIZE = TYPE_TAG_MAX_SIZE;
 var VL_TAG_MAX_SIZE = '100px';
 exports.VL_TAG_MAX_SIZE = VL_TAG_MAX_SIZE;
-var equipmentStyles = function equipmentStyles(theme) {
-  return {
-    equipmentOption: {
-      display: 'flex',
-      gap: '20px',
-      width: '100%',
-      margin: '0px',
-      padding: '0px',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    equipmentTag: {
+var equipmentStyles = {
+  equipmentOption: {
+    display: 'flex',
+    gap: '20px',
+    width: '100%',
+    margin: '0px',
+    padding: '0px',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  equipmentTag: function equipmentTag(theme) {
+    return {
       borderRadius: '10px',
       padding: '4px',
       fontSize: 'x-small',
       textAlign: 'center',
       color: theme === _TopBar.LIGHT_THEME ? 'inherit' : 'black'
-    },
-    equipmentTypeTag: {
-      minWidth: TYPE_TAG_MAX_SIZE,
-      maxWidth: TYPE_TAG_MAX_SIZE,
-      background: 'lightblue'
-    },
-    equipmentVlTag: {
-      width: VL_TAG_MAX_SIZE,
-      minWidth: VL_TAG_MAX_SIZE,
-      maxWidth: VL_TAG_MAX_SIZE,
-      background: 'lightgray',
-      fontStyle: 'italic'
-    },
-    result: {
-      width: '100%',
-      padding: '2px'
-    }
-  };
+    };
+  },
+  equipmentTypeTag: {
+    minWidth: TYPE_TAG_MAX_SIZE,
+    maxWidth: TYPE_TAG_MAX_SIZE,
+    background: 'lightblue'
+  },
+  equipmentVlTag: {
+    width: VL_TAG_MAX_SIZE,
+    minWidth: VL_TAG_MAX_SIZE,
+    maxWidth: VL_TAG_MAX_SIZE,
+    background: 'lightgray',
+    fontStyle: 'italic'
+  },
+  result: {
+    width: '100%',
+    padding: '2px'
+  }
 };
 
 // Must be equivalent as the back enum

package/lib/utils/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports.toNestedGlobalSelectors = exports.mergeSx = exports.makeComposeClasses = void 0;
+/**
+ * Copyright (c) 2023, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+//TODO do we need to export this to clients (index.js) ?
+
+// like mui sx(slot)/class merging but simpler with less features
+// TODO use their system ? But it's named unstable_composeClasses so not supported?
+var makeComposeClasses = function makeComposeClasses(generateGlobalClass) {
+  return function (classes, ruleName) {
+    return [generateGlobalClass(ruleName), classes[ruleName]].filter(function (x) {
+      return x;
+    }).join(' ');
+  };
+};
+exports.makeComposeClasses = makeComposeClasses;
+var toNestedGlobalSelectors = function toNestedGlobalSelectors(styles, generateGlobalClass) {
+  return Object.fromEntries(Object.entries(styles).map(function (_ref) {
+    var k = _ref[0],
+      v = _ref[1];
+    return ["& ." + generateGlobalClass(k), v];
+  }));
+};
+
+// https://mui.com/system/getting-started/the-sx-prop/#passing-the-sx-prop
+// You cannot spread or concat directly because `SxProps` (typeof sx) can be an array. */
+// same as [{}, ...(Array.isArray(sx) ? sx : [sx])]
+exports.toNestedGlobalSelectors = toNestedGlobalSelectors;
+var mergeSx = function mergeSx() {
+  for (var _len = arguments.length, allSx = new Array(_len), _key = 0; _key < _len; _key++) {
+    allSx[_key] = arguments[_key];
+  }
+  return allSx.flat();
+};
+exports.mergeSx = mergeSx;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.34.1",
+    "version": "0.35.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": "<=6",
@@ -39,7 +39,6 @@
         "@mui/icons-material": "^5.5.0",
         "@mui/lab": "^5.0.0-alpha.72",
         "@mui/material": "^5.5.0",
-        "@mui/styles": "^5.5.0",
         "notistack": "^2.0.3",
         "react-router-dom": "^6.0.0",
         "react": "^18.0.0",