@tamagui/react-native-web-lite 1.112.5

package/src/Modal/ModalFocusTrap.js

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+import * as React from 'react'
+import { StyleSheet, UIManager, canUseDOM } from '@tamagui/react-native-web-internals'
+
+import createElement from '../createElement/index'
+import View from '../View'
+
+/**
+ * This Component is used to "wrap" the modal we're opening
+ * so that changing focus via tab will never leave the document.
+ *
+ * This allows us to properly trap the focus within a modal
+ * even if the modal is at the start or end of a document.
+ */
+
+var FocusBracket = () => {
+  return createElement('div', {
+    accessibilityRole: 'none',
+    tabIndex: 0,
+    style: styles.focusBracket,
+  })
+}
+
+function attemptFocus(element) {
+  if (!canUseDOM) {
+    return false
+  }
+
+  try {
+    element.focus()
+  } catch (e) {
+    // Do nothing
+  }
+
+  return document.activeElement === element
+}
+
+function focusFirstDescendant(element) {
+  for (var i = 0; i < element.childNodes.length; i++) {
+    var child = element.childNodes[i]
+
+    if (attemptFocus(child) || focusFirstDescendant(child)) {
+      return true
+    }
+  }
+
+  return false
+}
+
+function focusLastDescendant(element) {
+  for (var i = element.childNodes.length - 1; i >= 0; i--) {
+    var child = element.childNodes[i]
+
+    if (attemptFocus(child) || focusLastDescendant(child)) {
+      return true
+    }
+  }
+
+  return false
+}
+
+var ModalFocusTrap = (_ref) => {
+  var active = _ref.active,
+    children = _ref.children
+  var trapElementRef = React.useRef()
+  var focusRef = React.useRef({
+    trapFocusInProgress: false,
+    lastFocusedElement: null,
+  })
+  React.useEffect(() => {
+    if (canUseDOM) {
+      var trapFocus = () => {
+        // We should not trap focus if:
+        // - The modal hasn't fully initialized with an HTMLElement ref
+        // - Focus is already in the process of being trapped (e.g., we're refocusing)
+        // - isTrapActive prop being falsey tells us to do nothing
+        if (
+          trapElementRef.current == null ||
+          focusRef.current.trapFocusInProgress ||
+          !active
+        ) {
+          return
+        }
+
+        try {
+          focusRef.current.trapFocusInProgress = true
+
+          if (
+            document.activeElement instanceof Node &&
+            !trapElementRef.current.contains(document.activeElement)
+          ) {
+            // To handle keyboard focusing we can make an assumption here.
+            // If you're tabbing through the focusable elements, the previously
+            // active element will either be the first or the last.
+            // If the previously selected element is the "first" descendant
+            // and we're leaving it - this means that we should be looping
+            // around to the other side of the modal.
+            var hasFocused = focusFirstDescendant(trapElementRef.current)
+
+            if (focusRef.current.lastFocusedElement === document.activeElement) {
+              hasFocused = focusLastDescendant(trapElementRef.current)
+            } // If we couldn't focus a new element then we need to focus onto the trap target
+
+            if (!hasFocused && trapElementRef.current != null && document.activeElement) {
+              UIManager.focus(trapElementRef.current)
+            }
+          }
+        } finally {
+          focusRef.current.trapFocusInProgress = false
+        }
+
+        focusRef.current.lastFocusedElement = document.activeElement
+      } // Call the trapFocus callback at least once when this modal has been activated.
+
+      trapFocus()
+      document.addEventListener('focus', trapFocus, true)
+      return () => document.removeEventListener('focus', trapFocus, true)
+    }
+  }, [active]) // To be fully compliant with WCAG we need to refocus element that triggered opening modal
+  // after closing it
+
+  React.useEffect(function () {
+    if (canUseDOM) {
+      var lastFocusedElementOutsideTrap = document.activeElement
+      return function () {
+        if (
+          lastFocusedElementOutsideTrap &&
+          document.contains(lastFocusedElementOutsideTrap)
+        ) {
+          UIManager.focus(lastFocusedElementOutsideTrap)
+        }
+      }
+    }
+  }, [])
+  return /*#__PURE__*/ React.createElement(
+    React.Fragment,
+    null,
+    /*#__PURE__*/ React.createElement(FocusBracket, null),
+    /*#__PURE__*/ React.createElement(
+      View,
+      {
+        ref: trapElementRef,
+      },
+      children
+    ),
+    /*#__PURE__*/ React.createElement(FocusBracket, null)
+  )
+}
+
+export default ModalFocusTrap
+var styles = StyleSheet.create({
+  focusBracket: {
+    outlineStyle: 'none',
+  },
+})

