pixel-react 1.7.4 → 1.7.5

package/lib/index.esm.js

@@ -3180,9 +3180,9 @@ const OptionCard = ({
   const optionCardRef = useRef(null);
   useEffect(() => {
     if (optionCardRef?.current) {
-      const rect = optionCardRef?.current?.getBoundingClientRect();
-      setOptionsHeight(rect?.height);
-      setOptionsWidth(rect?.width);
+      const rect = optionCardRef.current.getBoundingClientRect();
+      setOptionsHeight(rect.height);
+      setOptionsWidth(rect.width);
     }
   }, []);
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
@@ -3195,7 +3195,7 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + 20,
+          top: menuPosition.top + menuPosition.height + 7,
           left: menuPosition.left - 4
         };
       case 'left':
@@ -3206,23 +3206,25 @@ const OptionCard = ({
       case 'right':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left + 20
+          left: menuPosition.left + menuPosition.height + 20
         };
       default:
         return {
-          top: menuPosition.bottom,
-          left: menuPosition.rightSpaceAvailable + 12
+          top: menuPosition.top,
+          left: menuPosition.left
         };
     }
   })();
+  const adjustedStyle = {
+    top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
+    left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
+    zIndex
+  };
   return /*#__PURE__*/createPortal(jsx("div", {
     className: classNames('ff-option-card', [{
       'ff-option-card--primary': variant === 'primary'
     }], currentTheme),
-    style: {
-      ...style,
-      zIndex
-    },
+    style: adjustedStyle,
     ref: optionCardRef,
     children: options.map(opt => jsx(Option$1, {
       option: opt,
@@ -3256,26 +3258,28 @@ const MenuOption = ({
     right: 0
   });
   const closeDropDown = () => setIsClicked(false);
-  const onIconClickHandler = () => {
-    onClick();
-    calculateDims();
-    setIsClicked(prev => !prev);
-  };
-  const handleOptionClick = option => {
-    onOptionClick(option);
-    closeDropDown();
-  };
   const calculateDims = () => {
     if (targetRef?.current) {
       const rect = targetRef.current.getBoundingClientRect();
+      const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
+      const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
       setMenuPosition({
-        top: rect.top + window.scrollY,
-        left: rect.left + window.scrollX,
+        top: rect.top + window.scrollY - containerScrollTop,
+        left: rect.left + window.scrollX - containerScrollLeft,
         height: rect.height,
         right: rect.right
       });
     }
   };
+  const onIconClickHandler = () => {
+    onClick();
+    calculateDims();
+    setIsClicked(prev => !prev);
+  };
+  const handleOptionClick = option => {
+    onOptionClick(option);
+    closeDropDown();
+  };
   return jsxs("div", {
     className: "ff-menu-option-container",
     ref: menuRef,
@@ -13235,6 +13239,53 @@ function setYear(date, year, options) {
   return date_;
 }
 
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+/**
+ * Return the number of weeks to display in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function getBroadcastWeeksInMonth(month, dateLib) {
+  // Get the first day of the month
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
+  return numberOfWeeks;
+}
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function startOfBroadcastWeek(date, dateLib) {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}
+
+/**
+ * Return the end date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function endOfBroadcastWeek(date, dateLib) {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}
+
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -13315,6 +13366,15 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
+    /**
+     * Returns the end of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The end of the broadcast week.
+     */
+    this.endOfBroadcastWeek = date => {
+      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -13476,6 +13536,15 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
+    /**
+     * Returns the start of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The start of the broadcast week.
+     */
+    this.startOfBroadcastWeek = date => {
+      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -14061,7 +14130,8 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined
+    "data-week-numbers": props.showWeekNumber || undefined,
+    "data-broadcast-calendar": props.broadcastCalendar || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -14127,7 +14197,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale = enUS) {
+locale) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -14231,7 +14301,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -14606,7 +14676,8 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone) {
+ISOWeek, timeZone, /** @since 9.4.0 */
+broadcastCalendar) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -14809,29 +14880,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
-/** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks
+    fixedWeeks,
+    broadcastCalendar
   } = props ?? {};
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
-    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
     isAfter,
-    endOfMonth
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
-  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -14843,9 +14915,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -14956,25 +15030,29 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
+    addDays,
+    endOfBroadcastWeek,
     endOfISOWeek,
     endOfMonth,
-    addDays,
+    endOfWeek,
+    getISOWeek,
     getWeek,
-    getISOWeek
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    if (props.fixedWeeks && monthDates.length < 42) {
+    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
       const extraDates = dates.filter(date => {
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
+        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
       });
       monthDates.push(...extraDates);
     }
@@ -15412,27 +15490,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek
+    ISOWeek,
+    broadcastCalendar
   } = props;
   const {
     addDays,
     addMonths,
-    addYears,
     addWeeks,
-    startOfISOWeek,
+    addYears,
+    endOfBroadcastWeek,
     endOfISOWeek,
-    startOfWeek,
     endOfWeek,
     max,
-    min
+    min,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -15498,6 +15579,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -15506,12 +15589,19 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
+    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
   } = dateLib;
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -15520,20 +15610,18 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
-  const selectionModifiersMap = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
+    // Broadcast calendar will show outside days as default
+    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15562,27 +15650,16 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name];
-      selectionStates[name] = days.some(d => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -15987,7 +16064,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.weekStartsOn,
+      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -16006,7 +16083,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
   const {
     captionLayout,
     mode,
@@ -18784,6 +18861,8 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -20076,6 +20155,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
+    if (events.cancel) {
+      this.listeners.add(events.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -20195,6 +20277,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: 'pointercancel'
+  },
   move: {
     name: 'pointermove'
   },
@@ -20267,6 +20352,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: 'touchcancel'
+  },
   move: {
     name: 'touchmove'
   },
@@ -20468,11 +20556,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
+  const draggableNode = id != null ? draggableNodes.get(id) : undefined;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo(cachedNode => {
     var _ref;
-    if (id === null) {
+    if (id == null) {
       return null;
     } // In some cases, the draggable node can unmount while dragging
     // This is the case for virtualized lists. In those situations,
@@ -20680,7 +20768,26 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = useReducer(reducer, null);
+  const [rect, setRect] = useState(null);
+  function measureRect() {
+    setRect(currentRect => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+
+        // Fall back to last rect we measured if the element is
+        // no longer connected to the DOM.
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -20715,23 +20822,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-
-      // Fall back to last rect we measured if the element is
-      // no longer connected to the DOM.
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -20877,28 +20967,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = useReducer(reducer, defaultValue$2);
+  const [rects, setRects] = useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect$1(() => {
-    if (elements.length) {
-      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -21065,7 +21151,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -21337,7 +21423,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = useRef({
     initial: null,
     translated: null
@@ -21372,7 +21458,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -21450,6 +21536,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
 
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+  const activeSensorRef = useRef(null);
   const instantiateSensor = useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -21484,6 +21571,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
+          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -21502,6 +21590,8 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
+          setActiveSensor(activeSensorRef.current);
+          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -21513,10 +21603,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    unstable_batchedUpdates(() => {
-      setActiveSensor(sensorInstance);
-      setActivatorEvent(event.nativeEvent);
-    });
+    activeSensorRef.current = sensorInstance;
     function createHandler(type) {
       return async function handler() {
         const {
@@ -21553,6 +21640,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
           setOver(null);
           setActiveSensor(null);
           setActivatorEvent(null);
+          activeSensorRef.current = null;
           const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
           if (event) {
             const handler = latestProps.current[eventName];
@@ -21774,7 +21862,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/createContext$1(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Droppable';
+const ID_PREFIX$1 = 'Draggable';
 function useDraggable(_ref) {
   let {
     id,
@@ -21921,7 +22009,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$1(() => {
+  useEffect(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -22336,6 +22424,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
+  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,