@fixefy/fixefy-ui-components 0.3.51 → 0.3.53

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -1,35 +1,3 @@
 import React from 'react';
-export interface Option {
-    title: string;
-    value: string | number | boolean;
-    [key: string]: any;
-}
-export interface StylesOptions {
-    width?: string | number;
-    maxWidth?: string | number;
-    inputSx?: object;
-    menuSx?: object;
-}
-export type AsyncDropdownPropsType = {
-    initialValue?: Option | any;
-    styles?: StylesOptions;
-    method_name: string;
-    multiple?: boolean;
-    name: any;
-    variables: any;
-    onAdd?: (value: any) => void;
-    onRemoveOne?: (value: any) => void;
-    onRemoveAll?: () => void;
-    onUnselectAll?: () => void;
-    type?: 'checkbox' | 'text';
-    renderOptions?: (option: Option, index: number) => void;
-    [x: string]: any;
-    modal_type?: string;
-    query: string;
-    isInitialOpen?: boolean;
-    placeholder?: string;
-    rootStylesOverride?: any;
-    options_path?: string;
-    defaultValue?: any;
-};
-export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;
+import { AsyncDropdownPropsType } from './types';
+export declare const FxAsyncDropdown: (props: AsyncDropdownPropsType) => React.JSX.Element;

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -11,15 +10,15 @@ Object.defineProperty(exports, "FxAsyncDropdown", {
 });
 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 _graphqltag = require("graphql-tag");
 const _dropdownstyles = require("./styles/dropdown.styles");
 const _helpers = require("./helpers/helpers");
 const _client = require("@apollo/client");
 const _nookies = require("nookies");
+const _components = require("./components");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./useDropdownStore"));
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -33,6 +32,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();
@@ -113,30 +117,15 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
-    fontSize: "small"
-});
-const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
-    fontSize: "small"
-});
-const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
-    const { onAdd, onRemoveOne, onRemoveAll, onUnselectAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query, isInitialOpen, placeholder, title_path, rootStylesOverride, logo_placeholder, logo_folder_name, options_path, _id } = props;
-    let { defaultValue } = props;
+const FxAsyncDropdown = (props)=>{
+    const { fetchedProps, setFetchedProps, displayed, setDisplayed, options, setOptions, reason, setReason, isLastPage, setIsLastPage, isOpen, setIsOpen, searchValue, setSearchValue, page, setPage, prevPage, setPrevPage, pageSize, loadMore } = (0, _useDropdownStore.default)();
+    const { onAdd, onRemoveAll, onUnselectAll, fetcher, disabled, defaultValue, type = 'text', variables, search_path, modal_type, multiple, name, query, isInitialOpen, placeholder, title_path, rootStylesOverride, options_path, _id } = props;
     const ref = (0, _react.useRef)(null);
-    const theme = (0, _material.useTheme)();
-    const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
-    const [options, setOptions] = (0, _react.useState)([]);
-    const [reason, setReason] = (0, _react.useState)('init');
-    const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
-    const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
-    const [searchValue, setSearchValue] = (0, _react.useState)(null);
-    const [page, setPage] = (0, _react.useState)(1);
-    const [prevPage, setPrevPage] = (0, _react.useState)(0);
-    const pageSize = 20;
-    const { method_name } = variables;
-    const { where, sort } = fetcher.queryOptions.variables;
-    const ws = (0, _nookies.parseCookies)().ws;
-    const isLocal = fetcher.query.loc;
+    const { method_name } = variables !== null && variables !== void 0 ? variables : {};
+    var _fetcher_queryOptions_variables;
+    const { where, sort } = (_fetcher_queryOptions_variables = fetcher.queryOptions.variables) !== null && _fetcher_queryOptions_variables !== void 0 ? _fetcher_queryOptions_variables : {};
+    var _parseCookies;
+    const { ws } = (_parseCookies = (0, _nookies.parseCookies)()) !== null && _parseCookies !== void 0 ? _parseCookies : {};
     const [defaultValueWhere, setDefaultValueWhere] = (0, _react.useState)(where);
     const getWhere = ()=>{
         if (method_name == 'workspace') {
@@ -158,7 +147,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
             }) : _object_spread({}, where);
         }
     };
