@fixefy/fixefy-ui-components 0.3.108 → 0.3.110

package/dist/fixefy-ui-components/src/FxAvatar/FxAvatar.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxAvatar", {
+    enumerable: true,
+    get: function() {
+        return FxAvatar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _stringToColor = require("./helpers/stringToColor");
+const _avatarstyles = require("./styles/avatar.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function FxAvatar({ users, max = 5, isEditable = false, onEdit }) {
+    const [backgroundcolors, setBackgroundColors] = (0, _react.useState)({});
+    const avatars = users.length > max ? users.slice(0, max - 1) : users;
+    const isMoreThanMax = users.length > max;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_avatarstyles.AvatarWrapper, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_avatarstyles.AvatarGroup, {
+                children: [
+                    avatars.map((user, index)=>{
+                        const userName = user.first_name + ' ' + user.last_name;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_avatarstyles.FxTooltip, {
+                            title: (0, _fixefyuiutils.titleCase)(userName),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_avatarstyles.StyledAvatar, {
+                                sx: {
+                                    backgroundColor: backgroundcolors[userName] ? backgroundcolors[userName] : (0, _stringToColor.stringToColor)(userName, (color)=>{
+                                        setBackgroundColors(_object_spread_props(_object_spread({}, backgroundcolors), {
+                                            [userName]: color
+                                        }));
+                                    })
+                                },
+                                src: user.image_url,
+                                alt: userName,
+                                children: (0, _fixefyuiutils.titleCase)(userName.slice(0, 1))
+                            })
+                        }, index);
+                    }),
+                    isMoreThanMax && /*#__PURE__*/ (0, _jsxruntime.jsx)(_avatarstyles.StyledMoreAvatar, {
+                        children: `+${users.length - max + 1}`
+                    })
+                ]
+            }),
+            isEditable && /*#__PURE__*/ (0, _jsxruntime.jsx)(_avatarstyles.EditIcon, {
+                onClick: onEdit && onEdit
+            })
+        ]
+    });
+}

package/dist/fixefy-ui-components/src/FxAvatar/helpers/stringToColor.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "stringToColor", {
+    enumerable: true,
+    get: function() {
+        return stringToColor;
+    }
+});
+const stringToColor = (string, callBack)=>{
+    let hash = 0;
+    let color = '#';
+    for(let i = 0; i < string.length; i += 1){
+        hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    for(let i = 0; i < 3; i += 1){
+        const value = hash >> i * 8 & 0xff;
+        color += `00${value.toString(16)}`.substr(-2);
+    }
+    callBack && callBack(color);
+    return color;
+};

package/dist/fixefy-ui-components/src/FxAvatar/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AvatarPropsType: function() {
+        return _FxAvatar.AvatarPropsType;
+    },
+    BackgroundColorsType: function() {
+        return _FxAvatar.BackgroundColorsType;
+    },
+    FxAvatar: function() {
+        return _FxAvatar.FxAvatar;
+    }
+});
+const _FxAvatar = require("./FxAvatar");

package/dist/fixefy-ui-components/src/FxAvatar/styles/avatar.styles.js

@@ -0,0 +1,233 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AvatarGroup: function() {
+        return AvatarGroup;
+    },
+    AvatarWrapper: function() {
+        return AvatarWrapper;
+    },
+    EditIcon: function() {
+        return EditIcon;
+    },
+    FxTooltip: function() {
+        return FxTooltip;
+    },
+    StyledAvatar: function() {
+        return StyledAvatar;
+    },
+    StyledMoreAvatar: function() {
+        return StyledMoreAvatar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styles = require("@mui/material/styles");
+const _Avatar = /*#__PURE__*/ _interop_require_default(require("@mui/material/Avatar"));
+const _Tooltip = /*#__PURE__*/ _interop_require_wildcard(require("@mui/material/Tooltip"));
+const _EditOutlined = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/EditOutlined"));
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(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(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const AvatarWrapper = (0, _styles.styled)('div')(()=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row'
+    }));
+const AvatarGroup = (0, _styles.styled)('div')(()=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        '&>:first-of-type': {
+            marginLeft: 0
+        }
+    }));
+const StyledAvatar = (0, _styles.styled)(_Avatar.default)(({ theme })=>({
+        width: 32,
+        height: 32,
+        border: `2px solid ${theme.palette.common.white}`,
+        marginLeft: '-8px',
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 14,
+        lineHeight: '20px',
+        letterSpacing: '0.15px'
+    }));
+const StyledMoreAvatar = (0, _styles.styled)(_Avatar.default)(({ theme })=>({
+        width: 32,
+        height: 32,
+        border: `2px solid ${theme.palette.common.white}`,
+        marginLeft: '-8px',
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: '0.1px',
+        color: theme.palette.greyscale.dark,
+        backgroundColor: theme.palette.greyscale.light
+    }));
+const EditIcon = (0, _styles.styled)(_EditOutlined.default)(({ theme })=>({
+        cursor: 'pointer',
+        color: theme.palette.primary.light
+    }));
+const FxTooltip = (0, _styles.styled)((_param)=>{
+    var { className } = _param, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, _object_spread_props(_object_spread({}, props), {
+        placement: "top",
+        arrow: true,
+        classes: {
+            popper: className
+        }
+    }));
+})(({ theme })=>({
+        [`& .${_Tooltip.tooltipClasses.arrow}`]: {
+            color: theme.palette.primary.main
+        },
+        [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
+            backgroundColor: theme.palette.primary.main,
+            padding: 12,
+            fontFamily: 'Open Sans',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            fontSize: 14,
+            lineHeight: '20px',
+            textAlign: 'center',
+            letterSpacing: '0.15px'
+        }
+    }));

