@widergy/mobile-ui 1.18.1 → 1.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/CheckList/components/CheckBoxRenderer/index.js +8 -10
  3. package/lib/components/Label/propTypes.js +2 -5
  4. package/lib/components/UTAutocomplete/index.js +5 -11
  5. package/lib/components/UTBadge/index.js +2 -3
  6. package/lib/components/UTBaseInputField/README.md +31 -22
  7. package/lib/components/UTBaseInputField/components/ActionAdornment/index.js +6 -3
  8. package/lib/components/UTBaseInputField/constants.js +3 -1
  9. package/lib/components/UTBaseInputField/index.js +17 -6
  10. package/lib/components/UTBaseInputField/proptypes.js +10 -20
  11. package/lib/components/UTBaseInputField/theme.js +1 -2
  12. package/lib/components/UTButton/proptypes.js +4 -5
  13. package/lib/components/UTCBUInput/index.js +11 -12
  14. package/lib/components/UTCheckBox/README.md +14 -14
  15. package/lib/components/UTCheckBox/index.js +11 -6
  16. package/lib/components/UTCheckBox/proptypes.js +3 -4
  17. package/lib/components/UTCheckBox/theme.js +11 -4
  18. package/lib/components/UTCheckList/README.MD +22 -32
  19. package/lib/components/UTCheckList/index.js +6 -7
  20. package/lib/components/UTCheckList/proptypes.js +12 -24
  21. package/lib/components/UTFieldLabel/index.js +11 -13
  22. package/lib/components/UTIcon/index.js +2 -3
  23. package/lib/components/UTPasswordField/versions/V1/constants.js +4 -0
  24. package/lib/components/UTPasswordField/versions/V1/index.js +12 -13
  25. package/lib/components/UTPhoneInput/index.js +26 -27
  26. package/lib/components/UTProductItem/index.js +3 -3
  27. package/lib/components/UTSearchField/README.md +14 -13
  28. package/lib/components/UTSearchField/index.js +6 -4
  29. package/lib/components/UTSearchField/proptypes.js +5 -9
  30. package/lib/components/UTSelect/versions/V1/README.md +29 -35
  31. package/lib/components/UTSelect/versions/V1/index.js +73 -44
  32. package/lib/components/UTSelect/versions/V1/proptypes.js +17 -16
  33. package/lib/components/UTSelect/versions/V1/styles.js +3 -0
  34. package/lib/components/UTSelect/versions/V1/utils.js +21 -0
  35. package/lib/components/UTSelectableCard/index.js +5 -2
  36. package/lib/components/UTTextInput/versions/V1/README.md +35 -34
  37. package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js +13 -14
  38. package/lib/components/UTTextInput/versions/V1/index.js +12 -10
  39. package/lib/components/UTTextInput/versions/V1/proptypes.js +20 -19
  40. package/lib/components/UTValidation/index.js +3 -3
  41. package/lib/components/UTValidation/styles.js +3 -0
  42. package/lib/constants/inputs.js +1 -1
  43. package/package.json +1 -1
package/lib/components/UTSelect/versions/V1/README.md CHANGED
@@ -4,35 +4,27 @@
4
4
 
