sag_components 1.0.397 → 1.0.398

package/dist/stories/components/Dropdown.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Dropdown = 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"));
@@ -19,10 +17,10 @@ var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
 var _Dropdown = require("./Dropdown.style");
-var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
   fontSize: "small"
 });
-var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
   fontSize: "small"
 });
 
@@ -31,57 +29,43 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
 /**
  *  SAG Dropdown
  */
-var Dropdown = exports.Dropdown = function Dropdown(_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,
-    multiSelect = _ref.multiSelect,
-    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;
+const Dropdown = _ref => {
+  let {
+    width = "100%",
+    size,
+    text,
+    shape,
+    placeHolder,
+    multiSelect,
+    showPopupIcon,
+    showSearchIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = "#1B30AA",
+    required,
+    inputRef,
+    defaultValue,
+    allowedInput = "all",
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = "14px",
+    placeHolderFontSize = "14px"
+  } = _ref;
   /**
    *  SAG Dropdown
    */
 
-  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 () {
-    var delayDebounceFn = setTimeout(function () {
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
       onInputChange(currentInputValue);
     }, 1000);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
+    return () => clearTimeout(delayDebounceFn);
   }, [currentInputValue]);
-  var theme = (0, _styles.createTheme)({
+  const theme = (0, _styles.createTheme)({
     components: {
       MuiFormLabel: {
         styleOverrides: {
@@ -94,7 +78,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
   });
 
   // Single Text Style
-  var getTextFieldStyleSingle = function getTextFieldStyleSingle() {
+  const getTextFieldStyleSingle = () => {
     if (shape === "round") {
       // round
       return {
@@ -146,23 +130,23 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     // square
     return null;
   };
-  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
+  const onInputChangeHandler = (event, newInputValue) => {
     setCurrentInputValue({
       syntheticBaseEvent: event,
       inputValue: newInputValue
     });
   };
-  var onChangeHandler = function onChangeHandler(event, newValue) {
+  const onChangeHandler = (event, newValue) => {
     setSelectedOptionsState(newValue);
     onChange({
       syntheticBaseEvent: event,
-      newValue: 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-]+$/;
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
       case "all":
         return true;
@@ -181,69 +165,67 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
   };
 
   // --------------------------------------- DROPDOWN SINGLE --------------------------------
-  var getAutocompleteSingle = function getAutocompleteSingle() {
-    return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      key: reset,
-      onChange: function onChange(event, newValue) {
-        onChangeHandler(event, newValue);
-      },
-      onInputChange: function onInputChange(event, newInputValue) {
-        onInputChangeHandler(event, newInputValue);
-      },
-      disabled: disabled,
-      disablePortal: true,
-      disableClearable: disableClearable,
-      defaultValue: defaultValue,
-      id: "combo-box",
-      options: options
-      // sx={{ width }}
-      ,
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
-        width: "0.5em",
-        height: "0.5em"
-      }) : null,
-      forcePopupIcon: "auto",
-      renderInput: function renderInput(params) {
-        return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          onKeyDown: function onKeyDown(event) {
-            if (!isInputAllowed(event.key)) {
-              event.preventDefault();
-            }
-          },
-          required: required,
-          label: text,
-          inputRef: inputRef || null,
-          size: size,
-          sx: getTextFieldStyleSingle(),
-          placeholder: placeHolder,
-          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-            style: {
-              fontSize: placeHolderFontSize,
-              fontFamily: "Poppins"
-            },
-            startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-              position: "start"
-            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
-              fontSize: "medium"
-            })) : null
-          })
-        }));
+  const getAutocompleteSingle = () => /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    key: reset,
+    onChange: (event, newValue) => {
+      onChangeHandler(event, newValue);
+    },
+    onInputChange: (event, newInputValue) => {
+      onInputChangeHandler(event, newInputValue);
+    },
+    disabled: disabled,
+    disablePortal: true,
+    disableClearable: disableClearable,
+    defaultValue: defaultValue,
+    id: "combo-box",
+    options: options
+    // sx={{ width }}
+    ,
+    popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+      width: "0.5em",
+      height: "0.5em"
+    }) : null,
+    forcePopupIcon: "auto",
+    renderInput: params => /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+      onKeyDown: event => {
+        if (!isInputAllowed(event.key)) {
+          event.preventDefault();
+        }
       },
-      ListboxProps: {
+      required: required,
+      label: text,
+      inputRef: inputRef || null,
+      size: size,
+      sx: getTextFieldStyleSingle(),
+      placeholder: placeHolder,
+      InputProps: {
+        ...params.InputProps,
         style: {
-          fontSize: dropdownListfontSize,
-          //default: 14px
+          fontSize: placeHolderFontSize,
           fontFamily: "Poppins"
-        }
+        },
+        startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+          position: "start"
+        }, /*#__PURE__*/_react.default.createElement(_Search.default, {
+          fontSize: "medium"
+        })) : null
       }
-    }));
-  };
+    })),
+    ListboxProps: {
+      style: {
+        fontSize: dropdownListfontSize,
+        //default: 14px
+        fontFamily: "Poppins"
+      }
+    }
+  }));
 
   // --------------------------------- MAIN -------------------------------------
   return /*#__PURE__*/_react.default.createElement(_Dropdown.DropdownContainer, {
     width: width
   }, getAutocompleteSingle());
 };
