@mui/x-date-pickers 7.6.0 → 7.6.2

package/node/TimePicker/TimePickerToolbar.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TimePickerToolbar = TimePickerToolbar;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _PickersToolbarText = require("../internals/components/PickersToolbarText");
@@ -26,14 +27,14 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
-    theme,
     isLandscape,
-    classes
+    classes,
+    isRtl
   } = ownerState;
   const slots = {
     root: ['root'],
     separator: ['separator'],
-    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', theme.direction === 'rtl' && 'hourMinuteLabelReverse'],
+    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', isRtl && 'hourMinuteLabelReverse'],
     ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
@@ -60,16 +61,18 @@ const TimePickerToolbarHourMinuteLabel = (0, _styles.styled)('div', {
     [`&.${_timePickerToolbarClasses.timePickerToolbarClasses.hourMinuteLabelLandscape}`]: styles.hourMinuteLabelLandscape,
     [`&.${_timePickerToolbarClasses.timePickerToolbarClasses.hourMinuteLabelReverse}`]: styles.hourMinuteLabelReverse
   }, styles.hourMinuteLabel]
-})(({
-  theme
-}) => (0, _extends2.default)({
+})({
   display: 'flex',
   justifyContent: 'flex-end',
-  alignItems: 'flex-end'
-}, theme.direction === 'rtl' && {
-  flexDirection: 'row-reverse'
-}, {
+  alignItems: 'flex-end',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
+  }, {
     props: {
       isLandscape: true
     },
@@ -77,7 +80,7 @@ const TimePickerToolbarHourMinuteLabel = (0, _styles.styled)('div', {
       marginTop: 'auto'
     }
   }]
-}));
+});
 const TimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'AmPmSelection',
@@ -138,17 +141,17 @@ function TimePickerToolbar(inProps) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
   const localeText = (0, _useUtils.useLocaleText)();
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
     handleMeridiemChange
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const ownerState = props;
-  const classes = useUtilityClasses((0, _extends2.default)({}, ownerState, {
-    theme
-  }));
+  const ownerState = (0, _extends2.default)({}, props, {
+    isRtl
+  });
+  const classes = useUtilityClasses(ownerState);
   const separator = /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",

package/node/YearCalendar/YearCalendar.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _PickersYear = require("./PickersYear");
@@ -113,7 +113,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     valueManager: _valueManagers.singleItemValueManager
   });
   const now = (0, _useUtils.useNow)(timezone);
-  const theme = (0, _system.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const utils = (0, _useUtils.useUtils)();
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
@@ -193,11 +193,11 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusYear(year + (theme.direction === 'ltr' ? -1 : 1));
+        focusYear(year + (isRtl ? 1 : -1));
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusYear(year + (theme.direction === 'ltr' ? 1 : -1));
+        focusYear(year + (isRtl ? -1 : 1));
         event.preventDefault();
         break;
       default:

package/node/index.js

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

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _utils2 = require("@mui/base/utils");
@@ -64,8 +65,7 @@ const useUtilityClasses = ownerState => {
   return (0, _utils.unstable_composeClasses)(slots, _pickersArrowSwitcherClasses.getPickersArrowSwitcherUtilityClass, classes);
 };
 const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiPickersArrowSwitcher'
@@ -161,7 +161,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
     ownerState: ownerState
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousIconButton, (0, _extends2.default)({}, previousIconButtonProps, {
-      children: isRTL ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RightArrowIcon, (0, _extends2.default)({}, rightArrowIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LeftArrowIcon, (0, _extends2.default)({}, leftArrowIconProps))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RightArrowIcon, (0, _extends2.default)({}, rightArrowIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LeftArrowIcon, (0, _extends2.default)({}, leftArrowIconProps))
     })), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: "subtitle1",
       component: "span",
@@ -170,7 +170,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       className: classes.spacer,
       ownerState: ownerState
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NextIconButton, (0, _extends2.default)({}, nextIconButtonProps, {
-      children: isRTL ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LeftArrowIcon, (0, _extends2.default)({}, leftArrowIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RightArrowIcon, (0, _extends2.default)({}, rightArrowIconProps))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LeftArrowIcon, (0, _extends2.default)({}, leftArrowIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RightArrowIcon, (0, _extends2.default)({}, rightArrowIconProps))
     }))]
   }));
 });

package/node/internals/hooks/useField/buildSectionsFromFormat.js

