@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/esm/formField/hooks/useError.js

@@ -31,7 +31,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}");
@@ -58,7 +58,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.");
@@ -85,7 +85,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.");
 export const useError = props => {
   var _a, _b, _c, _d;
   const errorId = useId();

package/esm/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/esm/formField/hooks/useFormFieldProps.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { useId } from "react";
+import { normalizeFieldId } from "../../formGroup/utils/normalizeFieldId";
 import { useAssistive } from "./useAssistive";
 import { useError } from "./useError";
 import { useFormFieldClasses } from "./useFormFieldClasses";
@@ -17,9 +18,10 @@ import { useReadonly } from "./useReadonly";
 import { useTrailing } from "./useTrailing";
 import { useWidth } from "./useWidth";
 export const useFormFieldProps = (props, wrapperComponent) => {
+    var _a;
     const localId = useId();
-    const id = props.id || localId;
-    const _a = useWidth(props), { hasCustomWidth } = _a, widthObj = __rest(_a, ["hasCustomWidth"]);
+    const id = props.id || (((_a = props.controller) === null || _a === void 0 ? void 0 : _a.name) && normalizeFieldId(props.controller.name)) || localId;
+    const _b = useWidth(props), { hasCustomWidth } = _b, widthObj = __rest(_b, ["hasCustomWidth"]);
     const { id: trailingId, trailing } = useTrailing(props);
     const { error } = useError(props);
     const { assistive } = useAssistive(props);

package/esm/formGroup/components/reviewListToggle/reviewListToggle.js

@@ -31,7 +31,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");
@@ -58,7 +58,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");
 export const ReviewListToggle = ({
   value,
   className = ""

package/esm/formGroup/hooks/useCustomRow.js

@@ -4,9 +4,10 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { FormGroupItem } from "../../formGroupItem/formGroupItem";
 import { CustomRow } from "../components/customRow/customRow";
 import { useMode } from "./useMode";
+import { resolveId } from "../utils/resolveId";
 // eslint-disable-next-line complexity
 export 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 = useId();
     const id2 = useId();
     const mode = useMode();
@@ -15,25 +16,27 @@ export const useCustomRowElements = (state) => {
     if (mode === "review") {
         let customControl;
         if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-            control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+            const rid1 = resolveId(state.elements.control1.value, id1);
+            control1 = cloneElement(state.elements.control1.value, { id: rid1 });
         }
         if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
-            control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+            const rid2 = resolveId(state.elements.control2.value, id2);
+            control2 = cloneElement(state.elements.control2.value, { id: rid2 });
         }
         if (state.controlsCount === 2 && state.labelsCount === 2) {
-            customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames([
+            customControl = (_jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) ? 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: 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 || ""
-                        ]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control1 }), _jsx(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: classNames(["zen-field-label--custom-width", ((_m = state.elements.label2) === null || _m === void 0 ? void 0 : _m.className) || ""]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control2 })] }));
+                        ]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control1 }), _jsx(FormGroupItem, { id: ((_g = state.elements.control2) === null || _g === void 0 ? void 0 : _g.value) ? 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: classNames(["zen-field-label--custom-width", ((_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className) || ""]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control2 })] }));
             return {
                 customControl
             };
         }
         if (state.controlsCount > 1) {
-            customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames([
+            customControl = (_jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_l = state.elements.control1) === null || _l === void 0 ? void 0 : _l.value) ? 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: 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 || ""
                         ]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
             return {
@@ -41,10 +44,12 @@ export 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 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames([((_x = state.elements.label1) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, _jsx(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: 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 = resolveId(state.elements.control1.value, id1);
+        const rid2 = resolveId(state.elements.control2.value, id2);
+        control1 = cloneElement(state.elements.control1.value, { id: rid1 });
+        control2 = cloneElement(state.elements.control2.value, { id: rid2 });
+        const customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames([((_u = state.elements.label1) === null || _u === void 0 ? void 0 : _u.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, _jsx(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: classNames([((_x = state.elements.label2) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width"]) }), control2] })] }));
         return {
             customControl
         };
@@ -53,11 +58,13 @@ export 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 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = (_jsxs(CustomRow, { className: state.customControlClasses, children: [control1, _jsx(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: 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 = resolveId(state.elements.control1.value, id1);
+        const rid2 = resolveId(state.elements.control2.value, id2);
+        control1 = cloneElement(state.elements.control1.value, { id: rid1 });
+        control2 = cloneElement(state.elements.control2.value, { id: rid2 });
+        const customControl = (_jsxs(CustomRow, { className: state.customControlClasses, children: [control1, _jsx(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: classNames([((_2 = state.elements.label2) === null || _2 === void 0 ? void 0 : _2.className) || "", "zen-field-label--custom-width"]) }), control2] }));
         return {
             customControl
         };
@@ -66,36 +73,43 @@ export 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 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames(["zen-field-label--custom-width", ((_10 = state.elements.label1) === null || _10 === void 0 ? void 0 : _10.className) || "", state.customLabelClasses || ""]) }), _jsxs(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 = resolveId(state.elements.control1.value, id1);
+        const rid2 = resolveId(state.elements.control2.value, id2);
+        control1 = cloneElement(state.elements.control1.value, { id: rid1 });
+        control2 = cloneElement(state.elements.control2.value, { id: rid2 });
+        const customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames(["zen-field-label--custom-width", ((_7 = state.elements.label1) === null || _7 === void 0 ? void 0 : _7.className) || "", state.customLabelClasses || ""]) }), _jsxs(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 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = 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 = resolveId(state.elements.control1.value, id1);
+        const rid2 = resolveId(state.elements.control2.value, id2);
+        control1 = cloneElement(state.elements.control1.value, { id: rid1 });
+        control2 = cloneElement(state.elements.control2.value, { id: rid2 });
         const customControl = (_jsxs(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 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        const customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames(["zen-field-label--custom-width", ((_16 = state.elements.label1) === null || _16 === void 0 ? void 0 : _16.className) || "", state.customLabelClasses || ""]) }), _jsx(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 = resolveId(state.elements.control1.value, id1);
+        control1 = cloneElement(state.elements.control1.value, { id: rid1 });
+        const customControl = (_jsxs(_Fragment, { children: [_jsx(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: classNames(["zen-field-label--custom-width", ((_13 = state.elements.label1) === null || _13 === void 0 ? void 0 : _13.className) || "", state.customLabelClasses || ""]) }), _jsx(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 = 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 = resolveId(state.elements.control1.value, id1);
+            control1 = cloneElement(state.elements.control1.value, { id: rid1 });
         }
-        else if ((_18 = state.elements.control2) === null || _18 === void 0 ? void 0 : _18.value) {
-            control1 = 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 = resolveId(state.elements.control2.value, id2);
+            control1 = cloneElement(state.elements.control2.value, { id: rid2 });
         }
         const customControl = _jsx(CustomRow, { className: state.customControlClasses, children: control1 });
         return {

package/esm/formGroup/hooks/useRowElements.js

@@ -1,7 +1,8 @@
 import { useId, cloneElement } from "react";
 import { useCustomRowElements } from "./useCustomRow";
+import { resolveId } from "../utils/resolveId";
 export const useRowElements = (state) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const id1 = useId();
     const id2 = useId();
     let control1;
@@ -10,11 +11,13 @@ export const useRowElements = (state) => {
     if (customControl) {
         return { customControl };
     }
-    if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-        control1 = 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) ? resolveId(state.elements.control1.value, id1) : id1;
+    const resolvedId2 = ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) ? resolveId(state.elements.control2.value, id2) : id2;
+    if ((_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) {
+        control1 = cloneElement(state.elements.control1.value, { id: resolvedId1 });
     }
-    if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
-        control2 = 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 = cloneElement(state.elements.control2.value, { id: resolvedId2 });
     }
-    return { control1, control2, id1, id2 };
+    return { control1, control2, id1: resolvedId1, id2: resolvedId2 };
 };

package/esm/formGroup/hooks/useToggle.js

@@ -36,7 +36,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.");
 export const useToggle = result => {
   const {
     controller,

package/esm/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/esm/formGroup/utils/normalizeFieldId.d.ts

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

package/esm/formGroup/utils/normalizeFieldId.js

@@ -0,0 +1 @@
+export const normalizeFieldId = (name) => name.replace(/\./g, "-");

package/esm/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/esm/formGroup/utils/resolveId.js

@@ -0,0 +1,2 @@
+import { normalizeFieldId } from "./normalizeFieldId";
+export const resolveId = (element, fallback) => { var _a; return element.props.id || (((_a = element.props.controller) === null || _a === void 0 ? void 0 : _a.name) && normalizeFieldId(element.props.controller.name)) || fallback; };

package/esm/formLayout/components/getLayoutColumns.js

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

package/esm/formLayout/hooks/useError.js

@@ -29,7 +29,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");
@@ -56,7 +56,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.");
@@ -83,7 +83,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.");
 export const useError = props => {
   const {
     translate

package/esm/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/esm/formLayout/hooks/useErrorSummary.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Banner } from "../../banner/banner";
+import { BannerErrorSummary } from "../../banner/bannerErrorSummary";
+import { flattenErrors } from "../utils/flattenErrors";
+import { getFieldLabel } from "../utils/getFieldLabel";
+import { normalizeFieldId } from "../../formGroup/utils/normalizeFieldId";
+const MAX_ERROR_SUMMARY_ITEMS = 8;
+export 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 = useMemo(() => flattenErrors(errors).map(({ name, error }) => {
+        var _a;
+        const id = normalizeFieldId(name);
+        const label = autoPrefix ? 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 (_jsx(Banner, { type: "error", size: size, children: items.slice(0, MAX_ERROR_SUMMARY_ITEMS).map((item, index) => (_jsx(BannerErrorSummary, { value: item.value, link: item.link }, `${item.name}-${index}`))) }));
+};

package/esm/formLayout/hooks/useFormButtons.js

@@ -33,7 +33,7 @@ injectString("tr", "Save", "Kaydet");
 injectString("zh-Hans", "Save", "\u4FDD\u5B58");
 injectString("zh-TW", "Save", "\u5132\u5B58");
 injectString("ro-RO", "Save", "Salva\u021Bi");
-injectString("ar-SA", "Save", "\u062D\u0641\u0638");
+injectString("ar", "Save", "\u062D\u0641\u0638");
 injectString("cs", "Edit", "Upravit");
 injectString("da-DK", "Edit", "Rediger");
 injectString("de", "Edit", "Bearbeiten");
@@ -60,7 +60,7 @@ injectString("tr", "Edit", "D\xFCzenle");
 injectString("zh-Hans", "Edit", "\u7F16\u8F91");
 injectString("zh-TW", "Edit", "\u7DE8\u8F2F");
 injectString("ro-RO", "Edit", "Edita\u021Bi");
-injectString("ar-SA", "Edit", "\u062A\u0639\u062F\u064A\u0644");
+injectString("ar", "Edit", "\u062A\u0639\u062F\u064A\u0644");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -87,7 +87,7 @@ injectString("tr", "Cancel", "\u0130ptal");
 injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
 injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 injectString("ro-RO", "Cancel", "Anula\u021Bi");
-injectString("ar-SA", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
+injectString("ar", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 export const useFormButtons = (props = {}) => {
   const {
     onSave,

package/esm/formLayout/utils/applyGridPropsStatic.js

@@ -20,7 +20,7 @@ export const applyGridPropsStatic = (element, indx, columns, result) => {
         result.push(cloneElement(element, {
             // @ts-ignore
             gridLgStart: 3,
-            gridLg: 7,
+            gridLg: 8,
             gridMdStart: 2,
             gridMd: 6,
             gridSmStart: 1,

package/esm/formLayout/utils/flattenErrors.d.ts

@@ -0,0 +1,5 @@
+import type { FieldError, FieldErrors } from "react-hook-form";
+export declare const flattenErrors: (errors: FieldErrors, prefix?: string) => {
+    name: string;
+    error: FieldError;
+}[];

package/esm/formLayout/utils/flattenErrors.js

@@ -0,0 +1,10 @@
+export const flattenErrors = (errors, prefix = "") => Object.entries(errors).flatMap(([key, value]) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === "object" && "type" in value) {
+        return [{ name: fullKey, error: value }];
+    }
+    if (value && typeof value === "object") {
+        return flattenErrors(value, fullKey);
+    }
+    return [];
+});

package/esm/formLayout/utils/getChildrenWithCustomColumns.js

@@ -12,6 +12,9 @@ export const getChildrenWithCustomColumns = (children) => {
         return isValidElement(children) && children.type === LayoutColumn ? [children.props.children] : [children];
     }
     let filtered = children.filter(child => {
+        if (!isValidElement(child)) {
+            return false;
+        }
         if (child.type !== LayoutColumn) {
             return true;
         }

package/esm/formLayout/utils/getFieldLabel.d.ts

@@ -0,0 +1 @@
+export declare const getFieldLabel: (id: string) => string | null;

package/esm/formLayout/utils/getFieldLabel.js

@@ -0,0 +1,22 @@
+import { zen } from "../../utils/zen";
+export const getFieldLabel = (id) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (typeof zen.document === "undefined" || typeof zen.document.querySelector !== "function")
+        return null;
+    const direct = (_b = (_a = zen.document.querySelector(`label[for="${id}"]`)) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+    if (direct !== undefined)
+        return direct || null;
+    const row = (_c = zen.document.getElementById(id)) === null || _c === void 0 ? void 0 : _c.closest(".zen-custom-form-row");
+    if (!row)
+        return null;
+    let sibling = row.previousElementSibling;
+    while (sibling) {
+        if (sibling.tagName === "LABEL")
+            return (_e = (_d = sibling.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : null;
+        const inner = sibling.querySelector("label");
+        if (inner)
+            return (_g = (_f = inner.textContent) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : null;
+        sibling = sibling.previousElementSibling;
+    }
+    return null;
+};

package/esm/formSection/hooks/useError.js

@@ -30,7 +30,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 section", "Failed to load section");
 injectString("da-DK", "Failed to load section", "Failed to load section");
 injectString("de", "Failed to load section", "Failed to load section");
@@ -57,7 +57,7 @@ injectString("tr", "Failed to load section", "Failed to load section");
 injectString("zh-Hans", "Failed to load section", "Failed to load section");
 injectString("zh-TW", "Failed to load section", "Failed to load section");
 injectString("ro-RO", "Failed to load section", "Nu s-a putut \xEEnc\u0103rca sec\u021Biunea");
-injectString("ar-SA", "Failed to load section", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0642\u0633\u0645");
+injectString("ar", "Failed to load section", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0642\u0633\u0645");
 injectString("cs", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("da-DK", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("de", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
@@ -84,7 +84,7 @@ injectString("tr", "Please reload this section to try again. If the issue persis
 injectString("zh-Hans", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("zh-TW", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("ro-RO", "Please reload this section to try again. If the issue persists, contact Support.", "Re\xEEnc\u0103rca\u021Bi aceast\u0103 sec\u021Biune pentru a \xEEncerca din nou. Dac\u0103 problema persist\u0103, contacta\u021Bi Asisten\u021Ba.");
-injectString("ar-SA", "Please reload this section to try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u0644\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 reload this section to try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u0644\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.");
 export const useError = props => {
   const {
     translate

package/esm/formStepper/components/formStep.js

@@ -30,7 +30,7 @@ injectString("tr", "Optional", "\u0130ste\u011Fe ba\u011Fl\u0131");
 injectString("zh-Hans", "Optional", "\u53EF\u9009");
 injectString("zh-TW", "Optional", "\u9078\u586B");
 injectString("ro-RO", "Optional", "Op\u021Bional");
-injectString("ar-SA", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
+injectString("ar", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
 export const FormStep = ({
   isFirst,
   value,

package/esm/formStepper/formStepper.js

@@ -30,7 +30,7 @@ injectString("tr", "Step {0} of {1}", "Ad\u0131m {0} / {1}");
 injectString("zh-Hans", "Step {0} of {1}", "\u6B65\u9AA4 {0} / {1} ");
 injectString("zh-TW", "Step {0} of {1}", "\u6B65\u9A5F {0} (\u5171 {1} \u500B)");
 injectString("ro-RO", "Step {0} of {1}", "Pasul {0} din {1}");
-injectString("ar-SA", "Step {0} of {1}", "\u0627\u0644\u062E\u0637\u0648\u0629 {0} \u0645\u0646 {1}");
+injectString("ar", "Step {0} of {1}", "\u0627\u0644\u062E\u0637\u0648\u0629 {0} \u0645\u0646 {1}");
 injectString("cs", "Optional", "Voliteln\xE9");
 injectString("da-DK", "Optional", "Valgfri");
 injectString("de", "Optional", "Optional");
@@ -57,7 +57,7 @@ injectString("tr", "Optional", "\u0130ste\u011Fe ba\u011Fl\u0131");
 injectString("zh-Hans", "Optional", "\u53EF\u9009");
 injectString("zh-TW", "Optional", "\u9078\u586B");
 injectString("ro-RO", "Optional", "Op\u021Bional");
-injectString("ar-SA", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
+injectString("ar", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
 const MAX_STEPS = 7;
 export const STEPPER_LAST_STEP = "lastStep";
 export const FormStepper = ({