sag_components 2.0.0-beta126 → 2.0.0-beta128

package/dist/index.d.ts

@@ -1424,7 +1424,7 @@ declare function Execute({ width, height, fill }: {
     fill?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Table(props: any): react_jsx_runtime.JSX.Element;
+declare const Table: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 
 declare function FilterPop(props: any): react_jsx_runtime.JSX.Element;
 
@@ -1464,7 +1464,7 @@ declare function ModalDrawer({ open, onClose, children, widthPercent }: {
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
@@ -1476,6 +1476,12 @@ declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarke
     hoverColor?: string;
     dropdownMaxHeight?: string;
     width?: string;
+    label: any;
+    labelEmptyValue: any;
+    showLabelOnTop: any;
+    placeHolder: any;
+    labelColor: any;
+    placeHolderColor: any;
 }): react_jsx_runtime.JSX.Element;
 
 declare function MessageBox({ isOpen, onClose, onConfirm, title, messageTitle, messageText, cancelText, confirmText, width, height }: {

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React$1, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React$1, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -54,7 +54,7 @@ const ButtonItem = styled.div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$a = styled.label`
+const Label$b = styled.label`
   font-family: "Poppins";
   font-size: 14px;
   font-weight: 400;
@@ -526,7 +526,7 @@ const Button$1 = props => {
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false),
     borderRadius: borderRadius
-  }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$a, {
+  }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$b, {
     className: "Label",
     disabled: disabled
   }, text), getIcon(rightIcon)));
@@ -2968,7 +2968,7 @@ const LinkButtonItem = styled.div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$9 = styled.label` 
+const Label$a = styled.label` 
   user-select: none;   
   pointer-events: none;
 `;
@@ -3231,7 +3231,7 @@ const LinkButton = _ref => {
     disabled: disabled,
     text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
     font_size: size === 'small' ? '14px' : '16px'
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$9, {
+  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$a, {
     className: "Label",
     disabled: disabled,
     font_size: size === 'small' ? '14px' : '16px'
@@ -3640,7 +3640,7 @@ const Body = styled.div`
   border-radius: ${props => props.setBackground ? '12px' : '0'};
   box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
 `;
-const Label$8 = styled.div`
+const Label$9 = styled.div`
   font-size: 12px;
   font-weight: 400;
   padding: 8px;
@@ -3891,7 +3891,7 @@ const TabMenu = props => {
     hoverBorderColor: buttonHoverColor
   })), showActions && /*#__PURE__*/React$1.createElement(ActionsWrapper, {
     className: "ActionsWrapper"
-  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$8, {
+  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$9, {
     className: "Label"
   }, /*#__PURE__*/React$1.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/React$1.createElement("span", {
     className: "separator"
@@ -8525,7 +8525,7 @@ const DropdownWrapper$2 = styled.div`
     pointer-events: none;
   }
 `;
-const Label$7 = styled.label`
+const Label$8 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -8847,7 +8847,7 @@ const DropdownSingleNew = ({
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$7, {
+  }, /*#__PURE__*/React$1.createElement(Label$8, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -8984,7 +8984,7 @@ const DropdownWrapper$1 = styled.div`
     pointer-events: none;
   }
 `;
-const Label$6 = styled.label`
+const Label$7 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -9355,7 +9355,7 @@ const DropdownMultiNew = ({
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$6, {
+  }, /*#__PURE__*/React$1.createElement(Label$7, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -9873,21 +9873,20 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = _ref => {
-  let {
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const RangePicker = ({
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(''); // Added value state
@@ -10311,24 +10310,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10770,23 +10768,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -23787,7 +23784,7 @@ const QuickFilterInput = styled.div`
   font-size: 14px;
   border-radius: 8px;
 `;
-const Label$5 = styled.label`
+const Label$6 = styled.label`
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.disabled ? '#D0D0D0' : '212121'};
@@ -23897,21 +23894,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("");
@@ -24034,7 +24032,7 @@ const QuickFilterDropdownSingle = ({
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$5, {
+  }, /*#__PURE__*/React$1.createElement(Label$6, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -24141,7 +24139,7 @@ const DropdownWrapper = styled.div`
   font-size: 14px;
   border-radius: 10px;
 `;
-const Label$4 = styled.label`
+const Label$5 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -24498,7 +24496,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$4, {
+  }, /*#__PURE__*/React$1.createElement(Label$5, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -29094,7 +29092,7 @@ const Controls$5 = styled.div`
   display: flex;  
   align-items: center;
 `;
-const Label$3 = styled.div`
+const Label$4 = styled.div`
   display: flex;
   padding: 0 10px 0 10px;
   white-space: nowrap;
@@ -29174,7 +29172,7 @@ const CheckBox = props => {
     width: iconSize,
     height: iconSize,
     color: disabled ? colorDisabled : colorUnchecked
-  })), /*#__PURE__*/React$1.createElement(Label$3, {
+  })), /*#__PURE__*/React$1.createElement(Label$4, {
     className: "Label",
     "data-testid": "label"
   }, label)));
@@ -34418,7 +34416,11 @@ const ModalWithOverlay = props => {
     leftIcon: cancelButtonLeftIcon,
     rightIcon: cancelButtonRightIcon,
     text: cancelButtonText,
-    onClick: onCancel
+    onClick: onCancel,
+    borderColor: "#D3D3D3",
+    hoverTextColor: "#212121",
+    hoverBackgroundColor: "#E6F0F0",
+    hoverBorderColor: "#D3D3D3"
   }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
@@ -35184,7 +35186,7 @@ const MainContainer = styled.div`
   padding: 0;
   cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
 `;
-const Label$2 = styled.label`
+const Label$3 = styled.label`
 
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
@@ -35406,7 +35408,7 @@ const Input$2 = _ref => {
     error: error,
     onClick: handleLabelClick,
     size: size
-  }, /*#__PURE__*/React$1.createElement(Label$2, {
+  }, /*#__PURE__*/React$1.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -36660,7 +36662,7 @@ const FieldRow$1 = styled.div`
     justify-content: center;
   padding: 16px;
 `;
-const Label$1 = styled.label`
+const Label$2 = styled.label`
     color: #222;
     display: flex;
     align-items: center;
@@ -36750,7 +36752,7 @@ const RangePop = props => {
       e.preventDefault();
       if (isValid) onApply(fields);
     }
-  }, /*#__PURE__*/React$1.createElement(RadioWrapper, null, radioOptions.map((option, idx) => /*#__PURE__*/React$1.createElement(Label$1, {
+  }, /*#__PURE__*/React$1.createElement(RadioWrapper, null, radioOptions.map((option, idx) => /*#__PURE__*/React$1.createElement(Label$2, {
     key: option
   }, /*#__PURE__*/React$1.createElement(Radio, {
     type: "radio",
@@ -36763,7 +36765,7 @@ const RangePop = props => {
     }
   }), option))), /*#__PURE__*/React$1.createElement(FieldRow$1, null, params.map((param, idx) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
     key: param.label
-  }, /*#__PURE__*/React$1.createElement(Label$1, {
+  }, /*#__PURE__*/React$1.createElement(Label$2, {
     htmlFor: `param-${idx}`
   }, param.label), /*#__PURE__*/React$1.createElement(Input$1, {
     id: `param-${idx}`,
@@ -36774,7 +36776,7 @@ const RangePop = props => {
     onBlur: () => handleBlur(idx),
     min: 0,
     max: param.type === 'percent' ? 100 : undefined
-  }))), /*#__PURE__*/React$1.createElement(Label$1, null, paramType)), /*#__PURE__*/React$1.createElement(Actions$1, null, /*#__PURE__*/React$1.createElement(ClearButton, {
+  }))), /*#__PURE__*/React$1.createElement(Label$2, null, paramType)), /*#__PURE__*/React$1.createElement(Actions$1, null, /*#__PURE__*/React$1.createElement(ClearButton, {
     type: "button",
     onClick: () => {
       setFields(params.map(() => ''));
@@ -37888,17 +37890,39 @@ const DisabledTrashIcon = ({
 };
 
 // TableBody.jsx
-const TableBody = ({
+const TableBody = /*#__PURE__*/forwardRef(({
   columns,
   data,
   onRowClick,
   onSendClick,
   buttonColor,
-  onDeleteClick
-}) => {
+  onDeleteClick,
+  resetFocus = false,
+  onFocusChange
+}, ref) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
 
+  // Expose methods to parent components via ref
+  useImperativeHandle(ref, () => ({
+    clearFocus: () => setFocusedRowIndex(null),
+    getFocusedRowIndex: () => focusedRowIndex
+  }));
+
+  // Handle resetFocus prop
+  useEffect(() => {
+    if (resetFocus) {
+      setFocusedRowIndex(null);
+    }
+  }, [resetFocus]);
+
+  // Notify parent of focus changes
+  useEffect(() => {
+    if (onFocusChange) {
+      onFocusChange(focusedRowIndex);
+    }
+  }, [focusedRowIndex, onFocusChange]);
+
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
     setFocusedRowIndex(rowIndex);
@@ -38138,7 +38162,10 @@ const TableBody = ({
       $maxWidth: column.maxWidth
     }, formattedValue);
   }))));
-};
+});
+
+// Add displayName for better debugging
+TableBody.displayName = 'TableBody';
 
 var nm$1 = "calendar_lottie";
 var ddd$1 = 0;
