@open-pioneer/basemap-switcher 0.10.0 → 0.11.0-dev.20250515143825

package/BasemapSwitcher.d.ts

@@ -10,6 +10,10 @@ 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.
      */

package/BasemapSwitcher.js

@@ -1,156 +1,114 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, useToken, Flex, Tooltip } from '@open-pioneer/chakra-integration';
+import { createListCollection, Box, Select, Portal } from '@chakra-ui/react';
+import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useMapModel } from '@open-pioneer/map';
-import { useCommonComponentProps, useEvent } from '@open-pioneer/react-utils';
+import { useCommonComponentProps } 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___";
 const BasemapSwitcher = (props) => {
+  const { map } = useMapModel(props);
+  return map && /* @__PURE__ */ jsx(BasemapSwitcherImpl, { ...props, map });
+};
+function BasemapSwitcherImpl(props) {
   const intl = useIntl();
   const {
     allowSelectingEmptyBasemap = false,
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
+    "aria-labelledby": ariaLabelledBy,
+    map
   } = props;
   const { containerProps } = useCommonComponentProps("basemap-switcher", props);
   const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
-  const { map } = useMapModel(props);
-  const baseLayers = useBaseLayers(map);
-  const activeBaseLayer = useReactiveSnapshot(() => map?.layers.getActiveBaseLayer(), [map]);
   const activateLayer = (layerId) => {
-    map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? void 0 : layerId);
+    map.layers.activateBaseLayer(layerId[0] === NO_BASEMAP_ID ? void 0 : layerId[0]);
   };
-  const { options, selectedLayer } = useMemo(() => {
-    const options2 = baseLayers.map((layer) => {
-      return { value: layer.id, layer };
+  const { optionsListCollection, selectedOption } = useReactiveSnapshot(() => {
+    const baseLayers = map.layers.getBaseLayers() ?? [];
+    const options = baseLayers.map((layer) => {
+      return {
+        value: layer.id,
+        layer,
+        label: layer.title,
+        disabled: layer.loadState == "error"
+      };
     });
+    const activeBaseLayer = map.layers.getActiveBaseLayer();
     if (allowSelectingEmptyBasemap || activeBaseLayer == null) {
-      const emptyOption = { value: NO_BASEMAP_ID, layer: void 0 };
-      options2.push(emptyOption);
+      const emptyOption = {
+        value: NO_BASEMAP_ID,
+        layer: void 0,
+        label: emptyBasemapLabel
+      };
+      options.push(emptyOption);
     }
-    const selectedLayer2 = options2.find((l) => l.layer === activeBaseLayer);
-    return { options: options2, selectedLayer: selectedLayer2 };
-  }, [allowSelectingEmptyBasemap, baseLayers, activeBaseLayer]);
-  const chakraStyles = useChakraStyles();
-  const [isOpenSelect, setIsOpenSelect] = useState(false);
-  const components = useMemo(() => {
-    return {
-      Option: BasemapSelectOption,
-      SingleValue: BasemapSelectValue
-    };
-  }, []);
-  const keyDown = useEvent((event) => {
-    if (!isOpenSelect && event.key === "Enter") {
-      setIsOpenSelect(true);
-    }
-  });
-  return /* @__PURE__ */ jsx(Box, { ...containerProps, children: map ? /* @__PURE__ */ jsx(
-    Select,
+    const optionsListCollection2 = createListCollection({ items: options });
+    const selectedOption2 = [activeBaseLayer?.id ?? NO_BASEMAP_ID];
+    return { optionsListCollection: optionsListCollection2, selectedOption: selectedOption2 };
+  }, [allowSelectingEmptyBasemap, emptyBasemapLabel, map]);
+  return /* @__PURE__ */ jsx(Box, { ...containerProps, children: /* @__PURE__ */ jsxs(
+    Select.Root,
     {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
+      collection: optionsListCollection,
+      value: selectedOption,
+      onValueChange: (option) => option && activateLayer(option.value),
       className: "basemap-switcher-select",
-      classNamePrefix: "react-select",
-      options,
-      value: selectedLayer,
-      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,
-      ariaLiveMessages: {
-        guidance: () => "",
-        onChange: (props2) => {
-          if (props2.action == "select-option" || props2.action == "initial-input-focus")
-            return props2.label + " " + intl.formatMessage({ id: "selected" });
-          else return "";
-        },
-        onFilter: () => "",
-        onFocus: () => ""
-      },
-      chakraStyles,
-      onKeyDown: keyDown,
-      menuIsOpen: isOpenSelect,
-      onMenuOpen: () => setIsOpenSelect(true),
-      onMenuClose: () => setIsOpenSelect(false)
-    }
-  ) : null });
-};
-function useBaseLayers(mapModel) {
-  return useReactiveSnapshot(() => mapModel?.layers.getBaseLayers() ?? [], [mapModel]);
-}
-function BasemapSelectOption(props) {
-  const { layer } = props.data;
-  const { isAvailable, content } = useBasemapItem(layer);
-  return /* @__PURE__ */ jsx(
-    chakraComponents.Option,
-    {
-      ...props,
-      isDisabled: !isAvailable,
-      className: "basemap-switcher-option",
-      children: content
+      lazyMount: true,
+      unmountOnExit: true,
+      children: [
+        /* @__PURE__ */ jsxs(Select.Control, { children: [
+          /* @__PURE__ */ jsx(
+            Select.Trigger,
+            {
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              className: "basemap-switcher-select-trigger",
+              children: /* @__PURE__ */ jsx(Select.ValueText, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx(Select.Indicator, {}) })
+        ] }),
+        /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { className: "basemap-switcher-select-content", children: optionsListCollection.items.map((item) => /* @__PURE__ */ jsx(BasemapItem, { item }, item.value)) }) }) })
+      ]
     }
-  );
+  ) });
 }
