@trackunit/react-drawer 1.3.4 → 1.3.6

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 (3) hide show
  1. package/index.cjs.js +28 -17
  2. package/index.esm.js +28 -17
  3. package/package.json +5 -5
package/index.cjs.js CHANGED
@@ -283,28 +283,36 @@ const cvaToggleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"
283
283
  },
284
284
  });
285
285
 
286
+ const blockDocumentScroll = () => {
287
+ const { body } = document;
288
+ const html = document.documentElement;
289
+ const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
290
+ const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
291
+ html.style.position = "relative";
292
+ html.style.overflow = "hidden";
293
+ body.style.position = "relative";
294
+ body.style.overflow = "hidden";
295
+ body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
296
+ };
297
+ const restoreDocumentScroll = () => {
298
+ const { body } = document;
299
+ const html = document.documentElement;
300
+ html.style.position = "";
301
+ html.style.overflow = "";
302
+ body.style.position = "";
303
+ body.style.overflow = "";
304
+ body.style.paddingRight = "";
305
+ };
286
306
  /**
287
307
  * Hook for blocking scroll to prevent strange behaviors when full-screen swipeable components are open.
288
308
  */
289
309
  const useScrollBlock = ({ isDisabled }) => {
290
310
  const scrollBlocked = react.useRef(false);
291
311
  const blockScroll = react.useCallback(() => {
292
- const { body } = document;
293
- const html = document.documentElement;
294
- const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
295
- const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
296
- html.style.position = "relative";
297
- html.style.overflow = "hidden";
298
- body.style.position = "relative";
299
- body.style.overflow = "hidden";
300
- body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
312
+ blockDocumentScroll();
301
313
  scrollBlocked.current = true;
302
314
  return () => {
303
- html.style.position = "";
304
- html.style.overflow = "";
305
- body.style.position = "";
306
- body.style.overflow = "";
307
- body.style.paddingRight = "";
315
+ restoreDocumentScroll();
308
316
  scrollBlocked.current = false;
309
317
  };
310
318
  }, []);
@@ -344,15 +352,18 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
344
352
  const [isDragging, setIsDragging] = react.useState(false);
345
353
  const [dragDistance, setDragDistance] = react.useState(0);
346
354
  const currentY = react.useRef(0);
347
- const currentHeight = react.useRef(0);
355
+ const [currentHeight, setCurrentHeight] = react.useState(0);
348
356
  const geometry = reactComponents.useGeometry(ref);
349
- const threshold = currentHeight.current * closingThreshold;
357
+ const [threshold, setThreshold] = react.useState(0);
358
+ react.useEffect(() => {
359
+ setThreshold(currentHeight * closingThreshold);
360
+ }, [currentHeight, closingThreshold]);
350
361
  const handlers = reactSwipeable.useSwipeable({
351
362
  onTouchStartOrOnMouseDown: () => {
352
363
  const y = getElementYTranslation(ref.current);
353
364
  const height = geometry.height;
354
365
  currentY.current = y;
355
- currentHeight.current = height;
366
+ setCurrentHeight(height);
356
367
  setDragDistance(y);
357
368
  setIsDragging(true);
358
369
  },
package/index.esm.js CHANGED
@@ -281,28 +281,36 @@ const cvaToggleContainer = cvaMerge(["z-8", "absolute"], {
281
281
  },
282
282
  });
283
283
 
284
+ const blockDocumentScroll = () => {
285
+ const { body } = document;
286
+ const html = document.documentElement;
287
+ const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
288
+ const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
289
+ html.style.position = "relative";
290
+ html.style.overflow = "hidden";
291
+ body.style.position = "relative";
292
+ body.style.overflow = "hidden";
293
+ body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
294
+ };
295
+ const restoreDocumentScroll = () => {
296
+ const { body } = document;
297
+ const html = document.documentElement;
298
+ html.style.position = "";
299
+ html.style.overflow = "";
300
+ body.style.position = "";
301
+ body.style.overflow = "";
302
+ body.style.paddingRight = "";
303
+ };
284
304
  /**
285
305
  * Hook for blocking scroll to prevent strange behaviors when full-screen swipeable components are open.
286
306
  */
287
307
  const useScrollBlock = ({ isDisabled }) => {
288
308
  const scrollBlocked = useRef(false);
289
309
  const blockScroll = useCallback(() => {
290
- const { body } = document;
291
- const html = document.documentElement;
292
- const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
293
- const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
294
- html.style.position = "relative";
295
- html.style.overflow = "hidden";
296
- body.style.position = "relative";
297
- body.style.overflow = "hidden";
298
- body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
310
+ blockDocumentScroll();
299
311
  scrollBlocked.current = true;
300
312
  return () => {
301
- html.style.position = "";
302
- html.style.overflow = "";
303
- body.style.position = "";
304
- body.style.overflow = "";
305
- body.style.paddingRight = "";
313
+ restoreDocumentScroll();
306
314
  scrollBlocked.current = false;
307
315
  };
308
316
  }, []);
@@ -342,15 +350,18 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
342
350
  const [isDragging, setIsDragging] = useState(false);
343
351
  const [dragDistance, setDragDistance] = useState(0);
344
352
  const currentY = useRef(0);
345
- const currentHeight = useRef(0);
353
+ const [currentHeight, setCurrentHeight] = useState(0);
346
354
  const geometry = useGeometry(ref);
347
- const threshold = currentHeight.current * closingThreshold;
355
+ const [threshold, setThreshold] = useState(0);
356
+ useEffect(() => {
357
+ setThreshold(currentHeight * closingThreshold);
358
+ }, [currentHeight, closingThreshold]);
348
359
  const handlers = useSwipeable({
349
360
  onTouchStartOrOnMouseDown: () => {
350
361
  const y = getElementYTranslation(ref.current);
351
362
  const height = geometry.height;
352
363
  currentY.current = y;
353
- currentHeight.current = height;
364
+ setCurrentHeight(height);
354
365
  setDragDistance(y);
355
366
  setIsDragging(true);
356
367
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-drawer",
3
- "version": "1.3.4",
3
+ "version": "1.3.6",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -9,10 +9,10 @@
9
9
  "dependencies": {
10
10
  "react": "18.3.1",
11
11
  "react-swipeable": "^7.0.1",
12
- "@trackunit/react-components": "1.4.4",
13
- "@trackunit/css-class-variance-utilities": "1.3.4",
14
- "@trackunit/ui-icons": "1.3.4",
15
- "@trackunit/i18n-library-translation": "1.3.4"
12
+ "@trackunit/react-components": "1.4.6",
13
+ "@trackunit/css-class-variance-utilities": "1.3.6",
14
+ "@trackunit/ui-icons": "1.3.6",
15
+ "@trackunit/i18n-library-translation": "1.3.6"
16
16
  },
17
17
  "module": "./index.esm.js",
18
18
  "main": "./index.cjs.js",