@zag-js/dom-utils - npm Package Compare versions

Comparing version 0.0.0-dev-20220714012600 to 0.0.0-dev-20220714091855

dist/index.d.ts

@@ -1,31 +0,308 @@
-export * from "./attrs";
-export * from "./constants";
-export * from "./copy-visual-styles";
-export * from "./event";
-export * from "./fire-event";
-export * from "./focusable";
-export * from "./form";
-export * from "./get-computed-style";
-export * from "./get-element-offset";
-export * from "./get-event-point";
-export * from "./get-point-relative-to-element";
-export * from "./input-event";
-export * from "./keyboard-event";
-export * from "./listener";
-export * from "./mutation-observer";
-export * from "./next-tick";
-export * from "./nodelist";
-export * from "./platform";
-export * from "./pointer-event";
-export * from "./pointerlock";
-export * from "./query";
-export * from "./queue-before-event";
-export * from "./queue-microtask";
-export * from "./rect-observer";
-export * from "./scrollable";
-export * from "./text-selection";
-export * from "./typeahead";
-export * from "./visibility-event";
-export * from "./visual-viewport";
-export * from "./visually-hidden";
-export * from "./wait";
+import { JSX } from '@zag-js/types';
+
+declare type Booleanish = boolean | "true" | "false";
+declare const dataAttr: (guard: boolean | undefined) => Booleanish;
+declare const ariaAttr: (guard: boolean | undefined) => "true" | undefined;
+declare const matchAttr: (el: Element) => {
+    get: (key: string) => string | null;
+    set: (key: string, value: string) => void;
+    is: (key: string, value: string) => boolean;
+};
+
+declare const MAX_Z_INDEX = 2147483647;
+
+declare function copyVisualStyles(fromEl: HTMLElement | null, toEl: HTMLElement): void;
+
+declare function isKeyboardClick(e: Pick<MouseEvent, "detail" | "clientX" | "clientY">): boolean;
+declare function isPrintableKey(e: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey">): boolean;
+declare function isVirtualPointerEvent(event: PointerEvent): boolean;
+declare function isVirtualClick(event: MouseEvent | PointerEvent): boolean;
+declare type NativeEvent<E> = JSX.ChangeEvent<any> extends E ? InputEvent : E extends JSX.SyntheticEvent<any, infer T> ? T : never;
+declare function getNativeEvent<E>(e: E): NativeEvent<E>;
+declare function isSelfEvent(event: Pick<Event, "currentTarget" | "target">): boolean;
+declare const supportsPointerEvent: () => boolean;
+declare const supportsTouchEvent: () => boolean;
+declare const supportsMouseEvent: () => boolean;
+declare const isMouseEvent: (v: any) => v is MouseEvent;
+declare const isTouchEvent: (v: any) => v is TouchEvent;
+declare const isLeftClick: (v: {
+    button: number;
+}) => boolean;
+declare const isContextMenuEvent: (e: Pick<MouseEvent, "button" | "ctrlKey" | "metaKey">) => boolean;
+declare const isRightClick: (v: {
+    button: number;
+}) => boolean;
+declare const isModifiedEvent: (v: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "altKey">) => boolean;
+declare const isCtrlKey: (v: Pick<KeyboardEvent, "ctrlKey" | "metaKey">) => boolean;
+declare function whenMouse<E>(handler: JSX.PointerEventHandler<E>): JSX.PointerEventHandler<E>;
+declare function whenTouchOrPen<E>(handler: JSX.PointerEventHandler<E>): JSX.PointerEventHandler<E>;
+
+declare function fireCustomEvent(el: HTMLElement | null, type: string, init?: CustomEventInit): boolean | undefined;
+declare function fireBlurEvent(el: HTMLElement, init?: FocusEventInit): boolean;
+declare function fireKeyboardEvent(el: HTMLElement, type: string, init?: KeyboardEventInit): boolean;
+declare function fireClickEvent(el: HTMLElement, init?: PointerEventInit): boolean;
+
+declare type IncludeContainerType = boolean | "if-empty";
+declare const focusableSelector: string;
+/**
+ * Returns the focusable elements within the element
+ */
+declare const getFocusables: (container: Pick<HTMLElement, "querySelectorAll"> | null, includeContainer?: IncludeContainerType) => HTMLElement[];
+/**
+ * Whether this element is focusable
+ */
+declare function isFocusable(element: HTMLElement | null): element is HTMLElement;
+declare function getFirstFocusable(container: HTMLElement, includeContainer?: IncludeContainerType): HTMLElement;
+/**
+ * Returns the tabbable elements within the element
+ */
+declare function getTabbables(container: HTMLElement | null, includeContainer?: IncludeContainerType): HTMLElement[];
+/**
+ * Whether this element is tabbable
+ */
+declare function isTabbable(el: HTMLElement | null): el is HTMLElement;
+declare function getFirstTabbable(container: HTMLElement | null, includeContainer?: IncludeContainerType): HTMLElement;
+declare function getLastTabbable(container: HTMLElement | null, includeContainer?: IncludeContainerType): HTMLElement;
+
+declare function getClosestForm(el: HTMLElement): HTMLFormElement | null;
+declare function trackFormReset(el: HTMLElement | null | undefined, callback: () => void): (() => void) | undefined;
+declare function trackFieldsetDisabled(el: HTMLElement | null | undefined, callback: (disabled: boolean) => void): (() => void) | undefined;
+declare function isNativeDisabled(el: HTMLElement): boolean;
+
+declare type Key = keyof CSSStyleDeclaration | (string & {});
+declare type Styles = Record<Key, any>;
+declare type El = HTMLElement | null | undefined;
+declare function getComputedStyle(el: El): Styles;
+
+declare function getElementOffset(element: HTMLElement): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+
+declare type PointType = "page" | "client";
+declare function getEventPoint(event: MouseEvent | TouchEvent | PointerEvent, type?: PointType): {
+    x: number;
+    y: number;
+};
+
+declare type Point = {
+    x: number;
+    y: number;
+};
+declare function getPointRelativeToNode(point: Point, element: HTMLElement): {
+    x: number;
+    y: number;
+};
+
+declare type DescriptorOptions = {
+    type: "HTMLInputElement" | "HTMLTextAreaElement" | "HTMLSelectElement";
+    property: "value" | "checked";
+};
+declare function dispatchInputValueEvent(el: HTMLElement | null, value: string | number): void;
+declare function dispatchInputCheckedEvent(el: HTMLElement | null, checked: boolean): void;
+declare function trackInputPropertyMutation(el: HTMLInputElement | null, options: DescriptorOptions & {
+    fn?: (value: string) => void;
+}): (() => void) | undefined;
+
+declare type EventKey = "ArrowDown" | "ArrowUp" | "ArrowLeft" | "ArrowRight" | "Space" | "Enter" | "Comma" | "Escape" | "Backspace" | "Delete" | "Home" | "End" | "Tab" | "PageUp" | "PageDown" | (string & {});
+declare type EventKeyMap = Partial<Record<EventKey, (event: JSX.KeyboardEvent) => void>>;
+declare type EventKeyOptions = {
+    dir?: "ltr" | "rtl";
+    orientation?: "horizontal" | "vertical";
+};
+/**
+ * Determine the event key based on text direction.
+ */
+declare function getEventKey(event: Pick<KeyboardEvent, "key">, options?: EventKeyOptions): string;
+/**
+ * Determine the step factor for keyboard events
+ */
+declare function getEventStep(event: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "key" | "shiftKey">): 1 | 10 | 0.1;
+
+interface EventMap extends DocumentEventMap, WindowEventMap, HTMLElementEventMap {
+}
+declare type DOMTarget = Document | HTMLElement | EventTarget | null;
+declare type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent;
+declare type RefTarget = {
+    current: HTMLElement | null;
+};
+declare type DOMEventTarget = (() => DOMTarget) | DOMTarget | RefTarget;
+interface PointerEventInfo {
+    point: {
+        x: number;
+        y: number;
+    };
+}
+
+declare function extractInfo<T extends AnyPointerEvent = AnyPointerEvent>(event: T, type?: "page" | "client"): {
+    point: {
+        x: any;
+        y: any;
+    };
+};
+declare function addDomEvent<K extends keyof EventMap>(target: DOMEventTarget, eventName: K, handler: (event: EventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+declare function addPointerEvent<K extends keyof EventMap>(target: DOMEventTarget, event: K, listener: (event: EventMap[K], info: PointerEventInfo) => void, options?: boolean | AddEventListenerOptions): () => void;
+declare function extractClientInfo(event: AnyPointerEvent): {
+    point: {
+        x: any;
+        y: any;
+    };
+};
+declare function getEventName(evt: keyof EventMap): keyof EventMap;
+
+declare type Callback = (v: MutationRecord) => void;
+declare function observeAttributes(node: Element | null, attributes: string | string[], fn: Callback): (() => void) | undefined;
+declare function observeChildren(node: Element | null, fn: (v: MutationRecord[]) => void): (() => void) | undefined;
+
+declare function nextTick(fn: VoidFunction): () => void;
+declare function raf(fn: VoidFunction): () => void;
+declare type SchedulerFn = (fn: VoidFunction) => VoidFunction;
+declare type DisposableVoidFunction = () => VoidFunction | undefined | void;
+declare function disposable(type: SchedulerFn | undefined, fn: DisposableVoidFunction): () => void;
+declare function disposableRaf(fn: DisposableVoidFunction): () => void;
+declare function disposableNextTick(fn: DisposableVoidFunction): () => void;
+
+declare type Root = Document | Element | null | undefined;
+declare function queryAll<T extends HTMLElement = HTMLElement>(root: Root, selector: string): T[];
+declare function query<T extends HTMLElement = HTMLElement>(root: Root, selector: string): T | null | undefined;
+declare function itemById<T extends HTMLElement>(v: T[], id: string): T | undefined;
+declare function indexOfId<T extends HTMLElement>(v: T[], id: string): number;
+declare function nextById<T extends HTMLElement>(v: T[], id: string, loop?: boolean): T;
+declare function prevById<T extends HTMLElement>(v: T[], id: string, loop?: boolean): T | null;
+declare function findByText<T extends HTMLElement>(v: T[], text: string, currentId?: string | null): T | undefined;
+declare function sortByTreeOrder<T extends HTMLElement>(v: T[]): T[];
+
+declare const isDom: () => boolean;
+declare function getPlatform(): any;
+declare const isTouchDevice: () => boolean;
+declare const isMac: () => false;
+declare const isIPhone: () => boolean;
+declare const isSafari: () => boolean;
+declare const isFirefox: () => boolean;
+declare const isApple: () => boolean;
+declare const isIos: () => boolean;
+
+declare function trackPointerDown(doc: Document, onPointerDown: (el: HTMLElement) => void): () => void;
+declare type TrackPointerMoveOptions = {
+    onPointerUp: VoidFunction;
+    onPointerMove: (info: PointerEventInfo, event: AnyPointerEvent) => void;
+};
+declare function trackPointerMove(doc: Document, opts: TrackPointerMoveOptions): () => void;
+
+declare type PointerLockHandlers = {
+    onPointerLock?: VoidFunction;
+    onPointerUnlock?: VoidFunction;
+};
+declare function addPointerlockChangeListener(doc: Document, fn: VoidFunction): () => void;
+declare function addPointerlockErrorListener(doc: Document, fn: (e: Event) => void): () => void;
+declare function requestPointerLock(doc: Document, handlers?: PointerLockHandlers): (() => void) | undefined;
+
+declare function isDocument(el: any): el is Document;
+declare function isShadowRoot(el: any): el is ShadowRoot;
+declare function isWindow(value: any): value is Window;
+declare function isFrame(element: Element): element is HTMLIFrameElement;
+declare const isWithinShadowRoot: (node: HTMLElement) => boolean;
+declare function getDocument(el: Element | Window | Node | Document | null): Document;
+declare function getRootNode(el: Node): Document | ShadowRoot;
+declare function getWindow(el: HTMLElement): Window & typeof globalThis;
+declare function getDocumentElement(el: HTMLElement | Window): HTMLElement;
+declare function getNodeName(node: HTMLElement | Window | null): string;
+declare function getEventWindow(event: UIEvent): Window;
+declare function getEventTarget<T extends EventTarget>(event: Event): T | null;
+declare function getActiveElement(el: HTMLElement): HTMLElement | null;
+declare function getActiveDescendant(node: HTMLElement | null): HTMLElement | null;
+declare function getParent(el: HTMLElement): HTMLElement;
+declare type Ctx = {
+    getRootNode?: () => Document | ShadowRoot | Node;
+};
+declare function defineDomHelpers<T>(helpers: T): {
+    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
+    getDoc: (ctx: Ctx) => Document;
+    getWin: (ctx: Ctx) => Window & typeof globalThis;
+    getActiveElement: (ctx: Ctx) => HTMLElement | null;
+    getById: <T_1 = HTMLElement>(ctx: Ctx, id: string) => T_1 | null;
+} & T;
+declare function contains(parent: HTMLElement | EventTarget | null | undefined, child: HTMLElement | EventTarget | null): boolean;
+declare function isHTMLElement(v: any): v is HTMLElement;
+declare const isDisabled: (el: HTMLElement | null) => boolean;
+declare function isElementEditable(el: HTMLElement | null): boolean;
+declare function isVisible(el: Element): boolean;
+
+declare function queueBeforeEvent(el: Element, type: string, fn: VoidFunction): void;
+
+declare function queueMicrotask(fn: VoidFunction): void;
+
+declare type Fn = (rect: DOMRect) => void;
+declare type Measurable = {
+    getBoundingClientRect(): DOMRect;
+};
+declare function observeElementRect(el: Measurable, fn: Fn): () => void;
+
+declare function isScrollParent(el: HTMLElement): boolean;
+declare function getScrollParent(el: HTMLElement): HTMLElement;
+declare type Target = Array<VisualViewport | Window | HTMLElement>;
+declare function getScrollParents(el: HTMLElement, list?: Target): Target;
+declare function getScrollOffset(el: HTMLElement): {
+    scrollLeft: number;
+    scrollTop: number;
+};
+
+declare function disableTextSelection({ target, doc }?: {
+    target?: HTMLElement;
+    doc?: Document;
+}): () => void;
+declare function restoreTextSelection({ target, doc }?: {
+    target?: HTMLElement;
+    doc?: Document;
+}): void;
+
+declare type TypeaheadState = {
+    keysSoFar: string;
+    timer: number;
+};
+declare type TypeaheadOptions = {
+    state: TypeaheadState;
+    activeId: string | null;
+    key: string;
+    timeout?: number;
+};
+declare function findByTypeaheadImpl<T extends HTMLElement>(_items: T[], options: TypeaheadOptions): T | undefined;
+declare const findByTypeahead: typeof findByTypeaheadImpl & {
+    defaultOptions: {
+        keysSoFar: string;
+        timer: number;
+    };
+};
+
+declare function trackDocumentVisibility(_doc: Document, callback: (hidden: boolean) => void): () => void;
+
+declare type ViewportSize = {
+    width: number;
+    height: number;
+};
+declare type Options = {
+    document?: Document;
+    resolve?(data: ViewportSize): void;
+};
+declare function trackVisualViewport(options: Options): () => void;
+
+declare const visuallyHiddenStyle: {
+    readonly border: "0";
+    readonly clip: "rect(0 0 0 0)";
+    readonly height: "1px";
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly padding: "0";
+    readonly position: "absolute";
+    readonly width: "1px";
+    readonly whiteSpace: "nowrap";
+    readonly wordWrap: "normal";
+};
+declare function setVisuallyHidden(el: HTMLElement): void;
+
+declare function waitFor<T>(predicate: () => T): Promise<T>;
+declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;
+
+export { EventKeyMap, MAX_Z_INDEX, Measurable, TypeaheadOptions, TypeaheadState, addDomEvent, addPointerEvent, addPointerlockChangeListener, addPointerlockErrorListener, ariaAttr, contains, copyVisualStyles, dataAttr, defineDomHelpers, disableTextSelection, dispatchInputCheckedEvent, dispatchInputValueEvent, disposable, disposableNextTick, disposableRaf, extractClientInfo, extractInfo, findByText, findByTypeahead, fireBlurEvent, fireClickEvent, fireCustomEvent, fireKeyboardEvent, focusableSelector, getActiveDescendant, getActiveElement, getClosestForm, getComputedStyle, getDocument, getDocumentElement, getElementOffset, getEventKey, getEventName, getEventPoint, getEventStep, getEventTarget, getEventWindow, getFirstFocusable, getFirstTabbable, getFocusables, getLastTabbable, getNativeEvent, getNodeName, getParent, getPlatform, getPointRelativeToNode, getRootNode, getScrollOffset, getScrollParent, getScrollParents, getTabbables, getWindow, indexOfId, isApple, isContextMenuEvent, isCtrlKey, isDisabled, isDocument, isDom, isElementEditable, isFirefox, isFocusable, isFrame, isHTMLElement, isIPhone, isIos, isKeyboardClick, isLeftClick, isMac, isModifiedEvent, isMouseEvent, isNativeDisabled, isPrintableKey, isRightClick, isSafari, isScrollParent, isSelfEvent, isShadowRoot, isTabbable, isTouchDevice, isTouchEvent, isVirtualClick, isVirtualPointerEvent, isVisible, isWindow, isWithinShadowRoot, itemById, matchAttr, nextById, nextTick, observeAttributes, observeChildren, observeElementRect, prevById, query, queryAll, queueBeforeEvent, queueMicrotask, raf, requestPointerLock, restoreTextSelection, setVisuallyHidden, sortByTreeOrder, supportsMouseEvent, supportsPointerEvent, supportsTouchEvent, trackDocumentVisibility, trackFieldsetDisabled, trackFormReset, trackInputPropertyMutation, trackPointerDown, trackPointerMove, trackVisualViewport, visuallyHiddenStyle, waitFor, waitForEvent, whenMouse, whenTouchOrPen };

dist/index.js

 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
@@ -190,3 +172,2 @@ for (var name in all)
 function getComputedStyle(el) {
-  var _a;
   if (!el)
@@ -197,3 +178,3 @@ return {};
   if (!style) {
-    const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+    const win = (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
     style = win.getComputedStyle(el);
@@ -217,3 +198,3 @@ cache.set(el, style);
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
@@ -233,5 +214,4 @@ var cast = (v) => v;
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
@@ -266,3 +246,2 @@ var pt = (v) => isDom() && v.test(getPlatform());
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
@@ -272,3 +251,3 @@ return el.document;
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
@@ -279,4 +258,3 @@ function getRootNode(el) {
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
 }
@@ -287,4 +265,3 @@ function getDocumentElement(el) {
 function getNodeName(node) {
-  var _a;
-  return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
+  return isWindow(node) ? "" : (node == null ? void 0 : node.localName) ?? "";
 }
@@ -300,4 +277,4 @@ function getEventWindow(event) {
 function getEventTarget(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+  var _a;
+  return ((_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) ?? event.target;
 }
@@ -332,14 +309,14 @@ function getActiveElement(el) {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
     getDoc: (ctx) => getDocument(dom.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues(__spreadValues({}, dom), helpers);
+  return {
+    ...dom,
+    ...helpers
+  };
 }
@@ -363,3 +340,3 @@ function contains(parent, child) {
     return el instanceof win.HTMLInputElement && el.selectionStart != null || /(textarea|select)/.test(el.localName) || el.isContentEditable;
-  } catch (e) {
+  } catch {
     return false;
@@ -390,4 +367,3 @@ }
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
@@ -428,3 +404,3 @@ function isSelfEvent(event) {
   const allowed = el.dispatchEvent(event);
-  const bubbleInit = __spreadProps(__spreadValues({}, init), { bubbles: true });
+  const bubbleInit = { ...init, bubbles: true };
   el.dispatchEvent(new win.FocusEvent("focusout", bubbleInit));
@@ -595,4 +571,3 @@ return allowed;
 function getEventPoint(event, type = "page") {
-  var _a, _b;
-  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
   return { x: point[`${type}X`], y: point[`${type}Y`] };
@@ -611,6 +586,5 @@ }
 function getDescriptor(el, options) {
-  var _a;
   const { type, property } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
@@ -679,6 +653,5 @@ function dispatchInputValueEvent(el, value) {
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
@@ -722,4 +695,3 @@ if (isRtl && key in rtlKeyMap) {
 function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
+  const type = getEventName(event) ?? event;
   return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
@@ -735,4 +707,3 @@ }
   return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
+    const win = event.view ?? window;
     const isMouseEvent2 = event instanceof win.MouseEvent;
@@ -817,4 +788,3 @@ const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
 }
@@ -843,6 +813,3 @@ function query(root, selector) {
 }
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
-};
+var getValueText = (item) => item.dataset.valuetext ?? item.textContent ?? "";
 var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
@@ -870,3 +837,3 @@ var wrap = (v, idx) => {
 function disableTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
@@ -885,3 +852,3 @@ if (state === "default") {
 function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
@@ -906,3 +873,3 @@ if (state !== "disabled")
       if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+        target.style.userSelect = targetOldUserSelect ?? "";
       }
@@ -919,4 +886,3 @@ if (target.getAttribute("style") === "") {
 function trackPointerDown(doc, onPointerDown) {
-  var _a;
-  const win = (_a = doc.defaultView) != null ? _a : window;
+  const win = doc.defaultView ?? window;
   const fn = (event) => {
@@ -929,9 +895,9 @@ if (event.target instanceof win.HTMLElement) {
 }
-function trackPointerMove(opts) {
-  const { onPointerMove, onPointerUp, ctx } = opts;
-  const { doc = document, threshold = 5 } = ctx;
+var THRESHOLD = 5;
+function trackPointerMove(doc, opts) {
+  const { onPointerMove, onPointerUp } = opts;
   const handlePointerMove = (event, info) => {
     const { point: p } = info;
-    const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
-    if (distance < threshold)
+    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
+    if (distance < THRESHOLD)
       return;
@@ -1139,3 +1105,2 @@ if (isMouseEvent(event) && isLeftClick(event)) {
 function trackVisualViewport(options) {
-  var _a;
   const { document: doc, resolve } = options;
@@ -1145,3 +1110,3 @@ const win = (doc == null ? void 0 : doc.defaultView) || window;
   const onResize = () => resolve == null ? void 0 : resolve(getViewportSize(win));
-  return addDomEvent((_a = win.visualViewport) != null ? _a : win, "resize", onResize);
+  return addDomEvent(win.visualViewport ?? win, "resize", onResize);
 }
@@ -1199,1 +1164,123 @@ function getViewportSize(win) {
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MAX_Z_INDEX,
+  addDomEvent,
+  addPointerEvent,
+  addPointerlockChangeListener,
+  addPointerlockErrorListener,
+  ariaAttr,
+  contains,
+  copyVisualStyles,
+  dataAttr,
+  defineDomHelpers,
+  disableTextSelection,
+  dispatchInputCheckedEvent,
+  dispatchInputValueEvent,
+  disposable,
+  disposableNextTick,
+  disposableRaf,
+  extractClientInfo,
+  extractInfo,
+  findByText,
+  findByTypeahead,
+  fireBlurEvent,
+  fireClickEvent,
+  fireCustomEvent,
+  fireKeyboardEvent,
+  focusableSelector,
+  getActiveDescendant,
+  getActiveElement,
+  getClosestForm,
+  getComputedStyle,
+  getDocument,
+  getDocumentElement,
+  getElementOffset,
+  getEventKey,
+  getEventName,
+  getEventPoint,
+  getEventStep,
+  getEventTarget,
+  getEventWindow,
+  getFirstFocusable,
+  getFirstTabbable,
+  getFocusables,
+  getLastTabbable,
+  getNativeEvent,
+  getNodeName,
+  getParent,
+  getPlatform,
+  getPointRelativeToNode,
+  getRootNode,
+  getScrollOffset,
+  getScrollParent,
+  getScrollParents,
+  getTabbables,
+  getWindow,
+  indexOfId,
+  isApple,
+  isContextMenuEvent,
+  isCtrlKey,
+  isDisabled,
+  isDocument,
+  isDom,
+  isElementEditable,
+  isFirefox,
+  isFocusable,
+  isFrame,
+  isHTMLElement,
+  isIPhone,
+  isIos,
+  isKeyboardClick,
+  isLeftClick,
+  isMac,
+  isModifiedEvent,
+  isMouseEvent,
+  isNativeDisabled,
+  isPrintableKey,
+  isRightClick,
+  isSafari,
+  isScrollParent,
+  isSelfEvent,
+  isShadowRoot,
+  isTabbable,
+  isTouchDevice,
+  isTouchEvent,
+  isVirtualClick,
+  isVirtualPointerEvent,
+  isVisible,
+  isWindow,
+  isWithinShadowRoot,
+  itemById,
+  matchAttr,
+  nextById,
+  nextTick,
+  observeAttributes,
+  observeChildren,
+  observeElementRect,
+  prevById,
+  query,
+  queryAll,
+  queueBeforeEvent,
+  queueMicrotask,
+  raf,
+  requestPointerLock,
+  restoreTextSelection,
+  setVisuallyHidden,
+  sortByTreeOrder,
+  supportsMouseEvent,
+  supportsPointerEvent,
+  supportsTouchEvent,
+  trackDocumentVisibility,
+  trackFieldsetDisabled,
+  trackFormReset,
+  trackInputPropertyMutation,
+  trackPointerDown,
+  trackPointerMove,
+  trackVisualViewport,
+  visuallyHiddenStyle,
+  waitFor,
+  waitForEvent,
+  whenMouse,
+  whenTouchOrPen
+});

package.json

 {
   "name": "@zag-js/dom-utils",
-  "version": "0.0.0-dev-20220714012600",
+  "version": "0.0.0-dev-20220714091855",
   "description": "",
@@ -28,14 +28,17 @@ "keywords": [
   "dependencies": {
-    "@zag-js/types": "0.0.0-dev-20220714012600",
-    "@zag-js/utils": "0.1.2"
+    "@zag-js/types": "0.0.0-dev-20220714091855"
   },
+  "devDependencies": {
+    "@zag-js/utils": "0.0.0-dev-20220714091855"
+  },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

No alert changes

Improved metrics

Dependency count

1

decreased by-50%

Worsened metrics

Total package byte prevSize

89932

decreased by-0.49%

Dev dependency count

1

increased byInfinity%

Number of package files

5

decreased by-86.11%

Lines of code

2597

decreased by-0.38%

Dependency changes

• + Added@zag-js/types@0.0.0-dev-20220714091855(transitive)

• - Removed@zag-js/utils@0.1.2

• - Removed@zag-js/types@0.0.0-dev-20220714012600(transitive)

• - Removed@zag-js/utils@0.1.2(transitive)

• Updated@zag-js/types@0.0.0-dev-20220714091855