react-native-ui-lib 8.3.4-snapshot.7802 → 8.3.4-snapshot.7804

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.3.4-snapshot.7802",
+  "version": "8.3.4-snapshot.7804",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/textField/TextField.driver.new.js

@@ -9,10 +9,6 @@ import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
 export const TextFieldDriver = (props, options) => {
   const driver = usePressableDriver(useComponentDriver(props, options));
-  const inputDriver = useComponentDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}.input`
-  }, options);
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`
@@ -45,31 +41,30 @@ export const TextFieldDriver = (props, options) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.clearButton.container`
   });
-  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
   const getValue = () => {
-    return getInputElement().props.value ?? getInputElement().props.defaultValue;
+    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
   };
   const changeText = text => {
-    fireEvent.changeText(getInputElement(), text);
+    fireEvent.changeText(driver.getElement(), text);
   };
   const focus = () => {
-    fireEvent(getInputElement(), 'focus');
+    fireEvent(driver.getElement(), 'focus');
   };
   const blur = () => {
-    fireEvent(getInputElement(), 'blur');
+    fireEvent(driver.getElement(), 'blur');
   };
   const isEnabled = () => {
-    return !getInputElement().props.accessibilityState?.disabled;
+    return !driver.getElement().props.accessibilityState?.disabled;
   };
   const getPlaceholder = () => {
     const exists = () => {
-      const hasPlaceholder = !!getInputElement().props.placeholder;
+      const hasPlaceholder = !!driver.getElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || hasText && floatingPlaceholderDriver.exists());
     };
     const getText = () => {
       if (exists()) {
-        return getInputElement().props.placeholder;
+        return driver.getElement().props.placeholder;
       }
     };
     return {

package/src/components/textField/index.js

@@ -78,8 +78,6 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
-    testID,
-    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -137,31 +135,11 @@ const TextField = props => {
   const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle], [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
-  const defaultAccessibilityLabel = useMemo(() => {
-    const parts = [];
-    if (label) {
-      parts.push(label);
-    }
-    if (context.isMandatory) {
-      parts.push('required');
-    }
-    parts.push('textField');
-    if (helperText) {
-      parts.push(helperText);
-    } else if (placeholder) {
-      parts.push(placeholder);
-    }
-    if (showCharCounter && others.maxLength) {
-      parts.push(`you can enter up to ${others.maxLength} characters`);
-    }
-    return parts.join(', ');
-  }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]);
-  const accessibilityLabel = accessibilityLabelProp ?? defaultAccessibilityLabel;
   return <FieldContext.Provider value={context}>
-      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
-          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
-          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${testID}.validationMessage`} />}
+          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${props.testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
+          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${props.testID}.validationMessage`} />}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
@@ -180,26 +158,26 @@ const TextField = props => {
               {Constants.isAndroid && centered && <Text marginR-s1 style={dummyPlaceholderStyle}>
                   {placeholder}
                 </Text>}
-              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
+              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <Input hitSlop={{
             top: 20,
             bottom: 20
-          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} testID={`${testID}.input`} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
+          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
             </View>}
-          {showClearButton && <ClearButton onClear={onClear} testID={`${testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}
           {/* </View> */}
         </View>
         <View row spread center={centered}>
           <View flex={!centered} flexG={centered} marginR-s4={showCharCounter}>
-            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${testID}.validationMessage`} />}
-            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${testID}.helperText`}>
+            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${props.testID}.validationMessage`} />}
+            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
                 {helperText}
               </Text>}
             {bottomAccessory}
           </View>
           <View>
-            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${testID}.charCounter`} />}
+            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`} />}
           </View>
         </View>
       </View>

package/src/style/colors.d.ts

@@ -19,10 +19,14 @@ export type GetColorByHexOptions = {
 export type GeneratePaletteOptions = {
     /** Whether to adjust the lightness of very light colors (generating darker palette) */
     adjustLightness?: boolean;
-    /** Whether to adjust the saturation of colors with high lightness and saturation (unifying saturation level throughout palette) */
+    /** Whether to apply the saturation curve to unify saturation levels throughout the palette */
     adjustSaturation?: boolean;
-    /** Array of saturation adjustments to apply on the color's tints array (from darkest to lightest).
-     * The 'adjustSaturation' option must be true */
+    /** Custom percentage-based saturation curve indexed by distance from the base color.
+     * Overrides the default curve when provided. Each value represents the fraction of the base
+     * color's saturation to apply at that distance (e.g. [1.0, 0.89, 0.77, ...]) */
+    saturationCurve?: number[];
+    /** Array of additive saturation adjustments to apply per-index on the palette (from darkest to lightest).
+     * When provided, uses legacy per-index saturation logic instead of the default curve */
     saturationLevels?: number[];
     /** Whether to add two extra dark colors usually used for dark mode (generating a palette of 10 instead of 8 colors) */
     addDarkestTints?: boolean;
@@ -91,7 +95,6 @@ export declare class Colors {
         adjustSaturation: boolean;
         addDarkestTints: boolean;
         avoidReverseOnDark: boolean;
-        saturationLevels: undefined;
     };
     generateColorPalette: ((color: string, options?: GeneratePaletteOptions) => string[]) & _.MemoizedFunction;
     private generateDesignTokens;
@@ -144,7 +147,7 @@ declare const colorObject: Colors & {
     green70: string;
     green80: string;
     yellow1: string;
-    yellow5: string; /** Whether to adjust the saturation of colors with high lightness and saturation (unifying saturation level throughout palette) */
+    yellow5: string;
     yellow10: string;
     yellow20: string;
     yellow30: string;
@@ -169,7 +172,8 @@ declare const colorObject: Colors & {
     red20: string;
     red30: string;
     red40: string;
-    red50: string;
+    red50: string; /** Array of additive saturation adjustments to apply per-index on the palette (from darkest to lightest).
+     * When provided, uses legacy per-index saturation logic instead of the default curve */
     red60: string;
     red70: string;
     red80: string;
@@ -179,7 +183,7 @@ declare const colorObject: Colors & {
     purple20: string;
     purple30: string;
     purple40: string;
-    purple50: string;
+    purple50: string; /** Whether to add two extra dark colors usually used for dark mode (generating a palette of 10 instead of 8 colors) */
     purple60: string;
     purple70: string;
     purple80: string;
@@ -212,7 +216,7 @@ declare const colorObject: Colors & {
     $backgroundGeneralHeavy: string;
     $backgroundGeneralMedium: string;
     $backgroundGeneralLight: string;
-    $backgroundSuccessHeavy: string; /** Whether to adjust the lightness of very light colors (generating darker palette) */
+    $backgroundSuccessHeavy: string;
     $backgroundSuccessLight: string;
     $backgroundWarningHeavy: string;
     $backgroundWarningLight: string;
@@ -258,16 +262,10 @@ declare const colorObject: Colors & {
     $outlineNeutralHeavy: string;
     $outlinePrimary: string;
     $outlinePrimaryMedium: string;
-    $outlineGeneral: string; /**
-     * Get app's current color scheme
-     */
+    $outlineGeneral: string;
     $outlineWarning: string;
     $outlineDanger: string;
-    $outlineInverted: string; /**
-     * Set color scheme for app
-     * arguments:
-     * scheme - color scheme e.g light/dark/default
-     */
+    $outlineInverted: string;
     $black: string;
     $white: string;
 };

package/src/style/colors.js

@@ -1,4 +1,3 @@
-import _map from "lodash/map";
 import _clamp from "lodash/clamp";
 import _toLower from "lodash/toLower";
 import _toUpper from "lodash/toUpper";
@@ -20,6 +19,9 @@ import DesignTokensDM from "./designTokensDM";
 import ColorName from "./colorName";
 import Scheme from "./scheme";
 import LogService from "../services/LogService";
+const SATURATION_CURVE = [1.0, 0.89, 0.77, 0.65, 0.55, 0.47, 0.42, 0.38, 0.34, 0.30];
+const SATURATION_THRESHOLD = 50;
+const SATURATION_FLOOR = 20;
 export class Colors {
   shouldSupportDarkMode = false;
   constructor() {
@@ -229,15 +231,14 @@ export class Colors {
     const start = options?.addDarkestTints && colorLightness > 10 ? -size : 0;
     const end = options?.addDarkestTints && colorLightness > 10 ? undefined : size;
     const sliced = tints.slice(start, end);
-    const adjusted = options?.adjustSaturation && adjustSaturation(sliced, color, options?.saturationLevels);
+    const adjusted = options?.adjustSaturation && adjustSaturation(sliced, color, options);
     return adjusted || sliced;
   }, generatePaletteCacheResolver);
   defaultPaletteOptions = {
     adjustLightness: true,
     adjustSaturation: true,
     addDarkestTints: false,
-    avoidReverseOnDark: false,
-    saturationLevels: undefined
+    avoidReverseOnDark: false
   };
   generateColorPalette = _memoize((color, options) => {
     const _options = {
@@ -308,46 +309,46 @@ export class Colors {
 function colorStringValue(color) {
   return color?.toString();
 }
-function adjustAllSaturations(colors, baseColor, levels) {
-  const array = [];
-  _forEach(colors, (c, index) => {
-    if (c === baseColor) {
-      array[index] = baseColor;
-    } else {
-      const hsl = Color(c).hsl();
-      const saturation = hsl.color[1];
-      const level = levels[index];
-      if (level !== undefined) {
-        const saturationLevel = saturation + level;
-        const clampedLevel = _clamp(saturationLevel, 0, 100);
-        const adjusted = setSaturation(c, clampedLevel);
-        array[index] = adjusted;
-      }
+function adjustSaturation(colors, baseColor, options) {
+  if (options?.saturationLevels) {
+    return adjustSaturationByLevels(colors, baseColor, options.saturationLevels);
+  }
+  return adjustSaturationWithCurve(colors, baseColor, options?.saturationCurve);
+}
+function adjustSaturationByLevels(colors, baseColor, levels) {
+  return colors.map((color, index) => {
+    if (color === baseColor) {
+      return baseColor;
     }
+    const level = levels[index];
+    if (level === undefined) {
+      return color;
+    }
+    const hsl = Color(color).hsl();
+    const newSaturation = _clamp(hsl.color[1] + level, 0, 100);
+    return Color.hsl(hsl.color[0], newSaturation, hsl.color[2]).hex();
   });
-  return array;
 }
-function adjustSaturation(colors, baseColor, levels) {
-  if (levels) {
-    return adjustAllSaturations(colors, baseColor, levels);
+function adjustSaturationWithCurve(colors, baseColor, customCurve) {
+  const baseSaturation = Color(baseColor).hsl().color[1];
+  if (baseSaturation <= SATURATION_THRESHOLD) {
+    return null;
   }
-  let array;
-  const lightnessLevel = 80;
-  const saturationLevel = 60;
-  const hsl = Color(baseColor).hsl();
-  const lightness = Math.round(hsl.color[2]);
-  if (lightness > lightnessLevel) {
-    const saturation = Math.round(hsl.color[1]);
-    if (saturation > saturationLevel) {
-      array = _map(colors, e => e !== baseColor ? setSaturation(e, saturationLevel) : e);
-    }
+  const baseIndex = colors.indexOf(baseColor.toUpperCase());
+  if (baseIndex === -1) {
+    return null;
   }
-  return array;
-}
-function setSaturation(color, saturation) {
-  const hsl = Color(color).hsl();
-  hsl.color[1] = saturation;
-  return hsl.hex();
+  const curve = customCurve ?? SATURATION_CURVE;
+  return colors.map((hex, i) => {
+    if (i === baseIndex) {
+      return hex;
+    }
+    const hsl = Color(hex).hsl();
+    const distance = Math.abs(i - baseIndex);
+    const percentage = curve[Math.min(distance, curve.length - 1)];
+    const newSaturation = Math.max(SATURATION_FLOOR, Math.round(baseSaturation * percentage));
+    return Color.hsl(hsl.color[0], newSaturation, hsl.color[2]).hex();
+  });
 }
 function generateColorTint(color, tintLevel) {
   const hsl = Color(color).hsl();