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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.3.4-snapshot.7786",
+  "version": "8.3.4-snapshot.7802",
   "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,6 +9,10 @@ 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`
@@ -41,30 +45,31 @@ export const TextFieldDriver = (props, options) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.clearButton.container`
   });
+  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
   const getValue = () => {
-    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
+    return getInputElement().props.value ?? getInputElement().props.defaultValue;
   };
   const changeText = text => {
-    fireEvent.changeText(driver.getElement(), text);
+    fireEvent.changeText(getInputElement(), text);
   };
   const focus = () => {
-    fireEvent(driver.getElement(), 'focus');
+    fireEvent(getInputElement(), 'focus');
   };
   const blur = () => {
-    fireEvent(driver.getElement(), 'blur');
+    fireEvent(getInputElement(), 'blur');
   };
   const isEnabled = () => {
-    return !driver.getElement().props.accessibilityState?.disabled;
+    return !getInputElement().props.accessibilityState?.disabled;
   };
   const getPlaceholder = () => {
     const exists = () => {
-      const hasPlaceholder = !!driver.getElement().props.placeholder;
+      const hasPlaceholder = !!getInputElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || hasText && floatingPlaceholderDriver.exists());
     };
     const getText = () => {
       if (exists()) {
-        return driver.getElement().props.placeholder;
+        return getInputElement().props.placeholder;
       }
     };
     return {

package/src/components/textField/index.js

@@ -78,6 +78,8 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
+    testID,
+    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -135,11 +137,31 @@ 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} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
-          <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`} />}
+          <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`} />}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
@@ -158,26 +180,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={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
+              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <Input hitSlop={{
             top: 20,
             bottom: 20
-          }} 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} />
+          }} 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} />
             </View>}
-          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${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={`${props.testID}.validationMessage`} />}
-            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
+            {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`}>
                 {helperText}
               </Text>}
             {bottomAccessory}
           </View>
           <View>
-            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`} />}
+            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${testID}.charCounter`} />}
           </View>
         </View>
       </View>

package/src/style/colors.d.ts

@@ -19,15 +19,11 @@ export type GetColorByHexOptions = {
 export type GeneratePaletteOptions = {
     /** Whether to adjust the lightness of very light colors (generating darker palette) */
     adjustLightness?: boolean;
-    /** Whether to apply the saturation curve to unify saturation levels throughout the palette */
+    /** Whether to adjust the saturation of colors with high lightness and saturation (unifying saturation level throughout palette) */
     adjustSaturation?: boolean;
-    /** Percentage-based saturation curve indexed by distance from base color.
-     * When provided, applies proportional saturation reduction outward from the base color */
-    saturationCurve?: number[];
-    /** Base saturation threshold below which the saturation curve is not applied (default: 50) */
-    saturationThreshold?: number;
-    /** Minimum saturation value when applying the curve (default: 20) */
-    saturationFloor?: number;
+    /** Array of saturation adjustments to apply on the color's tints array (from darkest to lightest).
+     * The 'adjustSaturation' option must be true */
+    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;
     /** Whether to reverse the color palette to generate dark mode palette (pass 'true' to generate the same palette for both light and dark modes) */
@@ -95,9 +91,7 @@ export declare class Colors {
         adjustSaturation: boolean;
         addDarkestTints: boolean;
         avoidReverseOnDark: boolean;
-        saturationCurve: number[];
-        saturationThreshold: number;
-        saturationFloor: number;
+        saturationLevels: undefined;
     };
     generateColorPalette: ((color: string, options?: GeneratePaletteOptions) => string[]) & _.MemoizedFunction;
     private generateDesignTokens;
@@ -150,7 +144,7 @@ declare const colorObject: Colors & {
     green70: string;
     green80: string;
     yellow1: string;
-    yellow5: string; /** Whether to apply the saturation curve to unify saturation levels throughout the palette */
+    yellow5: string; /** Whether to adjust the saturation of colors with high lightness and saturation (unifying saturation level throughout palette) */
     yellow10: string;
     yellow20: string;
     yellow30: string;
@@ -170,7 +164,6 @@ declare const colorObject: Colors & {
     orange70: string;
     orange80: string;
     red1: string;
-    /** Minimum saturation value when applying the curve (default: 20) */
     red5: string;
     red10: string;
     red20: string;
@@ -265,10 +258,16 @@ declare const colorObject: Colors & {
     $outlineNeutralHeavy: string;
     $outlinePrimary: string;
     $outlinePrimaryMedium: string;
-    $outlineGeneral: string;
+    $outlineGeneral: string; /**
+     * Get app's current color scheme
+     */
     $outlineWarning: string;
     $outlineDanger: string;
-    $outlineInverted: string;
+    $outlineInverted: string; /**
+     * Set color scheme for app
+     * arguments:
+     * scheme - color scheme e.g light/dark/default
+     */
     $black: string;
     $white: string;
 };

package/src/style/colors.js

@@ -1,3 +1,5 @@
+import _map from "lodash/map";
+import _clamp from "lodash/clamp";
 import _toLower from "lodash/toLower";
 import _toUpper from "lodash/toUpper";
 import _inRange from "lodash/inRange";
@@ -227,7 +229,7 @@ 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 && adjustSaturationWithCurve(sliced, color, options);
+    const adjusted = options?.adjustSaturation && adjustSaturation(sliced, color, options?.saturationLevels);
     return adjusted || sliced;
   }, generatePaletteCacheResolver);
   defaultPaletteOptions = {
@@ -235,9 +237,7 @@ export class Colors {
     adjustSaturation: true,
     addDarkestTints: false,
     avoidReverseOnDark: false,
-    saturationCurve: [1.0, 0.89, 0.77, 0.65, 0.55, 0.47, 0.42, 0.38, 0.34, 0.30],
-    saturationThreshold: 50,
-    saturationFloor: 20
+    saturationLevels: undefined
   };
   generateColorPalette = _memoize((color, options) => {
     const _options = {
@@ -308,33 +308,46 @@ export class Colors {
 function colorStringValue(color) {
   return color?.toString();
 }
-function adjustSaturationWithCurve(colors, baseColor, options) {
-  const {
-    saturationCurve: curve,
-    saturationThreshold: threshold = 50,
-    saturationFloor: floor = 20
-  } = options ?? {};
-  if (!curve) {
-    return null;
-  }
-  const baseSaturation = Color(baseColor).hsl().color[1];
-  if (baseSaturation <= threshold) {
-    return null;
-  }
-  const baseIndex = colors.indexOf(baseColor.toUpperCase());
-  if (baseIndex === -1) {
-    return null;
-  }
-  return colors.map((hex, i) => {
-    if (i === baseIndex) {
-      return hex;
+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;
+      }
     }
-    const hsl = Color(hex).hsl();
-    const distance = Math.abs(i - baseIndex);
-    const percentage = curve[Math.min(distance, curve.length - 1)];
-    const newSaturation = Math.max(floor, Math.ceil(baseSaturation * percentage));
-    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);
+  }
+  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);
+    }
+  }
+  return array;
+}
+function setSaturation(color, saturation) {
+  const hsl = Color(color).hsl();
+  hsl.color[1] = saturation;
+  return hsl.hex();
 }
 function generateColorTint(color, tintLevel) {
   const hsl = Color(color).hsl();