@rocket.chat/fuselage 0.94.0 → 0.96.0

package/dist/fuselage.development.js

@@ -310,7 +310,6 @@ if (process.env.NODE_ENV !== "production") (function() {
 		800: new Var("neutral-800", _rocket_chat_fuselage_tokens_dist_colors_json.default.n800),
 		900: new Var("neutral-900", _rocket_chat_fuselage_tokens_dist_colors_json.default.n900)
 	};
-	var primitive = (ref, name) => new Var(name, _rocket_chat_fuselage_tokens_dist_colors_json.default[ref]);
 	var surfaceTokens = _rocket_chat_fuselage_tokens_dist_surface_json.default.light;
 	var surfaceColors = {
 		"surface-light": new Var("surface-light", surfaceTokens.light),
@@ -366,7 +365,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var statusColors = {
 		"status-font-on-info": new Var("status-font-on-info", statusTokens["font-on-info"]),
 		"status-font-on-success": new Var("status-font-on-success", statusTokens["font-on-success"]),
-		"status-font-on-warning": primitive("y800", "status-font-on-warning"),
+		"status-font-on-warning": new Var("status-font-on-warning", statusTokens["font-on-warning"]),
 		"status-font-on-warning-2": new Var("status-font-on-warning-2", statusTokens["font-on-warning-2"]),
 		"status-font-on-danger": new Var("status-font-on-danger", statusTokens["font-on-danger"]),
 		"status-font-on-service-1": new Var("status-font-on-service-1", statusTokens["font-on-service-1"]),
@@ -2520,18 +2519,16 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* A container for grouping buttons that semantically share a common action context.
 	*/
-	function ButtonGroup({ align = "start", children, stretch, vertical, wrap, small, large, joined, ghostPosition, className, ...props }) {
+	function ButtonGroup({ align = "start", children, stretch, vertical, wrap, small, large, className, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: [
 				"rcx-button-group",
 				stretch && "rcx-button-group--stretch",
 				vertical && "rcx-button-group--vertical",
 				align && `rcx-button-group--align-${align}`,
-				!joined && small && "rcx-button-group--small",
-				!joined && large && "rcx-button-group--large",
+				small && "rcx-button-group--small",
+				large && "rcx-button-group--large",
 				wrap && "rcx-button-group--wrap",
-				joined && "rcx-button-group--joined",
-				joined && ghostPosition && `rcx-button-group--ghost-${ghostPosition}`,
 				className
 			].filter(Boolean).join(" "),
 			role: "group",
@@ -3261,6 +3258,265 @@ if (process.env.NODE_ENV !== "production") (function() {
 		size: 20
 	});
 	//#endregion
+	//#region src/components/Item/ItemContext.ts
+	var ItemContext = (0, react.createContext)({
+		descriptionIds: [],
+		registerDescription: () => () => void 0
+	});
+	var useItemContext = () => (0, react.useContext)(ItemContext);
+	//#endregion
+	//#region src/components/Item/useIdRegistry.ts
+	/**
+	* Collects the ids that descendants announce, so a parent can reference them
+	* in ARIA relationships without the consumer wiring ids by hand.
+	*/
+	var useIdRegistry = () => {
+		const [ids, setIds] = (0, react.useState)([]);
+		return [ids, (0, react.useCallback)((id) => {
+			setIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+			return () => {
+				setIds((prev) => prev.filter((value) => value !== id));
+			};
+		}, [])];
+	};
+	//#endregion
+	//#region src/components/Item/Item.tsx
+	/**
+	* A list row composed from slots: media, icon, content and actions.
+	*/
+	var Item = ({ is: Tag = "div", inset = "none", selected, highlighted, focused, disabled, variant, className, onClick, children, ...props }) => {
+		const [descriptionIds, registerDescription] = useIdRegistry();
+		const contextValue = (0, react.useMemo)(() => ({
+			descriptionIds,
+			registerDescription
+		}), [descriptionIds, registerDescription]);
+		const handleClick = onClick ? (event) => {
+			if (disabled) return;
+			onClick(event);
+		} : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+				...props,
+				className: cx(cxx("rcx-item")({
+					[`inset-${inset}`]: inset !== "none",
+					clickable: !!onClick,
+					selected: !!selected,
+					highlighted: !!highlighted,
+					focused: !!focused,
+					disabled: !!disabled,
+					danger: variant === "danger"
+				}), className),
+				onClick: handleClick,
+				children
+			})
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemActions.tsx
+	/**
+	* The trailing buttons, icon buttons or menu trigger of an `Item` or `ItemGroupHeader`.
+	* Placed as a direct child it spans every row; placed inside an `ItemRow` it only takes space from that row.
+	*/
+	var ItemActions = ({ is: Tag = "div", reveal = "always", className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item__actions")({ "reveal-hover": reveal === "hover" }), className),
+		children: reveal === "hover" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rcx-item__actions-inner",
+			children
+		}) : children
+	});
+	//#endregion
+	//#region src/components/Item/ItemContent.tsx
+	/**
+	* The flexible, truncating column that holds the title and description, or one `ItemRow` per line.
+	*/
+	var ItemContent = ({ is: Tag = "div", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx("rcx-item__content", className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemDescription.tsx
+	/**
+	* The secondary line of an `Item`, such as a last message preview or a username.
+	*/
+	var ItemDescription = ({ is, inline, className, ...props }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(is ?? (inline ? "span" : "div"), {
+			...props,
+			className: cx(cxx("rcx-item__description")({ inline: !!inline }), className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemDivider.tsx
+	/**
+	* The divider between groups, menu sections, or a header and its rows.
+	*/
+	var ItemDivider = ({ is: Tag = "div", inset = "none", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item-divider")({ [`inset-${inset}`]: inset !== "none" }), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemGroupContext.ts
+	var ItemGroupContext = (0, react.createContext)({ registerTitle: () => () => void 0 });
+	var useItemGroupContext = () => (0, react.useContext)(ItemGroupContext);
+	//#endregion
+	//#region src/components/Item/ItemGroup.tsx
+	/**
+	* A list of `Item` rows. An `ItemGroupTitle` inside it labels the group, and its width drives the narrow layout.
+	*/
+	var ItemGroup = ({ is: Tag = "div", className, children, ...props }) => {
+		const [titleIds, registerTitle] = useIdRegistry();
+		const contextValue = (0, react.useMemo)(() => ({ registerTitle }), [registerTitle]);
+		const ariaLabelledBy = !(!!props["aria-label"] || !!props["aria-labelledby"]) && titleIds.length > 0 ? titleIds.join(" ") : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+				"aria-labelledby": ariaLabelledBy,
+				...props,
+				className: cx("rcx-item-group", className),
+				children
+			})
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemGroupHeader.tsx
+	/**
+	* The label row of a group, such as Favorites, Recent or Moderators. It holds an `ItemGroupTitle` and optional trailing content.
+	*/
+	var ItemGroupHeader = ({ is: Tag = "div", inset = "none", sticky, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item-group-header")({
+			[`inset-${inset}`]: inset !== "none",
+			sticky: !!sticky
+		}), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemGroupTitle.tsx
+	/**
+	* The text of an `ItemGroupHeader`. Inside an `ItemGroup`, it becomes the group's accessible name.
+	*/
+	var ItemGroupTitle = ({ is: Tag = "div", id: propId, className, type, ...props }) => {
+		const generatedId = (0, react.useId)();
+		const id = propId ?? generatedId;
+		const { registerTitle } = useItemGroupContext();
+		(0, react.useEffect)(() => registerTitle(id), [id, registerTitle]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+			...props,
+			type: Tag === "button" ? type ?? "button" : type,
+			id,
+			className: cx("rcx-item-group-title", className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemIcon.tsx
+	/**
+	* A 20px slot for the room type icon or a user status, placed before the title.
+	*/
+	var ItemIcon = ({ is: Tag = "div", label, id: propId, className, ...props }) => {
+		const generatedId = (0, react.useId)();
+		const id = propId ?? generatedId;
+		const { registerDescription } = useItemContext();
+		(0, react.useEffect)(() => {
+			if (!label) return;
+			return registerDescription(id);
+		}, [
+			id,
+			label,
+			registerDescription
+		]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+			...label ? {
+				"role": "img",
+				"aria-label": label
+			} : { "aria-hidden": true },
+			...props,
+			id,
+			className: cx("rcx-item__icon", className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemLink.tsx
+	/**
+	* The primary target of an `Item`. It covers the whole row, so actions sit beside it instead of inside it.
+	*/
+	var ItemLink = (props) => {
+		const { descriptionIds } = useItemContext();
+		const ariaDescribedBy = [props["aria-describedby"], ...descriptionIds].filter(Boolean).join(" ") || void 0;
+		if (props.is === "button") {
+			const { is: _is, className, type = "button", ...rest } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				...rest,
+				type,
+				"aria-describedby": ariaDescribedBy,
+				className: cx("rcx-item__link", className)
+			});
+		}
+		const { is: _is, className, children, ...rest } = props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			...rest,
+			"aria-describedby": ariaDescribedBy,
+			className: cx("rcx-item__link", className),
+			children
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemMedia.tsx
+	/**
+	* The leading avatar, icon or thumbnail of an `Item`. Its box fits its child, so the child's size sets the row height.
+	*/
+	var ItemMedia = ({ is: Tag = "div", variant = "default", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item__media")({ icon: variant === "icon" }), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemMeta.tsx
+	/**
+	* Short trailing text that never truncates, such as a timestamp, count or file size.
+	*/
+	var ItemMeta = ({ is: Tag = "div", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx("rcx-item__meta", className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemRow.tsx
+	/**
+	* A horizontal line inside `ItemContent`, such as a title with a timestamp or a description with a badge.
+	*/
+	var ItemRow = ({ is: Tag = "div", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx("rcx-item__row", className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemTitle.tsx
+	/**
+	* The main label of an `Item`. It truncates with an ellipsis.
+	*/
+	var ItemTitle = ({ is: Tag = "div", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx("rcx-item__title", className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemSkeleton.tsx
+	/**
+	* A loading placeholder with the same height as an `Item` with the same media and lines.
+	*/
+	var ItemSkeleton = ({ is, inset, mediaSize = "x20", description = false }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
+		is,
+		inset,
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMedia, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "rect",
+			width: mediaSize,
+			height: mediaSize
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ItemContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "text",
+			width: "60%"
+		}) }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDescription, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "text",
+			width: "40%"
+		}) })] })]
+	});
+	//#endregion
 	//#region src/components/Menu/MenuOption.tsx
 	function MenuOption({ is: Tag = "li", id, children, focus, selected, className, title, disabled, variant, onClick, ...props }) {
 		return /* @__PURE__ */ (0, react.createElement)(Tag, {
@@ -4041,11 +4297,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* Used for mentions
 	*/
-	var Tag = ({ large, medium, className, disabled, onClick, variant, children, icon, href, ...props }) => {
+	var Tag = ({ large, medium, pill, className, disabled, onClick, variant, children, icon, href, ...props }) => {
 		const modifiers = [
 			variant,
 			medium && "medium",
 			large && "large",
+			pill && "pill",
 			disabled && "disabled",
 			onClick && "clickable",
 			href && "clickable"
@@ -6653,6 +6910,39 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	}
 	//#endregion
+	//#region src/components/SplitButton/SplitButton.tsx
+	/**
+	* Fuses a menu trigger and its primary action into a single control, e.g. an
+	* audio device menu next to a microphone toggle. The menu trigger is a
+	* `SplitButtonTrigger`, rendered as a ghost segment wherever it sits.
+	*/
+	function SplitButton({ className, danger, warning, success, primary, ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "group",
+			className: [
+				"rcx-split-button",
+				danger && "rcx-split-button--danger",
+				warning && "rcx-split-button--warning",
+				success && "rcx-split-button--success",
+				primary && "rcx-split-button--primary",
+				className
+			].filter(Boolean).join(" "),
+			...props
+		});
+	}
+	//#endregion
+	//#region src/components/SplitButton/SplitButtonTrigger.tsx
+	/**
+	* The ghost segment of a `SplitButton`: the menu trigger fused next to the
+	* primary action. Pass it as a `Menu`'s `button`.
+	*/
+	function SplitButtonTrigger(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+			"rcx-split-button__trigger": true,
+			...props
+		});
+	}
+	//#endregion
 	//#region src/components/Table/Table.tsx
 	var Table = ({ striped, sticky, fixed = false, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 		"rcx-table__wrapper": true,
@@ -7026,6 +7316,21 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.Input = Input;
 	exports.InputBox = InputBox;
 	exports.InputBoxSkeleton = InputBoxSkeleton;
+	exports.Item = Item;
+	exports.ItemActions = ItemActions;
+	exports.ItemContent = ItemContent;
+	exports.ItemDescription = ItemDescription;
+	exports.ItemDivider = ItemDivider;
+	exports.ItemGroup = ItemGroup;
+	exports.ItemGroupHeader = ItemGroupHeader;
+	exports.ItemGroupTitle = ItemGroupTitle;
+	exports.ItemIcon = ItemIcon;
+	exports.ItemLink = ItemLink;
+	exports.ItemMedia = ItemMedia;
+	exports.ItemMeta = ItemMeta;
+	exports.ItemRow = ItemRow;
+	exports.ItemSkeleton = ItemSkeleton;
+	exports.ItemTitle = ItemTitle;
 	exports.Label = Label;
 	exports.Margins = Margins;
 	exports.Menu = Menu;
@@ -7186,6 +7491,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.SidepanelSectionAction = SidepanelSectionAction;
 	exports.Skeleton = Skeleton;
 	exports.Slider = Slider;
+	exports.SplitButton = SplitButton;
+	exports.SplitButtonTrigger = SplitButtonTrigger;
 	exports.States = States;
 	exports.StatesAction = StatesAction;
 	exports.StatesActions = StatesActions;