react-better-html 1.1.36 → 1.1.37

package/dist/components/InputField.js

@@ -131,7 +131,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
     }, [withDebounce, onChangeValue, debouncedValue]);
     return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
-InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ label, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
+InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ label, placeholder, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme);
     const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
@@ -141,7 +141,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ lab
         onChange?.(event);
         onChangeValue?.(event.target.value);
     }, [onChange, onChangeValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, required: required, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
 });
 InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));

package/dist/utils/hooks.js

@@ -187,6 +187,7 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
     const getInputFieldProps = (0, react_1.useCallback)((field) => {
         const type = inputTypes[field] ?? "text";
         return {
+            required: requiredFields?.includes(field),
             value: values[field]?.toString() ?? "",
             onChangeValue: (newValue) => {
                 const readyValue = type === "number" ? (newValue ? Number(newValue) : undefined) : newValue;
@@ -206,8 +207,8 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
         };
     }, [values, setFieldValue, inputTypes, errors]);
     const getTextAreaProps = (0, react_1.useCallback)((field) => {
-        const type = inputTypes[field] ?? "text";
         return {
+            required: requiredFields?.includes(field),
             value: values[field]?.toString() ?? "",
             onChangeValue: (newValue) => {
                 setFieldValue(field, newValue);
@@ -217,6 +218,7 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
     }, [values, setFieldValue, inputTypes, errors]);
     const getDropdownFieldProps = (0, react_1.useCallback)((field) => {
         return {
+            required: requiredFields?.includes(field),
             value: values[field],
             onChange: (value) => {
                 setFieldValue(field, value);
@@ -226,6 +228,7 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
     }, [values, errors, setFieldValue]);
     const getCheckboxProps = (0, react_1.useCallback)((field) => {
         return {
+            required: requiredFields?.includes(field),
             checked: values[field],
             onChange: (checked) => {
                 setFieldValue(field, checked);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.36",
+   "version": "1.1.37",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [