@widergy/mobile-ui 1.13.2 → 1.13.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.13.4](https://github.com/widergy/mobile-ui/compare/v1.13.3...v1.13.4) (2024-07-17)
+
+
+### Bug Fixes
+
+* add UTCheckBox and UTCheckList ([#304](https://github.com/widergy/mobile-ui/issues/304)) ([edf9c95](https://github.com/widergy/mobile-ui/commit/edf9c95122a765b41e3b8f1031f6c8a34b8e8085))
+
+## [1.13.3](https://github.com/widergy/mobile-ui/compare/v1.13.2...v1.13.3) (2024-07-17)
+
+
+### Bug Fixes
+
+* some fixes in icon ([#311](https://github.com/widergy/mobile-ui/issues/311)) ([9d57432](https://github.com/widergy/mobile-ui/commit/9d57432197c15b3200a6b1dafe982dc37c54cb5c))
+
 ## [1.13.2](https://github.com/widergy/mobile-ui/compare/v1.13.1...v1.13.2) (2024-07-15)
 
 

package/lib/components/Button/index.js

@@ -105,4 +105,8 @@ Button.displayName = 'Button';
 
 Button.propTypes = propTypes;
 
+/**
+ * @deprecated The Button component is deprecated and will be removed in a future release.
+ * Please use the UTButton component instead.
+ */
 export default withTheme(Button);

package/lib/components/Icon/{assets → components/CustomIcon/assets}/eye-off.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="eye-off">
-<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.91078 1.91058C2.23622 1.58514 2.76386 1.58514 3.0893 1.91058L14.9861 13.8074C15.0321 13.8444 15.0748 13.8867 15.113 13.9343L18.0893 16.9106C18.4147 17.236 18.4147 17.7637 18.0893 18.0891C17.7639 18.4145 17.2362 18.4145 16.9108 18.0891L14.3384 15.5167C13.0039 16.2804 11.5544 16.6665 10 16.6665C6.2667 16.6665 3.25604 14.4606 0.943181 10.4133C0.796755 10.1571 0.796773 9.8425 0.943227 9.58629C1.92481 7.86906 3.03083 6.48078 4.27262 5.45092L1.91078 3.08909C1.58535 2.76366 1.58535 2.23602 1.91078 1.91058ZM5.45722 6.63553C4.45474 7.43811 3.5102 8.55088 2.63331 9.99993C4.71491 13.442 7.17738 14.9998 10 14.9998C11.1045 14.9998 12.1366 14.763 13.1068 14.2851L11.0783 12.2566C10.744 12.4166 10.3751 12.502 9.99748 12.5018C9.33435 12.5016 8.69848 12.2379 8.22974 11.7689C7.761 11.2998 7.4978 10.6637 7.49803 10.0006C7.49816 9.62354 7.58346 9.25529 7.74327 8.92157L5.45722 6.63553ZM9.3635 10.5418C9.37784 10.5587 9.39291 10.575 9.40867 10.5908C9.42457 10.6067 9.44104 10.6219 9.45805 10.6364L9.3635 10.5418ZM9.99709 4.99983C9.33243 4.99748 8.67077 5.08906 8.03173 5.27186C7.58925 5.39845 7.12792 5.14235 7.00134 4.69986C6.87476 4.25738 7.13086 3.79605 7.57335 3.66947C8.36287 3.44362 9.18033 3.3304 10.0015 3.33317C13.7342 3.33375 16.7443 5.53961 19.0569 9.58637C19.2033 9.84261 19.2033 10.1572 19.0568 10.4134C18.3832 11.5918 17.6523 12.6144 16.8595 13.4721C16.5471 13.8101 16.0199 13.8309 15.6819 13.5185C15.3439 13.2061 15.3232 12.6789 15.6356 12.3409C16.2384 11.6886 16.8161 10.9099 17.3668 9.99975C15.2852 6.55771 12.8227 4.99984 10 4.99984L9.99709 4.99983Z" fill="#677489"/>
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.91078 1.91058C2.23622 1.58514 2.76386 1.58514 3.0893 1.91058L14.9861 13.8074C15.0321 13.8444 15.0748 13.8867 15.113 13.9343L18.0893 16.9106C18.4147 17.236 18.4147 17.7637 18.0893 18.0891C17.7639 18.4145 17.2362 18.4145 16.9108 18.0891L14.3384 15.5167C13.0039 16.2804 11.5544 16.6665 10 16.6665C6.2667 16.6665 3.25604 14.4606 0.943181 10.4133C0.796755 10.1571 0.796773 9.8425 0.943227 9.58629C1.92481 7.86906 3.03083 6.48078 4.27262 5.45092L1.91078 3.08909C1.58535 2.76366 1.58535 2.23602 1.91078 1.91058ZM5.45722 6.63553C4.45474 7.43811 3.5102 8.55088 2.63331 9.99993C4.71491 13.442 7.17738 14.9998 10 14.9998C11.1045 14.9998 12.1366 14.763 13.1068 14.2851L11.0783 12.2566C10.744 12.4166 10.3751 12.502 9.99748 12.5018C9.33435 12.5016 8.69848 12.2379 8.22974 11.7689C7.761 11.2998 7.4978 10.6637 7.49803 10.0006C7.49816 9.62354 7.58346 9.25529 7.74327 8.92157L5.45722 6.63553ZM9.3635 10.5418C9.37784 10.5587 9.39291 10.575 9.40867 10.5908C9.42457 10.6067 9.44104 10.6219 9.45805 10.6364L9.3635 10.5418ZM9.99709 4.99983C9.33243 4.99748 8.67077 5.08906 8.03173 5.27186C7.58925 5.39845 7.12792 5.14235 7.00134 4.69986C6.87476 4.25738 7.13086 3.79605 7.57335 3.66947C8.36287 3.44362 9.18033 3.3304 10.0015 3.33317C13.7342 3.33375 16.7443 5.53961 19.0569 9.58637C19.2033 9.84261 19.2033 10.1572 19.0568 10.4134C18.3832 11.5918 17.6523 12.6144 16.8595 13.4721C16.5471 13.8101 16.0199 13.8309 15.6819 13.5185C15.3439 13.2061 15.3232 12.6789 15.6356 12.3409C16.2384 11.6886 16.8161 10.9099 17.3668 9.99975C15.2852 6.55771 12.8227 4.99984 10 4.99984L9.99709 4.99983Z" />
 </g>
 </svg>

package/lib/components/Icon/{assets → components/CustomIcon/assets}/eye.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15986 12C5.65779 16.1305 8.61278 18 12 18C15.3872 18 18.3422 16.1305 20.8401 12C18.3422 7.86948 15.3872 6 12 6C8.61278 6 5.65779 7.86948 3.15986 12ZM1.13177 11.5038C3.9072 6.64709 7.51999 4 12 4C16.48 4 20.0928 6.64709 22.8682 11.5038C23.0439 11.8113 23.0439 12.1887 22.8682 12.4962C20.0928 17.3529 16.48 20 12 20C7.51999 20 3.9072 17.3529 1.13177 12.4962C0.956077 12.1887 0.956077 11.8113 1.13177 11.5038ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z" fill="#677489"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15986 12C5.65779 16.1305 8.61278 18 12 18C15.3872 18 18.3422 16.1305 20.8401 12C18.3422 7.86948 15.3872 6 12 6C8.61278 6 5.65779 7.86948 3.15986 12ZM1.13177 11.5038C3.9072 6.64709 7.51999 4 12 4C16.48 4 20.0928 6.64709 22.8682 11.5038C23.0439 11.8113 23.0439 12.1887 22.8682 12.4962C20.0928 17.3529 16.48 20 12 20C7.51999 20 3.9072 17.3529 1.13177 12.4962C0.956077 12.1887 0.956077 11.8113 1.13177 11.5038ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z" />
 </svg>

package/lib/components/Icon/components/CustomIcon/constants.js

@@ -0,0 +1,9 @@
+import VisibilityOff from './assets/eye-off.svg';
+import Visibility from './assets/eye.svg';
+
+export const DEFAULT_ICON_SIZE = 20;
+
+export const CUSTOM_ICONS = {
+  visibility: Visibility,
+  'visibility-off': VisibilityOff
+};

package/lib/components/Icon/components/CustomIcon/index.js

@@ -0,0 +1,25 @@
+import { string, number } from 'prop-types';
+import React from 'react';
+
+import { CUSTOM_ICONS, DEFAULT_ICON_SIZE } from './constants';
+
+const CustomIcon = ({ height, name, size, width, fill = '#677489' }) => {
+  const CustomIconComponent = CUSTOM_ICONS[name];
+  return (
+    <CustomIconComponent
+      height={size || height || DEFAULT_ICON_SIZE}
+      width={size || width || DEFAULT_ICON_SIZE}
+      fill={fill}
+    />
+  );
+};
+
+CustomIcon.propTypes = {
+  height: number,
+  name: string,
+  size: number,
+  width: number,
+  fill: string
+};
+
+export default CustomIcon;

package/lib/components/Icon/constants.js

@@ -11,8 +11,7 @@ import SimpleLineIcon from 'react-native-vector-icons/SimpleLineIcons';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import AntIcon from 'react-native-vector-icons/AntDesign';
 
-import VisibilityOff from './assets/eye-off.svg';
-import Visibility from './assets/eye.svg';
+import CustomIcon from './components/CustomIcon';
 
 const DEFAULT_ICON_COMPONENT = MaterialIcon;
 export const DEFAULT_ICON_TYPE = 'material';
@@ -29,9 +28,8 @@ const ICON_TYPES = {
   'material-community': MaterialCommunityIcon,
   octicon: OcticonIcon,
   'simple-line-icon': SimpleLineIcon,
-  visibility: Visibility,
-  'visibility-off': VisibilityOff,
-  zocial: ZocialIcon
+  zocial: ZocialIcon,
+  custom: CustomIcon
 };
 
 export const getIconComponent = type => ICON_TYPES[type] || DEFAULT_ICON_COMPONENT;

package/lib/components/Icon/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import propTypes from './propTypes';
 import { getIconComponent, DEFAULT_ICON_TYPE, DEFAULT_ICON_SIZE } from './constants';
 
-const Icon = ({ color, height, name, size, style, type, width }) => {
+const Icon = ({ color, height, name, size, style, type, width, fill }) => {
   const IconComponent = getIconComponent(type);
   return (
     <IconComponent
@@ -14,6 +14,7 @@ const Icon = ({ color, height, name, size, style, type, width }) => {
       style={style}
       type={type}
       width={size || width || DEFAULT_ICON_SIZE}
+      fill={fill}
     />
   );
 };
@@ -24,4 +25,8 @@ Icon.defaultProps = {
   type: DEFAULT_ICON_TYPE
 };
 
+/**
+ * @deprecated The Icon component is deprecated and will be removed in a future release.
+ * Please use the UTIcon component instead.
+ */
 export default Icon;

package/lib/components/IconButton/index.js

@@ -39,4 +39,8 @@ IconButton.defaultProps = {
   size: DEFAULT_ICON_SIZE
 };
 
+/**
+ * @deprecated The IconButton component is deprecated and will be removed in a future release.
+ * Please use the UTButton component instead.
+ */
 export default IconButton;

package/lib/components/Label/index.js

@@ -60,4 +60,8 @@ Label.defaultProps = {
   allowFontScaling: false
 };
 
+/**
+ * @deprecated The Label component is deprecated and will be removed in a future release.
+ * Please use the UTLabel component instead.
+ */
 export default withTheme(Label);

package/lib/components/UTCheckBox/README.md

@@ -0,0 +1,66 @@
+# UTCheckBox
+
+## Description
+
+`UTCheckBox` is a checkbox component used within the `UTCheckList` component. It supports various states such as checked, indeterminate, and disabled, and can be customized with labels and styles.
+
+## 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. |
+| label         | string       |         | Label to display next to the checkbox.                  |
+| onPress       | func         |         | Function to call when the checkbox is pressed.          |
+| reversed      | bool         | false   | If true, reverses the order of label and checkbox.      |
+| style         | shape        | {}      | Custom styles to apply to the checkbox. Can contain `root`, `icon`, `touchable`. |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return <UTCheckBox checked={checked} label="Check me" onPress={() => setChecked(!checked)} />;
+};
+
+export default Example;
+
+
+### Custom Styles Example
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const customStyles = {
+  root: { padding: 10 },
+  icon: { backgroundColor: 'lightgrey' },
+  touchable: {
+    root: { margin: 5 },
+    pressed: { opacity: 0.5 }
+  }
+};
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <UTCheckBox
+      checked={checked}
+      label="Check me"
+      onPress={() => setChecked(!checked)}
+      style={customStyles}
+    />
+  );
+};
+
+export default Example;
+
+```

package/lib/components/UTCheckBox/constants.js

@@ -0,0 +1,2 @@
+export const CHECKED_ICON = 'IconCheck';
+export const INDETERMINATE_ICON = 'IconMinus';

package/lib/components/UTCheckBox/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+
+import { useTheme } from '../../theming';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+
+import { CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { retrieveStyle } from './theme';
+import propTypes from './proptypes';
+
+const UTCheckBox = ({ checked, disabled, indeterminate, label, onPress, reversed, style }) => {
+  const theme = useTheme();
+  const { containerStyles, iconContainerStyles, touchableStyles } = retrieveStyle({
+    checked,
+    disabled,
+    indeterminate,
+    reversed,
+    style,
+    theme
+  });
+
+  const combinedTouchableStyles = ({ pressed }) => [touchableStyles.root, pressed && touchableStyles.pressed];
+
+  const iconName = indeterminate ? INDETERMINATE_ICON : checked ? CHECKED_ICON : '';
+
+  return (
+    <View style={containerStyles}>
+      <Pressable disabled={disabled} onPress={onPress} style={combinedTouchableStyles}>
+        <View style={iconContainerStyles}>
+          <UTIcon color="light" name={iconName} size={16} />
+        </View>
+      </Pressable>
+      <UTLabel>{label}</UTLabel>
+    </View>
+  );
+};
+
+UTCheckBox.defaultProps = {
+  style: {}
+};
+
+UTCheckBox.propTypes = propTypes;
+
+export default UTCheckBox;

package/lib/components/UTCheckBox/proptypes.js

@@ -0,0 +1,21 @@
+import { bool, func, shape, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+export const styleProptypes = shape({
+  root: ViewPropTypes.style,
+  icon: ViewPropTypes.style,
+  touchable: shape({
+    root: ViewPropTypes.style,
+    pressed: ViewPropTypes.style
+  })
+});
+
+export default {
+  checked: bool,
+  disabled: bool,
+  indeterminate: bool,
+  label: string,
+  onPress: func,
+  reversed: bool,
+  style: styleProptypes
+};

package/lib/components/UTCheckBox/theme.js

@@ -0,0 +1,72 @@
+const baseCheckBoxTheme = theme => ({
+  container: {
+    alignItems: 'center',
+    columnGap: 16,
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
+  },
+  iconContainer: {
+    borderColor: theme.Palette.gray['04'],
+    borderRadius: 5,
+    borderWidth: 2,
+    height: 20,
+    width: 20
+  },
+  touchable: {
+    root: {
+      borderRadius: 25,
+      padding: 6
+    },
+    pressed: {
+      backgroundColor: theme.Palette.accent['02'],
+      borderColor: theme.Palette.accent['03'],
+      borderWidth: 1,
+      padding: 5
+    }
+  }
+});
+
+const conditionalContainerStyle = (reversed, disabled) => ({
+  ...(reversed && {
+    flexDirection: 'row-reverse'
+  }),
+  ...(disabled && {
+    opacity: 0.5
+  })
+});
+
+const conditionalIconContainerStyle = (checked, indeterminate, theme) => ({
+  ...((checked || indeterminate) && {
+    backgroundColor: theme.Palette.accent['04'],
+    borderColor: theme.Palette.accent['04']
+  })
+});
+
+export const retrieveStyle = ({ checked, disabled, indeterminate, reversed, style = {}, theme }) => {
+  const baseTheme = baseCheckBoxTheme(theme);
+
+  const containerStyles = {
+    ...baseTheme.container,
+    ...conditionalContainerStyle(reversed, disabled),
+    ...style.root
+  };
+
+  const iconContainerStyles = {
+    ...baseTheme.iconContainer,
+    ...conditionalIconContainerStyle(checked, indeterminate, theme),
+    ...style.icon
+  };
+
+  const touchableStyles = {
+    root: {
+      ...baseTheme.touchable.root,
+      ...style.touchable?.root
+    },
+    pressed: {
+      ...baseTheme.touchable.pressed,
+      ...style.touchable?.pressed
+    }
+  };
+
+  return { containerStyles, iconContainerStyles, touchableStyles };
+};

package/lib/components/UTCheckList/README.MD

@@ -0,0 +1,101 @@
+# UTCheckList
+
+## Description
+
+`UTCheckList` is a customizable component that renders a list of checkboxes, allowing users to select multiple options from a provided list. It supports features like select all, indeterminate state, error display, and dynamic options. The "Select All" checkbox only affects options that are not disabled.
+
+## Props
+
+| Name           | Type   | Default | Description                                                                                                            |
+| -------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| error          | string |         | Error message to display.                                                                                              |
+| input          | shape  |         | Input configuration object containing `value` and `onChange`.                                                          |
+| label          | string |         | Label for the checklist.                                                                                               |
+| options        | array  |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
+| required       | bool   | false   | Indicates if the checklist is required.                                                                                |
+| reversed       | bool   | false   | If true, reverses the order of label and checkbox.                                                                     |
+| selectAllLabel | string |         | Label for the "Select All" checkbox.                                                                                   |
+| style          | shape  | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
+
+### Input Object
+
+The `input` prop is an object that should contain the following keys:
+
+| Name     | Type            | Description                                  |
+| -------- | --------------- | -------------------------------------------- |
+| value    | arrayOf(string) | Array of selected values.                    |
+| onChange | func            | Function to call when the selection changes. |
+
+### Option Object
+
+The `options` prop is an array of objects, each representing an option:
+
+| Name     | Type   | Description                          |
+| -------- | ------ | ------------------------------------ |
+| checked  | bool   | Indicates if the option is checked.  |
+| disabled | bool   | Indicates if the option is disabled. |
+| label    | string | Label to display for the option.     |
+| value    | string | Value of the option.                 |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3', disabled: true, checked: true }
+];
+
+const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      label="Select Options"
+      options={options}
+      input={{
+        value: selectedOptions,
+        onChange: setSelectedOptions
+      }}
+      selectAllLabel="Select All"
+      required
+      error="Please select at least one option"
+    />
+  );
+};
+
+export default Example;
+```
+
+### Custom Styles Example
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const customStyles = {
+  root: { padding: 10 },
+  iconContainer: { backgroundColor: 'lightgrey' },
+  label: { color: 'blue' }
+};
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <UTCheckBox
+      checked={checked}
+      label="Check me"
+      onPress={() => setChecked(!checked)}
+      style={customStyles}
+    />
+  );
+};
+
+export default Example;
+```

package/lib/components/UTCheckList/index.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useCallback, useMemo, Fragment } from 'react';
+import { arrayOf, bool, func, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { isString } from 'lodash';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { styleProptypes as checboxStyleProptypes } from '../UTCheckBox/proptypes';
+import UTCheckBox from '../UTCheckBox';
+import UTLabel from '../UTLabel';
+import UTRequiredLabel from '../UTRequiredLabel';
+
+import { keyExtractor, isChecked } from './utils';
+import styles from './styles';
+
+const UTCheckList = ({
+  error,
+  input,
+  label,
+  options,
+  required,
+  reversed,
+  selectAllLabel,
+  showSelectAll,
+  style
+}) => {
+  const convertIfIsString = value =>
+    isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;
+
+  useEffect(() => {
+    const convertedValue = convertIfIsString(input.value);
+    if (JSON.stringify(convertedValue) !== JSON.stringify(input.value)) {
+      input.onChange(convertedValue);
+    }
+  }, [input.value, input]);
+
+  const enabledOptions = useMemo(() => options.filter(option => !option.disabled), [options]);
+
+  const areAllSelected = useMemo(
+    () => enabledOptions.every(option => input.value?.includes(option.value)),
+    [enabledOptions, input.value]
+  );
+
+  const isIndeterminate = useMemo(
+    () => enabledOptions.some(option => input.value?.includes(option.value)) && !areAllSelected,
+    [enabledOptions, input.value, areAllSelected]
+  );
+
+  const handleChange = useCallback(
+    receivedValue => () => {
+      const { onChange, value } = input;
+      const newValues = !value?.find?.(elem => elem === receivedValue)
+        ? [...(value || []), receivedValue]
+        : value?.filter(elem => elem !== receivedValue);
+      if (onChange) onChange(isEmpty(newValues) ? [] : newValues);
+    },
+    [input]
+  );
+
+  const handleCheckAll = () => {
+    if (!areAllSelected && options) {
+      input.onChange(enabledOptions.map(item => item.value));
+    } else {
+      input.onChange([]);
+    }
+  };
+
+  return (
+    <View style={[styles.container, style.root]}>
+      <View style={[styles.headerContainer, style.header]}>
+        {label && <UTRequiredLabel required={required}>{label}</UTRequiredLabel>}
+        {error && (
+          <UTLabel colorTheme="error" variant="small">
+            {error}
+          </UTLabel>
+        )}
+      </View>
+      <View
+        style={[
+          styles.checkboxesContainer,
+          reversed && styles.reversedCheckBoxesContainer,
+          style.checkboxesContainer
+        ]}
+      >
+        {showSelectAll && (
+          <UTCheckBox
+            checked={areAllSelected}
+            indeterminate={isIndeterminate}
+            label={selectAllLabel}
+            onPress={handleCheckAll}
+            reversed={reversed}
+            style={style.selectAll}
+          />
+        )}
+        {!!options?.length &&
+          options.map((item, index) => {
+            const { label: itemLabel, disabled, value } = item;
+
+            return (
+              <Fragment key={keyExtractor(item, index)}>
+                <UTCheckBox
+                  checked={isChecked(item, input.value)}
+                  disabled={disabled}
+                  label={itemLabel}
+                  onPress={handleChange(value)}
+                  reversed={reversed}
+                  style={style.item}
+                />
+              </Fragment>
+            );
+          })}
+      </View>
+    </View>
+  );
+};
+
+UTCheckList.defaultProps = {
+  showSelectAll: true,
+  style: {}
+};
+
+UTCheckList.propTypes = {
+  error: string,
+  label: string,
+  input: shape({
+    value: arrayOf(string),
+    onChange: func
+  }),
+  options: arrayOf(
+    shape({
+      checked: bool,
+      disabled: bool,
+      label: string,
+      value: string
+    })
+  ),
+  required: bool,
+  reversed: bool,
+  selectAllLabel: string,
+  showSelectAll: bool,
+  style: shape({
+    checkboxesContainer: ViewPropTypes.style,
+    header: ViewPropTypes.style,
+    item: checboxStyleProptypes,
+    root: ViewPropTypes.style,
+    selectAll: ViewPropTypes.style
+  })
+};
+
+export default UTCheckList;

package/lib/components/UTCheckList/styles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  checkboxesContainer: {
+    rowGap: 16
+  },
+  container: {
+    rowGap: 16,
+    flexGrow: 1
+  },
+  headerContainer: {
+    rowGap: 8
+  },
+  itemSeparator: {
+    height: 16
+  },
+  label: {
+    flexDirection: 'row'
+  },
+  reversedCheckBoxesContainer: {
+    alignItems: 'flex-end'
+  }
+});

package/lib/components/UTCheckList/utils.js

@@ -0,0 +1,4 @@
+export const keyExtractor = (_, index) => `CB-${index}`;
+
+export const isChecked = (item, inputValue) =>
+  !!inputValue?.find(elem => elem === item.value) || (item.disabled && item.checked);

package/lib/components/UTLoading/components/Spinner/styles.js

@@ -4,5 +4,8 @@ export default StyleSheet.create({
   spinner: {
     alignSelf: 'center',
     justifyContent: 'center'
+  },
+  displayNone: {
+    display: 'none'
   }
 });

package/lib/components/UTRequiredLabel/constants.js

@@ -0,0 +1 @@
+export const REQUIRED_LABEL = ' *';

package/lib/components/UTRequiredLabel/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTLabel from '../UTLabel';
+
+import { REQUIRED_LABEL } from './constants';
+import styles from './styles';
+
+const UTRequiredLabel = ({ children, colorTheme, required, variant }) => {
+  return (
+    <View style={styles.label}>
+      <UTLabel colorTheme={colorTheme} variant={variant}>
+        {children}
+      </UTLabel>
+      {required && (
+        <UTLabel colorTheme="error" shade="04" variant={variant}>
+          {REQUIRED_LABEL}
+        </UTLabel>
+      )}
+    </View>
+  );
+};
+
+UTRequiredLabel.propTypes = {
+  colorTheme: string,
+  required: bool,
+  variant: string
+};
+
+export default UTRequiredLabel;

package/lib/components/UTRequiredLabel/styles.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  label: {
+    flexDirection: 'row'
+  }
+});

package/lib/components/UTTextInput/versions/V0/components/BaseInput/index.js

@@ -1,15 +1,23 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useMemo,
+  Fragment
+} from 'react';
+import _ from 'lodash';
 import { bool, elementType, func, oneOf, shape, string } from 'prop-types';
-import React, { useState, forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { TextInput } from 'react-native';
-import _ from 'lodash';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { withTheme } from '../../../../../../theming';
 import Icon from '../../../../../Icon';
 import Touchable from '../../../../../Touchable';
 
 import { DEBOUNCE_DELAY, DEBOUNCE_CONFIG, VISIBILITY, VISIBILITY_OFF } from './constants';
-import styles from './styles';
+import styles, { ICON_SIZE } from './styles';
 
 const BaseInput = forwardRef(
   (
@@ -62,13 +70,15 @@ const BaseInput = forwardRef(
 
     const hiddenInputProps = hiddenInput
       ? {
-          type: showInput ? VISIBILITY : VISIBILITY_OFF,
+          name: showInput ? VISIBILITY : VISIBILITY_OFF,
+          size: ICON_SIZE,
+          color: theme.UTTextInput?.passwordEyeColor || theme.colors.primary,
           ...(RightIcon || {})
         }
       : {};
 
     return (
-      <>
+      <Fragment>
         <TextInput
           autoCorrect={false}
           ref={textInputRef}
@@ -85,8 +95,9 @@ const BaseInput = forwardRef(
             select && { color: theme.fonts?.fontColor },
             select && disabled && { color: theme.fonts?.fontDisabledColor }
           ]}
+          id={props?.id ? `${props.id}` : undefined}
         />
-        {RightIcon && (
+        {(RightIcon || hiddenInput) && (
           <Touchable
             borderless
             onPress={hiddenInput ? toggleShowInput : onRightIconPress}
@@ -105,7 +116,7 @@ const BaseInput = forwardRef(
             )}
           </Touchable>
         )}
-      </>
+      </Fragment>
     );
   }
 );
@@ -118,6 +129,7 @@ BaseInput.propTypes = {
   onChange: func.isRequired,
   disabled: bool,
   value: string,
+  id: string,
   RightIcon: oneOf([shape({ name: string, type: string, color: string }), elementType]),
   hiddenInput: bool,
   onRightIconPress: func,

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

@@ -28,6 +28,7 @@ const TextInputField = forwardRef(
       alwaysShowPlaceholder,
       disabled,
       error,
+      id,
       inputSize,
       LeftIcon,
       maxCount,
@@ -145,6 +146,7 @@ const TextInputField = forwardRef(
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
             editable={!disabled && !readOnly}
+            id={id ? `${id}` : undefined}
             keyboardType={keyboardType}
             maxLength={maxCount}
             multiline={multiline}
@@ -206,6 +208,7 @@ TextInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   disabled: bool,
   error: string,
+  id: string,
   inputSize: string,
   LeftIcon: elementType,
   maxCount: number,

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

@@ -3,6 +3,4 @@ export const DEFAULT_PROPS = {
   style: {}
 };
 
-export const REQUIRED_LABEL = ' *';
-
 export const SMALL = 's';

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

@@ -2,9 +2,10 @@ import React from 'react';
 import { View } from 'react-native';
 
 import UTLabel from '../../../UTLabel';
+import UTRequiredLabel from '../../../UTRequiredLabel';
 import UTValidation from '../../../UTValidation';
 
-import { DEFAULT_PROPS, REQUIRED_LABEL, SMALL } from './constants';
+import { DEFAULT_PROPS, SMALL } from './constants';
 import { formatErrorToValidation } from './utils';
 import propTypes from './proptypes';
 import styles from './styles';
@@ -47,16 +48,9 @@ const UTTextInput = ({
   return (
     <View style={[styles.container, style.root]}>
       {label && (
-        <View style={styles.label}>
-          <UTLabel colorTheme={labelColorTheme} variant={labelComponentVariant}>
-            {label}
-          </UTLabel>
-          {required && (
-            <UTLabel colorTheme="error" shade="04" variant={labelComponentVariant}>
-              {REQUIRED_LABEL}
-            </UTLabel>
-          )}
-        </View>
+        <UTRequiredLabel colorTheme={labelColorTheme} required={required} variant={labelComponentVariant}>
+          {label}
+        </UTRequiredLabel>
       )}
       <TextInputField
         action={action}

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

@@ -3,8 +3,5 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   container: {
     rowGap: 8
-  },
-  label: {
-    flexDirection: 'row'
   }
 });

package/lib/index.js

@@ -27,6 +27,8 @@ export { default as ImageLabel } from './components/ImageLabel';
 export { default as CheckList } from './components/CheckList';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTPasswordField } from './components/UTPasswordField';
+export { default as UTCheckList } from './components/UTCheckList';
+export { default as UTCheckBox } from './components/UTCheckBox';
 
 // Icons
 export { default as Icon } from './components/Icon';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [