sag_components 1.0.396 → 1.0.398

package/dist/stories/components/CollapseData.js

@@ -1,12 +1,10 @@
 "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.CollapseData = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _CollapseData = require("./CollapseData.style");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
@@ -14,17 +12,16 @@ var _ShoppingCartIcon = require("./icons/ShoppingCartIcon");
 var _ClockIcon = require("./icons/ClockIcon");
 var _ArrowUpIcon = require("./icons/ArrowUpIcon");
 var _ArrowDownIcon = require("./icons/ArrowDownIcon");
-var CollapseData = exports.CollapseData = function CollapseData(props) {
-  var title = props.title,
-    tableData = props.tableData,
-    noDataText = props.noDataText,
-    width = props.width,
-    height = props.height;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeIndex = _useState2[0],
-    setActiveIndex = _useState2[1];
-  var handleClick = function handleClick(index) {
+const CollapseData = props => {
+  const {
+    title,
+    tableData,
+    noDataText,
+    width,
+    height
+  } = props;
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(null);
+  const handleClick = index => {
     setActiveIndex(activeIndex === index ? null : index);
   };
   return /*#__PURE__*/_react.default.createElement(_CollapseData.AccordionWrapper, {
@@ -32,38 +29,33 @@ var CollapseData = exports.CollapseData = function CollapseData(props) {
     height: height
   }, tableData.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseData.ComponentHeader, null, title), tableData.map(function (section) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: section.key,
-      className: "accordion-section",
-      id: section.key
-    }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
-      isopen: activeIndex === section.key,
-      onClick: function onClick() {
-        return handleClick(section.key);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_CollapseData.IconAndTitle, null, section.icon === 'Basket' ? /*#__PURE__*/_react.default.createElement(_ShoppingCartIcon.ShoppingCartIcon, null) : /*#__PURE__*/_react.default.createElement(_ClockIcon.ClockIcon, null), /*#__PURE__*/_react.default.createElement("u", null, section.title)), /*#__PURE__*/_react.default.createElement(_CollapseData.ArrowAndNumber, null, /*#__PURE__*/_react.default.createElement(_CollapseData.IconDiv, null, section.value >= 0 ? /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
-      width: "11px",
-      height: "12px"
-    }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
-      width: "11px",
-      height: "12px"
-    })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (headline, i) {
-      return /*#__PURE__*/_react.default.createElement(_CollapseData.Th, {
-        key: "".concat(i + headline)
-      }, headline.title);
-    }))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (data, i) {
-      if (data.value !== null) {
-        return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
-          key: "".concat(i + data)
-        }, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
-      }
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseData.ComponentHeader, null, title), tableData.map(section => /*#__PURE__*/_react.default.createElement("div", {
+    key: section.key,
+    className: "accordion-section",
+    id: section.key
+  }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
+    isopen: activeIndex === section.key,
+    onClick: () => handleClick(section.key)
+  }, /*#__PURE__*/_react.default.createElement(_CollapseData.IconAndTitle, null, section.icon === 'Basket' ? /*#__PURE__*/_react.default.createElement(_ShoppingCartIcon.ShoppingCartIcon, null) : /*#__PURE__*/_react.default.createElement(_ClockIcon.ClockIcon, null), /*#__PURE__*/_react.default.createElement("u", null, section.title)), /*#__PURE__*/_react.default.createElement(_CollapseData.ArrowAndNumber, null, /*#__PURE__*/_react.default.createElement(_CollapseData.IconDiv, null, section.value >= 0 ? /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
+    width: "11px",
+    height: "12px"
+  }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
+    width: "11px",
+    height: "12px"
+  })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/_react.default.createElement(_CollapseData.Th, {
+    key: "".concat(i + headline)
+  }, headline.title)))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map((data, i) => {
+    if (data.value !== null) {
       return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
         key: "".concat(i + data)
-      }, "No Data");
-    }))))));
-  })));
+      }, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
+    }
+    return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
+      key: "".concat(i + data)
+    }, "No Data");
+  })))))))));
 };
+exports.CollapseData = CollapseData;
 var _default = exports.default = CollapseData;
 CollapseData.defaultProps = {
   title: '',

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

@@ -8,20 +8,14 @@ exports.TitleDiv = exports.TitleAccordion = exports.Th = exports.Td = exports.Ta
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: 0 20px;\n  background-color: white;\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-var TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: inline-block;\n  align-items: center;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
-  return props.isopen ? '#D0D0D0' : '#FFFFFF';
-});
-var IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  font-family: \"poppins\";\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  float: left;\n  align-items: center;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  & > svg {\n    margin-right: 15px;\n  }\n"])));
-var ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  font-family: \"poppins\";\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 23%;\n  margin-right: 20px;\n"])));
-var IconDiv = exports.IconDiv = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  width: 25%;\n"])));
-var TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 70%;\n  text-align: left;\n  padding-left: 3px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: auto;\n  margin-bottom: 22px;\n"])));
-var Table = exports.Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  table-layout: fixed;\n"])));
-var Th = exports.Th = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: white;\n  font-family: \"poppins\";\n  font-weight: 600;\n  font-size: 12px;\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 18px;\n  border-top: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
-var Td = exports.Td = _styledComponents.default.td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  font-family: \"poppins\";\n  font-weight: 400;\n  border-bottom: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
-var ComponentHeader = exports.ComponentHeader = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"poppins\";\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 27px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: 0 20px;\n  background-color: white;\n"])), props => props.width, props => props.height);
+const TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: inline-block;\n  align-items: center;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), props => props.isopen ? '#D0D0D0' : '#FFFFFF');
+const IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  font-family: \"poppins\";\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  float: left;\n  align-items: center;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  & > svg {\n    margin-right: 15px;\n  }\n"])));
+const ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  font-family: \"poppins\";\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 23%;\n  margin-right: 20px;\n"])));
+const IconDiv = exports.IconDiv = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  width: 25%;\n"])));
+const TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 70%;\n  text-align: left;\n  padding-left: 3px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: auto;\n  margin-bottom: 22px;\n"])));
+const Table = exports.Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  table-layout: fixed;\n"])));
+const Th = exports.Th = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: white;\n  font-family: \"poppins\";\n  font-weight: 600;\n  font-size: 12px;\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 18px;\n  border-top: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
+const Td = exports.Td = _styledComponents.default.td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  font-family: \"poppins\";\n  font-weight: 400;\n  border-bottom: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
+const ComponentHeader = exports.ComponentHeader = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"poppins\";\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 27px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));

