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

package/internals/components/PickersToolbar.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BaseToolbarProps } from '../models/props/baseToolbarProps';
+export interface PickersToolbarProps<TDate> extends Pick<BaseToolbarProps<TDate>, 'getMobileKeyboardInputViewButtonText' | 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView'> {
+    className?: string;
+    viewType?: 'calendar' | 'clock';
+    isLandscape: boolean;
+    landscapeDirection?: 'row' | 'column';
+    penIconClassName?: string;
+    toolbarTitle: React.ReactNode;
+}
+declare type PickersToolbarComponent = (<TDate>(props: React.PropsWithChildren<PickersToolbarProps<TDate>> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+export declare const PickersToolbar: PickersToolbarComponent;
+export {};

package/internals/components/PickersToolbar.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { Pen, Calendar, Clock } from './icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const classes = generateUtilityClasses('PrivatePickersToolbar', ['root', 'dateTitleContainer']);
+const PickersToolbarRoot = styled('div')(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  padding: theme.spacing(2, 3)
+}, ownerState.isLandscape && {
+  height: 'auto',
+  maxWidth: 160,
+  padding: 16,
+  justifyContent: 'flex-start',
+  flexWrap: 'wrap'
+}));
+const PickersToolbarGrid = styled(Grid)({
+  flex: 1
+});
+
+const getViewTypeIcon = viewType => viewType === 'clock' ? /*#__PURE__*/_jsx(Clock, {
+  color: "inherit"
+}) : /*#__PURE__*/_jsx(Calendar, {
+  color: "inherit"
+});
+
+function defaultGetKeyboardInputSwitchingButtonText(isKeyboardInputOpen, viewType) {
+  return isKeyboardInputOpen ? `text input view is open, go to ${viewType} view` : `${viewType} view is open, go to text input view`;
+}
+
+export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(props, ref) {
+  const {
+    children,
+    className,
+    getMobileKeyboardInputViewButtonText = defaultGetKeyboardInputSwitchingButtonText,
+    isLandscape,
+    isMobileKeyboardViewOpen,
+    landscapeDirection = 'column',
+    penIconClassName,
+    toggleMobileKeyboardView,
+    toolbarTitle,
+    viewType = 'calendar'
+  } = props;
+  const ownerState = props;
+  return /*#__PURE__*/_jsxs(PickersToolbarRoot, {
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      color: "text.secondary",
+      variant: "overline",
+      children: toolbarTitle
+    }), /*#__PURE__*/_jsxs(PickersToolbarGrid, {
+      container: true,
+      justifyContent: "space-between",
+      className: classes.dateTitleContainer,
+      direction: isLandscape ? landscapeDirection : 'row',
+      alignItems: isLandscape ? 'flex-start' : 'flex-end',
+      children: [children, /*#__PURE__*/_jsx(IconButton, {
+        onClick: toggleMobileKeyboardView,
+        className: penIconClassName,
+        color: "inherit",
+        "aria-label": getMobileKeyboardInputViewButtonText(isMobileKeyboardViewOpen, viewType),
+        children: isMobileKeyboardViewOpen ? getViewTypeIcon(viewType) : /*#__PURE__*/_jsx(Pen, {
+          color: "inherit"
+        })
+      })]
+    })]
+  });
+});

package/internals/components/PickersToolbarButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { TypographyProps } from '@mui/material/Typography';
+import { ExtendMui } from '../models/helpers';
+export interface PickersToolbarButtonProps extends ExtendMui<ButtonProps, 'value' | 'variant'> {
+    align?: TypographyProps['align'];
+    selected: boolean;
+    typographyClassName?: string;
+    value: React.ReactNode;
+    variant: TypographyProps['variant'];
+}
+export declare const PickersToolbarButton: React.FunctionComponent<PickersToolbarButtonProps>;

package/internals/components/PickersToolbarButton.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant"];
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import { PickersToolbarText } from './PickersToolbarText';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersToolbarButtonRoot = styled(Button)({
+  padding: 0,
+  minWidth: 16,
+  textTransform: 'none'
+});
+export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function PickersToolbarButton(props, ref) {
+  const {
+    align,
+    className,
+    selected,
+    typographyClassName,
+    value,
+    variant
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
+    variant: "text",
+    ref: ref,
+    className: className
+  }, other, {
+    children: /*#__PURE__*/_jsx(PickersToolbarText, {
+      align: align,
+      className: typographyClassName,
+      variant: variant,
+      value: value,
+      selected: selected
+    })
+  }));
+});

