@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.2

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,15 +7,10 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<89361333bb6b688486e35849a9c669a6>>
+ * @generated SignedSource<<9cf3e28d6ca0299bc0bb5caa75b19556>>
  */
 
-import type {
-  ElementRef,
-  ElementType,
-  MixedElement,
-  AbstractComponent,
-} from 'react';
+import type {ElementRef, ElementType, MixedElement} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -113,38 +108,34 @@ export interface INativeMethods {
   measure(callback: MeasureOnSuccessCallback): void;
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void;
   setNativeProps(nativeProps: {...}): void;
 }
 
-export type NativeMethods = $ReadOnly<{|
+export type NativeMethods = $ReadOnly<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
-|}>;
+}>;
 
 // This validates that INativeMethods and NativeMethods stay in sync using Flow!
 declare const ensureNativeMethodsAreSynced: NativeMethods;
 (ensureNativeMethodsAreSynced: INativeMethods);
 
-export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
-
-type SecretInternalsType = {
-  computeComponentStackForErrorReporting(tag: number): string,
-  // TODO (bvaughn) Decide which additional types to expose here?
-  // And how much information to fill in for the above types.
-  ...
-};
+export type HostInstance = NativeMethods;
+/*::
+export type HostComponent<Config: {...}> = component(ref: React$RefSetter<HostInstance>, ...Config);
+*/
 
 type InspectorDataProps = $ReadOnly<{
   [propName: string]: string,
@@ -180,6 +171,7 @@ export type TouchedViewDataAtPoint = $ReadOnly<{
     width: number,
     height: number,
   }>,
+  closestPublicInstance?: PublicInstance,
   ...InspectorData,
 }>;
 
@@ -209,23 +201,22 @@ export type RenderRootOptions = {
 export type ReactNativeType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
-  ): ?ElementRef<HostComponent<mixed>>,
+  ): ?HostInstance,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
   isChildPublicInstance(
-    parent: PublicInstance | HostComponent<mixed>,
-    child: PublicInstance | HostComponent<mixed>,
+    // eslint-disable-next-line no-undef
+    parent: PublicInstance | HostComponent<empty>,
+    // eslint-disable-next-line no-undef
+    child: PublicInstance | HostComponent<empty>,
   ): boolean,
   dispatchCommand(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     command: string,
     args: Array<mixed>,
   ): void,
-  sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
-    eventType: string,
-  ): void,
+  sendAccessibilityEvent(handle: HostInstance, eventType: string): void,
   render(
     element: MixedElement,
     containerTag: number,
@@ -234,8 +225,7 @@ 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,
   ...
 };
 
@@ -247,20 +237,17 @@ type PublicTextInstance = mixed;
 export type ReactFabricType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
-  ): ?ElementRef<HostComponent<mixed>>,
+  ): ?HostInstance,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
   dispatchCommand(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     command: string,
     args: Array<mixed>,
   ): void,
   isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
-  sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
-    eventType: string,
-  ): void,
+  sendAccessibilityEvent(handle: HostInstance, eventType: string): void,
   render(
     element: MixedElement,
     containerTag: number,

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/Renderer/shims/createReactNativeComponentClass.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict-local
- * @generated SignedSource<<62e766b69d440dab0a2d249f0cea38e0>>
+ * @generated SignedSource<<52163887de05f1cff05388145cf85b3b>>
  */
 
 'use strict';
@@ -32,4 +32,4 @@ const createReactNativeComponentClass = function (
   return register(name, callback);
 };
 
-module.exports = createReactNativeComponentClass;
+export default createReactNativeComponentClass;

package/Libraries/StyleSheet/StyleSheet.js

@@ -170,7 +170,13 @@ if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }
 
-const absoluteFill = {
+const absoluteFill: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+} = {
   position: 'absolute',
   left: 0,
   right: 0,

package/Libraries/StyleSheet/StyleSheet.win32.js

@@ -172,7 +172,13 @@ if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }
 
