@fixefy/fixefy-ui-components 0.1.66 → 0.1.67

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -14,16 +14,27 @@ export type AsyncDropdownPropsType = {
     debug?: boolean;
     initialValue?: Option | any;
     styles?: StylesOptions;
-    method_name: string;
+    structure: {
+        name: string;
+        extended: {
+            title: string;
+            title_path: string;
+            search_path: string;
+            variables: {
+                method_name: string;
+            };
+        };
+        children: any;
+    };
+    fetcher: {
+        query: any;
+        queryOptions: any;
+    };
     multiple?: boolean;
-    name: any;
-    variables: any;
     onChange?: (value: any, name: string) => void;
     type?: 'checkbox' | 'text';
     renderOptions?: (option: Option, index: number) => void;
     [x: string]: any;
     showSelectedValue?: boolean;
-    modal_type?: string;
-    query: string;
 };
 export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -10,16 +10,14 @@ Object.defineProperty(exports, "FxAsyncDropdown", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _lodash = /*#__PURE__*/ _interop_require_default(require("lodash"));
 const _iconsmaterial = require("@mui/icons-material");
-const _material = require("@mui/material");
-const _FxChip = require("../FxChip");
 const _graphqltag = require("graphql-tag");
-const _dropdownstyles = require("./styles/dropdown.styles");
-const _helpers = require("./helpers/helpers");
 const _client = require("@apollo/client");
-const _FxIcon = require("../FxIcon");
-const _nookies = require("nookies");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _dropdownstyles = require("./styles/dropdown.styles");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -33,6 +31,11 @@ function _define_property(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();
@@ -147,63 +150,82 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
     fontSize: "small"
 });
 const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
-    var _props_styles;
+    var _structure_extended, _props_styles, _props_styles1, _props_styles2;
     const ref = (0, _react.useRef)(null);
     const theme = (0, _material.useTheme)();
-    const [value, setValue] = (0, _react.useState)(null);
-    const [displayedValue, setDisplayedValue] = (0, _react.useState)('');
     const [options, setOptions] = (0, _react.useState)([]);
-    // const [loadingData, setLoadingData] = useState(false)
-    const [reason, setReason] = (0, _react.useState)('init');
+    const [loadingData, setLoadingData] = (0, _react.useState)(false);
     const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
     const [searchValue, setSearchValue] = (0, _react.useState)(null);
     const [hasClearBtn, setHasClearBtn] = (0, _react.useState)(false);
     const [page, setPage] = (0, _react.useState)(1);
     const [prevPage, setPrevPage] = (0, _react.useState)(0);
-    const pageSize = 20;
-    const { debug, onChange, renderOptions, fetcher, disabled, type = 'text', title_path, variables, search_path, modal_type, name } = props;
+    const [pageSize] = (0, _react.useState)(20);
+    const { debug, structure, onChange, onClear, renderOptions, fetcher, initialValue = {}, multiple, disabled, type = 'text', showSelectedValue } = props, rest = _object_without_properties(props, [
+        "debug",
+        "structure",
+        "onChange",
+        "onClear",
+        "renderOptions",
+        "fetcher",
+        "initialValue",
+        "multiple",
+        "disabled",
+        "type",
+        "showSelectedValue"
+    ]);
+    const { name, extended, children } = structure;
+    const { search_path, variables } = extended;
     const { method_name } = variables;
-    const ws = (0, _nookies.parseCookies)().ws;
-    const getWhere = ()=>{
-        if (variables.method_name == 'workspace') {
-            return searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
-                _id: ws,
-                [search_path]: {
-                    $regex: searchValue
-                }
-            }) : _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
-                _id: ws
-            });
-        } else {
-            return searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
-                [search_path]: {
-                    $regex: searchValue
-                }
-            }) : _object_spread({}, fetcher.queryOptions.variables.where);
-        }
-    };
-    const isLocal = fetcher.query.loc;
-    const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+    const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
         variables: _object_spread_props(_object_spread({}, fetcher.queryOptions.variables), {
-            where: getWhere(),
+            where: searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
+                [search_path]: searchValue
+            }) : _object_spread({}, fetcher.queryOptions.variables.where),
             skip: page * pageSize - pageSize,
             limit: pageSize
         })
     }));
