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

Comparing version 0.81.1 to 0.81.2

dist/index.d.ts

@@ -63,2 +63,24 @@ import { JSX, Nullable, MaybeFn } from '@zag-js/types';
 
+interface DescriptorOptions {
+    type?: "HTMLInputElement" | "HTMLTextAreaElement" | "HTMLSelectElement" | undefined;
+    property?: "value" | "checked" | undefined;
+}
+declare function setElementValue(el: HTMLElement, value: string, option?: DescriptorOptions): void;
+declare function setElementChecked(el: HTMLElement, checked: boolean): void;
+interface InputValueEventOptions {
+    value: string | number;
+    bubbles?: boolean;
+}
+declare function dispatchInputValueEvent(el: HTMLElement | null, options: InputValueEventOptions): void;
+interface CheckedEventOptions {
+    checked: boolean;
+    bubbles?: boolean;
+}
+declare function dispatchInputCheckedEvent(el: HTMLElement | null, options: CheckedEventOptions): void;
+interface TrackFormControlOptions {
+    onFieldsetDisabledChange: (disabled: boolean) => void;
+    onFormReset: () => void;
+}
+declare function trackFormControl(el: HTMLElement | null, options: TrackFormControlOptions): (() => void) | undefined;
+
 interface InitialFocusOptions {
@@ -337,2 +359,2 @@ root: HTMLElement | null;
 
-export { type DataUrlOptions, type DataUrlType, type DisableTextSelectionOptions, type InitialFocusOptions, type ItemToId, MAX_Z_INDEX, type ObserveAttributeOptions, type ObserveChildrenOptions, type OverflowAncestor, type PercentValueOptions, type PointerMoveDetails, type PointerMoveHandlers, type PressDetails, type ProxyTabFocusOptions, type ScopeContext, type ScrollOptions, type ScrollPosition, type SearchableItem, type TrackPressOptions, type TypeaheadOptions, type TypeaheadState, type ViewportSize, addDomEvent, ariaAttr, clickIfLink, contains, createScope, dataAttr, defaultItemToId, disableTextSelection, getActiveElement, getBeforeInputValue, getByText, getByTypeahead, getComputedStyle, getDataUrl, getDocument, getDocumentElement, getEventKey, getEventPoint, getEventStep, getEventTarget, getFirstFocusable, getFirstTabbable, getFocusables, getInitialFocus, getLastTabbable, getNativeEvent, getNearestOverflowAncestor, getNextTabbable, getNodeName, getOverflowAncestors, getParentNode, getPlatform, getRelativePoint, getScrollPosition, getTabIndex, getTabbableEdges, getTabbables, getUserAgent, getWindow, indexOfId, isAnchorElement, isAndroid, isApple, isComposingEvent, isContextMenuEvent, isDocument, isDom, isDownloadingEvent, isEditableElement, isElementVisible, isFirefox, isFocusable, isHTMLElement, isInView, isInputElement, isIos, isKeyboardClick, isLeftClick, isMac, isModifierKey, isNode, isOpeningInNewTab, isOverflowElement, isPrintableKey, isRootElement, isSafari, isSelfTarget, isShadowRoot, isTabbable, isTouchDevice, isTouchEvent, isValidTabEvent, isVirtualClick, isVirtualPointerEvent, isVisualViewport, isWebKit, isWindow, itemById, nextById, nextTick, observeAttributes, observeChildren, prevById, proxyTabFocus, query, queryAll, queueBeforeEvent, raf, requestPointerLock, restoreTextSelection, scrollIntoView, setAttribute, setProperty, setStyle, setVisuallyHidden, trackPointerMove, trackPress, trackVisualViewport, visuallyHiddenStyle, waitForElement, waitForElements };
+export { type CheckedEventOptions, type DataUrlOptions, type DataUrlType, type DisableTextSelectionOptions, type InitialFocusOptions, type InputValueEventOptions, type ItemToId, MAX_Z_INDEX, type ObserveAttributeOptions, type ObserveChildrenOptions, type OverflowAncestor, type PercentValueOptions, type PointerMoveDetails, type PointerMoveHandlers, type PressDetails, type ProxyTabFocusOptions, type ScopeContext, type ScrollOptions, type ScrollPosition, type SearchableItem, type TrackFormControlOptions, type TrackPressOptions, type TypeaheadOptions, type TypeaheadState, type ViewportSize, addDomEvent, ariaAttr, clickIfLink, contains, createScope, dataAttr, defaultItemToId, disableTextSelection, dispatchInputCheckedEvent, dispatchInputValueEvent, getActiveElement, getBeforeInputValue, getByText, getByTypeahead, getComputedStyle, getDataUrl, getDocument, getDocumentElement, getEventKey, getEventPoint, getEventStep, getEventTarget, getFirstFocusable, getFirstTabbable, getFocusables, getInitialFocus, getLastTabbable, getNativeEvent, getNearestOverflowAncestor, getNextTabbable, getNodeName, getOverflowAncestors, getParentNode, getPlatform, getRelativePoint, getScrollPosition, getTabIndex, getTabbableEdges, getTabbables, getUserAgent, getWindow, indexOfId, isAnchorElement, isAndroid, isApple, isComposingEvent, isContextMenuEvent, isDocument, isDom, isDownloadingEvent, isEditableElement, isElementVisible, isFirefox, isFocusable, isHTMLElement, isInView, isInputElement, isIos, isKeyboardClick, isLeftClick, isMac, isModifierKey, isNode, isOpeningInNewTab, isOverflowElement, isPrintableKey, isRootElement, isSafari, isSelfTarget, isShadowRoot, isTabbable, isTouchDevice, isTouchEvent, isValidTabEvent, isVirtualClick, isVirtualPointerEvent, isVisualViewport, isWebKit, isWindow, itemById, nextById, nextTick, observeAttributes, observeChildren, prevById, proxyTabFocus, query, queryAll, queueBeforeEvent, raf, requestPointerLock, restoreTextSelection, scrollIntoView, setAttribute, setElementChecked, setElementValue, setProperty, setStyle, setVisuallyHidden, trackFormControl, trackPointerMove, trackPress, trackVisualViewport, visuallyHiddenStyle, waitForElement, waitForElements };

dist/index.js

@@ -277,2 +277,70 @@ 'use strict';
 
+// src/form.ts
+function getDescriptor(el, options) {
+  const { type = "HTMLInputElement", property = "value" } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function setElementValue(el, value, option = {}) {
+  const descriptor = getDescriptor(el, option);
+  descriptor.set?.call(el, value);
+  el.setAttribute("value", value);
+}
+function setElementChecked(el, checked) {
+  const descriptor = getDescriptor(el, { type: "HTMLInputElement", property: "checked" });
+  descriptor.set?.call(el, checked);
+  if (checked) el.setAttribute("checked", "");
+  else el.removeAttribute("checked");
+}
+function dispatchInputValueEvent(el, options) {
+  const { value, bubbles = true } = options;
+  if (!el) return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement)) return;
+  setElementValue(el, `${value}`);
+  el.dispatchEvent(new win.Event("input", { bubbles }));
+}
+function dispatchInputCheckedEvent(el, options) {
+  const { checked, bubbles = true } = options;
+  if (!el) return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement)) return;
+  setElementChecked(el, checked);
+  el.dispatchEvent(new win.Event("click", { bubbles }));
+}
+function getClosestForm(el) {
+  return isFormElement(el) ? el.form : el.closest("form");
+}
+function isFormElement(el) {
+  return el.matches("textarea, input, select, button");
+}
+function trackFormReset(el, callback) {
+  if (!el) return;
+  const form = getClosestForm(el);
+  const onReset = (e) => {
+    if (e.defaultPrevented) return;
+    callback();
+  };
+  form?.addEventListener("reset", onReset, { passive: true });
+  return () => form?.removeEventListener("reset", onReset);
+}
+function trackFieldsetDisabled(el, callback) {
+  const fieldset = el?.closest("fieldset");
+  if (!fieldset) return;
+  callback(fieldset.disabled);
+  const win = getWindow(fieldset);
+  const obs = new win.MutationObserver(() => callback(fieldset.disabled));
+  obs.observe(fieldset, {
+    attributes: true,
+    attributeFilter: ["disabled"]
+  });
+  return () => obs.disconnect();
+}
+function trackFormControl(el, options) {
+  if (!el) return;
+  const { onFieldsetDisabledChange, onFormReset } = options;
+  const cleanups2 = [trackFormReset(el, onFormReset), trackFieldsetDisabled(el, onFieldsetDisabledChange)];
+  return () => cleanups2.forEach((cleanup) => cleanup?.());
+}
+
 // src/tabbable.ts