-function BasemapSelectValue(props) {
-  const { layer } = props.data;
-  const { isAvailable, content } = useBasemapItem(layer);
-  return /* @__PURE__ */ jsx(
-    chakraComponents.SingleValue,
-    {
-      ...props,
-      isDisabled: !isAvailable,
-      className: "basemap-switcher-value",
-      children: content
-    }
-  );
-}
-function useBasemapItem(layer) {
+function BasemapItem(props) {
   const intl = useIntl();
   const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
-  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: [
-      label,
-      !isAvailable && /* @__PURE__ */ jsx(Box, { ml: 2, children: /* @__PURE__ */ jsx(Tooltip, { label: notAvailableLabel, placement: "right", openDelay: 500, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(FiAlertTriangle, { color: "red", "aria-label": notAvailableLabel }) }) }) })
-    ] })
-  };
-}
-function useChakraStyles() {
-  const [dropDownBackground, borderColor] = useToken(
-    "colors",
-    ["background_body", "border"],
-    ["#ffffff", "#ffffff"]
+  const item = props.item;
+  return /* @__PURE__ */ jsxs(
+    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(
+              FiAlertTriangle,
+              {
+                color: "red",
+                "aria-label": intl.formatMessage({
+                  id: "layerNotAvailable"
+                })
+              }
+            ) })
+          }
+        ) })
+      ]
+    },
+    item.value
   );
