@geotab/zenith 3.7.0 → 3.8.0-beta.1

package/esm/formField/hooks/useFormFieldClasses.js

@@ -17,7 +17,11 @@ export const useFormFieldClasses = (props, component) => {
         "zen-form-field",
         isMobile ? "zen-form-field--mobile" : "",
         banner ? "zen-form-field--with-banner" : "",
-        !props.label || !rangeRawLabelCheck(component, props) ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+        !props.label || !rangeRawLabelCheck(component, props)
+            ? ""
+            : props.labelAlign
+                ? `zen-form-field--label-${props.labelAlign}`
+                : "zen-form-field--label-left",
         !isOldFormFieldComponent(component) && !fullWidthTriggerButton ? "zen-form-field--new-component" : "",
         isFormSection ? "zen-form-field--form-item" : "",
         props.className || ""

package/esm/formField/hooks/useFormFieldProps.js

@@ -27,6 +27,14 @@ export const useFormFieldProps = (props, wrapperComponent) => {
     const showAdditionalInfo = !!((error || assistive || props.counter) && !isReadonly);
     const classes = useFormFieldClasses(props, wrapperComponent);
     return {
-        id, wrapperComponent, props, hasCustomWidth, widthObj, trailingId, trailing, showAdditionalInfo, classes
+        id,
+        wrapperComponent,
+        props,
+        hasCustomWidth,
+        widthObj,
+        trailingId,
+        trailing,
+        showAdditionalInfo,
+        classes
     };
 };

package/esm/formField/hooks/useReadonly.js

@@ -1,6 +1,6 @@
 import { useMode } from "../../formGroup/hooks/useMode";
 // TODO: add to documentation?
-export const useReadonly = (props) => {
+export const useReadonly = props => {
     const mode = useMode();
     return props.isReadOnly !== undefined ? props.isReadOnly : mode === "review";
 };

package/esm/formField/hooks/useSkeleton.js

@@ -2,7 +2,5 @@ import { Children } from "react";
 import { FormFieldSkeleton } from "../components/formFieldSkeleton";
 export const useSkeleton = (props) => {
     var _a;
-    return ((_a = Children
-        .toArray(props.children)
-        .find(child => child.type && child.type === FormFieldSkeleton)) === null || _a === void 0 ? void 0 : _a.props) || {};
+    return ((_a = Children.toArray(props.children).find(child => child.type && child.type === FormFieldSkeleton)) === null || _a === void 0 ? void 0 : _a.props) || {};
 };

package/esm/formField/utils/getFormFieldBanner.js

@@ -4,7 +4,7 @@ export const getFormFieldBanner = (children) => {
     if (!children) {
         return null;
     }
-    return React.Children.toArray(children).find((child) => {
+    return React.Children.toArray(children).find(child => {
         if (!React.isValidElement(child)) {
             return false;
         }

package/esm/formFieldError/formFieldError.js

@@ -6,6 +6,8 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 export const FormFieldError = ({ className, error }) => {
     const driveComponentClass = useDriveClassName("zen-form-field-error");
     const isDrive = useDrive();
-    const errorStrings = Array.isArray(error) ? error.filter(el => el).map((erStr, ind) => _jsx("div", { children: erStr }, `error_str_${ind}`)) : error && _jsx("div", { children: error });
-    return error ? _jsxs("div", { className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx("div", { className: "zen-form-field-error__icon-container", children: _jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), _jsx("div", { className: "zen-form-field-error__error-text", children: errorStrings })] }) : null;
+    const errorStrings = Array.isArray(error)
+        ? error.filter(el => el).map((erStr, ind) => _jsx("div", { children: erStr }, `error_str_${ind}`))
+        : error && _jsx("div", { children: error });
+    return error ? (_jsxs("div", { className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx("div", { className: "zen-form-field-error__icon-container", children: _jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), _jsx("div", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
 };

package/esm/formGroup/components/customRow/customRow.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-export const CustomRow = ({ children, className = "" }) => _jsx("div", { className: classNames(["zen-custom-form-row", className]), children: children });
+export const CustomRow = ({ children, className = "" }) => (_jsx("div", { className: classNames(["zen-custom-form-row", className]), children: children }));

package/esm/formGroup/components/list.js

@@ -11,5 +11,5 @@ export const List = ({ children }) => {
     const columns = useColumns();
     const { toggleList } = useToggleList({ children });
     // TODO: classes without toggle?
-    return _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { tooltip: tooltip, value: label, className: classNames([getListClasses(labelAlign, columns, true), "zen-form-list-label"]) }), toggleList] });
+    return (_jsxs(_Fragment, { children: [_jsx(FormGroupItem, { tooltip: tooltip, value: label, className: classNames([getListClasses(labelAlign, columns, true), "zen-form-list-label"]) }), toggleList] }));
 };

package/esm/formGroup/components/listToggle/listToggle.js

@@ -12,12 +12,14 @@ export const ListToggle = () => {
     const { value = false, onChange } = useFormFieldValues(controller, { value: toggle, onChange: onToggleChange });
     const mode = useMode();
     const columns = useColumns();
-    const toggleAttributes = useMemo(() => controller !== undefined ? {
-        controller
-    } : {
-        checked: toggle,
-        onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value)
-    }, [controller, toggle, onChange, value]);
+    const toggleAttributes = useMemo(() => controller !== undefined
+        ? {
+            controller
+        }
+        : {
+            checked: toggle,
+            onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value)
+        }, [controller, toggle, onChange, value]);
     if (mode === "edit") {
         return _jsx(ToggleButton, Object.assign({}, toggleAttributes, { className: getToggleClasses(columns, labelAlign) }));
     }

package/esm/formGroup/components/oneRow.js

@@ -7,5 +7,5 @@ export const OneRow = ({ state }) => {
     if (customControl) {
         return customControl;
     }
-    return _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), control1, _jsx(FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control2] });
+    return (_jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), control1, _jsx(FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control2] }));
 };

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

@@ -23,7 +23,7 @@ injectString("nb-NO", "On", "P\xE5");
 injectString("nl", "On", "Aan");
 injectString("pl", "On", "W\u0142.");
 injectString("pt-BR", "On", "Ativado");
-injectString("pt-PT", "On", "Ligado");
+injectString("pt-PT", "On", "Ativado");
 injectString("sk-SK", "On", "Zapnut\xE9");
 injectString("sv", "On", "P\xE5");
 injectString("th", "On", "\u0E40\u0E1B\u0E34\u0E14");
@@ -31,6 +31,7 @@ injectString("tr", "On", "A\xE7\u0131k");
 injectString("zh-Hans", "On", "\u5F00\u542F");
 injectString("zh-TW", "On", "\u958B\u555F");
 injectString("ro-RO", "On", "Activat");
+injectString("ar-SA", "On", "\u062A\u0634\u063A\u064A\u0644");
 injectString("cs", "Off", "Vypnout");
 injectString("da-DK", "Off", "Slukket");
 injectString("de", "Off", "Aus");
@@ -57,6 +58,7 @@ injectString("tr", "Off", "Kapal\u0131");
 injectString("zh-Hans", "Off", "\u5173\u95ED");
 injectString("zh-TW", "Off", "\u95DC\u9589");
 injectString("ro-RO", "Off", "Dezactivat");
+injectString("ar-SA", "Off", "\u0625\u064A\u0642\u0627\u0641");
 export const ReviewListToggle = ({
   value,
   className = ""

package/esm/formGroup/components/reviewTextControl.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const ReviewTextControl = ({ value, className = "", password, secondary }) => _jsx("span", { className: classNames([className, "zen-review-text-control", secondary ? "zen-review-text-control--secondary" : ""]), children: password ? value.replace(/./g, "*") : value });
+export const ReviewTextControl = ({ value, className = "", password, secondary }) => (_jsx("span", { className: classNames([className, "zen-review-text-control", secondary ? "zen-review-text-control--secondary" : ""]), children: password ? value.replace(/./g, "*") : value }));

package/esm/formGroup/components/twoRows.js

@@ -7,5 +7,5 @@ export const TwoRows = ({ state }) => {
     if (customControl) {
         return customControl;
     }
-    return _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), _jsx(FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control1, control2] });
+    return (_jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), _jsx(FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control1, control2] }));
 };

