@pautena/react-design-system 0.5.1 → 0.6.0

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [viteTsconfigPaths()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./setupTests.ts",
+  },
+});

package/dist/cjs/types/components/app-bars/app-bar/app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "./app-bar.types";
-export declare const AppBar: AppBarComponent;

package/dist/cjs/types/components/app-bars/app-bar/app-bar.types.d.ts

@@ -1,14 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { AppBarProps as MuiAppBarProps } from "@mui/material";
-export interface AppBarProfile {
-    name: string;
-}
-export interface AppBarProps extends MuiAppBarProps {
-    menu?: boolean;
-    title?: string;
-    search?: boolean;
-    profile?: AppBarProfile;
-    onClickSignOut: () => void;
-}
-export type AppBarComponent = FunctionComponent<AppBarProps>;
-export type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/dist/cjs/types/components/app-bars/app-bar/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./mini-app-bar";
-export * from "./mini-app-bar";
-export * from "./app-bar.types";

package/dist/cjs/types/components/app-bars/app-bar/mini-app-bar/index.d.ts

@@ -1 +0,0 @@
-export * from "./mini-app-bar";

package/dist/cjs/types/components/app-bars/app-bar/mini-app-bar/mini-app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "../app-bar.types";
-export declare const MiniAppBar: AppBarComponent;

package/dist/cjs/types/components/app-bars/index.d.ts

@@ -1 +0,0 @@
-export * from "./app-bar";

package/dist/cjs/types/components/drawers/drawer/drawer.mock.d.ts

@@ -1,3 +0,0 @@
-import { DrawerContentComponent, Nav } from "./drawer.types";
-export declare const mockNav: Nav;
-export declare const DummyDrawerContent: DrawerContentComponent;

package/dist/cjs/types/components/drawers/drawer/drawer.provider.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from "react";
-type Props = PropsWithChildren<{
-    initialOpen?: boolean;
-}>;
-export declare const DrawerProvider: ({ children, initialOpen }: Props) => JSX.Element;
-export {};

package/dist/cjs/types/components/drawers/drawer/drawer.types.d.ts

@@ -1,51 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant, LabelVariant } from "../../data-display";
-import { DrawerProps as MuiDrawerProps } from "@mui/material";
-export interface NavItemAvatar {
-    src: string;
-    alt: string;
-}
-export interface NavItemLabel {
-    text: string;
-    variant: LabelVariant;
-}
-export interface NavItemBullet {
-    variant: BulletVariant;
-}
-export interface NavItemLink {
-    id: string;
-    text: string;
-    href: string;
-    icon?: ReactElement;
-    avatar?: NavItemAvatar;
-    label?: NavItemLabel;
-    bullet?: NavItemBullet;
-}
-export type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
-    items: NavItemLink[];
-};
-export type NavItem = NavItemLink | NavItemCollapsable;
-export interface NavSection {
-    title?: string;
-    items: NavItem[];
-}
-export interface Nav {
-    items: NavSection[];
-}
-export interface DrawerContentProps {
-    /**
-     * Item currently selected in the navigation
-     */
-    selectedItem?: string;
-    /**
-     * Object with the content that has to be rendered
-     */
-    nav: Nav;
-}
-export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
-export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
-export interface DrawerProps extends MuiDrawerProps {
-    children: DrawerContentElement;
-}
-export type DrawerComponent = FunctionComponent<DrawerProps>;
-export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;

package/dist/cjs/types/components/drawers/drawer/mini-drawer/index.d.ts

@@ -1 +0,0 @@
-export * from "./mini-drawer";

package/dist/cjs/types/components/drawers/drawer/mini-drawer/mini-drawer.d.ts

@@ -1 +0,0 @@
-export declare const MiniDrawer: import("@emotion/styled").StyledComponent<import("..").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/cjs/types/components/drawers/drawer-collapsable-item/drawer-collapsable-item.d.ts