package/src/Modal/ModalPortal.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import { canUseDOM } from '@tamagui/react-native-web-internals'
+
+function ModalPortal(props) {
+  var children = props.children
+  var elementRef = React.useRef(null)
+
+  if (canUseDOM && !elementRef.current) {
+    var element = document.createElement('div')
+
+    if (element && document.body) {
+      document.body.appendChild(element)
+      elementRef.current = element
+    }
+  }
+
+  React.useEffect(() => {
+    if (canUseDOM) {
+      return () => {
+        if (document.body && elementRef.current) {
+          document.body.removeChild(elementRef.current)
+          elementRef.current = null
+        }
+      }
+    }
+  }, [])
+  return elementRef.current && canUseDOM
+    ? /*#__PURE__*/ ReactDOM.createPortal(children, elementRef.current)
+    : null
+}
+
+export default ModalPortal

package/src/Modal/index.js

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+import * as React from 'react'
+
+import ModalAnimation from './ModalAnimation'
+import ModalContent from './ModalContent'
+import ModalFocusTrap from './ModalFocusTrap'
+import ModalPortal from './ModalPortal'
+
+var uniqueModalIdentifier = 0
+var activeModalStack = []
+var activeModalListeners = {}
+
+function notifyActiveModalListeners() {
+  if (activeModalStack.length === 0) {
+    return
+  }
+
+  var activeModalId = activeModalStack[activeModalStack.length - 1]
+  activeModalStack.forEach((modalId) => {
+    if (modalId in activeModalListeners) {
+      activeModalListeners[modalId](modalId === activeModalId)
+    }
+  })
+}
+
+function removeActiveModal(modalId) {
+  if (modalId in activeModalListeners) {
+    // Before removing this listener we should probably tell it
+    // that it's no longer the active modal for sure.
+    activeModalListeners[modalId](false)
+    delete activeModalListeners[modalId]
+  }
+
+  var index = activeModalStack.indexOf(modalId)
+
+  if (index !== -1) {
+    activeModalStack.splice(index, 1)
+    notifyActiveModalListeners()
+  }
+}
+
+function addActiveModal(modalId, listener) {
+  removeActiveModal(modalId)
+  activeModalStack.push(modalId)
+  activeModalListeners[modalId] = listener
+  notifyActiveModalListeners()
+}
+
+var Modal = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
+  const {
+    animationType,
+    children,
+    onDismiss,
+    onRequestClose,
+    onShow,
+    transparent,
+    visible = true,
+    ...rest
+  } = props
+
+  var modalId = React.useMemo(() => uniqueModalIdentifier++, [])
+
+  var _React$useState = React.useState(false),
+    isActive = _React$useState[0],
+    setIsActive = _React$useState[1]
+
+  var onDismissCallback = React.useCallback(() => {
+    removeActiveModal(modalId)
+
+    if (onDismiss) {
+      onDismiss()
+    }
+  }, [modalId, onDismiss])
+  var onShowCallback = React.useCallback(() => {
+    addActiveModal(modalId, setIsActive)
+
+    if (onShow) {
+      onShow()
+    }
+  }, [modalId, onShow])
+  React.useEffect(() => {
+    return () => removeActiveModal(modalId)
+  }, [modalId])
+  return /*#__PURE__*/ React.createElement(
+    ModalPortal,
+    null,
+    /*#__PURE__*/ React.createElement(
+      ModalAnimation,
+      {
+        animationType: animationType,
+        onDismiss: onDismissCallback,
+        onShow: onShowCallback,
+        visible: visible,
+      },
+      /*#__PURE__*/ React.createElement(
+        ModalFocusTrap,
+        {
+          active: isActive,
+        },
+        /*#__PURE__*/ React.createElement(
+          ModalContent,
+          {
+            ...rest,
+            active: isActive,
+            onRequestClose: onRequestClose,
+            ref: forwardedRef,
+            transparent: transparent,
+          },
+          children,
+        ),
+      ),
+    ),
+  )
+})
+export default Modal

package/src/NativeModules/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import { UIManager } from '@tamagui/react-native-web-internals'
+
+// NativeModules shim
+const NativeModules = {
+  UIManager,
+}
+
+export default NativeModules