@open-pioneer/basemap-switcher 1.0.0 → 1.2.0-dev.20251128143231

package/BasemapSwitcher.d.ts

@@ -1,24 +1,7 @@
-import { Layer, MapModelProps } from "@open-pioneer/map";
+import { MapModelProps } from "@open-pioneer/map";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { FC } from "react";
 export declare const NO_BASEMAP_ID = "___NO_BASEMAP___";
-/**
- * Properties for single select options.
- */
-export interface SelectOption {
-    /**
-     * The id of the basemap for the select option.
-     */
-    value: string;
-    /**
-     * The label of the select option.
-     */
-    label: string;
-    /**
-     * The layer object for the select option.
-     */
-    layer: Layer | undefined;
-}
 /**
  * These are special properties for the BasemapSwitcher.
  */

package/BasemapSwitcher.js

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createListCollection, Box, Select, Portal } from '@chakra-ui/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createListCollection, Box, Select, Portal, Text } from '@chakra-ui/react';
 import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useMapModelValue } from '@open-pioneer/map';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
 import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
-import { LuTriangleAlert } from 'react-icons/lu';
+import { useMemo } from 'react';
+import { LuTriangleAlert, LuInfo } from 'react-icons/lu';
 
 const NO_BASEMAP_ID = "___NO_BASEMAP___";
 const BasemapSwitcher = (props) => {
@@ -41,14 +42,17 @@ const BasemapSwitcher = (props) => {
       options.push(emptyOption);
     }
     const optionsListCollection2 = createListCollection({ items: options });
-    const selectedOption2 = [activeBaseLayer?.id ?? NO_BASEMAP_ID];
+    const selectedOption2 = optionsListCollection2.find(activeBaseLayer?.id ?? NO_BASEMAP_ID);
+    if (!selectedOption2) {
+      throw new Error("Internal error: selected option not found in list.");
+    }
     return { optionsListCollection: optionsListCollection2, selectedOption: selectedOption2 };
   }, [allowSelectingEmptyBasemap, emptyBasemapLabel, map]);
   return /* @__PURE__ */ jsx(Box, { ...containerProps, children: /* @__PURE__ */ jsxs(
     Select.Root,
     {
       collection: optionsListCollection,
-      value: selectedOption,
+      value: [selectedOption.value],
       onValueChange: (option) => option && activateLayer(option.value),
       className: "basemap-switcher-select",
       lazyMount: true,
@@ -61,7 +65,7 @@ const BasemapSwitcher = (props) => {
               "aria-label": ariaLabel,
               "aria-labelledby": ariaLabelledBy,
               className: "basemap-switcher-select-trigger",
-              children: /* @__PURE__ */ jsx(Select.ValueText, {})
+              children: /* @__PURE__ */ jsx(Select.ValueText, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(BasemapItemContent, { option: selectedOption }) })
             }
           ),
           /* @__PURE__ */ jsx(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx(Select.Indicator, {}) })
@@ -72,40 +76,59 @@ const BasemapSwitcher = (props) => {
   ) });
 };
 function BasemapItem(props) {
-  const intl = useIntl();
-  const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
   const item = props.item;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Select.Item,
     {
       item,
       justifyContent: "flex-start",
       pointerEvents: "auto",
       className: "basemap-switcher-option",
-      children: [
-        item.label,
-        item.layer?.loadState === "error" && /* @__PURE__ */ jsx(Box, { ml: 2, children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: notAvailableLabel,
-            "aria-label": notAvailableLabel,
-            positioning: { placement: "right" },
-            children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-              LuTriangleAlert,
-              {
-                color: "red",
-                "aria-label": intl.formatMessage({
-                  id: "layerNotAvailable"
-                })
-              }
-            ) })
-          }
-        ) })
-      ]
+      children: /* @__PURE__ */ jsx(BasemapItemContent, { option: item })
     },
     item.value
   );
 }
