@mui/x-date-pickers 8.9.0 → 8.9.2

package/CHANGELOG.md

@@ -5,6 +5,130 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.9.2
+
+_Jul 31, 2025_
+
+We'd like to extend a big thank you to the 23 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve French (fr-FR), Hebrew (he-IL) and Polish (pl-PL) locales on the Data Grid
+- 🌎 Improve Korean (ko-KR) locale on the Date and Time Pickers
+- 📈 Add symlog scale to charts
+- 📊 Fix bar border radius on Firefox
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@AmrElnaggar99, @atlanteh, @ddolcimascolo, @Jiseoup, @leonaha5, @noherczeg, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @bharatkashyap, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @MBilalShafi, @rita-codes, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.9.2`
+
+- [DataGrid] Add debounce for columns panel search (#18719) @noherczeg
+- [DataGrid] Extract virtualization engine (#18275) @romgrk
+- [DataGrid] Improve types in `<GridEditSingleSelect />` (#18184) @sai6855
+- [l10n] Improve French (fr-FR) locale (#18905) @ddolcimascolo
+- [l10n] Improve Hebrew (he-IL) locale (#18665) @atlanteh
+- [l10n] Improve Polish (pl-PL) locale (#18068) @leonaha5
+
+#### `@mui/x-data-grid-pro@8.9.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.9.2`, plus:
+
+- [DataGridPro] Fix duplicate nested rows for dynamically updated row IDs (#18526) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.9.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.9.2`, plus:
+
+- [DataGridPremium] Add `privateMode` to AI assistant prompt resolver (#18759) @bharatkashyap
+- [DataGridPremium] Fix empty nested group values caused by main criterial `valueFormatter()` (#18916) @cherniavskii
+- [DataGridPremium] Sidebar content and state is managed the same way as for preference panel (#18741) @arminmeh
+- [DataGridPremium] Make `api` param for the aggregation function optional (#18984) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.9.2`
+
+- [l10n] Improve Korean (ko-KR) locale (#18664) @Jiseoup
+- [pickers] Fix popper click-away behavior (#18804) @LukasTy
+- [pickers] Fix usage not in main document (#18944) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.9.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.9.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.9.2`
+
+- [charts] Add symlog scale to charts (#18729) @bernardobelchior
+- [charts] Fix bar border radius on Firefox (#18824) @bernardobelchior
+- [charts] Fix crash when rendering large scatter dataset (#18845) @bernardobelchior
+- [charts] Remove unnecessary type assertion in tooltip `valueFormatter()` (#18877) @sai6855
+- [charts] Export `ChartsWrapper` from `'./ChartsWrapper'` rather than `'./internals'` (#18966) @JCQuintas
+
+#### `@mui/x-charts-pro@8.9.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.9.2`, plus:
+
+- [charts-pro] Fix voronoi interaction with zoom (#18950) @alexfauquette
+- [charts-pro] Hide toolbar by default when exporting (#18764) @bernardobelchior
+
+### Codemod
+
+#### `@mui/x-codemod@8.9.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add Data Grid demo pages (#18180) @KenanYusuf
+- [docs] Copyedit the Charts Overview page (#18840) @mapache-salvaje
+- [docs] Fix incorrect parameter name in pickers "Custom components" page from `variant` to `pickerVariant` (#18919) @AmrElnaggar99
+
+### Miscellaneous
+
+- [code-infra] Auto-generate deep exports to prevent asymmetric exports (#18917) @JCQuintas
+- [docs-infra] Turn on "Edit in Chat" for X docs (#18869) @siriwatknp
+- [infra] Add specific bundle size tracking (#18884) @Janpot
+- [infra] Fix markdown formatting in llms generation (#18914) @Janpot
+- [infra] Use CI action from mui-public (#18709) @brijeshb42
+
+## 8.9.1
+
+_Jul 21, 2025_
+
+We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+🐞 Fix package publish issue
+
+The following are all team members who have contributed to this release:
+@KenanYusuf, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.9.1`
+
+- [DataGrid] Move conditional list view column logic into `gridVisibleColumnDefinitionsSelector` (#18724) @KenanYusuf
+- [DataGrid] Fix row selection "exclude" model inconsistency (#18844) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.9.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.9.1`.
+
+#### `@mui/x-data-grid-premium@8.9.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.9.1`.
+
+### Core
+
+- [core] Follow yml syntax convention @oliviertassinari
+
 ## 8.9.0
 
 _Jul 17, 2025_

package/PickerDay2/PickerDay2.js

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

package/PickersDay/PickersDay.js

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

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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.9.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/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.9.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();

package/internals/hooks/useField/useFieldRootProps.js

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

package/internals/hooks/useField/useFieldV6TextField.js

@@ -141,7 +141,7 @@ const useFieldV6TextField = parameters => {
     setSelectedSections(sectionIndex);
   }
   function focusField(newSelectedSection = 0) {
-    if ((0, _utils.getActiveElement)(document) === inputRef.current) {
+    if ((0, _utils.getActiveElement)(inputRef.current) === inputRef.current) {
       return;
     }
     inputRef.current?.focus();
@@ -306,7 +306,7 @@ 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 === (0, _utils.getActiveElement)(document)) {
+    if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(inputRef.current)) {
       setSelectedSections('all');
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -329,7 +329,7 @@ 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 !== (0, _utils.getActiveElement)(document)) {
+      if (inputRef.current !== (0, _utils.getActiveElement)(inputRef.current)) {
         return;
       }
 
@@ -342,14 +342,14 @@ 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 === (0, _utils.getActiveElement)(document)) {
+          if (inputRef.current === (0, _utils.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 === (0, _utils.getActiveElement)(document) &&
+          if (inputRef.current && inputRef.current === (0, _utils.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)) {
@@ -372,7 +372,7 @@ const useFieldV6TextField = parameters => {
     }
     return 'numeric';
   }, [activeSectionIndex, state.sections]);
-  const inputHasFocus = inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document);
+  const inputHasFocus = inputRef.current && inputRef.current === (0, _utils.getActiveElement)(inputRef.current);
   const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
@@ -416,5 +416,5 @@ const useFieldV6TextField = parameters => {
 };
 exports.useFieldV6TextField = useFieldV6TextField;
 function isFieldFocused(inputRef) {
-  return inputRef.current === (0, _utils.getActiveElement)(document);
+  return inputRef.current === (0, _utils.getActiveElement)(inputRef.current);
 }

package/internals/hooks/useField/useFieldV7TextField.js

@@ -251,13 +251,13 @@ const useFieldV7TextField = parameters => {
 };
 exports.useFieldV7TextField = useFieldV7TextField;
 function getActiveSectionIndex(sectionListRef) {
-  const activeElement = (0, _utils.getActiveElement)(document);
+  const activeElement = (0, _utils.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 = (0, _utils.getActiveElement)(document);
+  const activeElement = (0, _utils.getActiveElement)(sectionListRef.current?.getRoot());
   return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
 }

package/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/internals/utils/utils.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,6 +9,7 @@ exports.arrayIncludes = arrayIncludes;
 exports.getFocusedListItemIndex = exports.getActiveElement = exports.executeInTheNextEventLoopTick = void 0;
 exports.mergeSx = mergeSx;
 exports.onSpaceOrEnter = void 0;
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 /* Use it instead of .includes method for IE support */
 function arrayIncludes(array, itemOrItems) {
   if (Array.isArray(itemOrItems)) {
@@ -34,17 +36,27 @@ const executeInTheNextEventLoopTick = fn => {
 
 // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 exports.executeInTheNextEventLoopTick = executeInTheNextEventLoopTick;
-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.
+ */
+const getActiveElement = node => {
+  return getActiveElementInternal((0, _ownerDocument.default)(node));
+};
+
 /**
  * Gets the index of the focused list item in a given ul list element.
  *
@@ -54,7 +66,7 @@ const getActiveElement = (root = document) => {
 exports.getActiveElement = getActiveElement;
 const getFocusedListItemIndex = listElement => {
   const children = Array.from(listElement.children);
-  return children.indexOf(getActiveElement(document));
+  return children.indexOf(getActiveElement(listElement));
 };
 exports.getFocusedListItemIndex = getFocusedListItemIndex;
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = exports.DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';

package/locales/koKR.js

@@ -37,8 +37,7 @@ const koKRPickers = {
   dateTimePickerToolbarTitle: '날짜 & 시간 선택하기',
   timePickerToolbarTitle: '시간 선택하기',
   dateRangePickerToolbarTitle: '날짜 범위 선택하기',
-  // timeRangePickerToolbarTitle: 'Select time range',
-
+  timeRangePickerToolbarTitle: '시간 범위 선택하기',
   // Clock labels
   clockLabelText: (view, formattedTime) => `${views[view]} 선택하세요. ${!formattedTime ? '시간을 선택하지 않았습니다.' : `현재 선택된 시간은 ${formattedTime}입니다.`}`,
   hoursClockNumberText: hours => `${hours}시`,
@@ -54,7 +53,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: '선택한 시간',
@@ -76,8 +75,7 @@ const koKRPickers = {
   hours: '시간',
   minutes: '분',
   seconds: '초',
-  // meridiem: 'Meridiem',
-
+  meridiem: '오전/오후',
   // Common
   empty: '공란'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.9.0",
+  "version": "8.9.2",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
   "main": "./index.js",
@@ -15,8 +15,7 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "keywords": [
     "react",
@@ -35,13 +34,13 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
+    "@babel/runtime": "^7.28.2",
     "@mui/utils": "^7.2.0",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.8.0"
+    "@mui/x-internals": "8.9.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",