react-better-html 1.1.210 → 1.1.212

package/dist/index.d.mts

@@ -42,6 +42,7 @@ type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
 type TextProps<As extends TextAs = "p"> = {
     /** @default "p" */
     as?: As;
+    htmlContentTranslate?: React.ComponentProps<"div">["translate"];
 } & OmitProps<React.ComponentProps<As>, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
     <As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>): React.ReactElement;

package/dist/index.d.ts

@@ -42,6 +42,7 @@ type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
 type TextProps<As extends TextAs = "p"> = {
     /** @default "p" */
     as?: As;
+    htmlContentTranslate?: React.ComponentProps<"div">["translate"];
 } & OmitProps<React.ComponentProps<As>, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
     <As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>): React.ReactElement;

package/dist/index.js

@@ -1766,7 +1766,7 @@ var TextStyledComponent = import_styled_components2.default.p.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextComponent = (0, import_react3.forwardRef)(function Text({ children, ...props }, ref) {
+var TextComponent = (0, import_react3.forwardRef)(function Text({ htmlContentTranslate, children, ...props }, ref) {
   const theme2 = useTheme();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -1776,6 +1776,7 @@ var TextComponent = (0, import_react3.forwardRef)(function Text({ children, ...p
     TextStyledComponent,
     {
       as: props.as,
+      translate: htmlContentTranslate,
       ...styledComponentStyles,
       ...dataProps,
       ...ariaProps,
@@ -3046,7 +3047,7 @@ function useForm(options) {
         errorText: errors[field]
       };
     },
-    [values, setFieldValue, inputTypes, errors]
+    [values, setFieldValue, inputTypes, errors, requiredFields]
   );
   const getTextAreaProps = (0, import_react10.useCallback)(
     (field) => {
@@ -3064,7 +3065,7 @@ function useForm(options) {
         errorText: errors[field]
       };
     },
-    [values, setFieldValue, inputTypes, errors]
+    [values, setFieldValue, inputTypes, errors, requiredFields]
   );
   const getDropdownFieldProps = (0, import_react10.useCallback)(
     (field) => {
@@ -3082,7 +3083,7 @@ function useForm(options) {
         errorText: errors[field]
       };
     },
-    [values, errors, setFieldValue]
+    [values, errors, setFieldValue, requiredFields]
   );
   const getCheckboxProps = (0, import_react10.useCallback)(
     (field) => {
@@ -3100,7 +3101,7 @@ function useForm(options) {
         errorText: errors[field]
       };
     },
-    [values, errors, setFieldValue]
+    [values, errors, setFieldValue, requiredFields]
   );
   const getRadioButtonProps = (0, import_react10.useCallback)(
     (field, value) => {
@@ -3119,7 +3120,7 @@ function useForm(options) {
         errorText: errors[field]
       };
     },
-    [values, errors, setFieldValue]
+    [values, errors, setFieldValue, requiredFields]
   );
   const getSwitchProps = (0, import_react10.useCallback)(
     (field) => {
@@ -3137,7 +3138,7 @@ function useForm(options) {
         errorText: errors[field]
       };
     },
-    [values, errors, setFieldValue]
+    [values, errors, setFieldValue, requiredFields]
   );
   const focusField = (0, import_react10.useCallback)((field) => {
     inputFieldRefs.current[field]?.focus();
@@ -4045,6 +4046,94 @@ var desaturateColor = (hexColor, amount) => {
   return `#${rHex}${gHex}${bHex}`;
 };
 
+// src/utils/variableFunctions.ts
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var loaderControls = {
+  startLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: true
+    }));
+  },
+  stopLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: false
+    }));
+  }
+};
+var alertControls = {
+  createAlert: (alert) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
+      return void 0;
+    const readyAlert = {
+      id: crypto.randomUUID(),
+      ...alert
+    };
+    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  },
+  removeAlert: (alertId) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
+    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
+  }
+};
+var sideMenuControls = {
+  expand: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
+  },
+  collapse: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
+  },
+  toggleExpanded: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
+  },
+  open: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
+  },
+  close: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  },
+  toggleOpened: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
+  }
+};
+var colorThemeControls = {
+  toggleTheme: (theme2) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
+    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
+    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
+      localStorage.setItem("theme", newColorTheme);
+    }, 0.01 * 1e3);
+  }
+};
+var filterHover = () => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "filterHover")) return void 0;
+  return {
+    z05: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
+    z1: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
+    z2: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
+    z3: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
+  };
+};
+
 // src/components/Chip.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ChipComponent = (0, import_react16.forwardRef)(function Chip({
