react-better-html 1.1.153 → 1.1.155

package/dist/index.d.mts

@@ -44,8 +44,9 @@ type DivProps<Value = unknown> = {
     as?: WebTarget;
     /** @default false */
     isTabAccessed?: boolean;
+    htmlContentTranslate?: React.ComponentProps<"div">["translate"];
     onClickWithValue?: (value: Value) => void;
-} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue" | "translate"> & ComponentStyle & ComponentHoverStyle;
 type DivComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
     row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
@@ -386,6 +387,10 @@ type InputFieldProps = {
     infoText?: string;
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
+    prefix?: React.ReactNode;
+    prefixBackgroundColor?: string;
+    suffix?: React.ReactNode;
+    suffixBackgroundColor?: string;
     insideInputFieldComponent?: React.ReactNode;
     /** @default false */
     withDebounce?: boolean;
@@ -394,7 +399,7 @@ type InputFieldProps = {
     onChangeValue?: (value: string) => void;
     onClickRightIcon?: () => void;
     holderRef?: React.ForwardedRef<HTMLDivElement>;
-} & OmitProps<React.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
 type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
 type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
@@ -402,7 +407,7 @@ type InputFieldComponentType = {
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type">>) => React.ReactElement;
+    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
     date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
         minDate?: Date;
         maxDate?: Date;

package/dist/index.d.ts

@@ -44,8 +44,9 @@ type DivProps<Value = unknown> = {
     as?: WebTarget;
     /** @default false */
     isTabAccessed?: boolean;
+    htmlContentTranslate?: React.ComponentProps<"div">["translate"];
     onClickWithValue?: (value: Value) => void;
-} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue" | "translate"> & ComponentStyle & ComponentHoverStyle;
 type DivComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
     row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
@@ -386,6 +387,10 @@ type InputFieldProps = {
     infoText?: string;
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
+    prefix?: React.ReactNode;
+    prefixBackgroundColor?: string;
+    suffix?: React.ReactNode;
+    suffixBackgroundColor?: string;
     insideInputFieldComponent?: React.ReactNode;
     /** @default false */
     withDebounce?: boolean;
@@ -394,7 +399,7 @@ type InputFieldProps = {
     onChangeValue?: (value: string) => void;
     onClickRightIcon?: () => void;
     holderRef?: React.ForwardedRef<HTMLDivElement>;
-} & OmitProps<React.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
 type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
 type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
@@ -402,7 +407,7 @@ type InputFieldComponentType = {
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type">>) => React.ReactElement;
+    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
     date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
         minDate?: Date;
         maxDate?: Date;

package/dist/index.js

@@ -3170,6 +3170,7 @@ var DivComponent = (0, import_react11.forwardRef)(function Div({
   as = "div",
   value,
   isTabAccessed,
+  htmlContentTranslate,
   onClickWithValue,
   role,
   onClick,
@@ -3205,6 +3206,7 @@ var DivComponent = (0, import_react11.forwardRef)(function Div({
     {
       as,
       tabIndex: isTabAccessed && !isMobileDevice ? 0 : void 0,
+      translate: htmlContentTranslate,
       role: role ?? (onClick ? "button" : void 0),
       onClick: onClickElement,
       onKeyDown: onKeyDownElement,
@@ -6030,7 +6032,9 @@ var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = import_styled_components11.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "withPrefix", "withSuffix", "normalStyle", "hoverStyle"].includes(
+    prop
+  )
 })`
    position: relative;
    width: 100%;
@@ -6041,10 +6045,14 @@ var InputElement = import_styled_components11.default.input.withConfig({
    background: ${(props) => props.theme.colors.backgroundContent};
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
+   border-top-left-radius: ${(props) => props.withPrefix ? 0 : void 0};
+   border-bottom-left-radius: ${(props) => props.withPrefix ? 0 : void 0};
+   border-top-right-radius: ${(props) => props.withSuffix ? 0 : void 0};
+   border-bottom-right-radius: ${(props) => props.withSuffix ? 0 : void 0};
    outline: none;
-   padding: ${(props) => `${(props.theme.styles.space + props.theme.styles.gap) / 2}px ${props.theme.styles.space + props.theme.styles.gap}px`};
-   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
-   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
+   padding: ${(props) => `${(props.theme.styles.space + props.theme.styles.gap) / 2}px ${props.theme.styles.space}px`};
+   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : props.withPrefix ? `${props.theme.styles.space}px` : void 0};
+   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : props.withSuffix ? `${props.theme.styles.space}px` : void 0};
    transition: ${(props) => props.theme.styles.transition};
 
    &::placeholder {
@@ -6151,7 +6159,7 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
    outline: none;
-   padding: ${(props) => `${(props.theme.styles.gap + props.theme.styles.space) / 2}px ${props.theme.styles.space + props.theme.styles.gap}px`};
+   padding: ${(props) => `${(props.theme.styles.gap + props.theme.styles.space) / 2}px ${props.theme.styles.space}px`};
    padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
    padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
    resize: vertical;
@@ -6180,6 +6188,10 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
   infoText,
   leftIcon,
   rightIcon,
+  prefix,
+  prefixBackgroundColor,
+  suffix,
+  suffixBackgroundColor,
   insideInputFieldComponent,
   withDebounce,
   debounceDelay = 0.5,
@@ -6194,6 +6206,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
 }, ref) {
   const theme2 = useTheme();
   const internalId = (0, import_react20.useId)();
+  const { colorTheme } = useBetterHtmlContextInternal();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
     debounceDelay
@@ -6229,58 +6242,90 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
   const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Icon_default,
-        {
-          name: leftIcon,
-          position: "absolute",
-          top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
-          left: theme2.styles.space + 1,
-          transform: "translateY(-50%)",
-          pointerEvents: "none",
-          zIndex: leftIconZIndex
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        InputElement,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "stretch", width: "100%", children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Div_default.row,
         {
-          theme: theme2,
-          withLeftIcon: leftIcon !== void 0,
-          withRightIcon: rightIcon !== void 0,
-          required,
-          placeholder: placeholder ?? label,
-          id: readyId,
-          onChange: onChangeElement,
-          ...styledComponentStylesWithoutExcluded,
-          ...dataProps,
-          ...ariaProps,
-          ...restProps,
-          ref
+          alignItems: "center",
+          justifyContent: "center",
+          border: `1px solid ${theme2.colors.border}`,
+          borderRight: "none",
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
+          children: prefix
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Button_default.icon,
-        {
-          icon: rightIcon,
-          position: "absolute",
-          top: 46 / 2,
-          right: theme2.styles.space + 1 - theme2.styles.space / 2,
-          transform: "translateY(-50%)",
-          onClick: onClickRightIcon
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Icon_default,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Icon_default,
+          {
+            name: leftIcon,
+            position: "absolute",
+            top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
+            left: theme2.styles.space + 1,
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+            zIndex: leftIconZIndex
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          InputElement,
+          {
+            theme: theme2,
+            withLeftIcon: leftIcon !== void 0,
+            withRightIcon: rightIcon !== void 0,
+            withPrefix: prefix !== void 0,
+            withSuffix: suffix !== void 0,
+            required,
+            placeholder: placeholder ?? label,
+            id: readyId,
+            onChange: onChangeElement,
+            ...styledComponentStylesWithoutExcluded,
+            ...dataProps,
+            ...ariaProps,
+            ...restProps,
+            ref
+          }
+        ),
+        rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Button_default.icon,
+          {
+            icon: rightIcon,
+            position: "absolute",
+            top: 46 / 2,
+            right: theme2.styles.space + 1 - theme2.styles.space / 2,
+            transform: "translateY(-50%)",
+            onClick: onClickRightIcon
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Icon_default,
+          {
+            name: rightIcon,
+            position: "absolute",
+            top: 46 / 2,
+            right: theme2.styles.space + 1,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        ) : void 0,
+        insideInputFieldComponent
+      ] }),
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Div_default.row,
         {
-          name: rightIcon,
-          position: "absolute",
-          top: 46 / 2,
-          right: theme2.styles.space + 1,
-          transform: "translateY(-50%)",
-          pointerEvents: "none"
+          alignItems: "center",
+          justifyContent: "center",
+          border: `1px solid ${theme2.colors.border}`,
+          borderLeft: "none",
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
+          children: suffix
         }
-      ) : void 0,
-      insideInputFieldComponent
+      )
     ] }),
     (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Text_default,