@youcan/celeste 0.6.102 → 0.7.1

package/dist/es/chunks/MenuContentImpl.js

@@ -0,0 +1,359 @@
+import { n as PopperContent_default, t as PopperContentPropsDefaultValue } from "./PopperContent.js";
+import { t as createContext } from "./createContext.js";
+import { t as getActiveElement } from "./getActiveElement.js";
+import { t as useArrowNavigation } from "./useArrowNavigation.js";
+import { t as DismissableLayer_default } from "./DismissableLayer.js";
+import { n as useBodyScrollLock, t as FocusScope_default } from "./FocusScope.js";
+import { t as useFocusGuards } from "./useFocusGuards.js";
+import { t as useForwardExpose } from "./useForwardExpose.js";
+import { t as useTypeahead } from "./useTypeahead.js";
+import { c as getOpenState, l as isMouseEvent, r as LAST_KEYS, s as focusFirst, t as FIRST_LAST_KEYS, u as isPointerInGraceArea } from "./utils.js";
+import { t as RovingFocusGroup_default } from "./RovingFocusGroup.js";
+import { n as injectMenuContext, r as injectMenuRootContext } from "./MenuRoot.js";
+import { createBlock, createVNode, defineComponent, mergeDefaults, onUnmounted, openBlock, ref, renderSlot, toRefs, unref, watch, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Menu/MenuContentImpl.js
+var [injectMenuContentContext, provideMenuContentContext] = /* @__PURE__ */ createContext("MenuContent");
+var MenuContentImpl_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuContentImpl",
+	props: /* @__PURE__ */ mergeDefaults({
+		loop: {
+			type: Boolean,
+			required: false
+		},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			required: false
+		},
+		disableOutsideScroll: {
+			type: Boolean,
+			required: false
+		},
+		trapFocus: {
+			type: Boolean,
+			required: false
+		},
+		memoDependencies: {
+			type: Array,
+			required: false
+		},
+		side: {
+			type: null,
+			required: false
+		},
+		sideOffset: {
+			type: Number,
+			required: false
+		},
+		sideFlip: {
+			type: Boolean,
+			required: false
+		},
+		align: {
+			type: null,
+			required: false
+		},
+		alignOffset: {
+			type: Number,
+			required: false
+		},
+		alignFlip: {
+			type: Boolean,
+			required: false
+		},
+		avoidCollisions: {
+			type: Boolean,
+			required: false
+		},
+		collisionBoundary: {
+			type: null,
+			required: false
+		},
+		collisionPadding: {
+			type: [Number, Object],
+			required: false
+		},
+		arrowPadding: {
+			type: Number,
+			required: false
+		},
+		hideShiftedArrow: {
+			type: Boolean,
+			required: false
+		},
+		sticky: {
+			type: String,
+			required: false
+		},
+		hideWhenDetached: {
+			type: Boolean,
+			required: false
+		},
+		positionStrategy: {
+			type: String,
+			required: false
+		},
+		updatePositionStrategy: {
+			type: String,
+			required: false
+		},
+		disableUpdateOnLayoutShift: {
+			type: Boolean,
+			required: false
+		},
+		prioritizePosition: {
+			type: Boolean,
+			required: false
+		},
+		reference: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	}, { ...PopperContentPropsDefaultValue }),
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"entryFocus",
+		"openAutoFocus",
+		"closeAutoFocus",
+		"dismiss"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const menuContext = injectMenuContext();
+		const rootContext = injectMenuRootContext();
+		const { trapFocus, disableOutsidePointerEvents, loop } = toRefs(props);
+		useFocusGuards();
+		useBodyScrollLock(disableOutsidePointerEvents.value);
+		const searchRef = ref("");
+		const timerRef = ref(0);
+		const pointerGraceTimerRef = ref(0);
+		const pointerGraceIntentRef = ref(null);
+		const pointerDirRef = ref("right");
+		const lastPointerXRef = ref(0);
+		const currentItemId = ref(null);
+		const rovingFocusGroupRef = ref();
+		const { forwardRef, currentElement: contentElement } = useForwardExpose();
+		const { handleTypeaheadSearch } = useTypeahead();
+		const highlightedElement = ref();
+		function onKeydownNavigation(event) {
+			const el = useArrowNavigation(event, highlightedElement.value || getActiveElement(), contentElement.value, {
+				loop: loop.value,
+				arrowKeyOptions: "vertical",
+				dir: rootContext?.dir.value,
+				focus: false,
+				attributeName: "[data-reka-collection-item]:not([data-disabled])"
+			});
+			if (el) {
+				highlightedElement.value = el;
+				el.scrollIntoView({ block: "nearest" });
+			}
+		}
+		function onKeydownEnter() {
+			if (highlightedElement.value) highlightedElement.value.click();
+		}
+		const filterElement = ref();
+		const activeSubmenuContext = ref();
+		watch(highlightedElement, (el) => {
+			if (activeSubmenuContext.value && (el === void 0 || el !== activeSubmenuContext.value.trigger.value)) {
+				if (el === void 0) return;
+				activeSubmenuContext.value.onOpenChange(false);
+				activeSubmenuContext.value = void 0;
+			}
+		});
+		watch(contentElement, (el) => {
+			menuContext.onContentChange(el);
+		});
+		onUnmounted(() => {
+			window.clearTimeout(timerRef.value);
+		});
+		function isPointerMovingToSubmenu(event) {
+			return pointerDirRef.value === pointerGraceIntentRef.value?.side && isPointerInGraceArea(event, pointerGraceIntentRef.value?.area);
+		}
+		async function handleMountAutoFocus(event) {
+			emits("openAutoFocus", event);
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			contentElement.value?.focus({ preventScroll: true });
+		}
+		function handleKeyDown(event) {
+			if (event.defaultPrevented) return;
+			const target = event.target;
+			const isKeyDownInside = target.closest("[data-reka-menu-content]") === event.currentTarget;
+			const isKeyDownInTextField = ["input", "textarea"].includes(target.tagName.toLowerCase());
+			const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+			const isCharacterKey = event.key.length === 1;
+			const el = useArrowNavigation(event, getActiveElement(), contentElement.value, {
+				loop: loop.value,
+				arrowKeyOptions: "vertical",
+				dir: rootContext?.dir.value,
+				focus: true,
+				attributeName: "[data-reka-collection-item]:not([data-disabled])"
+			});
+			if (el) return el?.focus();
+			if (event.code === "Space") return;
+			const collectionItems = rovingFocusGroupRef.value?.getItems() ?? [];
+			if (isKeyDownInside) {
+				if (event.key === "Tab" && rootContext.modal.value) event.preventDefault();
+				if (!isModifierKey && isCharacterKey && !isKeyDownInTextField) handleTypeaheadSearch(event.key, collectionItems);
+			}
+			if (event.target !== contentElement.value) return;
+			if (!FIRST_LAST_KEYS.includes(event.key)) return;
+			event.preventDefault();
+			const candidateNodes = [...collectionItems.map((item) => item.ref)];
+			if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+			focusFirst(candidateNodes);
+		}
+		function handleBlur(event) {
+			if (!event?.currentTarget?.contains?.(event.target)) {
+				window.clearTimeout(timerRef.value);
+				searchRef.value = "";
+			}
+		}
+		function handlePointerMove(event) {
+			if (!isMouseEvent(event)) return;
+			const target = event.target;
+			const pointerXHasChanged = lastPointerXRef.value !== event.clientX;
+			if ((event?.currentTarget)?.contains(target) && pointerXHasChanged) {
+				pointerDirRef.value = event.clientX > lastPointerXRef.value ? "right" : "left";
+				lastPointerXRef.value = event.clientX;
+			}
+		}
+		function handlePointerEnter(event) {
+			if (!isMouseEvent(event)) return;
+			if (filterElement.value) filterElement.value.focus();
+		}
+		provideMenuContentContext({
+			onItemEnter: (event) => {
+				if (isPointerMovingToSubmenu(event)) return true;
+				else return false;
+			},
+			onItemLeave: (event) => {
+				if (isPointerMovingToSubmenu(event)) return true;
+				if (!["INPUT", "TEXTAREA"].includes(getActiveElement()?.tagName || "")) contentElement.value?.focus();
+				currentItemId.value = null;
+				return false;
+			},
+			onTriggerLeave: (event) => {
+				if (isPointerMovingToSubmenu(event)) return true;
+				else return false;
+			},
+			searchRef,
+			highlightedElement,
+			onKeydownNavigation,
+			onKeydownEnter,
+			filterElement,
+			onFilterElementChange: (el) => {
+				filterElement.value = el;
+			},
+			activeSubmenuContext,
+			pointerGraceTimerRef,
+			onPointerGraceIntentChange: (intent) => {
+				pointerGraceIntentRef.value = intent;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(FocusScope_default), {
+				"as-child": "",
+				trapped: unref(trapFocus),
+				onMountAutoFocus: handleMountAutoFocus,
+				onUnmountAutoFocus: _cache[7] || (_cache[7] = ($event) => emits("closeAutoFocus", $event))
+			}, {
+				default: withCtx(() => [createVNode(unref(DismissableLayer_default), {
+					"as-child": "",
+					"disable-outside-pointer-events": unref(disableOutsidePointerEvents),
+					onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => emits("escapeKeyDown", $event)),
+					onPointerDownOutside: _cache[3] || (_cache[3] = ($event) => emits("pointerDownOutside", $event)),
+					onFocusOutside: _cache[4] || (_cache[4] = ($event) => emits("focusOutside", $event)),
+					onInteractOutside: _cache[5] || (_cache[5] = ($event) => emits("interactOutside", $event)),
+					onDismiss: _cache[6] || (_cache[6] = ($event) => emits("dismiss"))
+				}, {
+					default: withCtx(() => [createVNode(unref(RovingFocusGroup_default), {
+						ref_key: "rovingFocusGroupRef",
+						ref: rovingFocusGroupRef,
+						"current-tab-stop-id": currentItemId.value,
+						"onUpdate:currentTabStopId": _cache[0] || (_cache[0] = ($event) => currentItemId.value = $event),
+						"as-child": "",
+						orientation: "vertical",
+						dir: unref(rootContext).dir.value,
+						loop: unref(loop),
+						onEntryFocus: _cache[1] || (_cache[1] = (event) => {
+							emits("entryFocus", event);
+							if (!unref(rootContext).isUsingKeyboardRef.value) event.preventDefault();
+						})
+					}, {
+						default: withCtx(() => [createVNode(unref(PopperContent_default), {
+							ref: unref(forwardRef),
+							role: "menu",
+							as: _ctx.as,
+							"as-child": _ctx.asChild,
+							"aria-orientation": "vertical",
+							"data-reka-menu-content": "",
+							"data-state": unref(getOpenState)(unref(menuContext).open.value),
+							dir: unref(rootContext).dir.value,
+							side: _ctx.side,
+							"side-offset": _ctx.sideOffset,
+							align: _ctx.align,
+							"align-offset": _ctx.alignOffset,
+							"avoid-collisions": _ctx.avoidCollisions,
+							"collision-boundary": _ctx.collisionBoundary,
+							"collision-padding": _ctx.collisionPadding,
+							"arrow-padding": _ctx.arrowPadding,
+							"prioritize-position": _ctx.prioritizePosition,
+							"position-strategy": _ctx.positionStrategy,
+							"update-position-strategy": _ctx.updatePositionStrategy,
+							sticky: _ctx.sticky,
+							"hide-when-detached": _ctx.hideWhenDetached,
+							reference: _ctx.reference,
+							onKeydown: handleKeyDown,
+							onBlur: handleBlur,
+							onPointermove: handlePointerMove,
+							onPointerenter: handlePointerEnter
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+							_: 3
+						}, 8, [
+							"as",
+							"as-child",
+							"data-state",
+							"dir",
+							"side",
+							"side-offset",
+							"align",
+							"align-offset",
+							"avoid-collisions",
+							"collision-boundary",
+							"collision-padding",
+							"arrow-padding",
+							"prioritize-position",
+							"position-strategy",
+							"update-position-strategy",
+							"sticky",
+							"hide-when-detached",
+							"reference"
+						])]),
+						_: 3
+					}, 8, [
+						"current-tab-stop-id",
+						"dir",
+						"loop"
+					])]),
+					_: 3
+				}, 8, ["disable-outside-pointer-events"])]),
+				_: 3
+			}, 8, ["trapped"]);
+		};
+	}
+});
+//#endregion
+export { injectMenuContentContext as n, MenuContentImpl_default as t };