package/dist/stories/components/CommonFunctions.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
-var getCurrencySign = exports.getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
+const getCurrencySign = (currencyTypeToConvert, value) => {
   if (value === undefined || value === null) {
     return '';
   }
@@ -12,15 +12,16 @@ var getCurrencySign = exports.getCurrencySign = function getCurrencySign(currenc
     return '';
   }
   if (!currencyTypeToConvert) return '';
-  var currencySign = '';
-  var currencyFormatter = new Intl.NumberFormat('en-US', {
+  let currencySign = '';
+  const currencyFormatter = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currencyTypeToConvert
   });
   currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
   return currencySign;
 };
-var getFormattedUnits = exports.getFormattedUnits = function getFormattedUnits(num) {
+exports.getCurrencySign = getCurrencySign;
+const getFormattedUnits = num => {
   if (num === undefined || num === null) {
     return '';
   }
@@ -38,7 +39,8 @@ var getFormattedUnits = exports.getFormattedUnits = function getFormattedUnits(n
   }
   return '';
 };
-var getFormattedValue = exports.getFormattedValue = function getFormattedValue(num) {
+exports.getFormattedUnits = getFormattedUnits;
+const getFormattedValue = num => {
   if (num === undefined || num === null) {
     return null;
   }
@@ -59,10 +61,11 @@ var getFormattedValue = exports.getFormattedValue = function getFormattedValue(n
   return num;
   // }
 };
-
-var getNumberWithCommas = exports.getNumberWithCommas = function getNumberWithCommas(x) {
-  var param = x.toString();
-  var pattern = /(-?\d+)(\d{3})/;
+exports.getFormattedValue = getFormattedValue;
+const getNumberWithCommas = x => {
+  let param = x.toString();
+  const pattern = /(-?\d+)(\d{3})/;
   while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
   return param;
-};
+};
+exports.getNumberWithCommas = getNumberWithCommas;

package/dist/stories/components/Datepicker.js

@@ -1,12 +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.Datepicker = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
@@ -18,37 +17,32 @@ var _CalendarIcon = require("./icons/CalendarIcon");
 /**
  *  SAG Datepicker
  */
-var Datepicker = exports.Datepicker = function Datepicker(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    text = _ref.text,
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? 'MMM DD, YYYY' : _ref$format,
-    shape = _ref.shape,
-    _onChange = _ref.onChange,
-    value = _ref.value,
-    disableClearable = _ref.disableClearable,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? '#1B30AA' : _ref$labelColor;
+const Datepicker = _ref => {
+  let {
+    width = '100%',
+    text,
+    format = 'MMM DD, YYYY',
+    shape,
+    onChange,
+    value,
+    disableClearable,
+    disabled = false,
+    labelColor = '#1B30AA'
+  } = _ref;
   /**
    *  SAG Datepicker
    */
 
-  var _React$useState = _react.default.useState(null),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    valueState = _React$useState2[0],
-    setvalueState = _React$useState2[1];
-  (0, _react.useEffect)(function () {
+  const [valueState, setvalueState] = _react.default.useState(null);
+  (0, _react.useEffect)(() => {
     if (value) {
       setvalueState((0, _dayjs.default)(value));
     } else {
       setvalueState(null);
     }
   }, [value]);
-  (0, _react.useEffect)(function () {}, [valueState]);
-  var getTextFieldStyle = function getTextFieldStyle() {
+  (0, _react.useEffect)(() => {}, [valueState]);
+  const getTextFieldStyle = () => {
     if (shape === 'round') {
       // round
       return {
@@ -58,7 +52,7 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
           fontWidth: 400,
           paddingLeft: '10px !important',
           borderRadius: '12px',
-          width: width
+          width
           // color: labelColor,
         },
 
@@ -67,7 +61,7 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
           fontFamily: 'Poppins',
           fontSize: '14px',
           fontWidth: 400,
-          width: width,
+          width,
           // color: labelColor,
           legend: {
             marginLeft: '10px'
@@ -132,9 +126,9 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     value: valueState,
     clearable: true,
     disabled: disabled,
-    onChange: function onChange(newValue) {
+    onChange: newValue => {
       setvalueState(newValue);
-      _onChange({
+      onChange({
         newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
       });
     },
@@ -154,4 +148,5 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     format: format
   }))));
 };
+exports.Datepicker = Datepicker;
 var _default = exports.default = Datepicker;

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

@@ -10,6 +10,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 // import './font.css';
 
-var DatepickerContainer = exports.DatepickerContainer = _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 DatepickerContainer = exports.DatepickerContainer = _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/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);