@fixefy/fixefy-ui-components 0.0.50 → 0.0.51

package/dist/FxAggregationsBar/helpers/structureReader.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "structureReader", {
+    enumerable: true,
+    get: function() {
+        return structureReader;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _FxScore = require("../../FxScore");
+const _FxStatisticsBar = require("../../FxStatisticsBar");
+const _FxProgressCounter = require("../../FxProgressCounter");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const structureReader = (structure, filter, collapsed, initialValues)=>{
+    const { extended, type } = structure;
+    switch(type){
+        case 'aggregations_primary_container':
+            return structure.children.map((child, index)=>{
+                var _child_input_type, _child_input_type1, _extended_variables;
+                return ((_child_input_type = child.input_type) === null || _child_input_type === void 0 ? void 0 : _child_input_type.value) === 'percentage' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxScore.FxScore, {
+                    structure: child,
+                    filter: filter,
+                    value: initialValues === null || initialValues === void 0 ? void 0 : initialValues.score
+                }, index) : ((_child_input_type1 = child.input_type) === null || _child_input_type1 === void 0 ? void 0 : _child_input_type1.value) === 'progress' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxProgressCounter.FxProgressCounter, {
+                    structure: child,
+                    filter: filter,
+                    values: initialValues
+                }, index) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: 'fit-content',
+                        padding: 2,
+                        borderRadius: 2,
+                        backgroundColor: (extended === null || extended === void 0 ? void 0 : (_extended_variables = extended.variables) === null || _extended_variables === void 0 ? void 0 : _extended_variables.bg) || '#FFFFFF'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStatisticsBar.FxStatisticsBar, {
+                        structure: child,
+                        filter: filter,
+                        collapsed: collapsed,
+                        value: initialValues ? initialValues[child.extended.object_path] : null
+                    }, index)
+                });
+            });
+        case 'aggregations_secondary_container':
+            var _extended_variables;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                direction: "row",
+                divider: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    orientation: "vertical",
+                    flexItem: true
+                }),
+                spacing: 2,
+                sx: {
+                    backgroundColor: (extended === null || extended === void 0 ? void 0 : (_extended_variables = extended.variables) === null || _extended_variables === void 0 ? void 0 : _extended_variables.bg) || '#FFFFFF',
+                    borderRadius: '8px',
+                    padding: '24px 16px'
+                },
+                children: structure.children.map((child, index)=>{
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStatisticsBar.FxStatisticsBar, {
+                        structure: child,
+                        filter: filter,
+                        collapsed: collapsed,
+                        value: initialValues ? initialValues[child.extended.object_path] : null
+                    }, index);
+                })
+            });
+    }
+};

package/dist/FxAggregationsBar/index.d.ts

@@ -0,0 +1 @@
+export { FxAggregationsBar, AggregationsDataPropsType, AggreationsBarPropsType } from './FxAggregations';

package/dist/FxAggregationsBar/index.js

@@ -0,0 +1,22 @@
+"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, {
+    AggreationsBarPropsType: function() {
+        return _FxAggregations.AggreationsBarPropsType;
+    },
+    AggregationsDataPropsType: function() {
+        return _FxAggregations.AggregationsDataPropsType;
+    },
+    FxAggregationsBar: function() {
+        return _FxAggregations.FxAggregationsBar;
+    }
+});
+const _FxAggregations = require("./FxAggregations");

package/{dist-cjs → dist}/FxAggregationsBar/operations/query.js

