@open-pioneer/basemap-switcher 0.2.0 → 0.3.0

package/BasemapSwitcher.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, Flex, Tooltip } from '@open-pioneer/chakra-integration';
+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 { useMemo, useRef, useCallback, useSyncExternalStore } from 'react';
@@ -20,6 +20,7 @@ const BasemapSwitcher = (props) => {
   const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
   const { map } = useMapModel(mapId);
   const baseLayers = useBaseLayers(map);
+  const chakraStyles = useChakraStyles();
   const activateLayer = (layerId) => {
     map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? void 0 : layerId);
   };
@@ -53,9 +54,11 @@ const BasemapSwitcher = (props) => {
       onChange: (option) => option && activateLayer(option.value),
       isClearable: false,
       isSearchable: false,
+      menuPosition: "fixed",
       getOptionLabel: (option) => option.layer !== void 0 ? option.layer.title + (option.layer.loadState === "error" ? " " + intl.formatMessage({ id: "layerNotAvailable" }) : "") : emptyBasemapLabel,
       isOptionDisabled: (option) => option?.layer?.loadState === "error",
-      components
+      components,
+      chakraStyles
     }
   ) : null });
 };
@@ -158,6 +161,27 @@ function useLoadState(layer) {
   );
   return useSyncExternalStore(subscribe, getSnapshot);
 }
+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 { 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 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Flex, Tooltip } from \"@open-pioneer/chakra-integration\";\nimport { Layer, MapModel, useMapModel } from \"@open-pioneer/map\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useCallback, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport { Select, OptionProps, SingleValueProps, chakraComponents } from \"chakra-react-select\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\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 {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\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        mapId,\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(mapId);\n    const baseLayers = useBaseLayers(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        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\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                    // 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                />\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"],"names":["options","selectedLayer"],"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 } from \"@open-pioneer/map\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useCallback, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport {\n    Select,\n    OptionProps,\n    SingleValueProps,\n    chakraComponents,\n    ChakraStylesConfig,\n    GroupBase\n} from \"chakra-react-select\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\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 {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\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        mapId,\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(mapId);\n    const baseLayers = useBaseLayers(map);\n    const chakraStyles = useChakraStyles();\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\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                    chakraStyles={chakraStyles}\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"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,36 +1,53 @@
 # @open-pioneer/basemap-switcher
 
+## 0.3.0
+
+### Minor Changes
+
+-   ee7c2d4: Update runtime version.
+
+### Patch Changes
+
+-   6984d20: Adjusted basemap switcher style (changed background color of select indicator and cursor style).
+-   0883bbd: Add property `menuPosition` to React Select.
+-   Updated dependencies [ee7c2d4]
+-   Updated dependencies [a582e5e]
+-   Updated dependencies [0456500]
+-   Updated dependencies [762e7b9]
+    -   @open-pioneer/map@0.3.0
+    -   @open-pioneer/react-utils@0.2.1
+
 ## 0.2.0
 
 ### Minor Changes
 
-- 70349a8: Update to new core packages major versions
+-   70349a8: Update to new core packages major versions
 
 ### Patch Changes
 
-- Updated dependencies [70349a8]
-  - @open-pioneer/map@0.2.0
-  - @open-pioneer/react-utils@0.2.0
+-   Updated dependencies [70349a8]
+    -   @open-pioneer/map@0.2.0
+    -   @open-pioneer/react-utils@0.2.0
 
 ## 0.1.1
 
 ### Patch Changes
 
-- Updated dependencies [08bffbc]
-- Updated dependencies [a58546b]
-- Updated dependencies [a58546b]
-- Updated dependencies [0c4ce04]
-  - @open-pioneer/map@0.1.1
+-   Updated dependencies [08bffbc]
+-   Updated dependencies [a58546b]
+-   Updated dependencies [a58546b]
+-   Updated dependencies [0c4ce04]
+    -   @open-pioneer/map@0.1.1
 
 ## 0.1.0
 
 ### Minor Changes
 
-- 1e7545c: Initial release.
+-   1e7545c: Initial release.
 
 ### Patch Changes
 
-- Updated dependencies [bb2f27a]
-- Updated dependencies [182da1c]
-  - @open-pioneer/map@0.1.0
-  - @open-pioneer/react-utils@0.1.0
+-   Updated dependencies [bb2f27a]
+-   Updated dependencies [182da1c]
+    -   @open-pioneer/map@0.1.0
+    -   @open-pioneer/react-utils@0.1.0

package/package.json

@@ -1,17 +1,17 @@
 {
   "type": "module",
   "name": "@open-pioneer/basemap-switcher",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "peerDependencies": {
     "@open-pioneer/chakra-integration": "^1.1.1",
-    "@open-pioneer/runtime": "^2.0.2",
+    "@open-pioneer/runtime": "^2.1.0",
     "chakra-react-select": "^4.7.6",
     "ol": "^8.2.0",
     "react": "^18.2.0",
     "react-icons": "^4.12.0",
-    "@open-pioneer/map": "^0.2.0",
-    "@open-pioneer/react-utils": "^0.2.0"
+    "@open-pioneer/map": "^0.3.0",
+    "@open-pioneer/react-utils": "^0.2.1"
   },
   "exports": {
     "./package.json": "./package.json",