@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/toggle-group/index.cjs

@@ -0,0 +1,329 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_platform = require("../../platform-BZS-dkZN.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_array = require("../../array-BGtygd0o.cjs");
+const require_equal = require("../../equal-C927y7MN.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_warning = require("../../warning-HAmFXLHm.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/toggle-group/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("toggle-group").parts("root", "item");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/toggle-group/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toggle-group:${ctx.id}:${value}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getElements = (ctx) => {
+	const selector = `[data-ownedby='${CSS.escape(getRootId(ctx))}']:not([data-disabled])`;
+	return require_dom_query.queryAll(getRootEl(ctx), selector);
+};
+const getFirstEl = (ctx) => require_array.first(getElements(ctx));
+const getLastEl = (ctx) => require_array.last(getElements(ctx));
+const getNextEl = (ctx, id, loopFocus) => require_dom_query.nextById(getElements(ctx), id, loopFocus);
+const getPrevEl = (ctx, id, loopFocus) => require_dom_query.prevById(getElements(ctx), id, loopFocus);
+//#endregion
+//#region src/machines/toggle-group/connect.ts
+function connect(service, normalize) {
+	const { context, send, prop, scope } = service;
+	const value = context.get("value");
+	const disabled = prop("disabled");
+	const isSingle = !prop("multiple");
+	const rovingFocus = prop("rovingFocus");
+	const isHorizontal = prop("orientation") === "horizontal";
+	function getItemState(props) {
+		const id = getItemId(scope, props.value);
+		return {
+			id,
+			disabled: Boolean(props.disabled || disabled),
+			pressed: !!value.includes(props.value),
+			focused: context.get("focusedId") === id
+		};
+	}
+	return {
+		value,
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				role: isSingle ? "radiogroup" : "group",
+				tabIndex: context.get("isTabbingBackward") ? -1 : 0,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-focus": require_dom_query.dataAttr(context.get("focusedId") != null),
+				style: { outline: "none" },
+				onMouseDown() {
+					if (disabled) return;
+					send({ type: "ROOT.MOUSE_DOWN" });
+				},
+				onFocus(event) {
+					if (disabled) return;
+					if (event.currentTarget !== require_event.getEventTarget(event)) return;
+					if (context.get("isClickFocus")) return;
+					if (context.get("isTabbingBackward")) return;
+					send({ type: "ROOT.FOCUS" });
+				},
+				onBlur(event) {
+					const target = event.relatedTarget;
+					if (require_dom_query.contains(event.currentTarget, target)) return;
+					if (disabled) return;
+					send({ type: "ROOT.BLUR" });
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			const rovingTabIndex = itemState.focused ? 0 : -1;
+			return normalize.button({
+				...parts.item.attrs,
+				id: itemState.id,
+				type: "button",
+				"data-ownedby": getRootId(scope),
+				"data-focus": require_dom_query.dataAttr(itemState.focused),
+				disabled: itemState.disabled,
+				tabIndex: rovingFocus ? rovingTabIndex : void 0,
+				role: isSingle ? "radio" : void 0,
+				"aria-checked": isSingle ? itemState.pressed : void 0,
+				"aria-pressed": isSingle ? void 0 : itemState.pressed,
+				"data-disabled": require_dom_query.dataAttr(itemState.disabled),
+				"data-orientation": prop("orientation"),
+				dir: prop("dir"),
+				"data-state": itemState.pressed ? "on" : "off",
+				onFocus() {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.FOCUS",
+						id: itemState.id
+					});
+				},
+				onClick(event) {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.CLICK",
+						id: itemState.id,
+						value: props.value
+					});
+					if (require_platform.isSafari()) event.currentTarget.focus({ preventScroll: true });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!require_dom_query.contains(event.currentTarget, require_event.getEventTarget(event))) return;
+					if (itemState.disabled) return;
+					const exec = {
+						Tab(event) {
+							const isShiftTab = event.shiftKey;
+							send({
+								type: "TOGGLE.SHIFT_TAB",
+								isShiftTab
+							});
+						},
+						ArrowLeft() {
+							if (!rovingFocus || !isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_PREV" });
+						},
+						ArrowRight() {
+							if (!rovingFocus || !isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_NEXT" });
+						},
+						ArrowUp() {
+							if (!rovingFocus || isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_PREV" });
+						},
+						ArrowDown() {
+							if (!rovingFocus || isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_NEXT" });
+						},
+						Home() {
+							if (!rovingFocus) return;
+							send({ type: "TOGGLE.FOCUS_FIRST" });
+						},
+						End() {
+							if (!rovingFocus) return;
+							send({ type: "TOGGLE.FOCUS_LAST" });
+						}
+					}[require_event.getEventKey(event)];
+					if (exec) {
+						exec(event);
+						if (event.key !== "Tab") event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/toggle-group/machine.ts
+const { not, and } = require_core.createGuards();
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			defaultValue: [],
+			orientation: "horizontal",
+			rovingFocus: true,
+			loopFocus: true,
+			deselectable: true,
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedId: bindable(() => ({ defaultValue: null })),
+			isTabbingBackward: bindable(() => ({ defaultValue: false })),
+			isClickFocus: bindable(() => ({ defaultValue: false })),
+			isWithinToolbar: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: { currentLoopFocus: ({ context, prop }) => prop("loopFocus") && !context.get("isWithinToolbar") },
+	entry: ["checkIfWithinToolbar"],
+	on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"TOGGLE.CLICK": { actions: ["setValue"] },
+		"ROOT.MOUSE_DOWN": { actions: ["setClickFocus"] }
+	},
+	states: {
+		idle: { on: {
+			"ROOT.FOCUS": {
+				target: "focused",
+				guard: not(and("isClickFocus", "isTabbingBackward")),
+				actions: ["focusFirstToggle", "clearClickFocus"]
+			},
+			"TOGGLE.FOCUS": {
+				target: "focused",
+				actions: ["setFocusedId"]
+			}
+		} },
+		focused: { on: {
+			"ROOT.BLUR": {
+				target: "idle",
+				actions: [
+					"clearIsTabbingBackward",
+					"clearFocusedId",
+					"clearClickFocus"
+				]
+			},
+			"TOGGLE.FOCUS": { actions: ["setFocusedId"] },
+			"TOGGLE.FOCUS_NEXT": { actions: ["focusNextToggle"] },
+			"TOGGLE.FOCUS_PREV": { actions: ["focusPrevToggle"] },
+			"TOGGLE.FOCUS_FIRST": { actions: ["focusFirstToggle"] },
+			"TOGGLE.FOCUS_LAST": { actions: ["focusLastToggle"] },
+			"TOGGLE.SHIFT_TAB": [{
+				guard: not("isFirstToggleFocused"),
+				target: "idle",
+				actions: ["setIsTabbingBackward"]
+			}, { actions: ["setIsTabbingBackward"] }]
+		} }
+	},
+	implementations: {
+		guards: {
+			isClickFocus: ({ context }) => context.get("isClickFocus"),
+			isTabbingBackward: ({ context }) => context.get("isTabbingBackward"),
+			isFirstToggleFocused: ({ context, scope }) => context.get("focusedId") === getFirstEl(scope)?.id
+		},
+		actions: {
+			setIsTabbingBackward({ context }) {
+				context.set("isTabbingBackward", true);
+			},
+			clearIsTabbingBackward({ context }) {
+				context.set("isTabbingBackward", false);
+			},
+			setClickFocus({ context }) {
+				context.set("isClickFocus", true);
+			},
+			clearClickFocus({ context }) {
+				context.set("isClickFocus", false);
+			},
+			checkIfWithinToolbar({ context, scope }) {
+				const closestToolbar = getRootEl(scope)?.closest("[role=toolbar]");
+				context.set("isWithinToolbar", !!closestToolbar);
+			},
+			setFocusedId({ context, event }) {
+				context.set("focusedId", event.id);
+			},
+			clearFocusedId({ context }) {
+				context.set("focusedId", null);
+			},
+			setValue({ context, event, prop }) {
+				require_warning.ensureProps(event, ["value"]);
+				let next = context.get("value");
+				if (require_utils.isArray(event.value)) next = event.value;
+				else if (prop("multiple")) next = require_array.addOrRemove(next, event.value);
+				else next = require_equal.isEqual(next, [event.value]) && prop("deselectable") ? [] : [event.value];
+				context.set("value", next);
+			},
+			focusNextToggle({ context, scope, prop }) {
+				require_raf.raf(() => {
+					const focusedId = context.get("focusedId");
+					if (!focusedId) return;
+					getNextEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+				});
+			},
+			focusPrevToggle({ context, scope, prop }) {
+				require_raf.raf(() => {
+					const focusedId = context.get("focusedId");
+					if (!focusedId) return;
+					getPrevEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+				});
+			},
+			focusFirstToggle({ scope }) {
+				require_raf.raf(() => {
+					getFirstEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			focusLastToggle({ scope }) {
+				require_raf.raf(() => {
+					getLastEl(scope)?.focus({ preventScroll: true });
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/toggle-group/props.ts
+const props = require_create_props.createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"multiple",
+	"onValueChange",
+	"orientation",
+	"rovingFocus",
+	"value",
+	"defaultValue",
+	"deselectable"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const itemProps = require_create_props.createProps()(["value", "disabled"]);
+const splitItemProps = require_utils.createSplitProps(itemProps);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.itemProps = itemProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitItemProps = splitItemProps;
+exports.splitProps = splitProps;

package/dist/machines/toggle-group/index.d.cts

@@ -0,0 +1,81 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, d as Orientation, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/toggle-group/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item">;
+//#endregion
+//#region src/machines/toggle-group/types.d.ts
+interface ValueChangeDetails {
+  value: string[];
+}
+type ElementIds = Partial<{
+  root: string;
+  item: (value: string) => string;
+}>;
+interface ToggleGroupProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  value?: string[] | undefined;
+  defaultValue?: string[] | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  loopFocus?: boolean | undefined;
+  rovingFocus?: boolean | undefined;
+  orientation?: Orientation | undefined;
+  multiple?: boolean | undefined;
+  deselectable?: boolean | undefined;
+}
+type PropsWithDefault = "loopFocus" | "rovingFocus" | "orientation";
+type ComputedContext = Readonly<{
+  currentLoopFocus: boolean;
+}>;
+interface PrivateContext {
+  isTabbingBackward: boolean;
+  isClickFocus: boolean;
+  focusedId: string | null;
+  isWithinToolbar: boolean;
+  value: string[];
+}
+interface ToggleGroupSchema {
+  props: RequiredBy<ToggleGroupProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle" | "focused";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type ToggleGroupService = Service<ToggleGroupSchema>;
+type ToggleGroupMachine = Machine<ToggleGroupSchema>;
+interface ItemProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface ItemState {
+  id: string;
+  disabled: boolean;
+  pressed: boolean;
+  focused: boolean;
+}
+interface ToggleGroupApi<T extends PropTypes = PropTypes> {
+  value: string[];
+  setValue: (value: string[]) => void;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["button"];
+}
+//#endregion
+//#region src/machines/toggle-group/connect.d.ts
+declare function connect<T extends PropTypes>(service: ToggleGroupService, normalize: NormalizeProps<T>): ToggleGroupApi<T>;
+//#endregion
+//#region src/machines/toggle-group/machine.d.ts
+declare const machine: Machine<ToggleGroupSchema>;
+//#endregion
+//#region src/machines/toggle-group/props.d.ts
+declare const props: (keyof ToggleGroupProps)[];
+declare const splitProps: <Props extends Partial<ToggleGroupProps>>(props: Props) => [Partial<ToggleGroupProps>, Omit<Props, keyof ToggleGroupProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+//#endregion
+export { type ToggleGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type ToggleGroupMachine as Machine, type Orientation, type ToggleGroupProps as Props, type ToggleGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/machines/toggle-group/index.d.ts

@@ -0,0 +1,81 @@
+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, d as Orientation, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/toggle-group/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item">;
+//#endregion
+//#region src/machines/toggle-group/types.d.ts
+interface ValueChangeDetails {
+  value: string[];
+}
+type ElementIds = Partial<{
+  root: string;
+  item: (value: string) => string;
+}>;
+interface ToggleGroupProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  value?: string[] | undefined;
+  defaultValue?: string[] | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  loopFocus?: boolean | undefined;
+  rovingFocus?: boolean | undefined;
+  orientation?: Orientation | undefined;
+  multiple?: boolean | undefined;
+  deselectable?: boolean | undefined;
+}
+type PropsWithDefault = "loopFocus" | "rovingFocus" | "orientation";
+type ComputedContext = Readonly<{
+  currentLoopFocus: boolean;
+}>;
+interface PrivateContext {
+  isTabbingBackward: boolean;
+  isClickFocus: boolean;
+  focusedId: string | null;
+  isWithinToolbar: boolean;
+  value: string[];
+}
+interface ToggleGroupSchema {
+  props: RequiredBy<ToggleGroupProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle" | "focused";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type ToggleGroupService = Service<ToggleGroupSchema>;
+type ToggleGroupMachine = Machine<ToggleGroupSchema>;
+interface ItemProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface ItemState {
+  id: string;
+  disabled: boolean;
+  pressed: boolean;
+  focused: boolean;
+}
+interface ToggleGroupApi<T extends PropTypes = PropTypes> {
+  value: string[];
+  setValue: (value: string[]) => void;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["button"];
+}
+//#endregion
+//#region src/machines/toggle-group/connect.d.ts
+declare function connect<T extends PropTypes>(service: ToggleGroupService, normalize: NormalizeProps<T>): ToggleGroupApi<T>;
+//#endregion
+//#region src/machines/toggle-group/machine.d.ts
+declare const machine: Machine<ToggleGroupSchema>;
+//#endregion
+//#region src/machines/toggle-group/props.d.ts
+declare const props: (keyof ToggleGroupProps)[];
+declare const splitProps: <Props extends Partial<ToggleGroupProps>>(props: Props) => [Partial<ToggleGroupProps>, Omit<Props, keyof ToggleGroupProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+//#endregion
+export { type ToggleGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type ToggleGroupMachine as Machine, type Orientation, type ToggleGroupProps as Props, type ToggleGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };