@fixefy/fixefy-ui-components 0.0.5 → 0.0.6

package/dist-cjs/ActionsTray/{actions_tray.jsx → ActionsTray.jsx}

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const image_1 = tslib_1.__importDefault(require("next/image"));
 const material_1 = require("@mui/material");
 const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
-const actionsTray_styles_1 = require("./styles/actionsTray.styles");
+const actions_tray_styles_1 = require("./styles/actions_tray.styles");
 function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
     const renderActions = () => {
         switch (type) {
@@ -24,123 +24,123 @@ function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, cha
     };
     return (<div>
       <material_1.Slide direction={direction} in={show} mountOnEnter unmountOnExit timeout={400} container={container}>
-        <actionsTray_styles_1.Container>
-          <actionsTray_styles_1.TitleWrapper>
-            <actionsTray_styles_1.ChargesCount>{chargesCount}</actionsTray_styles_1.ChargesCount>
-            <actionsTray_styles_1.ChargesTitle>charges selected</actionsTray_styles_1.ChargesTitle>
-          </actionsTray_styles_1.TitleWrapper>
-          <actionsTray_styles_1.Divider />
+        <actions_tray_styles_1.Container>
+          <actions_tray_styles_1.TitleWrapper>
+            <actions_tray_styles_1.ChargesCount>{chargesCount}</actions_tray_styles_1.ChargesCount>
+            <actions_tray_styles_1.ChargesTitle>charges selected</actions_tray_styles_1.ChargesTitle>
+          </actions_tray_styles_1.TitleWrapper>
+          <actions_tray_styles_1.Divider />
           <div>
             {renderActions()}
             
           </div>
-          <actionsTray_styles_1.Divider />
+          <actions_tray_styles_1.Divider />
           <div onClick={onClose}>
-            <actionsTray_styles_1.Close>close</actionsTray_styles_1.Close>
+            <actions_tray_styles_1.Close>close</actions_tray_styles_1.Close>
           </div>
-        </actionsTray_styles_1.Container>
+        </actions_tray_styles_1.Container>
       </material_1.Slide>
     </div>);
 }
 exports.ActionsTray = ActionsTray;
 const ChallengeActions = ({ onChallenge, onApprove }) => {
     return (<>
-      <actionsTray_styles_1.ActionBtn onClick={onChallenge} type="low">
+      <actions_tray_styles_1.ActionBtn onClick={onChallenge} type="low">
         <image_1.default alt="challenge" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/challenge.svg',
         })} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>challenge</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onApprove}>
+        <actions_tray_styles_1.ActionTitle>challenge</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onApprove}>
         <image_1.default alt="approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/approve.svg',
         })} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>approve</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onApprove}>
+        <actions_tray_styles_1.ActionTitle>approve</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onApprove}>
         <image_1.default alt="ignore and approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/ignore_and_approve.svg',
         })} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>ignore & approve</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onApprove}>
+        <actions_tray_styles_1.ActionTitle>ignore & approve</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onApprove}>
         <image_1.default alt="change exception" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/change_exception.svg',
         })} src={'actions/change_exception.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>Change exeption</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
+        <actions_tray_styles_1.ActionTitle>Change exeption</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
     </>);
 };
 const PendingActions = ({ onApprove, onChallenge }) => {
     return (<>
-      <actionsTray_styles_1.ActionBtn onClick={onApprove} type="excellent">
+      <actions_tray_styles_1.ActionBtn onClick={onApprove} type="excellent">
         <image_1.default alt="approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/approve.svg',
         })} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>approve</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onChallenge}>
+        <actions_tray_styles_1.ActionTitle>approve</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onChallenge}>
         <image_1.default alt="challenge" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/challenge.svg',
         })} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>challenge</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
+        <actions_tray_styles_1.ActionTitle>challenge</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
 
-      <actionsTray_styles_1.ActionBtn onClick={onChallenge}>
+      <actions_tray_styles_1.ActionBtn onClick={onChallenge}>
         <image_1.default alt="dive in" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/dive_in.svg',
         })} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>dive in</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
+        <actions_tray_styles_1.ActionTitle>dive in</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
     </>);
 };
 const NoPricingActions = ({ onApprove, onChallenge }) => {
     return (<>
-      <actionsTray_styles_1.ActionBtn onClick={onChallenge}>
+      <actions_tray_styles_1.ActionBtn onClick={onChallenge}>
         <image_1.default alt="dive in" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/dive_in.svg',
         })} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>dive in</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onApprove}>
+        <actions_tray_styles_1.ActionTitle>dive in</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onApprove}>
         <image_1.default alt="solve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/solve.svg',
         })} src={'actions/solve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>solve</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onApprove}>
+        <actions_tray_styles_1.ActionTitle>solve</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onApprove}>
         <image_1.default alt="ignore and approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/ignore_and_approve.svg',
         })} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>ignore & approve</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
+        <actions_tray_styles_1.ActionTitle>ignore & approve</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
     </>);
 };
 const ApprovedActions = ({ onChallenge }) => {
     return (<>
-      <actionsTray_styles_1.ActionBtn onClick={onChallenge}>
+      <actions_tray_styles_1.ActionBtn onClick={onChallenge}>
         <image_1.default alt="dive in" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actionsCards/check_exceptions.svg',
         })} src={'actionsCards/check_exceptions.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>dive in</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
-      <actionsTray_styles_1.ActionBtn onClick={onChallenge}>
+        <actions_tray_styles_1.ActionTitle>dive in</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
+      <actions_tray_styles_1.ActionBtn onClick={onChallenge}>
         <image_1.default alt="challenge" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
             root: 'https://cdn-dev.fixefy.me/',
             src: 'actions/undo.svg',
         })} src={'actions/undo.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <actionsTray_styles_1.ActionTitle>undo</actionsTray_styles_1.ActionTitle>
-      </actionsTray_styles_1.ActionBtn>
+        <actions_tray_styles_1.ActionTitle>undo</actions_tray_styles_1.ActionTitle>
+      </actions_tray_styles_1.ActionBtn>
     </>);
 };

package/dist-cjs/ActionsTray/index.js

@@ -1 +1,5 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionsTray = void 0;
+var ActionsTray_1 = require("./ActionsTray");
+Object.defineProperty(exports, "ActionsTray", { enumerable: true, get: function () { return ActionsTray_1.ActionsTray; } });

package/dist-cjs/ActionsTray/styles/{actionsTray.styles.jsx → actions_tray.styles.jsx}

@@ -34,7 +34,7 @@ exports.Divider = (0, styles_1.styled)('div')(({ theme }) => ({
     marginRight: 24,
     marginLeft: 24,
 }));
-exports.ActionBtn = (0, styles_1.styled)(FxButton_1.Button)(({ theme, type }) => ({
+exports.ActionBtn = (0, styles_1.styled)(FxButton_1.FxButton)(({ theme, type }) => ({
     height: 40,
     maxHeight: 40,
     borderRadius: 100,

package/dist-cjs/AggregationsBar/Aggregations.jsx

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AggregationsBar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Stack_1 = tslib_1.__importDefault(require("@mui/material/Stack"));
+const structureReader_1 = require("./helpers/structureReader");
+const AggregationsBar = (props) => {
+    const { structure, minWidth, mb, filter, initialValues } = props;
+    const { children, extended } = structure;
+    const { variables } = extended;
+    const { collapsed } = variables;
+    return (<Stack_1.default direction="row" spacing={1.5} sx={{
+            mb: mb ? mb : 0,
+            ['& div']: {
+                minWidth: minWidth,
+            },
+            ['& > span']: {
+                minWidth: minWidth,
+            },
+        }}>
+      {children.map((child, index) => {
+            return (0, structureReader_1.structureReader)(child, filter, collapsed, initialValues);
+        })}
+    </Stack_1.default>);
+};
+exports.AggregationsBar = AggregationsBar;

package/dist-cjs/AggregationsBar/helpers/structureReader.jsx

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.structureReader = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const Score_1 = require("../../Score");
+const StatisticsBar_1 = require("../../StatisticsBar");
+const FxProgressCounter_1 = require("../../FxProgressCounter");
+const structureReader = (structure, filter, collapsed, initialValues) => {
+    var _a;
+    const { extended, type } = structure;
+    switch (type) {
+        case 'aggregations_primary_container':
+            return structure.children.map((child, index) => {
+                var _a, _b, _c;
+                return ((_a = child.input_type) === null || _a === void 0 ? void 0 : _a.value) === 'percentage' ? (<Score_1.Score structure={child} key={index} filter={filter} value={initialValues === null || initialValues === void 0 ? void 0 : initialValues.score}/>) : ((_b = child.input_type) === null || _b === void 0 ? void 0 : _b.value) === 'progress' ? (<FxProgressCounter_1.FxProgressCounter structure={child} filter={filter} key={index} values={initialValues}/>) : (<material_1.Box sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: 'fit-content',
+                        padding: 2,
+                        borderRadius: 2,
+                        backgroundColor: ((_c = extended === null || extended === void 0 ? void 0 : extended.variables) === null || _c === void 0 ? void 0 : _c.bg) || '#FFFFFF',
+                    }}>
+            <StatisticsBar_1.StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>
+          </material_1.Box>);
+            });
+        case 'aggregations_secondary_container':
+            return (<material_1.Stack direction="row" divider={<material_1.Divider orientation="vertical" flexItem/>} spacing={2} sx={{
+                    backgroundColor: ((_a = extended === null || extended === void 0 ? void 0 : extended.variables) === null || _a === void 0 ? void 0 : _a.bg) || '#FFFFFF',
+                    borderRadius: '8px',
+                    padding: '24px 16px',
+                }}>
+          {structure.children.map((child, index) => {
+                    return <StatisticsBar_1.StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
+                })}
+        </material_1.Stack>);
+    }
+};
+exports.structureReader = structureReader;

package/dist-cjs/AggregationsBar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AggregationsBar = void 0;
+var Aggregations_1 = require("./Aggregations");
+Object.defineProperty(exports, "AggregationsBar", { enumerable: true, get: function () { return Aggregations_1.AggregationsBar; } });

package/dist-cjs/AggregationsBar/operations/query.js

@@ -0,0 +1,66 @@
+"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) `
+  query STRUCTURES {
+    structure(where: { name: "aggregations_invoice" }) {
+      _id
+      bundle_name
+      name
+      title
+      type
+      input_type {
+        name
+        value
+      }
+      readable_id
+      extended {
+        format
+        gql_operation
+        title_path
+        object_path
+        filter
+        variables
+      }
+      children(sort: { index: 1 }) {
+        _id
+        name
+        title
+        type
+        input_type {
+          name
+          value
+        }
+        readable_id
+        extended {
+          format
+          gql_operation
+          title_path
+          object_path
+          filter
+          variables
+        }
+        children(sort: { index: 1 }) {
+          _id
+          name
+          title
+          type
+          input_type {
+            name
+            value
+          }
+          readable_id
+          extended {
+            format
+            gql_operation
+            title_path
+            object_path
+            filter
+            variables
+          }
+        }
+      }
+    }
+  }
+`;

package/dist-cjs/AsyncDropdown/AsyncDropdown.jsx

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncDropdown = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const icons_material_1 = require("@mui/icons-material");
+const graphql_tag_1 = require("graphql-tag");
+const client_1 = require("@apollo/client");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const dropdown_styles_1 = require("./styles/dropdown.styles");
+const icon = <icons_material_1.CheckBoxOutlineBlank fontSize="small"/>;
+const checkedIcon = <icons_material_1.CheckBox fontSize="small"/>;
+exports.AsyncDropdown = react_1.default.forwardRef((props, parentRef) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const ref = (0, react_1.useRef)(null);
+    const theme = (0, material_1.useTheme)();
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const [loadingData, setLoadingData] = (0, react_1.useState)(false);
+    const [isLastPage, setIsLastPage] = (0, react_1.useState)(false);
+    const [searchValue, setSearchValue] = (0, react_1.useState)(null);
+    const [hasClearBtn, setHasClearBtn] = (0, react_1.useState)(false);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [prevPage, setPrevPage] = (0, react_1.useState)(0);
+    const [pageSize, setPageSize] = (0, react_1.useState)(20);
+    const { debug, structure, onChange, onClear, renderOptions, fetcher, initialValue = {}, multiple, disabled, type = 'text', showSelectedValue } = props, rest = tslib_1.__rest(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, error, loading }] = (0, client_1.useLazyQuery)((0, graphql_tag_1.gql)(fetcher.query), Object.assign(Object.assign({}, fetcher.queryOptions), { variables: Object.assign(Object.assign({}, fetcher.queryOptions.variables), { where: searchValue
+                ? Object.assign(Object.assign({}, fetcher.queryOptions.variables.where), { [search_path]: searchValue }) : Object.assign({}, fetcher.queryOptions.variables.where), skip: page * pageSize - pageSize, limit: pageSize }) }));
+    const labelOption = (_b = (_a = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _a === void 0 ? void 0 : _a.title_path) !== null && _b !== void 0 ? _b : 'title';
+    const { getRootProps, getInputProps, getClearProps, getListboxProps, getOptionProps, groupedOptions, value, popupOpen, focused, setAnchorEl } = (0, material_1.useAutocomplete)(Object.assign(Object.assign({}, rest), { defaultValue: initialValue, options: options, disableCloseOnSelect: !!multiple, multiple, disabled: disabled, isOptionEqualToValue: (option, value) => {
+            return option._id === value._id;
+        }, getOptionLabel: (option) => { var _a; return (0, fixefy_ui_utils_1.titleCase)((_a = option[labelOption]) !== null && _a !== void 0 ? _a : option.title); } }));
+    const onPopupScroll = lodash_1.default.debounce(() => {
+        if (ref && ref.current) {
+            const threshHold = ref.current.scrollHeight / 2;
+            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, fixefy_ui_utils_1.titleCase)(name)} (${value.length})`;
+            }
+        }
+        return (0, fixefy_ui_utils_1.titleCase)(name);
+    };
+    const handleSearch = lodash_1.default.debounce((e) => {
+        setSearchValue(e.target.value);
+        setPage(1);
+    }, 300);
+    const handleChildrens = (_a) => {
+        var { structure } = _a, rest = tslib_1.__rest(_a, ["structure"]);
+        const { type, children } = structure;
+        debug === true && console.log('handleChildrens', structure);
+        switch (type) {
+            case 'dropdownOptions':
+            case 'dropdown_options': {
+                children.map((child) => {
+                    return handleChildrens(Object.assign({ structure: child }, rest));
+                });
+                break;
+            }
+            case 'clear': {
+                if (!hasClearBtn) {
+                    setHasClearBtn(true);
+                }
+                return <material_1.Button {...rest}>{structure.title}</material_1.Button>;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+    const handleRenderOptions = () => {
+        debug === true && console.log('renderOptions: ', renderOptions);
+        if (renderOptions) {
+            return groupedOptions.map((option, index) => {
+                const CustomeComponent = renderOptions(option, index);
+                return react_1.default.cloneElement(CustomeComponent, Object.assign({}, getOptionProps({ option, index })));
+            });
+        }
+        else {
+            switch (type) {
+                case 'checkbox': {
+                    return groupedOptions.map((option, index) => {
+                        const isSelected = getOptionProps({
+                            option,
+                            index,
+                        })['aria-selected'];
+                        return (<li {...getOptionProps({ option, index })}>
+                <material_1.Checkbox icon={icon} checked={Boolean(isSelected)} checkedIcon={checkedIcon} sx={{
+                                mr: 1,
+                                minWidth: 24,
+                                minHeight: 24,
+                                p: 0,
+                                ['& svg']: { fill: theme.palette.primary.light },
+                            }}/>
+                <material_1.Typography variant="table" color={theme.palette.typography.title}>
+                  {(0, fixefy_ui_utils_1.titleCase)(option === null || option === void 0 ? void 0 : option.title)}
+                </material_1.Typography>
+              </li>);
+                    });
+                }
+                case 'text': {
+                    return groupedOptions.map((option, index) => {
+                        var _a, _b, _c, _d;
+                        debug === true && console.log('renderOptions: ', (_a = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _a === void 0 ? void 0 : _a.title_path, option[(_b = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _b === void 0 ? void 0 : _b.title_path], options);
+                        return (<li {...getOptionProps({ option, index })}>
+                <material_1.Typography variant="table" color={theme.palette.typography.title}>
+                  {(0, fixefy_ui_utils_1.titleCase)((_d = option[(_c = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _c === void 0 ? void 0 : _c.title_path]) !== null && _d !== void 0 ? _d : option.title)}
+                </material_1.Typography>
+              </li>);
+                    });
+                }
+                default: {
+                    return groupedOptions.map((option, index) => {
+                        var _a, _b, _c, _d;
+                        debug === true && console.log('renderOptions: ', (_a = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _a === void 0 ? void 0 : _a.title_path, option[(_b = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _b === void 0 ? void 0 : _b.title_path], options);
+                        return (<li {...getOptionProps({ option, index })}>
+                <material_1.Typography variant="table" color={theme.palette.typography.title}>
+                  {(0, fixefy_ui_utils_1.titleCase)((_d = option[(_c = structure === null || structure === void 0 ? void 0 : structure.extended) === null || _c === void 0 ? void 0 : _c.title_path]) !== null && _d !== void 0 ? _d : option.title)}
+                </material_1.Typography>
+              </li>);
+                    });
+                }
+            }
+        }
+    };
+    (0, react_1.useImperativeHandle)(parentRef, () => ({
+        clearDDL: () => {
+            var _a;
+            (_a = getClearProps()) === null || _a === void 0 ? void 0 : _a.onClick(null);
+        },
+    }));
+    (0, react_1.useEffect)(() => {
+        if (ref && ref.current) {
+            ref.current.addEventListener('scroll', () => onPopupScroll());
+        }
+        return () => {
+            if (ref && ref.current) {
+                ref.current.removeEventListener('scroll', () => onPopupScroll());
+            }
+        };
+    }, [groupedOptions]);
+    (0, react_1.useEffect)(() => {
+        onChange && onChange(value, name);
+    }, [value]);
+    (0, react_1.useEffect)(() => {
+        if (popupOpen && !isLastPage && prevPage < page && !disabled) {
+            fetch();
+        }
+    }, [popupOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!disabled) {
+            fetch();
+        }
+    }, []);
+    (0, react_1.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]);
+    return (<dropdown_styles_1.Root>
+      <dropdown_styles_1.InputWrapper hasValue={!!(value && Object.keys(value).length)} disabled={disabled} sx={{
+            width: (_d = (_c = props.styles) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 180,
+            maxWidth: (_f = (_e = props.styles) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : 300,
+        }} {...getRootProps()} ref={setAnchorEl} className={focused ? 'focused' : ''}>
+        <input {...getInputProps()} readOnly onChange={(e) => {
+            var _a;
+            (_a = getInputProps()) === null || _a === void 0 ? void 0 : _a.onChange(e);
+            handleSearch(e);
+        }} placeholder={createTitle()} value={showSelectedValue ? (0, fixefy_ui_utils_1.titleCase)(value.title) : undefined}/>
+        {loading ? (<dropdown_styles_1.Loading>
+            <material_1.CircularProgress />
+          </dropdown_styles_1.Loading>) : (<icons_material_1.KeyboardArrowDown />)}
+      </dropdown_styles_1.InputWrapper>
+
+      {groupedOptions.length > 0 && !disabled ? (<dropdown_styles_1.Listbox {...getListboxProps()}>
+          <dropdown_styles_1.StyledListBox sx={Object.assign({}, (_g = props.styles) === null || _g === void 0 ? void 0 : _g.menuSx)} hasClearBtn={children === null || children === void 0 ? void 0 : children.length} ref={ref}>
+            {handleRenderOptions()}
+          </dropdown_styles_1.StyledListBox>
+
+          {children && children.length ? (<dropdown_styles_1.StyledClose>
+              {handleChildrens({
+                    structure: children[0],
+                    onClick: (e) => {
+                        var _a;
+                        onClear && onClear();
+                        (_a = getClearProps()) === null || _a === void 0 ? void 0 : _a.onClick(e);
+                    },
+                    startIcon: <icons_material_1.Close />,
+                })}
+            </dropdown_styles_1.StyledClose>) : null}
+        </dropdown_styles_1.Listbox>) : null}
+    </dropdown_styles_1.Root>);
+});

package/dist-cjs/AsyncDropdown/helpers/helpers.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStringValid = exports.isObjectValid = exports.isArrayValid = exports.getJPart = void 0;
+const getJPart = (j, jsonPath, defaultValue) => {
+    if ((0, exports.isObjectValid)(j) === false)
+        return defaultValue;
+    jsonPath = jsonPath.replace(/\[(\w+)\]/g, '.$1');
+    jsonPath = jsonPath.replace(/^\./, '');
+    let _isArrayValid = false;
+    let _isStringValid = false;
+    let currentPathPart;
+    let pathParts = jsonPath.split('.');
+    let isLoop = true;
+    for (let i = 0, n = pathParts.length; isLoop && i < n; ++i) {
+        currentPathPart = pathParts[i];
+        _isStringValid = (0, exports.isStringValid)(j);
+        _isArrayValid = (0, exports.isArrayValid)(j);
+        if (_isStringValid === true || _isArrayValid === true) {
+            if (_isStringValid === true) {
+                j = JSON.parse(j);
+            }
+            else {
+                j = j.reduce((acc, cur, idx, src) => {
+                    const innerJ = (0, exports.getJPart)(cur, pathParts.slice(i).join('.'), defaultValue);
+                    if ((0, exports.isArrayValid)(innerJ)) {
+                        acc.push(...innerJ);
+                    }
+                    else {
+                        acc.push(Object.assign(Object.assign({}, innerJ), { value: innerJ._id }));
+                    }
+                    return acc;
+                }, []);
+                isLoop = false;
+            }
+        }
+        else {
+            if (currentPathPart in j) {
+                j = j[currentPathPart];
+            }
+            else {
+                j = defaultValue;
+                isLoop = false;
+            }
+        }
+    }
+    return j;
+};
+exports.getJPart = getJPart;
+const isArrayValid = (arr, minLength = 1, maxLength = 0) => {
+    let rv = (0, exports.isObjectValid)(arr) &&
+        arr.length >= minLength &&
+        Object.prototype.toString.call(arr) == '[object Array]';
+    if (maxLength > 0) {
+        rv = rv && arr.length <= maxLength;
+    }
+    return rv;
+};
+exports.isArrayValid = isArrayValid;
+const isObjectValid = (obj, isCheckKeys = false) => {
+    let rv = typeof obj !== 'undefined' && obj !== null;
+    if (isCheckKeys) {
+        rv = rv && Object.keys(obj).length > 0;
+    }
+    return rv;
+};
+exports.isObjectValid = isObjectValid;
+const isStringValid = (str, minLength = null, maxLength = null, isValidateType = true) => {
+    let rv = (0, exports.isObjectValid)(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true);
+    if (rv === false)
+        return false;
+    if (minLength && isNaN(minLength) === false && minLength > 0) {
+        rv = rv && str.toString().length >= minLength;
+    }
+    if (rv === false)
+        return false;
+    if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
+        rv = rv && str.toString().length <= maxLength;
+    }
+    return rv;
+};
+exports.isStringValid = isStringValid;

package/dist-cjs/AsyncDropdown/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncDropdown = void 0;
+var AsyncDropdown_1 = require("./AsyncDropdown");
+Object.defineProperty(exports, "AsyncDropdown", { enumerable: true, get: function () { return AsyncDropdown_1.AsyncDropdown; } });