-const absoluteFill = {
+const absoluteFill: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+} = {
   position: 'absolute',
   left: 0,
   right: 0,

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -55,7 +55,8 @@ export interface FlexStyle {
   borderTopWidth?: number | undefined;
   borderWidth?: number | undefined;
   bottom?: DimensionValue | undefined;
-  display?: 'none' | 'flex' | undefined;
+  boxSizing?: 'border-box' | 'content-box' | undefined;
+  display?: 'none' | 'flex' | 'contents' | undefined;
   end?: DimensionValue | undefined;
   flex?: number | undefined;
   flexBasis?: DimensionValue | undefined;
@@ -411,6 +412,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
@@ -429,6 +434,12 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   cursor?: CursorValue | undefined;
   boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
   filter?: ReadonlyArray<FilterFunction> | string | undefined;
+
+  mixBlendMode?: BlendMode | undefined;
+  experimental_backgroundImage?:
+    | ReadonlyArray<GradientValue>
+    | string
+    | undefined;
 }
 
 export type FontVariant =
@@ -557,6 +568,6 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   overlayColor?: ColorValue | undefined;
   tintColor?: ColorValue | undefined;
   opacity?: AnimatableNumericValue | undefined;
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined;
   cursor?: CursorValue | undefined;
 }

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {ImageResizeMode} from './../Image/ImageResizeMode';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -58,7 +59,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
    *  'flex' is the default.
    */
