@fixefy/fixefy-ui-components 0.3.38 → 0.3.40

package/dist/FxObjStaticDropdown/styles/dropdown.styles.js

@@ -0,0 +1,211 @@
+"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, {
+    InputWrapper: function() {
+        return InputWrapper;
+    },
+    Loading: function() {
+        return Loading;
+    },
+    Root: function() {
+        return Root;
+    },
+    StyledListBox: function() {
+        return StyledListBox;
+    }
+});
+const _styles = require("@mui/material/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 _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;
+}
+const Root = (0, _styles.styled)('div')(({ props })=>{
+    return _object_spread_props(_object_spread({
+        color: 'rgba(0,0,0,.85)',
+        fontSize: 14,
+        background: '#FFFFFF',
+        padding: '0 16px',
+        position: 'relative',
+        ' & .MuiBox-root': {
+            ['& > div']: {
+                padding: 0
+            }
+        },
+        minWidth: 270
+    }, props), {
+        width: 'min-content'
+    });
+});
+const Loading = (0, _styles.styled)('div')(()=>({
+        width: 30,
+        height: 30,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ['& span']: {
+            width: '20px !important',
+            height: '20px !important'
+        }
+    }));
+const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=>{
+    const disabledBorder = `1px solid ${theme.palette.greyscale[200]}`;
+    const activeBorder = `1px solid ${theme.palette.primary[500]}`;
+    return {
+        backgroundColor: theme.palette.common.white,
+        borderRadius: 4,
+        padding: 1,
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        width: '100%',
+        border: 'none !important',
+        outline: 'none !important',
+        ['&:hover']: {
+            border: disabled ? disabledBorder : activeBorder,
+            borderRadius: 4
+        },
+        ['&:focus']: {
+            border: disabled ? disabledBorder : activeBorder,
+            borderRadius: 4
+        },
+        ['& > svg']: {
+            color: disabled ? theme.palette.greyscale[300] : theme.palette.primary['500'],
+            marginRight: 8
+        },
+        ['& input']: _object_spread_props(_object_spread({
+            border: 'none',
+            outline: 'none',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            backgroundColor: theme.palette.common.white,
+            color: theme.palette.typography.title,
+            height: 36,
+            boxSizing: 'border-box',
+            width: 0,
+            minWidth: 30,
+            flexGrow: 1,
+            margin: 0
+        }, theme.typography.body1), {
+            lineHeight: '20px',
+            ['& ::placeholder']: {
+                color: hasValue ? theme.palette.typography.title : theme.palette.greyscale[400]
+            }
+        })
+    };
+});
+const StyledListBox = (0, _styles.styled)('ul')(({ theme })=>{
+    return {
+        margin: 0,
+        padding: '8px 0px',
+        listStyle: 'none',
+        backgroundColor: theme.palette.common.white,
+        overflow: 'auto',
+        zIndex: 1,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflowX: 'hidden',
+        minWidth: 270,
+        '&::-webkit-scrollbar': {
+            width: '8px',
+            backgroundColor: 'transparent'
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#8B9092',
+            borderRadius: '8px'
+        },
+        // To support Firefox
+        scrollbarWidth: 'thin',
+        scrollbarColor: '#8B9092 transparent',
+        maxHeight: '300px',
+        overflowY: 'auto',
+        ['& div']: {
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            margin: 'auto 0'
+        },
+        ['& li']: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            height: 40,
+            cursor: 'pointer',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            width: '100%',
+            minWidth: 270,
+            marginBottom: 2
+        },
+        ['& li:hover']: {
+            backgroundColor: '#F6F9FA'
+        },
+        ["& li[aria-selected='true']"]: {
+            fontWeight: 900,
+            backgroundColor: '#F6F9FA'
+        },
+        ["& li[data-focus='true']"]: {
+            backgroundColor: '#F6F9FA',
+            cursor: 'pointer',
+            ['& svg ']: {
+                color: 'currentColor'
+            }
+        }
+    };
+});

package/dist/FxStrStaticDropdown/FxStrStaticDropdown.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface StaticDropdownStylesOptions {
+    width?: string | number;
+    maxWidth?: string | number;
+    inputSx?: object;
+    menuSx?: object;
+}
+export type StaticDropdownPropsType = {
+    initialValue?: string | any;
+    styles?: StaticDropdownStylesOptions;
+    multiple?: boolean;
+    onAdd?: (value: any) => void;
+    onRemoveOne?: (value: any) => void;
+    onRemoveAll?: () => void;
+    type?: 'checkbox' | 'text';
+    modal_type?: string;
+    name: string;
+    query: string;
+    isInitialOpen?: boolean;
+    placeholder?: string;
+    data: string[];
+    rootStylesOverride?: any;
+};
+export declare const FxStrStaticDropdown: React.ForwardRefExoticComponent<StaticDropdownPropsType & React.RefAttributes<unknown>>;

