@fixefy/fixefy-ui-components 0.2.20 → 0.2.22

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -27,5 +27,6 @@ export type AsyncDropdownPropsType = {
     query: string;
     isInitialOpen?: boolean;
     placeholder?: string;
+    rootStyle?: any;
 };
 export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -120,7 +120,7 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
     fontSize: "small"
 });
 const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
-    const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query, isInitialOpen, placeholder, title_path } = props;
+    const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query, isInitialOpen, placeholder, title_path, rootStyle } = props;
     const ref = (0, _react.useRef)(null);
     const theme = (0, _material.useTheme)();
     const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
@@ -532,6 +532,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        style: rootStyle,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 children: [

package/dist/FxAsyncDropdown/styles/dropdown.styles.js

@@ -84,13 +84,20 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Root = (0, _styles.styled)('div')(()=>({
+const Root = (0, _styles.styled)('div')(({ props })=>{
+    return _object_spread_props(_object_spread({}, props), {
         color: 'rgba(0,0,0,.85)',
         fontSize: 14,
         background: '#FFFFFF',
         padding: '0 16px',
-        position: 'relative'
-    }));
+        position: 'relative',
+        ' & .MuiBox-root': {
+            ['& > div']: {
+                padding: 0
+            }
+        }
+    });
+});
 const Label = (0, _styles.styled)('label')(()=>({
         padding: '0 0 4px',
         lineHeight: '1.5',

package/dist/FxStaticDropdown/FxStaticDropdown.d.ts

@@ -0,0 +1,23 @@
+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;
+    query: string;
+    isInitialOpen?: boolean;
+    placeholder?: string;
+    data: string[];
+    rootStyle?: any;
+};
+export declare const FxStaticDropdown: React.ForwardRefExoticComponent<StaticDropdownPropsType & React.RefAttributes<unknown>>;

package/dist/FxStaticDropdown/FxStaticDropdown.js

@@ -0,0 +1,414 @@
+// @ts-ignore
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxStaticDropdown", {
+    enumerable: true,
+    get: function() {
+        return FxStaticDropdown;
+    }
+});
+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 FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
+    const { onAdd, onRemoveOne, onRemoveAll, type = 'text', modal_type, multiple, query, isInitialOpen, placeholder, data, rootStyle } = props;
+    const ref = (0, _react.useRef)(null);
+    const theme = (0, _material.useTheme)();
+    const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
+    const [isOpen, setIOpen] = (0, _react.useState)(isInitialOpen);
+    (0, _react.useEffect)(()=>{
+        const storedData = sessionStorage.getItem(`dropdown-${query}`);
+        if (storedData) {
+            const parsedData = JSON.parse(storedData);
+            if (parsedData) {
+                multiple ? setDisplayed([
+                    ...parsedData
+                ]) : setDisplayed(parsedData[0]);
+            }
+        }
+    }, [
+        query,
+        name
+    ]);
+    const addToStoredDisplayed = (option)=>{
+        const prevStored = sessionStorage.getItem(`dropdown-${query}`);
+        let data = prevStored ? JSON.parse(prevStored) : {};
+        if (data) {
+            if (multiple) {
+                data = [
+                    ...data,
+                    option
+                ];
+            } else {
+                data = [
+                    option
+                ];
+            }
+        } else {
+            data = [
+                option
+            ];
+        }
+        sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(data));
+    };
+    const removeOneFromStoredDisplayed = (option)=>{
+        let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
+        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}`, 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)=>{
+        if (multiple) {
+            return displayed.includes(option);
+        } else {
+            return 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
+                                        }
+                                    }
+                                }),
+                                getSingleValueByModalType(option, 'list')
+                            ]
+                        }, option);
+                    });
+                }
+            case 'text':
+            default:
+                {
+                    return data.map((option)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: getSingleValueByModalType(option, 'list')
+                        }, option._id);
+                    });
+                }
+        }
+    };
+    const getCurrentValues = ()=>{
+        if (multiple) {
+            return getMultipleDisplayedValues();
+        } else {
+            return getSingleValueByModalType(displayed, 'displayed');
+        }
+    };
+    const DeleteButton = ({ option })=>{
+        let rv = null;
+        switch(multiple){
+            case true:
+                if ((displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0) {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        onClick: ()=>{
+                            deleteOneItem(option);
+                        },
+                        children: "x"
+                    });
+                }
+                break;
+            case false:
+            default:
+                if (displayed === option) {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        onClick: ()=>{
+                            deleteOneItem(option);
+                        },
+                        children: "x"
+                    });
+                }
+                break;
+        }
+        return rv;
+    };
+    const getSingleValueByModalType = (option, modal)=>{
+        if (option) {
+            let rv = null;
+            switch(modal_type){
+                case 'chip':
+                    rv = 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);
+                    break;
+                case 'logo':
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1,
+                            color: 'grey',
+                            cursor: 'pointer',
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                style: {
+                                    width: '70px'
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                                    icon: `companies/${option.logo ? option.logo : 'logo_placeholder/logo_placeholder.svg'}`,
+                                    width: 70,
+                                    height: 16
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                sx: {
+                                    width: '170px',
+                                    overflow: 'hidden',
+                                    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)
+                                    }),
+                                    modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                        option: option
+                                    })
+                                ]
+                            }),
+                            modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                                width: 16,
+                                height: 16,
+                                icon: 'filters/chosen_icon.svg'
+                            })
+                        ]
+                    }, option._id);
+                    break;
+                case 'text':
+                default:
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            maxWidth: '250px',
+                            gap: 1,
+                            color: 'grey',
+                            cursor: 'pointer'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                sx: {
+                                    width: '210px',
+                                    overflow: 'hidden',
+                                    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)
+                                    }),
+                                    modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                        option: option
+                                    })
+                                ]
+                            }),
+                            modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                                width: 16,
+                                height: 16,
+                                icon: 'filters/chosen_icon.svg'
+                            })
+                        ]
+                    }, option._id);
+                    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 getSingleValueByModalType(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'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        onClick: ()=>{
+                            setDisplayed([]);
+                            onRemoveAll && onRemoveAll();
+                            sessionStorage.removeItem(`dropdown-${query}`);
+                        },
+                        icon: `filters/remove_all_button.svg`,
+                        width: 16,
+                        height: 16
+                    })
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        style: rootStyle,
+        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 && setIOpen(true);
+                            },
+                            onBlur: ()=>{
+                                setTimeout(()=>{
+                                    !isInitialOpen && setIOpen(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/FxStaticDropdown/helpers/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare const getJPart: (j: any, jsonPath: string, defaultValue?: any) => any;
+export declare const isArrayValid: (arr: any[], minLength?: number, maxLength?: number) => boolean;
+export declare const isObjectValid: (obj: any, isCheckKeys?: boolean) => boolean;
+export declare const isStringValid: (str: string, minLength?: number | null, maxLength?: number | null, isValidateType?: boolean) => boolean;
+export declare const titleCase: (str?: string) => string;
+export declare const toPascalCase: (string: string, title?: boolean) => string;

package/dist/FxStaticDropdown/helpers/helpers.js

@@ -0,0 +1,161 @@
+"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, {
+    getJPart: function() {
+        return getJPart;
+    },
+    isArrayValid: function() {
+        return isArrayValid;
+    },
+    isObjectValid: function() {
+        return isObjectValid;
+    },
+    isStringValid: function() {
+        return isStringValid;
+    },
+    titleCase: function() {
+        return titleCase;
+    },
+    toPascalCase: function() {
+        return toPascalCase;
+    }
+});
+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 getJPart = (j, jsonPath, defaultValue)=>{
+    // input check - if key is invalid - return error
+    if (isObjectValid(j) === false) return defaultValue;
+    // convert indexes to properties
+    jsonPath = jsonPath.replace(/\[(\w+)\]/g, '.$1');
+    // strip a leading dot
+    jsonPath = jsonPath.replace(/^\./, '');
+    // split path by '.'
+    let _isArrayValid = false;
+    let _isStringValid = false;
+    let currentPathPart;
+    let isLoop = true;
+    const pathParts = jsonPath.split('.');
+    for(let i = 0, n = pathParts.length; isLoop && i < n; ++i){
+        currentPathPart = pathParts[i];
+        _isStringValid = isStringValid(j);
+        _isArrayValid = isArrayValid(j);
+        if (_isStringValid === true || _isArrayValid === true) {
+            if (_isStringValid === true) {
+                j = JSON.parse(j);
+            } else {
+                j = j.reduce((acc, cur)=>{
+                    const innerJ = getJPart(cur, pathParts.slice(i).join('.'), defaultValue);
+                    if (isArrayValid(innerJ)) {
+                        acc.push(...innerJ);
+                    } else {
+                        acc.push(_object_spread_props(_object_spread({}, innerJ), {
+                            value: innerJ._id
+                        }));
+                    }
+                    return acc;
+                }, []);
+                isLoop = false;
+            }
+        } else {
+            if (currentPathPart in j) {
+                j = j[currentPathPart];
+            } else {
+                // if something in the process failed:
+                //  1. set the rv as the default value
+                //  2. stop the loop`
+                j = defaultValue;
+                isLoop = false;
+            }
+        }
+    }
+    return j;
+};
+const isArrayValid = (arr, minLength = 1, maxLength = 0)=>{
+    let rv = isObjectValid(arr) && arr.length >= minLength && //arr instanceof Array
+    Object.prototype.toString.call(arr) == '[object Array]';
+    if (maxLength > 0) {
+        rv = rv && arr.length <= maxLength;
+    }
+    return rv;
+};
+const isObjectValid = (obj, isCheckKeys = false)=>{
+    let rv = typeof obj !== 'undefined' && obj !== null;
+    if (isCheckKeys) {
+        rv = rv && Object.keys(obj).length > 0;
+    }
+    return rv;
+};
+const isStringValid = (str, minLength = null, maxLength = null, isValidateType = true)=>{
+    let rv = isObjectValid(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true);
+    if (rv === false) return false;
+    if (minLength && isNaN(minLength) === false && minLength > 0) {
+        rv = rv && str.toString().length >= minLength;
+    }
+    if (rv === false) return false;
+    if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
+        rv = rv && str.toString().length <= maxLength;
+    }
+    return rv;
+};
+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/FxStaticDropdown/index.d.ts

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

