main 🧊 update demos for throttle value, add strong support cond

debabin · debabin · commit 5852bc7b6fb4 · 2026-06-21T01:59:37.000+07:00
diff --git a/packages/core/src/bundle/hooks/useBattery/useBattery.js b/packages/core/src/bundle/hooks/useBattery/useBattery.js
@@ -14,9 +14,7 @@ import { useEffect, useState } from 'react';
  */
 export const useBattery = () => {
   const supported =
-    typeof navigator !== 'undefined' &&
-    'getBattery' in navigator &&
-    typeof navigator.getBattery === 'function';
+    typeof navigator !== 'undefined' && 'getBattery' in navigator && !!navigator.getBattery;
   const [value, setValue] = useState({
     loading: supported,
     level: 0,
diff --git a/packages/core/src/bundle/hooks/useDevicePixelRatio/useDevicePixelRatio.js b/packages/core/src/bundle/hooks/useDevicePixelRatio/useDevicePixelRatio.js
@@ -16,7 +16,9 @@ import { useEffect, useRef, useState } from 'react';
 export const useDevicePixelRatio = (callback) => {
   const supported =
     typeof window !== 'undefined' &&
-    typeof window.matchMedia === 'function' &&
+    'matchMedia' in window &&
+    !!window.matchMedia &&
+    'devicePixelRatio' in window &&
     typeof window.devicePixelRatio === 'number';
   const [value, setValue] = useState(supported ? window.devicePixelRatio : 1);
   const internalCallbackRef = useRef(callback);
diff --git a/packages/core/src/bundle/hooks/useDisplayMedia/useDisplayMedia.js b/packages/core/src/bundle/hooks/useDisplayMedia/useDisplayMedia.js
@@ -34,7 +34,8 @@ export const useDisplayMedia = (...params) => {
     typeof navigator !== 'undefined' &&
     'mediaDevices' in navigator &&
     !!navigator.mediaDevices &&
-    'getDisplayMedia' in navigator.mediaDevices;
+    'getDisplayMedia' in navigator.mediaDevices &&
+    !!navigator.mediaDevices.getDisplayMedia;
   const target = isTarget(params[0]) ? params[0] : undefined;
   const options = params[1] ? params[1] : params[0];
   const immediately = options?.immediately ?? false;
diff --git a/packages/core/src/bundle/hooks/useFileSystemAccess/useFileSystemAccess.js b/packages/core/src/bundle/hooks/useFileSystemAccess/useFileSystemAccess.js
@@ -22,8 +22,8 @@ export const useFileSystemAccess = (options = {}) => {
     typeof window !== 'undefined' &&
     'showOpenFilePicker' in window &&
     'showSaveFilePicker' in window &&
-    typeof window.showOpenFilePicker === 'function' &&
-    typeof window.showSaveFilePicker === 'function';
+    !!window.showOpenFilePicker &&
+    !!window.showSaveFilePicker;
   const dataType = options.dataType ?? 'Text';
   const handleRef = useRef(undefined);
   const [data, setData] = useState();
diff --git a/packages/core/src/bundle/hooks/useOrientation/useOrientation.js b/packages/core/src/bundle/hooks/useOrientation/useOrientation.js
@@ -15,7 +15,10 @@ import { useEffect, useRef, useState } from 'react';
  */
 export const useOrientation = (callback) => {
   const supported =
-    typeof window !== 'undefined' && 'screen' in window && 'orientation' in window.screen;
+    typeof window !== 'undefined' &&
+    'screen' in window &&
+    'orientation' in window.screen &&
+    !!window.screen.orientation;
   const orientation = supported ? window.screen.orientation : {};
   const [value, setValue] = useState({
     angle: orientation.angle ?? 0,
diff --git a/packages/core/src/bundle/hooks/useParallax/useParallax.js b/packages/core/src/bundle/hooks/useParallax/useParallax.js
@@ -79,7 +79,8 @@ export const useParallax = (...params) => {
     'DeviceOrientationEvent' in window &&
     !!window.DeviceOrientationEvent &&
     'screen' in window &&
-    'orientation' in window.screen;
+    'orientation' in window.screen &&
+    !!window.screen.orientation;
   const orientation = supported ? window.screen.orientation : undefined;
   const internalRef = useRefState();
   const internalOptionsRef = useRef(options);
diff --git a/packages/core/src/bundle/hooks/usePerformanceObserver/usePerformanceObserver.js b/packages/core/src/bundle/hooks/usePerformanceObserver/usePerformanceObserver.js
@@ -15,7 +15,10 @@ import { useEffect, useRef, useState } from 'react';
  * const { supported, entries, start, stop } = usePerformanceObserver();
  */
 export const usePerformanceObserver = (options, callback) => {
-  const supported = typeof window !== 'undefined' && !!window.PerformanceObserver;
+  const supported =
+    typeof window !== 'undefined' &&
+    'PerformanceObserver' in window &&
+    !!window.PerformanceObserver;
   const [entries, setEntries] = useState([]);
   const observerRef = useRef(undefined);
   const internalCallback = useRef(callback);
diff --git a/packages/core/src/bundle/hooks/usePictureInPicture/usePictureInPicture.js b/packages/core/src/bundle/hooks/usePictureInPicture/usePictureInPicture.js
@@ -30,7 +30,9 @@ export const usePictureInPicture = (...params) => {
   const supported =
     typeof document !== 'undefined' &&
     'pictureInPictureEnabled' in document &&
-    !!document.pictureInPictureEnabled;
+    !!document.pictureInPictureEnabled &&
+    'exitPictureInPicture' in document &&
+    !!document.exitPictureInPicture;
   const target = isTarget(params[0]) ? params[0] : undefined;
   const options = (target ? params[1] : params[0]) ?? {};
   const [opened, setOpened] = useState(false);
diff --git a/packages/core/src/bundle/hooks/usePointerLock/usePointerLock.js b/packages/core/src/bundle/hooks/usePointerLock/usePointerLock.js
@@ -16,7 +16,8 @@ export const usePointerLock = () => {
   const supported =
     typeof document !== 'undefined' &&
     'pointerLockElement' in document &&
-    typeof document.exitPointerLock === 'function';
+    'exitPointerLock' in document &&
+    !!document.exitPointerLock;
   const [element, setElement] = useState();
   useEffect(() => {
     if (!supported) return;
diff --git a/packages/core/src/bundle/hooks/useVirtualKeyboard/useVirtualKeyboard.js b/packages/core/src/bundle/hooks/useVirtualKeyboard/useVirtualKeyboard.js
@@ -17,8 +17,10 @@ import { useEffect, useState } from 'react';
  */
 export const useVirtualKeyboard = (initialValue = false) => {
   const supported =
-    (typeof window !== 'undefined' && 'visualViewport' in window) ||
-    (typeof navigator !== 'undefined' && 'virtualKeyboard' in navigator);
+    (typeof window !== 'undefined' && 'visualViewport' in window && !!window.visualViewport) ||
+    (typeof navigator !== 'undefined' &&
+      'virtualKeyboard' in navigator &&
+      !!navigator.virtualKeyboard);
   const [opened, setOpened] = useState(initialValue);
   const hide = () => {
     if (!navigator.virtualKeyboard) return;
diff --git a/packages/core/src/hooks/useBattery/useBattery.ts b/packages/core/src/hooks/useBattery/useBattery.ts
@@ -50,9 +50,7 @@ export interface UseBatteryReturn {
  */
 export const useBattery = (): UseBatteryReturn => {
   const supported =
-    typeof navigator !== 'undefined' &&
-    'getBattery' in navigator &&
-    typeof navigator.getBattery === 'function';
+    typeof navigator !== 'undefined' && 'getBattery' in navigator && !!navigator.getBattery;
 
   const [value, setValue] = useState<UseBatteryValue>({
     loading: supported,
diff --git a/packages/core/src/hooks/useDevicePixelRatio/useDevicePixelRatio.ts b/packages/core/src/hooks/useDevicePixelRatio/useDevicePixelRatio.ts
@@ -30,7 +30,9 @@ export const useDevicePixelRatio = (
 ): UseDevicePixelRatioReturn => {
   const supported =
     typeof window !== 'undefined' &&
-    typeof window.matchMedia === 'function' &&
+    'matchMedia' in window &&
+    !!window.matchMedia &&
+    'devicePixelRatio' in window &&
     typeof window.devicePixelRatio === 'number';
 
   const [value, setValue] = useState(supported ? window.devicePixelRatio : 1);
diff --git a/packages/core/src/hooks/useDisplayMedia/useDisplayMedia.ts b/packages/core/src/hooks/useDisplayMedia/useDisplayMedia.ts
@@ -74,7 +74,8 @@ export const useDisplayMedia = ((...params: any[]) => {
     typeof navigator !== 'undefined' &&
     'mediaDevices' in navigator &&
     !!navigator.mediaDevices &&
-    'getDisplayMedia' in navigator.mediaDevices;
+    'getDisplayMedia' in navigator.mediaDevices &&
+    !!navigator.mediaDevices.getDisplayMedia;
   const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;
   const options = (params[1] ? params[1] : params[0]) as UseDisplayMediaOptions | undefined;
   const immediately = options?.immediately ?? false;
diff --git a/packages/core/src/hooks/useFileSystemAccess/useFileSystemAccess.ts b/packages/core/src/hooks/useFileSystemAccess/useFileSystemAccess.ts
@@ -129,8 +129,8 @@ export const useFileSystemAccess = ((
     typeof window !== 'undefined' &&
     'showOpenFilePicker' in window &&
     'showSaveFilePicker' in window &&
-    typeof window.showOpenFilePicker === 'function' &&
-    typeof window.showSaveFilePicker === 'function';
+    !!window.showOpenFilePicker &&
+    !!window.showSaveFilePicker;
 
   const dataType = options.dataType ?? 'Text';
 
diff --git a/packages/core/src/hooks/useOrientation/useOrientation.ts b/packages/core/src/hooks/useOrientation/useOrientation.ts
@@ -55,7 +55,10 @@ export const useOrientation = (
   callback?: (value: UseOrientationValue) => void
 ): useOrientationReturn => {
   const supported =
-    typeof window !== 'undefined' && 'screen' in window && 'orientation' in window.screen;
+    typeof window !== 'undefined' &&
+    'screen' in window &&
+    'orientation' in window.screen &&
+    !!window.screen.orientation;
   const orientation = (supported ? window.screen.orientation : {}) as ScreenOrientation;
 
   const [value, setValue] = useState<UseOrientationValue>({
diff --git a/packages/core/src/hooks/useParallax/useParallax.ts b/packages/core/src/hooks/useParallax/useParallax.ts
@@ -165,7 +165,8 @@ export const useParallax = ((...params: any[]) => {
     'DeviceOrientationEvent' in window &&
     !!window.DeviceOrientationEvent &&
     'screen' in window &&
-    'orientation' in window.screen;
+    'orientation' in window.screen &&
+    !!window.screen.orientation;
 
   const orientation = supported ? window.screen.orientation : undefined;
 
diff --git a/packages/core/src/hooks/usePerformanceObserver/usePerformanceObserver.ts b/packages/core/src/hooks/usePerformanceObserver/usePerformanceObserver.ts
@@ -25,7 +25,10 @@ export const usePerformanceObserver = (
   options: UsePerformanceObserverOptions,
   callback?: PerformanceObserverCallback
 ) => {
-  const supported = typeof window !== 'undefined' && !!window.PerformanceObserver;
+  const supported =
+    typeof window !== 'undefined' &&
+    'PerformanceObserver' in window &&
+    !!window.PerformanceObserver;
   const [entries, setEntries] = useState<PerformanceEntry[]>([]);
 
   const observerRef = useRef<PerformanceObserver>(undefined);
diff --git a/packages/core/src/hooks/usePictureInPicture/usePictureInPicture.ts b/packages/core/src/hooks/usePictureInPicture/usePictureInPicture.ts
@@ -67,7 +67,9 @@ export const usePictureInPicture = ((...params: any[]) => {
   const supported =
     typeof document !== 'undefined' &&
     'pictureInPictureEnabled' in document &&
-    !!document.pictureInPictureEnabled;
+    !!document.pictureInPictureEnabled &&
+    'exitPictureInPicture' in document &&
+    !!document.exitPictureInPicture;
 
   const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;
   const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};
diff --git a/packages/core/src/hooks/usePointerLock/usePointerLock.ts b/packages/core/src/hooks/usePointerLock/usePointerLock.ts
@@ -31,7 +31,8 @@ export const usePointerLock = (): UsePointerLockReturn => {
   const supported =
     typeof document !== 'undefined' &&
     'pointerLockElement' in document &&
-    typeof document.exitPointerLock === 'function';
+    'exitPointerLock' in document &&
+    !!document.exitPointerLock;
   const [element, setElement] = useState<Element>();
 
   useEffect(() => {
diff --git a/packages/core/src/hooks/useThrottleValue/useThrottleValue.demo.tsx b/packages/core/src/hooks/useThrottleValue/useThrottleValue.demo.tsx
@@ -1,57 +1,89 @@
-import { useThrottleState } from '@siberiacancode/reactuse';
+import type { MouseEvent } from 'react';
+
+import { useThrottleValue } from '@siberiacancode/reactuse';
 import { useRef, useState } from 'react';
 
+const hslToHex = (h: number, s: number, l: number) => {
+  const lightness = l / 100;
+  const a = (s * Math.min(lightness, 1 - lightness)) / 100;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+};
+
 const Demo = () => {
-  const [text, setText] = useState('');
-  const [typing, setTyping] = useThrottleState(false, 1500);
-  const silenceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const [hsl, setHsl] = useState({ h: 210, l: 50 });
+  const draggingRef = useRef(false);
+
+  const throttledHsl = useThrottleValue(hsl, 120);
+  const hex = hslToHex(throttledHsl.h, 70, throttledHsl.l);
+
+  const pick = (event: MouseEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+    const y = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
+    setHsl({
+      h: Math.round((x / rect.width) * 360),
+      l: Math.round(90 - (y / rect.height) * 80)
+    });
+  };
 
-  const onChange = (value: string) => {
-    setText(value);
-    setTyping(true);
+  const onMouseDown = (event: MouseEvent<HTMLDivElement>) => {
+    draggingRef.current = true;
+    pick(event);
+  };
 
-    clearTimeout(silenceRef.current);
-    silenceRef.current = setTimeout(setTyping, 2000, false);
+  const onMouseMove = (event: MouseEvent<HTMLDivElement>) => {
+    if (draggingRef.current) pick(event);
   };
 
   return (
     <section className='flex w-full max-w-sm flex-col p-4'>
-      <div className='border-border bg-card flex h-80 flex-col overflow-hidden rounded-xl border'>
-        <div className='border-border flex items-center gap-2.5 border-b px-4 py-3'>
-          <div className='relative'>
-            <div className='bg-muted flex size-9 items-center justify-center rounded-full text-sm font-medium'>
-              D
-            </div>
-            <span className='border-card absolute right-0 bottom-0 size-2.5 rounded-full border-2 bg-green-500' />
-          </div>
-          <div className='flex flex-col leading-tight'>
-            <span className='text-foreground text-sm font-medium'>debabin</span>
-            <span className='text-muted-foreground text-xs'>{typing ? 'typing…' : 'online'}</span>
-          </div>
+      <div data-slot='card'>
+        <div data-slot='card-header'>
+          <div data-slot='card-title'>Color picker</div>
+          <div data-slot='card-description'>Drag across the palette to pick a color.</div>
         </div>
 
-        <div className='flex flex-1 flex-col justify-end gap-2 p-4'>
-          <div className='bg-muted text-foreground self-start rounded-2xl rounded-bl-md px-3 py-2 text-sm'>
-            Hey! How's the new hook coming along?
+        <div className='flex flex-col gap-4' data-slot='card-content'>
+          <div
+            style={{
+              background:
+                'linear-gradient(to bottom, hsl(0,0%,90%), transparent, hsl(0,0%,10%)), linear-gradient(to right, hsl(0,70%,50%), hsl(60,70%,50%), hsl(120,70%,50%), hsl(180,70%,50%), hsl(240,70%,50%), hsl(300,70%,50%), hsl(360,70%,50%))'
+            }}
+            className='relative h-44 w-full cursor-crosshair overflow-hidden rounded-lg select-none'
+            onMouseDown={onMouseDown}
+            onMouseLeave={() => (draggingRef.current = false)}
+            onMouseMove={onMouseMove}
+            onMouseUp={() => (draggingRef.current = false)}
+          >
+            <div
+              style={{
+                left: `${(hsl.h / 360) * 100}%`,
+                top: `${((90 - hsl.l) / 80) * 100}%`,
+                background: hslToHex(hsl.h, 70, hsl.l)
+              }}
+              className='pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md'
+            />
           </div>
 
-          {typing && (
-            <div className='bg-muted flex items-center gap-1 self-start rounded-2xl rounded-bl-md px-3.5 py-3'>
-              <span className='bg-muted-foreground/60 size-1.5 animate-bounce rounded-full [animation-delay:-0.3s]' />
-              <span className='bg-muted-foreground/60 size-1.5 animate-bounce rounded-full [animation-delay:-0.15s]' />
-              <span className='bg-muted-foreground/60 size-1.5 animate-bounce rounded-full' />
+          <div className='flex items-center gap-3'>
+            <div
+              className='border-border size-11 shrink-0 rounded-lg border transition-colors duration-100'
+              style={{ background: hex }}
+            />
+            <div className='flex flex-1 flex-col leading-tight'>
+              <span className='text-muted-foreground text-xs'>Selected</span>
+              <span className='text-foreground font-mono text-base font-semibold tabular-nums'>
+                {hex}
+              </span>
             </div>
-          )}
-        </div>
-
-        <div className='border-border border-t p-3'>
-          <input
-            className='w-full!'
-            placeholder='Type a message…'
-            type='text'
-            value={text}
-            onChange={(event) => onChange(event.target.value)}
-          />
+          </div>
         </div>
       </div>
     </section>
diff --git a/packages/core/src/hooks/useVirtualKeyboard/useVirtualKeyboard.test.ts b/packages/core/src/hooks/useVirtualKeyboard/useVirtualKeyboard.test.ts
diff --git a/packages/core/src/hooks/useVirtualKeyboard/useVirtualKeyboard.ts b/packages/core/src/hooks/useVirtualKeyboard/useVirtualKeyboard.ts
diff --git a/packages/newdocs/app/(docs)/_components/layout/FunctionHeader/components/Burger/Burger.tsx b/packages/newdocs/app/(docs)/_components/layout/FunctionHeader/components/Burger/Burger.tsx
diff --git a/packages/newdocs/content/functions/hooks/useResizeObserver.meta.json b/packages/newdocs/content/functions/hooks/useResizeObserver.meta.json
diff --git a/packages/newdocs/content/functions/hooks/useScript.meta.json b/packages/newdocs/content/functions/hooks/useScript.meta.json
diff --git a/packages/newdocs/content/functions/hooks/useThrottleValue.meta.json b/packages/newdocs/content/functions/hooks/useThrottleValue.meta.json
diff --git a/packages/newdocs/content/functions/hooks/useVirtualKeyboard.meta.json b/packages/newdocs/content/functions/hooks/useVirtualKeyboard.meta.json
diff --git a/packages/newdocs/generated/demos/hooks/useThrottleValue.demo.tsx b/packages/newdocs/generated/demos/hooks/useThrottleValue.demo.tsx
diff --git a/packages/newdocs/generated/demos/hooks/useVirtualKeyboard.demo.tsx b/packages/newdocs/generated/demos/hooks/useVirtualKeyboard.demo.tsx
