@mui/x-date-pickers 9.0.2 → 9.0.3

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -13,6 +13,7 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
+var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
@@ -56,6 +57,7 @@ const useMobilePicker = _ref => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: (0, _utils.extractRootForwardedProps)(props),
       additionalProps: (0, _extends2.default)({}, isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useMobilePicker/useMobilePicker.mjs

@@ -8,6 +8,7 @@ import { usePicker } from "../usePicker/index.mjs";
 import { PickersLayout } from "../../../PickersLayout/index.mjs";
 import { PickerProvider } from "../../components/PickerProvider.mjs";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
+import { extractRootForwardedProps } from "../../utils/utils.mjs";
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -50,6 +51,7 @@ export const useMobilePicker = _ref => {
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: extractRootForwardedProps(props),
       additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -63,7 +63,7 @@ const useStaticPicker = _ref => {
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, (0, _utils.extractRootForwardedProps)(props), slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
       sx: (0, _utils.mergeSx)(providerProps.contextValue.rootSx, slotProps?.layout?.sx),

package/internals/hooks/useStaticPicker/useStaticPicker.mjs

@@ -9,7 +9,7 @@ import { usePicker } from "../usePicker/index.mjs";
 import { PickerProvider } from "../../components/PickerProvider.mjs";
 import { PickersLayout } from "../../../PickersLayout/index.mjs";
 import { DIALOG_WIDTH } from "../../constants/dimensions.mjs";
-import { mergeSx } from "../../utils/utils.mjs";
+import { extractRootForwardedProps, mergeSx } from "../../utils/utils.mjs";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout, {
@@ -57,7 +57,7 @@ export const useStaticPicker = _ref => {
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, extractRootForwardedProps(props), slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
       sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),

package/internals/index.d.mts

@@ -61,7 +61,7 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.mjs";
 export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.mjs";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.mjs";
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
+export { executeInTheNextEventLoopTick, extractRootForwardedProps, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.mjs";
 export { applyDefaultViewProps } from "./utils/views.mjs";
 export { isElementInteractive } from "./utils/isElementInteractive.mjs";

package/internals/index.d.ts

@@ -61,7 +61,7 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";
 export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.js";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
+export { executeInTheNextEventLoopTick, extractRootForwardedProps, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.js";
 export { applyDefaultViewProps } from "./utils/views.js";
 export { isElementInteractive } from "./utils/isElementInteractive.js";

package/internals/index.js

@@ -165,6 +165,12 @@ Object.defineProperty(exports, "executeInTheNextEventLoopTick", {
     return _utils.executeInTheNextEventLoopTick;
   }
 });
+Object.defineProperty(exports, "extractRootForwardedProps", {
+  enumerable: true,
+  get: function () {
+    return _utils.extractRootForwardedProps;
+  }
+});
 Object.defineProperty(exports, "formatMeridiem", {
   enumerable: true,
   get: function () {

package/internals/index.mjs

@@ -30,7 +30,7 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.mjs";
 export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.mjs";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.mjs";
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
+export { executeInTheNextEventLoopTick, extractRootForwardedProps, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.mjs";
 export { applyDefaultViewProps } from "./utils/views.mjs";
 export { isElementInteractive } from "./utils/isElementInteractive.mjs";

package/internals/utils/utils.d.mts

@@ -19,4 +19,10 @@ export declare const getActiveElement: (node: Node | null | undefined) => Elemen
  */
 export declare const getFocusedListItemIndex: (listElement: HTMLUListElement) => number;
 export declare const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+export declare function extractRootForwardedProps<T extends object>(props: T): Record<string, unknown>;
 export declare function mergeSx(...sxProps: (SxProps<Theme> | undefined)[]): ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;

package/internals/utils/utils.d.ts

@@ -19,4 +19,10 @@ export declare const getActiveElement: (node: Node | null | undefined) => Elemen
  */
 export declare const getFocusedListItemIndex: (listElement: HTMLUListElement) => number;
 export declare const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+export declare function extractRootForwardedProps<T extends object>(props: T): Record<string, unknown>;
 export declare function mergeSx(...sxProps: (SxProps<Theme> | undefined)[]): ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;

package/internals/utils/utils.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_DESKTOP_MODE_MEDIA_QUERY = void 0;
 exports.arrayIncludes = arrayIncludes;
-exports.getFocusedListItemIndex = exports.getActiveElement = exports.executeInTheNextEventLoopTick = void 0;
+exports.executeInTheNextEventLoopTick = void 0;
+exports.extractRootForwardedProps = extractRootForwardedProps;
+exports.getFocusedListItemIndex = exports.getActiveElement = void 0;
 exports.mergeSx = mergeSx;
 exports.onSpaceOrEnter = void 0;
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
@@ -70,6 +72,21 @@ const getFocusedListItemIndex = listElement => {
 };
 exports.getFocusedListItemIndex = getFocusedListItemIndex;
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = exports.DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
+
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+function extractRootForwardedProps(props) {
+  const forwardedProps = {};
+  for (const key of Object.keys(props)) {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      forwardedProps[key] = props[key];
+    }
+  }
+  return forwardedProps;
+}
 function mergeSx(...sxProps) {
   return sxProps.reduce((acc, sxProp) => {
     if (Array.isArray(sxProp)) {

package/internals/utils/utils.mjs

@@ -55,6 +55,21 @@ export const getFocusedListItemIndex = listElement => {
   return children.indexOf(getActiveElement(listElement));
 };
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
+
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+export function extractRootForwardedProps(props) {
+  const forwardedProps = {};
+  for (const key of Object.keys(props)) {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      forwardedProps[key] = props[key];
+    }
+  }
+  return forwardedProps;
+}
 export function mergeSx(...sxProps) {
   return sxProps.reduce((acc, sxProp) => {
     if (Array.isArray(sxProp)) {