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

package/esm/groupsFilterRaw/groupsFilterTestData.d.ts

@@ -1,4 +1,4 @@
-import { ITypedHash } from "./groupsFilterInterfaces";
+import { IGroupTree } from "./groupsFilterInterfaces";
 export declare const groupsArr: ({
     id: string;
     name: string;
@@ -34,4 +34,157 @@ export declare const groupsArrAdvanced: ({
     name: string;
     children?: undefined;
 })[];
-export declare const groupsMap: ITypedHash<unknown>;
+export declare const groupsMap: {
+    ChildA: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildB: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildC: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildD: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildE: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    GroupCompanyId: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+};
+export declare const groupsMapDropdown: {
+    ChildA: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildB: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildC: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildD: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    ChildE: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    GroupCompanyId: {
+        id: string;
+        name: string;
+        color: {
+            a: number;
+            b: number;
+            g: number;
+            r: number;
+        };
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    zen_dropdown_root_group_id: {
+        id: string;
+        name: string;
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+};

package/esm/groupsFilterRaw/groupsFilterTestData.js

@@ -1,5 +1,7 @@
+import { ROOT_GROUP_ID } from "../dropdownRaw/stateReducer/stateReducer";
+import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilter/groupsHelper";
 export const groupsArr = [
-    { id: "GroupCompanyId", name: "Company", children: [{ id: "ChildA" }, { id: "ChildB" }], color: { a: 255, b: 0, g: 165, r: 255 } },
+    { id: ENTIRE_ORGANIZATION_GROUP_ID, name: "Company", children: [{ id: "ChildA" }, { id: "ChildB" }], color: { a: 255, b: 0, g: 165, r: 255 } },
     { id: "ChildA", name: "A element", children: [{ id: "ChildC" }, { id: "ChildE" }], color: { a: 255, b: 255, g: 165, r: 0 } },
     { id: "ChildB", name: "B element", children: [], color: { a: 255, b: 165, g: 255, r: 0 } },
     { id: "ChildC", name: "C element", children: [{ id: "ChildD" }], color: { a: 255, b: 165, g: 100, r: 200 } },
@@ -7,67 +9,160 @@ export const groupsArr = [
     { id: "ChildE", name: "E element", children: undefined, color: { a: 135, b: 200, g: 100, r: 40 } }
 ];
 export const groupsArrAdvanced = [
-    { id: "GroupCompanyId", name: "Company", children: [{ id: "ChildA", name: "A element" }, { id: "ChildB", name: "B element" }] },
+    { id: ENTIRE_ORGANIZATION_GROUP_ID, name: "Company", children: [{ id: "ChildA", name: "A element" }, { id: "ChildB", name: "B element" }] },
     { id: "ChildA", name: "A element", children: [{ id: "ChildC", name: "C element" }, { id: "ChildE", name: "E element" }] },
     { id: "ChildB", name: "B element" },
     { id: "ChildC", name: "C element", children: [{ id: "ChildD", name: "D element" }] },
     { id: "ChildD", name: "D element" },
     { id: "ChildE", name: "E element" }
 ];
+const childA0 = {
+    id: "ChildA",
+    name: "A element",
+    color: { a: 255, b: 255, g: 165, r: 0 },
+    parent: undefined,
+    children: []
+};
+const childB0 = {
+    id: "ChildB",
+    name: "B element",
+    color: { a: 255, b: 165, g: 255, r: 0 },
+    parent: undefined,
+    children: []
+};
+const childC0 = {
+    id: "ChildC",
+    name: "C element",
+    color: { a: 255, b: 165, g: 100, r: 200 },
+    parent: undefined,
+    children: []
+};
+const childD0 = {
+    id: "ChildD",
+    name: "D element",
+    color: { a: 255, b: 110, g: 100, r: 240 },
+    parent: undefined,
+    children: []
+};
+const childE0 = {
+    id: "ChildE",
+    name: "E element",
+    color: { a: 135, b: 200, g: 100, r: 40 },
+    parent: undefined,
+    children: []
+};
+const rootNode0 = {
+    id: "root",
+    name: "",
+    parent: undefined,
+    children: []
+};
+const groupCompany0 = {
+    id: ENTIRE_ORGANIZATION_GROUP_ID,
+    name: "Company",
+    color: { a: 255, b: 0, g: 165, r: 255 },
+    parent: undefined,
+    children: []
+};
+rootNode0.children = [groupCompany0];
+// Company -> A, B
+groupCompany0.children = [childA0, childB0];
+// Child A -> C, E
+childA0.children = [childC0, childE0];
+// Child C -> D
+childC0.children = [childD0];
+// Setting parents
+groupCompany0.parent = rootNode0;
+childD0.parent = childC0;
+childA0.parent = groupCompany0;
+childB0.parent = groupCompany0;
+childC0.parent = childA0;
+childE0.parent = childA0;
 export const groupsMap = {
-    GroupCompanyId: {
-        id: "GroupCompanyId",
-        name: "Company",
-        color: { a: 255, b: 0, g: 165, r: 255 },
-        children: [{ id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 },
-                        children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined,
-                                parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] } }],
-                        parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } },
-                    { id: "ChildE", name: "E element", color: { a: 135, b: 200, g: 100, r: 40 }, children: undefined, parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] }
-            }, { id: "ChildB", name: "B element", color: { a: 255, b: 165, g: 255, r: 0 },
-                children: [], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] } }],
-        parent: { id: "root", name: "", parent: undefined,
-            children: [{ id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, parent: undefined, children: [
-                        { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined, parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] } }],
-                                    parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } },
-                                { id: "ChildE", name: "E element", color: { a: 135, b: 200, g: 100, r: 40 }, children: undefined,
-                                    parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] } },
-                        { id: "ChildB", name: "B element", color: { a: 255, b: 165, g: 255, r: 0 }, children: [], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] } }
-                    ] }]
-        }
-    },
-    ChildA: {
-        id: "ChildA",
-        name: "A element",
-        color: { a: 255, b: 255, g: 165, r: 0 },
-        children: [{ id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 },
-                children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined,
-                        parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] }
-                    }],
-                parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }, { id: "ChildE", name: "E element",
-                color: { a: 135, b: 200, g: 100, r: 40 }, children: undefined,
-                parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }],
-        parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] }
-    },
-    ChildB: { id: "ChildB", name: "B element",
-        color: { a: 255, b: 165, g: 255, r: 0 },
-        children: [],
-        parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] }
-    },
-    ChildC: { id: "ChildC", name: "C element",
-        color: { a: 255, b: 165, g: 100, r: 200 },
-        children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined,
-                parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] } }],
-        parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] }
-    },
-    ChildD: { id: "ChildD", name: "D element",
-        color: { a: 255, b: 110, g: 100, r: 240 },
-        children: undefined,
-        parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] }
-    },
-    ChildE: { id: "ChildE", name: "E element",
-        color: { a: 135, b: 200, g: 100, r: 40 },
-        children: undefined,
-        parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] }
-    }
+    ChildA: childA0,
+    ChildB: childB0,
+    ChildC: childC0,
+    ChildD: childD0,
+    ChildE: childE0,
+    [ENTIRE_ORGANIZATION_GROUP_ID]: groupCompany0
+};
+const rootNode = {
+    id: "root",
+    name: "",
+    parent: undefined,
+    children: []
+};
+const zenDropdownRootGroup = {
+    id: ROOT_GROUP_ID,
+    name: "",
+    parent: undefined,
+    children: []
+};
+const groupCompany = {
+    id: ENTIRE_ORGANIZATION_GROUP_ID,
+    name: "Company",
+    color: { a: 255, b: 0, g: 165, r: 255 },
+    parent: undefined,
+    children: []
+};
+const childA = {
+    id: "ChildA",
+    name: "A element",
+    color: { a: 255, b: 255, g: 165, r: 0 },
+    parent: undefined,
+    children: []
+};
+const childB = {
+    id: "ChildB",
+    name: "B element",
+    color: { a: 255, b: 165, g: 255, r: 0 },
+    parent: undefined,
+    children: []
+};
+const childC = {
+    id: "ChildC",
+    name: "C element",
+    color: { a: 255, b: 165, g: 100, r: 200 },
+    parent: undefined,
+    children: []
+};
+const childD = {
+    id: "ChildD",
+    name: "D element",
+    color: { a: 255, b: 110, g: 100, r: 240 },
+    parent: undefined,
+    children: []
+};
+const childE = {
+    id: "ChildE",
+    name: "E element",
+    color: { a: 135, b: 200, g: 100, r: 40 },
+    parent: undefined,
+    children: []
+};
+rootNode.children = [zenDropdownRootGroup];
+// Zen Group -> Company
+zenDropdownRootGroup.children = [groupCompany];
+// Company -> A, B
+groupCompany.children = [childA, childB];
+// Child A -> C, E
+childA.children = [childC, childE];
+// Child C -> D
+childC.children = [childD];
+// Setting parents
+zenDropdownRootGroup.parent = rootNode;
+childD.parent = childC;
+groupCompany.parent = zenDropdownRootGroup;
+childA.parent = groupCompany;
+childB.parent = groupCompany;
+childC.parent = childA;
+childE.parent = childA;
+export const groupsMapDropdown = {
+    ChildA: childA,
+    ChildB: childB,
+    ChildC: childC,
+    ChildD: childD,
+    ChildE: childE,
+    [ENTIRE_ORGANIZATION_GROUP_ID]: groupCompany,
+    [ROOT_GROUP_ID]: zenDropdownRootGroup
 };

package/esm/groupsFilterRaw/groupsFilterTrigger.js

@@ -1,13 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { injectString } from "../utils/localization/translationsDictionary";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
@@ -16,29 +14,130 @@ import { GroupsFilterLabelBox } from "./groupsFilterLabelBox";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { useLanguage } from "../utils/localization/useLanguage";
-export const GroupsFilterTrigger = (_a) => {
-    var { value, className = "", onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError"]);
-    const { translate } = useLanguage();
-    const groupsFilterId = useId();
-    const handleKeydown = (e) => {
-        if (e.key === "Enter" && !isOpenPopup) {
-            handleClick();
-        }
-        if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
-            e.nativeEvent.stopImmediatePropagation();
-            handleClick();
-        }
-    };
-    const clickHandler = (e) => {
-        if (e.target === inputRef.current && isOpenPopup) {
-            return;
-        }
-        handleClick();
-    };
-    return _jsxs("div", Object.assign({ className: classNames(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [_jsxs("div", { className: classNames(["zen-groups-filter__search-container", isError ? "zen-groups-filter__search-container--error" : "", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [_jsx("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: classNames(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), _jsx("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: _jsx(GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), _jsx("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: classNames(["zen-groups-filter__popup-trigger", isError ? "zen-groups-filter__popup-trigger--error" : ""]), title: translate("Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
+injectString("cs", "Filter by group", "Filtrovat podle skupiny");
+injectString("da-DK", "Filter by group", "Filtrer efter gruppe");
+injectString("de", "Filter by group", "Nach Gruppe filtern");
+injectString("en", "Filter by group", "Filter by group");
+injectString("es", "Filter by group", "Filtrar por grupo");
+injectString("fi-FI", "Filter by group", "Suodata ryhm\xE4n mukaan");
+injectString("fr", "Filter by group", "Filtrer par groupe");
+injectString("fr-FR", "Filter by group", "Filtrer par groupe");
+injectString("hu-HU", "Filter by group", "Sz\u0171rd csoport alapj\xE1n.");
+injectString("id", "Filter by group", "Filter berdasarkan grup");
+injectString("it", "Filter by group", "Filtrare per gruppo");
+injectString("ja", "Filter by group", "\u30B0\u30EB\u30FC\u30D7\u306B\u3088\u308B\u30D5\u30A3\u30EB\u30BF\u30EA\u30F3\u30B0");
+injectString("ko-KR", "Filter by group", "\uADF8\uB8F9\uBCC4 \uD544\uD130\uB9C1");
+injectString("ms", "Filter by group", "Saring mengikut kumpulan");
+injectString("nb-NO", "Filter by group", "Filtrer etter gruppe");
+injectString("nl", "Filter by group", "Filteren op groep");
+injectString("pl", "Filter by group", "Filtruj wed\u0142ug grupy");
+injectString("pt-BR", "Filter by group", "Filtrar por grupo");
+injectString("sk-SK", "Filter by group", "Filtrova\u0165 pod\u013Ea skupiny");
+injectString("sv", "Filter by group", "Filtrera efter grupp");
+injectString("th", "Filter by group", "\u0E01\u0E23\u0E2D\u0E07\u0E15\u0E32\u0E21\u0E01\u0E25\u0E38\u0E48\u0E21");
+injectString("tr", "Filter by group", "Gruba g\xF6re filtrele");
+injectString("zh-Hans", "Filter by group", "\u6309\u7EC4\u8FC7\u6EE4");
+injectString("zh-TW", "Filter by group", "\u4F9D\u7FA4\u7D44\u7BE9\u9078");
+injectString("cs", "Open filter", "Otev\u0159\xEDt filtr");
+injectString("da-DK", "Open filter", "\xC5bn filter");
+injectString("de", "Open filter", "Filter \xF6ffnen");
+injectString("en", "Open filter", "Open filter");
+injectString("es", "Open filter", "Abrir filtro");
+injectString("fi-FI", "Open filter", "Avaa suodatin");
+injectString("fr", "Open filter", "Ouvrir le filtre");
+injectString("fr-FR", "Open filter", "Ouvrir le filtre");
+injectString("hu-HU", "Open filter", "Nyisd meg a sz\u0171r\u0151t.");
+injectString("id", "Open filter", "Buka filter");
+injectString("it", "Open filter", "Aprire filtro");
+injectString("ja", "Open filter", "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u958B\u304F");
+injectString("ko-KR", "Open filter", "\uD544\uD130 \uC5F4\uAE30");
+injectString("ms", "Open filter", "Buka penyaring");
+injectString("nb-NO", "Open filter", "\xC5pne filter");
+injectString("nl", "Open filter", "Filter openen");
+injectString("pl", "Open filter", "Otw\xF3rz filtr");
+injectString("pt-BR", "Open filter", "Abrir filtro");
+injectString("sk-SK", "Open filter", "Otvori filter.");
+injectString("sv", "Open filter", "\xD6ppna filter");
+injectString("th", "Open filter", "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07");
+injectString("tr", "Open filter", "Filtreyi a\xE7");
+injectString("zh-Hans", "Open filter", "\u6253\u5F00\u7B5B\u9009\u5668");
+injectString("zh-TW", "Open filter", "\u958B\u555F\u7BE9\u9078\u689D\u4EF6");
+export const GroupsFilterTrigger = _a => {
+  var {
+      value,
+      className = "",
+      onChange,
+      placeholder,
+      isOpenPopup,
+      count,
+      withGlobeIcon,
+      inputRef,
+      handleClick,
+      fullSize,
+      ref,
+      isError
+    } = _a,
+    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError"]);
+  const {
+    translate
+  } = useLanguage();
+  const groupsFilterId = useId();
+  const handleKeydown = e => {
+    if (e.key === "Enter" && !isOpenPopup) {
+      handleClick();
+    }
+    if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
+      e.nativeEvent.stopImmediatePropagation();
+      handleClick();
+    }
+  };
+  const clickHandler = e => {
+    if (e.target === inputRef.current && isOpenPopup) {
+      return;
+    }
+    handleClick();
+  };
+  return _jsxs("div", Object.assign({
+    className: classNames(["zen-groups-filter"]),
+    ref: ref
+  }, otherProps, {
+    onClick: clickHandler,
+    role: "combobox",
+    children: [_jsxs("div", {
+      className: classNames(["zen-groups-filter__search-container", isError ? "zen-groups-filter__search-container--error" : "", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]),
+      children: [_jsx("div", {
+        className: "zen-groups-filter__input-container",
+        onKeyDown: handleKeydown,
+        children: _jsx(TextInputRaw, {
+          value: value,
+          placeholder: placeholder || translate("Filter by group"),
+          className: classNames(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]),
+          onChange: onChange,
+          disabled: false,
+          type: "text",
+          ref: inputRef,
+          id: groupsFilterId
+        })
+      }), _jsx("div", {
+        className: "zen-groups-filter__search-input zen-groups-filter__search-input--post",
+        children: _jsx(GroupsFilterLabelBox, {
+          count: count,
+          withGlobeIcon: withGlobeIcon
+        })
+      })]
+    }), _jsx("button", {
+      tabIndex: -1,
+      onMouseDown: e => e.preventDefault(),
+      "aria-hidden": "true",
+      type: "button",
+      className: classNames(["zen-groups-filter__popup-trigger", isError ? "zen-groups-filter__popup-trigger--error" : ""]),
+      title: translate("Open filter"),
+      children: _jsx(IconChevronDownSmall, {
+        className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down",
+        size: "large"
+      })
+    })]
+  }));
 };
 GroupsFilterTrigger.displayName = "GroupsFilterTrigger";
-export const TRANSLATIONS = [
-    "Filter by group",
-    "Open filter"
-];
+export const TRANSLATIONS = ["Filter by group", "Open filter"];