sag_components 1.0.973 → 1.0.975

package/dist/stories/components/BannerEventBoxList.js

@@ -34,7 +34,8 @@ const BannerEventBoxList = props => {
     linkText,
     disableToggle,
     bannerWidth,
-    loaderColor
+    loaderColor,
+    showDraft
   } = props;
   const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
   const handleToggle = () => {
@@ -95,7 +96,7 @@ const BannerEventBoxList = props => {
     onInfoClick: () => retailerFile(item === null || item === void 0 ? void 0 : item.banner),
     disabled: item === null || item === void 0 ? void 0 : item.disabled,
     buttonText: item.buttonText
-  }))) : children));
+  })), showDraft && /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.DraftTag, null, "DRAFT")) : children));
 };
 BannerEventBoxList.defaultProps = {
   className: '',
@@ -146,6 +147,7 @@ BannerEventBoxList.defaultProps = {
   disableToggle: true,
   children: null,
   bannerWidth: 'auto',
-  loaderColor: '#212121'
+  loaderColor: '#212121',
+  showDraft: false
 };
 var _default = exports.default = BannerEventBoxList;

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

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.LoaderWrapper = exports.Loader = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = exports.BannerIcon = void 0;
+exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.LoaderWrapper = exports.Loader = exports.DraftTag = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = exports.BannerIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
@@ -179,4 +179,11 @@ const MainContainer = exports.MainContainer = _styledComponents.default.div`
   display: flex;
   gap: 20px;
   padding: 20px 0 4px;
+`;
+const DraftTag = exports.DraftTag = _styledComponents.default.div`
+  color: #E41111;
+  border: 2px solid #E41111;
+  font-size: 20px;
+  padding: 6px 18px;
+  height: fit-content;
 `;

package/dist/stories/components/DropdownMultiNew.js

@@ -12,15 +12,12 @@ var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
 var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
 var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
 var _DropdownMultiNew = require("./DropdownMultiNew.style");
-/* eslint-disable react/prop-types */
-
 const DropdownMultiNew = _ref => {
   let {
     label,
     labelEmptyValue,
     options,
     selectedValue,
-    placeHolder,
     onChange,
     required,
     disabled,
@@ -30,17 +27,37 @@ const DropdownMultiNew = _ref => {
     labelColor,
     xIconShow,
     checkBoxColor,
-    showLabelOnTop
+    showLabelOnTop,
+    orderBy,
+    elementType
   } = _ref;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [showOptions, setShowOptions] = (0, _react.useState)(false);
-  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const [inputValue, setInputValue] = (0, _react.useState)("");
   const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
   const [hoverInputContainer, setHoverInputContainer] = (0, _react.useState)(false);
   const [hoverOptionsContainer, setHoverOptionsContainer] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
-  const filteredoptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  let filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  switch (orderBy) {
+    case "asc":
+      filteredOptions = filteredOptions.sort((a, b) => a.label.localeCompare(b.label));
+      break;
+    case "element":
+      if (elementType === "number") {
+        filteredOptions = filteredOptions.sort((a, b) => a.element - b.element);
+      } else {
+        filteredOptions = filteredOptions.sort((a, b) => {
+          const dateA = new Date(a.element.split("-").reverse().join("-"));
+          const dateB = new Date(b.element.split("-").reverse().join("-"));
+          return dateB - dateA;
+        });
+      }
+      break;
+    default:
+      break;
+  }
   (0, _react.useEffect)(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
@@ -62,13 +79,6 @@ const DropdownMultiNew = _ref => {
     setIsFocused(true);
     setShowOptions(true);
   };
-
-  // const handleBlur = () => {
-  //   if (isMulti) return;
-  //   setIsFocused(false);
-  //   setTimeout(() => setShowOptions(false), 200); // Delay hiding options to allow clicking on them
-  // };
-
   const toggleOption = option => {
     if (disabled) return;
     const selectedIndex = selectedOptions.findIndex(selectedOption => selectedOption.value === option.value);
@@ -141,37 +151,36 @@ const DropdownMultiNew = _ref => {
         width: "8px",
         height: "8px",
         fill: "#212121"
-      })) : ' ';
+      })) : " ";
     }), selectedOptions.length > 2 ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.SelectedOptionItem, {
       className: "SelectedOptionItem"
-    }, selectedOptions.length - 2, "+") : '');
+    }, selectedOptions.length - 2, "+") : "");
     return content;
   };
   const getLabel = () => {
     if (!showLabelOnTop && isFocused) {
-      return '';
+      return "";
     }
     if ((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
       return label;
     }
     return labelEmptyValue;
-    // selectedOptions?.length > 0 ?  label : labelEmptyValue}
   };
   const getRequired = () => {
     if (!showLabelOnTop && isFocused) {
-      return '';
+      return "";
     }
     if (!showLabelOnTop && !label && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
-      return '';
+      return "";
     }
     if (required) {
       return /*#__PURE__*/_react.default.createElement("span", {
         style: {
-          color: 'red'
+          color: "red"
         }
       }, "*");
     }
-    return '';
+    return "";
   };
   return /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.DropdownWrapper, {
     className: "DropdownWrapper",
@@ -210,10 +219,10 @@ const DropdownMultiNew = _ref => {
     onClick: handleLabelClick,
     type: "search",
     disabled: disabled,
-    placeholder: isFocused ? placeHolder || 'Type to search...' : '',
+    placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
     error: error,
     isFocused: isFocused
-  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
+  }) : " "), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
     className: "IconContainer",
     onClick: handleClearClick
   }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
