@hps1978/react-native-web-tv 0.21.2-tv.0

package/dist/exports/Modal/ModalContent.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["active", "children", "onRequestClose", "transparent"];
+/**
+ * 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 View from '../View';
+import StyleSheet from '../StyleSheet';
+import canUseDOM from '../../modules/canUseDom';
+var ModalContent = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  var active = props.active,
+    children = props.children,
+    onRequestClose = props.onRequestClose,
+    transparent = props.transparent,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  React.useEffect(() => {
+    if (canUseDOM) {
+      var closeOnEscape = e => {
+        if (active && e.key === 'Escape') {
+          e.stopPropagation();
+          if (onRequestClose) {
+            onRequestClose();
+          }
+        }
+      };
+      document.addEventListener('keyup', closeOnEscape, false);
+      return () => document.removeEventListener('keyup', closeOnEscape, false);
+    }
+  }, [active, onRequestClose]);
+  var style = React.useMemo(() => {
+    return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
+  }, [transparent]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    "aria-modal": true,
+    ref: forwardedRef,
+    role: active ? 'dialog' : null,
+    style: style
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, children));
+});
+var styles = StyleSheet.create({
+  modal: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  modalTransparent: {
+    backgroundColor: 'transparent'
+  },
+  modalOpaque: {
+    backgroundColor: 'white'
+  },
+  container: {
+    top: 0,
+    flex: 1
+  }
+});
+export default ModalContent;

package/dist/exports/Modal/ModalContent.js.flow

@@ -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 type { ViewProps } from '../View';
+import * as React from 'react';
+import View from '../View';
+import StyleSheet from '../StyleSheet';
+import canUseDOM from '../../modules/canUseDom';
+export type ModalContentProps = {
+  ...ViewProps,
+  active?: ?(boolean | (() => boolean)),
+  children?: any,
+  onRequestClose?: ?() => void,
+  transparent?: ?boolean,
+};
+const ModalContent: React.AbstractComponent<ModalContentProps, React.ElementRef<typeof View>> = React.forwardRef((props, forwardedRef) => {
+  const {
+    active,
+    children,
+    onRequestClose,
+    transparent,
+    ...rest
+  } = props;
+  React.useEffect(() => {
+    if (canUseDOM) {
+      declare var closeOnEscape: (e: KeyboardEvent) => any;
+      document.addEventListener('keyup', closeOnEscape, false);
+      return () => document.removeEventListener('keyup', closeOnEscape, false);
+    }
+  }, [active, onRequestClose]);
+  const style = React.useMemo(() => {
+    return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
+  }, [transparent]);
+  return <View {...rest} aria-modal={true} ref={forwardedRef} role={active ? 'dialog' : null} style={style}>
+      <View style={styles.container}>{children}</View>
+    </View>;
+});
+const styles = StyleSheet.create({
+  modal: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  modalTransparent: {
+    backgroundColor: 'transparent'
+  },
+  modalOpaque: {
+    backgroundColor: 'white'
+  },
+  container: {
+    top: 0,
+    flex: 1
+  }
+});
+export default ModalContent;

package/dist/exports/Modal/ModalFocusTrap.js

@@ -0,0 +1,132 @@
+/**
+ * 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 View from '../View';
+import createElement from '../createElement';
+import StyleSheet from '../StyleSheet';
+import UIManager from '../UIManager';
+import canUseDOM from '../../modules/canUseDom';
+
+/**
+ * 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', {
+    role: '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/dist/exports/Modal/ModalFocusTrap.js.flow

@@ -0,0 +1,39 @@
+/**
+ * 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 * as React from 'react';
+import View from '../View';
+import createElement from '../createElement';
+import StyleSheet from '../StyleSheet';
+import UIManager from '../UIManager';
+import canUseDOM from '../../modules/canUseDom';
+
+/**
+ * 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.
+ */
+declare var FocusBracket: () => any;
+declare function attemptFocus(element: any): any;
+declare function focusFirstDescendant(element: any): any;
+declare function focusLastDescendant(element: any): any;
+export type ModalFocusTrapProps = {|
+  active?: boolean | (() => boolean),
+  children?: any,
+|};
+declare var ModalFocusTrap: (arg0: ModalFocusTrapProps) => React.Node;
+export default ModalFocusTrap;
+const styles = StyleSheet.create({
+  focusBracket: {
+    outlineStyle: 'none'
+  }
+});

package/dist/exports/Modal/ModalPortal.js

@@ -0,0 +1,36 @@
+/**
+ * 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 { createPortal } from 'react-dom';
+import canUseDOM from '../../modules/canUseDom';
+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__*/createPortal(children, elementRef.current) : null;
+}
+export default ModalPortal;

package/dist/exports/Modal/ModalPortal.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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 * as React from 'react';
+import { createPortal } from 'react-dom';
+import canUseDOM from '../../modules/canUseDom';
+export type ModalPortalProps = {|
+  children: any
+|};
+declare function ModalPortal(props: ModalPortalProps): React.Node;
+export default ModalPortal;

package/dist/exports/Modal/index.js

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ *
+ * 
+ */
+
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["animationType", "children", "onDismiss", "onRequestClose", "onShow", "transparent", "visible"];
+import * as React from 'react';
+import ModalPortal from './ModalPortal';
+import ModalAnimation from './ModalAnimation';
+import ModalContent from './ModalContent';
+import ModalFocusTrap from './ModalFocusTrap';
+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) => {
+  var animationType = props.animationType,
+    children = props.children,
+    onDismiss = props.onDismiss,
+    onRequestClose = props.onRequestClose,
+    onShow = props.onShow,
+    transparent = props.transparent,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  // Set a unique model identifier so we can correctly route
+  // dismissals and check the layering of modals.
+  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, _extends({}, rest, {
+    active: isActive,
+    onRequestClose: onRequestClose,
+    ref: forwardedRef,
+    transparent: transparent
+  }), children))));
+});
+export default Modal;

package/dist/exports/Modal/index.js.flow

@@ -0,0 +1,83 @@
+/**
+ * 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
+ */
+
+'use client';
+
+import type { ViewProps } from '../View';
+import * as React from 'react';
+import ModalPortal from './ModalPortal';
+import ModalAnimation from './ModalAnimation';
+import ModalContent from './ModalContent';
+import ModalFocusTrap from './ModalFocusTrap';
+export type ModalProps = {
+  ...ViewProps,
+  animationType?: 'none' | 'slide' | 'fade',
+  children: any,
+  hardwareAccelerated?: ?boolean,
+  onDismiss?: ?() => mixed,
+  onOrientationChange?: ?(e: {|
+    orientation: 'portrait' | 'landscape'
+  |}) => void,
+  onRequestClose?: ?() => void,
+  onShow?: ?() => void,
+  presentationStyle?: ?('fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'),
+  statusBarTranslucent?: ?boolean,
+  supportedOrientations?: ?Array<'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right'>,
+  transparent?: ?boolean,
+  visible?: ?boolean,
+};
+let uniqueModalIdentifier = 0;
+const activeModalStack = [];
+const activeModalListeners = {};
+declare function notifyActiveModalListeners(): any;
+declare function removeActiveModal(modalId: any): any;
+declare function addActiveModal(modalId: any, listener: any): any;
+const Modal: React.AbstractComponent<ModalProps, React.ElementRef<typeof ModalContent>> = React.forwardRef((props, forwardedRef) => {
+  const {
+    animationType,
+    children,
+    onDismiss,
+    onRequestClose,
+    onShow,
+    transparent,
+    visible = true,
+    ...rest
+  } = props;
+
+  // Set a unique model identifier so we can correctly route
+  // dismissals and check the layering of modals.
+  const modalId = React.useMemo(() => uniqueModalIdentifier++, []);
+  const [isActive, setIsActive] = React.useState(false);
+  const onDismissCallback = React.useCallback(() => {
+    removeActiveModal(modalId);
+    if (onDismiss) {
+      onDismiss();
+    }
+  }, [modalId, onDismiss]);
+  const onShowCallback = React.useCallback(() => {
+    addActiveModal(modalId, setIsActive);
+    if (onShow) {
+      onShow();
+    }
+  }, [modalId, onShow]);
+  React.useEffect(() => {
+    return () => removeActiveModal(modalId);
+  }, [modalId]);
+  return <ModalPortal>
+      <ModalAnimation animationType={animationType} onDismiss={onDismissCallback} onShow={onShowCallback} visible={visible}>
+        <ModalFocusTrap active={isActive}>
+          <ModalContent {...rest} active={isActive} onRequestClose={onRequestClose} ref={forwardedRef} transparent={transparent}>
+            {children}
+          </ModalContent>
+        </ModalFocusTrap>
+      </ModalAnimation>
+    </ModalPortal>;
+});
+export default Modal;

package/dist/exports/NativeEventEmitter/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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 NativeEventEmitter from '../../vendor/react-native/EventEmitter/NativeEventEmitter';
+export default NativeEventEmitter;

package/dist/exports/NativeEventEmitter/index.js.flow

@@ -0,0 +1,11 @@
+/**
+ * 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 NativeEventEmitter from '../../vendor/react-native/EventEmitter/NativeEventEmitter';
+export default NativeEventEmitter;

package/dist/exports/NativeModules/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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 '../UIManager';
+
+// NativeModules shim
+var NativeModules = {
+  UIManager
+};
+export default NativeModules;

package/dist/exports/NativeModules/index.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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 '../UIManager';
+
+// NativeModules shim
+const NativeModules = {
+  UIManager
+};
+export default NativeModules;