@@ -1028,2 +1096,4 @@ var isFrame = (el) => isHTMLElement(el) && el.tagName === "IFRAME";
 exports.disableTextSelection = disableTextSelection;
+exports.dispatchInputCheckedEvent = dispatchInputCheckedEvent;
+exports.dispatchInputValueEvent = dispatchInputValueEvent;
 exports.getActiveElement = getActiveElement;
@@ -1113,5 +1183,8 @@ exports.getBeforeInputValue = getBeforeInputValue;
 exports.setAttribute = setAttribute;
+exports.setElementChecked = setElementChecked;
+exports.setElementValue = setElementValue;
 exports.setProperty = setProperty;
 exports.setStyle = setStyle;
 exports.setVisuallyHidden = setVisuallyHidden;
+exports.trackFormControl = trackFormControl;
 exports.trackPointerMove = trackPointerMove;
@@ -1118,0 +1191,0 @@ exports.trackPress = trackPress;

package.json

 {
   "name": "@zag-js/dom-query",
-  "version": "0.81.1",
+  "version": "0.81.2",
   "description": "The dom helper library for zag.js machines",
@@ -31,3 +31,3 @@ "keywords": [
   "dependencies": {
-    "@zag-js/types": "0.81.1"
+    "@zag-js/types": "0.81.2"
   },
@@ -34,0 +34,0 @@ "module": "dist/index.mjs",

No alert changes

Improved metrics

Total package byte prevSize

117913

increased by6.77%

Lines of code

2564

increased by6.66%

Dependency changes

• + Added@zag-js/types@0.81.2(transitive)

• - Removed@zag-js/types@0.81.1(transitive)

• Updated@zag-js/types@0.81.2