pcm-shared-components 2.1.107 → 2.1.109

package/dist/components/Layout/SimpleTab/index.js

@@ -1,35 +1,10 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import { ThemeProvider } from '@mui/system';
-import { createTheme, useTheme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
-const useStyles = makeStyles(() => ({
-  root: {
-    height: ({
-      tabHeight
-    }) => tabHeight,
-    minHeight: ({
-      tabHeight
-    }) => tabHeight,
-    backgroundColor: 'transparent'
-    // textTransform: 'none', //changes so the text is not upper cased
-    // color: 'white !important',
-    // '&:focus': {
-    // color: 'orange !important',
-    // },
-  },
-
-  indicator: {
-    height: 3,
-    borderRadius: 25
-    // backgroundColor: 'orange',
-  }
-}));
-
+import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 export const SimpleTab = props => {
   const {
     childrenTabs,
@@ -40,12 +15,10 @@ export const SimpleTab = props => {
     tabsWrapperClassName,
     theme
   } = props;
-  const classes = useStyles({
-    tabHeight: variant === 'dense' ? 24 : 48
-  });
+  const tabHeight = variant === 'dense' ? 24 : 48;
 
-  //Uses the default mui theme if none is passed.
-  const compTheme = theme ? theme : useTheme();
+  // Uses the default MUI theme if none is passed.
+  const compTheme = theme || useTheme();
   const defaultTheme = createTheme(compTheme);
   const handleChange = (event, newValue) => {
     setSelectedTabIndex(newValue);
@@ -56,21 +29,20 @@ export const SimpleTab = props => {
       'aria-controls': `scrollable-auto-tabpanel-${index}`
     };
   };
-  const TabPanel = useCallback(props => {
+  const TabPanel = useCallback(panelProps => {
     const {
       children,
       value,
       index,
       ...other
-    } = props;
+    } = panelProps;
     return /*#__PURE__*/React.createElement("div", _extends({
       role: "tabpanel",
       hidden: value !== index,
       id: `scrollable-auto-tabpanel-${index}`,
       "aria-labelledby": `scrollable-auto-tab-${index}`
     }, other, {
-      className: "w-full h-full overflow-hidden",
-      style: {}
+      className: "w-full h-full overflow-hidden"
     }), value === index && /*#__PURE__*/React.createElement("div", {
       className: "w-full h-full"
     }, children));
@@ -78,7 +50,7 @@ export const SimpleTab = props => {
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col w-full h-full overflow-hidden "
+    className: "flex flex-col w-full h-full overflow-hidden"
   }, /*#__PURE__*/React.createElement(AppBar, {
     position: "static",
     color: "default",
@@ -86,20 +58,32 @@ export const SimpleTab = props => {
   }, /*#__PURE__*/React.createElement("div", {
     className: tabsWrapperClassName
   }, /*#__PURE__*/React.createElement(Tabs, {
-    classes: classes,
     value: selectedTabIndex,
     onChange: handleChange,
     indicatorColor: "primary",
     textColor: "primary",
     variant: "scrollable",
     scrollButtons: "auto",
-    "aria-label": ""
+    "aria-label": "",
+    sx: {
+      minHeight: tabHeight,
+      height: tabHeight,
+      backgroundColor: 'transparent',
+      '& .MuiTab-root': {
+        minHeight: tabHeight,
+        height: tabHeight,
+        textTransform: 'none'
+      },
+      '& .MuiTabs-indicator': {
+        height: 3,
+        borderRadius: 25
+      }
+    }
   }, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
-    classes: classes,
-    style: tabStyles,
+    key: `simple_tabs_${idx}`,
     label: ct.tabTitle
   }, a11yProps(idx), {
-    key: `simple_tabs_${idx}`
+    sx: tabStyles
   })))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
     value: selectedTabIndex,
     index: idx,
@@ -117,31 +101,23 @@ SimpleTab.defaultProps = {
   theme: undefined
 };
 SimpleTab.propTypes = {
-  /** An array of object that determines the tab title and tab content. 
-   * 
-   * - The childrenTabs are object withing an array
-   * 
-   ```
-   [{tabTitle:'something',tabPanel:<Object/>}]
-   ```
-  */
+  /** An array of objects that determines the tab title and tab content.
+   *
+   * - The childrenTabs are objects within an array
+   *
+   *  [{tabTitle:'something', tabPanel:<Object/>}]
+   */
   childrenTabs: PropTypes.array,
-  /** Controls the heigh and spacing of the tab control */
+  /** Controls the height and spacing of the tab control */
   variant: PropTypes.oneOf(['dense', 'normal']),
-  /** Is the index value of the current selected tab */
+  /** Index value of the currently selected tab */
   selectedTabIndex: PropTypes.number,
-  /** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
+  /** Setter for selectedTabIndex: receives the `value` of the index */
   setSelectedTabIndex: PropTypes.func,
-  /** Additional classes passed to the Div wrapper of the <Tabs></Tabs> component.
-  * Example: 
-  *  - Center tabs 'flex flex-row justify-center w-full'
-  *  - Right tabs 'flex flex-row justify-end w-full'
-  *  - Gray background 'bg-gray-200'
-  */
+  /** Additional classes passed to the div wrapper of the <Tabs /> component. */
   tabsWrapperClassName: PropTypes.string,
-  /** Additional styles to be applied to the Tab component 
-   * Example: {margin:'auto'} */
+  /** Additional styles to be applied to the Tab component, e.g. { margin: 'auto' } */
   tabStyles: PropTypes.object,
-  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+  /** Theme object to use on this component; if none provided, the MUI theme from context is used */
   theme: PropTypes.object
 };

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

@@ -1,37 +1,41 @@
 import React from 'react';
-import withStyles from "@mui/styles/withStyles";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Switch from "@mui/material/Switch";
-import PropTypes from "prop-types";
-import GenericSubMenu from './GenericSubMenu';
-const StyledMenu = withStyles({
-  paper: {
-    border: "1px solid #d3d4d5",
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import SubMenuInternal from './SubMenuInternal';
+const StyledMenu = styled(Menu)(({
+  theme
+}) => ({
+  '& .MuiPaper-root': {
+    border: '1px solid #d3d4d5',
     paddingTop: 4,
     paddingBottom: 4
   }
-})(props => /*#__PURE__*/React.createElement(Menu, props));
-const StyledMenuItem = withStyles(() => ({
-  root: {
-    minHeight: 32,
-    paddingLeft: 12,
-    paddingRight: 12,
-    minWidth: '100% !important',
-    "&:focus": {
-      backgroundColor: "primary",
-      "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
-        color: "primary"
-      }
+}));
+const StyledMenuItem = styled(MenuItem)(({
+  theme
+}) => ({
+  minHeight: 32,
+  paddingLeft: 12,
+  paddingRight: 12,
+  minWidth: '100% !important',
+  '&:focus': {
+    backgroundColor: theme.palette.primary.main,
+    '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+      color: theme.palette.primary.main
     }
   }
-}))(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.
+  if (typeof menu.onClick === 'function') {
+    menu.onClick();
+  }
+  if (typeof menu.isChecked !== 'boolean') {
+    // This is NOT a menu with a CheckState so close the menu after the onclick.
     handleClose();
   }
 };
@@ -39,7 +43,7 @@ const ReusableMenu = props => {
   const {
     menuAnchor,
     handleClose,
-    menuData,
+    menuData = [],
     keepMounted,
     classes = undefined,
     menuAnchorLocation
@@ -49,11 +53,11 @@ const ReusableMenu = props => {
     elevation: 0,
     anchorEl: menuAnchor,
     anchorOrigin: {
-      vertical: "bottom",
+      vertical: 'bottom',
       horizontal: menuAnchorLocation
     },
     transformOrigin: {
-      vertical: "top",
+      vertical: 'top',
       horizontal: menuAnchorLocation
     },
     keepMounted: keepMounted,
@@ -63,17 +67,17 @@ const ReusableMenu = props => {
     className: "w-full",
     key: `ReusableMenu_${idx}`
   }, menu.name && /*#__PURE__*/React.createElement("div", {
-    key: 'this_menu_' + idx
+    key: `this_menu_${idx}`
   }, menu.subMenu ? /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row w-full",
-    key: `main_sub_items_${new Date()}`
-  }, /*#__PURE__*/React.createElement(GenericSubMenu, {
+    key: `main_sub_items_${idx}`
+  }, /*#__PURE__*/React.createElement(SubMenuInternal, {
     key: `common_grid_app_bar_sub_desktop_${idx}`,
     menu: menu,
     full_menu: true,
     classes: classes,
     onClose: handleClose
-  })) : /*#__PURE__*/React.createElement(StyledMenuItem, {
+  })) : /*#__PURE__*/React.createElement(MenuItem, {
     className: "w-full",
     onClick: () => {
       handleMenuOnClick(menu, handleClose);
@@ -81,33 +85,29 @@ const ReusableMenu = props => {
     key: `reusable_menu_item_${idx}`
   }, menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
     primary: menu.name
-  }), typeof menu.isChecked === "boolean" && /*#__PURE__*/React.createElement(Switch, {
+  }), typeof menu.isChecked === 'boolean' && /*#__PURE__*/React.createElement(Switch, {
     checked: menu.isChecked
   }))))));
 };
-export default ReusableMenu;
 
-// required props for component to work...
-ReusableMenu.propTypes = {
-  menuAnchor: PropTypes.element.isRequired,
-  handleClose: PropTypes.element.isRequired,
-  menuData: PropTypes.element.isRequired
-};
+// ReusableMenu.defaultProps = {
+//   menuAnchor: undefined,
+//   handleClose: undefined,
+//   menuData: [],
+//   keepMounted: false,
+//   menuAnchorLocation: 'center',
+// };
 
-// Specifies the default values for the props:
-ReusableMenu.defaultProps = {
-  menuAnchor: undefined,
-  handleClose: undefined,
-  menuData: [],
-  keepMounted: false,
-  menuAnchorLocation: 'center'
-};
+// ReusableMenu.propTypes = {
+//   menuAnchor: PropTypes.oneOfType([
+//     PropTypes.element,
+//     PropTypes.object,
+//   ]),
+//   handleClose: PropTypes.func,
+//   menuData: PropTypes.array,
+//   keepMounted: PropTypes.bool,
+//   menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right']),
+//   classes: PropTypes.object,
+// };
 
-// Type of
-ReusableMenu.propTypes = {
-  menuAnchor: PropTypes.object,
-  handleClose: PropTypes.func,
-  menuData: PropTypes.array,
-  keepMounted: PropTypes.bool,
-  menuAnchorLocation: PropTypes.string
-};
+export default ReusableMenu;

package/dist/components/Menus/ReusablePopupMenu/components/{GenericSubMenu.js → SubMenuInternal.js}

@@ -1,90 +1,54 @@
 import React, { useState, useEffect } from 'react';
-import { Tooltip, IconButton, MenuItem, Menu } from "@mui/material";
+import { Tooltip, IconButton, MenuItem, Menu } from '@mui/material';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { makeStyles } from '@mui/styles';
-import withStyles from "@mui/styles/withStyles";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Switch from "@mui/material/Switch";
-const StyledMenuItem = withStyles(() => ({
-  root: {
-    minHeight: 32,
-    paddingLeft: 12,
-    paddingRight: 12,
-    minWidth: '100% !important',
-    "&:focus": {
-      backgroundColor: "primary",
-      "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
-        color: "primary"
-      }
-    }
-  }
-}))(MenuItem);
-const GenericSubMenu = ({
-  menu,
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import { styled } from '@mui/material/styles';
+
+// const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+//     minHeight: 32,
+//     paddingLeft: 12,
+//     paddingRight: 12,
+//     minWidth: '100% !important',
+//     '&:focus': {
+//         backgroundColor: theme.palette.primary.main,
+//         '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+//             color: theme.palette.primary.main,
+//         },
+//     },
+// }));
+
+function SubMenuInternal({
+  menu = [],
   full_menu = true,
   handleParentMenuClose = undefined,
-  onClose
-}) => {
-  const [anchorSubMenu, setAnchorSubMenu] = useState(false);
+  onClose = () => {}
+}) {
+  const [anchorSubMenu, setAnchorSubMenu] = useState(null);
   const [isSubMenuOpen, setSubMenuOpen] = useState(false);
-  const useStyles = makeStyles(theme => ({
-    root: {
-      flexGrow: 1
-    },
-    menuButton: {
-      marginLeft: -18,
-      fontSize: 20
-    },
-    appContextMenu: {
-      background: "#58524c"
-    },
-    grow: {
-      flexGrow: 1
-    },
-    divider: {
-      borderLeft: "0.1em solid #aeaeae",
-      padding: "0.5em",
-      margin: "10px 10px 10px 10px",
-      height: 5
-    },
-    mobile_divider: {
-      borderBottom: "0.1em solid #aeaeae",
-      width: "100%"
-    },
-    sectionDesktop: {
-      display: "none",
-      [theme.breakpoints.up("md")]: {
-        display: "flex"
-      }
-    },
-    sectionMobile: {
-      display: "flex",
-      [theme.breakpoints.up("md")]: {
-        display: "none"
-      }
-    }
-  }));
-  const classes = useStyles();
+  const menuId = `menu-appbar-${menu?.name || 'submenu'}`;
   const openSubMenu = event => {
     setAnchorSubMenu(event.currentTarget);
   };
   const handleSubMenuClose = () => {
-    setAnchorSubMenu(false);
+    setAnchorSubMenu(null);
 
-    //Closes the previous parent menu too..
+    // Closes the previous parent menu too..
     if (handleParentMenuClose) {
       handleParentMenuClose();
     }
-    onClose();
+    if (onClose) {
+      onClose();
+    }
   };
   useEffect(() => {
     setSubMenuOpen(Boolean(anchorSubMenu));
   }, [anchorSubMenu]);
   return /*#__PURE__*/React.createElement("div", {
     key: `main_sub_menu_items_${menu.icon}`,
-    className: !full_menu ? "flex flex-row" : 'flex flex-col w-full'
-  }, full_menu ? /*#__PURE__*/React.createElement(StyledMenuItem, {
+    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", {
     className: "flex flex-row justify-between w-full"
@@ -97,15 +61,20 @@ const GenericSubMenu = ({
   })))) : /*#__PURE__*/React.createElement(Tooltip, {
     title: menu.name
   }, /*#__PURE__*/React.createElement(IconButton, {
-    className: classes.menuButton,
+    sx: {
+      ml: -2.25,
+      fontSize: 20
+    } // replaces classes.menuButton
+    ,
     color: "inherit",
-    "aria-owns": "menu-appbar",
+    "aria-controls": isSubMenuOpen ? menuId : undefined,
+    "aria-haspopup": "true",
     onClick: openSubMenu
   }, menu.icon)), /*#__PURE__*/React.createElement(Menu, {
-    className: "",
+    id: menuId,
     style: {
       display: anchorSubMenu ? 'block' : 'none'
-    } //Makes the disappearing menu smoother so I don't see it being jarred in a corner.
+    } // Makes the disappearing menu smoother
     ,
     anchorEl: anchorSubMenu,
     anchorOrigin: {
@@ -120,14 +89,14 @@ const GenericSubMenu = ({
     onClose: handleSubMenuClose,
     onClick: menu.onClick
   }, (menu.subMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((sub_menu, idx) => /*#__PURE__*/React.createElement("div", {
-    key: 'this_submenu_' + idx
-  }, sub_menu.subMenu ? /*#__PURE__*/React.createElement(GenericSubMenu, {
+    key: `this_submenu_${idx}`
+  }, sub_menu.subMenu ? /*#__PURE__*/React.createElement(SubMenuInternal, {
     key: `app_bar_common_grid_app_bar_sub_desktop_sub_${idx}`,
     menu: sub_menu,
-    classes: classes,
     full_menu: true,
-    handleParentMenuClose: handleSubMenuClose
-  }) : /*#__PURE__*/React.createElement(StyledMenuItem, {
+    handleParentMenuClose: handleSubMenuClose,
+    onClose: onClose
+  }) : /*#__PURE__*/React.createElement(MenuItem, {
     key: `sub_menu_items__${idx}}`,
     onClick: () => {
       handleSubMenuClose();
@@ -135,8 +104,9 @@ const GenericSubMenu = ({
     }
   }, sub_menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, sub_menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
     primary: sub_menu.name
-  }), typeof sub_menu.isChecked === "boolean" && /*#__PURE__*/React.createElement(Switch, {
+  }), typeof sub_menu.isChecked === 'boolean' && /*#__PURE__*/React.createElement(Switch, {
     checked: sub_menu.isChecked
   }))))));
-};
-export default GenericSubMenu;
+}
+;
+export default SubMenuInternal;

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

@@ -0,0 +1,98 @@
+import React, { useState, Children, isValidElement, cloneElement } from 'react';
+import ReusableMenu from './components/ReusableMenu';
+import Tooltip from '@mui/material/Tooltip';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+/**
+ * Wraps any simple component and generates a simple dropdown menu on the wrapped component.
+ * 
+ *
+ * ### Importing the component
+
+```//PitchCamp shared component
+import {ReusablePopupMenu} from 'pcm-shared-components';
+```
+
+ * 
+ */
+export const ReusablePopupMenu = props => {
+  const {
+    children,
+    menuData = [],
+    tooltipTitle,
+    keepMounted,
+    menuAnchorLocation,
+    theme
+  } = props;
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const componentTheme = createTheme(theme ? theme : useTheme());
+  const onClick = event => {
+    setMenuAnchor(event.currentTarget);
+  };
+  const handleClose = () => {
+    setMenuAnchor(null);
+  };
+  const hocProps = {
+    menuAnchor,
+    handleClose,
+    menuData,
+    keepMounted,
+    menuAnchorLocation
+  };
+  console.log('debug menuData', menuData);
+  const childrenWithProps = Children.map(children, child => {
+    // Checking isValidElement is the safe way and avoids a typescript
+    if (/*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: tooltipTitle.length > 0 ? tooltipTitle : ''
+      }, /*#__PURE__*/cloneElement(child, {
+        onClick
+      }));
+    }
+    return child;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, childrenWithProps, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: componentTheme
+  }, /*#__PURE__*/React.createElement(ReusableMenu, hocProps)));
+};
+
+// required props for component to work...
+ReusablePopupMenu.propTypes = {
+  children: PropTypes.element.isRequired,
+  menuData: PropTypes.element.isRequired
+};
+
+// Specifies the default values for the props:
+ReusablePopupMenu.defaultProps = {
+  children: undefined,
+  tooltipTitle: '',
+  menuData: [],
+  keepMounted: false,
+  theme: undefined,
+  menuAnchorLocation: 'center'
+};
+
+// Type of
+ReusablePopupMenu.propTypes = {
+  children: PropTypes.object,
+  tooltipTitle: PropTypes.string,
+  menuData: PropTypes.array,
+  keepMounted: PropTypes.bool,
+  /**
+   * 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,
+  /** Controls the location of the dropdown popup menu */
+  menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
+};
+export default ReusablePopupMenu;
+export const createReusablePopupMenuObject = (onClick = undefined, icon = undefined, name = undefined, isChecked = undefined) => {
+  return {
+    onClick: onClick,
+    icon: icon,
+    name: name,
+    isChecked: isChecked
+  };
+};