package/dist/es/chunks/MenuGroup.js

@@ -0,0 +1,32 @@
+import { t as createContext } from "./createContext.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useId } from "./useId.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Menu/MenuGroup.js
+var [injectMenuGroupContext, provideMenuGroupContext] = /* @__PURE__ */ createContext("MenuGroup");
+var MenuGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuGroup",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const id = useId(void 0, "reka-menu-group");
+		provideMenuGroupContext({ id });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({ role: "group" }, props, { "aria-labelledby": unref(id) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-labelledby"]);
+		};
+	}
+});
+//#endregion
+export { injectMenuGroupContext as n, MenuGroup_default as t };

package/dist/es/chunks/MenuItemImpl.js

@@ -0,0 +1,94 @@
+import { t as getActiveElement } from "./getActiveElement.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useForwardExpose } from "./useForwardExpose.js";
+import { l as isMouseEvent } from "./utils.js";
+import { t as useCollection } from "./Collection.js";
+import { n as injectMenuContentContext } from "./MenuContentImpl.js";
+import { computed, createBlock, createVNode, defineComponent, mergeProps, nextTick, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Menu/MenuItemImpl.js
+var MenuItemImpl_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "MenuItemImpl",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		textValue: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const contentContext = injectMenuContentContext();
+		const { forwardRef, currentElement } = useForwardExpose();
+		const { CollectionItem } = useCollection();
+		const isFocused = ref(false);
+		const isHighlighted = computed(() => isFocused.value || currentElement.value != null && contentContext.highlightedElement.value === currentElement.value);
+		async function handlePointerMove(event) {
+			if (event.defaultPrevented || !isMouseEvent(event)) return;
+			if (props.disabled) contentContext.onItemLeave(event);
+			else if (!contentContext.onItemEnter(event)) {
+				const item = event.currentTarget;
+				contentContext.highlightedElement.value = item;
+				if (!["INPUT", "TEXTAREA"].includes(getActiveElement()?.tagName || "")) item.focus({ preventScroll: true });
+			}
+		}
+		async function handlePointerLeave(event) {
+			await nextTick();
+			if (event.defaultPrevented) return;
+			if (!isMouseEvent(event)) return;
+			if (contentContext.highlightedElement.value !== currentElement.value) return;
+			if (!contentContext.onItemLeave(event) && contentContext.highlightedElement.value === currentElement.value) contentContext.highlightedElement.value = void 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollectionItem), { value: { textValue: _ctx.textValue } }, {
+				default: withCtx(() => [createVNode(unref(Primitive), mergeProps({
+					ref: unref(forwardRef),
+					role: "menuitem",
+					tabindex: "-1"
+				}, _ctx.$attrs, {
+					as: _ctx.as,
+					"as-child": _ctx.asChild,
+					"aria-disabled": _ctx.disabled || void 0,
+					"data-disabled": _ctx.disabled ? "" : void 0,
+					"data-highlighted": isHighlighted.value ? "" : void 0,
+					onPointermove: handlePointerMove,
+					onPointerleave: handlePointerLeave,
+					onFocus: _cache[0] || (_cache[0] = async (event) => {
+						await nextTick();
+						if (event.defaultPrevented || _ctx.disabled) return;
+						isFocused.value = true;
+						unref(contentContext).highlightedElement.value = event.currentTarget;
+					}),
+					onBlur: _cache[1] || (_cache[1] = async (event) => {
+						await nextTick();
+						if (event.defaultPrevented) return;
+						isFocused.value = false;
+					})
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"as",
+					"as-child",
+					"aria-disabled",
+					"data-disabled",
+					"data-highlighted"
+				])]),
+				_: 3
+			}, 8, ["value"]);
+		};
+	}
+});
+//#endregion
+export { MenuItemImpl_default as t };

