@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -1,30 +1,212 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.AdvancedGroupsFilterFormSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "And", "A");
+injectString("da-DK", "And", "Og");
+injectString("de", "And", "Und");
+injectString("en", "And", "And");
+injectString("es", "And", "Y");
+injectString("fi-FI", "And", "Ja");
+injectString("fr", "And", "Et");
+injectString("fr-FR", "And", "Et");
+injectString("hu-HU", "And", "\xC9s");
+injectString("id", "And", "Dan");
+injectString("it", "And", "E");
+injectString("ja", "And", "\u3068");
+injectString("ko-KR", "And", "\uADF8\uB9AC\uACE0");
+injectString("ms", "And", "Dan");
+injectString("nb-NO", "And", "Og");
+injectString("nl", "And", "En");
+injectString("pl", "And", "Oraz");
+injectString("pt-BR", "And", "E");
+injectString("sk-SK", "And", "A");
+injectString("sv", "And", "Och");
+injectString("th", "And", "\u0E41\u0E25\u0E30");
+injectString("tr", "And", "Ve");
+injectString("zh-Hans", "And", "\u548C");
+injectString("zh-TW", "And", "\u548C");
+injectString("cs", "Or", "Nebo");
+injectString("da-DK", "Or", "Eller");
+injectString("de", "Or", "Oder");
+injectString("en", "Or", "Or");
+injectString("es", "Or", "O");
+injectString("fi-FI", "Or", "Tai");
+injectString("fr", "Or", "Ou");
+injectString("fr-FR", "Or", "Ou");
+injectString("hu-HU", "Or", "Vagy");
+injectString("id", "Or", "Atau");
+injectString("it", "Or", "O");
+injectString("ja", "Or", "\u307E\u305F\u306F");
+injectString("ko-KR", "Or", "\uB610\uB294");
+injectString("ms", "Or", "Atau");
+injectString("nb-NO", "Or", "Eller");
+injectString("nl", "Or", "Of");
+injectString("pl", "Or", "Lub");
+injectString("pt-BR", "Or", "Ou");
+injectString("sk-SK", "Or", "Alebo");
+injectString("sv", "Or", "Eller");
+injectString("th", "Or", "\u0E2B\u0E23\u0E37\u0E2D");
+injectString("tr", "Or", "Veya");
+injectString("zh-Hans", "Or", "\u6216");
+injectString("zh-TW", "Or", "\u6216");
+injectString("cs", "Operator", "Oper\xE1tor");
+injectString("da-DK", "Operator", "Operat\xF8r");
+injectString("de", "Operator", "Operator");
+injectString("en", "Operator", "Operator");
+injectString("es", "Operator", "Operador");
+injectString("fi-FI", "Operator", "Operaattori");
+injectString("fr", "Operator", "Op\xE9rateur");
+injectString("fr-FR", "Operator", "Op\xE9rateur");
+injectString("hu-HU", "Operator", "Oper\xE1tor");
+injectString("id", "Operator", "Operator");
+injectString("it", "Operator", "Operatore");
+injectString("ja", "Operator", "\u6F14\u7B97\u5B50");
+injectString("ko-KR", "Operator", "\uC5F0\uC0B0\uC790");
+injectString("ms", "Operator", "Pengendali");
+injectString("nb-NO", "Operator", "Operat\xF8r");
+injectString("nl", "Operator", "Operator");
+injectString("pl", "Operator", "Operator");
+injectString("pt-BR", "Operator", "Operador");
+injectString("sk-SK", "Operator", "Oper\xE1tor");
+injectString("sv", "Operator", "Operat\xF6r");
+injectString("th", "Operator", "\u0E15\u0E31\u0E27\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23");
+injectString("tr", "Operator", "Operat\xF6r");
+injectString("zh-Hans", "Operator", "\u64CD\u4F5C\u5458");
+injectString("zh-TW", "Operator", "\u904B\u7B97\u5B50");
+injectString("cs", "Groups", "Skupiny");
+injectString("da-DK", "Groups", "Grupper");
+injectString("de", "Groups", "Gruppen");
+injectString("en", "Groups", "Groups");
+injectString("es", "Groups", "Grupos");
+injectString("fi-FI", "Groups", "Ryhm\xE4t");
+injectString("fr", "Groups", "Groupes");
+injectString("fr-FR", "Groups", "Groupes");
+injectString("hu-HU", "Groups", "Csoportok");
+injectString("id", "Groups", "Grup");
+injectString("it", "Groups", "Gruppi");
+injectString("ja", "Groups", "\u30B0\u30EB\u30FC\u30D7");
+injectString("ko-KR", "Groups", "\uADF8\uB8F9");
+injectString("ms", "Groups", "Kumpulan");
+injectString("nb-NO", "Groups", "Grupper");
+injectString("nl", "Groups", "Groepen");
+injectString("pl", "Groups", "Grupy");
+injectString("pt-BR", "Groups", "Grupos");
+injectString("sk-SK", "Groups", "Skupiny");
+injectString("sv", "Groups", "Grupper");
+injectString("th", "Groups", "\u0E01\u0E25\u0E38\u0E48\u0E21");
+injectString("tr", "Groups", "Gruplar");
+injectString("zh-Hans", "Groups", "\u7EC4");
+injectString("zh-TW", "Groups", "\u7FA4\u7D44");
+injectString("cs", "Remove condition", "Odebrat podm\xEDnku");
+injectString("da-DK", "Remove condition", "Fjern betingelse");
+injectString("de", "Remove condition", "Bedingung entfernen");
+injectString("en", "Remove condition", "Remove condition");
+injectString("es", "Remove condition", "Eliminar condici\xF3n");
+injectString("fi-FI", "Remove condition", "Poista ehto");
+injectString("fr", "Remove condition", "Supprimer la condition");
+injectString("fr-FR", "Remove condition", "Supprimer condition");
+injectString("hu-HU", "Remove condition", "T\xE1vol\xEDtsd el a felt\xE9telt.");
+injectString("id", "Remove condition", "Hapus kondisi");
+injectString("it", "Remove condition", "Rimuovere condizione");
+injectString("ja", "Remove condition", "\u6761\u4EF6\u3092\u524A\u9664");
+injectString("ko-KR", "Remove condition", "\uC870\uAC74 \uC81C\uAC70");
+injectString("ms", "Remove condition", "Alih keluar syarat");
+injectString("nb-NO", "Remove condition", "Fjern betingelse");
+injectString("nl", "Remove condition", "Voorwaarde verwijderen");
+injectString("pl", "Remove condition", "Usu\u0144 warunek");
+injectString("pt-BR", "Remove condition", "Remover condi\xE7\xE3o");
+injectString("sk-SK", "Remove condition", "Zru\u0161 podmienku.");
+injectString("sv", "Remove condition", "Ta bort villkor");
+injectString("th", "Remove condition", "\u0E25\u0E1A\u0E40\u0E07\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E02");
+injectString("tr", "Remove condition", "Ko\u015Fulu kald\u0131r");
+injectString("zh-Hans", "Remove condition", "\u5220\u9664\u6761\u4EF6");
+injectString("zh-TW", "Remove condition", "\u79FB\u9664\u689D\u4EF6");
+injectString("cs", "Select groups\u2026", "Vybrat skupiny\u2026");
+injectString("da-DK", "Select groups\u2026", "V\xE6lg grupper...");
+injectString("de", "Select groups\u2026", "Gruppen ausw\xE4hlen\xA0\u2026");
+injectString("en", "Select groups\u2026", "Select groups\u2026");
+injectString("es", "Select groups\u2026", "Seleccionar grupos\u2026");
+injectString("fi-FI", "Select groups\u2026", "Valitse ryhm\xE4t...");
+injectString("fr", "Select groups\u2026", "S\xE9lectionner des groupes\u2026");
+injectString("fr-FR", "Select groups\u2026", "S\xE9lectionner les groupes...");
+injectString("hu-HU", "Select groups\u2026", "V\xE1laszd ki a csoportokat\u2026");
+injectString("id", "Select groups\u2026", "Pilih grup\u2026");
+injectString("it", "Select groups\u2026", "Selezionare gruppi\u2026");
+injectString("ja", "Select groups\u2026", "\u30B0\u30EB\u30FC\u30D7\u3092\u9078\u629E\u2026");
+injectString("ko-KR", "Select groups\u2026", "\uADF8\uB8F9 \uC120\uD0DD\u2026");
+injectString("ms", "Select groups\u2026", "Pilih kumpulan\u2026");
+injectString("nb-NO", "Select groups\u2026", "Velg grupper...");
+injectString("nl", "Select groups\u2026", "Groepen selecteren\u2026");
+injectString("pl", "Select groups\u2026", "Wybierz grupy\u2026");
+injectString("pt-BR", "Select groups\u2026", "Selecionar grupos\u2026");
+injectString("sk-SK", "Select groups\u2026", "Vyber skupiny\u2026");
+injectString("sv", "Select groups\u2026", "V\xE4lj grupper\u2026");
+injectString("th", "Select groups\u2026", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E01\u0E25\u0E38\u0E48\u0E21\u2026");
+injectString("tr", "Select groups\u2026", "Gruplar\u0131 se\xE7\u2026");
+injectString("zh-Hans", "Select groups\u2026", "\u9009\u62E9\u7EC4\u2026");
+injectString("zh-TW", "Select groups\u2026", "\u9078\u53D6\u7FA4\u7D44...");
+injectString("cs", "GroupCompanyId", "Skupina spole\u010Dnosti");
+injectString("da-DK", "GroupCompanyId", "Virksomhedsgruppe");
+injectString("de", "GroupCompanyId", "Unternehmensgruppe");
+injectString("en", "GroupCompanyId", "Company group");
+injectString("es", "GroupCompanyId", "Grupo Compa\xF1\xEDa");
+injectString("fi-FI", "GroupCompanyId", "Yritysryhm\xE4");
+injectString("fr", "GroupCompanyId", "Groupe Entreprise");
+injectString("fr-FR", "GroupCompanyId", "Groupe Entreprise");
+injectString("hu-HU", "GroupCompanyId", "V\xE1llalatcsoport");
+injectString("id", "GroupCompanyId", "Grup perusahaan");
+injectString("it", "GroupCompanyId", "Gruppo aziendale");
+injectString("ja", "GroupCompanyId", "\u4F1A\u793E\u30B0\u30EB\u30FC\u30D7");
+injectString("ko-KR", "GroupCompanyId", "\uD68C\uC0AC \uADF8\uB8F9");
+injectString("ms", "GroupCompanyId", "Kumpulan syarikat");
+injectString("nb-NO", "GroupCompanyId", "Selskapsgruppen");
+injectString("nl", "GroupCompanyId", "Bedrijfsgroep");
+injectString("pl", "GroupCompanyId", "Grupa firmy");
+injectString("pt-BR", "GroupCompanyId", "Grupo da empresa");
+injectString("sk-SK", "GroupCompanyId", "Skupina spolo\u010Dnost\xED");
+injectString("sv", "GroupCompanyId", "F\xF6retagsgrupp");
+injectString("th", "GroupCompanyId", "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E1A\u0E23\u0E34\u0E29\u0E31\u0E17");
+injectString("tr", "GroupCompanyId", "\u015Eirket grubu");
+injectString("zh-Hans", "GroupCompanyId", "\u516C\u53F8\u7EC4");
+injectString("zh-TW", "GroupCompanyId", "\u516C\u53F8\u7FA4\u7D44");
 const react_1 = __importStar(require("react"));
 const groupButton_1 = require("../groupButton/groupButton");
 const groupsFilterInterfaces_1 = require("../groupsFilterRaw/groupsFilterInterfaces");
@@ -32,73 +214,156 @@ const advancedGroupsFilterSectionTooltip_1 = require("./advancedGroupsFilterSect
 const dropdown_1 = require("../dropdown/dropdown");
 const comboboxSelected_1 = require("../comboboxSelected/comboboxSelected");
 const advancedGroupsFilterHelper_1 = require("./advancedGroupsFilterHelper");
-const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const focusableSelector_1 = require("../utils/focusableSelector");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const AdvancedGroupsFilterFormSection = ({ state, interSectionRelation, itemId, onInterSectionChange, onRelationChange, onRemoveCondition, onStateChange, getData, errorHandler, dataItems, isHasRemoveConditionButton, isHasTooltip, tooltipText }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const inputItem = (0, react_1.useId)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const [currentSelection, setCurrentSelection] = react_1.default.useState((0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems));
-    const isPrevEmptyComboItems = (0, react_1.useRef)(dataItems.length === 0);
-    const comboboxRef = (0, react_1.useRef)(null);
-    const pillBoxRef = (0, react_1.useRef)(null);
-    const handleInterSectionRelationChange = () => {
-        onInterSectionChange(itemId);
-    };
-    const handleFocusOnRemove = (0, react_1.useCallback)((newSelectedFirstItem) => {
-        var _a, _b, _c;
-        if (newSelectedFirstItem) {
-            const pillBoxElement = (_a = pillBoxRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.zen-pill-box__pill[data-id="${newSelectedFirstItem}"]`);
-            const focusable = pillBoxElement ?
-                [...Array.from(pillBoxElement.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR))] : undefined;
-            (_b = focusable === null || focusable === void 0 ? void 0 : focusable[0]) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else {
-            const focusable = comboboxRef.current ? [...Array.from(comboboxRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR))] : undefined;
-            (_c = focusable === null || focusable === void 0 ? void 0 : focusable[0]) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-    }, []);
-    const handleRelationChange = () => {
-        onRelationChange(itemId);
-    };
-    const handleRemove = (item) => {
-        var _a;
-        const newValue = currentSelection.filter(el => el.id !== item);
-        setCurrentSelection(newValue);
-        onStateChange(itemId, newValue.map((el) => el.id));
-        handleFocusOnRemove((_a = newValue[0]) === null || _a === void 0 ? void 0 : _a.id);
-    };
-    const handleSelection = (newSelection) => {
-        setCurrentSelection(newSelection);
-        onStateChange(itemId, newSelection.map((el) => el.id));
-    };
-    (0, react_1.useEffect)(() => {
-        if (isPrevEmptyComboItems.current && dataItems.length > 0) {
-            isPrevEmptyComboItems.current = false;
-            setCurrentSelection((0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems));
-        }
-    }, [dataItems, state.items]);
-    return (0, jsx_runtime_1.jsxs)("li", { className: "zen-advanced-groups-filter-form__section", children: [interSectionRelation ? (0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__section", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__inter-section-switcher", children: (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, { onChange: handleInterSectionRelationChange, groupData: [
-                            { name: translate("And"), value: groupsFilterInterfaces_1.RelationOperator.AND, selected: interSectionRelation === groupsFilterInterfaces_1.RelationOperator.AND },
-                            { name: translate("Or"), value: groupsFilterInterfaces_1.RelationOperator.OR, selected: interSectionRelation === groupsFilterInterfaces_1.RelationOperator.OR }
-                        ] }) }) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__main-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--left", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-label zen-advanced-groups-filter-form__operator-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__operator-label", children: translate("Operator") }), isHasTooltip && (0, jsx_runtime_1.jsx)(advancedGroupsFilterSectionTooltip_1.AdvancedGroupsFilterSectionTooltip, { ariaLabel: "Information", text: tooltipText })] }), (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, { onChange: handleRelationChange, groupData: [
-                                    { name: translate("And"), value: groupsFilterInterfaces_1.RelationOperator.AND, selected: state.relation === groupsFilterInterfaces_1.RelationOperator.AND },
-                                    { name: translate("Or"), value: groupsFilterInterfaces_1.RelationOperator.OR, selected: state.relation === groupsFilterInterfaces_1.RelationOperator.OR }
-                                ] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right", children: [(0, jsx_runtime_1.jsx)("label", { className: "zen-advanced-groups-filter-form__section-label", children: translate("Groups") }), isHasRemoveConditionButton && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-advanced-groups-filter-form__remove-button", "data-item": itemId, onClick: onRemoveCondition, children: translate("Remove condition") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__combo-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__combo-box", ref: comboboxRef, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { classNamePopup: "zen-advanced-groups-filter-form__popup", getData: getData, mobileSheetStackingClassName: isMobile ? "zen-advanced-groups-filter-form__mobile-sheet-stacking" : undefined, errorHandler: errorHandler, dataItems: dataItems, onChange: handleSelection, value: state.items.map((el) => el.id), placeholder: translate("Select groups…"), inputId: `${inputItem}-dropdown-${itemId}`, showCounterPill: true }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__selected-box", ref: pillBoxRef, children: (0, jsx_runtime_1.jsx)(comboboxSelected_1.ComboboxSelected, { selection: (0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems).map((el) => ({ id: el.id, name: el.name })), onRemove: handleRemove, pillEmptyText: groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID }) })] })] })] })] });
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
+const AdvancedGroupsFilterFormSection = ({
+  state,
+  interSectionRelation,
+  itemId,
+  onInterSectionChange,
+  onRelationChange,
+  onRemoveCondition,
+  onStateChange,
+  getData,
+  errorHandler,
+  dataItems,
+  isHasRemoveConditionButton,
+  isHasTooltip,
+  tooltipText
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const inputItem = (0, react_1.useId)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const [currentSelection, setCurrentSelection] = react_1.default.useState((0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems).filter(el => el.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID));
+  const isPrevEmptyComboItems = (0, react_1.useRef)(dataItems.length === 0);
+  const comboboxRef = (0, react_1.useRef)(null);
+  const pillBoxRef = (0, react_1.useRef)(null);
+  const handleInterSectionRelationChange = () => {
+    onInterSectionChange(itemId);
+  };
+  const handleFocusOnRemove = (0, react_1.useCallback)(newSelectedFirstItem => {
+    var _a, _b, _c;
+    if (newSelectedFirstItem) {
+      const pillBoxElement = (_a = pillBoxRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.zen-pill-box__pill[data-id="${newSelectedFirstItem}"]`);
+      const focusable = pillBoxElement ? [...Array.from(pillBoxElement.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR))] : undefined;
+      (_b = focusable === null || focusable === void 0 ? void 0 : focusable[0]) === null || _b === void 0 ? void 0 : _b.focus();
+    } else {
+      const focusable = comboboxRef.current ? [...Array.from(comboboxRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR))] : undefined;
+      (_c = focusable === null || focusable === void 0 ? void 0 : focusable[0]) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+  }, []);
+  const handleRelationChange = () => {
+    onRelationChange(itemId);
+  };
+  const handleRemove = item => {
+    const newValue = currentSelection.filter(el => el.id !== item);
+    setCurrentSelection(newValue);
+    const newValues = newValue.length ? newValue.map(el => el.id) : [];
+    onStateChange(itemId, newValues);
+    handleFocusOnRemove(newValues[0]);
+  };
+  const handleSelection = newSelection => {
+    setCurrentSelection(newSelection);
+    const newValues = newSelection.length ? newSelection.map(el => el.id) : [];
+    onStateChange(itemId, newValues);
+  };
+  (0, react_1.useEffect)(() => {
+    if (isPrevEmptyComboItems.current && dataItems.length > 0) {
+      isPrevEmptyComboItems.current = false;
+      setCurrentSelection((0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems));
+    }
+  }, [dataItems, state.items]);
+  return (0, jsx_runtime_1.jsxs)("li", {
+    className: "zen-advanced-groups-filter-form__section",
+    children: [interSectionRelation ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-advanced-groups-filter-form__section",
+      children: (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-advanced-groups-filter-form__inter-section-switcher",
+        children: (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, {
+          onChange: handleInterSectionRelationChange,
+          groupData: [{
+            name: translate("And"),
+            value: groupsFilterInterfaces_1.RelationOperator.AND,
+            selected: interSectionRelation === groupsFilterInterfaces_1.RelationOperator.AND
+          }, {
+            name: translate("Or"),
+            value: groupsFilterInterfaces_1.RelationOperator.OR,
+            selected: interSectionRelation === groupsFilterInterfaces_1.RelationOperator.OR
+          }]
+        })
+      })
+    }) : null, (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-advanced-groups-filter-form__main-section",
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--left",
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-advanced-groups-filter-form__section-label zen-advanced-groups-filter-form__operator-section",
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-advanced-groups-filter-form__operator-label",
+            children: translate("Operator")
+          }), isHasTooltip && (0, jsx_runtime_1.jsx)(advancedGroupsFilterSectionTooltip_1.AdvancedGroupsFilterSectionTooltip, {
+            text: tooltipText
+          })]
+        }), (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, {
+          onChange: handleRelationChange,
+          groupData: [{
+            name: translate("And"),
+            value: groupsFilterInterfaces_1.RelationOperator.AND,
+            selected: state.relation === groupsFilterInterfaces_1.RelationOperator.AND
+          }, {
+            name: translate("Or"),
+            value: groupsFilterInterfaces_1.RelationOperator.OR,
+            selected: state.relation === groupsFilterInterfaces_1.RelationOperator.OR
+          }]
+        })]
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right",
+        children: [(0, jsx_runtime_1.jsx)("label", {
+          className: "zen-advanced-groups-filter-form__section-label",
+          children: translate("Groups")
+        }), isHasRemoveConditionButton && (0, jsx_runtime_1.jsx)("button", {
+          type: "button",
+          className: "zen-advanced-groups-filter-form__remove-button",
+          "data-item": itemId,
+          onClick: onRemoveCondition,
+          children: translate("Remove condition")
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-advanced-groups-filter-form__combo-section",
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-advanced-groups-filter-form__combo-box",
+            ref: comboboxRef,
+            children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+              classNamePopup: "zen-advanced-groups-filter-form__popup",
+              getData: getData,
+              mobileSheetStackingClassName: isMobile ? "zen-advanced-groups-filter-form__mobile-sheet-stacking" : undefined,
+              errorHandler: errorHandler,
+              dataItems: dataItems,
+              onChange: handleSelection,
+              value: state.items.filter(el => el.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID).map(el => el.id),
+              placeholder: translate("Select groups…"),
+              inputId: `${inputItem}-dropdown-${itemId}`,
+              showCounterPill: true
+            })
+          }), (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-advanced-groups-filter-form__selected-box",
+            ref: pillBoxRef,
+            children: (0, jsx_runtime_1.jsx)(comboboxSelected_1.ComboboxSelected, {
+              selection: (0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems).map(el => ({
+                id: el.id,
+                name: el.name
+              })),
+              onRemove: handleRemove,
+              pillEmptyText: translate("GroupCompanyId")
+            })
+          })]
+        })]
+      })]
+    })]
+  });
 };
 exports.AdvancedGroupsFilterFormSection = AdvancedGroupsFilterFormSection;
