react-better-html 1.1.54 → 1.1.55

package/dist/components/FormRow.d.ts

@@ -4,6 +4,11 @@ import { ComponentMarginProps, ComponentPropWithRef } from "../types/components"
 import { LoaderName } from "../types/loader";
 export type FormRowProps = {
     oneItemOnly?: boolean;
+    /**
+     * @description Weather to break the two items into two separate lines on mobile or not
+     * @default false
+     */
+    noBreakingPoint?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -15,6 +20,7 @@ type FormRowComponentType = {
         description?: string;
         withActions?: boolean;
         saveButtonLoaderName?: LoaderName | AnyOtherString;
+        resetButtonLoaderName?: LoaderName | AnyOtherString;
         onClickSave?: () => void;
         onClickReset?: () => void;
     }>) => React.ReactElement;

package/dist/components/FormRow.js

@@ -11,16 +11,16 @@ const Icon_1 = __importDefault(require("./Icon"));
 const Text_1 = __importDefault(require("./Text"));
 const Button_1 = __importDefault(require("./Button"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const FormRowComponent = (0, react_1.forwardRef)(function FormRow({ oneItemOnly, gap, children, ...props }, ref) {
+const FormRowComponent = (0, react_1.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
-    const breakingPoint = mediaQuery.size900;
-    const readyGap = breakingPoint ? theme.styles.gap : theme.styles.space * 2;
+    const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
+    const readyGap = breakingPoint || (noBreakingPoint && mediaQuery.size900) ? theme.styles.gap : theme.styles.space * 2;
     return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref: ref, children: [children, oneItemOnly && (0, jsx_runtime_1.jsx)(Div_1.default, { width: "100%" })] }));
 });
-FormRowComponent.withTitle = (0, react_1.forwardRef)(function WithTitle({ icon, title, description, withActions, onClickSave, onClickReset, children, ...props }, ref) {
+FormRowComponent.withTitle = (0, react_1.forwardRef)(function WithTitle({ icon, title, description, withActions, saveButtonLoaderName, resetButtonLoaderName, onClickSave, onClickReset, children, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(FormRowComponent, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.space, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }), (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: "h3", children: title }), description && (0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: description })] })] }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.gap, children: [children, withActions && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [onClickReset && (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickReset }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "check", onClick: onClickSave })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(FormRowComponent, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.space, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }), (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: "h3", children: title }), description && (0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: description })] })] }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.gap, children: [children, withActions && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [onClickReset && ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset })), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })] }))] })] }));
 });
 const FormRow = (0, react_1.memo)(FormRowComponent);
 FormRow.withTitle = FormRowComponent.withTitle;

package/package.json

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