-    const handleSearch = (e)=>{
+    var _structure_extended_title_path;
+    const labelOption = (_structure_extended_title_path = structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path) !== null && _structure_extended_title_path !== void 0 ? _structure_extended_title_path : 'title';
+    const { getRootProps, getInputProps, getClearProps, getListboxProps, getOptionProps, groupedOptions, value, popupOpen, focused, setAnchorEl } = (0, _material.useAutocomplete)(_object_spread_props(_object_spread({}, rest), {
+        defaultValue: initialValue,
+        options: options,
+        disableCloseOnSelect: !!multiple,
+        multiple,
+        disabled: disabled,
+        isOptionEqualToValue: (option, value)=>{
+            return option._id === value._id;
+        },
+        getOptionLabel: (option)=>{
+            var _option_labelOption;
+            return (0, _fixefyuiutils.titleCase)((_option_labelOption = option[labelOption]) !== null && _option_labelOption !== void 0 ? _option_labelOption : option.title);
+        }
+    }));
+    const onPopupScroll = _lodash.default.debounce(()=>{
+        if (ref && ref.current) {
+            //@ts-ignore
+            const threshHold = ref.current.scrollHeight / 2;
+            //@ts-ignore
+            if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
+                setLoadingData(true);
+                setPage((prevPage)=>prevPage + 1);
+                setPrevPage((prevPage)=>prevPage + 1);
+            }
+        }
+    }, 800);
+    const createTitle = ()=>{
+        if (Array.isArray(value)) {
+            if (value && value.length) {
+                return `${(0, _fixefyuiutils.titleCase)(name)} (${value.length})`;
+            }
+        }
+        return (0, _fixefyuiutils.titleCase)(name);
+    };
+    const handleSearch = _lodash.default.debounce((e)=>{
         setSearchValue(e.target.value);
-        setDisplayedValue(e.target.value);
-        setReason('searched');
         setPage(1);
-        setPrevPage(0);
-        setIsLastPage(false);
-    };
-    (0, _react.useEffect)(()=>{
-        //@ts-ignore
-        onChange && value && onChange(value, name);
-    }, [
-        value
-    ]);
+    }, 300);
     const handleChildrens = (_param)=>{
         var { structure } = _param, rest = _object_without_properties(_param, [
             "structure"
@@ -239,100 +261,89 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
     };
     const handleRenderOptions = ()=>{
         debug === true && console.log('renderOptions: ', renderOptions);
-        switch(type){
-            case 'checkbox':
-                {
-                    return options.map((option)=>{
-                        var _option_title_path;
-                        const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
-                        let title = (0, _helpers.getJPart)(option, title_path, 0);
-                        //if title is an array need to extract the first element
-                        if (typeof title === 'object' && title.length > 0) {
-                            title = title[0];
-                        }
-                        var _option_title;
-                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
-                            onClick: ()=>{
-                                setValue(option);
-                                setDisplayedValue(displayedVal);
-                            },
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                    icon: icon,
-                                    checked: value === option,
-                                    checkedIcon: checkedIcon,
-                                    sx: {
-                                        mr: 1,
-                                        minWidth: 24,
-                                        minHeight: 24,
-                                        p: 0,
-                                        ['& svg']: {
-                                            fill: theme.palette.primary.light
-                                        }
-                                    }
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "subtitle2",
-                                    color: theme.palette.typography.title,
-                                    children: (0, _helpers.titleCase)((_option_title = option === null || option === void 0 ? void 0 : option.title) !== null && _option_title !== void 0 ? _option_title : title)
-                                })
-                            ]
-                        }, option._id);
-                    });
-                }
-            case 'text':
-                {
-                    return options.map((option)=>{
-                        debug === true && console.log('renderOptions: ', title_path, option[title_path], options);
-                        var _option_title_path;
-                        const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-                            onClick: ()=>{
-                                setValue(option);
-                                setDisplayedValue((0, _helpers.titleCase)(displayedVal));
-                            },
-                            children: modal_type === 'chip' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
-                                status: option.value,
-                                label: (0, _helpers.titleCase)(displayedVal),
-                                variant: "outlined"
-                            }) : modal_type === 'logo' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        if (renderOptions) {
+            return groupedOptions.map((option, index)=>{
+                const CustomeComponent = renderOptions(option, index);
+                //@ts-ignore
+                return /*#__PURE__*/ _react.default.cloneElement(CustomeComponent, _object_spread({}, getOptionProps({
+                    option,
+                    index
+                })));
+            });
+        } else {
+            switch(type){
+                case 'checkbox':
+                    {
+                        return groupedOptions.map((option, index)=>{
+                            const isSelected = getOptionProps({
+                                option,
+                                index
+                            })['aria-selected'];
+                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", _object_spread_props(_object_spread({}, getOptionProps({
+                                option,
+                                index
+                            })), {
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
-                                        icon: `companies/${option.logo}`,
-                                        width: 70,
-                                        height: 16
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        icon: icon,
+                                        checked: Boolean(isSelected),
+                                        checkedIcon: checkedIcon,
+                                        sx: {
+                                            mr: 1,
+                                            minWidth: 24,
+                                            minHeight: 24,
+                                            p: 0,
+                                            ['& svg']: {
+                                                fill: theme.palette.primary.light
+                                            }
+                                        }
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                        sx: {
-                                            marginLeft: '5px'
-                                        },
                                         variant: "subtitle2",
                                         color: theme.palette.typography.title,
-                                        children: (0, _helpers.titleCase)(displayedVal)
+                                        children: (0, _fixefyuiutils.titleCase)(option === null || option === void 0 ? void 0 : option.title)
                                     })
                                 ]
-                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                variant: "subtitle2",
-                                color: theme.palette.typography.title,
-                                children: (0, _helpers.titleCase)(displayedVal)
-                            })
-                        }, option._id);
-                    });
-                }
-            default:
-                {
-                    return options.map((option)=>{
-                        debug === true && console.log('renderOptions: ', title_path, option[title_path], options);
-                        var _option_title_path;
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                variant: "subtitle2",
-                                color: theme.palette.typography.title,
-                                children: (0, _helpers.titleCase)((_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title)
-                            })
+                            }));
                         });
