niuma-ui 2.0.3 → 2.0.9

package/dist/components/context-menu/src/RsContextMenuItems.d.ts

@@ -1,11 +1,35 @@
 import { type RsContextMenuItem } from './context-menu-utils';
 type __VLS_Props = {
     items: RsContextMenuItem[];
+    highlight: string;
+    openKey: string;
+    menuId: string;
+    layerId: string;
+    iconSize: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_20: {
+    item: RsContextMenuItem;
+    highlighted: boolean;
+    checked: boolean;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    getHighlight: () => string;
+    setHighlight: (key: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (item: RsContextMenuItem) => any;
+    hover: (item: RsContextMenuItem) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: RsContextMenuItem) => any) | undefined;
+    onHover?: ((item: RsContextMenuItem) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/context-menu/src/RsContextMenuItems.impl.js

@@ -1,86 +1,135 @@
-import { ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger } from "../../_shared/src/reka.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import RsContextMenuItems_default from "./RsContextMenuItems.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { contextMenuItemRole, hasContextMenuChildren, isContextMenuSeparator, resolveContextMenuRel } from "./context-menu-utils.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
 //#region src/components/context-menu/src/RsContextMenuItems.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-context-menu__icon-cell" };
-var _hoisted_2 = { class: "rs-context-menu__label" };
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-context-menu__group"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "rs-context-menu__separator"
+};
 var _hoisted_3 = { class: "rs-context-menu__icon-cell" };
-var _hoisted_4 = { class: "rs-context-menu__label" };
-var _hoisted_5 = {
+var _hoisted_4 = { class: "rs-context-menu__text" };
+var _hoisted_5 = { class: "rs-context-menu__label" };
+var _hoisted_6 = {
+	key: 0,
+	class: "rs-context-menu__hint"
+};
+var _hoisted_7 = {
 	key: 0,
 	class: "rs-context-menu__shortcut"
 };
 var RsContextMenuItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RsContextMenuItems",
-	props: { items: {} },
-	emits: ["select"],
-	setup(__props, { emit: __emit }) {
+	props: {
+		items: {},
+		highlight: {},
+		openKey: {},
+		menuId: {},
+		layerId: {},
+		iconSize: {}
+	},
+	emits: ["select", "hover"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
 		const emit = __emit;
-		function onSelect(item) {
-			if (item.disabled || item.separator) return;
+		const current = ref(props.highlight);
+		watch(() => props.highlight, (key) => {
+			current.value = key;
+		});
+		function onPointerEnter(item) {
+			if (current.value !== item.key) current.value = item.key;
+			emit("hover", item);
+		}
+		__expose({
+			getHighlight: () => current.value,
+			setHighlight: (key) => {
+				current.value = key;
+			}
+		});
+		function itemId(item, index) {
+			return `${props.menuId}-${props.layerId}-${index}`;
+		}
+		function onClick(item, event) {
+			if (item.disabled || isContextMenuSeparator(item)) {
+				event.preventDefault();
+				return;
+			}
+			if (event.button !== 0) return;
+			if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+				emit("select", item);
+				return;
+			}
 			emit("select", item);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-				return openBlock(), createElementBlock(Fragment, { key: item.key }, [item.separator ? (openBlock(), createBlock(unref(ContextMenuSeparator), {
-					key: 0,
-					class: "rs-context-menu__separator"
-				})) : item.children?.length ? (openBlock(), createBlock(unref(ContextMenuSub), { key: 1 }, {
-					default: withCtx(() => [createVNode(unref(ContextMenuSubTrigger), {
-						class: normalizeClass(["rs-context-menu__item", { "rs-context-menu__item--danger": item.danger }]),
-						disabled: item.disabled
-					}, {
-						default: withCtx(() => [
-							createElementVNode("span", _hoisted_1, [item.icon ? (openBlock(), createBlock(RsIcon_default, {
-								key: 0,
-								name: item.icon,
-								size: unref(16)
-							}, null, 8, ["name", "size"])) : createCommentVNode("", true)]),
-							createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1),
-							createVNode(RsIcon_default, {
-								name: "chevron-right",
-								size: unref(14),
-								class: "rs-context-menu__arrow"
-							}, null, 8, ["size"])
-						]),
-						_: 2
-					}, 1032, ["class", "disabled"]), createVNode(unref(ContextMenuPortal), null, {
-						default: withCtx(() => [createVNode(unref(ContextMenuSubContent), {
-							class: "rs-context-menu__sub-content rs-native-scrollbar rs-motion-reduce",
-							"side-offset": 2,
-							"align-offset": -6,
-							"collision-padding": 8
-						}, {
-							default: withCtx(() => [createVNode(RsContextMenuItems_default, {
-								items: item.children,
-								onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
-							}, null, 8, ["items"])]),
-							_: 2
-						}, 1024)]),
-						_: 2
-					}, 1024)]),
-					_: 2
-				}, 1024)) : (openBlock(), createBlock(unref(ContextMenuItem), {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.key }, [unref(isContextMenuSeparator)(item) && item.label ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(item.label), 1)) : unref(isContextMenuSeparator)(item) ? (openBlock(), createElementBlock("hr", _hoisted_2)) : (openBlock(), createBlock(resolveDynamicComponent(item.href && !item.disabled ? "a" : "button"), {
 					key: 2,
+					id: itemId(item, index),
+					type: item.href && !item.disabled ? void 0 : "button",
+					href: item.href && !item.disabled ? item.href : void 0,
+					target: item.href && !item.disabled ? item.target : void 0,
+					rel: item.href && !item.disabled ? unref(resolveContextMenuRel)(item) : void 0,
 					class: normalizeClass(["rs-context-menu__item", { "rs-context-menu__item--danger": item.danger }]),
-					disabled: item.disabled,
-					onSelect: ($event) => onSelect(item)
+					role: unref(contextMenuItemRole)(item),
+					tabindex: item.key === current.value && !item.disabled ? 0 : -1,
+					"data-ctx-key": item.key,
+					"data-highlighted": item.key === current.value ? "" : void 0,
+					"data-state": item.key === __props.openKey ? "open" : void 0,
+					"data-disabled": item.disabled ? "" : void 0,
+					"aria-disabled": item.disabled ? "true" : void 0,
+					"aria-checked": item.type === "checkbox" || item.type === "radio" ? Boolean(item.checked) : void 0,
+					"aria-haspopup": unref(hasContextMenuChildren)(item) ? "menu" : void 0,
+					"aria-expanded": unref(hasContextMenuChildren)(item) ? item.key === __props.openKey : void 0,
+					onClick: ($event) => onClick(item, $event),
+					onPointerenter: ($event) => onPointerEnter(item)
 				}, {
 					default: withCtx(() => [
-						createElementVNode("span", _hoisted_3, [item.icon ? (openBlock(), createBlock(RsIcon_default, {
+						createElementVNode("span", _hoisted_3, [(item.type === "checkbox" || item.type === "radio") && item.checked ? (openBlock(), createBlock(RsIcon_default, {
 							key: 0,
+							name: "check",
+							size: __props.iconSize
+						}, null, 8, ["size"])) : item.icon ? (openBlock(), createBlock(RsIcon_default, {
+							key: 1,
 							name: item.icon,
-							size: unref(16)
+							size: __props.iconSize
 						}, null, 8, ["name", "size"])) : createCommentVNode("", true)]),
-						createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1),
-						item.shortcut ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)
+						createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "item", {
+							item,
+							highlighted: item.key === current.value,
+							checked: Boolean(item.checked)
+						}, () => [createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1), item.hint ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.hint), 1)) : createCommentVNode("", true)])]),
+						item.shortcut ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true),
+						unref(hasContextMenuChildren)(item) ? (openBlock(), createBlock(RsIcon_default, {
+							key: 1,
+							name: "chevron-right",
+							size: unref(14),
+							class: "rs-context-menu__arrow"
+						}, null, 8, ["size"])) : createCommentVNode("", true)
 					]),
 					_: 2
-				}, 1032, [
+				}, 1064, [
+					"id",
+					"type",
+					"href",
+					"target",
+					"rel",
 					"class",
-					"disabled",
-					"onSelect"
+					"role",
+					"tabindex",
+					"data-ctx-key",
+					"data-highlighted",
+					"data-state",
+					"data-disabled",
+					"aria-disabled",
+					"aria-checked",
+					"aria-haspopup",
+					"aria-expanded",
+					"onClick",
+					"onPointerenter"
 				]))], 64);
 			}), 128);
 		};

