@fixefy/fixefy-ui-components 0.2.8 → 0.2.10

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -25,5 +25,7 @@ export type AsyncDropdownPropsType = {
     [x: string]: any;
     modal_type?: string;
     query: string;
+    isInitialOpen?: boolean;
+    placeholder?: string;
 };
 export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -119,15 +119,15 @@ const icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBl
 const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
     fontSize: "small"
 });
-const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
-    var _props_styles;
-    const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
+const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
+    const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query, isInitialOpen, placeholder } = 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, setIOpen] = (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);
@@ -305,7 +305,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
             }
         }
     };
-    const handleListOptions = ()=>{
+    const displayListOptions = ()=>{
         switch(type){
             case 'checkbox':
                 {
@@ -329,7 +329,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                                         }
                                     }
                                 }),
-                                getValueByModalType(option, 'list')
+                                getSingleValueByModalType(option, 'list')
                             ]
                         }, option._id);
                     });
@@ -342,19 +342,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                             onClick: ()=>{
                                 handleOptionClick(option);
                             },
-                            children: getValueByModalType(option, 'list')
+                            children: getSingleValueByModalType(option, 'list')
                         }, option._id);
                     });
                 }
         }
     };
-    (0, _react.useImperativeHandle)(parentRef, ()=>({
-            clearDDL: ()=>{
-                var //@ts-ignore
-                _getClearProps;
-                (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(null);
-            }
-        }));
     const loadMore = ()=>{
         setPage((prevPage)=>prevPage + 1);
         setPrevPage((prevPage)=>prevPage + 1);
@@ -370,17 +363,11 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
         return null;
     };
     const getCurrentValues = ()=>{
-        let rv = null;
-        switch(multiple){
-            case true:
-                rv = getMultipleDisplayedValues();
-                break;
-            case false:
-            default:
-                rv = getValueByModalType(displayed, 'displayed');
-                break;
+        if (multiple) {
+            return getMultipleDisplayedValues();
+        } else {
+            return getSingleValueByModalType(displayed, 'displayed');
         }
-        return rv;
     };
     const DeleteButton = ({ option })=>{
         let rv = null;
@@ -409,12 +396,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
         }
         return rv;
     };
-    const getValueByModalType = (option, location)=>{
+    const getSingleValueByModalType = (option, modal)=>{
         let rv = null;
         const clicked = getClicked(option);
         switch(modal_type){
             case 'chip':
-                rv = location === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+                rv = modal === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
                     status: clicked,
                     label: (0, _helpers.titleCase)(clicked),
                     variant: "outlined",
@@ -461,12 +448,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                                     color: theme.palette.typography.title,
                                     children: (0, _helpers.titleCase)(clicked)
                                 }),
-                                location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
                                     option: option
                                 })
                             ]
                         }),
-                        location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
                             width: 16,
                             height: 16,
                             icon: 'filters/chosen_icon.svg'
@@ -501,12 +488,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                                     color: theme.palette.typography.title,
                                     children: (0, _helpers.titleCase)(clicked)
                                 }),
-                                location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
                                     option: option
                                 })
                             ]
                         }),
-                        location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
                             width: 16,
                             height: 16,
                             icon: 'filters/chosen_icon.svg'
@@ -535,7 +522,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                         gap: 1
                     },
                     children: displayed.map((item)=>{
-                        return getValueByModalType(item, 'displayed');
+                        return getSingleValueByModalType(item, 'displayed');
                     })
                 }),
                 (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
@@ -559,31 +546,26 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
-        sx: {
-            background: '#FFFFFF',
-            padding: '0 16px'
-        },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 children: [
                     getCurrentValues(),
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
                         disabled: disabled,
-                        sx: {
-                            width: '100%',
-                            border: 'none !important',
-                            outline: 'none !important'
-                        },
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                                style: {
-                                    border: 'none',
-                                    outline: 'none'
-                                },
                                 autoFocus: true,
-                                placeholder: "Select an option...",
+                                placeholder: placeholder || 'Select an option...',
                                 onChange: (e)=>{
                                     handleSearch(e);
+                                },
+                                onFocus: ()=>{
+                                    !isInitialOpen && setIOpen(true);
+                                },
+                                onBlur: ()=>{
+                                    setTimeout(()=>{
+                                        !isInitialOpen && setIOpen(false);
+                                    }, 200);
                                 }
                             }),
                             loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
