@mapsight/ui 7.0.2 → 7.1.0

package/src/js/components/map-overlay/measure-distance-button.tsx

@@ -1,7 +1,7 @@
 import {Fragment, useCallback, useEffect, useMemo} from "react";
 import {useDispatch, useSelector} from "react-redux";
 
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {removeAllFeatures} from "@mapsight/core/lib/feature-sources/actions";
 import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";

package/src/js/components/map-overlay/mini-legend.jsx

@@ -7,11 +7,11 @@ import {useDispatch, useSelector} from "react-redux";
 
 import {MAP} from "../../config/constants/controllers";
 import {translate} from "../../helpers/i18n";
-import {setMiniLegendLayer, setOverlayModalVisible} from "../../store/actions.ts";
+import {setMiniLegendLayer, setOverlayModalVisible} from "../../store/actions";
 import {
 	isOverlayModalVisibleSelector,
 	miniLegendLayerIdSelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 
 const layersSelector = (state) =>
 	visibleLayersWithMiniLegendsSelector(state[MAP]);

package/src/js/components/map-overlay/region-selector.jsx

@@ -1,8 +1,8 @@
 import  {memo, useCallback} from "react";
 import {useDispatch, useSelector} from "react-redux";
-import {setSelectedRegionIdAndAnimateMap} from "../../store/actions.ts";
+import {setSelectedRegionIdAndAnimateMap} from "../../store/actions";
 
-import {regionsSelector, selectedRegionIdSelector} from "../../store/selectors.ts";
+import {regionsSelector, selectedRegionIdSelector} from "../../store/selectors";
 
 const RegionSelectorEntry = memo(
 	/**

package/src/js/components/map-overlay/search-overlay.jsx

@@ -5,7 +5,7 @@ import {translate} from "../../helpers/i18n";
 import {
 	haveSearchInMapSelector,
 	isViewMobileOrMapOnlySelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 import Modal from "../modal";
 
 import Search from "../search";

package/src/js/components/map-overlay/share-position-link-button.tsx

@@ -1,7 +1,7 @@
 import {Fragment, useCallback, useEffect, useMemo} from "react";
 import {useDispatch, useSelector} from "react-redux";
 
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {removeAllFeatures} from "@mapsight/core/lib/feature-sources/actions";
 import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";

package/src/js/components/map-synced-interlay/index.ts

@@ -0,0 +1,15 @@
+import {connect} from "react-redux";
+
+import {mapSizeSelector} from "@mapsight/core/lib/map/selectors";
+import type {MapState} from "@mapsight/core/lib/map/types";
+
+import {MAP} from "../../config/constants/controllers";
+import type {RootStateSlice} from "../../store/selectors";
+import {viewSelector} from "../../store/selectors";
+import MapSyncedInterlay from "./map-synced-interlay";
+
+export default connect((state: RootStateSlice) => ({
+	view: viewSelector(state),
+	size: mapSizeSelector(state[MAP] as MapState),
+	//pendingUpdateSize: state[MAP].pendingUpdateSize || false,
+}))(MapSyncedInterlay);

package/src/js/components/map-synced-interlay/map-synced-interlay.jsx

@@ -1,7 +1,7 @@
 import  {memo} from "react";
 import {useSelector} from "react-redux";
 
-import {isViewMobileOrMapOnlySelector} from "../../store/selectors.ts";
+import {isViewMobileOrMapOnlySelector} from "../../store/selectors";
 
 import Tooltip from "./tooltip";
 

package/src/js/components/map-synced-interlay/tooltip.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 import {useSelector} from "react-redux";
 
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {
 	type FeatureSelectionState,

package/src/js/components/map.tsx

@@ -0,0 +1,55 @@
+import type {HTMLAttributes} from "react";
+import {memo, useEffect, useMemo, useRef} from "react";
+import {useStore} from "react-redux";
+
+import type {EnhancedStore} from "@mapsight/core/types";
+
+import {MAP} from "../config/constants/controllers";
+import {translate} from "../helpers/i18n";
+import useMountable, {isMountable} from "../hooks/useMountable";
+
+type MapsightMapProps = HTMLAttributes<HTMLDivElement> & {
+	controllerName?: string;
+	enableKeyboardControl?: boolean;
+};
+
+function MapsightMap({
+	controllerName = MAP,
+	enableKeyboardControl = true,
+	...attributes
+}: MapsightMapProps) {
+	const store = useStore() as EnhancedStore;
+	const ref = useRef<HTMLDivElement>(null);
+
+	const mountable = useMemo(() => {
+		const controller = store.getController(controllerName);
+		if (!isMountable(controller)) {
+			console.error(`Controller '${controllerName}' is not mountable`);
+			return undefined;
+		}
+		return controller;
+	}, [store, controllerName]);
+	const handleMount = useMountable(mountable);
+	useEffect(() => {
+		if (ref.current) {
+			handleMount(ref.current);
+		}
+	}, [ref, handleMount]);
+
+	if (enableKeyboardControl) {
+		attributes.tabIndex = 0;
+	}
+
+	return (
+		<div className="ms3-map-target" ref={ref} {...attributes}>
+			<span className="ms3-visuallyhidden">
+				{translate("ui.map.visuallyhidden")}
+			</span>
+			<div className="ol-viewport">
+				<canvas className="ol-unselectable" />
+			</div>
+		</div>
+	);
+}
+
+export default memo(MapsightMap);

package/src/js/components/search/index.jsx

@@ -3,8 +3,8 @@ import {useDispatch, useSelector} from "react-redux";
 
 import {translate} from "../../helpers/i18n";
 import useDebounce from "../../hooks/useDebounce";
-import {search} from "../../store/actions.ts";
-import {searchQuerySelector} from "../../store/selectors.ts";
+import {search} from "../../store/actions";
+import {searchQuerySelector} from "../../store/selectors";
 
 import SearchQueryInput from "./query-input";
 import SearchResult from "./result";

package/src/js/components/search/result-entry.jsx

@@ -5,7 +5,7 @@ import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
 import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
 
 import getFeatureProperty from "../../helpers/get-feature-property";
-import {search, selectSearchResult} from "../../store/actions.ts";
+import {search, selectSearchResult} from "../../store/actions";
 
 function SearchResultEntry({closeSearch, onReturnFocus, feature}) {
 	const dispatch = useDispatch();

package/src/js/components/search/result.jsx

@@ -10,7 +10,7 @@ import {
 	SEARCH_STATUS_LOADING,
 	searchResultFeaturesSelector,
 	searchStatusSelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 
 import SearchResultEntry from "./result-entry";
 

package/src/js/components/switcher/{SwitcherEntry.jsx → SwitcherEntry.tsx}

@@ -1,19 +1,23 @@
+import type {ElementType} from "react";
+import {Fragment, memo} from "react";
+
 import {
+	type FeatureSourceStatus,
 	STATUS_ERROR,
 	STATUS_LOADING,
 	STATUS_OK,
 } from "@mapsight/core/lib/feature-sources/selectors";
-import  {Fragment, memo} from "react";
 
 import {translate} from "../../helpers/i18n";
-
 import SwitcherButton from "./SwitcherButton";
 import SwitcherStatusIcon from "./SwitcherStatusIcon";
 
+type SwitcherEntryStatus = "active" | "inactive" | "error" | "loading";
+
 export const STATUS_ACTIVE = "active";
 export const STATUS_INACTIVE = "inactive";
 
-const mapStatusClassName = (status) =>
+const mapStatusClassName = (status: SwitcherEntryStatus) =>
 	({
 		[STATUS_ERROR]: "error",
 		[STATUS_LOADING]: "loading",
@@ -21,10 +25,13 @@ const mapStatusClassName = (status) =>
 		[STATUS_INACTIVE]: "inactive",
 	})[status];
 
-const mapStatusLabel = (status) =>
+const mapStatusLabel = (status: string) =>
 	translate("ui.switcher.entry.label" + status);
 
-const determineDisplayStatus = (status, active) => {
+const determineDisplayStatus = (
+	status?: FeatureSourceStatus,
+	active: boolean = false,
+): SwitcherEntryStatus => {
 	if (!status || status === STATUS_OK) {
 		return active ? STATUS_ACTIVE : STATUS_INACTIVE;
 	}
@@ -32,36 +39,50 @@ const determineDisplayStatus = (status, active) => {
 	return status;
 };
 
-function SwitcherEntry(props) {
-	const {
-		as: T = "li",
-		className = "",
-		baseClassName = "ms3-layer-switcher__entry", // TODO: Use generic class name
-		title,
-		count = null,
-		toggleActive,
-		toggleActiveCheckbox: _toggleActiveCheckbox,
-		toggleActiveText: _toggleActiveText,
-		active,
-		activeCheckbox: _activeCheckbox,
-		activeText: _activeText,
-		status,
-		locked = false,
-		...attributes
-	} = props;
+export type SwitcherEntryProps = {
+	as?: ElementType;
+	className?: string;
+	baseClassName?: string;
+	title: string;
+	count?: number | null;
+	toggleActive?: () => void;
+	toggleActiveCheckbox?: () => void;
+	toggleActiveText?: () => void;
+	active?: boolean;
+	activeCheckbox?: boolean;
+	activeText?: boolean;
+	status?: FeatureSourceStatus;
+	locked?: boolean;
+};
 
+function SwitcherEntry({
+	as: T = "li",
+	className = "",
+	baseClassName = "ms3-layer-switcher__entry", // TODO: Use generic class name
+	title,
+	count = null,
+	toggleActive,
+	toggleActiveCheckbox: _toggleActiveCheckbox,
+	toggleActiveText: _toggleActiveText,
+	active,
+	activeCheckbox: _activeCheckbox,
+	activeText: _activeText,
+	status,
+	locked = false,
+	...attributes
+}: SwitcherEntryProps) {
 	// `toggleActive` manages the "split" mode. If `toggleActive` isn't set we switch to the
 	// "split" mode, it's enabling split active statuses and toggle handlers for the checkbox and
 	// text.
 	const isSplit = !toggleActive;
-	const activeCheckbox = isSplit ? _activeCheckbox : active;
-	const activeText = isSplit ? _activeText : active;
+	const activeCheckbox = isSplit ? (_activeCheckbox ?? false) : active;
+	const activeText = isSplit ? (_activeText ?? false) : active;
 	const toggleActiveCheckbox = isSplit ? _toggleActiveCheckbox : undefined;
 	const toggleActiveText = isSplit ? _toggleActiveText : undefined;
 
 	const checkboxDisplayStatus = determineDisplayStatus(
 		status,
-		activeCheckbox,
+		activeCheckbox ?? false,
 	);
 	const checkboxStatusClass = mapStatusClassName(checkboxDisplayStatus);
 	const checkboxStatusLabel = mapStatusLabel(checkboxDisplayStatus);
@@ -113,7 +134,7 @@ function SwitcherEntry(props) {
 				} else {
 					const textDisplayStatus = determineDisplayStatus(
 						status,
-						activeText,
+						activeText ?? false,
 					);
 					const textStatusClass =
 						mapStatusClassName(textDisplayStatus);

package/src/js/components/tag-switcher/{TagSwitcher.jsx → TagSwitcher.tsx}

@@ -1,8 +1,7 @@
 import {memo, useMemo} from "react";
-import {getDocumentLanguage} from "../../helpers/i18n";
 
+import {getDocumentLanguage} from "../../helpers/i18n";
 import GroupedSwitcher from "../switcher/GroupedSwitcher";
-
 import createTagSwitcherEntry from "./createTagSwitcherEntry";
 import createTagSwitcherHeader from "./createTagSwitcherHeader";
 

package/src/js/components/tag-switcher/{createTagSwitcherEntry.js → createTagSwitcherEntry.ts}

@@ -1,28 +1,26 @@
 import {connect} from "react-redux";
 
-import {createStructuredSelector} from "reselect";
-
-import {setTagVisible} from "../../store/actions.ts";
-import {createTagVisibleSelector} from "../../store/selectors.ts";
+import {setTagVisible} from "../../store/actions";
+import type {RootStateSlice} from "../../store/selectors";
+import {createTagVisibleSelector} from "../../store/selectors";
 import SwitcherEntry from "../switcher/SwitcherEntry";
 
 export default function createTagSwitcherEntry(
-	featureSourceId,
-	tagGroup,
-	tagName,
+	featureSourceId: string,
+	tagGroup: string,
+	tagName: string,
 ) {
+	const visibilitySelector = createTagVisibleSelector(
+		featureSourceId,
+		tagGroup,
+		tagName,
+	);
+
 	return connect(
-		// mapStateToProps:
-		createStructuredSelector({
-			visibility: createTagVisibleSelector(
-				featureSourceId,
-				tagGroup,
-				tagName,
-			),
+		(state: RootStateSlice) => ({
+			visibility: visibilitySelector(state),
 		}),
-		// mapDispatchToProps:
 		null,
-		// mergeProps:
 		({visibility}, {dispatch}, {...ownProps}) => ({
 			title: tagName,
 			active: visibility,

package/src/js/components/tag-switcher/createTagSwitcherHeader.ts

@@ -0,0 +1,47 @@
+import {connect} from "react-redux";
+
+import {setTagGroupVisible} from "../../store/actions";
+import {
+	type RootStateSlice,
+	createTagGroupVisibleSelector,
+} from "../../store/selectors";
+import SwitcherHeader from "../switcher/SwitcherHeader";
+
+type Props = {
+	toggleable?: boolean;
+};
+
+export default function createTagSwitcherHeader(
+	featureSourceId: string,
+	tagGroup: string,
+) {
+	const visibilitySelector = createTagGroupVisibleSelector(
+		featureSourceId,
+		tagGroup,
+	);
+	return connect(
+		(state: RootStateSlice) => ({
+			visibility: visibilitySelector(state),
+		}),
+		null,
+		(
+			{visibility},
+			{dispatch},
+			{toggleable = false, ...ownProps}: Props,
+		) => ({
+			label: tagGroup,
+			active: !toggleable || visibility,
+			toggleActive: toggleable
+				? () =>
+						dispatch(
+							setTagGroupVisible(
+								featureSourceId,
+								tagGroup,
+								!visibility,
+							),
+						)
+				: undefined,
+			...ownProps,
+		}),
+	)(SwitcherHeader);
+}

package/src/js/components/tag-switcher/index.ts

@@ -0,0 +1,17 @@
+import {connect} from "react-redux";
+
+import type {RootStateSlice} from "../../store/selectors";
+import {
+	tagSwitcherFeatureSourceIdSelector,
+	tagSwitcherSortTags,
+	tagSwitcherTagsSelector,
+	tagSwitcherToggleableGroups,
+} from "../../store/selectors";
+import TagSwitcher from "./TagSwitcher";
+
+export default connect((state: RootStateSlice) => ({
+	featureSourceId: tagSwitcherFeatureSourceIdSelector(state),
+	groupedTagData: tagSwitcherTagsSelector(state),
+	toggleableGroups: tagSwitcherToggleableGroups(state),
+	sortTags: tagSwitcherSortTags(state),
+}))(TagSwitcher);

package/src/js/components/view-toggle-button/{index.js → index.ts}

@@ -1,34 +1,37 @@
 import {connect} from "react-redux";
 
-import {createStructuredSelector} from "reselect";
-
 import {deselectAll} from "@mapsight/core/lib/feature-selections/actions";
 
+import type {View} from "../../config/constants/app";
 import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
 import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import {setView} from "../../store/actions.ts";
+import {setView} from "../../store/actions";
+import type {RootStateSlice} from "../../store/selectors";
 import {
 	isMapOutOfViewportSelector,
 	isViewMobile,
 	viewSelector,
 	viewToggleOptionsSelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 import ViewToggleButton from "./view-toggle-button";
 
 export default connect(
-	createStructuredSelector({
-		view: viewSelector,
-		isMapOutOfViewport: isMapOutOfViewportSelector,
-		options: viewToggleOptionsSelector,
+	(state: RootStateSlice) => ({
+		view: viewSelector(state),
+		isMapOutOfViewport: isMapOutOfViewportSelector(state),
+		options: viewToggleOptionsSelector(state),
 	}),
 	null,
 	({options, ...stateProps}, {dispatch}, ownProps) => ({
 		...stateProps,
 		dispatch: dispatch,
-		changeView: (currentView, nextView) => {
+		changeView: (currentView: View, nextView: View) => {
 			dispatch(setView(nextView));
 
-			if (options.deselectFeaturesOnToggle && isViewMobile(currentView)) {
+			if (
+				options?.deselectFeaturesOnToggle &&
+				isViewMobile(currentView)
+			) {
 				dispatch(
 					deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT),
 				);

package/src/js/components/view-toggle-button/view-toggle-button.jsx

@@ -8,7 +8,7 @@ import {
 	VIEW_MOBILE,
 } from "../../config/constants/app";
 import {translate} from "../../helpers/i18n";
-import {viewSelector} from "../../store/selectors.ts";
+import {viewSelector} from "../../store/selectors";
 
 function getOtherView(view) {
 	switch (view) {

package/src/js/helpers/components.ts

@@ -37,7 +37,7 @@ export function useContextComponentWithFallback<
 	N extends keyof ComponentPropsWithFallback,
 >(
 	componentName: N,
-): (fallback: ReactNode, props: ComponentPropsWithFallback[N]) => ReactNode {
+): (fallback?: ReactNode, props?: ComponentPropsWithFallback[N]) => ReactNode {
 	const Comp = useContext(ComponentsContext)[componentName];
 	return useCallback(
 		(fallback, props) => {

package/src/js/helpers/create-action-watcher.ts

@@ -1,6 +1,6 @@
 // FIXME: use es once default export is fixed in @mapsight/lib-redux
-import type {AnyAction, StoreEnhancer} from "redux";
-import {applyMiddleware} from "redux";
+import type {AnyAction, StoreEnhancer} from "@reduxjs/toolkit";
+import {applyMiddleware} from "@reduxjs/toolkit";
 
 import {isNonNullable} from "@mapsight/lib-js/nonNullable";
 import flattenActions from "@mapsight/lib-redux/flatten-actions";
@@ -17,7 +17,7 @@ export default function createActionWatcher(): Result {
 	};
 
 	context.enhancer = applyMiddleware(
-		(_store) => (nextMiddleware) => (action) => {
+		(_store) => (nextMiddleware) => (action: AnyAction) => {
 			const result = nextMiddleware(action);
 
 			if (isNonNullable(context.handler)) {

package/src/js/hooks/useMountable.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 
-type Mountable = {
+export type Mountable = {
 	/** mount function, receives element as parameter */
 	mount(element: Element): void;
 
@@ -8,6 +8,15 @@ type Mountable = {
 	unmount(element: Element): void;
 };
 
+export function isMountable(obj: object): obj is Mountable {
+	return (
+		"mount" in obj &&
+		typeof obj.mount === "function" &&
+		"unmount" in obj &&
+		typeof obj.unmount === "function"
+	);
+}
+
 /**
  * Mounts the mountable object to the element
  *

package/src/js/hooks/useStickyHeader.ts

@@ -2,18 +2,17 @@ import type {DependencyList} from "react";
 import {useCallback, useEffect, useRef, useState} from "react";
 
 type Options = {
-	stuckHeaderSize?: number;
+	stuckHeaderHeight?: number;
 	resetDeps?: DependencyList;
 };
 
-export default function useStickyHeader({
-	stuckHeaderSize = 30,
-	resetDeps = [],
-}: Options) {
+export default function useStickyHeader<
+	TElement extends HTMLElement = HTMLElement,
+>({stuckHeaderHeight = 30, resetDeps = []}: Options) {
 	const [isHeaderStuck, setIsHeaderStuck] = useState(false);
 	const [stickThreshold, setStickThreshold] = useState(0);
 
-	const stickyHeaderRef = useRef<HTMLElement | null>(null);
+	const stickyHeaderRef = useRef<TElement | null>(null);
 	const stickyScrollAreaRef = useRef<{scrollTop: number} | null>(null);
 
 	const onScroll = useCallback(
@@ -38,9 +37,9 @@ export default function useStickyHeader({
 	useEffect(() => {
 		if (stickyHeaderRef.current) {
 			const headerSize = stickyHeaderRef.current.offsetHeight;
-			setStickThreshold(headerSize - stuckHeaderSize);
+			setStickThreshold(headerSize - stuckHeaderHeight);
 		}
-	}, [stickyHeaderRef.current?.offsetHeight, stuckHeaderSize]);
+	}, [stickyHeaderRef.current?.offsetHeight, stuckHeaderHeight]);
 
 	return {
 		isHeaderStuck,

package/src/js/hooks/useUpdateMapSizeCallback.ts

@@ -1,7 +1,7 @@
 import type {RefObject} from "react";
 import {useCallback} from "react";
 
-import type {Dispatch} from "redux";
+import type {Dispatch} from "@reduxjs/toolkit";
 
 import {async} from "@mapsight/core/lib/base/actions";
 import {updateMapSize} from "@mapsight/core/lib/map/actions";

package/src/js/hooks/useUpdateMapSizeOnRender.ts

@@ -1,6 +1,6 @@
 import {useEffect} from "react";
 
-import type {Dispatch} from "redux";
+import type {Dispatch} from "@reduxjs/toolkit";
 
 import useUpdateMapSizeCallback from "./useUpdateMapSizeCallback";
 

package/src/js/hooks/useUpdateMapSizeOnTransitionEnd.ts

@@ -1,7 +1,7 @@
 import type {RefObject} from "react";
 import {useEffect} from "react";
 
-import type {Dispatch} from "redux";
+import type {Dispatch} from "@reduxjs/toolkit";
 
 import type {MainPanelPosition} from "../types";
 import useUpdateMapSizeCallback from "./useUpdateMapSizeCallback";

package/src/js/hooks/useUpdateMapSizeOnViewChange.ts

@@ -1,6 +1,6 @@
 import {useEffect} from "react";
 
-import type {Store} from "redux";
+import type {Store} from "@reduxjs/toolkit";
 
 import {updateMapSize} from "@mapsight/core/lib/map/actions";
 

package/src/js/index.ts

@@ -1,6 +1,6 @@
+import {applyMiddleware, compose} from "@reduxjs/toolkit";
 import merge from "lodash/merge";
-import {applyMiddleware, compose} from "redux";
-import thunk from "redux-thunk";
+import {thunk} from "redux-thunk";
 
 import {createMapsightStore} from "@mapsight/core";
 import {layerIdsExternalSwitcherSelector} from "@mapsight/core/lib/map/selectors";
@@ -25,7 +25,7 @@ import type {
 } from "./types";
 
 /**
- * Default mapsight ui renderer (Does nothing, but log a warning!).
+ * Default mapsight ui renderer (Does nothing but log a warning!).
  */
 const defaultRenderer: MapsightUiRenderer<void> = (
 	_container,
@@ -189,6 +189,7 @@ export function create(
 
 	// store enhancer
 	const uiStoreEnhancer = applyMiddleware(thunk);
+	// @ts-expect-error TODO
 	context.storeEnhancer = context.createOptions.storeEnhancer
 		? compose(uiStoreEnhancer, context.createOptions.storeEnhancer)
 		: uiStoreEnhancer;

package/src/js/plugins/browser/app-title.ts

@@ -1,5 +1,5 @@
 import {setAppTitle} from "../../store/actions";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultRendererPropName = "title";