-                    });
-                }
+                    }
+                case 'text':
+                    {
+                        return groupedOptions.map((option, index)=>{
+                            var _structure_extended, _structure_extended1, _structure_extended2;
+                            debug === true && console.log('renderOptions: ', structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path, option[structure === null || structure === void 0 ? void 0 : (_structure_extended1 = structure.extended) === null || _structure_extended1 === void 0 ? void 0 : _structure_extended1.title_path], options);
+                            var _option_structure_extended_title_path;
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", _object_spread_props(_object_spread({}, getOptionProps({
+                                option,
+                                index
+                            })), {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _fixefyuiutils.titleCase)((_option_structure_extended_title_path = option[structure === null || structure === void 0 ? void 0 : (_structure_extended2 = structure.extended) === null || _structure_extended2 === void 0 ? void 0 : _structure_extended2.title_path]) !== null && _option_structure_extended_title_path !== void 0 ? _option_structure_extended_title_path : option.title)
+                                })
+                            }));
+                        });
+                    }
+                default:
+                    {
+                        return groupedOptions.map((option, index)=>{
+                            var _structure_extended, _structure_extended1, _structure_extended2;
+                            debug === true && console.log('renderOptions: ', structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path, option[structure === null || structure === void 0 ? void 0 : (_structure_extended1 = structure.extended) === null || _structure_extended1 === void 0 ? void 0 : _structure_extended1.title_path], options);
+                            var _option_structure_extended_title_path;
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", _object_spread_props(_object_spread({}, getOptionProps({
+                                option,
+                                index
+                            })), {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _fixefyuiutils.titleCase)((_option_structure_extended_title_path = option[structure === null || structure === void 0 ? void 0 : (_structure_extended2 = structure.extended) === null || _structure_extended2 === void 0 ? void 0 : _structure_extended2.title_path]) !== null && _option_structure_extended_title_path !== void 0 ? _option_structure_extended_title_path : option.title)
+                                })
+                            }));
+                        });
+                    }
+            }
         }
     };
     (0, _react.useImperativeHandle)(parentRef, ()=>({
@@ -342,11 +353,32 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                 (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(null);
             }
         }));