package/internals/components/PickersToolbarText.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'> {
+    selected?: boolean;
+    value: React.ReactNode;
+}
+export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "p" | "slot" | "style" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;

package/internals/components/PickersToolbarText.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "selected", "value"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+const classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']);
+const PickersToolbarTextRoot = styled(Typography)(({
+  theme
+}) => ({
+  transition: theme.transitions.create('color'),
+  color: theme.palette.text.secondary,
+  [`&.${classes.selected}`]: {
+    color: theme.palette.text.primary
+  }
+}));
+export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function PickersToolbarText(props, ref) {
+  const {
+    className,
+    selected,
+    value
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
+    ref: ref,
+    className: clsx(className, selected && classes.selected),
+    component: "span"
+  }, other, {
+    children: value
+  }));
+});

package/internals/components/PureDateInput.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { TextFieldProps as MuiTextFieldPropsType } from '@mui/material/TextField';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { InputAdornmentProps } from '@mui/material/InputAdornment';
+import { ParseableDate } from '../models/parseableDate';
+import { MuiPickersAdapter } from '../models';
+export declare type MuiTextFieldProps = MuiTextFieldPropsType | Omit<MuiTextFieldPropsType, 'variant'>;
+export interface DateInputProps<TInputValue = ParseableDate<unknown>, TDateValue = unknown> {
+    /**
+     * Regular expression to detect "accepted" symbols.
+     * @default /\dap/gi
+     */
+    acceptRegex?: RegExp;
+    /**
+     * The components used for each slot.
+     * Either a string to use a HTML element or a component.
+     */
+    components?: {
+        OpenPickerIcon?: React.ElementType;
+    };
+    disabled?: boolean;
+    /**
+     * Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.
+     * @default false
+     */
+    disableMaskedInput?: boolean;
+    /**
+     * Do not render open picker button (renders only text field with validation).
+     * @default false
+     */
+    disableOpenPicker?: boolean;
+    /**
+     * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
+     * @default (value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`
+     * @param {ParseableDate<TDateValue>} value The date from which we want to add an aria-text.
+     * @param {MuiPickersAdapter<TDateValue>} utils The utils to manipulate the date.
+     * @returns {string} The aria-text to render inside the dialog.
+     */
+    getOpenDialogAriaText?: (value: ParseableDate<TDateValue>, utils: MuiPickersAdapter<TDateValue>) => string;
+    ignoreInvalidInputs?: boolean;
+    /**
+     * Props to pass to keyboard input adornment.
+     */
+    InputAdornmentProps?: Partial<InputAdornmentProps>;
+    inputFormat: string;
+    InputProps?: MuiTextFieldProps['InputProps'];
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    label?: MuiTextFieldProps['label'];
+    /**
+     * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
+     */
+    mask?: string;
+    onBlur?: () => void;
+    onChange: (date: TDateValue, keyboardInputValue?: string) => void;
+    open: boolean;
+    openPicker: () => void;
+    /**
+     * Props to pass to keyboard adornment button.
+     */
+    OpenPickerButtonProps?: Partial<IconButtonProps>;
+    rawValue: TInputValue;
+    readOnly?: boolean;
+    /**
+     * The `renderInput` prop allows you to customize the rendered input.
+     * The `props` argument of this render prop contains props of [TextField](https://mui.com/api/text-field/#textfield-api) that you need to forward.
+     * Pay specific attention to the `ref` and `inputProps` keys.
+     * @example ```jsx
+     * renderInput={props => <TextField {...props} />}
+     * ````
+     * @param {MuiTextFieldPropsType} props The props of the input.
+     * @returns {React.ReactNode} The node to render as the input.
+     */
+    renderInput: (props: MuiTextFieldPropsType) => React.ReactElement;
+    /**
+     * Custom formatter to be passed into Rifm component.
+     * @param {string} str The un-formatted string.
+     * @returns {string} The formatted string.
+     */
+    rifmFormatter?: (str: string) => string;
+    TextFieldProps?: Partial<MuiTextFieldProps>;
+    validationError?: boolean;
+}
+export declare type ExportedDateInputProps<TInputValue, TDateValue> = Omit<DateInputProps<TInputValue, TDateValue>, 'inputFormat' | 'inputValue' | 'onBlur' | 'onChange' | 'open' | 'openPicker' | 'rawValue' | 'TextFieldProps' | 'validationError'>;
+export declare const PureDateInput: React.ForwardRefExoticComponent<DateInputProps<unknown, unknown> & React.RefAttributes<HTMLDivElement>>;