package/esm/formGroup/formGroup.js

@@ -12,34 +12,34 @@ const isFormGroupToggle = (child) => React.Children.count(child) === 1 && React.
 export const FormGroup = ({ label, children, tooltip, labelAlign }) => {
     // TODO: add accessibility
     // TODO: section align for both labels?
-    const Provider = useCallback(({ children: content, controller, label: labelProvider, labelAlign: labelAlignProvider, tooltip: tooltipProvider, toggle, onToggleChange }) => _jsx(FormGroupProvider, { label: labelProvider || label, labelAlign: labelAlignProvider || labelAlign, tooltip: tooltipProvider || tooltip, controller: controller, toggle: toggle, onToggleChange: onToggleChange, children: content }), [label, labelAlign, tooltip]);
+    const Provider = useCallback(({ children: content, controller, label: labelProvider, labelAlign: labelAlignProvider, tooltip: tooltipProvider, toggle, onToggleChange }) => (_jsx(FormGroupProvider, { label: labelProvider || label, labelAlign: labelAlignProvider || labelAlign, tooltip: tooltipProvider || tooltip, controller: controller, toggle: toggle, onToggleChange: onToggleChange, children: content })), [label, labelAlign, tooltip]);
     if (!children) {
         return null;
     }
     const numberOfChildren = React.Children.count(children);
     if (numberOfChildren === 1 && (typeof children === "string" || typeof children === "number")) {
-        return _jsx(Provider, { children: _jsx(Row, { children: _jsx("span", { children: children }) }) });
+        return (_jsx(Provider, { children: _jsx(Row, { children: _jsx("span", { children: children }) }) }));
     }
     // TODO: check for comments section
     // TODO: check for Additional Section
     // const isAllLabels = isAllChildrenLabels(children);
     if (isFormGroupToggle(children)) {
-        return _jsx(Provider, { tooltip: children.props.tooltip, 
+        return (_jsx(Provider, { tooltip: children.props.tooltip, 
             // TODO: do we need labelAlign here?
             // labelAlign={children.props.labelAlign}
-            controller: children.props.controller, label: children.props.label, toggle: children.props.value, onToggleChange: children.props.onChange, children: _jsx(List, { children: children.props.children }) });
+            controller: children.props.controller, label: children.props.label, toggle: children.props.value, onToggleChange: children.props.onChange, children: _jsx(List, { children: children.props.children }) }));
     }
     if (isFormGroupList(children)) {
-        return _jsx(Provider, { label: children.props.label, tooltip: children.props.tooltip, children: _jsx(List, { children: children.props.children }) });
+        return (_jsx(Provider, { label: children.props.label, tooltip: children.props.tooltip, children: _jsx(List, { children: children.props.children }) }));
     }
     // TODO: do we need it?
     if (numberOfChildren > 2 && label) {
-        return _jsx(Provider, { children: _jsx(List, { children: children }) });
+        return (_jsx(Provider, { children: _jsx(List, { children: children }) }));
     }
     if (numberOfChildren > 2 && !label) {
-        return _jsx(Provider, { children: Children.map(children, (child, indx) => (_jsx(Row, { children: child }, child.key || indx))) });
+        return (_jsx(Provider, { children: Children.map(children, (child, indx) => (_jsx(Row, { children: child }, child.key || indx))) }));
     }
-    return _jsx(Provider, { children: _jsx(Row, { children: children }) });
+    return (_jsx(Provider, { children: _jsx(Row, { children: children }) }));
 };
 FormGroup.Toggle = FormGroupToggle;
 FormGroup.List = FormGroupList;

package/esm/formGroup/hooks/listHooks/useControlClasses.js

@@ -8,7 +8,7 @@ export const useControlClasses = (state) => {
     const columns = useColumns();
     const mode = useMode();
     // eslint-disable-next-line complexity
-    state.forEach((st) => {
+    state.forEach(st => {
         if (st.custom) {
             if (st.totalCount === 4) {
                 st.customControlClasses = getOneLabelOneControlClasses(st, columns, mode).controlClasses1;

package/esm/formGroup/hooks/listHooks/useControls.js

@@ -1,6 +1,6 @@
 import { getControls } from "../../utils/getControls";
 export const useControls = (state) => {
-    state.forEach((st) => {
+    state.forEach(st => {
         var _a, _b;
         const { control1, control2 } = getControls(st.elements);
         if (control1 && ((_a = st.elements.control1) === null || _a === void 0 ? void 0 : _a.value)) {

package/esm/formGroup/hooks/listHooks/useElementsState.js

@@ -19,7 +19,7 @@ export const useElementsState = (children) => {
             state.push(st);
             return;
         }
-        if ((typeof child === "string" || typeof child === "number")) {
+        if (typeof child === "string" || typeof child === "number") {
             const st = initializeState(getEmptyState(), _jsx("span", { children: child }), mode, undefined, undefined, undefined);
             state.push(st);
             return;

package/esm/formGroup/hooks/listHooks/useLabelClasses.js

@@ -5,7 +5,7 @@ import { useMode } from "../useMode";
 export const useLabelClasses = (state) => {
     const columns = useColumns();
     const mode = useMode();
-    state.forEach((st) => {
+    state.forEach(st => {
         let { labelClasses1, labelClasses2 } = getLabelListClasses(st, columns, mode);
         labelClasses1 = `${labelClasses1} zen-form-group-list-label`;
         labelClasses2 = `${labelClasses2} zen-form-group-list-label`;

package/esm/formGroup/hooks/useCustomRow.js

@@ -21,13 +21,21 @@ export const useCustomRowElements = (state) => {
             control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
         }
         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(["zen-field-label--custom-width", ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.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 })] });
+            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([
+                            "zen-field-label--custom-width",
+                            ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.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 })] }));
             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(["zen-field-label--custom-width", ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "", state.customLabelClasses || ""]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] })] });
+            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([
+                            "zen-field-label--custom-width",
+                            ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "",
+                            state.customLabelClasses || ""
+                        ]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
             return {
                 customControl
             };
@@ -36,23 +44,33 @@ 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] })] });
+        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] })] }));
         return {
             customControl
         };
     }
-    if (state.custom && 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)) {
+    if (state.custom &&
+        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] });
+        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] }));
         return {
             customControl
         };
     }
-    if (state.custom && 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)) {
+    if (state.custom &&
+        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] })] });
+        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] })] }));
         return {
             customControl
         };
@@ -60,14 +78,14 @@ export const useCustomRowElements = (state) => {
     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 });
-        const customControl = _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] });
+        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 })] });
+        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 })] }));
         return {
             customControl
         };

package/esm/formGroup/hooks/useToggle.js

@@ -10,9 +10,33 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { getListClasses } from "../utils/getListClasses";
 import { useColumns } from "../../formLayout/hooks/useColumns";
+injectString("cs", "Sub-options are not active.", "Sub-options are not active.");
+injectString("da-DK", "Sub-options are not active.", "Sub-options are not active.");
+injectString("de", "Sub-options are not active.", "Sub-options are not active.");
 injectString("en", "Sub-options are not active.", "Sub-options are not active.");
+injectString("es", "Sub-options are not active.", "Sub-options are not active.");
+injectString("fi-FI", "Sub-options are not active.", "Sub-options are not active.");
+injectString("fr", "Sub-options are not active.", "Sub-options are not active.");
+injectString("fr-FR", "Sub-options are not active.", "Sub-options are not active.");
+injectString("hu-HU", "Sub-options are not active.", "Sub-options are not active.");
+injectString("id", "Sub-options are not active.", "Sub-options are not active.");
+injectString("it", "Sub-options are not active.", "Sub-options are not active.");
+injectString("ja", "Sub-options are not active.", "Sub-options are not active.");
+injectString("ko-KR", "Sub-options are not active.", "Sub-options are not active.");
+injectString("ms", "Sub-options are not active.", "Sub-options are not active.");
+injectString("nb-NO", "Sub-options are not active.", "Sub-options are not active.");
+injectString("nl", "Sub-options are not active.", "Sub-options are not active.");
+injectString("pl", "Sub-options are not active.", "Sub-options are not active.");
+injectString("pt-BR", "Sub-options are not active.", "Sub-options are not active.");
 injectString("pt-PT", "Sub-options are not active.", "Subop\xE7\xF5es n\xE3o est\xE3o ativas.");
