@clubmed/trident-ui/molecules/Forms/Range.js

Shared ClubMed React UI components

import { jsxs as J, jsx as W } from "react/jsx-runtime";
import { c as fe } from "../../chunks/index.js";
import { useState as V, useRef as U, useEffect as N, useMemo as de, useId as he } from "react";
import { g as pe } from "../../chunks/_commonjsHelpers.js";
var O = [], be = function() {
  return O.some(function(e) {
    return e.activeTargets.length > 0;
  });
}, ge = function() {
  return O.some(function(e) {
    return e.skippedTargets.length > 0;
  });
}, Y = "ResizeObserver loop completed with undelivered notifications.", me = function() {
  var e;
  typeof ErrorEvent == "function" ? e = new ErrorEvent("error", {
    message: Y
  }) : (e = document.createEvent("Event"), e.initEvent("error", !1, !1), e.message = Y), window.dispatchEvent(e);
}, k;
(function(e) {
  e.BORDER_BOX = "border-box", e.CONTENT_BOX = "content-box", e.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
})(k || (k = {}));
var R = function(e) {
  return Object.freeze(e);
}, we = /* @__PURE__ */ function() {
  function e(t, r) {
    this.inlineSize = t, this.blockSize = r, R(this);
  }
  return e;
}(), oe = function() {
  function e(t, r, n, i) {
    return this.x = t, this.y = r, this.width = n, this.height = i, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, R(this);
  }
  return e.prototype.toJSON = function() {
    var t = this, r = t.x, n = t.y, i = t.top, s = t.right, a = t.bottom, l = t.left, o = t.width, u = t.height;
    return { x: r, y: n, top: i, right: s, bottom: a, left: l, width: o, height: u };
  }, e.fromRect = function(t) {
    return new e(t.x, t.y, t.width, t.height);
  }, e;
}(), $ = function(e) {
  return e instanceof SVGElement && "getBBox" in e;
}, se = function(e) {
  if ($(e)) {
    var t = e.getBBox(), r = t.width, n = t.height;
    return !r && !n;
  }
  var i = e, s = i.offsetWidth, a = i.offsetHeight;
  return !(s || a || e.getClientRects().length);
}, j = function(e) {
  var t;
  if (e instanceof Element)
    return !0;
  var r = (t = e == null ? void 0 : e.ownerDocument) === null || t === void 0 ? void 0 : t.defaultView;
  return !!(r && e instanceof r.Element);
}, ze = function(e) {
  switch (e.tagName) {
    case "INPUT":
      if (e.type !== "image")
        break;
    case "VIDEO":
    case "AUDIO":
    case "EMBED":
    case "OBJECT":
    case "CANVAS":
    case "IFRAME":
    case "IMG":
      return !0;
  }
  return !1;
}, L = typeof window < "u" ? window : {}, I = /* @__PURE__ */ new WeakMap(), K = /auto|scroll/, xe = /^tb|vertical/, ye = /msie|trident/i.test(L.navigator && L.navigator.userAgent), b = function(e) {
  return parseFloat(e || "0");
}, D = function(e, t, r) {
  return e === void 0 && (e = 0), t === void 0 && (t = 0), r === void 0 && (r = !1), new we((r ? t : e) || 0, (r ? e : t) || 0);
}, Q = R({
  devicePixelContentBoxSize: D(),
  borderBoxSize: D(),
  contentBoxSize: D(),
  contentRect: new oe(0, 0, 0, 0)
}), ae = function(e, t) {
  if (t === void 0 && (t = !1), I.has(e) && !t)
    return I.get(e);
  if (se(e))
    return I.set(e, Q), Q;
  var r = getComputedStyle(e), n = $(e) && e.ownerSVGElement && e.getBBox(), i = !ye && r.boxSizing === "border-box", s = xe.test(r.writingMode || ""), a = !n && K.test(r.overflowY || ""), l = !n && K.test(r.overflowX || ""), o = n ? 0 : b(r.paddingTop), u = n ? 0 : b(r.paddingRight), v = n ? 0 : b(r.paddingBottom), f = n ? 0 : b(r.paddingLeft), T = n ? 0 : b(r.borderTopWidth), m = n ? 0 : b(r.borderRightWidth), h = n ? 0 : b(r.borderBottomWidth), d = n ? 0 : b(r.borderLeftWidth), w = f + u, p = o + v, c = d + m, z = T + h, B = l ? e.offsetHeight - z - e.clientHeight : 0, x = a ? e.offsetWidth - c - e.clientWidth : 0, g = i ? w + c : 0, S = i ? p + z : 0, y = n ? n.width : b(r.width) - g - x, C = n ? n.height : b(r.height) - S - B, _ = y + w + x + c, E = C + p + B + z, G = R({
    devicePixelContentBoxSize: D(Math.round(y * devicePixelRatio), Math.round(C * devicePixelRatio), s),
    borderBoxSize: D(_, E, s),
    contentBoxSize: D(y, C, s),
    contentRect: new oe(f, o, y, C)
  });
  return I.set(e, G), G;
}, ue = function(e, t, r) {
  var n = ae(e, r), i = n.borderBoxSize, s = n.contentBoxSize, a = n.devicePixelContentBoxSize;
  switch (t) {
    case k.DEVICE_PIXEL_CONTENT_BOX:
      return a;
    case k.BORDER_BOX:
      return i;
    default:
      return s;
  }
}, Ee = /* @__PURE__ */ function() {
  function e(t) {
    var r = ae(t);
    this.target = t, this.contentRect = r.contentRect, this.borderBoxSize = R([r.borderBoxSize]), this.contentBoxSize = R([r.contentBoxSize]), this.devicePixelContentBoxSize = R([r.devicePixelContentBoxSize]);
  }
  return e;
}(), ce = function(e) {
  if (se(e))
    return 1 / 0;
  for (var t = 0, r = e.parentNode; r; )
    t += 1, r = r.parentNode;
  return t;
}, Oe = function() {
  var e = 1 / 0, t = [];
  O.forEach(function(a) {
    if (a.activeTargets.length !== 0) {
      var l = [];
      a.activeTargets.forEach(function(u) {
        var v = new Ee(u.target), f = ce(u.target);
        l.push(v), u.lastReportedSize = ue(u.target, u.observedBox), f < e && (e = f);
      }), t.push(function() {
        a.callback.call(a.observer, l, a.observer);
      }), a.activeTargets.splice(0, a.activeTargets.length);
    }
  });
  for (var r = 0, n = t; r < n.length; r++) {
    var i = n[r];
    i();
  }
  return e;
}, Z = function(e) {
  O.forEach(function(r) {
    r.activeTargets.splice(0, r.activeTargets.length), r.skippedTargets.splice(0, r.skippedTargets.length), r.observationTargets.forEach(function(i) {
      i.isActive() && (ce(i.target) > e ? r.activeTargets.push(i) : r.skippedTargets.push(i));
    });
  });
}, Re = function() {
  var e = 0;
  for (Z(e); be(); )
    e = Oe(), Z(e);
  return ge() && me(), e > 0;
}, F, le = [], Te = function() {
  return le.splice(0).forEach(function(e) {
    return e();
  });
}, Be = function(e) {
  if (!F) {
    var t = 0, r = document.createTextNode(""), n = { characterData: !0 };
    new MutationObserver(function() {
      return Te();
    }).observe(r, n), F = function() {
      r.textContent = "".concat(t ? t-- : t++);
    };
  }
  le.push(e), F();
}, Se = function(e) {
  Be(function() {
    requestAnimationFrame(e);
  });
}, P = 0, Ce = function() {
  return !!P;
}, De = 250, Ne = { attributes: !0, characterData: !0, childList: !0, subtree: !0 }, ee = [
  "resize",
  "load",
  "transitionend",
  "animationend",
  "animationstart",
  "animationiteration",
  "keyup",
  "keydown",
  "mouseup",
  "mousedown",
  "mouseover",
  "mouseout",
  "blur",
  "focus"
], te = function(e) {
  return e === void 0 && (e = 0), Date.now() + e;
}, H = !1, Le = function() {
  function e() {
    var t = this;
    this.stopped = !0, this.listener = function() {
      return t.schedule();
    };
  }
  return e.prototype.run = function(t) {
    var r = this;
    if (t === void 0 && (t = De), !H) {
      H = !0;
      var n = te(t);
      Se(function() {
        var i = !1;
        try {
          i = Re();
        } finally {
          if (H = !1, t = n - te(), !Ce())
            return;
          i ? r.run(1e3) : t > 0 ? r.run(t) : r.start();
        }
      });
    }
  }, e.prototype.schedule = function() {
    this.stop(), this.run();
  }, e.prototype.observe = function() {
    var t = this, r = function() {
      return t.observer && t.observer.observe(document.body, Ne);
    };
    document.body ? r() : L.addEventListener("DOMContentLoaded", r);
  }, e.prototype.start = function() {
    var t = this;
    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), ee.forEach(function(r) {
      return L.addEventListener(r, t.listener, !0);
    }));
  }, e.prototype.stop = function() {
    var t = this;
    this.stopped || (this.observer && this.observer.disconnect(), ee.forEach(function(r) {
      return L.removeEventListener(r, t.listener, !0);
    }), this.stopped = !0);
  }, e;
}(), X = new Le(), re = function(e) {
  !P && e > 0 && X.start(), P += e, !P && X.stop();
}, ke = function(e) {
  return !$(e) && !ze(e) && getComputedStyle(e).display === "inline";
}, We = function() {
  function e(t, r) {
    this.target = t, this.observedBox = r || k.CONTENT_BOX, this.lastReportedSize = {
      inlineSize: 0,
      blockSize: 0
    };
  }
  return e.prototype.isActive = function() {
    var t = ue(this.target, this.observedBox, !0);
    return ke(this.target) && (this.lastReportedSize = t), this.lastReportedSize.inlineSize !== t.inlineSize || this.lastReportedSize.blockSize !== t.blockSize;
  }, e;
}(), Ie = /* @__PURE__ */ function() {
  function e(t, r) {
    this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = t, this.callback = r;
  }
  return e;
}(), M = /* @__PURE__ */ new WeakMap(), ne = function(e, t) {
  for (var r = 0; r < e.length; r += 1)
    if (e[r].target === t)
      return r;
  return -1;
}, A = function() {
  function e() {
  }
  return e.connect = function(t, r) {
    var n = new Ie(t, r);
    M.set(t, n);
  }, e.observe = function(t, r, n) {
    var i = M.get(t), s = i.observationTargets.length === 0;
    ne(i.observationTargets, r) < 0 && (s && O.push(i), i.observationTargets.push(new We(r, n && n.box)), re(1), X.schedule());
  }, e.unobserve = function(t, r) {
    var n = M.get(t), i = ne(n.observationTargets, r), s = n.observationTargets.length === 1;
    i >= 0 && (s && O.splice(O.indexOf(n), 1), n.observationTargets.splice(i, 1), re(-1));
  }, e.disconnect = function(t) {
    var r = this, n = M.get(t);
    n.observationTargets.slice().forEach(function(i) {
      return r.unobserve(t, i.target);
    }), n.activeTargets.splice(0, n.activeTargets.length);
  }, e;
}(), Me = function() {
  function e(t) {
    if (arguments.length === 0)
      throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
    if (typeof t != "function")
      throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
    A.connect(this, t);
  }
  return e.prototype.observe = function(t, r) {
    if (arguments.length === 0)
      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
    if (!j(t))
      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
    A.observe(this, t, r);
  }, e.prototype.unobserve = function(t) {
    if (arguments.length === 0)
      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
    if (!j(t))
      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
    A.unobserve(this, t);
  }, e.prototype.disconnect = function() {
    A.disconnect(this);
  }, e.toString = function() {
    return "function ResizeObserver () { [polyfill code] }";
  }, e;
}();
function q(e, t, r) {
  var n, i, s, a, l;
  t == null && (t = 100);
  function o() {
    var v = Date.now() - a;
    v < t && v >= 0 ? n = setTimeout(o, t - v) : (n = null, r || (l = e.apply(s, i), s = i = null));
  }
  var u = function() {
    s = this, i = arguments, a = Date.now();
    var v = r && !n;
    return n || (n = setTimeout(o, t)), v && (l = e.apply(s, i), s = i = null), l;
  };
  return u.clear = function() {
    n && (clearTimeout(n), n = null);
  }, u.flush = function() {
    n && (l = e.apply(s, i), s = i = null, clearTimeout(n), n = null);
  }, u;
}
q.debounce = q;
var Ae = q;
const ie = /* @__PURE__ */ pe(Ae);
function Pe(e) {
  let {
    debounce: t,
    scroll: r,
    polyfill: n,
    offsetSize: i
  } = e === void 0 ? {
    debounce: 0,
    scroll: !1,
    offsetSize: !1
  } : e;
  const s = n || (typeof window > "u" ? class {
  } : window.ResizeObserver);
  if (!s)
    throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
  const [a, l] = V({
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    bottom: 0,
    right: 0,
    x: 0,
    y: 0
  }), o = U({
    element: null,
    scrollContainers: null,
    resizeObserver: null,
    lastBounds: a
  }), u = t ? typeof t == "number" ? t : t.scroll : null, v = t ? typeof t == "number" ? t : t.resize : null, f = U(!1);
  N(() => (f.current = !0, () => void (f.current = !1)));
  const [T, m, h] = de(() => {
    const c = () => {
      if (!o.current.element) return;
      const {
        left: z,
        top: B,
        width: x,
        height: g,
        bottom: S,
        right: y,
        x: C,
        y: _
      } = o.current.element.getBoundingClientRect(), E = {
        left: z,
        top: B,
        width: x,
        height: g,
        bottom: S,
        right: y,
        x: C,
        y: _
      };
      o.current.element instanceof HTMLElement && i && (E.height = o.current.element.offsetHeight, E.width = o.current.element.offsetWidth), Object.freeze(E), f.current && !Ve(o.current.lastBounds, E) && l(o.current.lastBounds = E);
    };
    return [c, v ? ie(c, v) : c, u ? ie(c, u) : c];
  }, [l, i, u, v]);
  function d() {
    o.current.scrollContainers && (o.current.scrollContainers.forEach((c) => c.removeEventListener("scroll", h, !0)), o.current.scrollContainers = null), o.current.resizeObserver && (o.current.resizeObserver.disconnect(), o.current.resizeObserver = null);
  }
  function w() {
    o.current.element && (o.current.resizeObserver = new s(h), o.current.resizeObserver.observe(o.current.element), r && o.current.scrollContainers && o.current.scrollContainers.forEach((c) => c.addEventListener("scroll", h, {
      capture: !0,
      passive: !0
    })));
  }
  const p = (c) => {
    !c || c === o.current.element || (d(), o.current.element = c, o.current.scrollContainers = ve(c), w());
  };
  return Fe(h, !!r), _e(m), N(() => {
    d(), w();
  }, [r, h, m]), N(() => d, []), [p, a, T];
}
function _e(e) {
  N(() => {
    const t = e;
    return window.addEventListener("resize", t), () => void window.removeEventListener("resize", t);
  }, [e]);
}
function Fe(e, t) {
  N(() => {
    if (t) {
      const r = e;
      return window.addEventListener("scroll", r, {
        capture: !0,
        passive: !0
      }), () => void window.removeEventListener("scroll", r, !0);
    }
  }, [e, t]);
}
function ve(e) {
  const t = [];
  if (!e || e === document.body) return t;
  const {
    overflow: r,
    overflowX: n,
    overflowY: i
  } = window.getComputedStyle(e);
  return [r, n, i].some((s) => s === "auto" || s === "scroll") && t.push(e), [...t, ...ve(e.parentElement)];
}
const He = ["x", "y", "top", "bottom", "left", "right", "width", "height"], Ve = (e, t) => He.every((r) => e[r] === t[r]), Ue = (e) => {
  const t = he(), {
    ariaLabel: r,
    className: n,
    dataTestId: i = "range",
    id: s = t,
    name: a = s,
    singleCursorMode: l = !1,
    min: o = 0,
    options: u = [],
    step: v = 1,
    readOnly: f,
    disabled: T,
    onChange: m,
    ...h
  } = e, [d, w] = V(u.length - 1), [p, c] = V(o), [z, { width: B }] = Pe({ polyfill: Me }), x = (g) => {
    if (!f) {
      g.persist();
      const S = Number(g.target.value);
      g.target.id[g.target.id.length - 1] === "a" ? w(S) : c(S), m && m(a, [d, p]);
    }
  };
  return /* @__PURE__ */ J(
    "div",
    {
      style: {
        "--min": o,
        "--max": u.length - 1,
        "--inputWidth": `${B}px`,
        "--inputHeight": "4px",
        "--thumbWidth": "32px",
        "--usefulWidth": "calc(var(--inputWidth) - var(--thumbWidth))",
        "--valueA": d,
        "--valueB": p
      },
      className: fe("relative w-full", n),
      "data-testid": i,
      "data-name": "Range",
      ref: z,
      children: [
        /* @__PURE__ */ J("div", { className: "input-range-container", children: [
          /* @__PURE__ */ W(
            "input",
            {
              ...h,
              "aria-label": r,
              className: "input-range",
              id: `${s}-a`,
              max: u.length - 1,
              min: o,
              name: a,
              onChange: x,
              disabled: T,
              step: v,
              type: "range",
              value: d
            }
          ),
          !l && /* @__PURE__ */ W(
            "input",
            {
              ...h,
              "aria-label": r,
              className: "input-range",
              disabled: T,
              id: `${s}-b`,
              max: u.length - 1,
              min: o,
              name: a,
              onChange: x,
              step: v,
              type: "range",
              value: p
            }
          )
        ] }),
        /* @__PURE__ */ W(
          "output",
          {
            htmlFor: `${s}-a`,
            style: { "--value": d },
            className: "input-range-output",
            children: u[d].label
          }
        ),
        !l && /* @__PURE__ */ W(
          "output",
          {
            htmlFor: `${s}-b`,
            style: { "--value": p },
            className: "input-range-output",
            children: u[p].label
          }
        )
      ]
    }
  );
};
export {
  Ue as Range
};
//# sourceMappingURL=Range.js.map