@@ -1,26 +0,0 @@
-import { ReactElement } from "react";
-import { NavItemLink } from "../drawer/drawer.types";
-export interface DrawerCollapsableItemProps {
-    /**
-     * Text displayed inside the item
-     */
-    text: string;
-    /**
-     * Icon displayed to the left
-     */
-    icon?: ReactElement;
-    /**
-     * The item has to be marked as selected
-     */
-    selected?: boolean;
-    /**
-     * Id of the item that has to be marked as selected;
-     */
-    selectedItem?: string;
-    /**
-     * Items that are going to be displayed inside
-     * the collapsable
-     */
-    items: NavItemLink[];
-}
-export declare const DrawerCollapsableItem: ({ text, icon, selected, selectedItem, items, }: DrawerCollapsableItemProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-collapsable-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./drawer-collapsable-item";

package/dist/cjs/types/components/drawers/drawer-section/drawer-section.mock.d.ts

@@ -1,2 +0,0 @@
-import { NavItem } from "../drawer/drawer.types";
-export declare const SectionItems: NavItem[];

package/dist/cjs/types/components/inputs/enhanced-autocomplete/enhanced-autocomplete.d.ts

@@ -1,10 +0,0 @@
-import { AutocompleteProps, ChipTypeMap } from "@mui/material";
-import React from "react";
-export interface EnhancedAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
-    label: string;
-    helperText?: string;
-    color?: string;
-    fetching?: boolean;
-    onChangeValue?: (value: T) => void;
-}
-export declare const EnhancedAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType<any> = "div">(props: EnhancedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;

package/dist/cjs/types/components/inputs/enhanced-autocomplete/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-autocomplete";

package/dist/cjs/types/components/inputs/enhanced-select/enhanced-select.d.ts

@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-import { SelectInputProps } from "@mui/material/Select/SelectInput";
-export type EnhancedSelectSize = "small" | "medium";
-export interface EnhancedSelectProps<T> {
-    label: string;
-    value: T;
-    loading?: boolean;
-    fetching?: boolean;
-    size?: EnhancedSelectSize;
-    color?: string;
-    fullWidth?: boolean;
-    children?: ReactNode;
-    onChange?: SelectInputProps<T>["onChange"];
-}
-export declare const EnhancedSelect: <T extends React.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;

package/dist/cjs/types/components/inputs/enhanced-select/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-select";

package/dist/cjs/types/components/inputs/enhanced-text-field/enhanced-text-field.d.ts

@@ -1,7 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-export type EnhancedTextFieldProps = TextFieldProps & {
-    fetching?: boolean;
-    loading?: boolean;
-    hexColor?: string;
-};
-export declare const EnhancedTextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: EnhancedTextFieldProps) => JSX.Element;

package/dist/cjs/types/components/inputs/enhanced-text-field/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-text-field";

package/dist/cjs/types/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-import { AppBarElement } from "../../components/app-bars/app-bar";
-import { DrawerElement } from "../../components/drawers/drawer";
-export interface AppBarWithDrawerLayoutProps {
-    children: [DrawerElement, AppBarElement, ReactNode];
-}
-export declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;

package/dist/cjs/types/layouts/app-bar-with-drawer-layout/index.d.ts

@@ -1 +0,0 @@
-export * from "./app-bar-with-drawer-layout";

package/dist/esm/types/components/app-bars/app-bar/app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "./app-bar.types";
-export declare const AppBar: AppBarComponent;

package/dist/esm/types/components/app-bars/app-bar/app-bar.types.d.ts

@@ -1,14 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { AppBarProps as MuiAppBarProps } from "@mui/material";
-export interface AppBarProfile {
-    name: string;
-}
-export interface AppBarProps extends MuiAppBarProps {
-    menu?: boolean;
-    title?: string;
-    search?: boolean;
-    profile?: AppBarProfile;
-    onClickSignOut: () => void;
-}
-export type AppBarComponent = FunctionComponent<AppBarProps>;
-export type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/dist/esm/types/components/app-bars/app-bar/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./mini-app-bar";
-export * from "./mini-app-bar";
-export * from "./app-bar.types";

package/dist/esm/types/components/app-bars/app-bar/mini-app-bar/index.d.ts

@@ -1 +0,0 @@
-export * from "./mini-app-bar";

package/dist/esm/types/components/app-bars/app-bar/mini-app-bar/mini-app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "../app-bar.types";
-export declare const MiniAppBar: AppBarComponent;

package/dist/esm/types/components/app-bars/index.d.ts

@@ -1 +0,0 @@
-export * from "./app-bar";

package/dist/esm/types/components/drawers/drawer/drawer.mock.d.ts

@@ -1,3 +0,0 @@
-import { DrawerContentComponent, Nav } from "./drawer.types";
-export declare const mockNav: Nav;
-export declare const DummyDrawerContent: DrawerContentComponent;

package/dist/esm/types/components/drawers/drawer/drawer.provider.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from "react";
-type Props = PropsWithChildren<{
-    initialOpen?: boolean;
-}>;
-export declare const DrawerProvider: ({ children, initialOpen }: Props) => JSX.Element;
-export {};

package/dist/esm/types/components/drawers/drawer/drawer.types.d.ts

