@equinor/fusion-framework-dev-portal 11.0.3 → 11.0.5

package/src/ContextSelector/useContextResolver.ts

@@ -1,337 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useFramework } from '@equinor/fusion-framework-react';
-import { useCurrentApp } from '@equinor/fusion-framework-react/app';
-import type { AppModule } from '@equinor/fusion-framework-module-app';
-import type { NavigationModule } from '@equinor/fusion-framework-module-navigation';
-import type {
-  ContextItem,
-  ContextModule,
-  IContextProvider,
-} from '@equinor/fusion-framework-module-context';
-import { useObservableState, useObservableSubscription } from '@equinor/fusion-observable/react';
-import '@equinor/fusion-framework-app';
-import { ChipElement } from '@equinor/fusion-wc-chip';
-ChipElement;
-
-import { EMPTY, catchError, lastValueFrom, map, of } from 'rxjs';
-
-import type {
-  ContextResult,
-  ContextResultItem,
-  ContextResolver,
-} from '@equinor/fusion-react-context-selector';
-import type { AppModulesInstance } from '@equinor/fusion-framework-app';
-import type { QueryClientError } from '@equinor/fusion-query/client';
-import type { FusionContextSearchError } from '@equinor/fusion-framework-module-context/errors.js';
-
-/**
- * Capitalizes the first letter of a string and lowercases the rest.
- *
- * @param string - The input string to capitalize.
- * @returns The capitalized string.
- */
-function capitalizeFirstLetter(string: string): string {
-  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-}
-
-/**
- * Converts a {@link ContextItem} graphic field to the shape expected by `ContextResultItem`.
- *
- * @param graphic - The graphic value from a context item (string, SVG object, or undefined).
- * @returns An object with `graphic` and `graphicType` properties, or an empty object.
- */
-function convertGraphic(
-  graphic: ContextItem['graphic'],
-): Pick<ContextResultItem, 'graphic' | 'graphicType'> {
-  // No graphic provided means nothing to render
-  if (graphic === undefined) {
-    return {};
-  }
-
-  // A string graphic is either an inline SVG/HTML markup or an EDS icon name
-  if (typeof graphic === 'string') {
-    // EDS icon names aren't part of the ContextResultItem['graphicType'] union upstream, so cast explicitly
-    const edsGraphicType = 'eds' as unknown as ContextResultItem['graphicType'];
-    return {
-      graphicType: graphic.startsWith('<') ? 'inline-html' : edsGraphicType,
-      graphic: graphic,
-    };
-  }
-
-  // A structured SVG graphic object maps directly to the inline-svg type
-  if (graphic.type === 'svg') {
-    return {
-      graphicType: 'inline-svg',
-      graphic: graphic.content,
-    };
-  }
-
-  return {
-    graphicType: 'inline-html',
-    graphic: graphic.content,
-  };
-}
-
-/**
- * Converts a {@link ContextItem} meta field to the shape expected by `ContextResultItem`.
- *
- * @param meta - The meta value from a context item (string, SVG object, or undefined).
- * @returns An object with `meta` and `metaType` properties, or an empty object.
- */
-function convertMeta(meta: ContextItem['meta']): Pick<ContextResultItem, 'metaType' | 'meta'> {
-  // No meta provided means nothing to render
-  if (meta === undefined) {
-    return {};
-  }
-
-  // A string meta is either an inline SVG/HTML markup or an EDS icon name
-  if (typeof meta === 'string') {
-    // EDS icon names aren't part of the ContextResultItem['metaType'] union upstream, so cast explicitly
-    const edsMetaType = 'eds' as unknown as ContextResultItem['metaType'];
-    return {
-      metaType: meta.startsWith('<') ? 'inline-html' : edsMetaType,
-      meta: meta,
-    };
-  }
-
-  // A structured SVG meta object maps directly to the inline-svg type
-  if (meta.type === 'svg') {
-    return {
-      metaType: 'inline-svg',
-      meta: meta.content,
-    };
-  }
-
-  return {
-    metaType: 'inline-html',
-    meta: meta.content,
-  };
-}
-
-/**
- * Maps an array of context items to `ContextResult` for the context selector dropdown.
- *
- * Applies custom rendering for `EquinorTask` (shows inactive state chip) and
- * `OrgChart` (shows list icon and inactive state chip) context types.
- *
- * @param src - Array of context items from the context query.
- * @returns Mapped array of `ContextResultItem` objects for the selector UI.
- */
-const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): ContextResult => {
-  // Map each raw context item to its ContextResultItem shape, applying per-type overrides
-  return src.map((i) => {
-    // Layer the base fields with graphic and meta overrides derived from the item
-    const baseResult = {
-      id: i.id,
-      title: i.title,
-      subTitle: i.subTitle ?? i.type.id,
-      ...convertGraphic(i.graphic),
-      ...convertMeta(i.meta),
-    };
-
-    // Displays the status of the EquinorTask if it is not 'active'
-    const isEquinorTaskInactive = !!(
-      i.value.taskState && i.value.taskState.toLowerCase() !== 'active'
-    );
-    // Only override the meta chip for EquinorTask items that are inactive
-    if (i.type.id === 'EquinorTask' && isEquinorTaskInactive) {
-      baseResult.meta = `<fwc-chip disabled variant="outlined" value="${i.value.taskState}" />`;
-      baseResult.metaType = 'inline-html';
-    }
-
-    // OrgChart items always get a fixed icon plus an optional inactive-state chip
-    if (i.type.id === 'OrgChart') {
-      // Org charts should always have 'list' icon
-      baseResult.graphic = 'list';
-      // 'eds' isn't part of the ContextResultItem['graphicType'] union upstream, so cast explicitly
-      baseResult.graphicType = 'eds' as unknown as ContextResultItem['graphicType'];
-
-      // Displays the org chart status if it is not 'active'
-      const isOrgChartInactive = !!(i.value.state && i.value.state.toLowerCase() !== 'active');
-      // Only override the meta chip when the org chart is inactive
-      if (isOrgChartInactive) {
-        baseResult.meta = `<fwc-chip disabled variant="outlined" value="${capitalizeFirstLetter(i.value.state ?? '')}" />`;
-        baseResult.metaType = 'inline-html';
-      }
-    }
-
-    return baseResult;
-  });
-};
-
-/**
- * Creates a single `ContextResultItem` with sensible defaults.
- *
- * Used to generate placeholder or error entries in the context selector dropdown.
- *
- * @param props - Partial properties to merge into the default item shape.
- * @returns A complete `ContextResultItem` with defaults for `id` and `title`.
- */
-const singleItem = (props: Partial<ContextResultItem>): ContextResultItem => {
-  // Layer the caller-supplied props on top of the placeholder defaults
-  return Object.assign({ id: 'no-such-item', title: 'Change me' }, props);
-};
-
-/**
- * Hook that creates a context resolver, tracks the current context provider,
- * and provides the currently selected context for the {@link ContextSelector}.
- *
- * Observes the current application's module instances. When the app exposes a
- * context module, the hook wires up a search resolver that queries context items
- * and maps results to `ContextResultItem`. It also handles error display and
- * minimum query length enforcement.
- *
- * @see {@link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component | ContextSelector Storybook}
- * @returns An object containing the `resolver` for the selector, the current `provider`, and `currentContext` items.
- */
-export const useContextResolver = (): {
-  resolver: ContextResolver | null;
-  provider: IContextProvider | null;
-  currentContext: ContextResult;
-} => {
-  /* Framework modules */
-  const framework = useFramework<[AppModule, NavigationModule]>();
-
-  const { currentApp } = useCurrentApp();
-
-  /** App module collection instance */
-  const instance$ = useMemo(() => currentApp?.instance$ || EMPTY, [currentApp]);
-
-  /* context provider state */
-  const [provider, setProvider] = useState<IContextProvider | null>(null);
-
-  /* Current context observable */
-  const { value: currentContext } = useObservableState(
-    useMemo(() => provider?.currentContext$ || EMPTY, [provider]),
-  );
-
-  const preselected: ContextResult = useMemo(() => {
-    return currentContext ? mapper([currentContext]) : [];
-  }, [currentContext]);
-
-  /** callback function when current app instance changes */
-  const onContextProviderChange = useCallback((modules: AppModulesInstance) => {
-    /** try to get the context module from the app module instance */
-    const contextProvider = (modules as AppModulesInstance<[ContextModule]>).context;
-    // Only set a provider when the loaded app actually exposes a context module
-    if (contextProvider) {
-      setProvider(contextProvider);
-    } else {
-      setProvider(null);
-    }
-  }, []);
-
-  /** clear the app provider */
-  const clearContextProvider = useCallback(() => {
-    setProvider(null);
-  }, []);
-
-  /** observe changes to app modules and  clear / set the context provider on change */
-  useObservableSubscription(instance$, onContextProviderChange, clearContextProvider);
-  useEffect(
-    () =>
-      framework.modules.event.addEventListener('onReactAppLoaded', (e) => {
-        console.debug('useContextResolver::onReactAppLoaded', 'using legacy register hack method');
-        return onContextProviderChange(e.detail.modules);
-      }),
-    [framework, onContextProviderChange],
-  );
-
-  const processError = useCallback((err: Error): ContextResult => {
-    // Unwrap query-client errors to get at the underlying cause
-    if (err.name === 'QueryClientError') {
-      return processError((err as QueryClientError).cause as Error);
-    }
-
-    // Render context-search errors with their own title/description
-    if (err.name === 'FusionContextSearchError') {
-      const error = err as FusionContextSearchError;
-      return [
-        singleItem({
-          id: error.name,
-          title: error.title,
-          subTitle: error.description,
-          graphic: 'error_outlined',
-          isDisabled: true,
-        }),
-      ];
-    }
-
-    return [
-      singleItem({
-        title: 'Unexpected error occurred',
-        subTitle: 'Please try again or report the issue in Services@Equinor',
-        graphic: 'error_outlined',
-        isDisabled: true,
-      }),
-    ];
-  }, []);
-
-  /**
-   * set resolver for ContextSelector
-   * @return ContextResolver
-   */
-  const minLength = 2;
-  const resolver = useMemo(
-    (): ContextResolver | null =>
-      provider && {
-        searchQuery: async (search: string): Promise<ContextResult> => {
-          // Avoid firing a search query until the minimum character threshold is met
-          if (search.length < minLength) {
-            return [
-              singleItem({
-                // TODO(#5064): make as enum if used for checks, or type
-                id: 'min-length',
-                title: `Type ${minLength - search.length} more chars to search`,
-                isDisabled: true,
-              }),
-            ];
-          }
-          try {
-            const query$ = provider.queryContext(search);
-            return lastValueFrom(
-              query$
-                // Run the raw query results through the mapper, falling back to a no-results placeholder
-                .pipe(
-                  map(mapper),
-                  map((x) =>
-                    x.length
-                      ? x
-                      : [
-                          singleItem({
-                            // TODO(#5064): make as enum if used for checks, or type
-                            id: 'no-results',
-                            title: 'No results found',
-                            graphic: 'info_circle',
-                            isDisabled: true,
-                          }),
-                        ],
-                  ),
-                  /** handle failures */
-                  catchError((err) => {
-                    console.error(
-                      'PORTAL::ContextResolver',
-                      `failed to resolve context for query ${search}`,
-                      err,
-                      err.cause,
-                    );
-
-                    return of(processError(err));
-                  }),
-                ),
-            );
-            /** this should NEVER happen! */
-          } catch (e) {
-            const err = e as Error;
-            console.error('PORTAL::ContextResolver', `unhandled error for [${search}]`, e);
-            return processError(err);
-          }
-        },
-        initialResult: preselected,
-      },
-    [provider, preselected, processError],
-  );
-  return { resolver, provider, currentContext: preselected };
-};
-
-export default useContextResolver;

