@tamagui/focus-scope 1.43.1 → 1.43.3

package/src/FocusScope.tsx

@@ -14,144 +14,155 @@ type FocusableTarget = HTMLElement | { focus(): void }
  * FocusScope
  * -----------------------------------------------------------------------------------------------*/
 
-const FOCUS_SCOPE_NAME = 'FocusScope'
-
 type FocusScopeElement = HTMLDivElement
 
 const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>(
-  (props, forwardedRef) => {
-    const {
-      loop = false,
-      trapped = false,
-      onMountAutoFocus: onMountAutoFocusProp,
-      onUnmountAutoFocus: onUnmountAutoFocusProp,
-      children,
-      forceUnmount,
-      ...scopeProps
-    } = props
-    const [container, setContainer] = React.useState<HTMLElement | null>(null)
-    const onMountAutoFocus = useEvent(onMountAutoFocusProp)
-    const onUnmountAutoFocus = useEvent(onUnmountAutoFocusProp)
-    const lastFocusedElementRef = React.useRef<HTMLElement | null>(null)
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node))
-
-    const focusScope = React.useRef({
-      paused: false,
-      pause() {
-        this.paused = true
-      },
-      resume() {
-        this.paused = false
-      },
-    }).current
-
-    // Takes care of trapping focus if focus is moved outside programmatically for example
-    React.useEffect(() => {
-      if (!trapped) return
-      function handleFocusIn(event: FocusEvent) {
-        if (focusScope.paused || !container) return
-        const target = event.target as HTMLElement | null
-        if (container.contains(target)) {
-          lastFocusedElementRef.current = target
-        } else {
-          focus(lastFocusedElementRef.current, { select: true })
-        }
-      }
+  function FocusScope(props, forwardedRef) {
+    const childProps = useFocusScope(props, forwardedRef)
 
-      function handleFocusOut(event: FocusEvent) {
-        if (focusScope.paused || !container) return
-        if (!container.contains(event.relatedTarget as HTMLElement | null)) {
-          focus(lastFocusedElementRef.current, { select: true })
-        }
+    if (typeof props.children === 'function') {
+      return <>{props.children(childProps)}</>
+    }
+
+    return React.cloneElement(React.Children.only(props.children) as any, childProps)
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * useFocusScope
+ * -----------------------------------------------------------------------------------------------*/
+
+export function useFocusScope(
+  props: FocusScopeProps,
+  forwardedRef: React.ForwardedRef<FocusScopeElement>
+) {
+  const {
+    loop = false,
+    trapped = false,
+    onMountAutoFocus: onMountAutoFocusProp,
+    onUnmountAutoFocus: onUnmountAutoFocusProp,
+    forceUnmount,
+    ...scopeProps
+  } = props
+  const [container, setContainer] = React.useState<HTMLElement | null>(null)
+  const onMountAutoFocus = useEvent(onMountAutoFocusProp)
+  const onUnmountAutoFocus = useEvent(onUnmountAutoFocusProp)
+  const lastFocusedElementRef = React.useRef<HTMLElement | null>(null)
+  const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node))
+
+  const focusScope = React.useRef({
+    paused: false,
+    pause() {
+      this.paused = true
+    },
+    resume() {
+      this.paused = false
+    },
+  }).current
+
+  // Takes care of trapping focus if focus is moved outside programmatically for example
+  React.useEffect(() => {
+    if (!trapped) return
+    function handleFocusIn(event: FocusEvent) {
+      if (focusScope.paused || !container) return
+      const target = event.target as HTMLElement | null
+      if (container.contains(target)) {
+        lastFocusedElementRef.current = target
+      } else {
+        focus(lastFocusedElementRef.current, { select: true })
       }
+    }
 
-      document.addEventListener('focusin', handleFocusIn)
-      document.addEventListener('focusout', handleFocusOut)
-      return () => {
-        document.removeEventListener('focusin', handleFocusIn)
-        document.removeEventListener('focusout', handleFocusOut)
+    function handleFocusOut(event: FocusEvent) {
+      if (focusScope.paused || !container) return
+      if (!container.contains(event.relatedTarget as HTMLElement | null)) {
+        focus(lastFocusedElementRef.current, { select: true })
       }
-    }, [trapped, forceUnmount, container, focusScope.paused])
-
-    React.useEffect(() => {
-      if (!container) return
-      if (forceUnmount) return
-      focusScopesStack.add(focusScope)
-      const previouslyFocusedElement = document.activeElement as HTMLElement | null
-      const hasFocusedCandidate = container.contains(previouslyFocusedElement)
-
-      if (!hasFocusedCandidate) {
-        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
-        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)
-        container.dispatchEvent(mountEvent)
-        if (!mountEvent.defaultPrevented) {
-          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true })
-          if (document.activeElement === previouslyFocusedElement) {
-            focus(container)
-          }
+    }
+
+    document.addEventListener('focusin', handleFocusIn)
+    document.addEventListener('focusout', handleFocusOut)
+    return () => {
+      document.removeEventListener('focusin', handleFocusIn)
+      document.removeEventListener('focusout', handleFocusOut)
+    }
+  }, [trapped, forceUnmount, container, focusScope.paused])
+
+  React.useEffect(() => {
+    if (!container) return
+    if (forceUnmount) return
+    focusScopesStack.add(focusScope)
+    const previouslyFocusedElement = document.activeElement as HTMLElement | null
+    const hasFocusedCandidate = container.contains(previouslyFocusedElement)
+
+    if (!hasFocusedCandidate) {
+      const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
+      container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)
+      container.dispatchEvent(mountEvent)
+      if (!mountEvent.defaultPrevented) {
+        focusFirst(removeLinks(getTabbableCandidates(container)), { select: true })
+        if (document.activeElement === previouslyFocusedElement) {
+          focus(container)
         }
       }
+    }
 
-      return () => {
-        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)
+    return () => {
+      container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)
 
-        const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS)
-        container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)
-        container.dispatchEvent(unmountEvent)
-        if (!unmountEvent.defaultPrevented) {
-          focus(previouslyFocusedElement ?? document.body, { select: true })
-        }
-        // we need to remove the listener after we `dispatchEvent`
-        container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)
-
-        focusScopesStack.remove(focusScope)
+      const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS)
+      container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)
+      container.dispatchEvent(unmountEvent)
+      if (!unmountEvent.defaultPrevented) {
+        focus(previouslyFocusedElement ?? document.body, { select: true })
       }
