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

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.FiltersContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
@@ -8,142 +14,206 @@ const react_1 = require("react");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../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";
+};
+const FiltersContainer = ({
+  className,
+  children
+}) => {
+  const scrollableStep = 200;
+  const fadeTransitionDuration = 300;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const gradientClass = "zen-filters-toolbar__gradient";
+  const scrollerClass = "zen-filters-toolbar__scroller";
+  const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)(scrollerClass);
+  const driveClassNameGradient = (0, useDriveClassName_1.useDriveClassName)(gradientClass);
+  const [scrollButtonType, setScrollButtonType] = (0, react_1.useState)("");
+  const scrollableRef = (0, react_1.useRef)(null);
+  const [isHiddenDisplay, setIsHiddenDisplay] = (0, react_1.useState)({
+    left: true,
+    right: true
+  });
+  const leftTimeoutRef = (0, react_1.useRef)(null);
+  const rightTimeoutRef = (0, react_1.useRef)(null);
+  const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
+  const showRight = scrollButtonType === "end" || scrollButtonType === "both";
+  (0, react_1.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]);
+  (0, react_1.useEffect)(() => {
+    if (scrollableRef.current) {
+      setScrollButtonType(getScrollButtonType(scrollableRef.current));
     }
-    if (scrollLeft === 0) {
-        return "end";
+  }, [scrollableRef, children]);
+  (0, react_1.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";
-};
-const FiltersContainer = ({ className, children }) => {
-    const scrollableStep = 200;
-    const fadeTransitionDuration = 300;
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const gradientClass = "zen-filters-toolbar__gradient";
-    const scrollerClass = "zen-filters-toolbar__scroller";
-    const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)(scrollerClass);
-    const driveClassNameGradient = (0, useDriveClassName_1.useDriveClassName)(gradientClass);
-    const [scrollButtonType, setScrollButtonType] = (0, react_1.useState)("");
-    const scrollableRef = (0, react_1.useRef)(null);
-    const [isHiddenDisplay, setIsHiddenDisplay] = (0, react_1.useState)({ left: true, right: true });
-    const leftTimeoutRef = (0, react_1.useRef)(null);
-    const rightTimeoutRef = (0, react_1.useRef)(null);
-    const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
-    const showRight = scrollButtonType === "end" || scrollButtonType === "both";
-    (0, react_1.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]);
-    (0, react_1.useEffect)(() => {
-        if (scrollableRef.current) {
-            setScrollButtonType(getScrollButtonType(scrollableRef.current));
-        }
-    }, [scrollableRef, children]);
-    (0, react_1.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 = (0, react_1.useCallback)((delta) => () => {
-        var _a;
-        (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
-            left: delta,
-            behavior: "smooth"
-        });
-    }, []);
-    const filtersForRender = react_1.Children.map(children, (child, index) => {
-        if (child.props.hideInBar) {
-            return null;
-        }
-        const childComponent = (0, react_1.cloneElement)(child, { useSidePanelView: false });
-        return (0, jsx_runtime_1.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 = (0, react_1.useCallback)(delta => () => {
+    var _a;
+    (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
+      left: delta,
+      behavior: "smooth"
+    });
+  }, []);
+  const filtersForRender = react_1.Children.map(children, (child, index) => {
+    if (child.props.hideInBar) {
+      return null;
+    }
+    const childComponent = (0, react_1.cloneElement)(child, {
+      useSidePanelView: false
     });
-    return filtersForRender.length ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
-                    gradientClass,
-                    driveClassNameGradient || "",
-                    `${gradientClass}--left`,
-                    showLeft ? `${gradientClass}--visible` : "",
-                    isHiddenDisplay.left ? `${gradientClass}--hidden` : ""
-                ]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll left"), className: (0, classNames_1.classNames)([
-                    "zen-filters-toolbar__scroller",
-                    driveClassNameScroller || "",
-                    "zen-filters-toolbar__start",
-                    showLeft ? `${scrollerClass}--visible` : "",
-                    isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""
-                ]), icon: iconChevronRight_1.IconChevronRight, iconPosition: textIconButton_1.ButtonIconPosition.Start, onClick: handleScrollButtonClick(-scrollableStep), iconClasses: "zen-filters-toolbar__start-icon" }), (0, jsx_runtime_1.jsx)("div", { ref: scrollableRef, className: (0, classNames_1.classNames)([
-                    "zen-filters-toolbar__scrollable",
-                    !isHiddenDisplay.left ? "has-left-scroller" : "",
-                    !isHiddenDisplay.right ? "has-right-scroller" : ""
-                ]), children: (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters", children: filtersForRender }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
-                    gradientClass,
-                    driveClassNameGradient || "",
-                    `${gradientClass}--right`,
-                    showRight ? `${gradientClass}--visible` : "",
-                    isHiddenDisplay.right ? `${gradientClass}--hidden` : ""
-                ]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll right"), className: (0, classNames_1.classNames)([
-                    scrollerClass,
-                    driveClassNameScroller || "", "zen-filters-toolbar__end",
-                    showRight ? `${scrollerClass}--visible` : "",
-                    isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""
-                ]), icon: iconChevronRight_1.IconChevronRight, onClick: handleScrollButtonClick(scrollableStep), iconPosition: textIconButton_1.ButtonIconPosition.End })] }) : null;
+    return (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-filters-toolbar__filters-item",
+      children: childComponent
+    }, `filtersBarItem_${index}`);
+  });
+  return filtersForRender.length ? (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]),
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: (0, classNames_1.classNames)([gradientClass, driveClassNameGradient || "", `${gradientClass}--left`, showLeft ? `${gradientClass}--visible` : "", isHiddenDisplay.left ? `${gradientClass}--hidden` : ""])
+    }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+      title: translate("Scroll left"),
+      className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
+      icon: iconChevronRight_1.IconChevronRight,
+      iconPosition: textIconButton_1.ButtonIconPosition.Start,
+      onClick: handleScrollButtonClick(-scrollableStep),
+      iconClasses: "zen-filters-toolbar__start-icon"
+    }), (0, jsx_runtime_1.jsx)("div", {
+      ref: scrollableRef,
+      className: (0, classNames_1.classNames)(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
+      children: (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-filters-toolbar__filters",
+        children: filtersForRender
+      })
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: (0, classNames_1.classNames)([gradientClass, driveClassNameGradient || "", `${gradientClass}--right`, showRight ? `${gradientClass}--visible` : "", isHiddenDisplay.right ? `${gradientClass}--hidden` : ""])
+    }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+      title: translate("Scroll right"),
+      className: (0, classNames_1.classNames)([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
+      icon: iconChevronRight_1.IconChevronRight,
+      onClick: handleScrollButtonClick(scrollableStep),
+      iconPosition: textIconButton_1.ButtonIconPosition.End
+    })]
+  }) : null;
 };
 exports.FiltersContainer = FiltersContainer;