@@ -237,45 +246,47 @@ const DropdownMultiNew = _ref => {
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
     disabled: disabled,
-    filteredoptions: filteredoptions
+    filteredoptions: filteredOptions
   }, /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.OptionsSubContainer, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
-    filteredoptions: filteredoptions
-  }, filteredoptions.map(option => /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.OptionItem, {
+    filteredoptions: filteredOptions
+  }, filteredOptions.map(option => /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.OptionItem, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, ' ', /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
+  }, " ", /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
     className: "IconContainer"
   }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
     width: "14px",
     height: "14px",
-    color: disabled ? '#888' : checkBoxColor
+    color: disabled ? "#888" : checkBoxColor
   }) : /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
     width: "14px",
     height: "14px",
-    color: disabled ? '#888' : '#212121'
+    color: disabled ? "#888" : "#212121"
   })), option.label)))));
 };
 exports.DropdownMultiNew = DropdownMultiNew;
 var _default = exports.default = DropdownMultiNew;
 DropdownMultiNew.defaultProps = {
-  placeHolder: 'Type...',
-  label: 'Label',
-  labelEmptyValue: 'All Labels',
-  labelColor: '#066768',
-  checkBoxColor: '#229E38',
+  placeHolder: "Type To Search",
+  label: "Label",
+  labelEmptyValue: "All Labels",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
   required: true,
-  width: '300px',
+  width: "300px",
   disabled: false,
   error: false,
-  errorMessage: '',
+  errorMessage: "",
   options: [],
   selectedValue: [],
   xIconShow: true,
   onChange: () => {},
-  showLabelOnTop: true
+  showLabelOnTop: true,
+  orderBy: "asc",
+  elementType: "number"
 };

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

@@ -8,6 +8,23 @@ exports.StyledInput = exports.SelectedOptionsContainer = exports.SelectedOptionI
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 /* eslint-disable no-nested-ternary */
 
+const scrollableStyles = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
 const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div`
   position: relative;
   display: flex;
@@ -22,7 +39,6 @@ const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div`
   border-radius: 10px;
 `;
 const Label = exports.Label = _styledComponents.default.label`
-
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -46,7 +62,6 @@ const Label = exports.Label = _styledComponents.default.label`
   }
 `;
 const InputContainer = exports.InputContainer = _styledComponents.default.div`
-
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -69,16 +84,13 @@ const InputContainer = exports.InputContainer = _styledComponents.default.div`
     border-radius: 12px;
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};
-   
   &:hover {
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
-
   &:focus {  
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
-  
 `;
 const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div`
 
@@ -122,9 +134,9 @@ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.di
   var _props$filteredoption;
   return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
 }};  
-
 `;
 const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul`
+  ${scrollableStyles}
   list-style: none;
   font-weight: 400;
   margin: 0;

package/dist/stories/components/DropdownNew.js

@@ -28,7 +28,9 @@ const DropdownNew = _ref => {
     labelColor,
     checkBoxColor,
     xIconShow,
-    showLabelOnTop
+    showLabelOnTop,
+    orderBy,
+    elementType
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownMain, {
     className: "DropdownMain",
@@ -49,7 +51,9 @@ const DropdownNew = _ref => {
     selectedValue: selectedValue,
     xIconShow: xIconShow,
     onChange: onChange,
-    showLabelOnTop: showLabelOnTop
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
   }) : /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.DropdownSingleNew, {
     className: "DropdownSingleNew",
     placeHolder: placeHolder,
@@ -66,25 +70,29 @@ const DropdownNew = _ref => {
     selectedValue: selectedValue,
     xIconShow: xIconShow,
     onChange: onChange,
-    showLabelOnTop: showLabelOnTop
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
   }));
 };
 exports.DropdownNew = DropdownNew;
 var _default = exports.default = DropdownNew;
 DropdownNew.defaultProps = {
-  placeHolder: 'Type...',
-  label: 'Label',
-  labelEmptyValue: 'All Labels',
-  labelColor: '#066768',
-  checkBoxColor: '#229E38',
+  placeHolder: "Type...",
+  label: "Label",
+  labelEmptyValue: "All Labels",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
   required: true,
-  width: '300px',
+  width: "300px",
   disabled: false,
   error: false,
-  errorMessage: '',
+  errorMessage: "",
   options: [],
   selectedValue: [],
   xIconShow: true,
   onChange: () => {},
-  showLabelOnTop: true
+  showLabelOnTop: true,
+  orderBy: "asc",
+  elementType: "number"
 };

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

