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

package/README.md

@@ -40,6 +40,26 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.2.0
+
+**🎉 Form experience is here!**
+
+We're excited to announce a comprehensive set of components that allow you to create forms using Zenith in a simple and readable way!
+
+**New form layout components**
+
+`FormLayout`, `FormSection`, and `FormGroup` enable flexible form layouts while maintaining full compatibility with custom components. All form fields are now compatible with React Hook Form, making form state management seamless.
+
+**Significantly reduced bundle size**
+
+We've optimized how built-in translations are injected into the source code. This improvement saves approximately 300KB in your app bundle size, as components now include only the translation strings they actually use.
+
+Change log:
+
+* New form experience components (`FormLayout`, `FormSection`, `FormGroup`)
+* Optimized translation injection in Zenith (reduces bundle size by ~300KB)
+* Improved detecting root group in tree-structured data in `Dropdown`
+
 ### 3.1.0
 
 **🎉 Introducing the Beta `Filters` Component**

package/dist/advancedGroupsFilter/advancedGroupsFilter.js

@@ -1,42 +1,148 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.AdvancedGroupsFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+injectString("cs", "Advanced groups filter", "Roz\u0161\xED\u0159en\xFD filtr skupin");
+injectString("da-DK", "Advanced groups filter", "Avanceret grupperfilter");
+injectString("de", "Advanced groups filter", "Erweiterte Gruppenfilter");
+injectString("en", "Advanced groups filter", "Advanced groups filter");
+injectString("es", "Advanced groups filter", "Filtro de grupos avanzado");
+injectString("fi-FI", "Advanced groups filter", "Kehittynyt ryhm\xE4suodatin");
+injectString("fr", "Advanced groups filter", "Filtre de groupes avanc\xE9");
+injectString("fr-FR", "Advanced groups filter", "Filtre avanc\xE9 des groupes");
+injectString("hu-HU", "Advanced groups filter", "Halad\xF3 csoportsz\u0171r\xE9s");
+injectString("id", "Advanced groups filter", "Filter grup lanjutan");
+injectString("it", "Advanced groups filter", "Filtro gruppi avanzato");
+injectString("ja", "Advanced groups filter", "\u9AD8\u5EA6\u306A\u30B0\u30EB\u30FC\u30D7\u30D5\u30A3\u30EB\u30BF\u30FC");
+injectString("ko-KR", "Advanced groups filter", "\uACE0\uAE09 \uADF8\uB8F9 \uD544\uD130");
+injectString("ms", "Advanced groups filter", "Penyaring kumpulan lanjutan");
+injectString("nb-NO", "Advanced groups filter", "Avanserte grupperfilter.");
+injectString("nl", "Advanced groups filter", "Geavanceerde groepenfilter");
+injectString("pl", "Advanced groups filter", "Zaawansowane filtry dla grup");
+injectString("pt-BR", "Advanced groups filter", "Filtro avan\xE7ado de grupos");
+injectString("sk-SK", "Advanced groups filter", "Pokro\u010Dil\xFD filter skup\xEDn.");
+injectString("sv", "Advanced groups filter", "Avancerade gruppfilter");
+injectString("th", "Advanced groups filter", "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E01\u0E25\u0E38\u0E48\u0E21\u0E02\u0E31\u0E49\u0E19\u0E2A\u0E39\u0E07");
+injectString("tr", "Advanced groups filter", "Geli\u015Fmi\u015F grup filtresi");
+injectString("zh-Hans", "Advanced groups filter", "\u9AD8\u7EA7\u7EC4\u7B5B\u9009\u5668");
+injectString("zh-TW", "Advanced groups filter", "\u9032\u968E\u7FA4\u7D44\u7BE9\u9078");
+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");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
 const advancedGroupsFilterFormHelper_1 = require("./advancedGroupsFilterFormHelper");
 const advancedGroupsFilterForm_1 = require("./advancedGroupsFilterForm");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const modal_1 = require("../modal/modal");
