@office-iss/react-native-win32 0.0.0-canary.263 → 0.0.0-canary.265

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

@@ -249,7 +249,10 @@ export type TextContentType =
   | 'birthdate'
   | 'birthdateDay'
   | 'birthdateMonth'
-  | 'birthdateYear';
+  | 'birthdateYear'
+  | 'dateTime'
+  | 'flightNumber'
+  | 'shipmentTrackingNumber';
 
 export type enterKeyHintType =
   // Cross Platform
@@ -366,6 +369,19 @@ type IOSProps = $ReadOnly<{|
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 
+  /**
+   * Set line break mode on iOS.
+   * @platform ios
+   */
+  lineBreakModeIOS?: ?(
+    | 'wordWrapping'
+    | 'char'
+    | 'clip'
+    | 'head'
+    | 'middle'
+    | 'tail'
+  ),
+
   /**
    * If `false`, the iOS system will not insert an extra space after a paste operation
    * neither delete one or two spaces after a cut or delete operation.

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -28,7 +28,7 @@ type Props = $ReadOnly<{|
   releaseVelocity?: ?number,
   style?: ?ViewStyleProp,
 
-  hostRef: React.Ref<typeof Animated.View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 
 type State = $ReadOnly<{|

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -44,7 +44,7 @@ type Props = $ReadOnly<{|
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
-  hostRef: React.Ref<typeof View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 |}>;
 
 type ExtraStyles = $ReadOnly<{|
@@ -382,7 +382,7 @@ class TouchableHighlight extends React.Component<Props, State> {
 }
 
 const Touchable: React.AbstractComponent<
-  $ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
+  $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>,
   React.ElementRef<typeof View>,
 > = React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -37,7 +37,7 @@ type Props = $ReadOnly<{|
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
 
-  hostRef?: ?React.Ref<typeof Animated.View>,
+  hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 
 type State = $ReadOnly<{|

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -120,7 +120,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  experimental_filter: {process: processFilter},
+  filter: {process: processFilter},
 
   /**
    * MixBlendMode
@@ -135,7 +135,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  experimental_boxShadow: {process: processBoxShadow},
+  boxShadow: {process: processBoxShadow},
 
   /**
    * Linear Gradient
@@ -174,6 +174,10 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderTopStartRadius: true,
   cursor: true,
   opacity: true,
+  outlineColor: colorAttributes,
+  outlineOffset: true,
+  outlineStyle: true,
+  outlineWidth: true,
   pointerEvents: true,
 
   /**

package/Libraries/Core/ReactNativeVersion.js

@@ -15,9 +15,9 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 76,
+  minor: 77,
   patch: 0,
-  prerelease: 'nightly-20240909-143f1ad29',
+  prerelease: 'nightly-20240921-1747f57c6',
 };
 
 module.exports = {version};

package/Libraries/Image/AssetSourceResolver.js

@@ -53,6 +53,13 @@ function getAssetPathInDrawableFolder(asset: PackagerAsset): string {
   return drawableFolder + '/' + fileName + '.' + asset.type;
 }
 
+/**
+ * Returns true if the asset can be loaded over the network.
+ */
+function assetSupportsNetworkLoads(asset: PackagerAsset): boolean {
+  return !(asset.type === 'xml' && Platform.OS === 'android');
+}
+
 class AssetSourceResolver {
   serverUrl: ?string;
   // where the jsbundle is being run from
@@ -67,7 +74,11 @@ class AssetSourceResolver {
   }
 
   isLoadedFromServer(): boolean {
-    return !!this.serverUrl;
+    return (
+      this.serverUrl != null &&
+      this.serverUrl !== '' &&
+      assetSupportsNetworkLoads(this.asset)
+    );
   }
 
   isLoadedFromFileSystem(): boolean {

package/Libraries/Modal/Modal.d.ts

@@ -10,6 +10,7 @@
 import type * as React from 'react';
 import {ViewProps} from '../Components/View/ViewPropTypes';
 import {NativeSyntheticEvent} from '../Types/CoreEventTypes';
+import {ColorValue} from '../StyleSheet/StyleSheet';
 
 export interface ModalBaseProps {
   /**
@@ -43,6 +44,12 @@ export interface ModalBaseProps {
    * The `onShow` prop allows passing a function that will be called once the modal has been shown.
    */
   onShow?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
+
+  /**
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   */
+  backdropColor?: ColorValue | undefined;
 }
 
 export interface ModalPropsIOS {

package/Libraries/Modal/Modal.js

@@ -157,6 +157,12 @@ export type Props = $ReadOnly<{|
    * See https://reactnative.dev/docs/modal#onorientationchange
    */
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   */
+  backdropColor?: ?string,
 |}>;
 
 function confirmProps(props: Props) {
@@ -249,7 +255,9 @@ class Modal extends React.Component<Props, State> {
 
     const containerStyles = {
       backgroundColor:
-        this.props.transparent === true ? 'transparent' : 'white',
+        this.props.transparent === true
+          ? 'transparent'
+          : this.props.backdropColor ?? 'white',
     };
 
     let animationType = this.props.animationType || 'none';

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -169,10 +169,10 @@ const validAttributesForNonEventProps = {
   experimental_backgroundImage: {
     process: require('../StyleSheet/processBackgroundImage').default,
   },
-  experimental_boxShadow: {
+  boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
   experimental_mixBlendMode: true,
@@ -268,6 +268,11 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderRightWidth: true,
 
+  outlineColor: {process: require('../StyleSheet/processColor').default},
+  outlineOffset: true,
+  outlineStyle: true,
+  outlineWidth: true,
+
   start: true,
   end: true,
   left: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -198,6 +198,7 @@ const validAttributesForNonEventProps = {
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
+  cursor: true,
   opacity: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
@@ -216,16 +217,18 @@ const validAttributesForNonEventProps = {
   role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
+  borderBlockWidth: true,
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
   collapsableChildren: true,
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
-  experimental_boxShadow: {
+  boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
   experimental_mixBlendMode: true,
@@ -240,9 +243,15 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
+  borderBlockStartWidth: true,
   borderStartColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
   borderEndWidth: true,
+  borderBlockEndWidth: true,
   borderEndColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -225,7 +225,7 @@ const validAttributesForNonEventProps = {
   experimental_filter: {
     process: require('../StyleSheet/processFilter').default,
   },
-  experimental_boxShadow: {
+  boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
   experimental_mixBlendMode: true,

package/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -9,7 +9,6 @@
  */
 
 import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
-import {isIgnored} from './ViewConfigIgnore';
 
 export type Difference =
   | {

package/Libraries/ReactNative/AppRegistry.js

@@ -13,7 +13,7 @@ import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import type {DisplayModeType} from './DisplayMode';
 
-import BatchedBridge from '../BatchedBridge/BatchedBridge';
+import registerCallableModule from '../Core/registerCallableModule';
 import BugReporting from '../BugReporting/BugReporting';
 import createPerformanceLogger from '../Utilities/createPerformanceLogger';
 import infoLog from '../Utilities/infoLog';
@@ -361,10 +361,6 @@ global.RN$SurfaceRegistry = {
   setSurfaceProps: AppRegistry.setSurfaceProps,
 };
 
-if (global.RN$Bridgeless === true) {
-  console.log('Bridgeless mode is enabled');
-} else {
-  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
-}
+registerCallableModule('AppRegistry', AppRegistry);
 
 module.exports = AppRegistry;

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -188,6 +188,10 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
     case 'UIImage':
     case 'RCTImageSource':
       return resolveAssetSource;
+    case 'BoxShadowArray':
+      return processBoxShadow;
+    case 'FilterArray':
+      return processFilter;
     // Android Types
     case 'Color':
       return processColor;

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<89361333bb6b688486e35849a9c669a6>>
+ * @generated SignedSource<<3eb929731c259569c7af3b6479e486fe>>
  */
 
 import type {
@@ -234,8 +234,8 @@ export type ReactNativeType = {
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
-  unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
+  +unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
+  +__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
   ...
 };
 

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict-local
- * @generated SignedSource<<69d0cc554d77cddb1c779dfbdf569505>>
+ * @generated SignedSource<<83073425aa3f71ced2c8c51f25a25938>>
  */
 
 'use strict';
@@ -94,8 +94,8 @@ export function register(name: string, callback: () => ViewConfig): string {
  * This configuration will be lazy-loaded from UIManager.
  */
 export function get(name: string): ViewConfig {
-  let viewConfig;
-  if (!viewConfigs.has(name)) {
+  let viewConfig = viewConfigs.get(name);
+  if (viewConfig == null) {
     const callback = viewConfigCallbacks.get(name);
     if (typeof callback !== 'function') {
       invariant(
@@ -110,15 +110,14 @@ export function get(name: string): ViewConfig {
       );
     }
     viewConfig = callback();
+    invariant(viewConfig, 'View config not found for component `%s`', name);
+
     processEventTypes(viewConfig);
     viewConfigs.set(name, viewConfig);
 
     // Clear the callback after the config is set so that
     // we don't mask any errors during registration.
     viewConfigCallbacks.set(name, null);
-  } else {
-    viewConfig = viewConfigs.get(name);
   }
-  invariant(viewConfig, 'View config not found for name %s', name);
   return viewConfig;
 }

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -110,11 +110,102 @@ export interface FlexStyle {
   top?: DimensionValue | undefined;
   width?: DimensionValue | undefined;
   zIndex?: number | undefined;
+  direction?: 'inherit' | 'ltr' | 'rtl' | undefined;
 
   /**
-   * @platform ios
+   * Equivalent to `top`, `bottom`, `right` and `left`
    */
-  direction?: 'inherit' | 'ltr' | 'rtl' | undefined;
+  inset?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `top`, `bottom`
+   */
+  insetBlock?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `bottom`
+   */
+  insetBlockEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `top`
+   */
+  insetBlockStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `right` and `left`
+   */
+  insetInline?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `right` or `left`
+   */
+  insetInlineEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `right` or `left`
+   */
+  insetInlineStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginVertical`
+   */
+  marginBlock?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginBottom`
+   */
+  marginBlockEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginTop`
+   */
+  marginBlockStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginHorizontal`
+   */
+  marginInline?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginEnd`
+   */
+  marginInlineEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginStart`
+   */
+  marginInlineStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingVertical`
+   */
+  paddingBlock?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingBottom`
+   */
+  paddingBlockEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingTop`
+   */
+  paddingBlockStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingHorizontal`
+   */
+  paddingInline?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingEnd`
+   */
+  paddingInlineEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingStart`
+   */
+  paddingInlineStart?: DimensionValue | undefined;
 }
 
 export interface ShadowStyleIOS {
@@ -239,16 +330,16 @@ export type FilterFunction =
   | {opacity: number | string}
   | {saturate: number | string}
   | {sepia: number | string}
-  | {dropShadow: DropShadowPrimitive | string};
+  | {dropShadow: DropShadowValue | string};
 
-export type DropShadowPrimitive = {
+export type DropShadowValue = {
   offsetX: number | string;
   offsetY: number | string;
   standardDeviation?: number | string | undefined;
   color?: ColorValue | number | undefined;
 };
 
-export type BoxShadowPrimitive = {
+export type BoxShadowValue = {
   offsetX: number | string;
   offsetY: number | string;
   color?: string | undefined;
@@ -320,6 +411,10 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   borderTopLeftRadius?: AnimatableNumericValue | string | undefined;
   borderTopRightRadius?: AnimatableNumericValue | string | undefined;
   borderTopStartRadius?: AnimatableNumericValue | string | undefined;
+  outlineColor?: ColorValue | undefined;
+  outlineOffset?: AnimatableNumericValue | undefined;
+  outlineStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
+  outlineWidth?: AnimatableNumericValue | undefined;
   opacity?: AnimatableNumericValue | undefined;
   /**
    * Sets the elevation of a view, using Android's underlying
@@ -336,6 +431,8 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
   isolation?: 'auto' | 'isolate' | undefined;
   cursor?: CursorValue | undefined;
+  boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
+  filter?: ReadonlyArray<FilterFunction> | string | undefined;
 }
 
 export type FontVariant =

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -700,9 +700,9 @@ export type FilterFunction =
   | {opacity: number | string}
   | {saturate: number | string}
   | {sepia: number | string}
-  | {dropShadow: DropShadowPrimitive | string};
+  | {dropShadow: DropShadowValue | string};
 
-export type DropShadowPrimitive = {
+export type DropShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
   standardDeviation?: number | string,
@@ -719,7 +719,7 @@ export type GradientValue = {
   }>,
 };
 
-export type BoxShadowPrimitive = {
+export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
   color?: ____ColorValue_Internal,
@@ -785,11 +785,15 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderStartWidth?: AnimatableNumericValue,
   borderTopWidth?: AnimatableNumericValue,
   opacity?: AnimatableNumericValue,
+  outlineColor?: ____ColorValue_Internal,
+  outlineOffset?: AnimatableNumericValue,
+  outlineStyle?: 'solid' | 'dotted' | 'dashed',
+  outlineWidth?: AnimatableNumericValue,
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
-  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
-  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
+  boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
+  filter?: $ReadOnlyArray<FilterFunction> | string,
   experimental_mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
   isolation?: 'auto' | 'isolate',

package/Libraries/StyleSheet/processBoxShadow.js

@@ -10,7 +10,7 @@
  */
 
 import type {ProcessedColorValue} from './processColor';
-import type {BoxShadowPrimitive} from './StyleSheetTypes';
+import type {BoxShadowValue} from './StyleSheetTypes';
 
 import processColor from './processColor';
 
@@ -24,7 +24,7 @@ export type ParsedBoxShadow = {
 };
 
 export default function processBoxShadow(
-  rawBoxShadows: ?($ReadOnlyArray<BoxShadowPrimitive> | string),
+  rawBoxShadows: ?($ReadOnlyArray<BoxShadowValue> | string),
 ): Array<ParsedBoxShadow> {
   const result: Array<ParsedBoxShadow> = [];
   if (rawBoxShadows == null) {
@@ -106,16 +106,14 @@ export default function processBoxShadow(
   return result;
 }
 
-function parseBoxShadowString(
-  rawBoxShadows: string,
-): Array<BoxShadowPrimitive> {
-  let result: Array<BoxShadowPrimitive> = [];
+function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
+  let result: Array<BoxShadowValue> = [];
 
   for (const rawBoxShadow of rawBoxShadows
     .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
     .map(bS => bS.trim())
     .filter(bS => bS !== '')) {
-    const boxShadow: BoxShadowPrimitive = {
+    const boxShadow: BoxShadowValue = {
       offsetX: 0,
       offsetY: 0,
     };

package/Libraries/StyleSheet/processFilter.js

@@ -12,7 +12,7 @@
 'use strict';
 
 import type {ColorValue} from './StyleSheet';
-import type {DropShadowPrimitive, FilterFunction} from './StyleSheetTypes';
+import type {DropShadowValue, FilterFunction} from './StyleSheetTypes';
 
 import processColor from './processColor';
 
@@ -179,7 +179,7 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
 }
 
 function parseDropShadow(
-  rawDropShadow: string | DropShadowPrimitive,
+  rawDropShadow: string | DropShadowValue,
 ): ?ParsedDropShadow {
   const dropShadow =
     typeof rawDropShadow === 'string'
@@ -248,8 +248,8 @@ function parseDropShadow(
   return parsedDropShadow;
 }
 
-function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive {
-  const dropShadow: DropShadowPrimitive = {
+function parseDropShadowString(rawDropShadow: string): ?DropShadowValue {
+  const dropShadow: DropShadowValue = {
     offsetX: 0,
     offsetY: 0,
   };

package/Libraries/Text/TextNativeComponent.js

@@ -16,7 +16,6 @@ import type {TextProps} from './TextProps';
 import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
-import Platform from '../Utilities/Platform';
 
 export type NativeTextProps = $ReadOnly<{
   ...TextProps,

package/Libraries/Utilities/HMRClient.js

@@ -153,11 +153,11 @@ const HMRClient: HMRClientNativeInterface = {
         level: 'info',
         data: [
           '\n' +
-            '\x1b[7m' +
-            ' \x1b[1mJavaScript logs have moved!\x1b[22m They will now appear in the debugger console. ' +
-            'Tip: Type \x1b[1mj\x1b[22m in the terminal to open the debugger (requires Google Chrome ' +
-            'or Microsoft Edge).' +
-            '\x1b[27m' +
+            '\u001B[7m' +
+            ' \u001B[1m💡 JavaScript logs have moved!\u001B[22m They can now be ' +
+            'viewed in React Native DevTools. Tip: Type \u001B[1mj\u001B[22m in ' +
+            'the terminal to open (requires Google Chrome or Microsoft Edge).' +
+            '\u001B[27m' +
             '\n',
         ],
       }),