"use strict"; 'use client'; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.useInput = useInput; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage")); var React = _interopRequireWildcard(require("react")); var _utils = require("@mui/utils"); var _FormControl = require("../FormControl"); var _extractEventHandlers = require("../utils/extractEventHandlers"); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /** * * Demos: * * - [Input](https://mui.com/base-ui/react-input/#hook) * * API: * * - [useInput API](https://mui.com/base-ui/react-input/hooks-api/#use-input) */ function useInput(parameters = {}) { const { defaultValue: defaultValueProp, disabled: disabledProp = false, error: errorProp = false, onBlur, onChange, onFocus, required: requiredProp = false, value: valueProp, inputRef: inputRefProp } = parameters; const formControlContext = (0, _FormControl.useFormControlContext)(); let defaultValue; let disabled; let error; let required; let value; if (formControlContext) { var _formControlContext$d, _formControlContext$e, _formControlContext$r; defaultValue = undefined; disabled = (_formControlContext$d = formControlContext.disabled) != null ? _formControlContext$d : false; error = (_formControlContext$e = formControlContext.error) != null ? _formControlContext$e : false; required = (_formControlContext$r = formControlContext.required) != null ? _formControlContext$r : false; value = formControlContext.value; if (process.env.NODE_ENV !== 'production') { const definedLocalProps = ['defaultValue', 'disabled', 'error', 'required', 'value'].filter(prop => parameters[prop] !== undefined); if (definedLocalProps.length > 0) { console.warn(['MUI: You have set props on an input that is inside a FormControl.', 'Set these props on a FormControl instead. Otherwise they will be ignored.', `Ignored props: ${definedLocalProps.join(', ')}`].join('\n')); } } } else { defaultValue = defaultValueProp; disabled = disabledProp; error = errorProp; required = requiredProp; value = valueProp; } const { current: isControlled } = React.useRef(value != null); const handleInputRefWarning = React.useCallback(instance => { if (process.env.NODE_ENV !== 'production') { if (instance && instance.nodeName !== 'INPUT' && !instance.focus) { console.error(['MUI: You have provided a `slots.input` to the input component', 'that does not correctly handle the `ref` prop.', 'Make sure the `ref` prop is called with a HTMLInputElement.'].join('\n')); } } }, []); const inputRef = React.useRef(null); const handleInputRef = (0, _utils.unstable_useForkRef)(inputRef, inputRefProp, handleInputRefWarning); const [focused, setFocused] = React.useState(false); // The blur won't fire when the disabled state is set on a focused input. // We need to book keep the focused state manually. React.useEffect(() => { if (!formControlContext && disabled && focused) { setFocused(false); // @ts-ignore onBlur == null || onBlur(); } }, [formControlContext, disabled, focused, onBlur]); const handleFocus = otherHandlers => event => { var _otherHandlers$onFocu; // Fix a bug with IE11 where the focus/blur events are triggered // while the component is disabled. if (formControlContext != null && formControlContext.disabled) { event.stopPropagation(); return; } (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event); if (formControlContext && formControlContext.onFocus) { var _formControlContext$o; formControlContext == null || (_formControlContext$o = formControlContext.onFocus) == null || _formControlContext$o.call(formControlContext); } else { setFocused(true); } }; const handleBlur = otherHandlers => event => { var _otherHandlers$onBlur; (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event); if (formControlContext && formControlContext.onBlur) { formControlContext.onBlur(); } else { setFocused(false); } }; const handleChange = otherHandlers => (event, ...args) => { var _formControlContext$o2, _otherHandlers$onChan; if (!isControlled) { const element = event.target || inputRef.current; if (element == null) { throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`slots.input\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : (0, _formatMuiErrorMessage2.default)(17)); } } formControlContext == null || (_formControlContext$o2 = formControlContext.onChange) == null || _formControlContext$o2.call(formControlContext, event); // @ts-ignore (_otherHandlers$onChan = otherHandlers.onChange) == null || _otherHandlers$onChan.call(otherHandlers, event, ...args); }; const handleClick = otherHandlers => event => { var _otherHandlers$onClic; if (inputRef.current && event.currentTarget === event.target) { inputRef.current.focus(); } (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event); }; const getRootProps = (externalProps = {}) => { // onBlur, onChange and onFocus are forwarded to the input slot. const propsEventHandlers = (0, _extractEventHandlers.extractEventHandlers)(parameters, ['onBlur', 'onChange', 'onFocus']); const externalEventHandlers = (0, _extends2.default)({}, propsEventHandlers, (0, _extractEventHandlers.extractEventHandlers)(externalProps)); return (0, _extends2.default)({}, externalProps, externalEventHandlers, { onClick: handleClick(externalEventHandlers) }); }; const getInputProps = (externalProps = {}) => { const propsEventHandlers = { onBlur, onChange, onFocus }; const externalEventHandlers = (0, _extends2.default)({}, propsEventHandlers, (0, _extractEventHandlers.extractEventHandlers)(externalProps)); const mergedEventHandlers = (0, _extends2.default)({}, externalEventHandlers, { onBlur: handleBlur(externalEventHandlers), onChange: handleChange(externalEventHandlers), onFocus: handleFocus(externalEventHandlers) }); return (0, _extends2.default)({}, mergedEventHandlers, { 'aria-invalid': error || undefined, defaultValue: defaultValue, value: value, required, disabled }, externalProps, { ref: handleInputRef }, mergedEventHandlers); }; return { disabled, error, focused, formControlContext, getInputProps, getRootProps, inputRef: handleInputRef, required, value }; }