@activecollab/components 2.0.272 → 2.0.273

package/dist/index.js

@@ -14262,7 +14262,7 @@
       _useState2 = _slicedToArray(_useState, 2),
       fromDate = _useState2[0],
       setFromDate = _useState2[1];
-    var _useState3 = React.useState(moment__default["default"].utc(to)),
+    var _useState3 = React.useState(to ? moment__default["default"].utc(to) : null),
       _useState4 = _slicedToArray(_useState3, 2),
       toDate = _useState4[0],
       setToDate = _useState4[1];
@@ -14285,9 +14285,8 @@
         return [date.clone().startOf("year"), date.clone().endOf("year")];
       } else if (step === "range") {
         // For range step, calculate N days based on current selection
-        // Handle case where toDate is invalid or at epoch (1970)
-        var isToDateInvalid = !toDate.isValid() || toDate.year() === 1970;
-        var effectiveToDate = isToDateInvalid ? fromDate : toDate;
+        // Handle case where toDate is undefined
+        var effectiveToDate = !toDate ? fromDate : toDate;
         var daysDiff = effectiveToDate.diff(fromDate, "days");
 
         // If same day selected (daysDiff = 0), move by 1 day
@@ -14300,14 +14299,15 @@
     }, [fromDate, toDate, period, step]);
     var getDateFormatted = React.useMemo(function () {
       if (formatCallback) {
-        return formatCallback(fromDate, toDate);
+        return formatCallback(fromDate, toDate ? toDate : fromDate);
       }
       var actualYear = moment__default["default"]().year();
       var showWeekOrCustomDateFormat = function showWeekOrCustomDateFormat(start, end) {
+        var endDate = end ? end : start;
         if (start.year() === actualYear && end.year() === actualYear) {
-          return start.utc().format("MMM DD") + " - " + end.utc().format("MMM DD");
+          return start.utc().format("MMM DD") + " - " + endDate.utc().format("MMM DD");
         } else {
-          return start.utc().format("MMM DD YYYY") + " - " + end.utc().format("MMM DD YYYY");
+          return start.utc().format("MMM DD YYYY") + " - " + endDate.utc().format("MMM DD YYYY");
         }
       };
       if (step === "daily") {
@@ -14326,8 +14326,7 @@
       } else if (step === "yearly") {
         return fromDate.utc().format("YYYY");
       } else if (step === "range") {
-        // For range step, if toDate is invalid or at epoch (1970), only show fromDate
-        if (!toDate.isValid() || toDate.year() === 1970) {
+        if (!toDate) {
           if (fromDate.year() === actualYear) {
             return fromDate.utc().format("MMM DD");
           }
@@ -14350,19 +14349,27 @@
       return step;
     }, [step]);
     var onDatePickerChange = React.useCallback(function (dates) {
+      console.log("dates: ", dates);
       var fromDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.from) * 1000);
-      var toDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.to) * 1000);
+      var toDateTemp = dates !== null && dates !== void 0 && dates.to ? moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.to) * 1000) : null;
       setFromDate(fromDateTemp);
       setToDate(toDateTemp);
-      if (onChange && moment__default["default"].isMoment(fromDateTemp) && moment__default["default"].isMoment(toDateTemp)) {
+      if (onChange && step !== "range" && moment__default["default"].isMoment(fromDateTemp) && moment__default["default"].isMoment(toDateTemp)) {
         onChange(fromDateTemp.toDate(), toDateTemp.toDate());
       }
-    }, [onChange, setFromDate, setToDate]);
+    }, [onChange, step]);
+    var onToggleDatePicker = React.useCallback(function (open) {
+      if (step === "range" && !open) {
+        var toDateTemp = toDate ? toDate : fromDate;
+        setToDate(toDateTemp);
+        onChange === null || onChange === void 0 || onChange(fromDate.toDate(), toDateTemp.toDate());
+      }
+    }, [fromDate, onChange, step, toDate]);
     var isAfterMaxDate = React.useMemo(function () {
-      return moment__default["default"].isMoment(maxValue) && moment__default["default"](moment__default["default"].utc(maxValue).format("YYYY-MM-DD")).isSameOrBefore(toDate.utc().format("YYYY-MM-DD"));
+      return moment__default["default"].isMoment(maxValue) && toDate && moment__default["default"](moment__default["default"].utc(maxValue).format("YYYY-MM-DD")).isSameOrBefore(toDate.utc().format("YYYY-MM-DD"));
     }, [maxValue, toDate]);
     var isBeforeMinDate = React.useMemo(function () {
-      return moment__default["default"].isMoment(minValue) && moment__default["default"].utc(moment__default["default"].utc(minValue).format("YYYY-MM-DD")).isSameOrAfter(toDate.utc().format("YYYY-MM-DD"));
+      return moment__default["default"].isMoment(minValue) && toDate && moment__default["default"].utc(moment__default["default"].utc(minValue).format("YYYY-MM-DD")).isSameOrAfter(toDate.utc().format("YYYY-MM-DD"));
     }, [minValue, toDate]);
     React.useEffect(function () {
       if (isBeforeMinDate) {
@@ -14414,9 +14421,14 @@
     }, [isBeforeMinDate, getDatesByPeriod, onChange, onBack]);
     React.useEffect(function () {
       setFromDate(moment__default["default"].utc(from));
-      setToDate(moment__default["default"].utc(to));
+      setToDate(to ? moment__default["default"].utc(to) : null);
     }, [from, to]);
     var dateStepperWidth = function dateStepperWidth(fromDay, toDay, range) {
+      if (range === "range") {
+        return {
+          minWidth: "102px"
+        };
+      }
       if (fromDay.utc().year() !== moment__default["default"].utc().year() || toDay.utc().year() !== moment__default["default"].utc().year()) {
         switch (range) {
           case "daily":
@@ -14483,6 +14495,7 @@
       style: dateStepperWidth(fromDate, toDate, step)
     }, withDatePicker && step !== "yearly" ? /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       month: defaultMonth,
+      onCalendarToggle: onToggleDatePicker,
       target: /*#__PURE__*/React__default["default"].createElement(StyledButton$1, {
         $step: step,
         type: "button"
@@ -14490,7 +14503,7 @@
       mode: datePickerMode,
       selected: {
         from: moment__default["default"].utc(fromDate).unix(),
-        to: moment__default["default"].utc(toDate).unix()
+        to: toDate ? moment__default["default"].utc(toDate).unix() : null
       },
       onChange: onDatePickerChange,
       firstDayOfWeek: period === "week" ? 0 : 1,