@open-pioneer/selection 0.10.0 → 0.11.0-dev.20250515143825

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @open-pioneer/selection
 
+## 0.11.0-dev.20250515143825
+
+### Minor Changes
+
+- 738390e: Update to Chakra v3
+
+### Patch Changes
+
+- Updated dependencies [738390e]
+- Updated dependencies [738390e]
+    - @open-pioneer/map@0.11.0-dev.20250515143825
+
 ## 0.10.0
 
 ### Minor Changes

package/Selection.js

@@ -1,31 +1,24 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { VStack, FormControl, FormLabel, useToken, Flex, Box, Tooltip, chakra, Icon } from '@open-pioneer/chakra-integration';
+import { createListCollection, VStack, Select, Portal, Flex, Box, chakra, Icon } from '@chakra-ui/react';
+import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useMapModel } from '@open-pioneer/map';
 import { useCommonComponentProps, useEvent } from '@open-pioneer/react-utils';
-import { Select, chakraComponents } from 'chakra-react-select';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 import { useIntl, useService } from './_virtual/_virtual-pioneer-module_react-hooks.js';
-import { useState, useMemo, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { FiAlertTriangle } from 'react-icons/fi';
-import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 import { DragController } from './DragController.js';
 import { SelectionController } from './SelectionController.js';
 
-const COMMON_SELECT_PROPS = {
-  classNamePrefix: "react-select",
-  menuPosition: "fixed",
-  isSearchable: false,
-  isClearable: false
-};
 const Selection = (props) => {
   const intl = useIntl();
   const { sources, onSelectionComplete, onSelectionSourceChanged } = props;
   const { containerProps } = useCommonComponentProps("selection", props);
-  const defaultNotAvailableMessage = intl.formatMessage({ id: "sourceNotAvailable" });
   const [currentSource, setCurrentSource] = useCurrentSelectionSource(
     sources,
     onSelectionSourceChanged
   );
-  const currentSourceStatus = useSourceStatus(currentSource, defaultNotAvailableMessage);
+  const currentSourceStatus = useSourceStatus(currentSource);
   const mapState = useMapModel(props);
   const { onExtentSelected } = useSelectionController(
     mapState.map,
@@ -33,8 +26,6 @@ const Selection = (props) => {
     currentSource,
     onSelectionComplete
   );
-  const chakraStyles = useChakraStyles();
-  const [isOpenSelect, setIsOpenSelect] = useState(false);
   useDragSelection(
     mapState.map,
     intl,
@@ -42,86 +33,76 @@ const Selection = (props) => {
     currentSourceStatus.kind === "available",
     !!currentSource
   );
-  const sourceOptions = useMemo(
-    () => sources.map((source) => {
-      return { label: source.label, value: source };
-    }),
-    [sources]
-  );
-  const currentSourceOption = useMemo(() => {
-    const foundOption = sourceOptions.find(
-      (option) => option.value === currentSource
-    );
-    return foundOption || null;
-  }, [sourceOptions, currentSource]);
-  const onSourceOptionChanged = useEvent((newValue) => {
-    setCurrentSource(newValue?.value);
+  const getId = useSelectionSourceId();
+  const sourceOptionsCollection = createListCollection({
+    items: sources,
+    isItemDisabled: () => {
+      return false;
+    },
+    itemToString: (item) => item.label,
+    itemToValue: (item) => getId(item)
   });
-  const keyDown = useEvent((event) => {
-    if (!isOpenSelect && event.key === "Enter") {
-      setIsOpenSelect(true);
+  let triggerItem;
+  if (currentSource) {
+    triggerItem = /* @__PURE__ */ jsx(SelectionSourceItem, { source: currentSource });
+  } else {
+    triggerItem = null;
+  }
+  return /* @__PURE__ */ jsx(VStack, { ...containerProps, gap: 2, children: /* @__PURE__ */ jsxs(
+    Select.Root,
+    {
+      className: "selection-source",
+      collection: sourceOptionsCollection,
+      value: currentSource ? [getId(currentSource)] : void 0,
+      onValueChange: (option) => option && setCurrentSource(option.items[0]),
+      lazyMount: true,
+      unmountOnExit: true,
+      children: [
+        /* @__PURE__ */ jsx(Select.Label, { children: intl.formatMessage({ id: "selectSource" }) }),
+        /* @__PURE__ */ jsxs(Select.Control, { children: [
+          /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(
+            Select.ValueText,
+            {
+              placeholder: intl.formatMessage({ id: "selectionPlaceholder" }),
+              children: triggerItem
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx(Select.Indicator, {}) })
+        ] }),
+        /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { className: "selection-source-options", children: sourceOptionsCollection.items.map((item) => /* @__PURE__ */ jsx(SelectionSourceItemContent, { item }, getId(item))) }) }) })
+      ]
     }
-  });
-  return /* @__PURE__ */ jsx(VStack, { ...containerProps, spacing: 2, children: /* @__PURE__ */ jsxs(FormControl, { children: [
-    /* @__PURE__ */ jsx(FormLabel, { children: intl.formatMessage({ id: "selectSource" }) }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        className: "selection-source react-select",
-        ...COMMON_SELECT_PROPS,
-        options: sourceOptions,
-        placeholder: intl.formatMessage({ id: "selectionPlaceholder" }),
-        value: currentSourceOption,
-        onChange: onSourceOptionChanged,
-        components: {
-          Option: SourceSelectOption,
-          SingleValue: SourceSelectValue
-        },
-        isOptionDisabled: () => false,
-        getOptionLabel: (option) => {
-          const label = option.label;
-          const status = getSourceStatus(option.value, defaultNotAvailableMessage);
-          if (status.kind == "available") return label;
-          return label + " " + status.reason;
-        },
-        ariaLiveMessages: {
-          guidance: () => "",
-          onChange: (props2) => {
-            if (props2.action == "select-option" || props2.action == "initial-input-focus")
-              return props2.label + " " + intl.formatMessage({ id: "selected" });
-            else return "";
-          },
-          onFilter: () => "",
-          onFocus: () => ""
-        },
-        chakraStyles,
-        onKeyDown: keyDown,
-        menuIsOpen: isOpenSelect,
-        onMenuOpen: () => setIsOpenSelect(true),
-        onMenuClose: () => setIsOpenSelect(false)
-      }
-    )
-  ] }) });
+  ) });
 };
