@tamagui/react-native-web-internals 1.112.2

package/src/modules/requestIdleCallback/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 canUseDOM from '../canUseDOM'
+
+const _requestIdleCallback = function (cb: Function, options?: Object) {
+  return setTimeout(() => {
+    const start = Date.now()
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start))
+      },
+    })
+  }, 1)
+}
+
+const _cancelIdleCallback = function (id) {
+  clearTimeout(id)
+}
+
+const isSupported = canUseDOM && typeof window.requestIdleCallback !== 'undefined'
+
+const requestIdleCallback = isSupported
+  ? window.requestIdleCallback
+  : _requestIdleCallback
+
+const cancelIdleCallback = isSupported ? window.cancelIdleCallback : _cancelIdleCallback
+
+export default requestIdleCallback
+export { cancelIdleCallback }

package/src/modules/setValueForStyles/dangerousStyleValue.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable */
+
+/**
+ * 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.
+ *
+ * From React 16.0.0
+ * @noflow
+ */
+
+import isUnitlessNumber from '../unitlessNumbers/index'
+
+/**
+ * Convert a value into the proper css writable value. The style name `name`
+ * should be logical (no hyphens), as specified
+ * in `CSSProperty.isUnitlessNumber`.
+ *
+ * @param {string} name CSS property name such as `topMargin`.
+ * @param {*} value CSS property value such as `10px`.
+ * @return {string} Normalized style value with dimensions applied.
+ */
+function dangerousStyleValue(name, value, isCustomProperty) {
+  // Note that we've removed escapeTextForBrowser() calls here since the
+  // whole string will be escaped when the attribute is injected into
+  // the markup. If you provide unsafe user data here they can inject
+  // arbitrary CSS which may be problematic (I couldn't repro this):
+  // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
+  // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
+  // This is not an XSS hole but instead a potential CSS injection issue
+  // which has lead to a greater discussion about how we're going to
+  // trust URLs moving forward. See #2115901
+
+  var isEmpty = value == null || typeof value === 'boolean' || value === ''
+  if (isEmpty) {
+    return ''
+  }
+
+  if (
+    !isCustomProperty &&
+    typeof value === 'number' &&
+    value !== 0 &&
+    !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
+  ) {
+    return value + 'px' // Presumes implicit 'px' suffix for unitless numbers
+  }
+
+  return ('' + value).trim()
+}
+
+export default dangerousStyleValue

package/src/modules/setValueForStyles/index.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 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.
+ *
+ * From React 16.3.0
+ * @noflow
+ */
+
+import dangerousStyleValue from './dangerousStyleValue'
+
+/**
+ * Sets the value for multiple styles on a node.  If a value is specified as
+ * '' (empty string), the corresponding style property will be unset.
+ *
+ * @param {DOMElement} node
+ * @param {object} styles
+ */
+function setValueForStyles(node, styles) {
+  const style = node.style
+  for (let styleName in styles) {
+    if (!styles.hasOwnProperty(styleName)) {
+      continue
+    }
+    const isCustomProperty = styleName.indexOf('--') === 0
+    const styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty)
+    if (styleName === 'float') {
+      styleName = 'cssFloat'
+    }
+    if (isCustomProperty) {
+      style.setProperty(styleName, styleValue)
+    } else {
+      style[styleName] = styleValue
+    }
+  }
+}
+
+export default setValueForStyles

package/src/modules/unitlessNumbers/index.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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
+ */
+
+export const unitlessNumbers = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gap: true,
+  columnGap: true,
+  rowGap: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowGap: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnGap: true,
+  gridColumnStart: true,
+  lineClamp: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+  // transform types
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  // RN properties
+  shadowOpacity: true,
+}
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+const prefixes = ['ms', 'Moz', 'O', 'Webkit']
+const prefixKey = (prefix: string, key: string) => {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1)
+}
+Object.keys(unitlessNumbers).forEach((prop) => {
+  prefixes.forEach((prefix) => {
+    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop]
+  })
+})
+
+export default unitlessNumbers

package/src/modules/useElementLayout/index.tsx

@@ -0,0 +1,93 @@
+// @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 type { ElementRef } from 'react'
+
+import type { LayoutEvent } from '../../types'
+import canUseDOM from '../canUseDOM'
+import UIManager from '../UIManager/index'
+import useLayoutEffect from '../useLayoutEffect/index'
+
+const DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler'
+
+let didWarn = !canUseDOM
+let resizeObserver = null
+
+function getResizeObserver(): ResizeObserver | null {
+  if (canUseDOM && typeof window.ResizeObserver !== 'undefined') {
+    if (resizeObserver == null) {
+      resizeObserver = new window.ResizeObserver(function (entries) {
+        entries.forEach((entry) => {
+          const node = entry.target
+          const onLayout = node[DOM_LAYOUT_HANDLER_NAME]
+          if (typeof onLayout === 'function') {
+            // We still need to measure the view because browsers don't yet provide
+            // border-box dimensions in the entry
+            UIManager.measure(node, (x, y, width, height, left, top) => {
+              const event: LayoutEvent = {
+                // @ts-ignore
+                nativeEvent: {
+                  layout: { x, y, width, height, left, top },
+                },
+                timeStamp: Date.now(),
+              }
+              Object.defineProperty(event.nativeEvent, 'target', {
+                enumerable: true,
+                get: () => entry.target,
+              })
+              onLayout(event)
+            })
+          }
+        })
+      })
+    }
+  } else if (!didWarn) {
+    if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
+      console.warn(
+        'onLayout relies on ResizeObserver which is not supported by your browser. ' +
+          'Please include a polyfill, e.g., https://github.com/que-etc/resize-observer-polyfill.'
+      )
+      didWarn = true
+    }
+  }
+  return resizeObserver
+}
+
+export default function useElementLayout(
+  ref: ElementRef<any>,
+  onLayout?: ((e: LayoutEvent) => void) | null
+) {
+  const observer = getResizeObserver()
+
+  useLayoutEffect(() => {
+    const node = ref.current
+    if (node != null) {
+      node[DOM_LAYOUT_HANDLER_NAME] = onLayout
+    }
+  }, [ref, onLayout])
+
+  // Observing is done in a separate effect to avoid this effect running
+  // when 'onLayout' changes.
+  useLayoutEffect(() => {
+    const node = ref.current
+    if (node != null && observer != null) {
+      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === 'function') {
+        observer.observe(node)
+      } else {
+        observer.unobserve(node)
+      }
+    }
+    return () => {
+      if (node != null && observer != null) {
+        observer.unobserve(node)
+      }
+    }
+  }, [ref, observer])
+}