package/dist/components/context-menu/src/context-menu-utils.d.ts

@@ -1,21 +1,107 @@
+import { type RsOverlayPopupSize, type RsOverlayViewport } from '../../_shared/src/overlay-utils';
 /** 右键菜单图标尺寸（与 Dropdown / Menu 一致） */
 export declare const RS_CONTEXT_MENU_ICON_SIZE = 16;
 export declare const RS_CONTEXT_MENU_ARROW_SIZE = 14;
+/** 菜单项种类。缺省是普通命令。separator 仍用布尔字段，兼容旧数据。 */
+export type RsContextMenuItemType = 'item' | 'checkbox' | 'radio';
 /** 右键菜单项定义 */
 export interface RsContextMenuItem {
     /** 唯一标识，选中时回传 */
     key: string;
     label: string;
     icon?: string;
+    /** 次要说明，不参与选中 */
+    hint?: string;
     disabled?: boolean;
     /** 危险操作样式 */
     danger?: boolean;
-    /** 为 true 时渲染分隔线 */
+    /** 为 true 时渲染分隔线。带 label 时是分组标题，仍不可选。 */
     separator?: boolean;
-    /** 子菜单项 */
+    /** 子菜单项。父级只负责展开，不发 select。 */
     children?: RsContextMenuItem[];
     /** 键盘快捷键提示（仅展示，不绑定事件），如 "⌘K"、"⌃C" */
     shortcut?: string;
+    /** checkbox / radio 用 menuitemcheckbox / menuitemradio。缺省是普通命令。 */
+    type?: RsContextMenuItemType;
+    /** checkbox / radio 的勾选态，由调用方持有 */
+    checked?: boolean;
+    /** 同一 radio 组的名字，只给无障碍和样式分组，不代管状态 */
+    group?: string;
+    /** 叶子可写成链接。外链 target=_blank 会补 noopener noreferrer。 */
+    href?: string;
+    target?: string;
+    rel?: string;
+    /**
+     * 选中后是否关闭。
+     * 缺省时普通项跟 hideOnSelect，checkbox / radio 保持打开。
+     */
+    closeOnSelect?: boolean;
 }
