@tamagui/react-native-web-internals 1.112.2

package/src/index.tsx

@@ -0,0 +1,43 @@
+export * from './modules/AssetRegistry/index'
+export * from './modules/forwardedProps/index'
+export * from './modules/mergeRefs/index'
+export * from './modules/modality/index'
+export * from './modules/useLocale/index'
+export { usePlatformMethods } from './modules/usePlatformMethods/index'
+export { TextAncestorContext } from './TextAncestorContext'
+
+export * from '@tamagui/react-native-use-pressable'
+export * from '@tamagui/react-native-use-responder-events'
+
+export { colorProps } from './colorProps'
+export { AccessibilityUtil } from './modules/AccessibilityUtil/index'
+export { default as canUseDOM } from './modules/canUseDOM'
+export { default as createDOMProps } from './modules/createDOMProps/index'
+export { default as createEventHandle } from './modules/createEventHandle/index'
+export { default as dismissKeyboard } from './modules/dismissKeyboard/index'
+export { default as getBoundingClientRect } from './modules/getBoundingClientRect/index'
+export { default as ImageLoader } from './modules/ImageLoader/index'
+export { default as isSelectionValid } from './modules/isSelectionValid/index'
+export { default as isWebColor } from './modules/isWebColor/index'
+export { default as multiplyStyleLengthValue } from './modules/multiplyStyleLengthValue/index'
+export { default as normalizeColor } from './modules/normalizeColor/index'
+export { default as pick } from './modules/pick/index'
+export { default as Platform } from './modules/Platform/index'
+export * from './StyleSheet/preprocess'
+export { flatten as flattenStyle } from './StyleSheet/index'
+export { createSheet } from './StyleSheet/dom/index'
+export { default as requestIdleCallback } from './modules/requestIdleCallback/index'
+export { default as setValueForStyles } from './modules/setValueForStyles/index'
+export { default as TextInputState } from './modules/TextInputState/index'
+export { default as UIManager } from './modules/UIManager/index'
+export { default as unitlessNumbers } from './modules/unitlessNumbers/index'
+export { default as useElementLayout } from './modules/useElementLayout/index'
+export { default as useEvent } from './modules/useEvent/index'
+export { default as useHover } from './modules/useHover/index'
+export { default as useLayoutEffect } from './modules/useLayoutEffect/index'
+export { default as useStable } from './modules/useStable/index'
+export { InteractionManager } from './modules/InteractionManager'
+export * from './modules/invariant'
+export { processColor } from './modules/processColor/index'
+export { default as StyleSheet } from './StyleSheet/index'
+export { useMergeRefs } from './modules/useMergeRefs/index'

package/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 propsToAccessibilityComponent from '../propsToAccessibilityComponent'
+
+describe('modules/AccessibilityUtil/propsToAccessibilityComponent', () => {
+  test('when missing accessibility props"', () => {
+    expect(propsToAccessibilityComponent({})).toBeUndefined()
+  })
+
+  test('when "accessibilityRole" is "button"', () => {
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'button' })).toBeUndefined()
+  })
+
+  test('when "accessibilityRole" is "heading"', () => {
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'heading' })).toEqual('h1')
+  })
+
+  test('when "accessibilityRole" is "heading" and "aria-level" is set', () => {
+    expect(
+      propsToAccessibilityComponent({
+        accessibilityRole: 'heading',
+        'aria-level': 3,
+      })
+    ).toEqual('h3')
+  })
+
+  test('when "accessibilityRole" is "heading" and "accessibilityLevel" is set', () => {
+    expect(
+      propsToAccessibilityComponent({
+        accessibilityRole: 'heading',
+        accessibilityLevel: 3,
+      })
+    ).toEqual('h3')
+  })
+
+  test('when "accessibilityRole" is "label"', () => {
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'label' })).toEqual('label')
+  })
+})

