@mapsight/ui 7.0.0

package/src/js/components/feature-details-content/share-feature-link-modal.jsx

@@ -0,0 +1,56 @@
+import {memo} from "react";
+import ReactModal from "react-modal";
+
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {translate} from "../../helpers/i18n";
+
+const selectInputContent = (e) =>
+	e.target.setSelectionRange(0, e.target.value.length);
+
+ 
+
+/* NOTE: we use a wrapping label around the input element which is fine a11y as well. */
+function ShareFeatureLinkModal({isOpen, onRequestClose, feature}) {
+	return (
+		<ReactModal
+			isOpen={isOpen}
+			// contentLabel="onRequestClose Example" // aria-label="" on .ms3-modal
+			onRequestClose={onRequestClose}
+			className="ms3-modal"
+			overlayClassName="ms3-app-overlay"
+			shouldCloseOnOverlayClick={true}
+		>
+			<div className="ms3-modal__inner">
+				<div className="ms3-share-link">
+					<h3 className="ms3-share-link__head">
+						{translate("ui.feature-details.share-link.head")}
+					</h3>
+
+					<label className="ms3-share-link__label">
+						{translate("ui.feature-details.share-link.place")}
+						<br />
+
+						<input
+							className="ms3-share-link__input"
+							value={getFeatureProperty(feature, "permanentLink")}
+							onClick={selectInputContent}
+							readOnly={true}
+						/>
+					</label>
+				</div>
+
+				<button
+					className="ms3-dialog-close-button"
+					type="button"
+					onClick={onRequestClose}
+				>
+					<span className="ms3-visuallyhidden">
+						{translate("ui.feature-details.share-link.close")}
+					</span>
+				</button>
+			</div>
+		</ReactModal>
+	);
+}
+
+export default memo(ShareFeatureLinkModal);

package/src/js/components/feature-list/content.jsx

@@ -0,0 +1,42 @@
+import {forwardRef, memo} from "react";
+
+import FeatureListEmptyMessage from "./empty-message";
+
+const FeatureListContent = memo(
+	forwardRef(function FeatureListContent(props, ref) {
+		const {
+			status,
+			children,
+			showFeatureListInfo: _showFeatureListInfo,
+			as: T = "div",
+			emptyAs,
+			featureSourceId,
+			...attributes
+		} = props;
+		let content = children;
+		if (!content) {
+			const hasSource =
+				featureSourceId !== null &&
+				featureSourceId !== undefined &&
+				featureSourceId !== "";
+			content = (
+				<FeatureListEmptyMessage as={emptyAs} hasSource={hasSource} />
+			);
+		}
+
+		const statusClass = status ? " ms3-list--status-" + status : "";
+		return (
+			<T
+				ref={ref}
+				className={`[ ms3-list ms3-list--features ${statusClass} ] ${
+					attributes.className || ""
+				}`}
+				{...attributes}
+			>
+				{content}
+			</T>
+		);
+	}),
+);
+
+export default FeatureListContent;

package/src/js/components/feature-list/context.tsx

@@ -0,0 +1,47 @@
+import type {PropsWithChildren} from "react";
+import {createContext, useContext} from "react";
+
+import type {
+	FullUiState,
+	MapsightUiFeatureId,
+	SelectFeatureActionOptions,
+} from "../../types";
+import type {FeatureListStateProps} from "./hooks/useFeatureListState";
+
+export type FeatureListContextValue = {
+	state: Omit<FeatureListStateProps, "listUiOptions">;
+	listUiOptions: Partial<FullUiState["list"]>;
+	enableKeyboardControl: boolean;
+	showFeatureListInfo: boolean;
+	selectFeature: (
+		featureId: MapsightUiFeatureId,
+		options: SelectFeatureActionOptions,
+	) => void;
+	deselectFeature: (
+		featureId: MapsightUiFeatureId,
+		options: SelectFeatureActionOptions,
+	) => void;
+};
+
+const FeatureListContext = createContext<FeatureListContextValue | null>(null);
+FeatureListContext.displayName = "FeatureListContext";
+
+export const FeatureListContextProvider = ({
+	value,
+	children,
+}: PropsWithChildren<{
+	value: FeatureListContextValue;
+}>) => (
+	<FeatureListContext.Provider value={value}>
+		{children}
+	</FeatureListContext.Provider>
+);
+
+export const useFeatureListContext = () => {
+	const value = useContext(FeatureListContext);
+	if (value === null) {
+		throw new Error("FeatureListContext is not provided");
+	}
+
+	return value;
+};