-/** 是否存在可操作项（排除纯分隔线），用于避免空菜单气泡 */
+export type RsContextMenuGetPopupContainer = (trigger?: HTMLElement) => HTMLElement | null | undefined;
+export interface RsContextMenuPoint {
+    x: number;
+    y: number;
+}
+export interface RsContextMenuExpose {
+    /** 在指针处或触发器下沿打开。禁用或没有可点项时无操作。 */
+    open: (point?: RsContextMenuPoint) => void;
+    close: () => void;
+}
+export interface RsContextMenuItemSlot {
+    item: RsContextMenuItem;
+    highlighted: boolean;
+    checked: boolean;
+}
+export interface RsContextMenuPointBox {
+    top: number;
+    left: number;
+    maxHeight: number;
+    originX: 'left' | 'right';
+    originY: 'top' | 'bottom';
+}
+export interface RsContextMenuLayerState {
+    id: string;
+    items: RsContextMenuItem[];
+    parentKey: string | null;
+}
+/** 同时只留一个右键菜单，避免多层监听叠在 document 上。 */
+export declare function claimContextMenu(close: () => void): void;
+export declare function releaseContextMenu(close: () => void): void;
+export declare function isContextMenuSeparator(item: RsContextMenuItem): boolean;
+export declare function hasContextMenuChildren(item: RsContextMenuItem): boolean;
+export declare function isContextMenuCheck(item: RsContextMenuItem): boolean;
+export declare function contextMenuItemRole(item: RsContextMenuItem): 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+/** 是否存在可操作项（排除纯分隔线与分组标题），用于避免空菜单气泡 */
 export declare function hasActionableContextMenuItems(items: RsContextMenuItem[] | undefined): boolean;
