@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/MenuItem-BR7ingQx.mjs

@@ -0,0 +1,654 @@
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-DlheCTJb.mjs";
+import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
+import { t as computePopoverPosition } from "./computePopoverPosition-BIprs_xo.mjs";
+import { Children, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Menu/MenuPaper.ts
+const elevationSystem = (0, src_exports.system)({ elevation: {
+	property: "boxShadow",
+	scale: "shadows"
+} });
+const MenuPaper = styled("div", {
+	name: "Menu",
+	slot: "paper",
+	label: "MenuPaper",
+	shouldForwardProp: (prop) => ![
+		"elevation",
+		"layer",
+		"margin"
+	].includes(prop)
+})(({ theme, layer, margin }) => ({
+	position: "fixed",
+	top: 0,
+	left: 0,
+	zIndex: theme.zOrder[layer],
+	minWidth: "10rem",
+	maxHeight: `calc(100vh - ${2 * margin}px)`,
+	overflowY: "auto",
+	backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "surfaceBg", "paper")}`),
+	borderRadius: theme.radii.sm,
+	visibility: "hidden"
+}), elevationSystem);
+//#endregion
+//#region src/Menu/MenuContext.ts
+/** Set by a `Menu`. */
+const MenuContext = createContext(null);
+/** The surrounding menu's settings - or, for a `MenuList` on its own, `Menu`'s defaults. */
+function useMenuContext() {
+	const theme = useTheme();
+	return useContext(MenuContext) ?? {
+		align: "start",
+		margin: Number.parseFloat(String(theme.space[2])),
+		elevation: 8,
+		layer: "modal"
+	};
+}
+//#endregion
+//#region src/Menu/utils/getMenuOrigins.ts
+/**
+* The anchor and transform origins `computePopoverPosition` places a list with. `align`
+* is logical - in a right-to-left page `start` is the right edge. Below its trigger, the
+* list lines up with that edge; beside its row, it opens past the row's other edge (to
+* the right for a start-aligned menu in a left-to-right page). The placement flips to the
+* other side on its own where the window has no room.
+*/
+function getMenuOrigins(placement, align, isRtl) {
+	const isStartLeft = align === "start" !== isRtl;
+	const edge = isStartLeft ? "left" : "right";
+	if (placement === "below") return {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: edge
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: edge
+		}
+	};
+	return {
+		anchorOrigin: {
+			vertical: "top",
+			horizontal: isStartLeft ? "right" : "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: edge
+		}
+	};
+}
+//#endregion
+//#region src/Menu/utils/hasRoomBeside.ts
+/**
+* Whether a list `width` wide fits on either side of its row and still keeps `margin` from
+* the window's edges - so a submenu can open beside the row at all.
+*/
+function hasRoomBeside(anchorRect, width, viewportWidth, margin) {
+	const roomBefore = anchorRect.left - margin;
+	const roomAfter = viewportWidth - margin - (anchorRect.left + anchorRect.width);
+	return width <= Math.max(roomBefore, roomAfter);
+}
+//#endregion
+//#region src/utils/isRtl.ts
+/** Whether an element sits in a right-to-left context - its nearest `dir` says so. */
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+//#endregion
+//#region src/Menu/hooks/useMenuPlacement.ts
+/**
+* Places a menu's `position: fixed` surface in the window, next to its anchor - so a
+* scrolling panel's overflow never clips it, while it stays in the menu's own box in the
+* DOM. Placed before paint on every render while open, and again on resize and on any
+* scroll. The surface starts `visibility: hidden` and is shown here, as it is placed - in
+* the same layout pass, so it is visible by the time anything inside it takes focus.
+* Returns whether a list beside its row opened on the other side for want of room.
+*/
+function useMenuPlacement({ isOpen, anchorRef, surfaceRef, placement, align, margin, anchorPosition = null }) {
+	const [isFlipped, setIsFlipped] = useState(false);
+	const pointTop = anchorPosition?.top;
+	const pointLeft = anchorPosition?.left ?? 0;
+	const place = useCallback(() => {
+		const anchor = anchorRef.current;
+		const surface = surfaceRef.current;
+		if (!anchor || !surface) return;
+		const isPoint = pointTop !== void 0;
+		const anchorRect = anchor.getBoundingClientRect();
+		const paperRect = {
+			width: surface.offsetWidth,
+			height: surface.offsetHeight
+		};
+		const viewport = {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+		const isCramped = placement === "beside" && !hasRoomBeside(anchorRect, paperRect.width, viewport.width, margin);
+		const { top, left } = computePopoverPosition({
+			anchorReference: isPoint ? "anchorPosition" : "anchorEl",
+			anchorPosition: isPoint ? {
+				top: pointTop,
+				left: pointLeft
+			} : void 0,
+			anchorRect,
+			paperRect,
+			...getMenuOrigins(isCramped ? "below" : placement, align, isRtl(anchor)),
+			viewport,
+			marginThreshold: margin
+		});
+		surface.style.top = `${top}px`;
+		surface.style.left = `${left}px`;
+		const landed = surface.getBoundingClientRect();
+		const isOwnBox = paperRect.width > 0 && Math.round(landed.width) === paperRect.width;
+		const shiftTop = Math.round(landed.top - top);
+		const shiftLeft = Math.round(landed.left - left);
+		if (isOwnBox && (shiftTop !== 0 || shiftLeft !== 0)) {
+			surface.style.top = `${top - shiftTop}px`;
+			surface.style.left = `${left - shiftLeft}px`;
+		}
+		surface.style.visibility = "visible";
+		if (placement === "beside") {
+			const isOpeningRight = left + paperRect.width / 2 > anchorRect.left + anchorRect.width / 2;
+			const isRightPreferred = align === "start" !== isRtl(anchor);
+			setIsFlipped(!isCramped && isOpeningRight !== isRightPreferred);
+		}
+	}, [
+		anchorRef,
+		surfaceRef,
+		placement,
+		align,
+		margin,
+		pointTop,
+		pointLeft
+	]);
+	useLayoutEffect(() => {
+		if (isOpen) place();
+	});
+	useEffect(() => {
+		if (!isOpen) return void 0;
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [isOpen, place]);
+	return isFlipped;
+}
+//#endregion
+//#region src/MenuItem/Submenu.tsx
+/**
+* A row's submenu: a `MenuList` on its own surface, placed beside the row the way its menu
+* places its list (`align`, the window margin), and drawn on the menu's layer.
+*/
+function Submenu({ anchorRef, listId, labelledBy, children }) {
+	const menu = useMenuContext();
+	const { align, margin, elevation, layer } = menu;
+	const surfaceRef = useRef(null);
+	const isFlipped = useMenuPlacement({
+		isOpen: true,
+		anchorRef,
+		surfaceRef,
+		placement: "beside",
+		align,
+		margin
+	});
+	const flippedAlign = align === "start" ? "end" : "start";
+	const context = useMemo(() => ({
+		...menu,
+		align: isFlipped ? flippedAlign : align
+	}), [
+		menu,
+		isFlipped,
+		flippedAlign,
+		align
+	]);
+	return /* @__PURE__ */ jsx(MenuPaper, {
+		ref: surfaceRef,
+		elevation,
+		layer,
+		margin,
+		children: /* @__PURE__ */ jsx(MenuContext.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx(MenuList, {
+				id: listId,
+				"aria-labelledby": labelledBy,
+				width: "100%",
+				children
+			})
+		})
+	});
+}
+//#endregion
+//#region src/MenuItem/useSubmenu.ts
+/**
+* A row's submenu, opened while the row or anything in its submenu has focus. The pointer
+* moves focus as it goes, so hovering a row opens its submenu and hovering a sibling closes
+* it - the pointer and the keys never disagree. Right goes in and Left comes back, swapped
+* in a right-to-left page.
+*/
+function useSubmenu(rowRef, isEnabled) {
+	const [isOpen, setIsOpen] = useState(false);
+	const entryRef = useRef(null);
+	const listId = useId();
+	const isEnteringRef = useRef(false);
+	const focusFirstRow = () => {
+		const list = document.getElementById(listId);
+		getNextRow(getOwnRows(list), null, "first", false)?.focus();
+	};
+	useEffect(() => {
+		if (isOpen && isEnteringRef.current) {
+			isEnteringRef.current = false;
+			focusFirstRow();
+		}
+	});
+	const handleRowFocus = () => {
+		if (isEnabled) setIsOpen(true);
+	};
+	const handleRowKeyDown = (event) => {
+		const inward = isRtl(event.currentTarget) ? "ArrowLeft" : "ArrowRight";
+		if (!isEnabled || ![
+			inward,
+			"Enter",
+			" "
+		].includes(event.key)) return false;
+		event.preventDefault();
+		event.stopPropagation();
+		if (isOpen) focusFirstRow();
+		else {
+			isEnteringRef.current = true;
+			setIsOpen(true);
+		}
+		return true;
+	};
+	const handleEntryKeyDown = (event) => {
+		const list = document.getElementById(listId);
+		if (event.target.closest("[role=\"menu\"]") !== list) return;
+		const outward = isRtl(event.currentTarget) ? "ArrowRight" : "ArrowLeft";
+		if (event.key !== outward && event.key !== "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		rowRef.current.focus();
+		setIsOpen(false);
+	};
+	const handleEntryBlur = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) setIsOpen(false);
+	};
+	return {
+		isOpen,
+		entryRef,
+		listId,
+		handleRowFocus,
+		handleRowKeyDown,
+		handleEntryKeyDown,
+		handleEntryBlur
+	};
+}
+//#endregion
+//#region src/MenuItem/MenuItem.tsx
+const shouldForwardProp = createShouldForwardProp([
+	"color",
+	"textColor",
+	"sizeToken",
+	"selected",
+	"highlighted",
+	"disabled",
+	"dense",
+	"disableGutters",
+	"divider",
+	"isMenu"
+]);
+const baseStyle = ({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.space[1],
+	cursor: "pointer",
+	fontFamily: theme.fonts.body,
+	lineHeight: theme.lineHeights.base,
+	listStyle: "none",
+	userSelect: "none",
+	whiteSpace: "nowrap",
+	transition: "background-color 0.12s ease",
+	outline: "none"
+});
+const sizeVariants = ({ theme, sizeToken, dense, disableGutters }) => {
+	const s = theme.sizes[sizeToken];
+	const verticalPadding = dense ? theme.space[.5] : void 0;
+	return {
+		paddingTop: verticalPadding ?? theme.space[s.paddingTop],
+		paddingBottom: verticalPadding ?? theme.space[s.paddingBottom],
+		paddingLeft: disableGutters ? 0 : theme.space[s.paddingLeft],
+		paddingRight: disableGutters ? 0 : theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const dividerStyle = ({ theme, divider }) => divider ? {
+	borderBottomWidth: theme.borderWidths.thin,
+	borderBottomStyle: "solid",
+	borderBottomColor: (0, src_exports.get)(theme, "border.light")
+} : {};
+const menuStyles = ({ theme, color, textColor, disabled }) => {
+	if (disabled) return {
+		color: (0, src_exports.get)(theme, "text.disabled"),
+		cursor: "default"
+	};
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	const highlight = { backgroundColor: `${main}1F` };
+	return {
+		color: textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : main,
+		"&:focus": highlight,
+		"&:focus-visible": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: `-${theme.borderWidths.base}`
+		},
+		"&[aria-expanded=\"true\"]": highlight
+	};
+};
+const interactionStyles = (props) => {
+	const { theme, color, textColor, selected, highlighted, disabled, isMenu } = props;
+	if (isMenu) return menuStyles(props);
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	const hoverBg = `${main}1F`;
+	const selectedBg = `${main}29`;
+	const activeSelectedBg = `${main}3D`;
+	if (disabled) return {
+		color: (0, src_exports.get)(theme, "text.disabled"),
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	};
+	const baseColor = textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : main;
+	return {
+		color: selected ? main : baseColor,
+		backgroundColor: selected ? highlighted ? activeSelectedBg : selectedBg : highlighted ? hoverBg : "transparent",
+		"&:hover": { backgroundColor: selected ? activeSelectedBg : hoverBg }
+	};
+};
+const MenuItemRoot = styled("li", {
+	name: "MenuItem",
+	label: "MenuItem",
+	shouldForwardProp
+})(baseStyle, sizeVariants, dividerStyle, interactionStyles);
+const CheckSlot = styled("span", {
+	name: "MenuItem",
+	slot: "check",
+	label: "MenuItemCheck"
+})({
+	display: "inline-flex",
+	width: "1.125rem",
+	flexShrink: 0
+});
+const StartIconSlot = styled("span", {
+	name: "MenuItem",
+	slot: "startIcon",
+	label: "MenuItemStartIcon"
+})(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: theme.icon.sm,
+	height: theme.icon.sm,
+	flexShrink: 0
+}));
+const LabelSlot = styled("span", {
+	name: "MenuItem",
+	slot: "label",
+	label: "MenuItemLabel"
+})({
+	flex: 1,
+	minWidth: 0
+});
+const ShortcutSlot = styled("span", {
+	name: "MenuItem",
+	slot: "shortcut",
+	label: "MenuItemShortcut"
+})(({ theme }) => ({
+	marginLeft: theme.space[3],
+	color: (0, src_exports.get)(theme, "text.secondary"),
+	fontSize: "0.875em"
+}));
+const SubmenuIconSlot = styled("span", {
+	name: "MenuItem",
+	slot: "submenuIcon",
+	label: "MenuItemSubmenuIcon"
+})(({ theme }) => ({
+	display: "inline-flex",
+	marginLeft: theme.space[2],
+	"[dir=\"rtl\"] &": { transform: "scaleX(-1)" }
+}));
+const EntrySlot = styled("li", {
+	name: "MenuItem",
+	slot: "entry",
+	label: "MenuItemEntry",
+	shouldForwardProp: createShouldForwardProp(["hasSecondaryAction"])
+})(({ hasSecondaryAction }) => ({
+	listStyle: "none",
+	...hasSecondaryAction && {
+		display: "flex",
+		alignItems: "center",
+		"& > [role^=\"menuitem\"]": {
+			flex: "1 1 auto",
+			minWidth: 0
+		}
+	}
+}));
+const SecondaryActionSlot = styled("span", {
+	name: "MenuItem",
+	slot: "secondaryAction",
+	label: "MenuItemSecondaryAction"
+})(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	flexShrink: 0,
+	paddingInlineEnd: theme.space[1]
+}));
+function isKeyboardFocus(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+function useRowLook(own, menu) {
+	const theme = useTheme();
+	const dp = useDefaultProps("MenuItem");
+	return {
+		color: own.color ?? menu?.color ?? dp.color ?? themeDefault(theme, "color", "primary"),
+		size: own.size ?? menu?.size ?? dp.size ?? themeDefault(theme, "size", "md"),
+		textColor: own.textColor ?? menu?.textColor ?? dp.textColor,
+		dense: own.dense ?? menu?.dense ?? dp.dense ?? false
+	};
+}
+const getRowAria = (state) => ({
+	"aria-haspopup": state.hasSubmenu ? "menu" : void 0,
+	"aria-expanded": state.hasSubmenu ? state.isSubmenuOpen : void 0,
+	"aria-controls": state.isSubmenuOpen ? state.submenuId : void 0,
+	"aria-checked": state.role === "menuitem" ? void 0 : state.selected,
+	"aria-keyshortcuts": typeof state.shortcut === "string" ? state.shortcut : void 0,
+	"aria-describedby": state.note ? state.noteId : void 0
+});
+const joinClassNames = (...names) => names.filter(Boolean).join(" ") || void 0;
+/**
+* @description A row of a list. Inside a `MenuList` it is a menu row - a `menuitem`
+* (or `menuitemradio` / `menuitemcheckbox`) with a leading icon column, its label and a
+* trailing shortcut, chosen by a click, Enter or Space. Anywhere else it is `Select`'s
+* `<li role="option">` (override via `as`), whose selection, highlight and density props
+* `Select` injects; used on its own it renders a static, styled row.
+*/
+function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, role = "menuitem", startIcon, shortcut, note, onClick, submenu, emptyLabel, secondaryAction, id, className, "data-testid": dataTestid }) {
+	const menu = useMenuListContext();
+	const isMenu = menu !== null;
+	const { color, size, textColor, dense } = useRowLook({
+		color: colorProp,
+		size: sizeProp,
+		textColor: textColorProp,
+		dense: denseProp
+	}, menu);
+	const rootRef = useRef(null);
+	const [isFocusVisible, setIsFocusVisible] = useState(false);
+	const noteId = useId();
+	const fallbackId = useId();
+	const hasSubmenu = isMenu && submenu !== void 0;
+	const { isOpen: isSubmenuOpen, entryRef, listId: submenuId, handleRowFocus, handleRowKeyDown, handleEntryKeyDown, handleEntryBlur } = useSubmenu(rootRef, hasSubmenu && !disabled);
+	useEffect(() => {
+		if (autoFocus) rootRef.current?.focus();
+	}, [autoFocus]);
+	const choose = (event) => {
+		if (disabled || hasSubmenu) return;
+		if (menu) {
+			onClick?.(event);
+			menu.onActivate(value, event);
+		} else if (value !== void 0) onSelect?.(value);
+	};
+	const handleMouseDown = (event) => {
+		if (!isMenu) event.preventDefault();
+	};
+	const handleKeyDown = (event) => {
+		if (handleRowKeyDown(event)) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			choose(event);
+		} else if (event.key === " ") event.preventDefault();
+	};
+	const handleKeyUp = (event) => {
+		if (event.key === " ") choose(event);
+	};
+	const handlePointerMove = (event) => {
+		const row = event.currentTarget;
+		if (!disabled && row.ownerDocument.activeElement !== row) row.focus();
+	};
+	const handleFocus = (event) => {
+		handleRowFocus();
+		if (focusVisibleClassName && isKeyboardFocus(event.currentTarget)) setIsFocusVisible(true);
+	};
+	const handleBlur = () => {
+		setIsFocusVisible(false);
+	};
+	const rootClassName = joinClassNames(className, isFocusVisible && focusVisibleClassName);
+	const rootProps = {
+		as,
+		ref: rootRef,
+		id,
+		tabIndex: -1,
+		"aria-disabled": disabled || void 0,
+		"data-value": value,
+		color,
+		textColor,
+		sizeToken: size,
+		selected,
+		highlighted,
+		disabled,
+		dense,
+		disableGutters,
+		divider,
+		isMenu,
+		className: rootClassName,
+		"data-testid": dataTestid,
+		onMouseDown: handleMouseDown,
+		onClick: choose,
+		onFocus: handleFocus,
+		onBlur: handleBlur
+	};
+	if (!isMenu) return /* @__PURE__ */ jsxs(MenuItemRoot, {
+		...rootProps,
+		role: "option",
+		"aria-selected": selected,
+		children: [multiple && /* @__PURE__ */ jsx(CheckSlot, {
+			"aria-hidden": true,
+			children: selected && /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				size: "1.125rem",
+				color: "inherit"
+			})
+		}), children]
+	});
+	const tick = role !== "menuitem" && selected ? /* @__PURE__ */ jsx(Icon, {
+		name: "check",
+		size: "sm",
+		color: "inherit"
+	}) : null;
+	const rowId = id ?? fallbackId;
+	const hasSecondaryAction = secondaryAction != null;
+	const row = /* @__PURE__ */ jsxs(MenuItemRoot, {
+		...rootProps,
+		as: hasSubmenu || hasSecondaryAction ? "div" : as,
+		id: rowId,
+		role,
+		...getRowAria({
+			role,
+			selected,
+			hasSubmenu,
+			isSubmenuOpen,
+			submenuId,
+			shortcut,
+			note,
+			noteId
+		}),
+		title: note,
+		onKeyDown: handleKeyDown,
+		onKeyUp: handleKeyUp,
+		onPointerMove: handlePointerMove,
+		children: [
+			/* @__PURE__ */ jsx(StartIconSlot, {
+				"aria-hidden": true,
+				children: startIcon ?? tick
+			}),
+			/* @__PURE__ */ jsx(LabelSlot, {
+				"data-menu-label": true,
+				children
+			}),
+			shortcut != null && /* @__PURE__ */ jsx(ShortcutSlot, {
+				"aria-hidden": true,
+				children: shortcut
+			}),
+			hasSubmenu && /* @__PURE__ */ jsx(SubmenuIconSlot, {
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "chevron_right",
+					size: "sm",
+					color: "inherit"
+				})
+			}),
+			note && /* @__PURE__ */ jsx("span", {
+				id: noteId,
+				hidden: true,
+				children: note
+			})
+		]
+	});
+	if (!hasSubmenu && !hasSecondaryAction) return row;
+	if (!hasSubmenu) return /* @__PURE__ */ jsxs(EntrySlot, {
+		role: "none",
+		hasSecondaryAction: true,
+		children: [row, /* @__PURE__ */ jsx(SecondaryActionSlot, {
+			"aria-hidden": true,
+			children: secondaryAction
+		})]
+	});
+	const hasRows = Children.toArray(submenu).length > 0;
+	return /* @__PURE__ */ jsxs(EntrySlot, {
+		ref: entryRef,
+		role: "none",
+		hasSecondaryAction,
+		onKeyDown: handleEntryKeyDown,
+		onBlur: handleEntryBlur,
+		children: [
+			row,
+			hasSecondaryAction && /* @__PURE__ */ jsx(SecondaryActionSlot, {
+				"aria-hidden": true,
+				children: secondaryAction
+			}),
+			isSubmenuOpen && /* @__PURE__ */ jsx(Submenu, {
+				anchorRef: entryRef,
+				listId: submenuId,
+				labelledBy: rowId,
+				children: hasRows ? submenu : emptyLabel != null && /* @__PURE__ */ jsx(MenuItem, {
+					disabled: true,
+					children: emptyLabel
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { MenuPaper as a, MenuContext as i, useMenuPlacement as n, isRtl as r, MenuItem as t };