-const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getData, errorHandler, dataItems, tooltipText, isMobile }) => {
-    //const dropdownFocusedListClasses = ["zen-dropdown-searchable-trigger__input", "zen-dropdown-searchable-trigger__popup-trigger"];
-    const [currentState, setCurrentState] = (0, react_1.useState)((0, advancedGroupsFilterFormHelper_1.prepareCurrentFilterState)(state));
-    const [dataItemsValue, setDataItemsValue] = (0, react_1.useState)(dataItems || []);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const handleClose = () => {
-        onClose();
-    };
-    (0, react_1.useEffect)(() => {
-        const timeoutId = setTimeout(() => {
-            if (!dataItemsValue.length) {
-                getData().then((data) => {
-                    setDataItemsValue(data);
-                }).catch((e) => {
-                    errorHandler(e);
-                });
-            }
+const AdvancedGroupsFilter = ({
+  isOpen,
+  onClose,
+  onApply,
+  state,
+  className,
+  getData,
+  errorHandler,
+  dataItems,
+  tooltipText,
+  isMobile
+}) => {
+  //const dropdownFocusedListClasses = ["zen-dropdown-searchable-trigger__input", "zen-dropdown-searchable-trigger__popup-trigger"];
+  const [currentState, setCurrentState] = (0, react_1.useState)((0, advancedGroupsFilterFormHelper_1.prepareCurrentFilterState)(state));
+  const [dataItemsValue, setDataItemsValue] = (0, react_1.useState)(dataItems || []);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const handleClose = () => {
+    onClose();
+  };
+  (0, react_1.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      if (!dataItemsValue.length) {
+        getData().then(data => {
+          setDataItemsValue(data);
+        }).catch(e => {
+          errorHandler(e);
         });
-        return () => clearTimeout(timeoutId);
-    }, [getData, errorHandler, dataItemsValue.length]);
-    const handleApply = () => {
-        onApply((0, advancedGroupsFilterFormHelper_1.prepareToFilterState)(currentState));
-    };
-    return (0, jsx_runtime_1.jsxs)(modal_1.Modal, { title: translate("Advanced groups filter"), className: (0, classNames_1.classNames)(["zen-advanced-groups-filter", className || ""]), isOpen: isOpen, modalContainerClassName: isMobile ? "zen-advanced-groups-filter-prioritized-modal" : undefined, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(advancedGroupsFilterForm_1.AdvancedGroupsFilterForm, { dataItems: dataItemsValue, getData: getData, errorHandler: errorHandler, state: currentState, onStateChange: setCurrentState, tooltipText: tooltipText }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: onClose, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApply, children: translate("Apply") })] });
+      }
+    });
+    return () => clearTimeout(timeoutId);
+  }, [getData, errorHandler, dataItemsValue.length]);
+  const handleApply = () => {
+    onApply((0, advancedGroupsFilterFormHelper_1.prepareToFilterState)(currentState));
+  };
+  return (0, jsx_runtime_1.jsxs)(modal_1.Modal, {
+    title: translate("Advanced groups filter"),
+    className: (0, classNames_1.classNames)(["zen-advanced-groups-filter", className || ""]),
+    isOpen: isOpen,
+    modalContainerClassName: isMobile ? "zen-advanced-groups-filter-prioritized-modal" : undefined,
+    onClose: handleClose,
+    children: [(0, jsx_runtime_1.jsx)(advancedGroupsFilterForm_1.AdvancedGroupsFilterForm, {
+      dataItems: dataItemsValue,
+      getData: getData,
+      errorHandler: errorHandler,
+      state: currentState,
+      onStateChange: setCurrentState,
+      tooltipText: tooltipText
+    }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, {
+      onClick: onClose,
+      children: translate("Cancel")
+    }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, {
+      onClick: handleApply,
+      children: translate("Apply")
+    })]
+  });
 };
 exports.AdvancedGroupsFilter = AdvancedGroupsFilter;
-exports.TRANSLATIONS = [
-    ...advancedGroupsFilterForm_1.TRANSLATIONS,
-    "Cancel",
-    "Apply",
-    "Advanced groups filter"
-];
+exports.TRANSLATIONS = [...advancedGroupsFilterForm_1.TRANSLATIONS, "Cancel", "Apply", "Advanced groups filter"];

package/dist/advancedGroupsFilter/advancedGroupsFilterForm.js