package/src/js/components/feature-list/empty-message.jsx

@@ -0,0 +1,15 @@
+import {translate} from "../../helpers/i18n";
+
+function FeatureListEmptyMessage({hasSource, as: T = "div", ...attributes}) {
+	const emptyMessage = hasSource
+		? translate("ui.feature-list.content.noEntries")
+		: translate("ui.feature-list.content.noListSelected");
+
+	return (
+		<T className="ms3-list__empty" {...attributes}>
+			{emptyMessage}
+		</T>
+	);
+}
+
+export default FeatureListEmptyMessage;

package/src/js/components/feature-list/filter.jsx

@@ -0,0 +1,35 @@
+import {memo, useEffect, useState} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import useDebounce from "../../hooks/useDebounce";
+
+import {filterListQuery} from "../../store/actions.ts";
+import {listQuerySelector} from "../../store/selectors.ts";
+
+import FeaturesQueryInput from "./query-input";
+
+function FeatureFilter() {
+	const dispatch = useDispatch();
+
+	const [input, setInput] = useState(useSelector(listQuerySelector));
+	const debouncedInput = useDebounce(input, 200);
+	useEffect(() => {
+		if (debouncedInput !== "") {
+			dispatch(filterListQuery(debouncedInput));
+		}
+	}, [dispatch, debouncedInput]);
+
+	// needed to "override" debounce if the value is ""
+	useEffect(() => {
+		if (input === "") {
+			dispatch(filterListQuery(""));
+		}
+	}, [dispatch, input]);
+
+	return (
+		<div className="ms3-list__filter-box">
+			<FeaturesQueryInput query={input} onChange={setInput} />
+		</div>
+	);
+}
+
+export default memo(FeatureFilter);

package/src/js/components/feature-list/footer.jsx

@@ -0,0 +1,5 @@
+function FeatureListFooter({as: T = "div", ...attributes}) {
+	return <T className="ms3-list-footer" {...attributes} />;
+}
+
+export default FeatureListFooter;

package/src/js/components/feature-list/grouped-content.jsx

@@ -0,0 +1,74 @@
+import {forwardRef, Fragment, memo, useRef} from "react";
+
+import FeatureListContent from "./content";
+import {useFeatureListContext} from "./context";
+import useFeatureListItemGroups from "./hooks/useFeatureListItemGroups";
+import useKeyboardNavigation from "./hooks/useKeyboardNavigation";
+
+function FeatureListGroupedContent(
+	{as: T = "div", groupAs = null, itemAs, ...listProps},
+	forwardedRef,
+) {
+	const ownRef = useRef();
+	const ref = forwardedRef || ownRef;
+
+	const {
+		state: {filteredFeatures: features = []},
+		itemProps,
+		enableKeyboardControl,
+	} = useFeatureListContext();
+	const rootProps = {
+		...useKeyboardNavigation(enableKeyboardControl, ref),
+		ref: ref,
+	};
+
+	listProps.emptyAs = itemProps.as;
+
+	// we have to separate calculation of items from wrapping them,
+	// as the outer tags depend on restProps, and we do not want to recreate list items on changes to restProps.
+	const itemGroups = useFeatureListItemGroups(
+		groupAs,
+		features,
+		itemAs,
+		itemProps,
+	);
+
+	if (!features.length) {
+		return <FeatureListContent {...listProps} {...rootProps} />;
+	}
+
+	if (itemGroups.groups) {
+		const GroupNameT = groupAs;
+
+		return (
+			<T className="ms3-list-groups ms3-scroll-target" {...rootProps}>
+				{itemGroups.groups.map(function composeGroup(group, index) {
+					return (
+						<Fragment key={group.name}>
+							{group.name ? (
+								<GroupNameT className="ms3-list__group ms3-list__group--name">
+									{group.name}
+								</GroupNameT>
+							) : null}
+
+							<FeatureListContent
+								data-ms3-group-name={group.name}
+								{...listProps}
+							>
+								{itemGroups.items[index]}
+							</FeatureListContent>
+						</Fragment>
+					);
+				})}
+			</T>
+		);
+	}
+
+	return (
+		<FeatureListContent {...listProps} {...rootProps}>
+			{itemGroups.items[0]}
+		</FeatureListContent>
+	);
+}
+
+export default memo(forwardRef(FeatureListGroupedContent));

