orc-shared 5.10.1-dev.5 → 5.10.1-dev.7

package/dist/components/AppFrame/MenuItem.js

@@ -7,6 +7,7 @@ var _styles = require("@material-ui/core/styles");
 var _reactRouterDom = require("react-router-dom");
 var _reactIntl = require("react-intl");
 var _Icon = _interopRequireDefault(require("../MaterialUI/DataDisplay/Icon"));
+var _toastHelper = require("../../utils/toastHelper");
 var _excluded = ["staticContext", "dispatch", "component"],
   _excluded2 = ["open", "label", "icon", "alert", "isHidden", "href", "menuToggle", "active"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,14 +30,6 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var getToastColor = function getToastColor(theme, alertType) {
-  var toastBorderColors = {
-    error: theme.palette.error.main,
-    warn: theme.palette.warning.main,
-    confirm: theme.palette.success.main
-  };
-  return toastBorderColors[alertType] || "red";
-};
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     block: function block(props) {
@@ -54,7 +47,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       };
     },
     alert: function alert(props) {
-      var toastColor = getToastColor(theme, props.alertType);
+      var toastColor = (0, _toastHelper.getToastColor)(theme, props.alertType);
       return {
         borderRadius: "50%",
         border: "4px solid ".concat(toastColor),
@@ -68,7 +61,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       };
     },
     alertMessage: function alertMessage(props) {
-      var toastColor = getToastColor(theme, props.alertType);
+      var toastColor = (0, _toastHelper.getToastColor)(theme, props.alertType);
       return {
         position: "absolute",
         zIndex: 10000,
@@ -186,7 +179,6 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(MenuItem, "MenuItem", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
@@ -203,7 +195,6 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(MenuItem, "MenuItem", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");

package/dist/components/MaterialUI/DataDisplay/Table.js

@@ -353,7 +353,7 @@ var DefaultFullTable = _react.default.forwardRef(function (props, ref) {
     isEditingMode: props.isEditingMode,
     context: props.context
   })), props.tableRows.length > 0 ? null : /*#__PURE__*/_react.default.createElement("div", {
-    className: props.classes.placeholder
+    className: (0, _classnames.default)(props.classes.placeholder, props.customClasses.placeholderContainer)
   }, props.placeholder));
 });
 var FullTableWithSavedScrollbar = _react.default.forwardRef(__signature__(__signature__(function (props, ref) {
@@ -452,6 +452,7 @@ var Table = _react.default.forwardRef(__signature__(__signature__(function (_ref
   customClasses["tableCell"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.tableCell)) || null;
   customClasses["headerCell"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.headerCell)) || null;
   customClasses["tableContainer"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.tableContainer)) || null;
+  customClasses["placeholderContainer"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.placeholderContainer)) || null;
   customClasses["container"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.container)) || null;
   customClasses["table"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.table)) || null;
   if (selectedRows && !selectedRowsChanged || !selectedRows && selectedRowsChanged) throw new Error("Both 'selectedRows' and 'selectedRowsChanged' need to be defined if one of them is.");

package/dist/components/MaterialUI/DataDisplay/TableProps.js

@@ -44,6 +44,7 @@ var TableProps = /*#__PURE__*/function (_ComponentProps) {
     _this.componentClasses.set(_this.constructor.ruleNames.tableCell, null);
     _this.componentClasses.set(_this.constructor.ruleNames.headerCell, null);
     _this.componentClasses.set(_this.constructor.ruleNames.tableContainer, null);
+    _this.componentClasses.set(_this.constructor.ruleNames.placeholderContainer, null);
     _this.componentClasses.set(_this.constructor.ruleNames.container, null);
     _this.componentClasses.set(_this.constructor.ruleNames.table, null);
     _this._isTableProps = true;
@@ -79,7 +80,8 @@ _defineProperty(TableProps, "ruleNames", {
   headerCell: "headerCell",
   tableContainer: "tableContainer",
   container: "container",
-  table: "table"
+  table: "table",
+  placeholderContainer: "placeholderContainer"
 });
 var isTableProps = exports.isTableProps = function isTableProps(value) {
   if (value == null) return true;

package/dist/components/MaterialUI/Surfaces/SectionExpansionPanel.js

@@ -89,7 +89,8 @@ var SectionExpansionPanel = function SectionExpansionPanel(_ref) {
     actions = _ref.actions,
     expansionPanelId = _ref.expansionPanelId,
     expansionPanelProps = _ref.expansionPanelProps,
-    expansionPanelActionsProps = _ref.expansionPanelActionsProps;
+    expansionPanelActionsProps = _ref.expansionPanelActionsProps,
+    headerClassName = _ref.headerClassName;
   if ((0, _expansionPanelProps.isExpansionPanelProps)(expansionPanelProps) === false) {
     throw new TypeError("expansionPanelProps property is not of type ExpansionPanelProps");
   }
@@ -142,7 +143,7 @@ var SectionExpansionPanel = function SectionExpansionPanel(_ref) {
     }),
     IconButtonProps: defaultSummaryStyles,
     classes: {
-      root: (0, _classnames.default)(classes.summaryRoot, constrained ? classes.constrainedSummaryRoot : ""),
+      root: (0, _classnames.default)(classes.summaryRoot, headerClassName, constrained ? classes.constrainedSummaryRoot : ""),
       expanded: (0, _classnames.default)(classes.panelExpanded),
       content: (0, _classnames.default)(classes.summaryContent, constrained ? classes.constrainedSummaryContent : ""),
       expandIcon: (0, _classnames.default)(classes.summaryExpandIconRoot)

package/dist/components/ToastList.js

@@ -1,18 +1,15 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.ToastList = exports.ToastIcon = exports.ToastBox = exports.Toast = exports.CloseIcon = void 0;
+exports.default = exports.ToastList = exports.Toast = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _styledTransitionGroup = _interopRequireDefault(require("styled-transition-group"));
-var _reactTransitionGroup = require("react-transition-group");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _polished = require("polished");
-var _utils = require("../utils");
-var _Text = _interopRequireDefault(require("./Text"));
-var _Icon = _interopRequireDefault(require("./Icon"));
+var _reactIntl = require("react-intl");
+var _styles = require("@material-ui/core/styles");
+var _Icon = _interopRequireDefault(require("./MaterialUI/DataDisplay/Icon"));
+var _toastHelper = require("../utils/toastHelper");
+var _reactTransitionGroup = require("react-transition-group");
 var _excluded = ["message", "type", "closeFunc"];
-var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -25,7 +22,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(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 (e.includes(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 __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -38,36 +34,65 @@ if (!portal.parent) {
   portal.id = "toast";
   document.body.appendChild(portal);
 }
-var toastTransitionTime = 300;
-var ToastBox = exports.ToastBox = _styledTransitionGroup.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\twidth: 390px;\n\tmargin-top: 10px;\n\tpadding: 17px;\n\tborder-radius: 5px;\n\tfont-size: 14px;\n\tcolor: white;\n\tbackground-color: ", ";\n\tz-index: 10000;\n\n\t& > * {\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t\n\t&:enter {\n\t\ttransform: translateX(200%);\n\t}\n\t&:enter-active {\n\t\ttransform: translateX(0);\n\t\ttransition: transform ", "ms ease-out;\n\t}\n\t&:exit {\n\t\ttransform-origin: top;\n\t\ttransform: scale(1,1);\n\t}\n\t&:exit ~ & {\n\t\ttransform: translateY(0);\n\t}\n\t&:exit-active {\n\t\ttransform: scale(1, 0.001);\n\t\ttransition: transform ", "ms ease-out;\n\t}\n\t&:exit-active ~ & {\n\t\ttransition: transform ", "ms ease-out;\n\t\ttransform: translateY(-100%);\n\t}\n"])), (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
-  return props.type;
-}], "#999"), toastTransitionTime, toastTransitionTime, toastTransitionTime);
-ToastBox.defaultProps = {
-  timeout: toastTransitionTime,
-  unmountOnExit: true
-};
-var ToastIcon = exports.ToastIcon = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
-  return {
-    id: (0, _utils.getThemeProp)(["icons", "toast", function (props) {
-      return props.type;
-    }], "bubble-chat-2")(props)
-  };
-}).withConfig({
-  displayName: "ToastList__ToastIcon",
-  componentId: "sc-ux3rdy-0"
-})(["font-size:20px;margin-right:16px;stroke-width:2px;"]);
-var CloseIcon = exports.CloseIcon = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
-    id: (0, _utils.getThemeProp)(["icons", "close"], "close")(props)
+    toastBox: function toastBox(props) {
+      var toastColor = (0, _toastHelper.getToastColor)(theme, props.toastType);
+      return {
+        display: "flex",
+        width: "390px",
+        marginTop: "10px",
+        padding: "17px",
+        borderRadius: "5px",
+        fontSize: "14px",
+        color: "white",
+        backgroundColor: toastColor,
+        zIndex: 10000,
+        "& > *": {
+          marginTop: "auto",
+          marginBottom: "auto"
+        },
+        "&.enter": {
+          transform: "translateX(200%)"
+        },
+        "&.enter-active": {
+          transform: "translateX(0)",
+          transition: "transform 300ms ease-out"
+        },
+        "&.exit": {
+          transformOrigin: "top",
+          transform: "scale(1,1)"
+        },
+        "&.exit ~ &": {
+          transform: "translateY(0)"
+        },
+        "&.exit-active": {
+          transform: "scale(1, 0.001)",
+          transition: "transform 300ms ease-out"
+        },
+        "&.exit-active ~ &": {
+          transition: "transform 300ms ease-out",
+          transform: "translateY(-100%)"
+        }
+      };
+    },
+    listWrapper: {
+      position: "absolute",
+      top: "40px",
+      right: "16px",
+      display: "flex",
+      flexDirection: "column"
+    },
+    closeIcon: {
+      padding: "2px",
+      borderRadius: "2px",
+      strokeWidth: "2px",
+      cursor: "pointer",
+      marginLeft: "auto",
+      fontSize: "20px"
+    }
   };
-}).withConfig({
-  displayName: "ToastList__CloseIcon",
-  componentId: "sc-ux3rdy-1"
-})(["position:absolute;top:8px;right:8px;font-size:10px;padding:2px;border-radius:2px;stroke-width:2px;&:hover{background-color:", ";}"], (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
-  return props.type;
-}], "#999999", function (color) {
-  return (0, _polished.shade)(0.3, color);
-}));
+});
 var Toast = exports.Toast = function Toast(_ref) {
   var _ref$message = _ref.message,
     message = _ref$message === void 0 ? "[No message]" : _ref$message,
@@ -75,30 +100,44 @@ var Toast = exports.Toast = function Toast(_ref) {
     type = _ref$type === void 0 ? "" : _ref$type,
     closeFunc = _ref.closeFunc,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(ToastBox, {
-    type: type,
-    in: props.in
-  }, /*#__PURE__*/_react.default.createElement(ToastIcon, {
-    type: type
-  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    message: message
-  }), closeFunc ? /*#__PURE__*/_react.default.createElement(CloseIcon, {
-    onClick: closeFunc,
-    type: type
-  }) : null);
+  var classes = useStyles({
+    toastType: type
+  });
+  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    in: props.in,
+    timeout: 300,
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.toastBox
+  }, /*#__PURE__*/_react.default.createElement("span", null, typeof message === "string" ? message : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, message)), closeFunc ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: "close",
+    className: classes.closeIcon,
+    onClick: closeFunc
+  }) : null));
 };
