@hoosei/voxweave-react/dist/esm/index30.js

A customizable and interactive voice UI component for React applications

import * as o from "react";
import { useLayoutEffect as m } from "./index39.js";
var v = o[" useInsertionEffect ".trim().toString()] || m;
function w({
  prop: e,
  defaultProp: s,
  onChange: t = () => {
  },
  caller: f
}) {
  const [u, c, i] = R({
    defaultProp: s,
    onChange: t
  }), n = e !== void 0, a = n ? e : u;
  {
    const r = o.useRef(e !== void 0);
    o.useEffect(() => {
      const l = r.current;
      l !== n && console.warn(
        `${f} is changing from ${l ? "controlled" : "uncontrolled"} to ${n ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
      ), r.current = n;
    }, [n, f]);
  }
  const d = o.useCallback(
    (r) => {
      if (n) {
        const l = C(r) ? r(e) : r;
        l !== e && i.current?.(l);
      } else
        c(r);
    },
    [n, e, c, i]
  );
  return [a, d];
}
function R({
  defaultProp: e,
  onChange: s
}) {
  const [t, f] = o.useState(e), u = o.useRef(t), c = o.useRef(s);
  return v(() => {
    c.current = s;
  }, [s]), o.useEffect(() => {
    u.current !== t && (c.current?.(t), u.current = t);
  }, [t, u]), [t, f, c];
}
function C(e) {
  return typeof e == "function";
}
export {
  w as useControllableState
};
//# sourceMappingURL=index30.js.map