-    const loadMore = ()=>{
-        // setLoadingData(true)
-        setPage((prevPage)=>prevPage + 1);
-        setPrevPage((prevPage)=>prevPage + 1);
-    };
+    (0, _react.useEffect)(()=>{
+        if (ref && ref.current) {
+            //@ts-ignore
+            ref.current.addEventListener('scroll', ()=>onPopupScroll());
+        }
+        return ()=>{
+            if (ref && ref.current) {
+                //@ts-ignore
+                ref.current.removeEventListener('scroll', ()=>onPopupScroll());
+            }
+        };
+    }, [
+        groupedOptions
+    ]);
+    (0, _react.useEffect)(()=>{
+        onChange && onChange(value, name);
+    }, [
+        value
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (popupOpen && !isLastPage && prevPage < page && !disabled) {
+            fetch();
+        }
+    }, [
+        popupOpen
+    ]);
     (0, _react.useEffect)(()=>{
         if (!disabled) {
             fetch();
@@ -354,83 +386,71 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
     }, []);
     (0, _react.useEffect)(()=>{
         if (data && !isLastPage && prevPage < page) {
-            //raaya todo: this is too messy clean it
-            const newOptions = variables.method_name == 'workspace' ? data.workspace[search_path === null || search_path === void 0 ? void 0 : search_path.split('.')[1]] : data[method_name];
+            const newOptions = data[method_name];
             if (newOptions.length === 0 || newOptions.length < pageSize) {
                 setIsLastPage(true);
             }
-            if (reason === 'searched' || reason === 'init') {
-                setOptions(newOptions);
-            } else if (reason === 'loaded more') {
-                setOptions((prevOptions)=>[
-                        ...prevOptions,
-                        ...newOptions
-                    ]);
-            }
-        // setLoadingData(false)
+            setOptions([
+                ...newOptions,
+                ...options
+            ]);
+            setLoadingData(false);
         }
     }, [
-        data,
-        reason
+        data
     ]);
+    var _props_styles_width, _props_styles_maxWidth;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, _object_spread_props(_object_spread({
+                hasValue: !!(value && Object.keys(value).length),
                 disabled: disabled,
                 sx: {
-                    width: '100%',
-                    border: 'none !important',
-                    outline: 'none !important'
-                },
+                    width: (_props_styles_width = (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.width) !== null && _props_styles_width !== void 0 ? _props_styles_width : 180,
+                    maxWidth: (_props_styles_maxWidth = (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.maxWidth) !== null && _props_styles_maxWidth !== void 0 ? _props_styles_maxWidth : 300
+                }
+            }, getRootProps()), {
+                ref: setAnchorEl,
+                className: focused ? 'focused' : '',
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                        style: {
-                            border: 'none',
-                            outline: 'none'
-                        },
-                        autoFocus: true,
-                        defaultValue: displayedValue !== null && displayedValue !== void 0 ? displayedValue : '',
-                        placeholder: "Select an option...",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, getInputProps()), {
+                        readOnly: true,
                         onChange: (e)=>{
+                            var //@ts-ignore
+                            _getInputProps;
+                            (_getInputProps = getInputProps()) === null || _getInputProps === void 0 ? void 0 : _getInputProps.onChange(e);
                             handleSearch(e);
-                        }
-                    }),
-                    loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
+                        },
+                        placeholder: createTitle(),
+                        value: showSelectedValue ? (0, _fixefyuiutils.titleCase)(value.title) : undefined
+                    })),
+                    loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
-                    })
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.KeyboardArrowDown, {})
                 ]
