@evergis/react 4.0.73 → 4.0.76

package/dist/react.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, Switch, AutoComplete, Input, Slider, Dropdown, Checkbox, DatePicker, getLocale, IconToggleButton, LinearProgress, ActionsGroup, DialogActions, RaisedButton, Preview, H2, Blank, Popover, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, RangeNumberInput, defaultTheme, dateFormat } from '@evergis/uilib-gl';
+import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, Switch, AutoComplete, Input, Slider, Dropdown, Checkbox, DatePicker, getLocale, IconToggleButton, LinearProgress, ActionsGroup, DialogActions, RaisedButton, Preview, H2, Blank, Popover, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, RangeNumberInput, TreeDropdown, defaultTheme, dateFormat } from '@evergis/uilib-gl';
 import { createContext, memo, useRef, useState, useCallback, useEffect, useContext, useMemo, isValidElement, Fragment, createElement } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
@@ -4675,33 +4675,6 @@ const createConfigPage = (props) => {
     };
 };
 
-const getAttributesConfiguration = (layer) => {
-    const layerAttributeConfiguration = layer?.configuration?.attributesConfiguration ?? {};
-    const { geometryAttribute, idAttribute } = layerAttributeConfiguration;
-    const emptyLayerDefinition = {
-        attributes: [],
-        geometryAttribute: geometryAttribute ?? GEOMETRY_ATTRIBUTE,
-        idAttribute: idAttribute ?? DEFAULT_ID_ATTRIBUTE_NAME,
-        titleAttribute: "",
-    };
-    if (!isLayerService(layer)) {
-        return emptyLayerDefinition;
-    }
-    return {
-        ...emptyLayerDefinition,
-        ...layerAttributeConfiguration,
-        attributes: layerAttributeConfiguration?.attributes ||
-            emptyLayerDefinition.attributes,
-    };
-};
-
-const formatChartRelatedValue = (t, value, layerInfo, relatedAttributes) => {
-    const layerDefinition = getAttributesConfiguration(layerInfo);
-    const relatedAxis = relatedAttributes.find(({ chartAxis }) => chartAxis === "y");
-    const attribute = layerDefinition.attributes[relatedAxis.attributeName];
-    return attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value;
-};
-
 const isEmptyValue = (value) => value === "" || value === null || value === undefined;
 
 const checkIsDateFormat = (value) => value.startsWith("#'") && value.endsWith("'");
@@ -4731,7 +4704,59 @@ const formatConditionValue = ({ value, attributeType, defaultValue, checkQuotes
     return checkQuotes && checkIfNeedQuotes(stringValue, attributeType) ? `'${stringValue}'` : stringValue;
 };
 
+/**
+ * Объектное значение иерархического фильтра "tree" («уровень → массив id»),
+ * в отличие от скалярных/массивных значений остальных фильтров.
+ */
+const isTreeFilterValue = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
+/**
+ * Подставляет плейсхолдеры уровней `%name.l{N}` значениями id соответствующего уровня
+ * (формат `[id1,id2,...]` для оператора IN). Уровни, отсутствующие в значении (или пустые),
+ * не подставляются — плейсхолдер остаётся нетронутым, как и любой пустой `%`-плейсхолдер.
+ */
+const applyTreeFilterToCondition = (condition, name, value, isSingle) => {
+    const filterName = `${FILTER_PREFIX}${name}`;
+    return Object.keys(value).reduce((result, level) => {
+        const formatted = formatConditionValue({ value: value[level], checkQuotes: !isSingle });
+        if (!formatted) {
+            return result;
+        }
+        return result.replace(new RegExp(`${filterName}\\.${level}\\b`, "g"), formatted);
+    }, condition);
+};
+
+const getAttributesConfiguration = (layer) => {
+    const layerAttributeConfiguration = layer?.configuration?.attributesConfiguration ?? {};
+    const { geometryAttribute, idAttribute } = layerAttributeConfiguration;
+    const emptyLayerDefinition = {
+        attributes: [],
+        geometryAttribute: geometryAttribute ?? GEOMETRY_ATTRIBUTE,
+        idAttribute: idAttribute ?? DEFAULT_ID_ATTRIBUTE_NAME,
+        titleAttribute: "",
+    };
+    if (!isLayerService(layer)) {
+        return emptyLayerDefinition;
+    }
+    return {
+        ...emptyLayerDefinition,
+        ...layerAttributeConfiguration,
+        attributes: layerAttributeConfiguration?.attributes ||
+            emptyLayerDefinition.attributes,
+    };
+};
+
+const formatChartRelatedValue = (t, value, layerInfo, relatedAttributes) => {
+    const layerDefinition = getAttributesConfiguration(layerInfo);
+    const relatedAxis = relatedAttributes.find(({ chartAxis }) => chartAxis === "y");
+    const attribute = layerDefinition.attributes[relatedAxis.attributeName];
+    return attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value;
+};
+
 const applyFiltersToCondition = ({ condition, name, defaultValue, filters, isSingle, isSetParams, }) => {
+    const rawValue = filters[name] !== undefined ? filters[name].value : defaultValue;
+    if (isTreeFilterValue(rawValue)) {
+        return applyTreeFilterToCondition(condition, name, rawValue, isSingle);
+    }
     const hasFilter = filters[name] !== undefined && !!filters[name].value?.toString().length;
     const min = formatConditionValue({
         value: hasFilter ? filters[name].min : null,
@@ -8964,6 +8989,11 @@ const OverlayHeaderMixin = (overlay) => css `
     }
   }
 `;
+const NoFeatureHeaderMixin = css `
+  &&& {
+    min-height: 5.5rem;
+  }
+`;
 const Header = styled(Flex) `
   z-index: 1;
   position: relative;
@@ -8976,6 +9006,8 @@ const Header = styled(Flex) `
   ${({ $isRow }) => $isRow && RowHeaderMixin};
 
   ${({ $overlay }) => $overlay && OverlayHeaderMixin($overlay)};
+
+  ${({ $noFeature }) => $noFeature && NoFeatureHeaderMixin};
 `;
 const DefaultHeaderWrapper = styled.div `
   width: ${({ withPadding }) => (withPadding ? "100%" : "calc(100% + 1rem)")};
@@ -8984,6 +9016,12 @@ const DefaultHeaderWrapper = styled.div `
   background: url(${img$4}) 50% -2rem no-repeat;
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
 
+  ${({ $noFeature }) => $noFeature &&
+    css `
+      background-position: center;
+      background-size: cover;
+    `};
+
   ${({ fontColor }) => !!fontColor && HeaderFontColorMixin};
 `;
 
@@ -8992,7 +9030,9 @@ const HeaderTitle = ({ noFeature }) => {
     const { attributes, layerInfo, feature } = useWidgetContext(WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const { configuration } = layerInfo || {};
-    const resultDescription = configuration?.alias || configuration?.name || "";
+    const resultDescription = noFeature
+        ? t("allLayers", { ns: "dashboard", defaultValue: "Все слои" })
+        : configuration?.alias || configuration?.name || "";
     const resultTitle = useMemo(() => {
         const layerDefinitionAttribute = configuration && attributes?.length
             ? attributes.find(item => item.attributeName === configuration?.attributesConfiguration?.titleAttribute)
@@ -9073,14 +9113,32 @@ const LayerIconClickable = styled.div `
   align-items: center;
   cursor: pointer;
 `;
+const NoFeatureIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  margin-right: 1rem;
+  margin-left: 0.25rem;
+
+  ${Icon}::after {
+    font-size: 1.5rem;
+    color: ${({ theme: { palette } }) => palette.iconDisabled};
+  }
+`;
 
-const HeaderLayerIcon = () => {
+const HeaderLayerIcon = ({ noFeature }) => {
     const { t } = useGlobalContext();
     const { layerInfo, feature } = useWidgetContext(WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const getMaxZoomTo = useMaxZoomTo();
     const [optionsMaxZoomTo, layerMaxZoomTo] = useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
     const handleIconClick = useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
+    if (noFeature) {
+        return (jsx(NoFeatureIcon, { children: jsx(Icon, { kind: "no_geom" }) }));
+    }
     return (jsx(LayerIconClickable, { onClick: handleIconClick, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsx(LayerIcon, { innerRef: ref, layerInfo: layerInfo })) }) }));
 };
 
@@ -9089,7 +9147,7 @@ const FeatureCardDefaultHeader = ({ noFeature }) => {
     const { header } = config || {};
     const { options } = header || {};
     const { themeName, withPadding, column, height, overlay } = options || {};
-    return (jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, children: jsx(ThemeProvider, { theme: getThemeByName(themeName), children: jsx(Header, { "$overlay": overlay, "$isRow": !column, children: jsxs(HeaderFrontView, { isDefault: !column, children: [jsxs(HeaderContainer, { children: [jsx(HeaderLayerIcon, {}), jsx(HeaderTitle, { noFeature: noFeature })] }), jsx(FeatureCardButtons, {})] }) }) }) }));
+    return (jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, "$noFeature": noFeature, children: jsx(ThemeProvider, { theme: getThemeByName(themeName), children: jsx(Header, { "$overlay": overlay, "$isRow": !column, "$noFeature": noFeature, children: jsxs(HeaderFrontView, { isDefault: !column, children: [jsxs(HeaderContainer, { children: [jsx(HeaderLayerIcon, { noFeature: noFeature }), jsx(HeaderTitle, { noFeature: noFeature })] }), jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
 const ImageContainerButton = styled(FlatButton) `
@@ -11308,7 +11366,7 @@ const ChipsFilter = ({ type, filter, elementConfig, }) => {
                 icon: chipIcon,
             };
         });
-    }, [configFilter, dataSources, colorAttribute, iconAttribute, theme]);
+    }, [variants, configFilter, dataSources, iconAttribute, colorAttribute, theme]);
     const isChipActive = useCallback((chipValue) => {
         const currentValue = filters?.[filterName]?.value;
         if (currentValue === undefined) {
@@ -11384,6 +11442,339 @@ function getIconFromAttribute(option, iconAttribute) {
     return getResourceUrl(iconValue);
 }
 
+const MAX_ANCESTOR_DEPTH = 50;
+const buildLevelOneCondition = (attributeLevel) => `${attributeLevel} = 1`;
+const buildChildrenCondition = (attributeParentValue, parentId) => `${attributeParentValue} = ${formatConditionValue({ value: parentId })}`;
+const buildSearchCondition = (attributeAlias, query) => `${attributeAlias} LIKE '%${query.replace(/'/g, "''")}%'`;
+const buildIdsCondition = (attributeValue, ids) => `${attributeValue} in ${formatConditionValue({ value: ids })}`;
+/** Группирует выбранные id по уровню в объектное значение фильтра `{ l{N}: [ids] }`. */
+const buildFilterValue = (selected) => {
+    const result = {};
+    selected.forEach((level, id) => {
+        const key = `l${level}`;
+        if (!result[key]) {
+            result[key] = [];
+        }
+        result[key].push(id);
+    });
+    return result;
+};
+/** Разбирает объектное значение фильтра в карту `id → level`. */
+const parseFilterValue = (value) => {
+    const result = new Map();
+    if (!value) {
+        return result;
+    }
+    Object.keys(value).forEach(levelKey => {
+        const level = Number(levelKey.replace(/^l/, ""));
+        value[levelKey]?.forEach(id => result.set(id, level));
+    });
+    return result;
+};
+/**
+ * Дозапрашивает цепочку предков вверх по `parentId` уровень за уровнем (батч `id in (...)`),
+ * пока не достигнет уровня 1. Возвращает исходные узлы вместе с предками.
+ */
+const collectAncestors = async (nodes, loadByIds) => {
+    const byId = new Map();
+    nodes.forEach(node => byId.set(node.id, 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);
+            }
+        });
+        if (!missingParents.size) {
+            break;
+        }
+        const parents = await loadByIds([...missingParents]);
+        if (!parents.length) {
+            break;
+        }
+        parents.forEach(parent => byId.set(parent.id, parent));
+        frontier = parents;
+    }
+    return [...byId.values()];
+};
+/**
+ * Собирает плоский набор узлов в дерево по `parentId`. Узлы с подгруженными потомками
+ * раскрываются; листья-папки без потомков получают `children = null` (ленивая подгрузка).
+ */
+const assembleTree = (nodes) => {
+    const nodesById = new Map();
+    nodes.forEach(node => nodesById.set(node.id, node));
+    const childrenMap = new Map();
+    nodesById.forEach(node => {
+        const parentId = node.data?.parentId;
+        if (parentId != null && nodesById.has(parentId)) {
+            const siblings = childrenMap.get(parentId) ?? [];
+            siblings.push(node);
+            childrenMap.set(parentId, siblings);
+        }
+    });
+    const roots = [];
+    const expanded = [];
+    nodesById.forEach(node => {
+        const kids = childrenMap.get(node.id);
+        if (kids?.length) {
+            node.children = kids;
+            expanded.push(node.id);
+        }
+        else if (node.isLeaf) {
+            node.children = null;
+        }
+        const parentId = node.data?.parentId;
+        if (parentId == null || !nodesById.has(parentId)) {
+            roots.push(node);
+        }
+    });
+    return { roots, expanded };
+};
+
+const useTreeFilterData = (type, filterName) => {
+    const { api } = useGlobalContext();
+    const { currentPage } = useWidgetPage(type);
+    const configFilter = 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 layerName = useMemo(() => currentPage?.dataSources?.find(({ name }) => name === relatedDataSource)?.layerName, [currentPage?.dataSources, relatedDataSource]);
+    const mapNode = useCallback(({ properties }) => {
+        const hasChildren = attributeHasChildren ? !!properties[attributeHasChildren] : false;
+        const data = {
+            parentId: attributeParentValue ? properties[attributeParentValue] ?? null : null,
+            level: attributeLevel ? Number(properties[attributeLevel]) : 1,
+        };
+        return {
+            id: properties[attributeValue],
+            text: String(properties[attributeAlias] ?? ""),
+            isLeaf: hasChildren,
+            children: hasChildren ? null : undefined,
+            data,
+        };
+    }, [attributeValue, attributeAlias, attributeParentValue, attributeLevel, attributeHasChildren]);
+    const runQuery = useCallback(async (condition) => {
+        if (!layerName) {
+            return [];
+        }
+        const response = await api.layers.getFeatures(layerName, { withGeom: false, limit, conditions: [condition] });
+        return response.features ?? [];
+    }, [api, layerName, limit]);
+    const loadLevelOne = useCallback(async () => {
+        if (!attributeLevel) {
+            return [];
+        }
+        const features = await runQuery(buildLevelOneCondition(attributeLevel));
+        return features.map(mapNode);
+    }, [attributeLevel, runQuery, mapNode]);
+    const loadChildren = useCallback(async (item) => {
+        if (!attributeParentValue) {
+            return { children: [] };
+        }
+        const features = await runQuery(buildChildrenCondition(attributeParentValue, item.id));
+        return { children: features.map(mapNode) };
+    }, [attributeParentValue, runQuery, mapNode]);
+    const searchNodes = useCallback(async (query) => {
+        const features = await runQuery(buildSearchCondition(attributeAlias, query));
+        return features.map(mapNode);
+    }, [attributeAlias, runQuery, mapNode]);
+    const loadByIds = useCallback(async (ids) => {
+        if (!ids.length) {
+            return [];
+        }
+        const features = await runQuery(buildIdsCondition(attributeValue, ids));
+        return features.map(mapNode);
+    }, [attributeValue, runQuery, mapNode]);
+    return { configFilter, layerName, loadLevelOne, loadChildren, searchNodes, loadByIds };
+};
+
+const SEARCH_MIN_LENGTH = 3;
+const SEARCH_DEBOUNCE = 300;
+const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
+    const [searchValue, setSearchValue] = useState("");
+    const [searchData, setSearchData] = useState([]);
+    const [searchExpanded, setSearchExpanded] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const timer = useRef();
+    const requestId = useRef(0);
+    const isSearchActive = searchValue.trim().length >= SEARCH_MIN_LENGTH;
+    const runSearch = useCallback(async (query) => {
+        const id = ++requestId.current;
+        setSearching(true);
+        try {
+            const results = await searchNodes(query);
+            const withAncestors = await collectAncestors(results, loadByIds);
+            const { roots, expanded } = assembleTree(withAncestors);
+            if (id !== requestId.current) {
+                return;
+            }
+            setSearchData(roots);
+            setSearchExpanded(expanded);
+        }
+        finally {
+            if (id === requestId.current) {
+                setSearching(false);
+            }
+        }
+    }, [searchNodes, loadByIds]);
+    const clearSearchState = useCallback(() => {
+        requestId.current++;
+        setSearchData([]);
+        setSearchExpanded([]);
+        setSearching(false);
+    }, []);
+    const onSearchChange = useCallback((value) => {
+        setSearchValue(value);
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        const query = value.trim();
+        if (query.length < SEARCH_MIN_LENGTH) {
+            clearSearchState();
+            return;
+        }
+        timer.current = setTimeout(() => runSearch(query), SEARCH_DEBOUNCE);
+    }, [runSearch, clearSearchState]);
+    const resetSearch = useCallback(() => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        setSearchValue("");
+        clearSearchState();
+    }, [clearSearchState]);
+    return {
+        searchValue,
+        isSearchActive,
+        searching,
+        searchData,
+        setSearchData,
+        searchExpanded,
+        setSearchExpanded,
+        onSearchChange,
+        resetSearch,
+    };
+};
+
+const useTreeFilterSelection = (type, filterName, configFilter) => {
+    const { filters, changeFilters } = useWidgetContext(type);
+    const [selected, setSelected] = useState(() => parseFilterValue(configFilter?.defaultValue));
+    const [selectedLabel, setSelectedLabel] = useState();
+    const selectedIds = useMemo(() => new Set(selected.keys()), [selected]);
+    const commit = useCallback((next) => {
+        setSelected(next);
+        changeFilters({ [filterName]: { value: buildFilterValue(next) } }, configFilter?.resetFilters);
+    }, [changeFilters, filterName, configFilter?.resetFilters]);
+    const onToggleSelect = useCallback((item, multiSelect) => {
+        const level = item.data?.level ?? 1;
+        const next = new Map(selected);
+        if (next.has(item.id)) {
+            next.delete(item.id);
+            if (!multiSelect) {
+                setSelectedLabel(undefined);
+            }
+        }
+        else {
+            if (!multiSelect) {
+                next.clear();
+                setSelectedLabel(item.text);
+            }
+            next.set(item.id, level);
+        }
+        commit(next);
+    }, [selected, commit]);
+    const onReset = useCallback(() => {
+        setSelectedLabel(undefined);
+        commit(new Map());
+    }, [commit]);
+    const initRef = useRef(false);
+    useEffect(() => {
+        if (initRef.current) {
+            return;
+        }
+        initRef.current = true;
+        if (selected.size && filters[filterName] === undefined) {
+            changeFilters({ [filterName]: { value: buildFilterValue(selected) } });
+        }
+    }, [filters, filterName, changeFilters, selected]);
+    return { selected, selectedIds, selectedLabel, onToggleSelect, onReset };
+};
+
+const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
+    const [treeData, setTreeData] = useState([]);
+    const [treeExpanded, setTreeExpanded] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const loadedRef = useRef(false);
+    const selectedRef = useRef(selected);
+    selectedRef.current = selected;
+    const onOpen = useCallback(async () => {
+        if (loadedRef.current) {
+            return;
+        }
+        loadedRef.current = true;
+        setLoading(true);
+        try {
+            const roots = await loadLevelOne();
+            const preselected = [...selectedRef.current.keys()];
+            if (!preselected.length) {
+                setTreeData(roots);
+                return;
+            }
+            const selectedNodes = await loadByIds(preselected);
+            const withAncestors = await collectAncestors([...roots, ...selectedNodes], loadByIds);
+            const { roots: assembled, expanded } = assembleTree(withAncestors);
+            setTreeData(assembled);
+            setTreeExpanded(expanded);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [loadLevelOne, loadByIds]);
+    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 { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen } = useTreeFilterTree({
+        selected,
+        loadLevelOne,
+        loadByIds,
+    });
+    const search = useTreeFilterSearch({ searchNodes, loadByIds });
+    const onToggleSelect = useCallback(item => toggleSelect(item, multiSelect), [toggleSelect, multiSelect]);
+    const onClose = useCallback(() => search.resetSearch(), [search]);
+    const view = useMemo(() => search.isSearchActive
+        ? { data: search.searchData, setData: search.setSearchData, expanded: search.searchExpanded, setExpanded: search.setSearchExpanded }
+        : { data: treeData, setData: setTreeData, expanded: treeExpanded, setExpanded: setTreeExpanded }, [search.isSearchActive, search.searchData, search.setSearchData, search.searchExpanded, search.setSearchExpanded, treeData, setTreeData, treeExpanded, setTreeExpanded]);
+    return {
+        width: width ? `${width}px` : undefined,
+        placeholder,
+        multiSelect,
+        loading: loading || search.searching,
+        data: view.data,
+        setData: view.setData,
+        expanded: view.expanded,
+        setExpanded: view.setExpanded,
+        onLoadChildren: loadChildren,
+        selectedIds,
+        selectedCount: selectedIds.size,
+        selectedLabel,
+        searchValue: search.searchValue,
+        onSearchChange: search.onSearchChange,
+        onOpen,
+        onClose,
+        onToggleSelect,
+        onReset,
+    };
+};
+
+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 (jsx(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 getFilterComponent = (filterType) => {
     switch (filterType) {
         case "checkbox":
@@ -11398,6 +11789,8 @@ const getFilterComponent = (filterType) => {
             return TextFilter;
         case "chips":
             return ChipsFilter;
+        case "tree":
+            return TreeFilter;
         case "dropdown":
         default:
             return DropdownFilter;
@@ -12370,11 +12763,18 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
     ]);
     const getUpdatingDataSources = useCallback(() => {
         const diffFilterNames = filters
-            ? Object.keys(filters).filter(key => Array.isArray(filters[key].value)
-                ? filters[key].value.length !==
-                    prevFilters.current[key]?.value?.length ||
-                    filters[key].value.some((item, index) => item !== prevFilters.current[key]?.value?.[index])
-                : filters[key].value !== prevFilters.current[key]?.value)
+            ? Object.keys(filters).filter(key => {
+                const { value } = filters[key];
+                const prevValue = prevFilters.current[key]?.value;
+                if (isTreeFilterValue(value) || isTreeFilterValue(prevValue)) {
+                    return JSON.stringify(value) !== JSON.stringify(prevValue);
+                }
+                if (Array.isArray(value)) {
+                    return (value.length !== prevValue?.length ||
+                        value.some((item, index) => item !== prevValue?.[index]));
+                }
+                return value !== prevValue;
+            })
             : [];
         if (!diffFilterNames.length)
             return;
@@ -13905,5 +14305,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { ALIGNMENTS, AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, CHART_TYPES, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_FILTER_PADDING, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardBackgroundHeader, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFontColorMixin, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, POLL_SUBTASK_INTERVAL_MS, POLL_SUBTASK_TIMEOUT_MS, PROVIDER_PREFIX, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, ProviderPrefix, RoundedBackgroundContainer, SAVE_HOOK_RESULT_DURATION, SERVER_NOTIFICATION_EVENT, STACK_BAR_TOTAL_HEIGHT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, VIEW_MODES, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, asAttributeName, asChartId, asContainerId, asDataSourceName, asFilterName, asLayerName, asModalId, asResourceId, asTabId, checkEqualOrIncludes, checkIsLoading, createConfigLayer, createConfigPage, createNewPageId, createSaveNotificationId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, geometryToEwkt, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getThemeByName, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isHookActive, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, metersPerPixel, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, toRenderableValue, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, updateDataSource, useAfterSave, useAppHeight, useAttachmentItems, useAttachmentPreviewImages, useAutoCompleteControl, useBeforeSave, useChartChange, useChartData, useContainerAttributes, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useEditGroupAttributes, useExpandableContainers, useExportPdf, useFeatureSaveHooks, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRemoteTask, useRenderElement, useSavePrototypeBuilder, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { ALIGNMENTS, AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, CHART_TYPES, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_FILTER_PADDING, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardBackgroundHeader, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFontColorMixin, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, POLL_SUBTASK_INTERVAL_MS, POLL_SUBTASK_TIMEOUT_MS, PROVIDER_PREFIX, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, ProviderPrefix, RoundedBackgroundContainer, SAVE_HOOK_RESULT_DURATION, SERVER_NOTIFICATION_EVENT, STACK_BAR_TOTAL_HEIGHT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, VIEW_MODES, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyTreeFilterToCondition, applyVarsToCondition, asAttributeName, asChartId, asContainerId, asDataSourceName, asFilterName, asLayerName, asModalId, asResourceId, asTabId, checkEqualOrIncludes, checkIsLoading, createConfigLayer, createConfigPage, createNewPageId, createSaveNotificationId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, geometryToEwkt, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getThemeByName, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isHookActive, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isTreeFilterValue, isVisibleContainer, metersPerPixel, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, toRenderableValue, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, updateDataSource, useAfterSave, useAppHeight, useAttachmentItems, useAttachmentPreviewImages, useAutoCompleteControl, useBeforeSave, useChartChange, useChartData, useContainerAttributes, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useEditGroupAttributes, useExpandableContainers, useExportPdf, useFeatureSaveHooks, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRemoteTask, useRenderElement, useSavePrototypeBuilder, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map