pixel-react 1.10.3 → 1.10.4

package/lib/index.js

@@ -3950,8 +3950,6 @@ 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,
@@ -4941,12 +4939,11 @@ var KeyboardCode;
   KeyboardCode["Up"] = "ArrowUp";
   KeyboardCode["Esc"] = "Escape";
   KeyboardCode["Enter"] = "Enter";
-  KeyboardCode["Tab"] = "Tab";
 })(KeyboardCode || (KeyboardCode = {}));
 const defaultKeyboardCodes = {
   start: [KeyboardCode.Space, KeyboardCode.Enter],
   cancel: [KeyboardCode.Esc],
-  end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
+  end: [KeyboardCode.Space, KeyboardCode.Enter]
 };
 const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
@@ -5245,9 +5242,6 @@ 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);
@@ -5263,11 +5257,9 @@ class AbstractPointerSensor {
       }
       if (isDelayConstraint(activationConstraint)) {
         this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
-        this.handlePending(activationConstraint);
         return;
       }
       if (isDistanceConstraint(activationConstraint)) {
-        this.handlePending(activationConstraint);
         return;
       }
     }
@@ -5284,13 +5276,6 @@ class AbstractPointerSensor {
       this.timeoutId = null;
     }
   }
-  handlePending(constraint, offset) {
-    const {
-      active,
-      onPending
-    } = this.props;
-    onPending(active, constraint, this.initialCoordinates, offset);
-  }
   handleStart() {
     const {
       initialCoordinates
@@ -5344,7 +5329,6 @@ class AbstractPointerSensor {
           return this.handleCancel();
         }
       }
-      this.handlePending(activationConstraint, delta);
       return;
     }
     if (event.cancelable) {
@@ -5354,24 +5338,16 @@ class AbstractPointerSensor {
   }
   handleEnd() {
     const {
-      onAbort,
       onEnd
     } = this.props;
     this.detach();
-    if (!this.activated) {
-      onAbort(this.props.active);
-    }
     onEnd();
   }
   handleCancel() {
     const {
-      onAbort,
       onCancel
     } = this.props;
     this.detach();
-    if (!this.activated) {
-      onAbort(this.props.active);
-    }
     onCancel();
   }
   handleKeydown(event) {
@@ -5385,9 +5361,6 @@ class AbstractPointerSensor {
   }
 }
 const events = {
-  cancel: {
-    name: 'pointercancel'
-  },
   move: {
     name: 'pointermove'
   },
@@ -5460,9 +5433,6 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
-  cancel: {
-    name: 'touchcancel'
-  },
   move: {
     name: 'touchmove'
   },
@@ -5664,11 +5634,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,
@@ -5876,26 +5846,7 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, setRect] = React.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 [rect, measureRect] = React.useReducer(reducer, null);
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -5930,6 +5881,23 @@ 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);
@@ -6075,24 +6043,28 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, setRects] = React.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 [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  useIsomorphicLayoutEffect$1(() => {
-    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  if (elements.length > 0 && rects === defaultValue$2) {
     measureRects();
-    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+  }
+  useIsomorphicLayoutEffect$1(() => {
+    if (elements.length) {
+      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+    } else {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      measureRects();
+    }
   }, [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) {
@@ -6259,7 +6231,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (state.draggable.active == null) {
+      if (!state.draggable.active) {
         return state;
       }
       return {
@@ -6531,7 +6503,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId != null ? draggableNodes.get(activeId) : null;
+  const node = activeId ? draggableNodes.get(activeId) : null;
   const activeRects = React.useRef({
     initial: null,
     translated: null
@@ -6566,7 +6538,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
+    activeNode: activeId ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -6644,7 +6616,6 @@ const DndContext = /*#__PURE__*/React.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 = React.useRef(null);
   const instantiateSensor = React.useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -6666,43 +6637,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       // Sensors need to be instantiated with refs for arguments that change over time
       // otherwise they are frozen in time with the stale arguments
       context: sensorContext,
-      onAbort(id) {
-        const draggableNode = draggableNodes.get(id);
-        if (!draggableNode) {
-          return;
-        }
-        const {
-          onDragAbort
-        } = latestProps.current;
-        const event = {
-          id
-        };
-        onDragAbort == null ? void 0 : onDragAbort(event);
-        dispatchMonitorEvent({
-          type: 'onDragAbort',
-          event
-        });
-      },
-      onPending(id, constraint, initialCoordinates, offset) {
-        const draggableNode = draggableNodes.get(id);
-        if (!draggableNode) {
-          return;
-        }
-        const {
-          onDragPending
-        } = latestProps.current;
-        const event = {
-          id,
-          constraint,
-          initialCoordinates,
-          offset
-        };
-        onDragPending == null ? void 0 : onDragPending(event);
-        dispatchMonitorEvent({
-          type: 'onDragPending',
-          event
-        });
-      },
       onStart(initialCoordinates) {
         const id = activeRef.current;
         if (id == null) {
@@ -6716,7 +6650,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
-          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -6735,8 +6668,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
-          setActiveSensor(activeSensorRef.current);
-          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -6748,7 +6679,10 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    activeSensorRef.current = sensorInstance;
+    ReactDOM.unstable_batchedUpdates(() => {
+      setActiveSensor(sensorInstance);
+      setActivatorEvent(event.nativeEvent);
+    });
     function createHandler(type) {
       return async function handler() {
         const {
@@ -6785,7 +6719,6 @@ const DndContext = /*#__PURE__*/React.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];
@@ -7007,7 +6940,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/React.createContext(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Draggable';
+const ID_PREFIX$1 = 'Droppable';
 function useDraggable(_ref) {
   let {
     id,
@@ -7154,7 +7087,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -7569,7 +7502,6 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
-  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -11350,14 +11282,13 @@ var isWeb = typeof window !== 'undefined' &&
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
-    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
         copy = new Date(data);
     }
     else if (data instanceof Set) {
         copy = new Set(data);
     }
-    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
+    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
         (isArray || isObject$2(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject(data)) {
@@ -11416,7 +11347,7 @@ var set$1 = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (key === '__proto__') {
             return;
         }
         object[key] = newValue;
@@ -11635,7 +11566,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, [control]);
-    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+    return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -11731,67 +11662,6 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
-    const fieldState = React.useMemo(() => Object.defineProperties({}, {
-        invalid: {
-            enumerable: true,
-            get: () => !!get$1(formState.errors, name),
-        },
-        isDirty: {
-            enumerable: true,
-            get: () => !!get$1(formState.dirtyFields, name),
-        },
-        isTouched: {
-            enumerable: true,
-            get: () => !!get$1(formState.touchedFields, name),
-        },
-        isValidating: {
-            enumerable: true,
-            get: () => !!get$1(formState.validatingFields, name),
-        },
-        error: {
-            enumerable: true,
-            get: () => get$1(formState.errors, name),
-        },
-    }), [formState, name]);
-    const field = React.useMemo(() => ({
-        name,
-        value,
-        ...(isBoolean(disabled) || formState.disabled
-            ? { disabled: formState.disabled || disabled }
-            : {}),
-        onChange: (event) => _registerProps.current.onChange({
-            target: {
-                value: getEventValue(event),
-                name: name,
-            },
-            type: EVENTS.CHANGE,
-        }),
-        onBlur: () => _registerProps.current.onBlur({
-            target: {
-                value: get$1(control._formValues, name),
-                name: name,
-            },
-            type: EVENTS.BLUR,
-        }),
-        ref: (elm) => {
-            const field = get$1(control._fields, name);
-            if (field && elm) {
-                field._f.ref = {
-                    focus: () => elm.focus(),
-                    select: () => elm.select(),
-                    setCustomValidity: (message) => elm.setCustomValidity(message),
-                    reportValidity: () => elm.reportValidity(),
-                };
-            }
-        },
-    }), [
-        name,
-        control._formValues,
-        disabled,
-        formState.disabled,
-        value,
-        control._fields,
-    ]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
@@ -11817,7 +11687,7 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React.useEffect(() => {
-        if (isBoolean(disabled) && get$1(control._fields, name)) {
+        if (get$1(control._fields, name)) {
             control._updateDisabledField({
                 disabled,
                 fields: control._fields,
@@ -11826,11 +11696,63 @@ function useController(props) {
             });
         }
     }, [disabled, name, control]);
-    return React.useMemo(() => ({
-        field,
+    return {
+        field: {
+            name,
+            value,
+            ...(isBoolean(disabled) || formState.disabled
+                ? { disabled: formState.disabled || disabled }
+                : {}),
+            onChange: React.useCallback((event) => _registerProps.current.onChange({
+                target: {
+                    value: getEventValue(event),
+                    name: name,
+                },
+                type: EVENTS.CHANGE,
+            }), [name]),
+            onBlur: React.useCallback(() => _registerProps.current.onBlur({
+                target: {
+                    value: get$1(control._formValues, name),
+                    name: name,
+                },
+                type: EVENTS.BLUR,
+            }), [name, control]),
+            ref: React.useCallback((elm) => {
+                const field = get$1(control._fields, name);
+                if (field && elm) {
+                    field._f.ref = {
+                        focus: () => elm.focus(),
+                        select: () => elm.select(),
+                        setCustomValidity: (message) => elm.setCustomValidity(message),
+                        reportValidity: () => elm.reportValidity(),
+                    };
+                }
+            }, [control._fields, name]),
+        },
         formState,
-        fieldState,
-    }), [field, formState, fieldState]);
+        fieldState: Object.defineProperties({}, {
+            invalid: {
+                enumerable: true,
+                get: () => !!get$1(formState.errors, name),
+            },
+            isDirty: {
+                enumerable: true,
+                get: () => !!get$1(formState.dirtyFields, name),
+            },
+            isTouched: {
+                enumerable: true,
+                get: () => !!get$1(formState.touchedFields, name),
+            },
+            isValidating: {
+                enumerable: true,
+                get: () => !!get$1(formState.validatingFields, name),
+            },
+            error: {
+                enumerable: true,
+                get: () => get$1(formState.errors, name),
+            },
+        }),
+    };
 }
 
 /**
@@ -11880,7 +11802,7 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key]) && obj[key] !== null) {
+        if (isObjectType(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -11949,7 +11871,7 @@ function Form(props) {
                         headers && headers['Content-Type'],
                         encType,
                     ].some((value) => value && value.includes('json'));
-                    const response = await fetch(String(action), {
+                    const response = await fetch(action, {
                         method,
                         headers: {
                             ...headers,
@@ -12447,7 +12369,7 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
+    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -12456,8 +12378,8 @@ function useFieldArray(props) {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules &&
-        control.register(name, rules);
+    props.rules &&
+        control.register(name, props.rules);
     useSubscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
@@ -12501,8 +12423,6 @@ function useFieldArray(props) {
         ids.current = removeArrayAt(ids.current, index);
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
-        !Array.isArray(get$1(control._fields, name)) &&
-            set$1(control._fields, name, undefined);
         control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
         });
@@ -12817,8 +12737,7 @@ var getRuleValue = (rule) => isUndefined(rule)
             : rule;
 
 const ASYNC_FUNCTION = 'AsyncFunction';
-var hasPromiseValidation = (fieldReference) => !!fieldReference &&
-    !!fieldReference.validate &&
+var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
     !!((isFunction$1(fieldReference.validate) &&
         fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
         (isObject$2(fieldReference.validate) &&
@@ -12947,7 +12866,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -12959,7 +12878,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
+        if (!props.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -12975,7 +12894,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !_options.disabled) {
+        if (args && method && !props.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -13039,7 +12958,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        if (!props.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -13080,9 +12999,9 @@ function createFormControl(props = {}) {
         const shouldUpdateValid = _proxyFormState.isValid &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (_options.delayError && error) {
+        if (props.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(_options.delayError);
+            delayErrorCallback(props.delayError);
         }
         else {
             clearTimeout(timer);
@@ -13175,7 +13094,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
+    const _getDirty = (name, data) => !props.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -13187,7 +13106,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get$1(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get$1(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get$1(_fields, name);
         let fieldValue = value;
@@ -13320,7 +13239,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (_options.mode === 'onBlur') {
+                    if (props.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _updateValid();
                         }
@@ -13485,15 +13404,13 @@ function createFormControl(props = {}) {
                 : isUndefined(value)
                     ? getFieldValue(field ? field._f : get$1(fields, name)._f)
                     : value;
-            if (disabled || (!disabled && !isUndefined(inputValue))) {
-                set$1(_formValues, name, inputValue);
-            }
+            set$1(_formValues, name, inputValue);
             updateTouchAndDirty(name, inputValue, false, false, true);
         }
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -13509,7 +13426,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -13519,7 +13436,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? { disabled: options.disabled || props.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -13603,12 +13520,6 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
-        if (_options.disabled) {
-            if (onInvalid) {
-                await onInvalid({ ..._formState.errors }, e);
-            }
-            return;
-        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -13716,7 +13627,7 @@ function createFormControl(props = {}) {
                 }
                 _fields = {};
             }
-            _formValues = _options.shouldUnregister
+            _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
                     : {}
@@ -13740,7 +13651,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!_options.shouldUnregister;
+        _state.watch = !!props.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -13787,9 +13698,7 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$1(fieldRef.select) &&
-                    fieldRef.select();
+                options.shouldSelect && fieldRef.select();
             }
         }
     };
@@ -13911,8 +13820,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef(undefined);
-    const _values = React.useRef(undefined);
+    const _formControl = React.useRef();
+    const _values = React.useRef();
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
@@ -13990,6 +13899,11 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
+    React.useEffect(() => {
+        if (_formControl.current) {
+            _formControl.current.watch = _formControl.current.watch.bind({});
+        }
+    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -14057,6 +13971,9 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
   onDropdownChangeHandler = () => {},
   onInputChangeHandler,
   onInputBlurHandler,
+  onClick,
+  onKeyUp,
+  onFocus,
   optionsRequired = true,
   dropdownPosition = 'right',
   type = 'text'
@@ -14118,6 +14035,9 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
           autoComplete: autoComplete,
           required: required,
           disabled: disabled,
+          onClick: onClick,
+          onKeyUp: onKeyUp,
+          onFocus: onFocus,
           className: classNames('ff-floating-input', {
             'ff-floating-input--filled': isValueFilled,
             'ff-floating-input--disabled': !!disabled,
@@ -18311,53 +18231,6 @@ 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
@@ -18438,15 +18311,6 @@ 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.
      *
@@ -18608,15 +18472,6 @@ 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.
      *
@@ -19099,9 +18954,7 @@ function Weekday(props) {
  * @see https://daypicker.dev/guides/custom-components
  */
 function Weekdays(props) {
-  return /*#__PURE__*/React.createElement("thead", {
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
     ...props
   }));
 }
@@ -19204,8 +19057,7 @@ 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-broadcast-calendar": props.broadcastCalendar || undefined
+    "data-week-numbers": props.showWeekNumber || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -19271,7 +19123,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale) {
+locale = enUS$1) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -19361,12 +19213,13 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
   if (!navEnd) return undefined;
   const {
     addMonths,
-    startOfMonth
+    startOfMonth,
+    isBefore
   } = dateLib;
   const year = displayMonth.getFullYear();
   const months = [];
   let month = navStart;
-  while (months.length < 12) {
+  while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) {
     months.push(month.getMonth());
     month = addMonths(month, 1);
   }
@@ -19374,7 +19227,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS$1);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
     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 {
@@ -19749,8 +19602,7 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone, /** @since 9.4.0 */
-broadcastCalendar) {
+ISOWeek, timeZone) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -19762,18 +19614,20 @@ broadcastCalendar) {
 }
 
 /** Return the years to show in the dropdown. */
-function getYearOptions(navStart, navEnd, formatters, dateLib) {
-  if (!navStart) return undefined;
-  if (!navEnd) return undefined;
+function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
+  if (!calendarStart) return undefined;
+  if (!calendarEnd) return undefined;
   const {
+    startOfMonth,
     startOfYear,
     endOfYear,
     addYears,
     isBefore,
     isSameYear
   } = dateLib;
-  const firstNavYear = startOfYear(navStart);
-  const lastNavYear = endOfYear(navEnd);
+  const month = displayMonth.getMonth();
+  const firstNavYear = startOfYear(calendarStart);
+  const lastNavYear = endOfYear(calendarEnd);
   const years = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -19781,11 +19635,13 @@ function getYearOptions(navStart, navEnd, formatters, dateLib) {
     year = addYears(year, 1);
   }
   return years.map(value => {
+    const year = dateLib.Date ? new dateLib.Date(value, month) : new Date(value, month);
+    const disabled = calendarStart && year < startOfMonth(calendarStart) || month && calendarEnd && year > startOfMonth(calendarEnd) || false;
     const label = formatters.formatYearDropdown(value);
     return {
       value,
       label,
-      disabled: false
+      disabled
     };
   });
 }
@@ -19949,30 +19805,29 @@ 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,
-    broadcastCalendar
+    fixedWeeks
   } = props ?? {};
   const {
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
+    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
-    endOfBroadcastWeek,
-    endOfISOWeek,
-    endOfMonth,
-    endOfWeek,
     isAfter,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    endOfMonth
   } = dateLib;
-  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 startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -19984,11 +19839,9 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
-  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
+  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    const daysToAdd = extraDates - dates.length;
-    for (let i = 0; i < daysToAdd; i++) {
+    for (let i = 0; i < 7; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -20099,29 +19952,25 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    addDays,
-    endOfBroadcastWeek,
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
     endOfISOWeek,
     endOfMonth,
-    endOfWeek,
-    getISOWeek,
+    addDays,
     getWeek,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    getISOWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, 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));
+    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = 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;
     });
-    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
-    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+    if (props.fixedWeeks && monthDates.length < 42) {
       const extraDates = dates.filter(date => {
-        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
       });
       monthDates.push(...extraDates);
     }
@@ -20559,30 +20408,27 @@ 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,
-    broadcastCalendar
+    ISOWeek
   } = props;
   const {
     addDays,
     addMonths,
-    addWeeks,
     addYears,
-    endOfBroadcastWeek,
+    addWeeks,
+    startOfISOWeek,
     endOfISOWeek,
+    startOfWeek,
     endOfWeek,
     max,
-    min,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    min
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -20648,8 +20494,6 @@ 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) {
@@ -20658,19 +20502,12 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
-    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth,
-    startOfMonth,
-    isBefore,
-    endOfMonth,
-    isAfter
+    isSameMonth
   } = dateLib;
-  const startMonth = props.startMonth && startOfMonth(props.startMonth);
-  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -20679,18 +20516,20 @@ 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)) || isBeforeStartMonth || isAfterEndMonth ||
-    // Broadcast calendar will show outside days as default
-    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && 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);
@@ -20719,16 +20558,27 @@ 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
@@ -21133,7 +20983,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      weekStartsOn: props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -21152,7 +21002,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.broadcastCalendar]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
   const {
     captionLayout,
     mode,
@@ -21262,16 +21112,6 @@ function DayPicker(props) {
   const handleDayMouseLeave = React.useCallback((day, modifiers) => e => {
     onDayMouseLeave?.(day.date, modifiers, e);
   }, [onDayMouseLeave]);
-  const handleMonthChange = React.useCallback(date => e => {
-    const selectedMonth = Number(e.target.value);
-    const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
-    goToMonth(month);
-  }, [dateLib, goToMonth]);
-  const handleYearChange = React.useCallback(date => e => {
-    const selectedYear = Number(e.target.value);
-    const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
-    goToMonth(month);
-  }, [dateLib, goToMonth]);
   const {
     className,
     style
@@ -21309,8 +21149,6 @@ function DayPicker(props) {
     lang: props.lang,
     nonce: props.nonce,
     title: props.title,
-    role: props.role,
-    "aria-label": props["aria-label"],
     ...dataAttributes
   }, /*#__PURE__*/React.createElement(components.Months, {
     className: classNames[UI.Months],
@@ -21324,8 +21162,17 @@ function DayPicker(props) {
     previousMonth: previousMonth,
     nextMonth: nextMonth
   })), months.map((calendarMonth, displayIndex) => {
+    const handleMonthChange = e => {
+      const selectedMonth = Number(e.target.value);
+      const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
+      goToMonth(month);
+    };
+    const handleYearChange = e => {
+      const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
+      goToMonth(month);
+    };
     const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);
-    const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
+    const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib);
     return /*#__PURE__*/React.createElement(components.Month, {
       className: classNames[UI.Month],
       style: styles?.[UI.Month],
@@ -21346,7 +21193,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleMonthChange(calendarMonth.date),
+      onChange: handleMonthChange,
       options: dropdownMonths,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getMonth()
@@ -21359,7 +21206,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleYearChange(calendarMonth.date),
+      onChange: handleYearChange,
       options: dropdownYears,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getFullYear()
@@ -21406,8 +21253,7 @@ function DayPicker(props) {
           locale
         }),
         className: classNames[UI.WeekNumber],
-        scope: "row",
-        role: "rowheader"
+        scope: "row"
       }, formatWeekNumber(week.weekNumber))), week.days.map(day => {
         const {
           date
@@ -21427,14 +21273,14 @@ function DayPicker(props) {
         }
         const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
         const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
-        const ariaLabel = !isInteractive && !modifiers.hidden ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
+        const ariaLabel = !isInteractive ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
         return /*#__PURE__*/React.createElement(components.Day, {
           key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`,
           day: day,
           modifiers: modifiers,
           className: className.join(" "),
           style: style,
-          role: "gridcell",
+          "aria-hidden": modifiers.hidden || undefined,
           "aria-selected": modifiers.selected || undefined,
           "aria-label": ariaLabel,
           "data-day": dateLib.format(date, "yyyy-MM-dd"),
@@ -21445,7 +21291,7 @@ function DayPicker(props) {
           "data-outside": day.outside || undefined,
           "data-focused": modifiers.focused || undefined,
           "data-today": modifiers.today || undefined
-        }, !modifiers.hidden && isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
+        }, isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
           className: classNames[UI.DayButton],
           style: styles?.[UI.DayButton],
           type: "button",
@@ -21460,7 +21306,7 @@ function DayPicker(props) {
           onKeyDown: handleDayKeyDown(day, modifiers),
           onMouseEnter: handleDayMouseEnter(day, modifiers),
           onMouseLeave: handleDayMouseLeave(day, modifiers)
-        }, formatDay(date, dateLib.options, dateLib))) : !modifiers.hidden && formatDay(day.date, dateLib.options, dateLib));
+        }, formatDay(date, dateLib.options, dateLib))) : formatDay(day.date, dateLib.options, dateLib));
       }));
     }))));
   })), props.footer && (/*#__PURE__*/React.createElement(components.Footer, {