-            }),
-            options.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
-                sx: _object_spread_props(_object_spread({}, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.menuSx), {
-                    '&::-webkit-scrollbar': {
-                        width: '16px',
-                        backgroundColor: '#F5F5F5'
-                    },
-                    '&::-webkit-scrollbar-thumb': {
-                        backgroundColor: '#F5F5F580',
-                        borderRadius: '8px',
-                        border: '4px solid #F5F5F5'
-                    },
-                    // To support Firefox
-                    scrollbarWidth: 'thin',
-                    scrollbarColor: '#F5F5F580 #F5F5F5',
-                    maxHeight: '300px',
-                    overflowY: 'auto'
-                }),
-                ref: ref,
+            })),
+            groupedOptions.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Listbox, _object_spread_props(_object_spread({}, getListboxProps()), {
                 children: [
-                    handleRenderOptions(),
-                    !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                            onClick: ()=>{
-                                setReason('loaded more');
-                                loadMore();
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledListBox, {
+                        sx: _object_spread({}, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.menuSx),
+                        hasClearBtn: children === null || children === void 0 ? void 0 : children.length,
+                        ref: ref,
+                        children: handleRenderOptions()
+                    }),
+                    children && children.length ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledClose, {
+                        children: handleChildrens({
+                            structure: children[0],
+                            onClick: (e)=>{
+                                var //@ts-ignore
+                                _getClearProps;
+                                onClear && onClear();
+                                (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(e);
                             },
-                            children: "load more"
+                            startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.Close, {})
                         })
-                    })
+                    }) : null
                 ]
-            }) : null
+            })) : null
         ]
     });
 });

package/dist/FxAsyncDropdown/helpers/helpers.d.ts

@@ -2,5 +2,3 @@ export declare const getJPart: (j: any, jsonPath: string, defaultValue?: 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/FxAsyncDropdown/helpers/helpers.js

@@ -20,12 +20,6 @@ _export(exports, {
     },
     isStringValid: function() {
         return isStringValid;
-    },
-    titleCase: function() {
-        return titleCase;
-    },
-    toPascalCase: function() {
-        return toPascalCase;
     }
 });
 function _define_property(obj, key, value) {
@@ -102,7 +96,7 @@ const getJPart = (j, jsonPath, defaultValue)=>{
                 j = JSON.parse(j);
             } else {
                 j = j.reduce((acc, cur)=>{
-                    const innerJ = getJPart(cur, pathParts.slice(i).join('.'), defaultValue);
+                    const innerJ = getJPart(cur, pathParts.slice(i).join("."), defaultValue);
                     if (isArrayValid(innerJ)) {
                         acc.push(...innerJ);
                     } else {
@@ -155,7 +149,3 @@ const isStringValid = (str, minLength = null, maxLength = null, isValidateType =
     }
     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/FxIcon/FxIcon.d.ts

@@ -1,6 +1,11 @@
-export declare const FxIcon: ({ icon, width, height, onClick, }: {
+export type IconPropsType = {
+    className?: string;
+    color?: unknown;
+    fontSize?: string | number;
+    height?: `${number}` | number;
     icon: string;
-    width: number;
-    height: number;
-    onClick?: (() => void) | undefined;
-}) => JSX.Element;
+    sx?: any;
+    root: string;
+    width?: `${number}` | number;
+};
+export declare const FxIcon: ({ className, color, fontSize, icon, height, sx, width }: IconPropsType) => JSX.Element;

package/dist/FxIcon/FxIcon.js

@@ -9,10 +9,23 @@ Object.defineProperty(exports, "FxIcon", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _content = require("./content");
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
-const _image = /*#__PURE__*/ _interop_require_default(require("next/image"));
+const _iconsmaterial = /*#__PURE__*/ _interop_require_wildcard(require("@mui/icons-material"));
+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
@@ -59,49 +72,76 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const PublicIcon = ({ icon, width, height, onClick })=>{
-    const [isError, setError] = (0, _react.useState)(false);
-    const handleError = (isError)=>setError(isError);
-    if (isError) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Avatar, {
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                fontSize: 29,
-                fontWeight: 600,
-                children: (0, _fixefyuiutils.toInitials)(icon)
-            })
+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 /*#__PURE__*/ (0, _jsxruntime.jsx)(_image.default, {
-        alt: "",
-        width: width,
-        height: height,
-        loader: imageLoader,
-        src: icon,
-        onLoad: ()=>handleError(false),
-        onError: ()=>handleError(true),
-        onClick: onClick
-    });
-};
-const FxIcon = ({ icon, width, height, onClick })=>{
+    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;
+}
+// importing all the local icons - in the future should be removed to CDN server
+const iconsModule = [];
+const FxIcon = ({ className, color, fontSize, icon, height, sx, width })=>{
     if (!icon) throw Error('Provide a property `icon`');
-    return parseIconFromLibrary({
-        icon,
-        width,
-        height,
-        onClick
-    });
-};
-const parseIconFromLibrary = ({ icon, width, height, onClick })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PublicIcon, {
-        icon: icon,
-        width: width,
-        height: height,
-        onClick: onClick
-    });
-};
-const imageLoader = ({ src })=>{
-    const transformedSrc = src.split('/');
-    transformedSrc.splice(transformedSrc.length - 1, 1, transformedSrc[transformedSrc.length - 1].split(/(?=[A-Z])/).join('_').toLowerCase());
-    const url = transformedSrc.join('/');
-    return `${process.env.NEXT_PUBLIC_ASSET_URL}/${url}`;
+    let rv;
+    const splittedPath = icon.split('/');
+    const iconWithoutPath = (0, _fixefyuiutils.toPascalCase)(splittedPath[splittedPath.length - 1]);
+    // const name = toPascalCase(icon)
+    if (iconsModule[iconWithoutPath]) {
+        rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_content.DynamicIcon, {
+            icon: iconsModule[iconWithoutPath],
+            sx: sx
+        });
+    // @ts-ignore
+    } else if (_iconsmaterial[iconWithoutPath]) {
+        // @ts-ignore
+        const MUIIcon = _iconsmaterial[iconWithoutPath];
+        rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(MUIIcon, {
+            className: className,
+            color: color,
+            sx: _object_spread_props(_object_spread({}, sx), {
+                fontSize
+            })
+        });
+    } else {
+        rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_content.LazyIcon, {
+            icon: icon,
+            sx: sx,
+            width: width,
+            height: height
+        });
+    }
+    return rv;
 };

package/dist/FxIcon/index.d.ts

@@ -1 +1 @@
-export { FxIcon } from './FxIcon';
+export { FxIcon, IconPropsType } from './FxIcon';

package/dist/FxIcon/index.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "FxIcon", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FxIcon: function() {
         return _FxIcon.FxIcon;
+    },
+    IconPropsType: function() {
+        return _FxIcon.IconPropsType;
     }
 });
 const _FxIcon = require("./FxIcon");