-    }, [container, forceUnmount, onMountAutoFocus, onUnmountAutoFocus, focusScope])
-
-    // Takes care of looping focus (when tabbing whilst at the edges)
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent) => {
-        if (!(loop || trapped)) return
-        if (focusScope.paused) return
-
-        const isTabKey =
-          event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey
-        const focusedElement = document.activeElement as HTMLElement | null
-
-        if (isTabKey && focusedElement) {
-          const container = event.currentTarget as HTMLElement
-          const [first, last] = getTabbableEdges(container)
-          const hasTabbableElementsInside = first && last
-
-          // we can only wrap focus if we have tabbable edges
-          if (!hasTabbableElementsInside) {
-            if (focusedElement === container) event.preventDefault()
-          } else {
-            if (!event.shiftKey && focusedElement === last) {
-              event.preventDefault()
-              if (loop) focus(first, { select: true })
-            } else if (event.shiftKey && focusedElement === first) {
-              event.preventDefault()
-              if (loop) focus(last, { select: true })
-            }
+      // we need to remove the listener after we `dispatchEvent`
+      container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)
+
+      focusScopesStack.remove(focusScope)
+    }
+  }, [container, forceUnmount, onMountAutoFocus, onUnmountAutoFocus, focusScope])
+
+  // Takes care of looping focus (when tabbing whilst at the edges)
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (!trapped) return
+      if (!loop) return
+      if (focusScope.paused) return
+
+      const isTabKey =
+        event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey
+      const focusedElement = document.activeElement as HTMLElement | null
+
+      if (isTabKey && focusedElement) {
+        const container = event.currentTarget as HTMLElement
+        const [first, last] = getTabbableEdges(container)
+        const hasTabbableElementsInside = first && last
+
+        // we can only wrap focus if we have tabbable edges
+        if (!hasTabbableElementsInside) {
+          if (focusedElement === container) event.preventDefault()
+        } else {
+          if (!event.shiftKey && focusedElement === last) {
+            event.preventDefault()
+            if (loop) focus(first, { select: true })
+          } else if (event.shiftKey && focusedElement === first) {
+            event.preventDefault()
+            if (loop) focus(last, { select: true })
           }
         }
-      },
-      [loop, trapped, focusScope.paused],
-    )
-
-    const child = React.Children.only(children)
-
-    return React.cloneElement(child as any, {
-      tabIndex: -1,
-      ...scopeProps,
-      ref: composedRefs,
-      onKeyDown: handleKeyDown,
-    })
-  },
-)
+      }
+    },
+    [loop, trapped, focusScope.paused]
+  )
 
