Merge branch 'master' into release

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -209,11 +209,14 @@ export default class TextFieldScreen extends Component {
             validate="required"
             validationMessage="This field is required. That means you have to enter some value"
             containerStyle={{flex: 1}}
+            validateOnChange
             validationMessagePosition={errorPosition}
             helperText={'Enter first and last name'}
             validationIcon={{source: Assets.icons.demo.exclamation, style: {marginTop: 1}}}
             topTrailingAccessory={<Icon source={Assets.icons.demo.info} size={16}/>}
             preset={preset}
+            maxLength={20}
+            showCharCounter
           />
           <Button
             outline

src/components/dateTimePicker/index.tsx

@@ -151,6 +151,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
 
   useImperativeHandle(ref, () => {
     return {
+      isValid: () => textField.current?.isValid(),
       validate: () => textField.current?.validate()
     };
   });

src/components/sortableList/SortableList.api.json

@@ -16,8 +16,8 @@
     },
     {
       "name": "onOrderChange",
-      "type": "(data: ItemT[]) => void",
-      "description": "A callback to get the new order (or swapped items).",
+      "type": "(data: ItemT[], info: OrderChangeInfo) => void",
+      "description": "A callback to get the new order (or swapped items) and info about the change (from and to indices).",
       "required": true
     },
     {

src/components/sortableList/SortableListItem.tsx

@@ -54,6 +54,7 @@ const SortableListItem = (props: Props) => {
   const id: string = data[index].id;
   const locked: boolean = data[index].locked;
   const initialIndex = useSharedValue<number>(map(data, 'id').indexOf(id));
+  const lastSwap = useSharedValue({from: -1, to: -1});
   const currIndex = useSharedValue(initialIndex.value);
   const translation = useSharedValue<number>(0);
 
@@ -102,6 +103,7 @@ const SortableListItem = (props: Props) => {
     .onStart(() => {
       isDragging.value = true;
       translation.value = getTranslationByIndexChange(currIndex.value, initialIndex.value, itemSize.value);
+      lastSwap.value = {...lastSwap.value, from: currIndex.value};
       tempTranslation.value = translation.value;
       tempItemsOrder.value = itemsOrder.value;
     })
@@ -140,6 +142,7 @@ const SortableListItem = (props: Props) => {
           newItemsOrder[newIndex] = id;
           newItemsOrder[oldIndex] = itemIdToSwap;
           itemsOrder.value = newItemsOrder;
+          lastSwap.value = {...lastSwap.value, to: newIndex};
         }
       }
     })
@@ -150,7 +153,7 @@ const SortableListItem = (props: Props) => {
 
       translation.value = withTiming(tempTranslation.value + _translation, animationConfig, () => {
         if (tempItemsOrder.value.toString() !== itemsOrder.value.toString()) {
-          runOnJS(onChange)();
+          runOnJS(onChange)({...lastSwap.value});
         }
       });
     })

src/components/sortableList/__tests__/index.spec.tsx

@@ -53,7 +53,7 @@ describe('SortableList', () => {
       {id: '1', text: '1'},
       {id: '3', text: '3'},
       {id: '4', text: '4'}
-    ]);
+    ], {from: 1, to: 2});
   });
 
   it('SortableList onOrderChange is called - up', async () => {
@@ -72,6 +72,6 @@ describe('SortableList', () => {
       {id: '1', text: '1'},
       {id: '2', text: '2'},
       {id: '3', text: '3'}
-    ]);
+    ], {from: 4, to: 1});
   });
 });

src/components/sortableList/index.tsx

@@ -8,7 +8,7 @@ import {LogService} from 'services';
 import SortableListContext from './SortableListContext';
 import SortableListItem, {DEFAULT_LIST_ITEM_SIZE} from './SortableListItem';
 import {useDidUpdate, useThemeProps} from 'hooks';
-import {SortableListProps, SortableListItemProps} from './types';
+import type {SortableListProps, SortableListItemProps, OrderChangeInfo} from './types';
 import type {Dictionary} from '../../typings/common';
 
 export {SortableListProps, SortableListItemProps};
@@ -46,7 +46,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
     itemsOrder.value = generateItemsOrder(data);
   }, [data]);
 
-  const onChange = useCallback(() => {
+  const onChange = useCallback((info: OrderChangeInfo) => {
     const newData: ItemT[] = [];
     const dataByIds = mapKeys(data, 'id');
     if (data?.length) {
@@ -55,7 +55,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
       });
     }
 
-    onOrderChange?.(newData);
+    onOrderChange?.(newData, info);
   }, [onOrderChange, data]);
 
   const onItemLayout = useCallback((event: LayoutChangeEvent) => {

src/components/sortableList/types.ts

@@ -9,6 +9,7 @@ export interface SortableListItemProps {
 
 // Internal
 export type Data<ItemT extends SortableListItemProps> = FlatListProps<ItemT>['data'];
+export type OrderChangeInfo = {from: number, to: number};
 
 export interface SortableListProps<ItemT extends SortableListItemProps>
   extends Omit<FlatListProps<ItemT>, 'extraData' | 'data'>,
@@ -21,7 +22,7 @@ export interface SortableListProps<ItemT extends SortableListItemProps>
   /**
    * A callback to get the new order (or swapped items).
    */
-  onOrderChange: (data: ItemT[] /* TODO: add more data? */) => void;
+  onOrderChange: (data: ItemT[], info: OrderChangeInfo /* TODO: add more data? */) => void;
   /**
    * Whether to enable the haptic feedback
    * (please note that react-native-haptic-feedback does not support the specific haptic type on Android starting on an unknown version, you can use 1.8.2 for it to work properly)

src/components/switch/index.tsx

@@ -176,7 +176,7 @@ function createStyles({
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT,
   onColor = Colors.$backgroundPrimaryHeavy,
-  offColor = Colors.$backgroundNeutralIdle,
+  offColor = Colors.$backgroundNeutralHeavy,
   disabledColor = Colors.$backgroundDisabled,
   thumbColor = Colors.$iconDefaultLight,
   thumbSize = DEFAULT_THUMB_SIZE

src/components/textField/index.tsx

@@ -80,7 +80,7 @@ const TextField = (props: InternalTextFieldProps) => {
     enableErrors, // TODO: rename to enableValidation
     validationMessageStyle,
     validationMessagePosition = ValidationMessagePosition.BOTTOM,
-    retainValidationSpace = !helperText,
+    retainValidationSpace = !helperText && !bottomAccessory,
     // Char Counter
     showCharCounter,
     charCounterStyle,
@@ -123,11 +123,11 @@ const TextField = (props: InternalTextFieldProps) => {
   const hidePlaceholder = shouldHidePlaceholder(props, fieldState.isFocused);
   const retainTopMessageSpace = !floatingPlaceholder && isEmpty(trim(label));
   const centeredContainerStyle = centered && styles.centeredContainer;
-  const centeredTextStyle = centered && styles.centeredText;
+  const centeredTextStyle = centered && !showCharCounter && styles.centeredText;
   const _labelStyle = useMemo(() => [labelStyle, centeredTextStyle], [labelStyle, centeredTextStyle]);
   const _validationMessageStyle = useMemo(() => [validationMessageStyle, centeredTextStyle],
     [validationMessageStyle, centeredTextStyle]);
-  const hasValue = fieldState.value !== undefined;
+  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]);
@@ -208,32 +208,36 @@ const TextField = (props: InternalTextFieldProps) => {
           {trailingAccessory}
           {/* </View> */}
         </View>
-        <View row spread>
-          {validationMessagePosition === ValidationMessagePosition.BOTTOM && (
-            <ValidationMessage
-              enableErrors={enableErrors}
-              validate={others.validate}
-              validationMessage={others.validationMessage}
-              validationIcon={validationIcon}
-              validationMessageStyle={_validationMessageStyle}
-              retainValidationSpace={retainValidationSpace}
-              testID={`${props.testID}.validationMessage`}
-            />
-          )}
-          {bottomAccessory}
-          {showCharCounter && (
-            <CharCounter
-              maxLength={others.maxLength}
-              charCounterStyle={charCounterStyle}
-              testID={`${props.testID}.charCounter`}
-            />
-          )}
+        <View row spread center={centered}>
+          <View flex={!centered} flexG={centered}>
+            {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={`${props.testID}.charCounter`}
+              />
+            )}
+          </View>
         </View>
-        {helperText && (
-          <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
-            {helperText}
-          </Text>
-        )}
       </View>
     </FieldContext.Provider>
   );