@equinor/fusion-framework-react-components-bookmark 2.0.1 → 2.0.3

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

@@ -1,2 +1,7 @@
-export declare const Bookmark: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the list of bookmark sections and the current bookmark's loading/message state.
+ *
+ * @returns The bookmark list UI
+ */
+export declare const Bookmark: () => import("react").JSX.Element;
 export default Bookmark;

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

@@ -22,8 +22,23 @@ type BookmarkProviderProps = {
     readonly currentApp?: BookmarkApp;
     readonly currentUser?: BookmarkUser;
 };
+/**
+ * Hook for accessing the bookmark component context provided by `BookmarkProvider`.
+ *
+ * @returns The current bookmark provider state
+ */
 export declare const useBookmarkComponentContext: () => ProviderState;
-export declare const BookmarkProvider: (props: PropsWithChildren<BookmarkProviderProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Provides bookmark state and modals (create/edit/import) to descendant bookmark components.
+ *
+ * @param props - The provider's props
+ * @param props.provider - The bookmark provider used to fetch/manage bookmarks
+ * @param props.currentApp - The app the bookmarks belong to
+ * @param props.currentUser - The current user, used to determine bookmark ownership
+ * @param props.children - The descendant components that can access the bookmark context
+ * @returns The provider with its context and modals
+ */
+export declare const BookmarkProvider: (props: PropsWithChildren<BookmarkProviderProps>) => import("react").JSX.Element;
 declare module '@equinor/fusion-framework-module-event' {
     interface FrameworkEventMap {
         onBookmarkEdit: FrameworkEvent<FrameworkEventInit<{

package/dist/types/components/create-bookmark/CreateBookmarkModal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Modal for creating a new bookmark.
+ *
+ * @param props - The component's props
+ * @param props.isOpen - Whether the modal is open
+ * @param props.onClose - Callback invoked to close the modal
+ * @returns The create bookmark modal
+ */
+export declare const CreateBookmarkModal: ({ isOpen, onClose, }: {
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+}) => import("react").JSX.Element;

package/dist/types/components/create-bookmark/index.d.ts

@@ -1 +1 @@
-export { CreateBookmarkModal } from './CreateBookmark';
+export { CreateBookmarkModal } from './CreateBookmarkModal';

package/dist/types/components/edit-bookmark/AppNameField.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Renders the bookmark's app name while making manifest resolution visible.
+ *
+ * @param props - The resolved display name and whether the manifest request is pending.
+ * @returns A read-only app name field with an accessible loading indicator when needed.
+ */
+export declare const AppNameField: ({ id, displayName, isLoading, }: {
+    readonly id: string;
+    readonly displayName?: string;
+    readonly isLoading: boolean;
+}) => import("react").JSX.Element;

package/dist/types/components/edit-bookmark/EditBookmarkModal.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Modal for editing an existing bookmark.
+ *
+ * @param props - The component's props
+ * @param props.isOpen - Whether the modal is open
+ * @param props.onClose - Callback invoked to close the modal
+ * @param props.bookmarkId - The id of the bookmark to edit
+ * @returns The edit bookmark modal
+ */
+export declare const EditBookmarkModal: ({ isOpen, onClose, bookmarkId, }: {
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+    readonly bookmarkId: string;
+}) => import("react").JSX.Element;

package/dist/types/components/edit-bookmark/index.d.ts

@@ -1 +1 @@
-export * from './EditBookmark';
+export * from './EditBookmarkModal';

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

@@ -0,0 +1,16 @@
+import type { GroupingKeys } from '../../hooks/useBookmarkGrouping';
+type BookmarkFilterProps = {
+    readonly searchText: string;
+    readonly setSearchText: (newVal: string | null) => void;
+    readonly setGroupBy: (groupBy: GroupingKeys) => void;
+    readonly groupingModes: string[];
+    readonly groupBy: string;
+};
+/**
+ * Search and grouping filter controls for the bookmark list.
+ *
+ * @param props - The component's props
+ * @returns The filter controls
+ */
+export declare const BookmarkFilter: ({ searchText, setGroupBy: _setGroupBy, setSearchText, groupingModes: _groupingModes, groupBy: _groupBy, }: BookmarkFilterProps) => import("react").JSX.Element;
+export {};

package/dist/types/components/import-bookmark/ImportBookmarkModal.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Modal that prompts the user to import a bookmark shared via a `bookmarkId` URL parameter.
+ *
+ * @returns The import bookmark modal
+ */
+export declare const ImportBookmarkModal: () => import("react").JSX.Element | null;

package/dist/types/components/import-bookmark/index.d.ts

@@ -1 +1 @@
-export * from './ImportBookmark';
+export * from './ImportBookmarkModal';

package/dist/types/components/loading/Loading.d.ts

@@ -1 +1,6 @@
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * A centered loading spinner.
+ *
+ * @returns The loading indicator
+ */
+export declare const Loading: () => import("react").JSX.Element;

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

@@ -6,5 +6,11 @@ type MessageProps = {
     readonly type?: PortalMessageType;
     readonly color?: string;
 };
-export declare const Message: ({ title, type, color, children, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Displays a titled message with an icon matching its type.
+ *
+ * @param props - The component's props
+ * @returns The message
+ */
+export declare const Message: ({ title, type, color, children, }: PropsWithChildren<MessageProps>) => import("react").JSX.Element;
 export {};

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

@@ -6,5 +6,11 @@ type MenuProps = {
     readonly open: boolean;
     readonly options: MenuOption[];
 };
-export declare const MoreMenu: ({ pRef, onClose, open, options }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A dropdown menu of row actions anchored to a reference element.
+ *
+ * @param props - The component's props
+ * @returns The menu
+ */
+export declare const MoreMenu: ({ pRef, onClose, open, options }: MenuProps) => import("react").JSX.Element;
 export {};

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

@@ -13,5 +13,11 @@ type RowProps = {
     readonly menuOptions: MenuOption[];
     readonly children?: ReactNode;
 };
-export declare const Row: ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A single bookmark row, with actions and click-to-set-current behavior.
+ *
+ * @param props - The component's props
+ * @returns The row
+ */
+export declare const Row: ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => import("react").JSX.Element;
 export {};

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

@@ -3,5 +3,11 @@ type SectionProps = {
     readonly name: string;
     readonly children: ReactNode;
 };
-export declare const Section: ({ children, name }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A collapsible section with a named header and its contents.
+ *
+ * @param props - The component's props
+ * @returns The section
+ */
+export declare const Section: ({ children, name }: SectionProps) => import("react").JSX.Element;
 export {};

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

@@ -2,5 +2,11 @@ import type { useBookmarkGrouping } from '../../hooks';
 type SectionListProps = {
     readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
 };
-export declare const SectionList: ({ bookmarkGroups }: SectionListProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders bookmark groups as sections of rows with edit/share/delete actions.
+ *
+ * @param props - The component's props
+ * @returns The section list
+ */
+export declare const SectionList: ({ bookmarkGroups }: SectionListProps) => import("react").JSX.Element;
 export {};

package/dist/types/components/shared/SharedIcon.d.ts

@@ -2,5 +2,11 @@ type SharedIconProps = {
     readonly createdBy: string;
     readonly createdById: string;
 };
-export declare const SharedIcon: ({ createdBy, createdById }: SharedIconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Displays a "shared by" indicator when a bookmark was created by another user.
+ *
+ * @param props - The component's props
+ * @returns The shared icon, or nothing when the current user created the bookmark
+ */
+export declare const SharedIcon: ({ createdBy, createdById }: SharedIconProps) => import("react").JSX.Element;
 export {};

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

@@ -1,5 +1,11 @@
 import type { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
+/**
+ * Hook for grouping and searching bookmarks by app, creator, or context.
+ *
+ * @param bookmarks - The bookmarks to group and search
+ * @returns The grouped bookmarks along with the search text and grouping key state/setters
+ */
 export declare const useBookmarkGrouping: (bookmarks?: Bookmarks) => {
     setGroupBy: import("react").Dispatch<import("react").SetStateAction<GroupingKeys>>;
     setSearchText: import("react").Dispatch<import("react").SetStateAction<string | null>>;

package/dist/types/index.d.ts

@@ -1,2 +1,12 @@
+/**
+ * Pre-built React UI components for bookmark management.
+ *
+ * Provides the {@link Bookmark} list component and {@link BookmarkProvider}
+ * context wrapper with built-in create, edit, and import modals plus filtering controls.
+ *
+ * For bookmark hooks without UI, see `@equinor/fusion-framework-react-app/bookmark`.
+ *
+ * @packageDocumentation
+ */
 export { Bookmark } from './components/Bookmark';
 export { BookmarkProvider, useBookmarkComponentContext } from './components/BookmarkProvider';

package/dist/types/utils/filter-empty-groups.d.ts

@@ -0,0 +1,5 @@
+import type { Bookmarks } from '@equinor/fusion-framework-module-bookmark';
+/** Helpers.. */
+export declare const filterEmptyGroups: (i: {
+    values: Bookmarks;
+}) => number;

package/dist/types/utils/sort-by-name.d.ts

@@ -0,0 +1,2 @@
+import type { BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
+export declare const sortByName: (a: BookmarkWithoutData, b: BookmarkWithoutData) => number;

package/dist/types/utils/to-human-readable.d.ts

@@ -0,0 +1 @@
+export declare const toHumanReadable: (val: string) => string;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.0.1";
+export declare const version = "2.0.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-components-bookmark",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@equinor/fusion-observable": "^9.0.1",
-    "@equinor/fusion-framework-react": "^8.0.0",
-    "@equinor/fusion-framework-react-module-bookmark": "^6.0.0"
+    "@equinor/fusion-framework-react": "^8.0.1",
+    "@equinor/fusion-framework-react-module-bookmark": "^6.0.1",
+    "@equinor/fusion-observable": "^9.1.1"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^2.3.7",
@@ -35,10 +35,11 @@
     "@types/react": "^19.2.7",
     "react": "^19.2.1",
     "styled-components": "^6.3.11",
-    "typescript": "^5.9.3",
-    "@equinor/fusion-framework-module-bookmark": "^4.0.1",
-    "@equinor/fusion-framework-module-event": "^6.0.0",
-    "@equinor/fusion-framework-module-app": "^8.0.1"
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.0",
+    "@equinor/fusion-framework-module-app": "^8.0.3",
+    "@equinor/fusion-framework-module-event": "^6.0.1",
+    "@equinor/fusion-framework-module-bookmark": "^4.0.3"
   },
   "peerDependencies": {
     "@equinor/eds-core-react": "^2.0.0",
@@ -55,6 +56,7 @@
     }
   },
   "scripts": {
-    "build": "tsc -b"
+    "build": "tsc -b",
+    "test": "vitest --run"
   }
 }

package/src/__tests__/AppNameField.test.tsx

@@ -0,0 +1,39 @@
+import { isValidElement } from 'react';
+import { Input, Progress } from '@equinor/eds-core-react';
+import { describe, expect, it } from 'vitest';
+import { AppNameField } from '../components/edit-bookmark/AppNameField';
+
+describe('AppNameField', () => {
+  it('shows an accessible progress indicator while the manifest is loading', () => {
+    const field = AppNameField({ id: 'app', isLoading: true });
+    const loadingIndicator = field.props.rightAdornments;
+
+    expect(field.type).toBe(Input);
+    expect(field.props.id).toBe('app');
+    expect(field.props['aria-busy']).toBe(true);
+    expect(isValidElement(loadingIndicator)).toBe(true);
+
+    // Guard the element shape before inspecting progress-specific props.
+    if (!isValidElement(loadingIndicator)) {
+      throw new Error('Expected a valid loading indicator');
+    }
+
+    expect(loadingIndicator.type).toBe(Progress.Circular);
+    expect(loadingIndicator.props).toMatchObject({
+      'aria-label': 'Loading app name',
+      size: 16,
+    });
+  });
+
+  it('shows the resolved display name without a progress indicator', () => {
+    const field = AppNameField({
+      id: 'app',
+      displayName: 'My app',
+      isLoading: false,
+    });
+
+    expect(field.props.value).toBe('My app');
+    expect(field.props['aria-busy']).toBe(false);
+    expect(field.props.rightAdornments).toBeUndefined();
+  });
+});

package/src/components/Bookmark.tsx

@@ -1,6 +1,6 @@
 import { EMPTY, map } from 'rxjs';
 import { useBookmarkGrouping } from '../hooks';
-import { BookmarkFilter } from './filter/Filter';
+import { BookmarkFilter } from './filter/BookmarkFilter';
 import { SectionList } from './sectionList/SectionList';
 import { useMemo } from 'react';
 
@@ -42,6 +42,11 @@ const Styled = {
     `,
 };
 
+/**
+ * Renders the list of bookmark sections and the current bookmark's loading/message state.
+ *
+ * @returns The bookmark list UI
+ */
 export const Bookmark = () => {
   const { provider } = useBookmarkComponentContext();
 
@@ -50,10 +55,10 @@ export const Bookmark = () => {
   );
 
   const { value: isLoading } = useObservableState(
-    useMemo(
-      () => (provider?.status$ || EMPTY).pipe(map((status) => !!status.has('fetch_bookmarks'))),
-      [provider],
-    ),
+    useMemo(() => {
+      // Derive a boolean loading flag from whether 'fetch_bookmarks' is an active status
+      return (provider?.status$ || EMPTY).pipe(map((status) => !!status.has('fetch_bookmarks')));
+    }, [provider]),
     { initial: true },
   );
 
@@ -61,9 +66,11 @@ export const Bookmark = () => {
     useBookmarkGrouping(bookmarks);
 
   const content = useMemo(() => {
+    // Show the loading placeholder while bookmarks are still being fetched
     if (isLoading) {
       return <Loading />;
     }
+    // Show an empty-state message when there are no bookmark groups to display
     if (bookmarkGroups.length === 0) {
       return (
         <Message title="No Bookmarks" type="NoContent">

package/src/components/BookmarkProvider.tsx

@@ -33,9 +33,24 @@ type BookmarkProviderProps = {
   readonly currentUser?: BookmarkUser;
 };
 
+/**
+ * Hook for accessing the bookmark component context provided by `BookmarkProvider`.
+ *
+ * @returns The current bookmark provider state
+ */
 export const useBookmarkComponentContext = () =>
   useContext(bookmarkProviderContext) as ProviderState;
 
+/**
+ * Provides bookmark state and modals (create/edit/import) to descendant bookmark components.
+ *
+ * @param props - The provider's props
+ * @param props.provider - The bookmark provider used to fetch/manage bookmarks
+ * @param props.currentApp - The app the bookmarks belong to
+ * @param props.currentUser - The current user, used to determine bookmark ownership
+ * @param props.children - The descendant components that can access the bookmark context
+ * @returns The provider with its context and modals
+ */
 export const BookmarkProvider = (props: PropsWithChildren<BookmarkProviderProps>) => {
   const { provider, currentApp, currentUser, children } = props;
 
@@ -55,6 +70,7 @@ export const BookmarkProvider = (props: PropsWithChildren<BookmarkProviderProps>
     setSnackbarContent('Bookmark url copied to clipboard');
   }, []);
 
+  // Render children without a live provider context when no provider is configured
   if (!provider) {
     return (
       <bookmarkProviderContext.Provider

package/src/components/create-bookmark/{CreateBookmark.tsx → CreateBookmarkModal.tsx}

@@ -7,13 +7,20 @@ import { Button, Checkbox, Dialog, Input, Label, Textarea } from '@equinor/eds-c
 import styled from 'styled-components';
 import { from } from 'rxjs';
 
-// TODO
 const StyledContent = styled(Dialog.Content)`
     display: flex;
     flex-direction: column;
     gap: 1rem;
 `;
 
+/**
+ * Modal for creating a new bookmark.
+ *
+ * @param props - The component's props
+ * @param props.isOpen - Whether the modal is open
+ * @param props.onClose - Callback invoked to close the modal
+ * @returns The create bookmark modal
+ */
 export const CreateBookmarkModal = ({
   isOpen,
   onClose,
@@ -38,13 +45,14 @@ export const CreateBookmarkModal = ({
 
   const createBookmark = useCallback(
     async (args: BookmarkCreateArgs<never>) => {
+      // Cannot create a bookmark without a provider to persist it
       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?
+      // TODO(#5089): Show success message
+      // TODO(#5090): should this call onCreated, with the new bookmark?
+      // TODO(#5090): should current bookmark be updated?
       const sub = from(provider.createBookmark(args)).subscribe({
         next: (bookmark) => {
           console.debug('Bookmark created', bookmark);

package/src/components/create-bookmark/index.ts

@@ -1 +1 @@
-export { CreateBookmarkModal } from './CreateBookmark';
+export { CreateBookmarkModal } from './CreateBookmarkModal';

package/src/components/edit-bookmark/AppNameField.tsx

@@ -0,0 +1,27 @@
+import { Input, Progress } from '@equinor/eds-core-react';
+
+/**
+ * Renders the bookmark's app name while making manifest resolution visible.
+ *
+ * @param props - The resolved display name and whether the manifest request is pending.
+ * @returns A read-only app name field with an accessible loading indicator when needed.
+ */
+export const AppNameField = ({
+  id,
+  displayName,
+  isLoading,
+}: {
+  readonly id: string;
+  readonly displayName?: string;
+  readonly isLoading: boolean;
+}) => (
+  <Input
+    id={id}
+    readOnly={true}
+    value={displayName ?? ''}
+    aria-busy={isLoading}
+    rightAdornments={
+      isLoading ? <Progress.Circular aria-label="Loading app name" size={16} /> : undefined
+    }
+  />
+);

package/src/components/edit-bookmark/{EditBookmark.tsx → EditBookmarkModal.tsx}

@@ -12,6 +12,7 @@ import { Button, Checkbox, Dialog, Input, Label, Textarea } from '@equinor/eds-c
 import styled from 'styled-components';
 
 import { useBookmarkComponentContext } from '../BookmarkProvider';
+import { AppNameField } from './AppNameField';
 
 const Styled = {
   Dialog: styled(Dialog)`
@@ -32,6 +33,15 @@ const Styled = {
     `,
 };
 
+/**
+ * Modal for editing an existing bookmark.
+ *
+ * @param props - The component's props
+ * @param props.isOpen - Whether the modal is open
+ * @param props.onClose - Callback invoked to close the modal
+ * @param props.bookmarkId - The id of the bookmark to edit
+ * @returns The edit bookmark modal
+ */
 export const EditBookmarkModal = ({
   isOpen,
   onClose,
@@ -51,6 +61,7 @@ export const EditBookmarkModal = ({
 
   const nameId = useId();
   const descriptionId = useId();
+  const appId = useId();
 
   const [updatePayload, setUpdatePayload] = useState(false);
 
@@ -63,23 +74,29 @@ export const EditBookmarkModal = ({
 
   // set the state when the bookmark is loaded
   useEffect(() => {
+    // Only populate local state once the bookmark has actually loaded
     if (bookmark) {
       const { name, description, isShared } = bookmark;
       setState({ name, description, isShared });
     }
   }, [bookmark]);
 
-  // TODO - this should be on the bookmark object
+  // TODO(#5091): this should be on the bookmark object
   const appProvider = useFrameworkModule<AppModule>('app');
-  const { value: appName } = useObservableState(
+  const { value: appName, error: appNameError } = useObservableState(
     useMemo(
       () => (bookmark && appProvider ? appProvider.getAppManifest(bookmark.appKey) : of(undefined)),
       [appProvider, bookmark],
     ),
   );
+  // Only report a pending manifest request; missing providers and failed requests are not loading.
+  const isAppNameLoading = Boolean(
+    bookmark && appProvider && appName === undefined && appNameError === null,
+  );
 
   const updateBookmark = useCallback(
     async (updates: BookmarkUpdate) => {
+      // Cannot update a bookmark without a provider to persist the change
       if (!provider) {
         console.error('Provider not available');
         return;
@@ -99,8 +116,8 @@ export const EditBookmarkModal = ({
           onClose(false);
         },
       });
-      // TODO: Show success message
-      // TODO: should this call onUpdated, with the updated bookmark?
+      // TODO(#5089): Show success message
+      // TODO(#5090): should this call onUpdated, with the updated bookmark?
       onClose(false);
     },
     [onClose, provider, bookmarkId, updatePayload],
@@ -134,9 +151,12 @@ export const EditBookmarkModal = ({
           />
         </div>
         <div>
-          <Label htmlFor="app" label="App" />
-          {/** TODO - show ghost while loading app name  */}
-          <Input readOnly={true} value={appName?.displayName || ''} />
+          <Label htmlFor={appId} label="App" />
+          <AppNameField
+            id={appId}
+            displayName={appName?.displayName}
+            isLoading={isAppNameLoading}
+          />
         </div>
 
         <Styled.CheckboxWrapper>
@@ -145,6 +165,7 @@ export const EditBookmarkModal = ({
             checked={state.isShared}
             onChange={(changeEvent: ChangeEvent<HTMLInputElement>) => {
               const isShared = changeEvent.target.checked;
+              // Copy the bookmark URL when the user shares it so it's easy to send along
               if (isShared) {
                 addBookmarkToClipboard(bookmarkId);
               }

package/src/components/edit-bookmark/index.ts

@@ -1 +1 @@
-export * from './EditBookmark';
+export * from './EditBookmarkModal';

package/src/components/filter/{Filter.tsx → BookmarkFilter.tsx}

@@ -1,4 +1,4 @@
-import { Search, Autocomplete } from '@equinor/eds-core-react';
+import { Search } from '@equinor/eds-core-react';
 import type { GroupingKeys } from '../../hooks/useBookmarkGrouping';
 
 import styled from 'styled-components';
@@ -11,7 +11,7 @@ type BookmarkFilterProps = {
   readonly groupBy: string;
 };
 
-const Styled = {
+const _Styled = {
   Root: styled.div`
         display: flex;
         align-items: center;
@@ -19,12 +19,18 @@ const Styled = {
     `,
 };
 
+/**
+ * Search and grouping filter controls for the bookmark list.
+ *
+ * @param props - The component's props
+ * @returns The filter controls
+ */
 export const BookmarkFilter = ({
   searchText,
-  setGroupBy,
+  setGroupBy: _setGroupBy,
   setSearchText,
-  groupingModes,
-  groupBy,
+  groupingModes: _groupingModes,
+  groupBy: _groupBy,
 }: BookmarkFilterProps) => {
   return (
     <Search