@zag-js/splitter 0.1.9 → 0.1.12

package/dist/index.mjs

@@ -1,28 +1,10 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
 // ../../utilities/dom/dist/index.mjs
-var __pow = Math.pow;
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var callAll = (...fns) => (...a) => {
   fns.forEach(function(fn) {
@@ -34,15 +16,43 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => isApple() && !isMac();
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
 var supportsMouseEvent = () => isDom() && window.onmousedown === null;
@@ -93,10 +103,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -133,8 +142,7 @@ function addDomEvent(target, eventName, handler, options) {
   };
 }
 function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
+  const type = getEventName(event) ?? event;
   return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
 }
 function wrapHandler(fn, filter = false) {
@@ -145,8 +153,7 @@ function wrapHandler(fn, filter = false) {
 }
 function filterPrimaryPointer(fn) {
   return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
+    const win = event.view ?? window;
     const isMouseEvent2 = event instanceof win.MouseEvent;
     const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
     if (isPrimary)
@@ -201,7 +208,7 @@ var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
 function disableTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state === "default") {
       savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -215,7 +222,7 @@ function disableTextSelection({ target, doc } = {}) {
   return () => restoreTextSelection({ target, doc: _document });
 }
 function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state !== "disabled")
       return;
@@ -235,7 +242,7 @@ function restoreTextSelection({ target, doc } = {}) {
     if (target && modifiedElementMap.has(target)) {
       let targetOldUserSelect = modifiedElementMap.get(target);
       if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+        target.style.userSelect = targetOldUserSelect ?? "";
       }
       if (target.getAttribute("style") === "") {
         target.removeAttribute("style");
@@ -244,13 +251,13 @@ function restoreTextSelection({ target, doc } = {}) {
     }
   }
 }
-function trackPointerMove(opts) {
-  const { onPointerMove, onPointerUp, ctx } = opts;
-  const { doc = document, threshold = 5 } = ctx;
+var THRESHOLD = 5;
+function trackPointerMove(doc, opts) {
+  const { onPointerMove, onPointerUp } = opts;
   const handlePointerMove = (event, info) => {
     const { point: p } = info;
-    const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
-    if (distance < threshold)
+    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
+    if (distance < THRESHOLD)
       return;
     if (isMouseEvent(event) && isLeftClick(event)) {
       onPointerUp();
@@ -258,45 +265,43 @@ function trackPointerMove(opts) {
     }
     onPointerMove(info, event);
   };
-  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
+  return callAll(
+    addPointerEvent(doc, "pointermove", handlePointerMove, false),
+    addPointerEvent(doc, "pointerup", onPointerUp, false),
+    addPointerEvent(doc, "pointercancel", onPointerUp, false),
+    addPointerEvent(doc, "contextmenu", onPointerUp, false),
+    disableTextSelection({ doc })
+  );
 }
 
 // src/splitter.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.uid}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
   },
   getSplitterId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.uid}:splitter`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
   },
   getToggleButtonId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.uid}:toggle-btn`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
   },
   getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.uid}:label`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
   },
   getPrimaryPaneId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.uid}:primary`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
   },
   getSecondaryPaneId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.uid}:secondary`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
   },
-  getSplitterEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getSplitterId(ctx)),
-  getPrimaryPaneEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPrimaryPaneId(ctx)),
+  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
+  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
   getCursor(ctx) {
     if (ctx.disabled || ctx.fixed)
       return "default";
@@ -308,7 +313,7 @@ var dom = {
       cursor = x ? "w-resize" : "n-resize";
     return cursor;
   }
-};
+});
 
 // src/splitter.connect.ts
 function connect(state2, send, normalize) {
@@ -366,12 +371,13 @@ function connect(state2, send, normalize) {
       id: dom.getPrimaryPaneId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
-      style: __spreadValues({
+      style: {
         visibility: "visible",
         flex: `0 0 ${value}px`,
         position: "relative",
-        userSelect: isDragging ? "none" : "auto"
-      }, isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` })
+        userSelect: isDragging ? "none" : "auto",
+        ...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
+      }
     }),
     toggleButtonProps: normalize.element({
       "data-part": "toggle-button",
@@ -475,13 +481,12 @@ function connect(state2, send, normalize) {
 }
 
 // src/splitter.machine.ts
-import { createMachine, guards, ref } from "@zag-js/core";
+import { createMachine, guards } from "@zag-js/core";
 
 // ../../utilities/number/dist/index.mjs
-var __pow2 = Math.pow;
 function round(v, t) {
   let num = valueOf(v);
-  const p = __pow2(10, t != null ? t : 10);
+  const p = 10 ** (t ?? 10);
   num = Math.round(num * p) / p;
   return t ? num.toFixed(t) : v.toString();
 }
@@ -515,7 +520,7 @@ function valueOf(v) {
 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)));
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
     a = Math.round(a * multiplier);
     b = Math.round(b * multiplier);
     result = op === "+" ? a + b : a - b;
