@evergis/react 4.0.76 → 4.0.78

package/dist/components/Dashboard/containers/FiltersContainer/hooks/useTreeFilter.d.ts

@@ -18,4 +18,6 @@ export declare const useTreeFilter: (type: WidgetType, filter: ConfigContainerCh
     onClose: () => void;
     onToggleSelect: (item: any) => void;
     onReset: () => void;
+    onSave: () => void;
+    dirty: boolean;
 };

package/dist/components/Dashboard/containers/FiltersContainer/hooks/useTreeFilterData.d.ts

@@ -7,5 +7,6 @@ export declare const useTreeFilterData: (type: WidgetType, filterName: string) =
     loadLevelOne: () => Promise<TreeItemProps[]>;
     loadChildren: (item: TreeItemProps) => Promise<PartialLoadData<TreeNodeData>>;
     searchNodes: (query: string) => Promise<TreeItemProps[]>;
-    loadByIds: (ids: TreeId[]) => Promise<TreeItemProps[]>;
+    loadByNames: (names: TreeId[]) => Promise<TreeItemProps[]>;
+    loadByValues: (values: TreeId[]) => Promise<TreeItemProps[]>;
 };

package/dist/components/Dashboard/containers/FiltersContainer/hooks/useTreeFilterSearch.d.ts

@@ -1,9 +1,9 @@
 import { TreeId, TreeItemProps } from '@evergis/uilib-gl';
 type UseTreeFilterSearchParams = {
     searchNodes: (query: string) => Promise<TreeItemProps[]>;
-    loadByIds: (ids: TreeId[]) => Promise<TreeItemProps[]>;
+    loadByNames: (names: TreeId[]) => Promise<TreeItemProps[]>;
 };
