@mui/x-date-pickers 8.9.0 → 8.10.0

package/CHANGELOG.md

@@ -5,6 +5,245 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.0
+
+_Aug 8, 2025_
+
+We'd like to extend a big thank you to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 [`FunnelChart`](https://mui.com/x/react-charts/funnel/) marked as stable
+- 📈 [Zoom slider](https://mui.com/x/react-charts/zoom-and-pan/#zoom-slider) and [Preview](https://mui.com/x/react-charts/zoom-and-pan/#preview) marked as stable
+- 📈 Supporting [label groups](https://mui.com/x/react-charts/axis/#grouped-axes) in band and point axis
+- 🌎 Improve Norwegian Nynorsk (nn-NO) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@AnderzL7, @aqeelat, @dwrth, @noobyogi0010, @nusr, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @oliviertassinari, @rita-codes, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.0`
+
+- [DataGrid] Move spread operator in `BaseSelect` to allow `variant` change (#19026) @dwrth
+- [DataGrid] Use `use-sync-external-store` shim (#19063) @romgrk
+- [DataGrid] Allow skipping cache in `dataSource.fetchRows()` API method (#18904) @MBilalShafi
+- [DataGrid] Do not call `preProcessEditCellProps()` if cell is not editable based on `isCellEditable()` (#18405) @nusr
+- [DataGrid] Fix `renderCountry` throwing an error when used in tree data (#19068) @cherniavskii
+- [DataGrid] Fix performance issue for root level "select all" (#19015) @MBilalShafi
+- [DataGrid] Fix pagination `slotProps` being ignored by the grid (#19095) @romgrk
+- [l10n] Improve Norwegian Nynorsk (nn-NO) locale (#19076) @AnderzL7
+
+#### `@mui/x-data-grid-pro@8.10.0` [![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.10.0`, plus:
+
+- [DataGridPro] Fix row reorder not working with column reorder disabled (#19016) @MBilalShafi
+- [DataGridPro] Fix header filters cache sharing issue (#19090) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.10.0` [![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.10.0`, plus:
+
+- [DataGridPremium] Allow additional derived columns customization via `valueFormatter` (#18982) @arminmeh
+- [DataGridPremium] Fix complex `singleSelect` columns not working in pivot model (#18971) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+- [pickers] `MuiPickersLayout-toolbar` is overlapping the Calendar in RTL `MobileDatePicker` variant (#18981) @rita-codes
+
+#### `@mui/x-date-pickers-pro@8.10.0` [![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.10.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.10.0`
+
+- [charts] Add `groups` to `band` and `point` axis config (#18766) @JCQuintas
+- [charts] Animation example using `motion` library (#18993) @JCQuintas
+- [charts] Deprecate `Unstable_` radar exports (#19079) @JCQuintas
+- [charts] Improve grouped axis logic (#19069) @JCQuintas
+- [charts] Fix type assertion in axis highlight components (#19060) @sai6855
+- [charts] Remove unnecessary type assertion in tooltip `valueFormatter` in heatmap (#19047) @sai6855
+
+#### `@mui/x-charts-pro@8.10.0` [![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.10.0`, plus:
+
+- [charts-pro] Fix `slotProps.tooltip.trigger` not respected in `ScatterChartPro` and `FunnelChart` (#18902) @bernardobelchior
+- [charts-pro] Fix zoom filtering adjusting axis too soon (#18992) @bernardobelchior
+- [charts-pro] Mark `FunnelChart` as stable (#19048) @JCQuintas
+- [charts-pro] Mark zoom slider and preview as stable (#19049) @JCQuintas
+- [charts-pro] Refactor `createAxisFilterMapper` (#18998) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.10.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add CSS bundler breaking change to migration guide (#17436) @romgrk
+- [docs] `RichTreeViewPro` demo for dragging via custom drag-handle is not working properly (#19008) @rita-codes
+- [docs] Fix broken link to D3 in Charts (#19020) @oliviertassinari
+- [docs] Revise the Charts Animation doc (#18990) @mapache-salvaje
+- [docs] Fix incorrect code in line chart preview (#19023) @noobyogi0010
+- [docs] Improve bundling instructions for the Data Grid (#19065) @romgrk
+- [docs] Reduce image size in the inventory grid demo (#19004) @arminmeh
+
+### Core
+
+- [core] Fix ESLint reference name @oliviertassinari
+
+### Miscellaneous
+
+- [infra] Remove bundle size tracking for subpaths (#19072) @Janpot
+- [infra] Accept `PORT` env on `docs:dev` script (#19014) @JCQuintas
+- [infra] Skip codesandbox iframe demos in regressions tests (#18970) @cherniavskii
+- [infra] Remove package.json `module` field (#18961) @Janpot
+- [internal] Remove peer dependency on `@mui/system` (#19062) @aqeelat
+
+## 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_
@@ -294,8 +533,8 @@ Same changes as in `@mui/x-tree-view@8.7.0`, plus:
 
 - [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
 - [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
-- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
-- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [code-infra] Migrate to flat ESLint config (#18562) @brijeshb42
+- [code-infra] Refactor ESLint config (#18643) @LukasTy
 - [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
 - [infra] Move pushArgos script to code-infra (#18667) @Janpot
 - [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
@@ -1209,7 +1448,7 @@ Same changes as in `@mui/x-tree-view@8.2.0`.
 - [core] Fix all Vale errors @oliviertassinari
 - [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
 - [core] Remove empty version (#17582) @oliviertassinari
-- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
+- [core] Remove ESLint from codemod spec files (#17443) @alexfauquette
 - [core] Remove unnecessary versions (#17597) @oliviertassinari
 - [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
 - [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
@@ -6703,7 +6942,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`.
 
 ### Core
 
-- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [core] Add ESLint rule to restrict import from `../internals` root (#13633) @JCQuintas
 - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
 - [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle
 
@@ -6841,7 +7080,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
 
 - [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
 - [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
-- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Fix ESLint for react compiler (#13444) @alexfauquette
 - [charts] Improve themeAugmentation typing (#13433) @noraleonte
 - [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
 - [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
@@ -7388,7 +7627,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
 - [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
-- [code-infra] Closer sync with eslint config of codebase (#12864) @oliviertassinari
+- [code-infra] Closer sync with ESLint config of codebase (#12864) @oliviertassinari
 - [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
 
 ## 7.3.0

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

@@ -39,26 +39,29 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   },
   variants: [{
     props: {
-      pickerOrientation: 'landscape'
+      pickerOrientation: 'landscape',
+      hasShortcuts: false
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
         gridColumn: 1,
-        gridRow: '2 / 3'
-      },
-      [`.${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: '2 / 4',
-        gridRow: 1
+        gridRow: '1 / 3'
       }
     }
   }, {
     props: {
       pickerOrientation: 'landscape',
-      layoutDirection: 'rtl'
+      hasShortcuts: true
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
-        gridColumn: 3
+        gridColumn: '2 / 4',
+        gridRow: 1,
+        maxWidth: 'max-content'
+      },
+      [`& .${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: 1,
+        gridRow: 2
       }
     }
   }, {
@@ -77,7 +80,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      pickerOrientation: 'portrait',
+      hasShortcuts: true,
       layoutDirection: 'rtl'
     },
     style: {

package/PickersLayout/PickersLayout.types.d.ts

@@ -33,6 +33,11 @@ export interface PickerLayoutOwnerState extends PickerOwnerState {
    * Is equal to "rtl" when the layout is in right-to-left direction.
    */
   layoutDirection: 'ltr' | 'rtl';
+  /**
+   * Whether the layout should display the shortcuts panel or not.
+   * This flag is used to adjust the layout accordingly.
+   */
+  hasShortcuts: boolean;
 }
 export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {
   /**

package/PickersLayout/usePickerLayout.js

@@ -54,7 +54,8 @@ const usePickerLayout = props => {
     classes: classesProp
   } = props;
   const ownerState = React.useMemo(() => (0, _extends2.default)({}, pickerOwnerState, {
-    layoutDirection: isRtl ? 'rtl' : 'ltr'
+    layoutDirection: isRtl ? 'rtl' : 'ltr',
+    hasShortcuts: false
   }), [pickerOwnerState, isRtl]);
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -99,6 +100,7 @@ const usePickerLayout = props => {
     className: classes.shortcuts,
     ownerState
   });
+  const hasShortcuts = Array.isArray(shortcutsProps?.items) && shortcutsProps.items.length > 0;
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Shortcuts, (0, _extends2.default)({}, shortcutsProps)) : null;
   return {
     toolbar,
@@ -106,7 +108,9 @@ const usePickerLayout = props => {
     tabs,
     actionBar,
     shortcuts,
-    ownerState
+    ownerState: (0, _extends2.default)({}, ownerState, {
+      hasShortcuts
+    })
   };
 };
 var _default = exports.default = usePickerLayout;

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

@@ -32,26 +32,29 @@ export const PickersLayoutRoot = styled('div', {
   },
   variants: [{
     props: {
-      pickerOrientation: 'landscape'
+      pickerOrientation: 'landscape',
+      hasShortcuts: false
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
         gridColumn: 1,
-        gridRow: '2 / 3'
-      },
-      [`.${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: '2 / 4',
-        gridRow: 1
+        gridRow: '1 / 3'
       }
     }
   }, {
     props: {
       pickerOrientation: 'landscape',
-      layoutDirection: 'rtl'
+      hasShortcuts: true
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
-        gridColumn: 3
+        gridColumn: '2 / 4',
+        gridRow: 1,
+        maxWidth: 'max-content'
+      },
+      [`& .${pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: 1,
+        gridRow: 2
       }
     }
   }, {
@@ -70,7 +73,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      pickerOrientation: 'portrait',
+      hasShortcuts: true,
       layoutDirection: 'rtl'
     },
     style: {

package/esm/PickersLayout/PickersLayout.types.d.ts

@@ -33,6 +33,11 @@ export interface PickerLayoutOwnerState extends PickerOwnerState {
    * Is equal to "rtl" when the layout is in right-to-left direction.
    */
   layoutDirection: 'ltr' | 'rtl';
+  /**
+   * Whether the layout should display the shortcuts panel or not.
+   * This flag is used to adjust the layout accordingly.
+   */
+  hasShortcuts: boolean;
 }
 export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {
   /**

package/esm/PickersLayout/usePickerLayout.js

@@ -47,7 +47,8 @@ const usePickerLayout = props => {
     classes: classesProp
   } = props;
   const ownerState = React.useMemo(() => _extends({}, pickerOwnerState, {
-    layoutDirection: isRtl ? 'rtl' : 'ltr'
+    layoutDirection: isRtl ? 'rtl' : 'ltr',
+    hasShortcuts: false
   }), [pickerOwnerState, isRtl]);
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -92,6 +93,7 @@ const usePickerLayout = props => {
     className: classes.shortcuts,
     ownerState
   });
+  const hasShortcuts = Array.isArray(shortcutsProps?.items) && shortcutsProps.items.length > 0;
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/_jsx(Shortcuts, _extends({}, shortcutsProps)) : null;
   return {
     toolbar,
@@ -99,7 +101,9 @@ const usePickerLayout = props => {
     tabs,
     actionBar,
     shortcuts,
-    ownerState
+    ownerState: _extends({}, ownerState, {
+      hasShortcuts
+    })
   };
 };
 export default usePickerLayout;

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.9.0
+ * @mui/x-date-pickers v8.10.0
  *
  * @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.10.0
  *
  * @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.10.0",
   "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.10.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -91,7 +90,6 @@
     "node": ">=14.0.0"
   },
   "private": false,
-  "module": "./esm/index.js",
   "exports": {
     "./package.json": "./package.json",
     ".": {