+function BasemapItemContent(props) {
+  const { option } = props;
+  const intl = useIntl();
+  const loadState = useReactiveSnapshot(() => option.layer?.loadState, [option.layer]);
+  const visibleInScale = useReactiveSnapshot(() => option.layer?.visibleInScale, [option.layer]);
+  const { problem, opacity } = useMemo(() => {
+    let problem2 = void 0;
+    let opacity2 = void 0;
+    if (option.layer) {
+      if (loadState === "error") {
+        problem2 = /* @__PURE__ */ jsx(
+          ProblemIndicator,
+          {
+            Icon: LuTriangleAlert,
+            color: "red",
+            message: intl.formatMessage({ id: "layerNotAvailable" })
+          }
+        );
+      } else if (!visibleInScale) {
+        problem2 = /* @__PURE__ */ jsx(
+          ProblemIndicator,
+          {
+            Icon: LuInfo,
+            message: intl.formatMessage({ id: "layerNotVisible" })
+          }
+        );
+        opacity2 = 0.5;
+      }
+    }
+    return { problem: problem2, opacity: opacity2 };
+  }, [option.layer, loadState, visibleInScale, intl]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { as: "span", opacity, children: option.label }),
+    problem
+  ] });
+}
+function ProblemIndicator(props) {
+  const { Icon, message, color } = props;
+  return /* @__PURE__ */ jsx(Box, { ml: 2, className: "basemap-switcher-option-problem-indicator", children: /* @__PURE__ */ jsx(Tooltip, { content: message, "aria-label": message, positioning: { placement: "right" }, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Icon, { "aria-label": message, color }) }) }) });
+}
 
 export { BasemapSwitcher, NO_BASEMAP_ID };
 //# sourceMappingURL=BasemapSwitcher.js.map