-  display?: 'none' | 'flex',
+  display?: 'none' | 'flex' | 'contents',
 
   /** `width` sets the width of this component.
    *
@@ -612,6 +613,19 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   aspectRatio?: number | string,
 
+  /**
+   * Box sizing controls whether certain size properties apply to the node's
+   * content box or border box. The size properties in question include `width`,
+   * `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, and `flexBasis`.
+   *
+   * e.g: Say a node has 10px of padding and 10px of borders on all
+   * sides and a defined `width` and `height` of 100px and 50px. Then the total
+   * size of the node (content area + padding + border) would be 100px by 50px
+   * under `boxSizing: border-box` and 120px by 70px under
+   * `boxSizing: content-box`.
+   */
+  boxSizing?: 'border-box' | 'content-box',
+
   /** `zIndex` controls which components display on top of others.
    *  Normally, you don't use `zIndex`. Components render according to
    *  their order in the document tree, so later components draw over
@@ -785,12 +799,16 @@ 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,
   boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
   filter?: $ReadOnlyArray<FilterFunction> | string,
-  experimental_mixBlendMode?: ____BlendMode_Internal,
+  mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
   isolation?: 'auto' | 'isolate',
 }>;
@@ -924,8 +942,8 @@ export type ____TextStyle_Internal = $ReadOnly<{
 
 export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;
@@ -937,8 +955,8 @@ export type ____ImageStyle_Internal = $ReadOnly<{
 
 export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -14,25 +14,28 @@ import type {ProcessedColorValue} from './processColor';
 import type {GradientValue} from './StyleSheetTypes';
 
 const processColor = require('./processColor').default;
-const DIRECTION_REGEX =
-  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/;
+const DIRECTION_KEYWORD_REGEX =
+  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/i;
 const ANGLE_UNIT_REGEX = /^([+-]?\d*\.?\d+)(deg|grad|rad|turn)$/i;
 
-const TO_BOTTOM_START_END_POINTS = {
-  start: {x: 0.5, y: 0},
-  end: {x: 0.5, y: 1},
-};
+type LinearGradientDirection =
+  | {type: 'angle', value: number}
+  | {type: 'keyword', value: string};
 
 type ParsedGradientValue = {
   type: 'linearGradient',
-  start: {x: number, y: number},
-  end: {x: number, y: number},
+  direction: LinearGradientDirection,
   colorStops: $ReadOnlyArray<{
     color: ProcessedColorValue,
     position: number,
   }>,
 };
 
+const DEFAULT_DIRECTION: LinearGradientDirection = {
+  type: 'angle',
+  value: 180,
+};
+
 export default function processBackgroundImage(
   backgroundImage: ?($ReadOnlyArray<GradientValue> | string),
 ): $ReadOnlyArray<ParsedGradientValue> {
@@ -76,37 +79,43 @@ export default function processBackgroundImage(
         }
       }
 
-      let points: {
-        start: ParsedGradientValue['start'],
-        end: ParsedGradientValue['end'],
-      } | null = null;
-
-      if (typeof bgImage.direction === 'undefined') {
-        points = TO_BOTTOM_START_END_POINTS;
-      } else if (ANGLE_UNIT_REGEX.test(bgImage.direction)) {
-        const angle = parseAngle(bgImage.direction);
-        if (angle != null) {
-          points = calculateStartEndPointsFromAngle(angle);
-        }
-      } else if (DIRECTION_REGEX.test(bgImage.direction)) {
-        const processedPoints = calculateStartEndPointsFromDirection(
-          bgImage.direction,
-        );
-        if (processedPoints != null) {
-          points = processedPoints;
+      let direction: LinearGradientDirection = DEFAULT_DIRECTION;
+      const bgDirection =
+        bgImage.direction != null ? bgImage.direction.toLowerCase() : null;
+
+      if (bgDirection != null) {
+        if (ANGLE_UNIT_REGEX.test(bgDirection)) {
+          const parsedAngle = getAngleInDegrees(bgDirection);
+          if (parsedAngle != null) {
+            direction = {
+              type: 'angle',
+              value: parsedAngle,
+            };
+          } else {
+            // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else if (DIRECTION_KEYWORD_REGEX.test(bgDirection)) {
+          const parsedDirection = getDirectionForKeyword(bgDirection);
+          if (parsedDirection != null) {
+            direction = parsedDirection;
+          } else {
+            // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else {
+          // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
         }
       }
 
       const fixedColorStops = getFixedColorStops(processedColorStops);
 
-      if (points != null) {
-        result = result.concat({
-          type: 'linearGradient',
-          start: points.start,
-          end: points.end,
-          colorStops: fixedColorStops,
-        });
-      }
+      result = result.concat({
+        type: 'linearGradient',
+        direction,
+        colorStops: fixedColorStops,
+      });
     }
   }
 
@@ -118,30 +127,39 @@ function parseCSSLinearGradient(
 ): $ReadOnlyArray<ParsedGradientValue> {
   const gradients = [];
   let match;
+
+  // matches one or more linear-gradient functions in CSS
   const linearGradientRegex = /linear-gradient\s*\(((?:\([^)]*\)|[^())])*)\)/gi;
 
   while ((match = linearGradientRegex.exec(cssString))) {
     const gradientContent = match[1];
     const parts = gradientContent.split(',');
-    let points = TO_BOTTOM_START_END_POINTS;
+    let direction: LinearGradientDirection = DEFAULT_DIRECTION;
     const trimmedDirection = parts[0].trim().toLowerCase();
+
+    // matches individual color stops in a gradient function
+    // supports various color formats: named colors, hex colors, rgb(a), and hsl(a)
+    // e.g. "red 20%", "blue 50%", "rgba(0, 0, 0, 0.5) 30% 50%"
+    // TODO: does not support color hint syntax yet. It is WIP.
     const colorStopRegex =
       /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+(-?[0-9.]+%?)(?:\s+(-?[0-9.]+%?))?)?\s*/gi;
 
     if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