5
5
  `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.
6
6
 
7
- ## Props
8
-
9
- | Name | Type | Default | Description |
10
- | --------------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
11
- | action | shape | | Action object containing `Icon`, `onPress`, and `size` for the action button. |
12
- | alwaysShowPlaceholder | bool | true | Determines if the placeholder should always be shown. |
13
- | helpText | string | | Help text displayed below the input field. |
14
- | noMatchesText | string | | Text to display when no matches are found in the search. |
15
- | input | shape | | Input configuration object containing `value` and `onChange`. |
16
- | isMultiple | bool | false | Allows multiple selection if true. |
17
- | label | string | | Label for the select field. |
18
- | options | array | | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`. |
19
- | placeholder | string | | Placeholder text for the select field. |
20
- | prefix | string | | Text to display as a prefix inside the input field. |
21
- | required | bool | false | Indicates if the select field is required. |
22
- | searchPlaceholder | string | | Placeholder text for the search field. |
23
- | selectAllLabel | string | | Label for the "Select All" checkbox. |
24
- | showSelectAll | bool | false | Determines whether to show the "Select All" checkbox. |
25
- | style | shape | {} | Custom styles to apply to the select field. Can contain `root`, `noMatchesText`, `scrollview`. |
26
- | suffix | string | | Text to display as a suffix inside the input field. |
27
-
28
- ### Input Object
29
-
30
- The `input` prop is an object that should contain the following keys:
31
-
32
- | Name | Type | Description |
33
- | -------- | ----------------------- | -------------------------------------------- |
34
- | value | arrayOf(string, number) | Array of selected values. |
35
- | onChange | func | Function to call when the selection changes. |
7
+ | Name | Type | Default | Description |
8
+ | --------------------- | -------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
9
+ | action | shape | | Action object containing `Icon`, `onPress`, and `size` for the action button. |
10
+ | alwaysShowPlaceholder | bool | true | Determines if the placeholder should always be shown. |
11
+ | clearable | bool | false | Determines whether a button to clear the current selection should be shown. |
12
+ | helpText | string | | Help text displayed below the input field. |
13
+ | title | string | | Title for the select field. |
14
+ | multiple | bool | false | Allows multiple selection if true. |
15
+ | noMatchesText | string | | Text to display when no matches are found in the search. |
16
+ | onChange | func | | Function to call when the input field value changes. |
17
+ | options | array | | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`. |
18
+ | placeholder | string | | Placeholder text for the select field. |
19
+ | prefix | string | | Text to display as a prefix inside the input field. |
20
+ | required | bool | false | Indicates if the select field is required. |
21
+ | searchPlaceholder | string | | Placeholder text for the search field. |
22
+ | selectAllLabel | string | | Label for the "Select All" checkbox. |
23
+ | showSelectAll | bool | false | Determines whether to show the "Select All" checkbox. |
24
+ | style | shape | {} | Custom styles to apply to the select field. Applies styles to the root container of the select field. |
25
+ | suffix | string | | Text to display as a suffix inside the input field. |
26
+ | 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. |
27
+ | withAutoReset | bool | true | Determines whether the select should automatically reset when the selected value is no longer available in the options. |
36
28
 
37
29
  ### Option Object
38
30
 
@@ -43,6 +35,10 @@ The `options` prop is an array of objects, each representing an option:
43
35
  | label | string | Label to display for the option. |
44
36
  | value | string, number | Value of the option. |
45
37
 
38
+ ### `withAutoReset`
39
+
40
+ `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.
41
+
46
42
  ## Usage
47
43
 