package/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 propsToAriaRole from '../propsToAriaRole'
+
+describe('modules/AccessibilityUtil/propsToAriaRole', () => {
+  test('when missing accessibility props', () => {
+    expect(propsToAriaRole({})).toBeUndefined()
+  })
+
+  test('when "accessibilityRole" is defined', () => {
+    expect(propsToAriaRole({ accessibilityRole: 'banner' })).toEqual('banner')
+  })
+
+  test('when "accessibilityRole" is a native-only value', () => {
+    expect(propsToAriaRole({ accessibilityRole: 'none' })).toEqual('presentation')
+    expect(propsToAriaRole({ accessibilityRole: 'imagebutton' })).toEqual(undefined)
+    // not really native-only, but used to allow Web to render <label> around TextInput
+    expect(propsToAriaRole({ accessibilityRole: 'label' })).toEqual(undefined)
+  })
+})

package/src/modules/AccessibilityUtil/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import isDisabled from './isDisabled'
+import propsToAccessibilityComponent from './propsToAccessibilityComponent'
+import propsToAriaRole from './propsToAriaRole'
+
+export const AccessibilityUtil = {
+  isDisabled,
+  propsToAccessibilityComponent,
+  propsToAriaRole,
+}
+
+export default AccessibilityUtil

package/src/modules/AccessibilityUtil/isDisabled.tsx

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const isDisabled = (props: Record<string, any>): boolean =>
+  props.disabled ||
+  (Array.isArray(props.accessibilityStates) &&
+    props.accessibilityStates.indexOf('disabled') > -1)
+
+export default isDisabled

package/src/modules/AccessibilityUtil/propsToAccessibilityComponent.tsx

@@ -0,0 +1,54 @@
+// @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.
+ *
+ * @flow
+ */
+
+import propsToAriaRole from './propsToAriaRole'
+
+const roleComponents = {
+  article: 'article',
+  banner: 'header',
+  blockquote: 'blockquote',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  region: 'section',
+  strong: 'strong',
+}
+
+const emptyObject = {}
+
+const propsToAccessibilityComponent = (props: Object = emptyObject): void | string => {
+  // special-case for "label" role which doesn't map to an ARIA role
+  if (props.accessibilityRole === 'label') {
+    return 'label'
+  }
+
+  const role = propsToAriaRole(props)
+  if (role) {
+    if (role === 'heading') {
+      const level = props.accessibilityLevel || props['aria-level']
+      if (level != null) {
+        return `h${level}`
+      }
+      return 'h1'
+    }
+    return roleComponents[role]
+  }
+}
+
+export default propsToAccessibilityComponent

package/src/modules/AccessibilityUtil/propsToAriaRole.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const accessibilityRoleToWebRole = {
+  adjustable: 'slider',
+  button: 'button',
+  header: 'heading',
+  image: 'img',
+  imagebutton: null,
+  keyboardkey: null,
+  label: null,
+  link: 'link',
+  none: 'presentation',
+  search: 'search',
+  summary: 'region',
+  text: null,
+}
+
+const propsToAriaRole = ({
+  accessibilityRole,
+}: {
+  accessibilityRole?: string
+}): string | void => {
+  if (accessibilityRole) {
+    const inferredRole = accessibilityRoleToWebRole[accessibilityRole]
+    if (inferredRole !== null) {
+      // ignore roles that don't map to web
+      return inferredRole || accessibilityRole
+    }
+  }
+}
+
+export default propsToAriaRole

package/src/modules/AssetRegistry/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export type PackagerAsset = {
+  __packager_asset: boolean
+  fileSystemLocation: string
+  httpServerLocation: string
+  width: number | null
+  height: number | null
+  scales: Array<number>
+  hash: string
+  name: string
+  type: string
+}
+
+const assets: Array<PackagerAsset> = []
+
+export function registerAsset(asset: PackagerAsset): number {
+  // `push` returns new array length, so the first asset will
+  // get id 1 (not 0) to make the value truthy
+  return assets.push(asset)
+}
+
+export function getAssetByID(assetId: number): PackagerAsset {
+  return assets[assetId - 1]
+}

package/src/modules/ImageLoader/index.tsx

