@equinor/fusion-framework-react-components-bookmark 2.0.0 → 2.0.2

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/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.0";
+export declare const version = "2.0.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-components-bookmark",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@equinor/fusion-framework-react": "^8.0.0",
-    "@equinor/fusion-observable": "^9.0.0",
-    "@equinor/fusion-framework-react-module-bookmark": "^6.0.0"
+    "@equinor/fusion-framework-react-module-bookmark": "^6.0.1",
+    "@equinor/fusion-observable": "^9.1.1",
+    "@equinor/fusion-framework-react": "^8.0.1"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^2.3.7",
@@ -35,10 +35,10 @@
     "@types/react": "^19.2.7",
     "react": "^19.2.1",
     "styled-components": "^6.3.11",
-    "typescript": "^5.9.3",
-    "@equinor/fusion-framework-module-app": "^8.0.0",
-    "@equinor/fusion-framework-module-event": "^6.0.0",
-    "@equinor/fusion-framework-module-bookmark": "^4.0.0"
+    "typescript": "^7.0.2",
+    "@equinor/fusion-framework-module-bookmark": "^4.0.3",
+    "@equinor/fusion-framework-module-event": "^6.0.1",
+    "@equinor/fusion-framework-module-app": "^8.0.3"
   },
   "peerDependencies": {
     "@equinor/eds-core-react": "^2.0.0",

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/{EditBookmark.tsx → EditBookmarkModal.tsx}

@@ -32,6 +32,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,
@@ -63,13 +72,14 @@ 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(
     useMemo(
@@ -80,6 +90,7 @@ export const EditBookmarkModal = ({
 
   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 +110,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],
@@ -135,7 +146,7 @@ export const EditBookmarkModal = ({
         </div>
         <div>
           <Label htmlFor="app" label="App" />
-          {/** TODO - show ghost while loading app name  */}
+          {/** TODO(#5092): show ghost while loading app name  */}
           <Input readOnly={true} value={appName?.displayName || ''} />
         </div>
 
@@ -145,6 +156,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

package/src/components/import-bookmark/{ImportBookmark.tsx → ImportBookmarkModal.tsx}

@@ -14,6 +14,11 @@ const Styled = {
     `,
 };
 
+/**
+ * Modal that prompts the user to import a bookmark shared via a `bookmarkId` URL parameter.
+ *
+ * @returns The import bookmark modal
+ */
 export const ImportBookmarkModal = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -21,17 +26,21 @@ export const ImportBookmarkModal = () => {
 
   // Observe changes to current bookmark and check if it is already in bookmarks or favorites
   const newBookmark$ = useMemo(() => {
+    // Without a provider there is no bookmark data source to observe
     if (!provider) {
       return of(null);
     }
+    // Watch the current bookmark and resolve whether it should prompt an import
     return provider.currentBookmark$.pipe(
       // filter out null values, not interested in those
       filter((bookmark) => !!bookmark),
       switchMap((bookmark) => {
         const checkBookmark = bookmark && bookmark.createdBy.id !== currentUser?.id;
+        // Only prompt to import bookmarks created by someone else
         if (!checkBookmark) {
           return of(null);
         }
+        // Resolve to null once the bookmark is already a favorite, otherwise pass it through
         return from(provider.isBookmarkInFavorites(bookmark.id)).pipe(
           map((isFavorite) => (isFavorite ? null : bookmark)),
         );
@@ -42,6 +51,7 @@ export const ImportBookmarkModal = () => {
   const { value: newBookmark } = useObservableState(newBookmark$);
 
   useEffect(() => {
+    // Open the import dialog whenever a new importable bookmark is detected
     if (newBookmark) {
       setIsOpen(true);
     }
@@ -49,6 +59,7 @@ export const ImportBookmarkModal = () => {
 
   const onAddBookmarkFavorite = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
+      // Without a provider we cannot persist the favorite, so bail out
       if (!provider) {
         console.error('Provider not available');
         return;
@@ -62,6 +73,7 @@ export const ImportBookmarkModal = () => {
     [provider],
   );
 
+  // Nothing to import when there is no candidate bookmark
   if (!newBookmark) {
     return null;
   }

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

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

package/src/components/loading/Loading.tsx

@@ -1,6 +1,10 @@
 import { CircularProgress } from '@equinor/eds-core-react';
-import React from 'react';
 
+/**
+ * A centered loading spinner.
+ *
+ * @returns The loading indicator
+ */
 export const Loading = () => (
   <div
     style={{

package/src/components/messages/Message.tsx

@@ -8,6 +8,7 @@ import { error_outlined, file_description } from '@equinor/eds-icons';
 export type PortalMessageType = 'Error' | 'Info' | 'Warning' | 'NoContent';
 
 const getMessageType = (type?: PortalMessageType) => {
+  // Map each message type to its icon and color; unknown types render nothing
   switch (type) {
     case 'Error':
       return { color: tokens.colors.interactive.danger__resting.hex, icon: error_outlined };
@@ -51,6 +52,12 @@ type MessageProps = {
   readonly color?: string;
 };
 
+/**
+ * Displays a titled message with an icon matching its type.
+ *
+ * @param props - The component's props
+ * @returns The message
+ */
 export const Message = ({
   title,
   type = 'Info',

package/src/components/row/MoreMenu.tsx

@@ -9,26 +9,33 @@ type MenuProps = {
   readonly options: MenuOption[];
 };
 
+/**
+ * A dropdown menu of row actions anchored to a reference element.
+ *
+ * @param props - The component's props
+ * @returns The menu
+ */
 export const MoreMenu = ({ pRef, onClose, open, options }: MenuProps) => {
+  // Render one menu item per configured row action
+  const items = options.map(({ onClick, name, disabled, Icon }) => (
+    <Menu.Item
+      disabled={disabled}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onClick();
+        onClose();
+      }}
+      key={name}
+    >
+      {Icon && Icon}
+      {name}
+    </Menu.Item>
+  ));
+
   return (
     <Menu open={open} anchorEl={pRef.current}>
-      {options.map(({ onClick, name, disabled, Icon }) => (
-        <Menu.Item
-          disabled={disabled}
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onClick();
-            onClose();
-          }}
-          key={name}
-        >
-          <>
-            {Icon && Icon}
-            {name}
-          </>
-        </Menu.Item>
-      ))}
+      {items}
     </Menu>
   );
 };