@snack-uikit/utils 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.4.0 (2024-09-23)
+
+
+### Bug Fixes
+
+* **PDS-480:** remove direct usage of browser api elements ([1231ff7](https://github.com/cloud-ru-tech/snack-uikit/commit/1231ff7ab7a1b210b579a7b694633ef23bffcf44))
+* **PDS-480:** replace useLayoutEffect -> useIsomorphicLayoutEffect for ssr ([21aa9ad](https://github.com/cloud-ru-tech/snack-uikit/commit/21aa9ad9f113e465766339d396924357ccb1d432))
+
+
+### Features
+
+* **PDS-480:** add isomorphic layoutEffect and isBrowser predicate ([057ce9d](https://github.com/cloud-ru-tech/snack-uikit/commit/057ce9d98564dc33085f031bace53f97c76d22c0))
+
+
+
+
+
 # 3.3.0 (2024-04-23)
 
 

package/dist/components/ThemeProvider/contexts.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ThemeContextType = {
     theme: string | undefined;
     themeClassName: string | undefined;

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
-export * from './useThemeConfig';
-export * from './useEventHandler';
 export * from './useDebounce';
+export * from './useEventHandler';
+export * from './useIsomorphicLayoutEffect';
+export * from './useThemeConfig';
 export * from './useValueControl';

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
-export * from './useThemeConfig';
-export * from './useEventHandler';
 export * from './useDebounce';
+export * from './useEventHandler';
+export * from './useIsomorphicLayoutEffect';
+export * from './useThemeConfig';
 export * from './useValueControl';

package/dist/hooks/useDebounce.js

@@ -1,15 +1,17 @@
 import { useRef } from 'react';
+import { isBrowser } from '../utils';
 import { useEventHandler } from './useEventHandler';
 export function useDebounce(callback, timeout = 0) {
     const timeStampRef = useRef(0);
     let timerId = -1;
     return useEventHandler(() => {
-        window.requestAnimationFrame(timestamp => {
-            if (timestamp < timeStampRef.current) {
-                clearTimeout(timerId);
-            }
-            timerId = setTimeout(callback, timeout);
-            timeStampRef.current = timestamp + timeout;
-        });
+        isBrowser() &&
+            requestAnimationFrame(timestamp => {
+                if (timestamp < timeStampRef.current) {
+                    clearTimeout(timerId);
+                }
+                timerId = setTimeout(callback, timeout);
+                timeStampRef.current = timestamp + timeout;
+            });
     });
 }

package/dist/hooks/useEventHandler.js

@@ -1,4 +1,5 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect';
 export function useEventHandler(handler) {
     const handlerRef = useRef(null);
     useLayoutEffect(() => {

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect as useLayoutEffectInternal } from 'react';
+export declare const useLayoutEffect: typeof useLayoutEffectInternal;

package/dist/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
+import { useEffect, useLayoutEffect as useLayoutEffectInternal } from 'react';
+import { isBrowser } from '../utils';
+export const useLayoutEffect = isBrowser() ? useLayoutEffectInternal : useEffect;

package/dist/hooks/useValueControl.d.ts

@@ -3,5 +3,5 @@ type UseValueControl<TValue> = {
     onChange?(value: TValue): void;
     defaultValue?: TValue;
 };
-export declare function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>): readonly [TValue | undefined, (value: any, ...args: any[]) => any];
+export declare function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>): readonly [TValue | undefined, (value: any, ...args: any[]) => ReturnType<import("uncontrollable").Handler> | void];
 export {};

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './componentPropsProcessors';
+export * from './isBrowser';

package/dist/utils/index.js

@@ -1 +1,2 @@
 export * from './componentPropsProcessors';
+export * from './isBrowser';

package/dist/utils/isBrowser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/dist/utils/isBrowser.js

@@ -0,0 +1,4 @@
+export function isBrowser() {
+    // eslint-disable-next-line @cloud-ru/ssr-safe-react/domApi
+    return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,5 +34,5 @@
   "dependencies": {
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
+  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
 }

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
-export * from './useThemeConfig';
-export * from './useEventHandler';
 export * from './useDebounce';
+export * from './useEventHandler';
+export * from './useIsomorphicLayoutEffect';
+export * from './useThemeConfig';
 export * from './useValueControl';

package/src/hooks/useDebounce.ts

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 
+import { isBrowser } from '../utils';
 import { useEventHandler } from './useEventHandler';
 
 export function useDebounce(callback: () => void, timeout = 0) {
@@ -7,12 +8,13 @@ export function useDebounce(callback: () => void, timeout = 0) {
   let timerId: NodeJS.Timeout | number = -1;
 
   return useEventHandler(() => {
-    window.requestAnimationFrame(timestamp => {
-      if (timestamp < timeStampRef.current) {
-        clearTimeout(timerId);
-      }
-      timerId = setTimeout(callback, timeout);
-      timeStampRef.current = timestamp + timeout;
-    });
+    isBrowser() &&
+      requestAnimationFrame(timestamp => {
+        if (timestamp < timeStampRef.current) {
+          clearTimeout(timerId);
+        }
+        timerId = setTimeout(callback, timeout);
+        timeStampRef.current = timestamp + timeout;
+      });
   });
 }

package/src/hooks/useEventHandler.ts

@@ -1,4 +1,6 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
+
+import { useLayoutEffect } from './useIsomorphicLayoutEffect';
 
 export function useEventHandler<T extends (...args: never[]) => unknown>(handler: T) {
   const handlerRef = useRef<T | null>(null);

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-restricted-imports
+import { useEffect, useLayoutEffect as useLayoutEffectInternal } from 'react';
+
+import { isBrowser } from '../utils';
+
+export const useLayoutEffect = isBrowser() ? useLayoutEffectInternal : useEffect;

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './componentPropsProcessors';
+export * from './isBrowser';

package/src/utils/isBrowser.ts

@@ -0,0 +1,4 @@
+export function isBrowser() {
+  // eslint-disable-next-line @cloud-ru/ssr-safe-react/domApi
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}