package/BasemapSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasemapSwitcher.js","sources":["BasemapSwitcher.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, createListCollection, Portal, Select } from \"@chakra-ui/react\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { Layer, MapModelProps, useMapModelValue } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC } from \"react\";\nimport { LuTriangleAlert } from \"react-icons/lu\";\n\n/*\n    Exported for tests. Feels a bit hacky but should be fine for now.\n    Originally was using the empty string, but that doesn't work well with happy-dom.\n*/\nexport const NO_BASEMAP_ID = \"___NO_BASEMAP___\";\n\n/**\n * Properties for single select options.\n */\nexport interface SelectOption {\n    /**\n     * The id of the basemap for the select option.\n     */\n    value: string;\n\n    /**\n     * The label of the select option.\n     */\n    label: string;\n\n    /**\n     * The layer object for the select option.\n     */\n    layer: Layer | undefined;\n}\n\n/**\n * These are special properties for the BasemapSwitcher.\n */\nexport interface BasemapSwitcherProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Additional css class name(s) that will be added to the BasemapSwitcher component.\n     */\n    className?: string;\n\n    /**\n     * Specifies whether an option to deactivate all basemap layers is available in the BasemapSwitcher.\n     * Defaults to `false`.\n     */\n    allowSelectingEmptyBasemap?: boolean | undefined;\n\n    /**\n     * Optional aria-labelledby property.\n     * Do not use together with aria-label.\n     */\n    \"aria-labelledby\"?: string;\n\n    /**\n     * Optional aria-label property.\n     * Do not use together with aria-label.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * The `BasemapSwitcher` component can be used in an app to switch between the different basemaps.\n */\nexport const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {\n    const map = useMapModelValue(props);\n    const intl = useIntl();\n    const {\n        allowSelectingEmptyBasemap = false,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"basemap-switcher\", props);\n    const emptyBasemapLabel = intl.formatMessage({ id: \"emptyBasemapLabel\" });\n\n    const activateLayer = (layerId: string[]) => {\n        map.layers.activateBaseLayer(layerId[0] === NO_BASEMAP_ID ? undefined : layerId[0]);\n    };\n\n    const { optionsListCollection, selectedOption } = useReactiveSnapshot(() => {\n        const baseLayers = map.layers.getBaseLayers() ?? [];\n        const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {\n            return {\n                value: layer.id,\n                layer: layer,\n                label: layer.title,\n                disabled: layer.loadState == \"error\"\n            };\n        });\n\n        const activeBaseLayer = map.layers.getActiveBaseLayer();\n        if (allowSelectingEmptyBasemap || activeBaseLayer == null) {\n            const emptyOption: SelectOption = {\n                value: NO_BASEMAP_ID,\n                layer: undefined,\n                label: emptyBasemapLabel\n            };\n            options.push(emptyOption);\n        }\n        const optionsListCollection = createListCollection({ items: options });\n\n        const selectedOption = [activeBaseLayer?.id ?? NO_BASEMAP_ID];\n\n        return { optionsListCollection, selectedOption };\n    }, [allowSelectingEmptyBasemap, emptyBasemapLabel, map]);\n\n    return (\n        <Box {...containerProps}>\n            <Select.Root\n                collection={optionsListCollection}\n                value={selectedOption}\n                onValueChange={(option) => option && activateLayer(option.value)}\n                className=\"basemap-switcher-select\"\n                lazyMount={true}\n                unmountOnExit={true}\n            >\n                <Select.Control>\n                    <Select.Trigger\n                        aria-label={ariaLabel}\n                        aria-labelledby={ariaLabelledBy}\n                        className=\"basemap-switcher-select-trigger\"\n                    >\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=\"basemap-switcher-select-content\">\n                            {optionsListCollection.items.map((item) => (\n                                <BasemapItem item={item} key={item.value} />\n                            ))}\n                        </Select.Content>\n                    </Select.Positioner>\n                </Portal>\n            </Select.Root>\n        </Box>\n    );\n};\n\nfunction BasemapItem(props: { item: SelectOption }) {\n    const intl = useIntl();\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n    const item = props.item;\n    return (\n        <Select.Item\n            item={item}\n            key={item.value}\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            className=\"basemap-switcher-option\"\n        >\n            {item.label}\n            {item.layer?.loadState === \"error\" && (\n                <Box ml={2}>\n                    <Tooltip\n                        content={notAvailableLabel}\n                        aria-label={notAvailableLabel}\n                        positioning={{ placement: \"right\" }}\n                    >\n                        <span>\n                            <LuTriangleAlert\n                                color={\"red\"}\n                                aria-label={intl.formatMessage({\n                                    id: \"layerNotAvailable\"\n                                })}\n                            />\n                        </span>\n                    </Tooltip>\n                </Box>\n            )}\n        </Select.Item>\n    );\n}\n"],"names":["optionsListCollection","selectedOption"],"mappings":"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"}
+{"version":3,"file":"BasemapSwitcher.js","sources":["BasemapSwitcher.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, createListCollection, Portal, Select, Text } from \"@chakra-ui/react\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { Layer, MapModelProps, useMapModelValue } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useMemo } from \"react\";\nimport { type IconType } from \"react-icons/lib\";\nimport { LuInfo, LuTriangleAlert } from \"react-icons/lu\";\n\n/*\n    Exported for tests. Feels a bit hacky but should be fine for now.\n    Originally was using the empty string, but that doesn't work well with happy-dom.\n*/\nexport const NO_BASEMAP_ID = \"___NO_BASEMAP___\";\n\n/**\n * Properties for single select options.\n */\ninterface SelectOption {\n    /**\n     * The id of the basemap for the select option.\n     */\n    value: string;\n\n    /**\n     * The label of the select option.\n     */\n    label: string;\n\n    /**\n     * The layer object for the select option.\n     * Undefined is used for \"no basemap\".\n     */\n    layer: Layer | undefined;\n}\n\n/**\n * These are special properties for the BasemapSwitcher.\n */\nexport interface BasemapSwitcherProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Additional css class name(s) that will be added to the BasemapSwitcher component.\n     */\n    className?: string;\n\n    /**\n     * Specifies whether an option to deactivate all basemap layers is available in the BasemapSwitcher.\n     * Defaults to `false`.\n     */\n    allowSelectingEmptyBasemap?: boolean | undefined;\n\n    /**\n     * Optional aria-labelledby property.\n     * Do not use together with aria-label.\n     */\n    \"aria-labelledby\"?: string;\n\n    /**\n     * Optional aria-label property.\n     * Do not use together with aria-label.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * The `BasemapSwitcher` component can be used in an app to switch between the different basemaps.\n */\nexport const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {\n    const map = useMapModelValue(props);\n    const intl = useIntl();\n    const {\n        allowSelectingEmptyBasemap = false,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"basemap-switcher\", props);\n    const emptyBasemapLabel = intl.formatMessage({ id: \"emptyBasemapLabel\" });\n\n    const activateLayer = (layerId: string[]) => {\n        map.layers.activateBaseLayer(layerId[0] === NO_BASEMAP_ID ? undefined : layerId[0]);\n    };\n\n    const { optionsListCollection, selectedOption } = useReactiveSnapshot(() => {\n        const baseLayers = map.layers.getBaseLayers() ?? [];\n        const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {\n            return {\n                value: layer.id,\n                layer: layer,\n                label: layer.title,\n                disabled: layer.loadState == \"error\"\n            };\n        });\n\n        const activeBaseLayer = map.layers.getActiveBaseLayer();\n        if (allowSelectingEmptyBasemap || activeBaseLayer == null) {\n            const emptyOption: SelectOption = {\n                value: NO_BASEMAP_ID,\n                layer: undefined,\n                label: emptyBasemapLabel\n            };\n            options.push(emptyOption);\n        }\n        const optionsListCollection = createListCollection({ items: options });\n        const selectedOption = optionsListCollection.find(activeBaseLayer?.id ?? NO_BASEMAP_ID);\n        if (!selectedOption) {\n            throw new Error(\"Internal error: selected option not found in list.\");\n        }\n\n        return { optionsListCollection, selectedOption };\n    }, [allowSelectingEmptyBasemap, emptyBasemapLabel, map]);\n\n    return (\n        <Box {...containerProps}>\n            <Select.Root\n                collection={optionsListCollection}\n                value={[selectedOption.value]}\n                onValueChange={(option) => option && activateLayer(option.value)}\n                className=\"basemap-switcher-select\"\n                lazyMount={true}\n                unmountOnExit={true}\n            >\n                <Select.Control>\n                    <Select.Trigger\n                        aria-label={ariaLabel}\n                        aria-labelledby={ariaLabelledBy}\n                        className=\"basemap-switcher-select-trigger\"\n                    >\n                        <Select.ValueText display=\"flex\" alignItems=\"center\">\n                            <BasemapItemContent option={selectedOption} />\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=\"basemap-switcher-select-content\">\n                            {optionsListCollection.items.map((item) => (\n                                <BasemapItem item={item} key={item.value} />\n                            ))}\n                        </Select.Content>\n                    </Select.Positioner>\n                </Portal>\n            </Select.Root>\n        </Box>\n    );\n};\n\nfunction BasemapItem(props: { item: SelectOption }) {\n    const item = props.item;\n\n    return (\n        <Select.Item\n            item={item}\n            key={item.value}\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            className=\"basemap-switcher-option\"\n        >\n            <BasemapItemContent option={item} />\n        </Select.Item>\n    );\n}\n\nfunction BasemapItemContent(props: { option: SelectOption }) {\n    const { option } = props;\n    const intl = useIntl();\n    const loadState = useReactiveSnapshot(() => option.layer?.loadState, [option.layer]);\n    const visibleInScale = useReactiveSnapshot(() => option.layer?.visibleInScale, [option.layer]);\n\n    const { problem, opacity } = useMemo(() => {\n        let problem = undefined;\n        let opacity = undefined;\n        if (option.layer) {\n            if (loadState === \"error\") {\n                problem = (\n                    <ProblemIndicator\n                        Icon={LuTriangleAlert}\n                        color=\"red\"\n                        message={intl.formatMessage({ id: \"layerNotAvailable\" })}\n                    />\n                );\n            } else if (!visibleInScale) {\n                problem = (\n                    <ProblemIndicator\n                        Icon={LuInfo}\n                        message={intl.formatMessage({ id: \"layerNotVisible\" })}\n                    />\n                );\n                opacity = 0.5;\n            }\n        }\n        return { problem, opacity };\n    }, [option.layer, loadState, visibleInScale, intl]);\n\n    return (\n        <>\n            <Text as=\"span\" opacity={opacity}>\n                {option.label}\n            </Text>\n            {problem}\n        </>\n    );\n}\n\nfunction ProblemIndicator(props: { Icon: IconType; message: string; color?: string }) {\n    const { Icon, message, color } = props;\n    return (\n        <Box ml={2} className=\"basemap-switcher-option-problem-indicator\">\n            <Tooltip content={message} aria-label={message} positioning={{ placement: \"right\" }}>\n                <span>\n                    <Icon aria-label={message} color={color} />\n                </span>\n            </Tooltip>\n        </Box>\n    );\n}\n"],"names":["optionsListCollection","selectedOption","problem","opacity"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @open-pioneer/basemap-switcher
 
+## 1.2.0-dev.20251128143231
+
+### Patch Changes
+
+- 279ca67: Use `workspace:*` instead of `workspace:^` for local package references as default. This ensures that trails packages from this repository are always referenced with their exact version to avoid potential issues with version mismatches. If a project specifically wants to use other versions for some trails packages, a pnpm override can be used to force other versions.
+- Updated dependencies [279ca67]
+    - @open-pioneer/map@1.2.0-dev.20251128143231
+
+## 1.1.0
+
+### Minor Changes
+
+- 10338fa: Update OpenLayers to 10.7.0
+- c38b619: Layers that are not visible in the current resolution of the map are indicated with an icon and disabled text (but are still selectable by the user).
+- a8b8a36: Update trails core packages to 4.3.0
+- 10338fa: Update Chakra to 3.29.0
+
+### Patch Changes
+
+- c38b619: Show the icon indicator and disabled text of the selected option also in collapsed state, not only in the list of options.
+- Updated dependencies [fce7fa9]
+- Updated dependencies [10338fa]
+- Updated dependencies [a8b8a36]
+- Updated dependencies [10338fa]
+- Updated dependencies [c38b619]
+    - @open-pioneer/map@1.1.0
+
 ## 1.0.0
 
 ### Minor Changes

package/i18n/de.yaml

@@ -1,4 +1,5 @@
 messages:
   emptyBasemapLabel: Ohne Hintergrundkarte
   layerNotAvailable: Layer nicht verfügbar
+  layerNotVisible: Layer in diesem Maßstab nicht sichtbar
   selected: selektiert

package/i18n/en.yaml

@@ -1,4 +1,5 @@
 messages:
   emptyBasemapLabel: Without basemap
   layerNotAvailable: Layer not available
+  layerNotVisible: Layer not visible in this scale
   selected: selected

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/basemap-switcher",
-  "version": "1.0.0",
+  "version": "1.2.0-dev.20251128143231",
   "description": "This package provides a UI component that allows a user to switch between different base maps.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,16 +14,16 @@
     "directory": "src/packages/basemap-switcher"
   },
   "dependencies": {
-    "@open-pioneer/react-utils": "^4.2.0",
-    "@open-pioneer/runtime": "^4.2.0",
-    "@chakra-ui/react": "^3.28.0",
-    "ol": "^10.6.1",
+    "@open-pioneer/react-utils": "^4.3.0",
+    "@open-pioneer/runtime": "^4.3.0",
+    "@chakra-ui/react": "^3.29.0",
+    "ol": "^10.7.0",
     "react": "^19.2.0",
     "react-icons": "^5.5.0",
-    "@open-pioneer/reactivity": "^4.2.0",
-    "@conterra/reactivity-core": "^0.8.0",
-    "@open-pioneer/chakra-snippets": "^4.2.0",
-    "@open-pioneer/map": "^1.0.0"
+    "@open-pioneer/reactivity": "^4.3.0",
+    "@conterra/reactivity-core": "^0.8.1",
+    "@open-pioneer/chakra-snippets": "^4.3.0",
+    "@open-pioneer/map": "1.2.0-dev.20251128143231"
   },
   "exports": {
     "./package.json": "./package.json",