package/src/js/components/feature-list/header.jsx

@@ -0,0 +1,7 @@
+import  {forwardRef} from "react";
+
+function FeatureListHeader({as: T = "div", ...attributes}, ref) {
+	return <T className="ms3-list-header" ref={ref} {...attributes} />;
+}
+
+export default forwardRef(FeatureListHeader);

package/src/js/components/feature-list/hooks/useAutoloadFeatureSource.ts

@@ -0,0 +1,25 @@
+import {useEffect} from "react";
+import {useDispatch} from "react-redux";
+
+import type {AnyAction} from "redux";
+
+import {async} from "@mapsight/core/lib/base/actions";
+import {load} from "@mapsight/core/lib/feature-sources/actions";
+
+import {FEATURE_SOURCES} from "../../../config/constants/controllers";
+
+export default function useAutoloadFeatureSource(
+	enabled = false,
+	featureSourceId?: string,
+) {
+	const dispatch = useDispatch();
+	useEffect(() => {
+		if (enabled && featureSourceId) {
+			dispatch(
+				async(
+					load(FEATURE_SOURCES, featureSourceId),
+				) as unknown as AnyAction,
+			);
+		}
+	}, [enabled, featureSourceId, dispatch]);
+}

package/src/js/components/feature-list/hooks/useFeatureListFeatureSource.ts

@@ -0,0 +1,22 @@
+import {useMemo} from "react";
+import {useSelector} from "react-redux";
+
+import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
+
+import {FEATURE_LIST} from "../../../config/constants/controllers";
+import {createFeatureSourceSelector} from "../../../store/selectors";
+
+// TODO: type out feature source state (probably in @mapsight/core)
+/**
+ * @param {string} listControllerName listControllerName
+ * @returns {{featureSource: object, featureSourceId: string}} featureSource
+ */
+export default function useFeatureListFeatureSource(
+	listControllerName = FEATURE_LIST,
+): {featureSourceId?: string; featureSource?: FeatureSourceState} {
+	const selector = useMemo(
+		() => createFeatureSourceSelector(listControllerName),
+		[listControllerName],
+	);
+	return useSelector(selector);
+}

package/src/js/components/feature-list/hooks/useFeatureListItemGroups.ts

@@ -0,0 +1,127 @@
+import type {ComponentType, ElementType, ReactElement} from "react";
+import {createElement, useMemo} from "react";
+
+import type {Feature} from "@mapsight/core/types";
+
+import getFeatureProperty from "../../../helpers/get-feature-property";
+import type {MapsightUiFeature} from "../../../types";
+import FeatureListItem from "../../feature-list-item";
+
+export interface MapsightUiListGroup {
+	name: string;
+	features: Feature[];
+}
+
+function determineFeatureGroups(
+	features: MapsightUiFeature[],
+): MapsightUiListGroup[] {
+	const groups: MapsightUiListGroup[] = [];
+
+	const defaultGroup = createGroup("");
+	groups[0] = defaultGroup;
+
+	features.forEach((feature) => {
+		const featureGroupName = getFeatureProperty(feature, "group") as string;
+
+		if (!featureGroupName) {
+			defaultGroup.features.push(feature);
+		} else {
+			// find group and add feature to it
+			let group = findGroup(groups, featureGroupName);
+			if (!group) {
+				group = createGroup(featureGroupName);
+				groups.push(group);
+			}
+			group.features.push(feature);
+		}
+	});
+
+	// reset if no groups found in data
+	// TODO discuss with paul, if we should show an empty header for the group without name and
+	//  if to show that even if there's no other group
+	if (groups.length === 1) {
+		return [];
+	}
+
+	// remove default group if there are no features left
+	if (!groups[0].features.length) {
+		groups.shift();
+	}
+
+	return groups;
+}
+
+function createGroup(name: string): MapsightUiListGroup {
+	return {name: name, features: []};
+}
+
+function findGroup(
+	groups: MapsightUiListGroup[],
+	name: string,
+): undefined | MapsightUiListGroup {
+	return groups.find((g) => g.name === name);
+}
+
+const renderItems = (
+	features: Feature[],
+	as: ComponentType<{feature: Feature}>,
+	itemProps: Record<string, unknown>,
+) => {
+	const Component = typeof as === "string" ? FeatureListItem : as;
+	return features.map((feature) =>
+		createElement(Component, {
+			...itemProps,
+			key: feature.id,
+			feature: feature,
+		}),
+	);
+};
+
+export type ItemGroups = {
+	groups: null | MapsightUiListGroup[];
+	items: Array<Array<ReactElement>>;
+};
+
+function calcAndRenderGroupedFeatureItems(
+	enableGrouping: boolean,
+	features: MapsightUiFeature[],
+	itemAs: ComponentType<{feature: Feature}>,
+	itemProps: Record<string, unknown>,
+): ItemGroups {
+	if (enableGrouping && features.length) {
+		const groups = determineFeatureGroups(features);
+		if (groups && groups.length) {
+			return {
+				groups: groups,
+				items: groups.map((group) =>
+					renderItems(group.features, itemAs, itemProps),
+				),
+			};
+		}
+	}
+
+	return {
+		groups: null,
+		items: features.length
+			? [renderItems(features, itemAs, itemProps)]
+			: [],
+	};
+}
+
+export default function useFeatureListItemGroups(
+	groupAs: ElementType,
+	features: MapsightUiFeature[],
+	itemAs: ComponentType<{feature: Feature}>,
+	itemProps: Record<string, unknown>,
+): ItemGroups {
+	return useMemo(
+		() =>
+			calcAndRenderGroupedFeatureItems(
+				!!groupAs,
+				features,
+				itemAs,
+				itemProps,
+			),
+		[groupAs, features, itemAs, itemProps],
+	);
+}

