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

package/node/YearPicker/PickersYear.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersYear = void 0;
+exports.getPickersYearUtilityClass = getPickersYearUtilityClass;
+exports.pickersYearClasses = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _utils = require("@mui/material/utils");
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVariantContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function getPickersYearUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('PrivatePickersYear', slot);
+}
+
+const pickersYearClasses = (0, _material.generateUtilityClasses)('PrivatePickersYear', ['root', 'modeMobile', 'modeDesktop', 'yearButton', 'disabled', 'selected']);
+exports.pickersYearClasses = pickersYearClasses;
+
+const useUtilityClasses = ownerState => {
+  const {
+    wrapperVariant,
+    disabled,
+    selected,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', wrapperVariant && `mode${(0, _utils.capitalize)(wrapperVariant)}`],
+    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
+  };
+  return (0, _material.unstable_composeClasses)(slots, getPickersYearUtilityClass, classes);
+};
+
+const PickersYearRoot = (0, _styles.styled)('div')(({
+  ownerState
+}) => (0, _extends2.default)({
+  flexBasis: '33.3%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}, (ownerState == null ? void 0 : ownerState.wrapperVariant) === 'desktop' && {
+  flexBasis: '25%'
+}));
+const PickersYearButton = (0, _styles.styled)('button')(({
+  theme
+}) => (0, _extends2.default)({
+  color: 'unset',
+  backgroundColor: 'transparent',
+  border: 0,
+  outline: 0
+}, theme.typography.subtitle1, {
+  margin: '8px 0',
+  height: 36,
+  width: 72,
+  borderRadius: 18,
+  cursor: 'pointer',
+  '&:focus, &:hover': {
+    backgroundColor: (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+  },
+  [`&.${pickersYearClasses.disabled}`]: {
+    color: theme.palette.text.secondary
+  },
+  [`&.${pickersYearClasses.selected}`]: {
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.main,
+    '&:focus, &:hover': {
+      backgroundColor: theme.palette.primary.dark
+    }
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+
+const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
+  const {
+    autoFocus,
+    className,
+    children,
+    disabled,
+    onClick,
+    onKeyDown,
+    selected,
+    value
+  } = props;
+  const ref = React.useRef(null);
+  const refHandle = (0, _utils.useForkRef)(ref, forwardedRef);
+  const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
+  const ownerState = (0, _extends2.default)({}, props, {
+    wrapperVariant
+  });
+  const classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
+
+  React.useEffect(() => {
+    if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUIu
+      ref.current.focus();
+    }
+  }, [autoFocus]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersYearRoot, {
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersYearButton, {
+      ref: refHandle,
+      disabled: disabled,
+      type: "button",
+      tabIndex: selected ? 0 : -1,
+      onClick: event => onClick(event, value),
+      onKeyDown: event => onKeyDown(event, value),
+      className: classes.yearButton,
+      ownerState: ownerState,
+      children: children
+    })
+  });
+});
+exports.PickersYear = PickersYear;

package/node/YearPicker/YearPicker.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YearPicker = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _PickersYear = require("./PickersYear");
+
+var _useUtils = require("../internals/hooks/useUtils");
+
+var _dateUtils = require("../internals/utils/date-utils");
+
+var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVariantContext");
+
+var _yearPickerClasses = require("./yearPickerClasses");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _yearPickerClasses.getYearPickerUtilityClass, classes);
+};
+
+const YearPickerRoot = (0, _styles.styled)('div', {
+  name: 'MuiYearPicker',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflowY: 'auto',
+  height: '100%',
+  margin: '0 4px'
+});
+const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiYearPicker'
+  });
+  const {
+    autoFocus,
+    className,
+    date,
+    disabled,
+    disableFuture,
+    disablePast,
+    isDateDisabled,
+    maxDate,
+    minDate,
+    onChange,
+    onFocusedDayChange,
+    onYearChange,
+    readOnly,
+    shouldDisableYear
+  } = props;
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+  const now = (0, _useUtils.useNow)();
+  const theme = (0, _styles.useTheme)();
+  const utils = (0, _useUtils.useUtils)();
+  const selectedDate = date || now;
+  const currentYear = utils.getYear(selectedDate);
+  const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
+  const selectedYearRef = React.useRef(null);
+  const [focusedYear, setFocusedYear] = React.useState(currentYear);
+
+  const handleYearSelection = (event, year, isFinish = 'finish') => {
+    if (readOnly) {
+      return;
+    }
+
+    const submitDate = newDate => {
+      onChange(newDate, isFinish);
+
+      if (onFocusedDayChange) {
+        onFocusedDayChange(newDate || now);
+      }
+
+      if (onYearChange) {
+        onYearChange(newDate);
+      }
+    };
+
+    const newDate = utils.setYear(selectedDate, year);
+
+    if (isDateDisabled(newDate)) {
+      const closestEnabledDate = (0, _dateUtils.findClosestEnabledDate)({
+        utils,
+        date: newDate,
+        minDate,
+        maxDate,
+        disablePast: Boolean(disablePast),
+        disableFuture: Boolean(disableFuture),
+        shouldDisableDate: isDateDisabled
+      });
+      submitDate(closestEnabledDate || now);
+    } else {
+      submitDate(newDate);
+    }
+  };
+
+  const focusYear = React.useCallback(year => {
+    if (!isDateDisabled(utils.setYear(selectedDate, year))) {
+      setFocusedYear(year);
+    }
+  }, [selectedDate, isDateDisabled, utils]);
+  const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
+
+  const handleKeyDown = (event, year) => {
+    switch (event.key) {
+      case 'ArrowUp':
+        focusYear(year - yearsInRow);
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        focusYear(year + yearsInRow);
+        event.preventDefault();
+        break;
+
+      case 'ArrowLeft':
+        focusYear(year + (theme.direction === 'ltr' ? -1 : 1));
+        event.preventDefault();
+        break;
+
+      case 'ArrowRight':
+        focusYear(year + (theme.direction === 'ltr' ? 1 : -1));
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(YearPickerRoot, {
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState,
+    children: utils.getYearRange(minDate, maxDate).map(year => {
+      const yearNumber = utils.getYear(year);
+      const selected = yearNumber === currentYear;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersYear.PickersYear, {
+        selected: selected,
+        value: yearNumber,
+        onClick: handleYearSelection,
+        onKeyDown: handleKeyDown,
+        autoFocus: autoFocus && yearNumber === focusedYear,
+        ref: selected ? selectedYearRef : undefined,
+        disabled: disabled || disablePast && utils.isBeforeYear(year, now) || disableFuture && utils.isAfterYear(year, now) || shouldDisableYear && shouldDisableYear(year),
+        children: utils.format(year, 'year')
+      }, utils.format(year, 'year'));
+    })
+  });
+});
+exports.YearPicker = YearPicker;
+process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  autoFocus: _propTypes.default.bool,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  date: _propTypes.default.any,
+  disabled: _propTypes.default.bool,
+  disableFuture: _propTypes.default.bool,
+  disablePast: _propTypes.default.bool,
+  isDateDisabled: _propTypes.default.func.isRequired,
+  maxDate: _propTypes.default.any.isRequired,
+  minDate: _propTypes.default.any.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onFocusedDayChange: _propTypes.default.func,
+
+  /**
+   * Callback firing on year change @DateIOType.
+   * @param {TDate} year The new year.
+   */
+  onYearChange: _propTypes.default.func,
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * Disable specific years dynamically.
+   * Works like `shouldDisableDate` but for year selection view @DateIOType.
+   * @param {TDate} year The year to test.
+   * @returns {boolean} Return `true` if the year should be disabled.
+   */
+  shouldDisableYear: _propTypes.default.func
+} : void 0;

