@primer/react/dist/ActionBar/ActionBar.d.ts

An implementation of GitHub's Primer Design System using React

import { ButtonProps, IconButtonProps } from "../Button/types.js";
import { ActionListItemProps } from "../ActionList/shared.js";
import React from "react";

//#region src/ActionBar/ActionBar.d.ts
type Size = 'small' | 'medium' | 'large';
type A11yProps = {
  /** When provided, a label is added to the action bar */'aria-label': React.AriaAttributes['aria-label'];
  'aria-labelledby'?: undefined;
} | {
  'aria-label'?: undefined;
  /**
   * When provided, uses the element with that ID as the accessible name for the ActionBar
   */
  'aria-labelledby': React.AriaAttributes['aria-labelledby'];
};
type GapScale = 'none' | 'condensed';
type ActionBarProps = {
  /**
   * Size of the action bar
   * @default 'medium'
   * */
  size?: Size; /** Buttons in the action bar */
  children: React.ReactNode;
  /**
   * Allows ActionBar to be flush with the container
   * @default false
   * */
  flush?: boolean; /** Custom className */
  className?: string;
  /**
   * Horizontal gap scale between items (mirrors Stack gap scale)
   * @default 'condensed'
   */
  gap?: GapScale;
} & A11yProps;
type ActionBarIconButtonProps = {
  disabled?: boolean;
} & IconButtonProps;
type ActionBarButtonProps = {
  disabled?: boolean;
} & ButtonProps;
type ActionBarMenuItemProps = ({
  /**
   * Type of menu item to be rendered in the menu (action | group).
   * Defaults to 'action' if not specified.
   */
  type?: 'action';
  /**
   * Whether the menu item is disabled.
   * All interactions will be prevented if true.
   */
  disabled?: boolean;
  /**
   * Leading visual rendered for the menu item.
   */
  leadingVisual?: ActionBarIconButtonProps['icon'];
  /**
   * Trailing visual rendered for the menu item.
   */
  trailingVisual?: ActionBarIconButtonProps['icon'] | string;
  /**
   * Label for the menu item.
   */
  label: string;
  /**
   * Callback fired when the menu item is selected.
   */
  onClick?: ActionListItemProps['onSelect'];
  /**
   * Nested menu items to render within a submenu.
   * If provided, the menu item will render a submenu.
   */
  items?: ActionBarMenuItemProps[];
} & Pick<ActionListItemProps, 'variant'>) | {
  type: 'divider';
};
type ActionBarMenuProps = {
  /** Accessible label for the menu button */'aria-label': string; /** Icon for the menu button */
  icon: ActionBarIconButtonProps['icon'];
  items: ActionBarMenuItemProps[];
  /**
   * Icon displayed when the menu item is overflowing.
   * If 'none' is provided, no icon will be shown in the overflow menu.
   */
  overflowIcon?: ActionBarIconButtonProps['icon'] | 'none';
  /**
   * Target element to return focus to when the menu is closed.
   */
  returnFocusRef?: React.RefObject<HTMLElement>;
} & IconButtonProps;
//#endregion
export { ActionBarButtonProps, ActionBarIconButtonProps, ActionBarMenuItemProps, ActionBarMenuProps, ActionBarProps };