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

package/modern/internals/components/PickersArrowSwitcher.js

@@ -0,0 +1,89 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "components", "componentsProps", "isLeftDisabled", "isLeftHidden", "isRightDisabled", "isRightHidden", "leftArrowButtonText", "onLeftClick", "onRightClick", "rightArrowButtonText"];
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import { useTheme, styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { ArrowLeft, ArrowRight } from './icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersArrowSwitcherRoot = styled('div')({
+  display: 'flex'
+});
+const PickersArrowSwitcherSpacer = styled('div')(({
+  theme
+}) => ({
+  width: theme.spacing(3)
+}));
+const PickersArrowSwitcherButton = styled(IconButton)(({
+  ownerState
+}) => _extends({}, ownerState.hidden && {
+  visibility: 'hidden'
+}));
+export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(props, ref) {
+  const {
+    children,
+    className,
+    components = {},
+    componentsProps = {},
+    isLeftDisabled,
+    isLeftHidden,
+    isRightDisabled,
+    isRightHidden,
+    leftArrowButtonText,
+    onLeftClick,
+    onRightClick,
+    rightArrowButtonText
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const theme = useTheme();
+  const isRtl = theme.direction === 'rtl';
+  const leftArrowButtonProps = componentsProps.leftArrowButton || {};
+  const LeftArrowIcon = components.LeftArrowIcon || ArrowLeft;
+  const rightArrowButtonProps = componentsProps.rightArrowButton || {};
+  const RightArrowIcon = components.RightArrowIcon || ArrowRight;
+  const ownerState = props;
+  return /*#__PURE__*/_jsxs(PickersArrowSwitcherRoot, _extends({
+    ref: ref,
+    className: className,
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(PickersArrowSwitcherButton, _extends({
+      as: components.LeftArrowButton,
+      size: "small",
+      "aria-label": leftArrowButtonText,
+      title: leftArrowButtonText,
+      disabled: isLeftDisabled,
+      edge: "end",
+      onClick: onLeftClick
+    }, leftArrowButtonProps, {
+      className: leftArrowButtonProps.className,
+      ownerState: _extends({}, ownerState, leftArrowButtonProps, {
+        hidden: isLeftHidden
+      }),
+      children: isRtl ? /*#__PURE__*/_jsx(RightArrowIcon, {}) : /*#__PURE__*/_jsx(LeftArrowIcon, {})
+    })), children ? /*#__PURE__*/_jsx(Typography, {
+      variant: "subtitle1",
+      component: "span",
+      children: children
+    }) : /*#__PURE__*/_jsx(PickersArrowSwitcherSpacer, {
+      ownerState: ownerState
+    }), /*#__PURE__*/_jsx(PickersArrowSwitcherButton, _extends({
+      as: components.RightArrowButton,
+      size: "small",
+      "aria-label": rightArrowButtonText,
+      title: rightArrowButtonText,
+      edge: "start",
+      disabled: isRightDisabled,
+      onClick: onRightClick
+    }, rightArrowButtonProps, {
+      className: rightArrowButtonProps.className,
+      ownerState: _extends({}, ownerState, rightArrowButtonProps, {
+        hidden: isRightHidden
+      }),
+      children: isRtl ? /*#__PURE__*/_jsx(LeftArrowIcon, {}) : /*#__PURE__*/_jsx(RightArrowIcon, {})
+    }))]
+  }));
+});

