@widergy/mobile-ui 1.18.1 → 1.18.2

package/lib/components/UTCheckList/index.js

@@ -14,20 +14,19 @@ import { BUTTON_VARIANT, SPACING } from './constants';
 const UTCheckList = ({
   error,
   horizontalSpacing,
-  input,
   isSimple,
-  label,
+  onChange,
   options,
   required,
   reversed,
   selectAllLabel,
   showSelectAll,
   style,
+  title,
+  value,
   variant,
   verticalSpacing
 }) => {
-  const { value, onChange } = input;
-
   const reversedBasedOnVariant = getPropValueBasedOnVariant(variant, reversed, true);
   const verticalSpacingBasedOnVariant = getPropValueBasedOnVariant(variant, verticalSpacing, SPACING.SMALL);
 
@@ -77,7 +76,7 @@ const UTCheckList = ({
       style={[styles.container, verticalSpacing === SPACING.SMALL && styles.smallVerticalSpacing, style.root]}
     >
       <View style={[styles.headerContainer, style.header]}>
-        {label && <UTFieldLabel required={required}>{label}</UTFieldLabel>}
+        {title && <UTFieldLabel required={required}>{title}</UTFieldLabel>}
         {validationData && <UTValidation validationData={validationData} />}
       </View>
       <View
@@ -92,7 +91,7 @@ const UTCheckList = ({
           <UTCheckBox
             checked={areAllSelected}
             indeterminate={isIndeterminate}
-            label={selectAllLabel}
+            title={selectAllLabel}
             onPress={handleCheckAll}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
@@ -106,7 +105,7 @@ const UTCheckList = ({
             checked={isChecked(item, value)}
             disabled={item.disabled}
             key={keyExtractor(item, index)}
-            label={item.label}
+            title={item.label}
             onPress={handleChange(item.value)}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}

package/lib/components/UTCheckList/proptypes.js

@@ -1,48 +1,36 @@
-import { arrayOf, bool, func, shape, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { arrayOf, bool, func, object, shape, string } from 'prop-types';
 
 import { SPACING } from './constants';
 
 export const defaultProps = {
   horizontalSpacing: SPACING.LARGE,
-  input: {
-    value: [],
-    onChange: () => {}
-  },
   isSimple: false,
+  onChange: () => {},
   showSelectAll: true,
   style: {},
+  value: null,
   verticalSpacing: SPACING.LARGE
 };
 
 export const propTypes = {
   error: string,
   horizontalSpacing: string,
-  input: shape({
-    value: arrayOf(string),
-    onChange: func
-  }),
   isSimple: bool,
-  label: string,
-  options: arrayOf(
-    shape({
-      checked: bool,
-      disabled: bool,
-      label: string,
-      value: string
-    })
-  ),
+  title: string,
+  onChange: func,
+  options: arrayOf(shape({ checked: bool, disabled: bool, title: string, value: string })),
   required: bool,
   reversed: bool,
   selectAllLabel: string,
   showSelectAll: bool,
   style: shape({
-    checkboxesContainer: ViewPropTypes.style,
-    header: ViewPropTypes.style,
-    item: ViewPropTypes.style,
-    root: ViewPropTypes.style,
-    selectAll: ViewPropTypes.style
+    checkboxesContainer: object,
+    header: object,
+    item: object,
+    root: object,
+    selectAll: object
   }),
+  value: arrayOf(string),
   variant: string,
   verticalSpacing: string
 };

package/lib/components/UTFieldLabel/index.js

@@ -7,20 +7,18 @@ import UTLabel from '../UTLabel';
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
-const UTFieldLabel = ({ children, colorTheme, required, variant, weight }) => {
-  return (
-    <View style={styles.label}>
-      <UTLabel colorTheme={colorTheme} variant={variant}>
-        {children}
+const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight }) => (
+  <View style={[styles.label, style]}>
+    <UTLabel colorTheme={colorTheme} variant={variant}>
+      {children}
+    </UTLabel>
+    {required && (
+      <UTLabel colorTheme="error" shade="04" variant={variant} weight={weight}>
+        {REQUIRED_LABEL}
       </UTLabel>
-      {required && (
-        <UTLabel colorTheme="error" shade="04" variant={variant} weight={weight}>
-          {REQUIRED_LABEL}
-        </UTLabel>
-      )}
-    </View>
-  );
-};
+    )}
+  </View>
+);
 
 UTFieldLabel.propTypes = {
   colorTheme: string,

package/lib/components/UTIcon/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { number, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { number, object, string } from 'prop-types';
 import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
@@ -40,7 +39,7 @@ UTIcon.propTypes = {
   name: string,
   shade: string,
   size: number,
-  style: ViewPropTypes.style
+  style: object
 };
 
 export default UTIcon;

package/lib/components/UTPasswordField/versions/V1/constants.js

@@ -1,7 +1,11 @@
 export const INPUT_TYPE = {
+  NUMERIC: 'numeric',
   PASSWORD: 'password',
+  PASSWORD_NUMERIC: 'password_numeric',
   TEXT: 'text'
 };
 
+export const KEYBOARD_TYPE_NUMERIC = 'numeric';
+
 export const ICON_EYE = 'IconEye';
 export const ICON_EYE_OFF = 'IconEyeOff';

package/lib/components/UTPasswordField/versions/V1/index.js

@@ -3,28 +3,27 @@ import React, { useState } from 'react';
 import { propTypes, defaultProps } from '../../../UTTextInput/versions/V1/proptypes';
 import UTTextInput from '../../../UTTextInput';
 
-import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE } from './constants';
+import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE, KEYBOARD_TYPE_NUMERIC } from './constants';
 
-const UTPasswordField = props => {
+const UTPasswordField = ({ keyboardType, ...props }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
-  const toggleVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
+  const toggleVisibility = () => setIsPasswordVisible(!isPasswordVisible);
 
   const action = {
     Icon: isPasswordVisible ? ICON_EYE : ICON_EYE_OFF,
     onPress: toggleVisibility
   };
 
-  return (
-    <UTTextInput
-      action={action}
-      type={isPasswordVisible ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD}
-      version="V1"
-      {...props}
-    />
-  );
+  const textInputType = isPasswordVisible
+    ? keyboardType === KEYBOARD_TYPE_NUMERIC
+      ? INPUT_TYPE.NUMERIC
+      : INPUT_TYPE.TEXT
+    : keyboardType === KEYBOARD_TYPE_NUMERIC
+      ? INPUT_TYPE.PASSWORD_NUMERIC
+      : INPUT_TYPE.PASSWORD;
+
+  return <UTTextInput {...props} action={action} type={textInputType} version="V1" />;
 };
 
 UTPasswordField.defaultProps = defaultProps;

package/lib/components/UTPhoneInput/index.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { View } from 'react-native';
 import { bool, elementType, func, number, shape, string } from 'prop-types';
 
@@ -7,7 +7,7 @@ import UTFieldLabel from '../UTFieldLabel';
 import UTLabel from '../UTLabel';
 import UTValidation from '../UTValidation';
 import { formatErrorToValidation } from '../UTValidation/utils';
-import { LABEL_VARIANTS } from '../../constants/inputs';
+import { TITLE_VARIANTS } from '../../constants/inputs';
 import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
 import { validationDataProptypes } from '../UTValidation/constants';
 
@@ -24,7 +24,6 @@ class UTPhoneInput extends PureComponent {
       firstFocus: false,
       isValidCode: false,
       phoneNumber: '',
-      phoneRef: null,
       secondFocus: false
     };
 
@@ -32,6 +31,7 @@ class UTPhoneInput extends PureComponent {
     this.handleSecondBlur = this.handleBlur('secondFocus');
     this.handleFirstFocus = this.handleFocus('firstFocus');
     this.handleSecondFocus = this.handleFocus('secondFocus');
+    this.phoneInputRef = createRef();
   }
 
   componentDidMount() {
@@ -122,14 +122,12 @@ class UTPhoneInput extends PureComponent {
   };
 
   handleSubmitEditing = () => {
-    const { phoneRef, areaCodeError } = this.state;
+    const { areaCodeError } = this.state;
     if (!areaCodeError) {
-      phoneRef.focus();
+      this.phoneInputRef.current?.focus();
     }
   };
 
-  phoneInputRef = ref => this.setState({ phoneRef: ref });
-
   updateValue = () => {
     const { value, withAreaCode } = this.props;
     if (value) {
@@ -159,12 +157,12 @@ class UTPhoneInput extends PureComponent {
     const {
       areaCodePlaceholder,
       countryCode,
-      editable,
-      formError,
+      disabled,
+      error,
       helpText,
       InputRef,
-      label,
-      labelVariant,
+      title,
+      titleVariant,
       maxLength,
       onSubmitEditing,
       placeholder,
@@ -176,31 +174,31 @@ class UTPhoneInput extends PureComponent {
     } = this.props;
     const { areaCode, areaCodeError, isValidCode, phoneNumber } = this.state;
 
-    const labelColorTheme = readOnly ? 'gray' : 'dark';
+    const titleColorTheme = readOnly ? 'gray' : 'dark';
 
-    const validationErrors =
+    const validationData =
       validations ||
       (areaCodeError && formatErrorToValidation(areaCodeError)) ||
-      (formError && formatErrorToValidation(formError));
+      (error && formatErrorToValidation(error));
 
-    const hasError = validationErrors?.length > 0;
+    const hasError = validationData?.length > 0;
 
     return (
       <View style={styles.container}>
-        {label && (
+        {title && (
           <UTFieldLabel
-            colorTheme={labelColorTheme}
+            colorTheme={titleColorTheme}
             required={required}
-            variant={LABEL_VARIANTS[labelVariant]}
+            variant={TITLE_VARIANTS[titleVariant]}
           >
-            {label}
+            {title}
           </UTFieldLabel>
         )}
         <View style={styles.inputsContainer}>
           {withAreaCode ? (
             <UTBaseInputField
               alwaysShowPlaceholder
-              disabled={!editable || readOnly}
+              disabled={disabled}
               error={hasError}
               leftAdornments={[]}
               maxLength={4}
@@ -209,6 +207,7 @@ class UTPhoneInput extends PureComponent {
               onFocus={this.handleFirstFocus}
               onSubmitEditing={this.handleSubmitEditing}
               placeholder={areaCodePlaceholder}
+              readOnly={readOnly}
               ref={InputRef}
               returnKeyType="next"
               rightAdornments={[
@@ -222,7 +221,7 @@ class UTPhoneInput extends PureComponent {
           <View style={styles.phoneNumber}>
             <UTBaseInputField
               alwaysShowPlaceholder
-              disabled={(withAreaCode && !isValidCode) || !editable || readOnly}
+              disabled={(withAreaCode && !isValidCode) || disabled || readOnly}
               error={hasError && !areaCodeError}
               leftAdornments={
                 countryCode && !withAreaCode
@@ -250,15 +249,15 @@ class UTPhoneInput extends PureComponent {
             {helpText}
           </UTLabel>
         )}
-        {validationErrors && <UTValidation validationData={validationErrors} />}
+        {validationData && <UTValidation validationData={validationData} />}
       </View>
     );
   }
 }
 
 UTPhoneInput.defaultProps = {
-  labelVariant: 'large',
   maxLength: 10,
+  titleVariant: 'large',
   translations: {
     areaCodeWithoutZeroError: 'Ingrese el código sin 0',
     invalidAreaCodeError: 'Código de área inválido'
@@ -269,12 +268,10 @@ UTPhoneInput.defaultProps = {
 UTPhoneInput.propTypes = {
   areaCodePlaceholder: string,
   countryCode: string,
-  editable: bool,
-  formError: string,
+  disabled: bool,
+  error: string,
   helpText: string,
   InputRef: func,
-  label: string,
-  labelVariant: string,
   maxLength: number,
   onBlur: func,
   onChange: func,
@@ -284,6 +281,8 @@ UTPhoneInput.propTypes = {
   readOnly: bool,
   required: bool,
   RightIcon: elementType,
+  title: string,
+  titleVariant: string,
   translations: shape({
     areaCodeWithoutZeroError: string,
     invalidAreaCodeError: string

package/lib/components/UTProductItem/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
-import { bool, element, number, oneOf, shape, string } from 'prop-types';
+import { bool, element, number, object, oneOf, shape, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 
 import ImageIcon from '../ImageIcon';
@@ -81,13 +81,13 @@ UTProductItem.propTypes = {
   additionalInfo: string,
   amount: number,
   counter: shape({ current: number, limit: number }),
-  counterLabelProps: shape({}),
+  counterLabelProps: object,
   discount: number,
   elevation: number,
   imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
   previousAmount: number,
   quantity: number,
-  quantityLabelProps: shape({}),
+  quantityLabelProps: object,
   secondaryAction: ActionPropTypes,
   selectedQuantity: number,
   title: string

package/lib/components/UTSearchField/README.md

@@ -6,19 +6,20 @@
 
 ## Props
 
-| Name            | Type                                                           | Default                           | Description                                                  |
-| --------------- | -------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------ |
-| inputRef        | func                                                           |                                   | Reference to the input field.                                |
-| input           | shape({ value: string.isRequired, onChange: func.isRequired }) | { value: '', onChange: () => {} } | Input object containing the value and onChange handler.      |
-| onBlur          | func                                                           |                                   | Function to call when the input field loses focus.           |
-| onFocus         | func                                                           |                                   | Function to call when the input field gains focus.           |
-| onSubmitEditing | func                                                           |                                   | Function to call when the input field is submitted.          |
-| placeholder     | string                                                         |                                   | Placeholder text for the input field.                        |
-| returnKeyType   | string                                                         |                                   | Determines the return key type on the keyboard.              |
-| size            | string                                                         | medium                            | Size of the input field. One of: `small`, `medium`, `large`. |
-| style           | object                                                         |                                   | Style object to customize the input field.                   |
-| type            | string                                                         |                                   | Type of input (e.g., 'text', 'password', 'email').           |
-| variant         | string                                                         | white                             | Variant of the input field. One of: `white`, `gray`.         |
+| Name            | Type   | Default | Description                                                  |
+| --------------- | ------ | ------- | ------------------------------------------------------------ |
+| inputRef        | func   |         | Reference to the input field.                                |
+| onBlur          | func   |         | Function to call when the input field loses focus.           |
+| onChange        | func   |         | Function to call when the input field value changes.         |
+| onFocus         | func   |         | Function to call when the input field gains focus.           |
+| onSubmitEditing | func   |         | Function to call when the input field is submitted.          |
+| placeholder     | string |         | Placeholder text for the input field.                        |
+| returnKeyType   | string |         | Determines the return key type on the keyboard.              |
+| size            | string | medium  | Size of the input field. One of: `small`, `medium`, `large`. |
+| style           | object |         | Style object to customize the input field.                   |
+| type            | string |         | Type of input (e.g., 'text', 'password', 'email').           |
+| value           | string | ''      | The value of the input field.                                |
+| variant         | string | white   | Variant of the input field. One of: `white`, `gray`.         |
 
 ## Example
 

package/lib/components/UTSearchField/index.js

@@ -7,9 +7,9 @@ import { defaultProps, propTypes } from './proptypes';
 
 const UTSearchField = ({
   disabled,
-  input,
   inputRef,
   onBlur,
+  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -17,10 +17,11 @@ const UTSearchField = ({
   size,
   style,
   type,
+  value,
   variant
 }) => {
   const clearText = () => {
-    input.onChange('');
+    onChange('');
   };
 
   const action = { Icon: 'IconX', onPress: clearText, size: 'small' };
@@ -29,16 +30,16 @@ const UTSearchField = ({
     { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconSearch', changeOnFocus: true, shade: '02' } }
   ];
 
-  const rightAdornments = input.value ? [{ name: COMPONENT_KEYS.ACTION, props: { action } }] : [];
+  const rightAdornments = value ? [{ name: COMPONENT_KEYS.ACTION, props: { action } }] : [];
 
   return (
     <UTBaseInputField
       alwaysShowPlaceholder
       disabled={disabled}
-      input={input}
       inputSize={size}
       leftAdornments={leftAdornments}
       onBlur={onBlur}
+      onChange={onChange}
       onFocus={onFocus}
       onSubmitEditing={onSubmitEditing}
       placeholder={placeholder}
@@ -47,6 +48,7 @@ const UTSearchField = ({
       rightAdornments={rightAdornments}
       style={{ container: style }}
       type={type}
+      value={value}
       variant={variant}
     />
   );

package/lib/components/UTSearchField/proptypes.js

@@ -1,22 +1,17 @@
-import { func, oneOf, string, object, shape, instanceOf, oneOfType } from 'prop-types';
+import { func, oneOf, string, object, instanceOf, oneOfType } from 'prop-types';
 
 import { SIZES, VARIANT } from '../UTBaseInputField/constants';
 
 export const defaultProps = {
-  input: {
-    value: [],
-    onChange: () => {}
-  },
+  onChange: () => {},
+  value: '',
   variant: VARIANT.WHITE
 };
 
 export const propTypes = {
-  input: shape({
-    value: string,
-    onChange: func
-  }),
   inputRef: oneOfType([func, instanceOf(Object)]),
   onBlur: func,
+  onChange: func,
   onFocus: func,
   onSubmitEditing: func,
   placeholder: string,
@@ -24,5 +19,6 @@ export const propTypes = {
   size: oneOf(Object.values(SIZES)),
   style: object,
   type: string,
+  value: string,
   variant: oneOf(Object.values(VARIANT))
 };

package/lib/components/UTSelect/versions/V1/README.md

@@ -4,35 +4,27 @@
 
 `UTSelect` is a customizable dropdown select component that allows users to select single or multiple options from a provided list. It includes features like search, select all, and dynamic option filtering.
 
-## Props
-
-| Name                  | Type   | Default | Description                                                                                          |
-| --------------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
-| action                | shape  |         | Action object containing `Icon`, `onPress`, and `size` for the action button.                        |
-| alwaysShowPlaceholder | bool   | true    | Determines if the placeholder should always be shown.                                                |
-| helpText              | string |         | Help text displayed below the input field.                                                           |
-| noMatchesText         | string |         | Text to display when no matches are found in the search.                                             |
-| input                 | shape  |         | Input configuration object containing `value` and `onChange`.                                        |
-| isMultiple            | bool   | false   | Allows multiple selection if true.                                                                   |
-| label                 | string |         | Label for the select field.                                                                          |
-| options               | array  |         | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`. |
-| placeholder           | string |         | Placeholder text for the select field.                                                               |
-| prefix                | string |         | Text to display as a prefix inside the input field.                                                  |
-| required              | bool   | false   | Indicates if the select field is required.                                                           |
-| searchPlaceholder     | string |         | Placeholder text for the search field.                                                               |
-| selectAllLabel        | string |         | Label for the "Select All" checkbox.                                                                 |
-| showSelectAll         | bool   | false   | Determines whether to show the "Select All" checkbox.                                                |
-| style                 | shape  | {}      | Custom styles to apply to the select field. Can contain `root`, `noMatchesText`, `scrollview`.       |
-| suffix                | string |         | Text to display as a suffix inside the input field.                                                  |
-
-### Input Object
-
-The `input` prop is an object that should contain the following keys:
-
-| Name     | Type                    | Description                                  |
-| -------- | ----------------------- | -------------------------------------------- |
-| value    | arrayOf(string, number) | Array of selected values.                    |
-| onChange | func                    | Function to call when the selection changes. |
+| Name                  | Type                       | Default | Description                                                                                                             |
+| --------------------- | -------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
+| action                | shape                      |         | Action object containing `Icon`, `onPress`, and `size` for the action button.                                           |
+| alwaysShowPlaceholder | bool                       | true    | Determines if the placeholder should always be shown.                                                                   |
+| clearable             | bool                       | false   | Determines whether a button to clear the current selection should be shown.                                             |
+| helpText              | string                     |         | Help text displayed below the input field.                                                                              |
+| title                 | string                     |         | Title for the select field.                                                                                             |
+| multiple              | bool                       | false   | Allows multiple selection if true.                                                                                      |
+| noMatchesText         | string                     |         | Text to display when no matches are found in the search.                                                                |
+| onChange              | func                       |         | Function to call when the input field value changes.                                                                    |
+| options               | array                      |         | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`.                    |
+| placeholder           | string                     |         | Placeholder text for the select field.                                                                                  |
+| prefix                | string                     |         | Text to display as a prefix inside the input field.                                                                     |
+| required              | bool                       | false   | Indicates if the select field is required.                                                                              |
+| searchPlaceholder     | string                     |         | Placeholder text for the search field.                                                                                  |
+| selectAllLabel        | string                     |         | Label for the "Select All" checkbox.                                                                                    |
+| showSelectAll         | bool                       | false   | Determines whether to show the "Select All" checkbox.                                                                   |
+| style                 | shape                      | {}      | Custom styles to apply to the select field. Applies styles to the root container of the select field.                   |
+| suffix                | string                     |         | Text to display as a suffix inside the input field.                                                                     |
+| value                 | oneOfType([string, array]) | null    | The value of the input field. It can be a string for single selection or an array for multiple selection.               |
+| withAutoReset         | bool                       | true    | Determines whether the select should automatically reset when the selected value is no longer available in the options. |
 
 ### Option Object
 
@@ -43,6 +35,10 @@ The `options` prop is an array of objects, each representing an option:
 | label | string         | Label to display for the option. |
 | value | string, number | Value of the option.             |
 
+### `withAutoReset`
+
+`withAutoReset` is a prop that controls the behavior of the `UTSelect` component when the selected value is no longer available in the current options. This is useful in scenarios where the available options can change dynamically, for example, due to filtering or other user interactions.
+
 ## Usage
 
 ```jsx
@@ -62,16 +58,14 @@ const UTSelectExample = () => {
   return (
     <View style={{ padding: 20 }}>
       <UTSelect
-        label="Select Options"
+        title="Select Options"
+        noMatchesText="No matches found"
+        onChange={setSelectedOptions}
         options={options}
-        input={{
-          value: selectedOptions,
-          onChange: setSelectedOptions
-        }}
         placeholder="Select an option"
         searchPlaceholder="Search options"
         selectAllLabel="Select All"
-        noMatchesText="No matches found"
+        value={selectedOptions}
       />
       <Text>Selected Options: {selectedOptions.join(', ')}</Text>
     </View>