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

Comparing version 0.0.0-dev-20220628115342 to 0.0.0-dev-20220703123907

dist/fire-event.d.ts

 export declare function fireEvent(el: Element, type: string, init?: EventInit): boolean;
-export declare function fireCustomEvent(el: Element, type: string, init?: CustomEventInit): boolean;
+export declare function fireCustomEvent(el: Element | null, type: string, init?: CustomEventInit): boolean;
 export declare function fireBlurEvent(el: Element, init?: FocusEventInit): boolean;
 export declare function fireKeyboardEvent(el: Element, type: string, init?: KeyboardEventInit): boolean;
 export declare function fireClickEvent(el: Element, init?: PointerEventInit): boolean;

dist/focusable.d.ts

@@ -0,18 +1,22 @@
+declare type IncludeContainerType = boolean | "if-empty";
 export declare const focusableSelector: string;
-export declare function isHidden(el: HTMLElement | null, until?: HTMLElement): boolean;
 /**
  * Returns the focusable elements within the element
  */
-export declare const getFocusables: (el: HTMLElement | Document | null, includeContainer?: boolean | "if-empty") => HTMLElement[];
+export declare const getFocusables: (container: Pick<HTMLElement, "querySelectorAll"> | null, includeContainer?: IncludeContainerType) => HTMLElement[];
 /**
  * Whether this element is focusable
  */
-export declare const isFocusable: (el: HTMLElement | null) => boolean;
+export declare function isFocusable(element: HTMLElement | null): element is HTMLElement;
+export declare function getFirstFocusable(container: HTMLElement, includeContainer?: IncludeContainerType): HTMLElement;
 /**
  * Returns the tabbable elements within the element
  */
-export declare const getTabbables: (el: HTMLElement | Document | null, includeContainer?: boolean | "if-empty") => HTMLElement[];
+export declare function getTabbables(container: HTMLElement | null, includeContainer?: IncludeContainerType): HTMLElement[];
 /**
  * Whether this element is tabbable
  */
-export declare const isTabbable: (el: HTMLElement | null) => boolean;
+export declare function isTabbable(el: HTMLElement | null): el is HTMLElement;
+export declare function getFirstTabbable(container: HTMLElement | null, includeContainer?: IncludeContainerType): HTMLElement;
+export declare function getLastTabbable(container: HTMLElement | null, includeContainer?: IncludeContainerType): HTMLElement;
+export {};

dist/index.js

@@ -54,2 +54,5 @@ "use strict";
   dispatchInputValueEvent: () => dispatchInputValueEvent,
+  disposable: () => disposable,
+  disposableNextTick: () => disposableNextTick,
+  disposableRaf: () => disposableRaf,
   extractClientInfo: () => extractClientInfo,
@@ -69,2 +72,3 @@ extractInfo: () => extractInfo,
   getComputedStyle: () => getComputedStyle,
+  getDocument: () => getDocument,
   getDocumentElement: () => getDocumentElement,
@@ -78,7 +82,8 @@ getElementOffset: () => getElementOffset,
   getEventWindow: () => getEventWindow,
+  getFirstFocusable: () => getFirstFocusable,
+  getFirstTabbable: () => getFirstTabbable,
   getFocusables: () => getFocusables,
+  getLastTabbable: () => getLastTabbable,
   getNativeEvent: () => getNativeEvent,
   getNodeName: () => getNodeName,
-  getOwnerDocument: () => getOwnerDocument,
-  getOwnerWindow: () => getOwnerWindow,
   getParent: () => getParent,
@@ -90,2 +95,3 @@ getPointRelativeToNode: () => getPointRelativeToNode,
   getTabbables: () => getTabbables,
+  getWindow: () => getWindow,
   indexOfId: () => indexOfId,
@@ -95,4 +101,4 @@ isDisabled: () => isDisabled,
   isFocusable: () => isFocusable,
+  isFrame: () => isFrame,
   isHTMLElement: () => isHTMLElement,
-  isHidden: () => isHidden,
   isKeyboardClick: () => isKeyboardClick,
@@ -106,2 +112,3 @@ isNativeDisabled: () => isNativeDisabled,
   isTabbable: () => isTabbable,
+  isVisible: () => isVisible,
   isWindow: () => isWindow,
@@ -275,2 +282,23 @@ isWithinShadowRoot: () => isWithinShadowRoot,
 }
+function disposable(type, fn) {
+  let cleanup;
+  let dispose;
+  if (type) {
+    dispose = type(() => {
+      cleanup = fn();
+    });
+  } else {
+    cleanup = fn();
+  }
+  return () => {
+    cleanup == null ? void 0 : cleanup();
+    dispose == null ? void 0 : dispose();
+  };
+}
+function disposableRaf(fn) {
+  return disposable(raf, fn);
+}
+function disposableNextTick(fn) {
+  return disposable(nextTick, fn);
+}
 
