@primer/react-brand 0.59.2-rc.a1e5c66f → 0.60.0-rc.838d1aed

package/lib/ActionMenu/ActionMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, Ref, ReactElement } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../';
 import { type Icon } from '@primer/octicons-react';
 import { type PositionSettings } from '@primer/behaviors';
@@ -62,15 +62,10 @@ type ActionMenuContextType = {
 };
 export declare const useActionMenuContext: () => ActionMenuContextType;
 export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
-type ActionMenuButtonProps = PropsWithChildren<Ref<HTMLButtonElement>> & {
-    id?: string;
+type ActionMenuButtonProps = PropsWithChildren<BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>> & {
     as?: ButtonProps<'a'>['as'];
     href?: ButtonProps<'a'>['href'];
-    ref?: React.RefObject<HTMLButtonElement>;
-    className?: string;
     menuOpen?: boolean;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     'data-testid'?: string;
     size?: ActionMenuSizes;
     _mode?: ActionMenuButtonModes;
@@ -92,11 +87,9 @@ type ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {
     value?: string;
     selected?: boolean;
 } & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>;
-type ActionMenuOverlayProps = PropsWithChildren<Ref<HTMLUListElement>> & {
+type ActionMenuOverlayProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>> & {
     'aria-label': string;
     id?: string;
-    ref?: React.RefObject<HTMLUListElement>;
-    className?: string;
     'data-testid'?: string;
     menuOpen?: boolean;
     style?: React.CSSProperties;
@@ -151,61 +144,9 @@ export declare const ActionMenu: React.NamedExoticComponent<{
 } & BaseProps<HTMLDivElement>> & {
     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;
-        disabled?: boolean;
-        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;
-        disabled?: boolean;
-        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>>;
+    Button: React.ForwardRefExoticComponent<Omit<ActionMenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, 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;
-    } & {
-        'aria-label': string;
-        id?: string;
-        ref?: React.RefObject<HTMLUListElement>;
-        className?: string;
-        'data-testid'?: string;
-        menuOpen?: boolean;
-        style?: React.CSSProperties;
-    }, "ref"> | Omit<React.RefObject<HTMLUListElement> & {
-        children?: React.ReactNode | undefined;
-    } & {
-        'aria-label': string;
-        id?: string;
-        ref?: React.RefObject<HTMLUListElement>;
-        className?: string;
-        'data-testid'?: string;
-        menuOpen?: boolean;
-        style?: React.CSSProperties;
-    }, "ref">) & React.RefAttributes<HTMLUListElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<ActionMenuOverlayProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
     testIds: {
         root: string;
         readonly button: string;

package/lib/AnchorNav/useExpandedMenu.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const useExpandedMenu: (open: boolean, linkContainerRef: React.RefObject<HTMLElement>, innerContainerRef: React.RefObject<HTMLElement>, isNarrow: boolean, closeMenuCallback: () => void) => void;
+export declare const useExpandedMenu: (open: boolean, linkContainerRef: React.RefObject<HTMLElement | null>, innerContainerRef: React.RefObject<HTMLElement | null>, isNarrow: boolean, closeMenuCallback: () => void) => void;

package/lib/ButtonGroup/ButtonGroup.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 import { ButtonProps } from '../Button';
-type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
+export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
     children: PrimerBrandButtonType[] | PrimerBrandButtonType;
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
-    buttonsAs?: React.ElementType;
+    buttonsAs?: 'button' | 'a';
 };
 export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/ComparisonTable/ComparisonTable.d.ts

@@ -12,10 +12,10 @@ export type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {
     featuredColumn?: number;
 } & React.ComponentPropsWithoutRef<C>;
 export declare const _ComparisonTable: React.ForwardRefExoticComponent<Omit<ComparisonTableProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type RowProps = {
+type RowProps = React.HTMLAttributes<HTMLTableRowElement> & {
     header?: boolean;
 };
-export type CellProps = BaseProps<HTMLTableCellElement> & {
+export type CellProps = BaseProps<HTMLTableCellElement> & React.HTMLAttributes<HTMLTableCellElement> & {
     as?: 'td' | 'th';
 };
 export type FootnoteProps = BaseProps<HTMLParagraphElement>;

package/lib/FAQ/FAQGroup.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactElement } from 'react';
+import React from 'react';
 import { FAQSubheadingProps } from './';
 /**
  * Design tokens
@@ -10,7 +10,7 @@ declare function HeadingBase({ children, className, as, ...rest }: FAQSubheading
 export type FAQGroupProps = React.PropsWithChildren<{
     id?: string;
     defaultSelectedIndex?: number;
-    tabAttributes?: (children: ReactElement, index: number) => Record<string, unknown>;
+    tabAttributes?: (children: React.ReactNode, index: number) => Record<string, unknown>;
 }>;
 declare function FAQGroupBase({ children, id, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): import("react/jsx-runtime").JSX.Element;
 /**

package/lib/Grid/Grid.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import type { JSX } from 'react';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens

package/lib/IDE/IDE.d.ts

@@ -147,7 +147,7 @@ export declare const IDE: React.NamedExoticComponent<{
         readonly editorContent: string;
         readonly editorTabs: string;
     };
-    Chat: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<IDEChatProps, "ref"> & React.RefAttributes<IDEChatHandle>>>;
-    Editor: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<IDEEditorProps, "ref"> & React.RefAttributes<IDEEditorHandle>>>;
+    Chat: React.NamedExoticComponent<Omit<IDEChatProps, "ref"> & React.RefAttributes<IDEChatHandle>>;
+    Editor: React.NamedExoticComponent<Omit<IDEEditorProps, "ref"> & React.RefAttributes<IDEEditorHandle>>;
 };
 export {};

package/lib/Pillar/Pillar.d.ts

@@ -1,11 +1,10 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, type JSX } from 'react';
 import { HeadingProps, type ImageProps, LinkProps } from '..';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pillar/colors-with-modes.css';
-import type { Icon as IconProps } from '@primer/octicons-react';
 export declare const PillarIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultPillarIconColor: "default";
 export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {
@@ -24,8 +23,11 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
 type PillarImageProps = ImageProps;
 declare function PillarImage({ className, ...rest }: PillarImageProps): import("react/jsx-runtime").JSX.Element;
+type IconComponent = React.ComponentType<{
+    size?: number;
+}>;
 type PillarIconProps = BaseProps<HTMLSpanElement> & {
-    icon: React.ReactNode | IconProps;
+    icon: React.ReactNode | IconComponent;
     color?: (typeof PillarIconColors)[number];
 };
 declare function PillarIcon({ icon: Icon, className, color, ...rest }: PillarIconProps): import("react/jsx-runtime").JSX.Element;

package/lib/SubNav/SubNav.d.ts

@@ -9,7 +9,7 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 export declare const SubNavSubMenuVariants: readonly ["dropdown", "anchor"];
 type SubMenuVariants = (typeof SubNavSubMenuVariants)[number];
 type SubNavContextType = {
-    portalRef: RefObject<HTMLDivElement>;
+    portalRef: RefObject<HTMLDivElement | null>;
 };
 export declare const useSubNavContext: () => SubNavContextType;
 export type SubNavProps = {
@@ -58,11 +58,7 @@ declare function ActionBase({ children, href, variant, size, ...rest }: SubNavAc
  * Use SubNav to display a secondary navigation beneath a primary header.
  * @see https://primer.style/brand/components/SubNav
  */
-export declare const SubNav: React.NamedExoticComponent<Omit<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | 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]) | React.RefObject<HTMLDivElement> | null | undefined;
-}> & {
-    readonly type: React.ForwardRefExoticComponent<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-} & {
+export declare const SubNav: React.NamedExoticComponent<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Heading: ({ href, children, className, "data-testid": testID, ...props }: HeadingBaseProps) => import("react/jsx-runtime").JSX.Element;
     SubHeading: ({ href, children, className, "data-testid": testID, ...props }: SubHeadingBaseProps) => import("react/jsx-runtime").JSX.Element;
     Link: React.ForwardRefExoticComponent<Omit<LinkBaseProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;

package/lib/SubNav/useContainsFocus.d.ts

@@ -6,4 +6,4 @@ import { type RefObject } from 'react';
  * @type T The type of the container element.
  * @returns The ref to be applied to the container element.
  */
-export declare const useContainsFocus: <T extends HTMLElement>(containerRef?: RefObject<T>, onFocusChange?: (isFocussed: boolean) => void) => void;
+export declare const useContainsFocus: <T extends HTMLElement>(containerRef?: RefObject<T | null>, onFocusChange?: (isFocussed: boolean) => void) => void;

package/lib/SubdomainNavBar/NavigationVisbilityObserver.d.ts

@@ -1,5 +1,5 @@
-export declare function NavigationVisbilityObserver({ children, className, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-}): import("react/jsx-runtime").JSX.Element;
+import React, { PropsWithChildren } from 'react';
+import { BaseProps } from '../component-helpers';
+type NavigationVisibilityObserverProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>>;
+export declare const NavigationVisbilityObserver: React.ForwardRefExoticComponent<Omit<NavigationVisibilityObserverProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export {};

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -8,7 +8,7 @@ export type SubdomainNavBarProps = {
      * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
      * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
      */
-    children?: React.ReactNode | React.ReactElement<LinkProps> | React.ReactElement<SearchProps> | React.ReactElement<CTAActionProps>;
+    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SearchProps> | React.ReactElement<CTAActionProps>;
     /**
      * Forward a custom HTML class attribute
      */
@@ -39,11 +39,12 @@ export type SubdomainNavBarProps = {
     onNarrowMenuToggle?: (isOpen: boolean) => void;
 };
 declare function Root({ children, className, fixed, fullWidth, logoHref, title, titleHref, onNarrowMenuToggle, ...rest }: SubdomainNavBarProps): import("react/jsx-runtime").JSX.Element;
-type LinkProps = {
+export type SubdomainNavBarLinkProps = {
     href: string;
     isExternal?: boolean;
+    'data-navitemid'?: string;
 } & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, isExternal, ...rest }: PropsWithChildren<LinkProps>): import("react/jsx-runtime").JSX.Element;
+declare function Link({ href, className, children, isExternal, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): import("react/jsx-runtime").JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;

package/lib/SubdomainNavBar/useVisibilityObserver.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from 'react';
 export type VisibilityMap = {
     [key: string]: boolean;
 };
-export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement>, children: any): VisibilityMap[];
+export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, children: any): VisibilityMap[];

package/lib/Tabs/Tabs.d.ts

@@ -56,7 +56,7 @@ export type TabsItemProps = {
     children: ReactNode;
     className?: string;
     isActive?: boolean;
-    variant?: 'default' | 'accent';
+    variant?: 'default' | 'accent' | 'underline';
     /**
      * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
      * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
@@ -161,7 +161,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<(Omit<{
         children: ReactNode;
         className?: string;
         isActive?: boolean;
-        variant?: "default" | "accent";
+        variant?: "default" | "accent" | "underline";
         /**
          * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
          * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility

package/lib/Tooltip/Tooltip.d.ts

@@ -16,7 +16,7 @@ export type TriggerPropsType = {
     onFocus?: React.FocusEventHandler;
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
-    ref?: React.RefObject<HTMLElement>;
+    ref?: React.RefObject<HTMLElement | null>;
 };
 export declare const TooltipContext: React.Context<{
     tooltipId?: string;

package/lib/VideoPlayer/hooks/useVideo.d.ts

@@ -26,7 +26,7 @@ export type UseVideoContext = VideoState & {
     toggleFullScreen: () => void;
     setDuration: (duration: number) => void;
     isFullScreen: boolean;
-    fullscreenRef: RefObject<HTMLDivElement>;
+    fullscreenRef: RefObject<HTMLDivElement | null>;
 };
 export declare const VideoContext: React.Context<UseVideoContext | null>;
 export declare const useVideo: () => UseVideoContext;

package/lib/VideoPlayer/hooks/useVideoKeypressHandlers.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from 'react';
 export type KeypressHandler = [KeyboardEvent['key'], (e: KeyboardEvent) => void];
-export declare const useVideoKeypressHandlers: (videoWrapperRef: RefObject<HTMLElement>) => void;
+export declare const useVideoKeypressHandlers: (videoWrapperRef: RefObject<HTMLElement | null>) => void;

package/lib/VideoPlayer/hooks/useVideoResizeObserver.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
 export declare const useVideoResizeObserver: ({ videoWrapperRef, className, }: {
-    videoWrapperRef: RefObject<HTMLElement>;
+    videoWrapperRef: RefObject<HTMLElement | null>;
     className: string;
 }) => boolean;

package/lib/animation/Animate/Animate.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, type JSX } from 'react';
 import type { BaseProps } from '../../component-helpers';
 export type BoxProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {
     as?: T | 'div' | 'span' | 'section';

package/lib/animation/TextRevealAnimation/TextRevealAnimation.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BaseProps } from '../../component-helpers';
 export type TextRevealAnimationProps = BaseProps<HTMLSpanElement> & Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
-    children: React.ReactChild;
+    children: string;
 };
-export declare function TextRevealAnimation({ children, ...rest }: TextRevealAnimationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const TextRevealAnimation: React.ForwardRefExoticComponent<Omit<TextRevealAnimationProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/lib/animation/TextRevealAnimation/useTextRevealAnimationLines.d.ts

@@ -1,4 +1,5 @@
-export declare const useTextRevealAnimationLines: (text?: string) => {
-    ref: import("react").RefObject<HTMLElement>;
+import { RefObject } from 'react';
+export declare const useTextRevealAnimationLines: (text?: string, providedRef?: RefObject<HTMLElement | null>) => {
+    ref: RefObject<HTMLElement | null>;
     lines: string[] | undefined;
 };