@mui/x-date-pickers 8.8.0 → 8.9.2

package/esm/DesktopDatePicker/DesktopDatePicker.js

@@ -230,7 +230,7 @@ DesktopDatePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -350,7 +350,7 @@ DesktopDateTimePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
@@ -471,8 +471,8 @@ DesktopDateTimePicker.propTypes = {
   thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
-   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps: PropTypes.shape({

package/esm/DesktopTimePicker/DesktopTimePicker.js

@@ -229,7 +229,7 @@ DesktopTimePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
@@ -307,8 +307,8 @@ DesktopTimePicker.propTypes = {
   thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
-   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps: PropTypes.shape({

package/esm/DigitalClock/DigitalClock.js

@@ -393,14 +393,14 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   onChange: PropTypes.func,
   /**
    * Callback fired on focused view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view to focus or not.
    * @param {boolean} hasFocus `true` if the view should be focused.
    */
   onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/MobileDatePicker/MobileDatePicker.js

@@ -228,7 +228,7 @@ MobileDatePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/MobileDateTimePicker/MobileDateTimePicker.js

@@ -316,7 +316,7 @@ MobileDateTimePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
@@ -437,8 +437,8 @@ MobileDateTimePicker.propTypes = {
   thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
-   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps: PropTypes.shape({

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -214,7 +214,7 @@ MobileTimePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -422,14 +422,14 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   onChange: PropTypes.func,
   /**
    * Callback fired on focused view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view to focus or not.
    * @param {boolean} hasFocus `true` if the view should be focused.
    */
   onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
@@ -478,7 +478,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps: PropTypes.shape({

package/esm/PickerDay2/PickerDay2.js

@@ -180,6 +180,7 @@ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps,
     }
   };
   const handleClick = event => {
+    event.defaultMuiPrevented = true;
     if (!disabled) {
       onDaySelect(day);
     }

package/esm/PickersDay/PickersDay.js

@@ -186,6 +186,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     }
   };
   const handleClick = event => {
+    event.defaultMuiPrevented = true;
     if (!disabled) {
       onDaySelect(day);
     }

package/esm/PickersLayout/PickersLayout.js

@@ -75,7 +75,7 @@ export const PickersLayoutRoot = styled('div', {
     },
     style: {
       [`& .${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: 3
+        gridColumn: 4
       }
     }
   }]

package/esm/StaticDatePicker/StaticDatePicker.js

@@ -176,7 +176,7 @@ StaticDatePicker.propTypes = {
   onMonthChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/StaticDateTimePicker/StaticDateTimePicker.js

@@ -263,7 +263,7 @@ StaticDateTimePicker.propTypes = {
   onMonthChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
@@ -369,8 +369,8 @@ StaticDateTimePicker.propTypes = {
   thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
-   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps: PropTypes.shape({

package/esm/StaticTimePicker/StaticTimePicker.js

@@ -161,7 +161,7 @@ StaticTimePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/TimeClock/TimeClock.js

@@ -414,14 +414,14 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   onChange: PropTypes.func,
   /**
    * Callback fired on focused view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view to focus or not.
    * @param {boolean} hasFocus `true` if the view should be focused.
    */
   onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,

package/esm/TimePicker/TimePicker.js

@@ -202,7 +202,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
@@ -280,8 +280,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
-   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps: PropTypes.shape({

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.8.0
+ * @mui/x-date-pickers v8.9.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/PickerPopper/PickerPopper.js

@@ -129,8 +129,11 @@ function useClickAwayListener(active, onClickAway) {
   });
 
   // Keep track of mouse/touch events that bubbled up through the portal.
-  const handleSynthetic = () => {
-    syntheticEventRef.current = true;
+  const handleSynthetic = event => {
+    // Ignore events handled by our internal components
+    if (!event.defaultMuiPrevented) {
+      syntheticEventRef.current = true;
+    }
   };
   React.useEffect(() => {
     if (active) {
@@ -220,6 +223,10 @@ export function PickerPopper(inProps) {
     popupRef,
     reduceAnimations
   } = usePickerContext();
+  const {
+    ownerState: pickerOwnerState,
+    rootRefObject
+  } = usePickerPrivateContext();
   const {
     dismissViews,
     getCurrentViewMode,
@@ -244,7 +251,7 @@ export function PickerPopper(inProps) {
       return;
     }
     if (open) {
-      lastFocusedElementRef.current = getActiveElement(document);
+      lastFocusedElementRef.current = getActiveElement(rootRefObject.current);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection
@@ -254,16 +261,12 @@ export function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, viewContainerRole, getCurrentViewMode]);
+  }, [open, viewContainerRole, getCurrentViewMode, rootRefObject]);
   const classes = useUtilityClasses(classesProp);
-  const {
-    ownerState: pickerOwnerState,
-    rootRefObject
-  } = usePickerPrivateContext();
   const handleClickAway = useEventCallback(() => {
     if (viewContainerRole === 'tooltip') {
       executeInTheNextEventLoopTick(() => {
-        if (rootRefObject.current?.contains(getActiveElement(document)) || popupRef.current?.contains(getActiveElement(document))) {
+        if (rootRefObject.current?.contains(getActiveElement(rootRefObject.current)) || popupRef.current?.contains(getActiveElement(popupRef.current))) {
           return;
         }
         dismissViews();

package/esm/internals/hooks/useField/syncSelectionToDOM.js

@@ -1,3 +1,4 @@
+import ownerDocument from '@mui/utils/ownerDocument';
 import { getActiveElement } from "../../utils/utils.js";
 export function syncSelectionToDOM(parameters) {
   const {
@@ -12,7 +13,7 @@ export function syncSelectionToDOM(parameters) {
   if (!domGetters.isReady()) {
     return;
   }
-  const selection = document.getSelection();
+  const selection = ownerDocument(domGetters.getRoot()).getSelection();
   if (!selection) {
     return;
   }
@@ -28,7 +29,7 @@ export function syncSelectionToDOM(parameters) {
   }
 
   // On multi input range pickers we want to update selection range only for the active input
-  if (!domGetters.getRoot().contains(getActiveElement(document))) {
+  if (!domGetters.getRoot().contains(getActiveElement(domGetters.getRoot()))) {
     return;
   }
   const range = new window.Range();

package/esm/internals/hooks/useField/useFieldRootProps.js

@@ -116,7 +116,7 @@ export function useFieldRootProps(parameters) {
     if (focused || disabled || !domGetters.isReady()) {
       return;
     }
-    const activeElement = getActiveElement(document);
+    const activeElement = getActiveElement(domGetters.getRoot());
     setFocused(true);
     const isFocusInsideASection = domGetters.getSectionIndexFromDOMElement(activeElement) != null;
     if (!isFocusInsideASection) {
@@ -128,7 +128,7 @@ export function useFieldRootProps(parameters) {
       if (!domGetters.isReady()) {
         return;
       }
-      const activeElement = getActiveElement(document);
+      const activeElement = getActiveElement(domGetters.getRoot());
       const shouldBlur = !domGetters.getRoot().contains(activeElement);
       if (shouldBlur) {
         setFocused(false);

package/esm/internals/hooks/useField/useFieldV6TextField.js

@@ -133,7 +133,7 @@ export const useFieldV6TextField = parameters => {
     setSelectedSections(sectionIndex);
   }
   function focusField(newSelectedSection = 0) {
-    if (getActiveElement(document) === inputRef.current) {
+    if (getActiveElement(inputRef.current) === inputRef.current) {
       return;
     }
     inputRef.current?.focus();
@@ -298,7 +298,7 @@ export const useFieldV6TextField = parameters => {
   const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRtl), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRtl]);
   React.useEffect(() => {
     // Select all the sections when focused on mount (`autoFocus = true` on the input)
-    if (inputRef.current && inputRef.current === getActiveElement(document)) {
+    if (inputRef.current && inputRef.current === getActiveElement(inputRef.current)) {
       setSelectedSections('all');
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -321,7 +321,7 @@ export const useFieldV6TextField = parameters => {
       // On multi input range pickers we want to update selection range only for the active input
       // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
       // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
-      if (inputRef.current !== getActiveElement(document)) {
+      if (inputRef.current !== getActiveElement(inputRef.current)) {
         return;
       }
 
@@ -334,14 +334,14 @@ export const useFieldV6TextField = parameters => {
         const selectionStart = selectedSection.type === 'empty' ? selectedSection.startInInput - selectedSection.startSeparator.length : selectedSection.startInInput;
         const selectionEnd = selectedSection.type === 'empty' ? selectedSection.endInInput + selectedSection.endSeparator.length : selectedSection.endInInput;
         if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
-          if (inputRef.current === getActiveElement(document)) {
+          if (inputRef.current === getActiveElement(inputRef.current)) {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
         selectionSyncTimeout.start(0, () => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === getActiveElement(document) &&
+          if (inputRef.current && inputRef.current === getActiveElement(inputRef.current) &&
           // The section might loose all selection, where `selectionStart === selectionEnd`
           // https://github.com/mui/mui-x/pull/13652
           inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
@@ -364,7 +364,7 @@ export const useFieldV6TextField = parameters => {
     }
     return 'numeric';
   }, [activeSectionIndex, state.sections]);
-  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
+  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(inputRef.current);
   const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
@@ -407,5 +407,5 @@ export const useFieldV6TextField = parameters => {
   });
 };
 function isFieldFocused(inputRef) {
-  return inputRef.current === getActiveElement(document);
+  return inputRef.current === getActiveElement(inputRef.current);
 }

package/esm/internals/hooks/useField/useFieldV7TextField.js

@@ -243,13 +243,13 @@ export const useFieldV7TextField = parameters => {
   });
 };
 function getActiveSectionIndex(sectionListRef) {
-  const activeElement = getActiveElement(document);
+  const activeElement = getActiveElement(sectionListRef.current?.getRoot());
   if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
     return null;
   }
   return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
 }
 function isFieldFocused(sectionListRef) {
-  const activeElement = getActiveElement(document);
+  const activeElement = getActiveElement(sectionListRef.current?.getRoot());
   return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
 }

package/esm/internals/hooks/useViews.d.ts

@@ -16,7 +16,7 @@ export interface UseViewsOptions<TValue extends PickerValidValue, TView extends
   onChange: (value: TValue, selectionState?: PickerSelectionState, selectedView?: TView) => void;
   /**
    * Callback fired on view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view.
    */
   onViewChange?: (view: TView) => void;
@@ -49,7 +49,7 @@ export interface UseViewsOptions<TValue extends PickerValidValue, TView extends
   focusedView?: TView | null;
   /**
    * Callback fired on focused view change.
-   * @template TView
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
    * @param {TView} view The new view to focus or not.
    * @param {boolean} hasFocus `true` if the view should be focused.
    */

package/esm/internals/models/props/time.d.ts

@@ -45,8 +45,8 @@ export interface DigitalTimePickerProps extends Omit<ExportedDigitalClockProps,
   thresholdToRenderTimeInASingleColumn?: number;
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
-   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps?: TimeStepOptions;
@@ -69,7 +69,7 @@ export interface DigitalClockOnlyProps extends DigitalClockOnlyBaseProps {
 export interface MultiSectionDigitalClockOnlyProps extends DigitalClockOnlyBaseProps {
   /**
    * The time steps between two time unit options.
-   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
    * @default{ hours: 1, minutes: 5, seconds: 5 }
    */
   timeSteps?: TimeStepOptions;

package/esm/internals/utils/utils.d.ts

@@ -4,7 +4,13 @@ import * as React from 'react';
 export declare function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems: T | T[]): boolean;
 export declare const onSpaceOrEnter: (innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void, externalEvent?: (event: React.KeyboardEvent<any>) => void) => (event: React.KeyboardEvent) => void;
 export declare const executeInTheNextEventLoopTick: (fn: () => void) => void;
-export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
+/**
+ * Gets the currently active element within a given node's document.
+ * This function traverses shadow DOM if necessary.
+ * @param node - The node from which to get the active element.
+ * @returns The currently active element, or null if none is found.
+ */
+export declare const getActiveElement: (node: Node | null | undefined) => Element | null;
 /**
  * Gets the index of the focused list item in a given ul list element.
  *

package/esm/internals/utils/utils.js

@@ -1,3 +1,4 @@
+import ownerDocument from '@mui/utils/ownerDocument';
 /* Use it instead of .includes method for IE support */
 export function arrayIncludes(array, itemOrItems) {
   if (Array.isArray(itemOrItems)) {
@@ -22,17 +23,27 @@ export const executeInTheNextEventLoopTick = fn => {
 };
 
 // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
-export const getActiveElement = (root = document) => {
+const getActiveElementInternal = (root = document) => {
   const activeEl = root.activeElement;
   if (!activeEl) {
     return null;
   }
   if (activeEl.shadowRoot) {
-    return getActiveElement(activeEl.shadowRoot);
+    return getActiveElementInternal(activeEl.shadowRoot);
   }
   return activeEl;
 };
 
+/**
+ * Gets the currently active element within a given node's document.
+ * This function traverses shadow DOM if necessary.
+ * @param node - The node from which to get the active element.
+ * @returns The currently active element, or null if none is found.
+ */
+export const getActiveElement = node => {
+  return getActiveElementInternal(ownerDocument(node));
+};
+
 /**
  * Gets the index of the focused list item in a given ul list element.
  *
@@ -41,7 +52,7 @@ export const getActiveElement = (root = document) => {
  */
 export const getFocusedListItemIndex = listElement => {
   const children = Array.from(listElement.children);
-  return children.indexOf(getActiveElement(document));
+  return children.indexOf(getActiveElement(listElement));
 };
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
 export function mergeSx(...sxProps) {

package/esm/locales/koKR.js

@@ -31,8 +31,7 @@ const koKRPickers = {
   dateTimePickerToolbarTitle: '날짜 & 시간 선택하기',
   timePickerToolbarTitle: '시간 선택하기',
   dateRangePickerToolbarTitle: '날짜 범위 선택하기',
-  // timeRangePickerToolbarTitle: 'Select time range',
-
+  timeRangePickerToolbarTitle: '시간 범위 선택하기',
   // Clock labels
   clockLabelText: (view, formattedTime) => `${views[view]} 선택하세요. ${!formattedTime ? '시간을 선택하지 않았습니다.' : `현재 선택된 시간은 ${formattedTime}입니다.`}`,
   hoursClockNumberText: hours => `${hours}시`,
@@ -48,7 +47,7 @@ const koKRPickers = {
   // Open Picker labels
   openDatePickerDialogue: formattedDate => formattedDate ? `날짜를 선택하세요. 현재 선택된 날짜는 ${formattedDate}입니다.` : '날짜를 선택하세요',
   openTimePickerDialogue: formattedTime => formattedTime ? `시간을 선택하세요. 현재 선택된 시간은 ${formattedTime}입니다.` : '시간을 선택하세요',
-  // openRangePickerDialogue: formattedRange => formattedRange ? `Choose range, selected range is ${formattedRange}` : 'Choose range',
+  openRangePickerDialogue: formattedRange => formattedRange ? `범위를 선택하세요. 현재 선택된 범위는 ${formattedRange}입니다.` : '범위를 선택하세요',
   fieldClearLabel: '지우기',
   // Table labels
   timeTableLabel: '선택한 시간',
@@ -70,8 +69,7 @@ const koKRPickers = {
   hours: '시간',
   minutes: '분',
   seconds: '초',
-  // meridiem: 'Meridiem',
-
+  meridiem: '오전/오후',
   // Common
   empty: '공란'
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.8.0
+ * @mui/x-date-pickers v8.9.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerPopper/PickerPopper.js

@@ -136,8 +136,11 @@ function useClickAwayListener(active, onClickAway) {
   });
 
   // Keep track of mouse/touch events that bubbled up through the portal.
-  const handleSynthetic = () => {
-    syntheticEventRef.current = true;
+  const handleSynthetic = event => {
+    // Ignore events handled by our internal components
+    if (!event.defaultMuiPrevented) {
+      syntheticEventRef.current = true;
+    }
   };
   React.useEffect(() => {
     if (active) {
@@ -227,6 +230,10 @@ function PickerPopper(inProps) {
     popupRef,
     reduceAnimations
   } = (0, _hooks.usePickerContext)();
+  const {
+    ownerState: pickerOwnerState,
+    rootRefObject
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     dismissViews,
     getCurrentViewMode,
@@ -251,7 +258,7 @@ function PickerPopper(inProps) {
       return;
     }
     if (open) {
-      lastFocusedElementRef.current = (0, _utils.getActiveElement)(document);
+      lastFocusedElementRef.current = (0, _utils.getActiveElement)(rootRefObject.current);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection
@@ -261,16 +268,12 @@ function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, viewContainerRole, getCurrentViewMode]);
+  }, [open, viewContainerRole, getCurrentViewMode, rootRefObject]);
   const classes = useUtilityClasses(classesProp);
-  const {
-    ownerState: pickerOwnerState,
-    rootRefObject
-  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const handleClickAway = (0, _useEventCallback.default)(() => {
     if (viewContainerRole === 'tooltip') {
       (0, _utils.executeInTheNextEventLoopTick)(() => {
-        if (rootRefObject.current?.contains((0, _utils.getActiveElement)(document)) || popupRef.current?.contains((0, _utils.getActiveElement)(document))) {
+        if (rootRefObject.current?.contains((0, _utils.getActiveElement)(rootRefObject.current)) || popupRef.current?.contains((0, _utils.getActiveElement)(popupRef.current))) {
           return;
         }
         dismissViews();

package/internals/hooks/useField/syncSelectionToDOM.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncSelectionToDOM = syncSelectionToDOM;
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _utils = require("../../utils/utils");
 function syncSelectionToDOM(parameters) {
   const {
@@ -18,7 +20,7 @@ function syncSelectionToDOM(parameters) {
   if (!domGetters.isReady()) {
     return;
   }
-  const selection = document.getSelection();
+  const selection = (0, _ownerDocument.default)(domGetters.getRoot()).getSelection();
   if (!selection) {
     return;
   }
@@ -34,7 +36,7 @@ function syncSelectionToDOM(parameters) {
   }
 
   // On multi input range pickers we want to update selection range only for the active input
-  if (!domGetters.getRoot().contains((0, _utils.getActiveElement)(document))) {
+  if (!domGetters.getRoot().contains((0, _utils.getActiveElement)(domGetters.getRoot()))) {
     return;
   }
   const range = new window.Range();