@hitachivantara/uikit-react-core/dist/BaseInput/BaseInput.js

UI Kit Core React components.

import { HvFormElementContext, HvFormElementDescriptorsContext } from "../FormElement/context.js";
import { buildAriaPropsFromContext, buildFormElementPropsFromContext } from "../FormElement/utils.js";
import { useClasses } from "./BaseInput.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useContext } from "react";
import { jsx } from "react/jsx-runtime";
import { useForkRef } from "@mui/material/utils";
import MuiInputBase from "@mui/material/InputBase";
//#region src/BaseInput/BaseInput.tsx
/**
* An Input component that only posses the most basic functionalities.
* It should be used alongside the other form elements to construct a proper accessible form.
*/
var HvBaseInput = forwardRef(function HvBaseInput(props, ref) {
	const { classes: classesProp, className = "", id, name, value, defaultValue, required, readOnly, disabled, onChange, type = "text", placeholder, multiline, resizable, invalid: invalidProp, inputRef, inputProps = {}, ...others } = useDefaultProps("HvBaseInput", props);
	const { classes, cx } = useClasses(classesProp);
	const formElementProps = buildFormElementPropsFromContext(name, disabled, readOnly, required, useContext(HvFormElementContext));
	const forkedRef = useForkRef(ref, inputRef);
	const invalid = invalidProp || formElementProps.status === "invalid";
	const ariaProps = buildAriaPropsFromContext(inputProps, useContext(HvFormElementDescriptorsContext), invalid, id);
	return /* @__PURE__ */ jsx(MuiInputBase, {
		id,
		name: formElementProps.name,
		value,
		defaultValue,
		placeholder,
		readOnly: !!formElementProps.readOnly,
		disabled: formElementProps.disabled,
		onChange: (event) => onChange?.(event, event.target.value),
		className: cx(classes.root, className, {
			[classes.multiline]: multiline,
			[classes.invalid]: invalid,
			[classes.readOnly]: formElementProps.readOnly,
			[classes.disabled]: formElementProps.disabled
		}),
		classes: {
			focused: classes.focused,
			input: cx(classes.input, {
				[classes.inputResizable]: !formElementProps.disabled && resizable,
				[classes.inputDisabled]: formElementProps.disabled,
				[classes.inputReadOnly]: formElementProps.readOnly
			})
		},
		inputProps: {
			required: formElementProps.required,
			...inputProps,
			...ariaProps
		},
		inputRef: forkedRef,
		multiline,
		...multiline ? { rows: 10 } : { type },
		...others
	});
});
//#endregion
export { HvBaseInput };