main 🧊 add use focus trap, use visibility

Author: debabin

packages/core/src/bundle/hooks/sensors.js

@@ -1,43 +1,35 @@
 export * from './useBreakpoints/useBreakpoints';
-// device
 export * from './useDeviceMotion/useDeviceMotion';
 export * from './useDeviceOrientation/useDeviceOrientation';
 export * from './useDevicePixelRatio/useDevicePixelRatio';
 export * from './useDocumentEvent/useDocumentEvent';
 export * from './useDocumentVisibility/useDocumentVisibility';
-// size
 export * from './useElementSize/useElementSize';
-// event
 export * from './useEventListener/useEventListener';
 export * from './useHotkeys/useHotkeys';
 export * from './useIdle/useIdle';
 export * from './useInfiniteScroll/useInfiniteScroll';
 export * from './useIntersectionObserver/useIntersectionObserver';
-// keyboard
 export * from './useKeyboard/useKeyboard';
 export * from './useKeyPress/useKeyPress';
 export * from './useKeyPressEvent/useKeyPressEvent';
 export * from './useKeysPressed/useKeysPressed';
-// scroll
 export * from './useLockScroll/useLockScroll';
 export * from './useMeasure/useMeasure';
 export * from './useMediaQuery/useMediaQuery';
-// mouse
 export * from './useMouse/useMouse';
 export * from './useMutationObserver/useMutationObserver';
 export * from './useOrientation/useOrientation';
 export * from './usePageLeave/usePageLeave';
 export * from './useParallax/useParallax';
 export * from './usePerformanceObserver/usePerformanceObserver';
-// observer
 export * from './useResizeObserver/useResizeObserver';
 export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
-// text
 export * from './useTextSelection/useTextSelection';
+export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';
-// visibility
 export * from './useWindowFocus/useWindowFocus';
 export * from './useWindowScroll/useWindowScroll';
 export * from './useWindowSize/useWindowSize';

packages/core/src/bundle/hooks/useFocusTrap/useFocusTrap.js

@@ -2,36 +2,19 @@ import { useState } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 import { useRefState } from '../useRefState/useRefState';
-const FOCUSABLE_ELEMENTS_SELECTOR = [
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  'button:not([disabled])',
-  'a[href]',
-  'area[href]',
-  'summary',
-  'iframe',
-  'object',
-  'embed',
-  'audio[controls]',
-  'video[controls]',
-  '[contenteditable]',
-  '[tabindex]:not([tabindex^="-"])'
-].join(',');
+export const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';
 const getFocusableElements = (element) => {
-  const elements = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR));
-  return elements.filter((el) => {
-    const htmlEl = el;
+  const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));
+  return elements.filter((element) => {
+    const htmlEl = element;
     return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';
   });
 };
 const focusElement = (element) => {
   const autofocusElement = element.querySelector('[data-autofocus]');
   if (autofocusElement) return autofocusElement.focus();
   const focusableElements = getFocusableElements(element);
-  if (focusableElements.length > 0) {
-    focusableElements[0].focus();
-  }
+  if (focusableElements.length) focusableElements[0].focus();
 };
 /**
  * @name useFocusTrap

packages/core/src/bundle/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -17,7 +17,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
- * const { ref, entry, inView, observer } = useIntersectionObserver();
+ * const { ref, entries, observer } = useIntersectionObserver();
  *
  * @overload
  * @template Target The target element
@@ -27,23 +27,23 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
  *
  * @example
- * const { entry, inView, observer } = useIntersectionObserver(ref);
+ * const { entries, observer } = useIntersectionObserver(ref);
  *
  * @overload
  * @template Target The target element
  * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected
  * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
  *
  * @example
- * const { ref, entry, inView, observer } = useIntersectionObserver(() => console.log('callback'));
+ * const { ref, entries, observer } = useIntersectionObserver(() => console.log('callback'));
  *
  * @overload
  * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected
  * @param {HookTarget} target The target element to detect intersection
  * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
- * const { entry, inView, observer } = useIntersectionObserver(() => console.log('callback'), ref);
+ * const { entries, observer } = useIntersectionObserver(ref, () => console.log('callback'));
  */
 export const useIntersectionObserver = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
