diff --git a/examples/with-vite/src/components/CustomCard.tsx b/examples/with-vite/src/components/CustomCard.tsx index 41925362..5aca59c7 100644 --- a/examples/with-vite/src/components/CustomCard.tsx +++ b/examples/with-vite/src/components/CustomCard.tsx @@ -1,4 +1,10 @@ -import { Card, Menu, MenuItem, Panel } from "@versini/ui-components"; +import { + ButtonIcon, + Card, + Menu, + MenuItem, + Panel, +} from "@versini/ui-components"; import { IconChart, IconHistory, @@ -27,7 +33,13 @@ export const CustomCard = () => {

Kitchen Sink

- }> + + + + } + > } diff --git a/examples/with-webpack/src/components/CustomCard.tsx b/examples/with-webpack/src/components/CustomCard.tsx index 41925362..5aca59c7 100644 --- a/examples/with-webpack/src/components/CustomCard.tsx +++ b/examples/with-webpack/src/components/CustomCard.tsx @@ -1,4 +1,10 @@ -import { Card, Menu, MenuItem, Panel } from "@versini/ui-components"; +import { + ButtonIcon, + Card, + Menu, + MenuItem, + Panel, +} from "@versini/ui-components"; import { IconChart, IconHistory, @@ -27,7 +33,13 @@ export const CustomCard = () => {

Kitchen Sink

- }> + + + + } + > } diff --git a/packages/documentation/src/Components/Header.stories.tsx b/packages/documentation/src/Components/Header.stories.tsx index 165329f6..f78427d2 100644 --- a/packages/documentation/src/Components/Header.stories.tsx +++ b/packages/documentation/src/Components/Header.stories.tsx @@ -143,7 +143,13 @@ const CommonTemplate = () => {
- }> + + + + } + > } /> } /> } /> diff --git a/packages/documentation/src/Components/Menu.stories.tsx b/packages/documentation/src/Components/Menu.stories.tsx index f848dfa9..00ba7ae5 100644 --- a/packages/documentation/src/Components/Menu.stories.tsx +++ b/packages/documentation/src/Components/Menu.stories.tsx @@ -1,6 +1,7 @@ import type { Story } from "@ladle/react"; import { Button, + ButtonIcon, Menu, MenuItem, MenuSeparator, @@ -61,7 +62,15 @@ export const Basic: Story = (args) => ( - } spacing={{ r: 2 }} {...args}> + + + + } + spacing={{ r: 2 }} + {...args} + > @@ -78,7 +87,15 @@ export const WithIcons: Story = (args) => ( - } spacing={{ r: 2 }} {...args}> + + + + } + spacing={{ r: 2 }} + {...args} + > } /> } /> } /> @@ -123,7 +140,15 @@ export const WithMessageBox: Story = (args) => { - } spacing={{ r: 2 }} {...args}> + + + + } + spacing={{ r: 2 }} + {...args} + > } /> } /> } /> diff --git a/packages/documentation/src/Styles/DarkMode.stories.tsx b/packages/documentation/src/Styles/DarkMode.stories.tsx index 17145313..40568626 100644 --- a/packages/documentation/src/Styles/DarkMode.stories.tsx +++ b/packages/documentation/src/Styles/DarkMode.stories.tsx @@ -125,7 +125,13 @@ const CommonTemplate = () => {
- }> + + + + } + > } /> } /> } /> diff --git a/packages/ui-components/src/components/Button/ButtonTypes.d.ts b/packages/ui-components/src/components/Button/ButtonTypes.d.ts index 71c259d6..5b12cacf 100644 --- a/packages/ui-components/src/components/Button/ButtonTypes.d.ts +++ b/packages/ui-components/src/components/Button/ButtonTypes.d.ts @@ -24,6 +24,11 @@ export type CommonButtonProps = { * @default false */ noBorder?: boolean; + /** + * Whether or not to render the Button with a hack for Safari click. + * @default false + */ + noInternalClick?: boolean; /** * Whether or not to render the Button with styles or not. * @default false diff --git a/packages/ui-components/src/components/Menu/Menu.tsx b/packages/ui-components/src/components/Menu/Menu.tsx index da736562..bd327190 100644 --- a/packages/ui-components/src/components/Menu/Menu.tsx +++ b/packages/ui-components/src/components/Menu/Menu.tsx @@ -20,11 +20,17 @@ import { useRole, useTypeahead, } from "@floating-ui/react"; -import { forwardRef, useContext, useEffect, useRef, useState } from "react"; +import React, { + forwardRef, + useContext, + useEffect, + useRef, + useState, +} from "react"; -import { ButtonIcon } from ".."; import { MenuContext } from "./MenuContext"; import type { MenuProps } from "./MenuTypes"; +import { getDisplayName } from "./utilities"; export const MenuComponent = forwardRef< HTMLButtonElement, @@ -32,9 +38,9 @@ export const MenuComponent = forwardRef< >( ( { + trigger, children, - label, - icon, + label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, spacing, @@ -92,6 +98,26 @@ export const MenuComponent = forwardRef< const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([click, role, dismiss, listNavigation, typeahead]); + const noInternalClick = + getDisplayName(trigger) === "Button" || + getDisplayName(trigger) === "ButtonIcon"; + + const triggerElement = React.cloneElement(trigger as React.ReactElement, { + mode, + focusMode, + spacing, + noInternalClick, + "aria-label": label, + "data-open": isOpen ? "" : undefined, + "data-focus-inside": hasFocusInside ? "" : undefined, + ref: useMergeRefs([refs.setReference, item.ref, userRef]), + ...getReferenceProps( + parent.getItemProps({ + ...props, + }), + ), + }); + // Event emitter allows you to communicate across tree components. // This effect closes all menus when an item gets clicked anywhere // in the tree. @@ -121,23 +147,7 @@ export const MenuComponent = forwardRef< return ( - - {label} - {icon} - + {triggerElement} {icon} - + {label && {label}} + ); }); diff --git a/packages/ui-components/src/components/Menu/MenuTypes.d.ts b/packages/ui-components/src/components/Menu/MenuTypes.d.ts index 1f21978d..cdceeb0b 100644 --- a/packages/ui-components/src/components/Menu/MenuTypes.d.ts +++ b/packages/ui-components/src/components/Menu/MenuTypes.d.ts @@ -1,7 +1,12 @@ import type { Placement } from "@floating-ui/react"; import type { SpacingProps } from "@versini/ui-private/dist/utilities"; +import React from "react"; -export interface MenuProps extends SpacingProps { +export type MenuProps = { + /** + * The component to use to open the menu, e.g. a ButtonIcon, a Button, etc. + */ + trigger: React.ReactNode; /** * The children to render. */ @@ -16,10 +21,6 @@ export interface MenuProps extends SpacingProps { * of the focus ring around the Button. */ focusMode?: "dark" | "light" | "system" | "alt-system"; - /** - * A React component of type Icon to be placed on the left of the label. - */ - icon?: React.ReactNode; /** * The type of Button trigger. This will change the color of the Button. */ @@ -33,9 +34,9 @@ export interface MenuProps extends SpacingProps { * @param open whether or not the menu is open */ onOpenChange?: (open: boolean) => void; -} +} & SpacingProps; -export interface MenuItemProps { +export type MenuItemProps = { /** * The label to use for the menu item. */ @@ -49,6 +50,6 @@ export interface MenuItemProps { * A React component of type Icon to be placed on the left of the label. */ icon?: React.ReactNode; -} +}; export type MenuSeparatorProps = React.HTMLAttributes; diff --git a/packages/ui-components/src/components/Menu/__tests__/Menu.test.tsx b/packages/ui-components/src/components/Menu/__tests__/Menu.test.tsx index 2e65176a..6f20275c 100644 --- a/packages/ui-components/src/components/Menu/__tests__/Menu.test.tsx +++ b/packages/ui-components/src/components/Menu/__tests__/Menu.test.tsx @@ -1,7 +1,8 @@ import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { IconSettings } from "@versini/ui-icons"; -import { Menu, MenuItem, MenuSeparator } from "../.."; +import { Button, ButtonIcon, Menu, MenuItem, MenuSeparator } from "../.."; const MENU_TRIGGER_LABEL = "Click Me"; const FIRST_MENU_ITEM = "Menu 1"; @@ -11,7 +12,25 @@ const FOURTH_MENU_ITEM = "Menu 4"; const FIFTH_MENU_ITEM = "Menu 5"; const SimpleMenu = ({ ...props }) => ( - + Click Me} {...props}> + + + + + + + +); + +const SimpleMenuIcon = ({ ...props }) => ( + + + + } + {...props} + > @@ -37,9 +56,14 @@ describe("Menu (exceptions)", () => { }); describe("Menu rendering", () => { - it("should render a menu with a trigger", () => { + it("should render a menu with a trigger", async () => { render(); - const trigger = screen.getByLabelText("Open menu"); + const trigger = await screen.findByLabelText("Open menu"); + expect(trigger).toBeInTheDocument(); + }); + it("should render a menu with a icon-only trigger", async () => { + render(); + const trigger = await screen.findByLabelText("Open menu"); expect(trigger).toBeInTheDocument(); }); }); @@ -133,7 +157,11 @@ describe("Menu behaviors", () => { it("should trigger the Menu onOpenChange callback when opened and closed", async () => { const onOpenChange = vi.fn(); const { user } = renderWithUserEvent( - + Click Me} + label={MENU_TRIGGER_LABEL} + onOpenChange={onOpenChange} + > @@ -158,7 +186,7 @@ describe("Menu behaviors", () => { it("should trigger the MenuItem onClick callback when a menuitem is selected", async () => { const onClick = vi.fn(); const { user } = renderWithUserEvent( - + Click Me} label={MENU_TRIGGER_LABEL}> @@ -180,7 +208,7 @@ describe("Menu behaviors", () => { it("should trigger the MenuItem onFocus callback when a menuitem is selected", async () => { const onFocus = vi.fn(); const { user } = renderWithUserEvent( - + Click Me} label={MENU_TRIGGER_LABEL}> diff --git a/packages/ui-components/src/components/Menu/__tests__/utilities.test.tsx b/packages/ui-components/src/components/Menu/__tests__/utilities.test.tsx new file mode 100644 index 00000000..42ff28e3 --- /dev/null +++ b/packages/ui-components/src/components/Menu/__tests__/utilities.test.tsx @@ -0,0 +1,98 @@ +import { Component } from "react"; +import { getDisplayName } from "../utilities"; + +describe("getDisplayName", () => { + it("returns display name for component when displayName is set", () => { + const Simple = () => { + return
; + }; + Simple.displayName = "Simple"; + expect(getDisplayName(Simple as any)).toBe("Simple"); + }); + + it("returns display name of html string component", () => { + expect(getDisplayName("input")).toBe("input"); + }); + + it("returns default display name for stateless named functions", () => { + const Named = function Example() {}; + expect(getDisplayName(Named)).toBe("Example"); + }); + + it("returns display name for component", () => { + class Simple extends Component { + render() { + return
; + } + } + expect(getDisplayName(Simple)).toBe("Simple"); + }); + + it("returns display name for component when displayName is set from static initializer", () => { + class Simple extends Component { + static displayName = "Simple"; + render() { + return
; + } + } + expect(getDisplayName(Simple)).toBe("Simple"); + }); + + it("returns display name for a stateless component", () => { + const Simple = () =>
; + + expect(getDisplayName(Simple)).toBe("Simple"); + }); + + it("returns default display name for stateless assigned functions", () => { + const Assigned = function () {}; + expect(getDisplayName(Assigned)).toBe("Assigned"); + }); + + it("returns default display name for stateless anonymous functions", () => { + expect(getDisplayName(() => {})).toBe("Component"); + }); + + it("returns default display name for stateless arrow functions", () => { + expect(getDisplayName(() =>
)).toBe("Component"); + }); + + it("should return 'Element' for invalid element", () => { + expect(getDisplayName(null)).toBe("Element"); + }); + + it("should return display name for named function with displayName", () => { + const NotSimple = () => { + return
; + }; + NotSimple.displayName = "Simple"; + expect(getDisplayName(NotSimple)).toBe("Simple"); + }); + + it("should return display name for object with displayName on type", () => { + const NotSimple = { + type: {}, + }; + NotSimple.type = { + displayName: "Simple", + }; + expect(getDisplayName(NotSimple)).toBe("Simple"); + }); + + it("should return display name for object with name on type", () => { + const NotSimple = { + type: {}, + }; + NotSimple.type = { + name: "Simple", + }; + expect(getDisplayName(NotSimple)).toBe("Simple"); + }); + + it("should return Component for object with no name or displayName", () => { + const NotSimple = { + type: {}, + }; + expect(getDisplayName(NotSimple)).toBe("Component"); + }); +}); diff --git a/packages/ui-components/src/components/Menu/utilities.ts b/packages/ui-components/src/components/Menu/utilities.ts new file mode 100644 index 00000000..34edb28d --- /dev/null +++ b/packages/ui-components/src/components/Menu/utilities.ts @@ -0,0 +1,15 @@ +export const getDisplayName = (element: any): string => { + if (typeof element === "string") { + return element; + } + if (typeof element === "function") { + return element.displayName || element.name || "Component"; + } + if (typeof element === "object" && element !== null && "type" in element) { + const type = element.type as any; + if (typeof type === "function" || typeof type === "object") { + return type.displayName || type.name || "Component"; + } + } + return "Element"; +}; diff --git a/packages/ui-components/src/components/private/BaseButton.tsx b/packages/ui-components/src/components/private/BaseButton.tsx index 2a229a43..51379f38 100644 --- a/packages/ui-components/src/components/private/BaseButton.tsx +++ b/packages/ui-components/src/components/private/BaseButton.tsx @@ -18,25 +18,32 @@ import type { ButtonProps } from "../Button/ButtonTypes"; */ const internalClick = ( e: React.MouseEvent, + noInternalClick: boolean, onClick?: (e: React.MouseEvent) => void, ) => { - if (!document.activeElement || document.activeElement !== e.currentTarget) { + if ( + !noInternalClick && + (!document.activeElement || document.activeElement !== e.currentTarget) + ) { typeof e?.currentTarget?.focus === "function" && e.currentTarget.focus(); } + typeof onClick === "function" && onClick(e); }; export const BaseButton = React.forwardRef( (buttonProps: any, ref) => { - const { onClick, ...otherProps } = buttonProps; + const { onClick, noInternalClick = false, ...otherProps } = buttonProps; return (