react-better-html 1.1.53 → 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/dist/components/Modal.js

@@ -87,7 +87,7 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
             isOpened,
         };
     }, [onClickOpen, onClickClose, isOpened]);
-    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, 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 }));
+    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, 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, transition: theme.styles.transition, 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, transition: theme.styles.transition, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, transition: theme.styles.transition, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose, transition: theme.styles.transition })] }), (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({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/PageHeader.js

@@ -13,6 +13,6 @@ const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 function PageHeader({ imageUrl, imageSize = 60, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
 }
 exports.default = (0, react_1.memo)(PageHeader);

package/dist/components/ToggleInput.js

@@ -156,6 +156,6 @@ exports.default = {
                 setInternalChecked.setState(newIsChecked);
             onChange?.(newIsChecked, value);
         }, [disabled, checked, onChange, controlledChecked, value]);
-        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.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (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 }))] }));
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "fit-content", 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.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (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 }))] }));
     }),
 };

package/package.json

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