@tamagui/react-native-web-internals 1.112.2

package/src/modules/UIManager/__tests__/index-test.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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.
+ */
+
+import UIManager from '..'
+
+const createStyledNode = (name = 'div', style = {}) => {
+  const root = document.createElement(name)
+  Object.keys(style).forEach((prop) => {
+    root.style[prop] = style[prop]
+  })
+  return root
+}
+
+const componentStub = {
+  _reactInternalInstance: {
+    _currentElement: { _owner: {} },
+    _debugID: 1,
+  },
+}
+
+describe('apis/UIManager', () => {
+  describe('focus', () => {
+    test('sets tabIndex="-1" on elements not programmatically focusable by default', () => {
+      const node = createStyledNode()
+      UIManager.focus(node)
+      expect(node.getAttribute('tabIndex')).toEqual('-1')
+    })
+
+    test('doesn\'t set tabIndex="-1" on elements with an existing tabIndex', () => {
+      const node = createStyledNode()
+      node.tabIndex = 0
+      UIManager.focus(node)
+      expect(node.getAttribute('tabIndex')).toEqual('0')
+    })
+
+    test('doesn\'t set tabIndex="-1" on elements focusable by default', () => {
+      ;['a', 'input', 'select', 'textarea'].forEach((name) => {
+        const node = createStyledNode(name)
+        UIManager.focus(node)
+        expect(node.getAttribute('tabIndex')).toBeNull()
+      })
+    })
+  })
+
+  describe('updateView', () => {
+    test('supports className alias for class', () => {
+      const node = createStyledNode()
+      const props = { className: 'extra' }
+      UIManager.updateView(node, props, componentStub)
+      expect(node.getAttribute('class')).toEqual('extra')
+    })
+
+    test('adds correct DOM styles to existing style', () => {
+      const node = createStyledNode('div', { color: 'red' })
+      const props = { style: { marginTop: 0, marginBottom: 0, opacity: 0 } }
+      UIManager.updateView(node, props, componentStub)
+      expect(node.getAttribute('style')).toEqual(
+        'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;'
+      )
+    })
+
+    test('replaces input and textarea text', () => {
+      const node = createStyledNode('textarea')
+      node.value = 'initial'
+      const textProp = { text: 'expected-text' }
+      const valueProp = { value: 'expected-value' }
+
+      UIManager.updateView(node, textProp)
+      expect(node.value).toEqual('expected-text')
+
+      UIManager.updateView(node, valueProp)
+      expect(node.value).toEqual('expected-value')
+    })
+
+    test('sets other attribute values', () => {
+      const node = createStyledNode()
+      const props = { 'aria-level': '4', 'data-of-type': 'string' }
+      UIManager.updateView(node, props)
+      expect(node.getAttribute('aria-level')).toEqual('4')
+      expect(node.getAttribute('data-of-type')).toEqual('string')
+    })
+  })
+})

package/src/modules/UIManager/index.tsx

