react-better-html 1.1.22 → 1.1.24

package/dist/components/Form.d.ts

@@ -1,19 +1,19 @@
 import { ComponentMarginProps } from "../types/components";
 import { LoaderName } from "../types/loader";
 import { AnyOtherString } from "../types/app";
-type FormType = "default" | "submit" | "save" | "create" | "delete" | "update" | "edit";
 type FormProps = {
-    /** @default "default" */
-    type?: FormType;
+    submitButtonText?: string;
+    submitButtonLoaderName?: LoaderName | AnyOtherString;
+    submitButtonId?: string;
     /** @default "right" */
     actionButtonsLocation?: "left" | "center" | "right";
-    actionButtonLoaderName?: LoaderName | AnyOtherString;
     gap?: React.CSSProperties["gap"];
     isSubmitting?: boolean;
+    isDestructive?: boolean;
     onClickCancel?: () => void;
     onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
-declare function Form({ type, actionButtonsLocation, actionButtonLoaderName, gap, isSubmitting, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+declare function Form({ submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Form>;
 export default _default;

package/dist/components/Form.js

@@ -8,22 +8,13 @@ const react_1 = require("react");
 const Div_1 = __importDefault(require("./Div"));
 const Button_1 = __importDefault(require("./Button"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const formTypesText = {
-    default: "Default",
-    submit: "Submit",
-    save: "Save",
-    create: "Create",
-    delete: "Delete",
-    update: "Update",
-    edit: "Edit",
-};
-function Form({ type = "default", actionButtonsLocation = "right", actionButtonLoaderName, gap, isSubmitting, onClickCancel, onSubmit, children, ...props }) {
+function Form({ submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation = "right", gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const SubmitButtonTag = type === "delete" ? Button_1.default.destructive : Button_1.default;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, type !== "default" && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
+    const SubmitButtonTag = isDestructive ? Button_1.default.destructive : Button_1.default;
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, submitButtonText && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
                         ? "flex-start"
                         : actionButtonsLocation === "center"
                             ? "center"
-                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: formTypesText[type], isLoading: isSubmitting, loaderName: actionButtonLoaderName, isSubmit: true })] }))] }) }));
+                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: submitButtonText, isLoading: isSubmitting, loaderName: submitButtonLoaderName, id: submitButtonId, isSubmit: true })] }))] }) }));
 }
 exports.default = (0, react_1.memo)(Form);

package/dist/components/Modal.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../utils/hooks");
 const Div_1 = __importDefault(require("./Div"));
 const Button_1 = __importDefault(require("./Button"));
 const Text_1 = __importDefault(require("./Text"));
 const Divider_1 = __importDefault(require("./Divider"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const hooks_1 = require("../utils/hooks");
 const DialogStylesElement = styled_components_1.default.dialog.withConfig({
     shouldForwardProp: (prop) => !["theme", "opacity"].includes(prop),
 }) `
@@ -86,7 +86,7 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
             isOpened,
         };
     }, [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 : undefined, paddingBlock: !title ? theme.styles.gap : 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, paddingBlock: theme.styles.gap, 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 : undefined, paddingBlock: title ? theme.styles.gap : undefined, children: children })] }) })) : undefined }));
+    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({ onConfirm, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/package.json

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