sag_components 2.0.0-beta342 → 2.0.0-beta344

package/dist/index.esm.js

@@ -636,21 +636,41 @@ const ChervronLeftIcon = _ref => {
 
 const CalendarIcon = _ref => {
   let {
-    clicked,
     width = "14",
     height = "14",
-    fill = "#212121",
-    color
+    color = "#212121"
   } = _ref;
   return /*#__PURE__*/React$1.createElement("svg", {
     width: width,
     height: height,
-    viewBox: "0 0 11 12",
+    viewBox: "0 0 24 24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H7.3125V6.1875H9.75V4.5ZM9.75 6.9375H7.3125V8.8125H9.75V6.9375ZM9.75 9.5625H7.3125V11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V9.5625ZM6.5625 8.8125V6.9375H3.9375V8.8125H6.5625ZM3.9375 9.5625V11.25H6.5625V9.5625H3.9375ZM3.1875 8.8125V6.9375H0.75V8.8125H3.1875ZM0.75 9.5625V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H3.1875V9.5625H0.75ZM0.75 6.1875H3.1875V4.5H0.75V6.1875ZM3.9375 6.1875H6.5625V4.5H3.9375V6.1875ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
-    fill: color || fill
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React$1.createElement("rect", {
+    x: "3",
+    y: "4",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2"
+  }), /*#__PURE__*/React$1.createElement("line", {
+    x1: "16",
+    y1: "2",
+    x2: "16",
+    y2: "6"
+  }), /*#__PURE__*/React$1.createElement("line", {
+    x1: "8",
+    y1: "2",
+    x2: "8",
+    y2: "6"
+  }), /*#__PURE__*/React$1.createElement("line", {
+    x1: "3",
+    y1: "10",
+    x2: "21",
+    y2: "10"
   }));
 };
 
@@ -10238,9 +10258,12 @@ const DatePicker = ({
     if (value === '' || value === undefined) {
       setStartDate(null);
       setEndDate(null);
+      setCurrentStartDate(new Date());
     } else {
-      setStartDate(new Date(startDateValue));
+      const parsedStart = new Date(startDateValue);
+      setStartDate(parsedStart);
       setEndDate(new Date(endDateValue));
+      setCurrentStartDate(parsedStart);
     }
   }, [value, isOpen]);
   const renderDatePicker = () => {
@@ -10354,48 +10377,61 @@ const RangePicker = _ref => {
   const [startDateValue, setStartDateValue] = useState(null); // Added value state
   const [endDateValue, setEndDateValue] = useState(null); // Added value state
 
-  const [hoverInputContainer, setHoverInputContainer] = useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = useState(false);
-  const inputRef = useRef(null);
+  const containerRef = useRef(null);
   useEffect(() => {
     const handleClickOutside = event => {
-      if (inputRef.current && !inputRef.current.contains(event.target)) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsFocused(false);
+        setIsOpen(false);
       }
     };
-
-    // Add event listener for clicks on the document
     document.addEventListener('mousedown', handleClickOutside);
-
-    // Cleanup event listener on component unmount
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
   useEffect(() => {
-    if (selectedValue && selectedValue.includes('-')) {
-      const dateArray = selectedValue.split('-');
-      const startDate = new Date(dateArray[0]);
-      const endDate = new Date(dateArray[1]);
+    if (!selectedValue) return;
+    if (selectedValue.includes(' - ')) {
+      // DD/MM/YYYY - DD/MM/YYYY format
+      const parts = selectedValue.split(' - ');
+      if (parts.length !== 2) return;
+      const startDate = moment(parts[0].trim(), 'DD/MM/YYYY', true);
+      const endDate = moment(parts[1].trim(), 'DD/MM/YYYY', true);
+      if (!startDate.isValid() || !endDate.isValid()) return;
+      setStartDateValue(startDate.format('MM/DD/YYYY'));
+      setEndDateValue(endDate.format('MM/DD/YYYY'));
+      setValue(selectedValue);
+    } else if (selectedValue.includes('-')) {
+      // MM/DD/YYYY-MM/DD/YYYY format
+      const parts = selectedValue.split('-');
+      if (parts.length !== 2) return;
+      const startDate = new Date(parts[0].trim());
+      const endDate = new Date(parts[1].trim());
+      if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) return;
       setStartDateValue(moment(startDate).format('MM/DD/YYYY'));
       setEndDateValue(moment(endDate).format('MM/DD/YYYY'));
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  useEffect(() => {
-    if (!hoverInputContainer && !hoverOptionsContainer) {
-      setIsFocused(false);
-      setIsOpen(false);
-    }
-  }, [hoverInputContainer, hoverOptionsContainer]);
+  const getDisplayValue = val => {
+    if (!val) return '';
+    if (val.includes(' - ')) return val; // already DD/MM/YYYY - DD/MM/YYYY
+    const parts = val.split('-');
+    if (parts.length !== 2) return val;
+    const start = moment(parts[0].trim(), 'MM/DD/YYYY', true);
+    const end = moment(parts[1].trim(), 'MM/DD/YYYY', true);
+    if (!start.isValid() || !end.isValid()) return val;
+    return `${start.format('DD/MM/YYYY')} - ${end.format('DD/MM/YYYY')}`;
+  };
   const onChangeDate = (startDate, endDate) => {
     if (startDate && endDate) {
       setIsOpen(!isOpen);
       setIsFocused(false);
       setStartDateValue(startDate);
       setEndDateValue(endDate);
-      onChange(`${moment(startDate).format('MM/DD/YYYY')} - ${moment(endDate).format('MM/DD/YYYY')}`);
-      setValue(`${moment(startDate).format('MM/DD/YYYY')} - ${moment(endDate).format('MM/DD/YYYY')}`);
+      onChange(`${moment(startDate).format('MM/DD/YYYY')}-${moment(endDate).format('MM/DD/YYYY')}`);
+      setValue(`${moment(startDate).format('MM/DD/YYYY')}-${moment(endDate).format('MM/DD/YYYY')}`);
     }
   };
   const onChangeEvent = e => {
@@ -10420,6 +10456,7 @@ const RangePicker = _ref => {
   };
   return /*#__PURE__*/React$1.createElement(RangePickerContainer, {
     className: "RangePickerContainer",
+    ref: containerRef,
     onClick: handleFocus,
     width: width,
     height: height
@@ -10430,22 +10467,19 @@ const RangePicker = _ref => {
     disabled: disabled,
     textColor: textColor,
     borderColor: borderColor,
-    borderColorFocus: borderColorFocus,
-    onMouseEnter: () => setHoverInputContainer(true),
-    onMouseLeave: () => setHoverInputContainer(false)
+    borderColorFocus: borderColorFocus
   }, /*#__PURE__*/React$1.createElement(StyledLabel$3, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
-    hasValue: value,
+    hasValue: getDisplayValue(value),
     disabled: disabled,
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
   }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$3, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$6, {
     className: "StyledInput",
-    ref: inputRef,
-    value: value,
+    value: getDisplayValue(value),
     isFocused: isFocused,
     onChange: onChangeEvent,
     onFocus: handleFocus,
@@ -10468,9 +10502,7 @@ const RangePicker = _ref => {
     className: "Calendar",
     fill: calendarIconColor
   }))), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
-    className: "OptionsContainer",
-    onMouseEnter: () => setHoverOptionsContainer(true),
-    onMouseLeave: () => setHoverOptionsContainer(false)
+    className: "OptionsContainer"
   }, /*#__PURE__*/React$1.createElement(DatePicker, {
     className: "DatePicker",
     isOpen: isOpen,
@@ -42840,8 +42872,9 @@ const NotAvailableText = styled.div`
   line-height: normal;
   cursor: pointer;
   padding: 1px 2px;
-  border: 1px solid transparent;
+  border: 1px solid #D1D5DB;
   border-radius: 4px;
+  background: #F3F4F6;
 
   &:hover {
     border-color: rgba(0, 0, 0, 0.6);