@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/formField/hooks/useError.js

@@ -1,45 +1,104 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { useFormField } from "../../commonHelpers/hooks/useFormField";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { FormFieldBanner } from "../components/formFieldBanner";
 import { hasErrorProps } from "../../commonHelpers/loading";
-export const useError = (props) => {
-    var _a, _b, _c, _d;
-    const errorId = useId();
-    const { fieldState } = useFormField(props.controller);
-    const { translate } = useLanguage();
-    if (hasErrorProps(props)) {
-        const action = props.retry ? {
-            text: translate("Reload"),
-            onClick: props.retry
-        } : undefined;
-        return {
-            id: errorId,
-            errorBanner: _jsx(FormFieldBanner, { multiline: false, action: action, type: "error", children: translate("Failed to load {0}").replace("{0}", props.bannerLabel || "") })
-        };
+injectString("cs", "Reload", "Na\u010D\xEDst znovu");
+injectString("da-DK", "Reload", "Genindl\xE6s");
+injectString("de", "Reload", "Neu laden");
+injectString("en", "Reload", "Reload");
+injectString("es", "Reload", "Volver a cargar");
+injectString("fi-FI", "Reload", "Ladata uudelleen");
+injectString("fr", "Reload", "Recharger");
+injectString("fr-FR", "Reload", "Actualiser");
+injectString("hu-HU", "Reload", "\xDAjrat\xF6lt\xE9s");
+injectString("id", "Reload", "Muat ulang");
+injectString("it", "Reload", "Ricarica");
+injectString("ja", "Reload", "\u518D\u8AAD\u8FBC");
+injectString("ko-KR", "Reload", "\uB2E4\uC2DC \uBD88\uB7EC\uC624\uAE30");
+injectString("ms", "Reload", "Muatkan semula");
+injectString("nb-NO", "Reload", "Last inn p\xE5 nytt");
+injectString("nl", "Reload", "Herladen");
+injectString("pl", "Reload", "Od\u015Bwie\u017C");
+injectString("pt-BR", "Reload", "Recarregar");
+injectString("sk-SK", "Reload", "Obnovi\u0165");
+injectString("sv", "Reload", "Ladda igen");
+injectString("th", "Reload", "\u0E42\u0E2B\u0E25\u0E14\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+injectString("tr", "Reload", "Yeniden y\xFCkle");
+injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
+injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
+injectString("en", "Failed to load {0}", "Failed to load {0}");
+injectString("cs", "This field is required.", "Toto pole je povinn\xE9.");
+injectString("da-DK", "This field is required.", "Dette felt er p\xE5kr\xE6vet.");
+injectString("de", "This field is required.", "Dieses Feld ist erforderlich.");
+injectString("en", "This field is required.", "This field is required.");
+injectString("es", "This field is required.", "Este campo es obligatorio.");
+injectString("fi-FI", "This field is required.", "T\xE4m\xE4 kentt\xE4 on pakollinen.");
+injectString("fr", "This field is required.", "Ce champ est obligatoire.");
+injectString("fr-FR", "This field is required.", "Ce champ est requis.");
+injectString("hu-HU", "This field is required.", "Ez a mez\u0151 k\xF6telez\u0151.");
+injectString("id", "This field is required.", "Bidang ini harus diisi.");
+injectString("it", "This field is required.", "Questo campo \xE8 obbligatorio.");
+injectString("ja", "This field is required.", "\u3053\u306E\u30D5\u30A3\u30FC\u30EB\u30C9\u306F\u5FC5\u9808\u3067\u3059\u3002");
+injectString("ko-KR", "This field is required.", "\uC774 \uD544\uB4DC\uB294 \uD544\uC218\uC785\uB2C8\uB2E4.");
+injectString("ms", "This field is required.", "Medan ini diperlukan.");
+injectString("nb-NO", "This field is required.", "Dette feltet er p\xE5krevd.");
+injectString("nl", "This field is required.", "Dit veld is verplicht.");
+injectString("pl", "This field is required.", "To pole jest wymagane.");
+injectString("pt-BR", "This field is required.", "Este campo \xE9 obrigat\xF3rio.");
+injectString("sk-SK", "This field is required.", "Toto pole je povinn\xE9.");
+injectString("sv", "This field is required.", "Det h\xE4r f\xE4ltet \xE4r obligatoriskt.");
+injectString("th", "This field is required.", "\u0E15\u0E49\u0E2D\u0E07\u0E43\u0E2A\u0E48\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E43\u0E19\u0E1F\u0E34\u0E25\u0E14\u0E4C\u0E19\u0E35\u0E49");
+injectString("tr", "This field is required.", "Bu alan zorunludur.");
+injectString("zh-Hans", "This field is required.", "\u8BE5\u5B57\u6BB5\u4E3A\u5FC5\u586B\u9879\u3002");
+injectString("zh-TW", "This field is required.", "\u6B64\u6B04\u4F4D\u70BA\u5FC5\u586B\u3002");
+export const useError = props => {
+  var _a, _b, _c, _d;
+  const errorId = useId();
+  const {
+    fieldState
+  } = useFormField(props.controller);
+  const {
+    translate
+  } = useLanguage();
+  if (hasErrorProps(props)) {
+    const action = props.retry ? {
+      text: translate("Reload"),
+      onClick: props.retry
+    } : undefined;
+    return {
+      id: errorId,
+      errorBanner: _jsx(FormFieldBanner, {
+        multiline: false,
+        action: action,
+        type: "error",
+        children: translate("Failed to load {0}").replace("{0}", props.bannerLabel || "")
+      })
+    };
+  }
+  if (!props.error && !((_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || props.isReadOnly) {
+    if (props.isReadOnly) {
+      return {
+        id: "",
+        error: null
+      };
     }
-    if ((!props.error && !((_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message)) || props.isReadOnly) {
-        if (props.isReadOnly) {
-            return {
-                id: "",
-                error: null
-            };
-        }
-        if (!((_b = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _b === void 0 ? void 0 : _b.message) && ((_c = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _c === void 0 ? void 0 : _c.type) === "required") {
-            return {
-                id: errorId,
-                error: translate("This field is required.")
-            };
-        }
-        return {
-            id: "",
-            error: null
-        };
+    if (!((_b = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _b === void 0 ? void 0 : _b.message) && ((_c = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _c === void 0 ? void 0 : _c.type) === "required") {
+      return {
+        id: errorId,
+        error: translate("This field is required.")
+      };
     }
-    const error = ((_d = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.error;
     return {
-        id: error ? errorId : "",
-        error
+      id: "",
+      error: null
     };
-};
+  }
+  const error = ((_d = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.error;
+  return {
+    id: error ? errorId : "",
+    error
+  };
+};

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

@@ -1,12 +1,72 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { IconCheckRadio } from "../../../icons/iconCheckRadio";
 import { IconCloseCircle } from "../../../icons/iconCloseCircle";
 import { Pill } from "../../../pill/pill";
 import { useLanguage } from "../../../utils/localization/useLanguage";
-export const ReviewListToggle = ({ value, className = "" }) => {
-    const { translate } = useLanguage();
-    const label = value ? translate("On") : translate("Off");
-    const icon = value ? IconCheckRadio : IconCloseCircle;
-    return _jsxs("div", { className: classNames([className, "zen-review-list-toggle"]), children: [label, _jsx(Pill, { type: "info", icon: icon })] });
-};
+injectString("cs", "On", "Zapnout");
+injectString("da-DK", "On", "P\xE5");
+injectString("de", "On", "Ein");
+injectString("en", "On", "On");
+injectString("es", "On", "Activar");
+injectString("fi-FI", "On", "P\xE4\xE4lle");
+injectString("fr", "On", "Activ\xE9");
+injectString("fr-FR", "On", "On");
+injectString("hu-HU", "On", "Bekapcsolva");
+injectString("id", "On", "Aktif");
+injectString("it", "On", "On");
+injectString("ja", "On", "\u30AA\u30F3");
+injectString("ko-KR", "On", "~\uC5D0");
+injectString("ms", "On", "Hidup");
+injectString("nb-NO", "On", "P\xE5");
+injectString("nl", "On", "Aan");
+injectString("pl", "On", "W\u0142.");
+injectString("pt-BR", "On", "Ativado");
+injectString("sk-SK", "On", "Zapnut\xE9");
+injectString("sv", "On", "P\xE5");
+injectString("th", "On", "\u0E40\u0E1B\u0E34\u0E14");
+injectString("tr", "On", "A\xE7\u0131k");
+injectString("zh-Hans", "On", "\u5F00\u542F");
+injectString("zh-TW", "On", "\u958B\u555F");
+injectString("cs", "Off", "Vypnout");
+injectString("da-DK", "Off", "Slukket");
+injectString("de", "Off", "Aus");
+injectString("en", "Off", "Off");
+injectString("es", "Off", "Desactivar");
+injectString("fi-FI", "Off", "Pois");
+injectString("fr", "Off", "D\xE9sactiv\xE9");
+injectString("fr-FR", "Off", "Off");
+injectString("hu-HU", "Off", "Kikapcsolva");
+injectString("id", "Off", "Nonaktif");
+injectString("it", "Off", "Off");
+injectString("ja", "Off", "\u30AA\u30D5");
+injectString("ko-KR", "Off", "\uB044\uB2E4");
+injectString("ms", "Off", "Mati");
+injectString("nb-NO", "Off", "Av");
+injectString("nl", "Off", "Uit");
+injectString("pl", "Off", "Wy\u0142.");
+injectString("pt-BR", "Off", "Desativado");
+injectString("sk-SK", "Off", "Vypnut\xE9");
+injectString("sv", "Off", "Av");
+injectString("th", "Off", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Off", "Kapal\u0131");
+injectString("zh-Hans", "Off", "\u5173\u95ED");
+injectString("zh-TW", "Off", "\u95DC\u9589");
+export const ReviewListToggle = ({
+  value,
+  className = ""
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const label = value ? translate("On") : translate("Off");
+  const icon = value ? IconCheckRadio : IconCloseCircle;
+  return _jsxs("div", {
+    className: classNames([className, "zen-review-list-toggle"]),
+    children: [label, _jsx(Pill, {
+      type: "info",
+      icon: icon
+    })]
+  });
+};

package/esm/formGroup/hooks/useToggle.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormGroupContext } from "../utils/formGroupProvider";
@@ -9,13 +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";
-export const useToggle = (result) => {
-    const { controller, toggle, onToggleChange } = useContext(FormGroupContext);
-    const { value = false } = useFormFieldValues(controller, { value: toggle, onChange: onToggleChange });
-    const hasToggle = (controller !== undefined) || (toggle !== undefined && onToggleChange !== undefined);
-    const mode = useMode();
-    const columns = useColumns();
-    const { translate } = useLanguage();
-    // TODO: accessibility: do we need id here?
-    return _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [hasToggle && _jsx(ListToggle, {}), hasToggle && !value && mode === "review" ? _jsx(ReviewTextControl, { secondary: true, className: classNames([getListClasses("left", columns, true)]), value: translate("Sub-options are not active.") }) : null, hasToggle && value ? result : value === undefined ? result : null] }), !hasToggle && result] });
-};
+injectString("en", "Sub-options are not active.", "Sub-options are not active.");
+export const useToggle = result => {
+  const {
+    controller,
+    toggle,
+    onToggleChange
+  } = useContext(FormGroupContext);
+  const {
+    value = false
+  } = useFormFieldValues(controller, {
+    value: toggle,
+    onChange: onToggleChange
+  });
+  const hasToggle = controller !== undefined || toggle !== undefined && onToggleChange !== undefined;
+  const mode = useMode();
+  const columns = useColumns();
+  const {
+    translate
+  } = useLanguage();
+  // TODO: accessibility: do we need id here?
+  return _jsxs(_Fragment, {
+    children: [_jsxs(_Fragment, {
+      children: [hasToggle && _jsx(ListToggle, {}), hasToggle && !value && mode === "review" ? _jsx(ReviewTextControl, {
+        secondary: true,
+        className: classNames([getListClasses("left", columns, true)]),
+        value: translate("Sub-options are not active.")
+      }) : null, hasToggle && value ? result : value === undefined ? result : null]
+    }), !hasToggle && result]
+  });
+};

package/esm/formGroup/utils/getControls.js

@@ -4,19 +4,20 @@ export const getControls = (elements) => {
     let control1;
     let control2;
     if ((_a = elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-        // TODO: better interface?
-        control1 = cloneElement(elements.control1.value, {
-            className: `zen-form-control ${elements.control1.className || ""}`,
+        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
-        });
+        })));
     }
     if ((_c = elements.control2) === null || _c === void 0 ? void 0 : _c.value) {
-        control2 = cloneElement(elements.control2.value, {
-            className: `zen-form-control ${elements.control2.className || ""}`,
+        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
-        });
+        })));
     }
     return { control1, control2 };
 };

package/esm/formLayout/hooks/useError.js

@@ -1,20 +1,55 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Banner } from "../../banner/banner";
 import { hasErrorProps } from "../../commonHelpers/loading";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const useError = (props) => {
-    const { translate } = useLanguage();
-    if (!hasErrorProps(props)) {
-        return {
-            error: null
-        };
-    }
-    const action = props.retry ? {
-        text: translate("Reload"),
-        onClick: props.retry
-    } : undefined;
+injectString("cs", "Reload", "Na\u010D\xEDst znovu");
+injectString("da-DK", "Reload", "Genindl\xE6s");
+injectString("de", "Reload", "Neu laden");
+injectString("en", "Reload", "Reload");
+injectString("es", "Reload", "Volver a cargar");
+injectString("fi-FI", "Reload", "Ladata uudelleen");
+injectString("fr", "Reload", "Recharger");
+injectString("fr-FR", "Reload", "Actualiser");
+injectString("hu-HU", "Reload", "\xDAjrat\xF6lt\xE9s");
+injectString("id", "Reload", "Muat ulang");
+injectString("it", "Reload", "Ricarica");
+injectString("ja", "Reload", "\u518D\u8AAD\u8FBC");
+injectString("ko-KR", "Reload", "\uB2E4\uC2DC \uBD88\uB7EC\uC624\uAE30");
+injectString("ms", "Reload", "Muatkan semula");
+injectString("nb-NO", "Reload", "Last inn p\xE5 nytt");
+injectString("nl", "Reload", "Herladen");
+injectString("pl", "Reload", "Od\u015Bwie\u017C");
+injectString("pt-BR", "Reload", "Recarregar");
+injectString("sk-SK", "Reload", "Obnovi\u0165");
+injectString("sv", "Reload", "Ladda igen");
+injectString("th", "Reload", "\u0E42\u0E2B\u0E25\u0E14\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+injectString("tr", "Reload", "Yeniden y\xFCkle");
+injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
+injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
+injectString("en", "Failed to load page", "Failed to load page");
+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.");
+export const useError = props => {
+  const {
+    translate
+  } = useLanguage();
+  if (!hasErrorProps(props)) {
     return {
-        // TODO: add translations
-        error: _jsx(Banner, { size: "XL", header: translate("Failed to load page"), action: action, type: "error", children: translate("Please refresh the page and try again. If the issue persists, contact Support.") })
+      error: null
     };
-};
+  }
+  const action = props.retry ? {
+    text: translate("Reload"),
+    onClick: props.retry
+  } : undefined;
+  return {
+    // TODO: add translations
+    error: _jsx(Banner, {
+      size: "XL",
+      header: translate("Failed to load page"),
+      action: action,
+      type: "error",
+      children: translate("Please refresh the page and try again. If the issue persists, contact Support.")
+    })
+  };
+};

package/esm/formLayout/hooks/useFormButtons.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Header } from "../../header/header";
@@ -6,30 +7,125 @@ import { ButtonType } from "../../button/buttonType";
 import { IconDisk } from "../../icons/iconDisk";
 import { IconClose } from "../../icons/iconClose";
 import { useLanguage } from "../../utils/localization/useLanguage";
+injectString("cs", "Save", "Ulo\u017Eit");
+injectString("da-DK", "Save", "Spare");
+injectString("de", "Save", "Speichern");
+injectString("en", "Save", "Save");
+injectString("es", "Save", "Guardar");
+injectString("fi-FI", "Save", "S\xE4\xE4st\xE4\xE4");
+injectString("fr", "Save", "Enregistrer");
+injectString("fr-FR", "Save", "Enregistrer");
+injectString("hu-HU", "Save", "Ment\xE9s");
+injectString("id", "Save", "Simpan");
+injectString("it", "Save", "Salvare");
+injectString("ja", "Save", "\u4FDD\u5B58");
+injectString("ko-KR", "Save", "\uC800\uC7A5");
+injectString("ms", "Save", "Simpan");
+injectString("nb-NO", "Save", "Lagre");
+injectString("nl", "Save", "Opslaan");
+injectString("pl", "Save", "Zapisz");
+injectString("pt-BR", "Save", "Salvar");
+injectString("sk-SK", "Save", "Ulo\u017Ei\u0165");
+injectString("sv", "Save", "Spara");
+injectString("th", "Save", "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01");
+injectString("tr", "Save", "Kaydet");
+injectString("zh-Hans", "Save", "\u4FDD\u5B58");
+injectString("zh-TW", "Save", "\u5132\u5B58");
+injectString("cs", "Edit", "Upravit");
+injectString("da-DK", "Edit", "Rediger");
+injectString("de", "Edit", "Bearbeiten");
+injectString("en", "Edit", "Edit");
+injectString("es", "Edit", "Editar");
+injectString("fi-FI", "Edit", "Muokkaa");
+injectString("fr", "Edit", "Modifier");
+injectString("fr-FR", "Edit", "Modifier");
+injectString("hu-HU", "Edit", "Szerkeszd meg.");
+injectString("id", "Edit", "Edit");
+injectString("it", "Edit", "Modifica");
+injectString("ja", "Edit", "\u7DE8\u96C6");
+injectString("ko-KR", "Edit", "\uD3B8\uC9D1");
+injectString("ms", "Edit", "Edit");
+injectString("nb-NO", "Edit", "Rediger");
+injectString("nl", "Edit", "Bewerken");
+injectString("pl", "Edit", "Edytuj");
+injectString("pt-BR", "Edit", "Editar");
+injectString("sk-SK", "Edit", "Uprav.");
+injectString("sv", "Edit", "Redigera");
+injectString("th", "Edit", "\u0E41\u0E01\u0E49\u0E44\u0E02");
+injectString("tr", "Edit", "D\xFCzenle");
+injectString("zh-Hans", "Edit", "\u7F16\u8F91");
+injectString("zh-TW", "Edit", "\u7DE8\u8F2F");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 export const useFormButtons = (props = {}) => {
-    const { onSave, onEdit, onCancel } = props;
-    const [mode, setMode] = useState(props.mode || "review");
-    const isReview = mode === "review";
-    const { translate } = useLanguage();
-    const saveButton = useMemo(() => _jsx(Header.Button, { important: true, icon: IconDisk, title: translate("Save"), onClick: (...args) => {
-            onSave === null || onSave === void 0 ? void 0 : onSave(...args);
-            setMode("review");
-        }, id: "form-save", type: ButtonType.Primary }, "form-save"), [onSave, translate]);
-    const editButton = useMemo(() => _jsx(Header.Button, { important: true, icon: IconEdit, title: translate("Edit"), onClick: () => {
-            onEdit === null || onEdit === void 0 ? void 0 : onEdit();
-            setMode("edit");
-        }, id: "form-edit", type: ButtonType.Primary }, "form-edit"), [onEdit, translate]);
-    const cancelButton = useMemo(() => _jsx(Header.Button, { important: true, icon: IconClose, title: translate("Cancel"), onClick: () => {
-            setMode("review");
-            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-        }, id: "form-cancel", type: ButtonType.Secondary }, "form-cancel"), [onCancel, translate]);
-    const buttons = useMemo(() => [
-        !isReview ? saveButton : null,
-        !isReview ? cancelButton : null,
-        isReview ? editButton : null
-    ].filter(el => !!el), [cancelButton, editButton, isReview, saveButton]);
-    return {
-        mode,
-        buttons
-    };
-};
+  const {
+    onSave,
+    onEdit,
+    onCancel
+  } = props;
+  const [mode, setMode] = useState(props.mode || "review");
+  const isReview = mode === "review";
+  const {
+    translate
+  } = useLanguage();
+  const saveButton = useMemo(() => _jsx(Header.Button, {
+    important: true,
+    icon: IconDisk,
+    title: translate("Save"),
+    onClick: (...args) => {
+      onSave === null || onSave === void 0 ? void 0 : onSave(...args);
+      setMode("review");
+    },
+    id: "form-save",
+    type: ButtonType.Primary
+  }, "form-save"), [onSave, translate]);
+  const editButton = useMemo(() => _jsx(Header.Button, {
+    important: true,
+    icon: IconEdit,
+    title: translate("Edit"),
+    onClick: () => {
+      onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+      setMode("edit");
+    },
+    id: "form-edit",
+    type: ButtonType.Primary
+  }, "form-edit"), [onEdit, translate]);
+  const cancelButton = useMemo(() => _jsx(Header.Button, {
+    important: true,
+    icon: IconClose,
+    title: translate("Cancel"),
+    onClick: () => {
+      setMode("review");
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    },
+    id: "form-cancel",
+    type: ButtonType.Secondary
+  }, "form-cancel"), [onCancel, translate]);
+  const buttons = useMemo(() => [!isReview ? saveButton : null, !isReview ? cancelButton : null, isReview ? editButton : null].filter(el => !!el), [cancelButton, editButton, isReview, saveButton]);
+  return {
+    mode,
+    buttons
+  };
+};

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", 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

@@ -35,7 +35,7 @@ export const FormSection = (props) => {
         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, 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 });
 };