@@ -41307,7 +41334,7 @@ var Lottie = function Lottie(props) {
 };
 
 // Table.jsx
-const Table = props => {
+const Table = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     width = '100%',
     height = 'auto',
@@ -41338,10 +41365,34 @@ const Table = props => {
     onDeleteClick = () => {},
     showNoDataInSearch = false,
     noDataInSearchTitle = "No Results Found",
-    noDataInSearchMessage = "Try to refine your query and search again"
+    noDataInSearchMessage = "Try to refine your query and search again",
+    // New props for focus management
+    resetTableFocus = false,
+    onTableFocusChange = () => {},
+    clearFocusOnOutsideClick = true
   } = props;
   const scrollWrapperRef = useRef(null);
+  const tableBodyRef = useRef(null);
+  const tableContainerRef = useRef(null);
   const [hasTriggered, setHasTriggered] = useState(false);
+
+  // Expose method to clear table focus to parent components
+  const clearTableFocus = () => {
+    if (tableBodyRef.current) {
+      tableBodyRef.current.clearFocus();
+    }
+  };
+
+  // Handle focus change from TableBody
+  const handleTableFocusChange = focusedRowIndex => {
+    onTableFocusChange(focusedRowIndex);
+  };
+
+  // Expose methods to parent components via ref
+  useImperativeHandle(ref, () => ({
+    clearTableFocus,
+    getTableBodyRef: () => tableBodyRef.current
+  }));
   useEffect(() => {
     const scrollWrapper = scrollWrapperRef.current;
     if (!scrollWrapper || !onLastRowsReached) return;
@@ -41370,6 +41421,23 @@ const Table = props => {
     scrollWrapper.addEventListener('scroll', handleScroll);
     return () => scrollWrapper.removeEventListener('scroll', handleScroll);
   }, [onLastRowsReached, data.length, lastRowsThreshold, hasTriggered]);
+
+  // Handle outside click to clear focus
+  useEffect(() => {
+    if (!clearFocusOnOutsideClick) return;
+    const handleOutsideClick = event => {
+      if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
+        // Click is outside the table container
+        if (tableBodyRef.current) {
+          tableBodyRef.current.clearFocus();
+        }
+      }
+    };
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [clearFocusOnOutsideClick]);
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
     height: height
@@ -41384,7 +41452,8 @@ const Table = props => {
     hoverBackgroundColor: sideButtonHoverColor,
     onClick: onSideButtonClick
   })), children, /*#__PURE__*/React$1.createElement(TableContainer, {
-    showHorizontalScroll: showHorizontalScroll
+    showHorizontalScroll: showHorizontalScroll,
+    ref: tableContainerRef
   }, /*#__PURE__*/React$1.createElement(TableBodyScrollWrapper, {
     tableBodyHeight: tableBodyHeight,
     showHorizontalScroll: showHorizontalScroll,
@@ -41395,12 +41464,15 @@ const Table = props => {
     onFilter: onFilter,
     onSelectAll: onSelectAll
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
+    ref: tableBodyRef,
     columns: columns,
     data: data,
     onRowClick: onRowClick,
     onSendClick: onSendClick,
     onDeleteClick: onDeleteClick,
-    buttonColor: buttonColor
+    buttonColor: buttonColor,
+    resetFocus: resetTableFocus,
+    onFocusChange: handleTableFocusChange
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
@@ -41419,7 +41491,10 @@ const Table = props => {
     animationData: LoadingAnimation,
     loop: true
   }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)))));
