"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.areDayPropsEqual = exports.PickersDay = void 0; var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var React = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _clsx = _interopRequireDefault(require("clsx")); var _ButtonBase = _interopRequireDefault(require("@mui/material/ButtonBase")); var _utils = require("@mui/utils"); var _material = require("@mui/material"); var _styles = require("@mui/material/styles"); var _utils2 = require("@mui/material/utils"); var _useUtils = require("../internals/hooks/useUtils"); var _dimensions = require("../internals/constants/dimensions"); var _pickersDayClasses = require("./pickersDayClasses"); var _jsxRuntime = require("react/jsx-runtime"); const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today"]; 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 { selected, disableMargin, disableHighlightToday, today, disabled, outsideCurrentMonth, showDaysOutsideCurrentMonth, classes } = ownerState; const slots = { root: ['root', selected && 'selected', disabled && 'disabled', !disableMargin && 'dayWithMargin', !disableHighlightToday && today && 'today', outsideCurrentMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth', outsideCurrentMonth && !showDaysOutsideCurrentMonth && 'hiddenDaySpacingFiller'], hiddenDaySpacingFiller: ['hiddenDaySpacingFiller'] }; return (0, _material.unstable_composeClasses)(slots, _pickersDayClasses.getPickersDayUtilityClass, classes); }; const styleArg = ({ theme, ownerState }) => (0, _extends2.default)({}, theme.typography.caption, { width: _dimensions.DAY_SIZE, height: _dimensions.DAY_SIZE, borderRadius: '50%', padding: 0, // background required here to prevent collides with the other days when animating with transition group backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, '&:hover': { backgroundColor: (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity) }, '&:focus': { backgroundColor: (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity), [`&.${_pickersDayClasses.pickersDayClasses.selected}`]: { willChange: 'background-color', backgroundColor: theme.palette.primary.dark } }, [`&.${_pickersDayClasses.pickersDayClasses.selected}`]: { color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, fontWeight: theme.typography.fontWeightMedium, transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.short }), '&:hover': { willChange: 'background-color', backgroundColor: theme.palette.primary.dark } }, [`&.${_pickersDayClasses.pickersDayClasses.disabled}`]: { color: theme.palette.text.disabled } }, !ownerState.disableMargin && { margin: `0 ${_dimensions.DAY_MARGIN}px` }, ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && { color: theme.palette.text.secondary }, !ownerState.disableHighlightToday && ownerState.today && { [`&:not(.${_pickersDayClasses.pickersDayClasses.selected})`]: { border: `1px solid ${theme.palette.text.secondary}` } }); const overridesResolver = (props, styles) => { const { ownerState } = props; return [styles.root, !ownerState.disableMargin && styles.dayWithMargin, !ownerState.disableHighlightToday && ownerState.today && styles.today, !ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && styles.dayOutsideMonth, ownerState.outsideCurrentMonth && !ownerState.showDaysOutsideCurrentMonth && styles.hiddenDaySpacingFiller]; }; const PickersDayRoot = (0, _styles.styled)(_ButtonBase.default, { name: 'MuiPickersDay', slot: 'Root', overridesResolver })(styleArg); const PickersDayFiller = (0, _styles.styled)('div', { name: 'MuiPickersDay', slot: 'Root', overridesResolver })(({ theme, ownerState }) => (0, _extends2.default)({}, styleArg({ theme, ownerState }), { // visibility: 'hidden' does not work here as it hides the element from screen readers as well opacity: 0, pointerEvents: 'none' })); const noop = () => {}; const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps, forwardedRef) { const props = (0, _styles.useThemeProps)({ props: inProps, name: 'MuiPickersDay' }); const { autoFocus = false, className, day, disabled = false, disableHighlightToday = false, disableMargin = false, isAnimating, onClick, onDaySelect, onFocus = noop, onBlur = noop, onKeyDown = noop, onMouseDown, outsideCurrentMonth, selected = false, showDaysOutsideCurrentMonth = false, children, today: isToday = false } = props, other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); const ownerState = (0, _extends2.default)({}, props, { autoFocus, disabled, disableHighlightToday, disableMargin, selected, showDaysOutsideCurrentMonth, today: isToday }); const classes = useUtilityClasses(ownerState); const utils = (0, _useUtils.useUtils)(); const ref = React.useRef(null); const handleRef = (0, _utils2.useForkRef)(ref, forwardedRef); // Since this is rendered when a Popper is opened we can't use passive effects. // Focusing in passive effects in Popper causes scroll jump. (0, _utils.unstable_useEnhancedEffect)(() => { if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) { // ref.current being null would be a bug in MUI ref.current.focus(); } }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]); // For day outside of current month, move focus from mouseDown to mouseUp // Goal: have the onClick ends before sliding to the new month const handleMouseDown = event => { if (onMouseDown) { onMouseDown(event); } if (outsideCurrentMonth) { event.preventDefault(); } }; const handleClick = event => { if (!disabled) { onDaySelect(day, 'finish'); } if (outsideCurrentMonth) { event.currentTarget.focus(); } if (onClick) { onClick(event); } }; if (outsideCurrentMonth && !showDaysOutsideCurrentMonth) { return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersDayFiller, { className: (0, _clsx.default)(classes.root, classes.hiddenDaySpacingFiller, className), ownerState: ownerState, role: other.role }); } return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersDayRoot, (0, _extends2.default)({ className: (0, _clsx.default)(classes.root, className), ownerState: ownerState, ref: handleRef, centerRipple: true, disabled: disabled, tabIndex: selected ? 0 : -1, onKeyDown: event => onKeyDown(event, day), onFocus: event => onFocus(event, day), onBlur: event => onBlur(event, day), onClick: handleClick, onMouseDown: handleMouseDown }, other, { children: !children ? utils.format(day, 'dayOfMonth') : children })); }); const areDayPropsEqual = (prevProps, nextProps) => { return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.sx === nextProps.sx && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.onDaySelect === nextProps.onDaySelect; }; exports.areDayPropsEqual = areDayPropsEqual; process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** * Override or extend the styles applied to the component. */ classes: _propTypes.default.object, /** * The date to show. */ day: _propTypes.default.any.isRequired, /** * If `true`, renders as disabled. * @default false */ disabled: _propTypes.default.bool, /** * If `true`, today's date is rendering without highlighting with circle. * @default false */ disableHighlightToday: _propTypes.default.bool, /** * If `true`, days are rendering without margin. Useful for displaying linked range of days. * @default false */ disableMargin: _propTypes.default.bool, isAnimating: _propTypes.default.bool, onBlur: _propTypes.default.func, onDaySelect: _propTypes.default.func.isRequired, onFocus: _propTypes.default.func, onKeyDown: _propTypes.default.func, /** * If `true`, day is outside of month and will be hidden. */ outsideCurrentMonth: _propTypes.default.bool.isRequired, /** * If `true`, renders as selected. * @default false */ selected: _propTypes.default.bool, /** * If `true`, days that have `outsideCurrentMonth={true}` are displayed. * @default false */ showDaysOutsideCurrentMonth: _propTypes.default.bool, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]), /** * If `true`, renders as today date. * @default false */ today: _propTypes.default.bool } : void 0; /** * * Demos: * * - [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) * * API: * * - [PickersDay API](https://mui.com/x/api/date-pickers/pickers-day/) */ const PickersDay = /*#__PURE__*/React.memo(PickersDayRaw, areDayPropsEqual); exports.PickersDay = PickersDay;