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

package/dist/Menu-tECbAEFj.mjs

@@ -0,0 +1,167 @@
+import { o as styled } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { o as MenuActivationContext, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
+import { a as MenuPaper, i as MenuContext, n as useMenuPlacement, r as isRtl, t as MenuItem } from "./MenuItem-BR7ingQx.mjs";
+import { MenuItems } from "./Menu/MenuItems.mjs";
+import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Menu/utils/assignRef.ts
+/** Hands `value` to a ref of either kind - a callback, or an object - when there is one. */
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+//#endregion
+//#region src/Menu/Menu/Menu.tsx
+const MenuRoot = styled("div", {
+	name: "Menu",
+	label: "Menu"
+})({ display: "inline-flex" });
+/** The menu's trigger: the element given, as the button that opens the list. */
+function MenuTrigger({ element, id, elementRef, isOpen, listId, onClick, onKeyDown }) {
+	return cloneElement(element, {
+		id,
+		ref: elementRef,
+		"aria-haspopup": "menu",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? listId : void 0,
+		onClick,
+		onKeyDown
+	});
+}
+/**
+* @description A trigger and the `MenuList` it opens. Not modal: no focus trap, no scroll
+* lock, nothing laid over the page, so the pointer passes over it freely. The list is
+* placed `position: fixed` in the window next to the trigger, so a panel's overflow
+* can't clip it, but stays inside the menu's own box in the DOM. Escape or a chosen row
+* closes it and returns focus to the trigger; focus leaving it closes it where it went.
+*/
+function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+	const dp = useDefaultProps("Menu");
+	const align = alignProp ?? dp.align ?? "start";
+	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
+	const elevation = elevationProp ?? dp.elevation ?? 8;
+	const layer = layerProp ?? dp.layer ?? "modal";
+	const color = colorProp ?? dp.color;
+	const textColor = textColorProp ?? dp.textColor;
+	const size = sizeProp ?? dp.size;
+	const dense = denseProp ?? dp.dense;
+	const theme = useTheme();
+	const isControlled = isOpenProp !== void 0;
+	const [isOpenState, setIsOpenState] = useState(defaultOpen);
+	const isOpen = isControlled ? isOpenProp : isOpenState;
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const listId = useId();
+	const fallbackTriggerId = useId();
+	const triggerId = trigger.props.id ?? fallbackTriggerId;
+	const margin = Number.parseFloat(String(theme.space[marginThreshold]));
+	const menuContext = useMemo(() => ({
+		align,
+		margin,
+		elevation,
+		layer
+	}), [
+		align,
+		margin,
+		elevation,
+		layer
+	]);
+	useMenuPlacement({
+		isOpen,
+		anchorRef: rootRef,
+		surfaceRef,
+		placement: "below",
+		align,
+		margin
+	});
+	const open = () => {
+		if (!isControlled) setIsOpenState(true);
+		onOpen?.();
+	};
+	const close = useCallback((event, reason) => {
+		if (!isControlled) setIsOpenState(false);
+		onClose?.(event, reason);
+		if (reason !== "blur") triggerRef.current?.focus();
+	}, [isControlled, onClose]);
+	const triggerProps = trigger.props;
+	const setTriggerRef = useCallback((element) => {
+		triggerRef.current = element;
+		assignRef(triggerProps.ref, element);
+	}, [triggerProps]);
+	const handleActivate = useCallback((_value, event) => close(event, "select"), [close]);
+	const handleTriggerClick = (event) => {
+		trigger.props.onClick?.(event);
+		if (isOpen) close(event, "triggerClick");
+		else open();
+	};
+	const handleTriggerKeyDown = (event) => {
+		trigger.props.onKeyDown?.(event);
+		if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			open();
+		}
+	};
+	const handleSurfaceKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close(event, "escapeKey");
+		} else if (onStep && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+			event.preventDefault();
+			const step = event.key === "ArrowRight" ? 1 : -1;
+			onStep(isRtl(event.currentTarget) ? -step : step);
+		}
+	};
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (isOpen && !event.currentTarget.contains(next)) close(event, "blur");
+	};
+	const hasRows = items ? items.length > 0 : Children.toArray(children).length > 0;
+	const rows = items ? /* @__PURE__ */ jsx(MenuItems, { items }) : children;
+	return /* @__PURE__ */ jsxs(MenuRoot, {
+		ref: rootRef,
+		className,
+		"data-testid": dataTestid,
+		onBlur: handleBlur,
+		children: [/* @__PURE__ */ jsx(MenuTrigger, {
+			element: trigger,
+			id: triggerId,
+			elementRef: setTriggerRef,
+			isOpen,
+			listId,
+			onClick: handleTriggerClick,
+			onKeyDown: handleTriggerKeyDown
+		}), isOpen && /* @__PURE__ */ jsx(MenuPaper, {
+			ref: surfaceRef,
+			elevation,
+			layer,
+			margin,
+			onKeyDown: handleSurfaceKeyDown,
+			children: /* @__PURE__ */ jsx(MenuContext.Provider, {
+				value: menuContext,
+				children: /* @__PURE__ */ jsx(MenuActivationContext.Provider, {
+					value: handleActivate,
+					children: /* @__PURE__ */ jsx(MenuList, {
+						id: listId,
+						"aria-label": ariaLabel,
+						"aria-labelledby": ariaLabel ? void 0 : triggerId,
+						shouldAutoFocus: true,
+						onSelect,
+						color,
+						textColor,
+						size,
+						dense,
+						width: "100%",
+						children: hasRows ? rows : emptyLabel != null && /* @__PURE__ */ jsx(MenuItem, {
+							disabled: true,
+							children: emptyLabel
+						})
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { Menu as t };

package/dist/Menu.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MenuList = require("./MenuList-D4imLXAa.cjs");
+const require_Menu_MenuDivider = require("./Menu/MenuDivider.cjs");
+const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
+const require_Menu_ContextMenu = require("./Menu/ContextMenu.cjs");
+const require_Menu = require("./Menu-BkKPTOfh.cjs");
+exports.ContextMenu = require_Menu_ContextMenu.ContextMenu;
+exports.Menu = require_Menu.Menu;
+exports.MenuDivider = require_Menu_MenuDivider.MenuDivider;
+exports.MenuItems = require_Menu_MenuItems.MenuItems;
+exports.MenuList = require_MenuList.MenuList;
+exports.MenuListContext = require_MenuList.MenuListContext;
+exports.useMenuListContext = require_MenuList.useMenuListContext;

package/dist/Menu.d.cts

@@ -0,0 +1,7 @@
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-vujGcRk9.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-DQcnJ5H4.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-CWnbCxgw.cjs";
+import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.cjs";
+import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.cjs";
+import { MenuList, MenuListProps } from "./Menu/MenuList.cjs";
+export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuProps, MenuStep, useMenuListContext };

package/dist/Menu.d.mts

@@ -0,0 +1,7 @@
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-Dml16k0X.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-C3KrFPCj.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DckSub2J.mjs";
+import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.mjs";
+import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.mjs";
+import { MenuList, MenuListProps } from "./Menu/MenuList.mjs";
+export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuProps, MenuStep, useMenuListContext };

package/dist/Menu.mjs

@@ -0,0 +1,6 @@
+import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
+import { MenuDivider } from "./Menu/MenuDivider.mjs";
+import { MenuItems } from "./Menu/MenuItems.mjs";
+import { ContextMenu } from "./Menu/ContextMenu.mjs";
+import { t as Menu } from "./Menu-tECbAEFj.mjs";
+export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };