sag_components 1.0.381 → 1.0.382

package/dist/stories/components/Dropdown.js

@@ -33,31 +33,34 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
  */
 var Dropdown = exports.Dropdown = function Dropdown(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
+    width = _ref$width === void 0 ? "100%" : _ref$width,
     size = _ref.size,
     text = _ref.text,
     shape = _ref.shape,
     placeHolder = _ref.placeHolder,
     multiSelect = _ref.multiSelect,
-    limitTagsOnMultiSelect = _ref.limitTagsOnMultiSelect,
     showPopupIcon = _ref.showPopupIcon,
     showSearchIcon = _ref.showSearchIcon,
     options = _ref.options,
     onChange = _ref.onChange,
     onInputChange = _ref.onInputChange,
     _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? '#1B30AA' : _ref$labelColor,
+    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
     required = _ref.required,
     inputRef = _ref.inputRef,
     defaultValue = _ref.defaultValue,
     _ref$allowedInput = _ref.allowedInput,
-    allowedInput = _ref$allowedInput === void 0 ? 'all' : _ref$allowedInput,
+    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
     _ref$reset = _ref.reset,
     reset = _ref$reset === void 0 ? false : _ref$reset,
     _ref$disableClearable = _ref.disableClearable,
     disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropdownListfont = _ref.dropdownListfontSize,
+    dropdownListfontSize = _ref$dropdownListfont === void 0 ? "14px" : _ref$dropdownListfont,
+    _ref$placeHolderFontS = _ref.placeHolderFontSize,
+    placeHolderFontSize = _ref$placeHolderFontS === void 0 ? "14px" : _ref$placeHolderFontS;
   /**
    *  SAG Dropdown
    */
@@ -66,16 +69,10 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentInputValue = _useState2[0],
     setCurrentInputValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    currentOption = _useState4[0],
-    setCurrentOption = _useState4[1];
-  // const [defaultValueSetFlag, setDefaultValueSetFlag] = useState(false);
-
-  // useEffect(() => {
-  //   reset ? setDefaultValueSetFlag(false) : null;
-  // }, [reset]);
-
+    selectedOptionsState = _useState4[0],
+    setSelectedOptionsState = _useState4[1];
   (0, _react.useEffect)(function () {
     var delayDebounceFn = setTimeout(function () {
       onInputChange(currentInputValue);
@@ -89,60 +86,60 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: '#db3131'
+            color: "#db3131"
           }
         }
       }
     }
   });
 
-  // defines shape: squire or round
-  var getTextFieldStyle = function getTextFieldStyle() {
-    if (shape === 'round') {
+  // Single Text Style
+  var getTextFieldStyleSingle = function getTextFieldStyleSingle() {
+    if (shape === "round") {
       // round
       return {
-        '& .MuiOutlinedInput-root': {
-          borderRadius: '12px',
+        "& .MuiOutlinedInput-root": {
+          borderRadius: "12px",
           legend: {
-            marginLeft: '10px'
+            marginLeft: "10px"
           }
         },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px',
+        "& .MuiAutocomplete-inputRoot": {
+          paddingLeft: "10px !important",
+          borderRadius: "12px",
           // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
           '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
             // Default left padding is 6px
-            paddingLeft: '10px'
+            paddingLeft: "10px"
           },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#E7E7E7'
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: "#E7E7E7"
           },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: disabled ? "#E7E7E7" : labelColor
           },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: disabled ? "#E7E7E7" : labelColor
           }
         },
-        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
           // Default transform is "translate(14px, 20px) scale(1)""
           // This lines up the label with the initial cursor position in the input
           // after changing its padding-left.
-          transform: 'translate(14px, 18px) scale(1);',
-          fontSize: '14px',
-          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
+          transform: "translate(14px, 18px) scale(1);",
+          fontSize: "14px",
+          color: disabled ? "#E7E7E7" : currentInputValue && currentInputValue.length > 0 ? "#212121" : "#757575"
         },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          color: disabled ? '#E7E7E7' : labelColor,
-          fontSize: '18px'
+        "& .MuiInputLabel-outlined": {
+          paddingLeft: "10px",
+          color: disabled ? "#E7E7E7" : labelColor,
+          fontSize: "18px"
         },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: '6px',
-          background: 'white'
+        "& .MuiInputLabel-shrink": {
+          marginLeft: "1px",
+          paddingLeft: "4px",
+          paddingRight: "6px",
+          background: "white"
         }
       };
     }
