sag_components 2.0.0-beta115 → 2.0.0-beta117

package/dist/index.d.ts

@@ -1463,12 +1463,13 @@ declare function ModalDrawer({ open, onClose, children, widthPercent }: {
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, disabled, required, selectedColor, hoverColor, dropdownMaxHeight, width, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
     onSelectClick: any;
     disabled?: boolean;
+    isDarkerBackground?: boolean;
     required?: boolean;
     selectedColor?: string;
     hoverColor?: string;

package/dist/index.esm.js

@@ -23897,21 +23897,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -51125,7 +51126,6 @@ const scrollableStyles = `
 const DropdownContainer = styled.div`
   position: relative;
   width: ${props => props.width || '100%'};
-  max-width: 420px;
   font-family: "Poppins", sans-serif;
 `;
 const DropdownButton = styled.button`
@@ -51143,6 +51143,7 @@ const DropdownButton = styled.button`
       color: #D0D0D0;
       cursor: not-allowed;
       border: 1px solid #D0D0D0;
+      background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
     `}
 `;
 const DropdownList = styled.ul`
@@ -51154,8 +51155,6 @@ const DropdownList = styled.ul`
   margin: 0;
   padding: 8px 0;
   width: ${props => props.width || '100%'};
-  /* min-width: 320px; */
-  max-width: 600px;
   max-height: ${props => props.dropdownMaxHeight || '420px'}; 
   overflow-y: auto;
   left: 0;
@@ -51440,6 +51439,7 @@ const OverlayDropdown = _ref => {
     value,
     onSelectClick,
     disabled = false,
+    isDarkerBackground = false,
     required = false,
     selectedColor = '#066768',
     hoverColor = '#E6F0F0',
@@ -51635,6 +51635,7 @@ const OverlayDropdown = _ref => {
     ref: buttonRef,
     onClick: toggleDropdown,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     type: "button"
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),