@fixefy/fixefy-ui-components 0.3.50 → 0.3.52

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;