package/dist/es/chunks/MenuRoot.js

@@ -0,0 +1,84 @@
+import { t as createContext } from "./createContext.js";
+import { i as useEventListener, s as useVModel, u as createSharedComposable } from "./dist.js";
+import { t as useDirection } from "./useDirection.js";
+import { t as PopperRoot_default } from "./PopperRoot.js";
+import { createBlock, defineComponent, onMounted, openBlock, ref, renderSlot, toRefs, unref, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/shared/useIsUsingKeyboard.js
+function useIsUsingKeyboardImpl() {
+	const isUsingKeyboard = ref(false);
+	onMounted(() => {
+		useEventListener("keydown", () => {
+			isUsingKeyboard.value = true;
+		}, {
+			capture: true,
+			passive: true
+		});
+		useEventListener(["pointerdown", "pointermove"], () => {
+			isUsingKeyboard.value = false;
+		}, {
+			capture: true,
+			passive: true
+		});
+	});
+	return isUsingKeyboard;
+}
+var useIsUsingKeyboard = createSharedComposable(useIsUsingKeyboardImpl);
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Menu/MenuRoot.js
+var [injectMenuContext, provideMenuContext] = /* @__PURE__ */ createContext(["MenuRoot", "MenuSub"], "MenuContext");
+var [injectMenuRootContext, provideMenuRootContext] = /* @__PURE__ */ createContext("MenuRoot");
+var MenuRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuRoot",
+	props: {
+		open: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		modal: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { modal, dir: propDir } = toRefs(props);
+		const dir = useDirection(propDir);
+		const open = useVModel(props, "open", emits);
+		const content = ref();
+		const isUsingKeyboardRef = useIsUsingKeyboard();
+		provideMenuContext({
+			open,
+			onOpenChange: (value) => {
+				open.value = value;
+			},
+			content,
+			onContentChange: (element) => {
+				content.value = element;
+			}
+		});
+		provideMenuRootContext({
+			onClose: () => {
+				open.value = false;
+			},
+			isUsingKeyboardRef,
+			dir,
+			modal
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopperRoot_default), null, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { provideMenuContext as i, injectMenuContext as n, injectMenuRootContext as r, MenuRoot_default as t };

package/dist/es/chunks/MenuSub.js

@@ -0,0 +1,56 @@
+import { t as createContext } from "./createContext.js";
+import { s as useVModel } from "./dist.js";
+import { t as PopperRoot_default } from "./PopperRoot.js";
+import { i as provideMenuContext, n as injectMenuContext } from "./MenuRoot.js";
+import { createBlock, defineComponent, openBlock, ref, renderSlot, unref, watchEffect, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Menu/MenuSub.js
+var [injectMenuSubContext, provideMenuSubContext] = /* @__PURE__ */ createContext("MenuSub");
+var MenuSub_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuSub",
+	props: { open: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	} },
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const open = useVModel(props, "open", __emit, {
+			defaultValue: false,
+			passive: props.open === void 0
+		});
+		const parentMenuContext = injectMenuContext();
+		const trigger = ref();
+		const content = ref();
+		watchEffect((cleanupFn) => {
+			if (parentMenuContext?.open.value === false) open.value = false;
+			cleanupFn(() => open.value = false);
+		});
+		provideMenuContext({
+			open,
+			onOpenChange: (value) => {
+				open.value = value;
+			},
+			content,
+			onContentChange: (element) => {
+				content.value = element;
+			}
+		});
+		provideMenuSubContext({
+			triggerId: "",
+			contentId: "",
+			trigger,
+			onTriggerChange: (element) => {
+				trigger.value = element;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopperRoot_default), null, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { injectMenuSubContext as n, MenuSub_default as t };