package/src/js/components/feature-list/hooks/useFeatureListState.ts

@@ -0,0 +1,90 @@
+import {useMemo} from "react";
+import {useSelector} from "react-redux";
+
+import type {FeatureSelectionState} from "@mapsight/core/lib/feature-selections/selectors";
+import {
+	getFeatureSourceError,
+	getFeatureSourceStatus,
+} from "@mapsight/core/lib/feature-sources/selectors";
+
+import {FEATURE_LIST} from "../../../config/constants/controllers";
+import {featureListContextSelector} from "../../../store/selectors";
+import type {FullUiState} from "../../../types";
+import useFeatureListFeatureSource from "./useFeatureListFeatureSource";
+import type {PaginatedFilteredFeaturesState} from "./usePaginatedFilteredFeatures";
+import usePaginatedFilteredFeatures from "./usePaginatedFilteredFeatures";
+
+export type FeatureListStateProps = PaginatedFilteredFeaturesState & {
+	tagSwitcherShow: FullUiState["tagSwitcher"]["show"];
+	layerSwitcherShowExternal: FullUiState["layerSwitcher"]["show"]["external"];
+	status: string | null;
+	error: string | null;
+	featureSourceId?: string;
+	scrollPosition: number | null;
+	selectSelection: undefined | FeatureSelectionState;
+	preselectSelection: undefined | FeatureSelectionState;
+	highlightSelection: undefined | FeatureSelectionState;
+};
+
+export default function useFeatureListState(
+	listUiOptions: FullUiState["list"],
+	sort = true,
+	filter = true,
+	enableScrollPosition = true,
+	listControllerName = FEATURE_LIST,
+) {
+	const {featureSourceId, featureSource} =
+		useFeatureListFeatureSource(listControllerName);
+	const {
+		tagSwitcherShow,
+		layerSwitcherShowExternal,
+		scrollPosition,
+		selectSelection,
+		preselectSelection,
+		highlightSelection,
+	} = useSelector(featureListContextSelector);
+	const paginatedFilteredFeaturesState = usePaginatedFilteredFeatures(
+		featureSource,
+		listUiOptions,
+		sort,
+		filter,
+	);
+	const featureSourceState = useMemo(
+		() => ({
+			status: featureSource
+				? getFeatureSourceStatus(featureSource)
+				: null,
+			error: featureSource
+				? (getFeatureSourceError(featureSource) as string | null)
+				: null,
+		}),
+		[featureSource],
+	);
+
+	return useMemo(
+		(): FeatureListStateProps => ({
+			...paginatedFilteredFeaturesState,
+			...featureSourceState,
+			tagSwitcherShow: !!tagSwitcherShow,
+			layerSwitcherShowExternal: !!layerSwitcherShowExternal,
+			featureSourceId,
+			scrollPosition:
+				(enableScrollPosition ? scrollPosition : null) ?? null,
+			selectSelection,
+			preselectSelection,
+			highlightSelection,
+		}),
+		[
+			paginatedFilteredFeaturesState,
+			featureSourceState,
+			tagSwitcherShow,
+			layerSwitcherShowExternal,
+			featureSourceId,
+			enableScrollPosition,
+			scrollPosition,
+			selectSelection,
+			preselectSelection,
+			highlightSelection,
+		],
+	);
+}