-function SourceSelectOption(props) {
-  const { value } = props.data;
-  const { isAvailable, content } = useSourceItem(value, false);
+function useSelectionSourceId() {
+  const sourceIds = useRef(void 0);
+  const counter = useRef(0);
+  if (!sourceIds.current) {
+    sourceIds.current = /* @__PURE__ */ new WeakMap();
+  }
+  return useCallback((selectionSource) => {
+    const ids = sourceIds.current;
+    if (!ids.has(selectionSource)) {
+      ids.set(selectionSource, `source-${counter.current++}`);
+    }
+    return ids.get(selectionSource);
+  }, []);
+}
+function SelectionSourceItemContent(props) {
+  const { item } = props;
+  const isDisabled = useSourceStatus(item).kind === "unavailable";
   return /* @__PURE__ */ jsx(
-    chakraComponents.Option,
+    Select.Item,
     {
-      ...props,
-      isDisabled: !isAvailable,
       className: "selection-source-option",
-      children: content
+      item,
+      justifyContent: "flex-start",
+      pointerEvents: "auto",
+      "aria-disabled": isDisabled ? "true" : void 0,
+      children: /* @__PURE__ */ jsx(SelectionSourceItem, { source: item })
     }
   );
 }
-function SourceSelectValue(props) {
-  const { value } = props.data;
-  const { isAvailable, content } = useSourceItem(value, true);
-  const clazz = isAvailable ? "selection-source-value" : "selection-source-value selection-source-value--disabled";
-  return /* @__PURE__ */ jsx(chakraComponents.SingleValue, { ...props, isDisabled: !isAvailable, className: clazz, children: content });
-}
 function useCurrentSelectionSource(sources, onSourceChanged) {
   const [currentSource, setCurrentSource] = useState(
     () => sources[0]
@@ -140,27 +121,33 @@ function useCurrentSelectionSource(sources, onSourceChanged) {
   }, [currentSource, onSourceChanged]);
   return [currentSource, setCurrentSource];
 }
-function useSourceItem(source, isSelected) {
-  const intl = useIntl();
+function SelectionSourceItem(props) {
+  const source = props.source;
   const label = source?.label;
-  const defaultNotAvailableMessage = intl.formatMessage({ id: "sourceNotAvailable" });
-  const status = useSourceStatus(source, defaultNotAvailableMessage);
-  return {
-    isAvailable: status.kind === "available",
-    content: /* @__PURE__ */ jsxs(Flex, { direction: "row", alignItems: "center", grow: 1, children: [
-      !isSelected && /* @__PURE__ */ jsx(Flex, { grow: 1, children: label }),
-      status.kind === "unavailable" && /* @__PURE__ */ jsx(Box, { ml: 2, children: /* @__PURE__ */ jsx(Tooltip, { label: status.reason, placement: "right", openDelay: 500, children: /* @__PURE__ */ jsx(chakra.span, { children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          as: FiAlertTriangle,
-          color: "red",
-          className: "warning-icon",
-          "aria-label": status.reason
-        }
-      ) }) }) }),
-      isSelected && label
-    ] })
-  };
+  const status = useSourceStatus(source);
+  const isAvailable = status.kind === "available";
+  const clazz = isAvailable ? "selection-source-value" : "selection-source-value selection-source-value--disabled";
+  return /* @__PURE__ */ jsxs(Flex, { className: clazz, direction: "row", alignItems: "center", grow: 1, children: [
+    label,
+    status.kind === "unavailable" && /* @__PURE__ */ jsx(Box, { ml: 2, children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: status.reason,
+        positioning: { placement: "right" },
+        openDelay: 500,
+        children: /* @__PURE__ */ jsx(chakra.span, { children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            color: "red",
+            className: "warning-icon",
+            "aria-label": status.reason,
+            "aria-hidden": void 0,
+            children: /* @__PURE__ */ jsx(FiAlertTriangle, {})
+          }
+        ) })
+      }
+    ) })
+  ] });
 }
 function useSelectionController(mapModel, sources, currentSource, onSelectionComplete) {
   const notifier = useService("notifier.NotificationService");
@@ -210,7 +197,9 @@ function getSourceStatus(source, sourceNotAvailableReason) {
     reason: current.reason ?? sourceNotAvailableReason
   };
 }
