@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -12,63 +12,63 @@ const textIconButton_1 = require("../../textIconButton/textIconButton");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const zen_1 = require("../../utils/zen");
-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("pt-PT", "Scroll left", "Deslizar 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("ro-RO", "Scroll left", "Derula\u021Bi la st\xE2nga");
-injectString("ar-SA", "Scroll left", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0633\u0627\u0631");
-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("pt-PT", "Scroll right", "Deslizar 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");
-injectString("ro-RO", "Scroll right", "Derula\u021Bi la dreapta");
-injectString("ar-SA", "Scroll right", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0645\u064A\u0646");
+injectString("cs", "Scroll to start", "P\u0159ej\xEDt na za\u010D\xE1tek");
+injectString("da-DK", "Scroll to start", "Rul til start");
+injectString("de", "Scroll to start", "Zum Start scrollen");
+injectString("en", "Scroll to start", "Scroll to start");
+injectString("es", "Scroll to start", "Desplazarse al inicio");
+injectString("fi-FI", "Scroll to start", "Vierit\xE4 alkuun");
+injectString("fr", "Scroll to start", "D\xE9filement au d\xE9but");
+injectString("fr-FR", "Scroll to start", "Faites d\xE9filer pour d\xE9marrer");
+injectString("hu-HU", "Scroll to start", "G\xF6rget\xE9s az elej\xE9re");
+injectString("id", "Scroll to start", "Gulirkan untuk memulai");
+injectString("it", "Scroll to start", "Scorrere fino all'inizio");
+injectString("ja", "Scroll to start", "\u4E00\u756A\u4E0A\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll to start", "\uC2DC\uC791 \uC704\uCE58\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll to start", "Tatal ke permulaan");
+injectString("nb-NO", "Scroll to start", "Rull til start");
+injectString("nl", "Scroll to start", "Scroll to start");
+injectString("pl", "Scroll to start", "Przewi\u0144 do pocz\u0105tku");
+injectString("pt-BR", "Scroll to start", "Scroll to start");
+injectString("pt-PT", "Scroll to start", "Scroll to start");
+injectString("sk-SK", "Scroll to start", "Posun\xFA\u0165 na za\u010Diatok");
+injectString("sv", "Scroll to start", "Scroll to start");
+injectString("th", "Scroll to start", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E35\u0E48\u0E08\u0E38\u0E14\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19");
+injectString("tr", "Scroll to start", "Ba\u015Flang\u0131ca kayd\u0131r");
+injectString("zh-Hans", "Scroll to start", "\u6EDA\u52A8\u81F3\u5F00\u5934");
+injectString("zh-TW", "Scroll to start", "\u6372\u52D5\u81F3\u958B\u59CB\u8655");
+injectString("ro-RO", "Scroll to start", "Derulare la \xEEnceput");
+injectString("cs", "Scroll to end", "P\u0159ej\xEDt na konec");
+injectString("da-DK", "Scroll to end", "Rul til slutning");
+injectString("de", "Scroll to end", "Zum Ende scrollen");
+injectString("en", "Scroll to end", "Scroll to end");
+injectString("es", "Scroll to end", "Desplazarse al final");
+injectString("fi-FI", "Scroll to end", "Vierit\xE4 loppuun");
+injectString("fr", "Scroll to end", "D\xE9filement \xE0 la fin");
+injectString("fr-FR", "Scroll to end", "Faites d\xE9filer jusqu\u2019\xE0 la fin");
+injectString("hu-HU", "Scroll to end", "G\xF6rget\xE9s a v\xE9g\xE9re");
+injectString("id", "Scroll to end", "Gulirkan ke akhir");
+injectString("it", "Scroll to end", "Scorrere fino alla fine");
+injectString("ja", "Scroll to end", "\u4E00\u756A\u4E0B\u307E\u3067\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll to end", "\uB9C8\uC9C0\uB9C9 \uC704\uCE58\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll to end", "Tatal ke penghujung");
+injectString("nb-NO", "Scroll to end", "Rull til slutt");
+injectString("nl", "Scroll to end", "Scroll to end");
+injectString("pl", "Scroll to end", "Przewi\u0144 do ko\u0144ca");
+injectString("pt-BR", "Scroll to end", "Scroll to end");
+injectString("pt-PT", "Scroll to end", "Scroll to end");
+injectString("sk-SK", "Scroll to end", "Posun\xFA\u0165 na koniec");
+injectString("sv", "Scroll to end", "Scroll to end");
+injectString("th", "Scroll to end", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E35\u0E48\u0E08\u0E38\u0E14\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14");
+injectString("tr", "Scroll to end", "Sona kayd\u0131r");
+injectString("zh-Hans", "Scroll to end", "\u6EDA\u52A8\u81F3\u672B\u5C3E");
+injectString("zh-TW", "Scroll to end", "\u6372\u52D5\u81F3\u7D50\u5C3E\u8655");
+injectString("ro-RO", "Scroll to end", "Derulare la sf\xE2r\u0219it");
 const getScrollButtonType = element => {
   const scrollLeft = element.scrollLeft;
   const scrollWidth = element.scrollWidth;
@@ -93,6 +93,8 @@ const FiltersContainer = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const ScrollStartIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight);
+  const ScrollEndIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
   const gradientClass = "zen-filters-toolbar__gradient";
   const scrollerClass = "zen-filters-toolbar__scroller";
   const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)(scrollerClass);
@@ -203,12 +205,11 @@ const FiltersContainer = ({
     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"),
+      title: translate("Scroll to start"),
       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,
+      icon: ScrollStartIcon,
       iconPosition: textIconButton_1.ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep),
-      iconClasses: "zen-filters-toolbar__start-icon"
+      onClick: handleScrollButtonClick(-scrollableStep)
     }), (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" : ""]),
@@ -219,13 +220,13 @@ const FiltersContainer = ({
     }), (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"),
+      title: translate("Scroll to end"),
       className: (0, classNames_1.classNames)([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
-      icon: iconChevronRight_1.IconChevronRight,
+      icon: ScrollEndIcon,
       onClick: handleScrollButtonClick(scrollableStep),
       iconPosition: textIconButton_1.ButtonIconPosition.End
     })]
   }) : null;
 };
 exports.FiltersContainer = FiltersContainer;
-exports.TRANSLATIONS = ["Scroll left", "Scroll right"];
+exports.TRANSLATIONS = ["Scroll to start", "Scroll to end"];

package/dist/formField/hooks/useError.js

@@ -39,7 +39,7 @@ injectString("tr", "Reload", "Yeniden y\xFCkle");
 injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
 injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
 injectString("ro-RO", "Reload", "Re\xEEnc\u0103rca\u021Bi");
-injectString("ar-SA", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
+injectString("ar", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
 injectString("cs", "Failed to load {0}", "Failed to load {0}");
 injectString("da-DK", "Failed to load {0}", "Failed to load {0}");
 injectString("de", "Failed to load {0}", "Failed to load {0}");
@@ -66,7 +66,7 @@ injectString("tr", "Failed to load {0}", "Failed to load {0}");
 injectString("zh-Hans", "Failed to load {0}", "Failed to load {0}");
 injectString("zh-TW", "Failed to load {0}", "Failed to load {0}");
 injectString("ro-RO", "Failed to load {0}", "Nu s-a putut \xEEnc\u0103rca {0}");
-injectString("ar-SA", "Failed to load {0}", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 {0}");
+injectString("ar", "Failed to load {0}", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 {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.");
@@ -93,7 +93,7 @@ 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");
 injectString("ro-RO", "This field is required.", "Acest c\xE2mp este obligatoriu.");
-injectString("ar-SA", "This field is required.", "\u0647\u0630\u0627 \u0627\u0644\u062D\u0642\u0644 \u0645\u0637\u0644\u0648\u0628.");
+injectString("ar", "This field is required.", "\u0647\u0630\u0627 \u0627\u0644\u062D\u0642\u0644 \u0645\u0637\u0644\u0648\u0628.");
 const useError = props => {
   var _a, _b, _c, _d;
   const errorId = (0, react_1.useId)();

package/dist/formField/hooks/useFormFieldProps.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { TFormFieldComponentProps } from "../formField";
 export declare const useFormFieldProps: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: FC<T>) => {
-    id: string;
+    id: any;
     wrapperComponent: FC<T>;
     props: TFormFieldComponentProps<T>;
     hasCustomWidth: boolean;

package/dist/formField/hooks/useFormFieldProps.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldProps = void 0;
 const react_1 = require("react");
+const normalizeFieldId_1 = require("../../formGroup/utils/normalizeFieldId");
 const useAssistive_1 = require("./useAssistive");
 const useError_1 = require("./useError");
 const useFormFieldClasses_1 = require("./useFormFieldClasses");
@@ -20,9 +21,10 @@ const useReadonly_1 = require("./useReadonly");
 const useTrailing_1 = require("./useTrailing");
 const useWidth_1 = require("./useWidth");
 const useFormFieldProps = (props, wrapperComponent) => {
+    var _a;
     const localId = (0, react_1.useId)();
-    const id = props.id || localId;
-    const _a = (0, useWidth_1.useWidth)(props), { hasCustomWidth } = _a, widthObj = __rest(_a, ["hasCustomWidth"]);
+    const id = props.id || (((_a = props.controller) === null || _a === void 0 ? void 0 : _a.name) && (0, normalizeFieldId_1.normalizeFieldId)(props.controller.name)) || localId;
+    const _b = (0, useWidth_1.useWidth)(props), { hasCustomWidth } = _b, widthObj = __rest(_b, ["hasCustomWidth"]);
     const { id: trailingId, trailing } = (0, useTrailing_1.useTrailing)(props);
     const { error } = (0, useError_1.useError)(props);
     const { assistive } = (0, useAssistive_1.useAssistive)(props);

package/dist/formGroup/components/reviewListToggle/reviewListToggle.js

@@ -39,7 +39,7 @@ injectString("tr", "On", "A\xE7\u0131k");
 injectString("zh-Hans", "On", "\u5F00\u542F");
 injectString("zh-TW", "On", "\u958B\u555F");
 injectString("ro-RO", "On", "Pe");
-injectString("ar-SA", "On", "\u062A\u0634\u063A\u064A\u0644");
+injectString("ar", "On", "\u062A\u0634\u063A\u064A\u0644");
 injectString("cs", "Off", "Vypnuto");
 injectString("da-DK", "Off", "Slukket");
 injectString("de", "Off", "Aus");
@@ -66,7 +66,7 @@ injectString("tr", "Off", "Kapal\u0131");
 injectString("zh-Hans", "Off", "\u5173\u95ED");
 injectString("zh-TW", "Off", "\u95DC\u9589");
 injectString("ro-RO", "Off", "Off");
-injectString("ar-SA", "Off", "\u0625\u064A\u0642\u0627\u0641");
+injectString("ar", "Off", "\u0625\u064A\u0642\u0627\u0641");
 const ReviewListToggle = ({
   value,
   className = ""

package/dist/formGroup/hooks/useCustomRow.js

@@ -7,9 +7,10 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
 const customRow_1 = require("../components/customRow/customRow");
 const useMode_1 = require("./useMode");
+const resolveId_1 = require("../utils/resolveId");
 // eslint-disable-next-line complexity
 const useCustomRowElements = (state) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
     const id1 = (0, react_1.useId)();
     const id2 = (0, react_1.useId)();
     const mode = (0, useMode_1.useMode)();
@@ -18,25 +19,27 @@ const useCustomRowElements = (state) => {
     if (mode === "review") {
         let customControl;
         if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+            const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
         }
         if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
-            control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+            const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+            control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
         }
         if (state.controlsCount === 2 && state.labelsCount === 2) {
-            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_d = (_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.props.id) || id1, value: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.value, tooltip: (_f = state.elements.label1) === null || _f === void 0 ? void 0 : _f.tooltip, className: (0, classNames_1.classNames)([
+            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) ? (0, resolveId_1.resolveId)(state.elements.control1.value, id1) : id1, value: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.value, tooltip: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.tooltip, className: (0, classNames_1.classNames)([
                             "zen-field-label--custom-width",
-                            ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.className) || "",
+                            ((_f = state.elements.label1) === null || _f === void 0 ? void 0 : _f.className) || "",
                             state.customLabelClasses || ""
-                        ]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 }), (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_j = (_h = state.elements.control2) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.props.id) || id2, value: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.value, tooltip: (_l = state.elements.label2) === null || _l === void 0 ? void 0 : _l.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_m = state.elements.label2) === null || _m === void 0 ? void 0 : _m.className) || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control2 })] }));
+                        ]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 }), (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = state.elements.control2) === null || _g === void 0 ? void 0 : _g.value) ? (0, resolveId_1.resolveId)(state.elements.control2.value, id2) : id2, value: (_h = state.elements.label2) === null || _h === void 0 ? void 0 : _h.value, tooltip: (_j = state.elements.label2) === null || _j === void 0 ? void 0 : _j.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className) || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control2 })] }));
             return {
                 customControl
             };
         }
         if (state.controlsCount > 1) {
-            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_p = (_o = state.elements.control1) === null || _o === void 0 ? void 0 : _o.value) === null || _p === void 0 ? void 0 : _p.props.id) || id1, value: (_q = state.elements.label1) === null || _q === void 0 ? void 0 : _q.value, tooltip: (_r = state.elements.label1) === null || _r === void 0 ? void 0 : _r.tooltip, className: (0, classNames_1.classNames)([
+            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_l = state.elements.control1) === null || _l === void 0 ? void 0 : _l.value) ? (0, resolveId_1.resolveId)(state.elements.control1.value, id1) : id1, value: (_m = state.elements.label1) === null || _m === void 0 ? void 0 : _m.value, tooltip: (_o = state.elements.label1) === null || _o === void 0 ? void 0 : _o.tooltip, className: (0, classNames_1.classNames)([
                             "zen-field-label--custom-width",
-                            ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "",
+                            ((_p = state.elements.label1) === null || _p === void 0 ? void 0 : _p.className) || "",
                             state.customLabelClasses || ""
                         ]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
             return {
@@ -44,10 +47,12 @@ const useCustomRowElements = (state) => {
             };
         }
     }