package/dist/FxScore/styles/score.styles.js

@@ -78,8 +78,7 @@ const useStyles = (0, _styles.makeStyles)((theme)=>({
             flexDirection: 'column'
         },
         scoreNumber: {
-            color: theme.palette.common.white,
-            fontWeight: 700
+            color: theme.palette.common.white
         },
         scoreText: _object_spread_props(_object_spread({}, theme.typography.table), {
             fontWeight: 400,

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from '
 export { FxAvatar, AvatarPropsType, BackgroundColorsType } from './FxAvatar';
 export { FxButton, ButtonPropsType } from './FxButton';
 export { FxChip, ChipPropsType } from './FxChip';
-export { FxIcon } from './FxIcon';
+export { FxIcon, IconPropsType } from './FxIcon';
 export { FxModal, ModalPropsType } from './FxModal';
 export { FxNotes, NoteCreateInput, NotesPropsType } from './FxNotes';
 export { FxNumberField, NumberfieldPropsType } from './FxNumberField';
@@ -18,4 +18,4 @@ export { FxStatusBar, StatusBarPropsType, Options } from './FxStatusBar';
 export { FxTag, TagPropsType } from './FxTag';
 export { FxTextField, TextFieldPropsType } from './FxTextField';
 export { FxTodo, TodoItemType, TodoPropsType } from './FxTodo';
-export { Card, PageHeader, Label, BoldValue, Value, PageTitle, Link, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars, } from './FxStyledComponents';
+export { Card, PageHeader, Label, BoldValue, Value, PageTitle, Link, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars } from './FxStyledComponents';

package/dist/index.js

@@ -105,6 +105,9 @@ _export(exports, {
     FxTodo: function() {
         return _FxTodo.FxTodo;
     },
+    IconPropsType: function() {
+        return _FxIcon.IconPropsType;
+    },
     Label: function() {
         return _FxStyledComponents.Label;
     },

package/package.json

@@ -56,7 +56,7 @@
     "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""
   },
   "engines": {
-    "node": "18.17.1"
+    "node": "18"
   },
   "files": [
     "dist/**/*"
@@ -70,5 +70,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.1.66"
+  "version": "0.1.67"
 }