react-native-web - npm Package Compare versions

Comparing version 0.18.8 to 0.18.12

dist/cjs/exports/Dimensions/index.js

@@ -38,2 +38,48 @@ "use strict";
 
+function update() {
+  if (!_canUseDom.default) {
+    return;
+  }
+
+  var win = window;
+  var height;
+  var width;
+  /**
+   * iOS does not update viewport dimensions on keyboard open/close.
+   * window.visualViewport(https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
+   * is used instead of document.documentElement.clientHeight (which remains as a fallback)
+   */
+
+  if (win.visualViewport) {
+    var visualViewport = win.visualViewport;
+    height = Math.round(visualViewport.height);
+    width = Math.round(visualViewport.width);
+  } else {
+    var docEl = win.document.documentElement;
+    height = docEl.clientHeight;
+    width = docEl.clientWidth;
+  }
+
+  dimensions.window = {
+    fontScale: 1,
+    height,
+    scale: win.devicePixelRatio || 1,
+    width
+  };
+  dimensions.screen = {
+    fontScale: 1,
+    height: win.screen.height,
+    scale: win.devicePixelRatio || 1,
+    width: win.screen.width
+  };
+}
+
+function handleResize() {
+  update();
+
+  if (Array.isArray(listeners['change'])) {
+    listeners['change'].forEach(handler => handler(dimensions));
+  }
+}
+
 class Dimensions {
@@ -43,4 +89,3 @@ static get(dimension) {
       shouldInit = false;
-
-      Dimensions._update();
+      update();
     }
@@ -68,27 +113,2 @@
 
-  static _update() {
-    if (!_canUseDom.default) {
-      return;
-    }
-
-    var win = window;
-    var docEl = win.document.documentElement;
-    dimensions.window = {
-      fontScale: 1,
-      height: docEl.clientHeight,
-      scale: win.devicePixelRatio || 1,
-      width: docEl.clientWidth
-    };
-    dimensions.screen = {
-      fontScale: 1,
-      height: win.screen.height,
-      scale: win.devicePixelRatio || 1,
-      width: win.screen.width
-    };
-
-    if (Array.isArray(listeners['change'])) {
-      listeners['change'].forEach(handler => handler(dimensions));
-    }
-  }
-
   static addEventListener(type, handler) {
@@ -115,5 +135,9 @@ listeners[type] = listeners[type] || [];
 if (_canUseDom.default) {
-  window.addEventListener('resize', Dimensions._update, false);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', handleResize, false);
+  } else {
+    window.addEventListener('resize', handleResize, false);
+  }
 }
 
 module.exports = exports.default;

dist/cjs/exports/TextInput/index.js

@@ -309,3 +309,3 @@ "use strict";
       if (shouldBlurOnSubmit && hostNode != null) {
-        hostNode.blur();
+        setTimeout(() => hostNode.blur(), 0);
       }
@@ -312,0 +312,0 @@ }

dist/cjs/exports/UIManager/index.js

@@ -62,4 +62,5 @@ "use strict";
 
