@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.0

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
 import { classNames } from "../../commonHelpers/classNames/classNames";
@@ -5,141 +6,205 @@ import { useEffect, useRef, useState, Children, cloneElement, useCallback } from
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
-const getScrollButtonType = (element) => {
-    const scrollLeft = element.scrollLeft;
-    const scrollWidth = element.scrollWidth;
-    const clientWidth = element.clientWidth;
-    if (scrollLeft === 0 && scrollWidth === clientWidth) {
-        return "";
+injectString("cs", "Scroll left", "P\u0159ej\xEDt doleva");
+injectString("da-DK", "Scroll left", "Rul til venstre");
+injectString("de", "Scroll left", "Nach links scrollen");
+injectString("en", "Scroll left", "Scroll left");
+injectString("es", "Scroll left", "Desplazarse a la izquierda");
+injectString("fi-FI", "Scroll left", "Selaa vasemmalle");
+injectString("fr", "Scroll left", "D\xE9filer vers la gauche");
+injectString("fr-FR", "Scroll left", "Faire d\xE9filer vers la gauche");
+injectString("hu-HU", "Scroll left", "Lapozz balra.");
+injectString("id", "Scroll left", "Gulir ke kiri");
+injectString("it", "Scroll left", "Scorrere verso sinistra");
+injectString("ja", "Scroll left", "\u5DE6\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll left", "\uC67C\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll left", "Skrol ke kiri");
+injectString("nb-NO", "Scroll left", "Rull til venstre");
+injectString("nl", "Scroll left", "Blader naar links");
+injectString("pl", "Scroll left", "Przewi\u0144 w lewo");
+injectString("pt-BR", "Scroll left", "Rolar para a esquerda");
+injectString("sk-SK", "Scroll left", "Posu\u0148 do\u013Eava");
+injectString("sv", "Scroll left", "Bl\xE4ddra \xE5t v\xE4nster");
+injectString("th", "Scroll left", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E32\u0E07\u0E0B\u0E49\u0E32\u0E22");
+injectString("tr", "Scroll left", "Sola kayd\u0131r");
+injectString("zh-Hans", "Scroll left", "\u5411\u5DE6\u6EDA\u52A8");
+injectString("zh-TW", "Scroll left", "\u5411\u5DE6\u6372\u52D5");
+injectString("cs", "Scroll right", "P\u0159ej\xEDt doprava");
+injectString("da-DK", "Scroll right", "Rul til h\xF8jre");
+injectString("de", "Scroll right", "Nach rechts scrollen");
+injectString("en", "Scroll right", "Scroll right");
+injectString("es", "Scroll right", "Desplazarse a la derecha");
+injectString("fi-FI", "Scroll right", "Selaa oikealle");
+injectString("fr", "Scroll right", "D\xE9filer vers la droite");
+injectString("fr-FR", "Scroll right", "Faire d\xE9filer vers la droite");
+injectString("hu-HU", "Scroll right", "Lapozz jobbra.");
+injectString("id", "Scroll right", "Gulir ke kanan");
+injectString("it", "Scroll right", "Scorrere verso destra");
+injectString("ja", "Scroll right", "\u53F3\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll right", "\uC624\uB978\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll right", "Skrol ke kanan");
+injectString("nb-NO", "Scroll right", "Rull til h\xF8yre");
+injectString("nl", "Scroll right", "Blader naar rechts");
+injectString("pl", "Scroll right", "Przewi\u0144 w prawo");
+injectString("pt-BR", "Scroll right", "Rolar para a direita");
+injectString("sk-SK", "Scroll right", "Posu\u0148 doprava");
+injectString("sv", "Scroll right", "Bl\xE4ddra \xE5t h\xF6ger");
+injectString("th", "Scroll right", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E32\u0E07\u0E02\u0E27\u0E32");
+injectString("tr", "Scroll right", "Sa\u011Fa Kayd\u0131r");
+injectString("zh-Hans", "Scroll right", "\u5411\u53F3\u6EDA\u52A8");
+injectString("zh-TW", "Scroll right", "\u5411\u53F3\u6372\u52D5");
+const getScrollButtonType = element => {
+  const scrollLeft = element.scrollLeft;
+  const scrollWidth = element.scrollWidth;
+  const clientWidth = element.clientWidth;
+  if (scrollLeft === 0 && scrollWidth === clientWidth) {
+    return "";
+  }
+  if (scrollLeft > 0 && scrollWidth > clientWidth + scrollLeft + 1) {
+    return "both";
+  }
+  if (scrollLeft === 0) {
+    return "end";
+  }
+  return "start";
+};
+export const FiltersContainer = ({
+  className,
+  children
+}) => {
+  const scrollableStep = 200;
+  const fadeTransitionDuration = 300;
+  const {
+    translate
+  } = useLanguage();
+  const gradientClass = "zen-filters-toolbar__gradient";
+  const scrollerClass = "zen-filters-toolbar__scroller";
+  const driveClassNameScroller = useDriveClassName(scrollerClass);
+  const driveClassNameGradient = useDriveClassName(gradientClass);
+  const [scrollButtonType, setScrollButtonType] = useState("");
+  const scrollableRef = useRef(null);
+  const [isHiddenDisplay, setIsHiddenDisplay] = useState({
+    left: true,
+    right: true
+  });
+  const leftTimeoutRef = useRef(null);
+  const rightTimeoutRef = useRef(null);
+  const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
+  const showRight = scrollButtonType === "end" || scrollButtonType === "both";
+  useEffect(() => {
+    if (!scrollableRef.current) {
+      return () => {};
     }
-    if (scrollLeft > 0 && (scrollWidth > clientWidth + scrollLeft + 1)) {
-        return "both";
+    let timer = undefined;
+    const resizeHandler = () => {
+      const scrollableElt = scrollableRef.current;
+      if (scrollableElt) {
+        timer && window.clearTimeout(timer);
+        timer = window.setTimeout(() => {
+          setScrollButtonType(getScrollButtonType(scrollableElt));
+        }, 200);
+      }
+    };
+    const scrollableElement = scrollableRef.current;
+    scrollableElement.addEventListener("scroll", resizeHandler);
+    window.addEventListener("resize", resizeHandler);
+    resizeHandler();
+    return () => {
+      timer && window.clearTimeout(timer);
+      scrollableElement.removeEventListener("scroll", resizeHandler);
+      window.removeEventListener("resize", resizeHandler);
+    };
+  }, [scrollableRef]);
+  useEffect(() => {
+    if (scrollableRef.current) {
+      setScrollButtonType(getScrollButtonType(scrollableRef.current));
     }
-    if (scrollLeft === 0) {
-        return "end";
+  }, [scrollableRef, children]);
+  useEffect(() => {
+    if (showLeft) {
+      if (leftTimeoutRef.current) {
+        clearTimeout(leftTimeoutRef.current);
+      }
+      setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
+        left: false
+      }));
+    } else {
+      leftTimeoutRef.current = window.setTimeout(() => {
+        setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
+          left: true
+        }));
+      }, fadeTransitionDuration);
     }
-    return "start";
-};
-export const FiltersContainer = ({ className, children }) => {
-    const scrollableStep = 200;
-    const fadeTransitionDuration = 300;
-    const { translate } = useLanguage();
-    const gradientClass = "zen-filters-toolbar__gradient";
-    const scrollerClass = "zen-filters-toolbar__scroller";
-    const driveClassNameScroller = useDriveClassName(scrollerClass);
-    const driveClassNameGradient = useDriveClassName(gradientClass);
-    const [scrollButtonType, setScrollButtonType] = useState("");
-    const scrollableRef = useRef(null);
-    const [isHiddenDisplay, setIsHiddenDisplay] = useState({ left: true, right: true });
-    const leftTimeoutRef = useRef(null);
-    const rightTimeoutRef = useRef(null);
-    const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
-    const showRight = scrollButtonType === "end" || scrollButtonType === "both";
-    useEffect(() => {
-        if (!scrollableRef.current) {
-            return () => { };
-        }
-        let timer = undefined;
-        const resizeHandler = () => {
-            const scrollableElt = scrollableRef.current;
-            if (scrollableElt) {
-                timer && window.clearTimeout(timer);
-                timer = window.setTimeout(() => {
-                    setScrollButtonType(getScrollButtonType(scrollableElt));
-                }, 200);
-            }
-        };
-        const scrollableElement = scrollableRef.current;
-        scrollableElement.addEventListener("scroll", resizeHandler);
-        window.addEventListener("resize", resizeHandler);
-        resizeHandler();
-        return () => {
-            timer && window.clearTimeout(timer);
-            scrollableElement.removeEventListener("scroll", resizeHandler);
-            window.removeEventListener("resize", resizeHandler);
-        };
-    }, [scrollableRef]);
-    useEffect(() => {
-        if (scrollableRef.current) {
-            setScrollButtonType(getScrollButtonType(scrollableRef.current));
-        }
-    }, [scrollableRef, children]);
-    useEffect(() => {
-        if (showLeft) {
-            if (leftTimeoutRef.current) {
-                clearTimeout(leftTimeoutRef.current);
-            }
-            setIsHiddenDisplay(prev => (Object.assign(Object.assign({}, prev), { left: false })));
-        }
-        else {
-            leftTimeoutRef.current = window.setTimeout(() => {
-                setIsHiddenDisplay(prev => (Object.assign(Object.assign({}, prev), { left: true })));
-            }, fadeTransitionDuration);
-        }
-        if (showRight) {
-            if (rightTimeoutRef.current) {
-                clearTimeout(rightTimeoutRef.current);
-            }
-            setIsHiddenDisplay(prev => (Object.assign(Object.assign({}, prev), { right: false })));
-        }
-        else {
-            rightTimeoutRef.current = window.setTimeout(() => {
-                setIsHiddenDisplay(prev => (Object.assign(Object.assign({}, prev), { right: true })));
-            }, fadeTransitionDuration);
-        }
-        return () => {
-            if (leftTimeoutRef.current) {
-                clearTimeout(leftTimeoutRef.current);
-            }
-            if (rightTimeoutRef.current) {
-                clearTimeout(rightTimeoutRef.current);
-            }
-        };
-    }, [showLeft, showRight]);
-    const handleScrollButtonClick = useCallback((delta) => () => {
-        var _a;
-        (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
-            left: delta,
-            behavior: "smooth"
-        });
-    }, []);
-    const filtersForRender = Children.map(children, (child, index) => {
-        if (child.props.hideInBar) {
-            return null;
-        }
-        const childComponent = cloneElement(child, { useSidePanelView: false });
-        return _jsx("div", { className: "zen-filters-toolbar__filters-item", children: childComponent }, `filtersBarItem_${index}`);
+    if (showRight) {
+      if (rightTimeoutRef.current) {
+        clearTimeout(rightTimeoutRef.current);
+      }
+      setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
+        right: false
+      }));
+    } else {
+      rightTimeoutRef.current = window.setTimeout(() => {
+        setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
+          right: true
+        }));
+      }, fadeTransitionDuration);
+    }
+    return () => {
+      if (leftTimeoutRef.current) {
+        clearTimeout(leftTimeoutRef.current);
+      }
+      if (rightTimeoutRef.current) {
+        clearTimeout(rightTimeoutRef.current);
+      }
+    };
+  }, [showLeft, showRight]);
+  const handleScrollButtonClick = useCallback(delta => () => {
+    var _a;
+    (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
+      left: delta,
+      behavior: "smooth"
+    });
+  }, []);
+  const filtersForRender = Children.map(children, (child, index) => {
+    if (child.props.hideInBar) {
+      return null;
+    }
+    const childComponent = cloneElement(child, {
+      useSidePanelView: false
     });
-    return filtersForRender.length ? _jsxs("div", { className: classNames(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]), children: [_jsx("div", { className: classNames([
-                    gradientClass,
-                    driveClassNameGradient || "",
-                    `${gradientClass}--left`,
-                    showLeft ? `${gradientClass}--visible` : "",
-                    isHiddenDisplay.left ? `${gradientClass}--hidden` : ""
-                ]) }), _jsx(TextIconButton, { title: translate("Scroll left"), className: classNames([
-                    "zen-filters-toolbar__scroller",
-                    driveClassNameScroller || "",
-                    "zen-filters-toolbar__start",
-                    showLeft ? `${scrollerClass}--visible` : "",
-                    isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""
-                ]), icon: IconChevronRight, iconPosition: ButtonIconPosition.Start, onClick: handleScrollButtonClick(-scrollableStep), iconClasses: "zen-filters-toolbar__start-icon" }), _jsx("div", { ref: scrollableRef, className: classNames([
-                    "zen-filters-toolbar__scrollable",
-                    !isHiddenDisplay.left ? "has-left-scroller" : "",
-                    !isHiddenDisplay.right ? "has-right-scroller" : ""
-                ]), children: _jsx("div", { className: "zen-filters-toolbar__filters", children: filtersForRender }) }), _jsx("div", { className: classNames([
-                    gradientClass,
-                    driveClassNameGradient || "",
-                    `${gradientClass}--right`,
-                    showRight ? `${gradientClass}--visible` : "",
-                    isHiddenDisplay.right ? `${gradientClass}--hidden` : ""
-                ]) }), _jsx(TextIconButton, { title: translate("Scroll right"), className: classNames([
-                    scrollerClass,
-                    driveClassNameScroller || "", "zen-filters-toolbar__end",
-                    showRight ? `${scrollerClass}--visible` : "",
-                    isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""
-                ]), icon: IconChevronRight, onClick: handleScrollButtonClick(scrollableStep), iconPosition: ButtonIconPosition.End })] }) : null;
+    return _jsx("div", {
+      className: "zen-filters-toolbar__filters-item",
+      children: childComponent
+    }, `filtersBarItem_${index}`);
+  });
+  return filtersForRender.length ? _jsxs("div", {
+    className: classNames(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]),
+    children: [_jsx("div", {
+      className: classNames([gradientClass, driveClassNameGradient || "", `${gradientClass}--left`, showLeft ? `${gradientClass}--visible` : "", isHiddenDisplay.left ? `${gradientClass}--hidden` : ""])
+    }), _jsx(TextIconButton, {
+      title: translate("Scroll left"),
+      className: classNames(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
+      icon: IconChevronRight,
+      iconPosition: ButtonIconPosition.Start,
+      onClick: handleScrollButtonClick(-scrollableStep),
+      iconClasses: "zen-filters-toolbar__start-icon"
+    }), _jsx("div", {
+      ref: scrollableRef,
+      className: classNames(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
+      children: _jsx("div", {
+        className: "zen-filters-toolbar__filters",
+        children: filtersForRender
+      })
+    }), _jsx("div", {
+      className: classNames([gradientClass, driveClassNameGradient || "", `${gradientClass}--right`, showRight ? `${gradientClass}--visible` : "", isHiddenDisplay.right ? `${gradientClass}--hidden` : ""])
+    }), _jsx(TextIconButton, {
+      title: translate("Scroll right"),
+      className: classNames([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
+      icon: IconChevronRight,
+      onClick: handleScrollButtonClick(scrollableStep),
+      iconPosition: ButtonIconPosition.End
+    })]
+  }) : null;
 };
-export const TRANSLATIONS = [
-    "Scroll left",
-    "Scroll right"
-];
+export const TRANSLATIONS = ["Scroll left", "Scroll right"];

package/esm/formField/components/formFieldWithLabel.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldWithLabel: ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId }: {
+export declare const FormFieldWithLabel: ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId, showAdditionalInfo }: {
     hasCustomWidth: any;
     classes: any;
     widthObj: any;
@@ -7,4 +7,5 @@ export declare const FormFieldWithLabel: ({ hasCustomWidth, classes, widthObj, p
     container: any;
     trailing: any;
     trailingId: any;
+    showAdditionalInfo: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/formField/components/formFieldWithLabel.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormGroupItem } from "../../formGroupItem/formGroupItem";
-export const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId }) => {
+import { TrailingComponent } from "./trailingComponent";
+export const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId, showAdditionalInfo }) => {
     if (!hasCustomWidth) {
         return _jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] });
     }
-    return _jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] }), trailing && _jsx("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] });
+    return _jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] }), trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
 };

package/esm/formField/components/formFieldWithoutLabel.d.ts

@@ -1,8 +1,9 @@
-export declare const FormFieldWithoutLabel: ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId }: {
+export declare const FormFieldWithoutLabel: ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId, showAdditionalInfo }: {
     hasCustomWidth: any;
     classes: any;
     widthObj: any;
     container: any;
     trailing: any;
     trailingId: any;
+    showAdditionalInfo: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/formField/components/formFieldWithoutLabel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../commonHelpers/classNames/classNames";
-export const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId }) => {
+import { TrailingComponent } from "./trailingComponent";
+export const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId, showAdditionalInfo }) => {
     if (!hasCustomWidth) {
         return _jsx("div", { className: classes, style: widthObj, children: container });
     }
-    return _jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsx("div", { className: classes, style: widthObj, children: container }), trailing && _jsx("span", { className: classNames(["zen-form-field__trailing-text"]), id: trailingId, children: trailing })] });
+    return _jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsx("div", { className: classes, style: widthObj, children: container }), trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
 };

package/esm/formField/components/trailingComponent.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+interface ITrailingComponentProps {
+    id: string;
+    value: string;
+    hasAdditionalInfo: boolean;
+}
+export declare const TrailingComponent: FC<ITrailingComponentProps>;
+export {};