package/dist/FxStrStaticDropdown/FxStrStaticDropdown.js

@@ -0,0 +1,368 @@
+// @ts-ignore
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxStrStaticDropdown", {
+    enumerable: true,
+    get: function() {
+        return FxStrStaticDropdown;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _iconsmaterial = require("@mui/icons-material");
+const _material = require("@mui/material");
+const _FxChip = require("../FxChip");
+const _FxIcon = require("../FxIcon");
+const _dropdownstyles = require("./styles/dropdown.styles");
+const _helpers = require("./helpers/helpers");
+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 icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
+    fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
+    fontSize: "small"
+});
+const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
+    const { onAdd, onRemoveOne, onRemoveAll, type = 'text', modal_type, multiple, name, query, isInitialOpen, placeholder, data, rootStylesOverride } = props;
+    const ref = (0, _react.useRef)(null);
+    const theme = (0, _material.useTheme)();
+    const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
+    const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
+    (0, _react.useEffect)(()=>{
+        const storedData = sessionStorage.getItem(`dropdown-${query}-${name}`);
+        if (storedData) {
+            const parsedData = JSON.parse(storedData);
+            if (parsedData) {
+                multiple ? setDisplayed([
+                    ...parsedData
+                ]) : setDisplayed(parsedData[0]);
+            }
+        }
+    }, [
+        query
+    ]);
+    const addToStoredDisplayed = (option)=>{
+        const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}`);
+        let data = prevStored ? JSON.parse(prevStored) : {};
+        if (data === null || data === void 0 ? void 0 : data.length) {
+            if (multiple) {
+                data = [
+                    ...data,
+                    option
+                ];
+            } else {
+                data = [
+                    option
+                ];
+            }
+        } else {
+            data = [
+                option
+            ];
+        }
+        sessionStorage.setItem(`dropdown-${query}-${name}`, JSON.stringify(data));
+    };
+    const removeOneFromStoredDisplayed = (option)=>{
+        let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}`);
+        if (storedDisplayed) {
+            storedDisplayed = JSON.parse(storedDisplayed);
+            if (multiple) {
+                const newDisplayed = storedDisplayed.filter((opt)=>{
+                    opt !== option;
+                });
+                storedDisplayed = newDisplayed;
+            } else {
+                storedDisplayed = storedDisplayed.filter((opt)=>opt !== option);
+            }
+            sessionStorage.setItem(`dropdown-${query}-${name}`, JSON.stringify(storedDisplayed));
+        }
+    };
+    const handleOptionClick = (option)=>{
+        switch(multiple){
+            case true:
+                if (displayed.includes(option)) {
+                    deleteOneItem(option);
+                } else {
+                    onAdd && onAdd(option);
+                    setDisplayed((prev)=>[
+                            ...prev,
+                            option
+                        ]);
+                    addToStoredDisplayed(option);
+                }
+                break;
+            default:
+                setDisplayed(option);
+                onAdd && onAdd(option);
+                addToStoredDisplayed(option);
+        }
+    };
+    const deleteOneItem = (item)=>{
+        if (multiple) {
+            setDisplayed((prev)=>prev.filter((val)=>val !== item));
+        } else {
+            setDisplayed('');
+        }
+        onRemoveOne && onRemoveOne(item);
+        removeOneFromStoredDisplayed(item);
+    };
+    const isChecked = (option)=>{
+        return multiple ? displayed.includes(option) : displayed === option;
+    };
+    const displayListOptions = ()=>{
+        switch(type){
+            case 'checkbox':
+                {
+                    return data.map((option)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    icon: icon,
+                                    checked: isChecked(option),
+                                    checkedIcon: checkedIcon,
+                                    sx: {
+                                        mr: 1,
+                                        minWidth: 24,
+                                        minHeight: 24,
+                                        p: 0,
+                                        ['& svg']: {
+                                            fill: theme.palette.primary.light
+                                        }
+                                    }
+                                }),
+                                getSingleOptionFromListOrDisplayed(option, 'list')
+                            ]
+                        }, option);
+                    });
+                }
+            case 'text':
+            default:
+                {
+                    return data.map((option, i)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: getSingleOptionFromListOrDisplayed(option, 'list')
+                        }, i);
+                    });
+                }
+        }
+    };
+    const getCurrentValues = ()=>{
+        if (multiple) {
+            return getMultipleDisplayedValues();
+        } else {
+            return getSingleOptionFromListOrDisplayed(displayed, 'displayed');
+        }
+    };
+    const DeleteButton = ({ option, isDisplay })=>{
+        const isDisplayButton = isDisplay && multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed === option;
+        if (isDisplayButton) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                onClick: ()=>{
+                    deleteOneItem(option);
+                },
+                children: "x"
+            });
+        }
+        return null;
+    };
+    const Chip = ({ option, modal })=>{
+        return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+            status: option,
+            label: (0, _helpers.titleCase)(option),
+            variant: "outlined",
+            onDelete: ()=>{
+                deleteOneItem(option);
+            }
+        }, option) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+            status: option,
+            label: (0, _helpers.titleCase)(option),
+            variant: "outlined"
+        }, option);
+    };
+    const ChosenIcon = ({ option, isDisplay })=>{
+        if (isDisplay && isChecked(option)) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                width: 16,
+                height: 16,
+                icon: 'filters/chosen_icon.svg'
+            });
+        }
+        return null;
+    };
+    const OneOption = ({ option, modal })=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+                gap: 1,
+                color: 'grey',
+                cursor: 'pointer'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        width: '100%',
+                        display: 'flex',
+                        justifyContent: 'flex-start',
+                        gap: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle2",
+                            color: theme.palette.typography.title,
+                            children: (0, _helpers.titleCase)(option)
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                            option: option,
+                            isDisplay: modal == 'displayed'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(ChosenIcon, {
+                    option: option,
+                    isDisplay: modal == 'list'
+                })
+            ]
+        }, option);
+    };
+    const getSingleOptionFromListOrDisplayed = (option, modal)=>{
+        if (option) {
+            let rv = null;
+            switch(modal_type){
+                case 'chip':
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(Chip, {
+                        option: option,
+                        modal: modal
+                    });
+                    break;
+                case 'text':
+                default:
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
+                        option: option,
+                        modal: modal
+                    });
+                    break;
+            }
+            return rv;
+        }
+    };
+    const getMultipleDisplayedValues = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            direction: 'row',
+            sx: {
+                maxWidth: 214,
+                minWidth: 214,
+                display: 'flex',
+                justifyContent: 'space-between'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: 'row',
+                    sx: {
+                        overflow: 'hidden',
+                        flexWrap: 'wrap',
+                        gap: 1
+                    },
+                    children: displayed.map((item)=>{
+                        return getSingleOptionFromListOrDisplayed(item, 'displayed');
+                    })
+                }),
+                (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        minWidth: '20px',
+                        maxWidth: '20px',
+                        cursor: 'pointer',
+                        paddingLeft: '3px'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        onClick: ()=>{
+                            setDisplayed([]);
+                            onRemoveAll && onRemoveAll();
+                            sessionStorage.removeItem(`dropdown-${query}-${name}`);
+                        },
+                        icon: `filters/remove_all_button.svg`,
+                        width: 16,
+                        height: 16
+                    })
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        style: rootStylesOverride,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                children: [
+                    getCurrentValues(),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.InputWrapper, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                            autoFocus: true,
+                            placeholder: placeholder || 'Select an option...',
+                            onFocus: ()=>{
+                                !isInitialOpen && setIsOpen(true);
+                            },
+                            onBlur: ()=>{
+                                setTimeout(()=>{
+                                    !isInitialOpen && setIsOpen(false);
+                                }, 200);
+                            }
+                        })
+                    })
+                ]
+            }),
+            (isInitialOpen || isOpen) && data && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledListBox, {
+                ref: ref,
+                children: displayListOptions()
+            })
+        ]
+    });
+});