@@ -4074,7 +4163,9 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
       borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / 1.3,
       paddingBlock: theme2.styles.gap / 2,
       paddingInline: theme2.styles.space / 1.5,
+      filterHover: onClick || onClickWithValue ? filterHover().z1 : void 0,
       onClick: onClickElement,
+      cursor: onClick || onClickWithValue ? "pointer" : void 0,
       ...props,
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
@@ -5589,96 +5680,6 @@ var countries = [
 
 // src/utils/functions.ts
 var import_crypto_js = __toESM(require("crypto-js"));
-
-// src/utils/variableFunctions.ts
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var loaderControls = {
-  startLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: true
-    }));
-  },
-  stopLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: false
-    }));
-  }
-};
-var alertControls = {
-  createAlert: (alert) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
-      return void 0;
-    const readyAlert = {
-      id: crypto.randomUUID(),
-      ...alert
-    };
-    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
-    return readyAlert;
-  },
-  removeAlert: (alertId) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
-    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
-  }
-};
-var sideMenuControls = {
-  expand: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
-  },
-  collapse: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
-  },
-  toggleExpanded: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
-  },
-  open: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
-  },
-  close: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
-  },
-  toggleOpened: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
-  }
-};
-var colorThemeControls = {
-  toggleTheme: (theme2) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
-    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
-    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
-    setTimeout(() => {
-      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
-      localStorage.setItem("theme", newColorTheme);
-    }, 0.01 * 1e3);
-  }
-};
-var filterHover = () => {
-  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "filterHover")) return void 0;
-  return {
-    z05: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
-    z1: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
-    z2: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
-    z3: externalBetterHtmlContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
-  };
-};
-
-// src/utils/functions.ts
 var generateRandomString = (stringLength, options) => {
   const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   const lowers = "abcdefghijklmnopqrstuvwxyz";
@@ -5876,7 +5877,8 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
       if (event.key === "Enter" || !withSearch && event.key === " ") {
         event.preventDefault();
         if (!disabled) {
-          setIsOpen.toggle();
+          if (withMultiselect) setIsOpen.setTrue();
+          else setIsOpen.toggle();
           if (isOpen && filteredOptions.length > 0 && focusedOptionIndex !== void 0) {
             const option = filteredOptions[focusedOptionIndex];
             if (!option.disabled) {
@@ -5884,10 +5886,12 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
               const newValue = withMultiselect ? Array.isArray(internalValue) ? internalValue?.includes(clickedValue) ? internalValue.filter((value2) => value2 !== clickedValue) : [...internalValue, clickedValue] : [clickedValue] : clickedValue;
               if (controlledValue === void 0) setInternalValue(newValue);
               onChange?.(newValue);
-              setIsOpen.setFalse();
-              inputRef.current?.blur();
-              setSearchQuery("");
-              setFocusedOptionIndex(void 0);
+              if (!withMultiselect) {
+                setIsOpen.setFalse();
+                inputRef.current?.blur();
+                setSearchQuery("");
+                setFocusedOptionIndex(void 0);
+              }
             }
           }
         }
@@ -5931,10 +5935,12 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
         const newValue = withMultiselect ? Array.isArray(internalValue) ? internalValue?.includes(clickedValue) ? internalValue.filter((value2) => value2 !== clickedValue) : [...internalValue, clickedValue] : [clickedValue] : clickedValue;
         if (controlledValue === void 0) setInternalValue(newValue);
         onChange?.(newValue);
-        setIsOpen.setFalse();
-        inputRef.current?.blur();
-        setSearchQuery("");
-        setFocusedOptionIndex(void 0);
+        if (!withMultiselect) {
+          setIsOpen.setFalse();
+          inputRef.current?.blur();
+          setSearchQuery("");
+          setFocusedOptionIndex(void 0);
+        }
       }
     },
     [onChange, internalValue, controlledValue, withMultiselect]