package/dist/FxStaticDropdown/index.js

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

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

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

package/dist/FxStaticDropdown/styles/dropdown.styles.js

@@ -0,0 +1,197 @@
+"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;
+    },
+    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({}, props), {
+        color: 'rgba(0,0,0,.85)',
+        fontSize: 14,
+        background: '#FFFFFF',
+        padding: '0 16px',
+        position: 'relative',
+        ' & .MuiBox-root': {
+            ['& > div']: {
+                padding: 0
+            }
+        }
+    });
+});
+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 })=>({
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        width: '100%',
+        margin: 0,
+        marginTop: '1px',
+        padding: 0,
+        listStyle: 'none',
+        backgroundColor: theme.palette.common.white,
+        overflow: 'auto',
+        zIndex: 1,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflowX: 'hidden',
+        paddingTop: 8,
+        paddingBottom: 8,
+        // maxWidth: 270,
+        // 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'
+        },
+        ['& li']: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            height: 40,
+            cursor: 'pointer',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            width: '100%'
+        },
+        ['& 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/index.d.ts

@@ -15,6 +15,7 @@ export { FxProgressCounter, ProgressCounterPropsType } from './FxProgressCounter
 export { FxScore, ScorePropsType } from './FxScore';
 export { FxShowMore, ShowMorePropsType } from './FxShowMore';
 export { FxSlider, SliderPropsType } from './FxSlider';
+export { FxStaticDropdown, StaticDropdownStylesOptions, StaticDropdownPropsType } from './FxStaticDropdown';
 export { FxStatisticsBar, StatisticsPropsType } from './FxStatisticsBar';
 export { FxStatusBar, StatusBarPropsType, Options } from './FxStatusBar';
 export { FxTag, TagPropsType } from './FxTag';

package/dist/index.js

@@ -96,6 +96,9 @@ _export(exports, {
     FxSlider: function() {
         return _FxSlider.FxSlider;
     },
+    FxStaticDropdown: function() {
+        return _FxStaticDropdown.FxStaticDropdown;
+    },
     FxStatisticsBar: function() {
         return _FxStatisticsBar.FxStatisticsBar;
     },
@@ -165,6 +168,12 @@ _export(exports, {
     SliderPropsType: function() {
         return _FxSlider.SliderPropsType;
     },
+    StaticDropdownPropsType: function() {
+        return _FxStaticDropdown.StaticDropdownPropsType;
+    },
+    StaticDropdownStylesOptions: function() {
+        return _FxStaticDropdown.StaticDropdownStylesOptions;
+    },
     StatisticsPropsType: function() {
         return _FxStatisticsBar.StatisticsPropsType;
     },
@@ -213,6 +222,7 @@ const _FxProgressCounter = require("./FxProgressCounter");
 const _FxScore = require("./FxScore");
 const _FxShowMore = require("./FxShowMore");
 const _FxSlider = require("./FxSlider");
+const _FxStaticDropdown = require("./FxStaticDropdown");
 const _FxStatisticsBar = require("./FxStatisticsBar");
 const _FxStatusBar = require("./FxStatusBar");
 const _FxTag = require("./FxTag");

package/package.json

@@ -65,5 +65,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.2.20"
+  "version": "0.2.22"
 }