@tp3/chat-widget 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/ChatWidget.js +4 -15
  2. package/dist/ChatWidget.mjs +4 -15
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +8 -16
package/dist/ChatWidget.js CHANGED
@@ -68,23 +68,12 @@ function ChatWidget({
68
68
  const typewriterTimer = (0, import_react.useRef)(null);
69
69
  (0, import_react.useEffect)(() => {
70
70
  if (open && !closing) {
71
- const scrollY = window.scrollY;
72
- document.body.style.position = "fixed";
73
- document.body.style.top = `-${scrollY}px`;
74
- document.body.style.width = "100%";
75
- } else if (!open) {
76
- const top = Math.abs(parseInt(document.body.style.top || "0", 10));
77
- document.body.style.position = "";
78
- document.body.style.top = "";
79
- document.body.style.width = "";
80
- window.scrollTo(0, top);
71
+ document.documentElement.style.overflow = "hidden";
72
+ } else {
73
+ document.documentElement.style.overflow = "";
81
74
  }
82
75
  return () => {
83
- const top = Math.abs(parseInt(document.body.style.top || "0", 10));
84
- document.body.style.position = "";
85
- document.body.style.top = "";
86
- document.body.style.width = "";
87
- if (open) window.scrollTo(0, top);
76
+ document.documentElement.style.overflow = "";
88
77
  };
89
78
  }, [open, closing]);
90
79
  (0, import_react.useEffect)(() => {
package/dist/ChatWidget.mjs CHANGED
@@ -44,23 +44,12 @@ function ChatWidget({
44
44
  const typewriterTimer = useRef(null);
45
45
  useEffect(() => {
46
46
  if (open && !closing) {
47
- const scrollY = window.scrollY;
48
- document.body.style.position = "fixed";
49
- document.body.style.top = `-${scrollY}px`;
50
- document.body.style.width = "100%";
51
- } else if (!open) {
52
- const top = Math.abs(parseInt(document.body.style.top || "0", 10));
53
- document.body.style.position = "";
54
- document.body.style.top = "";
55
- document.body.style.width = "";
56
- window.scrollTo(0, top);
47
+ document.documentElement.style.overflow = "hidden";
48
+ } else {
49
+ document.documentElement.style.overflow = "";
57
50
  }
58
51
  return () => {
59
- const top = Math.abs(parseInt(document.body.style.top || "0", 10));
60
- document.body.style.position = "";
61
- document.body.style.top = "";
62
- document.body.style.width = "";
63
- if (open) window.scrollTo(0, top);
52
+ document.documentElement.style.overflow = "";
64
53
  };
65
54
  }, [open, closing]);
66
55
  useEffect(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "main": "dist/ChatWidget.js",
5
5
  "module": "dist/ChatWidget.mjs",
6
6
  "types": "dist/ChatWidget.d.ts",
package/src/ChatWidget.tsx CHANGED
@@ -67,26 +67,18 @@ export default function ChatWidget({
67
67
  const typewriterQueue = useRef<string[]>([]);
68
68
  const typewriterTimer = useRef<ReturnType<typeof setInterval> | null>(null);
69
69
 
70
- // Lock body scroll when chat is open (no overflow:hidden to avoid keyboard issues)
70
+ // Lock scroll on the page behind the chat.
71
+ // Using overflow:hidden on <html> is the standard approach used by
72
+ // modal/chat libraries — it blocks wheel and touch scroll on desktop
73
+ // and mobile without interfering with the keyboard or viewport.
71
74
  useEffect(() => {
72
75
  if (open && !closing) {
73
- const scrollY = window.scrollY;
74
- document.body.style.position = "fixed";
75
- document.body.style.top = `-${scrollY}px`;
76
- document.body.style.width = "100%";
77
- } else if (!open) {
78
- const top = Math.abs(parseInt(document.body.style.top || "0", 10));
79
- document.body.style.position = "";
80
- document.body.style.top = "";
81
- document.body.style.width = "";
82
- window.scrollTo(0, top);
76
+ document.documentElement.style.overflow = "hidden";
77
+ } else {
78
+ document.documentElement.style.overflow = "";
83
79
  }
84
80
  return () => {
85
- const top = Math.abs(parseInt(document.body.style.top || "0", 10));
86
- document.body.style.position = "";
87
- document.body.style.top = "";
88
- document.body.style.width = "";
89
- if (open) window.scrollTo(0, top);
81
+ document.documentElement.style.overflow = "";
90
82
  };
91
83
  }, [open, closing]);
92
84