udp-react-enterprise-component-library 25.14.1-beta.9 → 25.16.0

package/dist/MapLayout-CVBdE9Q8.js

@@ -1,790 +0,0 @@
-import { FluentIconButton } from "./FluentIconButton-le92OnEc.js";
-import { StandardTitle } from "./StandardTitle-DkEO3oI5.js";
-import { StatusChip } from "./StatusChip-Bw-0wE_B.js";
-import { Adornment } from "./Adornment-9YJw6GPr.js";
-import { AmbientCard } from "./AmbientCard-Cp-eNzrW.js";
-import { AmbientGridTemplate } from "./AmbientGridTemplate-VQA7Q_L7.js";
-import { IconButtonWithTooltip } from "./IconButtonWithToolTip-DQacH9wQ.js";
-import { GridRow, GridUnit } from "./GridRow-DZXcsSu-.js";
-import { FluentTextField } from "./FluentTextField-DCzp_6wE.js";
-import { useAuthedUser } from "./useAuthedUser-BbuZ-TTz.js";
-import { CompactDataListItem } from "./CompactDataListItem-DMGFdFDP.js";
-import { CompactDataList } from "./CompactDataList-drOdcMN5.js";
-import { UdpMapComponent, UdpMapToolbar } from "./UdpMapToolbar-DrHSV4fT.js";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Avatar, Card, CardContent, Collapse, Grid, Typography, lighten, makeStyles } from "@material-ui/core";
-import clsx from "clsx";
-import { ChevronDownIcon, ChromeCloseIcon, MapPinIcon, ViewIcon } from "@fluentui/react-icons";
-import { isArray, isEqualWith, isObject, startCase } from "lodash";
-import { useTranslation } from "react-i18next";
-import { Circle, Fill, Icon, Stroke, Style } from "ol/style";
-import { transform } from "ol/proj";
-import proj4 from "proj4";
-import { register } from "ol/proj/proj4";
-import TruckIcon from "./assets/unityIcons/TruckIcon.svg";
-
-//#region src/UI/mapLayout/ui/CompactCard.jsx
-const useStyles$2 = makeStyles((theme) => ({
-	titleWrapper: {
-		display: "flex",
-		justifyContent: "space-between",
-		gap: theme.spacing(1)
-	},
-	subtitleWrapper: {
-		display: "flex",
-		paddingBottom: 0,
-		alignItems: "center",
-		gap: theme.spacing(1)
-	},
-	title: {
-		flex: 1,
-		lineHeight: "125%"
-	},
-	expand: {
-		transform: "rotate(0deg)",
-		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
-	},
-	expandOpen: { transform: "rotate(180deg)" },
-	expandButtonWrapper: {
-		display: "flex",
-		justifyContent: "space-between"
-	},
-	sectionWrapper: { marginTop: theme.spacing(1.5) },
-	iconButtonWrapper: { borderRadius: 2 },
-	avatar: {
-		width: "80px",
-		height: "80px"
-	},
-	contentWrapper: { flex: 2 },
-	secondaryText: {
-		color: "inherit",
-		opacity: .6
-	},
-	cardContent: {
-		flex: 1,
-		paddingTop: 0,
-		"&:last-child": { paddingBottom: theme.spacing(2) }
-	}
-}));
-const CompactCard = (props) => {
-	const { title, primaryText, secondaryText, noWrap = false, extendedList = [], status = "info", statusLabel, statusVariant, showAdornment = true, avatar, imageAvatarSrc, overrideStatusError, overrideStatusInfo, overrideStatusSuccess, overrideStatusWarning, iconButtons = [], children } = props;
-	const [expanded, setExpanded] = useState(false);
-	const classes = useStyles$2();
-	return /* @__PURE__ */ React.createElement("div", { style: {
-		display: "flex",
-		height: "100%",
-		width: "100%"
-	} }, showAdornment && status && /* @__PURE__ */ React.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(Adornment, { color: status })), /* @__PURE__ */ React.createElement(Card, { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(CardContent, { className: classes.subtitleWrapper }, imageAvatarSrc && /* @__PURE__ */ React.createElement(Avatar, {
-		variant: "square",
-		className: classes.avatar,
-		src: imageAvatarSrc
-	}), avatar && /* @__PURE__ */ React.createElement(Avatar, {
-		variant: "square",
-		className: classes.avatar
-	}, avatar), /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, title), status && statusLabel && /* @__PURE__ */ React.createElement(StatusChip, {
-		status,
-		label: statusLabel,
-		success: overrideStatusSuccess,
-		error: overrideStatusError,
-		warning: overrideStatusWarning,
-		info: overrideStatusInfo,
-		variant: statusVariant
-	})), /* @__PURE__ */ React.createElement(Typography, {
-		variant: "body2",
-		noWrap
-	}, primaryText), /* @__PURE__ */ React.createElement(Typography, {
-		variant: "body2",
-		className: classes.secondaryText
-	}, secondaryText))), children, (extendedList?.length > 0 || iconButtons?.length > 0) && /* @__PURE__ */ React.createElement(CardContent, { className: classes.cardContent }, /* @__PURE__ */ React.createElement("div", { className: classes.sectionWrapper }, /* @__PURE__ */ React.createElement(Collapse, {
-		in: expanded,
-		timeout: "auto",
-		unmountOnExit: true
-	}, /* @__PURE__ */ React.createElement(CompactDataList, { disableSeparator: false }, extendedList?.map((item) => /* @__PURE__ */ React.createElement(CompactDataListItem, {
-		label: item?.label,
-		value: item?.value
-	})))), /* @__PURE__ */ React.createElement("div", { className: classes.expandButtonWrapper }, /* @__PURE__ */ React.createElement("div", null, extendedList?.length > 0 && /* @__PURE__ */ React.createElement(FluentIconButton, {
-		className: clsx(classes.expand, { [classes.expandOpen]: expanded }, classes.iconButtonWrapper),
-		onClick: () => setExpanded(!expanded),
-		icon: ChevronDownIcon
-	})), /* @__PURE__ */ React.createElement("div", null, iconButtons?.length > 0 && iconButtons?.map((iconButton) => /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
-		className: classes.iconButtonWrapper,
-		icon: iconButton?.icon,
-		onClick: iconButton?.onclick,
-		title: iconButton?.title,
-		size: "small",
-		...iconButton
-	}))))))));
-};
-
-//#endregion
-//#region src/UI/mapLayout/utilities/MapUtilities.js
-const getChildrenObjectsWithNoChildren = (arr, valueKey) => {
-	if (!!!arr) return [];
-	return arr.reduce((result, obj) => {
-		const children = obj?.options ?? [];
-		const childrenWithNoChildren = getChildrenObjectsWithNoChildren(children, valueKey);
-		if (childrenWithNoChildren.length > 0) result.push(...childrenWithNoChildren);
-		else if (children.length === 0) result.push(obj[valueKey]);
-		return result;
-	}, []);
-};
-const getLayer = (layerKeys, layerKeySeparator, obj) => {
-	let stringValue = "";
-	layerKeys?.forEach((key, index) => {
-		stringValue += obj[key] + (index !== layerKeys?.length - 1 ? layerKeySeparator : "");
-	});
-	return stringValue;
-};
-const generateGeoJsonList = (data, mappingConfig) => {
-	if (data?.length > 0 && mappingConfig) return data?.map((item) => {
-		return {
-			type: "Feature",
-			id: item[mappingConfig.featureId],
-			geometry: {
-				type: item[mappingConfig.geometryType],
-				coordinates: item[mappingConfig.coordinates]
-			},
-			properties: mappingConfig.propertiesObj && !!item[mappingConfig.propertiesObj] ? {
-				...item[mappingConfig.propertiesObj],
-				id: item[mappingConfig.featureId]
-			} : {
-				...item,
-				id: item[mappingConfig.featureId]
-			}
-		};
-	});
-	return [];
-};
-const isEqualIgnoreFunctions = (a, b) => isEqualWith(a, b, (val1, val2) => {
-	if (typeof val1 === "function" && typeof val2 === "function") return true;
-});
-
-//#endregion
-//#region src/UI/mapLayout/ui/ListView.jsx
-const useStyles$1 = makeStyles((theme) => ({
-	noDataWrapper: {
-		position: "absolute",
-		top: "50%",
-		left: "50%",
-		transform: "translate(-50%, -50%)"
-	},
-	chipContainer: {
-		display: "flex",
-		gap: theme.spacing(1),
-		flexWrap: "wrap",
-		marginTop: theme.spacing(1),
-		margin: theme.spacing(0, 1)
-	},
-	chipContent: {
-		margin: theme.spacing(1),
-		marginBottom: 0
-	}
-}));
-const ListView = (props) => {
-	const { data, listViewConfig, noWrapPrimaryText, viewEvent, showMarkerEvent, chipConfig } = props;
-	const [activeChip, setActiveChip] = useState(null);
-	const [filteredData, setFilteredData] = useState(data);
-	const { t } = useTranslation();
-	const classes = useStyles$1();
-	useEffect(() => {
-		if (!chipConfig || chipConfig.length === 0) {
-			setFilteredData(data);
-			setActiveChip(null);
-			return;
-		}
-		const defaultChip = chipConfig.find((chip) => chip?.default) ?? chipConfig[0];
-		if (!activeChip) setActiveChip(defaultChip);
-		else {
-			const updatedChip = chipConfig.find((chip) => chip.id === activeChip.id);
-			if (updatedChip && (updatedChip !== activeChip || !isEqualIgnoreFunctions(updatedChip, activeChip))) setActiveChip(updatedChip);
-			else if (!updatedChip) setActiveChip(defaultChip);
-		}
-	}, [chipConfig, activeChip]);
-	useEffect(() => {
-		if (!chipConfig || chipConfig.length === 0) {
-			setFilteredData(data);
-			return;
-		}
-		if (activeChip?.filterData) setFilteredData(activeChip.filterData(data, activeChip));
-		else setFilteredData(data);
-	}, [activeChip, data]);
-	const handleOnClickChip = useCallback((chip) => {
-		if (chip?.onClick) chip?.onClick(data, chip);
-		setActiveChip(chip);
-	}, [data]);
-	return /* @__PURE__ */ React.createElement("div", null, chipConfig?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.chipContainer }, chipConfig?.map((chip, index) => {
-		return /* @__PURE__ */ React.createElement(StatusChip, {
-			key: `${index}-${chip?.label}`,
-			label: chip?.label,
-			status: chip?.id === activeChip?.id ? "info" : "default",
-			variant: "outlined",
-			icon: chip?.icon,
-			onClick: () => {
-				console.log("chip clicked", chip);
-				handleOnClickChip(chip);
-			},
-			isActionable: !chip?.disabled
-		});
-	})), activeChip?.content && /* @__PURE__ */ React.createElement("div", { className: classes.chipContent }, activeChip?.content), filteredData?.length > 0 ? filteredData?.map((record, index) => {
-		const extendedListData = listViewConfig?.extendedListFields?.map((item) => {
-			return {
-				label: startCase(item),
-				value: record[item] ?? "N/A"
-			};
-		});
-		const iconButtons = [
-			...listViewConfig?.iconButtons?.map((config) => ({
-				...config,
-				onClick: () => {
-					if (config?.onClick) config?.onClick(record);
-				}
-			})) ?? [],
-			{
-				title: t("Show Marker"),
-				icon: MapPinIcon,
-				onClick: () => {
-					showMarkerEvent(record);
-				}
-			},
-			{
-				title: t("View"),
-				icon: ViewIcon,
-				onClick: () => {
-					viewEvent(record);
-				}
-			}
-		];
-		const title = listViewConfig?.getTitle ? listViewConfig?.getTitle(record) : record[listViewConfig?.titleField];
-		return /* @__PURE__ */ React.createElement(GridRow, null, /* @__PURE__ */ React.createElement(GridUnit, null, /* @__PURE__ */ React.createElement(CompactCard, {
-			id: index,
-			title,
-			primaryText: record[listViewConfig?.primaryTextField],
-			secondaryText: record[listViewConfig?.secondaryTextField],
-			status: record[listViewConfig?.statusColor]?.toLowerCase(),
-			statusLabel: record[listViewConfig?.statusLabel],
-			statusVariant: listViewConfig?.statusVariant,
-			showAdornment: listViewConfig?.showAdornment,
-			avatar: record[listViewConfig?.avatar],
-			imageAvatarSrc: record[listViewConfig?.imageAvatarSrc],
-			noWrap: noWrapPrimaryText,
-			extendedList: extendedListData,
-			iconButtons
-		})));
-	}) : /* @__PURE__ */ React.createElement("div", { className: classes.noDataWrapper }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, t("No Data"))));
-};
-var ListView_default = ListView;
-
-//#endregion
-//#region src/UI/mapLayout/ui/ActionsRenderer.jsx
-const ActionsRenderer = (props) => {
-	const { openView, data, node } = props;
-	const { t } = useTranslation();
-	return /* @__PURE__ */ React.createElement("div", null, openView && !node?.group && /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
-		title: t("View"),
-		size: "small",
-		onClick: () => {
-			openView(data);
-		},
-		icon: ViewIcon
-	}));
-};
-var ActionsRenderer_default = ActionsRenderer;
-
-//#endregion
-//#region src/UI/mapLayout/MapLayout.jsx
-const useStyles = makeStyles((theme) => ({
-	fullHeight: {
-		height: "73vh",
-		backgroundColor: lighten(theme.palette.primary.light, .7),
-		overflow: "auto"
-	},
-	contentWrapper: { display: "flex" },
-	detailSheetHeader: {
-		display: "flex",
-		backgroundColor: theme.palette.background.paper,
-		padding: theme.spacing(1),
-		alignItems: "center",
-		gap: theme.spacing(1.5)
-	},
-	detailSheetBody: { padding: theme.spacing(2) },
-	detailTitle: { marginTop: 0 },
-	leftColumn: {
-		overflow: "auto",
-		backgroundColor: lighten(theme.palette.primary.light, .7)
-	},
-	listViewWrapper: { position: "relative" },
-	zoomControl: {
-		left: "auto",
-		right: theme.spacing(.8),
-		top: theme.spacing(5)
-	}
-}));
-const styles = {
-	Point: [new Style({
-		image: new Icon({
-			anchor: [.17, 48],
-			anchorXUnits: "fraction",
-			anchorYUnits: "pixels",
-			src: TruckIcon,
-			scale: .3
-		}),
-		zIndex: 1
-	}), new Style({
-		image: new Circle({
-			stroke: new Stroke({
-				color: "#0F62FE",
-				width: 1
-			}),
-			fill: new Fill({ color: "#FFFFFF" }),
-			radius: 20,
-			scale: 1.1
-		}),
-		zIndex: 0
-	})],
-	LineString: new Style({
-		stroke: new Stroke({
-			color: "#0F62FE",
-			width: 4
-		}),
-		zIndex: 0
-	})
-};
-const MapLayout = (props) => {
-	const { data, initialSelectedLayers, shellContext, sideSheetTitle, cardConfig, noRightPanelPadding = false, isGeoJsonFormat = true, geoJsonMappingConfig, position = "default", showMap = true, showList, showGrid = true, getSelectedFeatures, getSelectedLayers, getSelectedViewItemData, rightSectionPanel, rightSectionPanelTitle, rightSectionPanelState, setRightSectionPanelState, overrideDetailRightSection = false, layerOptions, layerKeySeparator = "", statisticsList, hideZeroValueStats, defaultTileOptionName, hideTileSelection, filterPanel, filterCallback, selectedFeaturesActionPanel, refreshEvent, refreshButtonTooltip, readOnlyMap, addFeaturePanelConfig, noWrapPrimaryText, hideListView = false, listFilter, listViewCardConfig, listViewDetailsEvent, listViewChipConfig, popoverDetailsEvent, popoverPrimaryActions, popoverMoreIconButtonActions, getMessagePopover, getMessageIconPopover, hideMessageIconPopover, popoverWidth, enableViewFeature = true, enableDeleteFeature, handleDeleteFeature, enableEditFeature, handleEditFeature, mapTitle = "", getMapFeatureStyles, getSelectedFeatureStyles, tileLayersOptions, imageLayersOptions, mapZoom, mapCenter, mapProjection, addInteractions, selectedPin, mapHeight = "45vh", addressBar, mapDataProjection, crs, layerKeys, mapFilter, showZoomControl, readOnlyLayers, layerRoles, getVectorLayerSources, enableAddNewFeature, addMultipleFeatures = false, enableSplitFeature, handleAddNewFeatures, handleSplitFeature, handleGetZoomExtent, minZoom, maxZoom, gridTitle, columnDefs, groupingData, frameworkComponents, primaryActionButton, loading, rowNodeIdName, gridHeight = "50vh", paginationPageSize, onSearch, onRowSelected, rowModelType, api, columnApi, gridReady, onCellClicked, gridFilter,...otherGridProps } = props;
-	const [selectedFeatureProperties, setSelectedFeatureProperties] = useState();
-	const [showDetails, setShowDetails] = useState(false);
-	const [selectedItemData, setSelectedItemData] = useState();
-	const [definedProj, setDefinedProj] = useState(false);
-	const [enableDragBox, setEnableDragBox] = useState(false);
-	const [dataUpdateCount, setDataUpdateCount] = useState(0);
-	const [map, setMap] = useState(null);
-	const [filteredLayerOptions, setFilterLayerOptions] = useState();
-	const [bulkSelectionActive, setBulkSelectionActive] = useState(false);
-	const [splitActive, setSplitActive] = useState(false);
-	const [selectedFeatureCoordinates, setSelectedFeatureCoordinates] = useState();
-	const [addActive, setAddActive] = useState(false);
-	const [selectedFeatureIdExternal, setSelectedFeatureIdExternal] = useState();
-	const [currentCenter, setCurrentCenter] = useState(mapCenter ?? [0, 0]);
-	const [selectedLayers, setSelectedLayers] = useState([]);
-	const classes = useStyles();
-	const user = useAuthedUser();
-	const { t } = useTranslation();
-	useEffect(() => {
-		if (crs?.length > 0) {
-			proj4.defs(crs);
-			register(proj4);
-			setDefinedProj(true);
-		}
-	}, [crs]);
-	useEffect(() => {
-		if (getSelectedLayers) getSelectedLayers(selectedLayers);
-	}, [getSelectedLayers, selectedLayers]);
-	useEffect(() => {
-		if (getSelectedViewItemData) getSelectedViewItemData(selectedItemData);
-	}, [getSelectedViewItemData, selectedItemData]);
-	useEffect(() => {
-		if (!data) return;
-		if (dataUpdateCount === 0) setDataUpdateCount(dataUpdateCount + 1);
-		if (dataUpdateCount === 1) setSelectedFeatureProperties(null);
-	}, [data, dataUpdateCount]);
-	const filteredData = useMemo(() => {
-		if (!data) return [];
-		const formattedData = isGeoJsonFormat ? data : generateGeoJsonList(data, geoJsonMappingConfig);
-		if (filterPanel && filterCallback) return filterCallback(formattedData);
-		return formattedData;
-	}, [
-		data,
-		filterCallback,
-		filterPanel,
-		geoJsonMappingConfig,
-		isGeoJsonFormat
-	]);
-	const gridData = useMemo(() => {
-		return filteredData?.filter((obj) => {
-			const layerKey = getLayer(layerKeys, layerKeySeparator, obj);
-			if (layerRoles?.[layerKey]) return layerRoles[layerKey]?.some((roleId) => user.roleIds?.includes(roleId));
-			return true;
-		}).map((obj) => ({
-			id: obj.id,
-			...obj.properties
-		}));
-	}, [
-		filteredData,
-		layerKeySeparator,
-		layerKeys,
-		layerRoles,
-		user.roleIds
-	]);
-	const filteredGridData = useMemo(() => {
-		if (gridFilter) return gridFilter(gridData);
-		return gridData;
-	}, [gridData, gridFilter]);
-	const filteredListData = useMemo(() => {
-		if (listFilter) return listFilter(gridData);
-		return gridData;
-	}, [gridData, listFilter]);
-	useEffect(() => {
-		if (crs?.length > 0 && !definedProj) return;
-		if (filteredData?.[0]?.geometry?.coordinates && mapProjection && mapDataProjection) {
-			const coordinates = isArray(filteredData?.[0]?.geometry?.coordinates[0]) ? filteredData?.[0]?.geometry?.coordinates[0] : filteredData?.[0]?.geometry?.coordinates;
-			const newCenter = transform(coordinates, mapDataProjection, mapProjection);
-			setCurrentCenter(newCenter);
-		}
-	}, [
-		filteredData,
-		mapDataProjection,
-		mapProjection,
-		definedProj,
-		crs
-	]);
-	const getStyles = useCallback((feature) => {
-		const geometryType = feature.getGeometry().getType();
-		return styles[geometryType] ?? new Style();
-	}, []);
-	const handleViewDetailsFromPopover = useCallback((data$1) => {
-		const featureProperties = data$1?.selectedFeature?.getProperties();
-		if (popoverDetailsEvent) {
-			popoverDetailsEvent(featureProperties);
-			return;
-		}
-		if (setRightSectionPanelState) setRightSectionPanelState(false);
-		setShowDetails(true);
-		setSelectedItemData(featureProperties);
-		if (shellContext) shellContext.setInquiryMenuToggle(false);
-	}, [
-		popoverDetailsEvent,
-		setRightSectionPanelState,
-		shellContext
-	]);
-	const handleCloseDetailSheet = useCallback(() => {
-		setShowDetails(false);
-		if (setRightSectionPanelState) setRightSectionPanelState(false);
-		setSelectedItemData(null);
-	}, [setRightSectionPanelState]);
-	const handleViewDetailsFromList = useCallback((data$1) => {
-		setShowDetails(true);
-		if (setRightSectionPanelState) setRightSectionPanelState(false);
-		setSelectedItemData(data$1);
-		if (shellContext) shellContext.setInquiryMenuToggle(false);
-	}, [setRightSectionPanelState, shellContext]);
-	const itemDetails = useMemo(() => {
-		if (selectedItemData && !overrideDetailRightSection && !rightSectionPanelState) return Object.entries(selectedItemData).filter(([key, value]) => "geometry" !== key && !isObject(value) && !isArray(value)).map(([key, value]) => {
-			return /* @__PURE__ */ React.createElement(FluentTextField, {
-				label: startCase(key),
-				value,
-				InputProps: { readOnly: true }
-			});
-		});
-	}, [
-		overrideDetailRightSection,
-		rightSectionPanelState,
-		selectedItemData
-	]);
-	const gridColumnDefinition = useMemo(() => {
-		if (!columnDefs) return;
-		if (frameworkComponents?.actionsRenderer) return columnDefs;
-		else return [...columnDefs, {
-			headerName: t("Actions"),
-			field: "actions",
-			suppressSizeToFit: true,
-			minWidth: 100,
-			maxWidth: 125,
-			cellRenderer: "actionsRenderer",
-			cellRendererParams: { openView: (data$1) => handleViewDetailsFromList(data$1) },
-			sortable: false
-		}];
-	}, [columnDefs, frameworkComponents]);
-	const detailSheetHeight = useMemo(() => {
-		if (!showGrid) return "73vh";
-		else if (showGrid && !showMap) return `calc(67vh + 6vh)`;
-		else return `calc(${mapHeight} + ${gridHeight} + 6vh)`;
-	}, [
-		gridHeight,
-		mapHeight,
-		showGrid,
-		showMap
-	]);
-	const handleSelectLayers = (e) => {
-		setSelectedLayers(e);
-	};
-	const handleSelectMarker = useCallback((data$1) => {
-		setSelectedFeatureIdExternal(data$1?.id);
-	}, []);
-	const handleOnCellClicked = useCallback((params) => {
-		if (onCellClicked) onCellClicked(params);
-		if (!params?.node?.group && params?.colDef?.field !== "actions") handleSelectMarker(params?.data);
-	}, [handleSelectMarker, onCellClicked]);
-	const listView = useMemo(() => {
-		if (hideListView) return;
-		return /* @__PURE__ */ React.createElement(ListView_default, {
-			data: filteredListData ?? [],
-			listViewConfig: listViewCardConfig ?? cardConfig,
-			noWrapPrimaryText,
-			viewEvent: listViewDetailsEvent ?? handleViewDetailsFromList,
-			showMarkerEvent: handleSelectMarker,
-			chipConfig: listViewChipConfig
-		});
-	}, [
-		cardConfig,
-		filteredListData,
-		handleSelectMarker,
-		handleViewDetailsFromList,
-		hideListView,
-		listViewCardConfig,
-		listViewChipConfig,
-		listViewDetailsEvent,
-		noWrapPrimaryText
-	]);
-	const handleSetSelectedFeatureProperties = useCallback((currentFeature) => {
-		if (currentFeature) {
-			let featureProperties = currentFeature?.getProperties();
-			setSelectedFeatureCoordinates(currentFeature.getGeometry().getCoordinates());
-			setSelectedFeatureProperties(featureProperties);
-		}
-	}, []);
-	const handleCloseFeaturePopover = useCallback(() => {
-		setSelectedFeatureIdExternal(null);
-	}, []);
-	const handleSetMapComponent = useCallback((value) => {
-		setMap(value);
-	}, []);
-	const mapComponent = useMemo(() => {
-		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, {
-			item: true,
-			xs: 3,
-			style: { display: !hideListView && showList ? "block" : "none" }
-		}, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.fullHeight, classes.listViewWrapper) }, listView)), /* @__PURE__ */ React.createElement(Grid, {
-			item: true,
-			xs: showList ? 9 : 12
-		}, /* @__PURE__ */ React.createElement(UdpMapComponent, {
-			map,
-			handleSetMapComponent,
-			data,
-			isGeoJsonFormat,
-			geoJsonMappingConfig,
-			enableZoom: showZoomControl,
-			mapZoom,
-			mapCenter: currentCenter,
-			mapHeight,
-			crs,
-			mapProjection,
-			mapDataProjection,
-			getFilteredMapData: mapFilter,
-			getVectorLayerSources,
-			getFeatureStyles: getMapFeatureStyles ?? getStyles,
-			getSelectedFeatureStyles,
-			filterPanel,
-			filterPanelCallback: filterCallback,
-			enableTileSelection: !hideTileSelection,
-			tileLayersOptions,
-			defaultTileOptionName,
-			layerOptions,
-			initialSelectedLayers,
-			bulkSelectedFeaturesActionPanel: selectedFeaturesActionPanel,
-			handleSetSelectedFeaturesOnBulkSelect: getSelectedFeatures,
-			filterLayersByRole: layerRoles?.length > 0,
-			layerKeys,
-			layerKeySeparator,
-			user,
-			layerRoles,
-			filteredLayerOptionsByRole: filteredLayerOptions,
-			handleSetFilteredLayerOptionsByRole: setFilterLayerOptions,
-			enableViewFeature,
-			handleViewFeature: handleViewDetailsFromPopover,
-			bulkSelectionActive,
-			splitActive,
-			enableDragBox,
-			selectedFeatureCoordinates,
-			selectedFeatureProperties,
-			handleSetSelectedFeatureProperties,
-			enableAddNewFeature: addActive,
-			readOnlyLayers,
-			selectedFeatureIdExternal,
-			additionalOnclosePopover: handleCloseFeaturePopover,
-			popoverPrimaryActions,
-			popoverMoreIconButtonActions,
-			getMessagePopover,
-			getMessageIconPopover,
-			hideMessageIconPopover,
-			popoverCardConfig: cardConfig,
-			selectedLayers,
-			handleSetSelectedLayers: handleSelectLayers,
-			handleGetZoomExtent,
-			minZoom,
-			maxZoom
-		}))));
-	}, [
-		addActive,
-		bulkSelectionActive,
-		cardConfig,
-		classes.fullHeight,
-		classes.listViewWrapper,
-		crs,
-		currentCenter,
-		data,
-		defaultTileOptionName,
-		enableDragBox,
-		enableViewFeature,
-		filterCallback,
-		filterPanel,
-		filteredLayerOptions,
-		geoJsonMappingConfig,
-		getMapFeatureStyles,
-		getMessageIconPopover,
-		getMessagePopover,
-		getSelectedFeatureStyles,
-		getSelectedFeatures,
-		getStyles,
-		getVectorLayerSources,
-		handleCloseFeaturePopover,
-		handleGetZoomExtent,
-		handleSetMapComponent,
-		handleSetSelectedFeatureProperties,
-		handleViewDetailsFromPopover,
-		hideListView,
-		hideMessageIconPopover,
-		hideTileSelection,
-		initialSelectedLayers,
-		isGeoJsonFormat,
-		layerKeySeparator,
-		layerKeys,
-		layerOptions,
-		layerRoles,
-		listView,
-		map,
-		mapDataProjection,
-		mapFilter,
-		mapHeight,
-		mapProjection,
-		mapZoom,
-		maxZoom,
-		minZoom,
-		popoverMoreIconButtonActions,
-		popoverPrimaryActions,
-		readOnlyLayers,
-		selectedFeatureCoordinates,
-		selectedFeatureIdExternal,
-		selectedFeatureProperties,
-		selectedFeaturesActionPanel,
-		selectedLayers,
-		showList,
-		showZoomControl,
-		splitActive,
-		tileLayersOptions,
-		user
-	]);
-	const gridComponent = useMemo(() => {
-		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
-			title: gridTitle,
-			data: filteredGridData,
-			columnDefs: gridColumnDefinition,
-			groupingData,
-			frameworkComponents: {
-				actionsRenderer: ActionsRenderer_default,
-				...frameworkComponents
-			},
-			primaryActionButton,
-			loading,
-			rowNodeIdName,
-			height: showGrid && !showMap ? "67vh" : gridHeight,
-			paginationPageSize,
-			onSearch,
-			onRowSelected,
-			rowModelType,
-			api,
-			columnApi,
-			gridReady,
-			dynamicSizing: true,
-			onCellClicked: handleOnCellClicked,
-			...otherGridProps
-		}));
-	}, [
-		api,
-		columnApi,
-		filteredGridData,
-		frameworkComponents,
-		gridColumnDefinition,
-		gridHeight,
-		gridReady,
-		gridTitle,
-		groupingData,
-		handleOnCellClicked,
-		loading,
-		onRowSelected,
-		onSearch,
-		otherGridProps,
-		paginationPageSize,
-		primaryActionButton,
-		rowModelType,
-		rowNodeIdName,
-		showGrid,
-		showMap
-	]);
-	const mapGrid = useMemo(() => {
-		if (position === "gridOnTop") return /* @__PURE__ */ React.createElement("div", null, showGrid && gridComponent, showMap && mapComponent);
-		return /* @__PURE__ */ React.createElement("div", null, showMap && mapComponent, showGrid && gridComponent);
-	}, [
-		gridComponent,
-		mapComponent,
-		position,
-		showGrid,
-		showMap
-	]);
-	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(UdpMapToolbar, {
-		map,
-		mapTitle,
-		mapProjection,
-		getFeatureStyles: getMapFeatureStyles,
-		getSelectedFeatureStyles,
-		filterPanel,
-		filterPanelCallback: filterCallback,
-		enableTileSelection: !hideTileSelection,
-		tileLayersOptions,
-		defaultTileOptionName,
-		layerOptions,
-		initialSelectedLayers,
-		bulkSelectedFeaturesActionPanel: selectedFeaturesActionPanel,
-		handleSetSelectedFeaturesOnBulkSelect: getSelectedFeatures,
-		handleSetSelectedFeatureOnSelect: getSelectedViewItemData,
-		handleRefresh: refreshEvent,
-		refreshButtonTooltip,
-		readOnlyMap,
-		enableAdd: enableAddNewFeature,
-		handleAddNewFeatures,
-		addMultipleFeatures,
-		enableSplitFeature,
-		handleSplitFeature,
-		handleSetSelectedFeatureProperties,
-		filteredLayerOptionsByRole: filteredLayerOptions,
-		handleSetBulkSelectionActive: setBulkSelectionActive,
-		enableDragBox,
-		handleSetEnableDragBox: setEnableDragBox,
-		splitActive,
-		handleSetSplitActive: setSplitActive,
-		enableAddNewFeature: addActive,
-		handleEnableAddNewFeature: setAddActive,
-		readOnlyLayers,
-		selectedLayers,
-		handleSetSelectedLayers: handleSelectLayers,
-		addFeaturePanelConfig
-	}), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, {
-		item: true,
-		...showDetails || rightSectionPanelState ? {
-			xs: 7,
-			sm: 9
-		} : { xs: 12 }
-	}, mapGrid), (showDetails || rightSectionPanelState) && /* @__PURE__ */ React.createElement(Grid, {
-		item: true,
-		xs: 5,
-		sm: 3,
-		className: classes.leftColumn,
-		style: { maxHeight: detailSheetHeight }
-	}, /* @__PURE__ */ React.createElement("div", { className: classes.detailSheetHeader }, /* @__PURE__ */ React.createElement(FluentIconButton, {
-		onClick: handleCloseDetailSheet,
-		icon: ChromeCloseIcon
-	}), /* @__PURE__ */ React.createElement(StandardTitle, { className: classes.detailTitle }, rightSectionPanelTitle ?? t("Details"))), /* @__PURE__ */ React.createElement("div", { className: noRightPanelPadding ? null : classes.detailSheetBody }, rightSectionPanel && (rightSectionPanelState || showDetails && overrideDetailRightSection) && rightSectionPanel, showDetails && itemDetails && /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, itemDetails)))));
-};
-
-//#endregion
-export { CompactCard, MapLayout, getChildrenObjectsWithNoChildren };
-//# sourceMappingURL=MapLayout-CVBdE9Q8.js.map