@primer/react
Version:
An implementation of GitHub's Primer Design System using React
691 lines (690 loc) • 21.8 kB
JavaScript
import { useId as useId$1 } from "../hooks/useId.js";
import { ConditionalWrapper } from "../internal/components/ConditionalWrapper.js";
import { invariant } from "../utils/invariant.js";
import { fixedForwardRef } from "../utils/modern-polymorphic.js";
import VisuallyHidden from "../_VisuallyHidden.js";
import { TooltipContext } from "../TooltipV2/TooltipContext.js";
import { Tooltip } from "../TooltipV2/Tooltip.js";
import { useSlots } from "../hooks/useSlots.js";
import { ActionListContainerContext } from "./ActionListContainerContext.js";
import { ItemContext, ListContext } from "./shared.js";
import ActionList_module_css_default from "./ActionList.module.css.js";
import { GroupContext } from "./GroupContext.js";
import { Description } from "./Description.js";
import { LeadingVisual, TrailingVisual, VisualOrIndicator } from "./Visuals.js";
import { Selection } from "./Selection.js";
import { TrailingAction } from "./TrailingAction.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React from "react";
//#region src/ActionList/Item.tsx
/**
* Wraps button-semantic items with Tooltip, disabled when not truncated
* For non-button-semantic items, renders children directly.
*/
const ConditionalTooltip = /*#__PURE__*/ React.forwardRef(function ConditionalTooltip(t0, forwardedRef) {
const $ = c(4);
const { text, enabled, children } = t0;
if (!enabled || !text) return children;
const t1 = text || "";
let t2;
if ($[0] !== children || $[1] !== forwardedRef || $[2] !== t1) {
t2 = /*#__PURE__*/ jsx(Tooltip, {
ref: forwardedRef,
text: t1,
direction: "e",
delay: "medium",
children
});
$[0] = children;
$[1] = forwardedRef;
$[2] = t1;
$[3] = t2;
} else t2 = $[3];
return t2;
});
const SubItem = (t0) => {
const $ = c(2);
const { children } = t0;
let t1;
if ($[0] !== children) {
t1 = /*#__PURE__*/ jsx(Fragment, { children });
$[0] = children;
$[1] = t1;
} else t1 = $[1];
return t1;
};
SubItem.displayName = "ActionList.SubItem";
const ButtonItemContainer = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
const $ = c(9);
let children;
let props;
let style;
if ($[0] !== t0) {
({children, style, ...props} = t0);
$[0] = t0;
$[1] = children;
$[2] = props;
$[3] = style;
} else {
children = $[1];
props = $[2];
style = $[3];
}
const t1 = forwardedRef;
let t2;
if ($[4] !== children || $[5] !== props || $[6] !== style || $[7] !== t1) {
t2 = /*#__PURE__*/ jsx("button", {
type: "button",
ref: t1,
style,
...props,
children
});
$[4] = children;
$[5] = props;
$[6] = style;
$[7] = t1;
$[8] = t2;
} else t2 = $[8];
return t2;
});
const DivItemContainer = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
const $ = c(7);
let children;
let props;
if ($[0] !== t0) {
({children, ...props} = t0);
$[0] = t0;
$[1] = children;
$[2] = props;
} else {
children = $[1];
props = $[2];
}
const t1 = forwardedRef;
let t2;
if ($[3] !== children || $[4] !== props || $[5] !== t1) {
t2 = /*#__PURE__*/ jsx("div", {
ref: t1,
...props,
children
});
$[3] = children;
$[4] = props;
$[5] = t1;
$[6] = t2;
} else t2 = $[6];
return t2;
});
const slotsConfig = {
leadingVisual: LeadingVisual,
trailingVisual: TrailingVisual,
trailingAction: TrailingAction,
subItem: SubItem,
description: Description
};
const selectableRoles = [
"menuitemradio",
"menuitemcheckbox",
"option",
"treeitem"
];
const listRoleTypes = [
"listbox",
"menu",
"list",
"tree"
];
const UnwrappedItem = (t0, forwardedRef) => {
var _slots$trailingVisual, _slots$description$pr, _slots$description, _slots$trailingAction;
const $ = c(161);
let _PrivateItemWrapper;
let className;
let id;
let inactiveText;
let loading;
let onSelectUser;
let props;
let role;
let t1;
let t2;
let t3;
let t4;
let t5;
if ($[0] !== t0) {
const { variant: t6, size: t7, disabled: t8, inactiveText: t9, selected: t10, active: t11, onSelect: t12, id: t13, role: t14, loading: t15, _PrivateItemWrapper: t16, className: t17, groupId: _groupId, renderItem: _renderItem, handleAddItem: _handleAddItem, ...t18 } = t0;
t1 = t6;
t2 = t7;
t3 = t8;
inactiveText = t9;
t4 = t10;
t5 = t11;
onSelectUser = t12;
id = t13;
role = t14;
loading = t15;
_PrivateItemWrapper = t16;
className = t17;
props = t18;
$[0] = t0;
$[1] = _PrivateItemWrapper;
$[2] = className;
$[3] = id;
$[4] = inactiveText;
$[5] = loading;
$[6] = onSelectUser;
$[7] = props;
$[8] = role;
$[9] = t1;
$[10] = t2;
$[11] = t3;
$[12] = t4;
$[13] = t5;
} else {
_PrivateItemWrapper = $[1];
className = $[2];
id = $[3];
inactiveText = $[4];
loading = $[5];
onSelectUser = $[6];
props = $[7];
role = $[8];
t1 = $[9];
t2 = $[10];
t3 = $[11];
t4 = $[12];
t5 = $[13];
}
const variant = t1 === void 0 ? "default" : t1;
const size = t2 === void 0 ? "medium" : t2;
const disabled = t3 === void 0 ? false : t3;
const selected = t4 === void 0 ? void 0 : t4;
const active = t5 === void 0 ? false : t5;
const [partialSlots, childrenWithoutSlots] = useSlots(props.children, slotsConfig);
let t6;
if ($[14] !== partialSlots) {
t6 = {
description: void 0,
...partialSlots
};
$[14] = partialSlots;
$[15] = t6;
} else t6 = $[15];
const slots = t6;
const { container, afterSelect, selectionAttribute, defaultTrailingVisual } = React.useContext(ActionListContainerContext);
let t7;
if ($[16] !== defaultTrailingVisual) {
t7 = defaultTrailingVisual ? /*#__PURE__*/ jsx(TrailingVisual, { children: defaultTrailingVisual }) : null;
$[16] = defaultTrailingVisual;
$[17] = t7;
} else t7 = $[17];
const wrappedDefaultTrailingVisual = t7;
const trailingVisual = (_slots$trailingVisual = slots.trailingVisual) !== null && _slots$trailingVisual !== void 0 ? _slots$trailingVisual : wrappedDefaultTrailingVisual;
const { role: listRole, selectionVariant: listSelectionVariant } = React.useContext(ListContext);
const { selectionVariant: groupSelectionVariant } = React.useContext(GroupContext);
const inactive = Boolean(inactiveText);
const menuContext = container === "ActionMenu" || container === "SelectPanel" || container === "FilteredActionList";
let t8;
if ($[18] !== inactive || $[19] !== listRole) {
t8 = inactive && !(listRole !== void 0 && ["menu", "listbox"].includes(listRole));
$[18] = inactive;
$[19] = listRole;
$[20] = t8;
} else t8 = $[20];
const showInactiveIndicator = t8;
let t9;
if ($[21] !== onSelectUser) {
t9 = (event, afterSelect_0) => {
if (typeof onSelectUser === "function") onSelectUser(event);
if (event.defaultPrevented) return;
if (typeof afterSelect_0 === "function") afterSelect_0(event);
};
$[21] = onSelectUser;
$[22] = t9;
} else t9 = $[22];
const onSelect = t9;
const selectionVariant = groupSelectionVariant ? groupSelectionVariant : listSelectionVariant;
let inferredItemRole;
if (container === "ActionMenu") if (selectionVariant === "single") inferredItemRole = "menuitemradio";
else if (selectionVariant === "multiple") inferredItemRole = "menuitemcheckbox";
else inferredItemRole = "menuitem";
else if (listRole === "listbox") {
if (selectionVariant !== void 0 && !role) inferredItemRole = "option";
} else if (listRole === "tablist") inferredItemRole = "tab";
const itemRole = role || inferredItemRole;
if (slots.trailingAction) menuContext && invariant(false, "ActionList.TrailingAction can not be used within a list with an ARIA role of \"menu\" or \"listbox\".");
let inferredSelectionAttribute;
if (itemRole === "menuitemradio" || itemRole === "menuitemcheckbox") inferredSelectionAttribute = "aria-checked";
else if (itemRole === "option") inferredSelectionAttribute = "aria-selected";
const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute;
const listItemSemantics = itemRole === "option" || itemRole === "menuitem" || itemRole === "menuitemradio" || itemRole === "menuitemcheckbox" || itemRole === "tab";
let t10;
if ($[23] !== inactive || $[24] !== listItemSemantics || $[25] !== listRole) {
t10 = listRole && listRoleTypes.includes(listRole) || inactive || listItemSemantics;
$[23] = inactive;
$[24] = listItemSemantics;
$[25] = listRole;
$[26] = t10;
} else t10 = $[26];
const listSemantics = t10;
const buttonSemantics = !listSemantics && !_PrivateItemWrapper;
let t11;
if ($[27] !== afterSelect || $[28] !== disabled || $[29] !== inactive || $[30] !== loading || $[31] !== onSelect) {
t11 = (event_0) => {
if (disabled || inactive || loading) return;
onSelect(event_0, afterSelect);
};
$[27] = afterSelect;
$[28] = disabled;
$[29] = inactive;
$[30] = loading;
$[31] = onSelect;
$[32] = t11;
} else t11 = $[32];
const clickHandler = t11;
let t12;
if ($[33] !== afterSelect || $[34] !== disabled || $[35] !== inactive || $[36] !== loading || $[37] !== onSelect) {
t12 = (event_1) => {
if (disabled || inactive || loading) return;
if (event_1.key === " " || event_1.key === "Enter") {
if (event_1.key === " ") {
event_1.preventDefault();
event_1.defaultPrevented = false;
}
onSelect(event_1, afterSelect);
}
};
$[33] = afterSelect;
$[34] = disabled;
$[35] = inactive;
$[36] = loading;
$[37] = onSelect;
$[38] = t12;
} else t12 = $[38];
const keyPressHandler = t12;
const itemId = useId$1(id);
const labelId = `${itemId}--label`;
const inlineDescriptionId = `${itemId}--inline-description`;
const blockDescriptionId = `${itemId}--block-description`;
const trailingVisualId = `${itemId}--trailing-visual`;
const inactiveWarningId = inactive && !showInactiveIndicator ? `${itemId}--warning-message` : void 0;
const [truncatedText, setTruncatedText] = React.useState(void 0);
const ItemWrapper = _PrivateItemWrapper || (listSemantics ? DivItemContainer : ButtonItemContainer);
let t13;
if ($[39] !== itemRole || $[40] !== itemSelectionAttribute) {
t13 = itemSelectionAttribute && itemRole && selectableRoles.includes(itemRole);
$[39] = itemRole;
$[40] = itemSelectionAttribute;
$[41] = t13;
} else t13 = $[41];
const includeSelectionAttribute = t13;
const focusable = showInactiveIndicator ? true : void 0;
const descriptionVariant = (_slots$description$pr = (_slots$description = slots.description) === null || _slots$description === void 0 ? void 0 : _slots$description.props.variant) !== null && _slots$description$pr !== void 0 ? _slots$description$pr : "inline";
const hasTrailingVisualSlot = Boolean(slots.trailingVisual);
const hasDescriptionSlot = Boolean(slots.description);
let parts;
if ($[42] !== hasTrailingVisualSlot || $[43] !== labelId || $[44] !== trailingVisualId) {
parts = [labelId];
if (hasTrailingVisualSlot) parts.push(trailingVisualId);
$[42] = hasTrailingVisualSlot;
$[43] = labelId;
$[44] = trailingVisualId;
$[45] = parts;
} else parts = $[45];
const ariaLabelledBy = parts.join(" ");
let parts_0;
if ($[46] !== blockDescriptionId || $[47] !== descriptionVariant || $[48] !== hasDescriptionSlot || $[49] !== inactiveWarningId || $[50] !== inlineDescriptionId) {
parts_0 = [];
if (hasDescriptionSlot && descriptionVariant === "block") parts_0.push(blockDescriptionId);
if (hasDescriptionSlot && descriptionVariant === "inline") parts_0.push(inlineDescriptionId);
if (inactiveWarningId) parts_0.push(inactiveWarningId);
$[46] = blockDescriptionId;
$[47] = descriptionVariant;
$[48] = hasDescriptionSlot;
$[49] = inactiveWarningId;
$[50] = inlineDescriptionId;
$[51] = parts_0;
} else parts_0 = $[51];
const ariaDescribedBy = parts_0.length > 0 ? parts_0.join(" ") : void 0;
const t14 = !buttonSemantics ? keyPressHandler : void 0;
const t15 = disabled ? true : void 0;
const t16 = inactive ? true : void 0;
const t17 = loading && !inactive ? true : void 0;
const t18 = focusable ? void 0 : 0;
let t19;
if ($[52] !== includeSelectionAttribute || $[53] !== itemSelectionAttribute || $[54] !== selected) {
t19 = includeSelectionAttribute && { [itemSelectionAttribute]: selected };
$[52] = includeSelectionAttribute;
$[53] = itemSelectionAttribute;
$[54] = selected;
$[55] = t19;
} else t19 = $[55];
let t20;
if ($[56] !== ariaDescribedBy || $[57] !== ariaLabelledBy || $[58] !== clickHandler || $[59] !== itemId || $[60] !== itemRole || $[61] !== t14 || $[62] !== t15 || $[63] !== t16 || $[64] !== t17 || $[65] !== t18 || $[66] !== t19) {
t20 = {
onClick: clickHandler,
onKeyPress: t14,
"aria-disabled": t15,
"data-inactive": t16,
"data-loading": t17,
tabIndex: t18,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
...t19,
role: itemRole,
id: itemId
};
$[56] = ariaDescribedBy;
$[57] = ariaLabelledBy;
$[58] = clickHandler;
$[59] = itemId;
$[60] = itemRole;
$[61] = t14;
$[62] = t15;
$[63] = t16;
$[64] = t17;
$[65] = t18;
$[66] = t19;
$[67] = t20;
} else t20 = $[67];
const menuItemProps = t20;
let t21;
if ($[68] !== _PrivateItemWrapper || $[69] !== forwardedRef || $[70] !== itemRole || $[71] !== listSemantics || $[72] !== menuItemProps || $[73] !== props) {
t21 = _PrivateItemWrapper ? {
role: itemRole ? "none" : void 0,
...props
} : listSemantics && {
...menuItemProps,
...props,
ref: forwardedRef
} || {};
$[68] = _PrivateItemWrapper;
$[69] = forwardedRef;
$[70] = itemRole;
$[71] = listSemantics;
$[72] = menuItemProps;
$[73] = props;
$[74] = t21;
} else t21 = $[74];
const containerProps = t21;
let t22;
if ($[75] !== _PrivateItemWrapper || $[76] !== forwardedRef || $[77] !== listSemantics || $[78] !== menuItemProps || $[79] !== props) {
t22 = _PrivateItemWrapper ? menuItemProps : !listSemantics && {
...menuItemProps,
...props,
ref: forwardedRef
};
$[75] = _PrivateItemWrapper;
$[76] = forwardedRef;
$[77] = listSemantics;
$[78] = menuItemProps;
$[79] = props;
$[80] = t22;
} else t22 = $[80];
const wrapperProps = t22;
const t23 = Boolean(inactiveText);
const t24 = buttonSemantics ? setTruncatedText : void 0;
let t25;
if ($[81] !== blockDescriptionId || $[82] !== disabled || $[83] !== inlineDescriptionId || $[84] !== size || $[85] !== t23 || $[86] !== t24 || $[87] !== trailingVisualId || $[88] !== variant) {
t25 = {
variant,
size,
disabled,
inactive: t23,
inlineDescriptionId,
blockDescriptionId,
trailingVisualId,
setTruncatedText: t24
};
$[81] = blockDescriptionId;
$[82] = disabled;
$[83] = inlineDescriptionId;
$[84] = size;
$[85] = t23;
$[86] = t24;
$[87] = trailingVisualId;
$[88] = variant;
$[89] = t25;
} else t25 = $[89];
const itemContextValue = t25;
const trailingActionRendered = !inactive && !loading && !menuContext && Boolean(slots.trailingAction);
const t26 = listSemantics ? forwardedRef : null;
const t27 = variant === "danger" ? variant : void 0;
const t28 = active ? true : void 0;
const t29 = inactiveText ? true : void 0;
const t30 = disabled ? true : void 0;
const t31 = slots.subItem ? true : void 0;
const t32 = slots.description ? true : false;
const t33 = trailingActionRendered ? true : void 0;
const t34 = trailingActionRendered && (_slots$trailingAction = slots.trailingAction) !== null && _slots$trailingAction !== void 0 && _slots$trailingAction.props.loading ? true : void 0;
let t35;
if ($[90] !== className) {
t35 = clsx(ActionList_module_css_default.ActionListItem, className);
$[90] = className;
$[91] = t35;
} else t35 = $[91];
let t36;
let t37;
if ($[92] === Symbol.for("react.memo_cache_sentinel")) {
t36 = {};
t37 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
$[92] = t36;
$[93] = t37;
} else {
t36 = $[92];
t37 = $[93];
}
let t38;
if ($[94] !== selected) {
t38 = /*#__PURE__*/ jsx(Selection, {
selected,
className: ActionList_module_css_default.LeadingAction
});
$[94] = selected;
$[95] = t38;
} else t38 = $[95];
const t39 = showInactiveIndicator ? inactiveText : void 0;
const t40 = Boolean(slots.leadingVisual);
let t41;
if ($[96] !== labelId || $[97] !== loading || $[98] !== slots.leadingVisual || $[99] !== t39 || $[100] !== t40) {
t41 = /*#__PURE__*/ jsx(VisualOrIndicator, {
inactiveText: t39,
itemHasLeadingVisual: t40,
labelId,
loading,
position: "leading",
children: slots.leadingVisual
});
$[96] = labelId;
$[97] = loading;
$[98] = slots.leadingVisual;
$[99] = t39;
$[100] = t40;
$[101] = t41;
} else t41 = $[101];
const t42 = !!slots.description;
let t43;
if ($[102] !== inactive || $[103] !== loading) {
t43 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
$[102] = inactive;
$[103] = loading;
$[104] = t43;
} else t43 = $[104];
let t44;
if ($[105] !== childrenWithoutSlots || $[106] !== labelId || $[107] !== t43) {
t44 = /*#__PURE__*/ jsxs("span", {
id: labelId,
className: ActionList_module_css_default.ItemLabel,
"data-component": "ActionList.Item.Label",
children: [childrenWithoutSlots, t43]
});
$[105] = childrenWithoutSlots;
$[106] = labelId;
$[107] = t43;
$[108] = t44;
} else t44 = $[108];
let t45;
if ($[109] !== descriptionVariant || $[110] !== slots.description || $[111] !== t42 || $[112] !== t44) {
t45 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
if: t42,
className: ActionList_module_css_default.ItemDescriptionWrap,
"data-description-variant": descriptionVariant,
children: [t44, slots.description]
});
$[109] = descriptionVariant;
$[110] = slots.description;
$[111] = t42;
$[112] = t44;
$[113] = t45;
} else t45 = $[113];
const t46 = showInactiveIndicator ? inactiveText : void 0;
const t47 = Boolean(slots.leadingVisual);
let t48;
if ($[114] !== labelId || $[115] !== loading || $[116] !== t46 || $[117] !== t47 || $[118] !== trailingVisual) {
t48 = /*#__PURE__*/ jsx(VisualOrIndicator, {
inactiveText: t46,
itemHasLeadingVisual: t47,
labelId,
loading,
position: "trailing",
children: trailingVisual
});
$[114] = labelId;
$[115] = loading;
$[116] = t46;
$[117] = t47;
$[118] = trailingVisual;
$[119] = t48;
} else t48 = $[119];
let t49;
if ($[120] !== inactiveText || $[121] !== inactiveWarningId || $[122] !== showInactiveIndicator) {
t49 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
className: ActionList_module_css_default.InactiveWarning,
id: inactiveWarningId,
children: inactiveText
}) : null;
$[120] = inactiveText;
$[121] = inactiveWarningId;
$[122] = showInactiveIndicator;
$[123] = t49;
} else t49 = $[123];
let t50;
if ($[124] !== t45 || $[125] !== t48 || $[126] !== t49) {
t50 = /*#__PURE__*/ jsxs("span", {
className: ActionList_module_css_default.ActionListSubContent,
"data-component": "ActionList.Item--DividerContainer",
children: [
t45,
t48,
t49
]
});
$[124] = t45;
$[125] = t48;
$[126] = t49;
$[127] = t50;
} else t50 = $[127];
let t51;
if ($[128] !== t38 || $[129] !== t41 || $[130] !== t50) {
t51 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
value: t36,
children: [
t37,
t38,
t41,
t50
]
});
$[128] = t38;
$[129] = t41;
$[130] = t50;
$[131] = t51;
} else t51 = $[131];
let t52;
if ($[132] !== ItemWrapper || $[133] !== forwardedRef || $[134] !== size || $[135] !== t51 || $[136] !== wrapperProps) {
t52 = /*#__PURE__*/ jsx(ItemWrapper, {
...wrapperProps,
className: ActionList_module_css_default.ActionListContent,
"data-size": size,
ref: forwardedRef,
children: t51
});
$[132] = ItemWrapper;
$[133] = forwardedRef;
$[134] = size;
$[135] = t51;
$[136] = wrapperProps;
$[137] = t52;
} else t52 = $[137];
let t53;
if ($[138] !== buttonSemantics || $[139] !== forwardedRef || $[140] !== t52 || $[141] !== truncatedText) {
t53 = /*#__PURE__*/ jsx(ConditionalTooltip, {
ref: forwardedRef,
text: truncatedText,
enabled: buttonSemantics,
children: t52
});
$[138] = buttonSemantics;
$[139] = forwardedRef;
$[140] = t52;
$[141] = truncatedText;
$[142] = t53;
} else t53 = $[142];
const t54 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
let t55;
if ($[143] !== containerProps || $[144] !== slots.subItem || $[145] !== t26 || $[146] !== t27 || $[147] !== t28 || $[148] !== t29 || $[149] !== t30 || $[150] !== t31 || $[151] !== t32 || $[152] !== t33 || $[153] !== t34 || $[154] !== t35 || $[155] !== t53 || $[156] !== t54) {
t55 = /*#__PURE__*/ jsxs("li", {
...containerProps,
ref: t26,
"data-component": "ActionList.Item",
"data-variant": t27,
"data-active": t28,
"data-inactive": t29,
"data-is-disabled": t30,
"data-has-subitem": t31,
"data-has-description": t32,
"data-has-trailing-action": t33,
"data-trailing-action-loading": t34,
className: t35,
children: [
t53,
t54,
slots.subItem
]
});
$[143] = containerProps;
$[144] = slots.subItem;
$[145] = t26;
$[146] = t27;
$[147] = t28;
$[148] = t29;
$[149] = t30;
$[150] = t31;
$[151] = t32;
$[152] = t33;
$[153] = t34;
$[154] = t35;
$[155] = t53;
$[156] = t54;
$[157] = t55;
} else t55 = $[157];
let t56;
if ($[158] !== itemContextValue || $[159] !== t55) {
t56 = /*#__PURE__*/ jsx(ItemContext.Provider, {
value: itemContextValue,
children: t55
});
$[158] = itemContextValue;
$[159] = t55;
$[160] = t56;
} else t56 = $[160];
return t56;
};
const Item = Object.assign(fixedForwardRef(UnwrappedItem), {
displayName: "ActionList.Item",
__SLOT__: Symbol("ActionList.Item")
});
//#endregion
export { Item, SubItem };