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

package/dist/mapLayout-CxliPJ5p.js

@@ -0,0 +1,785 @@
+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-B58pNLnZ.js";
+import { IconButtonWithTooltip } from "./IconButtonWithToolTip-DQacH9wQ.js";
+import { GridRow, GridUnit } from "./GridRow-Bu4ZB7BW.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-QWDPJrR5.js";
+import { UdpMapComponent, UdpMapToolbar } from "./UdpMapToolbar-B6g5Kc_y.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) setCurrentCenter(transform(isArray(filteredData?.[0]?.geometry?.coordinates[0]) ? filteredData?.[0]?.geometry?.coordinates[0] : filteredData?.[0]?.geometry?.coordinates, mapDataProjection, mapProjection));
+	}, [
+		filteredData,
+		mapDataProjection,
+		mapProjection,
+		definedProj,
+		crs
+	]);
+	const getStyles = useCallback((feature) => {
+		return styles[feature.getGeometry().getType()] ?? 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-CxliPJ5p.js.map