@sprawlify/primitives 0.0.1

package/dist/machines/tabs/index.d.mts

@@ -0,0 +1,111 @@
+import { n as AnatomyInstance } from "../../create-anatomy-B3XYc-qG.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, g as RequiredBy, m as Rect, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/tabs/tabs.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator" | "list">;
+//#endregion
+//#region src/machines/tabs/tabs.types.d.ts
+interface ValueChangeDetails {
+  value: string;
+}
+interface FocusChangeDetails {
+  focusedValue: string;
+}
+interface NavigateDetails {
+  value: string;
+  node: HTMLAnchorElement;
+  href: string;
+}
+interface IntlTranslations {
+  listLabel?: string | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  trigger: (value: string) => string;
+  list: string;
+  content: (value: string) => string;
+  indicator: string;
+}>;
+interface TabsProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  loopFocus?: boolean | undefined;
+  value?: string | null | undefined;
+  defaultValue?: string | null | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  activationMode?: "manual" | "automatic" | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
+  composite?: boolean | undefined;
+  deselectable?: boolean | undefined;
+  navigate?: ((details: NavigateDetails) => void) | null | undefined;
+}
+type PropsWithDefault = "orientation" | "activationMode" | "loopFocus";
+type TabsSchema = {
+  state: "idle" | "focused";
+  props: RequiredBy<TabsProps, PropsWithDefault>;
+  context: {
+    ssr: boolean;
+    value: string | null;
+    focusedValue: string | null;
+    indicatorRect: Rect | null;
+  };
+  refs: {
+    indicatorCleanup: VoidFunction | null | undefined;
+  };
+  computed: {
+    focused: boolean;
+  };
+  action: string;
+  guard: string;
+  effect: string;
+  event: EventObject;
+};
+type TabsService = Service<TabsSchema>;
+type TabsMachine = Machine<TabsSchema>;
+interface TriggerProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface TriggerState {
+  selected: boolean;
+  focused: boolean;
+  disabled: boolean;
+}
+interface ContentProps {
+  value: string;
+}
+interface TabsApi<T extends PropTypes = PropTypes> {
+  value: string | null;
+  focusedValue: string | null;
+  setValue: (value: string) => void;
+  clearValue: VoidFunction;
+  setIndicatorRect: (value: string) => void;
+  syncTabIndex: VoidFunction;
+  focus: VoidFunction;
+  selectNext: (fromValue?: string) => void;
+  selectPrev: (fromValue?: string) => void;
+  getTriggerState: (props: TriggerProps) => TriggerState;
+  getRootProps: () => T["element"];
+  getListProps: () => T["element"];
+  getTriggerProps: (props: TriggerProps) => T["button"];
+  getContentProps: (props: ContentProps) => T["element"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/tabs/tabs.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<TabsSchema>, normalize: NormalizeProps<T>): TabsApi<T>;
+//#endregion
+//#region src/machines/tabs/tabs.machine.d.ts
+declare const machine: Machine<TabsSchema>;
+//#endregion
+//#region src/machines/tabs/tabs.props.d.ts
+declare const props: (keyof TabsProps)[];
+declare const splitProps: <Props extends Partial<TabsProps>>(props: Props) => [Partial<TabsProps>, Omit<Props, keyof TabsProps>];
+declare const triggerProps: (keyof TriggerProps)[];
+declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
+declare const contentProps: "value"[];
+declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
+//#endregion
+export { type TabsApi as Api, type ContentProps, type ElementIds, type FocusChangeDetails, type IntlTranslations, type TabsMachine as Machine, type NavigateDetails, type TabsProps as Props, type TabsService as Service, type TriggerProps, type TriggerState, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };

package/dist/machines/tabs/index.mjs

@@ -0,0 +1,500 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { I as clickIfLink, J as getFocusables, Rt as isSafari, S as queryAll, U as raf, Xt as contains, an as isAnchorElement, b as prevById, ft as getEventTarget, lt as getEventKey, mt as isComposingEvent, p as resizeObserverBorderBox, v as itemById, vn as dataAttr, xt as isOpeningInNewTab, y as nextById } from "../../dom-query-DFCRhyj1.mjs";
+import { Ct as last, H as toPx, W as callAll, _t as first, dt as isEqual, u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { o as setup } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/tabs/tabs.anatomy.ts
+const anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/tabs/tabs.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
+const getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
+const getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `tabs:${ctx.id}:content:${value}`;
+const getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `tabs:${ctx.id}:trigger:${value}`;
+const getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
+const getListEl = (ctx) => ctx.getById(getListId(ctx));
+const getContentEl = (ctx, value) => ctx.getById(getContentId(ctx, value));
+const getTriggerEl = (ctx, value) => value != null ? ctx.getById(getTriggerId(ctx, value)) : null;
+const getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+const getElements = (ctx) => {
+	const selector = `[role=tab][data-ownedby='${CSS.escape(getListId(ctx))}']:not([disabled])`;
+	return queryAll(getListEl(ctx), selector);
+};
+const getFirstTriggerEl = (ctx) => first(getElements(ctx));
+const getLastTriggerEl = (ctx) => last(getElements(ctx));
+const getNextTriggerEl = (ctx, opts) => nextById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
+const getPrevTriggerEl = (ctx, opts) => prevById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
+const getOffsetRect = (el) => ({
+	x: el?.offsetLeft ?? 0,
+	y: el?.offsetTop ?? 0,
+	width: el?.offsetWidth ?? 0,
+	height: el?.offsetHeight ?? 0
+});
+const getRectByValue = (ctx, value) => {
+	return getOffsetRect(itemById(getElements(ctx), getTriggerId(ctx, value)));
+};
+
+//#endregion
+//#region src/machines/tabs/tabs.connect.ts
+function connect(service, normalize) {
+	const { state, send, context, prop, scope } = service;
+	const translations = prop("translations");
+	const focused = state.matches("focused");
+	const isVertical = prop("orientation") === "vertical";
+	const isHorizontal = prop("orientation") === "horizontal";
+	const composite = prop("composite");
+	function getTriggerState(props$1) {
+		return {
+			selected: context.get("value") === props$1.value,
+			focused: context.get("focusedValue") === props$1.value,
+			disabled: !!props$1.disabled
+		};
+	}
+	return {
+		value: context.get("value"),
+		focusedValue: context.get("focusedValue"),
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		clearValue() {
+			send({ type: "CLEAR_VALUE" });
+		},
+		setIndicatorRect(value) {
+			send({
+				type: "SET_INDICATOR_RECT",
+				id: getTriggerId(scope, value)
+			});
+		},
+		syncTabIndex() {
+			send({ type: "SYNC_TAB_INDEX" });
+		},
+		selectNext(fromValue) {
+			send({
+				type: "TAB_FOCUS",
+				value: fromValue,
+				src: "selectNext"
+			});
+			send({
+				type: "ARROW_NEXT",
+				src: "selectNext"
+			});
+		},
+		selectPrev(fromValue) {
+			send({
+				type: "TAB_FOCUS",
+				value: fromValue,
+				src: "selectPrev"
+			});
+			send({
+				type: "ARROW_PREV",
+				src: "selectPrev"
+			});
+		},
+		focus() {
+			const value = context.get("value");
+			if (!value) return;
+			getTriggerEl(scope, value)?.focus();
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				"data-orientation": prop("orientation"),
+				"data-focus": dataAttr(focused),
+				dir: prop("dir")
+			});
+		},
+		getListProps() {
+			return normalize.element({
+				...parts.list.attrs,
+				id: getListId(scope),
+				role: "tablist",
+				dir: prop("dir"),
+				"data-focus": dataAttr(focused),
+				"aria-orientation": prop("orientation"),
+				"data-orientation": prop("orientation"),
+				"aria-label": translations?.listLabel,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (isComposingEvent(event)) return;
+					if (!contains(event.currentTarget, getEventTarget(event))) return;
+					const exec = {
+						ArrowDown() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_NEXT",
+								key: "ArrowDown"
+							});
+						},
+						ArrowUp() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_PREV",
+								key: "ArrowUp"
+							});
+						},
+						ArrowLeft() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_PREV",
+								key: "ArrowLeft"
+							});
+						},
+						ArrowRight() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_NEXT",
+								key: "ArrowRight"
+							});
+						},
+						Home() {
+							send({ type: "HOME" });
+						},
+						End() {
+							send({ type: "END" });
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: prop("orientation")
+					})];
+					if (exec) {
+						event.preventDefault();
+						exec(event);
+						return;
+					}
+				}
+			});
+		},
+		getTriggerState,
+		getTriggerProps(props$1) {
+			const { value, disabled } = props$1;
+			const triggerState = getTriggerState(props$1);
+			return normalize.button({
+				...parts.trigger.attrs,
+				role: "tab",
+				type: "button",
+				disabled,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-disabled": dataAttr(disabled),
+				"aria-disabled": disabled,
+				"data-value": value,
+				"aria-selected": triggerState.selected,
+				"data-selected": dataAttr(triggerState.selected),
+				"data-focus": dataAttr(triggerState.focused),
+				"aria-controls": triggerState.selected ? getContentId(scope, value) : void 0,
+				"data-ownedby": getListId(scope),
+				"data-ssr": dataAttr(context.get("ssr")),
+				id: getTriggerId(scope, value),
+				tabIndex: triggerState.selected && composite ? 0 : -1,
+				onFocus() {
+					send({
+						type: "TAB_FOCUS",
+						value
+					});
+				},
+				onBlur(event) {
+					if (event.relatedTarget?.getAttribute("role") !== "tab") send({ type: "TAB_BLUR" });
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (isOpeningInNewTab(event)) return;
+					if (disabled) return;
+					if (isSafari()) event.currentTarget.focus();
+					send({
+						type: "TAB_CLICK",
+						value
+					});
+				}
+			});
+		},
+		getContentProps(props$1) {
+			const { value } = props$1;
+			const selected = context.get("value") === value;
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: getContentId(scope, value),
+				tabIndex: composite ? 0 : -1,
+				"aria-labelledby": getTriggerId(scope, value),
+				role: "tabpanel",
+				"data-ownedby": getListId(scope),
+				"data-selected": dataAttr(selected),
+				"data-orientation": prop("orientation"),
+				hidden: !selected
+			});
+		},
+		getIndicatorProps() {
+			const rect = context.get("indicatorRect");
+			const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+			return normalize.element({
+				id: getIndicatorId(scope),
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				hidden: rectIsEmpty,
+				style: {
+					"--transition-property": "left, right, top, bottom, width, height",
+					"--left": toPx(rect?.x),
+					"--top": toPx(rect?.y),
+					"--width": toPx(rect?.width),
+					"--height": toPx(rect?.height),
+					position: "absolute",
+					willChange: "var(--transition-property)",
+					transitionProperty: "var(--transition-property)",
+					transitionDuration: "var(--transition-duration, 150ms)",
+					transitionTimingFunction: "var(--transition-timing-function)",
+					[isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/tabs/tabs.machine.ts
+const { createMachine } = setup();
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			dir: "ltr",
+			orientation: "horizontal",
+			activationMode: "automatic",
+			loopFocus: true,
+			composite: true,
+			navigate(details) {
+				clickIfLink(details.node);
+			},
+			defaultValue: null,
+			...props$1
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedValue: bindable(() => ({
+				defaultValue: prop("value") || prop("defaultValue"),
+				sync: true,
+				onChange(value) {
+					prop("onFocusChange")?.({ focusedValue: value });
+				}
+			})),
+			ssr: bindable(() => ({ defaultValue: true })),
+			indicatorRect: bindable(() => ({ defaultValue: null }))
+		};
+	},
+	watch({ context, prop, track, action }) {
+		track([() => context.get("value")], () => {
+			action([
+				"syncIndicatorRect",
+				"syncTabIndex",
+				"navigateIfNeeded"
+			]);
+		});
+		track([() => prop("dir"), () => prop("orientation")], () => {
+			action(["syncIndicatorRect"]);
+		});
+	},
+	on: {
+		SET_VALUE: { actions: ["setValue"] },
+		CLEAR_VALUE: { actions: ["clearValue"] },
+		SET_INDICATOR_RECT: { actions: ["setIndicatorRect"] },
+		SYNC_TAB_INDEX: { actions: ["syncTabIndex"] }
+	},
+	entry: [
+		"syncIndicatorRect",
+		"syncTabIndex",
+		"syncSsr"
+	],
+	exit: ["cleanupObserver"],
+	states: {
+		idle: { on: {
+			TAB_FOCUS: {
+				target: "focused",
+				actions: ["setFocusedValue"]
+			},
+			TAB_CLICK: {
+				target: "focused",
+				actions: ["setFocusedValue", "setValue"]
+			}
+		} },
+		focused: { on: {
+			TAB_CLICK: { actions: ["setFocusedValue", "setValue"] },
+			ARROW_PREV: [{
+				guard: "selectOnFocus",
+				actions: ["focusPrevTab", "selectFocusedTab"]
+			}, { actions: ["focusPrevTab"] }],
+			ARROW_NEXT: [{
+				guard: "selectOnFocus",
+				actions: ["focusNextTab", "selectFocusedTab"]
+			}, { actions: ["focusNextTab"] }],
+			HOME: [{
+				guard: "selectOnFocus",
+				actions: ["focusFirstTab", "selectFocusedTab"]
+			}, { actions: ["focusFirstTab"] }],
+			END: [{
+				guard: "selectOnFocus",
+				actions: ["focusLastTab", "selectFocusedTab"]
+			}, { actions: ["focusLastTab"] }],
+			TAB_FOCUS: { actions: ["setFocusedValue"] },
+			TAB_BLUR: {
+				target: "idle",
+				actions: ["clearFocusedValue"]
+			}
+		} }
+	},
+	implementations: {
+		guards: { selectOnFocus: ({ prop }) => prop("activationMode") === "automatic" },
+		actions: {
+			selectFocusedTab({ context, prop }) {
+				raf(() => {
+					const focusedValue = context.get("focusedValue");
+					if (!focusedValue) return;
+					const value = prop("deselectable") && context.get("value") === focusedValue ? null : focusedValue;
+					context.set("value", value);
+				});
+			},
+			setFocusedValue({ context, event, flush }) {
+				if (event.value == null) return;
+				flush(() => {
+					context.set("focusedValue", event.value);
+				});
+			},
+			clearFocusedValue({ context }) {
+				context.set("focusedValue", null);
+			},
+			setValue({ context, event, prop }) {
+				const nullable = prop("deselectable") && context.get("value") === context.get("focusedValue");
+				context.set("value", nullable ? null : event.value);
+			},
+			clearValue({ context }) {
+				context.set("value", null);
+			},
+			focusFirstTab({ scope }) {
+				raf(() => {
+					getFirstTriggerEl(scope)?.focus();
+				});
+			},
+			focusLastTab({ scope }) {
+				raf(() => {
+					getLastTriggerEl(scope)?.focus();
+				});
+			},
+			focusNextTab({ context, prop, scope, event }) {
+				const focusedValue = event.value ?? context.get("focusedValue");
+				if (!focusedValue) return;
+				const triggerEl = getNextTriggerEl(scope, {
+					value: focusedValue,
+					loopFocus: prop("loopFocus")
+				});
+				raf(() => {
+					if (prop("composite")) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) context.set("focusedValue", triggerEl.dataset.value);
+				});
+			},
+			focusPrevTab({ context, prop, scope, event }) {
+				const focusedValue = event.value ?? context.get("focusedValue");
+				if (!focusedValue) return;
+				const triggerEl = getPrevTriggerEl(scope, {
+					value: focusedValue,
+					loopFocus: prop("loopFocus")
+				});
+				raf(() => {
+					if (prop("composite")) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) context.set("focusedValue", triggerEl.dataset.value);
+				});
+			},
+			syncTabIndex({ context, scope }) {
+				raf(() => {
+					const value = context.get("value");
+					if (!value) return;
+					const contentEl = getContentEl(scope, value);
+					if (!contentEl) return;
+					if (getFocusables(contentEl).length > 0) contentEl.removeAttribute("tabindex");
+					else contentEl.setAttribute("tabindex", "0");
+				});
+			},
+			cleanupObserver({ refs }) {
+				const cleanup = refs.get("indicatorCleanup");
+				if (cleanup) cleanup();
+			},
+			setIndicatorRect({ context, event, scope }) {
+				const value = event.id ?? context.get("value");
+				if (!getIndicatorEl(scope)) return;
+				if (!value) return;
+				if (!getTriggerEl(scope, value)) return;
+				context.set("indicatorRect", getRectByValue(scope, value));
+			},
+			syncSsr({ context }) {
+				context.set("ssr", false);
+			},
+			syncIndicatorRect({ context, refs, scope }) {
+				const cleanup = refs.get("indicatorCleanup");
+				if (cleanup) cleanup();
+				if (!getIndicatorEl(scope)) return;
+				const exec = () => {
+					const triggerEl = getTriggerEl(scope, context.get("value"));
+					if (!triggerEl) return;
+					const rect = getOffsetRect(triggerEl);
+					context.set("indicatorRect", (prev) => isEqual(prev, rect) ? prev : rect);
+				};
+				exec();
+				const indicatorCleanup = callAll(...getElements(scope).map((el) => resizeObserverBorderBox.observe(el, exec)));
+				refs.set("indicatorCleanup", indicatorCleanup);
+			},
+			navigateIfNeeded({ context, prop, scope }) {
+				const value = context.get("value");
+				if (!value) return;
+				const triggerEl = getTriggerEl(scope, value);
+				if (isAnchorElement(triggerEl)) prop("navigate")?.({
+					value,
+					node: triggerEl,
+					href: triggerEl.href
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/tabs/tabs.props.ts
+const props = createProps()([
+	"activationMode",
+	"composite",
+	"deselectable",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"navigate",
+	"onFocusChange",
+	"onValueChange",
+	"orientation",
+	"translations",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+const triggerProps = createProps()(["disabled", "value"]);
+const splitTriggerProps = createSplitProps(triggerProps);
+const contentProps = createProps()(["value"]);
+const splitContentProps = createSplitProps(contentProps);
+
+//#endregion
+export { anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };