@geotab/zenith 3.1.1-beta.5 → 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.d.ts

@@ -7,7 +7,6 @@ export type TLabelAlign = "left" | "top";
 interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
-    wrapperClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;

package/esm/formField/formField.js

@@ -30,7 +30,7 @@ import { useLoading } from "./hooks/useLoading";
 import { useReadonly } from "./hooks/useReadonly";
 import { FormFieldWithLabel } from "./components/formFieldWithLabel";
 import { FormFieldWithoutLabel } from "./components/formFieldWithoutLabel";
-import { useClasses } from "./hooks/useClasses";
+import { TrailingComponent } from "./components/trailingComponent";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormField = function FormFieldInner(WrappedComponent) {
     // eslint-disable-next-line complexity
@@ -49,30 +49,29 @@ export const FormField = function FormFieldInner(WrappedComponent) {
         // TODO: add tests
         const banner = errorBanner || bannerComp;
         const isInputContainerHidden = isReadonly && props.isError;
-        const { inputClassName, counter } = props, rest = __rest(props, ["inputClassName", "counter"]);
+        const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
         const driveTextClass = useDriveClassName("zen-form-field__text");
-        const { componentClasses, wrapperClasses } = useClasses(props, WrappedComponent);
         // TODO: Banner? Only it or assistive text?
         const showAdditionalInfo = (error || assistive || counter) && !isReadonly;
-        const componentClassName = classNames(["zen-form-field__input", componentClasses || ""]);
+        const componentClassName = classNames(["zen-form-field__input", inputClassName || ""]);
         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" : "",
             banner ? "zen-form-field--with-banner" : "",
             !props.label ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
-            wrapperClasses || ""
+            className || ""
         ]);
         if (isLoading) {
             const height = WrappedComponent.displayName === TextareaRaw.displayName ? 110 : 32;
@@ -80,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;