48
44
  ```jsx
@@ -62,16 +58,14 @@ const UTSelectExample = () => {
62
58
  return (
63
59
  <View style={{ padding: 20 }}>
64
60
  <UTSelect
65
- label="Select Options"
61
+ title="Select Options"
62
+ noMatchesText="No matches found"
63
+ onChange={setSelectedOptions}
66
64
  options={options}
67
- input={{
68
- value: selectedOptions,
69
- onChange: setSelectedOptions
70
- }}
71
65
  placeholder="Select an option"
72
66
  searchPlaceholder="Search options"
73
67
  selectAllLabel="Select All"
74
- noMatchesText="No matches found"
68
+ value={selectedOptions}
75
69
  />
76
70
  <Text>Selected Options: {selectedOptions.join(', ')}</Text>
77
71
  </View>
package/lib/components/UTSelect/versions/V1/index.js CHANGED
@@ -1,27 +1,32 @@
1
- import React, { useState, useCallback, useRef } from 'react';
1
+ import React, { useState, useCallback, useEffect, useRef, useMemo, Fragment } from 'react';
2
2
  import { View, Pressable, ScrollView } from 'react-native';
3
3
  import isEmpty from 'lodash/isEmpty';
4
4
 
5
5
  import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
6
+ import { formatErrorToValidation } from '../../../UTValidation/utils';
6
7
  import UTBaseInputField from '../../../UTBaseInputField';
7
8
  import UTBottomSheet from '../../../UTBottomSheet';
8
9
  import UTCheckList from '../../../UTCheckList';
9
10
  import UTFieldLabel from '../../../UTFieldLabel';
10
11
  import UTLabel from '../../../UTLabel';
11
12
  import UTSearchField from '../../../UTSearchField';
13
+ import UTValidation from '../../../UTValidation';
12
14
 
13
15
  import { defaultProps, propTypes } from './proptypes';
14
16
  import styles from './styles';
17
+ import { shouldReset } from './utils';
15
18
 
16
19
  const UTSelect = ({
17
20
  action,
18
21
  alwaysShowPlaceholder,
22
+ clearable,
19
23
  closeButtonText,
24
+ disabled,
25
+ error,
20
26
  helpText,
21
- input,
22
- isMultiple,
23
- label,
27
+ multiple,
24
28
  noMatchesText,
29
+ onChange,
25
30
  options,
26
31
  placeholder,
27
32
  prefix,
@@ -30,19 +35,34 @@ const UTSelect = ({
30
35
  selectAllLabel,
31
36
  showSelectAll,
32
37
  style,
33
- suffix
38
+ suffix,
39
+ title,
40
+ value,
41
+ withAutoReset
34
42
  }) => {
35
43
  const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
36
44
  const [searchTerm, setSearchTerm] = useState('');
37
- const [selectedOptions, setSelectedOptions] = useState(input.value || []);
38
45
  const [sortedOptions, setSortedOptions] = useState(options);
39
46
  const inputFieldRef = useRef(null);
40
47
 
48
+ const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
49
+
41
50
  const sortOptions = useCallback(() => {
42
- const selectedOptionsList = options.filter(option => selectedOptions.includes(option.value));
43
- const unselectedOptionsList = options.filter(option => !selectedOptions.includes(option.value));
51
+ const selectedOptionsList = [];
52
+ const unselectedOptionsList = [];
53
+
54
+ options.forEach(option => {
55
+ const isSelected = multiple ? value?.includes(option.value) : option.value === value;
56
+ if (isSelected) selectedOptionsList.push(option);
57
+ else unselectedOptionsList.push(option);
58
+ });
59
+
44
60
  setSortedOptions([...selectedOptionsList, ...unselectedOptionsList]);
45
- }, [options, selectedOptions]);
61
+ }, [options, value, multiple]);
62
+
63
+ useEffect(() => {
64
+ if (withAutoReset && shouldReset(value, options, multiple)) onChange(null);
65
+ }, [multiple, onChange, options, value, withAutoReset]);
46
66
 
47
67
  const handleOpenBottomSheet = () => {
48
68
  sortOptions();
@@ -50,35 +70,37 @@ const UTSelect = ({
50
70
  };
51
71
 
52
72
  const handleCloseBottomSheet = () => {
53
- if (inputFieldRef.current) {
54
- inputFieldRef.current.truncate();
55
- }
73
+ inputFieldRef.current?.truncate();
56
74
  setBottomSheetVisible(false);
57
75
  };
58
76
 
59
- const clearSelectedOptions = () => {
60
- setSelectedOptions([]);
61
- input.onChange([]);
62
- };
77
+ const clearSelectedOptions = () => onChange(null);
63
78
 
64
79
  const handleSelect = useCallback(
65
80
  newValues => {
66
- setSelectedOptions(newValues);
67
- input.onChange(newValues);
68
- if (!isMultiple) handleCloseBottomSheet();
81
+ if (!clearable && isEmpty(newValues)) return;
82
+
83
+ const updatedValue = multiple ? newValues : newValues[0];
84
+ onChange(updatedValue);
85
+ if (!multiple) handleCloseBottomSheet();
69
86
  },
70
- [input, isMultiple]
87
+ [onChange, multiple, clearable]
71
88
  );
72
89
 
73
- const displayValue = selectedOptions
74
- .map(optionValue => {
90
+ const displayValue = useMemo(() => {
91
+ if (!value) return '';
92
+
93
+ const findLabel = optionValue => {
75
94
  const option = options.find(o => o.value === optionValue);
76
95
  return option ? option.label : '';
77
- })
78
- .join(', ');
96
+ };
79
97
 
80
- const filteredOptions = sortedOptions.filter(option =>
81
- option.label.toLowerCase().includes(searchTerm.toLowerCase())
98
+ return multiple ? value.map(findLabel).join(', ') : findLabel(value);
99
+ }, [value, options, multiple]);
100
+
101
+ const filteredOptions = useMemo(
102
+ () => sortedOptions.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase())),
103
+ [sortedOptions, searchTerm]
82
104
  );
83
105
 
84
106
  const clearAction = {
@@ -88,36 +110,42 @@ const UTSelect = ({
88
110
  };
89
111
 
90
112
  const leftAdornments = [
91
- ...(isMultiple && !isEmpty(selectedOptions)
92
- ? [{ name: COMPONENT_KEYS.BADGE, props: { text: selectedOptions.length, colorTheme: 'identity' } }]
113
+ ...(multiple && !isEmpty(value)
114
+ ? [{ name: COMPONENT_KEYS.BADGE, props: { text: value.length, colorTheme: 'identity' } }]
93
115
  : []),
94
116
  { name: COMPONENT_KEYS.PREFIX, props: { text: prefix } }
95
117
  ];
96
118
 
119
+ const showClearAction = displayValue && !disabled && clearable;
120
+
97
121
  const rightAdornments = [
98
122
  { name: COMPONENT_KEYS.SUFFIX, props: { text: suffix } },
99
- ...(displayValue ? [{ name: COMPONENT_KEYS.ACTION, props: { action: clearAction } }] : []),
123
+ ...(showClearAction
124
+ ? [{ key: 'clearAction', name: COMPONENT_KEYS.ACTION, props: { action: clearAction } }]
125
+ : []),
100
126
  { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconChevronDown' } },
101
127
  { name: COMPONENT_KEYS.ACTION, props: { action } }
102
128
  ];
103
129
 
104
130
  return (
105
- <View>
131
+ <Fragment>
106
132
  <View style={[styles.container, style]}>
107
- {label && (
133
+ {title && (
108
134
  <UTFieldLabel required={required} variant="body">
109
- {label}
135
+ {title}
110
136
  </UTFieldLabel>
111
137
  )}
112
- <Pressable onPress={handleOpenBottomSheet}>
138
+ <Pressable disabled={disabled} onPress={handleOpenBottomSheet}>
113
139
  <UTBaseInputField
114
- ref={inputFieldRef}
115
140
  alwaysShowPlaceholder={alwaysShowPlaceholder}
141
+ disabled={disabled}
116
142
  editable={false}
143
+ error={error}
117
144
  leftAdornments={leftAdornments}
118
145
  placeholder={placeholder}
146
+ ref={inputFieldRef}
119
147
  rightAdornments={rightAdornments}
120
- input={{ value: displayValue }}
148
+ value={displayValue}
121
149
  variant="button"
122
150
  />
123
151
  </Pressable>
@@ -126,9 +154,10 @@ const UTSelect = ({
126
154
  {helpText}
127
155
  </UTLabel>
128
156
  )}
157
+ {validationData && <UTValidation validationData={validationData} />}
129
158
  </View>
130
159
  <UTBottomSheet
131
- title={label}
160
+ title={title}
132
161
  description={helpText}
133
162
  visible={bottomSheetVisible}
134
163
  onClose={handleCloseBottomSheet}
@@ -136,11 +165,9 @@ const UTSelect = ({
136
165
  >
137
166
  <View style={styles.bottomSheetBodyContainer}>
138
167
  <UTSearchField
139
- input={{
140
- value: searchTerm,
141
- onChange: setSearchTerm
142
- }}
168
+ onChange={setSearchTerm}
143
169
  placeholder={searchPlaceholder}
170
+ value={searchTerm}
144
171
  variant="gray"
145
172
  />
146
173
  {isEmpty(filteredOptions) ? (
@@ -150,18 +177,20 @@ const UTSelect = ({
150
177
  ) : (
151
178
  <ScrollView keyboardShouldPersistTaps="handled">
152
179
  <UTCheckList
153
- showSelectAll={showSelectAll}
154
- input={{ value: selectedOptions, onChange: handleSelect }}
180
+ isSimple={!multiple}
181
+ onChange={handleSelect}
155
182
  options={filteredOptions}
156
- isSimple={!isMultiple}
157
183
  selectAllLabel={selectAllLabel}
184
+ showSelectAll={showSelectAll}
185
+ value={value ? (multiple ? value : [value]) : []}
158
186
  variant="button"
187
+ style={{ item: { title: styles.checklistTitles } }}
159
188
  />
160
189
  </ScrollView>
161
190
  )}
162
191
  </View>
163
192
  </UTBottomSheet>
164
- </View>
193
+ </Fragment>
165
194
  );
166
195
  };
167
196
 
package/lib/components/UTSelect/versions/V1/proptypes.js CHANGED
@@ -1,15 +1,14 @@
1
- import { arrayOf, bool, func, number, oneOfType, shape, string } from 'prop-types';
2
- import { ViewPropTypes } from 'deprecated-react-native-prop-types';
1
+ import { array, arrayOf, bool, func, number, oneOfType, shape, string, object } from 'prop-types';
3
2
 
4
3
  export const defaultProps = {
5
4
  alwaysShowPlaceholder: true,
6
- input: {
7
- value: [],
8
- onChange: () => {}
9
- },
5
+ clearable: true,
6
+ multiple: false,
7
+ onChange: () => {},
10
8
  showSelectAll: false,
11
- isMultiple: false,
12
- style: {}
9
+ style: {},
10
+ value: null,
11
+ withAutoReset: true
13
12
  };
14
13
 
15
14
  export const propTypes = {
@@ -19,15 +18,14 @@ export const propTypes = {
19
18
  size: string
20
19
  }),
21
20
  alwaysShowPlaceholder: bool,
21
+ clearable: bool,
22
22
  closeButtonText: string,
23
+ disabled: bool,
24
+ error: string,
23
25
  helpText: string,
24
- input: shape({
25
- value: arrayOf(oneOfType([string, number])),
26
- onChange: func
27
- }),
28
- isMultiple: bool,
29
- label: string,
26
+ multiple: bool,
30
27
  noMatchesText: string,
28
+ onChange: func,
31
29
  options: arrayOf(
32
30
  shape({
33
31
  label: string,
@@ -40,6 +38,9 @@ export const propTypes = {
40
38
  searchPlaceholder: string,
41
39
  selectAllLabel: string,
42
40
  showSelectAll: bool,
43
- style: ViewPropTypes.style,
44
- suffix: string
41
+ style: object,
42
+ suffix: string,
43
+ title: string,
44
+ value: oneOfType([string, array]),
45
+ withAutoReset: bool
45
46
  };
package/lib/components/UTSelect/versions/V1/styles.js CHANGED
@@ -5,6 +5,9 @@ const styles = StyleSheet.create({
5
5
  height: '100%',
6
6
  rowGap: 16
7
7
  },
8
+ checklistTitles: {
9
+ flex: 1
10
+ },
8
11
  container: {
9
12
  rowGap: 8
10
13
  },
package/lib/components/UTSelect/versions/V1/utils.js ADDED
@@ -0,0 +1,21 @@
1
+ import { isEmpty } from '@widergy/web-utils/lib/array';
2
+
3
+ const shouldResetMultipleSelect = (value, options) =>
4
+ !isEmpty(value) &&
5
+ (isEmpty(options) ||
6
+ value.some(
7
+ el =>
8
+ !options.some(opt => opt.value === el) &&
9
+ !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))
10
+ ));
11
+
12
+ const shouldResetSimpleSelect = (value, options) =>
13
+ value &&
14
+ (isEmpty(options) ||
15
+ (!options.some(el => el.value === value) &&
16
+ !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value))));
17
+
18
+ export const shouldReset = (value, options, multiple) => {
19
+ if (multiple) return shouldResetMultipleSelect(value, options);
20
+ return shouldResetSimpleSelect(value, options);
21
+ };
package/lib/components/UTSelectableCard/index.js CHANGED
@@ -35,6 +35,7 @@ const UTSelectableCard = ({
35
35
  style
36
36
  );
37
37
  const colorTheme = getColorTheme(selected, disabled);
38
+ const hasIcon = Icon?.url || Icon?.name || Icon?.Component;
38
39
 
39
40
  return (
40
41
  <Surface style={themedStyles.outerContainer}>
@@ -49,7 +50,7 @@ const UTSelectableCard = ({
49
50
  ]}
50
51
  >
51
52
  <View style={themedStyles.container}>
52
- {!isEmpty(Icon) &&
53
+ {hasIcon &&
53
54
  (Icon.url ? (
54
55
  <Image
55
56
  source={{ uri: Icon.url }}
@@ -57,7 +58,7 @@ const UTSelectableCard = ({
57
58
  height={Icon.size || ICON_SIZE}
58
59
  style={[themedStyles.image, themedStyles.icon]}
59
60
  />
60
- ) : (
61
+ ) : Icon.name ? (
61
62
  <UTIcon
62
63
  name={Icon.name}
63
64
  colorTheme={colorTheme}
@@ -65,6 +66,8 @@ const UTSelectableCard = ({
65
66
  size={Icon.size || ICON_SIZE}
66
67
  style={themedStyles.icon}
67
68
  />
69
+ ) : (
70
+ <Icon.Component style={themedStyles.icon} />
68
71
  ))}
69
72
  <View style={themedStyles.textContainer}>
70
73
  <View style={themedStyles.column}>
package/lib/components/UTTextInput/versions/V1/README.md CHANGED
@@ -6,36 +6,37 @@
6
6
 
7
7
  ## Props
8
8
 
9
- | Name | Type | Default | Description |
10
- | --------------------- | ------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
11
- | action | object | | Action button configuration object. |
12
- | alwaysShowPlaceholder | bool | false | Whether to always show the placeholder. |
13
- | disabled | bool | false | Disables the input field. |
14
- | error | string | | Error message to be displayed. |
15
- | helpText | string | | Help text to be displayed below the input field. |
16
- | id | oneOfType([number, string]) | | Unique identifier for the input field. |
17
- | inputRef | func | | Reference to the input field. |
18
- | input | shape({ value: string.isRequired, onChange: func.isRequired }).isRequired | | Input object containing the value and onChange handler. |
19
- | inputSize | string | 'large' | Size of the input field. One of: `small`, `large`. |
20
- | label | string | | Label text for the input field. |
21
- | labelVariant | string | 'large' | Variant of the label. |
22
- | LeftIcon | elementType | | Icon to be displayed on the left side of the input field. |
23
- | maxCount | number | | Maximum number of characters allowed in the input field. |
24
- | maxRows | number | 1 | Maximum number of rows allowed in the input field. |
25
- | onBlur | func | | Function to call when the input field loses focus. |
26
- | onFocus | func | | Function to call when the input field gains focus. |
27
- | onSubmitEditing | func | | Function to call when the input field is submitted. |
28
- | placeholder | string | | Placeholder text for the input field. |
29
- | prefix | string | | Prefix text to be displayed inside the input field. |
30
- | readOnly | bool | false | Makes the input field read-only. |
31
- | required | bool | false | Whether the input field is required. |
32
- | returnKeyType | string | 'done' | Determines the return key type on the keyboard. |
33
- | RightIcon | elementType | | Icon to be displayed on the right side of the input field. |
34
- | style | shape({ container: object, input: object, root: object }) | | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
35
- | suffix | string | | Suffix text to be displayed inside the input field. |
36
- | tooltip | string | | Tooltip text to be displayed. |
37
- | type | string | 'default' | Type of input (e.g., 'text', 'password', 'email'). |
38
- | validations | array | | Array of validation rules to be applied to the input field. |
9
+ | Name | Type | Default | Description |
10
+ | --------------------- | --------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
11
+ | action | object | | Action button configuration object. |
12
+ | alwaysShowPlaceholder | bool | false | Whether to always show the placeholder. |
13
+ | disabled | bool | false | Disables the input field. |
14
+ | error | string | | Error message to be displayed. |
15
+ | helpText | string | | Help text to be displayed below the input field. |
16
+ | id | oneOfType([number, string]) | | Unique identifier for the input field. |
17
+ | inputRef | func | | Reference to the input field. |
18
+ | inputSize | string | 'large' | Size of the input field. One of: `small`, `large`. |
19
+ | title | string | | Title text for the input field. |
20
+ | titleVariant | string | 'large' | Variant of the title. |
21
+ | LeftIcon | elementType | | Icon to be displayed on the left side of the input field. |
22
+ | maxCount | number | | Maximum number of characters allowed in the input field. |
23
+ | maxRows | number | 1 | Maximum number of rows allowed in the input field. |
24
+ | onBlur | func | | Function to call when the input field loses focus. |
25
+ | onChange | func | | Function to call when the input field value changes. |
26
+ | onFocus | func | | Function to call when the input field gains focus. |
27
+ | onSubmitEditing | func | | Function to call when the input field is submitted. |
28
+ | placeholder | string | | Placeholder text for the input field. |
29
+ | prefix | string | | Prefix text to be displayed inside the input field. |
30
+ | readOnly | bool | false | Makes the input field read-only. |
31
+ | required | bool | false | Whether the input field is required. |
32
+ | returnKeyType | string | 'done' | Determines the return key type on the keyboard. |
33
+ | RightIcon | elementType | | Icon to be displayed on the right side of the input field. |
34
+ | style | shape({ container: object, input: object, root: object }) | | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
35
+ | suffix | string | | Suffix text to be displayed inside the input field. |
36
+ | tooltip | string | | Tooltip text to be displayed. |
37
+ | type | string | 'default' | Type of input (e.g., 'text', 'password', 'email'). |
38
+ | validations | array | | Array of validation rules to be applied to the input field. |
39
+ | value | string | '' | The value of the input field. |
39
40
 
40
41
  ### action
41
42
 
@@ -48,7 +49,7 @@ Configuration object for the action button.
48
49
  | colorTheme | string | Color theme of the action button. |
49
50
  | text | string | Text to be displayed in the action button. |
50
51
 
51
- ### labelVariant
52
+ ### titleVariant
52
53
 
53
54
  It must be one of these:
54
55
 
@@ -148,7 +149,7 @@ If both `error` and `validations` are provided, `validations` will take preceden
148
149
  #### Example usage with `error`:
149
150
 
150
151
  ```jsx
151
- <UTTextInput label="Username" placeholder="Enter your username" error="This username is already taken" />
152
+ <UTTextInput title="Username" placeholder="Enter your username" error="This username is already taken" />
152
153
  ```
153
154
 
154
155
  #### Example usage with validations:
@@ -189,14 +190,14 @@ const validations = [
189
190
  }
190
191
  ];
191
192
 
192
- <UTTextInput label="Email" placeholder="Enter your email" validations={validations} />;
193
+ <UTTextInput title="Email" placeholder="Enter your email" validations={validations} />;
193
194
  ```
194
195
 
195
196
  ## Usage
196
197
 
197
198
  ```jsx
198
199
  <UTTextInput
199
- label="Password"
200
+ title="Password"
200
201
  placeholder="Enter your password"
201
202
  type="password"
202
203
  required