@open-pioneer/basemap-switcher 1.3.0-dev.20260207195315 → 1.3.0-dev.20260211111005

package/BasemapSwitcher.js

@@ -15,9 +15,10 @@ const BasemapSwitcher = (props) => {
   const {
     allowSelectingEmptyBasemap = false,
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
+    "aria-labelledby": ariaLabelledBy,
+    ...restProps
   } = props;
-  const { containerProps } = useCommonComponentProps("basemap-switcher", props);
+  const { containerProps } = useCommonComponentProps("basemap-switcher", restProps);
   const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
   const activateLayer = (layerId) => {
     map.layers.activateBaseLayer(layerId[0] === NO_BASEMAP_ID ? void 0 : layerId[0]);

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, 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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"}
+{"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        ...restProps\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"basemap-switcher\", restProps);\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,13 +1,20 @@
 # @open-pioneer/basemap-switcher
 
-## 1.3.0-dev.20260207195315
+## 1.3.0-dev.20260211111005
+
+### Minor Changes
+
+- 9b5d5f3: Support for new common container props (role, aria-_, data-_ and css)
+- d54ccfd: Update to Chakra UI 3.32.0
 
 ### Patch Changes
 
+- Updated dependencies [9b5d5f3]
 - Updated dependencies [2ceb1ca]
+- Updated dependencies [d54ccfd]
 - Updated dependencies [4bcc8ce]
 - Updated dependencies [2ceb1ca]
-    - @open-pioneer/map@1.3.0-dev.20260207195315
+    - @open-pioneer/map@1.3.0-dev.20260211111005
 
 ## 1.2.0
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/basemap-switcher",
-  "version": "1.3.0-dev.20260207195315",
+  "version": "1.3.0-dev.20260211111005",
   "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.4.0",
-    "@open-pioneer/runtime": "^4.4.0",
-    "@chakra-ui/react": "^3.31.0",
+    "@open-pioneer/react-utils": "4.5.0-dev.20260211105402",
+    "@open-pioneer/runtime": "4.5.0-dev.20260211105402",
+    "@chakra-ui/react": "^3.32.0",
     "ol": "^10.7.0",
-    "react": "^19.2.3",
+    "react": "^19.2.4",
     "react-icons": "^5.5.0",
-    "@open-pioneer/reactivity": "^4.4.0",
+    "@open-pioneer/reactivity": "4.5.0-dev.20260211105402",
     "@conterra/reactivity-core": "^0.8.1",
-    "@open-pioneer/chakra-snippets": "^4.4.0",
-    "@open-pioneer/map": "1.3.0-dev.20260207195315"
+    "@open-pioneer/chakra-snippets": "4.5.0-dev.20260211105402",
+    "@open-pioneer/map": "1.3.0-dev.20260211111005"
   },
   "exports": {
     "./package.json": "./package.json",