@mui/x-date-pickers 8.8.0 → 8.9.2

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/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/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/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.8.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",