-var ListWrapper = (0, _styledComponents.default)(_reactTransitionGroup.TransitionGroup).withConfig({
-  displayName: "ToastList__ListWrapper",
-  componentId: "sc-ux3rdy-2"
-})(["position:absolute;top:40px;right:16px;display:flex;flex-direction:column;"]);
+__signature__(Toast, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Toast, "useStyles{classes}", function () {
+  return [useStyles];
+});
 var ToastList = exports.ToastList = function ToastList(_ref2) {
   var toasts = _ref2.toasts;
-  return _reactDom.default.createPortal(/*#__PURE__*/_react.default.createElement(ListWrapper, null, toasts.map(function (props, idx) {
+  var classes = useStyles();
+  return _reactDom.default.createPortal(/*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
+    className: classes.listWrapper
+  }, toasts.map(function (props, idx) {
     return /*#__PURE__*/_react.default.createElement(Toast, _extends({
       key: "toast" + idx
     }, props));
   })), portal);
 };
+__signature__(ToastList, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(ToastList, "useStyles{classes}", function () {
+  return [useStyles];
+});
 var _default = ToastList;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
@@ -109,12 +148,8 @@ var _default3 = exports.default = _default2;
     return;
   }
   reactHotLoader.register(portal, "portal", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(toastTransitionTime, "toastTransitionTime", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(ToastBox, "ToastBox", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(ToastIcon, "ToastIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(CloseIcon, "CloseIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(Toast, "Toast", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(ListWrapper, "ListWrapper", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(ToastList, "ToastList", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/ToastList.js");
 })();
@@ -130,12 +165,8 @@ var _default3 = exports.default = _default2;
     return;
   }
   reactHotLoader.register(portal, "portal", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(toastTransitionTime, "toastTransitionTime", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(ToastBox, "ToastBox", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(ToastIcon, "ToastIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(CloseIcon, "CloseIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(Toast, "Toast", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(ListWrapper, "ListWrapper", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(ToastList, "ToastList", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/ToastList.js");
 })();

package/dist/getTheme.js

@@ -72,11 +72,6 @@ var baseTheme = {
       Sale: "sales-scope",
       Dependant: "dependent-scope"
     },
-    // toast: {
-    // 	confirm: "checkmark-circle",
-    // 	warn: "warning",
-    // 	error: "cross-circle",
-    // },
     prev: "arrow-small-left",
     next: "arrow-small-right",
     menu: "app-list",

package/dist/utils/toastHelper.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getToastColor = void 0;
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var getToastColor = exports.getToastColor = function getToastColor(theme, alertType) {
+  var toastBorderColors = {
+    error: theme.palette.error.main,
+    warn: theme.palette.warning.main,
+    confirm: theme.palette.success.main
+  };
+  return toastBorderColors[alertType] || "red";
+};
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.1-dev.5",
+	"version": "5.10.1-dev.7",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/AppFrame/MenuItem.js

@@ -3,15 +3,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import Icon from "../MaterialUI/DataDisplay/Icon";
-
-const getToastColor = (theme, alertType) => {
-	const toastBorderColors = {
-		error: theme.palette.error.main,
-		warn: theme.palette.warning.main,
-		confirm: theme.palette.success.main,
-	};
-	return toastBorderColors[alertType] || "red";
-};
+import { getToastColor } from "../../utils/toastHelper";
 
 const useStyles = makeStyles(theme => ({
 	block: props => ({

package/src/components/MaterialUI/DataDisplay/Table.js

@@ -352,7 +352,11 @@ const DefaultFullTable = React.forwardRef((props, ref) => {
 					context={props.context}
 				/>
 			</TableMui>
-			{props.tableRows.length > 0 ? null : <div className={props.classes.placeholder}>{props.placeholder}</div>}
+			{props.tableRows.length > 0 ? null : (
+				<div className={classNames(props.classes.placeholder, props.customClasses.placeholderContainer)}>
+					{props.placeholder}
+				</div>
+			)}
 		</div>
 	);
 });
@@ -441,6 +445,7 @@ const Table = React.forwardRef(
 		customClasses["tableCell"] = tableProps?.getStyle(TableProps.ruleNames.tableCell) || null;
 		customClasses["headerCell"] = tableProps?.getStyle(TableProps.ruleNames.headerCell) || null;
 		customClasses["tableContainer"] = tableProps?.getStyle(TableProps.ruleNames.tableContainer) || null;
+		customClasses["placeholderContainer"] = tableProps?.getStyle(TableProps.ruleNames.placeholderContainer) || null;
 		customClasses["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
 		customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
 

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -1102,6 +1102,26 @@ describe("Table", () => {
 		expect(placeHolder.length, "to equal", 1);
 	});
 
+	it("Renders Table with placeholder and custom class if rows are empty", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
+
+		const placeholder = <Placeholder />;
+
+		const tableProps = new TableProps();
+		tableProps.setStyle(TableProps.ruleNames.placeholderContainer, "placeholder-container-custom-class");
+
+		const component = <Table rows={rows} headers={headers} placeholder={placeholder} tableProps={tableProps} />;
+
+		const mountedComponent = mount(component);
+
+		const placeHolder = mountedComponent.find(Placeholder);
+		expect(placeHolder.exists(), "to be true");
+
+		const placeholderContainer = placeHolder.parent();
+		expect(placeholderContainer.exists(), "to be true");
+		expect(placeholderContainer.hasClass("placeholder-container-custom-class"), "to be true");
+	});
+
 	it("Renders Table with tableInfo if provided", () => {
 		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
 

package/src/components/MaterialUI/DataDisplay/TableProps.js

@@ -24,6 +24,7 @@ class TableProps extends ComponentProps {
 		tableContainer: "tableContainer",
 		container: "container",
 		table: "table",
+		placeholderContainer: "placeholderContainer",
 	};
 
 	constructor() {
@@ -47,6 +48,7 @@ class TableProps extends ComponentProps {
 		this.componentClasses.set(this.constructor.ruleNames.tableCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.headerCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableContainer, null);
+		this.componentClasses.set(this.constructor.ruleNames.placeholderContainer, null);
 		this.componentClasses.set(this.constructor.ruleNames.container, null);
 		this.componentClasses.set(this.constructor.ruleNames.table, null);
 

package/src/components/MaterialUI/DataDisplay/TableProps.test.js

@@ -12,7 +12,16 @@ describe("TableProps Props", () => {
 			"constrained",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		expect(TableProps.propNames, "to have keys", propNames);
 		expect(TableProps.ruleNames, "to have keys", ruleNames);
@@ -34,7 +43,16 @@ describe("TableProps Props", () => {
 			"saveScrollbarPosition",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		const tableProps = new TableProps();
 

package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js

@@ -69,6 +69,7 @@ const SectionExpansionPanel = ({
 	expansionPanelId,
 	expansionPanelProps,
 	expansionPanelActionsProps,
+	headerClassName,
 }) => {
 	if (isExpansionPanelProps(expansionPanelProps) === false) {
 		throw new TypeError("expansionPanelProps property is not of type ExpansionPanelProps");
@@ -122,7 +123,7 @@ const SectionExpansionPanel = ({
 				expandIcon={<Icon id="dropdown-chevron-down" />}
 				IconButtonProps={defaultSummaryStyles}
 				classes={{
-					root: classNames(classes.summaryRoot, constrained ? classes.constrainedSummaryRoot : ""),
+					root: classNames(classes.summaryRoot, headerClassName, constrained ? classes.constrainedSummaryRoot : ""),
 					expanded: classNames(classes.panelExpanded),
 					content: classNames(classes.summaryContent, constrained ? classes.constrainedSummaryContent : ""),
 					expandIcon: classNames(classes.summaryExpandIconRoot),