@@ -1,45 +1,150 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.AdvancedGroupsFilterForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Create conditions below to filter the entire system.", "N\xED\u017Ee vytvo\u0159te podm\xEDnky pro filtrov\xE1n\xED cel\xE9ho syst\xE9mu.");
+injectString("da-DK", "Create conditions below to filter the entire system.", "Lav de nedenst\xE5ende betingelser for at filtrere hele systemet.");
+injectString("de", "Create conditions below to filter the entire system.", "Erstellen Sie unten Bedingungen, um das gesamte System zu filtern.");
+injectString("en", "Create conditions below to filter the entire system.", "Create conditions below to filter the entire system.");
+injectString("es", "Create conditions below to filter the entire system.", "Cree condiciones a continuaci\xF3n para filtrar todo el sistema.");
+injectString("fi-FI", "Create conditions below to filter the entire system.", "Luo alla olevat ehdot suodattaaksesi koko j\xE4rjestelm\xE4n.");
+injectString("fr", "Create conditions below to filter the entire system.", "Cr\xE9er les conditions ci-dessous pour filtrer l\u2019ensemble du syst\xE8me.");
+injectString("fr-FR", "Create conditions below to filter the entire system.", "Cr\xE9er des conditions ci-dessous pour filtrer tout le syst\xE8me.");
+injectString("hu-HU", "Create conditions below to filter the entire system.", "Add meg az al\xE1bbi felt\xE9teleket, hogy az eg\xE9sz rendszert sz\u0171rd.");
+injectString("id", "Create conditions below to filter the entire system.", "Buat kondisi di bawah ini untuk memfilter seluruh sistem.");
+injectString("it", "Create conditions below to filter the entire system.", "Creare le seguenti condizioni per filtrare l'intero sistema.");
+injectString("ja", "Create conditions below to filter the entire system.", "\u30B7\u30B9\u30C6\u30E0\u5168\u4F53\u3092\u30D5\u30A3\u30EB\u30BF\u30EA\u30F3\u30B0\u3059\u308B\u306B\u306F\u3001\u4EE5\u4E0B\u306E\u6761\u4EF6\u3092\u4F5C\u6210\u3057\u307E\u3059\u3002");
+injectString("ko-KR", "Create conditions below to filter the entire system.", "\uC804\uCCB4 \uC2DC\uC2A4\uD15C\uC744 \uD544\uD130\uB9C1\uD558\uB824\uBA74 \uC544\uB798\uC5D0 \uC870\uAC74\uC744 \uB9CC\uB4ED\uB2C8\uB2E4.");
+injectString("ms", "Create conditions below to filter the entire system.", "Cipta syarat di bawah untuk menyaring keseluruhan sistem.");
+injectString("nb-NO", "Create conditions below to filter the entire system.", "Opprett betingelser nedenfor for \xE5 filtrere hele systemet.");
+injectString("nl", "Create conditions below to filter the entire system.", "Maak hieronder voorwaarden om het hele systeem te filteren.");
+injectString("pl", "Create conditions below to filter the entire system.", "Utw\xF3rz warunki poni\u017Cej, aby zastosowa\u0107 filtry do ca\u0142ego systemu.");
+injectString("pt-BR", "Create conditions below to filter the entire system.", "Defina as condi\xE7\xF5es abaixo para filtrar todo o sistema.");
+injectString("sk-SK", "Create conditions below to filter the entire system.", "Vytvor ni\u017E\u0161ie podmienky na filtrovanie cel\xE9ho syst\xE9mu.");
+injectString("sv", "Create conditions below to filter the entire system.", "Skapa villkor nedan f\xF6r att filtrera hela systemet.");
+injectString("th", "Create conditions below to filter the entire system.", "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E40\u0E07\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E02\u0E14\u0E49\u0E32\u0E19\u0E25\u0E48\u0E32\u0E07\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E01\u0E23\u0E2D\u0E07\u0E17\u0E31\u0E49\u0E07\u0E23\u0E30\u0E1A\u0E1A");
+injectString("tr", "Create conditions below to filter the entire system.", "T\xFCm sistemi filtrelemek i\xE7in a\u015Fa\u011F\u0131daki ko\u015Fullar\u0131 olu\u015Fturun.");
+injectString("zh-Hans", "Create conditions below to filter the entire system.", "\u5728\u4E0B\u9762\u521B\u5EFA\u6761\u4EF6\u4EE5\u7B5B\u9009\u6574\u4E2A\u7CFB\u7EDF\u3002");
+injectString("zh-TW", "Create conditions below to filter the entire system.", "\u5728\u4E0B\u65B9\u5EFA\u7ACB\u689D\u4EF6\u4EE5\u7BE9\u9078\u6574\u500B\u7CFB\u7D71\u3002");
+injectString("cs", "Add new condition", "P\u0159idat novou podm\xEDnku");
+injectString("da-DK", "Add new condition", "Tilf\xF8j ny betingelse");
+injectString("de", "Add new condition", "Neue Bedingung hinzuf\xFCgen");
+injectString("en", "Add new condition", "Add new condition");
+injectString("es", "Add new condition", "A\xF1adir condici\xF3n nueva");
+injectString("fi-FI", "Add new condition", "Lis\xE4\xE4 uusi ehto");
+injectString("fr", "Add new condition", "Ajouter une nouvelle condition");
+injectString("fr-FR", "Add new condition", "Ajouter nouvelle condition");
+injectString("hu-HU", "Add new condition", "Adj hozz\xE1 egy \xFAj felt\xE9telt.");
+injectString("id", "Add new condition", "Tambah kondisi baru");
+injectString("it", "Add new condition", "Aggiungere nuova condizione");
+injectString("ja", "Add new condition", "\u65B0\u3057\u3044\u6761\u4EF6\u3092\u8FFD\u52A0");
+injectString("ko-KR", "Add new condition", "\uC0C8 \uC870\uAC74 \uCD94\uAC00");
+injectString("ms", "Add new condition", "Tambah syarat baharu");
+injectString("nb-NO", "Add new condition", "Legg til ny betingelse");
+injectString("nl", "Add new condition", "Nieuwe voorwaarde toevoegen");
+injectString("pl", "Add new condition", "Dodaj nowy warunek");
+injectString("pt-BR", "Add new condition", "Adicionar nova condi\xE7\xE3o");
+injectString("sk-SK", "Add new condition", "Pridaj nov\xFA podmienku.");
+injectString("sv", "Add new condition", "L\xE4gg till nytt villkor");
+injectString("th", "Add new condition", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E07\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E02\u0E43\u0E2B\u0E21\u0E48");
+injectString("tr", "Add new condition", "Yeni ko\u015Ful ekle");
+injectString("zh-Hans", "Add new condition", "\u6DFB\u52A0\u65B0\u6761\u4EF6");
+injectString("zh-TW", "Add new condition", "\u65B0\u589E\u689D\u4EF6");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const advancedGroupsFilterFormSection_1 = require("./advancedGroupsFilterFormSection");
 const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const groupsFilterInterfaces_1 = require("../groupsFilterRaw/groupsFilterInterfaces");
 const iconPlus_1 = require("../icons/iconPlus");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const AdvancedGroupsFilterForm = ({ state, onStateChange, getData, errorHandler, dataItems, tooltipText }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const handleAddNewCondition = () => {
-        onStateChange([...state, { sectionState: (0, groupsHelper_1.getDefaultFilterState)(), interSectionRelation: groupsFilterInterfaces_1.RelationOperator.OR }]);
-    };
-    const handleInterSectionRelationChange = (idx) => {
-        const newState = [...state.slice(0, idx), Object.assign(Object.assign({}, state[idx]), { interSectionRelation: state[idx].interSectionRelation === groupsFilterInterfaces_1.RelationOperator.OR ? groupsFilterInterfaces_1.RelationOperator.AND : groupsFilterInterfaces_1.RelationOperator.OR }), ...state.slice(idx + 1, state.length)];
-        onStateChange(newState);
-    };
-    const handleRelationChange = (ind) => {
-        const newState = [...state.slice(0, ind), Object.assign(Object.assign({}, state[ind]), { sectionState: Object.assign(Object.assign({}, state[ind].sectionState), { relation: state[ind].sectionState.relation === groupsFilterInterfaces_1.RelationOperator.OR ? groupsFilterInterfaces_1.RelationOperator.AND : groupsFilterInterfaces_1.RelationOperator.OR }) }), ...state.slice(ind + 1, state.length)];
-        onStateChange(newState);
-    };
-    const handleStateChange = (ind, value) => {
-        const newState = [...state.slice(0, ind), Object.assign(Object.assign({}, state[ind]), { sectionState: Object.assign(Object.assign({}, state[ind].sectionState), { items: value.map(el => ({ id: el })) }) }), ...state.slice(ind + 1, state.length)];
-        onStateChange(newState);
-    };
-    const handleRemoveCondition = (e) => {
-        if (state.length === 1) {
-            return;
-        }
-        const ind = e.target.dataset.item ? Number(e.target.dataset.item) : undefined;
-        const newState = ind !== undefined ? [...state.slice(0, ind),
-            ...state.slice(ind + 1, state.length)
-        ] : state;
-        onStateChange(newState);
-    };
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__description", children: translate("Create conditions below to filter the entire system.") }), (0, jsx_runtime_1.jsx)("ul", { className: "zen-advanced-groups-filter-form__sections", children: state.map((el, ind) => (0, jsx_runtime_1.jsx)(advancedGroupsFilterFormSection_1.AdvancedGroupsFilterFormSection, { state: el.sectionState, itemId: ind, interSectionRelation: ind === 0 || state.length === 1 ? undefined : state[ind].interSectionRelation, onInterSectionChange: handleInterSectionRelationChange, onRelationChange: handleRelationChange, onRemoveCondition: handleRemoveCondition, onStateChange: handleStateChange, isHasRemoveConditionButton: state.length > 1, isHasTooltip: ind === 0, tooltipText: tooltipText, getData: getData, errorHandler: errorHandler, dataItems: dataItems }, `form-section_ind-${ind}_${state.length}`)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-form__add-section", children: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-advanced-groups-filter-form__add-button", onClick: handleAddNewCondition, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", icon: iconPlus_1.IconPlus, children: translate("Add new condition") }) })] });
+const AdvancedGroupsFilterForm = ({
+  state,
+  onStateChange,
+  getData,
+  errorHandler,
+  dataItems,
+  tooltipText
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const handleAddNewCondition = () => {
+    onStateChange([...state, {
+      sectionState: (0, groupsHelper_1.getDefaultFilterState)(),
+      interSectionRelation: groupsFilterInterfaces_1.RelationOperator.OR
+    }]);
+  };
+  const handleInterSectionRelationChange = idx => {
+    const newState = [...state.slice(0, idx), Object.assign(Object.assign({}, state[idx]), {
+      interSectionRelation: state[idx].interSectionRelation === groupsFilterInterfaces_1.RelationOperator.OR ? groupsFilterInterfaces_1.RelationOperator.AND : groupsFilterInterfaces_1.RelationOperator.OR
+    }), ...state.slice(idx + 1, state.length)];
+    onStateChange(newState);
+  };
+  const handleRelationChange = ind => {
+    const newState = [...state.slice(0, ind), Object.assign(Object.assign({}, state[ind]), {
+      sectionState: Object.assign(Object.assign({}, state[ind].sectionState), {
+        relation: state[ind].sectionState.relation === groupsFilterInterfaces_1.RelationOperator.OR ? groupsFilterInterfaces_1.RelationOperator.AND : groupsFilterInterfaces_1.RelationOperator.OR
+      })
+    }), ...state.slice(ind + 1, state.length)];
+    onStateChange(newState);
+  };
+  const handleStateChange = (ind, value) => {
+    const newState = [...state.slice(0, ind), Object.assign(Object.assign({}, state[ind]), {
+      sectionState: Object.assign(Object.assign({}, state[ind].sectionState), {
+        items: value.map(el => ({
+          id: el
+        }))
+      })
+    }), ...state.slice(ind + 1, state.length)];
+    onStateChange(newState);
+  };
+  const handleRemoveCondition = e => {
+    if (state.length === 1) {
+      return;
+    }
+    const ind = e.target.dataset.item ? Number(e.target.dataset.item) : undefined;
+    const newState = ind !== undefined ? [...state.slice(0, ind), ...state.slice(ind + 1, state.length)] : state;
+    onStateChange(newState);
+  };
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-advanced-groups-filter-form",
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-advanced-groups-filter-form__description",
+      children: translate("Create conditions below to filter the entire system.")
+    }), (0, jsx_runtime_1.jsx)("ul", {
+      className: "zen-advanced-groups-filter-form__sections",
+      children: state.map((el, ind) => (0, jsx_runtime_1.jsx)(advancedGroupsFilterFormSection_1.AdvancedGroupsFilterFormSection, {
+        state: el.sectionState,
+        itemId: ind,
+        interSectionRelation: ind === 0 || state.length === 1 ? undefined : state[ind].interSectionRelation,
+        onInterSectionChange: handleInterSectionRelationChange,
+        onRelationChange: handleRelationChange,
+        onRemoveCondition: handleRemoveCondition,
+        onStateChange: handleStateChange,
+        isHasRemoveConditionButton: state.length > 1,
+        isHasTooltip: ind === 0,
+        tooltipText: tooltipText,
+        getData: getData,
+        errorHandler: errorHandler,
+        dataItems: dataItems
+      }, `form-section_ind-${ind}_${state.length}`))
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-form__add-section",
+      children: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+        className: "zen-advanced-groups-filter-form__add-button",
+        onClick: handleAddNewCondition,
+        iconPosition: textIconButton_1.ButtonIconPosition.Start,
+        iconSize: "large",
+        icon: iconPlus_1.IconPlus,
+        children: translate("Add new condition")
+      })
+    })]
+  });
 };
 exports.AdvancedGroupsFilterForm = AdvancedGroupsFilterForm;
-exports.TRANSLATIONS = [
-    ...advancedGroupsFilterFormSection_1.TRANSLATIONS,
-    "Create conditions below to filter the entire system.",
-    "Add new condition"
-];
+exports.TRANSLATIONS = [...advancedGroupsFilterFormSection_1.TRANSLATIONS, "Create conditions below to filter the entire system.", "Add new condition"];