@primer/react/dist/ActionList/List.js

An implementation of GitHub's Primer Design System using React

import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
import { useId as useId$1 } from "../hooks/useId.js";
import { fixedForwardRef } from "../utils/modern-polymorphic.js";
import { useSlots } from "../hooks/useSlots.js";
import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
import { ActionListContainerContext } from "./ActionListContainerContext.js";
import { ListContext } from "./shared.js";
import { Heading } from "./Heading.js";
import ActionList_module_css_default from "./ActionList.module.css.js";
import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
//#region src/ActionList/List.tsx
const UnwrappedList = (props, forwardedRef) => {
	var _slots$heading$props$;
	const $ = c(40);
	let className;
	let restProps;
	let role;
	let selectionVariant;
	let t0;
	let t1;
	let t2;
	let t3;
	if ($[0] !== props) {
		({as: t0, variant: t1, selectionVariant, showDividers: t2, role, disableFocusZone: t3, className, ...restProps} = props);
		$[0] = props;
		$[1] = className;
		$[2] = restProps;
		$[3] = role;
		$[4] = selectionVariant;
		$[5] = t0;
		$[6] = t1;
		$[7] = t2;
		$[8] = t3;
	} else {
		className = $[1];
		restProps = $[2];
		role = $[3];
		selectionVariant = $[4];
		t0 = $[5];
		t1 = $[6];
		t2 = $[7];
		t3 = $[8];
	}
	const Component = t0 === void 0 ? "ul" : t0;
	const variant = t1 === void 0 ? "inset" : t1;
	const showDividers = t2 === void 0 ? false : t2;
	const disableFocusZone = t3 === void 0 ? false : t3;
	let t4;
	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
		t4 = { heading: Heading };
		$[9] = t4;
	} else t4 = $[9];
	const [slots, childrenWithoutSlots] = useSlots(restProps.children, t4);
	const headingId = useId$1();
	const { listRole: listRoleFromContainer, listLabelledBy, selectionVariant: containerSelectionVariant, enableFocusZone: enableFocusZoneFromContainer, container } = React.useContext(ActionListContainerContext);
	const ariaLabelledBy = slots.heading ? (_slots$heading$props$ = slots.heading.props.id) !== null && _slots$heading$props$ !== void 0 ? _slots$heading$props$ : headingId : listLabelledBy;
	const listRole = role || listRoleFromContainer;
	const listRef = useProvidedRefOrCreate(forwardedRef);
	const itemGapEnabled = useFeatureFlag("primer_react_action_list_item_gap") && container === "NavList";
	let enableFocusZone = false;
	if (enableFocusZoneFromContainer !== void 0) enableFocusZone = enableFocusZoneFromContainer;
	else if (listRole && !disableFocusZone) {
		let t5;
		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
			t5 = [
				"menu",
				"menubar",
				"listbox"
			];
			$[10] = t5;
		} else t5 = $[10];
		enableFocusZone = t5.includes(listRole);
	}
	const t5 = !enableFocusZone;
	const t6 = listRole === "menu" || container === "SelectPanel" || container === "FilteredActionList" ? "wrap" : void 0;
	let t7;
	if ($[11] !== listRef || $[12] !== t5 || $[13] !== t6) {
		t7 = {
			disabled: t5,
			containerRef: listRef,
			bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
			focusOutBehavior: t6
		};
		$[11] = listRef;
		$[12] = t5;
		$[13] = t6;
		$[14] = t7;
	} else t7 = $[14];
	useFocusZone(t7);
	const t8 = selectionVariant || containerSelectionVariant;
	let t9;
	if ($[15] !== headingId || $[16] !== listRole || $[17] !== showDividers || $[18] !== t8 || $[19] !== variant) {
		t9 = {
			variant,
			selectionVariant: t8,
			showDividers,
			role: listRole,
			headingId
		};
		$[15] = headingId;
		$[16] = listRole;
		$[17] = showDividers;
		$[18] = t8;
		$[19] = variant;
		$[20] = t9;
	} else t9 = $[20];
	const listContextValue = t9;
	let t10;
	if ($[21] !== listRef) {
		t10 = () => {
			const list = listRef.current;
			if (!list) return;
			const hasMixed = list.querySelector("[data-has-description=\"true\"]") !== null && list.querySelector("[data-has-description=\"false\"]") !== null;
			const current = list.getAttribute("data-mixed-descriptions");
			if (hasMixed && current !== "true") list.setAttribute("data-mixed-descriptions", "true");
			else if (!hasMixed && current !== null) list.removeAttribute("data-mixed-descriptions");
		};
		$[21] = listRef;
		$[22] = t10;
	} else t10 = $[22];
	useIsomorphicLayoutEffect(t10);
	const t11 = slots.heading;
	let t12;
	if ($[23] !== className) {
		t12 = clsx(ActionList_module_css_default.ActionList, className);
		$[23] = className;
		$[24] = t12;
	} else t12 = $[24];
	const t13 = itemGapEnabled ? "" : void 0;
	let t14;
	if ($[25] !== Component || $[26] !== ariaLabelledBy || $[27] !== childrenWithoutSlots || $[28] !== listRef || $[29] !== listRole || $[30] !== restProps || $[31] !== showDividers || $[32] !== t12 || $[33] !== t13 || $[34] !== variant) {
		t14 = /*#__PURE__*/ jsx(Component, {
			className: t12,
			role: listRole,
			"aria-labelledby": ariaLabelledBy,
			ref: listRef,
			"data-component": "ActionList",
			"data-dividers": showDividers,
			"data-variant": variant,
			"data-item-gap": t13,
			...restProps,
			children: childrenWithoutSlots
		});
		$[25] = Component;
		$[26] = ariaLabelledBy;
		$[27] = childrenWithoutSlots;
		$[28] = listRef;
		$[29] = listRole;
		$[30] = restProps;
		$[31] = showDividers;
		$[32] = t12;
		$[33] = t13;
		$[34] = variant;
		$[35] = t14;
	} else t14 = $[35];
	let t15;
	if ($[36] !== listContextValue || $[37] !== slots.heading || $[38] !== t14) {
		t15 = /*#__PURE__*/ jsxs(ListContext.Provider, {
			value: listContextValue,
			children: [t11, t14]
		});
		$[36] = listContextValue;
		$[37] = slots.heading;
		$[38] = t14;
		$[39] = t15;
	} else t15 = $[39];
	return t15;
};
const List = fixedForwardRef(UnwrappedList);
Object.assign(List, { displayName: "ActionList" });
//#endregion
export { List };