@@ -376,6 +404,9 @@ // src/body-pointer-event.ts
 }
+function isFrame(element) {
+  return element.localName === "iframe";
+}
 var isWithinShadowRoot = (node) => {
   return isShadowRoot(node.getRootNode());
 };
-function getOwnerDocument(el) {
+function getDocument(el) {
   var _a;
@@ -386,3 +417,3 @@ if (isWindow(el))
 }
-function getOwnerWindow(el) {
+function getWindow(el) {
   var _a;
@@ -392,6 +423,7 @@ return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 function getDocumentElement(el) {
-  return getOwnerDocument(el).documentElement;
+  return getDocument(el).documentElement;
 }
 function getNodeName(node) {
-  return isWindow(node) ? "" : node ? node.localName || "" : "";
+  var _a;
+  return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
 }
@@ -403,3 +435,3 @@ function getEventWindow(event) {
   if (target != null)
-    return getOwnerWindow(target);
+    return getWindow(target);
   return window;
@@ -412,3 +444,3 @@ }
 function getActiveElement(el) {
-  let activeElement = getOwnerDocument(el).activeElement;
+  let activeElement = getDocument(el).activeElement;
   while (activeElement && activeElement.shadowRoot) {
@@ -429,6 +461,6 @@ const el2 = activeElement.shadowRoot.activeElement;
     return null;
-  return getOwnerDocument(node).getElementById(id);
+  return getDocument(node).getElementById(id);
 }
 function getParent(el) {
-  const doc = getOwnerDocument(el);
+  const doc = getDocument(el);
   if (getNodeName(el) === "html")
@@ -453,7 +485,12 @@ return el;
   try {
-    return el instanceof getOwnerWindow(el).HTMLInputElement && el.selectionStart != null || /(textarea|select)/.test(el.localName) || el.isContentEditable;
-  } catch (error) {
+    return el instanceof getWindow(el).HTMLInputElement && el.selectionStart != null || /(textarea|select)/.test(el.localName) || el.isContentEditable;
+  } catch (e) {
     return false;
   }
 }
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
 
@@ -484,2 +521,4 @@ // src/event.ts
 function fireCustomEvent(el, type, init) {
+  if (!el)
+    return;
   const event = new CustomEvent(type, init);
@@ -513,55 +552,64 @@ return el.dispatchEvent(event);
 // src/focusable.ts
-var focusableSelector = /* @__PURE__ */ [
-  "input:not([disabled]):not([type=hidden])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "button:not([disabled])",
-  "embed",
-  "iframe",
-  "object",
-  "a[href]",
-  "area[href]",
-  "[tabindex]",
-  "audio[controls]",
-  "video[controls]",
-  "*[tabindex]:not([aria-disabled])",
-  "[contenteditable]:not([contenteditable=false])",
-  "details > summary:first-of-type"
-].join(",");
-function isHidden(el, until) {
-  const style = getComputedStyle(el);
-  if (!el || style.getPropertyValue("visibility") === "hidden")
-    return true;
-  while (el) {
-    if (until != null && el === until)
-      return false;
-    if (style.getPropertyValue("display") === "none")
-      return true;
-    el = el.parentElement;
-  }
-  return false;
+function hasNegativeTabIndex(element) {
+  const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
+  return tabIndex < 0;
 }
-var getFocusables = (el, includeContainer = false) => {
-  if (!el)
+var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+var getFocusables = (container, includeContainer = false) => {
+  if (!container)
     return [];
-  let els = Array.from(el.querySelectorAll(focusableSelector));
-  const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
-  if (shouldAddContainer && isHTMLElement(el)) {
-    els.unshift(el);
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
   }
-  return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
+  const focusableElements = elements.filter(isFocusable);
+  focusableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.splice(i, 1, ...getFocusables(frameBody));
+    }
+  });
+  return focusableElements;
 };
-var isFocusable = (el) => {
-  if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
+function isFocusable(element) {
+  if (!element)
     return false;
-  return el == null ? void 0 : el.matches(focusableSelector);
-};
-var getTabbables = (el, includeContainer = false) => {
-  if (!el)
+  return element.matches(focusableSelector) && isVisible(element);
+}
+function getFirstFocusable(container, includeContainer) {
+  const [first] = getFocusables(container, includeContainer);
+  return first || null;
+}
+function getTabbables(container, includeContainer) {
+  if (!container)
     return [];
-  return getFocusables(el, includeContainer).filter(isTabbable);
-};
-var isTabbable = (el) => {
-  return isFocusable(el) && !isDisabled(el) && !isHidden(el);
-};
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const tabbableElements = elements.filter(isTabbable);
+  if (includeContainer && isTabbable(container)) {
+    tabbableElements.unshift(container);
+  }
+  tabbableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      const allFrameTabbable = getTabbables(frameBody);
+      tabbableElements.splice(i, 1, ...allFrameTabbable);
+    }
+  });
+  if (!tabbableElements.length && includeContainer) {
+    return elements;
+  }
+  return tabbableElements;
+}
+function isTabbable(el) {
+  return isFocusable(el) && !hasNegativeTabIndex(el);
+}
+function getFirstTabbable(container, includeContainer) {
+  const [first] = getTabbables(container, includeContainer);
+  return first || null;
+}
+function getLastTabbable(container, includeContainer) {
+  const elements = getTabbables(container, includeContainer);
+  return elements[elements.length - 1] || null;
+}
 
@@ -678,3 +726,3 @@ // src/mutation-observer.ts
   const { type, property } = options;
-  const proto = getOwnerWindow(el)[type].prototype;
+  const proto = getWindow(el)[type].prototype;
   return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
@@ -684,3 +732,3 @@ }
   var _a;
