@open-pioneer/basemap-switcher 0.7.0 → 0.8.0-dev.20241120115147

package/BasemapSwitcher.d.ts

@@ -1,6 +1,6 @@
 import { Layer, MapModelProps } from "@open-pioneer/map";
-import { FC } from "react";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC } from "react";
 export declare const NO_BASEMAP_ID = "___NO_BASEMAP___";
 /**
  * Properties for single select options.

package/BasemapSwitcher.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box, Flex, Tooltip, useToken } from '@open-pioneer/chakra-integration';
 import { useMapModel } from '@open-pioneer/map';
-import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
-import { useState, useMemo, useRef, useCallback, useSyncExternalStore } from 'react';
-import { Select, chakraComponents } from 'chakra-react-select';
 import { useCommonComponentProps, useEvent } from '@open-pioneer/react-utils';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
+import { Select, chakraComponents } from 'chakra-react-select';
+import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { useMemo, useState } from 'react';
 import { FiAlertTriangle } from 'react-icons/fi';
 
 const NO_BASEMAP_ID = "___NO_BASEMAP___";
@@ -19,8 +20,7 @@ const BasemapSwitcher = (props) => {
   const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
   const { map } = useMapModel(props);
   const baseLayers = useBaseLayers(map);
-  const chakraStyles = useChakraStyles();
-  const [isOpenSelect, setIsOpenSelect] = useState(false);
+  const activeBaseLayer = useReactiveSnapshot(() => map?.layers.getActiveBaseLayer(), [map]);
   const activateLayer = (layerId) => {
     map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? void 0 : layerId);
   };
@@ -28,14 +28,15 @@ const BasemapSwitcher = (props) => {
     const options2 = baseLayers.map((layer) => {
       return { value: layer.id, layer };
     });
-    const activeBaseLayer = map?.layers.getActiveBaseLayer();
-    if (allowSelectingEmptyBasemap || activeBaseLayer == void 0) {
+    if (allowSelectingEmptyBasemap || activeBaseLayer == null) {
       const emptyOption = { value: NO_BASEMAP_ID, layer: void 0 };
       options2.push(emptyOption);
     }
     const selectedLayer2 = options2.find((l) => l.layer === activeBaseLayer);
     return { options: options2, selectedLayer: selectedLayer2 };
-  }, [allowSelectingEmptyBasemap, baseLayers, map?.layers]);
+  }, [allowSelectingEmptyBasemap, baseLayers, activeBaseLayer]);
+  const chakraStyles = useChakraStyles();
+  const [isOpenSelect, setIsOpenSelect] = useState(false);
   const components = useMemo(() => {
     return {
       Option: BasemapSelectOption,
@@ -82,28 +83,7 @@ const BasemapSwitcher = (props) => {
   ) : null });
 };
 function useBaseLayers(mapModel) {
-  const baseLayers = useRef();
-  const subscribe = useCallback(
-    (cb) => {
-      baseLayers.current = void 0;
-      if (!mapModel) {
-        return () => void 0;
-      }
-      const resource = mapModel.layers.on("changed", () => {
-        baseLayers.current = void 0;
-        cb();
-      });
-      return () => resource.destroy();
-    },
-    [mapModel]
-  );
-  const getSnapshot = useCallback(() => {
-    if (baseLayers.current) {
-      return baseLayers.current;
-    }
-    return baseLayers.current = mapModel?.layers.getBaseLayers() ?? [];
-  }, [mapModel]);
-  return useSyncExternalStore(subscribe, getSnapshot);
+  return useReactiveSnapshot(() => mapModel?.layers.getBaseLayers() ?? [], [mapModel]);
 }
 function BasemapSelectOption(props) {
   const { layer } = props.data;
@@ -134,8 +114,15 @@ function BasemapSelectValue(props) {
 function useBasemapItem(layer) {
   const intl = useIntl();
   const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
-  const label = useTitle(layer);
-  const isAvailable = useLoadState(layer) !== "error";
+  const { label, isAvailable } = useReactiveSnapshot(() => {
+    if (!layer) {
+      return { label: intl.formatMessage({ id: "emptyBasemapLabel" }), isAvailable: true };
+    }
+    return {
+      label: layer.title,
+      isAvailable: layer.loadState !== "error"
+    };
+  }, [layer, intl]);
   return {
     isAvailable,
     content: /* @__PURE__ */ jsxs(Flex, { direction: "row", alignItems: "center", children: [
@@ -144,42 +131,6 @@ function useBasemapItem(layer) {
     ] })
   };
 }