package/modern/internals/components/PickersModalDialog.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import Dialog, { dialogClasses } from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
+import { DIALOG_WIDTH } from '../constants/dimensions';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersModalDialogRoot = styled(Dialog)({
+  [`& .${dialogClasses.container}`]: {
+    outline: 0
+  },
+  [`& .${dialogClasses.paper}`]: {
+    outline: 0,
+    minWidth: DIALOG_WIDTH
+  }
+});
+const PickersModalDialogContent = styled(DialogContent)({
+  '&:first-of-type': {
+    padding: 0
+  }
+});
+const PickersModalDialogActions = styled(DialogActions)(({
+  ownerState
+}) => _extends({}, (ownerState.clearable || ownerState.showTodayButton) && {
+  // set justifyContent to default value to fix IE11 layout bug
+  // see https://github.com/mui-org/material-ui-pickers/pull/267
+  justifyContent: 'flex-start',
+  '& > *:first-of-type': {
+    marginRight: 'auto'
+  }
+}));
+export const PickersModalDialog = props => {
+  const {
+    cancelText = 'Cancel',
+    children,
+    clearable = false,
+    clearText = 'Clear',
+    DialogProps = {},
+    okText = 'OK',
+    onAccept,
+    onClear,
+    onDismiss,
+    onSetToday,
+    open,
+    showTodayButton = false,
+    todayText = 'Today'
+  } = props;
+  const ownerState = props;
+  return /*#__PURE__*/_jsxs(PickersModalDialogRoot, _extends({
+    open: open,
+    onClose: onDismiss
+  }, DialogProps, {
+    children: [/*#__PURE__*/_jsx(PickersModalDialogContent, {
+      children: children
+    }), /*#__PURE__*/_jsxs(PickersModalDialogActions, {
+      ownerState: ownerState,
+      children: [clearable && /*#__PURE__*/_jsx(Button, {
+        onClick: onClear,
+        children: clearText
+      }), showTodayButton && /*#__PURE__*/_jsx(Button, {
+        onClick: onSetToday,
+        children: todayText
+      }), cancelText && /*#__PURE__*/_jsx(Button, {
+        onClick: onDismiss,
+        children: cancelText
+      }), okText && /*#__PURE__*/_jsx(Button, {
+        onClick: onAccept,
+        children: okText
+      })]
+    })]
+  }));
+};

package/modern/internals/components/PickersPopper.js

