@zag-js/slider 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -206,48 +206,50 @@ function dispatchInputValueEvent(el, value) {
206
206
  const event = new win.Event("input", { bubbles: true });
207
207
  el.dispatchEvent(event);
208
208
  }
209
- function trackInputPropertyMutation(el, options) {
210
- const { fn, property, type } = options;
211
- if (!fn || !el)
212
- return;
213
- const { get, set } = getDescriptor(el, { property, type });
214
- let run = true;
215
- Object.defineProperty(el, property, {
216
- get() {
217
- return get == null ? void 0 : get.call(this);
218
- },
219
- set(value) {
220
- if (run)
221
- fn(value);
222
- return set == null ? void 0 : set.call(this, value);
223
- }
224
- });
225
- return function() {
226
- run = false;
227
- };
228
- }
229
209
  function getNativeEvent(event) {
230
210
  var _a;
231
211
  return (_a = event.nativeEvent) != null ? _a : event;
232
212
  }
233
- function getClosestFormElement(el) {
213
+ function observeAttributes(node, attributes, fn) {
214
+ if (!node)
215
+ return noop;
216
+ const attrs = Array.isArray(attributes) ? attributes : [attributes];
217
+ const win = node.ownerDocument.defaultView || window;
218
+ const obs = new win.MutationObserver((changes) => {
219
+ for (const change of changes) {
220
+ if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
221
+ fn(change);
222
+ }
223
+ }
224
+ });
225
+ obs.observe(node, { attributes: true, attributeFilter: attrs });
226
+ return () => obs.disconnect();
227
+ }
228
+ function getClosestForm(el) {
234
229
  if (isFormElement(el))
235
230
  return el.form;
236
231
  else
237
232
  return el.closest("form");
238
233
  }
239
234
  function isFormElement(el) {
240
- return ["textarea", "input", "select", "button"].includes(el.localName);
235
+ return el.matches("textarea, input, select, button");
241
236
  }
242
237
  function trackFormReset(el, callback) {
243
238
  if (!el)
244
239
  return;
245
- const form = getClosestFormElement(el);
240
+ const form = getClosestForm(el);
246
241
  form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
247
242
  return () => {
248
243
  form == null ? void 0 : form.removeEventListener("reset", callback);
249
244
  };
250
245
  }
246
+ function trackFieldsetDisabled(el, callback) {
247
+ const fieldset = el == null ? void 0 : el.closest("fieldset");
248
+ if (!fieldset)
249
+ return;
250
+ callback(fieldset.disabled);
251
+ return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
252
+ }
251
253
  var rtlKeyMap = {
252
254
  ArrowLeft: "ArrowRight",
253
255
  ArrowRight: "ArrowLeft",
@@ -604,6 +606,7 @@ var dom = {
604
606
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.uid}:label`;
605
607
  },
606
608
  getMarkerId: (ctx, value) => `slider:${ctx.uid}:marker:${value}`,
609
+ getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
607
610
  getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
608
611
  getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
609
612
  getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
@@ -646,7 +649,11 @@ var dom = {
646
649
 
647
650
  // ../../types/dist/index.mjs
648
651
  function createNormalizer(fn) {
649
- return { button: fn, label: fn, input: fn, output: fn, element: fn };
652
+ return new Proxy({}, {
653
+ get() {
654
+ return fn;
655
+ }
656
+ });
650
657
  }
651
658
  var normalizeProp = createNormalizer((v) => v);
652
659
 
@@ -896,7 +903,7 @@ function machine(ctx = {}) {
896
903
  watch: {
897
904
  value: ["invokeOnChange", "dispatchChangeEvent"]
898
905
  },
899
- activities: ["trackFormReset", "trackScriptedUpdate"],
906
+ activities: ["trackFormReset", "trackFieldsetDisabled"],
900
907
  on: {
901
908
  SET_VALUE: {
902
909
  actions: "setValue"
@@ -984,17 +991,12 @@ function machine(ctx = {}) {
984
991
  isVertical: (ctx2) => ctx2.isVertical
985
992
  },
986
993
  activities: {
987
- trackScriptedUpdate(ctx2, _, { send }) {
994
+ trackFieldsetDisabled(ctx2) {
988
995
  let cleanup;
989
996
  nextTick(() => {
990
- const el = dom.getInputEl(ctx2);
991
- if (!el)
992
- return;
993
- cleanup = trackInputPropertyMutation(el, {
994
- type: "input",
995
- property: "value",
996
- fn(value) {
997
- send({ type: "SET_VALUE", value: parseFloat(value) });
997
+ cleanup = trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
998
+ if (disabled != ctx2.disabled) {
999
+ ctx2.disabled = disabled;
998
1000
  }
999
1001
  });
1000
1002
  });
@@ -1003,15 +1005,13 @@ function machine(ctx = {}) {
1003
1005
  trackFormReset(ctx2) {
1004
1006
  let cleanup;
1005
1007
  nextTick(() => {
1006
- const el = dom.getInputEl(ctx2);
1007
- if (!el)
1008
- return;
1009
- cleanup = trackFormReset(el, () => {
1010
- if (ctx2.initialValue != null)
1008
+ cleanup = trackFormReset(dom.getInputEl(ctx2), () => {
1009
+ if (ctx2.initialValue != null) {
1011
1010
  ctx2.value = ctx2.initialValue;
1011
+ }
1012
1012
  });
1013
1013
  });
1014
- return cleanup;
1014
+ return () => cleanup == null ? void 0 : cleanup();
1015
1015
  },
1016
1016
  trackPointerMove(ctx2, _evt, { send }) {
1017
1017
  return trackPointerMove({
@@ -1067,7 +1067,7 @@ function machine(ctx = {}) {
1067
1067
  ctx2.value = utils.clamp(ctx2, value);
1068
1068
  },
1069
1069
  focusThumb(ctx2) {
1070
- nextTick(() => {
1070
+ raf(() => {
1071
1071
  var _a;
1072
1072
  return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
1073
1073
  });