+/** 当前层可聚焦的项（不含分隔线与分组标题）。 */
+export declare function listContextMenuLayerItems(items: readonly RsContextMenuItem[]): RsContextMenuItem[];
+export declare function firstEnabledContextMenuKey(items: readonly RsContextMenuItem[]): string;
+export declare function lastEnabledContextMenuKey(items: readonly RsContextMenuItem[]): string;
+export declare function stepContextMenuKey(items: readonly RsContextMenuItem[], current: string, delta: 1 | -1): string;
+export declare function findContextMenuItem(items: readonly RsContextMenuItem[], key: string): RsContextMenuItem | undefined;
+/** 根层 + 已展开路径上的子层。路径中断就停，不渲染未打开的分支。 */
+export declare function resolveContextMenuLayers(items: readonly RsContextMenuItem[], path: readonly string[]): RsContextMenuLayerState[];
+export declare function shouldCloseContextMenuOnSelect(item: RsContextMenuItem, hideOnSelect: boolean): boolean;
+export declare function resolveContextMenuKeys(rtl: boolean): {
+    next: string;
+    prev: string;
+    openSub: string;
+    closeSub: string;
+};
+export declare function matchContextMenuTypeahead(items: readonly RsContextMenuItem[], query: string, fromIndex?: number): number;
+export declare function escapeContextMenuSelector(value: string): string;
+export declare function resolveContextMenuPortalTarget(getPopupContainer: RsContextMenuGetPopupContainer | undefined, trigger?: HTMLElement | null): string | HTMLElement;
+export declare function resolveContextMenuRel(item: RsContextMenuItem): string | undefined;
+export declare function resolveContextMenuElement(value: unknown): HTMLElement | null;
+/**
+ * 菜单从指针处展开：默认向右下，贴边翻到左或上，并给出可滚动的最大高度。
+ * RTL 优先向左。padding 把菜单夹进视口。
+ */
+export declare function placeContextMenuPoint(point: RsContextMenuPoint, popup: RsOverlayPopupSize, viewport: RsOverlayViewport, padding?: number, rtl?: boolean): RsContextMenuPointBox;
+/** 子菜单贴父项侧面。视口不够时翻到另一侧，并限制可滚动高度。 */
+export declare function placeContextMenuSubmenu(anchor: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}, popup: RsOverlayPopupSize, viewport: RsOverlayViewport, rtl: boolean, gap?: number): RsContextMenuPointBox;

package/dist/components/context-menu/src/context-menu-utils.js

