@mui/x-date-pickers 5.0.0-alpha.0

package/DateTimePicker/DateTimePickerTabs.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Tab from '@mui/material/Tab';
+import Tabs, { tabsClasses } from '@mui/material/Tabs';
+import { styled } from '@mui/material/styles';
+import { Time, DateRange } from '../internals/components/icons';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const viewToTab = openView => {
+  if (['day', 'month', 'year'].includes(openView)) {
+    return 'date';
+  }
+
+  return 'time';
+};
+
+const tabToView = tab => {
+  if (tab === 'date') {
+    return 'day';
+  }
+
+  return 'hours';
+};
+
+const DateTimePickerTabsRoot = styled(Tabs)(({
+  ownerState,
+  theme
+}) => _extends({
+  boxShadow: `0 -1px 0 0 inset ${theme.palette.divider}`
+}, ownerState.wrapperVariant === 'desktop' && {
+  order: 1,
+  boxShadow: `0 1px 0 0 inset ${theme.palette.divider}`,
+  [`& .${tabsClasses.indicator}`]: {
+    bottom: 'auto',
+    top: 0
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+
+export const DateTimePickerTabs = props => {
+  const {
+    dateRangeIcon = /*#__PURE__*/_jsx(DateRange, {}),
+    onChange,
+    timeIcon = /*#__PURE__*/_jsx(Time, {}),
+    view
+  } = props;
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+
+  const ownerState = _extends({}, props, {
+    wrapperVariant
+  });
+
+  const handleChange = (event, value) => {
+    onChange(tabToView(value));
+  };
+
+  return /*#__PURE__*/_jsxs(DateTimePickerTabsRoot, {
+    ownerState: ownerState,
+    variant: "fullWidth",
+    value: viewToTab(view),
+    onChange: handleChange,
+    children: [/*#__PURE__*/_jsx(Tab, {
+      value: "date",
+      "aria-label": "pick date",
+      icon: /*#__PURE__*/_jsx(React.Fragment, {
+        children: dateRangeIcon
+      })
+    }), /*#__PURE__*/_jsx(Tab, {
+      value: "time",
+      "aria-label": "pick time",
+      icon: /*#__PURE__*/_jsx(React.Fragment, {
+        children: timeIcon
+      })
+    })]
+  });
+};

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
+/**
+ * @ignore - internal component.
+ */
+export declare const DateTimePickerToolbar: <TDate extends unknown>(props: BaseToolbarProps<TDate>) => JSX.Element;

package/DateTimePicker/DateTimePickerToolbar.js

@@ -0,0 +1,134 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ampm", "date", "dateRangeIcon", "hideTabs", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "timeIcon", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { PickersToolbarText } from '../internals/components/PickersToolbarText';
+import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
+import { DateTimePickerTabs } from './DateTimePickerTabs';
+import { useUtils } from '../internals/hooks/useUtils';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
+const DateTimePickerToolbarRoot = styled(PickersToolbar)({
+  paddingLeft: 16,
+  paddingRight: 16,
+  justifyContent: 'space-around',
+  [`& .${classes.penIcon}`]: {
+    position: 'absolute',
+    top: 8,
+    right: 8
+  }
+});
+const DateTimePickerToolbarDateContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start'
+});
+const DateTimePickerToolbarTimeContainer = styled('div')({
+  display: 'flex'
+});
+const DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
+  margin: '0 4px 0 2px',
+  cursor: 'default'
+});
+/**
+ * @ignore - internal component.
+ */
+
+export const DateTimePickerToolbar = props => {
+  const {
+    ampm,
+    date,
+    dateRangeIcon,
+    hideTabs,
+    isMobileKeyboardViewOpen,
+    openView,
+    setOpenView,
+    timeIcon,
+    toggleMobileKeyboardView,
+    toolbarFormat,
+    toolbarPlaceholder = '––',
+    toolbarTitle = 'Select date & time',
+    views
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const showTabs = wrapperVariant === 'desktop' ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
+
+  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
+
+  const dateText = React.useMemo(() => {
+    if (!date) {
+      return toolbarPlaceholder;
+    }
+
+    if (toolbarFormat) {
+      return utils.formatByString(date, toolbarFormat);
+    }
+
+    return utils.format(date, 'shortDate');
+  }, [date, toolbarFormat, toolbarPlaceholder, utils]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [wrapperVariant !== 'desktop' && /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
+      toolbarTitle: toolbarTitle,
+      penIconClassName: classes.penIcon,
+      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+      toggleMobileKeyboardView: toggleMobileKeyboardView
+    }, other, {
+      isLandscape: false,
+      children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
+        children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+          tabIndex: -1,
+          variant: "subtitle1",
+          onClick: () => setOpenView('year'),
+          selected: openView === 'year',
+          value: date ? utils.format(date, 'year') : '–'
+        }), views.includes('day') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+          tabIndex: -1,
+          variant: "h4",
+          onClick: () => setOpenView('day'),
+          selected: openView === 'day',
+          value: dateText
+        })]
+      }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
+        children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+          variant: "h3",
+          onClick: () => setOpenView('hours'),
+          selected: openView === 'hours',
+          value: date ? formatHours(date) : '--'
+        }), views.includes('minutes') && /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
+            variant: "h3",
+            value: ":"
+          }), /*#__PURE__*/_jsx(PickersToolbarButton, {
+            variant: "h3",
+            onClick: () => setOpenView('minutes'),
+            selected: openView === 'minutes',
+            value: date ? utils.format(date, 'minutes') : '--'
+          })]
+        }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
+            variant: "h3",
+            value: ":"
+          }), /*#__PURE__*/_jsx(PickersToolbarButton, {
+            variant: "h3",
+            onClick: () => setOpenView('seconds'),
+            selected: openView === 'seconds',
+            value: date ? utils.format(date, 'seconds') : '--'
+          })]
+        })]
+      })]
+    })), showTabs && /*#__PURE__*/_jsx(DateTimePickerTabs, {
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      view: openView,
+      onChange: setOpenView
+    })]
+  });
+};