-exports.TRANSLATIONS = [
-    "Scroll left",
-    "Scroll right"
-];
+exports.TRANSLATIONS = ["Scroll left", "Scroll right"];

package/dist/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/dist/formField/components/formFieldWithLabel.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldWithLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
-const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId }) => {
+const trailingComponent_1 = require("./trailingComponent");
+const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId, showAdditionalInfo }) => {
     if (!hasCustomWidth) {
         return (0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] });
+    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
 };
 exports.FormFieldWithLabel = FormFieldWithLabel;

package/dist/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/dist/formField/components/formFieldWithoutLabel.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldWithoutLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId }) => {
+const trailingComponent_1 = require("./trailingComponent");
+const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId, showAdditionalInfo }) => {
     if (!hasCustomWidth) {
         return (0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container }), trailing && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-form-field__trailing-text"]), id: trailingId, children: trailing })] });
+    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
 };
 exports.FormFieldWithoutLabel = FormFieldWithoutLabel;

package/dist/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/dist/formField/components/trailingComponent.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrailingComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TrailingComponent = ({ id, value, hasAdditionalInfo }) => {
+    if (hasAdditionalInfo) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__trailing-wrapper", children: (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value }) });
+    }
+    return (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value });
+};
+exports.TrailingComponent = TrailingComponent;

