@widergy/mobile-ui 1.18.1 → 1.18.2

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

@@ -1,27 +1,32 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef, useMemo, Fragment } from 'react';
 import { View, Pressable, ScrollView } from 'react-native';
 import isEmpty from 'lodash/isEmpty';
 
 import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
 import UTBaseInputField from '../../../UTBaseInputField';
 import UTBottomSheet from '../../../UTBottomSheet';
 import UTCheckList from '../../../UTCheckList';
 import UTFieldLabel from '../../../UTFieldLabel';
 import UTLabel from '../../../UTLabel';
 import UTSearchField from '../../../UTSearchField';
+import UTValidation from '../../../UTValidation';
 
 import { defaultProps, propTypes } from './proptypes';
 import styles from './styles';
+import { shouldReset } from './utils';
 
 const UTSelect = ({
   action,
   alwaysShowPlaceholder,
+  clearable,
   closeButtonText,
+  disabled,
+  error,
   helpText,
-  input,
-  isMultiple,
-  label,
+  multiple,
   noMatchesText,
+  onChange,
   options,
   placeholder,
   prefix,
@@ -30,19 +35,34 @@ const UTSelect = ({
   selectAllLabel,
   showSelectAll,
   style,
-  suffix
+  suffix,
+  title,
+  value,
+  withAutoReset
 }) => {
   const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
-  const [selectedOptions, setSelectedOptions] = useState(input.value || []);
   const [sortedOptions, setSortedOptions] = useState(options);
   const inputFieldRef = useRef(null);
 
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+
   const sortOptions = useCallback(() => {
-    const selectedOptionsList = options.filter(option => selectedOptions.includes(option.value));
-    const unselectedOptionsList = options.filter(option => !selectedOptions.includes(option.value));
+    const selectedOptionsList = [];
+    const unselectedOptionsList = [];
+
+    options.forEach(option => {
+      const isSelected = multiple ? value?.includes(option.value) : option.value === value;
+      if (isSelected) selectedOptionsList.push(option);
+      else unselectedOptionsList.push(option);
+    });
+
     setSortedOptions([...selectedOptionsList, ...unselectedOptionsList]);
-  }, [options, selectedOptions]);
+  }, [options, value, multiple]);
+
+  useEffect(() => {
+    if (withAutoReset && shouldReset(value, options, multiple)) onChange(null);
+  }, [multiple, onChange, options, value, withAutoReset]);
 
   const handleOpenBottomSheet = () => {
     sortOptions();
@@ -50,35 +70,37 @@ const UTSelect = ({
   };
 
   const handleCloseBottomSheet = () => {
-    if (inputFieldRef.current) {
-      inputFieldRef.current.truncate();
-    }
+    inputFieldRef.current?.truncate();
     setBottomSheetVisible(false);
   };
 
-  const clearSelectedOptions = () => {
-    setSelectedOptions([]);
-    input.onChange([]);
-  };
+  const clearSelectedOptions = () => onChange(null);
 
   const handleSelect = useCallback(
     newValues => {
-      setSelectedOptions(newValues);
-      input.onChange(newValues);
-      if (!isMultiple) handleCloseBottomSheet();
+      if (!clearable && isEmpty(newValues)) return;
+
+      const updatedValue = multiple ? newValues : newValues[0];
+      onChange(updatedValue);
+      if (!multiple) handleCloseBottomSheet();
     },
-    [input, isMultiple]
+    [onChange, multiple, clearable]
   );
 
-  const displayValue = selectedOptions
-    .map(optionValue => {
+  const displayValue = useMemo(() => {
+    if (!value) return '';
+
+    const findLabel = optionValue => {
       const option = options.find(o => o.value === optionValue);
       return option ? option.label : '';
-    })
-    .join(', ');
+    };
 
-  const filteredOptions = sortedOptions.filter(option =>
-    option.label.toLowerCase().includes(searchTerm.toLowerCase())
+    return multiple ? value.map(findLabel).join(', ') : findLabel(value);
+  }, [value, options, multiple]);
+
+  const filteredOptions = useMemo(
+    () => sortedOptions.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase())),
+    [sortedOptions, searchTerm]
   );
 
   const clearAction = {
@@ -88,36 +110,42 @@ const UTSelect = ({
   };
 
   const leftAdornments = [
-    ...(isMultiple && !isEmpty(selectedOptions)
-      ? [{ name: COMPONENT_KEYS.BADGE, props: { text: selectedOptions.length, colorTheme: 'identity' } }]
+    ...(multiple && !isEmpty(value)
+      ? [{ name: COMPONENT_KEYS.BADGE, props: { text: value.length, colorTheme: 'identity' } }]
       : []),
     { name: COMPONENT_KEYS.PREFIX, props: { text: prefix } }
   ];
 
+  const showClearAction = displayValue && !disabled && clearable;
+
   const rightAdornments = [
     { name: COMPONENT_KEYS.SUFFIX, props: { text: suffix } },
-    ...(displayValue ? [{ name: COMPONENT_KEYS.ACTION, props: { action: clearAction } }] : []),
+    ...(showClearAction
+      ? [{ key: 'clearAction', name: COMPONENT_KEYS.ACTION, props: { action: clearAction } }]
+      : []),
     { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconChevronDown' } },
     { name: COMPONENT_KEYS.ACTION, props: { action } }
   ];
 
   return (
-    <View>
+    <Fragment>
       <View style={[styles.container, style]}>
-        {label && (
+        {title && (
           <UTFieldLabel required={required} variant="body">
-            {label}
+            {title}
           </UTFieldLabel>
         )}
-        <Pressable onPress={handleOpenBottomSheet}>
+        <Pressable disabled={disabled} onPress={handleOpenBottomSheet}>
           <UTBaseInputField
-            ref={inputFieldRef}
             alwaysShowPlaceholder={alwaysShowPlaceholder}
+            disabled={disabled}
             editable={false}
+            error={error}
             leftAdornments={leftAdornments}
             placeholder={placeholder}
+            ref={inputFieldRef}
             rightAdornments={rightAdornments}
-            input={{ value: displayValue }}
+            value={displayValue}
             variant="button"
           />
         </Pressable>
@@ -126,9 +154,10 @@ const UTSelect = ({
             {helpText}
           </UTLabel>
         )}
+        {validationData && <UTValidation validationData={validationData} />}
       </View>
       <UTBottomSheet
-        title={label}
+        title={title}
         description={helpText}
         visible={bottomSheetVisible}
         onClose={handleCloseBottomSheet}
@@ -136,11 +165,9 @@ const UTSelect = ({
       >
         <View style={styles.bottomSheetBodyContainer}>
           <UTSearchField
-            input={{
-              value: searchTerm,
-              onChange: setSearchTerm
-            }}
+            onChange={setSearchTerm}
             placeholder={searchPlaceholder}
+            value={searchTerm}
             variant="gray"
           />
           {isEmpty(filteredOptions) ? (
@@ -150,18 +177,20 @@ const UTSelect = ({
           ) : (
             <ScrollView keyboardShouldPersistTaps="handled">
               <UTCheckList
-                showSelectAll={showSelectAll}
-                input={{ value: selectedOptions, onChange: handleSelect }}
+                isSimple={!multiple}
+                onChange={handleSelect}
                 options={filteredOptions}
-                isSimple={!isMultiple}
                 selectAllLabel={selectAllLabel}
+                showSelectAll={showSelectAll}
+                value={value ? (multiple ? value : [value]) : []}
                 variant="button"
+                style={{ item: { title: styles.checklistTitles } }}
               />
             </ScrollView>
           )}
         </View>
       </UTBottomSheet>
-    </View>
+    </Fragment>
   );
 };
 

package/lib/components/UTSelect/versions/V1/proptypes.js

@@ -1,15 +1,14 @@
-import { arrayOf, bool, func, number, oneOfType, shape, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { array, arrayOf, bool, func, number, oneOfType, shape, string, object } from 'prop-types';
 
 export const defaultProps = {
   alwaysShowPlaceholder: true,
-  input: {
-    value: [],
-    onChange: () => {}
-  },
+  clearable: true,
+  multiple: false,
+  onChange: () => {},
   showSelectAll: false,
-  isMultiple: false,
-  style: {}
+  style: {},
+  value: null,
+  withAutoReset: true
 };
 
 export const propTypes = {
@@ -19,15 +18,14 @@ export const propTypes = {
     size: string
   }),
   alwaysShowPlaceholder: bool,
+  clearable: bool,
   closeButtonText: string,
+  disabled: bool,
+  error: string,
   helpText: string,
-  input: shape({
-    value: arrayOf(oneOfType([string, number])),
-    onChange: func
-  }),
-  isMultiple: bool,
-  label: string,
+  multiple: bool,
   noMatchesText: string,
+  onChange: func,
   options: arrayOf(
     shape({
       label: string,
@@ -40,6 +38,9 @@ export const propTypes = {
   searchPlaceholder: string,
   selectAllLabel: string,
   showSelectAll: bool,
-  style: ViewPropTypes.style,
-  suffix: string
+  style: object,
+  suffix: string,
+  title: string,
+  value: oneOfType([string, array]),
+  withAutoReset: bool
 };

package/lib/components/UTSelect/versions/V1/styles.js

@@ -5,6 +5,9 @@ const styles = StyleSheet.create({
     height: '100%',
     rowGap: 16
   },
+  checklistTitles: {
+    flex: 1
+  },
   container: {
     rowGap: 8
   },

package/lib/components/UTSelect/versions/V1/utils.js

@@ -0,0 +1,21 @@
+import { isEmpty } from '@widergy/web-utils/lib/array';
+
+const shouldResetMultipleSelect = (value, options) =>
+  !isEmpty(value) &&
+  (isEmpty(options) ||
+    value.some(
+      el =>
+        !options.some(opt => opt.value === el) &&
+        !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))
+    ));
+
+const shouldResetSimpleSelect = (value, options) =>
+  value &&
+  (isEmpty(options) ||
+    (!options.some(el => el.value === value) &&
+      !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value))));
+
+export const shouldReset = (value, options, multiple) => {
+  if (multiple) return shouldResetMultipleSelect(value, options);
+  return shouldResetSimpleSelect(value, options);
+};

package/lib/components/UTSelectableCard/index.js

@@ -35,6 +35,7 @@ const UTSelectableCard = ({
     style
   );
   const colorTheme = getColorTheme(selected, disabled);
+  const hasIcon = Icon?.url || Icon?.name || Icon?.Component;
 
   return (
     <Surface style={themedStyles.outerContainer}>
@@ -49,7 +50,7 @@ const UTSelectableCard = ({
         ]}
       >
         <View style={themedStyles.container}>
-          {!isEmpty(Icon) &&
+          {hasIcon &&
             (Icon.url ? (
               <Image
                 source={{ uri: Icon.url }}
@@ -57,7 +58,7 @@ const UTSelectableCard = ({
                 height={Icon.size || ICON_SIZE}
                 style={[themedStyles.image, themedStyles.icon]}
               />
-            ) : (
+            ) : Icon.name ? (
               <UTIcon
                 name={Icon.name}
                 colorTheme={colorTheme}
@@ -65,6 +66,8 @@ const UTSelectableCard = ({
                 size={Icon.size || ICON_SIZE}
                 style={themedStyles.icon}
               />
+            ) : (
+              <Icon.Component style={themedStyles.icon} />
             ))}
           <View style={themedStyles.textContainer}>
             <View style={themedStyles.column}>

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

@@ -6,36 +6,37 @@
 
 ## Props
 
-| Name                  | Type                                                                      | Default   | Description                                                                                              |
-| --------------------- | ------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
-| action                | object                                                                    |           | Action button configuration object.                                                                      |
-| alwaysShowPlaceholder | bool                                                                      | false     | Whether to always show the placeholder.                                                                  |
-| disabled              | bool                                                                      | false     | Disables the input field.                                                                                |
-| error                 | string                                                                    |           | Error message to be displayed.                                                                           |
-| helpText              | string                                                                    |           | Help text to be displayed below the input field.                                                         |
-| id                    | oneOfType([number, string])                                               |           | Unique identifier for the input field.                                                                   |
-| inputRef              | func                                                                      |           | Reference to the input field.                                                                            |
-| input                 | shape({ value: string.isRequired, onChange: func.isRequired }).isRequired |           | Input object containing the value and onChange handler.                                                  |
-| inputSize             | string                                                                    | 'large'   | Size of the input field. One of: `small`, `large`.                                                       |
-| label                 | string                                                                    |           | Label text for the input field.                                                                          |
-| labelVariant          | string                                                                    | 'large'   | Variant of the label.                                                                                    |
-| LeftIcon              | elementType                                                               |           | Icon to be displayed on the left side of the input field.                                                |
-| maxCount              | number                                                                    |           | Maximum number of characters allowed in the input field.                                                 |
-| maxRows               | number                                                                    | 1         | Maximum number of rows allowed in the input field.                                                       |
-| 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.                                                                    |
-| prefix                | string                                                                    |           | Prefix text to be displayed inside the input field.                                                      |
-| readOnly              | bool                                                                      | false     | Makes the input field read-only.                                                                         |
-| required              | bool                                                                      | false     | Whether the input field is required.                                                                     |
-| returnKeyType         | string                                                                    | 'done'    | Determines the return key type on the keyboard.                                                          |
-| RightIcon             | elementType                                                               |           | Icon to be displayed on the right side of the input field.                                               |
-| style                 | shape({ container: object, input: object, root: object })                 |           | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
-| suffix                | string                                                                    |           | Suffix text to be displayed inside the input field.                                                      |
-| tooltip               | string                                                                    |           | Tooltip text to be displayed.                                                                            |
-| type                  | string                                                                    | 'default' | Type of input (e.g., 'text', 'password', 'email').                                                       |
-| validations           | array                                                                     |           | Array of validation rules to be applied to the input field.                                              |
+| Name                  | Type                                                      | Default   | Description                                                                                              |
+| --------------------- | --------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
+| action                | object                                                    |           | Action button configuration object.                                                                      |
+| alwaysShowPlaceholder | bool                                                      | false     | Whether to always show the placeholder.                                                                  |
+| disabled              | bool                                                      | false     | Disables the input field.                                                                                |
+| error                 | string                                                    |           | Error message to be displayed.                                                                           |
+| helpText              | string                                                    |           | Help text to be displayed below the input field.                                                         |
+| id                    | oneOfType([number, string])                               |           | Unique identifier for the input field.                                                                   |
+| inputRef              | func                                                      |           | Reference to the input field.                                                                            |
+| inputSize             | string                                                    | 'large'   | Size of the input field. One of: `small`, `large`.                                                       |
+| title                 | string                                                    |           | Title text for the input field.                                                                          |
+| titleVariant          | string                                                    | 'large'   | Variant of the title.                                                                                    |
+| LeftIcon              | elementType                                               |           | Icon to be displayed on the left side of the input field.                                                |
+| maxCount              | number                                                    |           | Maximum number of characters allowed in the input field.                                                 |
+| maxRows               | number                                                    | 1         | Maximum number of rows allowed in 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.                                                                    |
+| prefix                | string                                                    |           | Prefix text to be displayed inside the input field.                                                      |
+| readOnly              | bool                                                      | false     | Makes the input field read-only.                                                                         |
+| required              | bool                                                      | false     | Whether the input field is required.                                                                     |
+| returnKeyType         | string                                                    | 'done'    | Determines the return key type on the keyboard.                                                          |
+| RightIcon             | elementType                                               |           | Icon to be displayed on the right side of the input field.                                               |
+| style                 | shape({ container: object, input: object, root: object }) |           | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
+| suffix                | string                                                    |           | Suffix text to be displayed inside the input field.                                                      |
+| tooltip               | string                                                    |           | Tooltip text to be displayed.                                                                            |
+| type                  | string                                                    | 'default' | Type of input (e.g., 'text', 'password', 'email').                                                       |
+| validations           | array                                                     |           | Array of validation rules to be applied to the input field.                                              |
+| value                 | string                                                    | ''        | The value of the input field.                                                                            |
 
 ### action
 
@@ -48,7 +49,7 @@ Configuration object for the action button.
 | colorTheme | string      | Color theme of the action button.                   |
 | text       | string      | Text to be displayed in the action button.          |
 
-### labelVariant
+### titleVariant
 
 It must be one of these:
 
@@ -148,7 +149,7 @@ If both `error` and `validations` are provided, `validations` will take preceden
 #### Example usage with `error`:
 
 ```jsx
-<UTTextInput label="Username" placeholder="Enter your username" error="This username is already taken" />
+<UTTextInput title="Username" placeholder="Enter your username" error="This username is already taken" />
 ```
 
 #### Example usage with validations:
@@ -189,14 +190,14 @@ const validations = [
   }
 ];
 
-<UTTextInput label="Email" placeholder="Enter your email" validations={validations} />;
+<UTTextInput title="Email" placeholder="Enter your email" validations={validations} />;
 ```
 
 ## Usage
 
 ```jsx
 <UTTextInput
-  label="Password"
+  title="Password"
   placeholder="Enter your password"
   type="password"
   required

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { bool, elementType, func, instanceOf, number, oneOfType, shape, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, elementType, func, instanceOf, number, object, oneOfType, shape, string } from 'prop-types';
 
 import UTBaseInputField from '../../../../../UTBaseInputField';
 import { COMPONENT_KEYS } from '../../../../../UTBaseInputField/constants';
@@ -12,13 +11,13 @@ const TextInputField = ({
   disabled,
   error,
   id,
-  input,
   inputRef,
   inputSize,
   LeftIcon,
   maxLength,
   maxRows,
   onBlur,
+  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -30,7 +29,8 @@ const TextInputField = ({
   style,
   suffix,
   tooltip,
-  type
+  type,
+  value
 }) => {
   const leftAdornments = [
     { name: COMPONENT_KEYS.ICON, props: { Icon: LeftIcon } },
@@ -48,15 +48,15 @@ const TextInputField = ({
     <UTBaseInputField
       alwaysShowPlaceholder={alwaysShowPlaceholder}
       blurOnSubmit={blurOnSubmit}
-      disabled={disabled}
+      disabled={disabled && !readOnly}
       error={error}
       id={id}
-      input={input}
       inputSize={inputSize}
       leftAdornments={leftAdornments}
       maxLength={maxLength}
       maxRows={maxRows}
       onBlur={onBlur}
+      onChange={onChange}
       onFocus={onFocus}
       onSubmitEditing={onSubmitEditing}
       placeholder={placeholder}
@@ -67,6 +67,7 @@ const TextInputField = ({
       showCharacterCount={showCharacterCount}
       style={style}
       type={type}
+      value={value}
     />
   );
 };
@@ -80,16 +81,13 @@ TextInputField.propTypes = {
   disabled: bool,
   error: string,
   id: oneOfType([number, string]),
-  input: shape({
-    value: string,
-    onChange: func
-  }),
   inputRef: oneOfType([func, instanceOf(Object)]),
   inputSize: string,
   LeftIcon: elementType,
   maxLength: number,
   maxRows: number,
   onBlur: func,
+  onChange: func,
   onFocus: func,
   onSubmitEditing: func,
   placeholder: string,
@@ -99,13 +97,14 @@ TextInputField.propTypes = {
   RightIcon: elementType,
   showCharacterCount: bool,
   style: shape({
-    container: ViewPropTypes.style,
-    input: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    container: object,
+    input: object,
+    root: object
   }),
   suffix: string,
   tooltip: string,
-  type: string
+  type: string,
+  value: string
 };
 
 export default TextInputField;

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

@@ -19,15 +19,15 @@ const UTTextInput = ({
   error,
   helpText,
   id,
-  input,
   inputRef,
   inputSize,
-  label,
-  labelVariant,
+  title,
+  titleVariant,
   LeftIcon,
   maxLength,
   maxRows,
   onBlur,
+  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -41,10 +41,11 @@ const UTTextInput = ({
   suffix,
   tooltip,
   type,
-  validations
+  validations,
+  value
 }) => {
-  const labelColorTheme = readOnly ? 'gray' : 'dark';
-  const labelComponentVariant = labelVariant === SIZES.SMALL ? 'small' : 'body';
+  const titleColorTheme = readOnly ? 'gray' : 'dark';
+  const titleComponentVariant = titleVariant === SIZES.SMALL ? 'small' : 'body';
 
   const validationData = useMemo(
     () => validations || (error && formatErrorToValidation(error)),
@@ -53,9 +54,9 @@ const UTTextInput = ({
 
   return (
     <View style={[styles.container, style.root]}>
-      {label && (
-        <UTFieldLabel colorTheme={labelColorTheme} required={required} variant={labelComponentVariant}>
-          {label}
+      {title && (
+        <UTFieldLabel colorTheme={titleColorTheme} required={required} variant={titleComponentVariant}>
+          {title}
         </UTFieldLabel>
       )}
       <TextInputField
@@ -65,13 +66,13 @@ const UTTextInput = ({
         disabled={disabled}
         error={error}
         id={id}
-        input={input}
         inputRef={inputRef}
         inputSize={inputSize}
         LeftIcon={LeftIcon}
         maxLength={maxLength}
         maxRows={maxRows}
         onBlur={onBlur}
+        onChange={onChange}
         onFocus={onFocus}
         onSubmitEditing={onSubmitEditing}
         placeholder={placeholder}
@@ -84,6 +85,7 @@ const UTTextInput = ({
         suffix={suffix}
         tooltip={tooltip}
         type={type}
+        value={value}
       />
       {helpText && (
         <UTLabel colorTheme="gray" variant="small">