@clubmed/trident-ui 1.1.0-rc.4 → 1.1.0

package/molecules/Forms/Range.js

@@ -1,100 +1,503 @@
-import { jsxs as v, jsx as s } from "/builds/clubmed/cm-trident-ui/node_modules/react/jsx-runtime.js";
-import { ResizeObserver as A } from "/builds/clubmed/cm-trident-ui/node_modules/@juggle/resize-observer/lib/exports/resize-observer.js";
-import B from "/builds/clubmed/cm-trident-ui/node_modules/classnames/index.js";
-import { useId as V, useState as f } from "/builds/clubmed/cm-trident-ui/node_modules/react/index.js";
-import j from "/builds/clubmed/cm-trident-ui/node_modules/react-use-measure/dist/web.js";
-const L = (b) => {
-  const x = V(), {
-    ariaLabel: u,
-    className: N,
-    dataTestId: y = "range",
-    id: a = x,
-    name: r = a,
-    singleCursorMode: o = !1,
-    min: l = 0,
-    options: e = [],
-    step: p = 1,
-    readOnly: C,
-    disabled: d,
+import { jsxs as J, jsx as W } from "react/jsx-runtime";
+import { c as fe } from "../../index-Cu0xwYjD.js";
+import { useState as V, useRef as U, useEffect as N, useMemo as de, useId as he } from "react";
+import { g as pe } from "../../_commonjsHelpers-DaMA6jEr.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,
-    ...c
-  } = b, [t, I] = f(e.length - 1), [n, W] = f(l), [$, { width: R }] = j({ polyfill: A }), h = (i) => {
-    if (!C) {
-      i.persist();
-      const g = Number(i.target.value);
-      i.target.id[i.target.id.length - 1] === "a" ? I(g) : W(g), m && m(r, [t, n]);
+    ...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__ */ v(
+  return /* @__PURE__ */ J(
     "div",
     {
       style: {
-        "--min": l,
-        "--max": e.length - 1,
-        "--inputWidth": `${R}px`,
+        "--min": o,
+        "--max": u.length - 1,
+        "--inputWidth": `${B}px`,
         "--inputHeight": "4px",
         "--thumbWidth": "32px",
         "--usefulWidth": "calc(var(--inputWidth) - var(--thumbWidth))",
-        "--valueA": t,
-        "--valueB": n
+        "--valueA": d,
+        "--valueB": p
       },
-      className: B("relative w-full", N),
-      "data-testid": y,
+      className: fe("relative w-full", n),
+      "data-testid": i,
       "data-name": "Range",
-      ref: $,
+      ref: z,
       children: [
-        /* @__PURE__ */ v("div", { className: "input-range-container", children: [
-          /* @__PURE__ */ s(
+        /* @__PURE__ */ J("div", { className: "input-range-container", children: [
+          /* @__PURE__ */ W(
             "input",
             {
-              ...c,
-              "aria-label": u,
+              ...h,
+              "aria-label": r,
               className: "input-range",
-              id: `${a}-a`,
-              max: e.length - 1,
-              min: l,
-              name: r,
-              onChange: h,
-              disabled: d,
-              step: p,
+              id: `${s}-a`,
+              max: u.length - 1,
+              min: o,
+              name: a,
+              onChange: x,
+              disabled: T,
+              step: v,
               type: "range",
-              value: t
+              value: d
             }
           ),
-          !o && /* @__PURE__ */ s(
+          !l && /* @__PURE__ */ W(
             "input",
             {
-              ...c,
-              "aria-label": u,
+              ...h,
+              "aria-label": r,
               className: "input-range",
-              disabled: d,
-              id: `${a}-b`,
-              max: e.length - 1,
-              min: l,
-              name: r,
-              onChange: h,
-              step: p,
+              disabled: T,
+              id: `${s}-b`,
+              max: u.length - 1,
+              min: o,
+              name: a,
+              onChange: x,
+              step: v,
               type: "range",
-              value: n
+              value: p
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ W(
           "output",
           {
-            htmlFor: `${a}-a`,
-            style: { "--value": t },
+            htmlFor: `${s}-a`,
+            style: { "--value": d },
             className: "input-range-output",
-            children: e[t].label
+            children: u[d].label
           }
         ),
-        !o && /* @__PURE__ */ s(
+        !l && /* @__PURE__ */ W(
           "output",
           {
-            htmlFor: `${a}-b`,
-            style: { "--value": n },
+            htmlFor: `${s}-b`,
+            style: { "--value": p },
             className: "input-range-output",
-            children: e[n].label
+            children: u[p].label
           }
         )
       ]
@@ -102,6 +505,6 @@ const L = (b) => {
   );
 };
 export {
-  L as Range
+  Ue as Range
 };
 //# sourceMappingURL=Range.js.map