@fixefy/fixefy-ui-components 0.3.108 → 0.3.110

package/dist/fixefy-ui-components/src/FxAsyncDropdown/FxAsyncDropdown.js

@@ -0,0 +1,500 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxAsyncDropdown", {
+    enumerable: true,
+    get: function() {
+        return FxAsyncDropdown;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
+const _CircularProgress = /*#__PURE__*/ _interop_require_default(require("@mui/material/CircularProgress"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Stack = /*#__PURE__*/ _interop_require_default(require("@mui/material/Stack"));
+const _FxIcon = require("../FxIcon");
+const _graphqltag = require("graphql-tag");
+const _dropdownstyles = require("./styles/dropdown.styles");
+const _helpers = require("./helpers/helpers");
+const _hooks = require("@apollo/client/react/hooks");
+const _fixefycookies = require("@fixefy/fixefy-cookies");
+const _components = require("./components");
+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
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const FxAsyncDropdown = (props)=>{
+    var _fetcher_query;
+    const { assetUrl, 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 { 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 _CookieHelper_getAll;
+    const { ws } = (_CookieHelper_getAll = _fixefycookies.CookieHelper.getAll(null)) !== null && _CookieHelper_getAll !== void 0 ? _CookieHelper_getAll : {};
+    const isLocal = fetcher === null || fetcher === void 0 ? void 0 : (_fetcher_query = fetcher.query) === null || _fetcher_query === void 0 ? void 0 : _fetcher_query.loc;
+    const gqlQuery = isLocal ? fetcher.query.loc.source.body : fetcher.query;
+    const [defaultValueWhere, setDefaultValueWhere] = (0, _react.useState)(where);
+    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 getWhere = ()=>{
+        if (method_name == 'workspace') {
+            return searchValue ? _object_spread_props(_object_spread({}, where), {
+                _id: ws,
+                [search_path]: {
+                    $regex: searchValue,
+                    $options: 'i'
+                }
+            }) : _object_spread_props(_object_spread({}, where), {
+                _id: ws
+            });
+        } else {
+            return searchValue ? _object_spread_props(_object_spread({}, where), {
+                [search_path]: {
+                    $regex: searchValue,
+                    $options: 'i'
+                }
+            }) : _object_spread({}, where);
+        }
+    };
+    const loadMore = ()=>{
+        setPage((prevPage)=>prevPage + 1);
+        setPrevPage((prevPage)=>prevPage + 1);
+    };
+    const [fetch, { data, loading }] = (0, _hooks.useLazyQuery)((0, _graphqltag.gql)(gqlQuery), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+        variables: {
+            where: getWhere(),
+            skip: page * pageSize - pageSize,
+            limit: pageSize,
+            sort: sort || {}
+        }
+    }));
+    const [defaultValueFetch, { data: defaultValueData }] = (0, _hooks.useLazyQuery)((0, _graphqltag.gql)(gqlQuery), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+        variables: {
+            where: defaultValueWhere,
+            sort: sort || {}
+        }
+    }));
+    (0, _react.useEffect)(()=>{
+        if (!disabled) {
+            fetch();
+        }
+    }, []);
+    (0, _react.useEffect)(()=>{
+        if (!disabled && defaultValue) {
+            defaultValueFetch();
+        }
+    }, []);
+    (0, _react.useEffect)(()=>{
+        const storedData = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+        if (storedData) {
+            const parsedData = JSON.parse(storedData);
+            const items = parsedData[name];
+            if (items) {
+                if (multiple) {
+                    setDisplayed([
+                        ...items
+                    ]);
+                } else {
+                    setDisplayed(items[0]);
+                }
+            }
+        }
+    }, [
+        query,
+        name
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (data && !isLastPage && prevPage < page) {
+            const newOptions = options_path ? (0, _helpers.getJPart)(data, options_path) : (0, _helpers.getJPart)(data, method_name);
+            if (newOptions == null || newOptions.length < pageSize) {
+                setIsLastPage(true);
+            }
+            if (reason !== 'loaded more') {
+                setOptions(newOptions);
+            } else {
+                setOptions([
+                    ...options,
+                    ...newOptions
+                ]);
+            }
+        }
+    }, [
+        data,
+        reason
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (defaultValue) {
+            setDefaultValueWhere(_object_spread_props(_object_spread({}, where), {
+                [title_path]: defaultValue
+            }));
+        }
+    }, []);
+    (0, _react.useEffect)(()=>{
+        var _defaultValueData_method_name;
+        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]);
+            if (onAdd) {
+                onAdd(defaultValueData === null || defaultValueData === void 0 ? void 0 : defaultValueData[method_name][0]);
+            }
+        }
+    }, [
+        defaultValue,
+        defaultValueData
+    ]);
+    const handleSearch = (e)=>{
+        setSearchValue(e.target.value);
+        setReason('searched');
+        setPage(1);
+        setPrevPage(0);
+        setIsLastPage(false);
+    };
+    const handleOptionClick = (option)=>{
+        const clicked = (0, _helpers.getOption)(option, title_path);
+        switch(multiple){
+            case true:
+                if (displayed.map((item)=>{
+                    return item[title_path];
+                }).includes(clicked)) {
+                    (0, _helpers.deleteOneItem)(option, props, displayed, setDisplayed);
+                } else {
+                    if (onAdd) {
+                        onAdd(option);
+                    }
+                    if (!multiple) {
+                        setIsOpen(false);
+                    }
+                    const opts = [
+                        ...displayed,
+                        option
+                    ];
+                    setDisplayed(opts);
+                    (0, _helpers.addToStoredDisplayed)(option, props);
+                }
+                break;
+            default:
+                setDisplayed(option);
+                if (onAdd) {
+                    onAdd(option);
+                }
+                (0, _helpers.addToStoredDisplayed)(option, props);
+                if (!multiple && !defaultValue) {
+                    setIsOpen(false);
+                }
+        }
+    };
+    const selectAll = ()=>{
+        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) {
+            onUnselectAll();
+            setDisplayed([]);
+            sessionStorage.removeItem(`dropdown-${query}-${name}-${_id}`);
+        }
+    };
+    const displayListOptions = ()=>{
+        switch(type){
+            case 'checkbox':
+                {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            multiple && onUnselectAll && /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                                onClick: ()=>{
+                                    if (displayed.length === options.length) {
+                                        unSelectAll();
+                                    } else {
+                                        selectAll();
+                                    }
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.CheckboxIcon, {
+                                        checked: displayed.length === options.length
+                                    }),
+                                    (0, _helpers.titleCase)('select all')
+                                ]
+                            }),
+                            options.map((option)=>{
+                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                                    onClick: ()=>{
+                                        handleOptionClick(option);
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.CheckboxIcon, {
+                                            checked: (0, _helpers.isChecked)(option, displayed, props)
+                                        }),
+                                        getSingleOptionFromListOrDisplayed(option, 'list')
+                                    ]
+                                }, option._id);
+                            })
+                        ]
+                    });
+                }
+            case 'text':
+            default:
+                {
+                    return options.map((option)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: getSingleOptionFromListOrDisplayed(option, 'list')
+                        }, option._id);
+                    });
+                }
+        }
+    };
+    const getCurrentValues = ()=>{
+        if (multiple) {
+            return getDisplayedValuesMultiple();
+        } else {
+            return getSingleOptionFromListOrDisplayed(displayed, 'displayed');
+        }
+    };
+    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)(_components.ChipOption, {
+                        option: option,
+                        curValue: clicked,
+                        modal: modal,
+                        fetchedProps: props,
+                        displayed: displayed,
+                        setDisplayed: setDisplayed
+                    });
+                    break;
+                case 'logo':
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LogoOption, {
+                        option: option,
+                        curValue: clicked,
+                        modal: modal,
+                        fetchedProps: props,
+                        displayed: displayed,
+                        setDisplayed: setDisplayed
+                    });
+                    break;
+                case 'text':
+                default:
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TextOption, {
+                        option: option,
+                        curValue: clicked,
+                        modal: modal,
+                        fetchedProps: props,
+                        displayed: displayed,
+                        setDisplayed: setDisplayed
+                    });
+                    break;
+            }
+            return rv;
+        }
+    };
+    const getDisplayedValuesMultiple = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            direction: 'row',
+            sx: {
+                display: 'flex',
+                justifyContent: 'space-between'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                    direction: 'row',
+                    sx: {
+                        overflow: 'hidden',
+                        flexWrap: 'wrap',
+                        gap: 1,
+                        width: '100%'
+                    },
+                    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)(_Box.default, {
+                    sx: {
+                        minWidth: '20px',
+                        maxWidth: '20px',
+                        cursor: 'pointer',
+                        paddingLeft: '3px'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        assetUrl: assetUrl,
+                        onClick: ()=>{
+                            setDisplayed([]);
+                            if (onRemoveAll) {
+                                onRemoveAll();
+                            }
+                            sessionStorage.removeItem(`dropdown-${query}-${name}-${_id}`);
+                        },
+                        icon: 'filters/remove_all_button.svg',
+                        width: 16,
+                        height: 16
+                    })
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        style: rootStylesOverride,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                children: [
+                    getCurrentValues(),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
+                        disabled: disabled,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                autoFocus: true,
+                                placeholder: placeholder || 'Select an option...',
+                                onChange: (e)=>{
+                                    handleSearch(e);
+                                },
+                                onFocus: ()=>{
+                                    if (!isInitialOpen) {
+                                        setIsOpen(true);
+                                    }
+                                }
+                            }),
+                            loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CircularProgress.default, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            (isInitialOpen || isOpen) && options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
+                ref: ref,
+                children: [
+                    displayListOptions(),
+                    !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            onClick: ()=>{
+                                setReason('loaded more');
+                                loadMore();
+                            },
+                            children: "load more"
+                        })
+                    })
+                ]
+            }) : null
+        ]
+    });
+};

