sag_components 1.0.615 → 1.0.617

package/dist/stories/components/DropdownMulti.js

@@ -25,8 +25,8 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
 /**
  *  SAG DropdownMulti
  */
-const DropdownMulti = _ref => {
-  let {
+const DropdownMulti = props => {
+  const {
     name,
     width = '100%',
     size,
@@ -46,12 +46,9 @@ const DropdownMulti = _ref => {
     disableClearable = false,
     disabled = false,
     dropdownListfontSize = '14px',
-    placeHolderFontSize = '14px'
-  } = _ref;
-  /**
-   *  SAG DropdownMulti
-   */
-
+    placeHolderFontSize = '14px',
+    dropdownMultiMaxWidth
+  } = props;
   const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
   const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
@@ -85,7 +82,11 @@ const DropdownMulti = _ref => {
           legend: {
             marginLeft: '10px'
           }
+          // '& .MuiAutocomplete-endAdornment': {
+          //   marginRight: '10px',
+          // },
         },
+
         '& .MuiAutocomplete-inputRoot': {
           paddingLeft: '10px !important',
           borderRadius: '12px',
@@ -180,6 +181,9 @@ const DropdownMulti = _ref => {
       onInputChangeHandler(event, newInputValue);
     },
     multiple: true,
+    style: {
+      maxWidth: dropdownMultiMaxWidth ? "".concat(dropdownMultiMaxWidth) : undefined
+    },
     limitTags: limitTagsOnMultiSelect,
     id: "checkboxes-tags",
     options: options,
@@ -192,10 +196,10 @@ const DropdownMulti = _ref => {
       width: "0.5em",
       height: "0.5em"
     }) : null,
-    renderOption: (props, option, _ref2) => {
+    renderOption: (props, option, _ref) => {
       let {
         selected
-      } = _ref2;
+      } = _ref;
       return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
         icon: icon,
         checkedIcon: checkedIcon,
@@ -257,8 +261,32 @@ const DropdownMulti = _ref => {
 
   // --------------------------------- MAIN -------------------------------------
   return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
+    className: "DropdownContainer",
     width: width
   }, getAutocompleteMulti());
 };
 exports.DropdownMulti = DropdownMulti;
-var _default = exports.default = DropdownMulti;
+var _default = exports.default = DropdownMulti;
+DropdownMulti.defaultProps = {
+  name: 'MultiSelectLarge',
+  width: '500px',
+  size: 'large',
+  text: 'Retailer',
+  limitTagsOnMultiSelect: 2,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: true,
+  options: [],
+  onChange: () => {},
+  onInputChange: () => {},
+  labelColor: '#1B30AA',
+  required: true,
+  inputRef: undefined,
+  allowedInput: 'all',
+  disableClearable: false,
+  disabled: false,
+  reset: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px',
+  dropdownMultiMaxWidth: undefined
+};

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

@@ -8,6 +8,4 @@ exports.DropdownContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-// import './font.css';
-
-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);
+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/EventInfo.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
+var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
+var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
+var _BannersDropdown = require("./BannersDropdown");
+var _EventInfo = require("./EventInfo.style");
+const EventInfo = props => {
+  const {
+    title,
+    subTitle,
+    productsData,
+    onSpotlightProductClick,
+    onClickBannersDropdown
+  } = props;
+  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
+  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
+    banners: [{
+      checked: true,
+      name: 'StopAndShop'
+    }, {
+      checked: true,
+      name: 'FoodLion'
+    }, {
+      checked: true,
+      name: 'GiantFood'
+    }, {
+      checked: true,
+      name: 'TheGiantCompany'
+    }, {
+      checked: true,
+      name: 'Hannaford'
+    }],
+    onClick: banners => {
+      onClickBannersDropdown({
+        banners
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoMainContainer, {
+    id: "EventInfoMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
+    id: "EventInfoContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
+    id: "EventInfoTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
+    id: "EventInfoTitle"
+  }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
+    id: "EventInfoSubTitle"
+  }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
+    id: "EventInfoSubTitle"
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    onClick: () => {
+      setIsProductsListOpen(!IsProductsListOpen);
+    }
+  }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
+    color: "#212121"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    color: "#212121"
+  }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
+    id: "EventInfoContentContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
+    id: "ProductsTitle"
+  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
+    id: "ProductContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
+    id: "Product"
+  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    background: "#F8CD00",
+    onClick: () => {
+      onSpotlightProductClick({
+        value: item.value,
+        label: item.label
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
+};
+var _default = exports.default = EventInfo;
+EventInfo.defaultProps = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  onSpotlightProductClick: () => {},
+  onClickBannersDropdown: () => {}
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
+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;
+const EventInfoMainContainer = exports.EventInfoMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  padding: 10px;\n  border-radius: 12px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
+const EventInfoContainer = exports.EventInfoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 10px;\n"])));
+const EventInfoTitleContainer = exports.EventInfoTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n  gap: 15px;\n"])));
+const EventInfoTitle = exports.EventInfoTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n\n  margin: 0;\n"])));
+const EventInfoSubTitle = exports.EventInfoSubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
+const EventInfoContentContainer = exports.EventInfoContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 20px 20px 50px;\n"])));
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 10px 0;\n"])));
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 100%;\n  gap: 20px;\n"])));
+const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: 12px;\n"])));
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: ", ";\n  border-radius: 12px;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n  gap: 10px;\n"])), props => props.background || '#ffffff');

package/dist/stories/components/FilterButton.js

@@ -1,33 +1,29 @@
 "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.FilterButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _FilterButton = require("./FilterButton.style");
 var _FilterIcon = require("./icons/FilterIcon");
 const FilterButton = props => {
   const {
     color,
-    activeColor,
     height,
     buttonText,
     iconWidth,
     iconHeight,
     disabled,
-    openState,
     onButtonClick
   } = props;
-  const [activeState, setActiveState] = (0, _react.useState)(openState);
   const onClickHandler = event => {
     onButtonClick(event);
-    setActiveState(!activeState);
   };
   return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
     height: height,
-    color: activeState ? activeColor : color,
+    color: color,
     disabled: disabled,
     onClick: event => {
       onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
   }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
     width: iconWidth,
     height: iconHeight,
-    color: activeState ? activeColor : color
+    color: color
   }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
 };
 exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ FilterButton.defaultProps = {
   buttonText: 'Filter',
   height: '40px',
   color: '#212121',
-  activeColor: '#229E38',
   iconHeight: 12,
   iconWidth: 12,
-  openState: false,
   disabled: false,
   onButtonClick: () => {}
 };

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

@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
-const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid #B1B1B1;\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color);
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/FilterPanel.js

@@ -27,22 +27,34 @@ const FilterPanel = props => {
     onItemValueChanged,
     width,
     height,
-    disableOKButton
+    disableOKButton,
+    dropdownMultiMaxWidth
   } = props;
   const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
   const [Reset, setReset] = (0, _react.useState)(false);
-  const [PeriodPickerSelectedValue, setPeriodPickerSelectedValue] = (0, _react.useState)('');
   (0, _react.useEffect)(() => {
-    setFieldsDataState(fieldsData);
+    const newFieldsDataState = FieldsDataState.map(itemFieldsDataState => {
+      const foundItem = fieldsData.find(itemfieldsData => itemFieldsDataState.name === itemfieldsData.name);
+      return {
+        ...itemFieldsDataState,
+        ...(itemFieldsDataState.dropdownOptions ? {
+          dropdownOptions: foundItem !== null && foundItem !== void 0 && foundItem.dropdownOptions ? foundItem === null || foundItem === void 0 ? void 0 : foundItem.dropdownOptions : undefined
+        } : '')
+      };
+    });
+    setFieldsDataState(newFieldsDataState);
+    console.log('newFieldsDataState', newFieldsDataState);
   }, [fieldsData]);
   const onClickResetHandler = () => {
     const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
       ...itemField,
-      selectedValue: undefined
+      selectedValue: undefined,
+      ...(itemField.periodPickerSelectedValue ? {
+        periodPickerSelectedValue: undefined
+      } : '')
     }));
     setFieldsDataState(newFieldsDataState);
     setReset(!Reset);
-    setPeriodPickerSelectedValue('');
     onResetClick({
       eventName: 'onResetClick',
       fieldsData: newFieldsDataState
@@ -62,7 +74,7 @@ const FilterPanel = props => {
   };
   const displayPeriodPickerContent = item => {
     let content;
-    switch (PeriodPickerSelectedValue) {
+    switch (item.periodPickerSelectedValue) {
       case 'date':
         content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
           className: "DatePickerContainer"
@@ -164,6 +176,7 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: ''.concat(item.name, '_Year'),
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -201,7 +214,30 @@ const FilterPanel = props => {
         });
         break;
       default:
-        content = '';
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
+          className: "PeriodPickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
+          className: "Dropdown",
+          name: ''.concat(item.name, '_Default'),
+          reset: Reset,
+          showPopupIcon: true,
+          allowedInput: "all",
+          dropdownListfontSize: "14px",
+          labelColor: borderColor,
+          limitTagsOnMultiSelect: 2,
+          onInputChange: () => {},
+          shape: "round",
+          size: "large",
+          text: "Select Dates",
+          value: undefined,
+          required: false,
+          disabled: true,
+          placeHolder: "Select Dates",
+          placeHolderFontSize: "14px",
+          onChange: () => {},
+          options: [],
+          width: "100%"
+        }));
     }
     return content;
   };
