pcm-shared-components 2.1.107 → 2.1.108

package/README.md

@@ -37,4 +37,24 @@ sh ./publish.sh
 
 # Update the remote Library
 
-```npm run bump``` - This will bump the version of the library and push it to the remote repository.
+```npm run bump``` - This will bump the version of the library and push it to the remote repository.
+
+
+# Upgraded Node Modules to 20 (Nov 15, 2025)
+
+Steps needed to upgrade node modules to version 20 on your local machine:
+- delete the node_modules folder
+- delete package-lock.json
+- nvm install 20
+- nvm alias default 20
+- nvm use 20
+- echo "20" > .nvmrc
+- nvm use
+- npm install
+- npm start
+
+
+# Storybook Upgrade
+
+I tried to upgrade to the latest version 10 but it needs react 18 which I'm not ready to do yet.
+So for now i'm sticking with version 6.

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

@@ -1,12 +1,10 @@
 import React, { memo } from 'react';
-import { makeStyles } from '@mui/styles';
 import Fab from '@mui/material/Fab';
 import PropTypes from 'prop-types';
 import Tooltip from '@mui/material/Tooltip';
 import clsx from 'clsx';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { ThemeProvider } from '@mui/system';
-import { createTheme, useTheme } from '@mui/material/styles';
+import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 const getSize = size => {
   switch (size) {
     case 'x-small':
@@ -16,7 +14,6 @@ const getSize = size => {
     case 'medium':
       return 48;
     case 'large':
-      return 56;
     default:
       return 56;
   }
@@ -26,74 +23,12 @@ const getPadding = size => {
     case 'x-small':
       return '0px 8px 0px 8px';
     case 'small':
-      return '0px 16px 0px 16px';
     case 'medium':
-      return '0px 16px 0px 16px';
     case 'large':
-      return '0px 16px 0px 16px';
     default:
       return '0px 16px 0px 16px';
   }
 };
-const useStyles = makeStyles(() => ({
-  rootFabElement: {
-    margin: 2,
-    borderRadius: ({
-      borderRadius
-    }) => borderRadius,
-    height: ({
-      size
-    }) => getSize(size),
-    minHeight: ({
-      size
-    }) => getSize(size),
-    width: ({
-      size,
-      buttonText
-    }) => buttonText.length === 0 ? getSize(size) : 'auto',
-    minWidth: ({
-      size,
-      buttonText
-    }) => buttonText.length === 0 ? getSize(size) : 'auto',
-    padding: ({
-      size
-    }) => getPadding(size),
-    backgroundColor: ({
-      backgroundColor
-    }) => backgroundColor,
-    '&:hover': {
-      background: ({
-        hoverBackgroundColor
-      }) => hoverBackgroundColor,
-      color: ({
-        hoverTextColor
-      }) => hoverTextColor
-    },
-    boxShadow: ({
-      boxShadow
-    }) => boxShadow ? '' : 'none',
-    color: ({
-      textColor
-    }) => textColor
-  },
-  Icon: {
-    width: ({
-      iconSize
-    }) => iconSize,
-    height: ({
-      iconSize
-    }) => iconSize,
-    // width: ({iconSize}) => `${iconSize}px !important`,
-    // height: ({iconSize}) => `${iconSize}px !important`,
-    marginTop: 'auto',
-    marginBottom: 'auto'
-  },
-  buttonText: {
-    fontSize: ({
-      buttonFontSize
-    }) => buttonFontSize
-  }
-}));
 export const CustomFab = props => {
   const {
     onClick,
@@ -108,11 +43,20 @@ export const CustomFab = props => {
     boxShadow,
     borderRadius,
     iconLocation,
+    iconSize,
+    buttonFontSize,
+    hoverBackgroundColor,
+    textColor,
+    hoverTextColor,
     theme
   } = props;
-  const compTheme = theme ? theme : useTheme();
+  const compTheme = theme || useTheme();
   const defaultTheme = createTheme(compTheme);
-  const classes = useStyles(props);
+  const hasText = buttonText && buttonText.length > 0;
+  const fabSizeValue = getSize(size);
+
+  // Map custom 'x-small' to a valid MUI size for the Fab itself
+  const muiFabSize = size === 'x-small' ? 'small' : size;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(Tooltip, {
@@ -122,21 +66,44 @@ export const CustomFab = props => {
         padding: 4
       }
     }, tooltipText) : undefined,
-    disableHoverListener: !tooltipText || tooltipText.length === 0 ? true : false
+    disableHoverListener: !tooltipText || tooltipText.length === 0
   }, /*#__PURE__*/React.createElement(Fab, {
-    size: size,
-    color: backgroundColor ? backgroundColor : color,
+    size: muiFabSize,
+    color: backgroundColor ? undefined : color,
     "aria-label": "add",
-    className: clsx(classes.rootFabElement, className),
-    variant: buttonText && buttonText.length > 0 ? 'extended' : variant,
-    onClick: onClick
+    className: clsx(className),
+    variant: hasText ? 'extended' : variant,
+    onClick: onClick,
+    sx: {
+      m: 0.5,
+      borderRadius: borderRadius,
+      height: fabSizeValue,
+      minHeight: fabSizeValue,
+      width: hasText ? 'auto' : fabSizeValue,
+      minWidth: hasText ? 'auto' : fabSizeValue,
+      padding: getPadding(size),
+      backgroundColor: backgroundColor,
+      '&:hover': {
+        background: hoverBackgroundColor,
+        color: hoverTextColor
+      },
+      boxShadow: boxShadow ? undefined : 'none',
+      color: textColor
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: `flex ${iconLocation === 'left' ? 'flex-row' : 'flex-row-reverse'}`
+    className: clsx('flex', iconLocation === 'left' ? 'flex-row' : 'flex-row-reverse')
   }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    className: classes.Icon
-  }), buttonText && buttonText.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: clsx('mx-6 my-auto', classes.buttonText)
-  }, " ", buttonText)))));
+    className: "my-auto",
+    sx: {
+      width: iconSize,
+      height: iconSize
+    }
+  }), hasText && /*#__PURE__*/React.createElement("div", {
+    className: "mx-6 my-auto",
+    style: {
+      fontSize: buttonFontSize
+    }
+  }, buttonText)))));
 };
 export default /*#__PURE__*/memo(CustomFab);
 CustomFab.defaultProps = {
@@ -161,26 +128,26 @@ CustomFab.defaultProps = {
 };
 CustomFab.propTypes = {
   /** onClick function passed to the button */
-  onClick: PropTypes.object,
-  /** Icon to be used in the button */
-  Icon: PropTypes.element,
+  onClick: PropTypes.func,
+  /** Icon component to be used in the button */
+  Icon: PropTypes.elementType,
   /** Controls the size of the icon in pixels */
   iconSize: PropTypes.number,
   /** Controls the border radius of the button's rounded ends */
   borderRadius: PropTypes.number,
   /** Text inside of the button */
   buttonText: PropTypes.string,
-  //** Font size of the button text */
+  /** Font size of the button text */
   buttonFontSize: PropTypes.number,
   /** Either [circular or extended] if including text */
   variant: PropTypes.oneOf(['extended', 'circular']),
-  /** Either [left or right] controls the location of the icon*/
+  /** Either [left or right] controls the location of the icon */
   iconLocation: PropTypes.oneOf(['left', 'right']),
   /** The text to display in the tooltip */
   tooltipText: PropTypes.string,
-  /** Display the drop shadow or not [none or undefined] */
+  /** Display the drop shadow or not */
   boxShadow: PropTypes.bool,
-  /** Background color */
+  /** Background color (overrides MUI color prop) */
   backgroundColor: PropTypes.string,
   /** On hover background color. */
   hoverBackgroundColor: PropTypes.string,
@@ -188,12 +155,12 @@ CustomFab.propTypes = {
   textColor: PropTypes.string,
   /** The color of the text and icon on hover */
   hoverTextColor: PropTypes.string,
-  /** Size of the FAB icon ['small','medium','large'] */
+  /** Size of the FAB icon ['x-small','small','medium','large'] */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
   /** Classes to override */
   className: PropTypes.string,
   /** Theme colors if not using backgroundColor ['primary','secondary'] */
   color: PropTypes.oneOf(['primary', 'secondary']),
-  /** 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 then the MUI theme provider theme is used */
   theme: PropTypes.object
 };

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

@@ -1,4 +1,4 @@
-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, { memo } from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';