package/esm/formField/components/trailingComponent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TrailingComponent = ({ id, value, hasAdditionalInfo }) => {
+    if (hasAdditionalInfo) {
+        return _jsx("div", { className: "zen-form-field__trailing-wrapper", children: _jsx("span", { className: "zen-form-field__trailing-text", id: id, children: value }) });
+    }
+    return _jsx("span", { className: "zen-form-field__trailing-text", id: id, children: value });
+};

package/esm/formField/formField.js

@@ -30,6 +30,7 @@ import { useLoading } from "./hooks/useLoading";
 import { useReadonly } from "./hooks/useReadonly";
 import { FormFieldWithLabel } from "./components/formFieldWithLabel";
 import { FormFieldWithoutLabel } from "./components/formFieldWithoutLabel";
+import { TrailingComponent } from "./components/trailingComponent";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormField = function FormFieldInner(WrappedComponent) {
     // eslint-disable-next-line complexity
@@ -56,15 +57,15 @@ export const FormField = function FormFieldInner(WrappedComponent) {
         const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
         const localId = useId();
         const id = props.id || localId;
-        const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), !hasCustomWidth && trailing && _jsx("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] }), showAdditionalInfo ?
-                    _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx("div", { id: assistiveId || errorId, className: classNames([
-                                    "zen-form-field__text",
-                                    driveTextClass || "",
-                                    error ? "zen-form-field__text--error" : ""
-                                ]), children: error ? _jsx(FormFieldError, { error: error }) : assistive }), counter
-                                ? _jsx("div", { className: classNames(["zen-form-field__length"]), children: counter })
-                                : ""] })
-                    : null, banner] }), [isInputContainerHidden, trailing, rest, disabledProps, isReadonly, id, componentClassName, ref, props.isError, error, ariaDescribedBy, hasCustomWidth, trailingId, showAdditionalInfo, assistiveId, errorId, driveTextClass, assistive, counter, banner]);
+        const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [_jsxs("div", { children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), showAdditionalInfo ?
+                                    _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx("div", { id: assistiveId || errorId, className: classNames([
+                                                    "zen-form-field__text",
+                                                    driveTextClass || "",
+                                                    error ? "zen-form-field__text--error" : ""
+                                                ]), children: error ? _jsx(FormFieldError, { error: error }) : assistive }), counter
+                                                ? _jsx("div", { className: classNames(["zen-form-field__length"]), children: counter })
+                                                : ""] })
+                                    : null] }), !hasCustomWidth && trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isInputContainerHidden, trailing, rest, disabledProps, isReadonly, id, componentClassName, ref, props.isError, error, ariaDescribedBy, hasCustomWidth, trailingId, showAdditionalInfo, assistiveId, errorId, driveTextClass, assistive, counter, banner]);
         const classes = classNames([
             "zen-form-field",
             isMobile ? "zen-form-field--mobile" : "",
@@ -78,9 +79,9 @@ export const FormField = function FormFieldInner(WrappedComponent) {
         }
         // TODO: refactor?
         if (props.label && rangeRawLabelCheck(WrappedComponent, props)) {
-            return _jsx(FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId });
+            return _jsx(FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
         }
-        return _jsx(FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId });
+        return _jsx(FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
     };
     InnerFormField.displayName = "InnerFormField";
     return InnerFormField;

package/esm/formField/hooks/useError.js

@@ -1,45 +1,104 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { useFormField } from "../../commonHelpers/hooks/useFormField";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { FormFieldBanner } from "../components/formFieldBanner";
 import { hasErrorProps } from "../../commonHelpers/loading";
-export const useError = (props) => {
-    var _a, _b, _c, _d;
-    const errorId = useId();
-    const { fieldState } = useFormField(props.controller);
-    const { translate } = useLanguage();
-    if (hasErrorProps(props)) {
-        const action = props.retry ? {
-            text: translate("Reload"),
-            onClick: props.retry
-        } : undefined;
-        return {
-            id: errorId,
-            errorBanner: _jsx(FormFieldBanner, { multiline: false, action: action, type: "error", children: translate("Failed to load {0}").replace("{0}", props.bannerLabel || "") })
-        };
+injectString("cs", "Reload", "Na\u010D\xEDst znovu");
+injectString("da-DK", "Reload", "Genindl\xE6s");
+injectString("de", "Reload", "Neu laden");
+injectString("en", "Reload", "Reload");
+injectString("es", "Reload", "Volver a cargar");
+injectString("fi-FI", "Reload", "Ladata uudelleen");
+injectString("fr", "Reload", "Recharger");
+injectString("fr-FR", "Reload", "Actualiser");
+injectString("hu-HU", "Reload", "\xDAjrat\xF6lt\xE9s");
+injectString("id", "Reload", "Muat ulang");
+injectString("it", "Reload", "Ricarica");
+injectString("ja", "Reload", "\u518D\u8AAD\u8FBC");
+injectString("ko-KR", "Reload", "\uB2E4\uC2DC \uBD88\uB7EC\uC624\uAE30");
+injectString("ms", "Reload", "Muatkan semula");
+injectString("nb-NO", "Reload", "Last inn p\xE5 nytt");
+injectString("nl", "Reload", "Herladen");
+injectString("pl", "Reload", "Od\u015Bwie\u017C");
+injectString("pt-BR", "Reload", "Recarregar");
+injectString("sk-SK", "Reload", "Obnovi\u0165");
+injectString("sv", "Reload", "Ladda igen");
+injectString("th", "Reload", "\u0E42\u0E2B\u0E25\u0E14\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+injectString("tr", "Reload", "Yeniden y\xFCkle");
+injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
+injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
+injectString("en", "Failed to load {0}", "Failed to load {0}");
+injectString("cs", "This field is required.", "Toto pole je povinn\xE9.");
+injectString("da-DK", "This field is required.", "Dette felt er p\xE5kr\xE6vet.");
+injectString("de", "This field is required.", "Dieses Feld ist erforderlich.");
+injectString("en", "This field is required.", "This field is required.");
+injectString("es", "This field is required.", "Este campo es obligatorio.");
+injectString("fi-FI", "This field is required.", "T\xE4m\xE4 kentt\xE4 on pakollinen.");
+injectString("fr", "This field is required.", "Ce champ est obligatoire.");
+injectString("fr-FR", "This field is required.", "Ce champ est requis.");
+injectString("hu-HU", "This field is required.", "Ez a mez\u0151 k\xF6telez\u0151.");
+injectString("id", "This field is required.", "Bidang ini harus diisi.");
+injectString("it", "This field is required.", "Questo campo \xE8 obbligatorio.");
+injectString("ja", "This field is required.", "\u3053\u306E\u30D5\u30A3\u30FC\u30EB\u30C9\u306F\u5FC5\u9808\u3067\u3059\u3002");
+injectString("ko-KR", "This field is required.", "\uC774 \uD544\uB4DC\uB294 \uD544\uC218\uC785\uB2C8\uB2E4.");
+injectString("ms", "This field is required.", "Medan ini diperlukan.");
+injectString("nb-NO", "This field is required.", "Dette feltet er p\xE5krevd.");
+injectString("nl", "This field is required.", "Dit veld is verplicht.");
+injectString("pl", "This field is required.", "To pole jest wymagane.");
+injectString("pt-BR", "This field is required.", "Este campo \xE9 obrigat\xF3rio.");
+injectString("sk-SK", "This field is required.", "Toto pole je povinn\xE9.");
+injectString("sv", "This field is required.", "Det h\xE4r f\xE4ltet \xE4r obligatoriskt.");
+injectString("th", "This field is required.", "\u0E15\u0E49\u0E2D\u0E07\u0E43\u0E2A\u0E48\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E43\u0E19\u0E1F\u0E34\u0E25\u0E14\u0E4C\u0E19\u0E35\u0E49");
+injectString("tr", "This field is required.", "Bu alan zorunludur.");
+injectString("zh-Hans", "This field is required.", "\u8BE5\u5B57\u6BB5\u4E3A\u5FC5\u586B\u9879\u3002");
+injectString("zh-TW", "This field is required.", "\u6B64\u6B04\u4F4D\u70BA\u5FC5\u586B\u3002");
+export const useError = props => {
+  var _a, _b, _c, _d;
+  const errorId = useId();
+  const {
+    fieldState
+  } = useFormField(props.controller);
+  const {
+    translate
+  } = useLanguage();
+  if (hasErrorProps(props)) {
+    const action = props.retry ? {
+      text: translate("Reload"),
+      onClick: props.retry
+    } : undefined;
+    return {
+      id: errorId,
+      errorBanner: _jsx(FormFieldBanner, {
+        multiline: false,
+        action: action,
+        type: "error",
+        children: translate("Failed to load {0}").replace("{0}", props.bannerLabel || "")
+      })
+    };
+  }
+  if (!props.error && !((_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || props.isReadOnly) {
+    if (props.isReadOnly) {
+      return {
+        id: "",
+        error: null
+      };
     }
-    if ((!props.error && !((_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message)) || props.isReadOnly) {
-        if (props.isReadOnly) {
-            return {
-                id: "",
-                error: null
-            };
-        }
-        if (!((_b = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _b === void 0 ? void 0 : _b.message) && ((_c = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _c === void 0 ? void 0 : _c.type) === "required") {
-            return {
-                id: errorId,
-                error: translate("This field is required.")
-            };
-        }
-        return {
-            id: "",
-            error: null
-        };
+    if (!((_b = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _b === void 0 ? void 0 : _b.message) && ((_c = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _c === void 0 ? void 0 : _c.type) === "required") {
+      return {
+        id: errorId,
+        error: translate("This field is required.")
+      };
     }
-    const error = ((_d = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.error;
     return {
-        id: error ? errorId : "",
-        error
+      id: "",
+      error: null
     };
-};
+  }
+  const error = ((_d = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.error;
+  return {
+    id: error ? errorId : "",
+    error
+  };
+};