-var focusableElements = {
+var elementsToIgnore = {
   A: true,
+  BODY: true,
   INPUT: true,
@@ -79,6 +80,6 @@ SELECT: true,
       var 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.
+      // prevents keyboard focus. We don't want to set the tabindex value on
+      // elements that should not prevent keyboard focus.
 
-      if (node.getAttribute('tabIndex') == null && focusableElements[name] == null) {
+      if (node.getAttribute('tabIndex') == null && node.isContentEditable !== true && elementsToIgnore[name] == null) {
         node.setAttribute('tabIndex', '-1');
@@ -85,0 +86,0 @@ }

dist/cjs/exports/useLocaleContext/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.useLocaleContext = void 0;
+exports.default = void 0;
 
 var _useLocale = require("../../modules/useLocale");
 
-exports.useLocaleContext = _useLocale.useLocaleContext;
+/**
+ * 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.
+ *
+ * 
+ */
+var _default = _useLocale.useLocaleContext;
+exports.default = _default;
+module.exports = exports.default;

dist/cjs/index.js

@@ -276,5 +276,5 @@ "use strict";
 
-var _useLocaleContext = require("./exports/useLocaleContext");
+var _useLocaleContext = _interopRequireDefault(require("./exports/useLocaleContext"));
 
-exports.useLocaleContext = _useLocaleContext.useLocaleContext;
+exports.useLocaleContext = _useLocaleContext.default;
 
@@ -281,0 +281,0 @@ var _useWindowDimensions = _interopRequireDefault(require("./exports/useWindowDimensions"));

dist/cjs/modules/createDOMProps/index.js

@@ -255,3 +255,3 @@ "use strict";
     if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
-      domProps.required = true;
+      domProps.required = accessibilityRequired;
     }
@@ -258,0 +258,0 @@ }

dist/exports/Dimensions/index.js

@@ -28,2 +28,49 @@ /**
 var shouldInit = canUseDOM;
+
+function update() {
+  if (!canUseDOM) {
+    return;
+  }
+
+  var win = window;
+  var height;
+  var width;
+  /**
+   * iOS does not update viewport dimensions on keyboard open/close.
+   * window.visualViewport(https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
+   * is used instead of document.documentElement.clientHeight (which remains as a fallback)
+   */
+
+  if (win.visualViewport) {
+    var visualViewport = win.visualViewport;
+    height = Math.round(visualViewport.height);
+    width = Math.round(visualViewport.width);
+  } else {
+    var docEl = win.document.documentElement;
+    height = docEl.clientHeight;
+    width = docEl.clientWidth;
+  }
+
+  dimensions.window = {
+    fontScale: 1,
+    height,
+    scale: win.devicePixelRatio || 1,
+    width
+  };
+  dimensions.screen = {
+    fontScale: 1,
+    height: win.screen.height,
+    scale: win.devicePixelRatio || 1,
+    width: win.screen.width
+  };
+}
+
+function handleResize() {
+  update();
+
+  if (Array.isArray(listeners['change'])) {
+    listeners['change'].forEach(handler => handler(dimensions));
+  }
+}
+
 export default class Dimensions {
@@ -33,4 +80,3 @@ static get(dimension) {
       shouldInit = false;
-
-      Dimensions._update();
+      update();
     }
@@ -58,27 +104,2 @@
 
-  static _update() {
-    if (!canUseDOM) {
-      return;
-    }
-
-    var win = window;
-    var docEl = win.document.documentElement;
-    dimensions.window = {
-      fontScale: 1,
-      height: docEl.clientHeight,
-      scale: win.devicePixelRatio || 1,
-      width: docEl.clientWidth
-    };
-    dimensions.screen = {
-      fontScale: 1,
-      height: win.screen.height,
-      scale: win.devicePixelRatio || 1,
-      width: win.screen.width
-    };
-
-    if (Array.isArray(listeners['change'])) {
-      listeners['change'].forEach(handler => handler(dimensions));
-    }
-  }
-
   static addEventListener(type, handler) {
@@ -103,3 +124,7 @@ listeners[type] = listeners[type] || [];
 if (canUseDOM) {
-  window.addEventListener('resize', Dimensions._update, false);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', handleResize, false);
+  } else {
+    window.addEventListener('resize', handleResize, false);
+  }
 }

dist/exports/TextInput/index.js

@@ -288,3 +288,3 @@ /**
       if (shouldBlurOnSubmit && hostNode != null) {
-        hostNode.blur();
+        setTimeout(() => hostNode.blur(), 0);
       }
@@ -291,0 +291,0 @@ }

dist/exports/UIManager/index.js

@@ -54,4 +54,5 @@ /**
 
-var focusableElements = {
+var elementsToIgnore = {
   A: true,
+  BODY: true,
   INPUT: true,
@@ -71,6 +72,6 @@ SELECT: true,
       var 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.
+      // prevents keyboard focus. We don't want to set the tabindex value on
+      // elements that should not prevent keyboard focus.
 
-      if (node.getAttribute('tabIndex') == null && focusableElements[name] == null) {
+      if (node.getAttribute('tabIndex') == null && node.isContentEditable !== true && elementsToIgnore[name] == null) {
         node.setAttribute('tabIndex', '-1');
@@ -77,0 +78,0 @@ }

dist/exports/useLocaleContext/index.js

@@ -9,2 +9,3 @@ /**
  */
-export { useLocaleContext } from '../../modules/useLocale';
+import { useLocaleContext } from '../../modules/useLocale';
+export default useLocaleContext;

dist/index.js

@@ -74,3 +74,3 @@ export { default as unstable_createElement } from './exports/createElement';
 export { default as useColorScheme } from './exports/useColorScheme';
-export { useLocaleContext } from './exports/useLocaleContext';
+export { default as useLocaleContext } from './exports/useLocaleContext';
 export { default as useWindowDimensions } from './exports/useWindowDimensions';

dist/modules/createDOMProps/index.js

@@ -253,3 +253,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
     if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
-      domProps.required = true;
+      domProps.required = accessibilityRequired;
     }
@@ -256,0 +256,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
   "name": "react-native-web",
-  "version": "0.18.8",
+  "version": "0.18.12",
   "description": "React Native for Web",
@@ -9,0 +9,0 @@ "module": "dist/index.js",

src/exports/Dimensions/index.js

@@ -49,2 +49,48 @@ /**
 
+function update() {
+  if (!canUseDOM) {
+    return;
+  }
+
+  const win = window;
+  let height;
+  let width;
+
+  /**
+   * iOS does not update viewport dimensions on keyboard open/close.
+   * window.visualViewport(https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
+   * is used instead of document.documentElement.clientHeight (which remains as a fallback)
+   */
+  if (win.visualViewport) {
+    const visualViewport = win.visualViewport;
+    height = Math.round(visualViewport.height);
+    width = Math.round(visualViewport.width);
+  } else {
+    const docEl = win.document.documentElement;
+    height = docEl.clientHeight;
+    width = docEl.clientWidth;
+  }
+
+  dimensions.window = {
+    fontScale: 1,
+    height,
+    scale: win.devicePixelRatio || 1,
+    width
+  };
+
+  dimensions.screen = {
+    fontScale: 1,
+    height: win.screen.height,
+    scale: win.devicePixelRatio || 1,
+    width: win.screen.width
+  };
+}
+
+function handleResize() {
+  update();
+  if (Array.isArray(listeners['change'])) {
+    listeners['change'].forEach((handler) => handler(dimensions));
+  }
+}
+
 export default class Dimensions {
@@ -54,3 +100,3 @@ static get(dimension: DimensionKey): DisplayMetrics {
       shouldInit = false;
-      Dimensions._update();
+      update();
     }
@@ -76,29 +122,2 @@ invariant(dimensions[dimension], `No dimension set for key ${dimension}`);
 
-  static _update() {
-    if (!canUseDOM) {
-      return;
-    }
-
-    const win = window;
-    const docEl = win.document.documentElement;
-
-    dimensions.window = {
-      fontScale: 1,
-      height: docEl.clientHeight,
-      scale: win.devicePixelRatio || 1,
-      width: docEl.clientWidth
-    };
-
-    dimensions.screen = {
-      fontScale: 1,
-      height: win.screen.height,
-      scale: win.devicePixelRatio || 1,
-      width: win.screen.width
-    };
-
-    if (Array.isArray(listeners['change'])) {
-      listeners['change'].forEach((handler) => handler(dimensions));
-    }
-  }
-
   static addEventListener(
@@ -131,3 +150,7 @@ type: DimensionEventListenerType,
 if (canUseDOM) {
-  window.addEventListener('resize', Dimensions._update, false);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', handleResize, false);
+  } else {
+    window.addEventListener('resize', handleResize, false);
+  }
 }

src/exports/TextInput/index.js

@@ -299,3 +299,3 @@ /**
       if (shouldBlurOnSubmit && hostNode != null) {
-        hostNode.blur();
+        setTimeout(() => hostNode.blur(), 0);
       }
@@ -302,0 +302,0 @@ }

src/exports/UIManager/index.js

@@ -36,4 +36,5 @@ /**
 
-const focusableElements = {
+const elementsToIgnore = {
   A: true,
+  BODY: true,
   INPUT: true,
@@ -55,7 +56,8 @@ SELECT: true,
       // 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.
+      // prevents keyboard focus. We don't want to set the tabindex value on
+      // elements that should not prevent keyboard focus.
       if (
         node.getAttribute('tabIndex') == null &&
-        focusableElements[name] == null
+        node.isContentEditable !== true &&
+        elementsToIgnore[name] == null
       ) {
@@ -62,0 +64,0 @@ node.setAttribute('tabIndex', '-1');

src/exports/useLocaleContext/index.js

@@ -10,2 +10,3 @@ /**
 
-export { useLocaleContext } from '../../modules/useLocale';
+import { useLocaleContext } from '../../modules/useLocale';
+export default useLocaleContext;

src/index.js

@@ -80,3 +80,3 @@ // @flow strict
 export { default as useColorScheme } from './exports/useColorScheme';
-export { useLocaleContext } from './exports/useLocaleContext';
+export { default as useLocaleContext } from './exports/useLocaleContext';
 export { default as useWindowDimensions } from './exports/useWindowDimensions';

src/modules/createDOMProps/index.js

@@ -241,3 +241,3 @@ /**
     ) {
-      domProps.required = true;
+      domProps.required = accessibilityRequired;
     }
@@ -244,0 +244,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

2786721

increased by0.1%

Lines of code

64252

increased by0.13%

No dependency changes