react-proportion-slider 0.9.0 → 0.9.1

package/dist/react-proportion-slider.es.js

@@ -0,0 +1,678 @@
+import Pe, { useRef as C, useEffect as je, useState as Me, useMemo as xe, useCallback as ae } from "react";
+var q = { exports: {} }, H = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Re;
+function Ye() {
+  if (Re) return H;
+  Re = 1;
+  var a = Symbol.for("react.transitional.element"), g = Symbol.for("react.fragment");
+  function c(E, u, f) {
+    var i = null;
+    if (f !== void 0 && (i = "" + f), u.key !== void 0 && (i = "" + u.key), "key" in u) {
+      f = {};
+      for (var l in u)
+        l !== "key" && (f[l] = u[l]);
+    } else f = u;
+    return u = f.ref, {
+      $$typeof: a,
+      type: E,
+      key: i,
+      ref: u !== void 0 ? u : null,
+      props: f
+    };
+  }
+  return H.Fragment = g, H.jsx = c, H.jsxs = c, H;
+}
+var U = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _e;
+function We() {
+  return _e || (_e = 1, process.env.NODE_ENV !== "production" && function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ke ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case G:
+          return "Fragment";
+        case J:
+          return "Portal";
+        case ue:
+          return "Profiler";
+        case X:
+          return "StrictMode";
+        case K:
+          return "Suspense";
+        case Q:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case se:
+            return (e.displayName || "Context") + ".Provider";
+          case le:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case Z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case D:
+            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
+          case ee:
+            r = e._payload, e = e._init;
+            try {
+              return a(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function g(e) {
+      return "" + e;
+    }
+    function c(e) {
+      try {
+        g(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), g(e);
+      }
+    }
+    function E() {
+    }
+    function u() {
+      if (B === 0) {
+        fe = console.log, de = console.info, Ee = console.warn, ge = console.error, ve = console.group, me = console.groupCollapsed, be = console.groupEnd;
+        var e = {
+          configurable: !0,
+          enumerable: !0,
+          value: E,
+          writable: !0
+        };
+        Object.defineProperties(console, {
+          info: e,
+          log: e,
+          warn: e,
+          error: e,
+          group: e,
+          groupCollapsed: e,
+          groupEnd: e
+        });
+      }
+      B++;
+    }
+    function f() {
+      if (B--, B === 0) {
+        var e = { configurable: !0, enumerable: !0, writable: !0 };
+        Object.defineProperties(console, {
+          log: M({}, e, { value: fe }),
+          info: M({}, e, { value: de }),
+          warn: M({}, e, { value: Ee }),
+          error: M({}, e, { value: ge }),
+          group: M({}, e, { value: ve }),
+          groupCollapsed: M({}, e, { value: me }),
+          groupEnd: M({}, e, { value: be })
+        });
+      }
+      0 > B && console.error(
+        "disabledDepth fell below zero. This is a bug in React. Please file an issue."
+      );
+    }
+    function i(e) {
+      if (te === void 0)
+        try {
+          throw Error();
+        } catch (t) {
+          var r = t.stack.trim().match(/\n( *(at )?)/);
+          te = r && r[1] || "", he = -1 < t.stack.indexOf(`
+    at`) ? " (<anonymous>)" : -1 < t.stack.indexOf("@") ? "@unknown:0:0" : "";
+        }
+      return `
+` + te + e + he;
+    }
+    function l(e, r) {
+      if (!e || ne) return "";
+      var t = oe.get(e);
+      if (t !== void 0) return t;
+      ne = !0, t = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
+      var o = null;
+      o = P.H, P.H = null, u();
+      try {
+        var v = {
+          DetermineComponentFrameRoot: function() {
+            try {
+              if (r) {
+                var O = function() {
+                  throw Error();
+                };
+                if (Object.defineProperty(O.prototype, "props", {
+                  set: function() {
+                    throw Error();
+                  }
+                }), typeof Reflect == "object" && Reflect.construct) {
+                  try {
+                    Reflect.construct(O, []);
+                  } catch (S) {
+                    var z = S;
+                  }
+                  Reflect.construct(e, [], O);
+                } else {
+                  try {
+                    O.call();
+                  } catch (S) {
+                    z = S;
+                  }
+                  e.call(O.prototype);
+                }
+              } else {
+                try {
+                  throw Error();
+                } catch (S) {
+                  z = S;
+                }
+                (O = e()) && typeof O.catch == "function" && O.catch(function() {
+                });
+              }
+            } catch (S) {
+              if (S && z && typeof S.stack == "string")
+                return [S.stack, z.stack];
+            }
+            return [null, null];
+          }
+        };
+        v.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
+        var s = Object.getOwnPropertyDescriptor(
+          v.DetermineComponentFrameRoot,
+          "name"
+        );
+        s && s.configurable && Object.defineProperty(
+          v.DetermineComponentFrameRoot,
+          "name",
+          { value: "DetermineComponentFrameRoot" }
+        );
+        var n = v.DetermineComponentFrameRoot(), _ = n[0], $ = n[1];
+        if (_ && $) {
+          var m = _.split(`
+`), Y = $.split(`
+`);
+          for (n = s = 0; s < m.length && !m[s].includes(
+            "DetermineComponentFrameRoot"
+          ); )
+            s++;
+          for (; n < Y.length && !Y[n].includes(
+            "DetermineComponentFrameRoot"
+          ); )
+            n++;
+          if (s === m.length || n === Y.length)
+            for (s = m.length - 1, n = Y.length - 1; 1 <= s && 0 <= n && m[s] !== Y[n]; )
+              n--;
+          for (; 1 <= s && 0 <= n; s--, n--)
+            if (m[s] !== Y[n]) {
+              if (s !== 1 || n !== 1)
+                do
+                  if (s--, n--, 0 > n || m[s] !== Y[n]) {
+                    var F = `
+` + m[s].replace(
+                      " at new ",
+                      " at "
+                    );
+                    return e.displayName && F.includes("<anonymous>") && (F = F.replace("<anonymous>", e.displayName)), typeof e == "function" && oe.set(e, F), F;
+                  }
+                while (1 <= s && 0 <= n);
+              break;
+            }
+        }
+      } finally {
+        ne = !1, P.H = o, f(), Error.prepareStackTrace = t;
+      }
+      return m = (m = e ? e.displayName || e.name : "") ? i(m) : "", typeof e == "function" && oe.set(e, m), m;
+    }
+    function d(e) {
+      if (e == null) return "";
+      if (typeof e == "function") {
+        var r = e.prototype;
+        return l(
+          e,
+          !(!r || !r.isReactComponent)
+        );
+      }
+      if (typeof e == "string") return i(e);
+      switch (e) {
+        case K:
+          return i("Suspense");
+        case Q:
+          return i("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case Z:
+            return e = l(e.render, !1), e;
+          case D:
+            return d(e.type);
+          case ee:
+            r = e._payload, e = e._init;
+            try {
+              return d(e(r));
+            } catch {
+            }
+        }
+      return "";
+    }
+    function b() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function T(e) {
+      if (ce.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function y(e, r) {
+      function t() {
+        Te || (Te = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function w() {
+      var e = a(this.type);
+      return we[e] || (we[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function W(e, r, t, o, v, s) {
+      return t = s.ref, e = {
+        $$typeof: V,
+        type: e,
+        key: r,
+        props: s,
+        _owner: v
+      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: w
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function h(e, r, t, o, v, s) {
+      if (typeof e == "string" || typeof e == "function" || e === G || e === ue || e === X || e === K || e === Q || e === Oe || typeof e == "object" && e !== null && (e.$$typeof === ee || e.$$typeof === D || e.$$typeof === se || e.$$typeof === le || e.$$typeof === Z || e.$$typeof === Ne || e.getModuleId !== void 0)) {
+        var n = r.children;
+        if (n !== void 0)
+          if (o)
+            if (re(n)) {
+              for (o = 0; o < n.length; o++)
+                A(n[o], e);
+              Object.freeze && Object.freeze(n);
+            } else
+              console.error(
+                "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+              );
+          else A(n, e);
+      } else
+        n = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (n += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? o = "null" : re(e) ? o = "array" : e !== void 0 && e.$$typeof === V ? (o = "<" + (a(e.type) || "Unknown") + " />", n = " Did you accidentally export a JSX literal instead of a component?") : o = typeof e, console.error(
+          "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
+          o,
+          n
+        );
+      if (ce.call(r, "key")) {
+        n = a(e);
+        var _ = Object.keys(r).filter(function(m) {
+          return m !== "key";
+        });
+        o = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", pe[n + o] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          n,
+          _,
+          n
+        ), pe[n + o] = !0);
+      }
+      if (n = null, t !== void 0 && (c(t), n = "" + t), T(r) && (c(r.key), n = "" + r.key), "key" in r) {
+        t = {};
+        for (var $ in r)
+          $ !== "key" && (t[$] = r[$]);
+      } else t = r;
+      return n && y(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), W(e, n, s, v, b(), t);
+    }
+    function A(e, r) {
+      if (typeof e == "object" && e && e.$$typeof !== Ae) {
+        if (re(e))
+          for (var t = 0; t < e.length; t++) {
+            var o = e[t];
+            j(o) && x(o, r);
+          }
+        else if (j(e))
+          e._store && (e._store.validated = 1);
+        else if (e === null || typeof e != "object" ? t = null : (t = ie && e[ie] || e["@@iterator"], t = typeof t == "function" ? t : null), typeof t == "function" && t !== e.entries && (t = t.call(e), t !== e))
+          for (; !(e = t.next()).done; )
+            j(e.value) && x(e.value, r);
+      }
+    }
+    function j(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === V;
+    }
+    function x(e, r) {
+      if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, r = R(r), !ye[r])) {
+        ye[r] = !0;
+        var t = "";
+        e && e._owner != null && e._owner !== b() && (t = null, typeof e._owner.tag == "number" ? t = a(e._owner.type) : typeof e._owner.name == "string" && (t = e._owner.name), t = " It was passed a child from " + t + ".");
+        var o = P.getCurrentStack;
+        P.getCurrentStack = function() {
+          var v = d(e.type);
+          return o && (v += o() || ""), v;
+        }, console.error(
+          'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
+          r,
+          t
+        ), P.getCurrentStack = o;
+      }
+    }
+    function R(e) {
+      var r = "", t = b();
+      return t && (t = a(t.type)) && (r = `
+
+Check the render method of \`` + t + "`."), r || (e = a(e)) && (r = `
+
+Check the top-level render call using <` + e + ">."), r;
+    }
+    var I = Pe, V = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), G = Symbol.for("react.fragment"), X = Symbol.for("react.strict_mode"), ue = Symbol.for("react.profiler"), le = Symbol.for("react.consumer"), se = Symbol.for("react.context"), Z = Symbol.for("react.forward_ref"), K = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), ee = Symbol.for("react.lazy"), Oe = Symbol.for("react.offscreen"), ie = Symbol.iterator, ke = Symbol.for("react.client.reference"), P = I.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ce = Object.prototype.hasOwnProperty, M = Object.assign, Ne = Symbol.for("react.client.reference"), re = Array.isArray, B = 0, fe, de, Ee, ge, ve, me, be;
+    E.__reactDisabledLog = !0;
+    var te, he, ne = !1, oe = new (typeof WeakMap == "function" ? WeakMap : Map)(), Ae = Symbol.for("react.client.reference"), Te, we = {}, pe = {}, ye = {};
+    U.Fragment = G, U.jsx = function(e, r, t, o, v) {
+      return h(e, r, t, !1, o, v);
+    }, U.jsxs = function(e, r, t, o, v) {
+      return h(e, r, t, !0, o, v);
+    };
+  }()), U;
+}
+var Se;
+function $e() {
+  return Se || (Se = 1, process.env.NODE_ENV === "production" ? q.exports = Ye() : q.exports = We()), q.exports;
+}
+var p = $e();
+const Le = ({
+  width: a,
+  gap: g,
+  backgroundColor: c = "red",
+  onDrag: E,
+  onDragStart: u,
+  onDragEnd: f
+}) => {
+  const i = C(null), l = C(!1);
+  return je(() => {
+    const d = (y) => y.target !== i.current ? !1 : (l.current = !0, u(y.clientX), !0), b = (y) => l.current ? (E(y.clientX), !0) : !1, T = () => l.current ? (l.current = !1, f(), !0) : !1;
+    return window.addEventListener("mousedown", d), window.addEventListener("mousemove", b), window.addEventListener("mouseup", T), () => {
+      window.removeEventListener("mousedown", d), window.removeEventListener("mousemove", b), window.removeEventListener("mouseup", T);
+    };
+  }, [u, E, f]), /* @__PURE__ */ p.jsx(
+    "div",
+    {
+      ref: i,
+      style: {
+        width: `${a}px`,
+        margin: `${g}px ${g}px`,
+        alignSelf: "stretch",
+        background: c,
+        borderRadius: "2px",
+        cursor: "ew-resize"
+      }
+    }
+  );
+}, Ve = ({
+  rightNode: a,
+  leftNode: g,
+  options: { primary: c },
+  width: E,
+  backgroundColor: u = "gray"
+}) => {
+  const f = C(null), i = C(null), l = C(null), [d, b] = Me(
+    "both"
+  ), T = xe(() => {
+    const w = d === "none" || d === "primary" && c === "left";
+    return c === "right" ? w ? k.BOTTOM_RIGHT : k.RIGHT : w ? k.TOP_LEFT : k.RIGHT;
+  }, [d, c]), y = xe(() => {
+    const w = d === "none" || d === "primary" && c === "right";
+    return c === "left" ? w ? k.BOTTOM_LEFT : k.LEFT : w ? k.TOP_RIGHT : k.LEFT;
+  }, [d, c]);
+  return je(() => {
+    const w = setInterval(() => {
+      const W = i.current, h = l.current, A = f.current;
+      if (!A || !W || !h)
+        return;
+      const j = A.getBoundingClientRect().width, x = W.getBoundingClientRect().width, R = h.getBoundingClientRect().width, { primaryWidth: I, secondaryWidth: V } = c === "left" ? { primaryWidth: R, secondaryWidth: x } : { primaryWidth: x, secondaryWidth: R }, J = I + 2 * N <= j, G = V + I + 3 * N <= j;
+      b(J ? G ? "both" : "primary" : "none");
+    }, 33.333333333333336);
+    return () => clearInterval(w);
+  }, [f, i, l, c]), /* @__PURE__ */ p.jsxs(
+    "div",
+    {
+      ref: f,
+      style: {
+        position: "relative",
+        width: E,
+        backgroundColor: u,
+        borderRadius: "5px",
+        color: "white"
+      },
+      children: [
+        /* @__PURE__ */ p.jsx("div", { ref: l, style: y, children: g }),
+        /* @__PURE__ */ p.jsx("div", { ref: i, style: T, children: a })
+      ]
+    }
+  );
+}, N = 5, L = {
+  position: "absolute",
+  transition: "all 200ms cubic-bezier(.47,1.64,.41,.8)",
+  transitionProperty: "transform, top, left, bottom, right"
+}, k = {
+  TOP_LEFT: {
+    ...L,
+    left: N,
+    top: -5,
+    transform: "translateY(-100%)"
+  },
+  LEFT: {
+    ...L,
+    left: N,
+    top: "50%",
+    transform: "translateY(-50%)"
+  },
+  BOTTOM_LEFT: {
+    ...L,
+    left: N,
+    bottom: -5,
+    transform: "translateY(100%)"
+  },
+  TOP_RIGHT: {
+    ...L,
+    right: N,
+    top: -5,
+    transform: "translateY(-100%)"
+  },
+  RIGHT: {
+    ...L,
+    right: N,
+    top: "50%",
+    transform: "translateY(-50%)"
+  },
+  BOTTOM_RIGHT: {
+    ...L,
+    right: N,
+    bottom: -5,
+    transform: "translateY(100%)"
+  }
+}, Ce = ({
+  value: a,
+  total: g,
+  detail: c,
+  width: E,
+  anchorName: u,
+  displayValueType: f,
+  backgroundColor: i = "gray"
+}) => {
+  const l = /* @__PURE__ */ p.jsx(
+    "div",
+    {
+      style: {
+        userSelect: "none",
+        whiteSpace: "nowrap"
+      },
+      children: c.name
+    }
+  ), d = f === "percentage" ? /* @__PURE__ */ p.jsx(
+    "div",
+    {
+      style: {
+        userSelect: "none",
+        whiteSpace: "nowrap"
+      },
+      children: `${Math.round(a * 100 / g)}%`
+    }
+  ) : null;
+  return /* @__PURE__ */ p.jsx(
+    Ve,
+    {
+      width: E,
+      rightNode: u === "right" ? l : d,
+      leftNode: u === "left" ? l : d,
+      options: {
+        primary: u
+      },
+      backgroundColor: i
+    }
+  );
+}, Be = ({
+  value: a,
+  proportions: g,
+  onChange: c,
+  sliderOptions: E = {
+    width: 5,
+    gap: 2
+  },
+  options: u = {
+    height: 20,
+    displayValueType: "percentage"
+  }
+}) => {
+  const f = C(null), i = a[0] + a[1], l = C(null), d = C(null), b = C(null), T = E.width + E.gap * 2, y = ae(
+    (h) => {
+      l.current = h, d.current = a[0], b.current = a[1];
+    },
+    [a]
+  ), w = ae(() => {
+    l.current = null, d.current = null, b.current = null;
+  }, []), W = ae(
+    (h) => {
+      if (l.current === null) return;
+      const A = h - l.current, j = f.current - T, x = d.current + b.current;
+      let R = d.current + A / j * x;
+      R = Math.max(0, Math.min(x, R)), c([R, x - R]);
+    },
+    [c, T]
+  );
+  return /* @__PURE__ */ p.jsxs(
+    "div",
+    {
+      ref: (h) => {
+        h && (f.current = h.getBoundingClientRect().width);
+      },
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        height: u.height
+      },
+      children: [
+        /* @__PURE__ */ p.jsx(
+          Ce,
+          {
+            value: a[0],
+            backgroundColor: g[0].backgroundColor,
+            total: i,
+            width: `calc(${a[0] * 100 / i}% - ${T / 2}px)`,
+            detail: g[0],
+            anchorName: "left",
+            displayValueType: u.displayValueType
+          }
+        ),
+        /* @__PURE__ */ p.jsx(
+          Le,
+          {
+            backgroundColor: E.backgroundColor,
+            width: E.width,
+            gap: E.gap,
+            onDragStart: y,
+            onDrag: W,
+            onDragEnd: w
+          }
+        ),
+        /* @__PURE__ */ p.jsx(
+          Ce,
+          {
+            value: a[1],
+            total: i,
+            backgroundColor: g[1].backgroundColor,
+            width: `calc(${a[1] * 100 / i}% - ${T / 2}px)`,
+            detail: g[1],
+            anchorName: "right",
+            displayValueType: u.displayValueType
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Be as ProportionSlider,
+  Be as default
+};
+//# sourceMappingURL=react-proportion-slider.es.js.map