@equinor/fusion-framework-react-components-bookmark 1.0.8 → 1.0.10

package/dist/types/components/BookmarkProvider.d.ts

@@ -1,6 +1,6 @@
 import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
 import { type PropsWithChildren } from 'react';
-import { type IBookmarkProvider } from '@equinor/fusion-framework-module-bookmark';
+import type { IBookmarkProvider } from '@equinor/fusion-framework-module-bookmark';
 type BookmarkApp = {
     appKey: string;
     name?: string;

package/dist/types/components/filter/Filter.d.ts

@@ -1,4 +1,4 @@
-import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
+import type { GroupingKeys } from '../../hooks/useBookmarkGrouping';
 type BookmarkFilterProps = {
     readonly searchText: string;
     readonly setSearchText: (newVal: string | null) => void;

package/dist/types/components/messages/Message.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type PortalMessageType = 'Error' | 'Info' | 'Warning' | 'NoContent';
 type MessageProps = {
     readonly title: string;

package/dist/types/components/row/MoreMenu.d.ts

@@ -1,5 +1,5 @@
-import { MutableRefObject } from 'react';
-import { MenuOption } from './Row';
+import type { MutableRefObject } from 'react';
+import type { MenuOption } from './Row';
 type MenuProps = {
     readonly pRef: MutableRefObject<HTMLElement | null>;
     readonly onClose: VoidFunction;

package/dist/types/components/row/Row.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type MenuOption = {
     name: string;
     disabled: boolean;

package/dist/types/components/section/Section.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 type SectionProps = {
     readonly name: string;
     readonly children: ReactNode;

package/dist/types/components/sectionList/SectionList.d.ts

@@ -1,4 +1,4 @@
-import { useBookmarkGrouping } from '../../hooks';
+import type { useBookmarkGrouping } from '../../hooks';
 type SectionListProps = {
     readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
 };

package/dist/types/hooks/useBookmarkGrouping.d.ts

@@ -1,4 +1,4 @@
-import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
+import type { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
 export declare const useBookmarkGrouping: (bookmarks?: Bookmarks) => {
     setGroupBy: import("react").Dispatch<import("react").SetStateAction<GroupingKeys>>;

package/dist/types/utils/utils.d.ts

@@ -1,4 +1,4 @@
-import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
+import type { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 /** Helpers.. */
 export declare const filterEmptyGroups: (i: {
     values: Bookmarks;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.0.8";
+export declare const version = "1.0.10";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-components-bookmark",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@equinor/fusion-framework-react": "^7.4.0",
-    "@equinor/fusion-observable": "^8.4.4",
-    "@equinor/fusion-framework-react-module-bookmark": "^3.0.0"
+    "@equinor/fusion-framework-react": "^7.4.2",
+    "@equinor/fusion-framework-react-module-bookmark": "^3.0.2",
+    "@equinor/fusion-observable": "^8.4.5"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^0.43.0",
@@ -35,10 +35,10 @@
     "@types/react": "^18.2.50",
     "react": "^18.2.0",
     "styled-components": "^6.0.7",
-    "typescript": "^5.5.4",
-    "@equinor/fusion-framework-module-bookmark": "^2.1.1",
-    "@equinor/fusion-framework-module-app": "^6.1.4",
-    "@equinor/fusion-framework-module-event": "^4.3.0"
+    "typescript": "^5.7.3",
+    "@equinor/fusion-framework-module-app": "^6.1.5",
+    "@equinor/fusion-framework-module-event": "^4.3.1",
+    "@equinor/fusion-framework-module-bookmark": "^2.1.2"
   },
   "peerDependencies": {
     "@equinor/eds-core-react": "^0.37.0",

package/src/components/Bookmark.tsx

@@ -14,26 +14,26 @@ import { useBookmarkComponentContext } from './BookmarkProvider';
 import { useObservableState } from '@equinor/fusion-observable/react';
 
 Icon.add({
-    chevron_down,
-    chevron_right,
-    share,
-    more_vertical,
-    add,
+  chevron_down,
+  chevron_right,
+  share,
+  more_vertical,
+  add,
 });
 
 const Styled = {
-    Wrapper: styled.div`
+  Wrapper: styled.div`
         padding-right: 1rem;
         display: flex;
         flex-direction: column;
         gap: 1rem;
     `,
-    List: styled.div`
+  List: styled.div`
         overflow-y: auto;
         overflow-x: hidden;
         height: calc((100vh - 85px) - 3rem);
     `,
-    NoContentWrapper: styled.div`
+  NoContentWrapper: styled.div`
         position: absolute;
         top: 150px;
         bottom: 200px;
@@ -43,50 +43,49 @@ const Styled = {
 };
 
 export const Bookmark = () => {
-    const { provider } = useBookmarkComponentContext();
+  const { provider } = useBookmarkComponentContext();
 
-    const { value: bookmarks } = useObservableState(
-        useMemo(() => provider?.bookmarks$ || EMPTY, [provider]),
-    );
+  const { value: bookmarks } = useObservableState(
+    useMemo(() => provider?.bookmarks$ || EMPTY, [provider]),
+  );
 
-    const { value: isLoading } = useObservableState(
-        useMemo(
-            () =>
-                (provider?.status$ || EMPTY).pipe(map((status) => !!status.has('fetch_bookmarks'))),
-            [provider],
-        ),
-        { initial: true },
-    );
+  const { value: isLoading } = useObservableState(
+    useMemo(
+      () => (provider?.status$ || EMPTY).pipe(map((status) => !!status.has('fetch_bookmarks'))),
+      [provider],
+    ),
+    { initial: true },
+  );
 
-    const { bookmarkGroups, groupingModes, searchText, setGroupBy, setSearchText, groupByKey } =
-        useBookmarkGrouping(bookmarks);
+  const { bookmarkGroups, groupingModes, searchText, setGroupBy, setSearchText, groupByKey } =
+    useBookmarkGrouping(bookmarks);
 
-    const content = useMemo(() => {
-        if (isLoading) {
-            return <Loading />;
-        }
-        if (bookmarkGroups.length === 0) {
-            return (
-                <Message title="No Bookmarks" type="NoContent">
-                    You have not created any bookmarks yet.
-                </Message>
-            );
-        }
-        return <SectionList bookmarkGroups={bookmarkGroups} />;
-    }, [isLoading, bookmarkGroups]);
+  const content = useMemo(() => {
+    if (isLoading) {
+      return <Loading />;
+    }
+    if (bookmarkGroups.length === 0) {
+      return (
+        <Message title="No Bookmarks" type="NoContent">
+          You have not created any bookmarks yet.
+        </Message>
+      );
+    }
+    return <SectionList bookmarkGroups={bookmarkGroups} />;
+  }, [isLoading, bookmarkGroups]);
 
-    return (
-        <Styled.Wrapper>
-            <BookmarkFilter
-                groupBy={groupByKey}
-                groupingModes={Object.keys(groupingModes)}
-                searchText={searchText ?? ''}
-                setGroupBy={setGroupBy}
-                setSearchText={setSearchText}
-            />
-            <Styled.List>{content}</Styled.List>
-        </Styled.Wrapper>
-    );
+  return (
+    <Styled.Wrapper>
+      <BookmarkFilter
+        groupBy={groupByKey}
+        groupingModes={Object.keys(groupingModes)}
+        searchText={searchText ?? ''}
+        setGroupBy={setGroupBy}
+        setSearchText={setSearchText}
+      />
+      <Styled.List>{content}</Styled.List>
+    </Styled.Wrapper>
+  );
 };
 
 export default Bookmark;

package/src/components/BookmarkProvider.tsx

@@ -4,110 +4,110 @@ import { type PropsWithChildren, createContext, useCallback, useContext, useStat
 import { CreateBookmarkModal } from './create-bookmark';
 import { EditBookmarkModal } from './edit-bookmark';
 import { ImportBookmarkModal } from './import-bookmark';
-import { type IBookmarkProvider } from '@equinor/fusion-framework-module-bookmark';
+import type { IBookmarkProvider } from '@equinor/fusion-framework-module-bookmark';
 
 type BookmarkApp = {
-    appKey: string;
-    name?: string;
+  appKey: string;
+  name?: string;
 };
 
 type BookmarkUser = {
-    id: string;
-    name?: string;
+  id: string;
+  name?: string;
 };
 
 type ProviderState = {
-    provider?: IBookmarkProvider;
-    currentApp?: BookmarkApp | null;
-    currentUser?: BookmarkUser | null;
-    showCreateBookmark: () => void;
-    showEditBookmark: (bookmarkId: string) => void;
-    addBookmarkToClipboard: (bookmarkId: string) => void;
+  provider?: IBookmarkProvider;
+  currentApp?: BookmarkApp | null;
+  currentUser?: BookmarkUser | null;
+  showCreateBookmark: () => void;
+  showEditBookmark: (bookmarkId: string) => void;
+  addBookmarkToClipboard: (bookmarkId: string) => void;
 };
 
 const bookmarkProviderContext = createContext<ProviderState | null>(null);
 
 type BookmarkProviderProps = {
-    readonly provider?: IBookmarkProvider;
-    readonly currentApp?: BookmarkApp;
-    readonly currentUser?: BookmarkUser;
+  readonly provider?: IBookmarkProvider;
+  readonly currentApp?: BookmarkApp;
+  readonly currentUser?: BookmarkUser;
 };
 
 export const useBookmarkComponentContext = () =>
-    useContext(bookmarkProviderContext) as ProviderState;
+  useContext(bookmarkProviderContext) as ProviderState;
 
 export const BookmarkProvider = (props: PropsWithChildren<BookmarkProviderProps>) => {
-    const { provider, currentApp, currentUser, children } = props;
+  const { provider, currentApp, currentUser, children } = props;
 
-    const [isCreateBookmarkOpen, setIsCreateBookmarkOpen] = useState(false);
-    const [editBookmarkId, setEditBookmarkId] = useState<string | undefined>();
+  const [isCreateBookmarkOpen, setIsCreateBookmarkOpen] = useState(false);
+  const [editBookmarkId, setEditBookmarkId] = useState<string | undefined>();
 
-    const showCreateBookmark = useCallback(() => {
-        setIsCreateBookmarkOpen(true);
-    }, []);
+  const showCreateBookmark = useCallback(() => {
+    setIsCreateBookmarkOpen(true);
+  }, []);
 
-    const [snackbarContent, setSnackbarContent] = useState('');
+  const [snackbarContent, setSnackbarContent] = useState('');
 
-    const addBookmarkToClipboard = useCallback((bookmarkId: string) => {
-        const url = new URL(window.location.toString());
-        url.searchParams.set('bookmarkId', bookmarkId);
-        navigator.clipboard.writeText(String(url));
-        setSnackbarContent('Bookmark url copied to clipboard');
-    }, []);
-
-    if (!provider) {
-        return (
-            <bookmarkProviderContext.Provider
-                value={{
-                    provider: undefined,
-                    currentApp,
-                    currentUser,
-                    showCreateBookmark,
-                    showEditBookmark: setEditBookmarkId,
-                    addBookmarkToClipboard,
-                }}
-            >
-                {children}
-            </bookmarkProviderContext.Provider>
-        );
-    }
+  const addBookmarkToClipboard = useCallback((bookmarkId: string) => {
+    const url = new URL(window.location.toString());
+    url.searchParams.set('bookmarkId', bookmarkId);
+    navigator.clipboard.writeText(String(url));
+    setSnackbarContent('Bookmark url copied to clipboard');
+  }, []);
 
+  if (!provider) {
     return (
-        <bookmarkProviderContext.Provider
-            value={{
-                provider,
-                currentApp,
-                currentUser,
-                showCreateBookmark,
-                showEditBookmark: setEditBookmarkId,
-                addBookmarkToClipboard,
-            }}
-        >
-            <CreateBookmarkModal isOpen={isCreateBookmarkOpen} onClose={setIsCreateBookmarkOpen} />
-            {editBookmarkId && (
-                <EditBookmarkModal
-                    isOpen={!!editBookmarkId}
-                    onClose={() => setEditBookmarkId(undefined)}
-                    bookmarkId={editBookmarkId}
-                />
-            )}
-            <ImportBookmarkModal />
-            <Snackbar
-                autoHideDuration={2000}
-                onClose={() => setSnackbarContent('')}
-                open={!!snackbarContent}
-            >
-                {snackbarContent}
-            </Snackbar>
-            {children}
-        </bookmarkProviderContext.Provider>
+      <bookmarkProviderContext.Provider
+        value={{
+          provider: undefined,
+          currentApp,
+          currentUser,
+          showCreateBookmark,
+          showEditBookmark: setEditBookmarkId,
+          addBookmarkToClipboard,
+        }}
+      >
+        {children}
+      </bookmarkProviderContext.Provider>
     );
+  }
+
+  return (
+    <bookmarkProviderContext.Provider
+      value={{
+        provider,
+        currentApp,
+        currentUser,
+        showCreateBookmark,
+        showEditBookmark: setEditBookmarkId,
+        addBookmarkToClipboard,
+      }}
+    >
+      <CreateBookmarkModal isOpen={isCreateBookmarkOpen} onClose={setIsCreateBookmarkOpen} />
+      {editBookmarkId && (
+        <EditBookmarkModal
+          isOpen={!!editBookmarkId}
+          onClose={() => setEditBookmarkId(undefined)}
+          bookmarkId={editBookmarkId}
+        />
+      )}
+      <ImportBookmarkModal />
+      <Snackbar
+        autoHideDuration={2000}
+        onClose={() => setSnackbarContent('')}
+        open={!!snackbarContent}
+      >
+        {snackbarContent}
+      </Snackbar>
+      {children}
+    </bookmarkProviderContext.Provider>
+  );
 };
 
 declare module '@equinor/fusion-framework-module-event' {
-    interface FrameworkEventMap {
-        // onBookmarkOpen: FrameworkEvent<FrameworkEventInit<boolean, unknown>>;
-        onBookmarkEdit: FrameworkEvent<FrameworkEventInit<{ bookmarkId: string }, unknown>>;
-        onBookmarkUrlCopy: FrameworkEvent<FrameworkEventInit<{ url: string }, unknown>>;
-    }
+  interface FrameworkEventMap {
+    // onBookmarkOpen: FrameworkEvent<FrameworkEventInit<boolean, unknown>>;
+    onBookmarkEdit: FrameworkEvent<FrameworkEventInit<{ bookmarkId: string }, unknown>>;
+    onBookmarkUrlCopy: FrameworkEvent<FrameworkEventInit<{ url: string }, unknown>>;
+  }
 }

package/src/components/create-bookmark/CreateBookmark.tsx

@@ -1,6 +1,6 @@
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 
-import { BookmarkCreateArgs } from '@equinor/fusion-framework-module-bookmark';
+import type { BookmarkCreateArgs } from '@equinor/fusion-framework-module-bookmark';
 import { useBookmarkComponentContext } from '../BookmarkProvider';
 
 import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
@@ -15,106 +15,106 @@ const StyledContent = styled(Dialog.Content)`
 `;
 
 export const CreateBookmarkModal = ({
-    isOpen,
-    onClose,
+  isOpen,
+  onClose,
 }: {
-    readonly isOpen: boolean;
-    readonly onClose: (b: boolean) => void;
+  readonly isOpen: boolean;
+  readonly onClose: (b: boolean) => void;
 }) => {
-    const { provider, currentApp } = useBookmarkComponentContext();
+  const { provider, currentApp } = useBookmarkComponentContext();
 
-    const [state, setState] = useState<BookmarkCreateArgs<never>>({
-        name: '',
-        description: '',
-        isShared: false,
-    });
+  const [state, setState] = useState<BookmarkCreateArgs<never>>({
+    name: '',
+    description: '',
+    isShared: false,
+  });
 
-    useEffect(() => {
-        setState((s) => ({ ...s, appKey: currentApp?.appKey || '' }));
-    }, [currentApp]);
+  useEffect(() => {
+    setState((s) => ({ ...s, appKey: currentApp?.appKey || '' }));
+  }, [currentApp]);
 
-    const createBookmark = useCallback(
-        async (args: BookmarkCreateArgs<never>) => {
-            if (!provider) {
-                console.error('Provider not available');
-                return;
-            }
-            // TODO: Show success message
-            // TODO: should this call onCreated, with the new bookmark?
-            // TODO: should current bookmark be updated?
-            const sub = from(provider.createBookmark(args)).subscribe({
-                next: (bookmark) => {
-                    console.debug('Bookmark created', bookmark);
-                },
-                error: (error) => {
-                    console.error('Failed to create bookmark', error);
-                },
-                complete() {
-                    onClose(false);
-                },
-            });
-            return () => sub.unsubscribe();
+  const createBookmark = useCallback(
+    async (args: BookmarkCreateArgs<never>) => {
+      if (!provider) {
+        console.error('Provider not available');
+        return;
+      }
+      // TODO: Show success message
+      // TODO: should this call onCreated, with the new bookmark?
+      // TODO: should current bookmark be updated?
+      const sub = from(provider.createBookmark(args)).subscribe({
+        next: (bookmark) => {
+          console.debug('Bookmark created', bookmark);
         },
-        [onClose, provider],
-    );
+        error: (error) => {
+          console.error('Failed to create bookmark', error);
+        },
+        complete() {
+          onClose(false);
+        },
+      });
+      return () => sub.unsubscribe();
+    },
+    [onClose, provider],
+  );
 
-    return (
-        <Dialog style={{ width: '400px' }} open={isOpen}>
-            <Dialog.Header>Create bookmark</Dialog.Header>
-            <StyledContent>
-                <div>
-                    <Label htmlFor="name" label="Name" />
-                    <Input
-                        id="name"
-                        autoComplete="off"
-                        value={state?.name}
-                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                            setState((s) => ({ ...s, name: event.target.value }));
-                        }}
-                    />
-                </div>
-                <div>
-                    <TextField
-                        id="storybook-multiline-three"
-                        label="Description"
-                        multiline
-                        rows={3}
-                        rowsMax={10}
-                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                            setState((s) => ({ ...s, description: event.target.value }));
-                        }}
-                    />
-                </div>
-                <div>
-                    <Label htmlFor="app" label="App" />
-                    <Input readOnly={true} value={currentApp?.name || currentApp?.appKey || ''} />
-                </div>
+  return (
+    <Dialog style={{ width: '400px' }} open={isOpen}>
+      <Dialog.Header>Create bookmark</Dialog.Header>
+      <StyledContent>
+        <div>
+          <Label htmlFor="name" label="Name" />
+          <Input
+            id="name"
+            autoComplete="off"
+            value={state?.name}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setState((s) => ({ ...s, name: event.target.value }));
+            }}
+          />
+        </div>
+        <div>
+          <TextField
+            id="storybook-multiline-three"
+            label="Description"
+            multiline
+            rows={3}
+            rowsMax={10}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setState((s) => ({ ...s, description: event.target.value }));
+            }}
+          />
+        </div>
+        <div>
+          <Label htmlFor="app" label="App" />
+          <Input readOnly={true} value={currentApp?.name || currentApp?.appKey || ''} />
+        </div>
 
-                <div>
-                    <Checkbox
-                        label="Is Shared"
-                        checked={state.isShared}
-                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                            setState((s) => ({ ...s, isShared: event.target.checked }));
-                        }}
-                    />
-                </div>
-            </StyledContent>
-            <Dialog.Actions>
-                <div style={{ display: 'flex', gap: '0.2em' }}>
-                    <Button onClick={() => onClose(false)} variant="ghost">
-                        Cancel
-                    </Button>
-                    <Button
-                        disabled={!currentApp || !state.name}
-                        onClick={() => {
-                            createBookmark(state);
-                        }}
-                    >
-                        Create
-                    </Button>
-                </div>
-            </Dialog.Actions>
-        </Dialog>
-    );
+        <div>
+          <Checkbox
+            label="Is Shared"
+            checked={state.isShared}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setState((s) => ({ ...s, isShared: event.target.checked }));
+            }}
+          />
+        </div>
+      </StyledContent>
+      <Dialog.Actions>
+        <div style={{ display: 'flex', gap: '0.2em' }}>
+          <Button onClick={() => onClose(false)} variant="ghost">
+            Cancel
+          </Button>
+          <Button
+            disabled={!currentApp || !state.name}
+            onClick={() => {
+              createBookmark(state);
+            }}
+          >
+            Create
+          </Button>
+        </div>
+      </Dialog.Actions>
+    </Dialog>
+  );
 };