react-better-html 1.1.27 → 1.1.28

package/dist/components/Modal.d.ts

@@ -28,16 +28,12 @@ export type ModalRef = {
 type ModalComponent = {
     (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
     confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
-        continueButtonText?: string;
         continueButtonLoaderName?: LoaderName | AnyOtherString;
-        cancelButtonText?: string;
         onContinue?: () => void;
         onCancel?: () => void;
     }>) => React.ReactElement;
     destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
-        deleteButtonText?: string;
         deleteButtonLoaderName?: LoaderName | AnyOtherString;
-        cancelButtonText?: string;
         onDelete?: () => void;
         onCancel?: () => void;
     }>) => React.ReactElement;

package/dist/components/Modal.js

@@ -88,13 +88,13 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
     }, [onClickOpen, onClickClose, isOpened]);
     return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2, borderTopRightRadius: theme.styles.borderRadius * 2, paddingInline: theme.styles.space + theme.styles.gap, paddingBlock: theme.styles.space, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h1", color: titleColor ?? theme.colors.textPrimary, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
 });
-ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonText, continueButtonLoaderName, cancelButtonText, onContinue, onCancel, ...props }, ref) {
+ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: cancelButtonText ?? "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: continueButtonText ?? "Continue", loaderName: continueButtonLoaderName, onClick: onContinue })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinue })] })] }));
 });
-ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ deleteButtonText, deleteButtonLoaderName, cancelButtonText, onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: cancelButtonText ?? "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: deleteButtonText ?? "Delete", loaderName: deleteButtonLoaderName, onClick: onDelete })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", loaderName: deleteButtonLoaderName, onClick: onDelete })] })] }));
 });
 const Modal = (0, react_1.memo)(ModalComponent);
 Modal.confirmation = ModalComponent.confirmation;

package/dist/utils/hooks.d.ts

@@ -52,6 +52,7 @@ export declare function useForm<FormFields extends Record<string, string | numbe
     errors: Partial<Record<keyof FormFields, string>>;
     isSubmitting: boolean;
     setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
+    setFieldsValue: (values: Partial<FormFields>) => void;
     getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
     getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => OmitProps<ComponentPropWithRef<HTMLDivElement, DropdownProps<FormFields[FieldName], unknown>>, "options">;
     getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;

package/dist/utils/hooks.js

@@ -172,6 +172,18 @@ function useForm({ defaultValues, onSubmit, validate, }) {
             [field]: undefined,
         }));
     }, []);
+    const setFieldsValue = (0, react_1.useCallback)((values) => {
+        setValues((oldValue) => ({
+            ...oldValue,
+            ...values,
+        }));
+        setErrors((oldValue) => {
+            const newErrors = {};
+            for (const key in values)
+                newErrors[key] = undefined;
+            return newErrors;
+        });
+    }, []);
     const getInputFieldProps = (0, react_1.useCallback)((field) => {
         const type = inputTypes[field] ?? "text";
         return {
@@ -241,6 +253,7 @@ function useForm({ defaultValues, onSubmit, validate, }) {
         errors,
         isSubmitting,
         setFieldValue,
+        setFieldsValue,
         getInputFieldProps,
         getDropdownFieldProps,
         getCheckboxProps,

package/package.json

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