@mui/x-date-pickers
Version:
The community edition of the MUI X Date and Time Picker components.
355 lines (353 loc) • 14.4 kB
JavaScript
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PickersTextField = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _warning = require("@mui/x-internals/warning");
var _styles = require("@mui/material/styles");
var _refType = _interopRequireDefault(require("@mui/utils/refType"));
var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
var _PickersOutlinedInput = require("./PickersOutlinedInput");
var _PickersFilledInput = require("./PickersFilledInput");
var _PickersInput = require("./PickersInput");
var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
var _usePickerTextFieldOwnerState = require("./usePickerTextFieldOwnerState");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "label", "slots", "slotProps", "data-active-range-position"];
const VARIANT_COMPONENT = {
standard: _PickersInput.PickersInput,
filled: _PickersFilledInput.PickersFilledInput,
outlined: _PickersOutlinedInput.PickersOutlinedInput
};
const PickersTextFieldRoot = (0, _styles.styled)(_FormControl.default, {
name: 'MuiPickersTextField',
slot: 'Root'
})({
maxWidth: '100%'
});
const useUtilityClasses = (classes, ownerState) => {
const {
isFieldFocused,
isFieldDisabled,
isFieldRequired
} = ownerState;
const slots = {
root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldRequired && 'required']
};
return (0, _composeClasses.default)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
};
const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
const props = (0, _styles.useThemeProps)({
props: inProps,
name: 'MuiPickersTextField'
});
// TODO v10: remove
if (process.env.NODE_ENV !== 'production') {
const legacyProps = inProps;
if (legacyProps.InputProps || legacyProps.inputProps || legacyProps.InputLabelProps || legacyProps.FormHelperTextProps) {
(0, _warning.warnOnce)(['MUI X: `PickersTextField` no longer supports the `InputProps`, `inputProps`, `InputLabelProps` and `FormHelperTextProps` props.', 'They are silently dropped, which can hide configuration bugs in JavaScript codebases that do not benefit from TypeScript checks.', 'Use `slotProps.input`, `slotProps.htmlInput`, `slotProps.inputLabel` and `slotProps.formHelperText` instead.', 'You can run the `migrate-text-field-props` codemod to migrate automatically.']);
}
}
const {
// Props used by FormControl
onFocus,
onBlur,
className,
classes: classesProp,
color = 'primary',
disabled = false,
error = false,
variant = 'outlined',
required = false,
hiddenLabel = false,
// Props used by PickersInput
inputRef,
sectionListRef,
elements,
areAllSectionsEmpty,
onClick,
onKeyDown,
onKeyUp,
onPaste,
onInput,
endAdornment,
startAdornment,
tabIndex,
contentEditable,
focused,
value,
onChange,
fullWidth,
id: idProp,
name,
// Props used by FormHelperText
helperText,
// Props used by InputLabel
label,
// Slot system
slots,
slotProps,
// @ts-ignore
'data-active-range-position': dataActiveRangePosition
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const rootRef = React.useRef(null);
const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
const id = (0, _useId.default)(idProp);
const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
const inputLabelId = label && id ? `${id}-label` : undefined;
const inputSlotProps = slotProps?.input;
const inputLabelSlotProps = slotProps?.inputLabel;
const fieldOwnerState = (0, _useFieldOwnerState.useFieldOwnerState)({
disabled: props.disabled,
required: props.required,
readOnly: inputSlotProps?.readOnly
});
const ownerState = React.useMemo(() => (0, _extends2.default)({}, fieldOwnerState, {
isFieldValueEmpty: areAllSectionsEmpty,
isFieldFocused: focused ?? false,
hasFieldError: error ?? false,
inputSize: props.size ?? 'medium',
inputColor: color ?? 'primary',
isInputInFullWidth: fullWidth ?? false,
hasStartAdornment: Boolean(startAdornment ?? inputSlotProps?.startAdornment),
hasEndAdornment: Boolean(endAdornment ?? inputSlotProps?.endAdornment),
inputHasLabel: !!label,
isLabelShrunk: Boolean(inputLabelSlotProps?.shrink)
}), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, inputSlotProps?.startAdornment, inputSlotProps?.endAdornment, label, inputLabelSlotProps?.shrink]);
const classes = useUtilityClasses(classesProp, ownerState);
const PickersInputComponent = slots?.input ?? VARIANT_COMPONENT[variant];
const RootComponent = slots?.root ?? PickersTextFieldRoot;
const InputLabelComponent = slots?.inputLabel ?? _InputLabel.default;
const FormHelperTextComponent = slots?.formHelperText ?? _FormHelperText.default;
const inputAdditionalProps = {};
if (variant === 'outlined') {
if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
inputAdditionalProps.notched = inputLabelSlotProps.shrink;
}
inputAdditionalProps.label = label;
} else if (variant === 'filled') {
inputAdditionalProps.hiddenLabel = hiddenLabel;
}
const rootSlotProps = (0, _useSlotProps.default)({
elementType: RootComponent,
externalSlotProps: slotProps?.root,
externalForwardedProps: (0, _extends2.default)({}, other, {
className
}),
additionalProps: {
ref: handleRootRef,
focused,
disabled,
variant,
error,
color,
fullWidth,
required
},
className: classes.root,
ownerState
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerTextFieldOwnerState.PickerTextFieldOwnerStateContext.Provider, {
value: ownerState,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootComponent, (0, _extends2.default)({}, rootSlotProps, {
children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelComponent, (0, _extends2.default)({
htmlFor: id,
id: inputLabelId
}, inputLabelSlotProps, {
children: label
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputComponent, (0, _extends2.default)({
elements: elements,
areAllSectionsEmpty: areAllSectionsEmpty,
onClick: onClick,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onInput: onInput,
onPaste: onPaste,
onFocus: onFocus,
onBlur: onBlur,
endAdornment: endAdornment,
startAdornment: startAdornment,
tabIndex: tabIndex,
contentEditable: contentEditable,
value: value,
onChange: onChange,
id: id,
fullWidth: fullWidth,
inputRef: inputRef,
sectionListRef: sectionListRef,
label: label,
name: name,
role: "group",
"aria-labelledby": inputLabelId,
"aria-describedby": helperTextId,
"aria-live": helperTextId ? 'polite' : undefined,
"data-active-range-position": dataActiveRangePosition
}, inputAdditionalProps, inputSlotProps, {
slots: (0, _extends2.default)({}, inputSlotProps?.slots, slots?.htmlInput !== undefined && {
htmlInput: slots.htmlInput
}),
slotProps: (0, _extends2.default)({}, inputSlotProps?.slotProps, slotProps?.htmlInput !== undefined && {
htmlInput: slotProps.htmlInput
})
})), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(FormHelperTextComponent, (0, _extends2.default)({
id: helperTextId
}, slotProps?.formHelperText, {
children: helperText
}))]
}))
});
});
if (process.env.NODE_ENV !== "production") PickersTextField.displayName = "PickersTextField";
process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Is `true` if the current values equals the empty value.
* For a single item value, it means that `value === null`
* For a range value, it means that `value === [null, null]`
*/
areAllSectionsEmpty: _propTypes.default.bool.isRequired,
className: _propTypes.default.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
component: _propTypes.default.elementType,
/**
* If true, the whole element is editable.
* Useful when all the sections are selected.
*/
contentEditable: _propTypes.default.bool.isRequired,
disabled: _propTypes.default.bool.isRequired,
/**
* The elements to render.
* Each element contains the prop to edit a section of the value.
*/
elements: _propTypes.default.arrayOf(_propTypes.default.shape({
after: _propTypes.default.object.isRequired,
before: _propTypes.default.object.isRequired,
container: _propTypes.default.object.isRequired,
content: _propTypes.default.object.isRequired
})).isRequired,
/**
* End `InputAdornment` for this component.
*/
endAdornment: _propTypes.default.node,
/**
* If `true`, the `input` will indicate an error.
* @default false
*/
error: _propTypes.default.bool.isRequired,
/**
* If `true`, the component is displayed in focused state.
*/
focused: _propTypes.default.bool,
/**
* If `true`, the input will take up the full width of its container.
* @default false
*/
fullWidth: _propTypes.default.bool,
/**
* The helper text content.
*/
helperText: _propTypes.default.node,
/**
* If `true`, the label is hidden.
* This is used to increase density for a `FilledInput`.
* Be sure to add `aria-label` to the `input` element.
* @default false
*/
hiddenLabel: _propTypes.default.bool,
/**
* The id of the `input` element.
*/
id: _propTypes.default.string,
/**
* Pass a ref to the `input` element.
*/
inputRef: _refType.default,
/**
* The label content.
*/
label: _propTypes.default.node,
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
* @default 'none'
*/
margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
/**
* Name attribute of the `input` element.
*/
name: _propTypes.default.string,
onBlur: _propTypes.default.func.isRequired,
onChange: _propTypes.default.func.isRequired,
onClick: _propTypes.default.func.isRequired,
onFocus: _propTypes.default.func.isRequired,
onInput: _propTypes.default.func.isRequired,
onKeyDown: _propTypes.default.func.isRequired,
onPaste: _propTypes.default.func.isRequired,
readOnly: _propTypes.default.bool,
/**
* If `true`, the label will indicate that the `input` is required.
* @default false
*/
required: _propTypes.default.bool,
sectionListRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
current: _propTypes.default.shape({
getRoot: _propTypes.default.func.isRequired,
getSectionContainer: _propTypes.default.func.isRequired,
getSectionContent: _propTypes.default.func.isRequired,
getSectionIndexFromDOMElement: _propTypes.default.func.isRequired
})
})]),
/**
* The size of the component.
* @default 'medium'
*/
size: _propTypes.default.oneOf(['medium', 'small']),
/**
* The props used for each component slot.
* @default {}
*/
slotProps: _propTypes.default.object,
/**
* The components used for each slot inside.
* @default {}
*/
slots: _propTypes.default.object,
/**
* Start `InputAdornment` for this component.
*/
startAdornment: _propTypes.default.node,
style: _propTypes.default.object,
/**
* 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]),
value: _propTypes.default.string.isRequired,
/**
* The variant to use.
* @default 'outlined'
*/
variant: _propTypes.default.oneOf(['filled', 'outlined', 'standard'])
} : void 0;