@@ -224,14 +224,14 @@ const buildSections = params => {
   return sections;
 };
 const postProcessSections = ({
-  isRTL,
+  isRtl,
   formatDensity,
   sections
 }) => {
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
-      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRtl && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
@@ -246,7 +246,7 @@ const postProcessSections = ({
 };
 const buildSectionsFromFormat = params => {
   let expandedFormat = expandFormat(params);
-  if (params.isRTL && params.enableAccessibleFieldDOMStructure) {
+  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
   const escapedParts = getEscapedPartsFromFormat((0, _extends2.default)({}, params, {

package/node/internals/hooks/useField/useField.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useValidation = require("../useValidation");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
@@ -40,8 +40,7 @@ const useField = params => {
     valueManager,
     validator
   } = params;
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const stateResponse = (0, _useFieldState.useFieldState)(params);
   const {
     state,
@@ -69,7 +68,7 @@ const useField = params => {
   } = characterEditingResponse;
   const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
   const useFieldTextField = enableAccessibleFieldDOMStructure ? _useFieldV7TextField.useFieldV7TextField : _useFieldV6TextField.useFieldV6TextField;
-  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRTL && !enableAccessibleFieldDOMStructure), [state.sections, isRTL, enableAccessibleFieldDOMStructure]);
+  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
   const {
     returnedValue,
     interactions

package/node/internals/hooks/useField/useField.utils.js

@@ -210,8 +210,9 @@ const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoun
       return options[options.length - 1];
     }
     const currentOptionIndex = options.indexOf(section.value);
-    const newOptionIndex = (currentOptionIndex + options.length + delta) % options.length;
-    return options[newOptionIndex];
+    const newOptionIndex = (currentOptionIndex + delta) % options.length;
+    const clampedIndex = (newOptionIndex + options.length) % options.length;
+    return options[clampedIndex];
   };
   if (section.contentType === 'digit' || section.contentType === 'digit-with-letter') {
     return adjustDigitSection();
@@ -327,13 +328,13 @@ const createDateStrForV7HiddenInputFromSections = sections => sections.map(secti
   return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
 }).join('');
 exports.createDateStrForV7HiddenInputFromSections = createDateStrForV7HiddenInputFromSections;
-const createDateStrForV6InputFromSections = (sections, localizedDigits, isRTL) => {
+const createDateStrForV6InputFromSections = (sections, localizedDigits, isRtl) => {
   const formattedSections = sections.map(section => {
-    const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
+    const dateValue = getSectionVisibleValue(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
   });
   const dateStr = formattedSections.join('');
-  if (!isRTL) {
+  if (!isRtl) {
     return dateStr;
   }
 

package/node/internals/hooks/useField/useFieldState.js

@@ -8,7 +8,7 @@ exports.useFieldState = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
 var _buildSectionsFromFormat = require("./buildSectionsFromFormat");
@@ -20,8 +20,7 @@ const useFieldState = params => {
   const utils = (0, _useUtils.useUtils)();
   const localeText = (0, _useUtils.useLocaleText)();
   const adapter = (0, _useUtils.useLocalizationContext)();
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     valueManager,
     fieldValueManager,
@@ -65,8 +64,8 @@ const useFieldState = params => {
     formatDensity,
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure,
-    isRTL
-  })), [fieldValueManager, format, localeText, localizedDigits, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
+    isRtl
+  })), [fieldValueManager, format, localeText, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     (0, _useField.validateSections)(sections, valueType);
@@ -173,7 +172,7 @@ const useFieldState = params => {
         formatDensity,
         shouldRespectLeadingZeros,
         enableAccessibleFieldDOMStructure,
-        isRTL
+        isRtl
       });
       return (0, _useField.mergeDateIntoReferenceDate)(utils, timezone, date, sections, referenceDate, false);
     };
@@ -243,7 +242,7 @@ const useFieldState = params => {
     setState(prevState => (0, _extends2.default)({}, prevState, {
       sections
     }));
-  }, [format, utils.locale, isRTL]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [format, utils.locale, isRtl]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
     let shouldUpdate;

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFieldV6TextField = exports.addPositionPropertiesToSections = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _utils = require("../../utils/utils");
@@ -15,13 +15,13 @@ var _useField = require("./useField.utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-const addPositionPropertiesToSections = (sections, localizedDigits, isRTL) => {
+const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
   let position = 0;
-  let positionInInput = isRTL ? 1 : 0;
+  let positionInInput = isRtl ? 1 : 0;
   const newSections = [];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const renderedValue = (0, _useField.getSectionVisibleValue)(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
+    const renderedValue = (0, _useField.getSectionVisibleValue)(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
     const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
     const sectionLength = cleanString(sectionStr).length;
     const sectionLengthInInput = sectionStr.length;
@@ -44,8 +44,7 @@ const addPositionPropertiesToSections = (sections, localizedDigits, isRTL) => {
 };
 exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
 const useFieldV6TextField = params => {
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const focusTimeoutRef = React.useRef();
   const {
     forwardedProps: {
@@ -78,7 +77,7 @@ const useFieldV6TextField = params => {
   } = params;
   const inputRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(inputRefProp, inputRef);
-  const sections = React.useMemo(() => addPositionPropertiesToSections(state.sections, localizedDigits, isRTL), [state.sections, localizedDigits, isRTL]);
+  const sections = React.useMemo(() => addPositionPropertiesToSections(state.sections, localizedDigits, isRtl), [state.sections, localizedDigits, isRtl]);
   const interactions = React.useMemo(() => ({
     syncSelectionToDOM: () => {
       if (!inputRef.current) {
@@ -251,7 +250,7 @@ const useFieldV6TextField = params => {
     if (parsedSelectedSections === 'all' && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = cleanString(fieldValueManager.getV6InputValueFromSections(sections, localizedDigits, isRTL));
+      const prevValueStr = cleanString(fieldValueManager.getV6InputValueFromSections(sections, localizedDigits, isRtl));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -291,9 +290,9 @@ const useFieldV6TextField = params => {
     if (inPlaceholder !== undefined) {
       return inPlaceholder;
     }
-    return fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL);
-  }, [inPlaceholder, fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
+    return fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRtl);
+  }, [inPlaceholder, fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRtl]);
+  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)) {

package/node/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePickerLayoutProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useIsLandscape = require("../useIsLandscape");
 /**
  * Props used to create the layout of the views.
@@ -25,8 +26,10 @@ const usePickerLayoutProps = ({
     orientation
   } = props;
   const isLandscape = (0, _useIsLandscape.useIsLandscape)(propsFromPickerViews.views, orientation);
+  const isRtl = (0, _RtlProvider.useRtl)();
   const layoutProps = (0, _extends2.default)({}, propsFromPickerViews, propsFromPickerValue, {
     isLandscape,
+    isRtl,
     wrapperVariant,
     disabled: props.disabled,
     readOnly: props.readOnly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.6.0",
+  "version": "7.6.2",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",