@@ -0,0 +1,167 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const dataUriPattern = /^data:/
+
+export class ImageUriCache {
+  static _maximumEntries = 256
+  static _entries = {}
+
+  static has(uri: string): boolean {
+    const entries = ImageUriCache._entries
+    const isDataUri = dataUriPattern.test(uri)
+    return isDataUri || Boolean(entries[uri])
+  }
+
+  static add(uri: string) {
+    const entries = ImageUriCache._entries
+    const lastUsedTimestamp = Date.now()
+    if (entries[uri]) {
+      entries[uri].lastUsedTimestamp = lastUsedTimestamp
+      entries[uri].refCount += 1
+    } else {
+      entries[uri] = {
+        lastUsedTimestamp,
+        refCount: 1,
+      }
+    }
+  }
+
+  static remove(uri: string) {
+    const entries = ImageUriCache._entries
+    if (entries[uri]) {
+      entries[uri].refCount -= 1
+    }
+    // Free up entries when the cache is "full"
+    ImageUriCache._cleanUpIfNeeded()
+  }
+
+  static _cleanUpIfNeeded() {
+    const entries = ImageUriCache._entries
+    const imageUris = Object.keys(entries)
+
+    if (imageUris.length + 1 > ImageUriCache._maximumEntries) {
+      let leastRecentlyUsedKey
+      let leastRecentlyUsedEntry
+
+      imageUris.forEach((uri) => {
+        const entry = entries[uri]
+        if (
+          (!leastRecentlyUsedEntry ||
+            entry.lastUsedTimestamp < leastRecentlyUsedEntry.lastUsedTimestamp) &&
+          entry.refCount === 0
+        ) {
+          leastRecentlyUsedKey = uri
+          leastRecentlyUsedEntry = entry
+        }
+      })
+
+      if (leastRecentlyUsedKey) {
+        delete entries[leastRecentlyUsedKey]
+      }
+    }
+  }
+}
+
+let id = 0
+const requests = {}
+
+const ImageLoader = {
+  abort(requestId: number) {
+    let image = requests[`${requestId}`]
+    if (image) {
+      image.onerror = null
+      image.onload = null
+      image = null
+      delete requests[`${requestId}`]
+    }
+  },
+  getSize(
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure: () => void
+  ) {
+    let complete = false
+    const interval = setInterval(callback, 16)
+    const requestId = ImageLoader.load(uri, callback, errorCallback)
+
+    function callback() {
+      const image = requests[`${requestId}`]
+      if (image) {
+        const { naturalHeight, naturalWidth } = image
+        if (naturalHeight && naturalWidth) {
+          success(naturalWidth, naturalHeight)
+          complete = true
+        }
+      }
+      if (complete) {
+        ImageLoader.abort(requestId)
+        clearInterval(interval)
+      }
+    }
+
+    function errorCallback() {
+      if (typeof failure === 'function') {
+        failure()
+      }
+      ImageLoader.abort(requestId)
+      clearInterval(interval)
+    }
+  },
+  has(uri: string): boolean {
+    return ImageUriCache.has(uri)
+  },
+  load(uri: string, onLoad: Function, onError: Function): number {
+    id += 1
+    const image = new window.Image()
+    // @ts-ignore
+    image.onerror = onError
+    image.onload = (e) => {
+      // avoid blocking the main thread
+      const onDecode = () => onLoad({ nativeEvent: e })
+      if (typeof image.decode === 'function') {
+        // Safari currently throws exceptions when decoding svgs.
+        // We want to catch that error and allow the load handler
+        // to be forwarded to the onLoad handler in this case
+        image.decode().then(onDecode, onDecode)
+      } else {
+        setTimeout(onDecode, 0)
+      }
+    }
+    image.src = uri
+    requests[`${id}`] = image
+    return id
+  },
+  prefetch(uri: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      ImageLoader.load(
+        uri,
+        () => {
+          // Add the uri to the cache so it can be immediately displayed when used
+          // but also immediately remove it to correctly reflect that it has no active references
+          ImageUriCache.add(uri)
+          ImageUriCache.remove(uri)
+          resolve()
+        },
+        reject
+      )
+    })
+  },
+  queryCache(uris: Array<string>): Promise<{ [uri: string]: 'disk/memory' }> {
+    const result = {}
+    uris.forEach((u) => {
+      if (ImageUriCache.has(u)) {
+        result[u] = 'disk/memory'
+      }
+    })
+    return Promise.resolve(result)
+  },
+}
+
+export default ImageLoader