@@ -156,45 +153,34 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     });
   };
   var onChangeHandler = function onChangeHandler(event, newValue) {
-    setCurrentOption({
-      syntheticBaseEvent: event,
-      newValue: newValue
-    });
-    // setDefaultValueSetFlag(true);
+    setSelectedOptionsState(newValue);
     onChange({
       syntheticBaseEvent: event,
       newValue: newValue
     });
   };
-  var getOptionByLabel = function getOptionByLabel(label) {
-    if (!label) return null;
-    if (!options) return null;
-    var foundOption = options.find(function (item) {
-      return item.label === label;
-    });
-    if (!foundOption) return null;
-    return foundOption;
-  };
   var isInputAllowed = function isInputAllowed(inputChar) {
     var NUMERIC_REGEX = /^[0-9-]+$/;
     var ALPHA_REGEX = /^[a-zA-Z]+$/;
     var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
-      case 'all':
+      case "all":
         return true;
-      case 'alpha':
+      case "alpha":
         if (ALPHA_REGEX.test(inputChar)) return true;
         return false;
-      case 'numeric':
+      case "numeric":
         if (NUMERIC_REGEX.test(inputChar)) return true;
         return false;
-      case 'alphaNumeric':
+      case "alphaNumeric":
         if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
         return false;
       default:
         return true;
     }
   };
+
+  // --------------------------------------- DROPDOWN SINGLE --------------------------------
   var getAutocompleteSingle = function getAutocompleteSingle() {
     return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
       theme: theme
@@ -211,10 +197,9 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       disableClearable: disableClearable,
       defaultValue: defaultValue,
       id: "combo-box",
-      options: options,
-      sx: {
-        width: width
-      },
+      options: options
+      // sx={{ width }}
+      ,
       popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
         width: "0.5em",
         height: "0.5em"
@@ -231,140 +216,34 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
           label: text,
           inputRef: inputRef || null,
           size: size,
-          sx: getTextFieldStyle(),
+          sx: getTextFieldStyleSingle(),
           placeholder: placeHolder,
           InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
             style: {
-              fontSize: '14px',
-              fontFamily: 'Poppins'
+              fontSize: placeHolderFontSize,
+              fontFamily: "Poppins"
             },
             startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
               position: "start"
             }, /*#__PURE__*/_react.default.createElement(_Search.default, {
               fontSize: "medium"
             })) : null
-          }),
-          InputLabelProps: {
-            style: {
-              // color: labelColor,
-              // fontSize: "14px",
-              fontFamily: 'Poppins'
-            }
-          }
+          })
         }));
       },
       ListboxProps: {
         style: {
-          fontSize: '14px',
-          fontFamily: 'Poppins'
-        }
-      }
-    }));
-  };
-  var getAutocompleteMulti = function getAutocompleteMulti() {
-    return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      key: reset,
-      defaultValue: defaultValue,
-      style: {
-        width: width
-      },
-      onChange: function onChange(event, newValue) {
-        onChangeHandler(event, newValue);
-      },
-      onInputChange: function onInputChange(event, newInputValue) {
-        onInputChangeHandler(event, newInputValue);
-      },
-      multiple: true,
-      limitTags: limitTagsOnMultiSelect,
-      id: "checkboxes-tags",
-      options: options,
-      disabled: disabled,
-      disableCloseOnSelect: true,
-      disableClearable: disableClearable,
-      getOptionLabel: function getOptionLabel(option) {
-        return option.label;
-      },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
-        width: "0.5em",
-        height: "0.5em"
-      }) : null,
-      renderOption: function renderOption(props, option, _ref2) {
-        var selected = _ref2.selected;
-        return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-          icon: icon,
-          checkedIcon: checkedIcon,
-          style: {
-            marginRight: 8,
-            fontSize: '14px',
-            fontFamily: 'Poppins'
-          },
-          checked: selected
-        }), option.label);
-      },
-      renderInput: function renderInput(params) {
-        return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          onKeyDown: function onKeyDown(event) {
-            if (!isInputAllowed(event.key)) {
-              event.preventDefault();
-            }
-          },
-          inputRef: inputRef || null,
-          required: required,
-          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-            style: {
-              fontSize: '14px',
-              fontFamily: 'Poppins'
-            },
-            startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-              position: "start"
-            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
-              fontSize: "medium"
-            }))
-          }),
-          InputLabelProps: {
-            style: {
-              // color: labelColor,
-              fontSize: '16px',
-              fontFamily: 'Poppins'
-            }
-          }
-        })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          onKeyDown: function onKeyDown(event) {
-            if (!isInputAllowed(event.key)) {
-              event.preventDefault();
-            }
-          },
-          inputRef: inputRef || null,
-          required: required,
-          InputLabelProps: {
-            style: {
-              // color: labelColor,
-              fontSize: '16px',
-              fontFamily: 'Poppins'
-            }
-          }
-        }));
-      },
-      ListboxProps: {
-        style: {
-          fontSize: '14px',
-          fontFamily: 'Poppins'
+          fontSize: dropdownListfontSize,
+          //default: 14px
+          fontFamily: "Poppins"
         }
       }
     }));
   };