-function useTitle(layer) {
-  const intl = useIntl();
-  const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
-  const getSnapshot = useCallback(() => {
-    return layer === void 0 ? emptyBasemapLabel : layer.title;
-  }, [layer, emptyBasemapLabel]);
-  const subscribe = useCallback(
-    (cb) => {
-      if (layer !== void 0) {
-        const resource = layer.on("changed:title", cb);
-        return () => resource.destroy();
-      }
-      return () => {
-      };
-    },
-    [layer]
-  );
-  return useSyncExternalStore(subscribe, getSnapshot);
-}
-function useLoadState(layer) {
-  const getSnapshot = useCallback(() => {
-    return layer === void 0 ? "loaded" : layer.loadState;
-  }, [layer]);
-  const subscribe = useCallback(
-    (cb) => {
-      if (layer !== void 0) {
-        const resource = layer.on("changed:loadState", cb);
-        return () => resource.destroy();
-      }
-      return () => {
-      };
-    },
-    [layer]
-  );
-  return useSyncExternalStore(subscribe, getSnapshot);
-}
 function useChakraStyles() {
   const [dropDownBackground, borderColor] = useToken(
     "colors",

package/BasemapSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasemapSwitcher.js","sources":["BasemapSwitcher.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Flex, Tooltip, useToken } from \"@open-pioneer/chakra-integration\";\nimport { Layer, MapModel, MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useCallback, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport {\n    chakraComponents,\n    ChakraStylesConfig,\n    GroupBase,\n    OptionProps,\n    Select,\n    SingleValueProps\n} from \"chakra-react-select\";\nimport { CommonComponentProps, useCommonComponentProps, useEvent } from \"@open-pioneer/react-utils\";\nimport { FiAlertTriangle } from \"react-icons/fi\";\nimport { KeyboardEvent } from \"react\";\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 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 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 { map } = useMapModel(props);\n    const baseLayers = useBaseLayers(map);\n    const chakraStyles = useChakraStyles();\n    const [isOpenSelect, setIsOpenSelect] = useState(false);\n\n    const activateLayer = (layerId: string) => {\n        map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);\n    };\n\n    const { options, selectedLayer } = useMemo(() => {\n        const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {\n            return { value: layer.id, layer: layer };\n        });\n\n        const activeBaseLayer = map?.layers.getActiveBaseLayer();\n        if (allowSelectingEmptyBasemap || activeBaseLayer == undefined) {\n            const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };\n            options.push(emptyOption);\n        }\n\n        const selectedLayer = options.find((l) => l.layer === activeBaseLayer);\n        return { options, selectedLayer };\n    }, [allowSelectingEmptyBasemap, baseLayers, map?.layers]);\n\n    const components = useMemo(() => {\n        return {\n            Option: BasemapSelectOption,\n            SingleValue: BasemapSelectValue\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        <Box {...containerProps}>\n            {map ? (\n                <Select<SelectOption>\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"basemap-switcher-select\"\n                    classNamePrefix=\"react-select\"\n                    options={options}\n                    value={selectedLayer}\n                    onChange={(option) => option && activateLayer(option.value)}\n                    isClearable={false}\n                    isSearchable={false}\n                    menuPosition=\"fixed\"\n                    // optionLabel is used by screenreaders\n                    getOptionLabel={(option) =>\n                        option.layer !== undefined\n                            ? option.layer.title +\n                              (option.layer.loadState === \"error\"\n                                  ? \" \" + intl.formatMessage({ id: \"layerNotAvailable\" })\n                                  : \"\")\n                            : emptyBasemapLabel\n                    }\n                    isOptionDisabled={(option) => option?.layer?.loadState === \"error\"}\n                    components={components}\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            ) : null}\n        </Box>\n    );\n};\n\nfunction useBaseLayers(mapModel: MapModel | undefined): Layer[] {\n    // Caches potentially expensive layers arrays.\n    // Not sure if this is a good idea, but getSnapshot() should always be fast.\n    // If this is a no-go, make getAllLayers() fast instead.\n    const baseLayers = useRef<Layer[] | undefined>();\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            // Reset cache when (re-) subscribing\n            baseLayers.current = undefined;\n\n            if (!mapModel) {\n                return () => undefined;\n            }\n            const resource = mapModel.layers.on(\"changed\", () => {\n                // Reset cache content so getSnapshot() fetches basemaps again.\n                baseLayers.current = undefined;\n                cb();\n            });\n            return () => resource.destroy();\n        },\n        [mapModel]\n    );\n    const getSnapshot = useCallback(() => {\n        if (baseLayers.current) {\n            return baseLayers.current;\n        }\n        return (baseLayers.current = mapModel?.layers.getBaseLayers() ?? []);\n    }, [mapModel]);\n    return useSyncExternalStore(subscribe, getSnapshot);\n}\n\nfunction BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {\n    const { layer } = props.data;\n    const { isAvailable, content } = useBasemapItem(layer);\n\n    return (\n        <chakraComponents.Option\n            {...props}\n            isDisabled={!isAvailable}\n            className=\"basemap-switcher-option\"\n        >\n            {content}\n        </chakraComponents.Option>\n    );\n}\n\nfunction BasemapSelectValue(props: SingleValueProps<SelectOption>): JSX.Element {\n    const { layer } = props.data;\n    const { isAvailable, content } = useBasemapItem(layer);\n\n    return (\n        <chakraComponents.SingleValue\n            {...props}\n            isDisabled={!isAvailable}\n            className=\"basemap-switcher-value\"\n        >\n            {content}\n        </chakraComponents.SingleValue>\n    );\n}\n\nfunction useBasemapItem(layer: Layer | undefined) {\n    const intl = useIntl();\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n    const label = useTitle(layer);\n    const isAvailable = useLoadState(layer) !== \"error\";\n\n    return {\n        isAvailable,\n        content: (\n            <Flex direction=\"row\" alignItems=\"center\">\n                {label}\n                {!isAvailable && (\n                    <Box ml={2}>\n                        <Tooltip label={notAvailableLabel} placement=\"right\" openDelay={500}>\n                            <span>\n                                <FiAlertTriangle color={\"red\"} aria-label={notAvailableLabel} />\n                            </span>\n                        </Tooltip>\n                    </Box>\n                )}\n            </Flex>\n        )\n    };\n}\n\nfunction useTitle(layer: Layer | undefined): string {\n    const intl = useIntl();\n    const emptyBasemapLabel = intl.formatMessage({ id: \"emptyBasemapLabel\" });\n\n    const getSnapshot = useCallback(() => {\n        return layer === undefined ? emptyBasemapLabel : layer.title; // undefined == empty basemap\n    }, [layer, emptyBasemapLabel]);\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            if (layer !== undefined) {\n                const resource = layer.on(\"changed:title\", cb);\n                return () => resource.destroy();\n            }\n            return () => {};\n        },\n        [layer]\n    );\n\n    return useSyncExternalStore(subscribe, getSnapshot);\n}\n\nfunction useLoadState(layer: Layer | undefined): string {\n    const getSnapshot = useCallback(() => {\n        return layer === undefined ? \"loaded\" : layer.loadState; // undefined == empty basemap\n    }, [layer]);\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            if (layer !== undefined) {\n                const resource = layer.on(\"changed:loadState\", cb);\n                return () => resource.destroy();\n            }\n            return () => {};\n        },\n        [layer]\n    );\n\n    return useSyncExternalStore(subscribe, getSnapshot);\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<SelectOption, false, GroupBase<SelectOption>> = {\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":["options","selectedLayer","props"],"mappings":"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"}
+{"version":3,"file":"BasemapSwitcher.js","sources":["BasemapSwitcher.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Flex, Tooltip, useToken } from \"@open-pioneer/chakra-integration\";\nimport { Layer, MapModel, useMapModel, MapModelProps } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps, useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport {\n    chakraComponents,\n    ChakraStylesConfig,\n    GroupBase,\n    OptionProps,\n    Select,\n    SingleValueProps\n} from \"chakra-react-select\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, KeyboardEvent, useMemo, useState } from \"react\";\nimport { FiAlertTriangle } from \"react-icons/fi\";\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 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 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 { map } = useMapModel(props);\n    const baseLayers = useBaseLayers(map);\n    const activeBaseLayer = useReactiveSnapshot(() => map?.layers.getActiveBaseLayer(), [map]);\n\n    const activateLayer = (layerId: string) => {\n        map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);\n    };\n\n    const { options, selectedLayer } = useMemo(() => {\n        const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {\n            return { value: layer.id, layer: layer };\n        });\n\n        if (allowSelectingEmptyBasemap || activeBaseLayer == null) {\n            const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };\n            options.push(emptyOption);\n        }\n\n        const selectedLayer = options.find((l) => l.layer === activeBaseLayer);\n        return { options, selectedLayer };\n    }, [allowSelectingEmptyBasemap, baseLayers, activeBaseLayer]);\n\n    const chakraStyles = useChakraStyles();\n    const [isOpenSelect, setIsOpenSelect] = useState(false);\n    const components = useMemo(() => {\n        return {\n            Option: BasemapSelectOption,\n            SingleValue: BasemapSelectValue\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        <Box {...containerProps}>\n            {map ? (\n                <Select<SelectOption>\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"basemap-switcher-select\"\n                    classNamePrefix=\"react-select\"\n                    options={options}\n                    value={selectedLayer}\n                    onChange={(option) => option && activateLayer(option.value)}\n                    isClearable={false}\n                    isSearchable={false}\n                    menuPosition=\"fixed\"\n                    // optionLabel is used by screenreaders\n                    getOptionLabel={(option) =>\n                        option.layer !== undefined\n                            ? option.layer.title +\n                              (option.layer.loadState === \"error\"\n                                  ? \" \" + intl.formatMessage({ id: \"layerNotAvailable\" })\n                                  : \"\")\n                            : emptyBasemapLabel\n                    }\n                    isOptionDisabled={(option) => option?.layer?.loadState === \"error\"}\n                    components={components}\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            ) : null}\n        </Box>\n    );\n};\n\nfunction useBaseLayers(mapModel: MapModel | undefined): Layer[] {\n    return useReactiveSnapshot(() => mapModel?.layers.getBaseLayers() ?? [], [mapModel]);\n}\n\nfunction BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {\n    const { layer } = props.data;\n    const { isAvailable, content } = useBasemapItem(layer);\n\n    return (\n        <chakraComponents.Option\n            {...props}\n            isDisabled={!isAvailable}\n            className=\"basemap-switcher-option\"\n        >\n            {content}\n        </chakraComponents.Option>\n    );\n}\n\nfunction BasemapSelectValue(props: SingleValueProps<SelectOption>): JSX.Element {\n    const { layer } = props.data;\n    const { isAvailable, content } = useBasemapItem(layer);\n\n    return (\n        <chakraComponents.SingleValue\n            {...props}\n            isDisabled={!isAvailable}\n            className=\"basemap-switcher-value\"\n        >\n            {content}\n        </chakraComponents.SingleValue>\n    );\n}\n\nfunction useBasemapItem(layer: Layer | undefined) {\n    const intl = useIntl();\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n    const { label, isAvailable } = useReactiveSnapshot(() => {\n        if (!layer) {\n            // undefined layer -> empty basemap entry\n            return { label: intl.formatMessage({ id: \"emptyBasemapLabel\" }), isAvailable: true };\n        }\n\n        return {\n            label: layer.title,\n            isAvailable: layer.loadState !== \"error\"\n        };\n    }, [layer, intl]);\n\n    return {\n        isAvailable,\n        content: (\n            <Flex direction=\"row\" alignItems=\"center\">\n                {label}\n                {!isAvailable && (\n                    <Box ml={2}>\n                        <Tooltip label={notAvailableLabel} placement=\"right\" openDelay={500}>\n                            <span>\n                                <FiAlertTriangle color={\"red\"} aria-label={notAvailableLabel} />\n                            </span>\n                        </Tooltip>\n                    </Box>\n                )}\n            </Flex>\n        )\n    };\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<SelectOption, false, GroupBase<SelectOption>> = {\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":["options","selectedLayer","props"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @open-pioneer/basemap-switcher
 
+## 0.8.0-dev.20241120115147
+
+### Minor Changes
+
+-   2fa8020: Update trails core package dependencies.
+
+    -   Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
+    -   Removes any obsolete references to `@chakra-ui/system`.
+        This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.
+
+### Patch Changes
+
+-   e7978a8: Use reactive map model APIs to access the current set of basemaps.
+-   Updated dependencies [b717121]
+-   Updated dependencies [e7978a8]
+-   Updated dependencies [7ae9f90]
+-   Updated dependencies [d8337a6]
+-   Updated dependencies [b2127df]
+-   Updated dependencies [2fa8020]
+-   Updated dependencies [7ae9f90]
+-   Updated dependencies [d8337a6]
+    -   @open-pioneer/map@0.8.0-dev.20241120115147
+
 ## 0.7.0
 
 ### Minor Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/basemap-switcher",
-  "version": "0.7.0",
+  "version": "0.8.0-dev.20241120115147",
   "description": "This package provides a UI component that allows a user to switch between different base maps.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,14 +14,16 @@
     "directory": "src/packages/basemap-switcher"
   },
   "dependencies": {
-    "@open-pioneer/chakra-integration": "^2.3.0",
-    "@open-pioneer/react-utils": "^2.3.0",
-    "@open-pioneer/runtime": "^2.3.0",
-    "chakra-react-select": "^4.7.6",
-    "ol": "^9.2.4",
+    "@open-pioneer/chakra-integration": "^2.4.0-dev.20241120092632",
+    "@open-pioneer/react-utils": "^2.4.0-dev.20241120092632",
+    "@open-pioneer/runtime": "^2.4.0-dev.20241120092632",
+    "chakra-react-select": "^5.0.2",
+    "ol": "^10.2.1",
     "react": "^18.3.1",
     "react-icons": "^5.3.0",
-    "@open-pioneer/map": "^0.7.0"
+    "@open-pioneer/reactivity": "^2.4.0-dev.20241120092632",
+    "@conterra/reactivity-core": "^0.4.3",
+    "@open-pioneer/map": "^0.8.0-dev.20241120115147"
   },
   "exports": {
     "./package.json": "./package.json",