-  const win = getOwnerWindow(el);
+  const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
@@ -695,3 +743,3 @@ return;
   var _a;
-  const win = getOwnerWindow(el);
+  const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
@@ -1067,3 +1115,3 @@ return;
   if (["html", "body", "#document"].includes(getNodeName(el))) {
-    return getOwnerDocument(el).body;
+    return getDocument(el).body;
   }
@@ -1077,4 +1125,4 @@ if (isHTMLElement(el) && isScrollParent(el)) {
   const scrollParent = getScrollParent(el);
-  const isBody = scrollParent === getOwnerDocument(el).body;
-  const win = getOwnerWindow(scrollParent);
+  const isBody = scrollParent === getDocument(el).body;
+  const win = getWindow(scrollParent);
   const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
@@ -1081,0 +1129,0 @@ const parents = list.concat(target);

dist/keyboard-event.d.ts

@@ -15,3 +15,3 @@ import type { JSX } from "@zag-js/types";
  */
-export declare function getEventStep(event: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "key" | "shiftKey">): 1 | 0.1 | 10;
+export declare function getEventStep(event: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "key" | "shiftKey">): 1 | 10 | 0.1;
 export {};

dist/next-tick.d.ts

 export declare function nextTick(fn: VoidFunction): () => void;
 export declare function raf(fn: VoidFunction): () => void;
+declare type SchedulerFn = (fn: VoidFunction) => VoidFunction;
+declare type DisposableVoidFunction = () => VoidFunction | undefined | void;
+export declare function disposable(type: SchedulerFn | undefined, fn: DisposableVoidFunction): () => void;
+export declare function disposableRaf(fn: DisposableVoidFunction): () => void;
+export declare function disposableNextTick(fn: DisposableVoidFunction): () => void;
+export {};

dist/query.d.ts

 export declare function isShadowRoot(el: any): el is ShadowRoot;
 export declare function isWindow(value: any): value is Window;
+export declare function isFrame(element: Element): element is HTMLIFrameElement;
 export declare const isWithinShadowRoot: (node: HTMLElement) => boolean;
-export declare function getOwnerDocument(el: Element | Window | null): Document;
-export declare function getOwnerWindow(el: HTMLElement): Window & typeof globalThis;
+export declare function getDocument(el: Element | Window | null): Document;
+export declare function getWindow(el: HTMLElement): Window & typeof globalThis;
 export declare function getDocumentElement(el: HTMLElement | Window): HTMLElement;
-export declare function getNodeName(node: HTMLElement | Window): string;
+export declare function getNodeName(node: HTMLElement | Window | null): string;
 export declare function getEventWindow(event: UIEvent): Window;
@@ -17,1 +18,2 @@ export declare function getEventTarget<T extends EventTarget>(event: Event): T | null;
 export declare function isElementEditable(el: HTMLElement | null): boolean;
+export declare function isVisible(el: Element): boolean;

package.json

 {
   "name": "@zag-js/dom-utils",
-  "version": "0.0.0-dev-20220628115342",
+  "version": "0.0.0-dev-20220703123907",
   "description": "",
@@ -28,3 +28,3 @@ "keywords": [
   "dependencies": {
-    "@zag-js/types": "0.0.0-dev-20220628115342",
+    "@zag-js/types": "0.0.0-dev-20220703123907",
     "@zag-js/utils": "0.1.2"
@@ -31,0 +31,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

91091

increased by5.19%

Lines of code

2661

increased by4.31%

Dependency changes

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

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

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