package/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';

package/DateTimePicker/index.js

@@ -0,0 +1 @@
+export { DateTimePicker } from './DateTimePicker';

package/DateTimePicker/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/DateTimePicker/index.js",
+  "types": "./index.d.ts"
+}

package/DateTimePicker/shared.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { ExportedClockPickerProps } from '../ClockPicker/ClockPicker';
+import { ExportedCalendarPickerProps } from '../CalendarPicker/CalendarPicker';
+import { DateTimeValidationError } from '../internals/hooks/validation/useDateTimeValidation';
+import { ValidationProps } from '../internals/hooks/validation/useValidation';
+import { ParseableDate } from '../internals/models/parseableDate';
+import { BasePickerProps } from '../internals/models/props/basePickerProps';
+import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
+import { ExportedDateInputProps } from '../internals/components/PureDateInput';
+import { CalendarOrClockPickerView } from '../internals/models';
+export interface BaseDateTimePickerProps<TDate> extends ExportedClockPickerProps<TDate>, ExportedCalendarPickerProps<TDate>, BasePickerProps<ParseableDate<TDate>, TDate | null>, ValidationProps<DateTimeValidationError, ParseableDate<TDate>>, ExportedDateInputProps<ParseableDate<TDate>, TDate | null> {
+    /**
+     * The components used for each slot.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: ExportedCalendarPickerProps<TDate>['components'] & ExportedDateInputProps<ParseableDate<TDate>, TDate | null>['components'];
+    /**
+     * To show tabs.
+     */
+    hideTabs?: boolean;
+    /**
+     * Date tab icon.
+     */
+    dateRangeIcon?: React.ReactNode;
+    /**
+     * Time tab icon.
+     */
+    timeIcon?: React.ReactNode;
+    /**
+     * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
+     */
+    minDateTime?: TDate;
+    /**
+     * Minimal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
+     */
+    maxDateTime?: TDate;
+    /**
+     * Callback fired on view change.
+     * @param {CalendarOrClockPickerView} view The new view.
+     */
+    onViewChange?: (view: CalendarOrClockPickerView) => void;
+    /**
+     * First view to show.
+     */
+    openTo?: CalendarOrClockPickerView;
+    /**
+     * Component that will replace default toolbar renderer.
+     * @default DateTimePickerToolbar
+     */
+    ToolbarComponent?: React.JSXElementConstructor<BaseToolbarProps<TDate | null>>;
+    /**
+     * Mobile picker title, displaying in the toolbar.
+     * @default 'Select date & time'
+     */
+    toolbarTitle?: React.ReactNode;
+    /**
+     * Date format, that is displaying in toolbar.
+     */
+    toolbarFormat?: string;
+    /**
+     * Array of views to show.
+     */
+    views?: readonly CalendarOrClockPickerView[];
+}
+declare type DefaultizedProps<Props> = Props & {
+    inputFormat: string;
+};
+export declare function useDateTimePickerDefaultizedProps<TDate, Props extends BaseDateTimePickerProps<TDate>>({ ampm, inputFormat, maxDate: maxDateProp, maxDateTime, maxTime, minDate: minDateProp, minDateTime, minTime, openTo, orientation, views, ...other }: Props, name: string): DefaultizedProps<Props> & Required<Pick<BaseDateTimePickerProps<TDate>, 'openTo' | 'views'>>;
+export {};

package/DateTimePicker/shared.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ampm", "inputFormat", "maxDate", "maxDateTime", "maxTime", "minDate", "minDateTime", "minTime", "openTo", "orientation", "views"];
+import { useThemeProps } from '@mui/material/styles';
+import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
+import { pick12hOr24hFormat } from '../internals/utils/text-field-helper';
+export function useDateTimePickerDefaultizedProps(_ref, name) {
+  let {
+    ampm,
+    inputFormat,
+    maxDate: maxDateProp,
+    maxDateTime,
+    maxTime,
+    minDate: minDateProp,
+    minDateTime,
+    minTime,
+    openTo = 'day',
+    orientation = 'portrait',
+    views = ['year', 'day', 'hours', 'minutes']
+  } = _ref,
+      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
+  const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
+  const willUseAmPm = ampm != null ? ampm : utils.is12HourCycleInCurrentLocale();
+
+  if (orientation !== 'portrait') {
+    throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
+  }
+
+  return useThemeProps({
+    props: _extends({
+      openTo,
+      views,
+      ampm: willUseAmPm,
+      ampmInClock: true,
+      orientation,
+      showToolbar: true,
+      allowSameDateSelection: true,
+      minDate: minDateTime != null ? minDateTime : minDate,
+      minTime: minDateTime != null ? minDateTime : minTime,
+      maxDate: maxDateTime != null ? maxDateTime : maxDate,
+      maxTime: maxDateTime != null ? maxDateTime : maxTime,
+      disableIgnoringDatePartForTimeValidation: Boolean(minDateTime || maxDateTime),
+      acceptRegex: willUseAmPm ? /[\dap]/gi : /\d/gi,
+      mask: '__/__/____ __:__',
+      disableMaskedInput: willUseAmPm,
+      inputFormat: pick12hOr24hFormat(inputFormat, willUseAmPm, {
+        localized: utils.formats.keyboardDateTime,
+        '12h': utils.formats.keyboardDateTime12h,
+        '24h': utils.formats.keyboardDateTime24h
+      })
+    }, other),
+    name
+  });
+}

package/DesktopDatePicker/DesktopDatePicker.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BaseDatePickerProps } from '../DatePicker/shared';
+import { DesktopWrapperProps } from '../internals/components/wrappers/DesktopWrapper';
+export interface DesktopDatePickerProps<TDate = unknown> extends BaseDatePickerProps<TDate>, DesktopWrapperProps {
+}
+declare type DesktopDatePickerComponent = (<TDate>(props: DesktopDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://mui.com/components/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ *
+ * - [DesktopDatePicker API](https://mui.com/api/desktop-date-picker/)
+ */
+export declare const DesktopDatePicker: DesktopDatePickerComponent;
+export {};