@mui/x-date-pickers 8.0.0-alpha.2 → 8.0.0-alpha.4

package/modern/internals/components/PickersToolbarText.js

@@ -1,35 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "selected", "value"];
+const _excluded = ["className", "classes", "selected", "value"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
+import { getPickersToolbarTextUtilityClass } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = styled(Typography, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -40,14 +34,18 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

package/modern/internals/hooks/useOpenState.js

@@ -5,7 +5,7 @@ export const useOpenState = ({
   onClose
 }) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -14,22 +14,23 @@ export const useOpenState = ({
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React.useCallback(newIsOpen => {
+  const setOpen = React.useCallback(action => {
+    const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
-      setIsOpenState(newIsOpen);
+      setOpenState(newOpen);
     }
-    if (newIsOpen && onOpen) {
+    if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newIsOpen && onClose) {
+    if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose]);
+  }, [isControllingOpenProp, onOpen, onClose, openState]);
   return {
-    isOpen: openState,
-    setIsOpen
+    open: openState,
+    setOpen
   };
 };

package/modern/internals/hooks/usePicker/usePicker.js

@@ -37,11 +37,11 @@ export const usePicker = ({
   });
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
     // Picker value
@@ -50,7 +50,7 @@ export const usePicker = ({
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.hasUIView,
+    hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),

package/modern/internals/hooks/usePicker/usePickerProvider.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
@@ -36,31 +37,28 @@ export const usePickerOrientation = (views, customOrientation) => {
 export function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
   const utils = useUtils();
-  const orientation = usePickerOrientation(views, props.orientation);
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
+    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
+  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);
@@ -72,6 +70,10 @@ export function usePickerProvider(parameters) {
 }
 
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
+ */
+
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
  */

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -150,8 +150,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -237,7 +237,7 @@ export const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -288,11 +288,11 @@ export const usePickerValue = ({
   });
   const handleOpen = useEventCallback(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = useEventCallback(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -323,12 +323,12 @@ export const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -340,16 +340,27 @@ export const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = _extends({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -11,10 +11,6 @@ import { isTimeView } from "../../utils/time-utils.js";
  * Props used to handle the views that are common to all pickers.
  */
 
-/**
- * Props used to handle the views of the pickers.
- */
-
 /**
  * Props used to handle the value of the pickers.
  */
@@ -132,11 +128,14 @@ export const usePickerViews = ({
     view: popperView,
     onViewChange: setView
   };
-  return {
+  const providerParams = {
     hasUIView,
-    views,
+    views
+  };
+  return {
     shouldRestoreFocus,
     layoutProps,
+    provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
         return null;

package/modern/internals/hooks/useToolbarOwnerState.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
+export function useToolbarOwnerState() {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    toolbarDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, isRtl]);
+}

package/modern/internals/index.js

@@ -16,6 +16,7 @@ export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
 export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
+export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
@@ -29,4 +30,5 @@ export { useDefaultReduceAnimations } from "./hooks/useDefaultReduceAnimations.j
 export { applyDefaultViewProps } from "./utils/views.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
-export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
+export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
+export { DateTimePickerToolbarForceDesktopVariant } from "../DateTimePicker/DateTimePickerToolbar.js";

package/modern/locales/roRO.js

@@ -17,11 +17,10 @@ const roROPickers = {
   // DateRange labels
   start: 'Început',
   end: 'Sfârșit',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Data de început',
+  startTime: 'Ora de început',
+  endDate: 'Data de sfârșit',
+  endTime: 'Ora de sfârșit',
   // Action bar
   cancelButtonLabel: 'Anulare',
   clearButtonLabel: 'Ștergere',
@@ -55,23 +54,21 @@ const roROPickers = {
   fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'LLLL' : 'LL',
   fieldDayPlaceholder: () => 'ZZ',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'ZZZZ' : 'ZZ',
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'An',
+  month: 'Luna',
+  day: 'Ziua',
+  weekDay: 'Ziua saptămânii',
+  hours: 'Ore',
+  minutes: 'Minute',
+  seconds: 'Secunde',
+  meridiem: 'Meridiem',
   // Common
-  // empty: 'Empty',
+  empty: 'Gol'
 };
 export const roRO = getPickersLocalization(roROPickers);

package/node/DatePicker/DatePickerToolbar.js

@@ -20,12 +20,10 @@ var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "onViewChange", "view"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "classes", "onViewChange", "view"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     title: ['title']
@@ -44,7 +42,7 @@ const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
 })({
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: 'auto 16px auto auto'
@@ -72,12 +70,14 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const classes = useUtilityClasses(props);
+  const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
+  const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
     if (!value) {
       return toolbarPlaceholder;
@@ -88,7 +88,6 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
     }, true);
     return utils.formatByString(value, formatFromViews);
   }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
-  const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarRoot, (0, _extends2.default)({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,