@mapsight/ui 7.0.2 → 7.1.0

package/src/js/plugins/browser/feature-deep-link.ts

@@ -1,4 +1,4 @@
-import type {Store} from "redux";
+import type {Store} from "@reduxjs/toolkit";
 
 import {
 	deselectAll,
@@ -15,8 +15,9 @@ import {VIEW_MAP_ONLY} from "../../config/constants/app";
 import * as c from "../../config/constants/controllers";
 import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
 import {setView} from "../../store/actions";
+import type {RootStateSlice} from "../../store/selectors";
 import {isViewMobile, viewSelector} from "../../store/selectors";
-import type {PluginInstance, UiState} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
 const defaultFeatureSelection = FEATURE_SELECTION_SELECT;
@@ -40,7 +41,7 @@ function selectFeature(
 
 	if (
 		setMapOnlyViewInMobile &&
-		isViewMobile(viewSelector(store.getState() as {app: UiState}))
+		isViewMobile(viewSelector(store.getState() as RootStateSlice))
 	) {
 		store.dispatch(setView(VIEW_MAP_ONLY));
 	}

package/src/js/plugins/browser/local-storage.ts

@@ -7,7 +7,7 @@ import type {State} from "@mapsight/core/types";
 import pickPaths from "@mapsight/lib-js/object/pickPaths";
 import {createStorage} from "@mapsight/lib-redux/local-storage";
 
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultLocalStorageKey = "mapsight--v3-ui";
 const defaultLocalStoragePaths = [

package/src/js/plugins/browser/native-fullscreen.ts

@@ -1,8 +1,8 @@
 import {observeState} from "@mapsight/lib-redux/observe-state";
 
-import type {View} from "../../config/constants/app.ts";
+import type {View} from "../../config/constants/app";
 import {viewSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 /**
  * This plugin will request native fullscreen when entering one of the

package/src/js/plugins/browser/no-scroll.ts

@@ -3,8 +3,9 @@ import type {State} from "@mapsight/core/types";
 import {getAndObserveState} from "@mapsight/lib-redux/observe-state";
 
 import {VIEW_FULLSCREEN, VIEW_MAP_ONLY} from "../../config/constants/app";
+import type {RootStateSlice} from "../../store/selectors";
 import {viewSelector} from "../../store/selectors";
-import type {PluginInstance, UiState} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 function onTouchMoveNoScroll(e: TouchEvent) {
 	e.preventDefault();
@@ -39,7 +40,7 @@ export function createNoScrollHandler(
 }
 
 export const defaultNoScrollHandler = createNoScrollHandler(
-	(state: {app: UiState}) => {
+	(state: RootStateSlice) => {
 		const view = viewSelector(state);
 		return view === VIEW_MAP_ONLY || view === VIEW_FULLSCREEN;
 	},

package/src/js/plugins/browser/partial-content-changed-event.ts

@@ -1,5 +1,5 @@
 import {APP_EVENT_PARTIAL_CONTENT_CHANGED} from "../../components/helping/app-channel";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 /**
  * This plugin will call the partialChangeHandler (@see {CreateOptions.partialChangeHandler}) when some partial content

package/src/js/plugins/browser/piwik-track-feature-selection-event.ts

@@ -8,7 +8,7 @@ import {observeState} from "@mapsight/lib-redux/observe-state";
 
 import * as c from "../../config/constants/controllers";
 import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultCategory = "Mapsight";
 const defaultAction = "SelectedFeature";

package/src/js/plugins/browser/piwik-track-fullscreen-toggle-event.ts

@@ -2,7 +2,7 @@ import {trackEvent} from "@mapsight/lib-js/misc/piwik";
 import {observeState} from "@mapsight/lib-redux/observe-state";
 
 import {isFullscreenSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultCategory = "Mapsight";
 const defaultActionEnabled = "FullscreenEnabled";

package/src/js/plugins/browser/search.ts

@@ -2,7 +2,7 @@ import {FeatureSourcesController} from "@mapsight/core/lib/feature-sources/contr
 
 import * as c from "../../config/constants/controllers";
 import {searchResultSelectionFeatureSourceSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultFeatureSourceId = "searchResult";
 const defaultFeatureSourcesControllerName = c.FEATURE_SOURCES;

package/src/js/plugins/browser/share-position-link.ts

@@ -1,5 +1,5 @@
+import {createSelector} from "@reduxjs/toolkit";
 import proj4 from "proj4";
-import {createSelector} from "reselect";
 
 import {mergeAll, set} from "@mapsight/core/lib/base/actions";
 import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";
@@ -26,7 +26,7 @@ import {
 } from "../../config/constants/controllers";
 import {features, metaData} from "../../config/map/layers";
 import {translate} from "../../helpers/i18n";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 export const createActivateAction = (mapController, name) =>
 	activateInteraction(mapController, `${name}_drawInteraction`);

package/src/js/plugins/browser/toggle-mobile-views.ts

@@ -4,7 +4,7 @@ import {VIEW_MAP_ONLY, VIEW_MOBILE} from "../../config/constants/app";
 import * as c from "../../config/constants/controllers";
 import {setView} from "../../store/actions";
 import {isEmbeddedMapSelector, viewSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultMapControllerName = c.MAP;
 const defaultToggleBrowserEvent = "click";

package/src/js/plugins/browser/user-geolocation.ts

@@ -1,13 +1,14 @@
-import {createSelector, createStructuredSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {set} from "@mapsight/core/lib/base/actions";
 import {FeatureSourcesController} from "@mapsight/core/lib/feature-sources/controller";
 import {getGeolocation} from "@mapsight/core/lib/user-geolocation/actions";
-import {
+import type {UserGeolocationState} from "@mapsight/core/lib/user-geolocation/selectors";
+import createUserGeolocationIsEnabledSelector, {
 	createUserGeolocationAsFeatureSelector,
-	createUserGeolocationIsEnabledSelector,
 	geolocationStatusSelector,
 } from "@mapsight/core/lib/user-geolocation/selectors";
+import type {State} from "@mapsight/core/types";
 
 import {createStorage} from "@mapsight/lib-redux/local-storage";
 import {
@@ -16,7 +17,7 @@ import {
 } from "@mapsight/lib-redux/observe-state";
 
 import * as c from "../../config/constants/controllers";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 const defaultFeatureSourceId = "userGeolocation";
 const defaultFeatureSourcesControllerName = c.FEATURE_SOURCES;
@@ -103,19 +104,26 @@ export default function createPlugin(
 				);
 
 			const geoLocStatusSelector = createSelector(
-				(state) => state[userGeolocationControllerName],
+				(state: State) =>
+					state[
+						userGeolocationControllerName
+					] as UserGeolocationState,
 				geolocationStatusSelector,
 			);
+			const alreadyRequestedSelector = createSelector(
+				geoLocStatusSelector,
+				(status) => status === "loading" || status === "error",
+			);
 
 			getAndObserveState(
 				store,
-				createStructuredSelector({
-					isEnabled: geoLocIsEnabledSelector,
-					alreadyRequested: createSelector(
-						geoLocStatusSelector,
-						(status) => status === "loading" || status === "error",
-					),
-				}),
+				createSelector(
+					[geoLocIsEnabledSelector, alreadyRequestedSelector],
+					(isEnabled, alreadyRequested) => ({
+						isEnabled,
+						alreadyRequested,
+					}),
+				),
 				({isEnabled, alreadyRequested}) => {
 					if (alreadyRequested) {
 						return AbortObserving;

package/src/js/plugins/browser/views.ts

@@ -6,7 +6,7 @@ import type {
 	MapsightUiContext,
 	MapsightUiView,
 	PluginInstance,
-} from "../../types.ts";
+} from "../../types";
 
 const getViewportWidth = () =>
 	Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

package/src/js/plugins/browser-defaults.ts

@@ -1,19 +1,19 @@
 import {FEATURE_SELECTION_PRESELECT} from "../config/feature/selections";
-import type {PluginDefinition} from "../types.ts";
-import createAppTitlePlugin from "./browser/app-title.ts";
-import createFeatureDeepLinkPlugin from "./browser/feature-deep-link.ts";
-import createLocalStoragePlugin from "./browser/local-storage.ts";
-import createNoScrollPlugin from "./browser/no-scroll.ts";
-import createPiwikTrackFeatureSelectionEventPlugin from "./browser/piwik-track-feature-selection-event.ts";
-import createPiwikTrackFullscreenToggleEventPlugin from "./browser/piwik-track-fullscreen-toggle-event.ts";
+import type {PluginDefinition} from "../types";
+import createAppTitlePlugin from "./browser/app-title";
+import createFeatureDeepLinkPlugin from "./browser/feature-deep-link";
+import createLocalStoragePlugin from "./browser/local-storage";
+import createNoScrollPlugin from "./browser/no-scroll";
+import createPiwikTrackFeatureSelectionEventPlugin from "./browser/piwik-track-feature-selection-event";
+import createPiwikTrackFullscreenToggleEventPlugin from "./browser/piwik-track-fullscreen-toggle-event";
 //import createQuitFullscreenOnRenderPlugin from './browser/quit-fullscreen-on-render';
-import createSearchPlugin from "./browser/search.ts";
-import createToggleMobileViewsPlugin from "./browser/toggle-mobile-views.ts";
-import createUserGeolocationPlugin from "./browser/user-geolocation.ts";
-import createViewsPlugin from "./browser/views.ts";
-import createFeatureSelectionDetailsUrlPlugin from "./common/feature-selection-details-url.ts";
-import createLangPlugin from "./common/lang.ts";
-import createOlProxyPlugin from "./common/ol-proxy.ts";
+import createSearchPlugin from "./browser/search";
+import createToggleMobileViewsPlugin from "./browser/toggle-mobile-views";
+import createUserGeolocationPlugin from "./browser/user-geolocation";
+import createViewsPlugin from "./browser/views";
+import createFeatureSelectionDetailsUrlPlugin from "./common/feature-selection-details-url";
+import createLangPlugin from "./common/lang";
+import createOlProxyPlugin from "./common/ol-proxy";
 
 /**
  * Create the default set of plugins for use in the browser IN ORDER!

package/src/js/plugins/common/feature-selection-details-url.ts

@@ -13,7 +13,7 @@ import type {
 	MapsightUiFeature,
 	MapsightUiFeatureProperty,
 	PluginInstance,
-} from "../../types.ts";
+} from "../../types";
 
 const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
 const defaultFeatureSourcesController = c.FEATURE_SOURCES;

package/src/js/plugins/common/measure-distance.ts

@@ -1,5 +1,4 @@
-import type {Store} from "redux";
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {mergeAll} from "@mapsight/core/lib/base/actions";
 import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";
@@ -14,6 +13,7 @@ import {
 import type {Definition} from "@mapsight/core/ol-proxy";
 import {di} from "@mapsight/core/ol-proxy";
 import DrawInteraction from "@mapsight/core/ol-proxy/definitions/interaction/DrawInteraction";
+import type {EnhancedStore} from "@mapsight/core/types";
 
 import {observeState} from "@mapsight/lib-redux/observe-state";
 
@@ -23,7 +23,7 @@ import {
 	MAP,
 } from "../../config/constants/controllers";
 import {getDictionary} from "../../helpers/i18n";
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 export const createActivateAction = (mapController: string, name: string) =>
 	activateInteraction(mapController, `${name}_drawInteraction`);
@@ -49,7 +49,7 @@ function setupDrawInteraction({
 	drawStyle,
 	displayStyle,
 }: {
-	store: Store;
+	store: EnhancedStore;
 	name: string;
 	featureSourcesControllerName: string;
 	featureSelectionsControllerName: string;

package/src/js/plugins/common/ol-proxy.ts

@@ -16,7 +16,7 @@ import TileWMSSource from "@mapsight/core/ol-proxy/definitions/source/TileWMSSou
 import VectorFeatureSource from "@mapsight/core/ol-proxy/definitions/source/VectorFeatureSource";
 import VectorSource from "@mapsight/core/ol-proxy/definitions/source/VectorSource";
 
-import type {PluginInstance} from "../../types.ts";
+import type {PluginInstance} from "../../types";
 
 /**
  * This plugin will inject the ol-proxy dependencies required by default.

package/src/js/plugins/common/render-await-feature-details-loaded.ts

@@ -1,4 +1,4 @@
-import {compose} from "redux";
+import {compose} from "@reduxjs/toolkit";
 
 import type {FeatureSelectionsState} from "@mapsight/core/lib/feature-selections/selectors";
 import {LOAD_FEATURE_SOURCE_SUCCESS} from "@mapsight/core/lib/feature-sources/actions";
@@ -21,7 +21,7 @@ import type {
 	MapsightUiFeature,
 	MapsightUiFeatureProperty,
 	PluginInstance,
-} from "../../types.ts";
+} from "../../types";
 
 const defaultFeatureSelection = "select";
 const defaultFeatureSelectionsController = FEATURE_SELECTIONS;
@@ -54,6 +54,7 @@ export default function createFeatureDetailsLoadedPlugin(
 
 	return {
 		afterInit: function runAwaitFeatureDetailsLoadedInitPlugin(context) {
+			// @ts-expect-error TODO
 			context.storeEnhancer = context.storeEnhancer
 				? compose(
 						context.storeEnhancer,

package/src/js/plugins/common/render-await-list-feature-sources-loaded.ts

@@ -1,4 +1,4 @@
-import {compose} from "redux";
+import {compose} from "@reduxjs/toolkit";
 
 import type {LoadOptions} from "@mapsight/core/lib/feature-sources/actions";
 import {
@@ -14,7 +14,7 @@ import {
 	FEATURE_SOURCES,
 } from "../../config/constants/controllers";
 import createActionWatcher from "../../helpers/create-action-watcher";
-import type {MapsightUiContext, PluginInstance} from "../../types.ts";
+import type {MapsightUiContext, PluginInstance} from "../../types";
 
 const defaultLoadOptions: LoadOptions = {};
 const defaultListControllerName = FEATURE_LIST;
@@ -44,6 +44,7 @@ export default function createPlugin(
 		afterInit: function renderAwaitListFeatureSourcesLoadedInitPlugin(
 			context,
 		) {
+			// @ts-expect-error TODO
 			context.storeEnhancer = context.storeEnhancer
 				? compose(context.storeEnhancer, actionWatcher.enhancer)
 				: actionWatcher.enhancer;

package/src/js/plugins/server/feature-deep-link.ts

@@ -7,7 +7,7 @@ import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
 import type {
 	ExternalMapsightUiRendererProps,
 	PluginInstance,
-} from "../../types.ts";
+} from "../../types";
 
 const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
 const defaultFeatureSelection = FEATURE_SELECTION_SELECT;

package/src/js/plugins/server-defaults.ts

@@ -1,8 +1,8 @@
-import type {PluginDefinition} from "../types.ts";
-import createFeatureSelectionDetailsUrlPlugin from "./common/feature-selection-details-url.ts";
-import createLangPlugin from "./common/lang.ts";
-import createOlProxyPlugin from "./common/ol-proxy.ts";
-import createFeatureDeepLinkPlugin from "./server/feature-deep-link.ts";
+import type {PluginDefinition} from "../types";
+import createFeatureSelectionDetailsUrlPlugin from "./common/feature-selection-details-url";
+import createLangPlugin from "./common/lang";
+import createOlProxyPlugin from "./common/ol-proxy";
+import createFeatureDeepLinkPlugin from "./server/feature-deep-link";
 
 /**
  * Create the default set of plugins for use on the server IN ORDER!

package/src/js/renderer/browser-dom.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import {createRoot, hydrateRoot} from "react-dom/client";
 
 import App from "../components/app";
 import AppContext from "../components/helping/app-context";
@@ -12,12 +12,16 @@ const mapsightUiBrowserDomRenderer: MapsightUiRenderer = (
 	props,
 	hydrate = false,
 ) => {
-	ReactDOM[hydrate ? "hydrate" : "render"](
+	if (!container) return;
+
+	const app = (
 		<AppContext {...props}>
 			<App />
-		</AppContext>,
-		container,
+		</AppContext>
 	);
+
+	const root = hydrate ? hydrateRoot(container, app) : createRoot(container);
+	root.render(app);
 };
 
 export default mapsightUiBrowserDomRenderer;

package/src/js/renderer/server-string.tsx

@@ -1,4 +1,4 @@
-import ReactDOMServer from "react-dom/server";
+import {renderToString} from "react-dom/server";
 
 import App from "../components/app";
 import AppContext from "../components/helping/app-context";
@@ -8,7 +8,7 @@ import type {MapsightUiRenderer} from "../types";
  * Server side renderer for Node.js (renders a string)
  */
 const mapsightUiServerStringRenderer: MapsightUiRenderer<string> = (_, props) =>
-	ReactDOMServer.renderToString(
+	renderToString(
 		<AppContext {...props}>
 			<App />
 		</AppContext>,

package/src/js/store/actions.ts

@@ -21,7 +21,13 @@ import {
 	FEATURE_SELECTION_PRESELECT,
 	FEATURE_SELECTION_SELECT,
 } from "../config/feature/selections";
-import type {FullUiState, MapsightUiFeatureId, UiState} from "../types.ts";
+import type {
+	FetchTextState,
+	FullUiState,
+	MapsightUiFeatureId,
+	UiState,
+} from "../types";
+import type {RootStateSlice} from "./selectors";
 import {featureDetailsUrlSelector, regionsSelector} from "./selectors";
 
 function ensureFullUrl(url: string) {
@@ -255,7 +261,7 @@ export function setMiniLegendLayer(layerId: string | null) {
 	};
 }
 
-export const SET_VIEW_BREAKPOINTS = "SET_VIEW_BREAKPOINTS";
+export const SET_VIEW_BREAKPOINTS = "SET_VIEW_BREAKPOI";
 
 export function setViewBreakpoints(value: FullUiState["viewBreakpoints"]) {
 	return {
@@ -367,13 +373,18 @@ export function fetchTextSuccess(key: string, data: unknown) {
 	};
 }
 
+export type FETCH_TEXT_STATUS =
+	| typeof FETCH_TEXT_STATUS_LOADING
+	| typeof FETCH_TEXT_STATUS_ERROR
+	| typeof FETCH_TEXT_STATUS_SUCCESS;
+
 export const FETCH_TEXT_STATUS_LOADING = "loading";
 export const FETCH_TEXT_STATUS_ERROR = "error";
 export const FETCH_TEXT_STATUS_SUCCESS = "success";
 
 export function fetchText(key: string, url: string): ThunkAction {
-	return function (dispatch, getState) {
-		const selectState = () => (getState().app as UiState)[key] || {};
+	return function (dispatch, getState: () => RootStateSlice) {
+		const selectState = () => (getState().app[key] as FetchTextState) || {};
 
 		// do not fetch again if already running
 		const state = selectState();
@@ -462,6 +473,11 @@ export function fetchJsonReset(key: string) {
 	};
 }
 
+export type FETCH_JSON_STATUS =
+	| typeof FETCH_JSON_STATUS_LOADING
+	| typeof FETCH_JSON_STATUS_ERROR
+	| typeof FETCH_JSON_STATUS_SUCCESS;
+
 export const FETCH_JSON_STATUS_LOADING = "loading";
 export const FETCH_JSON_STATUS_ERROR = "error";
 export const FETCH_JSON_STATUS_SUCCESS = "success";
@@ -549,10 +565,8 @@ export const selectSearchResult = (feature: MapsightUiFeatureId) => ({
 
 export const setFeatureDetailsUrl =
 	(detailsUrl: string): ThunkAction =>
-	(dispatch, getState) => {
-		const currentUrl = featureDetailsUrlSelector(
-			getState() as {app: UiState},
-		);
+	(dispatch, getState: () => RootStateSlice) => {
+		const currentUrl = featureDetailsUrlSelector(getState());
 		if (currentUrl !== detailsUrl) {
 			if (detailsUrl) {
 				dispatch(fetchText(DETAILS_CONTENT_STATE_KEY, detailsUrl));
@@ -621,12 +635,12 @@ export function setSelectedRegionIdAndAnimateMap(
 		return setSelectedRegionId(regionId);
 	}
 
-	return (dispatch, getState) => {
+	return (dispatch, getState: () => RootStateSlice) => {
 		dispatch(setSelectedRegionId(regionId));
 
 		// TODO: use `selectedRegionSelector`, not sure if it's safe to rely on the state
 		// change here
-		const regions = regionsSelector(getState() as {app: UiState});
+		const regions = regionsSelector(getState());
 
 		if (
 			regions &&

package/src/js/store/reducers.ts

@@ -1,4 +1,4 @@
-import type {Action, AnyAction} from "redux";
+import type {Action, AnyAction} from "@reduxjs/toolkit";
 
 import getPath from "@mapsight/lib-js/object/getPath";
 import reducers from "@mapsight/lib-redux/reducers/immutable-path";
@@ -10,7 +10,7 @@ import {
 	VIEW_MOBILE,
 } from "../config/constants/app";
 import {TAG_FILTER} from "../config/constants/controllers";
-import type {UiState} from "../types.ts";
+import type {UiState} from "../types";
 import {
 	FETCH_JSON_FAILURE,
 	FETCH_JSON_REQUEST,
@@ -63,7 +63,7 @@ import {
 	SET_VIEW_BREAKPOINTS,
 	SORT_LIST,
 	TOGGLE_USER_PREFERENCE_LIST_VISIBLE,
-} from "./actions.ts";
+} from "./actions";
 
 function determineView(state: UiState, isMobile: boolean) {
 	const {