-    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: {
             where: getWhere(),
             skip: page * pageSize - pageSize,
@@ -166,7 +155,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
             sort: sort || {}
         }
     }));
-    const [defaultValueFetch, { data: defaultValueData }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+    const [defaultValueFetch, { data: defaultValueData }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
         variables: {
             where: defaultValueWhere,
             sort: sort || {}
@@ -188,9 +177,13 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
             const parsedData = JSON.parse(storedData);
             const items = parsedData[name];
             if (items) {
-                multiple ? setDisplayed([
-                    ...items
-                ]) : setDisplayed(items[0]);
+                if (multiple) {
+                    setDisplayed([
+                        ...items
+                    ]);
+                } else {
+                    setDisplayed(items[0]);
+                }
             }
         }
     }, [
@@ -203,10 +196,14 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
             if (newOptions == null || newOptions.length < pageSize) {
                 setIsLastPage(true);
             }
-            reason !== 'loaded more' ? setOptions(newOptions) : setOptions((prevOptions)=>[
-                    ...prevOptions,
+            if (reason !== 'loaded more') {
+                setOptions(newOptions);
+            } else {
+                setOptions([
+                    ...options,
                     ...newOptions
                 ]);
+            }
         }
     }, [
         data,
@@ -224,12 +221,18 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
         if (defaultValue && (defaultValueData === null || defaultValueData === void 0 ? void 0 : (_defaultValueData_method_name = defaultValueData[method_name]) === null || _defaultValueData_method_name === void 0 ? void 0 : _defaultValueData_method_name.length) == 1) {
             //choose default value
             handleOptionClick(defaultValueData === null || defaultValueData === void 0 ? void 0 : defaultValueData[method_name][0]);
-            onAdd && onAdd(defaultValueData === null || defaultValueData === void 0 ? void 0 : defaultValueData[method_name][0]);
+            if (onAdd) {
+                onAdd(defaultValueData === null || defaultValueData === void 0 ? void 0 : defaultValueData[method_name][0]);
+            }
         }
     }, [
         defaultValue,
         defaultValueData
     ]);
+    (0, _react.useEffect)(()=>{
+        setFetchedProps(props);
+        setDisplayed(multiple ? [] : '');
+    }, []);
     const handleSearch = (e)=>{
         setSearchValue(e.target.value);
         setReason('searched');
@@ -237,103 +240,55 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
         setPrevPage(0);
         setIsLastPage(false);
     };
-    const addToStoredDisplayed = (option)=>{
-        const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
-        let data = prevStored ? JSON.parse(prevStored) : {};
-        if (data[name]) {
-            if (multiple) {
-                data[name] = [
-                    ...data[name],
-                    option
-                ];
-            } else {
-                data[name] = [
-                    option
-                ];
-            }
-        } else {
-            data[name] = [
-                option
-            ];
-        }
-        sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(data));
-    };
-    const removeOneFromStoredDisplayed = (option)=>{
-        let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
-        if (storedDisplayed) {
-            storedDisplayed = JSON.parse(storedDisplayed);
-            if (multiple) {
-                const newDisplayed = storedDisplayed[name].filter((opt)=>opt[title_path] !== option[title_path]);
-                storedDisplayed[name] = newDisplayed;
-            } else {
-                delete storedDisplayed[name];
-            }
-            sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(storedDisplayed));
-        }
-    };
     const handleOptionClick = (option)=>{
-        let clicked = (0, _helpers.getOption)(option, title_path);
+        const clicked = (0, _helpers.getOption)(option, title_path);
         switch(multiple){
             case true:
                 if (displayed.map((item)=>{
                     return item[title_path];
                 }).includes(clicked)) {
-                    deleteOneItem(option);
+                    (0, _helpers.deleteOneItem)(option, fetchedProps, displayed, setDisplayed);
                 } else {
-                    onAdd && onAdd(option);
-                    !multiple && setIsOpen(false);
-                    setDisplayed((prev)=>[
-                            ...prev,
-                            option
-                        ]);
-                    addToStoredDisplayed(option);
+                    if (onAdd) {
+                        onAdd(option);
+                    }
+                    if (!multiple) {
+                        setIsOpen(false);
+                    }
+                    const opts = [
+                        ...displayed,
+                        option
+                    ];
+                    setDisplayed(opts);
+                    (0, _helpers.addToStoredDisplayed)(option, fetchedProps);
                 }
                 break;
             default:
                 setDisplayed(option);
-                onAdd && onAdd(option);
-                addToStoredDisplayed(option);
-                !multiple && !defaultValue && setIsOpen(false);
-        }
-    };
-    const deleteOneItem = (item)=>{
-        if (multiple) {
-            setDisplayed((prev)=>prev.filter((val)=>val[title_path] !== item[title_path]));
-        } else {
-            setDisplayed('');
-        }
-        onRemoveOne && onRemoveOne(item);
-        removeOneFromStoredDisplayed(item);
-    };
-    const isChecked = (option)=>{
-        const clicked = (0, _helpers.getOption)(option, title_path);
-        if (typeof displayed === 'string') {
-            return false;
-        } else {
-            if (multiple) {
-                return displayed.map((item)=>{
-                    return item[title_path];
-                }).includes(clicked);
-            } else {
-                return displayed[search_path] === clicked;
-            }
+                if (onAdd) {
+                    onAdd(option);
+                }
+                (0, _helpers.addToStoredDisplayed)(option, fetchedProps);
+                if (!multiple && !defaultValue) {
+                    setIsOpen(false);
+                }
         }
     };
     const selectAll = ()=>{
-        setDisplayed((prev)=>{
-            const unselectedOptions = options.filter((option)=>{
-                return !prev.map((item)=>item[title_path]).includes((0, _helpers.getOption)(option, title_path));
-            });
-            const opts = [
-                ...prev,
-                ...unselectedOptions
-            ];
-            onAdd && onAdd(opts);
-            sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify({
-                [name]: opts
-            }));
-            return opts;
+        const unselectedOptions = options.filter((option)=>{
+            return !displayed.map((item)=>item[title_path]).includes((0, _helpers.getOption)(option, title_path));
         });
+        const opts = [
+            ...displayed,
+            ...unselectedOptions
+        ];
+        setDisplayed(opts);
+        if (onAdd) {
+            onAdd(opts);
+        }
+        sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify({
+            [name]: opts
+        }));
     };
     const unSelectAll = ()=>{
         if (onUnselectAll) {
@@ -357,19 +312,8 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                                     }
                                 },
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        icon: uncheckedIcon,
-                                        checked: displayed.length === options.length,
-                                        checkedIcon: checkedIcon,
-                                        sx: {
-                                            mr: 1,
-                                            minWidth: 24,
-                                            minHeight: 24,
-                                            p: 0,
-                                            ['& svg']: {
-                                                fill: theme.palette.primary.light
-                                            }
-                                        }
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.CheckboxIcon, {
+                                        checked: displayed.length === options.length
                                     }),
                                     (0, _helpers.titleCase)('select all')
                                 ]