+
+  // --------------------------------- MAIN -------------------------------------
   return /*#__PURE__*/_react.default.createElement(_Dropdown.DropdownContainer, {
     width: width
-  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
+  }, getAutocompleteSingle());
 };
 var _default = exports.default = Dropdown;

package/dist/stories/components/DropdownMulti.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DropdownMulti = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _styles = require("@mui/material/styles");
+var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
+var _DropdownMulti = require("./DropdownMulti.style");
+var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+  fontSize: "small"
+});
+var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+  fontSize: "small"
+});
+
+// import './fonts/Poppins-Regular.ttf';
+
+/**
+ *  SAG DropdownMulti
+ */
+var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "100%" : _ref$width,
+    size = _ref.size,
+    text = _ref.text,
+    shape = _ref.shape,
+    placeHolder = _ref.placeHolder,
+    limitTagsOnMultiSelect = _ref.limitTagsOnMultiSelect,
+    showPopupIcon = _ref.showPopupIcon,
+    showSearchIcon = _ref.showSearchIcon,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange,
+    _ref$labelColor = _ref.labelColor,
+    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
+    required = _ref.required,
+    inputRef = _ref.inputRef,
+    defaultValue = _ref.defaultValue,
+    _ref$allowedInput = _ref.allowedInput,
+    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
+    _ref$reset = _ref.reset,
+    reset = _ref$reset === void 0 ? false : _ref$reset,
+    _ref$disableClearable = _ref.disableClearable,
+    disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropdownListfont = _ref.dropdownListfontSize,
+    dropdownListfontSize = _ref$dropdownListfont === void 0 ? "14px" : _ref$dropdownListfont,
+    _ref$placeHolderFontS = _ref.placeHolderFontSize,
+    placeHolderFontSize = _ref$placeHolderFontS === void 0 ? "14px" : _ref$placeHolderFontS;
+  /**
+   *  SAG DropdownMulti
+   */
+
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentInputValue = _useState2[0],
+    setCurrentInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedOptionsState = _useState4[0],
+    setSelectedOptionsState = _useState4[1];
+  (0, _react.useEffect)(function () {
+    console.log("selectedOptionsState", selectedOptionsState);
+  }, [selectedOptionsState]);
+  (0, _react.useEffect)(function () {
+    if (reset) {
+      setSelectedOptionsState([]);
+      //console.log("reset", reset);
+    }
+  }, [reset]);
+
+  // useEffect(() => {
+  //   if(filterSelectedOptions){
+  //        setSelectedOptionsState(filterSelectedOptions);
+  //   }
+  // }, [filterSelectedOptions]);
+
+  (0, _react.useEffect)(function () {
+    var delayDebounceFn = setTimeout(function () {
+      onInputChange(currentInputValue);
+    }, 1000);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [currentInputValue]);
+  var theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: "#db3131"
+          }
+        }
+      }
+    }
+  });
+
+  // ---------------------------- Multi Text Style -----------------------------------------
+  var getTextFieldStyleMulti = function getTextFieldStyleMulti() {
+    if (shape === "round") {
+      // round
+      return {
+        "& .MuiOutlinedInput-root": {
+          borderRadius: "12px",
+          legend: {
+            marginLeft: "10px"
+          }
+        },
+        "& .MuiAutocomplete-inputRoot": {
+          paddingLeft: "10px !important",
+          borderRadius: "12px",
+          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
+          '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
+            // Default left padding is 6px
+            paddingLeft: "10px"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: "#E7E7E7"
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: disabled ? "#E7E7E7" : labelColor
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: disabled ? "#E7E7E7" : labelColor
+          }
+        },
+        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+          // Default transform is "translate(14px, 20px) scale(1)""
+          // This lines up the label with the initial cursor position in the input
+          // after changing its padding-left.
+          transform: "translate(14px, 18px) scale(1);",
+          fontSize: "14px",
+          color: disabled ? "#E7E7E7" : currentInputValue && currentInputValue.length > 0 ? "#212121" : "#757575"
+        },
+        "& .MuiInputLabel-outlined": {
+          paddingLeft: "10px",
+          color: disabled ? "#E7E7E7" : labelColor,
+          fontSize: "18px"
+        },
+        "& .MuiInputLabel-shrink": {
+          marginLeft: "1px",
+          paddingLeft: "4px",
+          paddingRight: "6px",
+          background: "white"
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
+    setCurrentInputValue({
+      syntheticBaseEvent: event,
+      inputValue: newInputValue
+    });
+  };
+  var onChangeHandler = function onChangeHandler(event, newValue) {
+    setSelectedOptionsState(newValue);
+    onChange({
+      syntheticBaseEvent: event,
+      newValue: newValue
+    });
+  };
+  var isInputAllowed = function isInputAllowed(inputChar) {
+    var NUMERIC_REGEX = /^[0-9-]+$/;
+    var ALPHA_REGEX = /^[a-zA-Z]+$/;
+    var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+    switch (allowedInput) {
+      case "all":
+        return true;
+      case "alpha":
+        if (ALPHA_REGEX.test(inputChar)) return true;
+        return false;
+      case "numeric":
+        if (NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      case "alphaNumeric":
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      default:
+        return true;
+    }
+  };
+
+  // --------------------------------------- DropdownMulti--------------------------------
+  var getAutocompleteMulti = function getAutocompleteMulti() {
+    return selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      onChange: function onChange(event, newValue) {
+        onChangeHandler(event, newValue);
+      },
+      onInputChange: function onInputChange(event, newInputValue) {
+        onInputChangeHandler(event, newInputValue);
+      },
+      multiple: true,
+      limitTags: limitTagsOnMultiSelect,
+      id: "checkboxes-tags",
+      options: options,
+      value: selectedOptionsState,
+      disabled: disabled,
+      disableCloseOnSelect: true,
+      disableClearable: disableClearable,
+      getOptionLabel: function getOptionLabel(option) {
+        return option.label;
+      },
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+        width: "0.5em",
+        height: "0.5em"
+      }) : null,
+      renderOption: function renderOption(props, option, _ref2) {
+        var selected = _ref2.selected;
+        return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+          icon: icon,
+          checkedIcon: checkedIcon,
+          checked: selected //{isOptionChecked(option)} //
+        }), option.label);
+      },
+      renderInput: function renderInput(params) {
+        console.log("params", params);
+        return (
+          /*#__PURE__*/
+          //showSearchIcon &&
+          _react.default.createElement(_TextField.default, Object.assign({}, params, {
+            variant: "outlined"
+            //label={text}
+            ,
+            size: size,
+            sx: getTextFieldStyleMulti(),
+            placeholder: placeHolder,
+            InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
+              style: {
+                fontSize: placeHolderFontSize,
+                fontFamily: "Poppins"
+              }
+
+              //   endAdornment: (
+              //     <>
+              //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
+              //         <span key={index} style={{ margin: '0 5px' }}>
+              //           {option.label}
+              //         </span>
+              //       ))}
+              //       {params.InputProps.endAdornment}
+
+              //     </>
+              //   ),
+            }),
+
+            onKeyDown: function onKeyDown(event) {
+              if (!isInputAllowed(event.key)) {
+                event.preventDefault();
+              }
+            },
+            inputRef: inputRef || null,
+            required: required
+          }))
+        );
+      },
+      ListboxProps: {
+        style: {
+          fontSize: dropdownListfontSize,
+          //default: 14px
+          fontFamily: "Poppins"
+        }
+      }
+    }));
+  };
+  var isOptionChecked = function isOptionChecked(option) {
+    var _Object$values;
+    if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(function (itemFilter) {
+      return itemFilter.label;
+    }).includes(option.label)) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  // --------------------------------- MAIN -------------------------------------
+  return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
+    width: width
+  }, getAutocompleteMulti());
+};
+var _default = exports.default = DropdownMulti;

package/dist/stories/components/DropdownMulti.style.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+//import './font.css';
+
+var DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), function (props) {
+  return props.width;
+});