@@ -527,225 +532,217 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
 
 // src/splitter.machine.ts
 var { not } = guards;
-function machine(ctx = {}) {
-  return createMachine({
-    id: "splitter",
-    initial: "unknown",
-    context: __spreadValues({
-      uid: "",
-      orientation: "horizontal",
-      min: 224,
-      max: 340,
-      step: 1,
-      value: 256,
-      snapOffset: 0
-    }, ctx),
-    computed: {
-      isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-      isAtMin: (ctx2) => ctx2.value === ctx2.min,
-      isAtMax: (ctx2) => ctx2.value === ctx2.max
-    },
-    on: {
-      COLLAPSE: {
-        actions: "setToMin"
+function machine(ctx) {
+  return createMachine(
+    {
+      id: "splitter",
+      initial: "unknown",
+      context: {
+        orientation: "horizontal",
+        min: 224,
+        max: 340,
+        step: 1,
+        value: 256,
+        snapOffset: 0,
+        ...ctx
       },
-      EXPAND: {
-        actions: "setToMax"
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isAtMin: (ctx2) => ctx2.value === ctx2.min,
+        isAtMax: (ctx2) => ctx2.value === ctx2.max
       },
-      TOGGLE: [
-        {
-          guard: "isCollapsed",
+      on: {
+        COLLAPSE: {
+          actions: "setToMin"
+        },
+        EXPAND: {
           actions: "setToMax"
         },
-        {
-          actions: "setToMin"
-        }
-      ]
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: "setupDocument"
-          }
-        }
-      },
-      idle: {
-        on: {
-          POINTER_OVER: {
-            guard: not("isFixed"),
-            target: "hover:temp"
+        TOGGLE: [
+          {
+            guard: "isCollapsed",
+            actions: "setToMax"
           },
-          POINTER_LEAVE: "idle",
-          FOCUS: "focused"
-        }
+          {
+            actions: "setToMin"
+          }
+        ]
       },
-      "hover:temp": {
-        after: {
-          HOVER_DELAY: "hover"
+      states: {
+        unknown: {
+          on: {
+            SETUP: "idle"
+          }
         },
-        on: {
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["invokeOnChangeStart"]
-          },
-          POINTER_LEAVE: "idle"
-        }
-      },
-      hover: {
-        tags: ["focus"],
-        on: {
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["invokeOnChangeStart"]
-          },
-          POINTER_LEAVE: "idle"
-        }
-      },
-      focused: {
-        tags: ["focus"],
-        on: {
-          BLUR: "idle",
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["invokeOnChangeStart"]
-          },
-          ARROW_LEFT: {
-            guard: "isHorizontal",
-            actions: "decrement"
-          },
-          ARROW_RIGHT: {
-            guard: "isHorizontal",
-            actions: "increment"
-          },
-          ARROW_UP: {
-            guard: "isVertical",
-            actions: "increment"
-          },
-          ARROW_DOWN: {
-            guard: "isVertical",
-            actions: "decrement"
+        idle: {
+          on: {
+            POINTER_OVER: {
+              guard: not("isFixed"),
+              target: "hover:temp"
+            },
+            POINTER_LEAVE: "idle",
+            FOCUS: "focused"
+          }
+        },
+        "hover:temp": {
+          after: {
+            HOVER_DELAY: "hover"
           },
-          ENTER: [
-            {
-              guard: "isCollapsed",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnChangeStart"]
+            },
+            POINTER_LEAVE: "idle"
+          }
+        },
+        hover: {
+          tags: ["focus"],
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnChangeStart"]
+            },
+            POINTER_LEAVE: "idle"
+          }
+        },
+        focused: {
+          tags: ["focus"],
+          on: {
+            BLUR: "idle",
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnChangeStart"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "decrement"
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "increment"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "decrement"
+            },
+            ENTER: [
+              {
+                guard: "isCollapsed",
+                actions: "setToMin"
+              },
+              { actions: "setToMin" }
+            ],
+            HOME: {
               actions: "setToMin"
             },
-            { actions: "setToMin" }
-          ],
-          HOME: {
-            actions: "setToMin"
-          },
-          END: {
-            actions: "setToMax"
-          },
-          DOUBLE_CLICK: [
-            {
-              guard: "isCollapsed",
+            END: {
               actions: "setToMax"
             },
-            { actions: "setToMin" }
-          ]
-        }
-      },
-      dragging: {
-        tags: ["focus"],
-        entry: "focusSplitter",
-        activities: "trackPointerMove",
-        on: {
-          POINTER_UP: {
-            target: "focused",
-            actions: ["invokeOnChangeEnd"]
-          },
-          POINTER_MOVE: {
-            actions: "setPointerValue"
+            DOUBLE_CLICK: [
+              {
+                guard: "isCollapsed",
+                actions: "setToMax"
+              },
+              { actions: "setToMin" }
+            ]
           }
-        }
-      }
-    }
-  }, {
-    activities: {
-      trackPointerMove: (ctx2, _evt, { send }) => {
-        const el = dom.getDoc(ctx2).documentElement;
-        return trackPointerMove({
-          ctx: ctx2,
-          onPointerMove(info) {
-            send({ type: "POINTER_MOVE", point: info.point });
-            el.style.cursor = dom.getCursor(ctx2);
-          },
-          onPointerUp() {
-            send("POINTER_UP");
-            el.style.cursor = "";
+        },
+        dragging: {
+          tags: ["focus"],
+          entry: "focusSplitter",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focused",
+              actions: ["invokeOnChangeEnd"]
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue"
+            }
           }
-        });
+        }
       }
     },
-    guards: {
-      isCollapsed: (ctx2) => ctx2.isAtMin,
-      isHorizontal: (ctx2) => ctx2.isHorizontal,
-      isVertical: (ctx2) => !ctx2.isHorizontal,
-      isFixed: (ctx2) => !!ctx2.fixed
-    },
-    delays: {
-      HOVER_DELAY: 250
-    },
-    actions: {
-      invokeOnChange(ctx2, evt) {
-        var _a;
-        if (evt.type !== "SETUP") {
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+    {
+      activities: {
+        trackPointerMove: (ctx2, _evt, { send }) => {
+          const doc = dom.getDoc(ctx2);
+          return trackPointerMove(doc, {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+              doc.documentElement.style.cursor = dom.getCursor(ctx2);
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+              doc.documentElement.style.cursor = "";
+            }
+          });
         }
       },
-      invokeOnChangeStart(ctx2) {
-        var _a;
-        (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      invokeOnChangeEnd(ctx2) {
-        var _a;
-        (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-        ctx2.uid = evt.id;
+      guards: {
+        isCollapsed: (ctx2) => ctx2.isAtMin,
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => !ctx2.isHorizontal,
+        isFixed: (ctx2) => !!ctx2.fixed
       },
-      setToMin(ctx2) {
-        ctx2.value = ctx2.min;
+      delays: {
+        HOVER_DELAY: 250
       },
-      setToMax(ctx2) {
-        ctx2.value = ctx2.max;
-      },
-      increment(ctx2, evt) {
-        ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
-      },
-      decrement(ctx2, evt) {
-        ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
-      },
-      focusSplitter(ctx2) {
-        raf(() => {
+      actions: {
+        invokeOnChange(ctx2, evt) {
           var _a;
-          return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      setPointerValue(ctx2, evt) {
-        const el = dom.getPrimaryPaneEl(ctx2);
-        if (!el)
-          return;
-        const relativePoint = getPointRelativeToNode(evt.point, el);
-        let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
-        let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
-        if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
-          value = ctx2.min;
-        } else if (Math.abs(value - ctx2.max) <= ctx2.snapOffset) {
-          value = ctx2.max;
+          if (evt.type !== "SETUP") {
+            (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          }
+        },
+        invokeOnChangeStart(ctx2) {
+          var _a;
+          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnChangeEnd(ctx2) {
+          var _a;
+          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min;
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max;
+        },
+        increment(ctx2, evt) {
+          ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
+        },
+        focusSplitter(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        setPointerValue(ctx2, evt) {
+          const el = dom.getPrimaryPaneEl(ctx2);
+          if (!el)
+            return;
+          const relativePoint = getPointRelativeToNode(evt.point, el);
+          let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
+          let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
+          if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
+            value = ctx2.min;
+          } else if (Math.abs(value - ctx2.max) <= ctx2.snapOffset) {
+            value = ctx2.max;
+          }
+          ctx2.value = value;
         }
-        ctx2.value = value;
       }
     }
-  });
+  );
 }
 export {
   connect,