@geotab/zenith 3.7.0 → 3.8.0-beta.0

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) {

package/esm/formLayout/formLayout.js

@@ -22,7 +22,7 @@ const hasCustomColumnsFn = (children) => {
     if (!Array.isArray(children)) {
         return isValidElement(children) && children.type === LayoutColumn;
     }
-    return children.some((child) => isValidElement(child) && child.type === LayoutColumn);
+    return children.some(child => isValidElement(child) && child.type === LayoutColumn);
 };
 // TODO: Margins/paddings/gaps and etc.
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -33,7 +33,7 @@ export const FormLayout = (_a) => {
     const classes = classNames([className || "", "zen-form-layout"]);
     const { loadingContent } = useLoading({ isLoading });
     const { error } = useError({ isError, retry, isLoading });
-    const content = loadingContent ? loadingContent : error ? error : _jsx(_Fragment, { children: _jsx(CustomColumns, Object.assign({ className: classes, title: title, secondary: secondary }, stepperProps, { children: children }), "custom") });
-    return _jsx(FormLayoutProvider, { columns: hasCustomColumns ? layoutColumns.length : columns, mode: mode, sectionType: sectionType, labelAlign: labelAlign, hasCustomColumns: hasCustomColumns, children: content });
+    const content = loadingContent ? (loadingContent) : error ? (error) : (_jsx(_Fragment, { children: _jsx(CustomColumns, Object.assign({ className: classes, title: title, secondary: secondary }, stepperProps, { children: children }), "custom") }));
+    return (_jsx(FormLayoutProvider, { columns: hasCustomColumns ? layoutColumns.length : columns, mode: mode, sectionType: sectionType, labelAlign: labelAlign, hasCustomColumns: hasCustomColumns, children: content }));
 };
 FormLayout.Column = LayoutColumn;

package/esm/formLayout/hooks/getStepperLayout.js

@@ -15,5 +15,5 @@ export const getStepperLayout = (props) => {
     const restComponents = components.slice(1, components.length - 1);
     const gridLayoutClasses = classNames([className || "", "zen-form-layout--has-wrapper"]);
     const wrapperClasses = classNames(["zen-form-layout-wrapper", props.isMobile ? "zen-form-layout-wrapper--mobile" : ""]);
-    return _jsxs("div", { className: wrapperClasses, children: [stepper, _jsx(GridLayout, { className: gridLayoutClasses, children: restComponents }), stepperButtons] });
+    return (_jsxs("div", { className: wrapperClasses, children: [stepper, _jsx(GridLayout, { className: gridLayoutClasses, children: restComponents }), stepperButtons] }));
 };

package/esm/formLayout/hooks/useError.js

@@ -29,12 +29,61 @@ 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("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");
 injectString("en", "Failed to load page", "Failed to load page");
+injectString("es", "Failed to load page", "Failed to load page");
+injectString("fi-FI", "Failed to load page", "Failed to load page");
+injectString("fr", "Failed to load page", "Failed to load page");
+injectString("fr-FR", "Failed to load page", "Failed to load page");
+injectString("hu-HU", "Failed to load page", "Failed to load page");
+injectString("id", "Failed to load page", "Failed to load page");
+injectString("it", "Failed to load page", "Failed to load page");
+injectString("ja", "Failed to load page", "Failed to load page");
+injectString("ko-KR", "Failed to load page", "Failed to load page");
+injectString("ms", "Failed to load page", "Failed to load page");
+injectString("nb-NO", "Failed to load page", "Failed to load page");
+injectString("nl", "Failed to load page", "Failed to load page");
+injectString("pl", "Failed to load page", "Failed to load page");
+injectString("pt-BR", "Failed to load page", "Failed to load page");
 injectString("pt-PT", "Failed to load page", "Falha ao carregar a p\xE1gina");
+injectString("sk-SK", "Failed to load page", "Failed to load page");
+injectString("sv", "Failed to load page", "Failed to load page");
+injectString("th", "Failed to load page", "Failed to load page");
+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("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.");
 injectString("en", "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("es", "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("fi-FI", "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("fr", "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("fr-FR", "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("hu-HU", "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("id", "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("it", "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("ja", "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("ko-KR", "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("ms", "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("nb-NO", "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("nl", "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("pl", "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("pt-BR", "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("pt-PT", "Please refresh the page and try again. If the issue persists, contact Support.", "Atualize a p\xE1gina e tente novamente. Se o problema persistir, contacte o Suporte.");
+injectString("sk-SK", "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("sv", "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("th", "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("tr", "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-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.");
 export const useError = props => {
   const {
     translate

package/esm/formLayout/hooks/useFormButtons.d.ts

@@ -3,7 +3,7 @@ export interface IUseFormButtonsProps {
     mode?: TFormLayoutMode;
     onEdit?: () => void;
     onCancel?: () => void;
-    onSave?: (<T extends unknown[]>(...args: T) => void);
+    onSave?: <T extends unknown[]>(...args: T) => void;
 }
 export declare const useFormButtons: (props?: IUseFormButtonsProps) => {
     mode: TFormLayoutMode;

package/esm/formLayout/hooks/useFormButtons.js

@@ -33,6 +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("cs", "Edit", "Upravit");
 injectString("da-DK", "Edit", "Rediger");
 injectString("de", "Edit", "Bearbeiten");
@@ -59,6 +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("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -85,6 +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");
 export const useFormButtons = (props = {}) => {
   const {
     onSave,

package/esm/formLayout/hooks/useLoading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Waiting } from "../../waiting/waiting";
-export const useLoading = (props) => {
+export const useLoading = props => {
     if (!props.isLoading) {
         return {
             loadingContent: null

package/esm/formLayout/utils/applyLayoutPosition/applyLayoutPosition.js

@@ -3,14 +3,8 @@ import { FormStepperButtons } from "../../../formStepperButtons/formStepperButto
 import { Banner } from "../../../banner/banner";
 import { FormLayoutTitle } from "../../components/formLayoutTitle";
 import { FormLayoutColumnTitle } from "../../components/columnTitle/formLayoutColumnTitle";
-const STATIC_COMPONENTS = [
-    FormStepper,
-    FormStepperButtons,
-    Banner,
-    FormLayoutTitle,
-    FormLayoutColumnTitle
-];
-const transform = (components) => {
+const STATIC_COMPONENTS = [FormStepper, FormStepperButtons, Banner, FormLayoutTitle, FormLayoutColumnTitle];
+const transform = components => {
     const state = {};
     // eslint-disable-next-line
     // @ts-ignore
@@ -32,7 +26,7 @@ const transform = (components) => {
         // eslint-disable-next-line
         // @ts-ignore
         const layoutPosition = child.props.layoutPosition;
-        const newPositions = Object.values(state).map((field) => field.newPos);
+        const newPositions = Object.values(state).map(field => field.newPos);
         let newPos;
         if (layoutPosition !== undefined) {
             newPos = layoutPosition < 0 ? 0 : layoutPosition > movableComponents.length - 1 ? movableComponents.length - 1 : layoutPosition;
@@ -59,7 +53,9 @@ const transform = (components) => {
         };
     });
     // 2. Adjust positions
-    components.sort((a, b) => a.props.layoutPosition - b.props.layoutPosition).forEach((child, index) => {
+    components
+        .sort((a, b) => a.props.layoutPosition - b.props.layoutPosition)
+        .forEach((child, index) => {
         // eslint-disable-next-line
         // @ts-ignore
         if (STATIC_COMPONENTS.includes(child.type)) {
@@ -71,7 +67,9 @@ const transform = (components) => {
         // eslint-disable-next-line
         // @ts-ignore
         const layoutPosition = child.props.layoutPosition;
-        const newPositions = Object.values(state).map((field) => field.newPos).filter((pos) => pos !== null);
+        const newPositions = Object.values(state)
+            .map(field => field.newPos)
+            .filter(pos => pos !== null);
         let newPos = 0;
         if (newPositions.indexOf(newPos) !== -1) {
             if (layoutPosition >= movableComponents.length - 1) {
@@ -98,12 +96,14 @@ const transform = (components) => {
         }
         const index = components.indexOf(child);
         const newPos = state[index].newPos;
-        const withOldPos = Object.values(state).find((field) => field.oldPos === newPos);
+        const withOldPos = Object.values(state).find(field => field.oldPos === newPos);
         if (withOldPos) {
             state[index].newRealPos = withOldPos.realPos;
         }
     });
-    return Object.values(state).sort((a, b) => a.newRealPos - b.newRealPos).map((el) => el.value);
+    return Object.values(state)
+        .sort((a, b) => a.newRealPos - b.newRealPos)
+        .map(el => el.value);
 };
 // TODO: test with titles
 export const applyLayoutPosition = (components, result) => {

package/esm/formLayout/utils/attachHeadings.js

@@ -9,7 +9,7 @@ export const attachHeadings = (elements, title, secondary) => {
     const elementsClone = [...elements];
     const titleElement = title ? _jsx(FormLayoutTitle, { value: title }) : null;
     const secondaryElement = secondary ? _jsx(FormLayoutSecondary, { value: secondary }) : null;
-    const bannerElement = elementsClone.find((el) => el.type === Banner);
+    const bannerElement = elementsClone.find(el => el.type === Banner);
     const bannerIndex = elementsClone.indexOf(bannerElement);
     if (bannerElement && bannerIndex === 0) {
         if (titleElement) {
@@ -23,5 +23,5 @@ export const attachHeadings = (elements, title, secondary) => {
         }
         return elementsClone;
     }
-    return [titleElement, secondaryElement, ...elements].filter((el) => el !== null);
+    return [titleElement, secondaryElement, ...elements].filter(el => el !== null);
 };

package/esm/formLayout/utils/attachStepper.js

@@ -11,8 +11,12 @@ export const attachStepper = (components, stepperProps) => {
         return components;
     }
     const isFirstComponentBanner = ((_a = components[0]) === null || _a === void 0 ? void 0 : _a.type) === Banner;
-    const stepperClasses = classNames([...stepperProps.className || [], "zen-form-layout-stepper", isFirstComponentBanner ? "zen-form-layout-stepper--with-banner" : ""]);
-    const stepperButtonsClasses = classNames([...stepperProps.className || [], "zen-form-layout-stepper-buttons"]);
+    const stepperClasses = classNames([
+        ...(stepperProps.className || []),
+        "zen-form-layout-stepper",
+        isFirstComponentBanner ? "zen-form-layout-stepper--with-banner" : ""
+    ]);
+    const stepperButtonsClasses = classNames([...(stepperProps.className || []), "zen-form-layout-stepper-buttons"]);
     const stepper = _jsx(FormStepper, Object.assign({}, stepperProps, { className: stepperClasses }));
     const stepperButtons = _jsx(FormStepperButtons, Object.assign({}, stepperProps, { className: stepperButtonsClasses }));
     return [stepper, ...Children.toArray(components), stepperButtons];

package/esm/formLayout/utils/getAllowedComponents.js

@@ -7,7 +7,7 @@ export const getAllowedComponents = (children, title, secondary, type, columns,
     if (!children) {
         return [];
     }
-    let allowedComponents = React.Children.toArray(children).filter((child) => getFilteredComponents(child));
+    let allowedComponents = React.Children.toArray(children).filter(child => getFilteredComponents(child));
     allowedComponents = attachSeparators(allowedComponents, type, columns);
     allowedComponents = attachHeadings(allowedComponents, title, secondary);
     allowedComponents = attachStepper(allowedComponents, stepperProps);

package/esm/formLayout/utils/getChildrenWithCustomColumns.js

@@ -9,9 +9,9 @@ export const getChildrenWithCustomColumns = (children) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     let numberOfColumns = 0;
     if (!Array.isArray(children)) {
-        return (isValidElement(children) && children.type === LayoutColumn) ? [children.props.children] : [children];
+        return isValidElement(children) && children.type === LayoutColumn ? [children.props.children] : [children];
     }
-    let filtered = children.filter((child) => {
+    let filtered = children.filter(child => {
         if (child.type !== LayoutColumn) {
             return true;
         }
@@ -25,16 +25,16 @@ export const getChildrenWithCustomColumns = (children) => {
         return false;
     });
     if (numberOfColumns === 2) {
-        filtered = filtered.filter((child) => child.type !== FormSection && child.type !== FormSectionInner);
+        filtered = filtered.filter(child => child.type !== FormSection && child.type !== FormSectionInner);
     }
-    const indexOfFirstColumn = filtered.findIndex((child) => child.type === LayoutColumn);
+    const indexOfFirstColumn = filtered.findIndex(child => child.type === LayoutColumn);
     let indexOfSecondColumn = filtered.findIndex((child, index) => child.type === LayoutColumn && index > indexOfFirstColumn);
     const firstColumnTittle = indexOfFirstColumn !== -1 ? (_b = (_a = filtered[indexOfFirstColumn]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.title : null;
     const secondColumnTittle = indexOfSecondColumn !== -1 ? (_d = (_c = filtered[indexOfSecondColumn]) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.title : null;
     let childrenOfFirstColumn = indexOfFirstColumn !== -1 ? (_f = (_e = filtered[indexOfFirstColumn]) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.children : null;
     let childrenOfSecondColumn = indexOfSecondColumn !== -1 ? (_h = (_g = filtered[indexOfSecondColumn]) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.children : null;
     if (childrenOfFirstColumn) {
-        childrenOfFirstColumn = Children.toArray(childrenOfFirstColumn).map((child) => {
+        childrenOfFirstColumn = Children.toArray(childrenOfFirstColumn).map(child => {
             const clone = cloneElement(child, {
                 key: child.key + "1",
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -45,11 +45,11 @@ export const getChildrenWithCustomColumns = (children) => {
         });
         const title = ((_k = (_j = filtered[indexOfFirstColumn]) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.title) || "";
         if ((firstColumnTittle || secondColumnTittle) && Array.isArray(childrenOfFirstColumn)) {
-            childrenOfFirstColumn.unshift(_jsx(FormLayoutColumnTitle, { column: 1, value: title }, "column-1-title"));
+            childrenOfFirstColumn.unshift((_jsx(FormLayoutColumnTitle, { column: 1, value: title }, "column-1-title")));
         }
     }
     if (childrenOfSecondColumn) {
-        childrenOfSecondColumn = Children.toArray(childrenOfSecondColumn).map((child) => {
+        childrenOfSecondColumn = Children.toArray(childrenOfSecondColumn).map(child => {
             const clone = cloneElement(child, {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
@@ -60,11 +60,11 @@ export const getChildrenWithCustomColumns = (children) => {
         });
         const title = ((_m = (_l = filtered[indexOfSecondColumn]) === null || _l === void 0 ? void 0 : _l.props) === null || _m === void 0 ? void 0 : _m.title) || "";
         if ((firstColumnTittle || secondColumnTittle) && Array.isArray(childrenOfSecondColumn)) {
-            childrenOfSecondColumn.unshift(_jsx(FormLayoutColumnTitle, { column: 2, value: title }, "column-2-title"));
+            childrenOfSecondColumn.unshift((_jsx(FormLayoutColumnTitle, { column: 2, value: title }, "column-2-title")));
         }
     }
     indexOfFirstColumn !== -1 && filtered.splice(indexOfFirstColumn, 1, ...childrenOfFirstColumn);
-    indexOfSecondColumn = filtered.findIndex((child) => child.type === LayoutColumn);
+    indexOfSecondColumn = filtered.findIndex(child => child.type === LayoutColumn);
     indexOfSecondColumn !== -1 && filtered.splice(indexOfSecondColumn, 1, ...childrenOfSecondColumn);
     return filtered;
 };

package/esm/formLayout/utils/getFilteredComponents.js

@@ -3,12 +3,7 @@ import { isCustomFormSection } from "./isCustomFormSection";
 import { FormSection } from "../../formSection/formSection";
 import { LayoutColumn } from "../components/layoutColumn/layoutColum";
 import { FormLayoutColumnTitle } from "../components/columnTitle/formLayoutColumnTitle";
-export const DEFAULT_SUPPORTED_COMPONENTS = [
-    Banner,
-    FormSection,
-    LayoutColumn,
-    FormLayoutColumnTitle
-];
+export const DEFAULT_SUPPORTED_COMPONENTS = [Banner, FormSection, LayoutColumn, FormLayoutColumnTitle];
 export const getFilteredComponents = (child) => {
     // for React common components ("div", "span", etc.)
     if (typeof child.type === "string") {

package/esm/formLayout/utils/isStaticElement.js

@@ -8,7 +8,11 @@ export const isStaticElement = (element) => {
     if (element.type === FormSection && element.props.type === "modal") {
         return true;
     }
-    if (element.type === FormStepper || element.type === FormStepperButtons || element.type === Banner || element.type === FormLayoutTitle || element.type === FormLayoutSecondary) {
+    if (element.type === FormStepper ||
+        element.type === FormStepperButtons ||
+        element.type === Banner ||
+        element.type === FormLayoutTitle ||
+        element.type === FormLayoutSecondary) {
         return true;
     }
     return false;

package/esm/formSection/components/additionalSection.js

@@ -8,13 +8,13 @@ export const AdditionalSection = ({ children, className, title, titleOn, seconda
     const [opened, setOpened] = useState([]);
     const labelAlign = useLabelAlign();
     const id = useId();
-    const currentTitle = opened.includes(id) ? (titleOn || title) : title;
+    const currentTitle = opened.includes(id) ? titleOn || title : title;
     const mode = useMode();
     const accordionItems = useMemo(() => [
         {
             id,
             title: currentTitle,
-            content: _jsxs(_Fragment, { children: [secondary && _jsx("div", { className: "zen-additional-sub-section__secondary", children: secondary }), _jsx(FormSectionInner, { className: "zen-additional-sub-section__content", mode: mode, labelAlign: labelAlign, children: children })] })
+            content: (_jsxs(_Fragment, { children: [secondary && _jsx("div", { className: "zen-additional-sub-section__secondary", children: secondary }), _jsx(FormSectionInner, { className: "zen-additional-sub-section__content", mode: mode, labelAlign: labelAlign, children: children })] }))
         }
     ], [id, currentTitle, secondary, labelAlign, children, mode]);
     const switchAccordion = useCallback((itemId) => {

package/esm/formSection/components/formSectionCard.js

@@ -22,17 +22,18 @@ import { useError } from "../hooks/useError";
 import { FormLayoutTitle } from "../../formLayout/components/formLayoutTitle";
 export const FormSectionCard = (_a) => {
     var { labelAlign, header, children, className, title, mode, isError, isLoading, retry } = _a, cardProps = __rest(_a, ["labelAlign", "header", "children", "className", "title", "mode", "isError", "isLoading", "retry"]);
-    const actions = React.Children.toArray(children).filter((child) => child.type === FormSection.Actions);
-    const additional = React.Children.toArray(children).filter((child) => child.type === FormSection.Additional);
-    const content = React.Children.toArray(children).filter((child) => child.type !== FormSection.Actions && child.type !== FormSection.Additional);
-    const cardButtons = actions.length > 0 ? Children.toArray(actions[0].props.children)
-        .map((child, indx) => {
-        if (React.isValidElement(child) && child.type === FormSection.Button) {
-            const element = child;
-            return _jsx(CardButton, Object.assign({}, element.props), element.props.id || indx);
-        }
-        return child;
-    }) : [];
+    const actions = React.Children.toArray(children).filter(child => child.type === FormSection.Actions);
+    const additional = React.Children.toArray(children).filter(child => child.type === FormSection.Additional);
+    const content = React.Children.toArray(children).filter(child => child.type !== FormSection.Actions && child.type !== FormSection.Additional);
+    const cardButtons = actions.length > 0
+        ? Children.toArray(actions[0].props.children).map((child, indx) => {
+            if (React.isValidElement(child) && child.type === FormSection.Button) {
+                const element = child;
+                return _jsx(CardButton, Object.assign({}, element.props), element.props.id || indx);
+            }
+            return child;
+        })
+        : [];
     // TODO: tests
     // 1. if both loading and error is true
     // 2. loading only
@@ -42,5 +43,5 @@ export const FormSectionCard = (_a) => {
     const { error } = useError({ isError, isLoading, retry, type: "card" });
     const contentClasses = classNames(["zen-form-section-card-content", loadingContent ? "zen-form-section-card-content--loading" : ""]);
     // TODO: tests for header
-    return _jsxs(_Fragment, { children: [header && _jsx(FormLayoutTitle, { className: className, value: header || "" }), _jsxs(Card, Object.assign({ size: "L", autoHeight: true, title: title, className: className, cardContentClasses: contentClasses }, cardProps, { children: [actions.length > 0 && _jsx(Card.Actions, { children: cardButtons }), loadingContent || error || _jsxs(FormSectionInner, { mode: mode, labelAlign: labelAlign, children: [content, additional.length > 0 && _jsx(FormSectionInner.Additional, Object.assign({}, additional[0].props, { children: additional[0].props.children }))] })] }))] });
+    return (_jsxs(_Fragment, { children: [header && _jsx(FormLayoutTitle, { className: className, value: header || "" }), _jsxs(Card, Object.assign({ size: "L", autoHeight: true, title: title, className: className, cardContentClasses: contentClasses }, cardProps, { children: [actions.length > 0 && _jsx(Card.Actions, { children: cardButtons }), loadingContent || error || (_jsxs(FormSectionInner, { mode: mode, labelAlign: labelAlign, children: [content, additional.length > 0 && (_jsx(FormSectionInner.Additional, Object.assign({}, additional[0].props, { children: additional[0].props.children })))] }))] }))] }));
 };

package/esm/formSection/components/formSectionDefault.js

@@ -4,10 +4,11 @@ import { FormSection } from "../formSection";
 import { FormSectionDefaultTitle } from "./formSectionDefaultTitle";
 import { FormSectionInner } from "./formSectionInner";
 export const FormSectionDefault = ({ labelAlign, children, className, mode, type, title }) => {
-    const content = React.Children.toArray(children).filter((child) => child.type !== FormSection.Actions && child.type !== FormSection.Additional);
-    const additional = React.Children.toArray(children).filter((child) => child.type === FormSection.Additional);
-    return _jsxs(FormSectionInner, { type: type, labelAlign: labelAlign, className: className, mode: mode, children: [title && _jsx(FormSectionDefaultTitle, { grid: 1284, children: title }), content, additional.length > 0 && (() => {
-                const additionalProps = additional[0].props;
-                return _jsx(FormSectionInner.Additional, Object.assign({}, additionalProps, { children: additionalProps.children }));
-            })()] });
+    const content = React.Children.toArray(children).filter(child => child.type !== FormSection.Actions && child.type !== FormSection.Additional);
+    const additional = React.Children.toArray(children).filter(child => child.type === FormSection.Additional);
+    return (_jsxs(FormSectionInner, { type: type, labelAlign: labelAlign, className: className, mode: mode, children: [title && _jsx(FormSectionDefaultTitle, { grid: 1284, children: title }), content, additional.length > 0 &&
+                (() => {
+                    const additionalProps = additional[0].props;
+                    return _jsx(FormSectionInner.Additional, Object.assign({}, additionalProps, { children: additionalProps.children }));
+                })()] }));
 };

package/esm/formSection/components/formSectionDefaultTitle.js

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

package/esm/formSection/components/formSectionInner.js

@@ -49,7 +49,7 @@ export const FormSectionInner = (_a) => {
         tablet: columns === 1 ? 6 : 4,
         mobile: 4
     });
-    return _jsx(FormSectionProvider, { labelAlign: labelAlign, mode: mode, type: type, children: _jsx("div", { className: componentClassNames, children: childrenArr }) });
+    return (_jsx(FormSectionProvider, { labelAlign: labelAlign, mode: mode, type: type, children: _jsx("div", { className: componentClassNames, children: childrenArr }) }));
 };
 FormSectionInner.Additional = AdditionalSection;
 FormSectionInner.displayName = FORM_SECTION;

package/esm/formSection/components/formSectionModal.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal } from "../../modal/modal";
 import { FormSectionDefault } from "./formSectionDefault";
 // TODO: readonly mode?
-export const FormSectionModal = (props) => _jsxs(Modal, { className: "zen-form-section-modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, children: [_jsx(FormSectionDefault, { type: "modal", mode: props.mode, labelAlign: props.labelAlign, className: props.className, children: props.children }), _jsx(Modal.SecondaryButton, { onClick: props.onCancel, children: "Cancel" }), _jsx(Modal.PrimaryButton, { onClick: props.onConfirm, children: "Confirm" })] });
+export const FormSectionModal = (props) => (_jsxs(Modal, { className: "zen-form-section-modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, children: [_jsx(FormSectionDefault, { type: "modal", mode: props.mode, labelAlign: props.labelAlign, className: props.className, children: props.children }), _jsx(Modal.SecondaryButton, { onClick: props.onCancel, children: "Cancel" }), _jsx(Modal.PrimaryButton, { onClick: props.onConfirm, children: "Confirm" })] }));

package/esm/formSection/formSection.js

@@ -25,19 +25,20 @@ import { useLabelAlign } from "../formGroup/hooks/useLabelAlign";
 // TODO: separate component?
 // TODO: add exclusive interface
 // TODO: better types for 3 elements?
-// eslint-disable-next-line @typescript-eslint/naming-convention
+/* eslint-disable @typescript-eslint/naming-convention */
 export const FormSection = (props) => {
+    /* eslint-enable @typescript-eslint/naming-convention */
     const mode = useMode(props.mode);
     const type = useSectionType(props.type);
     const labelAlign = useLabelAlign(props.labelAlign);
     if (type === "card") {
         const _a = props, { className } = _a, cardProps = __rest(_a, ["className"]);
-        return _jsx(FormSectionCard, Object.assign({ mode: mode, labelAlign: labelAlign, className: className }, cardProps, { children: props.children }));
+        return (_jsx(FormSectionCard, Object.assign({ mode: mode, labelAlign: labelAlign, className: className }, cardProps, { children: props.children })));
     }
     if (isModalSection(props)) {
-        return _jsx(FormSectionModal, { type: "modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, labelAlign: labelAlign, className: props.className, onConfirm: props.onConfirm, onCancel: props.onCancel, mode: mode, children: props.children });
+        return (_jsx(FormSectionModal, { type: "modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, labelAlign: labelAlign, className: props.className, onConfirm: props.onConfirm, onCancel: props.onCancel, mode: mode, children: props.children }));
     }
-    return _jsx(FormSectionDefault, { mode: mode, title: props.title, labelAlign: labelAlign, className: props.className, children: props.children });
+    return (_jsx(FormSectionDefault, { mode: mode, title: props.title, labelAlign: labelAlign, className: props.className, children: props.children }));
 };
 FormSection.Actions = FormSectionActions;
 FormSection.Additional = FormSectionAdditional;

package/esm/formSection/hooks/useError.js

@@ -30,12 +30,61 @@ 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("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");
 injectString("en", "Failed to load section", "Failed to load section");
+injectString("es", "Failed to load section", "Failed to load section");
+injectString("fi-FI", "Failed to load section", "Failed to load section");
+injectString("fr", "Failed to load section", "Failed to load section");
+injectString("fr-FR", "Failed to load section", "Failed to load section");
+injectString("hu-HU", "Failed to load section", "Failed to load section");
+injectString("id", "Failed to load section", "Failed to load section");
+injectString("it", "Failed to load section", "Failed to load section");
+injectString("ja", "Failed to load section", "Failed to load section");
+injectString("ko-KR", "Failed to load section", "Failed to load section");
+injectString("ms", "Failed to load section", "Failed to load section");
+injectString("nb-NO", "Failed to load section", "Failed to load section");
+injectString("nl", "Failed to load section", "Failed to load section");
+injectString("pl", "Failed to load section", "Failed to load section");
+injectString("pt-BR", "Failed to load section", "Failed to load section");
 injectString("pt-PT", "Failed to load section", "Falha ao carregar a se\xE7\xE3o");
+injectString("sk-SK", "Failed to load section", "Failed to load section");
+injectString("sv", "Failed to load section", "Failed to load section");
+injectString("th", "Failed to load section", "Failed to load section");
+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("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.");
 injectString("en", "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("es", "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("fi-FI", "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("fr", "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("fr-FR", "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("hu-HU", "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("id", "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("it", "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("ja", "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("ko-KR", "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("ms", "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("nb-NO", "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("nl", "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("pl", "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("pt-BR", "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("pt-PT", "Please reload this section to try again. If the issue persists, contact Support.", "Por favor, recarregue esta se\xE7\xE3o para tentar novamente. Se o problema persistir, contacte o Suporte.");
+injectString("sk-SK", "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("sv", "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("th", "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("tr", "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-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.");
 export const useError = props => {
   const {
     translate