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

package/esm/dropdownRaw/dropdownSearchableTrigger.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 { useContext, useId, useRef } from "react";
@@ -20,40 +18,214 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
 import { FormSectionContext } from "../formSection/utils/formSectionProvider";
 // eslint-disable-next-line complexity
-export const DropdownSearchableTrigger = (_a) => {
-    var { value, className = "", onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur"]);
-    const { isFormSection } = useContext(FormSectionContext);
-    const { translate } = useLanguage();
-    const triggerId = useId();
-    const driveComponentClass = useDriveClassName("zen-dropdown-searchable-trigger");
-    const isDrive = useDrive();
-    const inputStyle = width ? { style: { width: `${width}px` } } : {};
-    const isLargeNumber = count && count > 99;
-    const clearRef = useRef(null);
-    const handleKeydown = (e) => {
-        if (e.key === "Enter" && !isOpenPopup) {
-            handleClick(true);
-        }
-        if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
-            e.nativeEvent.stopImmediatePropagation();
-            handleClick(false);
-        }
-    };
-    const clickHandler = (e) => {
-        if (e.target === inputRef.current && isOpenPopup || e.target === clearRef.current && isOpenPopup) {
-            return;
-        }
-        handleClick(!isOpenPopup);
-    };
-    const handleClearSearch = () => {
-        onChange(undefined);
-    };
-    return _jsxs("div", Object.assign({ className: classNames(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "",
-            driveComponentClass || "", isFormSection ? "zen-dropdown-searchable-trigger--form-item" : "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""]) }, inputStyle, { ref: ref }, otherProps, { onClick: disabled ? () => { } : clickHandler, role: "combobox", "aria-label": placeholder, children: [_jsxs("div", { onBlur: onBlur, className: classNames(["zen-dropdown-searchable-trigger__search-container", className]), children: [_jsx("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: classNames(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]), onChange: onChange, disabled: disabled, type: "text", ref: inputRef, id: id || triggerId }) }), count ? _jsx("div", { className: "zen-dropdown-searchable-trigger__label-element", children: _jsx("div", { className: "zen-dropdown-searchable-trigger__counter", children: _jsx("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && _jsx("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: _jsx(IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), _jsx("button", { name: name, type: "button", onMouseDown: e => e.preventDefault(), tabIndex: -1, "aria-hidden": "true", className: classNames(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "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", "Clear search", "Vymazat vyhled\xE1v\xE1n\xED");
+injectString("da-DK", "Clear search", "Ryd s\xF8gning");
+injectString("de", "Clear search", "Suche l\xF6schen");
+injectString("en", "Clear search", "Clear search");
+injectString("es", "Clear search", "Borrar b\xFAsqueda");
+injectString("fi-FI", "Clear search", "Tyhjenn\xE4 haku");
+injectString("fr", "Clear search", "Effacer la recherche");
+injectString("fr-FR", "Clear search", "Effacer la recherche");
+injectString("hu-HU", "Clear search", "T\xF6r\xF6ld a keres\xE9st.");
+injectString("id", "Clear search", "Hapus pencarian");
+injectString("it", "Clear search", "Cancellare ricerca");
+injectString("ja", "Clear search", "\u691C\u7D22\u3092\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear search", "\uAC80\uC0C9 \uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear search", "Kosongkan carian");
+injectString("nb-NO", "Clear search", "T\xF8m s\xF8k");
+injectString("nl", "Clear search", "Zoekopdracht wissen");
+injectString("pl", "Clear search", "Wyczy\u015B\u0107 wyszukiwanie");
+injectString("pt-BR", "Clear search", "Limpar pesquisa");
+injectString("sk-SK", "Clear search", "Vyma\u017E vyh\u013Ead\xE1vanie.");
+injectString("sv", "Clear search", "Rensa s\xF6kningen");
+injectString("th", "Clear search", "\u0E25\u0E49\u0E32\u0E07\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32");
+injectString("tr", "Clear search", "Aramay\u0131 temizle");
+injectString("zh-Hans", "Clear search", "\u6E05\u9664\u641C\u7D22");
+injectString("zh-TW", "Clear search", "\u6E05\u9664\u641C\u5C0B");
+injectString("cs", "Close filter", "Zav\u0159\xEDt filtr");
+injectString("da-DK", "Close filter", "Luk filter");
+injectString("de", "Close filter", "Filter schlie\xDFen");
+injectString("en", "Close filter", "Close filter");
+injectString("es", "Close filter", "Cerrar filtro");
+injectString("fi-FI", "Close filter", "Sulje suodatin");
+injectString("fr", "Close filter", "Fermer le filtre");
+injectString("fr-FR", "Close filter", "Fermer le filtre");
+injectString("hu-HU", "Close filter", "Z\xE1rja be a sz\u0171r\u0151t");
+injectString("id", "Close filter", "Tutup filter");
+injectString("it", "Close filter", "Chiudi filtro");
+injectString("ja", "Close filter", "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u9589\u3058\u308B");
+injectString("ko-KR", "Close filter", "\uD544\uD130 \uB2EB\uAE30");
+injectString("ms", "Close filter", "Tutup penyaring");
+injectString("nb-NO", "Close filter", "Lukk filter");
+injectString("nl", "Close filter", "Filter sluiten");
+injectString("pl", "Close filter", "Zamknij filtr");
+injectString("pt-BR", "Close filter", "Fechar filtro");
+injectString("sk-SK", "Close filter", "Zatvori\u0165 filter");
+injectString("sv", "Close filter", "St\xE4ng filter");
+injectString("th", "Close filter", "\u0E1B\u0E34\u0E14\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07");
+injectString("tr", "Close filter", "Filtreyi kapat");
+injectString("zh-Hans", "Close filter", "\u5173\u95ED\u7B5B\u9009\u5668");
+injectString("zh-TW", "Close filter", "\u95DC\u9589\u7BE9\u9078\u5668");
+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 DropdownSearchableTrigger = _a => {
+  var {
+      value,
+      className = "",
+      onChange,
+      placeholder,
+      isOpenPopup,
+      inputRef,
+      handleClick,
+      width,
+      title,
+      id,
+      disabled,
+      count,
+      currentSelection,
+      isError,
+      fullWidth,
+      ref,
+      name,
+      onBlur
+    } = _a,
+    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur"]);
+  const {
+    isFormSection
+  } = useContext(FormSectionContext);
+  const {
+    translate
+  } = useLanguage();
+  const triggerId = useId();
+  const driveComponentClass = useDriveClassName("zen-dropdown-searchable-trigger");
+  const isDrive = useDrive();
+  const inputStyle = width ? {
+    style: {
+      width: `${width}px`
+    }
+  } : {};
+  const isLargeNumber = count && count > 99;
+  const clearRef = useRef(null);
+  const handleKeydown = e => {
+    if (e.key === "Enter" && !isOpenPopup) {
+      handleClick(true);
+    }
+    if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
+      e.nativeEvent.stopImmediatePropagation();
+      handleClick(false);
+    }
+  };
+  const clickHandler = e => {
+    if (e.target === inputRef.current && isOpenPopup || e.target === clearRef.current && isOpenPopup) {
+      return;
+    }
+    handleClick(!isOpenPopup);
+  };
+  const handleClearSearch = () => {
+    onChange(undefined);
+  };
+  return _jsxs("div", Object.assign({
+    className: classNames(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "", driveComponentClass || "", isFormSection ? "zen-dropdown-searchable-trigger--form-item" : "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""])
+  }, inputStyle, {
+    ref: ref
+  }, otherProps, {
+    onClick: disabled ? () => {} : clickHandler,
+    role: "combobox",
+    "aria-label": placeholder,
+    children: [_jsxs("div", {
+      onBlur: onBlur,
+      className: classNames(["zen-dropdown-searchable-trigger__search-container", className]),
+      children: [_jsx("div", {
+        className: "zen-dropdown-searchable-trigger__input-container",
+        onKeyDown: handleKeydown,
+        children: _jsx(TextInputRaw, {
+          value: value,
+          placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"),
+          className: classNames(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]),
+          onChange: onChange,
+          disabled: disabled,
+          type: "text",
+          ref: inputRef,
+          id: id || triggerId
+        })
+      }), count ? _jsx("div", {
+        className: "zen-dropdown-searchable-trigger__label-element",
+        children: _jsx("div", {
+          className: "zen-dropdown-searchable-trigger__counter",
+          children: _jsx("span", {
+            children: isLargeNumber ? "99+" : count
+          })
+        })
+      }) : null, value && _jsx("button", {
+        type: "button",
+        className: "zen-dropdown-searchable-trigger__close-button",
+        ref: clearRef,
+        title: translate("Clear search"),
+        onClick: handleClearSearch,
+        children: _jsx(IconCrossThin, {
+          size: isDrive ? "big" : "small"
+        })
+      })]
+    }), _jsx("button", {
+      name: name,
+      type: "button",
+      onMouseDown: e => e.preventDefault(),
+      tabIndex: -1,
+      "aria-hidden": "true",
+      className: classNames(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]),
+      title: title || (isOpenPopup ? translate("Close filter") : translate("Open filter")),
+      children: _jsx(IconChevronDownSmall, {
+        className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down",
+        size: isDrive ? "huge" : "large"
+      })
+    })]
+  }));
 };
 DropdownSearchableTrigger.displayName = "DropdownSearchableTrigger";
-export const TRANSLATIONS = [
-    "Filter by group",
-    "Open filter",
-    "Clear search"
-];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search"];

package/esm/dropdownRaw/stateReducer/stateAction.d.ts

@@ -137,5 +137,9 @@ interface IUpdateNamelessItemsAction {
     type: StateActionType.UpdateNamelessItems;
     payload: undefined;
 }
-export type TStateAction = ICreateMapAction | ISetStateAction | ISetGlobalStateAction | ISetListDataAction | ISetIsOpenComboAction | IShowAction | IShowWaitingAction | IShowEmptyListAction | IShowListAction | ISetInputValueAction | INothingToShowAction | ISetCurrentIdAction | IChangeSelectionAction | IChangeBulkSelectionAction | IChangeSingleSelectionAction | ISelectAllChildrenAction | IDeselectAllChildrenAction | IResetSelection | IResetStateToGlobal | ISetDataProblemAction | ISetDefaultValueAction | IUpdateSelectedItemsAction | ISetPendingStateAction | IUpdateNamelessItemsAction | IToggleValueForAllSelectedAction | IDeselectItemsFromAllSelectedAction | ISetDefaultAllSelectedAction | ISetIsCheckedAction | ISetIsCheckedAction | ISetDefaultIsCheckedAction;
+interface ISetFirstParentNodeIsVisibleAction {
+    type: StateActionType.SetFirstParentNodeIsVisible;
+    payload: boolean | undefined;
+}
+export type TStateAction = ICreateMapAction | ISetStateAction | ISetGlobalStateAction | ISetListDataAction | ISetIsOpenComboAction | IShowAction | IShowWaitingAction | IShowEmptyListAction | IShowListAction | ISetInputValueAction | INothingToShowAction | ISetCurrentIdAction | IChangeSelectionAction | IChangeBulkSelectionAction | IChangeSingleSelectionAction | ISelectAllChildrenAction | IDeselectAllChildrenAction | IResetSelection | IResetStateToGlobal | ISetDataProblemAction | ISetDefaultValueAction | IUpdateSelectedItemsAction | ISetPendingStateAction | IUpdateNamelessItemsAction | IToggleValueForAllSelectedAction | IDeselectItemsFromAllSelectedAction | ISetDefaultAllSelectedAction | ISetIsCheckedAction | ISetIsCheckedAction | ISetDefaultIsCheckedAction | ISetFirstParentNodeIsVisibleAction;
 export {};

package/esm/dropdownRaw/stateReducer/stateActionType.d.ts

@@ -27,5 +27,6 @@ export declare enum StateActionType {
     DeselectItemsFromAllSelected = "DESELECT_ITEMS_FROM_ALL_SELECTED",
     SetDefaultAllSelected = "SET_DEFAULT_ALL_SELECTED",
     SetDefaultIsChecked = "SET_DEFAULT_IS_CHECKED",
-    SetIsChecked = "SET_IS_CHECKED"
+    SetIsChecked = "SET_IS_CHECKED",
+    SetFirstParentNodeIsVisible = "SET_FIRST_PARENT_NODE_IS_VISIBLE"
 }

package/esm/dropdownRaw/stateReducer/stateActionType.js

@@ -29,4 +29,5 @@ export var StateActionType;
     StateActionType["SetDefaultAllSelected"] = "SET_DEFAULT_ALL_SELECTED";
     StateActionType["SetDefaultIsChecked"] = "SET_DEFAULT_IS_CHECKED";
     StateActionType["SetIsChecked"] = "SET_IS_CHECKED";
+    StateActionType["SetFirstParentNodeIsVisible"] = "SET_FIRST_PARENT_NODE_IS_VISIBLE";
 })(StateActionType || (StateActionType = {}));

package/esm/dropdownRaw/stateReducer/stateReducer.d.ts

@@ -2,6 +2,7 @@ import { Reducer } from "react";
 import { TStateAction } from "./stateAction";
 import { IGroupTree, ITypedHash } from "../../groupsFilterRaw/groupsFilterInterfaces";
 import { IDropdownRawItem } from "../types";
+export declare const ROOT_GROUP_ID = "zen_dropdown_root_group_id";
 export interface IDropdownState {
     groupsMap: ITypedHash<IGroupTree | undefined>;
     selectedIds: string[];
@@ -9,6 +10,7 @@ export interface IDropdownState {
     defaultValue: string[];
     listData: IDropdownRawItem[];
     currentId: string | undefined;
+    rootId: string;
     showWaiting: boolean;
     showEmptyList: boolean;
     showList: boolean;
@@ -28,16 +30,18 @@ export interface IDropdownState {
     isChecked?: boolean;
     defaultValueIsChecked?: boolean;
     globalIsChecked?: boolean;
+    firstParentNodeIsVisible?: boolean;
 }
 export interface IStateReducer extends Reducer<IDropdownState, TStateAction> {
 }
-export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownRawItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean) => {
+export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownRawItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean, firstParentNodeIsVisible?: boolean) => {
     groupsMap: ITypedHash<IGroupTree>;
     selectedIds: string[];
     globalSelectedIds: string[];
     defaultValue: string[];
     listData: never[];
     currentId: undefined;
+    rootId: string;
     showWaiting: boolean;
     showEmptyList: boolean;
     showList: boolean;
@@ -57,5 +61,6 @@ export declare const getInitialState: (isFullSelectionMode: boolean, comboItems:
     globalIsChecked: boolean | undefined;
     listLimit: number;
     resultsExceedListLimit: boolean;
+    firstParentNodeIsVisible: boolean | undefined;
 };
 export declare function stateReducer(state: IDropdownState, action: TStateAction): IDropdownState;

package/esm/dropdownRaw/stateReducer/stateReducer.js

@@ -1,10 +1,10 @@
 import { StateActionType } from "./stateActionType";
-import { getChildList, updateAllSelectedStateValueBasedOnTotalSelected } from "./stateReducerHelper";
+import { getChildList, updateAllSelectedStateValueBasedOnTotalSelected, getRootId } from "./stateReducerHelper";
 import { createGroupsMap } from "../../groupsFilterRaw/groupsFilterHelper";
-import { ENTIRE_ORGANIZATION_GROUP_ID } from "../../groupsFilterRaw/groupsHelper";
-export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
+export const ROOT_GROUP_ID = "zen_dropdown_root_group_id";
+export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked, firstParentNodeIsVisible) => {
     const updatedGroupsMapSelected = new Map();
-    const updatedGroupsMap = comboItems.length ? createGroupsMap(comboItems, ENTIRE_ORGANIZATION_GROUP_ID) : {};
+    const updatedGroupsMap = comboItems.length ? createGroupsMap(comboItems, ROOT_GROUP_ID) : {};
     const namelessIds = new Set();
     if (selection.length > 0) {
         selection.forEach(id => {
@@ -19,7 +19,8 @@ export const getInitialState = (isFullSelectionMode, comboItems, selection, list
             }
         });
     }
-    const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[ENTIRE_ORGANIZATION_GROUP_ID].children || []).some(el => el.children && el.children.length);
+    const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
+    const rootId = getRootId(updatedGroupsMap, ROOT_GROUP_ID, firstParentNodeIsVisible);
     return {
         groupsMap: updatedGroupsMap,
         selectedIds: selection,
@@ -27,6 +28,7 @@ export const getInitialState = (isFullSelectionMode, comboItems, selection, list
         defaultValue: defaultValue || [],
         listData: [],
         currentId: undefined,
+        rootId: rootId || ROOT_GROUP_ID,
         showWaiting: false,
         showEmptyList: false,
         showList: false,
@@ -45,7 +47,8 @@ export const getInitialState = (isFullSelectionMode, comboItems, selection, list
         defaultValueIsChecked: isChecked !== undefined ? defaultValueIsChecked || false : undefined,
         globalIsChecked: isChecked,
         listLimit,
-        resultsExceedListLimit: false
+        resultsExceedListLimit: false,
+        firstParentNodeIsVisible: firstParentNodeIsVisible
     };
 };
 // eslint-disable-next-line complexity
@@ -54,7 +57,7 @@ export function stateReducer(state, action) {
     const { type, payload } = action;
     switch (type) {
         case StateActionType.CreateMap: {
-            const updatedGroupsMap = payload.length ? createGroupsMap(payload, ENTIRE_ORGANIZATION_GROUP_ID) : {};
+            const updatedGroupsMap = payload.length ? createGroupsMap(payload, ROOT_GROUP_ID) : {};
             const newNamelessIds = new Set(state.namelessIds);
             if (Object.keys(updatedGroupsMap).length && state.selectedIds.length) {
                 state.selectedIds.forEach(id => {
@@ -70,10 +73,11 @@ export function stateReducer(state, action) {
                     }
                 });
             }
-            const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[ENTIRE_ORGANIZATION_GROUP_ID].children || []).some(el => el.children && el.children.length);
+            const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
             state.groupsMap = updatedGroupsMap;
             const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, state.selectedIds.length - newNamelessIds.size);
-            return Object.assign(Object.assign(Object.assign({}, state), { namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
+            const rootId = getRootId(updatedGroupsMap, ROOT_GROUP_ID, state.firstParentNodeIsVisible);
+            return Object.assign(Object.assign(Object.assign({}, state), { rootId: rootId || ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
         }
         case StateActionType.SetListData: {
             state.selectedIds.forEach(id => {
@@ -233,7 +237,8 @@ export function stateReducer(state, action) {
                     }
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const currentChild = getChildList((_e = state.groupsMap[itemId]) === null || _e === void 0 ? void 0 : _e.children);
-                    currentChild.forEach(childId => childrenToProcess.add(childId.id));
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    currentChild.forEach(childId => childId && childrenToProcess.add(childId.id));
                 }
                 else {
                     currentSelectedIds.delete(itemId);
@@ -287,7 +292,7 @@ export function stateReducer(state, action) {
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
         }
         case StateActionType.DeselectItemsFromAllSelected: {
-            const currentEl = state.groupsMap[ENTIRE_ORGANIZATION_GROUP_ID];
+            const currentEl = state.groupsMap[state.rootId];
             // action not submitted for disabled item, other items, even if disabled, not change their state
             const deselectedItems = payload ? new Set([payload]) : new Set(state.listData.filter(elem => !elem.disabled).map(el => el.id));
             const newSelected = new Set();
@@ -310,7 +315,7 @@ export function stateReducer(state, action) {
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined });
         }
         case StateActionType.ToggleValueForAllSelected: {
-            const currentEl = state.groupsMap[ENTIRE_ORGANIZATION_GROUP_ID];
+            const currentEl = state.groupsMap[state.rootId];
             const newSelected = new Set();
             state.isAllSelected && ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
                 if (!newSelected.has(el.id) && el.disabled) {
@@ -339,6 +344,13 @@ export function stateReducer(state, action) {
             childrenForDeselect.forEach(childId => newSelected.delete(childId));
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
         }
+        case StateActionType.SetFirstParentNodeIsVisible: {
+            if (state.firstParentNodeIsVisible === payload) {
+                return state;
+            }
+            const newRootId = getRootId(state.groupsMap, ROOT_GROUP_ID, payload) || ROOT_GROUP_ID;
+            return Object.assign(Object.assign({}, state), { rootId: newRootId, firstParentNodeIsVisible: payload });
+        }
         default: {
             throw Error("Unknown action: " + type);
         }

package/esm/dropdownRaw/stateReducer/stateReducerHelper.d.ts

@@ -1,4 +1,6 @@
 import { IDropdownState } from "./stateReducer";
 import { IDropdownRawItem } from "../types";
+import { IGroupTree, ITypedHash } from "../../groupsFilterRaw/groupsFilterInterfaces";
 export declare function getChildList(childArr: IDropdownRawItem[] | undefined): IDropdownRawItem[];
 export declare const updateAllSelectedStateValueBasedOnTotalSelected: (state: IDropdownState, totalSelected: number) => Partial<Pick<IDropdownState, "isAllSelected">>;
+export declare const getRootId: (groupsMap: ITypedHash<IGroupTree>, rootIdKey: string, firstParentNodeIsVisible?: boolean) => string | undefined;

package/esm/dropdownRaw/stateReducer/stateReducerHelper.js

@@ -1,3 +1,4 @@
+import { ENTIRE_ORGANIZATION_GROUP_ID } from "../../groupsFilterRaw/groupsHelper";
 export function getChildList(childArr) {
     const list = [];
     if (!childArr) {
@@ -22,3 +23,20 @@ export const updateAllSelectedStateValueBasedOnTotalSelected = (state, totalSele
     }
     return additionalStateUpdates;
 };
+export const getRootId = (groupsMap, rootIdKey, firstParentNodeIsVisible) => {
+    var _a;
+    if (Object.keys(groupsMap).length === 0) {
+        return undefined;
+    }
+    const rootGroup = groupsMap[rootIdKey];
+    if (((_a = rootGroup === null || rootGroup === void 0 ? void 0 : rootGroup.children) === null || _a === void 0 ? void 0 : _a.length) === 1 && rootGroup.children[0] && groupsMap[rootGroup.children[0].id]) {
+        if (firstParentNodeIsVisible) {
+            return undefined;
+        }
+        if (firstParentNodeIsVisible === undefined && rootGroup.children[0].children && rootGroup.children[0].children.length > 0) {
+            return rootGroup.children[0].id === ENTIRE_ORGANIZATION_GROUP_ID ? ENTIRE_ORGANIZATION_GROUP_ID : undefined;
+        }
+        return rootGroup.children[0].children && rootGroup.children[0].children.length > 0 ? rootGroup.children[0].id : undefined;
+    }
+    return undefined;
+};

package/esm/dropdownRaw/stateReducer/stateReducerTestData.d.ts

@@ -0,0 +1,39 @@
+import { IGroupTree } from "../../groupsFilterRaw/groupsFilterInterfaces";
+export declare const usersArr: {
+    id: string;
+    name: string;
+    firstName: string;
+    lastName: string;
+}[];
+export declare const usersMap: {
+    b4: {
+        id: string;
+        name: string;
+        firstName: string;
+        lastName: string;
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    b6: {
+        id: string;
+        name: string;
+        firstName: string;
+        lastName: string;
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    b12: {
+        id: string;
+        name: string;
+        firstName: string;
+        lastName: string;
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+    zen_dropdown_root_group_id: {
+        id: string;
+        name: string;
+        parent: IGroupTree | undefined;
+        children: IGroupTree[];
+    };
+};

package/esm/dropdownRaw/stateReducer/stateReducerTestData.js

@@ -0,0 +1,71 @@
+import { ROOT_GROUP_ID } from "./stateReducer";
+export const usersArr = [
+    {
+        id: "b4",
+        name: "atticuspinch@gmail.com",
+        firstName: "Atticus",
+        lastName: "Pinch"
+    },
+    {
+        id: "b6",
+        name: "jeanlouisepinch@gmail.com",
+        firstName: "Jean Louise",
+        lastName: "Pinch"
+    },
+    {
+        id: "b12",
+        name: "booadley@gmail.com",
+        firstName: "Boo",
+        lastName: "Adley"
+    }
+];
+const rootNode = {
+    id: "root",
+    name: "",
+    parent: undefined,
+    children: []
+};
+const zenDropdownRootGroup = {
+    id: ROOT_GROUP_ID,
+    name: "",
+    parent: undefined,
+    children: []
+};
+const childB4 = {
+    id: "b4",
+    name: "atticuspinch@gmail.com",
+    firstName: "Atticus",
+    lastName: "Pinch",
+    parent: undefined,
+    children: []
+};
+const childB6 = {
+    id: "b6",
+    name: "jeanlouisepinch@gmail.com",
+    firstName: "Jean Louise",
+    lastName: "Pinch",
+    parent: undefined,
+    children: []
+};
+const childB12 = {
+    id: "b12",
+    name: "booadley@gmail.com",
+    firstName: "Boo",
+    lastName: "Adley",
+    parent: undefined,
+    children: []
+};
+rootNode.children = [zenDropdownRootGroup];
+// Zen Group -> Company
+zenDropdownRootGroup.children = [childB4, childB6, childB12];
+// Setting parents
+zenDropdownRootGroup.parent = rootNode;
+childB4.parent = zenDropdownRootGroup;
+childB6.parent = zenDropdownRootGroup;
+childB12.parent = zenDropdownRootGroup;
+export const usersMap = {
+    b4: childB4,
+    b6: childB6,
+    b12: childB12,
+    [ROOT_GROUP_ID]: zenDropdownRootGroup
+};

package/esm/dropdownRaw/types.d.ts

@@ -59,6 +59,7 @@ interface IDropdownBase extends IChipsParent {
     setChecked?: (value: boolean) => void;
     fetchState?: IFetchDropdownState;
     mobileSheetStackingClassName?: string;
+    firstParentNodeIsVisible?: boolean;
 }
 interface IDropdownBaseDefault {
     disabled?: boolean;