@primer/react-brand 0.51.0 → 0.51.1-rc.77165dfc

package/lib/ActionMenu/ActionMenu.d.ts

@@ -1,4 +1,6 @@
 import React, { PropsWithChildren, Ref, ReactElement } from 'react';
+import { ButtonProps } from '../';
+import { Icon } from '@primer/octicons-react';
 import { PositionSettings } from '@primer/behaviors';
 import type { BaseProps } from '../component-helpers';
 /**
@@ -6,7 +8,10 @@ import type { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css';
 export declare const actionMenuOverlaySides: PositionSettings["side"][];
-export type ActionMenuSizes = 'small' | 'medium';
+export declare const ActionMenuSizes: readonly ["small", "medium"];
+export declare const ActionMenuButtonModes: readonly ["default", "split-button"];
+export type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number];
+export type ActionMenuSizes = (typeof ActionMenuSizes)[number];
 export type ActionMenuProps = {
     /**
      * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
@@ -44,6 +49,12 @@ export type ActionMenuProps = {
      */
     size?: ActionMenuSizes;
     menuSide?: PositionSettings['side'];
+    /**
+     * Alternative behavior for the button and menu items
+     * - `default`: The button and menu items behave as a standard button and menu item.
+     * - `split-button`: The button behaves as a split button, and the menu items behave as links.
+     */
+    mode?: ActionMenuButtonModes;
 } & BaseProps<HTMLDivElement>;
 type ActionMenuContextType = {
     size?: ActionMenuSizes;
@@ -53,6 +64,8 @@ export declare const useActionMenuContext: () => ActionMenuContextType;
 export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
 type ActionMenuButtonProps = PropsWithChildren<Ref<HTMLButtonElement>> & {
     id?: string;
+    as?: ButtonProps<'a'>['as'];
+    href?: ButtonProps<'a'>['href'];
     ref?: React.RefObject<HTMLButtonElement>;
     className?: string;
     menuOpen?: boolean;
@@ -60,15 +73,25 @@ type ActionMenuButtonProps = PropsWithChildren<Ref<HTMLButtonElement>> & {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     'data-testid'?: string;
     size?: ActionMenuSizes;
+    _mode?: ActionMenuButtonModes;
+    variant?: ButtonProps<'a'>['variant'];
+    leadingVisual?: ButtonProps<'a'>['leadingVisual'];
 };
-type ActionMenuItemProps = {
-    value: string;
+type ActionMenuItemBaseProps = {
     handler?: (newValue: string) => void;
-    selected?: boolean;
-    type?: 'none' | 'single';
+    type?: 'none' | 'single' | 'link';
     disabled?: boolean;
     size?: ActionMenuSizes;
+    leadingVisual?: React.ReactElement | React.ReactNode | Icon;
 } & PropsWithChildren<React.HTMLProps<HTMLLIElement>>;
+type ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {
+    as: 'a';
+} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>;
+type ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {
+    as?: string;
+    value?: string;
+    selected?: boolean;
+} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>;
 type ActionMenuOverlayProps = PropsWithChildren<Ref<HTMLUListElement>> & {
     'aria-label': string;
     id?: string;
@@ -119,13 +142,21 @@ export declare const ActionMenu: React.NamedExoticComponent<{
      */
     size?: ActionMenuSizes;
     menuSide?: PositionSettings["side"];
+    /**
+     * Alternative behavior for the button and menu items
+     * - `default`: The button and menu items behave as a standard button and menu item.
+     * - `split-button`: The button behaves as a split button, and the menu items behave as links.
+     */
+    mode?: ActionMenuButtonModes;
 } & BaseProps<HTMLDivElement>> & {
-    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
 } & {
     Button: React.ForwardRefExoticComponent<(Omit<((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) & {
         children?: React.ReactNode | undefined;
     } & {
         id?: string;
+        as?: ButtonProps<"a">["as"];
+        href?: ButtonProps<"a">["href"];
         ref?: React.RefObject<HTMLButtonElement>;
         className?: string;
         menuOpen?: boolean;
@@ -133,10 +164,15 @@ export declare const ActionMenu: React.NamedExoticComponent<{
         onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
         'data-testid'?: string;
         size?: ActionMenuSizes;
+        _mode?: ActionMenuButtonModes;
+        variant?: ButtonProps<"a">["variant"];
+        leadingVisual?: ButtonProps<"a">["leadingVisual"];
     }, "ref"> | Omit<React.RefObject<HTMLButtonElement> & {
         children?: React.ReactNode | undefined;
     } & {
         id?: string;
+        as?: ButtonProps<"a">["as"];
+        href?: ButtonProps<"a">["href"];
         ref?: React.RefObject<HTMLButtonElement>;
         className?: string;
         menuOpen?: boolean;
@@ -144,8 +180,11 @@ export declare const ActionMenu: React.NamedExoticComponent<{
         onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
         'data-testid'?: string;
         size?: ActionMenuSizes;
+        _mode?: ActionMenuButtonModes;
+        variant?: ButtonProps<"a">["variant"];
+        leadingVisual?: ButtonProps<"a">["leadingVisual"];
     }, "ref">) & React.RefAttributes<HTMLButtonElement>>;
-    Item: ({ children, className, disabled, handler, selected, type, value, ...props }: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ as, children, className, disabled, handler, selected, type, value, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => import("react/jsx-runtime").JSX.Element;
     Overlay: React.ForwardRefExoticComponent<(Omit<((instance: HTMLUListElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) & {
         children?: React.ReactNode | undefined;
     } & {