@primer/react 38.1.0-rc.6118e2738 → 38.1.0-rc.6cb1657df

package/CHANGELOG.md

@@ -4,18 +4,36 @@
 
 ### Minor Changes
 
+- [#7065](https://github.com/primer/react/pull/7065) [`9090053`](https://github.com/primer/react/commit/90900532e7566da2d12ff74685678463d5c7f247) Thanks [@TylerJDev](https://github.com/TylerJDev)! - ActionBar: Add `ActionBar.Menu` subcomponent
+
+- [#7056](https://github.com/primer/react/pull/7056) [`6ff2797`](https://github.com/primer/react/commit/6ff2797662bf7ab8cf8575d13ad061923bf0d9c1) Thanks [@adierkens](https://github.com/adierkens)! - Update active indicators for ActionList & FilteredActionList to follow content height
+
 - [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
 
-- [#7070](https://github.com/primer/react/pull/7070) [`f7dfa7d`](https://github.com/primer/react/commit/f7dfa7d5954961834d0ec360d6b218237e75bf96) Thanks [@hectahertz](https://github.com/hectahertz)! - Add SSR warnings to useMediaUnsafeSSR and useResponsiveValue.
+- [#7109](https://github.com/primer/react/pull/7109) [`34e7108`](https://github.com/primer/react/commit/34e71089ea7668d7b0ab4572f125d13b998e8754) Thanks [@adierkens](https://github.com/adierkens)! - Add support to ActionList for 'tablist' and 'tab' roles
+
+- [#7112](https://github.com/primer/react/pull/7112) [`7160709`](https://github.com/primer/react/commit/71607096f1ed60455313d3e1e26ce803f985307c) Thanks [@hectahertz](https://github.com/hectahertz)! - PageHeader: Remove useResponsiveValue hook from TitleArea variant prop
+
+  Migrates PageHeader.TitleArea's `variant` prop to use `getResponsiveAttributes` following ADR-018 for SSR-safe responsive values. This prevents layout shift during hydration when using responsive variants.
 
 ### Patch Changes
 
+- [#7114](https://github.com/primer/react/pull/7114) [`15a13c6`](https://github.com/primer/react/commit/15a13c64917676d47e4ce899ce1f96939cc754d6) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - ActionList: Fix trailing action button to take full height.
+
+- [#7124](https://github.com/primer/react/pull/7124) [`a746a83`](https://github.com/primer/react/commit/a746a83e68da54a7f66161b0f1d68bfbdc071ce6) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Fixed Timeline.Break when followed by a condensed item and clip sidebar for condensed items.
+
 - [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
 
+- [#7115](https://github.com/primer/react/pull/7115) [`21cefb9`](https://github.com/primer/react/commit/21cefb96c1ed7d00d6b16f29ea5d358c6502d160) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionBar: IconButton no longer adds it's own `data-testid`
+
 - [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element
 
 - [#7097](https://github.com/primer/react/pull/7097) [`12fad7a`](https://github.com/primer/react/commit/12fad7af4d9d31898dfff5d3419987100b398d9e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix UnderlineWrapper html structure
 
+- [#7101](https://github.com/primer/react/pull/7101) [`9382e52`](https://github.com/primer/react/commit/9382e529a8a4a0204ce0c412a0c8840cfbfe9f2c) Thanks [@hectahertz](https://github.com/hectahertz)! - Remove use of useResponsiveValue hook - PageLayout
+
+- [#7128](https://github.com/primer/react/pull/7128) [`4d0f08a`](https://github.com/primer/react/commit/4d0f08a24750704374655c3dc0450012f905bca0) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Link: Remove deprecated underline prop. (Not used in github-ui)
+
 ## 38.0.0
 
 ### Major Changes

package/README.md

@@ -28,20 +28,19 @@ To install `@primer/react` in your project, you will need to run the following
 command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @primer/react @primer/primitives styled-components@5.x
+npm install -S @primer/react @primer/primitives
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/), use the following command instead:
 
 ```bash
-yarn add @primer/react @primer/primitives styled-components@5.x
+yarn add @primer/react @primer/primitives
 ```
 
-This command will install three packages in your project:
+This command will install two packages in your project:
 
 - `@primer/react`: used to import and use all the components from Primer
 - `@primer/primitives`: used to include the design tokens from Primer
-- `styled-components`: used to style components
 
 To learn more about how to use `@primer/react`, visit our documentation site at:
 [primer.style](https://primer.style).
@@ -59,26 +58,32 @@ function App() {
 ```
 
 At the root of your application, you'll also want to include our
-`ThemeProvider` and `BaseStyles` components along with styles from the
+`BaseStyles` component along with styles from the
 `@primer/primitives` package. For example:
 
 ```tsx
 // Import each of the themes you would like to use, by default we are including
 // the light theme below
 import '@primer/primitives/dist/css/functional/themes/light.css'
-import {BaseStyles, ThemeProvider} from '@primer/react'
+import {BaseStyles} from '@primer/react'
 
 function RootLayout() {
   return (
-    <ThemeProvider>
-      <BaseStyles>
-        <App />
-      </BaseStyles>
-    </ThemeProvider>
+    <BaseStyles>
+      <App />
+    </BaseStyles>
   )
 }
 ```
 
+In addition, you will need to add the following attributes to your `html` element:
+
+```html
+<html data-light-theme="light" data-dark-theme="dark" data-color-mode="auto">
+  <!-- ... -->
+</html>
+```
+
 ## 📖 Documentation
 
 The documentation for `@primer/react` lives at [primer.style](https://primer.style). There, you'll find detailed documentation on getting started, all of the components, our theme, our principles, and more.

package/dist/ActionBar/ActionBar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ActionListItemProps } from '../ActionList';
 import type { IconButtonProps } from '../Button';
 type Size = 'small' | 'medium' | 'large';
 type A11yProps = {
@@ -37,11 +38,80 @@ export type ActionBarProps = {
 export type ActionBarIconButtonProps = {
     disabled?: boolean;
 } & IconButtonProps;
+export 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';
+};
+export 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';
+} & IconButtonProps;
 export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
 export declare const ActionBarIconButton: React.ForwardRefExoticComponent<ActionBarIconButtonProps & React.RefAttributes<unknown>>;
 export declare const ActionBarGroup: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<unknown>>;
+export declare const ActionBarMenu: React.ForwardRefExoticComponent<{
+    /** 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";
+} & {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} & {
+    icon: React.ElementType;
+    unsafeDisableTooltip?: boolean;
+    description?: string;
+    tooltipDirection?: import("../TooltipV2").TooltipDirection;
+    keyshortcuts?: string;
+    keybindingHint?: string;
+} & Omit<import("..").ButtonBaseProps, "aria-label" | "aria-labelledby"> & React.RefAttributes<unknown>>;
 export declare const VerticalDivider: () => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=ActionBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAS7E,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AA8C9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AA+E7E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAyLvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FAsD/B,CAAA;AAMD,eAAO,MAAM,cAAc;;iCA6BzB,CAAA;AAEF,eAAO,MAAM,eAAe,gCAoB3B,CAAA"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAa,KAAK,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAOlE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAoD9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AAE7E,MAAM,MAAM,sBAAsB,GAC9B,CAAC;IACC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,cAAc,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAA;CACjC,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,GACzC;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAEL,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAA;IACpB,+BAA+B;IAC/B,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IACtC,KAAK,EAAE,sBAAsB,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CACzD,GAAG,eAAe,CAAA;AAgInB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgNvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FAqD/B,CAAA;AAMD,eAAO,MAAM,cAAc;;iCA6BzB,CAAA;AAEF,eAAO,MAAM,aAAa;IAtbxB,2CAA2C;kBAC7B,MAAM;IACpB,+BAA+B;UACzB,wBAAwB,CAAC,MAAM,CAAC;WAC/B,sBAAsB,EAAE;IAC/B;;;OAGG;mBACY,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM;;;;;;;;;;;wGAydzD,CAAA;AAED,eAAO,MAAM,eAAe,gCAoB3B,CAAA"}