@cyber-harbour/ui 1.0.54 → 1.0.56

package/src/Theme/utils.ts

@@ -1,14 +1,5 @@
 import { DefaultTheme } from 'styled-components';
-import {
-  Breakpoint,
-  ButtonColor,
-  ButtonSize,
-  ButtonState,
-  ButtonVariant,
-  InputSize,
-  InputState,
-  InputVariant,
-} from './types';
+import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant, InputState, InputVariant } from './types';
 
 /**
  * Helper function to resolve nested color paths from theme
@@ -96,7 +87,11 @@ const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
  * @returns The value in rem units as a string (e.g., "1.25rem")
  */
 export const propToRem = (value: number | string, baseSize: number = 16): string => {
-  if (typeof value === 'string' && value.trim().endsWith('%')) return value; // Return percentage values as-is
+  // Check if value ends with units that should not be converted to rem
+  if (typeof value === 'string' && /(%|d?vh|d?vw)$/.test(value.trim())) {
+    return value; // Return percentage and viewport values as-is
+  }
+
   const numericValue = typeof value === 'string' ? parseFloat(value) : value;
 
   // Handle invalid values

package/src/utils.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook для блокування скролу body та збереження позиції контенту
+ * Додає padding-right замість скролбару щоб уникнути стрибків контенту
+ *
+ * @param isLocked - чи заблоковано скрол
+ */
+export const useBodyScrollLock = (isLocked: boolean) => {
+  useEffect(() => {
+    if (!isLocked) return;
+
+    const originalStyle = window.getComputedStyle(document.body);
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+    // Зберігаємо оригінальні стилі
+    const originalPaddingRight = originalStyle.paddingRight;
+    const originalOverflow = originalStyle.overflow;
+
+    // Блокуємо скрол та додаємо падінг замість скролбару
+    document.body.style.overflow = 'hidden';
+    document.body.style.paddingRight = `${parseInt(originalPaddingRight) + scrollBarWidth}px`;
+
+    return () => {
+      // Відновлюємо оригінальні стилі
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [isLocked]);
+};