sag_components 2.0.0-beta103 → 2.0.0-beta104

package/dist/index.esm.js

@@ -416,21 +416,19 @@ const RedDot = ({
   fill: "#F00021"
 }));
 
-const CalendarInOpen = () => /*#__PURE__*/React$1.createElement("svg", {
-  width: "21",
-  height: "21",
-  viewBox: "0 0 21 21",
+const CalendarInOpen = ({
+  width = "16",
+  height = "17",
+  fill = "#726F6F"
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 16 17",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("rect", {
-  width: "21",
-  height: "21",
-  rx: "4",
-  fill: "#229E38",
-  fillOpacity: "0.1"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M7.625 5C7.8125 5 8 5.1875 8 5.375V6.5H12.5V5.375C12.5 5.1875 12.6641 5 12.875 5C13.0625 5 13.25 5.1875 13.25 5.375V6.5H14C14.8203 6.5 15.5 7.17969 15.5 8V8.75V9.5V15.5C15.5 16.3438 14.8203 17 14 17H6.5C5.65625 17 5 16.3438 5 15.5V9.5V8.75V8C5 7.17969 5.65625 6.5 6.5 6.5H7.25V5.375C7.25 5.1875 7.41406 5 7.625 5ZM14.75 9.5H5.75V15.5C5.75 15.9219 6.07812 16.25 6.5 16.25H14C14.3984 16.25 14.75 15.9219 14.75 15.5V9.5ZM14 7.25H6.5C6.07812 7.25 5.75 7.60156 5.75 8V8.75H14.75V8C14.75 7.60156 14.3984 7.25 14 7.25Z",
-  fill: "#066768"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M5.375 2.7002C5.5625 2.7002 5.75 2.87327 5.75 3.04635V4.08481H10.25V3.04635C10.25 2.87327 10.4141 2.7002 10.625 2.7002C10.8125 2.7002 11 2.87327 11 3.04635V4.08481H11.75C12.5703 4.08481 13.25 4.71222 13.25 5.46943V6.16173V6.85404V12.3925C13.25 13.1714 12.5703 13.7771 11.75 13.7771H4.25C3.40625 13.7771 2.75 13.1714 2.75 12.3925V6.85404V6.16173V5.46943C2.75 4.71222 3.40625 4.08481 4.25 4.08481H5V3.04635C5 2.87327 5.16406 2.7002 5.375 2.7002ZM12.5 6.85404H10.0625V8.41173H12.5V6.85404ZM12.5 9.10404H10.0625V10.8348H12.5V9.10404ZM12.5 11.5271H10.0625V13.0848H11.75C12.1484 13.0848 12.5 12.7819 12.5 12.3925V11.5271ZM9.3125 10.8348V9.10404H6.6875V10.8348H9.3125ZM6.6875 11.5271V13.0848H9.3125V11.5271H6.6875ZM5.9375 10.8348V9.10404H3.5V10.8348H5.9375ZM3.5 11.5271V12.3925C3.5 12.7819 3.82812 13.0848 4.25 13.0848H5.9375V11.5271H3.5ZM3.5 8.41173H5.9375V6.85404H3.5V8.41173ZM6.6875 8.41173H9.3125V6.85404H6.6875V8.41173ZM11.75 4.77712H4.25C3.82812 4.77712 3.5 5.10164 3.5 5.46943V6.16173H12.5V5.46943C12.5 5.10164 12.1484 4.77712 11.75 4.77712Z",
+  fill: fill
 }));
 
 const Calendar = () => /*#__PURE__*/React$1.createElement("svg", {
@@ -23921,22 +23919,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -34363,6 +34360,7 @@ const Modal = styled.div`
   display: flex;
   gap: 20px;
   padding: 20px;
+  margin-top: 50px;
   flex-direction: column;
   background-color: white;
   border-radius: 12px;
@@ -34482,15 +34480,10 @@ const CalendarWrapper = styled.div`
 
 /* ───────────────────────── header */
 const Header$2 = styled.h4`
-  margin: 0 0 12px;
+  margin: 0 0 20px;
   color: ${c.text};
-
-  /* Content/P3 Regular */
-  font-family: Poppins;
   font-size: 12px;
-  font-style: normal;
   font-weight: 400;
-  line-height: normal;
 `;
 
 /* ───────────────────────── grid */
@@ -34642,20 +34635,24 @@ const WeeksCalendar = ({
       onClick: () => handleCellClick(wk)
     }, wk);
   })), /*#__PURE__*/React$1.createElement(Footer, null, /*#__PURE__*/React$1.createElement(Button$1, {
+    text: "CLEAR",
     type: "secondary",
     disabled: !hasSelection,
-    onClick: clearAll,
-    text: "CLEAR"
+    borderRadius: "8px",
+    onClick: clearAll
   }), /*#__PURE__*/React$1.createElement(Button$1, {
     type: "primary",
+    text: "APPLY",
     disabled: !hasSelection,
+    borderRadius: "8px",
+    borderColor: backgroundColor,
     backgroundColor: backgroundColor,
+    hoverBorderColor: hoverBackgroundColor,
     hoverBackgroundColor: hoverBackgroundColor,
     hoverTextColor: "#212121",
     onClick: () => {
       if (hasSelection) onApply(startWeek, endWeek ?? startWeek);
-    },
-    text: "APPLY"
+    }
   }), onCancel && /*#__PURE__*/React$1.createElement("button", {
     style: {
       display: "none"
@@ -34678,9 +34675,10 @@ const WeeksPickerContainer = styled.div`
   margin-bottom: ${props => props.withMarginBottom ? '10px' : '0'};
   width: ${props => props.width || '100%'};
   height: ${props => props.height || 'auto'};
+  font-family: "Poppins", sans-serif;
 `;
 const StyledInput$1 = styled.input`
-  padding: 20px;
+  padding: 16px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
   border: none;
@@ -34695,8 +34693,8 @@ const StyledInput$1 = styled.input`
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
 const StyledLabel = styled.label`
-  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
-  width: ${props => props.isFocused || props.hasValue ? 'auto' : '150px'};
+  font-size: 14px;
+  /* width: ${props => props.isFocused || props.hasValue ? 'auto' : '150px'}; */
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
@@ -34720,11 +34718,15 @@ styled.div`
   margin-top: 5px;
 `;
 const OptionsContainer = styled.div`
-  position: relative;
+  position: absolute;
   z-index: 999;
+  ${props => props.showAbove ? `
+    bottom: 100%;
+  ` : `
+    top: 100%;
+  `}
 `;
 const InputContainer$1 = styled.div`
-  position: relative;
   display: flex;       
   flex-wrap: nowrap; 
   justify-content: flex-start;
@@ -34737,7 +34739,6 @@ const InputContainer$1 = styled.div`
   box-sizing: border-box;
   background-color: transparent;    
   border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
-  font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   border-radius: 12px;
@@ -34782,8 +34783,46 @@ const WeeksPicker = _ref => {
   } = _ref;
   const [value, setValue] = useState("");
   const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const optionsRef = useRef(null);
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
+  const [showAbove, setShowAbove] = useState(false);
+
+  // Handle click outside to close calendar
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle positioning when calendar opens
+  useEffect(() => {
+    if (isOpen && optionsRef.current && containerRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const calendarHeight = 400; // Approximate height of the calendar
+
+      // Check if there's enough space below
+      const spaceBelow = viewportHeight - containerRect.bottom;
+      const spaceAbove = containerRect.top;
+
+      // Show above if there's not enough space below but enough space above
+      if (spaceBelow < calendarHeight && spaceAbove > calendarHeight) {
+        setShowAbove(true);
+      } else {
+        setShowAbove(false);
+      }
+    }
+  }, [isOpen]);
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
@@ -34809,11 +34848,16 @@ const WeeksPicker = _ref => {
     setIsFocused(false);
   };
   return /*#__PURE__*/React$1.createElement(WeeksPickerContainer, {
+    ref: containerRef,
     width: width,
     height: height,
     withMarginBottom: withMarginBottom
   }, /*#__PURE__*/React$1.createElement(InputContainer$1, {
-    onClick: handleToggle,
+    onClick: () => {
+      if (!disabled) {
+        handleToggle();
+      }
+    },
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -34823,7 +34867,11 @@ const WeeksPicker = _ref => {
     borderColorFocus: borderColorFocus
   }, /*#__PURE__*/React$1.createElement(StyledLabel, {
     className: "StyledLabel",
-    onClick: handleFocus,
+    onClick: () => {
+      if (!disabled) {
+        handleFocus();
+      }
+    },
     isFocused: isFocused,
     hasValue: value,
     disabled: disabled,
@@ -34847,8 +34895,13 @@ const WeeksPicker = _ref => {
     borderColor: borderColor,
     textColor: textColor
   }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
-    onClick: handleToggle
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), isOpen && /*#__PURE__*/React$1.createElement(OptionsContainer, null, /*#__PURE__*/React$1.createElement(WeeksCalendar, {
+    onClick: disabled ? undefined : handleToggle
+  }, /*#__PURE__*/React$1.createElement(CalendarInOpen, {
+    fill: isOpen === true ? "#726F6F" : "#B1B1B1"
+  }))), isOpen && /*#__PURE__*/React$1.createElement(OptionsContainer, {
+    ref: optionsRef,
+    showAbove: showAbove
+  }, /*#__PURE__*/React$1.createElement(WeeksCalendar, {
     year: year,
     backgroundColor: borderColorFocus,
     hoverBackgroundColor: hoverColor,
@@ -37365,6 +37418,10 @@ const tooltipStyles = css`
         top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px));
         left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
         transform: translateX(-50%);
+        
+        /* Add delay */
+        opacity: 0;
+        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
     }
     
     /* Tooltip arrow */
@@ -37378,6 +37435,16 @@ const tooltipStyles = css`
         border-top-color: white;
         z-index: 1001;
         pointer-events: none;
+        
+        /* Add delay */
+        opacity: 0;
+        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+    }
+    
+    @keyframes showTooltip {
+        to {
+            opacity: 1;
+        }
     }
 `;
 const StyledTableBody = styled.tbody`
@@ -37467,6 +37534,10 @@ const TableCell = styled.td`
         top: calc(var(--cell-top, 0px) - var(--cell-offset, 40px));
         left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
         transform: translateX(-50%);
+        
+        /* Add delay */
+        opacity: 0;
+        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
     }
     
     /* Tooltip arrow */
@@ -37480,6 +37551,10 @@ const TableCell = styled.td`
         border-top-color: white;
         z-index: 1001;
         pointer-events: none;
+        
+        /* Add delay */
+        opacity: 0;
+        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
     }
     
     &[title] {