package/dist/FxStrStaticDropdown/helpers/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const titleCase: (str?: string) => string;
+export declare const toPascalCase: (string: string, title?: boolean) => string;

package/dist/FxStrStaticDropdown/helpers/helpers.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, {
+    titleCase: function() {
+        return titleCase;
+    },
+    toPascalCase: function() {
+        return toPascalCase;
+    }
+});
+const titleCase = (str = '')=>str && toPascalCase(str.toString(), true);
+const toPascalCase = (string, title = false)=>{
+    return string && string.replace(/(_[a-z])?(^[a-z])?(_|\s[a-z])?/g, ($1)=>$1.toUpperCase().replace('_', title ? ' ' : ''));
+};

package/dist/FxStrStaticDropdown/index.d.ts

@@ -0,0 +1 @@
+export { FxStrStaticDropdown, type StaticDropdownStylesOptions, type StaticDropdownPropsType } from './FxStrStaticDropdown';

package/dist/FxStrStaticDropdown/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxStrStaticDropdown", {
+    enumerable: true,
+    get: function() {
+        return _FxStrStaticDropdown.FxStrStaticDropdown;
+    }
+});
+const _FxStrStaticDropdown = require("./FxStrStaticDropdown");

package/dist/FxStrStaticDropdown/styles/dropdown.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Root: any;
+export declare const InputWrapper: any;
+export declare const StyledListBox: any;