-};
+});
+
+// Add displayName for better debugging
+Table.displayName = 'Table';
 
 const Card = styled.div`
   background: ${props => props.backgroundColor};
@@ -51273,7 +51348,7 @@ const TruncatedText = styled.span`
   line-height: 21px;
   font-size: 14px;
   font-weight: 400;
-  color: inherit;
+  color: ${props => props.color};
   max-width: 340px;
   white-space: nowrap;
   overflow: hidden;
@@ -51295,6 +51370,28 @@ styled.div`
   /* max-width: 320px; */
   white-space: pre-line;
 `;
+const Label$1 = styled.label`
+  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
+  font-weight: 400;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+  margin-right: 10px; 
+  z-index: 2;
+  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};  
+  background-color: ${props => props.showLabelOnTop ? 'white' : 'transparent'} ;
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : '24px'};
+  left: ${props => props.isFocused || props.hasValue ? '23px' : '14px'};
+  transform: translateY(-50%);  
+  transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: 4px;
+  &:hover {
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
 
 const DialogOverlay = styled.div`
   position: fixed;
@@ -51519,6 +51616,12 @@ const OverlayDropdown = _ref => {
     hoverColor = '#E6F0F0',
     dropdownMaxHeight = '600px',
     width = '100%',
+    label,
+    labelEmptyValue,
+    showLabelOnTop,
+    placeHolder,
+    labelColor,
+    placeHolderColor,
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);
@@ -51589,6 +51692,7 @@ const OverlayDropdown = _ref => {
     return null;
   };
   const selected = findSelectedItem();
+  const hasValue = !!selected;
 
   // Tooltip logic for long string
   const getDisplayText = text => {
@@ -51702,10 +51806,42 @@ const OverlayDropdown = _ref => {
     setOpen(prev => !prev);
   };
   const dataToRender = getDataWithLastDefined();
+  const getLabel = () => {
+    if (!showLabelOnTop && open) {
+      return "";
+    }
+    if (hasValue) {
+      return label;
+    }
+    return labelEmptyValue;
+  };
+  const getRequired = () => {
+    if (!showLabelOnTop && open) {
+      return "";
+    }
+    if (!showLabelOnTop && !label && hasValue) {
+      return "";
+    }
+    if (required) {
+      return /*#__PURE__*/React$1.createElement("span", {
+        style: {
+          color: "red"
+        }
+      }, "*");
+    }
+    return "";
+  };
   return /*#__PURE__*/React$1.createElement(DropdownContainer, {
     width: width,
     ref: containerRef
-  }, /*#__PURE__*/React$1.createElement(DropdownButton, {
+  }, /*#__PURE__*/React$1.createElement(Label$1, {
+    className: "Label",
+    isFocused: open,
+    labelColor: labelColor,
+    hasValue: hasValue,
+    disabled: disabled,
+    showLabelOnTop: showLabelOnTop
+  }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(DropdownButton, {
     ref: buttonRef,
     onClick: toggleDropdown,
     disabled: disabled,
@@ -51713,13 +51849,9 @@ const OverlayDropdown = _ref => {
     type: "button"
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),
-    onMouseLeave: () => setHoveredText(null)
-  }, selected ? getDisplayText(selected.label) : 'Choose Overlay', required && /*#__PURE__*/React$1.createElement("span", {
-    style: {
-      color: 'red',
-      marginLeft: '2px'
-    }
-  }, "*")), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+    onMouseLeave: () => setHoveredText(null),
+    color: !selected && open ? placeHolderColor : "inherit"
+  }, selected ? getDisplayText(selected.label) : open ? placeHolder : ''), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"