@widergy/mobile-ui 1.18.1 → 1.18.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.18.3](https://github.com/widergy/mobile-ui/compare/v1.18.2...v1.18.3) (2024-08-21)
+
+
+### Bug Fixes
+
+* utautocomplete updated and utvalidation fix ([#341](https://github.com/widergy/mobile-ui/issues/341)) ([33107d3](https://github.com/widergy/mobile-ui/commit/33107d3a08812a0ef6eb9625fefc1a2608a7368e))
+
+## [1.18.2](https://github.com/widergy/mobile-ui/compare/v1.18.1...v1.18.2) (2024-08-19)
+
+
+### Bug Fixes
+
+* select V1 fixes ([#327](https://github.com/widergy/mobile-ui/issues/327)) ([94b61d6](https://github.com/widergy/mobile-ui/commit/94b61d6145e2a9477c50ad2a8a522734c5aa0307))
+
 ## [1.18.1](https://github.com/widergy/mobile-ui/compare/v1.18.0...v1.18.1) (2024-08-12)
 
 

package/lib/components/CheckList/components/CheckBoxRenderer/index.js

@@ -1,7 +1,5 @@
-/* eslint-disable react/forbid-prop-types */
 import React, { memo } from 'react';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { bool, string, func, number, shape, any } from 'prop-types';
+import { bool, string, func, number, object } from 'prop-types';
 
 import Checkbox from '../../../Checkbox/index';
 
@@ -48,18 +46,18 @@ const CheckBoxRenderer = ({
 };
 
 CheckBoxRenderer.propTypes = {
-  labelsContainerStyle: ViewPropTypes.style,
-  checkboxContainerStyle: ViewPropTypes.style,
+  labelsContainerStyle: object,
+  checkboxContainerStyle: object,
   index: number,
   checkedColor: string,
   reversed: bool,
-  item: shape(any),
-  alternateColors: ViewPropTypes.style,
+  item: object,
+  alternateColors: object,
   disabledStyleEnabled: bool,
-  disabledStyle: ViewPropTypes.style,
-  coloredStyle: ViewPropTypes.style,
+  disabledStyle: object,
+  coloredStyle: object,
   disabledCheckedColor: string,
-  textProps: shape(any),
+  textProps: object,
   isChecked: bool,
   handleChange: func
 };

package/lib/components/Label/propTypes.js

@@ -1,13 +1,10 @@
-/* eslint-disable react/forbid-foreign-prop-types */
-
-import { Text } from 'react-native';
-import { bool, oneOfType, string } from 'prop-types';
+import { bool, object, oneOfType, string } from 'prop-types';
 
 import { themeType } from '../../theming';
 
 export default {
   color: oneOfType([bool, string]),
-  textProps: Text.propTypes,
+  textProps: object,
   theme: themeType,
   allowFontScaling: bool,
   useMarkdown: bool

package/lib/components/UTAutocomplete/index.js

@@ -17,14 +17,12 @@ const UTAutocomplete = ({
   filterOptions,
   input,
   label,
-  labelBackgroundColor,
   ListEmptyComponent,
   MenuOptionComponent,
   options,
   persistSelectedOption = false,
-  variant,
-  withGoogleAttribution,
-  styles: propStyles
+  styles: propStyles,
+  withGoogleAttribution
 }) => {
   const [selectedOption, setSelectedOption] = useState();
 
@@ -63,12 +61,10 @@ const UTAutocomplete = ({
         <UTTextInput
           disabled={disabled}
           error={error}
-          label={label}
-          labelBackgroundColor={labelBackgroundColor}
-          onChange={() => {}}
-          RightIcon={{ name: 'caret-down', type: 'font-awesome' }}
+          RightIcon="IconChevronDown"
+          title={label}
           value={selectedOption?.label || ''}
-          variant={variant}
+          version="V1"
         />
       </UTMenu>
     </View>
@@ -88,7 +84,6 @@ UTAutocomplete.propTypes = {
     value: string.isRequired
   }),
   label: string,
-  labelBackgroundColor: string,
   ListEmptyComponent: element,
   MenuOptionComponent: element,
   options: arrayOf(
@@ -100,7 +95,6 @@ UTAutocomplete.propTypes = {
   ),
   persistSelectedOption: bool,
   styles: ViewPropTypes.style,
-  variant: string,
   withGoogleAttribution: bool
 };
 

package/lib/components/UTBadge/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { number, oneOfType, string } from 'prop-types';
+import { number, object, oneOfType, string } from 'prop-types';
 import { View } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
@@ -31,7 +30,7 @@ UTBadge.defaultProps = DEFAULT_PROPS;
 UTBadge.propTypes = {
   children: oneOfType([string, number]),
   colorTheme: string,
-  style: ViewPropTypes.style
+  style: object
 };
 
 export default UTBadge;

package/lib/components/UTBaseInputField/README.md

@@ -1,25 +1,34 @@
-| Name                  | Type                                                           | Default                           | Description                                               |
-| --------------------- | -------------------------------------------------------------- | --------------------------------- | --------------------------------------------------------- |
-| alwaysShowPlaceholder | bool                                                           | false                             | Whether to always show the placeholder text.              |
-| disabled              | bool                                                           |                                   | Whether the input field is disabled.                      |
-| error                 | string                                                         |                                   | Error message to display.                                 |
-| id                    | oneOfType([number, string])                                    |                                   | Unique identifier for the input field.                    |
-| input                 | shape({ value: string.isRequired, onChange: func.isRequired }) | { value: '', onChange: () => {} } | Input object containing the value and onChange handler.   |
-| inputSize             | string                                                         | 'large'                           | Size of the input field. One of: `small`, `large`.        |
-| leftAdornments        | arrayOf(shape({ name: string, props: object }))                |                                   | Elements to display on the left side of the input field.  |
-| maxCount              | number                                                         |                                   | Maximum number of characters allowed.                     |
-| maxRows               | number                                                         |                                   | Maximum number of rows for multiline input.               |
-| onBlur                | func                                                           |                                   | Callback function to handle blur event.                   |
-| onFocus               | func                                                           |                                   | Callback function to handle focus event.                  |
-| onSubmitEditing       | func                                                           |                                   | Callback function to handle submit editing event.         |
-| placeholder           | string                                                         |                                   | Placeholder text for the input field.                     |
-| readOnly              | bool                                                           |                                   | Whether the input field is read-only.                     |
-| returnKeyType         | string                                                         |                                   | Type of return key to display on the keyboard.            |
-| rightAdornments       | arrayOf(shape({ name: string, props: object }))                |                                   | Elements to display on the right side of the input field. |
-| style                 | shape({ container: object, input: object, root: object })      | {}                                | Custom styles to apply to the component.                  |
-| type                  | string                                                         |                                   | Type of the input field (e.g., email, numeric, password). |
-| variant               | string                                                         | 'white'                           | Variant of the input field. One of: `white`, `gray`.      |
-| editable              | bool                                                           | true                              | Whether the input field is editable.                      |
+# UTBaseInputField
+
+## Description
+
+`UTBaseInputField` is a flexible and customizable input field component that supports various input types, adornments, and styles. It can be used to create text inputs with additional functionality such as icons, prefixes, suffixes, and action buttons.
+
+## Props
+
+| Name                  | Type                                                      | Default  | Description                                               |
+| --------------------- | --------------------------------------------------------- | -------- | --------------------------------------------------------- |
+| alwaysShowPlaceholder | bool                                                      | false    | Whether to always show the placeholder text.              |
+| disabled              | bool                                                      |          | Whether the input field is disabled.                      |
+| error                 | string                                                    |          | Error message to display.                                 |
+| id                    | oneOfType([number, string])                               |          | Unique identifier for the input field.                    |
+| value                 | string                                                    | ''       | The value of the input field.                             |
+| onChange              | func.isRequired                                           | () => {} | Callback function to handle change event.                 |
+| inputSize             | string                                                    | 'large'  | Size of the input field. One of: `small`, `large`.        |
+| leftAdornments        | arrayOf(shape({ name: string, props: object }))           |          | Elements to display on the left side of the input field.  |
+| maxCount              | number                                                    |          | Maximum number of characters allowed.                     |
+| maxRows               | number                                                    |          | Maximum number of rows for multiline input.               |
+| onBlur                | func                                                      |          | Callback function to handle blur event.                   |
+| onFocus               | func                                                      |          | Callback function to handle focus event.                  |
+| onSubmitEditing       | func                                                      |          | Callback function to handle submit editing event.         |
+| placeholder           | string                                                    |          | Placeholder text for the input field.                     |
+| readOnly              | bool                                                      |          | Whether the input field is read-only.                     |
+| returnKeyType         | string                                                    |          | Type of return key to display on the keyboard.            |
+| rightAdornments       | arrayOf(shape({ name: string, props: object }))           |          | Elements to display on the right side of the input field. |
+| style                 | shape({ container: object, input: object, root: object }) | {}       | Custom styles to apply to the component.                  |
+| type                  | string                                                    |          | Type of the input field (e.g., email, numeric, password). |
+| variant               | string                                                    | 'white'  | Variant of the input field. One of: `white`, `gray`.      |
+| editable              | bool                                                      | true     | Whether the input field is editable.                      |
 
 ## Input Types
 

package/lib/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { bool, shape } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, object, shape } from 'prop-types';
 
 import UTButton from '../../../UTButton';
 import { propTypes as utbuttonProptypes } from '../../../UTButton/proptypes';
@@ -17,7 +16,11 @@ const ActionAdornment = ({ action, disabled, actionStyle }) => {
 
 ActionAdornment.propTypes = {
   action: shape(utbuttonProptypes),
-  actionStyle: shape({ object: ViewPropTypes.style }),
+  actionStyle: shape({
+    childrenContainer: object,
+    icon: object,
+    root: object
+  }),
   disabled: bool
 };
 

package/lib/components/UTBaseInputField/constants.js

@@ -10,6 +10,7 @@ export const TYPES = {
   NUMBER: 'number',
   NUMERIC: 'numeric',
   PASSWORD: 'password',
+  PASSWORD_NUMERIC: 'password_numeric',
   PHONE: 'phone'
 };
 
@@ -17,7 +18,8 @@ export const KEYBOARD_BY_TYPE = {
   [TYPES.EMAIL]: 'email-address',
   [TYPES.NUMBER]: 'number-pad',
   [TYPES.NUMERIC]: 'numeric',
-  [TYPES.PHONE]: 'phone-pad'
+  [TYPES.PHONE]: 'phone-pad',
+  [TYPES.PASSWORD_NUMERIC]: 'numeric'
 };
 
 export const COMPONENT_KEYS = {

package/lib/components/UTBaseInputField/index.js

@@ -25,12 +25,12 @@ const UTBaseInputField = forwardRef(
       editable,
       error,
       id,
-      input,
       inputSize,
       leftAdornments,
       maxLength,
       maxRows,
       onBlur,
+      onChange,
       onFocus,
       onSubmitEditing,
       placeholder,
@@ -40,11 +40,11 @@ const UTBaseInputField = forwardRef(
       showCharacterCount,
       style,
       type,
+      value,
       variant
     },
     ref
   ) => {
-    const { value, onChange } = input;
     const [displayValue, setDisplayValue] = useState(value);
     const [focused, setFocused] = useState(false);
     const inputWidthRef = useRef(null);
@@ -93,7 +93,7 @@ const UTBaseInputField = forwardRef(
     };
 
     const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
-      disabled,
+      disabled: disabled && !readOnly,
       error,
       focused,
       inputSize,
@@ -112,10 +112,21 @@ const UTBaseInputField = forwardRef(
     useImperativeHandle(ref, () => ({
       truncate: () => {
         setDisplayValue(truncateText(value));
-      }
+      },
+      focus: () => {
+        if (inputRef.current) {
+          handleFocus();
+        }
+      },
+      blur: () => {
+        if (inputRef.current) {
+          handleBlur();
+        }
+      },
+      ...inputRef.current
     }));
 
-    const secureTextEntry = type === TYPES.PASSWORD;
+    const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
     const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
     const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
 
@@ -129,7 +140,7 @@ const UTBaseInputField = forwardRef(
             error={error}
             focused={focused}
             inputStyle={inputStyle}
-            key={element.name}
+            key={element.key || element.name}
             {...element.props}
           />
         ) : null;

package/lib/components/UTBaseInputField/proptypes.js

@@ -1,19 +1,16 @@
-import { bool, func, number, string, arrayOf, shape, oneOfType } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'prop-types';
 
 import { VARIANT, SIZES } from './constants';
 
 export const defaultProps = {
   alwaysShowPlaceholder: false,
   editable: true,
-  maxRows: 1,
-  input: {
-    value: [],
-    onChange: () => {}
-  },
   inputSize: SIZES.LARGE,
   leftAdornments: [],
+  maxRows: 1,
+  onChange: () => {},
   rightAdornments: [],
+  value: null,
   variant: VARIANT.WHITE
 };
 
@@ -24,17 +21,10 @@ export const propTypes = {
   editable: bool,
   error: oneOfType([bool, string]),
   id: oneOfType([number, string]),
-  input: shape({
-    value: oneOfType([string, number]),
-    onChange: func
-  }),
+  value: oneOfType([string, number]),
+  onChange: func,
   inputSize: string,
-  leftAdornments: arrayOf(
-    shape({
-      name: string.isRequired,
-      props: shape({})
-    })
-  ),
+  leftAdornments: arrayOf(shape({ name: string.isRequired, props: shape({}) })),
   maxLength: number,
   maxRows: number,
   onBlur: func,
@@ -51,9 +41,9 @@ export const propTypes = {
   ),
   showCharacterCount: bool,
   style: shape({
-    container: ViewPropTypes.style,
-    input: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    container: object,
+    input: object,
+    root: object
   }),
   type: string,
   variant: string

package/lib/components/UTBaseInputField/theme.js

@@ -81,8 +81,7 @@ const baseTextInputTheme = theme => ({
     columnGap: CONTAINER.ROW_GAP,
     flex: 1,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%'
+    justifyContent: 'space-between'
   },
   textLengthRow: {
     flexDirection: 'row',

package/lib/components/UTButton/proptypes.js

@@ -1,5 +1,4 @@
-import { bool, func, elementType, string, shape, number } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, elementType, func, number, object, shape, string } from 'prop-types';
 
 import { ICON_PLACEMENTS, SIZES } from './constants';
 
@@ -22,9 +21,9 @@ export const propTypes = {
   onPress: func,
   size: string,
   style: shape({
-    childrenContainer: ViewPropTypes.style,
-    icon: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    childrenContainer: object,
+    icon: object,
+    root: object
   }),
   variant: string
 };

package/lib/components/UTCBUInput/index.js

@@ -1,12 +1,11 @@
-/* eslint-disable camelcase */
 import React from 'react';
-import { shape, func, any, elementType, oneOfType, number, string } from 'prop-types';
+import { shape, func, object, elementType, oneOfType, number, string } from 'prop-types';
 
 import UTTextInput from '../UTTextInput';
 
-const UTCBUInput = ({ input, configuration, ...props }) => {
+const UTCBUInput = ({ input, field, ...props }) => {
   const { onChange, value, onBlur } = input;
-  const { entities, cbu_number_key, cbu_entity_key } = configuration;
+  const { entities, cbu_number_key: cbuNumberKey, cbu_entity_key: cbuEntityKey } = field?.configuration || {};
 
   const findEntity = inputNumber => {
     const entityObject = entities?.find(entity => new RegExp(entity.expression).test(inputNumber));
@@ -15,7 +14,7 @@ const UTCBUInput = ({ input, configuration, ...props }) => {
 
   const handleOnChange = inputValue => {
     const newValue = inputValue
-      ? { [cbu_number_key]: inputValue, [cbu_entity_key]: findEntity(inputValue) }
+      ? { [cbuNumberKey]: inputValue, [cbuEntityKey]: findEntity(inputValue) }
       : null;
     onChange(newValue);
   };
@@ -28,20 +27,20 @@ const UTCBUInput = ({ input, configuration, ...props }) => {
   return (
     <UTTextInput
       {...props}
-      value={value?.[cbu_number_key]}
-      captionLabel={value?.[cbu_entity_key]}
-      onChange={handleOnChange}
-      onBlur={handleOnBlur}
+      helpText={value?.[cbuEntityKey]}
       maxLength={22}
+      onBlur={handleOnBlur}
+      onChange={handleOnChange}
+      value={value?.[cbuNumberKey]}
+      version="V1"
     />
   );
 };
 
 UTCBUInput.propTypes = {
+  field: shape({ configuration: object }),
   input: shape({ onChange: func.isRequired, value: oneOfType([number, string]) }),
-  InputComponent: elementType,
-  // eslint-disable-next-line react/forbid-prop-types
-  configuration: any
+  InputComponent: elementType
 };
 
 export default UTCBUInput;

package/lib/components/UTCheckBox/README.md

@@ -6,19 +6,19 @@
 
 ## Props
 
-| Name          | Type   | Default | Description                                             |
-| ------------- | ------ | ------- | ------------------------------------------------------- |
-| checked       | bool   | false   | Indicates if the checkbox is checked.                   |
-| disabled      | bool   | false   | Disables the checkbox, making it unclickable.           |
-| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state. |
-| isSimple      | bool   | false   | **Deprecated**: Use standard checkboxes instead.        |
-| label         | string |         | Label to display next to the checkbox.                  |
-| onPress       | func   |         | Function to call when the checkbox is pressed.          |
-| required      | bool   | false   | Indicates if the checkbox is required.                  |
-| reversed      | bool   | false   | If true, reverses the order of label and checkbox.      |
-| spacing       | string | large   | If "small", reduces the column gap from 16 to 8.        |
-| style         | shape  | {}      | Custom styles to apply to the checkbox container.       |
-| variant       | string |         | The variant to use for styling the checkbox.            |
+| Name          | Type   | Default | Description                                                                 |
+| ------------- | ------ | ------- | --------------------------------------------------------------------------- |
+| checked       | bool   | false   | Indicates if the checkbox is checked.                                       |
+| disabled      | bool   | false   | Disables the checkbox, making it unclickable.                               |
+| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state.                     |
+| isSimple      | bool   | false   | **Deprecated**: Use standard checkboxes instead.                            |
+| onPress       | func   |         | Function to call when the checkbox is pressed.                              |
+| required      | bool   | false   | Indicates if the checkbox is required.                                      |
+| reversed      | bool   | false   | If true, reverses the order of title and checkbox.                          |
+| spacing       | string | large   | If "small", reduces the column gap from 16 to 8.                            |
+| style         | shape  | {}      | Custom styles to apply to the checkbox container. Can contain root or title |
+| title         | string |         | Title to display next to the checkbox.                                      |
+| variant       | string |         | The variant to use for styling the checkbox.                                |
 
 ## Usage
 
@@ -31,7 +31,7 @@ import UTCheckBox from './UTCheckBox';
 const Example = () => {
   const [checked, setChecked] = React.useState(false);
 
-  return <UTCheckBox checked={checked} label="Check me" onPress={() => setChecked(!checked)} />;
+  return <UTCheckBox checked={checked} title="Check me" onPress={() => setChecked(!checked)} />;
 };
 
 export default Example;

package/lib/components/UTCheckBox/index.js

@@ -13,20 +13,20 @@ import styles from './styles';
 const UTCheckBox = ({
   checked,
   disabled,
-  isSimple,
   indeterminate,
-  label,
+  isSimple,
   onPress,
   required,
   reversed,
   spacing,
   style,
+  title,
   variant
 }) => {
   const theme = useTheme();
   const [pressed, setPressed] = useState(false);
 
-  const { containerStyles, iconContainerStyles, boxStyles, pressableStyles } = useMemo(
+  const { containerStyles, iconContainerStyles, boxStyles, pressableStyles, titleStyles } = useMemo(
     () =>
       retrieveStyle({
         checked,
@@ -60,7 +60,12 @@ const UTCheckBox = ({
     >
       <View style={containerStyles}>
         {isSimple ? (
-          <UTIcon name="IconCheck" shade="04" colorTheme="accent" style={!checked && styles.hidden} />
+          <UTIcon
+            name="IconCheck"
+            shade="04"
+            colorTheme="accent"
+            style={checked ? undefined : styles.hidden}
+          />
         ) : (
           <View style={boxStyles}>
             <View style={iconContainerStyles}>
@@ -68,8 +73,8 @@ const UTCheckBox = ({
             </View>
           </View>
         )}
-        <UTFieldLabel required={required} colorTheme={checked && 'accent'} shade={checked && '05'}>
-          {label}
+        <UTFieldLabel colorTheme={checked ? 'accent' : 'dark'} required={required} style={titleStyles}>
+          {title}
         </UTFieldLabel>
       </View>
     </Pressable>

package/lib/components/UTCheckBox/proptypes.js

@@ -1,5 +1,4 @@
-import { bool, func, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, func, object, string } from 'prop-types';
 
 import { SPACING } from './constants';
 
@@ -17,11 +16,11 @@ export const propTypes = {
   disabled: bool,
   indeterminate: bool,
   isSimple: bool,
-  label: string,
   onPress: func,
   required: bool,
   reversed: bool,
   spacing: string,
-  style: ViewPropTypes.style,
+  style: object,
+  title: string,
   variant: string
 };

package/lib/components/UTCheckBox/theme.js

@@ -21,6 +21,9 @@ const baseCheckBoxTheme = theme => ({
     borderRadius: 25,
     overflow: 'hidden',
     padding: 6
+  },
+  title: {
+    maxWidth: '80%'
   }
 });
 
@@ -109,18 +112,22 @@ export const retrieveStyle = ({
   });
 
   return {
+    boxStyles: {
+      ...baseThemeStyles.box,
+      ...box
+    },
     containerStyles: {
       ...baseThemeStyles.container,
       ...container,
-      ...style
+      ...style.root
     },
     iconContainerStyles: {
       ...baseThemeStyles.iconContainer,
       ...iconContainer
     },
-    boxStyles: {
-      ...baseThemeStyles.box,
-      ...box
+    titleStyles: {
+      ...baseThemeStyles.title,
+      ...style.title
     },
     pressableStyles: pressable
   };