pcm-shared-components 0.0.136 → 0.0.139

package/dist/components/Buttons/DropdownButton/index.js

@@ -31,6 +31,7 @@ export const DropdownButton = props => {
     menuData,
     variant,
     size,
+    menuAnchorLocation,
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
@@ -38,7 +39,8 @@ export const DropdownButton = props => {
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(ReusablePopupMenu, _extends({}, menuData, {
-    theme: defaultTheme
+    theme: defaultTheme,
+    menuAnchorLocation: menuAnchorLocation
   }), /*#__PURE__*/React.createElement(Button, {
     variant: variant,
     className: className,
@@ -55,7 +57,8 @@ DropdownButton.defaultProps = {
   color: 'primary',
   className: '',
   variant: 'text',
-  theme: {}
+  theme: {},
+  menuAnchorLocation: 'right'
 };
 DropdownButton.propTypes = {
   /** Name of the till being used. Note: if till name exist then inUse is true */
@@ -77,5 +80,8 @@ DropdownButton.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
 
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
-  theme: PropTypes.object
+  theme: PropTypes.object,
+
+  /** Controls the location of the dropdown popup menu */
+  menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
 };

package/dist/components/Menus/ReusablePopupMenu/components/GenericSubMenu.js

@@ -5,7 +5,6 @@ import { makeStyles } from '@mui/styles';
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Switch from "@mui/material/Switch";
-import withStyles from "@mui/styles/withStyles";
 
 const GenericSubMenu = ({
   menu,
@@ -72,8 +71,8 @@ const GenericSubMenu = ({
     setSubMenuOpen(Boolean(anchorSubMenu));
   }, [anchorSubMenu]);
   return /*#__PURE__*/React.createElement("div", {
-    key: `main_sub_menu_items_${menu.name}`,
-    className: !full_menu ? "flex flex-row w-full" : 'flex flex-col w-full'
+    key: `main_sub_menu_items_${menu.icon}`,
+    className: !full_menu ? "flex flex-row" : 'flex flex-col w-full'
   }, full_menu ? /*#__PURE__*/React.createElement(MenuItem, {
     onClick: openSubMenu
   }, menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement("div", {

package/dist/components/Menus/ReusablePopupMenu/components/ReusableMenu.js

@@ -19,11 +19,11 @@ const StyledMenu = withStyles({
   elevation: 0,
   anchorOrigin: {
     vertical: "bottom",
-    horizontal: "center"
+    horizontal: props.menuAnchorLocation
   },
   transformOrigin: {
     vertical: "top",
-    horizontal: "center"
+    horizontal: props.menuAnchorLocation
   }
 }, props)));
 const StyledMenuItem = withStyles(() => ({
@@ -41,17 +41,28 @@ const StyledMenuItem = withStyles(() => ({
   }
 }))(MenuItem);
 
+const handleMenuOnClick = (menu, handleClose) => {
+  menu.onClick();
+
+  if (typeof menu.isChecked !== "boolean") {
+    //This is NOT a menu with a CheckState SO close the menu after the onclick.
+    handleClose();
+  }
+};
+
 const ReusableMenu = props => {
   const {
     menuAnchor,
     handleClose,
     menuData,
     keepMounted,
-    classes = undefined
+    classes = undefined,
+    menuAnchorLocation
   } = props;
   return /*#__PURE__*/React.createElement(StyledMenu, {
     id: "customized-menu",
     anchorEl: menuAnchor,
+    menuAnchorLocation: menuAnchorLocation,
     keepMounted: keepMounted,
     open: Boolean(menuAnchor),
     onClose: handleClose
@@ -69,7 +80,9 @@ const ReusableMenu = props => {
     onClose: handleClose
   })) : /*#__PURE__*/React.createElement(StyledMenuItem, {
     className: "w-full",
-    onClick: menu.onClick,
+    onClick: () => {
+      handleMenuOnClick(menu, handleClose);
+    },
     key: `reusable_menu_item_${idx}`
   }, menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
     primary: menu.name
@@ -90,12 +103,14 @@ ReusableMenu.defaultProps = {
   menuAnchor: undefined,
   handleClose: undefined,
   menuData: [],
-  keepMounted: false
+  keepMounted: false,
+  menuAnchorLocation: 'center'
 }; // Type of
 
 ReusableMenu.propTypes = {
   menuAnchor: PropTypes.object,
   handleClose: PropTypes.func,
   menuData: PropTypes.array,
-  keepMounted: PropTypes.bool
+  keepMounted: PropTypes.bool,
+  menuAnchorLocation: PropTypes.string
 };

package/dist/components/Menus/ReusablePopupMenu/index.js

@@ -23,6 +23,7 @@ export const ReusablePopupMenu = props => {
     menuData,
     tooltipTitle,
     keepMounted,
+    menuAnchorLocation,
     theme
   } = props;
   const [menuAnchor, setMenuAnchor] = useState(null);
@@ -40,7 +41,8 @@ export const ReusablePopupMenu = props => {
     menuAnchor,
     handleClose,
     menuData,
-    keepMounted
+    keepMounted,
+    menuAnchorLocation
   };
   const childrenWithProps = Children.map(children, child => {
     // Checking isValidElement is the safe way and avoids a typescript
@@ -78,7 +80,8 @@ ReusableMenu.defaultProps = {
   tooltipTitle: '',
   menuData: [],
   keepMounted: false,
-  theme: undefined
+  theme: undefined,
+  menuAnchorLocation: 'center'
 }; // Type of
 
 ReusableMenu.propTypes = {
@@ -90,5 +93,8 @@ ReusableMenu.propTypes = {
   /**
    * The theme object to apply to this object, if no theme provided then the component will used the default theme passed down by the ThemeProvider
    */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+
+  /** Controls the location of the dropdown popup menu */
+  menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.136",
+  "version": "0.0.139",
   "private": false,
   "main": "dist/index.js",
   "babel": {