@@ -380,25 +324,13 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                                         handleOptionClick(option);
                                     },
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                            icon: uncheckedIcon,
-                                            checked: isChecked(option),
-                                            checkedIcon: checkedIcon,
-                                            sx: {
-                                                mr: 1,
-                                                minWidth: 24,
-                                                minHeight: 24,
-                                                p: 0,
-                                                ['& svg']: {
-                                                    fill: theme.palette.primary.light
-                                                }
-                                            }
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.CheckboxIcon, {
+                                            checked: (0, _helpers.isChecked)(option, displayed, fetchedProps)
                                         }),
                                         getSingleOptionFromListOrDisplayed(option, 'list')
                                     ]
                                 }, option._id);
-                            }),
-                            ' '
+                            })
                         ]
                     });
                 }
@@ -416,10 +348,10 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                 }
         }
     };
-    const loadMore = ()=>{
-        setPage((prevPage)=>prevPage + 1);
-        setPrevPage((prevPage)=>prevPage + 1);
-    };
+    // const loadMore = () => {
+    // 	setPage( ( prevPage ) => prevPage + 1 )
+    // 	setPrevPage( ( prevPage ) => prevPage + 1 )
+    // }
     const getCurrentValues = ()=>{
         if (multiple) {
             return getDisplayedValuesMultiple();
@@ -427,123 +359,28 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
             return getSingleOptionFromListOrDisplayed(displayed, 'displayed');
         }
     };