-exports.TRANSLATIONS = [
-    ...advancedGroupsFilterSectionTooltip_1.TRANSLATIONS,
-    ...dropdown_1.TRANSLATIONS,
-    ...comboboxSelected_1.TRANSLATIONS,
-    "Operator",
-    "Information",
-    "Groups",
-    "Remove condition",
-    "Remove selection",
-    "Select groups…",
-    "And",
-    "Or"
-];
+exports.TRANSLATIONS = [...advancedGroupsFilterSectionTooltip_1.TRANSLATIONS, ...dropdown_1.TRANSLATIONS, ...comboboxSelected_1.TRANSLATIONS, "Operator", "Information", "Groups", "Remove condition", "Remove selection", "Select groups…", "And", "Or"];

package/dist/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.d.ts

@@ -7,7 +7,6 @@ interface IAdvancedGroupsFilterSectionTooltip {
     size?: TooltipSize;
     alignment?: TAlignment;
     text?: string;
-    ariaLabel: string;
 }
 export declare const AdvancedGroupsFilterSectionTooltip: FC<IAdvancedGroupsFilterSectionTooltip>;
 export declare const TRANSLATIONS: string[];

package/dist/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.js

@@ -1,19 +1,93 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.AdvancedGroupsFilterSectionTooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tooltip_1 = require("../tooltip/tooltip");
+injectString("cs", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "P\u0159i hled\xE1n\xED konkr\xE9tn\xED skupiny pou\u017Eijte v\xEDce oper\xE1tor\u016F. Nap\u0159\xEDklad p\u0159i filtrov\xE1n\xED prost\u0159edk\u016F, kter\xE9 spadaj\xED do skupiny Traktory, skupina Toronto zobraz\xED seznam traktor\u016F, kter\xE9 pat\u0159\xED do pobo\u010Dky v Torontu.");
+injectString("da-DK", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Brug flere operatorer, n\xE5r du s\xF8ger efter en bestemt gruppe. Hvis du f.eks. filtrerer efter aktiver, der tilh\xF8rer gruppen Traktor og Toronto-gruppen, vises en liste over traktorer, der tilh\xF8rer Toronto-grenen.");
+injectString("de", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Verwenden Sie mehrere Operatoren, wenn Sie nach einer bestimmten Gruppe suchen. Benutzen Sie beispielsweise bei der Suche nach Assets die Gruppenfilter \u201ETraktor\u201C und \u201EToronto\u201C, wird eine Liste mit allen Traktoren f\xFCr den Standort Toronto angezeigt.");
+injectString("en", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Use multiple Operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.");
+injectString("es", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Utilice varios operadores cuando busque un grupo espec\xEDfico. Por ejemplo, al fltrar por activos que pertenecen al grupo Tractor y al grupo Toronto se muestra una lista de tractores que pertenecen a la sucursal de Toronto.");
+injectString("fi-FI", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "K\xE4yt\xE4 useita operaattoreita, kun etsit tietty\xE4 ryhm\xE4\xE4. Esimerkiksi traktoriryhm\xE4\xE4n ja Toronto-ryhm\xE4\xE4n kuuluvien varojen suodattaminen n\xE4ytt\xE4\xE4 luettelon traktoreista, jotka kuuluvat Toronto-sivuliikkeeseen.");
+injectString("fr", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Utilisez plusieurs op\xE9rateurs lors de la recherche d\u2019un groupe sp\xE9cifique. Par exemple, le filtrage des actifs appartenant au groupe Tracteur et au groupe Toronto affiche une liste des tracteurs appartenant \xE0 la succursale de Toronto.");
+injectString("fr-FR", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Utilisez plusieurs op\xE9rateurs lors de la recherche d\u2019un groupe sp\xE9cifique. Par exemple, filtrer des actifs appartenant au groupe Tracteurs et au groupe Toronto affiche une liste des tracteurs appartenant \xE0 la branche de Toronto.");
+injectString("hu-HU", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Haszn\xE1lj t\xF6bb oper\xE1tort, amikor egy adott csoportot keresel. P\xE9ld\xE1ul, ha a Traktor \xE9s a Toront\xF3i csoporthoz tartoz\xF3 eszk\xF6z\xF6kre sz\u0171rsz, akkor a Toront\xF3i fi\xF3khoz tartoz\xF3 traktorok list\xE1ja jelenik meg.");
+injectString("id", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Gunakan beberapa Operator saat mencari grup tertentu. Contohnya, memfilter aset yang termasuk dalam grup Traktor dan grup Toronto akan menampilkan daftar traktor yang termasuk dalam cabang Toronto.");
+injectString("it", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Utilizzare pi\xF9 operatori durante la ricerca di un gruppo specifico. Ad esempio, filtrando per asset appartenenti al gruppo Trattore e Toronto, viene visualizzato un elenco di trattori appartenenti alla filiale di Toronto.");
+injectString("ja", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\u7279\u5B9A\u306E\u30B0\u30EB\u30FC\u30D7\u3092\u691C\u7D22\u3059\u308B\u3068\u304D\u306F\u3001\u8907\u6570\u306E\u6F14\u7B97\u5B50\u3092\u4F7F\u7528\u3057\u307E\u3059\u3002\u4F8B\u3048\u3070\u3001Tractor \u30B0\u30EB\u30FC\u30D7\u3068 Toronto \u30B0\u30EB\u30FC\u30D7\u306B\u5C5E\u3059\u308B\u30A2\u30BB\u30C3\u30C8\u3092\u30D5\u30A3\u30EB\u30BF\u30EA\u30F3\u30B0\u3059\u308B\u3068\u3001Toronto \u652F\u5E97\u306B\u5C5E\u3059\u308B\u30C8\u30E9\u30AF\u30BF\u30FC\u306E\u30EA\u30B9\u30C8\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002");
+injectString("ko-KR", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\uD2B9\uC815 \uADF8\uB8F9\uC744 \uAC80\uC0C9\uD560 \uB54C\uB294 \uC5EC\uB7EC \uC5F0\uC0B0\uC790\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4. \uC608\uB97C \uB4E4\uC5B4, \uD2B8\uB799\uD130 \uADF8\uB8F9\uACFC \uD1A0\uB860\uD1A0 \uADF8\uB8F9\uC5D0 \uC18D\uD55C \uC790\uC0B0\uC744 \uD544\uD130\uB9C1\uD558\uBA74 \uD1A0\uB860\uD1A0 \uC9C0\uC810\uC5D0 \uC18D\uD55C \uD2B8\uB799\uD130 \uBAA9\uB85D\uC774 \uD45C\uC2DC\uB429\uB2C8\uB2E4.");
+injectString("ms", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Gunakan berbilang Operator apabila mencari kumpulan khusus. Contohnya, penyaringan untuk aset yang dimiliki kumpulan Traktor dan kumpulan Toronto memaparkan senarai traktor yang dimiliki oleh cawangan Toronto.");
+injectString("nb-NO", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Bruk flere operat\xF8rer n\xE5r du s\xF8ker etter en bestemt gruppe. Hvis du for eksempel filtrerer for eiendeler som tilh\xF8rer traktorgruppen og Toronto-gruppen, vises en liste over traktorer som tilh\xF8rer Toronto-grenen.");
+injectString("nl", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Gebruik meerdere opties bij het zoeken naar een specifieke groep. Als u bijvoorbeeld filtert op assets die behoren tot de tractorgroep en de Toronto-groep, wordt een lijst weergegeven met tractoren die tot de Toronto-tak behoren.");
+injectString("pl", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "U\u017Cyj wielu operator\xF3w podczas wyszukiwania okre\u015Blonej grupy. Na przyk\u0142ad filtrowanie zasob\xF3w nale\u017C\u0105cych do grupy Ci\u0105gnik i grupy Toronto wy\u015Bwietla list\u0119 ci\u0105gnik\xF3w nale\u017C\u0105cych do oddzia\u0142u w Toronto.");
+injectString("pt-BR", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Use v\xE1rios operadores para pesquisar um grupo espec\xEDfico. Por exemplo, a filtragem por ativos que pertencem ao grupo Tratores e ao grupo Toronto exibe uma lista de tratores que pertencem \xE0 divis\xE3o de Toronto.");
+injectString("sk-SK", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Pri h\u013Eadan\xED konkr\xE9tnej skupiny pou\u017Ei viacero oper\xE1torov. Napr\xEDklad filtrovanie akt\xEDv, ktor\xE9 patria do skupiny Traktory a skupiny Toronto, zobraz\xED zoznam traktorov, ktor\xE9 patria do pobo\u010Dky Toronto.");
+injectString("sv", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Anv\xE4nd flera operat\xF6rer n\xE4r du s\xF6ker efter en viss grupp. Om du till exempel filtrerar efter tillg\xE5ngar som tillh\xF6r gruppen \"Dragbilar\" och gruppen \"Toronto\" visas en lista med dragbilar som tillh\xF6r lokalkontoret i Toronto.");
+injectString("th", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\u0E43\u0E0A\u0E49\u0E15\u0E31\u0E27\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E2B\u0E25\u0E32\u0E22\u0E15\u0E31\u0E27\u0E40\u0E21\u0E37\u0E48\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E09\u0E1E\u0E32\u0E30 \u0E15\u0E31\u0E27\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E40\u0E0A\u0E48\u0E19 \u0E01\u0E32\u0E23\u0E01\u0E23\u0E2D\u0E07\u0E2A\u0E33\u0E2B\u0E23\u0E31\u0E1A\u0E2A\u0E34\u0E19\u0E17\u0E23\u0E31\u0E1E\u0E22\u0E4C\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E43\u0E19\u0E01\u0E25\u0E38\u0E48\u0E21\u0E23\u0E16\u0E41\u0E17\u0E23\u0E01\u0E40\u0E15\u0E2D\u0E23\u0E4C\u0E41\u0E25\u0E30\u0E01\u0E25\u0E38\u0E48\u0E21\u0E42\u0E17\u0E23\u0E2D\u0E19\u0E42\u0E15\u0E08\u0E30\u0E41\u0E2A\u0E14\u0E07\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E23\u0E16\u0E41\u0E17\u0E23\u0E01\u0E40\u0E15\u0E2D\u0E23\u0E4C\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E43\u0E19\u0E2A\u0E32\u0E02\u0E32\u0E42\u0E17\u0E23\u0E2D\u0E19\u0E42\u0E15");
+injectString("tr", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Belirli bir grubu ararken birden \xE7ok operat\xF6r kullan\u0131n. \xD6rne\u011Fin, Trakt\xF6r grubuna ve Toronto grubuna ait varl\u0131klar i\xE7in filtreleme yap\u0131l\u0131rken Toronto \u015Fubesine ait trakt\xF6rlerin listesi g\xF6r\xFCnt\xFClenir.");
+injectString("zh-Hans", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\u641C\u7D22\u7279\u5B9A\u7EC4\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u591A\u4E2A\u8FD0\u7B97\u7B26\u3002\u4F8B\u5982\uFF0C\u7B5B\u9009\u5C5E\u4E8E\u201C\u7275\u5F15\u8F66\u201D\u7EC4\u548C\u201C\u591A\u4F26\u591A\u201D\u7EC4\u7684\u8D44\u4EA7\uFF0C\u5C31\u4F1A\u663E\u793A\u5C5E\u4E8E\u591A\u4F26\u591A\u5206\u652F\u7684\u7275\u5F15\u8F66\u5217\u8868\u3002");
+injectString("zh-TW", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\u641C\u5C0B\u7279\u5B9A\u7FA4\u7D44\u6642\uFF0C\u8ACB\u4F7F\u7528\u591A\u500B\u904B\u7B97\u5B50\u3002\u4F8B\u5982\uFF0C\u82E5\u7BE9\u9078\u5C6C\u65BC\u727D\u5F15\u6A5F\u7FA4\u7D44\u548C\u591A\u502B\u591A\u7FA4\u7D44\u7684\u8CC7\u7522\uFF0C\u5247\u6703\u986F\u793A\u5C6C\u65BC\u591A\u502B\u591A\u5206\u516C\u53F8\u7684\u727D\u5F15\u6A5F\u6E05\u55AE\u3002");
+injectString("cs", "Information", "Informace");
+injectString("da-DK", "Information", "Information");
+injectString("de", "Information", "Information");
+injectString("en", "Information", "Information");
+injectString("es", "Information", "Informaci\xF3n");
+injectString("fi-FI", "Information", "Tiedot");
+injectString("fr", "Information", "Renseignements");
+injectString("fr-FR", "Information", "Informations");
+injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
+injectString("id", "Information", "Informasi");
+injectString("it", "Information", "Informazioni");
+injectString("ja", "Information", "\u60C5\u5831");
+injectString("ko-KR", "Information", "\uC815\uBCF4");
+injectString("ms", "Information", "Maklumat");
+injectString("nb-NO", "Information", "Informasjon");
+injectString("nl", "Information", "Informatie");
+injectString("pl", "Information", "Informacje");
+injectString("pt-BR", "Information", "Informa\xE7\xF5es");
+injectString("sk-SK", "Information", "Inform\xE1cie");
+injectString("sv", "Information", "Information");
+injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "Information", "Bilgi");
+injectString("zh-Hans", "Information", "\u4FE1\u606F");
+injectString("zh-TW", "Information", "\u8CC7\u8A0A");
 const iconInfoCircle_1 = require("../icons/iconInfoCircle");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const AdvancedGroupsFilterSectionTooltip = ({ ariaLabel, className = "", size = "auto", alignment = "top", text }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const triggerRef = (0, react_1.useRef)(null);
-    const defaultTooltipText = "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.";
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { className: (0, classNames_1.classNames)(["zen-advanced-groups-filter-section-tooltip__item", className || ""]), size: size, alignment: alignment, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": translate(ariaLabel), className: "zen-advanced-groups-filter-section-tooltip__trigger", ref: triggerRef, children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, { className: "zen-advanced-groups-filter-section-tooltip__trigger-icon", size: "large" }) }), children: text || translate(defaultTooltipText) }));
+const AdvancedGroupsFilterSectionTooltip = ({
+  className = "",
+  size = "auto",
+  alignment = "top",
+  text
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const triggerRef = (0, react_1.useRef)(null);
+  const defaultTooltipText = translate("Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.");
+  return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+    className: (0, classNames_1.classNames)(["zen-advanced-groups-filter-section-tooltip__item", className || ""]),
+    size: size,
+    alignment: alignment,
+    trigger: (0, jsx_runtime_1.jsx)("button", {
+      type: "button",
+      "aria-label": translate("Information"),
+      className: "zen-advanced-groups-filter-section-tooltip__trigger",
+      ref: triggerRef,
+      children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, {
+        className: "zen-advanced-groups-filter-section-tooltip__trigger-icon",
+        size: "large"
+      })
+    }),
+    children: text || defaultTooltipText
+  });
 };
 exports.AdvancedGroupsFilterSectionTooltip = AdvancedGroupsFilterSectionTooltip;
-exports.TRANSLATIONS = [
-    "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch."
-];
+exports.TRANSLATIONS = ["Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch."];