react-better-html 1.1.25 → 1.1.27

package/dist/components/Modal.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropWithRef } from "../types/components";
-import { OmitProps } from "../types/app";
+import { AnyOtherString, OmitProps } from "../types/app";
+import { LoaderName } from "../types/loader";
 type ModalProps = {
     /**
      * If you want to have a small modal, you can use 660px as it looks good on most screens.
@@ -27,10 +28,16 @@ export type ModalRef = {
 type ModalComponent = {
     (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
     confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
-        onConfirm?: () => void;
+        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({ onConfirm, onCancel, ...props }, ref) {
+ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonText, continueButtonLoaderName, cancelButtonText, 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: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", onClick: onConfirm })] })] }));
+    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 })] })] }));
 });
-ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ deleteButtonText, deleteButtonLoaderName, cancelButtonText, 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: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", 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: cancelButtonText ?? "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: deleteButtonText ?? "Delete", loaderName: deleteButtonLoaderName, onClick: onDelete })] })] }));
 });
 const Modal = (0, react_1.memo)(ModalComponent);
 Modal.confirmation = ModalComponent.confirmation;

package/dist/components/ToggleInput.js

@@ -16,8 +16,8 @@ const InputElement = styled_components_1.default.input.withConfig({
 }) `
    position: relative;
    appearance: none;
-   width: 24px;
-   height: 24px;
+   width: 26px;
+   height: 26px;
    background-color: ${(props) => props.theme.colors.backgroundContent};
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
@@ -89,9 +89,15 @@ const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ labe
         if (controlledChecked === undefined)
             setInternalChecked(newValue);
         onChange?.(newValue, value);
-    }, [onChange, controlledChecked, value, props.type]);
+    }, [onChange, controlledChecked, value]);
     const checked = controlledChecked ?? internalChecked;
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { children: text })] }), (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 }))] }));
+    const onClickText = (0, react_1.useCallback)(() => {
+        const newValue = !checked;
+        if (controlledChecked === undefined)
+            setInternalChecked(newValue);
+        onChange?.(newValue, value);
+    }, [checked, controlledChecked, onChange, 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.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (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 }))] }));
 });
 exports.default = {
     checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {

package/dist/utils/hooks.js

@@ -204,7 +204,7 @@ function useForm({ defaultValues, onSubmit, validate, }) {
     }, [values, errors, setFieldValue]);
     const getCheckboxProps = (0, react_1.useCallback)((field) => {
         return {
-            value: values[field],
+            checked: values[field],
             onChange: (checked) => {
                 setFieldValue(field, checked);
             },

package/package.json

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