@primer/react
Version:
An implementation of GitHub's Primer Design System using React
215 lines (212 loc) • 6.14 kB
JavaScript
import { c } from 'react-compiler-runtime';
import React from 'react';
import { fixedForwardRef } from '../utils/modern-polymorphic.js';
import { ActionListContainerContext } from './ActionListContainerContext.js';
import { useSlots } from '../hooks/useSlots.js';
import { Heading } from './Heading.js';
import { useId } from '../hooks/useId.js';
import { ListContext } from './shared.js';
import { useFocusZone } from '../hooks/useFocusZone.js';
import { clsx } from 'clsx';
import classes from './ActionList.module.css.js';
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
import { FocusKeys } from '@primer/behaviors';
const UnwrappedList = (props, forwardedRef) => {
var _slots$heading$props$;
const $ = c(39);
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 === undefined ? "ul" : t0;
const variant = t1 === undefined ? "inset" : t1;
const showDividers = t2 === undefined ? false : t2;
const disableFocusZone = t3 === undefined ? 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();
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);
let enableFocusZone = false;
if (enableFocusZoneFromContainer !== undefined) {
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" : undefined;
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(classes.ActionList, className);
$[23] = className;
$[24] = t12;
} else {
t12 = $[24];
}
let t13;
if ($[25] !== Component || $[26] !== ariaLabelledBy || $[27] !== childrenWithoutSlots || $[28] !== listRef || $[29] !== listRole || $[30] !== restProps || $[31] !== showDividers || $[32] !== t12 || $[33] !== variant) {
t13 = /*#__PURE__*/jsx(Component, {
className: t12,
role: listRole,
"aria-labelledby": ariaLabelledBy,
ref: listRef,
"data-component": "ActionList",
"data-dividers": showDividers,
"data-variant": variant,
...restProps,
children: childrenWithoutSlots
});
$[25] = Component;
$[26] = ariaLabelledBy;
$[27] = childrenWithoutSlots;
$[28] = listRef;
$[29] = listRole;
$[30] = restProps;
$[31] = showDividers;
$[32] = t12;
$[33] = variant;
$[34] = t13;
} else {
t13 = $[34];
}
let t14;
if ($[35] !== listContextValue || $[36] !== slots.heading || $[37] !== t13) {
t14 = /*#__PURE__*/jsxs(ListContext.Provider, {
value: listContextValue,
children: [t11, t13]
});
$[35] = listContextValue;
$[36] = slots.heading;
$[37] = t13;
$[38] = t14;
} else {
t14 = $[38];
}
return t14;
};
const List = fixedForwardRef(UnwrappedList);
Object.assign(List, {
displayName: 'ActionList'
});
export { List };