@@ -1,8 +1,15 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.STRUCTURES = void 0;
-const graphql_tag_1 = require("graphql-tag");
-exports.STRUCTURES = (0, graphql_tag_1.gql) `
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "STRUCTURES", {
+    enumerable: true,
+    get: function() {
+        return STRUCTURES;
+    }
+});
+const _graphqltag = require("graphql-tag");
+const STRUCTURES = (0, _graphqltag.gql)`
   query STRUCTURES {
     structure(where: { name: "aggregations_invoice" }) {
       _id
@@ -64,4 +71,3 @@ exports.STRUCTURES = (0, graphql_tag_1.gql) `
     }
   }
 `;
-//# sourceMappingURL=query.js.map

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

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

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -0,0 +1,456 @@
+// @ts-ignore
+"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 _lodash = /*#__PURE__*/ _interop_require_default(require("lodash"));
+const _iconsmaterial = require("@mui/icons-material");
+const _graphqltag = require("graphql-tag");
+const _client = require("@apollo/client");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _dropdownstyles = require("./styles/dropdown.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            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;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const icon = /*#__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, parentRef)=>{
+    var _structure_extended, _props_styles, _props_styles1, _props_styles2;
+    const ref = (0, _react.useRef)(null);
+    const theme = (0, _material.useTheme)();
+    const [options, setOptions] = (0, _react.useState)([]);
+    const [loadingData, setLoadingData] = (0, _react.useState)(false);
+    const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
+    const [searchValue, setSearchValue] = (0, _react.useState)(null);
+    const [hasClearBtn, setHasClearBtn] = (0, _react.useState)(false);
+    const [page, setPage] = (0, _react.useState)(1);
+    const [prevPage, setPrevPage] = (0, _react.useState)(0);
+    const [pageSize] = (0, _react.useState)(20);
+    const { debug, structure, onChange, onClear, renderOptions, fetcher, initialValue = {}, multiple, disabled, type = 'text', showSelectedValue } = props, rest = _object_without_properties(props, [
+        "debug",
+        "structure",
+        "onChange",
+        "onClear",
+        "renderOptions",
+        "fetcher",
+        "initialValue",
+        "multiple",
+        "disabled",
+        "type",
+        "showSelectedValue"
+    ]);
+    const { name, extended, children } = structure;
+    const { search_path, variables } = extended;
+    const { method_name } = variables;
+    const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+        variables: _object_spread_props(_object_spread({}, fetcher.queryOptions.variables), {
+            where: searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
+                [search_path]: searchValue
+            }) : _object_spread({}, fetcher.queryOptions.variables.where),
+            skip: page * pageSize - pageSize,
+            limit: pageSize
+        })
+    }));
+    var _structure_extended_title_path;
+    const labelOption = (_structure_extended_title_path = structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path) !== null && _structure_extended_title_path !== void 0 ? _structure_extended_title_path : 'title';
+    const { getRootProps, getInputProps, getClearProps, getListboxProps, getOptionProps, groupedOptions, value, popupOpen, focused, setAnchorEl } = (0, _material.useAutocomplete)(_object_spread_props(_object_spread({}, rest), {
+        defaultValue: initialValue,
+        options: options,
+        disableCloseOnSelect: !!multiple,
+        multiple,
+        disabled: disabled,
+        isOptionEqualToValue: (option, value)=>{
+            return option._id === value._id;
+        },
+        getOptionLabel: (option)=>{
+            var _option_labelOption;
+            return (0, _fixefyuiutils.titleCase)((_option_labelOption = option[labelOption]) !== null && _option_labelOption !== void 0 ? _option_labelOption : option.title);
+        }
+    }));
+    const onPopupScroll = _lodash.default.debounce(()=>{
+        if (ref && ref.current) {
+            //@ts-ignore
+            const threshHold = ref.current.scrollHeight / 2;
+            //@ts-ignore
+            if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
+                setLoadingData(true);
+                setPage((prevPage)=>prevPage + 1);
+                setPrevPage((prevPage)=>prevPage + 1);
+            }
+        }
+    }, 800);
+    const createTitle = ()=>{
+        if (Array.isArray(value)) {
+            if (value && value.length) {
+                return `${(0, _fixefyuiutils.titleCase)(name)} (${value.length})`;
+            }
+        }
+        return (0, _fixefyuiutils.titleCase)(name);
+    };
+    const handleSearch = _lodash.default.debounce((e)=>{
+        setSearchValue(e.target.value);
+        setPage(1);
+    }, 300);
+    const handleChildrens = (_param)=>{
+        var { structure } = _param, rest = _object_without_properties(_param, [
+            "structure"
+        ]);
+        let rv = null;
+        const { type, children } = structure;
+        debug === true && console.log('handleChildrens', structure);
+        switch(type){
+            case 'dropdownOptions':
+            case 'dropdown_options':
+                {
+                    rv = children.map((child)=>handleChildrens(_object_spread({
+                            structure: child
+                        }, rest)));
+                    break;
+                }
+            case 'clear':
+                {
+                    if (!hasClearBtn) {
+                        setHasClearBtn(true);
+                    }
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, _object_spread_props(_object_spread({}, rest), {
+                        children: structure.title
+                    }));
+                    break;
+                }
+            default:
+                {
+                    break;
+                }
+        }
+        return rv;
+    };
+    const handleRenderOptions = ()=>{
+        debug === true && console.log('renderOptions: ', renderOptions);
+        if (renderOptions) {
+            return groupedOptions.map((option, index)=>{
+                const CustomeComponent = renderOptions(option, index);
+                //@ts-ignore
+                return /*#__PURE__*/ _react.default.cloneElement(CustomeComponent, _object_spread({}, getOptionProps({
+                    option,
+                    index
+                })));
+            });
+        } else {
+            switch(type){
+                case 'checkbox':
+                    {
+                        return groupedOptions.map((option, index)=>{
+                            const isSelected = getOptionProps({
+                                option,
+                                index
+                            })['aria-selected'];
+                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", _object_spread_props(_object_spread({}, getOptionProps({
+                                option,
+                                index
+                            })), {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        icon: icon,
+                                        checked: Boolean(isSelected),
+                                        checkedIcon: checkedIcon,
+                                        sx: {
+                                            mr: 1,
+                                            minWidth: 24,
+                                            minHeight: 24,
+                                            p: 0,
+                                            ['& svg']: {
+                                                fill: theme.palette.primary.light
+                                            }
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "subtitle2",
+                                        color: theme.palette.typography.title,
+                                        children: (0, _fixefyuiutils.titleCase)(option === null || option === void 0 ? void 0 : option.title)
+                                    })
+                                ]
+                            }));
+                        });
+                    }
+                case 'text':
+                    {
+                        return groupedOptions.map((option, index)=>{
+                            var _structure_extended, _structure_extended1, _structure_extended2;
+                            debug === true && console.log('renderOptions: ', structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path, option[structure === null || structure === void 0 ? void 0 : (_structure_extended1 = structure.extended) === null || _structure_extended1 === void 0 ? void 0 : _structure_extended1.title_path], options);
+                            var _option_structure_extended_title_path;
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", _object_spread_props(_object_spread({}, getOptionProps({
+                                option,
+                                index
+                            })), {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _fixefyuiutils.titleCase)((_option_structure_extended_title_path = option[structure === null || structure === void 0 ? void 0 : (_structure_extended2 = structure.extended) === null || _structure_extended2 === void 0 ? void 0 : _structure_extended2.title_path]) !== null && _option_structure_extended_title_path !== void 0 ? _option_structure_extended_title_path : option.title)
+                                })
+                            }));
+                        });
+                    }
+                default:
+                    {
+                        return groupedOptions.map((option, index)=>{
+                            var _structure_extended, _structure_extended1, _structure_extended2;
+                            debug === true && console.log('renderOptions: ', structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path, option[structure === null || structure === void 0 ? void 0 : (_structure_extended1 = structure.extended) === null || _structure_extended1 === void 0 ? void 0 : _structure_extended1.title_path], options);
+                            var _option_structure_extended_title_path;
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", _object_spread_props(_object_spread({}, getOptionProps({
+                                option,
+                                index
+                            })), {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _fixefyuiutils.titleCase)((_option_structure_extended_title_path = option[structure === null || structure === void 0 ? void 0 : (_structure_extended2 = structure.extended) === null || _structure_extended2 === void 0 ? void 0 : _structure_extended2.title_path]) !== null && _option_structure_extended_title_path !== void 0 ? _option_structure_extended_title_path : option.title)
+                                })
+                            }));
+                        });
+                    }
+            }
+        }
+    };
+    (0, _react.useImperativeHandle)(parentRef, ()=>({
+            clearDDL: ()=>{
+                var //@ts-ignore
+                _getClearProps;
+                (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(null);
+            }
+        }));
+    (0, _react.useEffect)(()=>{
+        if (ref && ref.current) {
+            //@ts-ignore
+            ref.current.addEventListener('scroll', ()=>onPopupScroll());
+        }
+        return ()=>{
+            if (ref && ref.current) {
+                //@ts-ignore
+                ref.current.removeEventListener('scroll', ()=>onPopupScroll());
+            }
+        };
+    }, [
+        groupedOptions
+    ]);
+    (0, _react.useEffect)(()=>{
+        onChange && onChange(value, name);
+    }, [
+        value
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (popupOpen && !isLastPage && prevPage < page && !disabled) {
+            fetch();
+        }
+    }, [
+        popupOpen
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (!disabled) {
+            fetch();
+        }
+    }, []);
+    (0, _react.useEffect)(()=>{
+        if (data && !isLastPage && prevPage < page) {
+            const newOptions = data[method_name];
+            if (newOptions.length === 0 || newOptions.length < pageSize) {
+                setIsLastPage(true);
+            }
+            setOptions([
+                ...newOptions,
+                ...options
+            ]);
+            setLoadingData(false);
+        }
+    }, [
+        data
+    ]);
+    var _props_styles_width, _props_styles_maxWidth;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, _object_spread_props(_object_spread({
+                hasValue: !!(value && Object.keys(value).length),
+                disabled: disabled,
+                sx: {
+                    width: (_props_styles_width = (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.width) !== null && _props_styles_width !== void 0 ? _props_styles_width : 180,
+                    maxWidth: (_props_styles_maxWidth = (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.maxWidth) !== null && _props_styles_maxWidth !== void 0 ? _props_styles_maxWidth : 300
+                }
+            }, getRootProps()), {
+                ref: setAnchorEl,
+                className: focused ? 'focused' : '',
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, getInputProps()), {
+                        readOnly: true,
+                        onChange: (e)=>{
+                            var //@ts-ignore
+                            _getInputProps;
+                            (_getInputProps = getInputProps()) === null || _getInputProps === void 0 ? void 0 : _getInputProps.onChange(e);
+                            handleSearch(e);
+                        },
+                        placeholder: createTitle(),
+                        value: showSelectedValue ? (0, _fixefyuiutils.titleCase)(value.title) : undefined
+                    })),
+                    loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.KeyboardArrowDown, {})
+                ]
+            })),
+            groupedOptions.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Listbox, _object_spread_props(_object_spread({}, getListboxProps()), {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledListBox, {
+                        sx: _object_spread({}, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.menuSx),
+                        hasClearBtn: children === null || children === void 0 ? void 0 : children.length,
+                        ref: ref,
+                        children: handleRenderOptions()
+                    }),
+                    children && children.length ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledClose, {
+                        children: handleChildrens({
+                            structure: children[0],
+                            onClick: (e)=>{
+                                var //@ts-ignore
+                                _getClearProps;
+                                onClear && onClear();
+                                (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(e);
+                            },
+                            startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.Close, {})
+                        })
+                    }) : null
+                ]
+            })) : null
+        ]
+    });
+});