-  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 };

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, 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, ReactNode } 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>): ReactNode {\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>): ReactNode {\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":";;;;;;;;;;AAsBO,MAAM,aAAgB,GAAA;AAgDhB,MAAA,eAAA,GAA4C,CAAC,KAAU,KAAA;AAChE,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA;AAAA,IACF,0BAA6B,GAAA,KAAA;AAAA,IAC7B,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA;AAAA,GACnB,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,oBAAoB,KAAK,CAAA;AAC5E,EAAA,MAAM,oBAAoB,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,qBAAqB,CAAA;AAExE,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA;AACjC,EAAM,MAAA,UAAA,GAAa,cAAc,GAAG,CAAA;AACpC,EAAM,MAAA,eAAA,GAAkB,oBAAoB,MAAM,GAAA,EAAK,OAAO,kBAAmB,EAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAEzF,EAAM,MAAA,aAAA,GAAgB,CAAC,OAAoB,KAAA;AACvC,IAAA,GAAA,EAAK,MAAO,CAAA,iBAAA,CAAkB,OAAY,KAAA,aAAA,GAAgB,SAAY,OAAO,CAAA;AAAA,GACjF;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,aAAc,EAAA,GAAI,QAAQ,MAAM;AAC7C,IAAA,MAAMA,QAA0B,GAAA,UAAA,CAAW,GAAkB,CAAA,CAAC,KAAU,KAAA;AACpE,MAAA,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,EAAA,EAAI,KAAa,EAAA;AAAA,KAC1C,CAAA;AAED,IAAI,IAAA,0BAAA,IAA8B,mBAAmB,IAAM,EAAA;AACvD,MAAA,MAAM,WAA4B,GAAA,EAAE,KAAO,EAAA,aAAA,EAAe,OAAO,MAAU,EAAA;AAC3E,MAAAA,QAAAA,CAAQ,KAAK,WAAW,CAAA;AAAA;AAG5B,IAAA,MAAMC,iBAAgBD,QAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,UAAU,eAAe,CAAA;AACrE,IAAA,OAAO,EAAE,OAAA,EAAAA,QAAS,EAAA,aAAA,EAAAC,cAAc,EAAA;AAAA,GACjC,EAAA,CAAC,0BAA4B,EAAA,UAAA,EAAY,eAAe,CAAC,CAAA;AAE5D,EAAA,MAAM,eAAe,eAAgB,EAAA;AACrC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC7B,IAAO,OAAA;AAAA,MACH,MAAQ,EAAA,mBAAA;AAAA,MACR,WAAa,EAAA;AAAA,KACjB;AAAA,GACJ,EAAG,EAAE,CAAA;AACL,EAAM,MAAA,OAAA,GAAU,QAAS,CAAA,CAAC,KAAyC,KAAA;AAE/D,IAAA,IAAI,CAAC,YAAA,IAAgB,KAAM,CAAA,GAAA,KAAQ,OAAS,EAAA;AACxC,MAAA,eAAA,CAAgB,IAAI,CAAA;AAAA;AACxB,GACH,CAAA;AAED,EAAA,uBACK,GAAA,CAAA,GAAA,EAAA,EAAK,GAAG,cAAA,EACJ,QACG,EAAA,GAAA,mBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACG,YAAY,EAAA,SAAA;AAAA,MACZ,iBAAiB,EAAA,cAAA;AAAA,MACjB,SAAU,EAAA,yBAAA;AAAA,MACV,eAAgB,EAAA,cAAA;AAAA,MAChB,OAAA;AAAA,MACA,KAAO,EAAA,aAAA;AAAA,MACP,UAAU,CAAC,MAAA,KAAW,MAAU,IAAA,aAAA,CAAc,OAAO,KAAK,CAAA;AAAA,MAC1D,WAAa,EAAA,KAAA;AAAA,MACb,YAAc,EAAA,KAAA;AAAA,MACd,YAAa,EAAA,OAAA;AAAA,MAEb,cAAA,EAAgB,CAAC,MACb,KAAA,MAAA,CAAO,UAAU,MACX,GAAA,MAAA,CAAO,MAAM,KACZ,IAAA,MAAA,CAAO,MAAM,SAAc,KAAA,OAAA,GACtB,MAAM,IAAK,CAAA,aAAA,CAAc,EAAE,EAAI,EAAA,mBAAA,EAAqB,CAAA,GACpD,EACN,CAAA,GAAA,iBAAA;AAAA,MAEV,gBAAkB,EAAA,CAAC,MAAW,KAAA,MAAA,EAAQ,OAAO,SAAc,KAAA,OAAA;AAAA,MAC3D,UAAA;AAAA,MACA,gBAAkB,EAAA;AAAA,QACd,UAAU,MAAM,EAAA;AAAA,QAChB,QAAA,EAAU,CAACC,MAAU,KAAA;AACjB,UAAA,IACIA,MAAM,CAAA,MAAA,IAAU,eAChBA,IAAAA,MAAAA,CAAM,MAAU,IAAA,qBAAA;AAEhB,YAAOA,OAAAA,MAAAA,CAAM,QAAQ,GAAM,GAAA,IAAA,CAAK,cAAc,EAAE,EAAA,EAAI,YAAY,CAAA;AAAA,eACxD,OAAA,EAAA;AAAA,SAChB;AAAA,QACA,UAAU,MAAM,EAAA;AAAA,QAChB,SAAS,MAAM;AAAA,OACnB;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,OAAA;AAAA,MACX,UAAY,EAAA,YAAA;AAAA,MACZ,UAAA,EAAY,MAAM,eAAA,CAAgB,IAAI,CAAA;AAAA,MACtC,WAAA,EAAa,MAAM,eAAA,CAAgB,KAAK;AAAA;AAAA,MAE5C,IACR,EAAA,CAAA;AAER;AAEA,SAAS,cAAc,QAAyC,EAAA;AAC5D,EAAO,OAAA,mBAAA,CAAoB,MAAM,QAAA,EAAU,MAAO,CAAA,aAAA,MAAmB,EAAC,EAAG,CAAC,QAAQ,CAAC,CAAA;AACvF;AAEA,SAAS,oBAAoB,KAA6C,EAAA;AACtE,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,KAAM,CAAA,IAAA;AACxB,EAAA,MAAM,EAAE,WAAA,EAAa,OAAQ,EAAA,GAAI,eAAe,KAAK,CAAA;AAErD,EACI,uBAAA,GAAA;AAAA,IAAC,gBAAiB,CAAA,MAAA;AAAA,IAAjB;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,YAAY,CAAC,WAAA;AAAA,MACb,SAAU,EAAA,yBAAA;AAAA,MAET,QAAA,EAAA;AAAA;AAAA,GACL;AAER;AAEA,SAAS,mBAAmB,KAAkD,EAAA;AAC1E,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,KAAM,CAAA,IAAA;AACxB,EAAA,MAAM,EAAE,WAAA,EAAa,OAAQ,EAAA,GAAI,eAAe,KAAK,CAAA;AAErD,EACI,uBAAA,GAAA;AAAA,IAAC,gBAAiB,CAAA,WAAA;AAAA,IAAjB;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,YAAY,CAAC,WAAA;AAAA,MACb,SAAU,EAAA,wBAAA;AAAA,MAET,QAAA,EAAA;AAAA;AAAA,GACL;AAER;AAEA,SAAS,eAAe,KAA0B,EAAA;AAC9C,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,oBAAoB,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,qBAAqB,CAAA;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAY,EAAA,GAAI,oBAAoB,MAAM;AACrD,IAAA,IAAI,CAAC,KAAO,EAAA;AAER,MAAO,OAAA,EAAE,KAAO,EAAA,IAAA,CAAK,aAAc,CAAA,EAAE,IAAI,mBAAoB,EAAC,CAAG,EAAA,WAAA,EAAa,IAAK,EAAA;AAAA;AAGvF,IAAO,OAAA;AAAA,MACH,OAAO,KAAM,CAAA,KAAA;AAAA,MACb,WAAA,EAAa,MAAM,SAAc,KAAA;AAAA,KACrC;AAAA,GACD,EAAA,CAAC,KAAO,EAAA,IAAI,CAAC,CAAA;AAEhB,EAAO,OAAA;AAAA,IACH,WAAA;AAAA,IACA,yBACK,IAAA,CAAA,IAAA,EAAA,EAAK,SAAU,EAAA,KAAA,EAAM,YAAW,QAC5B,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,CAAC,WACE,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,GACL,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,iBAAA,EAAmB,SAAU,EAAA,OAAA,EAAQ,WAAW,GAC5D,EAAA,QAAA,kBAAA,GAAA,CAAC,MACG,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,KAAA,EAAO,OAAO,YAAY,EAAA,iBAAA,EAAmB,CAClE,EAAA,CAAA,EACJ,CACJ,EAAA;AAAA,KAER,EAAA;AAAA,GAER;AACJ;AAKA,SAAS,eAAkB,GAAA;AACvB,EAAM,MAAA,CAAC,kBAAoB,EAAA,WAAW,CAAI,GAAA,QAAA;AAAA,IACtC,QAAA;AAAA,IACA,CAAC,mBAAmB,QAAQ,CAAA;AAAA,IAC5B,CAAC,WAAW,SAAS;AAAA,GACzB;AACA,EAAA,OAAO,QAAQ,MAAM;AACjB,IAAA,MAAM,YAAiF,GAAA;AAAA,MACnF,SAAS,CAAC,MAAA,MAAY,EAAE,GAAG,MAAA,EAAQ,QAAQ,SAAU,EAAA,CAAA;AAAA,MACrD,kBAAA,EAAoB,CAAC,MAAY,MAAA;AAAA,QAC7B,GAAG,MAAA;AAAA,QACH;AAAA,OACJ,CAAA;AAAA,MACA,iBAAA,EAAmB,CAAC,QAAc,MAAA;AAAA,QAC9B,GAAG,QAAA;AAAA,QACH,eAAiB,EAAA;AAAA,OACrB;AAAA,KACJ;AACA,IAAO,OAAA,YAAA;AAAA,GACR,EAAA,CAAC,kBAAoB,EAAA,WAAW,CAAC,CAAA;AACxC;;;;"}
+{"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, useMapModel, MapModelProps, MapModel } 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 { 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 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 } = useMapModel(props);\n    return map && <BasemapSwitcherImpl {...props} map={map} />;\n};\n\n// Wait for the map resolve before rendering the component, this can be removed once we take the map model as a prop directly.\nfunction BasemapSwitcherImpl(props: BasemapSwitcherProps & { map: MapModel }) {\n    const intl = useIntl();\n    const {\n        allowSelectingEmptyBasemap = false,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        map\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                            <FiAlertTriangle\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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"}

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @open-pioneer/basemap-switcher
 
+## 0.11.0-dev.20250515143825
+
+### Minor Changes
+
+- 738390e: It is no longer possible to use the BasemapSwitcher within a Chakra Form/Field to an automatic label id.
+  However, it is still possible to provide a label for accessibility via the props `aria-label` and `aria-labelledby` (for details see the packages README).
+- 738390e: Update to Chakra v3
+
+### Patch Changes
+
+- Updated dependencies [738390e]
+- Updated dependencies [738390e]
+    - @open-pioneer/map@0.11.0-dev.20250515143825
+
 ## 0.10.0
 
 ### Minor Changes

package/README.md

@@ -22,23 +22,25 @@ To provide an option to deactivate all basemap layers, add the optional property
 
 ## Accessibility
 
-The package provides only a `HTMLSelectElement`.
+The package provides only a select component.
 To be compliant with a11y guidelines (screen reader compatibility), a label must be added to the basemap switcher.
-Therefore, use one of the following attempts:
+Therefore, use one of the following approaches:
 
-- Wrap the `BasemapSwitcher` into a Chakra UI `FormControl` and set the `FormLabel` to a custom label.
-- Use the `aria-labelledby` property of the `BasemapSwitcher` to specify that an anywhere defined label is used as the basemap switcher's label.
-- Use the `aria-label` property of the `BasemapSwitcher` to set an label for the screen reader that is not shown in the UI.
+- Use the `aria-labelledby` property of the `BasemapSwitcher` to specify that another HTML element (e.g. a heading shown above the control) is used as the basemap switcher's label.
+- Use the `aria-label` property of the `BasemapSwitcher` to set a label for the screen reader that is not shown in the UI.
 
 Example:
 
 ```jsx
-<FormControl>
-    <FormLabel ps={1}>
-        <Text as="b">{intl.formatMessage({ id: "basemapLabel" })}</Text>
-    </FormLabel>
-    <BasemapSwitcher map={map} allowSelectingEmptyBasemap></BasemapSwitcher>
-</FormControl>
+<TitledSection
+    title={
+        <SectionHeading id={basemapsHeadingId} mb={2}>
+            {intl.formatMessage({ id: "basemapLabel" })}
+        </SectionHeading>
+    }
+>
+    <BasemapSwitcher map={map} aria-labelledby={basemapsHeadingId} />
+</TitledSection>
 ```
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/basemap-switcher",
-  "version": "0.10.0",
+  "version": "0.11.0-dev.20250515143825",
   "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/chakra-integration": "^3.1.0",
-    "@open-pioneer/react-utils": "^3.1.0",
-    "@open-pioneer/runtime": "^3.1.0",
-    "chakra-react-select": "^5.0.4",
+    "@open-pioneer/react-utils": "4.0.0-dev.20250512105016",
+    "@open-pioneer/runtime": "4.0.0-dev.20250512105016",
+    "@chakra-ui/react": "^3.17.0",
     "ol": "^10.5.0",
     "react": "^19.1.0",
     "react-icons": "^5.3.0",
-    "@open-pioneer/reactivity": "^3.1.0",
-    "@conterra/reactivity-core": "^0.5.0",
-    "@open-pioneer/map": "^0.10.0"
+    "@open-pioneer/reactivity": "4.0.0-dev.20250512105016",
+    "@conterra/reactivity-core": "^0.6.0",
+    "@open-pioneer/chakra-snippets": "4.0.0-dev.20250512105016",
+    "@open-pioneer/map": "0.11.0-dev.20250515143825"
   },
   "exports": {
     "./package.json": "./package.json",