-    if (state.custom && state.totalCount === 4 && ((_t = state.elements.control1) === null || _t === void 0 ? void 0 : _t.value) && ((_u = state.elements.control2) === null || _u === void 0 ? void 0 : _u.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_v = state.elements.label1) === null || _v === void 0 ? void 0 : _v.value, tooltip: (_w = state.elements.label1) === null || _w === void 0 ? void 0 : _w.tooltip, className: (0, classNames_1.classNames)([((_x = state.elements.label1) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control2.value.props.id || id2, value: (_y = state.elements.label2) === null || _y === void 0 ? void 0 : _y.value, tooltip: (_z = state.elements.label2) === null || _z === void 0 ? void 0 : _z.tooltip, className: (0, classNames_1.classNames)([((_0 = state.elements.label2) === null || _0 === void 0 ? void 0 : _0.className) || "", "zen-field-label--custom-width"]) }), control2] })] }));
+    if (state.custom && state.totalCount === 4 && ((_q = state.elements.control1) === null || _q === void 0 ? void 0 : _q.value) && ((_r = state.elements.control2) === null || _r === void 0 ? void 0 : _r.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid1, value: (_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.value, tooltip: (_t = state.elements.label1) === null || _t === void 0 ? void 0 : _t.tooltip, className: (0, classNames_1.classNames)([((_u = state.elements.label1) === null || _u === void 0 ? void 0 : _u.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid2, value: (_v = state.elements.label2) === null || _v === void 0 ? void 0 : _v.value, tooltip: (_w = state.elements.label2) === null || _w === void 0 ? void 0 : _w.tooltip, className: (0, classNames_1.classNames)([((_x = state.elements.label2) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width"]) }), control2] })] }));
         return {
             customControl
         };
@@ -56,11 +61,13 @@ const useCustomRowElements = (state) => {
         state.totalCount === 3 &&
         state.labelsCount === 1 &&
         !state.elements.label1 &&
-        ((_1 = state.elements.control1) === null || _1 === void 0 ? void 0 : _1.value) &&
-        ((_2 = state.elements.control2) === null || _2 === void 0 ? void 0 : _2.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control2.value.props.id || id2, value: (_3 = state.elements.label2) === null || _3 === void 0 ? void 0 : _3.value, tooltip: (_4 = state.elements.label2) === null || _4 === void 0 ? void 0 : _4.tooltip, className: (0, classNames_1.classNames)([((_5 = state.elements.label2) === null || _5 === void 0 ? void 0 : _5.className) || "", "zen-field-label--custom-width"]) }), control2] }));
+        ((_y = state.elements.control1) === null || _y === void 0 ? void 0 : _y.value) &&
+        ((_z = state.elements.control2) === null || _z === void 0 ? void 0 : _z.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid2, value: (_0 = state.elements.label2) === null || _0 === void 0 ? void 0 : _0.value, tooltip: (_1 = state.elements.label2) === null || _1 === void 0 ? void 0 : _1.tooltip, className: (0, classNames_1.classNames)([((_2 = state.elements.label2) === null || _2 === void 0 ? void 0 : _2.className) || "", "zen-field-label--custom-width"]) }), control2] }));
         return {
             customControl
         };
@@ -69,36 +76,43 @@ const useCustomRowElements = (state) => {
         state.totalCount === 3 &&
         state.labelsCount === 1 &&
         state.controlsCount === 2 &&
-        ((_6 = state.elements.control1) === null || _6 === void 0 ? void 0 : _6.value) &&
-        ((_7 = state.elements.control2) === null || _7 === void 0 ? void 0 : _7.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_8 = state.elements.label1) === null || _8 === void 0 ? void 0 : _8.value, tooltip: (_9 = state.elements.label1) === null || _9 === void 0 ? void 0 : _9.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_10 = state.elements.label1) === null || _10 === void 0 ? void 0 : _10.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
+        ((_3 = state.elements.control1) === null || _3 === void 0 ? void 0 : _3.value) &&
+        ((_4 = state.elements.control2) === null || _4 === void 0 ? void 0 : _4.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid1, value: (_5 = state.elements.label1) === null || _5 === void 0 ? void 0 : _5.value, tooltip: (_6 = state.elements.label1) === null || _6 === void 0 ? void 0 : _6.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_7 = state.elements.label1) === null || _7 === void 0 ? void 0 : _7.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
         return {
             customControl
         };
     }
-    if (state.custom && state.totalCount === 2 && state.controlsCount === 2 && ((_11 = state.elements.control1) === null || _11 === void 0 ? void 0 : _11.value) && ((_12 = state.elements.control2) === null || _12 === void 0 ? void 0 : _12.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+    if (state.custom && state.totalCount === 2 && state.controlsCount === 2 && ((_8 = state.elements.control1) === null || _8 === void 0 ? void 0 : _8.value) && ((_9 = state.elements.control2) === null || _9 === void 0 ? void 0 : _9.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
         const customControl = ((0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] }));
         return {
             customControl
         };
     }
-    if (state.custom && state.totalCount === 2 && state.labelsCount === 1 && ((_13 = state.elements.control1) === null || _13 === void 0 ? void 0 : _13.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_14 = state.elements.label1) === null || _14 === void 0 ? void 0 : _14.value, tooltip: (_15 = state.elements.label1) === null || _15 === void 0 ? void 0 : _15.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_16 = state.elements.label1) === null || _16 === void 0 ? void 0 : _16.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 })] }));
+    if (state.custom && state.totalCount === 2 && state.labelsCount === 1 && ((_10 = state.elements.control1) === null || _10 === void 0 ? void 0 : _10.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid1, value: (_11 = state.elements.label1) === null || _11 === void 0 ? void 0 : _11.value, tooltip: (_12 = state.elements.label1) === null || _12 === void 0 ? void 0 : _12.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_13 = state.elements.label1) === null || _13 === void 0 ? void 0 : _13.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 })] }));
         return {
             customControl
         };
     }
     if (state.custom && state.totalCount === 1 && state.controlsCount === 1) {
-        if ((_17 = state.elements.control1) === null || _17 === void 0 ? void 0 : _17.value) {
-            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        if ((_14 = state.elements.control1) === null || _14 === void 0 ? void 0 : _14.value) {
+            const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
         }
-        else if ((_18 = state.elements.control2) === null || _18 === void 0 ? void 0 : _18.value) {
-            control1 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        else if ((_15 = state.elements.control2) === null || _15 === void 0 ? void 0 : _15.value) {
+            const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+            control1 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
         }
         const customControl = (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 });
         return {

package/dist/formGroup/hooks/useRowElements.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRowElements = void 0;
 const react_1 = require("react");
 const useCustomRow_1 = require("./useCustomRow");
+const resolveId_1 = require("../utils/resolveId");
 const useRowElements = (state) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const id1 = (0, react_1.useId)();
     const id2 = (0, react_1.useId)();
     let control1;
@@ -13,12 +14,14 @@ const useRowElements = (state) => {
     if (customControl) {
         return { customControl };
     }
-    if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+    const resolvedId1 = ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) ? (0, resolveId_1.resolveId)(state.elements.control1.value, id1) : id1;
+    const resolvedId2 = ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) ? (0, resolveId_1.resolveId)(state.elements.control2.value, id2) : id2;
+    if ((_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) {
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: resolvedId1 });
     }
-    if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+    if ((_d = state.elements.control2) === null || _d === void 0 ? void 0 : _d.value) {
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: resolvedId2 });
     }