package/internals/components/PureDateInput.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { onSpaceOrEnter } from '../utils/utils';
+import { useUtils } from '../hooks/useUtils';
+import { getDisplayDate, getTextFieldAriaText } from '../utils/text-field-helper';
+// TODO: why is this called "Pure*" when it's not memoized? Does "Pure" mean "readonly"?
+export const PureDateInput = /*#__PURE__*/React.forwardRef(function PureDateInput(props, ref) {
+  const {
+    disabled,
+    getOpenDialogAriaText = getTextFieldAriaText,
+    inputFormat,
+    InputProps,
+    inputRef,
+    label,
+    openPicker: onOpen,
+    rawValue,
+    renderInput,
+    TextFieldProps = {},
+    validationError
+  } = props;
+  const utils = useUtils();
+  const PureDateInputProps = React.useMemo(() => _extends({}, InputProps, {
+    readOnly: true
+  }), [InputProps]);
+  const inputValue = getDisplayDate(utils, rawValue, inputFormat);
+  return renderInput(_extends({
+    label,
+    disabled,
+    ref,
+    inputRef,
+    error: validationError,
+    InputProps: PureDateInputProps,
+    inputProps: _extends({
+      disabled,
+      readOnly: true,
+      'aria-readonly': true,
+      'aria-label': getOpenDialogAriaText(rawValue, utils),
+      value: inputValue
+    }, !props.readOnly && {
+      onClick: onOpen
+    }, {
+      onKeyDown: onSpaceOrEnter(onOpen)
+    })
+  }, TextFieldProps));
+});
+PureDateInput.propTypes = {
+  getOpenDialogAriaText: PropTypes.func,
+  renderInput: PropTypes.func.isRequired
+};

package/internals/components/icons/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @ignore - internal component.
+ */
+export declare const ArrowDropDown: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const ArrowLeft: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const ArrowRight: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const Calendar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const Clock: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const DateRange: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const Pen: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const Time: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/internals/components/icons/index.js

@@ -0,0 +1,68 @@
+import { createSvgIcon } from '@mui/material/utils';
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ArrowDropDown = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M7 10l5 5 5-5z"
+}), 'ArrowDropDown');
+/**
+ * @ignore - internal component.
+ */
+
+export const ArrowLeft = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+}), 'ArrowLeft');
+/**
+ * @ignore - internal component.
+ */
+
+export const ArrowRight = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+}), 'ArrowRight');
+/**
+ * @ignore - internal component.
+ */
+
+export const Calendar = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+}), 'Calendar');
+/**
+ * @ignore - internal component.
+ */
+
+export const Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+  })]
+}), 'Clock');
+/**
+ * @ignore - internal component.
+ */
+
+export const DateRange = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
+}), 'DateRange');
+/**
+ * @ignore - internal component.
+ */
+
+export const Pen = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+}), 'Pen');
+/**
+ * @ignore - internal component.
+ */
+
+export const Time = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+  })]
+}), 'Time');

package/internals/components/wrappers/DesktopTooltipWrapper.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InternalDesktopWrapperProps } from './DesktopWrapper';
+export declare function DesktopTooltipWrapper(props: InternalDesktopWrapperProps): JSX.Element;

package/internals/components/wrappers/DesktopTooltipWrapper.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useForkRef } from '@mui/material/utils';
+import { WrapperVariantContext } from './WrapperVariantContext';
+import { executeInTheNextEventLoopTick } from '../../utils/utils';
+import { PickersPopper } from '../PickersPopper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function DesktopTooltipWrapper(props) {
+  const {
+    children,
+    DateInputProps,
+    KeyboardDateInputComponent,
+    onDismiss,
+    open,
+    PopperProps,
+    TransitionComponent
+  } = props;
+  const inputContainerRef = React.useRef(null);
+  const popperRef = React.useRef(null);
+
+  const handleBlur = () => {
+    executeInTheNextEventLoopTick(() => {
+      var _inputContainerRef$cu, _popperRef$current;
+
+      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(document.activeElement) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(document.activeElement)) {
+        return;
+      }
+
+      onDismiss();
+    });
+  };
+
+  const inputComponentRef = useForkRef(DateInputProps.ref, inputContainerRef);
+  return /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
+    value: "desktop",
+    children: [/*#__PURE__*/_jsx(KeyboardDateInputComponent, _extends({}, DateInputProps, {
+      ref: inputComponentRef,
+      onBlur: handleBlur
+    })), /*#__PURE__*/_jsx(PickersPopper, {
+      role: "tooltip",
+      open: open,
+      containerRef: popperRef,
+      anchorEl: inputContainerRef.current,
+      TransitionComponent: TransitionComponent,
+      PopperProps: PopperProps,
+      onBlur: handleBlur,
+      onClose: onDismiss,
+      children: children
+    })]
+  });
+}

