@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/accordion/index.d.ts

@@ -0,0 +1,83 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/accordion/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "itemIndicator" | "itemContent" | "itemTrigger">;
+//#endregion
+//#region src/machines/accordion/types.d.ts
+interface ValueChangeDetails {
+  value: string[];
+}
+interface FocusChangeDetails {
+  value: string | null;
+}
+type ElementIds = Partial<{
+  root: string;
+  item: (value: string) => string;
+  itemContent: (value: string) => string;
+  itemTrigger: (value: string) => string;
+}>;
+interface AccordionProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  multiple?: boolean | undefined;
+  collapsible?: boolean | undefined;
+  value?: string[] | undefined;
+  defaultValue?: string[] | undefined;
+  disabled?: boolean | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+}
+type PropsWithDefault = "multiple" | "collapsible" | "orientation";
+type AccordionSchema = {
+  state: "idle" | "focused";
+  props: RequiredBy<AccordionProps, PropsWithDefault>;
+  context: {
+    value: string[];
+    focusedValue: string | null;
+  };
+  computed: {
+    isHorizontal: boolean;
+  };
+  action: string;
+  guard: string;
+  effect: string;
+  event: EventObject;
+};
+type AccordionService = Service<AccordionSchema>;
+type AccordionMachine = Machine<AccordionSchema>;
+interface ItemProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface ItemState {
+  expanded: boolean;
+  focused: boolean;
+  disabled: boolean;
+}
+interface AccordionApi<T extends PropTypes = PropTypes> {
+  focusedValue: string | null;
+  value: string[];
+  setValue: (value: string[]) => void;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getItemContentProps: (props: ItemProps) => T["element"];
+  getItemTriggerProps: (props: ItemProps) => T["button"];
+  getItemIndicatorProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/accordion/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<AccordionSchema>, normalize: NormalizeProps<T>): AccordionApi<T>;
+//#endregion
+//#region src/machines/accordion/machine.d.ts
+declare const machine: Machine<AccordionSchema>;
+//#endregion
+//#region src/machines/accordion/props.d.ts
+declare const props: (keyof AccordionProps)[];
+declare const splitProps: <Props extends Partial<AccordionProps>>(props: Props) => [Partial<AccordionProps>, Omit<Props, keyof AccordionProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+//#endregion
+export { type AccordionApi as Api, type ElementIds, type FocusChangeDetails, type ItemProps, type ItemState, type AccordionMachine as Machine, type AccordionProps as Props, type AccordionService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/machines/accordion/index.js

@@ -0,0 +1,321 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { f as queryAll, l as nextById, u as prevById, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { f as isSafari } from "../../platform-BDB0wXUk.js";
+import { r as getEventKey } from "../../event-bTItRgiw.js";
+import { f as last, o as first, t as add, v as remove } from "../../array-C4KbHsha.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { i as warn } from "../../warning-CrzBpWT1.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/accordion/anatomy.ts
+const anatomy = createAnatomy("accordion").parts("root", "item", "itemTrigger", "itemContent", "itemIndicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/accordion/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `accordion:${ctx.id}`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `accordion:${ctx.id}:item:${value}`;
+const getItemContentId = (ctx, value) => ctx.ids?.itemContent?.(value) ?? `accordion:${ctx.id}:content:${value}`;
+const getItemTriggerId = (ctx, value) => ctx.ids?.itemTrigger?.(value) ?? `accordion:${ctx.id}:trigger:${value}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getTriggerEls = (ctx) => {
+	const selector = `[data-controls][data-ownedby='${CSS.escape(getRootId(ctx))}']:not([disabled])`;
+	return queryAll(getRootEl(ctx), selector);
+};
+const getFirstTriggerEl = (ctx) => first(getTriggerEls(ctx));
+const getLastTriggerEl = (ctx) => last(getTriggerEls(ctx));
+const getNextTriggerEl = (ctx, id) => nextById(getTriggerEls(ctx), getItemTriggerId(ctx, id));
+const getPrevTriggerEl = (ctx, id) => prevById(getTriggerEls(ctx), getItemTriggerId(ctx, id));
+//#endregion
+//#region src/machines/accordion/connect.ts
+function connect(service, normalize) {
+	const { send, context, prop, scope, computed } = service;
+	const focusedValue = context.get("focusedValue");
+	const value = context.get("value");
+	const multiple = prop("multiple");
+	function setValue(value) {
+		let nextValue = value;
+		if (!multiple && nextValue.length > 1) nextValue = [nextValue[0]];
+		send({
+			type: "VALUE.SET",
+			value: nextValue
+		});
+	}
+	function getItemState(props) {
+		return {
+			expanded: value.includes(props.value),
+			focused: focusedValue === props.value,
+			disabled: Boolean(props.disabled ?? prop("disabled"))
+		};
+	}
+	return {
+		focusedValue,
+		value,
+		setValue,
+		getItemState,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-orientation": prop("orientation")
+			});
+		},
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				id: getItemId(scope, props.value),
+				"data-state": itemState.expanded ? "open" : "closed",
+				"data-focus": dataAttr(itemState.focused),
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-orientation": prop("orientation")
+			});
+		},
+		getItemContentProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.itemContent.attrs,
+				dir: prop("dir"),
+				role: "region",
+				id: getItemContentId(scope, props.value),
+				"aria-labelledby": getItemTriggerId(scope, props.value),
+				hidden: !itemState.expanded,
+				"data-state": itemState.expanded ? "open" : "closed",
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-focus": dataAttr(itemState.focused),
+				"data-orientation": prop("orientation")
+			});
+		},
+		getItemIndicatorProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.itemIndicator.attrs,
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-state": itemState.expanded ? "open" : "closed",
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-focus": dataAttr(itemState.focused),
+				"data-orientation": prop("orientation")
+			});
+		},
+		getItemTriggerProps(props) {
+			const { value } = props;
+			const itemState = getItemState(props);
+			return normalize.button({
+				...parts.itemTrigger.attrs,
+				type: "button",
+				dir: prop("dir"),
+				id: getItemTriggerId(scope, value),
+				"aria-controls": getItemContentId(scope, value),
+				"data-controls": getItemContentId(scope, value),
+				"aria-expanded": itemState.expanded,
+				disabled: itemState.disabled,
+				"data-orientation": prop("orientation"),
+				"data-state": itemState.expanded ? "open" : "closed",
+				"data-focus": dataAttr(itemState.focused),
+				"data-ownedby": getRootId(scope),
+				onFocus() {
+					if (itemState.disabled) return;
+					send({
+						type: "TRIGGER.FOCUS",
+						value
+					});
+				},
+				onBlur() {
+					if (itemState.disabled) return;
+					send({ type: "TRIGGER.BLUR" });
+				},
+				onClick(event) {
+					if (itemState.disabled) return;
+					if (isSafari()) event.currentTarget.focus();
+					send({
+						type: "TRIGGER.CLICK",
+						value
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (itemState.disabled) return;
+					const exec = {
+						ArrowDown() {
+							if (computed("isHorizontal")) return;
+							send({
+								type: "GOTO.NEXT",
+								value
+							});
+						},
+						ArrowUp() {
+							if (computed("isHorizontal")) return;
+							send({
+								type: "GOTO.PREV",
+								value
+							});
+						},
+						ArrowRight() {
+							if (!computed("isHorizontal")) return;
+							send({
+								type: "GOTO.NEXT",
+								value
+							});
+						},
+						ArrowLeft() {
+							if (!computed("isHorizontal")) return;
+							send({
+								type: "GOTO.PREV",
+								value
+							});
+						},
+						Home() {
+							send({
+								type: "GOTO.FIRST",
+								value
+							});
+						},
+						End() {
+							send({
+								type: "GOTO.LAST",
+								value
+							});
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: prop("orientation")
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/accordion/machine.ts
+const { and, not } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			collapsible: false,
+			multiple: false,
+			orientation: "vertical",
+			defaultValue: [],
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			focusedValue: bindable(() => ({
+				defaultValue: null,
+				sync: true,
+				onChange(value) {
+					prop("onFocusChange")?.({ value });
+				}
+			})),
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			}))
+		};
+	},
+	computed: { isHorizontal: ({ prop }) => prop("orientation") === "horizontal" },
+	on: { "VALUE.SET": { actions: ["setValue"] } },
+	states: {
+		idle: { on: { "TRIGGER.FOCUS": {
+			target: "focused",
+			actions: ["setFocusedValue"]
+		} } },
+		focused: { on: {
+			"GOTO.NEXT": { actions: ["focusNextTrigger"] },
+			"GOTO.PREV": { actions: ["focusPrevTrigger"] },
+			"TRIGGER.CLICK": [{
+				guard: and("isExpanded", "canToggle"),
+				actions: ["collapse"]
+			}, {
+				guard: not("isExpanded"),
+				actions: ["expand"]
+			}],
+			"GOTO.FIRST": { actions: ["focusFirstTrigger"] },
+			"GOTO.LAST": { actions: ["focusLastTrigger"] },
+			"TRIGGER.BLUR": {
+				target: "idle",
+				actions: ["clearFocusedValue"]
+			}
+		} }
+	},
+	implementations: {
+		guards: {
+			canToggle: ({ prop }) => !!prop("collapsible") || !!prop("multiple"),
+			isExpanded: ({ context, event }) => context.get("value").includes(event.value)
+		},
+		actions: {
+			collapse({ context, prop, event }) {
+				const next = prop("multiple") ? remove(context.get("value"), event.value) : [];
+				context.set("value", next);
+			},
+			expand({ context, prop, event }) {
+				const next = prop("multiple") ? add(context.get("value"), event.value) : [event.value];
+				context.set("value", next);
+			},
+			focusFirstTrigger({ scope }) {
+				getFirstTriggerEl(scope)?.focus();
+			},
+			focusLastTrigger({ scope }) {
+				getLastTriggerEl(scope)?.focus();
+			},
+			focusNextTrigger({ context, scope }) {
+				const focusedValue = context.get("focusedValue");
+				if (!focusedValue) return;
+				getNextTriggerEl(scope, focusedValue)?.focus();
+			},
+			focusPrevTrigger({ context, scope }) {
+				const focusedValue = context.get("focusedValue");
+				if (!focusedValue) return;
+				getPrevTriggerEl(scope, focusedValue)?.focus();
+			},
+			setFocusedValue({ context, event }) {
+				context.set("focusedValue", event.value);
+			},
+			clearFocusedValue({ context }) {
+				context.set("focusedValue", null);
+			},
+			setValue({ context, event }) {
+				context.set("value", event.value);
+			},
+			coarseValue({ context, prop }) {
+				if (!prop("multiple") && context.get("value").length > 1) {
+					warn(`The value of accordion should be a single value when multiple is false.`);
+					context.set("value", [context.get("value")[0]]);
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/accordion/props.ts
+const props = createProps()([
+	"collapsible",
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"multiple",
+	"onFocusChange",
+	"onValueChange",
+	"orientation",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["value", "disabled"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };