@tamagui/react-native-web-lite 1.112.5

package/src/AccessibilityInfo/index.tsx

@@ -0,0 +1,115 @@
+/**
+ * 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 { canUseDOM } from '@tamagui/react-native-web-internals'
+
+function isScreenReaderEnabled(): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    resolve(true)
+  })
+}
+
+const prefersReducedMotionMedia =
+  canUseDOM && typeof window.matchMedia === 'function'
+    ? window.matchMedia('(prefers-reduced-motion: reduce)')
+    : null
+
+function isReduceMotionEnabled(): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    resolve(prefersReducedMotionMedia ? prefersReducedMotionMedia.matches : true)
+  })
+}
+
+function addChangeListener(fn) {
+  if (prefersReducedMotionMedia != null) {
+    prefersReducedMotionMedia.addEventListener != null
+      ? prefersReducedMotionMedia.addEventListener('change', fn)
+      : prefersReducedMotionMedia.addListener(fn)
+  }
+}
+
+function removeChangeListener(fn) {
+  if (prefersReducedMotionMedia != null) {
+    prefersReducedMotionMedia.removeEventListener != null
+      ? prefersReducedMotionMedia.removeEventListener('change', fn)
+      : prefersReducedMotionMedia.removeListener(fn)
+  }
+}
+
+const handlers = {}
+
+const AccessibilityInfo = {
+  /**
+   * Query whether a screen reader is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a screen reader is enabled and `false` otherwise.
+   */
+  isScreenReaderEnabled,
+
+  /**
+   * Query whether the user prefers reduced motion.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a screen reader is enabled and `false` otherwise.
+   */
+  isReduceMotionEnabled,
+
+  /**
+   * Deprecated
+   */
+  fetch: isScreenReaderEnabled,
+
+  /**
+   * Add an event handler. Supported events: reduceMotionChanged
+   */
+  addEventListener: function (eventName: string, handler: Function): any {
+    if (eventName === 'reduceMotionChanged') {
+      if (!prefersReducedMotionMedia) {
+        return
+      }
+      const listener = (event) => {
+        handler(event.matches)
+      }
+      addChangeListener(listener)
+      // @ts-ignore
+      handlers[handler] = listener
+    }
+
+    return {
+      remove: () => AccessibilityInfo.removeEventListener(eventName, handler),
+    }
+  },
+
+  /**
+   * Set accessibility focus to a react component.
+   */
+  setAccessibilityFocus: function (reactTag: number): void {},
+
+  /**
+   * Post a string to be announced by the screen reader.
+   */
+  announceForAccessibility: function (announcement: string): void {},
+
+  /**
+   * Remove an event handler.
+   */
+  removeEventListener: function (eventName: string, handler: Function): void {
+    if (eventName === 'reduceMotionChanged') {
+      // @ts-ignore
+      const listener = handlers[handler]
+      if (!listener || !prefersReducedMotionMedia) {
+        return
+      }
+      removeChangeListener(listener)
+    }
+    return
+  },
+}
+
+export default AccessibilityInfo

package/src/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,466 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] = `
+<div
+  aria-label="accessibility label"
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is set 1`] = `
+<div
+  aria-live="polite"
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "color" 1`] = `
+<svg
+  height="100%"
+  viewBox="0 0 32 32"
+  width="100%"
+>
+  <circle
+    cx="16"
+    cy="16"
+    fill="none"
+    r="14"
+    stroke-width="4"
+    style="stroke: red; opacity: 0.2;"
+  />
+  <circle
+    cx="16"
+    cy="16"
+    fill="none"
+    r="14"
+    stroke-width="4"
+    style="stroke: red; stroke-dasharray: 80; stroke-dashoffset: 60;"
+  />
+</svg>
+`;
+
+exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  data-one="one"
+  data-two="two"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  id="123"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "size" is a number 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    style="height: 30px; width: 30px;"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "style" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+  style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  data-testid="123"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;