@@ -1,51 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant, LabelVariant } from "../../data-display";
-import { DrawerProps as MuiDrawerProps } from "@mui/material";
-export interface NavItemAvatar {
-    src: string;
-    alt: string;
-}
-export interface NavItemLabel {
-    text: string;
-    variant: LabelVariant;
-}
-export interface NavItemBullet {
-    variant: BulletVariant;
-}
-export interface NavItemLink {
-    id: string;
-    text: string;
-    href: string;
-    icon?: ReactElement;
-    avatar?: NavItemAvatar;
-    label?: NavItemLabel;
-    bullet?: NavItemBullet;
-}
-export type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
-    items: NavItemLink[];
-};
-export type NavItem = NavItemLink | NavItemCollapsable;
-export interface NavSection {
-    title?: string;
-    items: NavItem[];
-}
-export interface Nav {
-    items: NavSection[];
-}
-export interface DrawerContentProps {
-    /**
-     * Item currently selected in the navigation
-     */
-    selectedItem?: string;
-    /**
-     * Object with the content that has to be rendered
-     */
-    nav: Nav;
-}
-export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
-export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
-export interface DrawerProps extends MuiDrawerProps {
-    children: DrawerContentElement;
-}
-export type DrawerComponent = FunctionComponent<DrawerProps>;
-export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;

package/dist/esm/types/components/drawers/drawer/mini-drawer/index.d.ts

@@ -1 +0,0 @@
-export * from "./mini-drawer";

package/dist/esm/types/components/drawers/drawer/mini-drawer/mini-drawer.d.ts

@@ -1 +0,0 @@
-export declare const MiniDrawer: import("@emotion/styled").StyledComponent<import("..").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/types/components/drawers/drawer-collapsable-item/drawer-collapsable-item.d.ts

@@ -1,26 +0,0 @@
-import { ReactElement } from "react";
-import { NavItemLink } from "../drawer/drawer.types";
-export interface DrawerCollapsableItemProps {
-    /**
-     * Text displayed inside the item
-     */
-    text: string;
-    /**
-     * Icon displayed to the left
-     */
-    icon?: ReactElement;
-    /**
-     * The item has to be marked as selected
-     */
-    selected?: boolean;
-    /**
-     * Id of the item that has to be marked as selected;
-     */
-    selectedItem?: string;
-    /**
-     * Items that are going to be displayed inside
-     * the collapsable
-     */
-    items: NavItemLink[];
-}
-export declare const DrawerCollapsableItem: ({ text, icon, selected, selectedItem, items, }: DrawerCollapsableItemProps) => JSX.Element;

package/dist/esm/types/components/drawers/drawer-collapsable-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./drawer-collapsable-item";

package/dist/esm/types/components/drawers/drawer-section/drawer-section.mock.d.ts

@@ -1,2 +0,0 @@
-import { NavItem } from "../drawer/drawer.types";
-export declare const SectionItems: NavItem[];

package/dist/esm/types/components/inputs/enhanced-autocomplete/enhanced-autocomplete.d.ts

@@ -1,10 +0,0 @@
-import { AutocompleteProps, ChipTypeMap } from "@mui/material";
-import React from "react";
-export interface EnhancedAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
-    label: string;
-    helperText?: string;
-    color?: string;
-    fetching?: boolean;
-    onChangeValue?: (value: T) => void;
-}
-export declare const EnhancedAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType<any> = "div">(props: EnhancedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;

package/dist/esm/types/components/inputs/enhanced-autocomplete/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-autocomplete";

package/dist/esm/types/components/inputs/enhanced-select/enhanced-select.d.ts

@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-import { SelectInputProps } from "@mui/material/Select/SelectInput";
-export type EnhancedSelectSize = "small" | "medium";
-export interface EnhancedSelectProps<T> {
-    label: string;
-    value: T;
-    loading?: boolean;
-    fetching?: boolean;
-    size?: EnhancedSelectSize;
-    color?: string;
-    fullWidth?: boolean;
-    children?: ReactNode;
-    onChange?: SelectInputProps<T>["onChange"];
-}
-export declare const EnhancedSelect: <T extends React.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;

package/dist/esm/types/components/inputs/enhanced-select/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-select";

package/dist/esm/types/components/inputs/enhanced-text-field/enhanced-text-field.d.ts

@@ -1,7 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-export type EnhancedTextFieldProps = TextFieldProps & {
-    fetching?: boolean;
-    loading?: boolean;
-    hexColor?: string;
-};
-export declare const EnhancedTextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: EnhancedTextFieldProps) => JSX.Element;

package/dist/esm/types/components/inputs/enhanced-text-field/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-text-field";

package/dist/esm/types/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-import { AppBarElement } from "../../components/app-bars/app-bar";
-import { DrawerElement } from "../../components/drawers/drawer";
-export interface AppBarWithDrawerLayoutProps {
-    children: [DrawerElement, AppBarElement, ReactNode];
-}
-export declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;

package/dist/esm/types/layouts/app-bar-with-drawer-layout/index.d.ts

@@ -1 +0,0 @@
-export * from "./app-bar-with-drawer-layout";

