@primer/react
Version:
An implementation of GitHub's Primer Design System using React
356 lines (353 loc) • 10.2 kB
JavaScript
import { c } from 'react-compiler-runtime';
import { CheckIcon } from '@primer/octicons-react';
import React from 'react';
import { isValidElementType } from 'react-is';
import { useId } from '../../hooks/useId.js';
import classes from './Item.module.css.js';
import { clsx } from 'clsx';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import Truncate from '../../Truncate/Truncate.js';
/**
* An actionable or selectable `Item` with an optional icon and description.
*/
const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
const $ = c(82);
let LeadingVisual;
let TrailingIcon;
let TrailingVisual;
let children;
let className;
let description;
let disabled;
let id;
let onAction;
let onClick;
let onKeyPress;
let props;
let selected;
let selectionVariant;
let showDivider;
let t0;
let t1;
let t2;
let text;
let trailingText;
if ($[0] !== itemProps) {
({
as: t0,
text,
description,
descriptionVariant: t1,
selected,
selectionVariant,
leadingVisual: LeadingVisual,
trailingIcon: TrailingIcon,
trailingVisual: TrailingVisual,
trailingText,
variant: t2,
showDivider,
disabled,
onAction,
onKeyPress,
children,
onClick,
id,
className,
...props
} = itemProps);
$[0] = itemProps;
$[1] = LeadingVisual;
$[2] = TrailingIcon;
$[3] = TrailingVisual;
$[4] = children;
$[5] = className;
$[6] = description;
$[7] = disabled;
$[8] = id;
$[9] = onAction;
$[10] = onClick;
$[11] = onKeyPress;
$[12] = props;
$[13] = selected;
$[14] = selectionVariant;
$[15] = showDivider;
$[16] = t0;
$[17] = t1;
$[18] = t2;
$[19] = text;
$[20] = trailingText;
} else {
LeadingVisual = $[1];
TrailingIcon = $[2];
TrailingVisual = $[3];
children = $[4];
className = $[5];
description = $[6];
disabled = $[7];
id = $[8];
onAction = $[9];
onClick = $[10];
onKeyPress = $[11];
props = $[12];
selected = $[13];
selectionVariant = $[14];
showDivider = $[15];
t0 = $[16];
t1 = $[17];
t2 = $[18];
text = $[19];
trailingText = $[20];
}
const Component = t0 === undefined ? "div" : t0;
const descriptionVariant = t1 === undefined ? "inline" : t1;
const variant = t2 === undefined ? "default" : t2;
const labelId = useId();
const descriptionId = useId();
let t3;
if ($[21] !== disabled || $[22] !== itemProps || $[23] !== onAction || $[24] !== onKeyPress) {
t3 = event => {
var _onKeyPress;
if (disabled) {
return;
}
(_onKeyPress = onKeyPress) === null || _onKeyPress === void 0 ? void 0 : _onKeyPress(event);
if (!event.defaultPrevented && [" ", "Enter"].includes(event.key)) {
var _onAction;
(_onAction = onAction) === null || _onAction === void 0 ? void 0 : _onAction(itemProps, event);
}
};
$[21] = disabled;
$[22] = itemProps;
$[23] = onAction;
$[24] = onKeyPress;
$[25] = t3;
} else {
t3 = $[25];
}
const keyPressHandler = t3;
let t4;
if ($[26] !== disabled || $[27] !== itemProps || $[28] !== onAction || $[29] !== onClick) {
t4 = event_0 => {
var _onClick;
if (disabled) {
return;
}
(_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event_0);
if (!event_0.defaultPrevented) {
var _onAction2;
(_onAction2 = onAction) === null || _onAction2 === void 0 ? void 0 : _onAction2(itemProps, event_0);
}
};
$[26] = disabled;
$[27] = itemProps;
$[28] = onAction;
$[29] = onClick;
$[30] = t4;
} else {
t4 = $[30];
}
const clickHandler = t4;
const t5 = disabled ? undefined : -1;
const t6 = text ? labelId : undefined;
const t7 = description ? descriptionId : undefined;
const t8 = showDivider ? "" : undefined;
const t9 = variant === "danger" && classes["Item--danger"];
const t10 = disabled && classes["Item--disabled"];
let t11;
if ($[31] !== className || $[32] !== t10 || $[33] !== t9) {
t11 = clsx(classes.Item, t9, t10, className);
$[31] = className;
$[32] = t10;
$[33] = t9;
$[34] = t11;
} else {
t11 = $[34];
}
let t12;
if ($[35] !== selected || $[36] !== selectionVariant) {
t12 = !!selected === selected && /*#__PURE__*/jsx("div", {
className: classes.BaseVisualContainer,
children: selectionVariant === "multiple" ? /*#__PURE__*/jsx(Fragment, {
children: /*#__PURE__*/jsxs("svg", {
className: classes.MultiSelectIcon,
"data-selected": selected ? "" : undefined,
width: "16",
height: "16",
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
children: [/*#__PURE__*/jsx("rect", {
x: "2",
y: "2",
width: "12",
height: "12",
rx: "4"
}), /*#__PURE__*/jsx("path", {
fillRule: "evenodd",
strokeWidth: "0",
d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
})]
})
}) : selected && /*#__PURE__*/jsx(CheckIcon, {
fill: "var(--fgColor-default)"
})
});
$[35] = selected;
$[36] = selectionVariant;
$[37] = t12;
} else {
t12 = $[37];
}
let t13;
if ($[38] !== LeadingVisual || $[39] !== disabled || $[40] !== variant) {
t13 = LeadingVisual && /*#__PURE__*/jsx("div", {
className: classes.LeadingVisualContainer,
"data-variant": variant,
"data-disabled": disabled ? "" : undefined,
children: /*#__PURE__*/jsx(LeadingVisual, {})
});
$[38] = LeadingVisual;
$[39] = disabled;
$[40] = variant;
$[41] = t13;
} else {
t13 = $[41];
}
const t14 = descriptionVariant === "inline" ? "row" : "column";
let t15;
if ($[42] !== t14) {
t15 = {
"--main-content-flex-direction": t14
};
$[42] = t14;
$[43] = t15;
} else {
t15 = $[43];
}
const t16 = t15;
let t17;
if ($[44] !== labelId || $[45] !== text) {
t17 = text ? /*#__PURE__*/jsx("span", {
id: labelId,
children: text
}) : null;
$[44] = labelId;
$[45] = text;
$[46] = t17;
} else {
t17 = $[46];
}
let t18;
if ($[47] !== description || $[48] !== descriptionId || $[49] !== descriptionVariant) {
t18 = description ? /*#__PURE__*/jsx("span", {
id: descriptionId,
style: {
"--description-container-margin-left": descriptionVariant === "inline" ? "var(--base-size-8)" : 0,
"--description-container-flex-basis": descriptionVariant === "inline" ? 0 : "auto"
},
className: classes.DescriptionContainer,
children: descriptionVariant === "block" ? description : /*#__PURE__*/jsx(Truncate, {
title: description,
inline: true,
maxWidth: "100%",
children: description
})
}) : null;
$[47] = description;
$[48] = descriptionId;
$[49] = descriptionVariant;
$[50] = t18;
} else {
t18 = $[50];
}
let t19;
if ($[51] !== children || $[52] !== t16 || $[53] !== t17 || $[54] !== t18) {
t19 = /*#__PURE__*/jsxs("div", {
style: t16,
className: classes.MainContent,
children: [children, t17, t18]
});
$[51] = children;
$[52] = t16;
$[53] = t17;
$[54] = t18;
$[55] = t19;
} else {
t19 = $[55];
}
let t20;
if ($[56] !== TrailingIcon || $[57] !== TrailingVisual || $[58] !== disabled || $[59] !== trailingText || $[60] !== variant) {
t20 = TrailingVisual ? /*#__PURE__*/jsx("div", {
className: classes.TrailingContent,
"data-variant": variant,
"data-disabled": disabled ? "" : undefined,
children: typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
}) : TrailingIcon || trailingText ? /*#__PURE__*/jsxs("div", {
className: classes.TrailingContent,
"data-variant": variant,
"data-disabled": disabled ? "" : undefined,
children: [trailingText, TrailingIcon && /*#__PURE__*/jsx(TrailingIcon, {})]
}) : null;
$[56] = TrailingIcon;
$[57] = TrailingVisual;
$[58] = disabled;
$[59] = trailingText;
$[60] = variant;
$[61] = t20;
} else {
t20 = $[61];
}
let t21;
if ($[62] !== t19 || $[63] !== t20) {
t21 = /*#__PURE__*/jsxs("div", {
className: classes.DividedContent,
"data-component": "ActionList.DividedContent",
children: [t19, t20]
});
$[62] = t19;
$[63] = t20;
$[64] = t21;
} else {
t21 = $[64];
}
let t22;
if ($[65] !== Component || $[66] !== clickHandler || $[67] !== id || $[68] !== keyPressHandler || $[69] !== props || $[70] !== ref || $[71] !== selected || $[72] !== t11 || $[73] !== t12 || $[74] !== t13 || $[75] !== t21 || $[76] !== t5 || $[77] !== t6 || $[78] !== t7 || $[79] !== t8 || $[80] !== variant) {
t22 = /*#__PURE__*/jsxs(Component, {
ref: ref,
tabIndex: t5,
"data-variant": variant,
"aria-selected": selected,
"aria-labelledby": t6,
"aria-describedby": t7,
"data-divider": t8,
...props,
"data-id": id,
onKeyPress: keyPressHandler,
onClick: clickHandler,
className: t11,
children: [t12, t13, t21]
});
$[65] = Component;
$[66] = clickHandler;
$[67] = id;
$[68] = keyPressHandler;
$[69] = props;
$[70] = ref;
$[71] = selected;
$[72] = t11;
$[73] = t12;
$[74] = t13;
$[75] = t21;
$[76] = t5;
$[77] = t6;
$[78] = t7;
$[79] = t8;
$[80] = variant;
$[81] = t22;
} else {
t22 = $[81];
}
return t22;
});
Item.displayName = 'ActionList.Item';
export { Item };