@@ -0,0 +1,121 @@
+// @ts-nocheck
+/**
+ * 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 getBoundingClientRect from '../getBoundingClientRect/index'
+import setValueForStyles from '../setValueForStyles/index'
+
+const getRect = (node) => {
+  // Unlike the DOM's getBoundingClientRect, React Native layout measurements
+  // for "height" and "width" ignore scale transforms.
+  // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+  const { x, y, top, left } = getBoundingClientRect(node)!
+  const width = node.offsetWidth
+  const height = node.offsetHeight
+  return { x, y, width, height, top, left }
+}
+
+const measureLayout = (node, relativeToNativeNode, callback) => {
+  const relativeNode = relativeToNativeNode || (node && node.parentNode)
+  if (node && relativeNode) {
+    setTimeout(() => {
+      const relativeRect = getBoundingClientRect(relativeNode)
+      const { height, left, top, width } = getRect(node)
+      const x = left - relativeRect.left
+      const y = top - relativeRect.top
+      callback(x, y, width, height, left, top)
+    }, 0)
+  }
+}
+
+const focusableElements = {
+  A: true,
+  INPUT: true,
+  SELECT: true,
+  TEXTAREA: true,
+}
+
+const UIManager = {
+  blur(node) {
+    try {
+      node.blur()
+    } catch (err) {
+      //
+    }
+  },
+
+  focus(node) {
+    try {
+      const name = node.nodeName
+      // A tabIndex of -1 allows element to be programmatically focused but
+      // prevents keyboard focus, so we don't want to set the value on elements
+      // that support keyboard focus by default.
+      if (node.getAttribute('tabIndex') == null && focusableElements[name] == null) {
+        node.setAttribute('tabIndex', '-1')
+      }
+      node.focus()
+    } catch (err) {
+      //
+    }
+  },
+
+  measure(node, callback) {
+    measureLayout(node, null, callback)
+  },
+
+  measureInWindow(node, callback) {
+    if (node) {
+      setTimeout(() => {
+        const { height, left, top, width } = getRect(node)
+        callback(left, top, width, height)
+      }, 0)
+    }
+  },
+
+  measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
+    measureLayout(node, relativeToNativeNode, onSuccess)
+  },
+
+  updateView(node, props) {
+    for (const prop in props) {
+      if (!Object.prototype.hasOwnProperty.call(props, prop)) {
+        continue
+      }
+
+      const value = props[prop]
+      switch (prop) {
+        case 'style': {
+          setValueForStyles(node, value)
+          break
+        }
+        case 'class':
+        case 'className': {
+          node.setAttribute('class', value)
+          break
+        }
+        case 'text':
+        case 'value':
+          // native platforms use `text` prop to replace text input value
+          node.value = value
+          break
+        default:
+          node.setAttribute(prop, value)
+      }
+    }
+  },
+
+  configureNextLayoutAnimation(config, onAnimationDidEnd) {
+    onAnimationDidEnd()
+  },
+
+  // mocks
+  setLayoutAnimationEnabledExperimental() {},
+}
+
+export default UIManager

package/src/modules/canUseDOM.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+export const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+export default canUseDOM

package/src/modules/createDOMProps/__tests__/index-test.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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.
+ */
+
+import createDOMProps from '..'
+
+const createProps = (props) => createDOMProps(null, props)
+
+describe('modules/createDOMProps', () => {
+  describe('focus-related accessibility attributes', () => {
+    test('with no accessibility props', () => {
+      expect(createProps({})).toEqual({})
+    })
+
+    describe('"accessibilityRole" of "link"', () => {
+      const accessibilityRole = 'link'
+
+      test('default case', () => {
+        expect(createProps({ accessibilityRole })).toEqual(
+          expect.not.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "focusable" is true', () => {
+        expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+          expect.not.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "focusable" is false', () => {
+        expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+          expect.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "accessibilityDisabled" is true', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+          expect.objectContaining({ 'aria-disabled': true })
+        )
+      })
+
+      test('when "disabled" is false', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+          expect.not.objectContaining({ tabIndex: '-1' })
+        )
+      })
+    })
+
+    const testFocusableRole = (accessibilityRole) => {
+      test('default case', () => {
+        expect(createProps({ accessibilityRole })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+
+      test('when "focusable" is true', () => {
+        expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+
+      test('when "focusable" is false', () => {
+        expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+          expect.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "accessibilityDisabled" is true', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+          expect.objectContaining({ 'aria-disabled': true })
+        )
+      })
+
+      test('when "accessibilityDisabled" is false', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+    }
+
+    describe('"accessibilityRole" of "button"', () => {
+      testFocusableRole('button')
+    })
+
+    describe('with unfocusable accessibilityRole', () => {
+      test('when "focusable" is true', () => {
+        expect(createProps({ focusable: true })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+
+      test('when "focusable" is false', () => {
+        expect(createProps({ focusable: false })).toEqual(
+          expect.objectContaining({ tabIndex: '-1' })
+        )
+      })
+    })
+  })
+
+  test('prop "accessibilityLabel" becomes "aria-label"', () => {
+    const accessibilityLabel = 'accessibilityLabel'
+    const props = createProps({ accessibilityLabel })
+    expect(props['aria-label']).toEqual(accessibilityLabel)
+  })
+
+  test('prop "accessibilityLiveRegion" becomes "aria-live"', () => {
+    const accessibilityLiveRegion = 'none'
+    const props = createProps({ accessibilityLiveRegion })
+    expect(props['aria-live']).toEqual('off')
+  })
+
+  test('prop "accessibilityRole" becomes "role"', () => {
+    const accessibilityRole = 'button'
+    const props = createProps({ accessibilityRole })
+    expect(props.role).toEqual('button')
+  })
+
+  test('prop "className" is preserved', () => {
+    const className = 'external-class-name'
+    const props = createProps({ className })
+    expect(props.className).toEqual(className)
+  })
+
+  test('prop "nativeID" becomes "id"', () => {
+    const nativeID = 'Example.nativeID'
+    const props = createProps({ nativeID })
+    expect(props.id).toEqual(nativeID)
+  })
+
+  test('prop "testID" becomes "data-testid"', () => {
+    const testID = 'Example.testID'
+    const props = createProps({ testID })
+    expect(props['data-testid']).toEqual(testID)
+  })
+})