-      const angle = parseAngle(trimmedDirection);
-      if (angle != null) {
-        points = calculateStartEndPointsFromAngle(angle);
+      const parsedAngle = getAngleInDegrees(trimmedDirection);
+      if (parsedAngle != null) {
+        direction = {
+          type: 'angle',
+          value: parsedAngle,
+        };
         parts.shift();
       } else {
         // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (DIRECTION_REGEX.test(trimmedDirection)) {
-      const parsedPoints =
-        calculateStartEndPointsFromDirection(trimmedDirection);
-      if (parsedPoints != null) {
-        points = parsedPoints;
+    } else if (DIRECTION_KEYWORD_REGEX.test(trimmedDirection)) {
+      const parsedDirection = getDirectionForKeyword(trimmedDirection);
+      if (parsedDirection != null) {
+        direction = parsedDirection;
         parts.shift();
       } else {
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
@@ -198,8 +216,7 @@ function parseCSSLinearGradient(
 
     gradients.push({
       type: 'linearGradient',
-      start: points.start,
-      end: points.end,
+      direction,
       colorStops: fixedColorStops,
     });
   }
@@ -207,83 +224,43 @@ function parseCSSLinearGradient(
   return gradients;
 }
 
-function calculateStartEndPointsFromDirection(direction: string): ?{
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
+function getDirectionForKeyword(direction?: string): ?LinearGradientDirection {
+  if (direction == null) {
+    return null;
+  }
   // Remove extra whitespace
-  const normalizedDirection = direction.replace(/\s+/g, ' ');
+  const normalized = direction.replace(/\s+/g, ' ').toLowerCase();
 
-  switch (normalizedDirection) {
+  switch (normalized) {
+    case 'to top':
+      return {type: 'angle', value: 0};
     case 'to right':
-      return {
-        start: {x: 0, y: 0.5},
-        end: {x: 1, y: 0.5},
-      };
-    case 'to left':
-      return {
-        start: {x: 1, y: 0.5},
-        end: {x: 0, y: 0.5},
-      };
+      return {type: 'angle', value: 90};
     case 'to bottom':
-      return TO_BOTTOM_START_END_POINTS;
-    case 'to top':
-      return {
-        start: {x: 0.5, y: 1},
-        end: {x: 0.5, y: 0},
-      };
+      return {type: 'angle', value: 180};
+    case 'to left':
+      return {type: 'angle', value: 270};
+    case 'to top right':
+    case 'to right top':
+      return {type: 'keyword', value: 'to top right'};
     case 'to bottom right':
     case 'to right bottom':
-      return {
-        start: {x: 0, y: 0},
-        end: {x: 1, y: 1},
-      };
+      return {type: 'keyword', value: 'to bottom right'};
     case 'to top left':
     case 'to left top':
-      return {
-        start: {x: 1, y: 1},
-        end: {x: 0, y: 0},
-      };
+      return {type: 'keyword', value: 'to top left'};
     case 'to bottom left':
     case 'to left bottom':
-      return {
-        start: {x: 1, y: 0},
-        end: {x: 0, y: 1},
-      };
-    case 'to top right':
-    case 'to right top':
-      return {
-        start: {x: 0, y: 1},
-        end: {x: 1, y: 0},
-      };
+      return {type: 'keyword', value: 'to bottom left'};
     default:
       return null;
   }
 }
 
-function calculateStartEndPointsFromAngle(angleRadians: number): {
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
-  // Normalize angle to be between 0 and 2π
-  let angleRadiansNormalized = angleRadians % (2 * Math.PI);
-  if (angleRadiansNormalized < 0) {
-    angleRadiansNormalized += 2 * Math.PI;
+function getAngleInDegrees(angle?: string): ?number {
+  if (angle == null) {
+    return null;
   }
-
-  const endX = 0.5 + 0.5 * Math.sin(angleRadiansNormalized);
-  const endY = 0.5 - 0.5 * Math.cos(angleRadiansNormalized);
-
-  const startX = 1 - endX;
-  const startY = 1 - endY;
-
-  return {
-    start: {x: startX, y: startY},
-    end: {x: endX, y: endY},
-  };
-}
-
-function parseAngle(angle: string): ?number {
   const match = angle.match(ANGLE_UNIT_REGEX);
   if (!match) {
     return null;
@@ -294,13 +271,13 @@ function parseAngle(angle: string): ?number {
   const numericValue = parseFloat(value);
   switch (unit) {
     case 'deg':
-      return (numericValue * Math.PI) / 180;
+      return numericValue;
     case 'grad':
-      return (numericValue * Math.PI) / 200;
+      return numericValue * 0.9; // 1 grad = 0.9 degrees
     case 'rad':
-      return numericValue;
+      return (numericValue * 180) / Math.PI;
     case 'turn':
-      return numericValue * 2 * Math.PI;
+      return numericValue * 360; // 1 turn = 360 degrees
     default:
       return null;
   }