react-better-html 1.1.17 → 1.1.19

package/dist/components/Dropdown.d.ts

@@ -9,7 +9,7 @@ export type DropdownOption<Value, Data = unknown> = {
     searchValues?: string[];
     data?: Data;
 };
-type DropdownProps<Value, Data> = {
+export type DropdownProps<Value, Data> = {
     label?: string;
     errorText?: string;
     infoText?: string;

package/dist/components/Dropdown.js

@@ -88,14 +88,13 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
     }, [onChange, controlledValue]);
     const onClickClearButton = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (controlledValue === undefined)
-            setInternalValue(undefined);
+        setInternalValue(undefined);
         onChange?.(undefined);
         setIsOpen.setFalse();
         inputRef.current?.blur();
         setSearchQuery("");
         setFocusedOptionIndex(undefined);
-    }, [controlledValue, onChange]);
+    }, [onChange]);
     const onChangeValue = (0, react_1.useCallback)((newValue) => {
         setSearchQuery(newValue);
         if (withDebounce)

package/dist/components/Form.d.ts

@@ -0,0 +1,18 @@
+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;
+    /** @default "right" */
+    actionButtonsLocation?: "left" | "center" | "right";
+    actionButtonLoaderName?: LoaderName | AnyOtherString;
+    gap?: React.CSSProperties["gap"];
+    onClickCancel?: () => void;
+    onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+declare function Form({ type, actionButtonsLocation, actionButtonLoaderName, gap, 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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+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, 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"
+                        ? "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], loaderName: actionButtonLoaderName, isSubmit: true })] }))] }) }));
+}
+exports.default = (0, react_1.memo)(Form);

package/dist/components/InputField.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { AnyOtherString, OmitProps } from "../types/app";
 import { IconName } from "../types/icon";
-type InputFieldProps = {
+export type InputFieldProps = {
     label?: string;
     errorText?: string;
     infoText?: string;
@@ -14,7 +14,7 @@ type InputFieldProps = {
     debounceDelay?: number;
     onChangeValue?: (value: string) => void;
     onClickRightIcon?: () => void;
-} & OmitProps<React.ComponentProps<"input">, "style"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
 type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;

package/dist/components/InputField.js

@@ -114,7 +114,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
             return;
         onChangeValue?.(debouncedValue);
     }, [withDebounce, onChangeValue, debouncedValue]);
-    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, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (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: "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, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (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 }))] }));
 });
 InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ label, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
@@ -126,7 +126,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ labe
         onChange?.(event);
         onChangeValue?.(event.target.value);
     }, [onChange, onChangeValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", 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.jsx)(TextareaElement, { theme: theme, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", 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.jsx)(TextareaElement, { theme: theme, required: required, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
 });
 InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));

package/dist/constants/css.d.ts

@@ -0,0 +1 @@
+export declare const cssProps: Record<string, boolean>;