@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DropdownMain = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-/* eslint-disable no-nested-ternary */
-
-// eslint-disable-next-line import/prefer-default-export
 const DropdownMain = exports.DropdownMain = _styledComponents.default.div`
   position: relative;
   display: flex;

package/dist/stories/components/DropdownSingleNew.js

@@ -18,7 +18,6 @@ const DropdownSingleNew = _ref => {
     labelEmptyValue,
     options,
     selectedValue,
-    placeHolder,
     onChange,
     required,
     disabled,
@@ -27,7 +26,9 @@ const DropdownSingleNew = _ref => {
     errorMessage,
     xIconShow,
     labelColor,
-    showLabelOnTop
+    showLabelOnTop,
+    orderBy,
+    elementType
   } = _ref;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [showOptions, setShowOptions] = (0, _react.useState)(false);
@@ -37,7 +38,25 @@ const DropdownSingleNew = _ref => {
   const [hoverOptionsContainer, setHoverOptionsContainer] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
-  const filteredoptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  let filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  switch (orderBy) {
+    case "asc":
+      filteredOptions = filteredOptions.sort((a, b) => a.label.localeCompare(b.label));
+      break;
+    case "element":
+      if (elementType === "number") {
+        filteredOptions = filteredOptions.sort((a, b) => a.element - b.element);
+      } else {
+        filteredOptions = filteredOptions.sort((a, b) => {
+          const dateA = new Date(a.element.split("-").reverse().join("-"));
+          const dateB = new Date(b.element.split("-").reverse().join("-"));
+          return dateB - dateA;
+        });
+      }
+      break;
+    default:
+      break;
+  }
   (0, _react.useEffect)(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
@@ -123,7 +142,6 @@ const DropdownSingleNew = _ref => {
       return label;
     }
     return labelEmptyValue;
-    // selectedOptions?.length > 0 ?  label : labelEmptyValue}
   };
   const getRequired = () => {
     if (!showLabelOnTop && isFocused) {
@@ -176,7 +194,7 @@ const DropdownSingleNew = _ref => {
     onChange: handleInputChange,
     onClick: handleLabelClick,
     disabled: disabled,
-    placeholder: isFocused ? placeHolder || "Type to search..." : "",
+    placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
     error: error,
     isFocused: isFocused
   })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.IconContainer, {
@@ -203,13 +221,13 @@ const DropdownSingleNew = _ref => {
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
     disabled: disabled,
-    filteredoptions: filteredoptions
+    filteredoptions: filteredOptions
   }, /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.OptionsSubContainer, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
-    filteredoptions: filteredoptions
-  }, filteredoptions.map(option => /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.OptionItem, {
+    filteredoptions: filteredOptions
+  }, filteredOptions.map(option => /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.OptionItem, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
@@ -219,7 +237,7 @@ const DropdownSingleNew = _ref => {
 exports.DropdownSingleNew = DropdownSingleNew;
 var _default = exports.default = DropdownSingleNew;
 DropdownSingleNew.defaultProps = {
-  placeHolder: "Type...",
+  placeHolder: "Type To Search",
   label: "Label",
   labelEmptyValue: "All Labels",
   labelColor: "#066768",
@@ -232,5 +250,7 @@ DropdownSingleNew.defaultProps = {
   selectedValue: [],
   xIconShow: true,
   onChange: () => {},
-  showLabelOnTop: true
+  showLabelOnTop: true,
+  orderBy: "asc",
+  elementType: "number"
 };

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

@@ -8,6 +8,23 @@ exports.StyledInput = exports.OptionsSubContainer = exports.OptionsContainer = e
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 /* eslint-disable no-nested-ternary */
 
+const scrollableStyles = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
 const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div`
   position: relative;
   display: flex;
@@ -45,7 +62,6 @@ const Label = exports.Label = _styledComponents.default.label`
   }
 `;
 const InputContainer = exports.InputContainer = _styledComponents.default.div`
-
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -68,19 +84,16 @@ const InputContainer = exports.InputContainer = _styledComponents.default.div`
     border-radius: 12px;
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};
-   
   &:hover {
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
-
   &:focus {  
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
   
 `;
 const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div`
-
     display: flex;       
     flex-direction: column;
     flex-wrap: nowrap;     
@@ -123,6 +136,7 @@ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.di
 }};  
 `;
 const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul`
+  ${scrollableStyles}
   list-style: none;
   font-weight: 400;
   margin: 0;

package/package.json

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