@true-engineering/true-react-common-ui-kit 4.0.0-alpha75 → 4.0.0-alpha76

package/dist/true-react-common-ui-kit.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo, useRef, useEffect, memo, useLayoutEffect, useCallback, useState, Fragment as Fragment$1, forwardRef, PureComponent, createRef, createElement } from "react";
 import { createUseStyles } from "react-jss";
-import { isObject, isString, isNotEmpty, isArrayNotEmpty, mergeStyles, isStringEmpty, isStringNotEmpty, mergeRefs, isFunction, isEmpty, addDataAttributes as addDataAttributes$1, stopPropagation, applyAction, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, addDataTestId, getArray, isArrayLikeNotEmpty, doNothing, createFilter, indexMap, merge, getTransition, isNumberInteger, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
+import { isObject, isString, isNotEmpty, isArrayNotEmpty, mergeStyles, isStringEmpty, isStringNotEmpty, mergeRefs, isFunction, isEmpty, addDataAttributes as addDataAttributes$1, applyAction, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, addDataTestId, getArray, isArrayLikeNotEmpty, doNothing, createFilter, indexMap, merge, getTransition, isNumberInteger, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
@@ -12,11 +12,11 @@ import InputMask from "react-input-mask";
 import "react-datepicker/dist/react-datepicker.css";
 import { getYear, getMonth, format, parse, isSameDay, isValid, isAfter, isBefore, sub, endOfYear, startOfYear, endOfMonth, startOfMonth } from "date-fns";
 import ReactDatePicker from "react-datepicker";
-import { Portal } from "react-overlays";
 import { debounce } from "ts-debounce";
 import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import { enUS, ru } from "date-fns/locale";
 import { filesize } from "filesize";
+import { Portal } from "react-overlays";
 import { hasFlag } from "country-flag-icons";
 import * as Flags from "country-flag-icons/react/3x2";
 import { RemoveScroll } from "react-remove-scroll";
@@ -2522,16 +2522,6 @@ const transformToKebab = (string) => {
   return result;
 };
 const getParentNode = (element) => element.nodeName === "HTML" || element === document ? element : element.parentNode ?? element.host;
-const hasExactParent = (element, parent) => {
-  if (element === parent) {
-    return true;
-  }
-  const parentNode = getParentNode(element);
-  if (parentNode === element) {
-    return false;
-  }
-  return hasExactParent(parentNode, parent);
-};
 const getStyleComputedProperty = (element) => element.nodeType !== 1 ? {} : getComputedStyle(element, null);
 const getScrollParent = (element) => {
   if (!element) {
@@ -2999,6 +2989,7 @@ const useStyles$X = createThemedStyles("WithPopup", {
 const WithPopup = ({
   trigger,
   children,
+  state,
   middlewares = [],
   eventType = "click",
   placement = eventType === "click" ? "bottom-end" : "top",
@@ -3014,6 +3005,7 @@ const WithPopup = ({
   isDisabled = false,
   shouldShowArrow = false,
   isMinWidthSameAsTrigger = false,
+  flipOptions,
   hoverOptions,
   clickOptions,
   focusOptions,
@@ -3025,13 +3017,16 @@ const WithPopup = ({
   onToggle
 }) => {
   const classes = useStyles$X({ theme: tweakStyles });
-  const [isOpen, setIsOpen] = useState(false);
+  const innerState = useState(false);
+  const [isOpen, setIsOpen] = state ?? innerState;
   const isActive = isOpen && !isDisabled;
   const arrowRef = useRef(null);
   const handleToggle = (next, event) => {
     event?.stopPropagation();
-    onToggle?.(next, event);
-    setIsOpen(next);
+    if (isOpen !== next) {
+      onToggle?.(next, event);
+      setIsOpen(next);
+    }
   };
   const handleClose = (event) => {
     handleToggle(false, event);
@@ -3040,7 +3035,10 @@ const WithPopup = ({
     open: isActive,
     middleware: [
       offset(popupOffset),
-      canBeFlipped && flip({ fallbackAxisSideDirection: "start" }),
+      canBeFlipped && flip((middlewareState) => ({
+        fallbackAxisSideDirection: "start",
+        ...applyAction(flipOptions, middlewareState)
+      })),
       isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
       shouldShowArrow && arrow({ element: arrowRef })
@@ -3219,7 +3217,7 @@ const useStyles$V = createThemedStyles("List", {
     paddingLeft: 4
   }
 });
-const withPopupStyles$1 = {
+const withPopupStyles$2 = {
   trigger: {
     width: "100%"
   }
@@ -3251,7 +3249,7 @@ const List = ({ items, size: size2, testId, data, tweakStyles, onClick }) => {
           WithPopup,
           {
             eventType: "hover",
-            tweakStyles: withPopupStyles$1,
+            tweakStyles: withPopupStyles$2,
             placement: "right-start",
             popupOffset: 0,
             shouldRenderInBody: false,
@@ -4619,7 +4617,7 @@ class ScrollIntoViewIfNeeded extends PureComponent {
   componentDidMount() {
     const { active } = this.props;
     if (active) {
-      this.handleScrollIntoViewIfNeeded();
+      requestAnimationFrame(this.handleScrollIntoViewIfNeeded);
     }
   }
   componentDidUpdate({ active }) {
@@ -4656,7 +4654,8 @@ const useStyles$H = createThemedStyles("SelectList", {
     boxSizing: "border-box",
     padding: [CONTAINER_PADDING, 0],
     fontSize: 16,
-    overflow: "hidden"
+    overflow: "hidden",
+    cursor: "default"
   },
   withListHeader: {
     paddingTop: 0
@@ -4879,22 +4878,6 @@ const useStyles$G = createThemedStyles("Select", {
     width: "100%",
     cursor: "text"
   },
-  listWrapper: {
-    left: -1,
-    zIndex: 3,
-    width: "fit-content",
-    minWidth: "calc(100% + 1px)"
-  },
-  withoutPopper: {
-    position: "absolute",
-    top: "100%",
-    paddingTop: 4
-  },
-  listWrapperInBody: {
-    minWidth: "auto",
-    width: "auto",
-    maxWidth: "min-content"
-  },
   arrow: {
     width: "var(--icon-inner-size, 20px)",
     height: "var(--icon-inner-size, 20px)",
@@ -4939,6 +4922,11 @@ const getInputStyles = ({
   }
   return baseInputStyles;
 };
+const withPopupStyles$1 = {
+  popup: {
+    maxWidth: "min-content"
+  }
+};
 function Select(props) {
   const {
     options,
@@ -4969,6 +4957,7 @@ function Select(props) {
     onBlur,
     onType,
     onOpen,
+    onClose,
     isOptionDisabled = defaultIsOptionDisabled,
     compareValuesOnChange = defaultCompareFunction,
     convertValueToString = defaultConvertFunction$2,
@@ -5005,16 +4994,20 @@ function Select(props) {
     className: "tweakSelectList",
     currentComponentName: "Select"
   });
+  const tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles$1,
+    tweakStyles,
+    className: "tweakWithPopup",
+    currentComponentName: "WithTooltip"
+  });
   const isMounted = useIsMounted();
-  const [isListOpen, setIsListOpen] = useState(false);
+  const isDropdownOpenState = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = isDropdownOpenState;
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
   const hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
   const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
   const [searchValue, setSearchValue] = useState("");
   const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
-  const root = useRef(null);
-  const inputWrapper = useRef(null);
-  const list = useRef(null);
   const input = useRef(null);
   const strValue = isMultiSelect ? value?.[0] : value;
   const shouldShowAllOption = isMultiSelect && isStringNotEmpty(allOptionsLabel) && searchValue === "";
@@ -5056,80 +5049,64 @@ function Select(props) {
   ]);
   const stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : void 0;
   const showedStringValue = areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
+  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
+  const hasContentInDropdown = (
+    // Есть опции
+    (filteredOptions.length > 0 || // Дефолтная опция
+    defaultOptionLabel !== void 0 && !hasEnoughSymbolsToSearch || // Текст "Загрузка..."
+    inputProps.isLoading || // Текст "Совпадений не найдено"
+    noMatchesLabel !== void 0 || // У нас есть инпут с поиском внутри листа
+    hasSearchInputInList) && // Последняя проверка на случай, если мы че то ищем в опциях
+    (optionsMode === "normal" || hasEnoughSymbolsToSearch)
+  );
+  const isDropdownDisabled = isDisabled || isReadonly || !hasContentInDropdown;
+  const isDropdownActive = isDropdownOpen && !isDropdownDisabled;
   const convertToId = useCallback(
     (v) => (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(v),
     [convertValueToId, convertValueToString]
   );
-  const closeList = useCallback(() => {
-    setIsListOpen(false);
+  const reset = () => {
     setSearchValue("");
     setShouldShowDefaultOption(true);
-  }, [dropdownOptions?.shouldUsePopper]);
-  const handleListClose = useCallback(
-    (event) => {
-      if (!isListOpen) {
-        return;
-      }
-      closeList();
-      onBlur?.(event);
-    },
-    [isListOpen, closeList, onBlur]
-  );
-  const handleListOpen = () => {
-    if (!isReadonly && !isListOpen) {
-      setIsListOpen(true);
+  };
+  const handleChange = (newValue, event) => {
+    if (!compareValuesOnChange(value, newValue)) {
+      onChange(newValue, event);
     }
   };
-  const handleFocus = (event) => {
-    onFocus?.(event);
-    handleListOpen();
+  const handleOptionSelect = (index, event) => {
+    if (!isMultiSelect) {
+      setIsDropdownOpen(false);
+      event.stopPropagation();
+    }
+    handleChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
+    reset();
+    input.current?.blur();
   };
-  const handleOnClick = () => {
-    handleListOpen();
+  const handleToggleOptionCheckbox = (index, isSelected, event) => {
+    if (!isMultiSelect) {
+      return;
+    }
+    if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
+      handleChange(void 0, event);
+      return;
+    }
+    if (index === ALL_OPTION_INDEX && isSelected) {
+      handleChange(availableOptions, event);
+      return;
+    }
+    const option = filteredOptions[index];
+    handleChange(
+      isSelected ? (
+        // Добавляем
+        [...value ?? [], option]
+      ) : (
+        // Убираем
+        value?.filter((o) => convertToId(o) !== convertToId(option))
+      ),
+      event
+    );
   };
-  const handleChange = useCallback(
-    (newValue, event) => {
-      if (!compareValuesOnChange(value, newValue)) {
-        onChange(newValue, event);
-      }
-    },
-    [value, compareValuesOnChange, onChange]
-  );
-  const handleOptionSelect = useCallback(
-    (index, event) => {
-      handleChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
-      handleListClose(event);
-      input.current?.blur();
-    },
-    [handleChange, handleListClose, filteredOptions]
-  );
-  const handleToggleOptionCheckbox = useCallback(
-    (index, isSelected, event) => {
-      if (!isMultiSelect) {
-        return;
-      }
-      if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
-        handleChange(void 0, event);
-        return;
-      }
-      if (index === ALL_OPTION_INDEX && isSelected) {
-        handleChange(availableOptions, event);
-        return;
-      }
-      const option = filteredOptions[index];
-      handleChange(
-        isSelected ? (
-          // Добавляем
-          [...value ?? [], option]
-        ) : (
-          // Убираем
-          value?.filter((o) => convertToId(o) !== convertToId(option))
-        ),
-        event
-      );
-    },
-    [isMultiSelect, filteredOptions, handleChange, value, availableOptions, convertToId]
-  );
   const handleOnType = useCallback(
     async (v) => {
       if (onType === void 0) {
@@ -5165,7 +5142,7 @@ function Select(props) {
     setSearchValue(v);
   };
   const handleKeyDown = (event) => {
-    if (!isListOpen) {
+    if (!isDropdownActive) {
       return;
     }
     event.stopPropagation();
@@ -5173,6 +5150,10 @@ function Select(props) {
       (index) => index === focusedListCellIndex
     );
     switch (event.code) {
+      case "Escape":
+      case "Tab":
+        setIsDropdownOpen(false);
+        break;
       case "Enter":
       case "NumpadEnter": {
         let indexToSelect = focusedListCellIndex;
@@ -5208,53 +5189,25 @@ function Select(props) {
       }
     }
   };
-  const onArrowClick = () => {
-    if (isListOpen) {
+  const handleArrowClick = (event) => {
+    if (isDropdownActive) {
       input.current?.blur();
-      closeList();
+      setIsDropdownOpen(false);
     } else {
       input.current?.focus();
-    }
-  };
-  useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
-  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
-  const isOpen = (
-    // Пользователь пытается открыть лист
-    isListOpen && // Нам есть что показать:
-    // Есть опции
-    (filteredOptions.length > 0 || // Дефолтная опция
-    defaultOptionLabel !== void 0 && !hasEnoughSymbolsToSearch || // Текст "Загрузка..."
-    inputProps.isLoading || // Текст "Совпадений не найдено"
-    noMatchesLabel !== void 0 || // У нас есть инпут с поиском внутри листа
-    hasSearchInputInList) && // Последняя проверка на случай, если мы че то ищем в опциях
-    (optionsMode === "normal" || hasEnoughSymbolsToSearch)
-  );
-  const handleBlur = (event) => {
-    if (isListOpen && !isOpen) {
-      handleListClose(event);
-      return;
-    }
-    if (!isNotEmpty(event.relatedTarget) || !isNotEmpty(list.current) || !isNotEmpty(inputWrapper.current)) {
-      return;
-    }
-    const isActionInsideSelect = hasExactParent(event.relatedTarget, list.current) || hasExactParent(event.relatedTarget, inputWrapper.current);
-    if (!isActionInsideSelect) {
-      handleListClose(event);
+      event.stopPropagation();
     }
   };
   const {
-    shouldUsePopper = false,
+    placement = "bottom-start",
+    popupOffset = 4,
     shouldRenderInBody = false,
-    shouldHideOnScroll = false
+    shouldHideOnScroll = false,
+    isMinWidthSameAsTrigger = true,
+    canBeFlipped = false,
+    flipOptions,
+    middlewares
   } = dropdownOptions ?? {};
-  const popperData = useDropdown({
-    isOpen,
-    onDropdownClose: handleListClose,
-    referenceElement: inputWrapper.current,
-    dropdownElement: list.current,
-    options: dropdownOptions,
-    dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length]
-  });
   useEffect(() => {
     const focusedCellIndex = isNotEmpty(strValue) ? optionsIndexesForNavigation.find((index) => {
       const option = filteredOptions[index];
@@ -5262,11 +5215,13 @@ function Select(props) {
     }) : void 0;
     setFocusedListCellIndex(focusedCellIndex ?? optionsIndexesForNavigation[0]);
   }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
-  useEffect(() => {
-    if (isOpen) {
+  useDidMountEffect(() => {
+    if (isDropdownActive) {
       onOpen?.();
+    } else {
+      onClose?.();
     }
-  }, [isOpen]);
+  }, [isDropdownActive, onClose, onOpen]);
   const searchInputEl = hasSearchInputInList && /* @__PURE__ */ jsx(
     SearchInput,
     {
@@ -5282,47 +5237,59 @@ function Select(props) {
     searchInputEl,
     header
   ] });
-  const listEl = /* @__PURE__ */ jsx(
-    "div",
+  const handleFocus = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    onFocus?.(event);
+    if (isDropdownDisabled) {
+      return;
+    }
+    setIsDropdownOpen(true);
+  };
+  const handleBlur = (event) => {
+    if (isDropdownActive) {
+      return;
+    }
+    reset();
+    onBlur?.(event);
+  };
+  const renderTrigger = /* @__PURE__ */ jsx("div", { className: classes.root, onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsx("div", { className: clsx(classes.inputWrapper, isDisabled && classes.disabled), children: /* @__PURE__ */ jsx(
+    InputBase,
     {
-      className: clsx(classes.listWrapper, {
-        [classes.withoutPopper]: !shouldUsePopper,
-        [classes.listWrapperInBody]: shouldRenderInBody
-      }),
-      ref: list,
-      style: popperData?.styles.popper,
-      tabIndex: 0,
+      ref: input,
+      value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
+      size: size2,
+      isActive: isDropdownOpen || isActive,
+      isReadonly: hasReadonlyInput,
+      isDisabled,
+      isLoading: areOptionsLoading,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
       onBlur: handleBlur,
-      ...popperData?.attributes.popper,
-      children: isOpen && /* @__PURE__ */ jsx(
-        SelectList,
-        {
-          options: filteredOptions,
-          size: size2,
-          defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel,
-          allOptionsLabel: shouldShowAllOption && allOptionsLabel,
-          areAllOptionsSelected,
-          customListHeader: customHeader,
-          customListFooter: applyAction(footer, { filteredOptions }),
-          noMatchesLabel,
-          focusedIndex: focusedListCellIndex,
-          activeValue: value,
-          isLoading: inputProps.isLoading,
-          loadingLabel,
-          tweakStyles: tweakSelectListStyles,
-          testId: getTestId(testId, "list"),
-          isMultiSelect,
-          shouldScrollToList: shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll,
-          isOptionDisabled,
-          convertValueToString,
-          convertValueToReactNode,
-          convertValueToId: convertToId,
-          onOptionSelect: handleOptionSelect,
-          onToggleCheckbox: handleToggleOptionCheckbox
-        }
-      )
-    }
-  );
+      tweakStyles: tweakInputStyles,
+      testId,
+      endIcon: [
+        isMultiSelect && shouldShowMultiSelectCounter ? {
+          key: "counter",
+          iconComponent: /* @__PURE__ */ jsxs("div", { className: classes.counter, children: [
+            "(+",
+            value.length - 1,
+            ")"
+          ] }),
+          shouldResetSize: true
+        } : void 0,
+        ...getArray(endIcon),
+        isNotEmpty(dropdownIcon) ? {
+          key: "arrow",
+          onClick: handleArrowClick,
+          tabIndex: void 0,
+          iconComponent: /* @__PURE__ */ jsx("div", { className: clsx(classes.arrow, { [classes.activeArrow]: isDropdownOpen }), children: renderIcon(dropdownIcon) })
+        } : void 0
+      ].filter(isNotEmpty),
+      ...inputProps
+    }
+  ) }) });
   return /* @__PURE__ */ jsx(
     WithMessages,
     {
@@ -5330,53 +5297,53 @@ function Select(props) {
       infoMessage,
       tweakStyles: tweakWithMessagesStyles,
       testId: getTestId(testId, "wrapper"),
-      children: /* @__PURE__ */ jsxs("div", { className: classes.root, onKeyDown: handleKeyDown, ref: root, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
-            onClick: isDisabled || isReadonly ? void 0 : handleOnClick,
-            ref: inputWrapper,
-            children: /* @__PURE__ */ jsx(
-              InputBase,
-              {
-                value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
-                size: size2,
-                onChange: handleInputChange,
-                isActive: isListOpen || isActive,
-                isReadonly: hasReadonlyInput,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                isDisabled,
-                ref: input,
-                isLoading: areOptionsLoading,
-                tweakStyles: tweakInputStyles,
-                testId,
-                endIcon: [
-                  isMultiSelect && shouldShowMultiSelectCounter ? {
-                    key: "counter",
-                    iconComponent: /* @__PURE__ */ jsxs("div", { className: classes.counter, children: [
-                      "(+",
-                      value.length - 1,
-                      ")"
-                    ] }),
-                    shouldResetSize: true
-                  } : void 0,
-                  ...getArray(endIcon),
-                  isNotEmpty(dropdownIcon) ? {
-                    key: "arrow",
-                    onClick: onArrowClick,
-                    tabIndex: void 0,
-                    iconComponent: /* @__PURE__ */ jsx("div", { className: clsx(classes.arrow, { [classes.activeArrow]: isOpen }), children: renderIcon(dropdownIcon) })
-                  } : void 0
-                ].filter(isNotEmpty),
-                ...inputProps
-              }
-            )
-          }
-        ),
-        shouldUsePopper ? /* @__PURE__ */ jsx(Portal, { container: shouldRenderInBody ? document.body : inputWrapper.current, children: /* @__PURE__ */ jsx(Fragment, { children: listEl }) }) : /* @__PURE__ */ jsx(Fragment, { children: isOpen && listEl })
-      ] })
+      children: /* @__PURE__ */ jsx(
+        WithPopup,
+        {
+          state: isDropdownOpenState,
+          isDisabled: isDropdownDisabled,
+          placement,
+          popupOffset,
+          shouldRenderInBody,
+          shouldHideOnScroll,
+          isMinWidthSameAsTrigger,
+          canBeFlipped,
+          flipOptions,
+          middlewares,
+          isTriggerWrapped: true,
+          clickOptions: { toggle: false },
+          transitionOptions: { duration: 0 },
+          trigger: renderTrigger,
+          tweakStyles: tweakWithPopupStyles,
+          children: /* @__PURE__ */ jsx(
+            SelectList,
+            {
+              options: filteredOptions,
+              size: size2,
+              defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel,
+              allOptionsLabel: shouldShowAllOption && allOptionsLabel,
+              areAllOptionsSelected,
+              customListHeader: customHeader,
+              customListFooter: applyAction(footer, { filteredOptions }),
+              noMatchesLabel,
+              focusedIndex: focusedListCellIndex,
+              activeValue: value,
+              isLoading: inputProps.isLoading,
+              loadingLabel,
+              isMultiSelect,
+              shouldScrollToList: shouldScrollToList && !shouldHideOnScroll,
+              isOptionDisabled,
+              convertValueToString,
+              convertValueToReactNode,
+              convertValueToId: convertToId,
+              onOptionSelect: handleOptionSelect,
+              onToggleCheckbox: handleToggleOptionCheckbox,
+              tweakStyles: tweakSelectListStyles,
+              testId: getTestId(testId, "list")
+            }
+          )
+        }
+      )
     }
   );
 }
@@ -12085,7 +12052,6 @@ export {
   getPhoneObjFromString,
   getScrollParent,
   getStyleComputedProperty,
-  hasExactParent,
   helpers,
   iconsMap,
   isControlWrapperIcon,