@@ -213,6 +249,7 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: item.name,
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -220,7 +257,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: item.label,
+          text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -252,6 +289,8 @@ const FilterPanel = props => {
           className: "DropdownMulti",
           name: item.name,
           reset: Reset,
+          dropdownMultiMaxWidth: dropdownMultiMaxWidth,
+          showPopupIcon: false,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -259,7 +298,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: item.label,
+          text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -293,7 +332,7 @@ const FilterPanel = props => {
           className: "RangePicker",
           borderColor: borderColor,
           borderRadius: "12px",
-          label: item.label,
+          label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
           onChange: eventDatePicker => {
             const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
             const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
@@ -323,6 +362,7 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: item.name,
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -330,7 +370,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: item.label,
+          text: !item.periodPickerSelectedValue ? item.labelEmptyValue || item.label : item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -338,8 +378,12 @@ const FilterPanel = props => {
           placeHolderFontSize: "14px",
           onChange: eventDropdownPeriodPicker => {
             var _eventDropdownPeriodP, _eventDropdownPeriodP2;
-            const selectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
-            setPeriodPickerSelectedValue(selectedValue);
+            const newPeriodPickerSelectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
           },
           options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
           width: "100%"
@@ -347,6 +391,7 @@ const FilterPanel = props => {
         break;
       default:
         content = '';
+        break;
     }
     return content;
   };
@@ -417,5 +462,6 @@ FilterPanel.defaultProps = {
   onOkClick: () => {},
   onResetClick: () => {},
   onItemValueChanged: () => {},
-  disableOKButton: false
+  disableOKButton: false,
+  dropdownMultiMaxWidth: undefined
 };

package/dist/stories/components/TotalHorizontalCharts.js

@@ -84,7 +84,7 @@ const TotalHorizontalCharts = props => {
           textAnchor: "start",
           verticalAnchor: "middle",
           fill: fill
-        }, payload.value.length > 13 ? "".concat(payload.value.slice(0, 13), "...") : payload.value));
+        }, payload.value.length > 6 ? "".concat(payload.value.slice(0, 6), "...") : payload.value));
       }
       return null;
     }
@@ -162,7 +162,7 @@ const TotalHorizontalCharts = props => {
     left: tooltipText.clientX,
     style: {
       pointerEvents: 'none'
-    } // Add this line
+    }
   })))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.615",
+  "version": "1.0.617",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/.history/.env_20231001120613

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_YdAmQQKQ2B6ZngEijA0JiqNNUdJvP23G46NK7-fc

package/.history/.env_20231003143620

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_MOcc8-aS91XJ3mFdtNlH4oPVY73ChHlmw6-hKhsb

package/.history/.eslintrc_20230928112617.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-  },
-};

package/.history/.eslintrc_20230928130534.js

@@ -1,27 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-  },
-};

package/.history/.eslintrc_20230928133400.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    /*eslint linebreak-style: ["error", "windows"]*/
-  },
-};

package/.history/.eslintrc_20230928133404.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    eslint linebreak-style: ["error", "windows"]
-  },
-};

package/.history/.eslintrc_20230928133416.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    linebreak-style: ["error", "windows"]
-  },
-};

package/.history/.eslintrc_20230928133419.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    'linebreak-style': ["error", "windows"]
-  },
-};