+exports.Dropdown = Dropdown;
 var _default = exports.default = Dropdown;

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

@@ -10,6 +10,4 @@ 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;
-});
+const 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"])), props => props.width);

package/dist/stories/components/DropdownMulti.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").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"));
@@ -17,72 +15,58 @@ var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/
 var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
 var _DropdownMulti = require("./DropdownMulti.style");
-var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
   fontSize: "small"
 });
-var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
   fontSize: "small"
 });
 
 /**
  *  SAG DropdownMulti
  */
-var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
-  var name = _ref.name,
-    _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,
-    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,
-    _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;
+const DropdownMulti = _ref => {
+  let {
+    name,
+    width = "100%",
+    size,
+    text,
+    shape,
+    placeHolder,
+    limitTagsOnMultiSelect,
+    showPopupIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = "#1B30AA",
+    required,
+    inputRef,
+    allowedInput = "all",
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = "14px",
+    placeHolderFontSize = "14px"
+  } = _ref;
   /**
    *  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 () {
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
     console.log("selectedOptionsState", selectedOptionsState);
   }, [selectedOptionsState]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setSelectedOptionsState([]);
   }, [reset]);
-  (0, _react.useEffect)(function () {
-    var delayDebounceFn = setTimeout(function () {
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
       onInputChange(currentInputValue);
     }, 1000);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
+    return () => clearTimeout(delayDebounceFn);
   }, [currentInputValue]);
-  var theme = (0, _styles.createTheme)({
+  const theme = (0, _styles.createTheme)({
     components: {
       MuiFormLabel: {
         styleOverrides: {
@@ -95,7 +79,7 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
   });
 
   // ---------------------------- Multi Text Style -----------------------------------------
-  var getTextFieldStyleMulti = function getTextFieldStyleMulti() {
+  const getTextFieldStyleMulti = () => {
     if (shape === "round") {
       // round
       return {
@@ -147,23 +131,19 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
     // square
     return null;
   };
-  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
+  const onInputChangeHandler = (event, newInputValue) => {
     setCurrentInputValue({
       syntheticBaseEvent: event,
       inputValue: newInputValue
     });
   };
-  var onChangeHandler = function onChangeHandler(event, newValue) {
+  const onChangeHandler = (event, newValue) => {
     // const newSelectedOptionsSet = new Set(newValue?.map((item) => item) ?? []);
     // const newSelectedOptions = Array.from(newSelectedOptionsSet).map((item) => {
     //   return item;
     // });
 
-    var newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter(function (value, index, self) {
-      return index === self.findIndex(function (item) {
-        return item.id === value.id && item.label === value.label;
-      });
-    });
+    const newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter((value, index, self) => index === self.findIndex(item => item.id === value.id && item.label === value.label));
     console.log("onChangeHandler", newSelectedOptions);
     setSelectedOptionsState(newSelectedOptions);
     onChange({
@@ -171,10 +151,10 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
       newValue: newSelectedOptions
     });
   };
-  var isInputAllowed = function isInputAllowed(inputChar) {
-    var NUMERIC_REGEX = /^[0-9-]+$/;
-    var ALPHA_REGEX = /^[a-zA-Z]+$/;
-    var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
       case "all":
         return true;
@@ -193,94 +173,91 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
   };
 
   // --------------------------------------- DropdownMulti--------------------------------
-  var getAutocompleteMulti = function getAutocompleteMulti() {
-    return selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      class: name,
-      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: isOptionChecked(option) //{selected} //
-        }), 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"
-              }
+  const getAutocompleteMulti = () => selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    class: name,
+    onChange: (event, newValue) => {
+      onChangeHandler(event, newValue);
+    },
+    onInputChange: (event, newInputValue) => {
+      onInputChangeHandler(event, newInputValue);
+    },
+    multiple: true,
+    limitTags: limitTagsOnMultiSelect,
+    id: "checkboxes-tags",
+    options: options,
+    value: selectedOptionsState,
+    disabled: disabled,
+    disableCloseOnSelect: true,
+    disableClearable: disableClearable,
+    getOptionLabel: option => option.label,
+    popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+      width: "0.5em",
+      height: "0.5em"
+    }) : null,
+    renderOption: (props, option, _ref2) => {
+      let {
+        selected
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+        icon: icon,
+        checkedIcon: checkedIcon,
+        checked: isOptionChecked(option) //{selected} //
+      }), option.label);
+    },
+    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: {
+            ...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}
+            //   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"
-        }
+          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) {
+    }
+  }));
+  const 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)) {
+    if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(itemFilter => itemFilter.label).includes(option.label)) {
       return true;
     } else {
       return false;
@@ -292,4 +269,5 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
     width: width
   }, getAutocompleteMulti());
 };
+exports.DropdownMulti = DropdownMulti;
 var _default = exports.default = DropdownMulti;

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

@@ -10,6 +10,4 @@ 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;
-});
+const 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"])), props => props.width);