react-native-ui-lib 8.1.8 → 8.2.0-snapshot.7650

package/package.json

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

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -12,5 +12,6 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     areAllItemsSelected: boolean;
     selectedCount: number;
     toggleAllItemsSelection: (selectAll: boolean) => void;
+    onDismiss: () => void;
 };
 export default usePickerSelection;

package/src/components/picker/helpers/usePickerSelection.js

@@ -30,12 +30,19 @@ const usePickerSelection = props => {
     const newValue = _xor(multiDraftValue, itemAsArray);
     setMultiDraftValue(newValue);
   }, [multiDraftValue]);
-  const cancelSelect = useCallback(() => {
+  const resetSelectionState = useCallback(() => {
     setSearchValue('');
     setMultiDraftValue(multiFinalValue);
+  }, [multiFinalValue]);
+  const onDismiss = useCallback(() => {
+    resetSelectionState();
+    topBarProps?.onCancel?.();
+  }, [resetSelectionState, topBarProps]);
+  const cancelSelect = useCallback(() => {
+    resetSelectionState();
     pickerExpandableRef.current?.closeExpandable?.();
     topBarProps?.onCancel?.();
-  }, [multiFinalValue, topBarProps]);
+  }, [resetSelectionState, topBarProps]);
   const availableItems = useMemo(() => {
     return items?.filter(item => !item.disabled).map(item => item.value) || [];
   }, [items]);
@@ -55,7 +62,8 @@ const usePickerSelection = props => {
     cancelSelect,
     areAllItemsSelected,
     selectedCount,
-    toggleAllItemsSelection
+    toggleAllItemsSelection,
+    onDismiss
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.js

@@ -95,7 +95,8 @@ const Picker = React.forwardRef((props, ref) => {
     cancelSelect,
     areAllItemsSelected,
     selectedCount,
-    toggleAllItemsSelection
+    toggleAllItemsSelection,
+    onDismiss
   } = usePickerSelection({
     value,
     onChange,
@@ -204,8 +205,12 @@ const Picker = React.forwardRef((props, ref) => {
         {accessibleFilteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, accessibleFilteredItems, useSafeArea, useWheelPicker, items, showLoader]);
+  const dialogPropsWithDismiss = useMemo(() => ({
+    ...DEFAULT_DIALOG_PROPS,
+    onDismiss
+  }), [onDismiss]);
   return <PickerContext.Provider value={contextValue}>
-      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
+      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={dialogPropsWithDismiss} expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
           {renderTextField()}
         </ExpandableOverlay>}
     </PickerContext.Provider>;

package/src/components/progressBar/index.d.ts

@@ -15,8 +15,17 @@ interface Props {
     fullWidth?: boolean;
     /**
      * Override container style
+     * @deprecated Use containerStyle instead
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Override container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Override progress style
+     */
+    progressStyle?: StyleProp<ViewStyle>;
     /**
      * Progress color
      */

package/src/components/progressBar/index.js

@@ -105,7 +105,9 @@ class ProgressBar extends PureComponent {
   render() {
     const {
       style,
-      testID
+      containerStyle,
+      testID,
+      progressStyle
     } = this.props;
     const {
       containerWidth = 0
@@ -115,12 +117,13 @@ class ProgressBar extends PureComponent {
       inputRange: [0, 100],
       outputRange
     });
-    return <View onLayout={this.getContainerWidth} style={[styles.container, this.getContainerStyle(), style]} {...this.getAccessibilityProps()} testID={testID}>
-        {!!containerWidth && <Animated.View style={[styles.progress, this.getProgressStyle(), {
-        transform: [{
-          translateX: newProgress
-        }]
-      }]}>
+    const animatedStyle = {
+      transform: [{
+        translateX: newProgress
+      }]
+    };
+    return <View onLayout={this.getContainerWidth} style={[styles.container, this.getContainerStyle(), style, containerStyle]} {...this.getAccessibilityProps()} testID={testID}>
+        {!!containerWidth && <Animated.View style={[styles.progress, this.getProgressStyle(), progressStyle, animatedStyle]}>
             {this.renderCustomElement()}
           </Animated.View>}
       </View>;

package/src/components/progressBar/progressBar.api.json

@@ -16,10 +16,15 @@
       "description": "FullWidth Ui preset"
     },
     {
-      "name": "style",
+      "name": "containerStyle",
       "type": "ViewStyle",
       "description": "Override container style"
     },
+    {
+      "name": "progressStyle",
+      "type": "ViewStyle",
+      "description": "Override progress style"
+    },
     {
       "name": "progressColor",
       "type": "string",

package/src/components/textField/index.js

@@ -78,6 +78,7 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
+    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -135,8 +136,28 @@ 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} 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`} />}