package/src/components/app-bars/app-bar/app-bar.stories.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
-import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../../drawers/drawer";
-import { AppBarProps } from "./app-bar.types";
-
-export default {
-  title: "Components/AppBars/AppBar",
-  component: AppBar,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof AppBar>;
-
-const Template = createTemplate((args: AppBarProps) => {
-  return (
-    <DrawerProvider>
-      <AppBar {...args} />
-    </DrawerProvider>
-  );
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  title: "Lorem ipsum",
-  menu: true,
-};
-
-export const WithSearch = Template.bind({});
-WithSearch.args = {
-  title: "Lorem ipsum",
-  search: true,
-  menu: true,
-};
-
-export const WithoutTitle = Template.bind({});
-WithoutTitle.args = {
-  menu: true,
-};
-
-export const WihtoutMenu = Template.bind({});
-WihtoutMenu.args = {
-  title: "Lorem ipsum",
-  menu: false,
-};
-
-export const WithProfile = Template.bind({});
-WithProfile.args = {
-  title: "Lorem ipsum",
-  menu: true,
-  profile: {
-    name: "Test user",
-  },
-};

package/src/components/app-bars/app-bar/app-bar.test.tsx

@@ -1,142 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "~/tests/testing-library";
-import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../../drawers/drawer";
-import { AppBarProfile } from "./app-bar.types";
-import userEvent from "@testing-library/user-event";
-
-const profile: AppBarProfile = {
-  name: "John Smith",
-};
-
-describe("AppBar", () => {
-  const renderComponent = ({
-    search,
-    title,
-    menu,
-    initialOpen,
-    profile,
-  }: {
-    title?: string;
-    search?: boolean;
-    menu?: boolean;
-    initialOpen?: boolean;
-    profile?: AppBarProfile;
-  } = {}) => {
-    const onClickSignOut = jest.fn();
-    const instance = render(
-      <DrawerProvider initialOpen={initialOpen}>
-        <AppBar
-          title={title}
-          menu={menu}
-          search={search}
-          profile={profile}
-          onClickSignOut={onClickSignOut}
-        />
-      </DrawerProvider>,
-    );
-    return { ...instance, onClickSignOut };
-  };
-
-  const clickOutsideProfileMenu = () => {
-    const child = screen.getByRole("presentation").firstChild;
-    expect(child).toBeDefined();
-    child && fireEvent.click(child);
-  };
-
-  describe("title", () => {
-    it("wouldn't render a title if it's not defined", () => {
-      renderComponent({ title: undefined });
-
-      expect(screen.queryByRole("heading", { level: 1 })).not.toBeInTheDocument();
-    });
-
-    it("would render a title if it's defined", () => {
-      renderComponent({ title: "Lorem ipsum" });
-
-      expect(screen.queryByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
-    });
-  });
-
-  describe("menu", () => {
-    it("wouldn't render a menu button if menu is not defined", () => {
-      renderComponent();
-
-      expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
-    });
-
-    it("wouldn't render a menu button if menu is false", () => {
-      renderComponent({ menu: false });
-
-      expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
-    });
-
-    it("would render a menu button if menu is true", () => {
-      renderComponent({ menu: true });
-
-      expect(screen.getByRole("button", { name: /open drawer/i })).toBeInTheDocument();
-    });
-  });
-
-  describe("search", () => {
-    it("wouldn't render a search box by default", () => {
-      renderComponent();
-
-      expect(screen.queryByRole("search")).not.toBeInTheDocument();
-    });
-
-    it("wouldn't render a search box if search is false", () => {
-      renderComponent({ search: false });
-
-      expect(screen.queryByRole("search")).not.toBeInTheDocument();
-    });
-
-    it("would render a search box if search is true", () => {
-      renderComponent({ search: true });
-
-      expect(screen.getByRole("search")).toBeInTheDocument();
-    });
-  });
-
-  describe("profile", () => {
-    it("wouldn't render the user profile if it's not set", () => {
-      renderComponent({ profile: undefined });
-
-      expect(screen.queryByRole("button", { name: /menu button/i })).not.toBeInTheDocument();
-    });
-
-    it("would render the user profile if the profile is defined", () => {
-      renderComponent({ profile });
-
-      expect(screen.getByRole("button", { name: /menu button/i })).toBeInTheDocument();
-    });
-
-    describe("the user click the profile button", () => {
-      it("would open the menu", async () => {
-        renderComponent({ profile });
-
-        await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
-
-        expect(screen.getByRole("menu")).toBeInTheDocument();
-      });
-    });
-
-    it("would call onClickSignOut if the user press the sign out button", async () => {
-      const { onClickSignOut } = renderComponent({ profile });
-
-      await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
-      await userEvent.click(screen.getByRole("menuitem", { name: /sign out/i }));
-
-      expect(onClickSignOut).toHaveBeenCalledTimes(1);
-    });
-
-    it("would hide the menu if the focus changes to an external element", async () => {
-      renderComponent({ profile, title: "lorem ipsum" });
-
-      await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
-      clickOutsideProfileMenu();
-
-      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-    });
-  });
-});