-export declare const useTreeFilterSearch: ({ searchNodes, loadByIds }: UseTreeFilterSearchParams) => {
+export declare const useTreeFilterSearch: ({ searchNodes, loadByNames }: UseTreeFilterSearchParams) => {
     searchValue: string;
     isSearchActive: boolean;
     searching: boolean;

package/dist/components/Dashboard/containers/FiltersContainer/hooks/useTreeFilterSelection.d.ts

@@ -4,6 +4,8 @@ export declare const useTreeFilterSelection: (type: WidgetType, filterName: stri
     selected: Map<TreeId, number>;
     selectedIds: Set<TreeId>;
     selectedLabel: string;
+    dirty: boolean;
     onToggleSelect: (item: TreeItemProps, multiSelect?: boolean) => void;
     onReset: () => void;
+    onSave: () => void;
 };

package/dist/components/Dashboard/containers/FiltersContainer/hooks/useTreeFilterTree.d.ts

@@ -2,9 +2,10 @@ import { TreeId, TreeItemProps } from '@evergis/uilib-gl';
 type UseTreeFilterTreeParams = {
     selected: Map<TreeId, number>;
     loadLevelOne: () => Promise<TreeItemProps[]>;
-    loadByIds: (ids: TreeId[]) => Promise<TreeItemProps[]>;
+    loadByValues: (values: TreeId[]) => Promise<TreeItemProps[]>;
+    loadByNames: (names: TreeId[]) => Promise<TreeItemProps[]>;
 };
-export declare const useTreeFilterTree: ({ selected, loadLevelOne, loadByIds }: UseTreeFilterTreeParams) => {
+export declare const useTreeFilterTree: ({ selected, loadLevelOne, loadByValues, loadByNames }: UseTreeFilterTreeParams) => {
     treeData: TreeItemProps[];
     setTreeData: import('react').Dispatch<import('react').SetStateAction<TreeItemProps[]>>;
     treeExpanded: TreeId[];

package/dist/components/Dashboard/containers/FiltersContainer/types.d.ts

@@ -6,9 +6,14 @@ export type FilterOption = {
     min: string | number;
     max: string | number;
 };
-/** Доменные данные узла иерархического фильтра "tree", хранятся в `TreeItemProps.data`. */
+/**
+ * Доменные данные узла иерархического фильтра "tree", хранятся в `TreeItemProps.data`.
+ * `name`/`parentName` — служебная связь дерева (по `attributeName`/`attributeParentName`);
+ * идентичность/значение узла лежит в `TreeItemProps.id` (по `attributeValue`).
+ */
 export type TreeNodeData = {
-    parentId: TreeId | null;
+    name: TreeId;
+    parentName: TreeId | null;
     level: number;
 };
 export type WidgetFilterProps = {

package/dist/components/Dashboard/containers/FiltersContainer/utils/treeFilterUtils.d.ts

@@ -1,9 +1,12 @@
 import { TreeId, TreeItemProps } from '@evergis/uilib-gl';
 import { TreeFilterValue } from '../../../types';
 export declare const buildLevelOneCondition: (attributeLevel: string) => string;
-export declare const buildChildrenCondition: (attributeParentValue: string, parentId: TreeId) => string;
+export declare const buildChildrenCondition: (attributeParentName: string, parentName: TreeId) => string;
 export declare const buildSearchCondition: (attributeAlias: string, query: string) => string;
-export declare const buildIdsCondition: (attributeValue: string, ids: Array<string | number>) => string;
+/** Запрос пачки записей по их именам (`attributeName`) — для достройки предков. */
+export declare const buildNamesCondition: (attributeName: string, names: Array<string | number>) => string;
+/** Запрос пачки записей по их значениям (`attributeValue`) — для восстановления `defaultValue`. */
+export declare const buildValuesCondition: (attributeValue: string, values: Array<string | number>) => string;
 /** Группирует выбранные id по уровню в объектное значение фильтра `{ l{N}: [ids] }`. */
 export declare const buildFilterValue: (selected: Map<TreeId, number>) => TreeFilterValue;
 /** Разбирает объектное значение фильтра в карту `id → level`. */
@@ -11,13 +14,15 @@ export declare const parseFilterValue: (value?: TreeFilterValue) => Map<TreeId,
 /** Стабильная сериализация выбора для сравнения (порядок не важен). */
 export declare const serializeSelection: (selected: Map<TreeId, number>) => string;
 /**
- * Дозапрашивает цепочку предков вверх по `parentId` уровень за уровнем (батч `id in (...)`),
- * пока не достигнет уровня 1. Возвращает исходные узлы вместе с предками.
+ * Дозапрашивает цепочку предков вверх по `parentName` уровень за уровнем (батч `attributeName in
+ * (...)`), пока не достигнет уровня 1. Связь идёт по именам (`name`/`parentName`), т.к. `node.id`
+ * хранит значение (`attributeValue`). Возвращает исходные узлы вместе с предками.
  */
-export declare const collectAncestors: (nodes: TreeItemProps[], loadByIds: (ids: TreeId[]) => Promise<TreeItemProps[]>) => Promise<TreeItemProps[]>;
+export declare const collectAncestors: (nodes: TreeItemProps[], loadByNames: (names: TreeId[]) => Promise<TreeItemProps[]>) => Promise<TreeItemProps[]>;
 /**
- * Собирает плоский набор узлов в дерево по `parentId`. Узлы с подгруженными потомками
- * раскрываются; листья-папки без потомков получают `children = null` (ленивая подгрузка).
+ * Собирает плоский набор узлов в дерево по связи `parentName` ↔ `name`. Узлы с подгруженными
+ * потомками раскрываются (`expanded` хранит `node.id` = значение); листья-папки без потомков
+ * получают `children = null` (ленивая подгрузка).
  */
 export declare const assembleTree: (nodes: TreeItemProps[]) => {
     roots: TreeItemProps[];

package/dist/components/Dashboard/types.d.ts

@@ -326,11 +326,18 @@ export interface ConfigFilter {
     relatedDataSource?: string;
     defaultValue?: SelectedFilter["value"];
     attributeAlias?: string;
+    /**
+     * Атрибут хранимого значения фильтра — то, что фильтр отдаёт потребителям (плейсхолдеры
+     * `%name`, для "tree" — `%name.lN`). Для "tree" служит ещё и идентичностью узла дерева
+     * (`TreeItemProps.id`). Если не задан — фолбэк на {@link ConfigFilter.attributeName}.
+     */
     attributeValue?: string;
     attributeMin?: string;
     attributeMax?: string;
-    /** Атрибут id родителя — для иерархического фильтра "tree". */
-    attributeParentValue?: string;
+    /** Атрибут-имя записи — служебная связь дерева (`child.attributeParentName == parent.attributeName`); для "tree". */
+    attributeName?: string;
+    /** Атрибут-имя родителя — служебная связь дерева; для "tree". */
+    attributeParentName?: string;
     /** Атрибут числового уровня (корень = 1) — для "tree". */
     attributeLevel?: string;
     /** Атрибут-флаг наличия детей (показ шеврона) — для "tree". */

package/dist/index.js

@@ -11446,9 +11446,12 @@ function getIconFromAttribute(option, iconAttribute) {
 
 const MAX_ANCESTOR_DEPTH = 50;
 const buildLevelOneCondition = (attributeLevel) => `${attributeLevel} = 1`;
-const buildChildrenCondition = (attributeParentValue, parentId) => `${attributeParentValue} = ${formatConditionValue({ value: parentId })}`;
+const buildChildrenCondition = (attributeParentName, parentName) => `${attributeParentName} = ${formatConditionValue({ value: parentName })}`;
 const buildSearchCondition = (attributeAlias, query) => `${attributeAlias} LIKE '%${query.replace(/'/g, "''")}%'`;
-const buildIdsCondition = (attributeValue, ids) => `${attributeValue} in ${formatConditionValue({ value: ids })}`;
+/** Запрос пачки записей по их именам (`attributeName`) — для достройки предков. */
+const buildNamesCondition = (attributeName, names) => `${attributeName} in ${formatConditionValue({ value: names })}`;
+/** Запрос пачки записей по их значениям (`attributeValue`) — для восстановления `defaultValue`. */
+const buildValuesCondition = (attributeValue, values) => `${attributeValue} in ${formatConditionValue({ value: values })}`;
 /** Группирует выбранные id по уровню в объектное значение фильтра `{ l{N}: [ids] }`. */
 const buildFilterValue = (selected) => {
     const result = {};
@@ -11473,54 +11476,62 @@ const parseFilterValue = (value) => {
     });
     return result;
 };
+/** Стабильная сериализация выбора для сравнения (порядок не важен). */
+const serializeSelection = (selected) => [...selected.entries()]
+    .map(([id, level]) => `${id}:${level}`)
+    .sort()
+    .join(",");
 /**
- * Дозапрашивает цепочку предков вверх по `parentId` уровень за уровнем (батч `id in (...)`),
- * пока не достигнет уровня 1. Возвращает исходные узлы вместе с предками.
+ * Дозапрашивает цепочку предков вверх по `parentName` уровень за уровнем (батч `attributeName in
+ * (...)`), пока не достигнет уровня 1. Связь идёт по именам (`name`/`parentName`), т.к. `node.id`
+ * хранит значение (`attributeValue`). Возвращает исходные узлы вместе с предками.
  */
-const collectAncestors = async (nodes, loadByIds) => {
-    const byId = new Map();
-    nodes.forEach(node => byId.set(node.id, node));
+const collectAncestors = async (nodes, loadByNames) => {
+    const byName = new Map();
+    nodes.forEach(node => byName.set(node.data.name, node));
     let frontier = nodes;
     for (let depth = 0; depth < MAX_ANCESTOR_DEPTH; depth++) {
         const missingParents = new Set();
         frontier.forEach(node => {
-            const { parentId, level } = node.data ?? {};
-            if (parentId != null && level > 1 && !byId.has(parentId)) {
-                missingParents.add(parentId);
+            const { parentName, level } = node.data ?? {};
+            if (parentName != null && level > 1 && !byName.has(parentName)) {
+                missingParents.add(parentName);
             }
         });
         if (!missingParents.size) {
             break;
         }
-        const parents = await loadByIds([...missingParents]);
+        const parents = await loadByNames([...missingParents]);
         if (!parents.length) {
             break;
         }
-        parents.forEach(parent => byId.set(parent.id, parent));
+        parents.forEach(parent => byName.set(parent.data.name, parent));
         frontier = parents;
     }
-    return [...byId.values()];
+    return [...byName.values()];
 };
 /**
- * Собирает плоский набор узлов в дерево по `parentId`. Узлы с подгруженными потомками
- * раскрываются; листья-папки без потомков получают `children = null` (ленивая подгрузка).
+ * Собирает плоский набор узлов в дерево по связи `parentName` ↔ `name`. Узлы с подгруженными
+ * потомками раскрываются (`expanded` хранит `node.id` = значение); листья-папки без потомков
+ * получают `children = null` (ленивая подгрузка).
  */
 const assembleTree = (nodes) => {
-    const nodesById = new Map();
-    nodes.forEach(node => nodesById.set(node.id, node));
+    const nodesByName = new Map();
+    nodes.forEach(node => nodesByName.set(node.data.name, node));
     const childrenMap = new Map();
-    nodesById.forEach(node => {
-        const parentId = node.data?.parentId;
-        if (parentId != null && nodesById.has(parentId)) {
-            const siblings = childrenMap.get(parentId) ?? [];
+    nodesByName.forEach(node => {
+        const parentName = node.data?.parentName;
+        if (parentName != null && nodesByName.has(parentName)) {
+            const siblings = childrenMap.get(parentName) ?? [];
             siblings.push(node);
-            childrenMap.set(parentId, siblings);
+            childrenMap.set(parentName, siblings);
         }
     });
     const roots = [];
     const expanded = [];
-    nodesById.forEach(node => {
-        const kids = childrenMap.get(node.id);
+    nodesByName.forEach(node => {
+        const { name, parentName } = node.data;
+        const kids = childrenMap.get(name);
         if (kids?.length) {
             node.children = kids;
             expanded.push(node.id);
@@ -11528,8 +11539,7 @@ const assembleTree = (nodes) => {
         else if (node.isLeaf) {
             node.children = null;
         }
-        const parentId = node.data?.parentId;
-        if (parentId == null || !nodesById.has(parentId)) {
+        if (parentName == null || !nodesByName.has(parentName)) {
             roots.push(node);
         }
     });
@@ -11540,22 +11550,24 @@ const useTreeFilterData = (type, filterName) => {
     const { api } = useGlobalContext();
     const { currentPage } = useWidgetPage(type);
     const configFilter = React.useMemo(() => getConfigFilter(filterName, currentPage?.filters), [filterName, currentPage?.filters]);
-    const { relatedDataSource, attributeValue = DEFAULT_ATTRIBUTE_NAME, attributeAlias = DEFAULT_ATTRIBUTE_NAME, attributeParentValue, attributeLevel, attributeHasChildren, limit = DEFAULT_DATA_SOURCE_LIMIT, } = configFilter ?? {};
+    const { relatedDataSource, attributeName = DEFAULT_ATTRIBUTE_NAME, attributeValue, attributeAlias = DEFAULT_ATTRIBUTE_NAME, attributeParentName, attributeLevel, attributeHasChildren, limit = DEFAULT_DATA_SOURCE_LIMIT, } = configFilter ?? {};
+    const valueAttribute = attributeValue ?? attributeName;
     const layerName = React.useMemo(() => currentPage?.dataSources?.find(({ name }) => name === relatedDataSource)?.layerName, [currentPage?.dataSources, relatedDataSource]);
     const mapNode = React.useCallback(({ properties }) => {
         const hasChildren = attributeHasChildren ? !!properties[attributeHasChildren] : false;
         const data = {
-            parentId: attributeParentValue ? properties[attributeParentValue] ?? null : null,
+            name: properties[attributeName],
+            parentName: attributeParentName ? properties[attributeParentName] ?? null : null,
             level: attributeLevel ? Number(properties[attributeLevel]) : 1,
         };
         return {
-            id: properties[attributeValue],
+            id: properties[valueAttribute],
             text: String(properties[attributeAlias] ?? ""),
             isLeaf: hasChildren,
             children: hasChildren ? null : undefined,
             data,
         };
-    }, [attributeValue, attributeAlias, attributeParentValue, attributeLevel, attributeHasChildren]);
+    }, [valueAttribute, attributeName, attributeAlias, attributeParentName, attributeLevel, attributeHasChildren]);
     const runQuery = React.useCallback(async (condition) => {
         if (!layerName) {
             return [];
@@ -11571,29 +11583,36 @@ const useTreeFilterData = (type, filterName) => {
         return features.map(mapNode);
     }, [attributeLevel, runQuery, mapNode]);
     const loadChildren = React.useCallback(async (item) => {
-        if (!attributeParentValue) {
+        if (!attributeParentName) {
             return { children: [] };
         }
-        const features = await runQuery(buildChildrenCondition(attributeParentValue, item.id));
+        const features = await runQuery(buildChildrenCondition(attributeParentName, item.data.name));
         return { children: features.map(mapNode) };
-    }, [attributeParentValue, runQuery, mapNode]);
+    }, [attributeParentName, runQuery, mapNode]);
     const searchNodes = React.useCallback(async (query) => {
         const features = await runQuery(buildSearchCondition(attributeAlias, query));
         return features.map(mapNode);
     }, [attributeAlias, runQuery, mapNode]);
-    const loadByIds = React.useCallback(async (ids) => {
-        if (!ids.length) {
+    const loadByNames = React.useCallback(async (names) => {
+        if (!names.length) {
             return [];
         }
-        const features = await runQuery(buildIdsCondition(attributeValue, ids));
+        const features = await runQuery(buildNamesCondition(attributeName, names));
         return features.map(mapNode);
-    }, [attributeValue, runQuery, mapNode]);
-    return { configFilter, layerName, loadLevelOne, loadChildren, searchNodes, loadByIds };
+    }, [attributeName, runQuery, mapNode]);
+    const loadByValues = React.useCallback(async (values) => {
+        if (!values.length) {
+            return [];
+        }
+        const features = await runQuery(buildValuesCondition(valueAttribute, values));
+        return features.map(mapNode);
+    }, [valueAttribute, runQuery, mapNode]);
+    return { configFilter, layerName, loadLevelOne, loadChildren, searchNodes, loadByNames, loadByValues };
 };
 
 const SEARCH_MIN_LENGTH = 3;
 const SEARCH_DEBOUNCE = 300;
-const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
+const useTreeFilterSearch = ({ searchNodes, loadByNames }) => {
     const [searchValue, setSearchValue] = React.useState("");
     const [searchData, setSearchData] = React.useState([]);
     const [searchExpanded, setSearchExpanded] = React.useState([]);
@@ -11606,7 +11625,7 @@ const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
         setSearching(true);
         try {
             const results = await searchNodes(query);
-            const withAncestors = await collectAncestors(results, loadByIds);
+            const withAncestors = await collectAncestors(results, loadByNames);
             const { roots, expanded } = assembleTree(withAncestors);
             if (id !== requestId.current) {
                 return;
@@ -11619,7 +11638,7 @@ const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
                 setSearching(false);
             }
         }
-    }, [searchNodes, loadByIds]);
+    }, [searchNodes, loadByNames]);
     const clearSearchState = React.useCallback(() => {
         requestId.current++;
         setSearchData([]);
@@ -11663,6 +11682,9 @@ const useTreeFilterSelection = (type, filterName, configFilter) => {
     const [selected, setSelected] = React.useState(() => parseFilterValue(configFilter?.defaultValue));
     const [selectedLabel, setSelectedLabel] = React.useState();
     const selectedIds = React.useMemo(() => new Set(selected.keys()), [selected]);
+    /** Уже применённый (в redux) выбор — база для `dirty`. */
+    const committed = React.useMemo(() => parseFilterValue((filters[filterName]?.value ?? configFilter?.defaultValue)), [filters, filterName, configFilter?.defaultValue]);
+    const dirty = React.useMemo(() => serializeSelection(selected) !== serializeSelection(committed), [selected, committed]);
     const commit = React.useCallback((next) => {
         setSelected(next);
         changeFilters({ [filterName]: { value: buildFilterValue(next) } }, configFilter?.resetFilters);
@@ -11683,8 +11705,17 @@ const useTreeFilterSelection = (type, filterName, configFilter) => {
             }
             next.set(item.id, level);
         }
-        commit(next);
+        // Мультивыбор не коммитит в redux — сохранение по кнопке (onSave). Single — сразу.
+        if (multiSelect) {
+            setSelected(next);
+        }
+        else {
+            commit(next);
+        }
     }, [selected, commit]);
+    const onSave = React.useCallback(() => {
+        changeFilters({ [filterName]: { value: buildFilterValue(selected) } }, configFilter?.resetFilters);
+    }, [changeFilters, filterName, selected, configFilter?.resetFilters]);
     const onReset = React.useCallback(() => {
         setSelectedLabel(undefined);
         commit(new Map());
@@ -11699,10 +11730,10 @@ const useTreeFilterSelection = (type, filterName, configFilter) => {
             changeFilters({ [filterName]: { value: buildFilterValue(selected) } });
         }
     }, [filters, filterName, changeFilters, selected]);
-    return { selected, selectedIds, selectedLabel, onToggleSelect, onReset };
+    return { selected, selectedIds, selectedLabel, dirty, onToggleSelect, onReset, onSave };
 };
 
-const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
+const useTreeFilterTree = ({ selected, loadLevelOne, loadByValues, loadByNames }) => {
     const [treeData, setTreeData] = React.useState([]);
     const [treeExpanded, setTreeExpanded] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
@@ -11722,8 +11753,8 @@ const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
                 setTreeData(roots);
                 return;
             }
-            const selectedNodes = await loadByIds(preselected);
-            const withAncestors = await collectAncestors([...roots, ...selectedNodes], loadByIds);
+            const selectedNodes = await loadByValues(preselected);
+            const withAncestors = await collectAncestors([...roots, ...selectedNodes], loadByNames);
             const { roots: assembled, expanded } = assembleTree(withAncestors);
             setTreeData(assembled);
             setTreeExpanded(expanded);
@@ -11731,20 +11762,21 @@ const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
         finally {
             setLoading(false);
         }
-    }, [loadLevelOne, loadByIds]);
+    }, [loadLevelOne, loadByValues, loadByNames]);
     return { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen };
 };
 
 const useTreeFilter = (type, filter) => {
     const { filterName, multiSelect, placeholder, width } = filter.options ?? {};
-    const { configFilter, loadLevelOne, loadChildren, searchNodes, loadByIds } = useTreeFilterData(type, filterName ?? "");
-    const { selected, selectedIds, selectedLabel, onToggleSelect: toggleSelect, onReset } = useTreeFilterSelection(type, filterName ?? "", configFilter);
+    const { configFilter, loadLevelOne, loadChildren, searchNodes, loadByNames, loadByValues } = useTreeFilterData(type, filterName ?? "");
+    const { selected, selectedIds, selectedLabel, dirty, onToggleSelect: toggleSelect, onReset, onSave, } = useTreeFilterSelection(type, filterName ?? "", configFilter);
     const { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen } = useTreeFilterTree({
         selected,
         loadLevelOne,
-        loadByIds,
+        loadByValues,
+        loadByNames,
     });
-    const search = useTreeFilterSearch({ searchNodes, loadByIds });
+    const search = useTreeFilterSearch({ searchNodes, loadByNames });
     const onToggleSelect = React.useCallback(item => toggleSelect(item, multiSelect), [toggleSelect, multiSelect]);
     const onClose = React.useCallback(() => search.resetSearch(), [search]);
     const view = React.useMemo(() => search.isSearchActive
@@ -11769,12 +11801,14 @@ const useTreeFilter = (type, filter) => {
         onClose,
         onToggleSelect,
         onReset,
+        onSave,
+        dirty,
     };
 };
 
 const TreeFilter = ({ type, filter }) => {
-    const { width, placeholder, multiSelect, loading, data, setData, expanded, setExpanded, onLoadChildren, selectedIds, selectedCount, selectedLabel, searchValue, onSearchChange, onOpen, onClose, onToggleSelect, onReset, } = useTreeFilter(type, filter);
-    return (jsxRuntime.jsx(uilibGl.TreeDropdown, { width: width, placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset }));
+    const { width, placeholder, multiSelect, loading, data, setData, expanded, setExpanded, onLoadChildren, selectedIds, selectedCount, selectedLabel, searchValue, onSearchChange, onOpen, onClose, onToggleSelect, onReset, onSave, dirty, } = useTreeFilter(type, filter);
+    return (jsxRuntime.jsx(uilibGl.TreeDropdown, { zIndex: 100, width: width, placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset, onSave: onSave, dirty: dirty }));
 };
 
 const getFilterComponent = (filterType) => {