Spaces:
Runtime error
Runtime error
| 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 |