-function useSourceStatus(source, defaultNotAvailableMessage) {
+function useSourceStatus(source) {
+  const intl = useIntl();
+  const defaultNotAvailableMessage = intl.formatMessage({ id: "sourceNotAvailable" });
   const sourceStatus = useReactiveSnapshot(() => {
     if (!source) {
       return { kind: "unavailable", reason: defaultNotAvailableMessage };
@@ -237,27 +226,6 @@ function useDragSelection(map, intl, onExtentSelected, isActive, hasSelectedSour
     };
   }, [map, intl, onExtentSelected, isActive, hasSelectedSource]);
 }
-function useChakraStyles() {
-  const [dropDownBackground, borderColor] = useToken(
-    "colors",
-    ["background_body", "border"],
-    ["#ffffff", "#ffffff"]
-  );
-  return useMemo(() => {
-    const chakraStyles = {
-      control: (styles) => ({ ...styles, cursor: "pointer" }),
-      indicatorSeparator: (styles) => ({
-        ...styles,
-        borderColor
-      }),
-      dropdownIndicator: (provided) => ({
-        ...provided,
-        backgroundColor: dropDownBackground
-      })
-    };
-    return chakraStyles;
-  }, [dropDownBackground, borderColor]);
-}
 
 export { Selection };
 //# sourceMappingURL=Selection.js.map

package/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sources":["Selection.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Flex,\n    FormControl,\n    FormLabel,\n    Icon,\n    Tooltip,\n    VStack,\n    chakra,\n    useToken\n} from \"@open-pioneer/chakra-integration\";\nimport { MapModel, MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { NotificationService } from \"@open-pioneer/notifier\";\nimport { CommonComponentProps, useCommonComponentProps, useEvent } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport {\n    ChakraStylesConfig,\n    GroupBase,\n    OptionProps,\n    Select,\n    Props as SelectProps,\n    SingleValueProps,\n    chakraComponents,\n    type SingleValue\n} from \"chakra-react-select\";\nimport { Geometry } from \"ol/geom\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, KeyboardEvent, ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\nimport { FiAlertTriangle } from \"react-icons/fi\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { DragController } from \"./DragController\";\nimport { SelectionController } from \"./SelectionController\";\nimport { SelectionResult, SelectionSource, SelectionSourceStatusObject } from \"./api\";\n\n/**\n * Properties supported by the {@link Selection} component.\n */\nexport interface SelectionProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Array of selection sources available for spatial selection.\n     */\n    sources: SelectionSource[];\n\n    /**\n     * This handler is called whenever the user has successfully selected\n     * some items.\n     */\n    onSelectionComplete?(event: SelectionCompleteEvent): void;\n\n    /**\n     * This handler is called whenever the user has changed the selected source\n     */\n    onSelectionSourceChanged?(event: SelectionSourceChangedEvent): void;\n}\n\nexport interface SelectionCompleteEvent {\n    /** The source that returned the {@link results}. */\n    source: SelectionSource;\n\n    /** Results selected by the user. */\n    results: SelectionResult[];\n}\n\nexport interface SelectionSourceChangedEvent {\n    /** The new selected source */\n    source: SelectionSource | undefined;\n}\n\n/**\n * Properties for single select options.\n */\ninterface SelectionOption {\n    /**\n     * The label of the selection source option.\n     */\n    label: string;\n\n    /**\n     * The value (SelectionSource) of the selection source option.\n     */\n    value: SelectionSource;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst COMMON_SELECT_PROPS: SelectProps<any, any, any> = {\n    classNamePrefix: \"react-select\",\n    menuPosition: \"fixed\",\n    isSearchable: false,\n    isClearable: false\n};\n\n/**\n * A component that allows the user to perform a spatial selection on a given set of {@link SelectionSource}.\n */\nexport const Selection: FC<SelectionProps> = (props) => {\n    const intl = useIntl();\n    const { sources, onSelectionComplete, onSelectionSourceChanged } = props;\n    const { containerProps } = useCommonComponentProps(\"selection\", props);\n    const defaultNotAvailableMessage = intl.formatMessage({ id: \"sourceNotAvailable\" });\n\n    const [currentSource, setCurrentSource] = useCurrentSelectionSource(\n        sources,\n        onSelectionSourceChanged\n    );\n\n    const currentSourceStatus = useSourceStatus(currentSource, defaultNotAvailableMessage);\n\n    const mapState = useMapModel(props);\n    const { onExtentSelected } = useSelectionController(\n        mapState.map,\n        sources,\n        currentSource,\n        onSelectionComplete\n    );\n    const chakraStyles = useChakraStyles();\n    const [isOpenSelect, setIsOpenSelect] = useState(false);\n\n    useDragSelection(\n        mapState.map,\n        intl,\n        onExtentSelected,\n        currentSourceStatus.kind === \"available\",\n        !!currentSource\n    );\n\n    const sourceOptions = useMemo(\n        () =>\n            sources.map<SelectionOption>((source) => {\n                return { label: source.label, value: source };\n            }),\n        [sources]\n    );\n    const currentSourceOption = useMemo(() => {\n        const foundOption: SelectionOption | undefined = sourceOptions.find(\n            (option) => option.value === currentSource\n        );\n        return foundOption || null;\n    }, [sourceOptions, currentSource]);\n\n    const onSourceOptionChanged = useEvent((newValue: SingleValue<SelectionOption>) => {\n        setCurrentSource(newValue?.value);\n    });\n\n    const keyDown = useEvent((event: KeyboardEvent<HTMLDivElement>) => {\n        //if the menu is already open, do noting\n        if (!isOpenSelect && event.key === \"Enter\") {\n            setIsOpenSelect(true);\n        }\n    });\n\n    return (\n        <VStack {...containerProps} spacing={2}>\n            <FormControl>\n                <FormLabel>{intl.formatMessage({ id: \"selectSource\" })}</FormLabel>\n                <Select<SelectionOption>\n                    className=\"selection-source react-select\"\n                    {...COMMON_SELECT_PROPS}\n                    options={sourceOptions}\n                    placeholder={intl.formatMessage({ id: \"selectionPlaceholder\" })}\n                    value={currentSourceOption}\n                    onChange={onSourceOptionChanged}\n                    components={{\n                        Option: SourceSelectOption,\n                        SingleValue: SourceSelectValue\n                    }}\n                    isOptionDisabled={() => false} // allow to select disabled options; optical disabling is done in option\n                    // optionLabel is used by screenreaders\n                    getOptionLabel={(option) => {\n                        const label = option.label;\n                        const status = getSourceStatus(option.value, defaultNotAvailableMessage);\n                        if (status.kind == \"available\") return label;\n                        return label + \" \" + status.reason;\n                    }}\n                    ariaLiveMessages={{\n                        guidance: () => \"\",\n                        onChange: (props) => {\n                            if (\n                                props.action == \"select-option\" ||\n                                props.action == \"initial-input-focus\"\n                            )\n                                return props.label + \" \" + intl.formatMessage({ id: \"selected\" });\n                            else return \"\";\n                        },\n                        onFilter: () => \"\",\n                        onFocus: () => \"\"\n                    }}\n                    chakraStyles={chakraStyles}\n                    onKeyDown={keyDown}\n                    menuIsOpen={isOpenSelect}\n                    onMenuOpen={() => setIsOpenSelect(true)}\n                    onMenuClose={() => setIsOpenSelect(false)}\n                />\n            </FormControl>\n        </VStack>\n    );\n};\n\nfunction SourceSelectOption(props: OptionProps<SelectionOption>): ReactNode {\n    const { value } = props.data;\n    const { isAvailable, content } = useSourceItem(value, false);\n\n    return (\n        <chakraComponents.Option\n            {...props}\n            isDisabled={!isAvailable}\n            className=\"selection-source-option\"\n        >\n            {content}\n        </chakraComponents.Option>\n    );\n}\n\nfunction SourceSelectValue(props: SingleValueProps<SelectionOption>): ReactNode {\n    const { value } = props.data;\n    const { isAvailable, content } = useSourceItem(value, true);\n    const clazz = isAvailable\n        ? \"selection-source-value\"\n        : \"selection-source-value selection-source-value--disabled\";\n\n    return (\n        <chakraComponents.SingleValue {...props} isDisabled={!isAvailable} className={clazz}>\n            {content}\n        </chakraComponents.SingleValue>\n    );\n}\n\nfunction useCurrentSelectionSource(\n    sources: SelectionSource[],\n    onSourceChanged: ((event: SelectionSourceChangedEvent) => void) | undefined\n): [SelectionSource | undefined, (source: SelectionSource | undefined) => void] {\n    const [currentSource, setCurrentSource] = useState<SelectionSource | undefined>(\n        () => sources[0]\n    );\n\n    // Reset to undefined if the current source is not in the list of sources\n    useEffect(() => {\n        if (currentSource && !sources.includes(currentSource)) {\n            setCurrentSource(undefined);\n        }\n    }, [sources, currentSource]);\n\n    // Track the current source and notify the parent component if it changes\n    const prevSelectedSource = useRef<SelectionSource | undefined>(undefined);\n    useEffect(() => {\n        if (currentSource !== prevSelectedSource.current) {\n            prevSelectedSource.current = currentSource;\n            onSourceChanged?.({ source: currentSource });\n        }\n    }, [currentSource, onSourceChanged]);\n    return [currentSource, setCurrentSource];\n}\n\n/**\n * Hook to manage source option in selection-source react-select\n */\nfunction useSourceItem(source: SelectionSource | undefined, isSelected: boolean) {\n    const intl = useIntl();\n    const label: string | undefined = source?.label;\n    const defaultNotAvailableMessage = intl.formatMessage({ id: \"sourceNotAvailable\" });\n    const status = useSourceStatus(source, defaultNotAvailableMessage);\n\n    return {\n        isAvailable: status.kind === \"available\",\n        content: (\n            <Flex direction=\"row\" alignItems=\"center\" grow={1}>\n                {!isSelected && <Flex grow={1}>{label}</Flex>}\n                {status.kind === \"unavailable\" && (\n                    <Box ml={2}>\n                        <Tooltip label={status.reason} placement=\"right\" openDelay={500}>\n                            <chakra.span>\n                                <Icon\n                                    as={FiAlertTriangle}\n                                    color=\"red\"\n                                    className=\"warning-icon\"\n                                    aria-label={status.reason}\n                                />\n                            </chakra.span>\n                        </Tooltip>\n                    </Box>\n                )}\n                {isSelected && label}\n            </Flex>\n        )\n    };\n}\n\n/**\n * Hook to manage selection sources\n */\nfunction useSelectionController(\n    mapModel: MapModel | undefined,\n    sources: SelectionSource[],\n    currentSource: SelectionSource | undefined,\n    onSelectionComplete: ((event: SelectionCompleteEvent) => void) | undefined\n) {\n    const notifier = useService<NotificationService>(\"notifier.NotificationService\");\n    const intl = useIntl();\n    const [controller, setController] = useState<SelectionController | undefined>(undefined);\n    useEffect(() => {\n        if (!mapModel) {\n            return;\n        }\n        const controller = new SelectionController({\n            mapModel,\n            onError() {\n                notifier.notify({\n                    level: \"error\",\n                    message: intl.formatMessage({ id: \"selectionFailed\" })\n                });\n            }\n        });\n        setController(controller);\n        return () => {\n            controller.destroy();\n        };\n    }, [mapModel, notifier, sources, intl]);\n\n    const onExtentSelected = useEvent(async (geometry: Geometry) => {\n        if (!controller || !currentSource) {\n            return;\n        }\n\n        const selectionResult = await controller.select(currentSource, geometry.getExtent());\n        if (!selectionResult) {\n            return;\n        }\n\n        onSelectionComplete?.(selectionResult);\n    });\n    return {\n        controller,\n        onExtentSelected\n    };\n}\n\ntype SimpleStatus =\n    | {\n          kind: \"available\";\n      }\n    | {\n          kind: \"unavailable\";\n          reason: string;\n      };\n\nfunction getSourceStatus(source: SelectionSource, sourceNotAvailableReason: string): SimpleStatus {\n    const rawCurrent = source.status ?? \"available\";\n    const current: SelectionSourceStatusObject =\n        typeof rawCurrent === \"string\" ? { kind: rawCurrent } : rawCurrent;\n    if (current.kind === \"available\") {\n        return current;\n    }\n\n    return {\n        kind: \"unavailable\",\n        reason: current.reason ?? sourceNotAvailableReason\n    };\n}\n\n/**\n * Hook to manage source status\n */\nfunction useSourceStatus(\n    source: SelectionSource | undefined,\n    defaultNotAvailableMessage: string\n): SimpleStatus {\n    const sourceStatus = useReactiveSnapshot((): SimpleStatus => {\n        if (!source) {\n            return { kind: \"unavailable\", reason: defaultNotAvailableMessage };\n        }\n        return getSourceStatus(source, defaultNotAvailableMessage);\n    }, [source, defaultNotAvailableMessage]);\n    return sourceStatus;\n}\n\n/**\n * Hook to manage map controls and tooltip\n */\nfunction useDragSelection(\n    map: MapModel | undefined,\n    intl: PackageIntl,\n    onExtentSelected: (geometry: Geometry) => void,\n    isActive: boolean,\n    hasSelectedSource: boolean\n) {\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        const disabledMessage = hasSelectedSource\n            ? intl.formatMessage({ id: \"disabledTooltip\" })\n            : intl.formatMessage({ id: \"noSourceTooltip\" });\n\n        const dragController = new DragController(\n            map.olMap,\n            intl.formatMessage({ id: \"tooltip\" }),\n            disabledMessage,\n            onExtentSelected\n        );\n\n        dragController.setActive(isActive);\n        return () => {\n            dragController?.destroy();\n        };\n    }, [map, intl, onExtentSelected, isActive, hasSelectedSource]);\n}\n\n/**\n * Customizes components styles within the select component.\n */\nfunction useChakraStyles() {\n    const [dropDownBackground, borderColor] = useToken(\n        \"colors\",\n        [\"background_body\", \"border\"],\n        [\"#ffffff\", \"#ffffff\"]\n    );\n    return useMemo(() => {\n        const chakraStyles: ChakraStylesConfig<\n            SelectionOption,\n            false,\n            GroupBase<SelectionOption>\n        > = {\n            control: (styles) => ({ ...styles, cursor: \"pointer\" }),\n            indicatorSeparator: (styles) => ({\n                ...styles,\n                borderColor: borderColor\n            }),\n            dropdownIndicator: (provided) => ({\n                ...provided,\n                backgroundColor: dropDownBackground\n            })\n        };\n        return chakraStyles;\n    }, [dropDownBackground, borderColor]);\n}\n"],"names":["props","controller"],"mappings":"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"}
+{"version":3,"file":"Selection.js","sources":["Selection.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    chakra,\n    createListCollection,\n    Flex,\n    Icon,\n    Portal,\n    Select,\n    VStack\n} from \"@chakra-ui/react\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { MapModel, MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { NotificationService } from \"@open-pioneer/notifier\";\nimport { CommonComponentProps, useCommonComponentProps, useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { Geometry } from \"ol/geom\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport { FiAlertTriangle } from \"react-icons/fi\";\nimport { DragController } from \"./DragController\";\nimport { SelectionController } from \"./SelectionController\";\nimport { SelectionResult, SelectionSource, SelectionSourceStatusObject } from \"./api\";\n\n/**\n * Properties supported by the {@link Selection} component.\n */\nexport interface SelectionProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Array of selection sources available for spatial selection.\n     */\n    sources: SelectionSource[];\n\n    /**\n     * This handler is called whenever the user has successfully selected\n     * some items.\n     */\n    onSelectionComplete?(event: SelectionCompleteEvent): void;\n\n    /**\n     * This handler is called whenever the user has changed the selected source\n     */\n    onSelectionSourceChanged?(event: SelectionSourceChangedEvent): void;\n}\n\nexport interface SelectionCompleteEvent {\n    /** The source that returned the {@link results}. */\n    source: SelectionSource;\n\n    /** Results selected by the user. */\n    results: SelectionResult[];\n}\n\nexport interface SelectionSourceChangedEvent {\n    /** The new selected source */\n    source: SelectionSource | undefined;\n}\n\n/**\n * A component that allows the user to perform a spatial selection on a given set of {@link SelectionSource}.\n */\nexport const Selection: FC<SelectionProps> = (props) => {\n    const intl = useIntl();\n    const { sources, onSelectionComplete, onSelectionSourceChanged } = props;\n    const { containerProps } = useCommonComponentProps(\"selection\", props);\n\n    const [currentSource, setCurrentSource] = useCurrentSelectionSource(\n        sources,\n        onSelectionSourceChanged\n    );\n\n    const currentSourceStatus = useSourceStatus(currentSource);\n\n    const mapState = useMapModel(props);\n    const { onExtentSelected } = useSelectionController(\n        mapState.map,\n        sources,\n        currentSource,\n        onSelectionComplete\n    );\n\n    useDragSelection(\n        mapState.map,\n        intl,\n        onExtentSelected,\n        currentSourceStatus.kind === \"available\",\n        !!currentSource\n    );\n\n    const getId = useSelectionSourceId();\n\n    const sourceOptionsCollection = createListCollection({\n        items: sources,\n        isItemDisabled: () => {\n            return false;\n        },\n        itemToString: (item) => item.label,\n        itemToValue: (item) => getId(item)\n    });\n\n    let triggerItem;\n    if (currentSource) {\n        triggerItem = <SelectionSourceItem source={currentSource} />;\n    } else {\n        triggerItem = null;\n    }\n\n    return (\n        <VStack {...containerProps} gap={2}>\n            <Select.Root\n                className=\"selection-source\"\n                collection={sourceOptionsCollection}\n                value={currentSource ? [getId(currentSource)] : undefined}\n                onValueChange={(option) => option && setCurrentSource(option.items[0])}\n                lazyMount={true}\n                unmountOnExit={true}\n            >\n                <Select.Label>{intl.formatMessage({ id: \"selectSource\" })}</Select.Label>\n\n                <Select.Control>\n                    <Select.Trigger>\n                        <Select.ValueText\n                            placeholder={intl.formatMessage({ id: \"selectionPlaceholder\" })}\n                        >\n                            {triggerItem}\n                        </Select.ValueText>\n                    </Select.Trigger>\n                    <Select.IndicatorGroup>\n                        <Select.Indicator />\n                    </Select.IndicatorGroup>\n                </Select.Control>\n\n                <Portal>\n                    <Select.Positioner>\n                        <Select.Content className=\"selection-source-options\">\n                            {sourceOptionsCollection.items.map((item) => (\n                                <SelectionSourceItemContent item={item} key={getId(item)} />\n                            ))}\n                        </Select.Content>\n                    </Select.Positioner>\n                </Portal>\n            </Select.Root>\n        </VStack>\n    );\n};\n\ntype GetSelectionSourceId = (selectionSource: SelectionSource) => string;\n\n/**\n * Assigns unique IDs to selection sources.\n */\nfunction useSelectionSourceId(): GetSelectionSourceId {\n    const sourceIds = useRef<WeakMap<SelectionSource, string>>(undefined);\n    const counter = useRef(0);\n    if (!sourceIds.current) {\n        sourceIds.current = new WeakMap();\n    }\n\n    return useCallback((selectionSource: SelectionSource) => {\n        const ids = sourceIds.current!;\n        if (!ids.has(selectionSource)) {\n            ids.set(selectionSource, `source-${counter.current++}`);\n        }\n        return ids.get(selectionSource)!;\n    }, []);\n}\n\nfunction SelectionSourceItemContent(props: { item: SelectionSource }) {\n    const { item } = props;\n\n    const isDisabled = useSourceStatus(item).kind === \"unavailable\";\n\n    return (\n        <Select.Item\n            className=\"selection-source-option\"\n            item={item}\n            justifyContent=\"flex-start\"\n            // Override pointer-events: none rule for disabled items; we want to show the tooltip on hover\n            pointerEvents=\"auto\"\n            aria-disabled={isDisabled ? \"true\" : undefined}\n        >\n            <SelectionSourceItem source={item} />\n        </Select.Item>\n    );\n}\n\nfunction useCurrentSelectionSource(\n    sources: SelectionSource[],\n    onSourceChanged: ((event: SelectionSourceChangedEvent) => void) | undefined\n): [SelectionSource | undefined, (source: SelectionSource | undefined) => void] {\n    const [currentSource, setCurrentSource] = useState<SelectionSource | undefined>(\n        () => sources[0]\n    );\n\n    // Reset to undefined if the current source is not in the list of sources\n    useEffect(() => {\n        if (currentSource && !sources.includes(currentSource)) {\n            setCurrentSource(undefined);\n        }\n    }, [sources, currentSource]);\n\n    // Track the current source and notify the parent component if it changes\n    const prevSelectedSource = useRef<SelectionSource | undefined>(undefined);\n    useEffect(() => {\n        if (currentSource !== prevSelectedSource.current) {\n            prevSelectedSource.current = currentSource;\n            onSourceChanged?.({ source: currentSource });\n        }\n    }, [currentSource, onSourceChanged]);\n    return [currentSource, setCurrentSource];\n}\n\n/**\n * Hook to manage source option in selection-source react-select\n */\nfunction SelectionSourceItem(props: { source: SelectionSource | undefined }) {\n    const source = props.source;\n    const label: string | undefined = source?.label;\n    const status = useSourceStatus(source);\n    const isAvailable = status.kind === \"available\";\n    const clazz = isAvailable\n        ? \"selection-source-value\"\n        : \"selection-source-value selection-source-value--disabled\";\n\n    return (\n        <Flex className={clazz} direction=\"row\" alignItems=\"center\" grow={1}>\n            {label}\n            {status.kind === \"unavailable\" && (\n                <Box ml={2}>\n                    <Tooltip\n                        content={status.reason}\n                        positioning={{ placement: \"right\" }}\n                        openDelay={500}\n                    >\n                        <chakra.span>\n                            <Icon\n                                color=\"red\"\n                                className=\"warning-icon\"\n                                aria-label={status.reason}\n                                aria-hidden={undefined} // Overwrite icon default so the label gets read\n                            >\n                                <FiAlertTriangle />\n                            </Icon>\n                        </chakra.span>\n                    </Tooltip>\n                </Box>\n            )}\n        </Flex>\n    );\n}\n\n/**\n * Hook to manage selection controller\n */\nfunction useSelectionController(\n    mapModel: MapModel | undefined,\n    sources: SelectionSource[],\n    currentSource: SelectionSource | undefined,\n    onSelectionComplete: ((event: SelectionCompleteEvent) => void) | undefined\n) {\n    const notifier = useService<NotificationService>(\"notifier.NotificationService\");\n    const intl = useIntl();\n    const [controller, setController] = useState<SelectionController | undefined>(undefined);\n    useEffect(() => {\n        if (!mapModel) {\n            return;\n        }\n        const controller = new SelectionController({\n            mapModel,\n            onError() {\n                notifier.notify({\n                    level: \"error\",\n                    message: intl.formatMessage({ id: \"selectionFailed\" })\n                });\n            }\n        });\n        setController(controller);\n        return () => {\n            controller.destroy();\n        };\n    }, [mapModel, notifier, sources, intl]);\n\n    const onExtentSelected = useEvent(async (geometry: Geometry) => {\n        if (!controller || !currentSource) {\n            return;\n        }\n\n        const selectionResult = await controller.select(currentSource, geometry.getExtent());\n        if (!selectionResult) {\n            return;\n        }\n\n        onSelectionComplete?.(selectionResult);\n    });\n    return {\n        controller,\n        onExtentSelected\n    };\n}\n\ntype SimpleStatus =\n    | {\n          kind: \"available\";\n      }\n    | {\n          kind: \"unavailable\";\n          reason: string;\n      };\n\nfunction getSourceStatus(source: SelectionSource, sourceNotAvailableReason: string): SimpleStatus {\n    const rawCurrent = source.status ?? \"available\";\n    const current: SelectionSourceStatusObject =\n        typeof rawCurrent === \"string\" ? { kind: rawCurrent } : rawCurrent;\n    if (current.kind === \"available\") {\n        return current;\n    }\n\n    return {\n        kind: \"unavailable\",\n        reason: current.reason ?? sourceNotAvailableReason\n    };\n}\n\n/**\n * Hook to manage source status\n */\nfunction useSourceStatus(source: SelectionSource | undefined): SimpleStatus {\n    const intl = useIntl();\n    const defaultNotAvailableMessage = intl.formatMessage({ id: \"sourceNotAvailable\" });\n    const sourceStatus = useReactiveSnapshot((): SimpleStatus => {\n        if (!source) {\n            return { kind: \"unavailable\", reason: defaultNotAvailableMessage };\n        }\n        return getSourceStatus(source, defaultNotAvailableMessage);\n    }, [source, defaultNotAvailableMessage]);\n    return sourceStatus;\n}\n\n/**\n * Hook to manage map controls and tooltip\n */\nfunction useDragSelection(\n    map: MapModel | undefined,\n    intl: PackageIntl,\n    onExtentSelected: (geometry: Geometry) => void,\n    isActive: boolean,\n    hasSelectedSource: boolean\n) {\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        const disabledMessage = hasSelectedSource\n            ? intl.formatMessage({ id: \"disabledTooltip\" })\n            : intl.formatMessage({ id: \"noSourceTooltip\" });\n\n        const dragController = new DragController(\n            map.olMap,\n            intl.formatMessage({ id: \"tooltip\" }),\n            disabledMessage,\n            onExtentSelected\n        );\n\n        dragController.setActive(isActive);\n        return () => {\n            dragController?.destroy();\n        };\n    }, [map, intl, onExtentSelected, isActive, hasSelectedSource]);\n}\n"],"names":["controller"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/selection",
-  "version": "0.10.0",
+  "version": "0.11.0-dev.20250515143825",
   "description": "This package provides a UI component to perform a selection on given selection sources from the map.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,21 +14,20 @@
     "directory": "src/packages/selection"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.2.4",
-    "@open-pioneer/chakra-integration": "^3.1.0",
-    "@open-pioneer/core": "^3.1.0",
-    "@open-pioneer/notifier": "^3.1.0",
-    "@open-pioneer/react-utils": "^3.1.0",
-    "@open-pioneer/runtime": "^3.1.0",
+    "@chakra-ui/react": "^3.17.0",
+    "@open-pioneer/core": "4.0.0-dev.20250512105016",
+    "@open-pioneer/notifier": "4.0.0-dev.20250512105016",
+    "@open-pioneer/react-utils": "4.0.0-dev.20250512105016",
+    "@open-pioneer/runtime": "4.0.0-dev.20250512105016",
     "classnames": "^2.3.2",
-    "chakra-react-select": "^5.0.4",
     "ol": "^10.5.0",
     "react": "^19.1.0",
     "react-icons": "^5.3.0",
     "uuid": "^11.1.0",
-    "@conterra/reactivity-core": "^0.5.0",
-    "@open-pioneer/reactivity": "^3.1.0",
-    "@open-pioneer/map": "^0.10.0"
+    "@conterra/reactivity-core": "^0.6.0",
+    "@open-pioneer/reactivity": "4.0.0-dev.20250512105016",
+    "@open-pioneer/chakra-snippets": "4.0.0-dev.20250512105016",
+    "@open-pioneer/map": "0.11.0-dev.20250515143825"
   },
   "exports": {
     "./package.json": "./package.json",

package/selection.css

@@ -1,6 +1,6 @@
 .selection-drag-box {
     background-color: rgba(255, 255, 255, 0.3) !important;
-    border: 3px solid var(--chakra-colors-background_primary) !important;
+    border: 3px solid var(--chakra-colors-trails-solid) !important;
 }
 
 .selection-tooltip {

package/selection.css.map

@@ -1 +1 @@
-{"version":3,"sources":["selection.css"],"names":[],"mappings":"AAAA;IACI,qDAAqD;IACrD,oEAAoE;AACxE;;AAEA;IACI,kBAAkB;IAClB,oCAAoC;IACpC,kBAAkB;IAClB,YAAY;IACZ,gBAAgB;IAChB,UAAU;IACV,mBAAmB;IACnB,eAAe;IACf,eAAe;IACf,iBAAiB;IACjB,iBAAiB;AACrB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,YAAY;AAChB;;AAEA;IACI,uBAAuB;AAC3B","file":"selection.css","sourcesContent":[".selection-drag-box {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    border: 3px solid var(--chakra-colors-background_primary) !important;\n}\n\n.selection-tooltip {\n    position: relative;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 4px;\n    color: black;\n    padding: 4px 8px;\n    opacity: 1;\n    white-space: nowrap;\n    font-size: 12px;\n    cursor: default;\n    user-select: none;\n    font-weight: bold;\n}\n\n.selection .react-select {\n    cursor: default;\n}\n\n.map-container .selection-active {\n    cursor: crosshair;\n}\n\n.map-container .selection-inactive {\n    cursor: no-drop;\n}\n\n.selection-source-value.selection-source-value--disabled {\n    opacity: 0.4;\n}\n\n.selection-source-value.selection-source-value--disabled span {\n    margin: 0px 6px 0px 0px;\n}\n"]}
+{"version":3,"sources":["selection.css"],"names":[],"mappings":"AAAA;IACI,qDAAqD;IACrD,8DAA8D;AAClE;;AAEA;IACI,kBAAkB;IAClB,oCAAoC;IACpC,kBAAkB;IAClB,YAAY;IACZ,gBAAgB;IAChB,UAAU;IACV,mBAAmB;IACnB,eAAe;IACf,eAAe;IACf,iBAAiB;IACjB,iBAAiB;AACrB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,YAAY;AAChB;;AAEA;IACI,uBAAuB;AAC3B","file":"selection.css","sourcesContent":[".selection-drag-box {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    border: 3px solid var(--chakra-colors-trails-solid) !important;\n}\n\n.selection-tooltip {\n    position: relative;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 4px;\n    color: black;\n    padding: 4px 8px;\n    opacity: 1;\n    white-space: nowrap;\n    font-size: 12px;\n    cursor: default;\n    user-select: none;\n    font-weight: bold;\n}\n\n.selection .react-select {\n    cursor: default;\n}\n\n.map-container .selection-active {\n    cursor: crosshair;\n}\n\n.map-container .selection-inactive {\n    cursor: no-drop;\n}\n\n.selection-source-value.selection-source-value--disabled {\n    opacity: 0.4;\n}\n\n.selection-source-value.selection-source-value--disabled span {\n    margin: 0px 6px 0px 0px;\n}\n"]}