-    const OneOption = ({ option, curValue, modal, modal_type })=>{
-        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: [
-                        modal_type == 'logo' && /*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
-                            option: option
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                            variant: "subtitle2",
-                            color: theme.palette.typography.title,
-                            children: (0, _helpers.titleCase)(curValue)
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
-                            option: option,
-                            isDisplay: modal == 'displayed'
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(ChosenIcon, {
-                    option: option,
-                    isDisplay: modal == 'list'
-                })
-            ]
-        }, option._id);
-    };
-    const DeleteButton = ({ option, isDisplay })=>{
-        const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === (0, _helpers.getOption)(option, title_path));
-        switch(isDisplayButton){
-            case true:
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    onClick: ()=>{
-                        deleteOneItem(option);
-                    },
-                    children: "x"
-                });
-            default:
-                return null;
-        }
-    };
-    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 Logo = ({ option })=>{
-        var _option_name;
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-            style: {
-                width: '70px'
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
-                icon: `${option.logo ? `${logo_folder_name}/${option.logo}` : logo_placeholder ? logo_placeholder : (_option_name = option === null || option === void 0 ? void 0 : option[name]) !== null && _option_name !== void 0 ? _option_name : 'x'}`,
-                width: 70,
-                height: 16,
-                variant: "rounded",
-                fontSize: 17,
-                background: (0, _helpers.useRandomColor)(theme)
-            })
-        });
-    };
-    const Chip = ({ option, curValue, modal })=>{
-        return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
-            status: curValue,
-            label: (0, _helpers.titleCase)(curValue),
-            variant: "outlined",
-            onDelete: ()=>{
-                deleteOneItem(option);
-            }
-        }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
-            status: curValue,
-            label: (0, _helpers.titleCase)(curValue),
-            variant: "outlined"
-        }, option._id);
-    };
     const getSingleOptionFromListOrDisplayed = (option, modal)=>{
         if (option) {
             let rv = null;
             const clicked = (0, _helpers.getOption)(option, title_path);
             switch(modal_type){
                 case 'chip':
-                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(Chip, {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChipOption, {
                         option: option,
                         curValue: clicked,
                         modal: modal
                     });
                     break;
                 case 'logo':
-                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LogoOption, {
                         option: option,
                         curValue: clicked,
-                        modal: modal,
-                        modal_type: modal_type
+                        modal: modal
                     });
                     break;
                 case 'text':
                 default:
-                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TextOption, {
                         option: option,
                         curValue: clicked,
                         modal: modal
@@ -566,11 +403,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                     sx: {
                         overflow: 'hidden',
                         flexWrap: 'wrap',
-                        gap: 1
+                        gap: 1,
+                        width: '100%'
                     },
-                    children: displayed.map((item)=>{
+                    children: Array.isArray(displayed) && (displayed === null || displayed === void 0 ? void 0 : displayed.map((item)=>{
                         return getSingleOptionFromListOrDisplayed(item, 'displayed');
-                    })
+                    }))
                 }),
                 (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                     sx: {
@@ -582,10 +420,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
                         onClick: ()=>{
                             setDisplayed([]);
-                            onRemoveAll && onRemoveAll();
+                            if (onRemoveAll) {
+                                onRemoveAll();
+                            }
                             sessionStorage.removeItem(`dropdown-${query}-${name}-${_id}`);
                         },
-                        icon: `filters/remove_all_button.svg`,
+                        icon: 'filters/remove_all_button.svg',
                         width: 16,
                         height: 16
                     })
@@ -609,7 +449,9 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                                     handleSearch(e);
                                 },
                                 onFocus: ()=>{
-                                    !isInitialOpen && setIsOpen(true);
+                                    if (!isInitialOpen) {
+                                        setIsOpen(true);
+                                    }
                                 }
                             }),
                             loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
@@ -627,7 +469,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                             onClick: ()=>{
                                 setReason('loaded more');
-                                loadMore();
+                                loadMore(page, prevPage);
                             },
                             children: "load more"
                         })
@@ -636,4 +478,4 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
             }) : null
         ]
     });
-});
+};

package/dist/FxAsyncDropdown/components/CheckboxIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CheckboxIcon: ({ checked }: {
+    checked: any;
+}) => React.JSX.Element;

package/dist/FxAsyncDropdown/components/CheckboxIcon.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CheckboxIcon", {
+    enumerable: true,
+    get: function() {
+        return CheckboxIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _iconsmaterial = require("@mui/icons-material");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
+    fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
+    fontSize: "small"
+});
+const CheckboxIcon = ({ checked })=>{
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+        icon: uncheckedIcon,
+        checked: checked,
+        checkedIcon: checkedIcon,
+        sx: {
+            mr: 1,
+            minWidth: 24,
+            minHeight: 24,
+            p: 0,
+            ['& svg']: {
+                fill: theme.palette.primary.light
+            }
+        }
+    });
+};

package/dist/FxAsyncDropdown/components/ChipOption.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ChipOption: ({ option, curValue, modal }: {
+    option: any;
+    curValue: any;
+    modal: 'displayed' | 'list';
+}) => React.JSX.Element;

package/dist/FxAsyncDropdown/components/ChipOption.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChipOption", {
+    enumerable: true,
+    get: function() {
+        return ChipOption;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxChip = require("../../FxChip");
+const _helpers = require("../helpers/helpers");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ChipOption = ({ option, curValue, modal })=>{
+    const { fetchedProps, displayed, setDisplayed } = (0, _useDropdownStore.default)();
+    return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+        status: curValue,
+        label: (0, _helpers.titleCase)(curValue),
+        variant: "outlined",
+        onDelete: ()=>{
+            (0, _helpers.deleteOneItem)(option, fetchedProps, displayed, setDisplayed);
+        }
+    }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+        status: curValue,
+        label: (0, _helpers.titleCase)(curValue),
+        variant: "outlined"
+    }, option._id);
+};

package/dist/FxAsyncDropdown/components/ChosenIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ChosenIcon: ({ option, isDisplay }: {
+    option: any;
+    isDisplay: boolean;
+}) => React.JSX.Element | null;

package/dist/FxAsyncDropdown/components/ChosenIcon.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChosenIcon", {
+    enumerable: true,
+    get: function() {
+        return ChosenIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxIcon = require("../../FxIcon");
+const _helpers = require("../helpers/helpers");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ChosenIcon = ({ option, isDisplay })=>{
+    const { fetchedProps, displayed } = (0, _useDropdownStore.default)();
+    const { title_path, multiple, search_path } = fetchedProps;
+    const isChecked = (option)=>{
+        const clicked = (0, _helpers.getOption)(option, title_path);
+        if (typeof displayed === 'string') {
+            return false;
+        } else {
+            if (multiple) {
+                return Array.isArray(displayed) && displayed.map((item)=>{
+                    return item[title_path];
+                }).includes(clicked);
+            } else {
+                return displayed[search_path] === clicked;
+            }
+        }
+    };
+    if (isDisplay && isChecked(option)) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+            width: 16,
+            height: 16,
+            icon: 'filters/chosen_icon.svg'
+        });
+    }
+    return null;
+};

package/dist/FxAsyncDropdown/components/DeleteButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const DeleteButton: ({ option, isDisplay }: {
+    option: any;
+    isDisplay: boolean;
+}) => React.JSX.Element | null;

package/dist/FxAsyncDropdown/components/DeleteButton.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DeleteButton", {
+    enumerable: true,
+    get: function() {
+        return DeleteButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+const _helpers = require("../helpers/helpers");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeleteButton = ({ option, isDisplay })=>{
+    const { fetchedProps, displayed, setDisplayed } = (0, _useDropdownStore.default)();
+    const { multiple, search_path, getOption, title_path } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === getOption(option, title_path));
+    switch(isDisplayButton){
+        case true:
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    margin: '0 5px'
+                },
+                onClick: ()=>{
+                    (0, _helpers.deleteOneItem)(option, fetchedProps, displayed, setDisplayed);
+                },
+                children: "x"
+            });
+        default:
+            return null;
+    }
+};

package/dist/FxAsyncDropdown/components/LogoOption.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LogoOption: ({ option, curValue, modal }: {
+    option: any;
+    curValue: any;
+    modal: 'displayed' | 'list';
+}) => React.JSX.Element;

package/dist/FxAsyncDropdown/components/LogoOption.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LogoOption", {
+    enumerable: true,
+    get: function() {
+        return LogoOption;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxIcon = require("../../FxIcon");
+const _material = require("@mui/material");
+const _styles = require("@mui/styles");
+const _helpers = require("../helpers/helpers");
+const _fixefyhooks = require("@fixefy/fixefy-hooks");
+const _DeleteButton = require("./DeleteButton");
+const _ChosenIcon = require("./ChosenIcon");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LogoOption = ({ option, curValue, modal })=>{
+    const theme = (0, _styles.useTheme)();
+    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,
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
+                        option: option
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "subtitle2",
+                                color: theme.palette.typography.title,
+                                children: (0, _helpers.titleCase)(curValue)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
+                                option: option,
+                                isDisplay: modal == 'displayed'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
+                option: option,
+                isDisplay: modal == 'list'
+            })
+        ]
+    }, option._id);
+};
+const Logo = ({ option })=>{
+    const getRandomColor = (0, _fixefyhooks.useRandomColor)();
+    const { fetchedProps } = (0, _useDropdownStore.default)();
+    const { logo_folder_name, logo_placeholder, name } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    var _option_name;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        style: {
+            width: '70px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+            icon: `${option.logo ? `${logo_folder_name}/${option.logo}` : logo_placeholder ? logo_placeholder : (_option_name = option === null || option === void 0 ? void 0 : option[name]) !== null && _option_name !== void 0 ? _option_name : 'x'}`,
+            width: 70,
+            height: 16,
+            variant: "rounded",
+            fontSize: 17,
+            background: getRandomColor()
+        })
+    });
+};

package/dist/FxAsyncDropdown/components/TextOption.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TextOption: ({ option, curValue, modal }: {
+    option: any;
+    curValue: any;
+    modal: 'displayed' | 'list';
+}) => React.JSX.Element;

package/dist/FxAsyncDropdown/components/TextOption.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TextOption", {
+    enumerable: true,
+    get: function() {
+        return TextOption;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _styles = require("@mui/styles");
+const _helpers = require("../helpers/helpers");
+const _DeleteButton = require("./DeleteButton");
+const _ChosenIcon = require("./ChosenIcon");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TextOption = ({ option, curValue, modal })=>{
+    const theme = (0, _styles.useTheme)();
+    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.jsx)(_material.Box, {
+                sx: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    gap: 1,
+                    alignItems: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle2",
+                            color: theme.palette.typography.title,
+                            children: (0, _helpers.titleCase)(curValue)
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
+                            option: option,
+                            isDisplay: modal == 'displayed'
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
+                option: option,
+                isDisplay: modal == 'list'
+            })
+        ]
+    }, option._id);
+};

package/dist/FxAsyncDropdown/components/index.d.ts

@@ -0,0 +1,6 @@
+export { CheckboxIcon } from './CheckboxIcon';
+export { ChipOption } from './ChipOption';
+export { ChosenIcon } from './ChosenIcon';
+export { DeleteButton } from './DeleteButton';
+export { LogoOption } from './LogoOption';
+export { TextOption } from './TextOption';

package/dist/FxAsyncDropdown/components/index.js

@@ -0,0 +1,36 @@
+"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, {
+    CheckboxIcon: function() {
+        return _CheckboxIcon.CheckboxIcon;
+    },
+    ChipOption: function() {
+        return _ChipOption.ChipOption;
+    },
+    ChosenIcon: function() {
+        return _ChosenIcon.ChosenIcon;
+    },
+    DeleteButton: function() {
+        return _DeleteButton.DeleteButton;
+    },
+    LogoOption: function() {
+        return _LogoOption.LogoOption;
+    },
+    TextOption: function() {
+        return _TextOption.TextOption;
+    }
+});
+const _CheckboxIcon = require("./CheckboxIcon");
+const _ChipOption = require("./ChipOption");
+const _ChosenIcon = require("./ChosenIcon");
+const _DeleteButton = require("./DeleteButton");
+const _LogoOption = require("./LogoOption");
+const _TextOption = require("./TextOption");

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

@@ -6,3 +6,7 @@ export declare const titleCase: (str?: string) => string;
 export declare const toPascalCase: (string: string, title?: boolean) => string;
 export declare const useRandomColor: (theme: any) => () => unknown;
 export declare const getOption: (option: any, title_path: string) => any;
+export declare const removeOneFromStoredDisplayed: (option: any, fetchedProps: any) => void;
+export declare const deleteOneItem: (item: any, fetchedProps: any, displayed: any, setDisplayed: any) => void;
+export declare const addToStoredDisplayed: (option: any, fetchedProps: any) => void;
+export declare const isChecked: (option: any, displayed: any, fetchedProps: any) => any;

package/dist/FxAsyncDropdown/helpers/helpers.js

@@ -9,6 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    addToStoredDisplayed: function() {
+        return addToStoredDisplayed;
+    },
+    deleteOneItem: function() {
+        return deleteOneItem;
+    },
     getJPart: function() {
         return getJPart;
     },
@@ -18,12 +24,18 @@ _export(exports, {
     isArrayValid: function() {
         return isArrayValid;
     },
+    isChecked: function() {
+        return isChecked;
+    },
     isObjectValid: function() {
         return isObjectValid;
     },
     isStringValid: function() {
         return isStringValid;
     },
+    removeOneFromStoredDisplayed: function() {
+        return removeOneFromStoredDisplayed;
+    },
     titleCase: function() {
         return titleCase;
     },
@@ -155,3 +167,67 @@ const getOption = (option, title_path)=>{
     }
     return null;
 };
+const removeOneFromStoredDisplayed = (option, fetchedProps)=>{
+    const { multiple, title_path, name, _id, query } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+    if (storedDisplayed) {
+        storedDisplayed = JSON.parse(storedDisplayed);
+        if (multiple) {
+            const newDisplayed = storedDisplayed[name].filter((opt)=>opt[title_path] !== option[title_path]);
+            storedDisplayed[name] = newDisplayed;
+        } else {
+            delete storedDisplayed[name];
+        }
+        sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(storedDisplayed));
+    }
+};
+const deleteOneItem = (item, fetchedProps, displayed, setDisplayed)=>{
+    const { multiple, title_path, onRemoveOne } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    if (multiple) {
+        const newDisplayed = displayed.filter((opt)=>opt[title_path] !== item[title_path]);
+        setDisplayed(newDisplayed);
+    } else {
+        setDisplayed('');
+    }
+    if (onRemoveOne) {
+        onRemoveOne(item);
+    }
+    removeOneFromStoredDisplayed(item, fetchedProps);
+};
+const addToStoredDisplayed = (option, fetchedProps)=>{
+    const { name, multiple, query, _id } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+    const data = prevStored ? JSON.parse(prevStored) : {};
+    if (data[name]) {
+        if (multiple) {
+            data[name] = [
+                ...data[name],
+                option
+            ];
+        } else {
+            data[name] = [
+                option
+            ];
+        }
+    } else {
+        data[name] = [
+            option
+        ];
+    }
+    sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(data));
+};
+const isChecked = (option, displayed, fetchedProps)=>{
+    const { multiple, title_path, search_path } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const clicked = getOption(option, title_path);
+    if (typeof displayed === 'string') {
+        return false;
+    } else {
+        if (multiple) {
+            return displayed.map((item)=>{
+                return item[title_path];
+            }).includes(clicked);
+        } else {
+            return displayed[search_path] === clicked;
+        }
+    }
+};

package/dist/FxAsyncDropdown/index.d.ts

@@ -1 +1 @@
-export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from './FxAsyncDropdown';
+export { FxAsyncDropdown } from './FxAsyncDropdown';

package/dist/FxAsyncDropdown/index.js

@@ -2,24 +2,10 @@
 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, {
-    AsyncDropdownPropsType: function() {
-        return _FxAsyncDropdown.AsyncDropdownPropsType;
-    },
-    FxAsyncDropdown: function() {
+Object.defineProperty(exports, "FxAsyncDropdown", {
+    enumerable: true,
+    get: function() {
         return _FxAsyncDropdown.FxAsyncDropdown;
-    },
-    Option: function() {
-        return _FxAsyncDropdown.Option;
-    },
-    StylesOptions: function() {
-        return _FxAsyncDropdown.StylesOptions;
     }
 });
 const _FxAsyncDropdown = require("./FxAsyncDropdown");

package/dist/FxAsyncDropdown/types.d.ts

@@ -0,0 +1,39 @@
+export interface Option {
+    title: string;
+    value: string | number | boolean;
+    [key: string]: any;
+}
+export interface StylesOptions {
+    width?: string | number;
+    maxWidth?: string | number;
+    inputSx?: object;
+    menuSx?: object;
+}
+export type AsyncDropdownPropsType = {
+    initialValue?: Option | any;
+    styles?: StylesOptions;
+    multiple?: boolean;
+    name: any;
+    variables: any;
+    onAdd?: (value: any) => void;
+    onRemoveOne?: (value: any) => void;
+    onRemoveAll?: () => void;
+    onUnselectAll?: () => void;
+    type?: 'checkbox' | 'text';
+    renderOptions?: (option: Option, index: number) => void;
+    [x: string]: any;
+    modal_type?: string;
+    query: string;
+    isInitialOpen?: boolean;
+    placeholder?: string;
+    rootStylesOverride?: any;
+    options_path?: string;
+    defaultValue?: any;
+    fetcher?: any;
+    disabled?: boolean;
+    search_path?: any;
+    title_path: string;
+    _id: any;
+    logo_folder_name?: string;
+    logo_placeholder?: string;
+};

package/dist/FxAsyncDropdown/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/FxAsyncDropdown/useDropdownStore.d.ts

@@ -0,0 +1,2 @@
+declare const useDropdownStore: import("zustand").UseBoundStore<import("zustand").StoreApi<unknown>>;
+export default useDropdownStore;

package/dist/FxAsyncDropdown/useDropdownStore.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _zustand = require("zustand");
+const useDropdownStore = (0, _zustand.create)((set)=>({
+        fetchedProps: {},
+        setFetchedProps: (val)=>set({
+                fetchedProps: val
+            }),
+        displayed: null,
+        setDisplayed: (val)=>set({
+                displayed: val
+            }),
+        options: [],
+        setOptions: (val)=>set({
+                options: val
+            }),
+        reason: 'init',
+        setReason: (val)=>set({
+                reason: val
+            }),
+        isLastPage: false,
+        setIsLastPage: (val)=>set({
+                isLastPage: val
+            }),
+        isOpen: false,
+        setIsOpen: (val)=>set({
+                isOpen: val
+            }),
+        searchValue: null,
+        setSearchValue: (val)=>set({
+                searchValue: val
+            }),
+        page: 1,
+        setPage: (val)=>set({
+                page: val
+            }),
+        prevPage: 0,
+        setPrevPage: (val)=>set({
+                prevPage: val
+            }),
+        pageSize: 20,
+        loadMore: (page, prevPage)=>{
+            set({
+                page: page + 1,
+                prevPage: prevPage + 1
+            });
+        }
+    }));
+const _default = useDropdownStore;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { FxActionsTray } from './FxActionsTray';
 export { FxAggregationsBar, AggregationsDataPropsType, AggreationsBarPropsType } from './FxAggregationsBar';
-export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from './FxAsyncDropdown';
+export { FxAsyncDropdown } from './FxAsyncDropdown';
 export { FxAvatar, AvatarPropsType, BackgroundColorsType } from './FxAvatar';
 export { FxButton, ButtonPropsType } from './FxButton';
 export { FxChip, ChipPropsType } from './FxChip';

package/dist/index.js

@@ -18,9 +18,6 @@ _export(exports, {
     Arrow: function() {
         return _FxPopper.Arrow;
     },
-    AsyncDropdownPropsType: function() {
-        return _FxAsyncDropdown.AsyncDropdownPropsType;
-    },
     AvatarPropsType: function() {
         return _FxAvatar.AvatarPropsType;
     },
@@ -159,9 +156,6 @@ _export(exports, {
     NumberfieldPropsType: function() {
         return _FxNumberField.NumberfieldPropsType;
     },
-    Option: function() {
-        return _FxAsyncDropdown.Option;
-    },
     Options: function() {
         return _FxStatusBar.Options;
     },
@@ -213,9 +207,6 @@ _export(exports, {
     StepsLauncher: function() {
         return _FxWizard.StepsLauncher;
     },
-    StylesOptions: function() {
-        return _FxAsyncDropdown.StylesOptions;
-    },
     TagPropsType: function() {
         return _FxTag.TagPropsType;
     },

package/package.json

@@ -19,7 +19,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-use-wizard": "2.3.0",
-    "tss-react": "^4.9.14"
+    "tss-react": "^4.9.14",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
@@ -69,5 +70,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.3.51"
+  "version": "0.3.53"
 }