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

package/dist/Menu/MenuList.d.mts

@@ -0,0 +1,38 @@
+import { W as Theme } from "../index-CJhK7JND.mjs";
+import { t as MenuItemValue } from "../MenuListContext-x-7lH4CH.mjs";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { KeyboardEvent, ReactNode } from "react";
+//#region src/Menu/MenuList/MenuList.d.ts
+interface MenuListProps extends SpaceProps<Theme>, LayoutProps<Theme> {
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Carry the arrow keys past the last row to the first, and back. Default: `true`. */
+  shouldWrap?: boolean;
+  /** Focus the selected row, or the first enabled one, on mount. Default: `false`. */
+  shouldAutoFocus?: boolean;
+  /** Accent color for every row - resolves to `theme.palette[color]`. A row's own value wins. */
+  color?: keyof Theme['palette'];
+  /** Base text color for every row - resolves against `theme.text`. A row's own value wins. */
+  textColor?: keyof Theme['text'];
+  /** Density token for every row - resolves against `theme.sizes`. A row's own value wins. */
+  size?: keyof Theme['sizes'];
+  /** Compact vertical padding for every row. */
+  dense?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="menu"` list that owns the keyboard: the arrow keys, Home and End
+ * move focus between its own rows, skipping disabled ones; typing jumps to a row by its
+ * label. Rows are found in the DOM by their nearest `role="menu"`, so a nested submenu's
+ * rows are never this list's. Renders in place - `Menu` floats one next to a trigger.
+ */
+declare function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus, color, textColor, size, dense, onKeyDown, ...rest }: Readonly<MenuListProps>): import("react").JSX.Element;
+//#endregion
+export { type MenuItemValue, MenuList, MenuListProps };

package/dist/Menu/MenuList.mjs

@@ -0,0 +1,2 @@
+import { t as MenuList } from "../MenuList-B7msJ1IG.mjs";
+export { MenuList };

package/dist/Menu-Cgg-sX4W.cjs

@@ -0,0 +1,173 @@
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_MenuList = require("./MenuList-D4imLXAa.cjs");
+const require_MenuItem = require("./MenuItem-BTP7Ijwi.cjs");
+const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
+let react = require("react");
+let react_jsx_runtime = require("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 = require_src.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 (0, react.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 = require_theme.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 = require_theme.useTheme();
+	const isControlled = isOpenProp !== void 0;
+	const [isOpenState, setIsOpenState] = (0, react.useState)(defaultOpen);
+	const isOpen = isControlled ? isOpenProp : isOpenState;
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const surfaceRef = (0, react.useRef)(null);
+	const listId = (0, react.useId)();
+	const fallbackTriggerId = (0, react.useId)();
+	const triggerId = trigger.props.id ?? fallbackTriggerId;
+	const margin = Number.parseFloat(String(theme.space[marginThreshold]));
+	const menuContext = (0, react.useMemo)(() => ({
+		align,
+		margin,
+		elevation,
+		layer
+	}), [
+		align,
+		margin,
+		elevation,
+		layer
+	]);
+	require_MenuItem.useMenuPlacement({
+		isOpen,
+		anchorRef: rootRef,
+		surfaceRef,
+		placement: "below",
+		align,
+		margin
+	});
+	const open = () => {
+		if (!isControlled) setIsOpenState(true);
+		onOpen?.();
+	};
+	const close = (0, react.useCallback)((event, reason) => {
+		if (!isControlled) setIsOpenState(false);
+		onClose?.(event, reason);
+		if (reason !== "blur") triggerRef.current?.focus();
+	}, [isControlled, onClose]);
+	const triggerProps = trigger.props;
+	const setTriggerRef = (0, react.useCallback)((element) => {
+		triggerRef.current = element;
+		assignRef(triggerProps.ref, element);
+	}, [triggerProps]);
+	const handleActivate = (0, react.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(require_isRtl.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 : react.Children.toArray(children).length > 0;
+	const rows = items ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu_MenuItems.MenuItems, { items }) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuRoot, {
+		ref: rootRef,
+		className,
+		"data-testid": dataTestid,
+		onBlur: handleBlur,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuTrigger, {
+			element: trigger,
+			id: triggerId,
+			elementRef: setTriggerRef,
+			isOpen,
+			listId,
+			onClick: handleTriggerClick,
+			onKeyDown: handleTriggerKeyDown
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuPaper, {
+			ref: surfaceRef,
+			elevation,
+			layer,
+			margin,
+			onKeyDown: handleSurfaceKeyDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuContext.Provider, {
+				value: menuContext,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuActivationContext.Provider, {
+					value: handleActivate,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.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__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+							disabled: true,
+							children: emptyLabel
+						})
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Menu", {
+	enumerable: true,
+	get: function() {
+		return Menu;
+	}
+});

package/dist/Menu-CrzHc_cn.mjs

@@ -0,0 +1,168 @@
+import { o as styled } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
+import { o as MenuActivationContext, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-DUn4IZKK.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-Cgg-sX4W.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-DKUOhNyw.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CknoXDLQ.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DWjz5ZzG.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-x-7lH4CH.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-BkzZxHVj.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DGnXJwLj.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-CrzHc_cn.mjs";
+export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };