@primer/react 38.30.0-rc.8b6124d07 → 38.30.0-rc.a4950797a

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Minor Changes
 
+- [#8048](https://github.com/primer/react/pull/8048) [`0add561`](https://github.com/primer/react/commit/0add5615720d17d69c77b014786c5e17e4337bb0) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - ActionBar: Add `ActionBar.Button` for rendering text buttons that overflow into the menu, alongside the existing `ActionBar.IconButton`
+
 - [#8031](https://github.com/primer/react/pull/8031) [`cb79351`](https://github.com/primer/react/commit/cb79351f29b9a1aea7bacf890eca97a5c9d97590) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Add a `NavList.Heading` slot that names the navigation region. It renders an `h2`
   by default (configurable to `h3` via `as`), supports a `visuallyHidden` variant,
   labels the `nav` landmark via `aria-labelledby`, and makes `NavList.Group`

package/dist/ActionBar/ActionBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ActionListItemProps } from '../ActionList';
-import type { IconButtonProps } from '../Button';
+import type { ButtonProps, IconButtonProps } from '../Button';
 type Size = 'small' | 'medium' | 'large';
 type A11yProps = {
     /** When provided, a label is added to the action bar */
@@ -38,6 +38,9 @@ export type ActionBarProps = {
 export type ActionBarIconButtonProps = {
     disabled?: boolean;
 } & IconButtonProps;
+export type ActionBarButtonProps = {
+    disabled?: boolean;
+} & ButtonProps;
 export type ActionBarMenuItemProps = ({
     /**
      * Type of menu item to be rendered in the menu (action | group).
@@ -91,6 +94,26 @@ export type ActionBarMenuProps = {
 } & IconButtonProps;
 export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
 export declare const ActionBarIconButton: React.ForwardRefExoticComponent<ActionBarIconButtonProps & React.RefAttributes<unknown>>;
+export declare const ActionBarButton: React.ForwardRefExoticComponent<{
+    disabled?: boolean;
+} & {
+    alignContent?: import("../Button/types").AlignContent;
+    icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
+    leadingVisual?: React.ElementType | React.ReactElement<any> | null;
+    trailingVisual?: React.ElementType | React.ReactElement<any> | null;
+    trailingAction?: React.ElementType | null;
+    children?: React.ReactNode;
+    count?: number | string;
+} & {
+    variant?: import("../Button/types").VariantType;
+    size?: import("../Button/types").Size;
+    disabled?: boolean;
+    block?: boolean;
+    loading?: boolean;
+    loadingAnnouncement?: string;
+    inactive?: boolean;
+    labelWrap?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<unknown>>;
 export declare const ActionBarGroup: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<unknown>>;

package/dist/ActionBar/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}

package/dist/ActionBar/ActionBar.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useRef, useState, useMemo, useCallback, useContext,
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
 import { IconButton } from '../Button/IconButton.js';
+import { ButtonComponent } from '../Button/Button.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
@@ -359,6 +360,97 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
     "data-overflowing": dataOverflowingAttr
   });
 });
+const ActionBarButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(19);
+  let disabled;
+  let onClick;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      disabled,
+      onClick,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = disabled;
+    $[2] = onClick;
+    $[3] = props;
+  } else {
+    disabled = $[1];
+    onClick = $[2];
+    props = $[3];
+  }
+  const ref = useRef(null);
+  const mergedRef = useMergedRefs(forwardedRef, ref);
+  const {
+    size
+  } = React.useContext(ActionBarContext);
+  const {
+    children,
+    leadingVisual
+  } = props;
+  const t1 = typeof leadingVisual === "function" ? leadingVisual : undefined;
+  const t2 = !!disabled;
+  const t3 = onClick;
+  let t4;
+  if ($[4] !== children || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+    t4 = {
+      type: "action",
+      label: children,
+      icon: t1,
+      disabled: t2,
+      onClick: t3
+    };
+    $[4] = children;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const {
+    dataOverflowingAttr
+  } = useActionBarItem(ref, t4);
+  let t5;
+  if ($[9] !== disabled || $[10] !== onClick) {
+    t5 = event => {
+      var _onClick;
+      if (disabled) {
+        return;
+      }
+      (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
+    };
+    $[9] = disabled;
+    $[10] = onClick;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const clickHandler = t5;
+  let t6;
+  if ($[12] !== clickHandler || $[13] !== dataOverflowingAttr || $[14] !== disabled || $[15] !== mergedRef || $[16] !== props || $[17] !== size) {
+    t6 = /*#__PURE__*/jsx(ButtonComponent, {
+      "aria-disabled": disabled,
+      ref: mergedRef,
+      size: size,
+      onClick: clickHandler,
+      ...props,
+      variant: "invisible",
+      "data-overflowing": dataOverflowingAttr
+    });
+    $[12] = clickHandler;
+    $[13] = dataOverflowingAttr;
+    $[14] = disabled;
+    $[15] = mergedRef;
+    $[16] = props;
+    $[17] = size;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+});
 const ActionBarGroupContext = /*#__PURE__*/React.createContext(null);
 const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(10);
@@ -611,10 +703,10 @@ function _temp4(t0) {
         typeof onClick === "function" && onClick(event);
       },
       disabled: disabled,
-      children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: [Icon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
         children: /*#__PURE__*/jsx(Icon, {})
-      }), label]
-    }, label);
+      }) : null, label]
+    }, id);
   }
   if (menuItem.type === "menu") {
     const menuItems = menuItem.items;
@@ -645,4 +737,4 @@ function _temp7(item, index) {
   return renderMenuItem(item, index);
 }
 
-export { ActionBar, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };
+export { ActionBar, ActionBarButton, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };

package/dist/ActionBar/index.d.ts

@@ -1,6 +1,26 @@
-export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
+export type { ActionBarProps, ActionBarButtonProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
 declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
     IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
+    Button: import("react").ForwardRefExoticComponent<{
+        disabled?: boolean;
+    } & {
+        alignContent?: import("../Button/types").AlignContent;
+        icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
+        leadingVisual?: React.ElementType | React.ReactElement<any> | null;
+        trailingVisual?: React.ElementType | React.ReactElement<any> | null;
+        trailingAction?: React.ElementType | null;
+        children?: React.ReactNode;
+        count?: number | string;
+    } & {
+        variant?: import("../Button/types").VariantType;
+        size?: import("../Button/types").Size;
+        disabled?: boolean;
+        block?: boolean;
+        loading?: boolean;
+        loadingAnnouncement?: string;
+        inactive?: boolean;
+        labelWrap?: boolean;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>;
     Divider: () => import("react").JSX.Element;
     Group: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;

package/dist/ActionBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAC,cAAc,EAAE,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAA;AAE3F,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAKb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AAQA,YAAY,EAAC,cAAc,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAA;AAEjH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}

package/dist/ActionBar/index.js

@@ -1,7 +1,8 @@
-import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarIconButton } from './ActionBar.js';
+import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarButton, ActionBarIconButton } from './ActionBar.js';
 
 const ActionBar = Object.assign(ActionBar$1, {
   IconButton: ActionBarIconButton,
+  Button: ActionBarButton,
   Divider: VerticalDivider,
   Group: ActionBarGroup,
   Menu: ActionBarMenu

package/generated/components.json

@@ -98,6 +98,34 @@
             "url": "/react/IconButton"
           }
         },
+        {
+          "name": "ActionBar.Button",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "defaultValue": "",
+              "required": true,
+              "description": "The text content of the button."
+            },
+            {
+              "name": "leadingVisual",
+              "type": "Component",
+              "defaultValue": "",
+              "description": "Provide an octicon to render before the button text. It will also be shown when the button overflows into the menu."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "defaultValue": "",
+              "description": "Provides a disabled state for the button. The button will remain focusable, and have `aria-disabled` applied."
+            }
+          ],
+          "passthrough": {
+            "element": "Button",
+            "url": "/react/Button"
+          }
+        },
         {
           "name": "ActionBar.Divider",
           "props": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.30.0-rc.8b6124d07",
+  "version": "38.30.0-rc.a4950797a",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",