package/dist/fixefy-ui-components/src/FxAsyncDropdown/components/CheckboxIcon.js

@@ -0,0 +1,44 @@
+"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 _Checkbox = /*#__PURE__*/ _interop_require_default(require("@mui/material/Checkbox"));
+const _styles = require("@mui/material/styles");
+const _CheckBoxOutlineBlank = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const _CheckBox = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBox"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckBoxOutlineBlank.default, {
+    fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckBox.default, {
+    fontSize: "small"
+});
+const CheckboxIcon = ({ checked })=>{
+    const theme = (0, _styles.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+        icon: uncheckedIcon,
+        checked: checked,
+        checkedIcon: checkedIcon,
+        sx: {
+            mr: 1,
+            minWidth: 24,
+            minHeight: 24,
+            p: 0,
+            ['& svg']: {
+                fill: theme.palette.primary.light
+            }
+        }
+    });
+};

package/dist/fixefy-ui-components/src/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");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ChipOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
+    return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+        assetUrl: fetchedProps.assetUrl,
+        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, {
+        assetUrl: fetchedProps.assetUrl,
+        status: curValue,
+        label: (0, _helpers.titleCase)(curValue),
+        variant: "outlined"
+    }, option._id);
+};

package/dist/fixefy-ui-components/src/FxAsyncDropdown/components/ChosenIcon.js

@@ -0,0 +1,45 @@
+"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");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ChosenIcon = ({ option, isDisplay, fetchedProps, displayed })=>{
+    const { assetUrl, 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',
+            assetUrl: assetUrl
+        });
+    }
+    return null;
+};

package/dist/fixefy-ui-components/src/FxAsyncDropdown/components/DeleteButton.js

@@ -0,0 +1,37 @@
+"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 _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _helpers = require("../helpers/helpers");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeleteButton = ({ option, isDisplay, fetchedProps, displayed, setDisplayed })=>{
+    const { multiple, search_path, 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] === (0, _helpers.getOption)(option, title_path));
+    switch(isDisplayButton){
+        case true:
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                sx: {
+                    margin: '0 5px'
+                },
+                onClick: ()=>{
+                    (0, _helpers.deleteOneItem)(option, fetchedProps, displayed, setDisplayed);
+                },
+                children: "x"
+            });
+        default:
+            return null;
+    }
+};