@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.js CHANGED
@@ -230,48 +230,50 @@ function dispatchInputValueEvent(el, value) {
230
230
  const event = new win.Event("input", { bubbles: true });
231
231
  el.dispatchEvent(event);
232
232
  }
233
- function trackInputPropertyMutation(el, options) {
234
- const { fn, property, type } = options;
235
- if (!fn || !el)
236
- return;
237
- const { get, set } = getDescriptor(el, { property, type });
238
- let run = true;
239
- Object.defineProperty(el, property, {
240
- get() {
241
- return get == null ? void 0 : get.call(this);
242
- },
243
- set(value) {
244
- if (run)
245
- fn(value);
246
- return set == null ? void 0 : set.call(this, value);
247
- }
248
- });
249
- return function() {
250
- run = false;
251
- };
252
- }
253
233
  function getNativeEvent(event) {
254
234
  var _a;
255
235
  return (_a = event.nativeEvent) != null ? _a : event;
256
236
  }
257
- function getClosestFormElement(el) {
237
+ function observeAttributes(node, attributes, fn) {
238
+ if (!node)
239
+ return noop;
240
+ const attrs = Array.isArray(attributes) ? attributes : [attributes];
241
+ const win = node.ownerDocument.defaultView || window;
242
+ const obs = new win.MutationObserver((changes) => {
243
+ for (const change of changes) {
244
+ if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
245
+ fn(change);
246
+ }
247
+ }
248
+ });
249
+ obs.observe(node, { attributes: true, attributeFilter: attrs });
250
+ return () => obs.disconnect();
251
+ }
252
+ function getClosestForm(el) {
258
253
  if (isFormElement(el))
259
254
  return el.form;
260
255
  else
261
256
  return el.closest("form");
262
257
  }
263
258
  function isFormElement(el) {
264
- return ["textarea", "input", "select", "button"].includes(el.localName);
259
+ return el.matches("textarea, input, select, button");
265
260
  }
266
261
  function trackFormReset(el, callback) {
267
262
  if (!el)
268
263
  return;
269
- const form = getClosestFormElement(el);
264
+ const form = getClosestForm(el);
270
265
  form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
271
266
  return () => {
272
267
  form == null ? void 0 : form.removeEventListener("reset", callback);
273
268
  };
274
269
  }
270
+ function trackFieldsetDisabled(el, callback) {
271
+ const fieldset = el == null ? void 0 : el.closest("fieldset");
272
+ if (!fieldset)
273
+ return;
274
+ callback(fieldset.disabled);
275
+ return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
276
+ }
275
277
  var rtlKeyMap = {
276
278
  ArrowLeft: "ArrowRight",
277
279
  ArrowRight: "ArrowLeft",
@@ -628,6 +630,7 @@ var dom = {
628
630
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.uid}:label`;
629
631
  },
630
632
  getMarkerId: (ctx, value) => `slider:${ctx.uid}:marker:${value}`,
633
+ getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
631
634
  getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
632
635
  getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
633
636
  getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
@@ -670,7 +673,11 @@ var dom = {
670
673
 
671
674
  // ../../types/dist/index.mjs
672
675
  function createNormalizer(fn) {
673
- return { button: fn, label: fn, input: fn, output: fn, element: fn };
676
+ return new Proxy({}, {
677
+ get() {
678
+ return fn;
679
+ }
680
+ });
674
681
  }
675
682
  var normalizeProp = createNormalizer((v) => v);
676
683
 
@@ -920,7 +927,7 @@ function machine(ctx = {}) {
920
927
  watch: {
921
928
  value: ["invokeOnChange", "dispatchChangeEvent"]
922
929
  },
923
- activities: ["trackFormReset", "trackScriptedUpdate"],
930
+ activities: ["trackFormReset", "trackFieldsetDisabled"],
924
931
  on: {
925
932
  SET_VALUE: {
926
933
  actions: "setValue"
@@ -1008,17 +1015,12 @@ function machine(ctx = {}) {
1008
1015
  isVertical: (ctx2) => ctx2.isVertical
1009
1016
  },
1010
1017
  activities: {
1011
- trackScriptedUpdate(ctx2, _, { send }) {
1018
+ trackFieldsetDisabled(ctx2) {
1012
1019
  let cleanup;
1013
1020
  nextTick(() => {
1014
- const el = dom.getInputEl(ctx2);
1015
- if (!el)
1016
- return;
1017
- cleanup = trackInputPropertyMutation(el, {
1018
- type: "input",
1019
- property: "value",
1020
- fn(value) {
1021
- send({ type: "SET_VALUE", value: parseFloat(value) });
1021
+ cleanup = trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
1022
+ if (disabled != ctx2.disabled) {
1023
+ ctx2.disabled = disabled;
1022
1024
  }
1023
1025
  });
1024
1026
  });
@@ -1027,15 +1029,13 @@ function machine(ctx = {}) {
1027
1029
  trackFormReset(ctx2) {
1028
1030
  let cleanup;
1029
1031
  nextTick(() => {
1030
- const el = dom.getInputEl(ctx2);
1031
- if (!el)
1032
- return;
1033
- cleanup = trackFormReset(el, () => {
1034
- if (ctx2.initialValue != null)
1032
+ cleanup = trackFormReset(dom.getInputEl(ctx2), () => {
1033
+ if (ctx2.initialValue != null) {
1035
1034
  ctx2.value = ctx2.initialValue;
1035
+ }
1036
1036
  });
1037
1037
  });
1038
- return cleanup;
1038
+ return () => cleanup == null ? void 0 : cleanup();
1039
1039
  },
1040
1040
  trackPointerMove(ctx2, _evt, { send }) {
1041
1041
  return trackPointerMove({
@@ -1091,7 +1091,7 @@ function machine(ctx = {}) {
1091
1091
  ctx2.value = utils.clamp(ctx2, value);
1092
1092
  },
1093
1093
  focusThumb(ctx2) {
1094
- nextTick(() => {
1094
+ raf(() => {
1095
1095
  var _a;
1096
1096
  return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
1097
1097
  });