willba-component-library 0.2.60 → 0.2.62

package/lib/core/components/calendar/utils/handleCalendarModifiers.d.ts

@@ -25,11 +25,8 @@ export declare const handleCalendarModifiers: ({ newDisableCalendarDates, calend
         from: Date | undefined;
     }[];
     noActiveSelectionStart: never[] | Date;
+    noActiveSelectionMid: Date[];
     noActiveSelectionEnd: never[] | Date;
-    noActiveSelectionMid: {
-        from: Date;
-        to: Date;
-    }[];
     checkoutOptionsMid: {
         after: Date;
         before: Date;

package/lib/index.esm.js

@@ -527,7 +527,7 @@ function useTheme(_a) {
     return themePalette;
 }
 
-var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n  --will-error: #d32f2f;\n\n  /*Color mix*/\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 20%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
+var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n  --will-error: #d32f2f;\n\n  /*Color mix*/\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
 styleInject(css_248z$c);
 
 var useAwaitRender = function () {
@@ -3758,86 +3758,6 @@ function differenceInCalendarWeeks(dirtyDateLeft, dirtyDateRight, options) {
   return Math.round((timestampLeft - timestampRight) / MILLISECONDS_IN_WEEK$4);
 }
 
-// for accurate equality comparisons of UTC timestamps that end up
-// having the same representation in local time, e.g. one hour before
-// DST ends vs. the instant that DST ends.
-function compareLocalAsc(dateLeft, dateRight) {
-  var diff = dateLeft.getFullYear() - dateRight.getFullYear() || dateLeft.getMonth() - dateRight.getMonth() || dateLeft.getDate() - dateRight.getDate() || dateLeft.getHours() - dateRight.getHours() || dateLeft.getMinutes() - dateRight.getMinutes() || dateLeft.getSeconds() - dateRight.getSeconds() || dateLeft.getMilliseconds() - dateRight.getMilliseconds();
-  if (diff < 0) {
-    return -1;
-  } else if (diff > 0) {
-    return 1;
-    // Return 0 if diff is 0; return NaN if diff is NaN
-  } else {
-    return diff;
-  }
-}
-
-/**
- * @name differenceInDays
- * @category Day Helpers
- * @summary Get the number of full days between the given dates.
- *
- * @description
- * Get the number of full day periods between two dates. Fractional days are
- * truncated towards zero.
- *
- * One "full day" is the distance between a local time in one day to the same
- * local time on the next or previous day. A full day can sometimes be less than
- * or more than 24 hours if a daylight savings change happens between two dates.
- *
- * To ignore DST and only measure exact 24-hour periods, use this instead:
- * `Math.floor(differenceInHours(dateLeft, dateRight)/24)|0`.
- *
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of full days according to the local timezone
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many full days are between
- * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
- * const result = differenceInDays(
- *   new Date(2012, 6, 2, 0, 0),
- *   new Date(2011, 6, 2, 23, 0)
- * )
- * //=> 365
- * // How many full days are between
- * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
- * const result = differenceInDays(
- *   new Date(2011, 6, 3, 0, 1),
- *   new Date(2011, 6, 2, 23, 59)
- * )
- * //=> 0
- * // How many full days are between
- * // 1 March 2020 0:00 and 1 June 2020 0:00 ?
- * // Note: because local time is used, the
- * // result will always be 92 days, even in
- * // time zones where DST starts and the
- * // period has only 92*24-1 hours.
- * const result = differenceInDays(
- *   new Date(2020, 5, 1),
- *   new Date(2020, 2, 1)
- * )
-//=> 92
- */
-function differenceInDays(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var sign = compareLocalAsc(dateLeft, dateRight);
-  var difference = Math.abs(differenceInCalendarDays(dateLeft, dateRight));
-  dateLeft.setDate(dateLeft.getDate() - sign * difference);
-
-  // Math.abs(diff in full days - diff in calendar days) === 1 if last calendar day is not full
-  // If so, result must be decreased by 1 in absolute value
-  var isLastDayNotFull = Number(compareLocalAsc(dateLeft, dateRight) === -sign);
-  var result = sign * (difference - isLastDayNotFull);
-  // Prevent negative zero
-  return result === 0 ? 0 : result;
-}
-
 /**
  * @name endOfDay
  * @category Day Helpers
@@ -3890,6 +3810,62 @@ function endOfMonth(dirtyDate) {
   return date;
 }
 
+/**
+ * @name eachDayOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of dates within the specified time interval.
+ *
+ * @description
+ * Return the array of dates within the specified time interval.
+ *
+ * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
+ * @param {Object} [options] - an object with options.
+ * @param {Number} [options.step=1] - the step to increment by. The value should be more than 1.
+ * @returns {Date[]} the array with starts of days from the day of the interval start to the day of the interval end
+ * @throws {TypeError} 1 argument required
+ * @throws {RangeError} `options.step` must be a number greater than 1
+ * @throws {RangeError} The start of an interval cannot be after its end
+ * @throws {RangeError} Date in interval cannot be `Invalid Date`
+ *
+ * @example
+ * // Each day between 6 October 2014 and 10 October 2014:
+ * const result = eachDayOfInterval({
+ *   start: new Date(2014, 9, 6),
+ *   end: new Date(2014, 9, 10)
+ * })
+ * //=> [
+ * //   Mon Oct 06 2014 00:00:00,
+ * //   Tue Oct 07 2014 00:00:00,
+ * //   Wed Oct 08 2014 00:00:00,
+ * //   Thu Oct 09 2014 00:00:00,
+ * //   Fri Oct 10 2014 00:00:00
+ * // ]
+ */
+function eachDayOfInterval(dirtyInterval, options) {
+  var _options$step;
+  requiredArgs(1, arguments);
+  var interval = dirtyInterval || {};
+  var startDate = toDate(interval.start);
+  var endDate = toDate(interval.end);
+  var endTime = endDate.getTime();
+
+  // Throw an exception if start date is after end date or if any date is `Invalid Date`
+  if (!(startDate.getTime() <= endTime)) {
+    throw new RangeError('Invalid interval');
+  }
+  var dates = [];
+  var currentDate = startDate;
+  currentDate.setHours(0, 0, 0, 0);
+  var step = Number((_options$step = options === null || options === void 0 ? void 0 : options.step) !== null && _options$step !== void 0 ? _options$step : 1);
+  if (step < 1 || isNaN(step)) throw new RangeError('`options.step` must be a number greater than 1');
+  while (currentDate.getTime() <= endTime) {
+    dates.push(toDate(currentDate));
+    currentDate.setDate(currentDate.getDate() + step);
+    currentDate.setHours(0, 0, 0, 0);
+  }
+  return dates;
+}
+
 /**
  * @name startOfMonth
  * @category Month Helpers
@@ -6479,6 +6455,58 @@ function isSameYear(dirtyDateLeft, dirtyDateRight) {
   return dateLeft.getFullYear() === dateRight.getFullYear();
 }
 
+/**
+ * @name isWithinInterval
+ * @category Interval Helpers
+ * @summary Is the given date within the interval?
+ *
+ * @description
+ * Is the given date within the interval? (Including start and end.)
+ *
+ * @param {Date|Number} date - the date to check
+ * @param {Interval} interval - the interval to check
+ * @returns {Boolean} the date is within the interval
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} The start of an interval cannot be after its end
+ * @throws {RangeError} Date in interval cannot be `Invalid Date`
+ *
+ * @example
+ * // For the date within the interval:
+ * isWithinInterval(new Date(2014, 0, 3), {
+ *   start: new Date(2014, 0, 1),
+ *   end: new Date(2014, 0, 7)
+ * })
+ * //=> true
+ *
+ * @example
+ * // For the date outside of the interval:
+ * isWithinInterval(new Date(2014, 0, 10), {
+ *   start: new Date(2014, 0, 1),
+ *   end: new Date(2014, 0, 7)
+ * })
+ * //=> false
+ *
+ * @example
+ * // For date equal to interval start:
+ * isWithinInterval(date, { start, end: date }) // => true
+ *
+ * @example
+ * // For date equal to interval end:
+ * isWithinInterval(date, { start: date, end }) // => true
+ */
+function isWithinInterval(dirtyDate, interval) {
+  requiredArgs(2, arguments);
+  var time = toDate(dirtyDate).getTime();
+  var startTime = toDate(interval.start).getTime();
+  var endTime = toDate(interval.end).getTime();
+
+  // Throw an exception if start date is after end date or if any date is `Invalid Date`
+  if (!(startTime <= endTime)) {
+    throw new RangeError('Invalid interval');
+  }
+  return time >= startTime && time <= endTime;
+}
+
 /**
  * @name subDays
  * @category Day Helpers
@@ -11016,7 +11044,8 @@ var calendarSelectionRules = function (_a) {
         return setCalendarRange(undefined);
     }
     if (
-    // 2. If selected "start" is after "range context end", clear selection and display error
+    // 2. If selected "start" is after "range context end", clear selection and display error.
+    // Also, if there are unavailable dates between the rangeContext "start" and "end", do not allow a fully overlapping selection.
     (rangeFrom && rangeContextTo && isAfter(rangeFrom, rangeContextTo)) ||
         (calendarRangeFrom &&
             calendarRangeTo &&
@@ -11037,6 +11066,17 @@ var calendarSelectionRules = function (_a) {
     }
     // 5. Handle gap selection backwards and forwards
     if (
+    // In the range context case, every date selection that is after selected "start" last checkout,
+    // clear selection and prompt error
+    rangeContext &&
+        rangeTo &&
+        (checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut) &&
+        isAfter(rangeTo, endOfDay(checkOutRange.lastCheckOut)) &&
+        isAfter(rangeTo, endOfDay(rangeContext.to))) {
+        setCalendarHasError && setCalendarHasError(true);
+        return setCalendarRange(undefined);
+    }
+    if (
     // Enforce on every date selection before current "start", mark as "start" selection
     rangeFrom &&
         calendarRangeFrom &&
@@ -11111,62 +11151,85 @@ var disabledDatesByPage = function (_a) {
 var handleCalendarModifiers = function (_a) {
     var _b;
     var newDisableCalendarDates = _a.newDisableCalendarDates, calendarRange = _a.calendarRange, disabledDatesByPage = _a.disabledDatesByPage, disabledDates = _a.disabledDates, overlappingDate = _a.overlappingDate, rangeContext = _a.rangeContext, firstPossibleRangeContextCheckIn = _a.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _a.lastPossibleRangeContextCheckOut, findFirstPossibleRangeContextCheckIn = _a.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _a.findLastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _a.currentSelectionLastCheckoutDate;
+    // Parse data
+    var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
+    var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
+    var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
+    var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
     // Create range for range context middle selection and current overlapping selection
-    var rangeContextMiddleSelection = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to)
-        ? Array.from({ length: differenceInDays(rangeContext.to, rangeContext.from) - 1 }, function (_, i) { return ({
-            from: addDays(rangeContext.from, i + 1),
-            to: addDays(rangeContext.from, i + 1),
-        }); }).filter(function (date) {
-            return !(((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
-                isEqual(endOfDay(calendarRange.from), endOfDay(date.from))) ||
-                ((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
-                    isEqual(endOfDay(calendarRange.to), endOfDay(date.from))));
+    var rangeContextMiddleSelection = rangeContextFrom && rangeContextTo
+        ? eachDayOfInterval({
+            start: addDays(rangeContextFrom, 1),
+            end: addDays(rangeContextTo, -1),
+        }).filter(function (date) {
+            return !((calendarRangeFrom &&
+                isEqual(endOfDay(calendarRangeFrom), endOfDay(date))) ||
+                (calendarRangeTo &&
+                    isEqual(endOfDay(calendarRangeTo), endOfDay(date))) ||
+                (calendarRangeFrom &&
+                    !calendarRangeTo &&
+                    (currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut) &&
+                    isAfter(calendarRangeFrom, rangeContextFrom) &&
+                    isBefore(currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut, rangeContextTo) &&
+                    isWithinInterval(date, {
+                        start: currentSelectionLastCheckoutDate.checkIn,
+                        end: currentSelectionLastCheckoutDate.lastCheckOut,
+                    })) ||
+                (calendarRangeFrom &&
+                    calendarRangeTo &&
+                    isAfter(calendarRangeFrom, rangeContextFrom) &&
+                    isBefore(calendarRangeTo, rangeContextTo) &&
+                    isWithinInterval(date, {
+                        start: calendarRangeFrom,
+                        end: calendarRangeTo,
+                    })));
         })
         : [];
+    console.log();
     return {
         booked: disabledDatesByPage.length
             ? disabledDatesByPage
             : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
                 ? __spreadArray$1(__spreadArray$1(__spreadArray$1([], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
                 ? __spreadArray$1(__spreadArray$1(__spreadArray$1([], __read(newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [],
-        disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
-            ? [{ after: calendarRange.from }]
+        disabledAfterCheckIn: calendarRangeFrom
+            ? [{ after: calendarRangeFrom }]
             : [],
-        overlappingDate: __spreadArray$1([], __read((!(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && !!(overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
+        overlappingDate: __spreadArray$1([], __read((!calendarRangeFrom && !!(overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
             ? overlappingDate.map(function (date) { return ({ from: date.from }); })
             : [])), false),
-        noActiveSelectionStart: (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) &&
-            !(((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
-                isEqual(endOfDay(rangeContext.from), endOfDay(calendarRange.from))) ||
-                ((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
-                    isEqual(endOfDay(rangeContext.from), endOfDay(calendarRange.to))))
-            ? rangeContext.from
-            : [],
-        noActiveSelectionEnd: (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) &&
-            !(((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
-                isEqual(endOfDay(rangeContext.to), endOfDay(calendarRange.from))) ||
-                ((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
-                    isEqual(endOfDay(rangeContext.to), endOfDay(calendarRange.to))))
-            ? rangeContext.to
+        noActiveSelectionStart: rangeContextFrom &&
+            !(calendarRangeFrom &&
+                rangeContextFrom &&
+                isEqual(endOfDay(rangeContextFrom), endOfDay(calendarRangeFrom)))
+            ? rangeContextFrom
             : [],
         noActiveSelectionMid: __spreadArray$1([], __read((rangeContextMiddleSelection.length
             ? rangeContextMiddleSelection
             : [])), false),
-        checkoutOptionsMid: __spreadArray$1([], __read(((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
-            !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
+        noActiveSelectionEnd: rangeContextTo &&
+            !(calendarRangeFrom &&
+                rangeContextTo &&
+                isEqual(endOfDay(rangeContextTo), endOfDay(calendarRangeFrom)))
+            ? rangeContextTo
+            : [],
+        checkoutOptionsMid: __spreadArray$1([], __read((calendarRangeFrom &&
+            !calendarRangeTo &&
             (currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut)
             ? [
                 {
-                    after: calendarRange.from,
+                    after: calendarRangeFrom,
                     before: addDays(currentSelectionLastCheckoutDate.lastCheckOut, 1),
                 },
             ]
             : [])), false),
-        checkInOnly: __spreadArray$1([], __read(((findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) && rangeContext
+        checkInOnly: __spreadArray$1([], __read(((findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) &&
+            rangeContext &&
+            rangeContextFrom
             ? [
                 {
                     from: findFirstPossibleRangeContextCheckIn.checkIn,
-                    to: addDays(rangeContext.from, -1),
+                    to: addDays(rangeContextFrom, -1),
                 },
             ]
             : [])), false),
@@ -11245,12 +11308,14 @@ var checkForContinuousSelection = function (_a) {
         ? isAfter(endOfDay(calendarRangeTo), endOfDay(rangeContextFrom)) ||
             isEqual(endOfDay(calendarRangeTo), endOfDay(rangeContextFrom))
         : null;
-    if ((rangeContext &&
-        calendarRangeFrom &&
-        !startIsEqualOrBeforeRangeContextEnd) ||
-        (rangeContext && calendarRangeTo && !endIsEqualOrAfterRangeContextStart)) {
-        setCalendarHasError && !calendarHasError && setCalendarHasError(true);
-    }
+    useEffect(function () {
+        if ((rangeContext &&
+            calendarRangeFrom &&
+            !startIsEqualOrBeforeRangeContextEnd) ||
+            (rangeContext && calendarRangeTo && !endIsEqualOrAfterRangeContextStart)) {
+            setCalendarHasError && !calendarHasError && setCalendarHasError(true);
+        }
+    });
 };
 
 var useCalendarTooltips = function (_a) {