package/src/js/components/feature-list/hooks/useKeyboardNavigation.js

@@ -0,0 +1,112 @@
+import {useCallback} from "react";
+
+import {
+	APP_EVENT_FOCUS_FEATURE_LIST,
+	useAppChannelEventListener,
+} from "../../helping/app-channel";
+
+const DEFAULT_SELECTOR_ITEM = ".ms3-list__item";
+const DEFAULT_SELECTOR_BUTTON = ".ms3-list__button";
+
+/**
+ * @param {boolean} enabled enable keyboard navigation
+ * @param {import('react').MutableRefObject<HTMLElement>} ref ref of the list container
+ * @returns {{onKeyDown: (KeyboardEvent) => void, tabIndex: number}|{onKeyDown: undefined, tabIndex: undefined}} props that should be applied to the container
+ */
+function useKeyboardNavigation(enabled, ref) {
+	useAppChannelEventListener(
+		APP_EVENT_FOCUS_FEATURE_LIST,
+		useCallback(() => {
+			if (!enabled) {
+				moveFocus(ref.current, "first", {preventScroll: true});
+			}
+		}, [enabled, ref]),
+	);
+
+	/** @type {(KeyboardEvent) => void} */
+	const onKeyDown = useCallback(
+		(ev) => {
+			if (!enabled) {
+				return;
+			}
+
+			if (ev.key === "ArrowUp") {
+				ev.preventDefault();
+				moveFocus(ref.current, -1);
+			} else if (ev.key === "ArrowDown") {
+				ev.preventDefault();
+				moveFocus(ref.current, 1);
+			} else if (ev.key === "PageUp") {
+				ev.preventDefault();
+				moveFocus(ref.current, "first");
+			} else if (ev.key === "PageDown") {
+				ev.preventDefault();
+				moveFocus(ref.current, "last");
+			}
+		},
+		[enabled, ref],
+	);
+
+	if (!enabled) {
+		return {
+			tabIndex: undefined,
+			onKeyDown: undefined,
+		};
+	}
+
+	return {
+		tabIndex: 0,
+		onKeyDown: onKeyDown,
+	};
+}
+
+/**
+ * @param {HTMLElement} container container element
+ * @param {"first" | "last" | number} direction direction to move focus in
+ * @param {object} [options] options
+ * @param {string} [options.selectorItem=".ms3-list__item"] selector for items to navigate between
+ * @param {string} [options.selectorButton=".ms3-list__button"] selector for focusable elements to navigate between
+ * @param {FocusOptions} [options.focusOptions] focus options
+ */
+function moveFocus(
+	container,
+	direction = "first",
+	{
+		selectorButton = DEFAULT_SELECTOR_BUTTON,
+		selectorItem = DEFAULT_SELECTOR_ITEM,
+		focusOptions,
+	} = {},
+) {
+	// get buttons in document order
+	const buttons = [...container.querySelectorAll(selectorButton)];
+	const lastIndex = buttons.length - 1;
+
+	let nextIndex = 0;
+	if (direction === "last") {
+		nextIndex = lastIndex;
+	} else if (typeof direction === "number") {
+		const activeElement = document.activeElement;
+		if (!activeElement) return;
+
+		if (activeElement === container) {
+			nextIndex = direction >= 0 ? 0 : lastIndex;
+		} else {
+			const startElement = activeElement.matches(selectorButton)
+				? activeElement
+				: activeElement
+						.closest(selectorItem)
+						?.querySelector(selectorButton);
+			if (!startElement) {
+				console.error("No focusable element found");
+				return;
+			}
+			const currentIndex = buttons.indexOf(startElement);
+			nextIndex =
+				(buttons.length + currentIndex + direction) % buttons.length;
+		}
+	}
+
+	buttons[nextIndex].focus(focusOptions);
+}
+
+export default useKeyboardNavigation;