@primer/react-brand 0.68.0-rc.b6d410ef → 0.68.0

package/lib/MediaPlaylist/MediaPlaylist.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};

package/lib/MediaPlaylist/index.d.ts

@@ -0,0 +1 @@
+export * from './MediaPlaylist';

package/lib/MediaPlaylist/useMediaPlaylist.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { PaginationPageType } from '../Pagination/model';
+type UseMediaPlaylistProps = {
+    children: React.ReactNode;
+    components: MediaPlaylistComponentTypes;
+    defaultSelectedIndex: number;
+    onChange?: (selectedIndex: number) => void;
+    selectedIndex?: number;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export type MediaPlaylistComponentTypes = {
+    Heading: React.ElementType;
+    Item: React.ElementType;
+    ItemHeading: React.ElementType;
+    ItemContent: React.ElementType;
+    ItemMedia: React.ElementType;
+};
+type MediaPlaylistHeadingChildProps = {
+    activeIndex?: number | null;
+    id?: string;
+    itemCount?: number;
+};
+type MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>;
+type MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>;
+type MediaPlaylistItemData = {
+    className?: string;
+    content: MediaPlaylistItemChild;
+    heading: MediaPlaylistItemChild;
+    media: MediaPlaylistItemChild;
+    thumbnail?: React.ReactNode;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export declare function useMediaPlaylist({ children, components, defaultSelectedIndex, onChange, selectedIndex, }: UseMediaPlaylistProps): {
+    activeIndex: number | null;
+    currentItemPage: number;
+    getPaginationAttributes: (pageNumber: number, page: PaginationPageType) => {
+        [key: string]: string;
+    };
+    getTabListProps: (props: {
+        label: string;
+        labelledBy?: never;
+    } | {
+        labelledBy: string;
+        label?: never;
+    }) => {
+        role: "tablist";
+        'aria-orientation': "horizontal" | "vertical";
+    };
+    getTabPanelProps: (id: string) => {
+        role: "tabpanel";
+        id: `tabs-${string}-panel-${string}`;
+        'aria-labelledby': `tabs-${string}-tab-${string}`;
+        hidden: boolean;
+        tabIndex: 0;
+    };
+    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: React.Ref<T>) => {
+        role: "tab";
+        id: `tabs-${string}-tab-${string}`;
+        'aria-controls': `tabs-${string}-panel-${string}`;
+        'aria-selected': boolean;
+        tabIndex: 0 | -1;
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        ref: (element: HTMLElement | null) => void;
+    };
+    handlePageChange: (event: React.MouseEvent, page: number) => void;
+    hasOverflowItems: boolean;
+    headingChild: React.ReactElement<MediaPlaylistHeadingChildProps, string | React.JSXElementConstructor<any>> | null;
+    isItemSelected: (index: number) => boolean;
+    items: MediaPlaylistItemData[];
+    setItemRef: (index: number, element: HTMLDivElement | null) => void;
+    tabListRef: React.RefObject<HTMLDivElement | null>;
+};
+export {};

package/lib/Pagination/Pagination.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-/**
- * Design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css';
+import { PaginationPageType } from './model';
 export type PaginationProps = {
     pageCount: number;
     currentPage: number;
     onPageChange?: (e: React.MouseEvent, n: number) => void;
     hrefBuilder?: (n: number) => string;
-    pageAttributesBuilder?: (n: number) => {
+    pageAttributesBuilder?: (n: number, page: PaginationPageType) => {
         [attributeName: string]: string;
     };
     marginPageCount?: number;

package/lib/Pagination/model.d.ts

@@ -1,8 +1,8 @@
-export type PageType = {
+export type PaginationPageType = {
     type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK';
     num: number;
     disabled?: boolean;
     selected?: boolean;
     precedesBreak?: boolean;
 };
-export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PageType[];
+export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PaginationPageType[];