@clubmed/trident-ui/ui/forms/Range.js

Shared ClubMed React UI components

import { jsxs as B, jsx as E } from "react/jsx-runtime";
import { R as T } from "../../chunks/ResizeObserver.js";
import { c as $ } from "../../chunks/clsx.js";
import { useState as H, useRef as N, useEffect as w, useMemo as j, useId as A } from "react";
function W(t, r) {
  let o;
  return (...a) => {
    window.clearTimeout(o), o = window.setTimeout(() => t(...a), r);
  };
}
function M({ debounce: t, scroll: r, polyfill: o, offsetSize: a } = { debounce: 0, scroll: !1, offsetSize: !1 }) {
  const d = o || (typeof window > "u" ? class {
  } : window.ResizeObserver);
  if (!d) 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 [i, h] = H({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), e = N({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: i, orientationHandler: null }), u = t ? typeof t == "number" ? t : t.scroll : null, s = t ? typeof t == "number" ? t : t.resize : null, m = N(!1);
  w(() => (m.current = !0, () => void (m.current = !1)));
  const [z, p, l] = j(() => {
    const n = () => {
      if (!e.current.element) return;
      const { left: C, top: L, width: O, height: b, bottom: v, right: y, x: R, y: I } = e.current.element.getBoundingClientRect(), g = { left: C, top: L, width: O, height: b, bottom: v, right: y, x: R, y: I };
      e.current.element instanceof HTMLElement && a && (g.height = e.current.element.offsetHeight, g.width = e.current.element.offsetWidth), Object.freeze(g), m.current && !k(e.current.lastBounds, g) && h(e.current.lastBounds = g);
    };
    return [n, s ? W(n, s) : n, u ? W(n, u) : n];
  }, [h, a, u, s]);
  function f() {
    e.current.scrollContainers && (e.current.scrollContainers.forEach((n) => n.removeEventListener("scroll", l, !0)), e.current.scrollContainers = null), e.current.resizeObserver && (e.current.resizeObserver.disconnect(), e.current.resizeObserver = null), e.current.orientationHandler && ("orientation" in screen && "removeEventListener" in screen.orientation ? screen.orientation.removeEventListener("change", e.current.orientationHandler) : "onorientationchange" in window && window.removeEventListener("orientationchange", e.current.orientationHandler));
  }
  function c() {
    e.current.element && (e.current.resizeObserver = new d(l), e.current.resizeObserver.observe(e.current.element), r && e.current.scrollContainers && e.current.scrollContainers.forEach((n) => n.addEventListener("scroll", l, { capture: !0, passive: !0 })), e.current.orientationHandler = () => {
      l();
    }, "orientation" in screen && "addEventListener" in screen.orientation ? screen.orientation.addEventListener("change", e.current.orientationHandler) : "onorientationchange" in window && window.addEventListener("orientationchange", e.current.orientationHandler));
  }
  const x = (n) => {
    !n || n === e.current.element || (f(), e.current.element = n, e.current.scrollContainers = S(n), c());
  };
  return F(l, !!r), V(p), w(() => {
    f(), c();
  }, [r, l, p]), w(() => f, []), [x, i, z];
}
function V(t) {
  w(() => {
    const r = t;
    return window.addEventListener("resize", r), () => void window.removeEventListener("resize", r);
  }, [t]);
}
function F(t, r) {
  w(() => {
    if (r) {
      const o = t;
      return window.addEventListener("scroll", o, { capture: !0, passive: !0 }), () => void window.removeEventListener("scroll", o, !0);
    }
  }, [t, r]);
}
function S(t) {
  const r = [];
  if (!t || t === document.body) return r;
  const { overflow: o, overflowX: a, overflowY: d } = window.getComputedStyle(t);
  return [o, a, d].some((i) => i === "auto" || i === "scroll") && r.push(t), [...r, ...S(t.parentElement)];
}
const X = ["x", "y", "top", "bottom", "left", "right", "width", "height"], k = (t, r) => X.every((o) => t[o] === r[o]), J = (t) => {
  const r = A(), {
    ariaLabel: o,
    className: a,
    dataTestId: d = "range",
    id: i = r,
    name: h = i,
    singleCursorMode: e = !1,
    min: u = 0,
    options: s = [],
    step: m = 1,
    readOnly: z,
    disabled: p,
    onChange: l,
    ...f
  } = t, [c, x] = H(s.length - 1), [n, C] = H(u), [L, { width: O }] = M({ polyfill: T }), b = (v) => {
    if (!z) {
      v.persist();
      const y = Number(v.target.value);
      v.target.id[v.target.id.length - 1] === "a" ? x(y) : C(y), l && l(h, [c, n]);
    }
  };
  return /* @__PURE__ */ B(
    "div",
    {
      style: {
        "--min": u,
        "--max": s.length - 1,
        "--inputWidth": `${O}px`,
        "--inputHeight": "4px",
        "--thumbWidth": "32px",
        "--usefulWidth": "calc(var(--inputWidth) - var(--thumbWidth))",
        "--valueA": c,
        "--valueB": n
      },
      className: $("relative w-full", a),
      "data-testid": d,
      "data-name": "Range",
      ref: L,
      children: [
        /* @__PURE__ */ B("div", { className: "input-range-container", children: [
          /* @__PURE__ */ E(
            "input",
            {
              ...f,
              "aria-label": o,
              className: "input-range",
              id: `${i}-a`,
              max: s.length - 1,
              min: u,
              name: h,
              onChange: b,
              disabled: p,
              step: m,
              type: "range",
              value: c
            }
          ),
          !e && /* @__PURE__ */ E(
            "input",
            {
              ...f,
              "aria-label": o,
              className: "input-range",
              disabled: p,
              id: `${i}-b`,
              max: s.length - 1,
              min: u,
              name: h,
              onChange: b,
              step: m,
              type: "range",
              value: n
            }
          )
        ] }),
        /* @__PURE__ */ E(
          "output",
          {
            htmlFor: `${i}-a`,
            style: { "--value": c },
            className: "input-range-output",
            children: s[c].label
          }
        ),
        !e && /* @__PURE__ */ E(
          "output",
          {
            htmlFor: `${i}-b`,
            style: { "--value": n },
            className: "input-range-output",
            children: s[n].label
          }
        )
      ]
    }
  );
};
export {
  J as Range
};
//# sourceMappingURL=Range.js.map