@zag-js/slider 0.1.3 → 0.1.6

package/dist/index.mjs

@@ -188,10 +188,6 @@ function getOwnerWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
-function getNativeEvent(event) {
-  var _a;
-  return (_a = event.nativeEvent) != null ? _a : event;
-}
 function getDescriptor(el, options) {
   var _a;
   const { type, property } = options;
@@ -210,44 +206,50 @@ function dispatchInputValueEvent(el, value) {
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
-function trackInputPropertyMutation(el, options) {
-  const { fn, property, type } = options;
-  if (!fn || !el)
-    return;
-  const { get, set } = getDescriptor(el, { property, type });
-  let run = true;
-  Object.defineProperty(el, property, {
-    get() {
-      return get == null ? void 0 : get.call(this);
-    },
-    set(value) {
-      if (run)
-        fn(value);
-      return set == null ? void 0 : set.call(this, value);
+function getNativeEvent(event) {
+  var _a;
+  return (_a = event.nativeEvent) != null ? _a : event;
+}
+function observeAttributes(node, attributes, fn) {
+  if (!node)
+    return noop;
+  const attrs = Array.isArray(attributes) ? attributes : [attributes];
+  const win = node.ownerDocument.defaultView || window;
+  const obs = new win.MutationObserver((changes) => {
+    for (const change of changes) {
+      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
+        fn(change);
+      }
     }
   });
-  return function() {
-    run = false;
-  };
+  obs.observe(node, { attributes: true, attributeFilter: attrs });
+  return () => obs.disconnect();
 }
-function getClosestFormElement(el) {
+function getClosestForm(el) {
   if (isFormElement(el))
     return el.form;
   else
     return el.closest("form");
 }
 function isFormElement(el) {
-  return ["textarea", "input", "select", "button"].includes(el.localName);
+  return el.matches("textarea, input, select, button");
 }
 function trackFormReset(el, callback) {
   if (!el)
     return;
-  const form = getClosestFormElement(el);
+  const form = getClosestForm(el);
   form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
   return () => {
     form == null ? void 0 : form.removeEventListener("reset", callback);
   };
 }
+function trackFieldsetDisabled(el, callback) {
+  const fieldset = el == null ? void 0 : el.closest("fieldset");
+  if (!fieldset)
+    return;
+  callback(fieldset.disabled);
+  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
+}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -403,10 +405,6 @@ findByTypeahead.defaultOptions = {
 
 // ../../utilities/number/dist/index.mjs
 var __pow2 = Math.pow;
-var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
-function formatter(n) {
-  return parseFloat(nf.format(n));
-}
 function round(v, t2) {
   let num = valueOf(v);
   const p = __pow2(10, t2 != null ? t2 : 10);
@@ -421,17 +419,15 @@ function clamp(v, o) {
 function countDecimals(value) {
   if (!Number.isFinite(value))
     return 0;
-  let e = 1;
-  let p = 0;
+  let e = 1, p = 0;
   while (Math.round(value * e) / e !== value) {
     e *= 10;
     p += 1;
   }
   return p;
 }
-var increment = (v, s) => formatter(valueOf(v) + s);
-var decrement = (v, s) => formatter(valueOf(v) - s);
-var multiply = (v, s) => formatter(valueOf(v) * s);
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
 function snapToStep(value, step) {
   const num = valueOf(value);
   const p = countDecimals(step);
@@ -444,6 +440,18 @@ function valueOf(v) {
   const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
   return !Number.isNaN(num) ? num : 0;
 }
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+}
+var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 var transform = (a, b) => {
   const i = { min: a[0], max: a[1] };
   const o = { min: b[0], max: b[1] };
@@ -564,6 +572,10 @@ var dom = {
     var _a;
     return (_a = ctx.doc) != null ? _a : document;
   },
+  getRootNode: (ctx) => {
+    var _a;
+    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
+  },
   getRootId: (ctx) => {
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.uid}`;
@@ -594,9 +606,10 @@ var dom = {
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.uid}:label`;
   },
   getMarkerId: (ctx, value) => `slider:${ctx.uid}:marker:${value}`,
-  getThumbEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getControlId(ctx)),
-  getInputEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getInputId(ctx)),
+  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
+  getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
+  getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
+  getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
   getControlStyle,
   getThumbStyle,
   getRangeStyle,
@@ -636,7 +649,11 @@ var dom = {
 
 // ../../types/dist/index.mjs
 function createNormalizer(fn) {
-  return { button: fn, label: fn, input: fn, output: fn, element: fn };
+  return new Proxy({}, {
+    get() {
+      return fn;
+    }
+  });
 }
 var normalizeProp = createNormalizer((v) => v);
 
@@ -732,7 +749,7 @@ function connect(state2, send, normalize = normalizeProp) {
       onKeyDown(event) {
         if (!isInteractive)
           return;
-        const step = multiply(getEventStep(event), state2.context.step);
+        const step = getEventStep(event) * state2.context.step;
         let prevent = true;
         const keyMap = {
           ArrowUp() {
@@ -886,7 +903,7 @@ function machine(ctx = {}) {
     watch: {
       value: ["invokeOnChange", "dispatchChangeEvent"]
     },
-    activities: ["trackFormReset", "trackScriptedUpdate"],
+    activities: ["trackFormReset", "trackFieldsetDisabled"],
     on: {
       SET_VALUE: {
         actions: "setValue"
@@ -974,17 +991,12 @@ function machine(ctx = {}) {
       isVertical: (ctx2) => ctx2.isVertical
     },
     activities: {
-      trackScriptedUpdate(ctx2, _, { send }) {
+      trackFieldsetDisabled(ctx2) {
         let cleanup;
         nextTick(() => {
-          const el = dom.getInputEl(ctx2);
-          if (!el)
-            return;
-          cleanup = trackInputPropertyMutation(el, {
-            type: "input",
-            property: "value",
-            fn(value) {
-              send({ type: "SET_VALUE", value: parseFloat(value) });
+          cleanup = trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
+            if (disabled != ctx2.disabled) {
+              ctx2.disabled = disabled;
             }
           });
         });
@@ -993,15 +1005,13 @@ function machine(ctx = {}) {
       trackFormReset(ctx2) {
         let cleanup;
         nextTick(() => {
-          const el = dom.getInputEl(ctx2);
-          if (!el)
-            return;
-          cleanup = trackFormReset(el, () => {
-            if (ctx2.initialValue != null)
+          cleanup = trackFormReset(dom.getInputEl(ctx2), () => {
+            if (ctx2.initialValue != null) {
               ctx2.value = ctx2.initialValue;
+            }
           });
         });
-        return cleanup;
+        return () => cleanup == null ? void 0 : cleanup();
       },
       trackPointerMove(ctx2, _evt, { send }) {
         return trackPointerMove({
@@ -1019,6 +1029,8 @@ function machine(ctx = {}) {
       setupDocument(ctx2, evt) {
         if (evt.doc)
           ctx2.doc = ref(evt.doc);
+        if (evt.root)
+          ctx2.rootNode = ref(evt.root);
         ctx2.uid = evt.id;
       },
       checkValue(ctx2) {
@@ -1055,7 +1067,7 @@ function machine(ctx = {}) {
         ctx2.value = utils.clamp(ctx2, value);
       },
       focusThumb(ctx2) {
-        nextTick(() => {
+        raf(() => {
           var _a;
           return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
         });