package/dist/formField/formField.js

@@ -33,12 +33,25 @@ const useLoading_1 = require("./hooks/useLoading");
 const useReadonly_1 = require("./hooks/useReadonly");
 const formFieldWithLabel_1 = require("./components/formFieldWithLabel");
 const formFieldWithoutLabel_1 = require("./components/formFieldWithoutLabel");
+const trailingComponent_1 = require("./components/trailingComponent");
+const formSectionProvider_1 = require("../formSection/utils/formSectionProvider");
+const OLD_FORM_FIELD_COMPONENTS = [
+    "SearchInputRaw",
+    "SelectRaw",
+    "StepperRaw",
+    "TextAreaInput",
+    "TextInputRaw"
+];
+const isOldFormFieldComponent = (component) => 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.displayName) || "") || OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.name) || "");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const FormField = function FormFieldInner(WrappedComponent) {
     // eslint-disable-next-line complexity
     const InnerFormField = (props) => {
         const isMobile = (0, useMobile_1.useMobile)();
         const ref = props.ref;
+        const { isFormSection } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
         const { id: assistiveId, assistive } = (0, useAssistive_1.useAssistive)(props);
         const { id: trailingId, trailing } = (0, useTrailing_1.useTrailing)(props);
         const { id: errorId, error, errorBanner } = (0, useError_1.useError)(props);
@@ -59,20 +72,22 @@ const FormField = function FormFieldInner(WrappedComponent) {
         const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
         const localId = (0, react_1.useId)();
         const id = props.id || localId;
-        const container = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.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: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), !hasCustomWidth && trailing && (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] }), showAdditionalInfo ?
-                    (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)("div", { id: assistiveId || errorId, className: (0, classNames_1.classNames)([
-                                    "zen-form-field__text",
-                                    driveTextClass || "",
-                                    error ? "zen-form-field__text--error" : ""
-                                ]), children: error ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }) : assistive }), counter
-                                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.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: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), showAdditionalInfo ?
+                                    (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)("div", { id: assistiveId || errorId, className: (0, classNames_1.classNames)([
+                                                    "zen-form-field__text",
+                                                    driveTextClass || "",
+                                                    error ? "zen-form-field__text--error" : ""
+                                                ]), children: error ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }) : assistive }), counter
+                                                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-form-field__length"]), children: counter })
+                                                : ""] })
+                                    : null] }), !hasCustomWidth && trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.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 = (0, classNames_1.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",
+            !isOldFormFieldComponent(WrappedComponent) ? "zen-form-field--new-component" : "",
+            isFormSection ? "zen-form-field--form-item" : "",
             className || ""
         ]);
         if (isLoading) {
@@ -81,9 +96,9 @@ const FormField = function FormFieldInner(WrappedComponent) {
         }
         // TODO: refactor?
         if (props.label && (0, rangeRawLabelCheck_1.rangeRawLabelCheck)(WrappedComponent, props)) {
-            return (0, jsx_runtime_1.jsx)(formFieldWithLabel_1.FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId });
+            return (0, jsx_runtime_1.jsx)(formFieldWithLabel_1.FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
         }
-        return (0, jsx_runtime_1.jsx)(formFieldWithoutLabel_1.FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId });
+        return (0, jsx_runtime_1.jsx)(formFieldWithoutLabel_1.FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
     };
     InnerFormField.displayName = "InnerFormField";
     return InnerFormField;