Spaces:
Runtime error
Runtime error
File size: 4,445 Bytes
077865a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | import { i as __toESM, t as require_react } from "./react-DMmEJb6B.js";
import { t as require_jsx_runtime } from "./react_jsx-runtime.js";
import { f as useStableCallback, t as useRenderElement, u as useIsoLayoutEffect } from "./useRenderElement-3Cwvu1gO.js";
import { a as fieldValidityMapping, i as useFieldRootContext, n as useLabelableId, r as useLabelableContext, t as useRegisterFieldControl } from "./useRegisterFieldControl-CPlvTQh-.js";
import { g as ownerDocument, l as none, t as createChangeEventDetails } from "./createBaseUIEventDetails-CJxlTiBH.js";
import { t as activeElement } from "./shadowDom-kQ51Rhp9.js";
import { t as useControlled } from "./useControlled-B7gU8wdF.js";
//#region ../node_modules/@base-ui/react/esm/field/control/FieldControl.js
var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
/**
* The form control to label and validate.
* Renders an `<input>` element.
*
* You can omit this part and use any Base UI input component instead. For example,
* [Input](https://base-ui.com/react/components/input), [Checkbox](https://base-ui.com/react/components/checkbox),
* or [Select](https://base-ui.com/react/components/select), among others, will work with Field out of the box.
*
* Documentation: [Base UI Field](https://base-ui.com/react/components/field)
*/
var FieldControl = /* @__PURE__ */ import_react.forwardRef(function FieldControl(componentProps, forwardedRef) {
const { render, className, id: idProp, name: nameProp, value: valueProp, disabled: disabledProp = false, onValueChange, defaultValue, autoFocus = false, style, ...elementProps } = componentProps;
const { state: fieldState, name: fieldName, disabled: fieldDisabled, setTouched, setDirty, validityData, setFocused, setFilled, validationMode, validation } = useFieldRootContext();
const disabled = fieldDisabled || disabledProp;
const name = fieldName ?? nameProp;
const state = {
...fieldState,
disabled
};
const { labelId } = useLabelableContext();
const id = useLabelableId({ id: idProp });
useIsoLayoutEffect(() => {
const hasExternalValue = valueProp != null;
if (validation.inputRef.current?.value || hasExternalValue && valueProp !== "") setFilled(true);
else if (hasExternalValue && valueProp === "") setFilled(false);
}, [
validation.inputRef,
setFilled,
valueProp
]);
const inputRef = import_react.useRef(null);
useIsoLayoutEffect(() => {
if (autoFocus && inputRef.current === activeElement(ownerDocument(inputRef.current))) setFocused(true);
}, [autoFocus, setFocused]);
const [valueUnwrapped] = useControlled({
controlled: valueProp,
default: defaultValue,
name: "FieldControl",
state: "value"
});
const isControlled = valueProp !== void 0;
const value = isControlled ? valueUnwrapped : void 0;
const getValueFromInput = useStableCallback(() => validation.inputRef.current?.value);
useRegisterFieldControl(validation.inputRef, id, value, getValueFromInput);
return useRenderElement("input", componentProps, {
ref: [forwardedRef, inputRef],
state,
props: [
{
id,
disabled,
name,
ref: validation.inputRef,
"aria-labelledby": labelId,
autoFocus,
...isControlled ? { value } : { defaultValue },
onChange(event) {
const inputValue = event.currentTarget.value;
onValueChange?.(inputValue, createChangeEventDetails(none, event.nativeEvent));
setDirty(inputValue !== validityData.initialValue);
setFilled(inputValue !== "");
},
onFocus() {
setFocused(true);
},
onBlur(event) {
setTouched(true);
setFocused(false);
if (validationMode === "onBlur") validation.commit(event.currentTarget.value);
},
onKeyDown(event) {
if (event.currentTarget.tagName === "INPUT" && event.key === "Enter") {
setTouched(true);
validation.commit(event.currentTarget.value);
}
}
},
validation.getInputValidationProps(),
elementProps
],
stateAttributesMapping: fieldValidityMapping
});
});
FieldControl.displayName = "FieldControl";
//#endregion
//#region ../node_modules/@base-ui/react/esm/input/Input.js
var import_jsx_runtime = require_jsx_runtime();
var Input = /* @__PURE__ */ import_react.forwardRef(function Input(props, forwardedRef) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldControl, {
ref: forwardedRef,
...props
});
});
Input.displayName = "Input";
//#endregion
export { Input };
//# sourceMappingURL=@base-ui_react_input.js.map |