react-better-html 1.1.35 → 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 Textarea({ 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,19 +141,19 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ labe
         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 }));
 });
-InputFieldComponent.password = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
+InputFieldComponent.password = (0, react_1.forwardRef)(function Password({ ...props }, ref) {
     const [isPassword, setIsPassword] = (0, hooks_1.useBooleanState)(true);
     return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: isPassword ? "password" : "text", placeholder: "******", rightIcon: isPassword ? "eye" : "eyeDashed", onClickRightIcon: setIsPassword.toggle, autoComplete: "current-password", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
 });
-InputFieldComponent.search = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
+InputFieldComponent.search = (0, react_1.forwardRef)(function Search({ ...props }, ref) {
     return (0, jsx_runtime_1.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref: ref, ...props });
 });
-InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function Email({ value, onChangeValue, ...props }, ref) {
+InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({ label, value, onChangeValue, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const [dropdownValue, setDropdownValue] = (0, react_1.useState)();
     const [inputFieldValue, setInputFieldValue] = (0, react_1.useState)(value?.toString() ?? "");
@@ -187,7 +187,7 @@ InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function Email({ value
         setDropdownValue(country.phoneNumberExtension);
         setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
 });
 const InputField = (0, react_1.memo)(InputFieldComponent);
 InputField.multiline = InputFieldComponent.multiline;

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.35",
+   "version": "1.1.37",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [