@mui/lab 5.0.0-alpha.74 → 5.0.0-alpha.77

package/DateTimePicker/DateTimePickerToolbar.js

@@ -1,139 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
-var _DateTimePickerToolba, _DateTimePickerToolba2;
-
-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/base';
-import PickersToolbarText from '../internal/pickers/PickersToolbarText';
-import PickersToolbar from '../internal/pickers/PickersToolbar';
-import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
-import DateTimePickerTabs from './DateTimePickerTabs';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import { WrapperVariantContext } from '../internal/pickers/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.
- */
-
-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: [_DateTimePickerToolba || (_DateTimePickerToolba = /*#__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: [_DateTimePickerToolba2 || (_DateTimePickerToolba2 = /*#__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
-    })]
-  });
-};
-
-export default DateTimePickerToolbar;

package/DateTimePicker/shared.d.ts

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { ExportedClockPickerProps } from '../ClockPicker/ClockPicker';
-import { ExportedCalendarPickerProps } from '../CalendarPicker/CalendarPicker';
-import { DateTimeValidationError, ValidationProps } from '../internal/pickers/hooks/useValidation';
-import { ParseableDate } from '../internal/pickers/constants/prop-types';
-import { BasePickerProps, ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
-import { ExportedDateInputProps } from '../internal/pickers/PureDateInput';
-export declare type DateTimePickerView = 'year' | 'day' | 'month' | 'hours' | 'minutes' | 'seconds';
-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.
-     */
-    onViewChange?: (view: DateTimePickerView) => void;
-    /**
-     * First view to show.
-     */
-    openTo?: DateTimePickerView;
-    /**
-     * Component that will replace default toolbar renderer.
-     * @default DateTimePickerToolbar
-     */
-    ToolbarComponent?: React.JSXElementConstructor<ToolbarComponentProps<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 DateTimePickerView[];
-}
-declare type DefaultizedProps<Props> = Props & {
-    inputFormat: string;
-};
-export declare function useDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps<unknown>>({ ampm, inputFormat, maxDate: maxDateProp, maxDateTime, maxTime, minDate: minDateProp, minDateTime, minTime, openTo, orientation, views, ...other }: Props, name: string): DefaultizedProps<Props> & Required<Pick<BaseDateTimePickerProps<unknown>, 'openTo' | 'views'>>;
-export {};

package/DateTimePicker/shared.js

@@ -1,58 +0,0 @@
-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 '../internal/pickers/hooks/useUtils';
-import { pick12hOr24hFormat } from '../internal/pickers/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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { BaseDatePickerProps } from '../DatePicker/shared';
-import { DesktopWrapperProps } from '../internal/pickers/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/date-picker/)
- *
- * API:
- *
- * - [DesktopDatePicker API](https://mui.com/api/desktop-date-picker/)
- */
-declare const DesktopDatePicker: DesktopDatePickerComponent;
-export default DesktopDatePicker;