@@ -0,0 +1,262 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["onClick", "onTouchStart"];
+import * as React from 'react';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import { useForkRef, useEventCallback, ownerDocument } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersPopperRoot = styled(Popper)(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal
+}));
+const PickersPopperPaper = styled(Paper)(({
+  ownerState
+}) => _extends({
+  transformOrigin: 'top center',
+  outline: 0
+}, ownerState.placement === 'top' && {
+  transformOrigin: 'bottom center'
+}));
+const PickersPopperAction = styled(DialogActions)(({
+  ownerState
+}) => _extends({}, ownerState.clearable ? {
+  justifyContent: 'flex-start',
+  '& > *:first-of-type': {
+    marginRight: 'auto'
+  }
+} : {
+  padding: 0
+}));
+
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+
+/**
+ * Based on @mui/material/ClickAwayListener without the customization.
+ * We can probably strip away even more since children won't be portaled.
+ * @param {boolean} active Only listen to clicks when the popper is opened.
+ * @param {(event: MouseEvent | TouchEvent) => void} onClickAway The callback to call when clicking outside the popper.
+ * @returns {Array} The ref and event handler to listen to the outside clicks.
+ */
+function useClickAwayListener(active, onClickAway) {
+  const movedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!active) {
+      return undefined;
+    } // Ensure that this hook is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+
+
+    function armClickAwayListener() {
+      activatedRef.current = true;
+    }
+
+    document.addEventListener('mousedown', armClickAwayListener, true);
+    document.addEventListener('touchstart', armClickAwayListener, true);
+    return () => {
+      document.removeEventListener('mousedown', armClickAwayListener, true);
+      document.removeEventListener('touchstart', armClickAwayListener, true);
+      activatedRef.current = false;
+    };
+  }, [active]); // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+
+  const handleClickAway = useEventCallback(event => {
+    if (!activatedRef.current) {
+      return;
+    } // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+
+
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current); // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+
+    if (!nodeRef.current || // is a TouchEvent?
+    'clientX' in event && clickedRootScrollbar(event, doc)) {
+      return;
+    } // Do not act if user performed touchmove
+
+
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+
+    let insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
+    }
+
+    if (!insideDOM && !insideReactTree) {
+      onClickAway(event);
+    }
+  }); // Keep track of mouse/touch events that bubbled up through the portal.
+
+  const handleSynthetic = () => {
+    syntheticEventRef.current = true;
+  };
+
+  React.useEffect(() => {
+    if (active) {
+      const doc = ownerDocument(nodeRef.current);
+
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+
+      doc.addEventListener('touchstart', handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener('touchstart', handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+
+    return undefined;
+  }, [active, handleClickAway]);
+  React.useEffect(() => {
+    // TODO This behavior is not tested automatically
+    // It's unclear whether this is due to different update semantics in test (batched in act() vs discrete on click).
+    // Or if this is a timing related issues due to different Transition components
+    // Once we get rid of all the manual scheduling (e.g. setTimeout(update, 0)) we can revisit this code+test.
+    if (active) {
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener('click', handleClickAway);
+      return () => {
+        doc.removeEventListener('click', handleClickAway); // cleanup `handleClickAway`
+
+        syntheticEventRef.current = false;
+      };
+    }
+
+    return undefined;
+  }, [active, handleClickAway]);
+  return [nodeRef, handleSynthetic, handleSynthetic];
+}
+
+export const PickersPopper = props => {
+  const {
+    anchorEl,
+    children,
+    containerRef = null,
+    onClose,
+    onClear,
+    clearable = false,
+    clearText = 'Clear',
+    open,
+    PopperProps,
+    role,
+    TransitionComponent = Grow,
+    TrapFocusProps,
+    PaperProps = {}
+  } = props;
+  React.useEffect(() => {
+    function handleKeyDown(nativeEvent) {
+      // IE11, Edge (prior to using Bink?) use 'Esc'
+      if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+        onClose();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+  const lastFocusedElementRef = React.useRef(null);
+  React.useEffect(() => {
+    if (role === 'tooltip') {
+      return;
+    }
+
+    if (open) {
+      lastFocusedElementRef.current = document.activeElement;
+    } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
+      lastFocusedElementRef.current.focus();
+    }
+  }, [open, role]);
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onClose);
+  const paperRef = React.useRef(null);
+  const handleRef = useForkRef(paperRef, containerRef);
+  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
+  const ownerState = props;
+
+  const {
+    onClick: onPaperClickProp,
+    onTouchStart: onPaperTouchStartProp
+  } = PaperProps,
+        otherPaperProps = _objectWithoutPropertiesLoose(PaperProps, _excluded);
+
+  return /*#__PURE__*/_jsx(PickersPopperRoot, _extends({
+    transition: true,
+    role: role,
+    open: open,
+    anchorEl: anchorEl,
+    ownerState: ownerState
+  }, PopperProps, {
+    children: ({
+      TransitionProps,
+      placement
+    }) => /*#__PURE__*/_jsx(TrapFocus, _extends({
+      open: open,
+      disableAutoFocus: true,
+      disableEnforceFocus: role === 'tooltip',
+      isEnabled: () => true
+    }, TrapFocusProps, {
+      children: /*#__PURE__*/_jsx(TransitionComponent, _extends({}, TransitionProps, {
+        children: /*#__PURE__*/_jsxs(PickersPopperPaper, _extends({
+          tabIndex: -1,
+          elevation: 8,
+          ref: handlePaperRef,
+          onClick: event => {
+            onPaperClick(event);
+
+            if (onPaperClickProp) {
+              onPaperClickProp(event);
+            }
+          },
+          onTouchStart: event => {
+            onPaperTouchStart(event);
+
+            if (onPaperTouchStartProp) {
+              onPaperTouchStartProp(event);
+            }
+          },
+          ownerState: _extends({}, ownerState, {
+            placement
+          })
+        }, otherPaperProps, {
+          children: [children, /*#__PURE__*/_jsx(PickersPopperAction, {
+            ownerState: ownerState,
+            children: clearable && /*#__PURE__*/_jsx(Button, {
+              onClick: onClear,
+              children: clearText
+            })
+          })]
+        }))
+      }))
+    }))
+  }));
+};

package/modern/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/modern/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/modern/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/modern/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
+};