package/src/modules/InteractionManager.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import requestIdleCallback, { cancelIdleCallback } from './requestIdleCallback'
+
+export const InteractionManager = {
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete',
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed.
+   */
+  runAfterInteractions(task): {
+    then: Function
+    done: Function
+    cancel: Function
+  } {
+    let handle
+
+    const promise = new Promise((resolve) => {
+      handle = requestIdleCallback(() => {
+        if (task) {
+          resolve(task())
+        } else {
+          // @ts-ignore
+          resolve()
+        }
+      })
+    })
+    return {
+      then: promise.then.bind(promise),
+      done: promise.then.bind(promise),
+      cancel: () => {
+        cancelIdleCallback(handle)
+      },
+    }
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   */
+  createInteractionHandle(): number {
+    return 1
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   */
+  clearInteractionHandle(handle: number) {},
+
+  addListener: () => {},
+}
+
+export default InteractionManager

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

@@ -0,0 +1,45 @@
+/**
+ * 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 Platform from '..'
+
+describe('apis/Platform', () => {
+  describe('select', () => {
+    test('supports "default"', () => {
+      expect(Platform.select({ default: 'default' })).toEqual('default')
+    })
+
+    test('chooses "web"', () => {
+      expect(
+        Platform.select({
+          android: 'android',
+          ios: 'ios',
+          web: 'web',
+          default: 'default',
+        })
+      ).toEqual('web')
+    })
+  })
+
+  describe('isTesting', () => {
+    const NODE_ENV_BACKUP = process.env.NODE_ENV
+
+    afterEach(() => {
+      process.env.NODE_ENV = NODE_ENV_BACKUP
+    })
+
+    test('true when NODE_ENV is "test"', () => {
+      process.env.NODE_ENV = 'test'
+      expect(Platform.isTesting).toEqual(true)
+    })
+
+    test('false when NODE_ENV is not "test"', () => {
+      process.env.NODE_ENV = 'development'
+      expect(Platform.isTesting).toEqual(false)
+    })
+  })
+})

package/src/modules/Platform/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const Platform = {
+  OS: 'web',
+  select: (obj: any): any => ('web' in obj ? obj.web : obj.default),
+  isTesting: process.env.NODE_ENV === 'test',
+}
+
+export default Platform

package/src/modules/TextInputState/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import UIManager from '../UIManager'
+
+/**
+ * This class is responsible for coordinating the "focused"
+ * state for TextInputs. All calls relating to the keyboard
+ * should be funneled through here
+ */
+const TextInputState = {
+  /**
+   * Internal state
+   */
+  _currentlyFocusedNode: null as Object | null,
+
+  /**
+   * Returns the ID of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedField(): Object | null {
+    if (document.activeElement !== this._currentlyFocusedNode) {
+      this._currentlyFocusedNode = null
+    }
+    return this._currentlyFocusedNode
+  },
+
+  /**
+   * @param {Object} TextInputID id of the text field to focus
+   * Focuses the specified text field
+   * noop if the text field was already focused
+   */
+  focusTextInput(textFieldNode: Object | null) {
+    if (textFieldNode !== null) {
+      this._currentlyFocusedNode = textFieldNode
+      if (document.activeElement !== textFieldNode) {
+        UIManager.focus(textFieldNode)
+      }
+    }
+  },
+
+  /**
+   * @param {Object} textFieldNode id of the text field to focus
+   * Unfocuses the specified text field
+   * noop if it wasn't focused
+   */
+  blurTextInput(textFieldNode: Object | null) {
+    if (textFieldNode !== null) {
+      this._currentlyFocusedNode = null
+      if (document.activeElement === textFieldNode) {
+        UIManager.blur(textFieldNode)
+      }
+    }
+  },
+}
+
+export default TextInputState