@office-iss/react-native-win32 0.71.13 → 0.71.15

package/CHANGELOG.json

@@ -2,7 +2,43 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 23:48:53 GMT",
+      "date": "Mon, 28 Aug 2023 15:14:00 GMT",
+      "tag": "@office-iss/react-native-win32_v0.71.15",
+      "version": "0.71.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "krsiler@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "3183aace3dc9e1a687df06c6c86792d96619c285",
+            "comment": "fix a11yState and add support for aria-required and -multiselectable"
+          },
+          {
+            "author": "30809111+acoates-ms@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "acc90938f92e73823f2137ae2d8d958c8983f310",
+            "comment": "Remove flow usage from saveAssetPlugin codeflow"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Aug 2023 00:26:16 GMT",
+      "tag": "@office-iss/react-native-win32_v0.71.14",
+      "version": "0.71.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "30809111+acoates-ms@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "819530506ec8814c704ca77907c632b75fc9d451",
+            "comment": "Add saveAssetPlugin to fix long path assets"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 23:49:15 GMT",
       "tag": "@office-iss/react-native-win32_v0.71.13",
       "version": "0.71.13",
       "comments": {

package/CHANGELOG.md

@@ -1,17 +1,34 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Fri, 04 Aug 2023 23:48:53 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Aug 2023 15:14:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.71.13
+## 0.71.15
 
-Fri, 04 Aug 2023 23:48:53 GMT
+Mon, 28 Aug 2023 15:14:00 GMT
 
 ### Patches
 
-- add isDefaultButton check to win32 (email not defined)
+- fix a11yState and add support for aria-required and -multiselectable (krsiler@microsoft.com)
+- Remove flow usage from saveAssetPlugin codeflow (30809111+acoates-ms@users.noreply.github.com)
 
+## 0.71.14
+
+Fri, 11 Aug 2023 00:26:16 GMT
+
+### Patches
+
+- Add saveAssetPlugin to fix long path assets (30809111+acoates-ms@users.noreply.github.com)
+
+## 0.71.13
+
+Fri, 04 Aug 2023 23:49:15 GMT
+
+### Patches
+
+- add isDefaultButton check to win32 (email not defined)
+
 ## 0.71.12
 
 Thu, 06 Jul 2023 20:21:35 GMT

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -74,6 +74,8 @@ type Props = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-multiselectable'?: ?boolean, // Win32
+  'aria-required'?: ?boolean, // Win32
   /**
    * A value indicating whether the accessibility elements contained within
    * this accessibility element are hidden.
@@ -257,6 +259,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-label': ariaLabel,
+    'aria-multiselectable': ariaMultiselectable, // Win32
+    'aria-required': ariaRequired, // Win32
     'aria-selected': ariaSelected,
     cancelable,
     children,
@@ -297,6 +301,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
     checked: ariaChecked ?? accessibilityState?.checked,
     disabled: ariaDisabled ?? accessibilityState?.disabled,
     expanded: ariaExpanded ?? accessibilityState?.expanded,
+    multiselectable: ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
+    required: ariaRequired ?? accessibilityState?.required, // Win32
     selected: ariaSelected ?? accessibilityState?.selected,
   };
 

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -1101,6 +1101,8 @@ function InternalTextInput(props: Props): React.Node {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-multiselectable': ariaMultiselectable, // Win32
+    'aria-required': ariaRequired, // Win32
     accessibilityState,
     id,
     tabIndex,
@@ -1491,6 +1493,8 @@ function InternalTextInput(props: Props): React.Node {
     ariaChecked != null ||
     ariaDisabled != null ||
     ariaExpanded != null ||
+    ariaMultiselectable != null ||
+    ariaRequired != null ||
     ariaSelected != null
   ) {
     _accessibilityState = {
@@ -1498,6 +1502,9 @@ function InternalTextInput(props: Props): React.Node {
       checked: ariaChecked ?? accessibilityState?.checked,
       disabled: ariaDisabled ?? accessibilityState?.disabled,
       expanded: ariaExpanded ?? accessibilityState?.expanded,
+      multiselectable:
+        ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
+      required: ariaRequired ?? accessibilityState?.required, // Win32
       selected: ariaSelected ?? accessibilityState?.selected,
     };
   }

package/Libraries/Components/View/View.win32.js

@@ -50,6 +50,8 @@ const View: React.AbstractComponent<
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
       'aria-live': ariaLive,
+      'aria-multiselectable': ariaMultiselectable, // Win32
+      'aria-required': ariaRequired, // Win32
       'aria-selected': ariaSelected,
       'aria-valuemax': ariaValueMax,
       'aria-valuemin': ariaValueMin,
@@ -76,6 +78,8 @@ const View: React.AbstractComponent<
       ariaChecked != null ||
       ariaDisabled != null ||
       ariaExpanded != null ||
+      ariaMultiselectable != null ||
+      ariaRequired != null ||
       ariaSelected != null
     ) {
       _accessibilityState = {
@@ -83,6 +87,9 @@ const View: React.AbstractComponent<
         checked: ariaChecked ?? accessibilityState?.checked,
         disabled: ariaDisabled ?? accessibilityState?.disabled,
         expanded: ariaExpanded ?? accessibilityState?.expanded,
+        multiselectable:
+          ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
+        required: ariaRequired ?? accessibilityState?.required, // Win32
         selected: ariaSelected ?? accessibilityState?.selected,
       };
     }

package/Libraries/Components/View/ViewAccessibility.d.ts

@@ -57,6 +57,8 @@ export interface AccessibilityProps
   'aria-checked'?: boolean | 'mixed' | undefined;
   'aria-disabled'?: boolean | undefined;
   'aria-expanded'?: boolean | undefined;
+  'aria-multiselectable'?: boolean | undefined; // Win32
+  'aria-required'?: boolean | undefined; // Win32
   'aria-selected'?: boolean | undefined;
 
   /**

package/Libraries/Components/View/ViewAccessibility.win32.js

@@ -152,6 +152,8 @@ export type AccessibilityState = {
   checked?: ?boolean | 'mixed',
   busy?: boolean,
   expanded?: boolean,
+  multiselectable?: boolean, // Win32
+  required?: boolean, // Win32
   ...
 };
 

package/Libraries/Components/View/ViewPropTypes.win32.js

@@ -467,6 +467,8 @@ type WindowsViewProps = $ReadOnly<{|
 
   accessibilityPosInSet?: ?number,
   accessibilitySetSize?: ?number,
+  'aria-multiselectable'?: ?boolean,
+  'aria-required'?: ?boolean,
 
   /**
    * Specifies if the control should show System focus visuals

package/Libraries/Image/Image.win32.js

@@ -170,6 +170,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
+    'aria-multiselectable': ariaMultiselectable, // Win32
+    'aria-required': ariaRequired, // Win32
     'aria-selected': ariaSelected,
     height,
     src,
@@ -182,6 +184,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     checked: ariaChecked ?? props.accessibilityState?.checked,
     disabled: ariaDisabled ?? props.accessibilityState?.disabled,
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
+    multiselectable:
+      ariaMultiselectable ?? props.accessibilityState?.multiselectable, // Win32
+    required: ariaRequired ?? props.accessibilityState?.required, // Win32
     selected: ariaSelected ?? props.accessibilityState?.selected,
   };
   const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;

package/Libraries/Image/assetPaths.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Dont use flow here, since this file is used by saveAssetPlugin.js which will run without flow transform
+ * @format
+ */
+
+'use strict';
+
+// Some windows machines may not have long paths enabled
+// https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation
+// Assets in nested node_modules (common when using pnpm) - end up creating very long paths
+// Using this function we shorten longer paths to prevent paths from hitting the path limit
+function ensureShortPath(str) {
+  if (str.length < 40) return str;
+
+  const assetsPrefix = 'assets/';
+
+  if (!str.startsWith(assetsPrefix)) {
+    console.warn(`Unexpected asset uri - ${str} may not load correctly.`);
+  }
+
+  const postStr = str.slice(assetsPrefix.length);
+  var hash = 0,
+    i,
+    chr;
+  for (i = 0; i < postStr.length; i++) {
+    chr = postStr.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return assetsPrefix + hash.toString();
+}
+
+module.exports = ensureShortPath;

package/Libraries/Image/resolveAssetSource.win32.js

@@ -10,6 +10,7 @@
 
 const resolveAssetSource = require('./resolveAssetSource.js'); // Get base impl
 const Platform = require('../Utilities/Platform');
+const ensureShortPath = require('./assetPaths.js');
 
 type IPackagerAsset = {
   __packager_asset: boolean,
@@ -56,7 +57,7 @@ class AssetResolverLateScaleResolution {
    */
   _scaledAssetURLInBundle() {
     const path = this._resolver.bundleUrl || 'file://';
-    return this._fromSource(path + this._getAssetPath());
+    return this._fromSource(path + this._getAssetPath(true));
   }
 
   /**
@@ -66,7 +67,7 @@ class AssetResolverLateScaleResolution {
   _assetServerURL() {
     return this._fromSource(
       this._resolver.serverUrl +
-        this._getAssetPath() +
+        this._getAssetPath(false) +
         '?platform=' +
         Platform.OS +
         '&hash=' +
@@ -77,8 +78,8 @@ class AssetResolverLateScaleResolution {
   /**
    * Returns a path like 'assets/AwesomeModule/icon.png'
    */
-  _getAssetPath(): string {
-    const assetDir = this._getBasePath();
+  _getAssetPath(local: boolean): string {
+    const assetDir = this._getBasePath(local);
     return (
       assetDir +
       '/' +
@@ -88,7 +89,19 @@ class AssetResolverLateScaleResolution {
     );
   }
 
-  _getBasePath() {
+  _getBasePath(local: boolean) {
+    if (local) {
+      const safePath = this._resolver.asset.httpServerLocation
+        .substr(1)
+        .replace(/\.\.\//g, '_');
+      // If this asset was created with the newer saveAssetPlugin, then we should shorten the path
+      // This conditional is added to allow back compat of older bundles which might have been created without the saveAssetPlugin
+      if (this._resolver.asset.__useShortPath) {
+        return ensureShortPath(safePath);
+      }
+      return safePath;
+    }
+
     let basePath = this._resolver.asset.httpServerLocation;
     if (basePath[0] === '/') {
       basePath = basePath.substr(1);

package/metro.config.js

@@ -14,3 +14,5 @@ if (
 
 const {makeMetroConfig} = require('@rnw-scripts/metro-dev-config');
 module.exports = makeMetroConfig();
+// Enable this when RN CLI gets support for saveAssetPlugins: https://github.com/react-native-community/cli/pull/2002
+// module.exports.transformer.assetPlugins = [require.resolve('./metroShortPathAssetDataPlugin.js')];

package/metroShortPathAssetDataPlugin.js

@@ -0,0 +1,15 @@
+// @ts-check
+/**
+ * @typedef {import("metro").AssetData} AssetData;
+ **/
+
+/**
+ * @param {AssetData & {__useShortPath: boolean}} asset
+ * @returns {Promise<AssetData>}
+ */
+async function metroShortPathAssetDataPlugin(asset) {
+  asset.__useShortPath = true;
+  return Promise.resolve(asset);
+  }
+
+module.exports = metroShortPathAssetDataPlugin;

package/overrides.json

@@ -221,6 +221,10 @@
       "baseHash": "37908d71eb9a61c619f700795ff2d692410c5a57",
       "issue": 5170
     },
+    {
+      "type": "platform",
+      "file": "src/Libraries/Image/assetPaths.js"
+    },
     {
       "type": "derived",
       "file": "src/Libraries/Image/Image.win32.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.71.13",
+  "version": "0.71.15",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "license": "MIT",
   "main": "./index.win32.js",

package/react-native.config.js

@@ -7,6 +7,8 @@ module.exports = {
         projectConfig: (projectRoot, projectParams) => null,
         dependencyConfig: (projectRoot, dependencyParams) => null,
         npmPackageName: '@office-iss/react-native-win32',
+        // Enable once CLI config supports it - https://github.com/react-native-community/cli/pull/2002
+        // saveAssetsPlugin: '@office-iss/react-native-win32/saveAssetPlugin'
       },
     },
   };

package/saveAssetPlugin.js

@@ -0,0 +1,45 @@
+// @ts-check
+const path = require('path');
+const ensureShortPath = require('./Libraries/Image/assetPaths');
+
+/**
+ * @typedef {import("metro").AssetData} AssetData;
+ **/
+
+/**
+ * @param {AssetData} asset
+ * @param {number} scale 
+ * @returns {string}
+ */
+function getAssetDestPath(asset, scale) {
+  const suffix = scale === 1 ? '' : `@${scale}x`;
+  const fileName = `${asset.name + suffix}.${asset.type}`;
+  return path.join(
+    // Assets can have relative paths outside of the project root.
+    // Replace `../` with `_` to make sure they don't end up outside of
+    // the expected assets directory.
+    ensureShortPath(asset.httpServerLocation.substr(1).replace(/\.\.\//g, '_')),
+    fileName,
+  );
+}
+
+/**
+ * @param {ReadonlyArray<AssetData>} assets 
+ * @param {string} _platform 
+ * @param {string | undefined} _assetsDest 
+ * @param {string | undefined} _assetCatalogDest 
+ * @param {(asset: AssetData, allowedScales: number[] | undefined, getAssetDestPath: (asset: AssetData, scale: number) => string) => void} addAssetToCopy 
+ */
+function saveAssetsWin32(
+  assets,
+  _platform,
+  _assetsDest,
+  _assetCatalogDest,
+  addAssetToCopy,
+) {
+  assets.forEach((asset) =>
+    addAssetToCopy(asset, undefined, getAssetDestPath),
+  );
+}
+
+module.exports = saveAssetsWin32;

package/src/Libraries/Components/View/ViewAccessibility.d.ts

@@ -57,6 +57,8 @@ export interface AccessibilityProps
   'aria-checked'?: boolean | 'mixed' | undefined;
   'aria-disabled'?: boolean | undefined;
   'aria-expanded'?: boolean | undefined;
+  'aria-multiselectable'?: boolean | undefined; // Win32
+  'aria-required'?: boolean | undefined; // Win32
   'aria-selected'?: boolean | undefined;
 
   /**