package/internals/components/wrappers/DesktopWrapper.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ExportedPickerPopperProps, ExportedPickerPaperProps } from '../PickersPopper';
+import { DateInputPropsLike, PrivateWrapperProps } from './WrapperProps';
+export interface DesktopWrapperProps extends ExportedPickerPopperProps, ExportedPickerPaperProps {
+    children?: React.ReactNode;
+}
+export interface InternalDesktopWrapperProps extends DesktopWrapperProps, PrivateWrapperProps {
+    DateInputProps: DateInputPropsLike & {
+        ref?: React.Ref<HTMLDivElement>;
+    };
+    KeyboardDateInputComponent: React.JSXElementConstructor<DateInputPropsLike & {
+        ref?: React.Ref<HTMLDivElement>;
+    }>;
+}
+export declare function DesktopWrapper(props: InternalDesktopWrapperProps): JSX.Element;

package/internals/components/wrappers/DesktopWrapper.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useForkRef } from '@mui/material/utils';
+import { WrapperVariantContext } from './WrapperVariantContext';
+import { PickersPopper } from '../PickersPopper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function DesktopWrapper(props) {
+  const {
+    children,
+    DateInputProps,
+    KeyboardDateInputComponent,
+    onDismiss,
+    open,
+    PopperProps,
+    PaperProps,
+    TransitionComponent,
+    onClear,
+    clearText,
+    clearable
+  } = props;
+  const ownInputRef = React.useRef(null);
+  const inputRef = useForkRef(DateInputProps.inputRef, ownInputRef);
+  return /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
+    value: "desktop",
+    children: [/*#__PURE__*/_jsx(KeyboardDateInputComponent, _extends({}, DateInputProps, {
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickersPopper, {
+      role: "dialog",
+      open: open,
+      anchorEl: ownInputRef.current,
+      TransitionComponent: TransitionComponent,
+      PopperProps: PopperProps,
+      PaperProps: PaperProps,
+      onClose: onDismiss,
+      onClear: onClear,
+      clearText: clearText,
+      clearable: clearable,
+      children: children
+    })]
+  });
+}

package/internals/components/wrappers/MobileWrapper.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ExportedPickerModalProps } from '../PickersModalDialog';
+import { PrivateWrapperProps, DateInputPropsLike } from './WrapperProps';
+export interface MobileWrapperProps extends ExportedPickerModalProps {
+    children?: React.ReactNode;
+}
+export interface InternalMobileWrapperProps extends MobileWrapperProps, PrivateWrapperProps {
+    DateInputProps: DateInputPropsLike & {
+        ref?: React.Ref<HTMLDivElement>;
+    };
+    PureDateInputComponent: React.JSXElementConstructor<DateInputPropsLike>;
+}
+export declare function MobileWrapper(props: InternalMobileWrapperProps): JSX.Element;

package/internals/components/wrappers/MobileWrapper.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["cancelText", "children", "clearable", "clearText", "DateInputProps", "DialogProps", "okText", "onAccept", "onClear", "onDismiss", "onSetToday", "open", "PureDateInputComponent", "showTodayButton", "todayText"];
+import * as React from 'react';
+import { WrapperVariantContext } from './WrapperVariantContext';
+import { PickersModalDialog } from '../PickersModalDialog';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function MobileWrapper(props) {
+  const {
+    cancelText,
+    children,
+    clearable,
+    clearText,
+    DateInputProps,
+    DialogProps,
+    okText,
+    onAccept,
+    onClear,
+    onDismiss,
+    onSetToday,
+    open,
+    PureDateInputComponent,
+    showTodayButton,
+    todayText
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
+    value: "mobile",
+    children: [/*#__PURE__*/_jsx(PureDateInputComponent, _extends({}, other, DateInputProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+      cancelText: cancelText,
+      clearable: clearable,
+      clearText: clearText,
+      DialogProps: DialogProps,
+      okText: okText,
+      onAccept: onAccept,
+      onClear: onClear,
+      onDismiss: onDismiss,
+      onSetToday: onSetToday,
+      open: open,
+      showTodayButton: showTodayButton,
+      todayText: todayText,
+      children: children
+    })]
+  });
+}