package/src/EquinorLoader.tsx

@@ -1,33 +0,0 @@
-import type React from 'react';
-import { StarProgress } from '@equinor/fusion-react-progress-indicator';
-
-/**
- * Full-viewport loading indicator displaying the Equinor star spinner.
- *
- * Used as a fallback while the Fusion Framework or an application is initializing.
- *
- * @param props.text - Status message displayed below the spinner.
- * @param props.children - Optional additional content rendered inside the spinner.
- * @returns A centered full-screen loading overlay.
- */
-export const EquinorLoader = ({
-  children,
-  text,
-}: React.PropsWithChildren<{ readonly text: string }>): React.ReactElement => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100vw',
-        height: '100vh',
-        overflow: 'hidden',
-      }}
-    >
-      <StarProgress text={text}>{children}</StarProgress>
-    </div>
-  );
-};
-
-export default EquinorLoader;

package/src/ErrorViewer.tsx

@@ -1,26 +0,0 @@
-import { Typography } from '@equinor/eds-core-react';
-
-/**
- * Recursively renders an error and its causal chain.
- *
- * Displays the error message and stack trace for each error in the `cause`
- * chain, providing full visibility into nested failures during app loading.
- *
- * @param props.error - The error to display, including any nested `cause` errors.
- * @returns A bordered section showing the error message, stack trace, and any nested causes.
- */
-export const ErrorViewer = ({ error }: { readonly error: Error }) => {
-  return (
-    <>
-      <div style={{ marginTop: 20, border: '1px solid' }}>
-        <Typography variant="h4" color="warning">
-          {error.message}
-        </Typography>
-        <section style={{ padding: 10 }}>{error.stack && <pre>{error.stack}</pre>}</section>
-      </div>
-      {error.cause && <ErrorViewer error={error.cause as Error} />}
-    </>
-  );
-};
-
-export default ErrorViewer;

