@primer/react-brand/esm/MediaPlaylist/MediaPlaylist.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { useId as t } from "../hooks/useId.js";
import { Text as n } from "../Text/Text.js";
import { Heading as r } from "../Heading/Heading.js";
import i from "../component-helpers/shared.module.js";
import { Pagination as a } from "../Pagination/Pagination.js";
import { useMediaPlaylist as o } from "./useMediaPlaylist.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css';/* empty css                                                                                                            */
import s from "./MediaPlaylist.module.js";
import { cloneElement as c, forwardRef as l } from "react";
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
//#region src/MediaPlaylist/MediaPlaylist.tsx
var p = l(({ children: n, className: r, defaultSelectedIndex: l = 0, onChange: u, selectedIndex: p, "data-testid": m, ...h }, g) => {
	let _ = t(), { activeIndex: v, currentItemPage: x, getPaginationAttributes: S, getTabListProps: C, getTabPanelProps: w, getTabProps: T, handlePageChange: E, hasOverflowItems: D, headingChild: O, isItemSelected: k, items: A, setItemRef: j, tabListRef: M } = o({
		children: n,
		components: y,
		defaultSelectedIndex: l,
		onChange: u,
		selectedIndex: p
	}), N = O?.props.id ?? `${_}-heading`;
	!O && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.");
	let P = C(O ? { labelledBy: N } : { label: "Media playlist" });
	return /* @__PURE__ */ d("div", {
		ref: g,
		className: e(s.MediaPlaylist, i.gridline, D && s["MediaPlaylist--overflowItems"], r),
		"data-testid": m || b.root,
		...h,
		children: /* @__PURE__ */ f("div", {
			className: s.MediaPlaylist__layout,
			children: [/* @__PURE__ */ f("div", {
				className: s.MediaPlaylist__playlist,
				children: [
					O && c(O, {
						activeIndex: v,
						id: N,
						itemCount: A.length
					}),
					/* @__PURE__ */ d("div", {
						...P,
						ref: M,
						className: s.MediaPlaylist__tablist,
						children: A.map((t, n) => {
							let r = T(String(n));
							return /* @__PURE__ */ d("div", {
								ref: (e) => {
									j(n, e);
								},
								className: e(s.MediaPlaylist__item, k(n) && s["MediaPlaylist__item--selected"], t.className),
								children: /* @__PURE__ */ d("button", {
									type: "button",
									...r,
									className: s.MediaPlaylist__tab,
									children: /* @__PURE__ */ f("span", {
										className: s.MediaPlaylist__tabContent,
										children: [t.thumbnail && /* @__PURE__ */ d("span", {
											className: s.MediaPlaylist__thumbnail,
											children: t.thumbnail
										}), /* @__PURE__ */ d("span", {
											className: s.MediaPlaylist__itemHeadingContent,
											children: t.heading
										})]
									})
								})
							}, n);
						})
					}),
					D && /* @__PURE__ */ d(a, {
						className: s.MediaPlaylist__pagination,
						pageCount: A.length,
						currentPage: x,
						onPageChange: E,
						hrefBuilder: () => "#",
						pageAttributesBuilder: S,
						"aria-label": "Media playlist items",
						showPages: !1
					})
				]
			}), /* @__PURE__ */ d("div", {
				className: s.MediaPlaylist__mediaPanels,
				children: A.map((t, n) => /* @__PURE__ */ f("div", {
					...w(String(n)),
					tabIndex: -1,
					className: e(s.MediaPlaylist__mediaPanel, s.MediaPlaylist__panel),
					children: [t.media, /* @__PURE__ */ d("div", {
						className: s.MediaPlaylist__panelContent,
						children: t.content
					})]
				}, n))
			})]
		})
	});
});
function m({ activeIndex: t = null, as: n = "h3", children: i, className: a, id: o, itemCount: c = 0, ...l }) {
	return /* @__PURE__ */ f("div", {
		className: e(s.MediaPlaylist__heading, a),
		...l,
		children: [/* @__PURE__ */ d(r, {
			as: n,
			id: o,
			className: s.MediaPlaylist__headingLabel,
			children: i
		}), c > 0 && t !== null && /* @__PURE__ */ f("span", {
			className: s.MediaPlaylist__headingCounter,
			"aria-live": "polite",
			children: [
				t + 1,
				"/",
				c
			]
		})]
	});
}
function h({ children: e }) {
	return /* @__PURE__ */ d(u, { children: e });
}
function g({ children: t, className: r, description: i, font: a = "mona-sans", size: o = "200", title: c, variant: l = "default", weight: u = "medium", ...p }) {
	let m = c !== void 0 || i !== void 0, h = c ?? t;
	return /* @__PURE__ */ d(n, {
		...p,
		as: "span",
		className: e(s.MediaPlaylist__itemHeading, r),
		font: a,
		size: o,
		variant: l,
		weight: u,
		children: m ? /* @__PURE__ */ f("span", {
			className: s.MediaPlaylist__itemHeadingDetails,
			children: [h && /* @__PURE__ */ d("span", {
				className: s.MediaPlaylist__itemHeadingTitle,
				children: h
			}), i && /* @__PURE__ */ d(n, {
				as: "span",
				font: "monospace",
				size: "100",
				variant: "muted",
				children: i
			})]
		}) : t
	});
}
function _({ children: t, className: n, ...r }) {
	return /* @__PURE__ */ d("div", {
		className: e(s.MediaPlaylist__content, n),
		...r,
		children: t
	});
}
var v = l(function({ children: t, className: n, ...r }, i) {
	return /* @__PURE__ */ d("div", {
		ref: i,
		className: e(s.MediaPlaylist__media, n),
		...r,
		children: t
	});
}), y = {
	Heading: m,
	Item: h,
	ItemHeading: g,
	ItemContent: _,
	ItemMedia: v
}, b = { root: "MediaPlaylist" }, x = Object.assign(p, {
	Heading: m,
	Item: h,
	ItemHeading: g,
	ItemContent: _,
	ItemMedia: v,
	testIds: b
});
//#endregion
export { x as MediaPlaylist };

//# sourceMappingURL=MediaPlaylist.js.map