-    return { control1, control2, id1, id2 };
+    return { control1, control2, id1: resolvedId1, id2: resolvedId2 };
 };
 exports.useRowElements = useRowElements;

package/dist/formGroup/hooks/useToggle.js

@@ -44,7 +44,7 @@ injectString("tr", "Sub-options are not active.", "Sub-options are not active.")
 injectString("zh-Hans", "Sub-options are not active.", "Sub-options are not active.");
 injectString("zh-TW", "Sub-options are not active.", "Sub-options are not active.");
 injectString("ro-RO", "Sub-options are not active.", "Nu sunt active op\u021Biuni secundare.");
-injectString("ar-SA", "Sub-options are not active.", "\u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u0641\u0631\u0639\u064A\u0629 \u063A\u064A\u0631 \u0646\u0634\u0637\u0629.");
+injectString("ar", "Sub-options are not active.", "\u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u0641\u0631\u0639\u064A\u0629 \u063A\u064A\u0631 \u0646\u0634\u0637\u0629.");
 const useToggle = result => {
   const {
     controller,

package/dist/formGroup/types.d.ts

@@ -10,6 +10,10 @@ export interface IControlState {
     type: "control";
     value?: ReactElement<{
         id?: string;
+        name?: string;
+        controller?: {
+            name?: string;
+        };
         gridFitContent?: boolean;
         width?: string | number;
     }>;

package/dist/formGroup/utils/normalizeFieldId.d.ts

@@ -0,0 +1 @@
+export declare const normalizeFieldId: (name: string) => string;

package/dist/formGroup/utils/normalizeFieldId.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeFieldId = void 0;
+const normalizeFieldId = (name) => name.replace(/\./g, "-");
+exports.normalizeFieldId = normalizeFieldId;

package/dist/formGroup/utils/resolveId.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const resolveId: (element: React.ReactElement<{
+    id?: string;
+    controller?: {
+        name?: string;
+    };
+}>, fallback: string) => string;

package/dist/formGroup/utils/resolveId.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveId = void 0;
+const normalizeFieldId_1 = require("./normalizeFieldId");
+const resolveId = (element, fallback) => { var _a; return element.props.id || (((_a = element.props.controller) === null || _a === void 0 ? void 0 : _a.name) && (0, normalizeFieldId_1.normalizeFieldId)(element.props.controller.name)) || fallback; };
+exports.resolveId = resolveId;

package/dist/formLayout/components/getLayoutColumns.js

@@ -13,11 +13,13 @@ const getLayoutColumns = (children) => {
     if (!Array.isArray(children)) {
         return (0, react_1.isValidElement)(children) && children.type === layoutColum_1.LayoutColumn ? [children] : [(0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: children }, "column1")];
     }
-    const layoutColumns = children.filter(child => child.type === layoutColum_1.LayoutColumn && child.props.children).slice(0, 2);
+    const layoutColumns = children
+        .filter(child => (0, react_1.isValidElement)(child) && child.type === layoutColum_1.LayoutColumn && child.props.children)
+        .slice(0, 2);
     if (layoutColumns.length) {
         return layoutColumns;
     }
-    const sections = children.filter((el) => el.type === formSection_1.FormSection || (0, isCustomFormSection_1.isCustomFormSection)(el));
+    const sections = children.filter((el) => (0, react_1.isValidElement)(el) && (el.type === formSection_1.FormSection || (0, isCustomFormSection_1.isCustomFormSection)(el)));
     if (sections.length === 1) {
         return [(0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: sections }, "column1")];
     }

package/dist/formLayout/hooks/useError.js

@@ -37,7 +37,7 @@ injectString("tr", "Reload", "Yeniden y\xFCkle");
 injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
 injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
 injectString("ro-RO", "Reload", "Re\xEEnc\u0103rca\u021Bi");
-injectString("ar-SA", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
+injectString("ar", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
 injectString("cs", "Failed to load page", "Failed to load page");
 injectString("da-DK", "Failed to load page", "Failed to load page");
 injectString("de", "Failed to load page", "Failed to load page");
@@ -64,7 +64,7 @@ injectString("tr", "Failed to load page", "Failed to load page");
 injectString("zh-Hans", "Failed to load page", "Failed to load page");
 injectString("zh-TW", "Failed to load page", "Failed to load page");
 injectString("ro-RO", "Failed to load page", "Nu s-a putut \xEEnc\u0103rca pagina");
-injectString("ar-SA", "Failed to load page", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629");
+injectString("ar", "Failed to load page", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629");
 injectString("cs", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("da-DK", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("de", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
@@ -91,7 +91,7 @@ injectString("tr", "Please refresh the page and try again. If the issue persists
 injectString("zh-Hans", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("zh-TW", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("ro-RO", "Please refresh the page and try again. If the issue persists, contact Support.", "Re\xEEnc\u0103rca\u021Bi pagina \u0219i \xEEncerca\u021Bi din nou. Dac\u0103 problema persist\u0103, contacta\u021Bi Asisten\u021Ba.");
-injectString("ar-SA", "Please refresh the page and try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u062A\u062D\u062F\u064A\u062B \u0627\u0644\u0635\u0641\u062D\u0629 \u0648\u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649. \u0625\u0630\u0627 \u0627\u0633\u062A\u0645\u0631\u062A \u0627\u0644\u0645\u0634\u0643\u0644\u0629\u060C \u0627\u062A\u0635\u0644 \u0628\u0627\u0644\u062F\u0639\u0645.");
+injectString("ar", "Please refresh the page and try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u062A\u062D\u062F\u064A\u062B \u0627\u0644\u0635\u0641\u062D\u0629 \u0648\u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649. \u0625\u0630\u0627 \u0627\u0633\u062A\u0645\u0631\u062A \u0627\u0644\u0645\u0634\u0643\u0644\u0629\u060C \u0627\u062A\u0635\u0644 \u0628\u0627\u0644\u062F\u0639\u0645.");
 const useError = props => {
   const {
     translate

package/dist/formLayout/hooks/useErrorSummary.d.ts

@@ -0,0 +1,6 @@
+import type { FieldErrors } from "react-hook-form";
+import { IBanner } from "../../banner/banner";
+export interface IUseErrorSummaryConfig extends Pick<IBanner, "size"> {
+    autoPrefix?: boolean;
+}
+export declare const useErrorSummary: (errors: FieldErrors, { autoPrefix, size }?: IUseErrorSummaryConfig) => React.ReactElement | null;

package/dist/formLayout/hooks/useErrorSummary.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useErrorSummary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const banner_1 = require("../../banner/banner");
+const bannerErrorSummary_1 = require("../../banner/bannerErrorSummary");
+const flattenErrors_1 = require("../utils/flattenErrors");
+const getFieldLabel_1 = require("../utils/getFieldLabel");
+const normalizeFieldId_1 = require("../../formGroup/utils/normalizeFieldId");
+const MAX_ERROR_SUMMARY_ITEMS = 8;
+const useErrorSummary = (errors, { autoPrefix = true, size = "XXL" } = {}) => {
+    const errorsKey = Object.entries(errors)
+        .map(([key, val]) => { var _a; return `${key}:${(_a = val.message) !== null && _a !== void 0 ? _a : ""}`; })
+        .join(",");
+    const items = (0, react_1.useMemo)(() => (0, flattenErrors_1.flattenErrors)(errors).map(({ name, error }) => {
+        var _a;
+        const id = (0, normalizeFieldId_1.normalizeFieldId)(name);
+        const label = autoPrefix ? (0, getFieldLabel_1.getFieldLabel)(id) : null;
+        const message = (_a = error.message) !== null && _a !== void 0 ? _a : "";
+        return {
+            name,
+            value: label ? `${label} - ${message}` : message,
+            link: `#${id}`
+        };
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [errorsKey, autoPrefix]);
+    if (items.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(banner_1.Banner, { type: "error", size: size, children: items.slice(0, MAX_ERROR_SUMMARY_ITEMS).map((item, index) => ((0, jsx_runtime_1.jsx)(bannerErrorSummary_1.BannerErrorSummary, { value: item.value, link: item.link }, `${item.name}-${index}`))) }));
+};
+exports.useErrorSummary = useErrorSummary;