@open-pioneer/spatial-bookmarks 0.10.0 → 0.11.0-dev.20250515143825

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @open-pioneer/spatial-bookmarks
 
+## 0.11.0-dev.20250515143825
+
+### Minor Changes
+
+- 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/SpatialBookmarks.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Flex, Alert, AlertIcon, VStack, Input, List, Box, Center, Text, Spacer, Tooltip, Button } from '@open-pioneer/chakra-integration';
+import { Flex, VStack, Field, Input, List, Center, Text, Spacer, IconButton, Button } from '@chakra-ui/react';
+import { Alert } from '@open-pioneer/chakra-snippets/alert';
+import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useMapModel } from '@open-pioneer/map';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 import classNames from 'classnames';
 import { useService, useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
 import { useState, useEffect, useRef } from 'react';
 import { PiTrashSimpleLight, PiMapTrifold } from 'react-icons/pi';
 import { SpatialBookmarkViewModel } from './SpatialBookmarksViewModel.js';
-import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 
 const SpatialBookmarks = (props) => {
   const { map } = useMapModel(props);
@@ -50,10 +52,15 @@ function SpatialBookmarkUI(props) {
     }
   }, [bookmarks, scrollToLastItem]);
   const deleteContent = () => /* @__PURE__ */ jsxs(VStack, { children: [
-    /* @__PURE__ */ jsxs(Alert, { rounded: "md", status: "warning", children: [
-      /* @__PURE__ */ jsx(AlertIcon, {}),
-      intl.formatMessage({ id: "bookmark.alert.delete" })
-    ] }),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        rounded: "md",
+        status: "warning",
+        title: intl.formatMessage({ id: "bookmark.alert.delete" }),
+        role: "alert"
+      }
+    ),
     /* @__PURE__ */ jsx(
       RemoveControls,
       {
@@ -64,11 +71,16 @@ function SpatialBookmarkUI(props) {
     )
   ] });
   const createContent = () => /* @__PURE__ */ jsxs(VStack, { children: [
-    /* @__PURE__ */ jsxs(Alert, { rounded: "md", status: "info", children: [
-      /* @__PURE__ */ jsx(AlertIcon, {}),
-      intl.formatMessage({ id: "bookmark.alert.create" })
-    ] }),
     /* @__PURE__ */ jsx(
+      Alert,
+      {
+        rounded: "md",
+        status: "info",
+        title: intl.formatMessage({ id: "bookmark.alert.create" }),
+        role: "alert"
+      }
+    ),
+    /* @__PURE__ */ jsx(Field.Root, { invalid: !isValidBookmarkName, required: true, children: /* @__PURE__ */ jsx(
       Input,
       {
         "aria-label": intl.formatMessage({ id: "bookmark.input.label" }),
@@ -82,11 +94,9 @@ function SpatialBookmarkUI(props) {
             addBookmark();
           }
         },
-        isRequired: true,
-        isInvalid: !isValidBookmarkName,
         autoFocus: true
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       CreateControls,
       {
@@ -101,10 +111,15 @@ function SpatialBookmarkUI(props) {
     )
   ] });
   const listContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    bookmarks.length ? createList(bookmarks, viewModel, intl, listItemNodes) : /* @__PURE__ */ jsxs(Alert, { rounded: "md", status: "info", children: [
-      /* @__PURE__ */ jsx(AlertIcon, {}),
-      intl.formatMessage({ id: "bookmark.alert.noSaved" })
-    ] }),
+    bookmarks.length ? createList(bookmarks, viewModel, intl, listItemNodes) : /* @__PURE__ */ jsx(
+      Alert,
+      {
+        rounded: "md",
+        status: "info",
+        title: intl.formatMessage({ id: "bookmark.alert.noSaved" }),
+        role: "alert"
+      }
+    ),
     /* @__PURE__ */ jsx(
       ListControls,
       {
@@ -139,7 +154,7 @@ function createList(bookmarks, viewModel, intl, listRef) {
     bookmark.id
   ));
   return /* @__PURE__ */ jsx(
-    List,
+    List.Root,
     {
       as: "ul",
       className: "spatial-bookmark-list",
@@ -150,7 +165,7 @@ function createList(bookmarks, viewModel, intl, listRef) {
       flexShrink: 1,
       flexGrow: 1,
       p: 1,
-      spacing: 1,
+      gap: 1,
       overflowY: "auto",
       listStyleType: "none",
       children: bookmarkItems
@@ -185,7 +200,7 @@ function BookmarkItem(props) {
     }
   };
   return /* @__PURE__ */ jsx(
-    Box,
+    List.Item,
     {
       as: "li",
       p: 1,
@@ -203,30 +218,40 @@ function BookmarkItem(props) {
       cursor: "pointer",
       outline: 0,
       _hover: { background: "trails.50" },
-      _focusVisible: { boxShadow: "outline" },
+      focusVisibleRing: "outside",
       onKeyDown,
       onClick: onActivate,
       children: /* @__PURE__ */ jsxs(Flex, { width: "100%", flexDirection: "row", align: "center", gap: 1, children: [
         /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(PiMapTrifold, {}) }),
-        /* @__PURE__ */ jsx(Text, { ps: 2, noOfLines: 1, children: title }),
+        /* @__PURE__ */ jsx(Text, { ps: 2, maxLines: 1, children: title }),
         /* @__PURE__ */ jsx(Spacer, {}),
-        /* @__PURE__ */ jsx(Tooltip, { hasArrow: true, label: deleteBtnLabel, placement: "right", children: /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(
+          Tooltip,
           {
-            className: "spatial-bookmarks-item-delete",
-            "aria-label": deleteBtnLabel,
-            borderRadius: "full",
-            iconSpacing: 0,
-            padding: 0,
-            colorScheme: "red",
-            variant: "ghost",
-            leftIcon: /* @__PURE__ */ jsx(PiTrashSimpleLight, {}),
-            onClick: (event) => {
-              onDelete();
-              event.stopPropagation();
-            }
-          }
-        ) }, index)
+            showArrow: true,
+            content: deleteBtnLabel,
+            positioning: {
+              placement: "right"
+            },
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                className: "spatial-bookmarks-item-delete",
+                "aria-label": deleteBtnLabel,
+                borderRadius: "full",
+                padding: 0,
+                colorPalette: "red",
+                variant: "plain",
+                onClick: (event) => {
+                  onDelete();
+                  event.stopPropagation();
+                },
+                children: /* @__PURE__ */ jsx(PiTrashSimpleLight, {})
+              }
+            )
+          },
+          index
+        )
       ] })
     }
   );
@@ -235,19 +260,17 @@ function ListControls(props) {
   const { intl, bookmarks, showCreate, showDelete } = props;
   return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
     /* @__PURE__ */ jsx(
-      DialogButton,
+      DialogIconButton,
       {
-        isDisabled: bookmarks.length === 0,
-        colorScheme: "red",
-        width: void 0,
-        iconSpacing: 0,
-        leftIcon: /* @__PURE__ */ jsx(PiTrashSimpleLight, {}),
-        onClick: showDelete,
         "aria-label": intl.formatMessage({ id: "bookmark.button.deleteAll" }),
-        variant: "outline"
+        disabled: bookmarks.length === 0,
+        colorPalette: "red",
+        onClick: showDelete,
+        variant: "outline",
+        children: /* @__PURE__ */ jsx(PiTrashSimpleLight, {})
       }
     ),
-    /* @__PURE__ */ jsx(DialogButton, { onClick: showCreate, width: "100%", children: intl.formatMessage({ id: "bookmark.button.create" }) })
+    /* @__PURE__ */ jsx(DialogButton, { onClick: showCreate, children: intl.formatMessage({ id: "bookmark.button.create" }) })
   ] });
 }
 function RemoveControls(props) {
@@ -261,14 +284,17 @@ function CreateControls(props) {
   const { intl, onCancel, onSave, isInvalid } = props;
   return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
     /* @__PURE__ */ jsx(DialogButton, { variant: "outline", onClick: () => onCancel(), children: intl.formatMessage({ id: "bookmark.button.cancel" }) }),
-    /* @__PURE__ */ jsx(DialogButton, { isDisabled: isInvalid, onClick: () => onSave(), children: intl.formatMessage({ id: "bookmark.button.save" }) })
+    /* @__PURE__ */ jsx(DialogButton, { disabled: isInvalid, onClick: () => onSave(), children: intl.formatMessage({ id: "bookmark.button.save" }) })
   ] });
 }
 function ButtonContainer(props) {
-  return /* @__PURE__ */ jsx(Flex, { width: "100%", flexDirection: "row", mt: 2, gap: 1, flexGrow: 0, flexShrink: 0, children: props.children });
+  return /* @__PURE__ */ jsx(Flex, { width: "100%", flexDirection: "row", mt: 2, gap: 2, flexGrow: 0, flexShrink: 0, children: props.children });
 }
 function DialogButton(props) {
-  return /* @__PURE__ */ jsx(Button, { width: "100%", ...props });
+  return /* @__PURE__ */ jsx(Button, { flex: "1 1 auto", ...props });
+}
+function DialogIconButton(props) {
+  return /* @__PURE__ */ jsx(IconButton, { flex: "0 0 auto", px: 4, ...props });
 }
 function useViewModel(map, localStorageService) {
   const [viewModel, setViewModel] = useState();

package/SpatialBookmarks.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpatialBookmarks.js","sources":["SpatialBookmarks.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Alert,\n    AlertIcon,\n    Box,\n    Button,\n    ButtonProps,\n    Flex,\n    Input,\n    List,\n    Spacer,\n    Text,\n    Tooltip,\n    VStack,\n    Center\n} from \"@open-pioneer/chakra-integration\";\nimport { LocalStorageService } from \"@open-pioneer/local-storage\";\nimport { MapModel, MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, KeyboardEvent, ReactNode, useEffect, useRef, useState } from \"react\";\nimport { PiMapTrifold, PiTrashSimpleLight } from \"react-icons/pi\";\nimport { Bookmark, SpatialBookmarkViewModel } from \"./SpatialBookmarksViewModel\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\n\ntype UIMode = \"list\" | \"create\" | \"delete\";\n\nexport interface SpatialBookmarksProps extends CommonComponentProps, MapModelProps {}\n\n/**\n * A component that allows the user to manage a set of spatial bookmarks.\n */\nexport const SpatialBookmarks: FC<SpatialBookmarksProps> = (props) => {\n    const { map } = useMapModel(props);\n    const localStorageService = useService<LocalStorageService>(\n        \"local-storage.LocalStorageService\"\n    );\n    const viewModel = useViewModel(map, localStorageService);\n    return viewModel && <SpatialBookmarkUI {...props} viewModel={viewModel} />;\n};\n\nfunction SpatialBookmarkUI(props: SpatialBookmarksProps & { viewModel: SpatialBookmarkViewModel }) {\n    const { viewModel } = props;\n    const intl = useIntl();\n    const listItemNodes = useRef<HTMLElement[]>([]);\n    const [scrollToLastItem, setScrollToLastItem] = useState(false);\n    const bookmarks = useReactiveSnapshot(() => viewModel.bookmarks, [viewModel]);\n    const [bookmarkName, setBookmarkName] = useState<string>(\"\");\n    const isValidBookmarkName = bookmarkName.trim().length > 0; // use trim to avoid bookmarks with space character only\n    const { containerProps } = useCommonComponentProps(\"spatial-bookmarks\", props);\n    const [uiMode, setUiMode] = useState<UIMode>(\"list\");\n\n    const clearBookmarks = () => {\n        viewModel.deleteAllBookmarks();\n        setUiMode(\"list\");\n    };\n\n    const addBookmark = () => {\n        if (isValidBookmarkName) {\n            viewModel.createBookmark(bookmarkName);\n            setUiMode(\"list\");\n            setBookmarkName(\"\");\n            setScrollToLastItem(true);\n        }\n    };\n\n    // Scroll to newly created bookmark after render\n    useEffect(() => {\n        if (scrollToLastItem) {\n            const listItems = listItemNodes.current;\n            if (listItems) {\n                const lastItem = listItems[bookmarks.length - 1];\n                lastItem?.scrollIntoView?.();\n            }\n            setScrollToLastItem(false);\n        }\n    }, [bookmarks, scrollToLastItem]);\n\n    const deleteContent = () => (\n        <VStack>\n            <Alert rounded=\"md\" status=\"warning\">\n                <AlertIcon />\n                {intl.formatMessage({ id: \"bookmark.alert.delete\" })}\n            </Alert>\n            <RemoveControls\n                intl={intl}\n                onClear={clearBookmarks}\n                onCancel={() => setUiMode(\"list\")}\n            />\n        </VStack>\n    );\n\n    const createContent = () => (\n        <VStack>\n            <Alert rounded=\"md\" status=\"info\">\n                <AlertIcon />\n                {intl.formatMessage({ id: \"bookmark.alert.create\" })}\n            </Alert>\n            <Input\n                aria-label={intl.formatMessage({ id: \"bookmark.input.label\" })}\n                placeholder={intl.formatMessage({ id: \"bookmark.input.placeholder\" })}\n                value={bookmarkName}\n                onChange={(event) => {\n                    setBookmarkName(event.target.value);\n                }}\n                onKeyDown={(e) => {\n                    // add bookmark only, if valid bookmark name exists\n                    if (e.key === \"Enter\") {\n                        addBookmark();\n                    }\n                }}\n                isRequired\n                isInvalid={!isValidBookmarkName}\n                autoFocus // eslint-disable-line jsx-a11y/no-autofocus\n            />\n            <CreateControls\n                intl={intl}\n                isInvalid={!isValidBookmarkName}\n                onCancel={() => {\n                    setBookmarkName(\"\");\n                    setUiMode(\"list\");\n                }}\n                onSave={addBookmark}\n            />\n        </VStack>\n    );\n\n    const listContent = () => (\n        <>\n            {bookmarks.length ? (\n                createList(bookmarks, viewModel, intl, listItemNodes)\n            ) : (\n                <Alert rounded=\"md\" status=\"info\">\n                    <AlertIcon />\n                    {intl.formatMessage({ id: \"bookmark.alert.noSaved\" })}\n                </Alert>\n            )}\n            <ListControls\n                intl={intl}\n                bookmarks={bookmarks}\n                showCreate={() => setUiMode(\"create\")}\n                showDelete={() => setUiMode(\"delete\")}\n            />\n        </>\n    );\n\n    const content = (\n        <>\n            {uiMode === \"list\" && listContent()}\n            {uiMode === \"create\" && createContent()}\n            {uiMode === \"delete\" && deleteContent()}\n        </>\n    );\n\n    return (\n        <Flex flexDirection=\"column\" {...containerProps}>\n            {content}\n        </Flex>\n    );\n}\n\nfunction createList(\n    bookmarks: Bookmark[],\n    viewModel: SpatialBookmarkViewModel,\n    intl: PackageIntl,\n    listRef: React.MutableRefObject<HTMLElement[]>\n) {\n    const deleteBtnLabel = intl.formatMessage({\n        id: \"bookmark.button.deleteOne\"\n    });\n\n    const bookmarkItems = bookmarks.map((bookmark, idx) => (\n        <BookmarkItem\n            key={bookmark.id}\n            index={idx}\n            listItemNodes={listRef}\n            bookmark={bookmark}\n            onActivate={() => viewModel.activateBookmark(bookmark)}\n            onDelete={() => viewModel.deleteBookmark(bookmark.id)}\n            deleteBtnLabel={deleteBtnLabel}\n        />\n    ));\n\n    return (\n        <List\n            as=\"ul\"\n            className=\"spatial-bookmark-list\"\n            role=\"listbox\"\n            aria-label={intl.formatMessage({\n                id: \"bookmark.list.label\"\n            })}\n            flexShrink={1}\n            flexGrow={1}\n            p={1} // Some padding for children's box shadow\n            spacing={1}\n            overflowY=\"auto\"\n            listStyleType=\"none\"\n        >\n            {bookmarkItems}\n        </List>\n    );\n}\n\n// key name -> index\nconst ARROW_INDEX_MAP: Record<string, number> = {\n    ArrowDown: 1,\n    ArrowUp: -1\n};\n\nfunction BookmarkItem(props: {\n    index: number;\n    listItemNodes: React.MutableRefObject<HTMLElement[]>;\n    bookmark: Bookmark;\n    onActivate: () => void;\n    onDelete: () => void;\n    deleteBtnLabel: string;\n}): ReactNode {\n    const { index, listItemNodes, bookmark, onDelete, onActivate, deleteBtnLabel } = props;\n    const title = bookmark.title;\n    const onKeyDown = (evt: KeyboardEvent) => {\n        const key = evt.key;\n        if (key === \"Enter\") {\n            // Ignore enter from child components (buttons)\n            if (evt.target === evt.currentTarget) {\n                onActivate();\n            }\n            return;\n        }\n\n        if (ARROW_INDEX_MAP[key] != null) {\n            const len = listItemNodes.current?.length;\n            if (!len) {\n                return;\n            }\n\n            let nextIndex = (index + ARROW_INDEX_MAP[key]!) % len;\n            if (nextIndex < 0) {\n                nextIndex = len - 1;\n            }\n            listItemNodes.current[nextIndex]?.focus();\n        }\n    };\n    return (\n        <Box\n            as=\"li\"\n            p={1}\n            ref={(el: HTMLDivElement | null) => {\n                if (!el) {\n                    listItemNodes.current.splice(index, 1);\n                    return;\n                }\n                listItemNodes.current[index] = el;\n            }}\n            className={classNames(\"spatial-bookmarks-item\")}\n            tabIndex={0}\n            rounded=\"md\"\n            role=\"option\"\n            cursor=\"pointer\"\n            outline={0}\n            _hover={{ background: \"trails.50\" }}\n            _focusVisible={{ boxShadow: \"outline\" }}\n            onKeyDown={onKeyDown}\n            onClick={onActivate}\n        >\n            <Flex width=\"100%\" flexDirection=\"row\" align=\"center\" gap={1}>\n                <Center>\n                    <PiMapTrifold />\n                </Center>\n                <Text ps={2} noOfLines={1}>\n                    {title}\n                </Text>\n                <Spacer />\n                <Tooltip key={index} hasArrow label={deleteBtnLabel} placement=\"right\">\n                    <Button\n                        className=\"spatial-bookmarks-item-delete\"\n                        aria-label={deleteBtnLabel}\n                        borderRadius=\"full\"\n                        iconSpacing={0}\n                        padding={0}\n                        colorScheme=\"red\"\n                        variant=\"ghost\"\n                        leftIcon={<PiTrashSimpleLight />}\n                        onClick={(event) => {\n                            onDelete();\n                            event.stopPropagation();\n                        }}\n                    />\n                </Tooltip>\n            </Flex>\n        </Box>\n    );\n}\n\nfunction ListControls(props: {\n    intl: PackageIntl;\n    bookmarks: Bookmark[];\n    showCreate: () => void;\n    showDelete: () => void;\n}): ReactNode {\n    const { intl, bookmarks, showCreate, showDelete } = props;\n\n    return (\n        <ButtonContainer>\n            <DialogButton\n                isDisabled={bookmarks.length === 0}\n                colorScheme=\"red\"\n                width={undefined}\n                iconSpacing={0}\n                leftIcon={<PiTrashSimpleLight />}\n                onClick={showDelete}\n                aria-label={intl.formatMessage({ id: \"bookmark.button.deleteAll\" })}\n                variant=\"outline\"\n            />\n            <DialogButton onClick={showCreate} width=\"100%\">\n                {intl.formatMessage({ id: \"bookmark.button.create\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction RemoveControls(props: { intl: PackageIntl; onClear: () => void; onCancel: () => void }) {\n    const { intl, onCancel, onClear } = props;\n    return (\n        <ButtonContainer>\n            <DialogButton variant=\"outline\" onClick={onCancel}>\n                {intl.formatMessage({ id: \"bookmark.button.cancelDelete\" })}\n            </DialogButton>\n            <DialogButton onClick={onClear}>\n                {intl.formatMessage({ id: \"bookmark.button.confirmDelete\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction CreateControls(props: {\n    intl: PackageIntl;\n    isInvalid: boolean;\n    onCancel: () => void;\n    onSave: () => void;\n}) {\n    const { intl, onCancel, onSave, isInvalid } = props;\n    return (\n        <ButtonContainer>\n            <DialogButton variant=\"outline\" onClick={() => onCancel()}>\n                {intl.formatMessage({ id: \"bookmark.button.cancel\" })}\n            </DialogButton>\n            <DialogButton isDisabled={isInvalid} onClick={() => onSave()}>\n                {intl.formatMessage({ id: \"bookmark.button.save\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction ButtonContainer(props: { children: ReactNode }) {\n    return (\n        <Flex width=\"100%\" flexDirection=\"row\" mt={2} gap={1} flexGrow={0} flexShrink={0}>\n            {props.children}\n        </Flex>\n    );\n}\n\nfunction DialogButton(props?: ButtonProps): ReactNode {\n    return <Button width=\"100%\" {...props} />;\n}\n\nfunction useViewModel(map: MapModel | undefined, localStorageService: LocalStorageService) {\n    const [viewModel, setViewModel] = useState<SpatialBookmarkViewModel>();\n    useEffect(() => {\n        let viewModel: SpatialBookmarkViewModel | undefined;\n        if (!map) {\n            viewModel = undefined;\n        } else {\n            viewModel = new SpatialBookmarkViewModel(map, localStorageService);\n        }\n\n        setViewModel(viewModel);\n        return () => viewModel?.destroy();\n    }, [map, localStorageService]);\n\n    return viewModel;\n}\n"],"names":["viewModel"],"mappings":"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"}
+{"version":3,"file":"SpatialBookmarks.js","sources":["SpatialBookmarks.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Button,\n    ButtonProps,\n    Center,\n    Field,\n    Flex,\n    IconButton,\n    IconButtonProps,\n    Input,\n    List,\n    Spacer,\n    Text,\n    VStack\n} from \"@chakra-ui/react\";\nimport { Alert } from \"@open-pioneer/chakra-snippets/alert\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { LocalStorageService } from \"@open-pioneer/local-storage\";\nimport { MapModel, MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, KeyboardEvent, ReactNode, useEffect, useRef, useState } from \"react\";\nimport { PiMapTrifold, PiTrashSimpleLight } from \"react-icons/pi\";\nimport { Bookmark, SpatialBookmarkViewModel } from \"./SpatialBookmarksViewModel\";\n\ntype UIMode = \"list\" | \"create\" | \"delete\";\n\nexport interface SpatialBookmarksProps extends CommonComponentProps, MapModelProps {}\n\n/**\n * A component that allows the user to manage a set of spatial bookmarks.\n */\nexport const SpatialBookmarks: FC<SpatialBookmarksProps> = (props) => {\n    const { map } = useMapModel(props);\n    const localStorageService = useService<LocalStorageService>(\n        \"local-storage.LocalStorageService\"\n    );\n    const viewModel = useViewModel(map, localStorageService);\n    return viewModel && <SpatialBookmarkUI {...props} viewModel={viewModel} />;\n};\n\nfunction SpatialBookmarkUI(props: SpatialBookmarksProps & { viewModel: SpatialBookmarkViewModel }) {\n    const { viewModel } = props;\n    const intl = useIntl();\n    const listItemNodes = useRef<HTMLElement[]>([]);\n    const [scrollToLastItem, setScrollToLastItem] = useState(false);\n    const bookmarks = useReactiveSnapshot(() => viewModel.bookmarks, [viewModel]);\n    const [bookmarkName, setBookmarkName] = useState<string>(\"\");\n    const isValidBookmarkName = bookmarkName.trim().length > 0; // use trim to avoid bookmarks with space character only\n    const { containerProps } = useCommonComponentProps(\"spatial-bookmarks\", props);\n    const [uiMode, setUiMode] = useState<UIMode>(\"list\");\n\n    const clearBookmarks = () => {\n        viewModel.deleteAllBookmarks();\n        setUiMode(\"list\");\n    };\n\n    const addBookmark = () => {\n        if (isValidBookmarkName) {\n            viewModel.createBookmark(bookmarkName);\n            setUiMode(\"list\");\n            setBookmarkName(\"\");\n            setScrollToLastItem(true);\n        }\n    };\n\n    // Scroll to newly created bookmark after render\n    useEffect(() => {\n        if (scrollToLastItem) {\n            const listItems = listItemNodes.current;\n            if (listItems) {\n                const lastItem = listItems[bookmarks.length - 1];\n                lastItem?.scrollIntoView?.();\n            }\n            setScrollToLastItem(false);\n        }\n    }, [bookmarks, scrollToLastItem]);\n\n    const deleteContent = () => (\n        <VStack>\n            <Alert\n                rounded=\"md\"\n                status=\"warning\"\n                title={intl.formatMessage({ id: \"bookmark.alert.delete\" })}\n                role=\"alert\"\n            />\n            <RemoveControls\n                intl={intl}\n                onClear={clearBookmarks}\n                onCancel={() => setUiMode(\"list\")}\n            />\n        </VStack>\n    );\n\n    const createContent = () => (\n        <VStack>\n            <Alert\n                rounded=\"md\"\n                status=\"info\"\n                title={intl.formatMessage({ id: \"bookmark.alert.create\" })}\n                role=\"alert\"\n            />\n            <Field.Root invalid={!isValidBookmarkName} required>\n                <Input\n                    aria-label={intl.formatMessage({ id: \"bookmark.input.label\" })}\n                    placeholder={intl.formatMessage({ id: \"bookmark.input.placeholder\" })}\n                    value={bookmarkName}\n                    onChange={(event) => {\n                        setBookmarkName(event.target.value);\n                    }}\n                    onKeyDown={(e) => {\n                        // add bookmark only, if valid bookmark name exists\n                        if (e.key === \"Enter\") {\n                            addBookmark();\n                        }\n                    }}\n                    autoFocus // eslint-disable-line jsx-a11y/no-autofocus\n                />\n            </Field.Root>\n            <CreateControls\n                intl={intl}\n                isInvalid={!isValidBookmarkName}\n                onCancel={() => {\n                    setBookmarkName(\"\");\n                    setUiMode(\"list\");\n                }}\n                onSave={addBookmark}\n            />\n        </VStack>\n    );\n\n    const listContent = () => (\n        <>\n            {bookmarks.length ? (\n                createList(bookmarks, viewModel, intl, listItemNodes)\n            ) : (\n                <Alert\n                    rounded=\"md\"\n                    status=\"info\"\n                    title={intl.formatMessage({ id: \"bookmark.alert.noSaved\" })}\n                    role=\"alert\"\n                />\n            )}\n            <ListControls\n                intl={intl}\n                bookmarks={bookmarks}\n                showCreate={() => setUiMode(\"create\")}\n                showDelete={() => setUiMode(\"delete\")}\n            />\n        </>\n    );\n\n    const content = (\n        <>\n            {uiMode === \"list\" && listContent()}\n            {uiMode === \"create\" && createContent()}\n            {uiMode === \"delete\" && deleteContent()}\n        </>\n    );\n\n    return (\n        <Flex flexDirection=\"column\" {...containerProps}>\n            {content}\n        </Flex>\n    );\n}\n\nfunction createList(\n    bookmarks: Bookmark[],\n    viewModel: SpatialBookmarkViewModel,\n    intl: PackageIntl,\n    listRef: React.MutableRefObject<HTMLElement[]>\n) {\n    const deleteBtnLabel = intl.formatMessage({\n        id: \"bookmark.button.deleteOne\"\n    });\n\n    const bookmarkItems = bookmarks.map((bookmark, idx) => (\n        <BookmarkItem\n            key={bookmark.id}\n            index={idx}\n            listItemNodes={listRef}\n            bookmark={bookmark}\n            onActivate={() => viewModel.activateBookmark(bookmark)}\n            onDelete={() => viewModel.deleteBookmark(bookmark.id)}\n            deleteBtnLabel={deleteBtnLabel}\n        />\n    ));\n\n    return (\n        <List.Root\n            as=\"ul\"\n            className=\"spatial-bookmark-list\"\n            role=\"listbox\"\n            aria-label={intl.formatMessage({\n                id: \"bookmark.list.label\"\n            })}\n            flexShrink={1}\n            flexGrow={1}\n            p={1} // Some padding for children's box shadow\n            gap={1}\n            overflowY=\"auto\"\n            listStyleType=\"none\"\n        >\n            {bookmarkItems}\n        </List.Root>\n    );\n}\n\n// key name -> index\nconst ARROW_INDEX_MAP: Record<string, number> = {\n    ArrowDown: 1,\n    ArrowUp: -1\n};\n\nfunction BookmarkItem(props: {\n    index: number;\n    listItemNodes: React.RefObject<HTMLElement[]>;\n    bookmark: Bookmark;\n    onActivate: () => void;\n    onDelete: () => void;\n    deleteBtnLabel: string;\n}): ReactNode {\n    const { index, listItemNodes, bookmark, onDelete, onActivate, deleteBtnLabel } = props;\n    const title = bookmark.title;\n    const onKeyDown = (evt: KeyboardEvent) => {\n        const key = evt.key;\n        if (key === \"Enter\") {\n            // Ignore enter from child components (buttons)\n            if (evt.target === evt.currentTarget) {\n                onActivate();\n            }\n            return;\n        }\n\n        if (ARROW_INDEX_MAP[key] != null) {\n            const len = listItemNodes.current?.length;\n            if (!len) {\n                return;\n            }\n\n            let nextIndex = (index + ARROW_INDEX_MAP[key]!) % len;\n            if (nextIndex < 0) {\n                nextIndex = len - 1;\n            }\n            listItemNodes.current[nextIndex]?.focus();\n        }\n    };\n    return (\n        <List.Item\n            as=\"li\"\n            p={1}\n            ref={(el: HTMLElement | null) => {\n                if (!el) {\n                    listItemNodes.current.splice(index, 1);\n                    return;\n                }\n                listItemNodes.current[index] = el;\n            }}\n            className={classNames(\"spatial-bookmarks-item\")}\n            tabIndex={0}\n            rounded=\"md\"\n            role=\"option\"\n            cursor=\"pointer\"\n            outline={0}\n            _hover={{ background: \"trails.50\" }}\n            focusVisibleRing=\"outside\"\n            onKeyDown={onKeyDown}\n            onClick={onActivate}\n        >\n            <Flex width=\"100%\" flexDirection=\"row\" align=\"center\" gap={1}>\n                <Center>\n                    <PiMapTrifold />\n                </Center>\n                <Text ps={2} maxLines={1}>\n                    {title}\n                </Text>\n                <Spacer />\n                <Tooltip\n                    key={index}\n                    showArrow\n                    content={deleteBtnLabel}\n                    positioning={{\n                        placement: \"right\"\n                    }}\n                >\n                    <IconButton\n                        className=\"spatial-bookmarks-item-delete\"\n                        aria-label={deleteBtnLabel}\n                        borderRadius=\"full\"\n                        padding={0}\n                        colorPalette=\"red\"\n                        variant=\"plain\"\n                        onClick={(event) => {\n                            onDelete();\n                            event.stopPropagation();\n                        }}\n                    >\n                        {<PiTrashSimpleLight />}\n                    </IconButton>\n                </Tooltip>\n            </Flex>\n        </List.Item>\n    );\n}\n\nfunction ListControls(props: {\n    intl: PackageIntl;\n    bookmarks: Bookmark[];\n    showCreate: () => void;\n    showDelete: () => void;\n}): ReactNode {\n    const { intl, bookmarks, showCreate, showDelete } = props;\n\n    return (\n        <ButtonContainer>\n            <DialogIconButton\n                aria-label={intl.formatMessage({ id: \"bookmark.button.deleteAll\" })}\n                disabled={bookmarks.length === 0}\n                colorPalette=\"red\"\n                onClick={showDelete}\n                variant=\"outline\"\n            >\n                <PiTrashSimpleLight />\n            </DialogIconButton>\n            <DialogButton onClick={showCreate}>\n                {intl.formatMessage({ id: \"bookmark.button.create\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction RemoveControls(props: { intl: PackageIntl; onClear: () => void; onCancel: () => void }) {\n    const { intl, onCancel, onClear } = props;\n    return (\n        <ButtonContainer>\n            <DialogButton variant=\"outline\" onClick={onCancel}>\n                {intl.formatMessage({ id: \"bookmark.button.cancelDelete\" })}\n            </DialogButton>\n            <DialogButton onClick={onClear}>\n                {intl.formatMessage({ id: \"bookmark.button.confirmDelete\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction CreateControls(props: {\n    intl: PackageIntl;\n    isInvalid: boolean;\n    onCancel: () => void;\n    onSave: () => void;\n}) {\n    const { intl, onCancel, onSave, isInvalid } = props;\n    return (\n        <ButtonContainer>\n            <DialogButton variant=\"outline\" onClick={() => onCancel()}>\n                {intl.formatMessage({ id: \"bookmark.button.cancel\" })}\n            </DialogButton>\n            <DialogButton disabled={isInvalid} onClick={() => onSave()}>\n                {intl.formatMessage({ id: \"bookmark.button.save\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction ButtonContainer(props: { children: ReactNode }) {\n    return (\n        <Flex width=\"100%\" flexDirection=\"row\" mt={2} gap={2} flexGrow={0} flexShrink={0}>\n            {props.children}\n        </Flex>\n    );\n}\n\nfunction DialogButton(props?: ButtonProps): ReactNode {\n    return <Button flex=\"1 1 auto\" {...props} />;\n}\n\nfunction DialogIconButton(props: IconButtonProps): ReactNode {\n    return <IconButton flex=\"0 0 auto\" px={4} {...props} />;\n}\n\nfunction useViewModel(map: MapModel | undefined, localStorageService: LocalStorageService) {\n    const [viewModel, setViewModel] = useState<SpatialBookmarkViewModel>();\n    useEffect(() => {\n        let viewModel: SpatialBookmarkViewModel | undefined;\n        if (!map) {\n            viewModel = undefined;\n        } else {\n            viewModel = new SpatialBookmarkViewModel(map, localStorageService);\n        }\n\n        setViewModel(viewModel);\n        return () => viewModel?.destroy();\n    }, [map, localStorageService]);\n\n    return viewModel;\n}\n"],"names":["viewModel"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/spatial-bookmarks",
-  "version": "0.10.0",
+  "version": "0.11.0-dev.20250515143825",
   "description": "This package provides a UI component that allows the user to store, manage, and easily navigate between different map extents by creating bookmarks.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,20 +14,20 @@
     "directory": "src/packages/spatial-bookmarks"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.2.4",
-    "@open-pioneer/chakra-integration": "^3.1.0",
-    "@open-pioneer/core": "^3.1.0",
-    "@open-pioneer/local-storage": "^3.1.0",
-    "@open-pioneer/react-utils": "^3.1.0",
-    "@open-pioneer/runtime": "^3.1.0",
+    "@chakra-ui/react": "^3.17.0",
+    "@open-pioneer/chakra-snippets": "4.0.0-dev.20250512105016",
+    "@open-pioneer/core": "4.0.0-dev.20250512105016",
+    "@open-pioneer/local-storage": "4.0.0-dev.20250512105016",
+    "@open-pioneer/react-utils": "4.0.0-dev.20250512105016",
+    "@open-pioneer/runtime": "4.0.0-dev.20250512105016",
     "classnames": "^2.3.2",
     "ol": "^10.5.0",
     "react": "^19.1.0",
     "react-icons": "^5.3.0",
-    "@conterra/reactivity-core": "^0.5.0",
-    "@open-pioneer/reactivity": "^3.1.0",
+    "@conterra/reactivity-core": "^0.6.0",
+    "@open-pioneer/reactivity": "4.0.0-dev.20250512105016",
     "uuid": "^11.1.0",
-    "@open-pioneer/map": "^0.10.0"
+    "@open-pioneer/map": "0.11.0-dev.20250515143825"
   },
   "exports": {
     "./package.json": "./package.json",