@primer/react
Version:
An implementation of GitHub's Primer Design System using React
312 lines (311 loc) • 9.54 kB
JavaScript
import { useId as useId$1 } from "../../hooks/useId.js";
import Truncate from "../../Truncate/Truncate.js";
import Item_module_css_default from "./Item.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { isValidElementType } from "react-is";
import { CheckIcon } from "@primer/octicons-react";
//#region src/deprecated/ActionList/Item.tsx
/**
* Contract for props passed to the `Item` component.
*/
/**
* 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 === void 0 ? "div" : t0;
const descriptionVariant = t1 === void 0 ? "inline" : t1;
const variant = t2 === void 0 ? "default" : t2;
const labelId = useId$1();
const descriptionId = useId$1();
let t3;
if ($[21] !== disabled || $[22] !== itemProps || $[23] !== onAction || $[24] !== onKeyPress) {
t3 = (event) => {
var _onKeyPress;
if (disabled) return;
(_onKeyPress = onKeyPress) === null || _onKeyPress === void 0 || _onKeyPress(event);
if (!event.defaultPrevented && [" ", "Enter"].includes(event.key)) {
var _onAction;
(_onAction = onAction) === null || _onAction === 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 || _onClick(event_0);
if (!event_0.defaultPrevented) {
var _onAction2;
(_onAction2 = onAction) === null || _onAction2 === 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 ? void 0 : -1;
const t6 = text ? labelId : void 0;
const t7 = description ? descriptionId : void 0;
const t8 = showDivider ? "" : void 0;
const t9 = variant === "danger" && Item_module_css_default["Item--danger"];
const t10 = disabled && Item_module_css_default["Item--disabled"];
let t11;
if ($[31] !== className || $[32] !== t10 || $[33] !== t9) {
t11 = clsx(Item_module_css_default.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: Item_module_css_default.BaseVisualContainer,
children: selectionVariant === "multiple" ? /*#__PURE__*/ jsx(Fragment, { children: /*#__PURE__*/ jsxs("svg", {
className: Item_module_css_default.MultiSelectIcon,
"data-selected": selected ? "" : void 0,
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: Item_module_css_default.LeadingVisualContainer,
"data-variant": variant,
"data-disabled": disabled ? "" : void 0,
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: Item_module_css_default.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: Item_module_css_default.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: Item_module_css_default.TrailingContent,
"data-variant": variant,
"data-disabled": disabled ? "" : void 0,
children: typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/ jsx(TrailingVisual, {}) : TrailingVisual
}) : TrailingIcon || trailingText ? /*#__PURE__*/ jsxs("div", {
className: Item_module_css_default.TrailingContent,
"data-variant": variant,
"data-disabled": disabled ? "" : void 0,
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: Item_module_css_default.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,
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";
//#endregion
export { Item };