@@ -57,7 +57,7 @@ export const useIntersectionObserver = (...params) => {
   const callback = options?.onChange;
   const enabled = options?.enabled ?? true;
   const [observer, setObserver] = useState();
-  const [entry, setEntry] = useState();
+  const [entries, setEntries] = useState();
   const internalRef = useRefState();
   const internalCallbackRef = useRef(callback);
   internalCallbackRef.current = callback;
@@ -66,9 +66,9 @@ export const useIntersectionObserver = (...params) => {
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(
-      ([entry], observer) => {
-        setEntry(entry);
-        internalCallbackRef.current?.(entry, observer);
+      (entries, observer) => {
+        setEntries(entries);
+        internalCallbackRef.current?.(entries, observer);
       },
       {
         ...options,
@@ -81,11 +81,10 @@ export const useIntersectionObserver = (...params) => {
       observer.disconnect();
     };
   }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);
-  if (target) return { observer, entry, inView: !!entry?.isIntersecting };
+  if (target) return { observer, entries };
   return {
     observer,
     ref: internalRef,
-    entry,
-    inView: !!entry?.isIntersecting
+    entries
   };
 };

packages/core/src/bundle/hooks/useUrlSearchParams/useUrlSearchParams.js

@@ -42,7 +42,7 @@ export const useUrlSearchParams = (params) => {
       'mode' in params ||
       'write' in params)
       ? params
-      : undefined;
+      : {};
   const initialValue = options ? options?.initialValue : params;
   const { mode = 'history', write: writeMode = 'replace' } = options;
   const serializer = (value) => {

packages/core/src/bundle/hooks/useVisibility/useVisibility.js

@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from 'react';
+import { getElement, isTarget } from '@/utils/helpers';
+import { useRefState } from '../useRefState/useRefState';
+/**
+ * @name useVisibility
+ * @description - Hook that gives you visibility observer state
+ * @category Sensors
+ * @usage medium
+ *
+ * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+ *
+ * @overload
+ * @param {HookTarget} target The target element to detect intersection
+ * @param {boolean} [options.enabled=true] The Intersection options
+ * @param {((entries: IntersectionEntry[], observer: Intersection) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
+ * @param {HookTarget} [options.root=document] The root element to observe
+ * @returns {UseVisibilityReturn} An object containing the state
+ *
+ * @example
+ * const { ref, entries, observer } = useVisibility();
+ *
+ * @overload
+ * @template Target The target element
+ * @param {boolean} [options.enabled=true] The Intersection options
+ * @param {((entries: IntersectionEntry[], observer: Intersection) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
+ * @param {HookTarget} [options.root=document] The root element to observe
+ * @returns {UseVisibilityReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { entries, observer } = useVisibility(ref);
+ *
+ * @overload
+ * @template Target The target element
+ * @param {UseVisibilityCallback} callback The callback to execute when intersection is detected
+ * @returns {UseVisibilityReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { ref, entries, observer } = useVisibility(() => console.log('callback'));
+ *
+ * @overload
+ * @param {UseVisibilityCallback} callback The callback to execute when intersection is detected
+ * @param {HookTarget} target The target element to detect intersection
+ * @returns {UseVisibilityReturn} An object containing the state
+ *
+ * @example
+ * const { entries, observer } = useVisibility(ref, () => console.log('callback'));
+ */
+export const useVisibility = (...params) => {
+  const target = isTarget(params[0]) ? params[0] : undefined;
+  const options = target
+    ? typeof params[1] === 'object'
+      ? params[1]
+      : { onChange: params[1] }
+    : typeof params[0] === 'object'
+      ? params[0]
+      : { onChange: params[0] };
+  const callback = options?.onChange;
+  const enabled = options?.enabled ?? true;
+  const [observer, setObserver] = useState();
+  const [entry, setEntry] = useState();
+  const internalRef = useRefState();
+  const internalCallbackRef = useRef(callback);
+  internalCallbackRef.current = callback;
+  useEffect(() => {
+    if (!enabled || (!target && !internalRef.state)) return;
+    const element = target ? getElement(target) : internalRef.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(
+      (entries, observer) => {
+        const entry = entries.pop();
+        setEntry(entry);
+        internalCallbackRef.current?.(entry, observer);
+      },
+      {
+        ...options,
+        root: options?.root ? getElement(options.root) : document
+      }
+    );
+    setObserver(observer);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);
+  if (target) return { observer, entry, inView: !!entry?.isIntersecting };
+  return {
+    observer,
+    ref: internalRef,
+    entry,
+    inView: !!entry?.isIntersecting
+  };
+};

packages/core/src/hooks/elements.ts

@@ -8,6 +8,7 @@ export * from './useDropZone/useDropZone';
 export * from './useFileDialog/useFileDialog';
 
 export * from './useFocus/useFocus';
+export * from './useFocusTrap/useFocusTrap';
 export * from './useHover/useHover';
 // ui
 export * from './useImage/useImage';

packages/core/src/hooks/sensors.ts

@@ -1,51 +1,35 @@
 export * from './useBreakpoints/useBreakpoints';
-
-// device
 export * from './useDeviceMotion/useDeviceMotion';
 export * from './useDeviceOrientation/useDeviceOrientation';
 export * from './useDevicePixelRatio/useDevicePixelRatio';
 export * from './useDocumentEvent/useDocumentEvent';
 export * from './useDocumentVisibility/useDocumentVisibility';
-
-// size
 export * from './useElementSize/useElementSize';
-// event
 export * from './useEventListener/useEventListener';
 export * from './useHotkeys/useHotkeys';
-
 export * from './useIdle/useIdle';
 export * from './useInfiniteScroll/useInfiniteScroll';
 export * from './useIntersectionObserver/useIntersectionObserver';
-// keyboard
 export * from './useKeyboard/useKeyboard';
 export * from './useKeyPress/useKeyPress';
-
 export * from './useKeyPressEvent/useKeyPressEvent';
 export * from './useKeysPressed/useKeysPressed';
-// scroll
 export * from './useLockScroll/useLockScroll';
 export * from './useMeasure/useMeasure';
 export * from './useMediaQuery/useMediaQuery';
-// mouse
 export * from './useMouse/useMouse';
 export * from './useMutationObserver/useMutationObserver';
-
 export * from './useOrientation/useOrientation';
 export * from './usePageLeave/usePageLeave';
 export * from './useParallax/useParallax';
 export * from './usePerformanceObserver/usePerformanceObserver';
-
-// observer
 export * from './useResizeObserver/useResizeObserver';
 export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
-
-// text
 export * from './useTextSelection/useTextSelection';
-
+export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';
-// visibility
 export * from './useWindowFocus/useWindowFocus';
 export * from './useWindowScroll/useWindowScroll';
 export * from './useWindowSize/useWindowSize';