@@ -1,8 +1,173 @@
+import { placeSidePopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
 //#region src/components/context-menu/src/context-menu-utils.ts
-/** 是否存在可操作项（排除纯分隔线），用于避免空菜单气泡 */
+var closers = /* @__PURE__ */ new Set();
+/** 同时只留一个右键菜单，避免多层监听叠在 document 上。 */
+function claimContextMenu(close) {
+	for (const other of [...closers]) if (other !== close) other();
+	closers.add(close);
+}
+function releaseContextMenu(close) {
+	closers.delete(close);
+}
+function isContextMenuSeparator(item) {
+	return item.separator === true;
+}
+function hasContextMenuChildren(item) {
+	return Boolean(item.children?.length);
+}
+function isContextMenuCheck(item) {
+	return item.type === "checkbox" || item.type === "radio";
+}
+function contextMenuItemRole(item) {
+	if (item.type === "checkbox") return "menuitemcheckbox";
+	if (item.type === "radio") return "menuitemradio";
+	return "menuitem";
+}
+/** 是否存在可操作项（排除纯分隔线与分组标题），用于避免空菜单气泡 */
 function hasActionableContextMenuItems(items) {
 	if (!items?.length) return false;
-	return items.some((item) => !item.separator);
+	return items.some((item) => !isContextMenuSeparator(item));
+}
+/** 当前层可聚焦的项（不含分隔线与分组标题）。 */
+function listContextMenuLayerItems(items) {
+	return items.filter((item) => !isContextMenuSeparator(item));
+}
+function firstEnabledContextMenuKey(items) {
+	return listContextMenuLayerItems(items).find((item) => !item.disabled)?.key ?? "";
+}
+function lastEnabledContextMenuKey(items) {
+	const list = listContextMenuLayerItems(items);
+	for (let index = list.length - 1; index >= 0; index -= 1) if (!list[index]?.disabled) return list[index].key;
+	return "";
+}
+function stepContextMenuKey(items, current, delta) {
+	const list = listContextMenuLayerItems(items);
+	if (!list.length) return "";
+	const index = list.findIndex((item) => item.key === current);
+	let start = index;
+	if (index < 0) start = delta === 1 ? -1 : 0;
+	return list[stepEnabledIndex(list, start, delta)]?.key ?? "";
+}
+function findContextMenuItem(items, key) {
+	for (const item of items) {
+		if (item.key === key) return item;
+		if (item.children?.length) {
+			const found = findContextMenuItem(item.children, key);
+			if (found) return found;
+		}
+	}
+}
+/** 根层 + 已展开路径上的子层。路径中断就停，不渲染未打开的分支。 */
+function resolveContextMenuLayers(items, path) {
+	const layers = [{
+		id: "root",
+		items: [...items],
+		parentKey: null
+	}];
+	let current = items;
+	for (const key of path) {
+		const parent = current.find((item) => item.key === key && hasContextMenuChildren(item));
+		if (!parent?.children?.length) break;
+		layers.push({
+			id: key,
+			items: parent.children,
+			parentKey: key
+		});
+		current = parent.children;
+	}
+	return layers;
+}
+function shouldCloseContextMenuOnSelect(item, hideOnSelect) {
+	if (item.closeOnSelect != null) return item.closeOnSelect;
+	if (isContextMenuCheck(item)) return false;
+	return hideOnSelect;
+}
+function resolveContextMenuKeys(rtl) {
+	return {
+		next: "ArrowDown",
+		prev: "ArrowUp",
+		openSub: rtl ? "ArrowLeft" : "ArrowRight",
+		closeSub: rtl ? "ArrowRight" : "ArrowLeft"
+	};
+}
+function matchContextMenuTypeahead(items, query, fromIndex = -1) {
+	const needle = query.trim().toLowerCase();
+	if (!needle || !items.length) return -1;
+	const list = listContextMenuLayerItems(items);
+	const start = Math.max(-1, fromIndex);
+	for (let step = 1; step <= list.length; step += 1) {
+		const index = (start + step) % list.length;
+		const item = list[index];
+		if (!item || item.disabled) continue;
+		if (item.label.toLowerCase().startsWith(needle)) return index;
+	}
+	return -1;
+}
+function escapeContextMenuSelector(value) {
+	if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(value);
+	return value.replace(/["\\]/g, "\\$&");
+}
+function resolveContextMenuPortalTarget(getPopupContainer, trigger) {
+	if (typeof document === "undefined") return "body";
+	if (!getPopupContainer) return "body";
+	return getPopupContainer(trigger ?? void 0) ?? "body";
+}
+function resolveContextMenuRel(item) {
+	if (!item.href) return void 0;
+	if (item.rel) return item.rel;
+	if (item.target === "_blank") return "noopener noreferrer";
+}
+function resolveContextMenuElement(value) {
+	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
+	if (value && typeof value === "object" && "$el" in value) {
+		const root = value.$el;
+		if (typeof HTMLElement !== "undefined" && root instanceof HTMLElement) return root;
+	}
+	return null;
+}
+/**
+* 菜单从指针处展开：默认向右下，贴边翻到左或上，并给出可滚动的最大高度。
+* RTL 优先向左。padding 把菜单夹进视口。
+*/
+function placeContextMenuPoint(point, popup, viewport, padding = 8, rtl = false) {
+	const width = Math.min(Math.max(0, popup.width), Math.max(0, viewport.width - padding * 2));
+	const spaceBelow = Math.max(0, viewport.height - point.y - padding);
+	const spaceAbove = Math.max(0, point.y - padding);
+	const openUp = popup.height > spaceBelow && spaceAbove > spaceBelow;
+	const maxHeight = Math.max(0, openUp ? spaceAbove : spaceBelow);
+	const usedHeight = Math.min(Math.max(0, popup.height), maxHeight > 0 ? maxHeight : popup.height);
+	let top = openUp ? point.y - usedHeight : point.y;
+	const maxTop = Math.max(padding, viewport.height - padding - Math.max(0, usedHeight));
+	top = Math.min(Math.max(padding, top), maxTop);
+	const spaceRight = Math.max(0, viewport.width - point.x - padding);
+	const spaceLeft = Math.max(0, point.x - padding);
+	const openLeft = rtl ? spaceLeft >= width || spaceLeft >= spaceRight : spaceRight < width && spaceLeft > spaceRight;
+	let left = openLeft ? point.x - width : point.x;
+	const maxLeft = Math.max(padding, viewport.width - width - padding);
+	left = Math.min(Math.max(padding, left), maxLeft);
+	return {
+		top,
+		left,
+		maxHeight: maxHeight > 0 ? maxHeight : Math.max(0, viewport.height - padding * 2),
+		originX: openLeft ? "right" : "left",
+		originY: openUp ? "bottom" : "top"
+	};
+}
+/** 子菜单贴父项侧面。视口不够时翻到另一侧，并限制可滚动高度。 */
+function placeContextMenuSubmenu(anchor, popup, viewport, rtl, gap = 4) {
+	const placed = placeSidePopup({
+		top: anchor.top,
+		left: anchor.left,
+		height: anchor.height,
+		width: anchor.width
+	}, popup, viewport, gap, rtl ? "left" : "right");
+	return {
+		top: placed.top,
+		left: placed.left,
+		maxHeight: Math.max(0, viewport.height - placed.top - gap),
+		originX: placed.placement === "left" ? "right" : "left",
+		originY: "top"
+	};
 }
 //#endregion
-export { hasActionableContextMenuItems };
+export { claimContextMenu, contextMenuItemRole, escapeContextMenuSelector, findContextMenuItem, firstEnabledContextMenuKey, hasActionableContextMenuItems, hasContextMenuChildren, isContextMenuCheck, isContextMenuSeparator, lastEnabledContextMenuKey, listContextMenuLayerItems, matchContextMenuTypeahead, placeContextMenuPoint, placeContextMenuSubmenu, releaseContextMenu, resolveContextMenuElement, resolveContextMenuKeys, resolveContextMenuLayers, resolveContextMenuPortalTarget, resolveContextMenuRel, shouldCloseContextMenuOnSelect, stepContextMenuKey };

package/dist/components/date-picker/index.d.ts

@@ -1,7 +1,9 @@
 export { default as RsDatePicker } from './src/RsDatePicker.js';
 export { default as RsDateTimePicker } from './src/RsDateTimePicker.js';
-export type { RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerTimestampRange, RsDatePickerValueConvertOptions, RsDatePickerValueFormat, RsDatePickerValueFormatPreset, RsDateRangeValue, RsParsedDate, RsParsedDateTime, } from './src/date-picker-utils';
-export { EMPTY_DATE_RANGE, formatDateDisplay, formatDateParts, formatDateRangeDisplay, formatDateTimeDisplay, formatDateTimeValue, formatDateValue, fromInternalPickerValue, isDateRangeEmpty, isDateRangeOrdered, isDateTimeRangeOrdered, parseDateTimeValue, parseDateValue, RS_DATE_PICKER_VALUE_FORMAT_PRESETS, toInternalPickerValue, toRangeEndpointString, } from './src/date-picker-utils';
+export type { RsDatePickerExpose, RsDatePickerInstance, RsDatePickerLabelPosition, } from './src/RsDatePicker.js';
+export type { RsDateTimePickerExpose, RsDateTimePickerInstance, RsDateTimePickerLabelPosition, RsDateTimeRangeValue, } from './src/RsDateTimePicker.js';
+export type { RsDatePickerDisabledDate, RsDatePickerGetPopupContainer, RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerTimestampRange, RsDatePickerValueConvertOptions, RsDatePickerValueFormat, RsDatePickerValueFormatPreset, RsDateRangeValue, RsParsedDate, RsParsedDateTime, RsWeekStartsOn, } from './src/date-picker-utils';
+export { EMPTY_DATE_RANGE, formatDateDisplay, formatDateParts, formatDateRangeDisplay, formatDateTimeDisplay, formatDateTimeValue, formatDateValue, formatPickerDisplay, fromInternalPickerValue, isDateRangeEmpty, isDateRangeOrdered, isDateTimeRangeOrdered, parseDateTimeValue, parseDateValue, resolveWeekStartsOn, RS_DATE_PICKER_VALUE_FORMAT_PRESETS, toInternalPickerValue, toRangeEndpointString, } from './src/date-picker-utils';
 export type { RsDateTimeValidationError, RsDateTimeValidationResult, RsDateTimeValidationRules, RsDateValidationError, RsDateValidationResult, RsDateValidationRules, } from './src/date-validation';
 export { validateDateTimeValue, validateDateValue } from './src/date-validation';
 export type { RsDateRangeValidationError, RsDateRangeValidationResult, RsDateRangeValidationRules, RsDateTimeRangeValidationError, RsDateTimeRangeValidationResult, RsDateTimeRangeValidationRules, } from './src/date-range-validation';

package/dist/components/date-picker/src/RsDatePicker.css

@@ -1,8 +1,21 @@
 
-.rs-date-picker[data-v-816760df] {
+.rs-date-picker[data-v-e481c787] {
+  position: relative;
   width: 100%;
 }
-.rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker-wrap--clearable .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-md) + 2.25rem);
+}
+.rs-date-picker-wrap--clearable .rs-date-picker--ssm .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-xs) + 2rem);
+}
+.rs-date-picker-wrap--clearable .rs-date-picker--sm .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-sm) + 2rem);
+}
+.rs-date-picker-wrap--clearable .rs-date-picker--lg .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-lg) + 2.25rem);
+}
+.rs-date-picker__trigger[data-v-e481c787] {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -13,7 +26,7 @@
   min-height: var(--rs-control-height-md);
   padding: 0 var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
-  border-radius: var(--rs-radius-sm);
+  border-radius: var(--rs-date-picker-radius, var(--rs-radius-sm));
   background: var(--rs-input-bg);
   color: var(--rs-text);
   font: inherit;
@@ -28,28 +41,28 @@
     box-shadow var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-date-picker--ssm .rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker--ssm .rs-date-picker__trigger[data-v-e481c787] {
   height: var(--rs-control-height-ssm);
   min-height: var(--rs-control-height-ssm);
   padding: 0 var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
 }
-.rs-date-picker--sm .rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker--sm .rs-date-picker__trigger[data-v-e481c787] {
   height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
   padding: 0 var(--rs-space-sm);
   font-size: var(--rs-font-size-xs);
 }
-.rs-date-picker--lg .rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker--lg .rs-date-picker__trigger[data-v-e481c787] {
   height: var(--rs-control-height-lg);
   min-height: var(--rs-control-height-lg);
   padding: 0 var(--rs-space-lg);
   font-size: var(--rs-font-size-base);
 }
-.rs-date-picker__trigger[data-v-816760df]:hover:not(:disabled) {
+.rs-date-picker__trigger[data-v-e481c787]:hover:not(:disabled) {
   border-color: var(--rs-input-border-hover, var(--rs-border));
 }
-.rs-date-picker__trigger[data-v-816760df]:focus-visible {
+.rs-date-picker__trigger[data-v-e481c787]:focus-visible {
   outline: none;
   border-color: var(--rs-focus-border, var(--rs-primary));
   background: var(--rs-input-bg);
@@ -57,42 +70,49 @@
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-date-picker__trigger[data-v-816760df]:disabled {
-  opacity: 0.38;
+.rs-date-picker__trigger[data-v-e481c787]:disabled {
+  opacity: var(--rs-date-picker-disabled-opacity, 0.38);
   cursor: not-allowed;
 }
-.rs-date-picker__trigger--placeholder .rs-date-picker__value[data-v-816760df] {
+.rs-date-picker__trigger--placeholder .rs-date-picker__value[data-v-e481c787] {
   color: var(--rs-placeholder);
 }
-.rs-date-picker__trigger--invalid[data-v-816760df] {
-  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+.rs-date-picker__trigger--invalid[data-v-e481c787] {
+  border-color: var(--rs-danger, var(--rs-color-danger));
 }
-.rs-date-picker__trigger--invalid[data-v-816760df]:focus-visible {
-  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+.rs-date-picker__trigger--invalid[data-v-e481c787]:focus-visible {
+  border-color: var(--rs-danger, var(--rs-color-danger));
   box-shadow:
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px)
-      color-mix(in srgb, var(--rs-danger, #dc2626) 14%, transparent);
+      color-mix(in srgb, var(--rs-danger) 14%, transparent);
+}
+.rs-date-picker__clear[data-v-e481c787] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--rs-space-xs);
+  z-index: 1;
+  transform: translateY(-50%);
 }
-.rs-date-picker-field__error[data-v-816760df] {
+.rs-date-picker-field__error[data-v-e481c787] {
   margin: var(--rs-space-xs) 0 0;
-  color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+  color: var(--rs-danger, var(--rs-color-danger));
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-tight);
 }
-.rs-date-picker__leading[data-v-816760df] {
+.rs-date-picker__leading[data-v-e481c787] {
   display: inline-flex;
   min-width: 0;
   flex: 1;
   align-items: center;
   gap: var(--rs-space-sm);
 }
-.rs-date-picker__icon[data-v-816760df],
-.rs-date-picker__chevron[data-v-816760df] {
+.rs-date-picker__icon[data-v-e481c787],
+.rs-date-picker__chevron[data-v-e481c787] {
   flex-shrink: 0;
   color: var(--rs-muted);
 }
-.rs-date-picker__value[data-v-816760df] {
+.rs-date-picker__value[data-v-e481c787] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;