package/node/YearPicker/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "YearPicker", {
+  enumerable: true,
+  get: function () {
+    return _YearPicker.YearPicker;
+  }
+});
+Object.defineProperty(exports, "getYearPickerUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _yearPickerClasses.getYearPickerUtilityClass;
+  }
+});
+Object.defineProperty(exports, "yearPickerClasses", {
+  enumerable: true,
+  get: function () {
+    return _yearPickerClasses.yearPickerClasses;
+  }
+});
+
+var _YearPicker = require("./YearPicker");
+
+var _yearPickerClasses = require("./yearPickerClasses");

package/node/YearPicker/yearPickerClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getYearPickerUtilityClass = getYearPickerUtilityClass;
+exports.yearPickerClasses = void 0;
+
+var _material = require("@mui/material");
+
+function getYearPickerUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('MuiYearPicker', slot);
+}
+
+const yearPickerClasses = (0, _material.generateUtilityClasses)('MuiYearPicker', ['root']);
+exports.yearPickerClasses = yearPickerClasses;

package/node/index.js

@@ -0,0 +1,257 @@
+/** @license MUI v5.0.0-alpha.0
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _CalendarPicker = require("./CalendarPicker");
+
+Object.keys(_CalendarPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CalendarPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CalendarPicker[key];
+    }
+  });
+});
+
+var _CalendarPickerSkeleton = require("./CalendarPickerSkeleton");
+
+Object.keys(_CalendarPickerSkeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CalendarPickerSkeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CalendarPickerSkeleton[key];
+    }
+  });
+});
+
+var _ClockPicker = require("./ClockPicker");
+
+Object.keys(_ClockPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ClockPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ClockPicker[key];
+    }
+  });
+});
+
+var _DatePicker = require("./DatePicker");
+
+Object.keys(_DatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DatePicker[key];
+    }
+  });
+});
+
+var _DateTimePicker = require("./DateTimePicker");
+
+Object.keys(_DateTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateTimePicker[key];
+    }
+  });
+});
+
+var _DesktopDatePicker = require("./DesktopDatePicker");
+
+Object.keys(_DesktopDatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DesktopDatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DesktopDatePicker[key];
+    }
+  });
+});
+
+var _DesktopDateTimePicker = require("./DesktopDateTimePicker");
+
+Object.keys(_DesktopDateTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DesktopDateTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DesktopDateTimePicker[key];
+    }
+  });
+});
+
+var _DesktopTimePicker = require("./DesktopTimePicker");
+
+Object.keys(_DesktopTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DesktopTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DesktopTimePicker[key];
+    }
+  });
+});
+
+var _LocalizationProvider = require("./LocalizationProvider");
+
+Object.keys(_LocalizationProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LocalizationProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LocalizationProvider[key];
+    }
+  });
+});
+
+var _MobileDatePicker = require("./MobileDatePicker");
+
+Object.keys(_MobileDatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MobileDatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MobileDatePicker[key];
+    }
+  });
+});
+
+var _MobileDateTimePicker = require("./MobileDateTimePicker");
+
+Object.keys(_MobileDateTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MobileDateTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MobileDateTimePicker[key];
+    }
+  });
+});
+
+var _MobileTimePicker = require("./MobileTimePicker");
+
+Object.keys(_MobileTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MobileTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MobileTimePicker[key];
+    }
+  });
+});
+
+var _MonthPicker = require("./MonthPicker");
+
+Object.keys(_MonthPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MonthPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MonthPicker[key];
+    }
+  });
+});
+
+var _PickersDay = require("./PickersDay");
+
+Object.keys(_PickersDay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PickersDay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersDay[key];
+    }
+  });
+});
+
+var _StaticDatePicker = require("./StaticDatePicker");
+
+Object.keys(_StaticDatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StaticDatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StaticDatePicker[key];
+    }
+  });
+});
+
+var _StaticDateTimePicker = require("./StaticDateTimePicker");
+
+Object.keys(_StaticDateTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StaticDateTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StaticDateTimePicker[key];
+    }
+  });
+});
+
+var _StaticTimePicker = require("./StaticTimePicker");
+
+Object.keys(_StaticTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StaticTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StaticTimePicker[key];
+    }
+  });
+});
+
+var _TimePicker = require("./TimePicker");
+
+Object.keys(_TimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TimePicker[key];
+    }
+  });
+});
+
+var _YearPicker = require("./YearPicker");
+
+Object.keys(_YearPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _YearPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _YearPicker[key];
+    }
+  });
+});