@@ -593,25 +575,10 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                     })
                 ]
             }),
-            options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
-                sx: _object_spread_props(_object_spread({}, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.menuSx), {
-                    '&::-webkit-scrollbar': {
-                        width: '8px',
-                        backgroundColor: 'transparent'
-                    },
-                    '&::-webkit-scrollbar-thumb': {
-                        backgroundColor: '#8B9092',
-                        borderRadius: '8px'
-                    },
-                    // To support Firefox
-                    scrollbarWidth: 'thin',
-                    scrollbarColor: '#8B9092 transparent',
-                    maxHeight: '300px',
-                    overflowY: 'auto'
-                }),
+            (isInitialOpen || isOpen) && options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
                 ref: ref,
                 children: [
-                    handleListOptions(),
+                    displayListOptions(),
                     !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                             onClick: ()=>{

package/dist/FxAsyncDropdown/styles/dropdown.styles.js

@@ -86,7 +86,10 @@ function _object_spread_props(target, source) {
 }
 const Root = (0, _styles.styled)('div')(()=>({
         color: 'rgba(0,0,0,.85)',
-        fontSize: 14
+        fontSize: 14,
+        background: '#FFFFFF',
+        padding: '0 16px',
+        position: 'relative'
     }));
 const Label = (0, _styles.styled)('label')(()=>({
         padding: '0 0 4px',
@@ -105,12 +108,9 @@ const Loading = (0, _styles.styled)('div')(()=>({
         }
     }));
 const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=>{
-    const defaultBorder = `1px solid ${theme.palette.greyscale[200]}`;
-    const hasValueBorder = `1px solid ${theme.palette.primary[500]}`;
     const disabledBorder = `1px solid ${theme.palette.greyscale[200]}`;
     const activeBorder = `1px solid ${theme.palette.primary[500]}`;
     return {
-        border: disabled ? disabledBorder : hasValue ? hasValueBorder : defaultBorder,
         backgroundColor: theme.palette.common.white,
         borderRadius: 4,
         padding: 1,
@@ -118,6 +118,9 @@ const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=
         alignItems: 'center',
         flexWrap: 'wrap',
         cursor: disabled ? 'not-allowed' : 'pointer',
+        width: '100%',
+        border: 'none !important',
+        outline: 'none !important',
         ['&:hover']: {
             border: disabled ? disabledBorder : activeBorder,
             borderRadius: 4
@@ -131,6 +134,8 @@ const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=
             marginRight: 8
         },
         ['& input']: _object_spread_props(_object_spread({
+            border: 'none',
+            outline: 'none',
             cursor: disabled ? 'not-allowed' : 'pointer',
             backgroundColor: theme.palette.common.white,
             color: theme.palette.typography.title,
@@ -139,9 +144,7 @@ const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=
             width: 0,
             minWidth: 30,
             flexGrow: 1,
-            border: 0,
-            margin: 0,
-            outline: 0
+            margin: 0
         }, theme.typography.body1), {
             lineHeight: '20px',
             ['& ::placeholder']: {
@@ -176,15 +179,12 @@ const StyledClose = (0, _styles.styled)('div')(()=>({
         position: 'absolute',
         bottom: 0
     }));
-const StyledListBox = (0, _styles.styled)('ul')(({ theme, hasClearBtn })=>({
-        // width: 300,
+const StyledListBox = (0, _styles.styled)('ul')(({ theme })=>({
         margin: 0,
         padding: 0,
-        // position: 'absolute',
         listStyle: 'none',
         backgroundColor: theme.palette.common.white,
         overflow: 'auto',
-        maxHeight: hasClearBtn ? 190 : 230,
         zIndex: 1,
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -193,6 +193,19 @@ const StyledListBox = (0, _styles.styled)('ul')(({ theme, hasClearBtn })=>({
         paddingBottom: 8,
         maxWidth: 270,
         minWidth: 270,
+        '&::-webkit-scrollbar': {
+            width: '8px',
+            backgroundColor: 'transparent'
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#8B9092',
+            borderRadius: '8px'
+        },
+        // To support Firefox
+        scrollbarWidth: 'thin',
+        scrollbarColor: '#8B9092 transparent',
+        maxHeight: '300px',
+        overflowY: 'auto',
         ['& div']: {
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',

package/package.json

@@ -70,5 +70,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.2.8"
+  "version": "0.2.10"
 }