package/dist/fixefy-ui-components/src/FxButton/FxButton.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxButton", {
+    enumerable: true,
+    get: function() {
+        return FxButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _buttonstyles = require("./styles/button.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function FxButton(_param) {
+    var { type = 'primary', children } = _param, rest = _object_without_properties(_param, [
+        "type",
+        "children"
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_buttonstyles.ButtonStyled, _object_spread_props(_object_spread({}, rest), {
+        children: children
+    }));
+}

package/dist/fixefy-ui-components/src/FxButton/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ButtonPropsType: function() {
+        return _FxButton.ButtonPropsType;
+    },
+    FxButton: function() {
+        return _FxButton.FxButton;
+    }
+});
+const _FxButton = require("./FxButton");

package/dist/fixefy-ui-components/src/FxButton/styles/button.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ButtonStyled", {
+    enumerable: true,
+    get: function() {
+        return ButtonStyled;
+    }
+});
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
+const _styles = require("@mui/material/styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ButtonStyled = (0, _styles.styled)(_Button.default)(({ theme, variant })=>{
+    const border = variant === 'text' ? '0px solid #0000' : `1px solid ${theme.palette.primary.main}`;
+    return {
+        border,
+        minHeight: '40px',
+        borderRadius: '100px',
+        minWidth: '87px',
+        fontSize: '12px',
+        letterSpacing: '0.5px'
+    };
+});

package/dist/fixefy-ui-components/src/FxButtonModalWithComponent/FxButtonModalWithComponent.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxButtonModalWithComponent", {
+    enumerable: true,
+    get: function() {
+        return FxButtonModalWithComponent;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Fade = /*#__PURE__*/ _interop_require_default(require("@mui/material/Fade"));
+const _Menu = /*#__PURE__*/ _interop_require_default(require("@mui/material/Menu"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _FxStyledButton = require("../FxStyledButton");
+function _interop_require_default(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(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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;
+}
+const FxButtonModalWithComponent = ({ assetUrl, btnType = 'text', btnValue, modalData, onClick, disabled, startIcon, endIcon, sx, iconSize })=>{
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [AnchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const handleClick = (e)=>{
+        if (onClick) {
+            onClick();
+            setIsOpen((prev)=>!prev);
+            setAnchorEl(e.currentTarget);
+        } else {
+            setIsOpen((prev)=>!prev);
+            setAnchorEl(e.currentTarget);
+        }
+    };
+    const handleClose = ()=>{
+        setIsOpen(false);
+        setAnchorEl(null);
+    };
+    (0, _react.useEffect)(()=>{
+        setIsOpen(false);
+    }, [
+        btnValue
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStyledButton.FxStyledButton, {
+                assetUrl: assetUrl,
+                sx: sx,
+                btnType: btnType,
+                btnValue: btnValue,
+                onClick: handleClick,
+                startIcon: startIcon,
+                endIcon: endIcon,
+                disabled: disabled,
+                iconSize: iconSize || 20
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Menu.default, {
+                id: "fade-menu",
+                MenuListProps: {
+                    'aria-labelledby': 'fade-button'
+                },
+                sx: {
+                    '& .MuiList-root': {
+                        padding: 0,
+                        paddingTop: 0,
+                        paddingBottom: 0
+                    }
+                },
+                anchorEl: AnchorEl,
+                open: isOpen,
+                onClose: handleClose,
+                TransitionComponent: _Fade.default,
+                children: isOpen && modalData
+            })
+        ]
+    });
+};