package/src/FusionLogo.tsx

@@ -1,76 +0,0 @@
-import { useId } from 'react';
-import type { SVGProps } from 'react';
-
-/** Props for the {@link FusionLogo} component. */
-type FusionLogoProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & {
-  /** Uniform scale multiplier applied via CSS transform. Defaults to `1`. */
-  readonly scale?: number;
-};
-
-/**
- * Inline SVG rendering of the Fusion logo.
- *
- * Uses unique gradient IDs per instance so multiple logos can coexist on the
- * same page without gradient collisions.
- *
- * @param props.scale - Scale multiplier for the logo size.
- * @param props.style - Additional inline styles merged with the computed transform.
- * @returns An inline SVG element sized to `1em` height.
- */
-export const FusionLogo = ({ scale = 1, style }: FusionLogoProps) => {
-  const paint0Id = useId();
-  const paint1Id = useId();
-
-  return (
-    <svg viewBox="0 0 50 35" style={{ height: '1em', ...style, transform: `scale(${scale})` }}>
-      <title>Fusion Logo</title>
-      <path
-        d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
-        transform="translate(50 17.5) scale(0.92727 1.06779) rotate(135)"
-        fill={`url(#${paint0Id})`}
-      />
-      <path
-        d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
-        transform="translate(0 17.5) scale(0.92727 1.06779) rotate(-45)"
-        fill={`url(#${paint1Id})`}
-      />
-      <path
-        d="M9.61965 36.6972L2.60087 29.6784L1.96135 22.3809L8.42623 22.9069L9.61965 36.6972Z"
-        transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
-        fill="#990025"
-      />
-      <path
-        d="M7.05434 7.05434L0 0L1.21096 13.8183L7.68846 14.3818L7.05434 7.05434Z"
-        transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
-        fill="#990025"
-      />
-      <path
-        d="M0 0L2.49398 29.5715L9.61965 36.6972L7.01878 7.01878L0 0Z"
-        transform="translate(33.8887 0.015625) scale(0.92727 1.06779) rotate(45)"
-        fill="#FF1243"
-      />
-      <defs>
-        <linearGradient
-          id={paint0Id}
-          x2="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
-        >
-          <stop offset="0.508287" stopColor="#DC002E" />
-          <stop offset="0.508387" stopColor="#FF1243" />
-        </linearGradient>
-        <linearGradient
-          id={paint1Id}
-          x2="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
-        >
-          <stop offset="0.508287" stopColor="#DC002E" />
-          <stop offset="0.508387" stopColor="#FF1243" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
-
-export default FusionLogo;

package/src/Header.tsx

@@ -1,94 +0,0 @@
-import { useCallback, useId, useState } from 'react';
-import { ContextSelector } from './ContextSelector';
-import { FusionLogo } from './FusionLogo';
-
-import styled from 'styled-components';
-import { add, menu, tag } from '@equinor/eds-icons';
-import { Icon, TopBar } from '@equinor/eds-core-react';
-Icon.add({ menu, add, tag });
-
-import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
-import { useCurrentApp, useCurrentAppModule } from '@equinor/fusion-framework-react/app';
-
-import type { BookmarkModule } from '@equinor/fusion-framework-react-module-bookmark';
-
-import { BookmarkProvider } from '@equinor/fusion-framework-react-components-bookmark';
-
-import PersonAvatarElement from '@equinor/fusion-wc-person/avatar';
-PersonAvatarElement; // Register the custom element - prevent tree-shaking
-
-import { PersonSideSheet } from './PersonSideSheet';
-
-import { BookmarkSideSheet } from './BookmarkSideSheet';
-
-import { HeaderActions } from './HeaderActions';
-
-const Styled = {
-  Title: styled.div`
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        font-size: 1rem;
-        font-weight: 500;
-    `,
-};
-
-/**
- * Portal top bar header containing the Fusion logo, context selector, and action buttons.
- *
- * Composes the bookmark provider with the current app and user so bookmark
- * and person side sheets can operate in context. Provides the sticky top bar
- * layout used across all portal pages.
- */
-export const Header = () => {
-  const currentUser = useCurrentUser();
-  const topBarId = useId();
-  const [isPersonSheetOpen, setIsPersonSheetOpen] = useState(false);
-
-  const [isBookmarkOpen, setIsBookmarkOpen] = useState(false);
-  const onBookmarkClose = useCallback(() => {
-    setIsBookmarkOpen(false);
-  }, []);
-
-  const { currentApp } = useCurrentApp();
-
-  const { module: bookmarkProvider } = useCurrentAppModule<BookmarkModule>('bookmark');
-
-  return (
-    <BookmarkProvider
-      provider={bookmarkProvider ?? undefined}
-      currentApp={
-        currentApp
-          ? { appKey: currentApp.appKey, name: currentApp.manifest?.displayName }
-          : undefined
-      }
-      currentUser={
-        currentUser ? { id: currentUser.localAccountId, name: currentUser.name } : undefined
-      }
-    >
-      <TopBar id={topBarId} sticky={false} style={{ padding: '0 1em', height: 48 }}>
-        <TopBar.Header>
-          <Styled.Title>
-            <FusionLogo />
-            <span>Fusion Framework CLI</span>
-          </Styled.Title>
-        </TopBar.Header>
-        <HeaderActions
-          userAzureId={currentUser?.localAccountId}
-          toggleBookmark={setIsBookmarkOpen}
-          togglePerson={setIsPersonSheetOpen}
-        />
-        <TopBar.CustomContent>
-          <ContextSelector />
-        </TopBar.CustomContent>
-        {/* since buttons are 40px but have 48px click bounds */}
-      </TopBar>
-      <BookmarkSideSheet isOpen={isBookmarkOpen} onClose={onBookmarkClose} />
-      <PersonSideSheet
-        azureId={currentUser?.localAccountId}
-        isOpen={isPersonSheetOpen}
-        onClose={() => setIsPersonSheetOpen(!isPersonSheetOpen)}
-      />
-    </BookmarkProvider>
-  );
-};

package/src/HeaderActions.tsx

@@ -1,47 +0,0 @@
-import { tag } from '@equinor/eds-icons';
-import { Button, Icon, TopBar } from '@equinor/eds-core-react';
-
-import PersonAvatarElement from '@equinor/fusion-wc-person/avatar';
-PersonAvatarElement;
-
-import { useBookmarkComponentContext } from '@equinor/fusion-framework-react-components-bookmark';
-
-/** Props for the {@link HeaderActions} component. */
-interface HeaderActionProps {
-  /** Azure AD object ID of the current user, used for the person avatar. */
-  readonly userAzureId?: string;
-  /** Toggle callback for the bookmark side sheet open/close state. */
-  readonly toggleBookmark: (open: (status: boolean) => boolean) => void;
-  /** Toggle callback for the person settings side sheet open/close state. */
-  readonly togglePerson: (open: (status: boolean) => boolean) => void;
-}
-
-/**
- * Action buttons displayed in the portal top bar header.
- *
- * Renders a bookmark toggle button (disabled when no bookmark provider is
- * available) and a person-avatar button that opens the user settings sheet.
- *
- * @param props - {@link HeaderActionProps}
- */
-export const HeaderActions = (props: HeaderActionProps) => {
-  const { toggleBookmark, togglePerson, userAzureId } = props;
-
-  const bookmarkContext = useBookmarkComponentContext();
-
-  return (
-    <TopBar.Actions style={{ minWidth: 48, minHeight: 48 }}>
-      <Button
-        onClick={() => toggleBookmark((x) => !x)}
-        variant="ghost_icon"
-        disabled={!bookmarkContext.provider}
-        title={bookmarkContext.provider ? 'Bookmarks' : 'Bookmarks not available, enable in app'}
-      >
-        <Icon data={tag} />
-      </Button>
-      <Button onClick={() => togglePerson((x) => !x)} variant="ghost_icon">
-        <fwc-person-avatar size="small" azureId={userAzureId} clickable={false} />
-      </Button>
-    </TopBar.Actions>
-  );
-};

package/src/PersonSideSheet/index.tsx

@@ -1,65 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { SideSheet } from '@equinor/fusion-react-side-sheet';
-import PersonListItem from '@equinor/fusion-wc-person/list-item';
-PersonListItem;
-
-import { Divider } from '@equinor/eds-core-react';
-
-import { LandingSheetContent, FeatureSheetContent, RolesSheetContent } from './sheets';
-
-/** Props for the {@link PersonSideSheet} component. */
-type PersonSideSheetProps = {
-  /** Azure AD object ID of the user to display in the side sheet. */
-  readonly azureId?: string;
-  /** Whether the side sheet is currently visible. */
-  readonly isOpen: boolean;
-  /** Callback invoked when the user dismisses the side sheet. */
-  onClose(): void;
-};
-
-/**
- * Side sheet overlay that displays user settings and feature toggles.
- *
- * Contains a person list item for the current user and navigable sub-sheets
- * for viewing and toggling application and portal feature flags.
- *
- * @param props - {@link PersonSideSheetProps}
- */
-export const PersonSideSheet = ({ azureId, isOpen, onClose }: PersonSideSheetProps) => {
-  const [currentSheet, setCurrentSheet] = useState<string>('landing');
-
-  const Component = useMemo(() => {
-    // Pick the sub-sheet component matching the currently navigated-to sheet
-    switch (currentSheet) {
-      case 'features':
-        return FeatureSheetContent;
-      case 'roles':
-        return RolesSheetContent;
-      default:
-        return LandingSheetContent;
-    }
-  }, [currentSheet]);
-
-  const navigateCallback = useCallback((sheet: string) => {
-    setCurrentSheet(sheet ?? 'landing');
-  }, []);
-
-  return (
-    <SideSheet isOpen={isOpen} onClose={onClose} isDismissable={true}>
-      <SideSheet.Title title="User settings" />
-      <SideSheet.SubTitle subTitle={'Settings for your user in Fusion portal'} />
-      <SideSheet.Actions />
-      <SideSheet.Content>
-        <section style={{ paddingLeft: '0.5em' }}>
-          <div>
-            <fwc-person-list-item azureId={azureId} />
-          </div>
-          <Divider />
-          <Component azureId={azureId} sheet={currentSheet} navigate={navigateCallback} />
-        </section>
-      </SideSheet.Content>
-    </SideSheet>
-  );
-};
-
-export default PersonSideSheet;