+injectString("sk-SK", "Sub-options are not active.", "Sub-options are not active.");
+injectString("sv", "Sub-options are not active.", "Sub-options are not active.");
+injectString("th", "Sub-options are not active.", "Sub-options are not active.");
+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.");
 export const useToggle = result => {
   const {
     controller,

package/esm/formGroup/utils/applyCustomControlClasses.js

@@ -1,6 +1,7 @@
-// eslint-disable-next-line complexity
+/* eslint-disable complexity */
 export const applyCustomControlClasses = ({ state, labelAlign, columns, getOneLabelOneControlClasses, getZeroLabelOneControlClasses }) => {
     var _a, _b, _c;
+    /* eslint-enable complexity */
     if (state.totalCount === 4) {
         state.customControlClasses = getOneLabelOneControlClasses(((_a = state.elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) || labelAlign, columns).controlClasses1;
         return;

package/esm/formGroup/utils/getControlNode.js

@@ -1,2 +1,2 @@
 import { isFormLabel } from "./isFormLabel";
-export const getControlNode = (node) => node && !isFormLabel(node) ? node : null;
+export const getControlNode = (node) => (node && !isFormLabel(node) ? node : null);

package/esm/formGroup/utils/getControls.js

@@ -6,18 +6,22 @@ export const getControls = (elements) => {
     if ((_a = elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
         const element = elements.control1.value;
         const isDOMElement = typeof element.type === "string";
-        control1 = cloneElement(element, Object.assign({ className: `zen-form-control ${elements.control1.className || ""}` }, (isDOMElement ? {} : {
-            isReadOnly: !!elements.control1.isReadOnly,
-            bannerLabel: (_b = elements.label1) === null || _b === void 0 ? void 0 : _b.value
-        })));
+        control1 = cloneElement(element, Object.assign({ className: `zen-form-control ${elements.control1.className || ""}` }, (isDOMElement
+            ? {}
+            : {
+                isReadOnly: !!elements.control1.isReadOnly,
+                bannerLabel: (_b = elements.label1) === null || _b === void 0 ? void 0 : _b.value
+            })));
     }
     if ((_c = elements.control2) === null || _c === void 0 ? void 0 : _c.value) {
         const element = elements.control2.value;
         const isDOMElement = typeof element.type === "string";
-        control2 = cloneElement(element, Object.assign({ className: `zen-form-control ${elements.control2.className || ""}` }, (isDOMElement ? {} : {
-            isReadOnly: !!elements.control2.isReadOnly,
-            bannerLabel: (_d = elements.label2) === null || _d === void 0 ? void 0 : _d.value
-        })));
+        control2 = cloneElement(element, Object.assign({ className: `zen-form-control ${elements.control2.className || ""}` }, (isDOMElement
+            ? {}
+            : {
+                isReadOnly: !!elements.control2.isReadOnly,
+                bannerLabel: (_d = elements.label2) === null || _d === void 0 ? void 0 : _d.value
+            })));
     }
     return { control1, control2 };
 };

package/esm/formGroup/utils/getElementsControl.js

@@ -8,10 +8,10 @@ export const getElementsControl = (control, mode, elements, controlName) => {
     // TODO: update test
     const readOnlyValueProp = control.props.readOnlyValue;
     if (isControlReadOnly && readOnlyValueProp) {
-        elements[controlName] = { value: typeof readOnlyValueProp === "string"
-                ? _jsx(ReviewTextControl, { value: readOnlyValueProp }) :
-                typeof readOnlyValueProp === "function" ? readOnlyValueProp(control.props.value) :
-                    readOnlyValueProp, type: "control" };
+        elements[controlName] = {
+            value: typeof readOnlyValueProp === "string" ? (_jsx(ReviewTextControl, { value: readOnlyValueProp })) : typeof readOnlyValueProp === "function" ? (readOnlyValueProp(control.props.value)) : (readOnlyValueProp),
+            type: "control"
+        };
         return;
     }
     if (isControlReadOnly) {

package/esm/formGroup/utils/getLabelNode.js

@@ -1,2 +1,2 @@
 import { isFormLabel } from "./isFormLabel";
-export const getLabelNode = (node) => node && isFormLabel(node) ? node : null;
+export const getLabelNode = (node) => (node && isFormLabel(node) ? node : null);

package/esm/formGroup/utils/getTotalState.js

@@ -4,7 +4,7 @@ export const getTotalState = (elements) => {
     let controlsCount = 0;
     let labelsCount = 0;
     // TODO: should calculate base on label inside control?
-    Object.values(elements).forEach((el) => {
+    Object.values(elements).forEach(el => {
         if (el) {
             totalCount++;
             if (el.type === "control") {

package/esm/formGroup/utils/hasWidthProp.js

@@ -1,5 +1,5 @@
 import React from "react";
-export const hasWidthProp = (children) => React.Children.toArray(children).some((child) => {
+export const hasWidthProp = (children) => React.Children.toArray(children).some(child => {
     if (React.isValidElement(child)) {
         return !!child.props.width;
     }

package/esm/formGroupItem/formGroupItem.js

@@ -5,5 +5,5 @@ import { useMode } from "../formGroup/hooks/useMode";
 export const FormGroupItem = ({ id, value, tooltip, className = "" }) => {
     const mode = useMode();
     const textClasses = classNames(["zen-field-label__text", mode === "review" ? "zen-field-label__text--review" : ""]);
-    return value ? _jsxs("div", { className: classNames(["zen-field-label", className]), children: [id && _jsx("label", { className: textClasses, htmlFor: id, children: value }), !id && _jsx("span", { className: textClasses, children: value }), _jsx(TooltipInfo, { className: classNames(["zen-field-label-tooltip"]), value: tooltip })] }) : null;
+    return value ? (_jsxs("div", { className: classNames(["zen-field-label", className]), children: [id && (_jsx("label", { className: textClasses, htmlFor: id, children: value })), !id && _jsx("span", { className: textClasses, children: value }), _jsx(TooltipInfo, { className: classNames(["zen-field-label-tooltip"]), value: tooltip })] })) : null;
 };

package/esm/formLayout/components/columnTitle/formLayoutColumnTitle.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-export const FormLayoutColumnTitle = ({ value, className = "" }) => _jsx("span", { className: classNames(["zen-form-layout-column-title", className]), children: value });
+export const FormLayoutColumnTitle = ({ value, className = "" }) => (_jsx("span", { className: classNames(["zen-form-layout-column-title", className]), children: value }));

package/esm/formLayout/components/customColumns.js

@@ -27,7 +27,7 @@ export const CustomColumns = (_a) => {
     const components = useComponents(Object.assign({ children: ch, title, secondary }, stepperProps));
     const columnOne = Array.isArray(components[0]);
     const columnTwo = Array.isArray(components[1]);
-    const isOneColumn = (columns === 1 || isMobile && !columnOne && !columnTwo);
+    const isOneColumn = columns === 1 || (isMobile && !columnOne && !columnTwo);
     const isTwoColumns = columns === 2 && !isMobile;
-    return _jsxs(_Fragment, { children: [isOneColumn && _jsx(OneColumnGrid, { className: className, components: components }), isTwoColumns && _jsx(TwoColumnsGrid, { className: className, components: components })] });
+    return (_jsxs(_Fragment, { children: [isOneColumn && _jsx(OneColumnGrid, { className: className, components: components }), isTwoColumns && _jsx(TwoColumnsGrid, { className: className, components: components })] }));
 };

package/esm/formLayout/components/formLayoutSecondary.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const FormLayoutSecondary = ({ value, className = "" }) => _jsx("span", { className: classNames(["zen-form-layout-secondary", className]), children: value });
+export const FormLayoutSecondary = ({ value, className = "" }) => (_jsx("span", { className: classNames(["zen-form-layout-secondary", className]), children: value }));

package/esm/formLayout/components/formLayoutTitle.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const FormLayoutTitle = ({ value, className = "" }) => _jsx("span", { className: classNames(["zen-form-layout-title", className]), children: value });
+export const FormLayoutTitle = ({ value, className = "" }) => (_jsx("span", { className: classNames(["zen-form-layout-title", className]), children: value }));

package/esm/formLayout/components/getLayoutColumns.js

@@ -8,9 +8,9 @@ export const getLayoutColumns = (children) => {
         return [];
     }
     if (!Array.isArray(children)) {
-        return (isValidElement(children) && children.type === LayoutColumn) ? [children] : [_jsx(LayoutColumn, { children: children }, "column1")];
+        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 => child.type === LayoutColumn && child.props.children).slice(0, 2);
     if (layoutColumns.length) {
         return layoutColumns;
     }
@@ -28,8 +28,5 @@ export const getLayoutColumns = (children) => {
             columnTwo.push(child);
         }
     });
-    return [
-        _jsx(LayoutColumn, { children: columnOne }, "column1"),
-        _jsx(LayoutColumn, { children: columnTwo }, "column2")
-    ];
+    return [_jsx(LayoutColumn, { children: columnOne }, "column1"), _jsx(LayoutColumn, { children: columnTwo }, "column2")];
 };

package/esm/formLayout/components/oneColumnGrid.js

@@ -10,8 +10,8 @@ export const OneColumnGrid = ({ className, components }) => {
     const columns = useColumns();
     const columnOne = Array.isArray(components[0]);
     const columnTwo = Array.isArray(components[1]);
-    const isOneColumn = (columns === 1 || isMobile && !columnOne && !columnTwo);
-    const emptyColumnTitleIndx = components.findIndex((el) => { var _a; return el.type === FormLayoutColumnTitle && !((_a = el.props) === null || _a === void 0 ? void 0 : _a.value); });
+    const isOneColumn = columns === 1 || (isMobile && !columnOne && !columnTwo);
+    const emptyColumnTitleIndx = components.findIndex(el => { var _a; return el.type === FormLayoutColumnTitle && !((_a = el.props) === null || _a === void 0 ? void 0 : _a.value); });
     if (isOneColumn && emptyColumnTitleIndx !== -1) {
         components.splice(emptyColumnTitleIndx, 1);
     }

package/esm/formLayout/components/useCustomColumns.js

@@ -13,7 +13,7 @@ export const useCustomColumns = ({ components, firstColIndx, secondColIndx, clas
     const columns = useColumns();
     const colOne = [];
     const colTwo = [];
-    const result = components.filter((el) => el.type !== FormSection && !isCustomFormSection(el));
+    const result = components.filter(el => el.type !== FormSection && !isCustomFormSection(el));
     components.forEach((el) => {
         var _a, _b;
         if (((_a = el.props) === null || _a === void 0 ? void 0 : _a.column) === 1) {
@@ -25,24 +25,24 @@ export const useCustomColumns = ({ components, firstColIndx, secondColIndx, clas
     });
     result.splice(firstColIndx, 0, colOne);
     result.splice(secondColIndx, 0, colTwo);
-    // eslint-disable-next-line
-    // @ts-ignore
-    const columnTitleOneIndex = result.findIndex((item) => { var _a; return React.isValidElement(item) && item.type === FormLayoutColumnTitle && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 1; });
+    const columnTitleOneIndex = result.findIndex(
+    // @ts-expect-error - FormLayoutColumnTitle props type not inferred by isValidElement
+    item => { var _a; return React.isValidElement(item) && item.type === FormLayoutColumnTitle && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 1; });
     if (columnTitleOneIndex !== -1) {
         result.splice(columnTitleOneIndex, 1);
     }
-    // eslint-disable-next-line
-    // @ts-ignore
-    const columnTitleTwoIndex = result.findIndex(item => { var _a; return React.isValidElement(item) && item.type === FormLayoutColumnTitle && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 2; });
+    const columnTitleTwoIndex = result.findIndex(
+    // @ts-expect-error - FormLayoutColumnTitle props type not inferred by isValidElement
+    item => { var _a; return React.isValidElement(item) && item.type === FormLayoutColumnTitle && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 2; });
     if (columnTitleTwoIndex !== -1) {
         result.splice(columnTitleTwoIndex, 1);
     }
-    const componentsArr = result.map(((el, indx) => {
+    const componentsArr = result.map((el, indx) => {
         if (Array.isArray(el)) {
-            return _jsx(Column, { grid: 644, children: el }, indx);
+            return (_jsx(Column, { grid: 644, children: el }, indx));
         }
         return el;
-    }));
+    });
     const isTwoColumns = columns === 2 && !isMobile;
     const stepperLayout = getStepperLayout({ components: componentsArr, className, isMobile });
     if (stepperLayout) {