-FocusScope.displayName = FOCUS_SCOPE_NAME
+  return {
+    tabIndex: -1,
+    ...scopeProps,
+    ref: composedRefs,
+    onKeyDown: handleKeyDown,
+  }
+}
 
 /* -------------------------------------------------------------------------------------------------
  * Utils
@@ -194,8 +205,7 @@ function getTabbableCandidates(container: HTMLElement) {
   const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (node: any) => {
       const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'
-      if (node.disabled || node.hidden || isHiddenInput)
-        return NodeFilter.FILTER_SKIP
+      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP
       // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
       // runtime's understanding of tabbability, so this automatically accounts
       // for any kind of element that could be tabbed to.
@@ -231,7 +241,7 @@ function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {
 }
 
 function isSelectableInput(
-  element: any,
+  element: any
 ): element is FocusableTarget & { select: () => void } {
   return element instanceof HTMLInputElement && 'select' in element
 }

package/src/FocusScopeProps.tsx

@@ -32,5 +32,11 @@ export interface FocusScopeProps {
    */
   forceUnmount?: boolean
 
-  children?: React.ReactNode
+  children?:
+    | React.ReactNode
+    | ((props: {
+        onKeyDown: (event: React.KeyboardEvent) => void
+        tabIndex: number
+        ref: React.ForwardedRef<any>
+      }) => React.ReactNode)
 }

package/types/FocusScope.d.ts

@@ -1,6 +1,17 @@
 import * as React from 'react';
 import { FocusScopeProps } from './FocusScopeProps';
+type FocusScopeElement = HTMLDivElement;
 declare const FocusScope: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
+export declare function useFocusScope(props: FocusScopeProps, forwardedRef: React.ForwardedRef<FocusScopeElement>): {
+    ref: (node: HTMLDivElement) => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    children?: React.ReactNode | ((props: {
+        onKeyDown: (event: React.KeyboardEvent<Element>) => void;
+        tabIndex: number;
+        ref: React.ForwardedRef<any>;
+    }) => React.ReactNode);
+    tabIndex: number;
+};
 export { FocusScope };
 export type { FocusScopeProps };
 //# sourceMappingURL=FocusScope.d.ts.map

package/types/FocusScope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusScope.d.ts","sourceRoot":"","sources":["../src/FocusScope.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAgBnD,QAAA,MAAM,UAAU,wFAmIf,CAAA;AA8ID,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"FocusScope.d.ts","sourceRoot":"","sources":["../src/FocusScope.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAYnD,KAAK,iBAAiB,GAAG,cAAc,CAAA;AAEvC,QAAA,MAAM,UAAU,wFAUf,CAAA;AAMD,wBAAgB,aAAa,CAC3B,KAAK,EAAE,eAAe,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC;;uBA2FzC,mBAAmB;;;;;;;EAqC9B;AA2ID,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/types/FocusScopeProps.d.ts

@@ -26,6 +26,10 @@ export interface FocusScopeProps {
      * If unmount is animated, you want to force re-focus at start of animation not after
      */
     forceUnmount?: boolean;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((props: {
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        tabIndex: number;
+        ref: React.ForwardedRef<any>;
+    }) => React.ReactNode);
 }
 //# sourceMappingURL=FocusScopeProps.d.ts.map

package/types/FocusScopeProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusScopeProps.d.ts","sourceRoot":"","sources":["../src/FocusScopeProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEzC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B"}
+{"version":3,"file":"FocusScopeProps.d.ts","sourceRoot":"","sources":["../src/FocusScopeProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEzC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QACP,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;QAC/C,QAAQ,EAAE,MAAM,CAAA;QAChB,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;KAC7B,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CAC3B"}