@tecsinapse/react-native-kit 1.17.6 → 1.17.9

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.17.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.8...@tecsinapse/react-native-kit@1.17.9) (2022-07-11)
+
+
+### Bug Fixes
+
+* ternary verification in model text title ([813b68c](https://github.com/tecsinapse/design-system/commit/813b68c186b9b7e5c1793f90b171444f23007993))
+
+
+
+
+
+## [1.17.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.7...@tecsinapse/react-native-kit@1.17.8) (2022-07-06)
+
+
+### Bug Fixes
+
+* ternary verification in model text title ([40c0126](https://github.com/tecsinapse/design-system/commit/40c01260684421cde54bffc70ca1663ac4856e65))
+
+
+
+
+
+## [1.17.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.6...@tecsinapse/react-native-kit@1.17.7) (2022-07-06)
+
+
+### Bug Fixes
+
+* select modal text overflow and prettier files ([11dff1e](https://github.com/tecsinapse/design-system/commit/11dff1ecdc117f3e08191dd1c488f6e8ed7459c6))
+
+
+
+
+
 ## [1.17.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.5...@tecsinapse/react-native-kit@1.17.6) (2022-06-24)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/Input/Input.js

@@ -54,10 +54,14 @@ const Input = _react.default.forwardRef(({
     handleBlur,
     handleFocus
   } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
+  const internalStyle = {
+    minHeight: (0, _reactCore.RFValue)(50),
+    ...{
+      inputContainerStyle
+    }
+  };
   const onlyLabel = label && !placeholder;
-  return _react.default.createElement(_reactNative.View, {
-    style: style
-  }, _react.default.createElement(_styled.StyledInputContainer, {
+  return _react.default.createElement(_reactNative.View, null, _react.default.createElement(_reactCore.InputContainer, {
     label: value ? label : undefined,
     labelColor: labelColor,
     labelColorVariant: labelColorVariant,
@@ -70,7 +74,7 @@ const Input = _react.default.forwardRef(({
     rightComponent: rightComponent,
     borderColor: borderColor,
     borderColorGradation: borderColorGradation,
-    inputContainerStyle: inputContainerStyle,
+    inputContainerStyle: internalStyle,
     focused: focused,
     disabled: disabled,
     variant: variant

package/dist/components/atoms/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":["Input","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputFontStack","inputFontWeight","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","value","placeholder","rest","ref","_hint","Text","focused","handleBlur","handleFocus","onlyLabel","undefined","displayName"],"mappings":";;;;;AAAA;;AAQA;;AACA;;AACA;;AACA;;;;;;AASA,MAAMA,KAA2B,GAAGC,eAAMC,UAAN,CAClC,CACE;AACEC,EAAAA,KADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,iBAHF;AAIEC,EAAAA,cAJF;AAKEC,EAAAA,eALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,WAPF;AAQEC,EAAAA,aARF;AASEC,EAAAA,cATF;AAUEC,EAAAA,QAVF;AAWEC,EAAAA,KAXF;AAYEC,EAAAA,WAZF;AAaEC,EAAAA,oBAbF;AAcEC,EAAAA,cAAc,GAAG,SAdnB;AAeEC,EAAAA,eAAe,GAAG,MAfpB;AAgBEC,EAAAA,mBAhBF;AAiBEC,EAAAA,OAAO,GAAG,SAjBZ;AAkBEC,EAAAA,aAlBF;AAmBEC,EAAAA,IAnBF;AAoBEC,EAAAA,OApBF;AAqBEC,EAAAA,MArBF;AAsBEC,EAAAA,KAtBF;AAuBEC,EAAAA,WAvBF;AAwBE,KAAGC;AAxBL,CADF,EA2BEC,GA3BF,KA4BK;AACH,QAAMC,KAAK,GAAGR,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAES,UAArB;AAA2B,IAAA,IAAI,EAAER,IAAjC;AAAuC,IAAA,OAAO,EAAEF;AAAhD,IADF;;AAGA,QAAM;AAAEW,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CV,OAD2C,EAE3CC,MAF2C,EAG3C,CAACX,QAH0C,CAA7C;AAMA,QAAMqB,SAAS,GAAG9B,KAAK,IAAI,CAACsB,WAA5B;AAEA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEZ;AAAb,KACE,6BAAC,4BAAD;AACE,IAAA,KAAK,EAAEW,KAAK,GAAGrB,KAAH,GAAW+B,SADzB;AAEE,IAAA,UAAU,EAAE9B,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEoB,UARlB;AASE,IAAA,aAAa,EAAEnB,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEG,mBAbvB;AAcE,IAAA,OAAO,EAAEY,OAdX;AAeE,IAAA,QAAQ,EAAElB,QAfZ;AAgBE,IAAA,OAAO,EAAEO;AAhBX,KAkBE,6BAAC,yBAAD,eACMO,IADN;AAEE,IAAA,WAAW,EAAEO,SAAS,GAAG9B,KAAH,GAAWsB,WAFnC;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,GAAG,EAAEG,GAJP;AAKE,IAAA,SAAS,EAAEX,cALb;AAME,IAAA,UAAU,EAAEC,eANd;AAOE,IAAA,QAAQ,EAAEL,QAPZ;AAQE,IAAA,OAAO,EAAEoB,WARX;AASE,IAAA,MAAM,EAAED;AATV,KAlBF,CADF,EA+BGV,IAAI,IAAIO,KA/BX,CADF;AAmCD,CA5EiC,CAApC;;AA+EA5B,KAAK,CAACmC,WAAN,GAAoB,OAApB;eAEenC,K","sourcesContent":["import {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { Text } from '../Text';\nimport { StyledInputContainer, StyledNativeInput } from './styled';\n\nexport interface InputNativeProps\n  extends Omit<InputElementProps, 'style'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n}\n\nconst Input: FC<InputNativeProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputFontStack = 'default',\n      inputFontWeight = 'bold',\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      value,\n      placeholder,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || (\n      <Hint TextComponent={Text} text={hint} variant={variant} />\n    );\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <StyledInputContainer\n          label={value ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          LabelComponent={Text}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledNativeInput\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref}\n            fontStack={inputFontStack}\n            fontWeight={inputFontWeight}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </StyledInputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"Input.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":["Input","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputFontStack","inputFontWeight","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","value","placeholder","rest","ref","_hint","Text","focused","handleBlur","handleFocus","internalStyle","minHeight","onlyLabel","undefined","displayName"],"mappings":";;;;;AAAA;;AAUA;;AACA;;AACA;;AACA;;;;;;AASA,MAAMA,KAA2B,GAAGC,eAAMC,UAAN,CAClC,CACE;AACEC,EAAAA,KADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,iBAHF;AAIEC,EAAAA,cAJF;AAKEC,EAAAA,eALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,WAPF;AAQEC,EAAAA,aARF;AASEC,EAAAA,cATF;AAUEC,EAAAA,QAVF;AAWEC,EAAAA,KAXF;AAYEC,EAAAA,WAZF;AAaEC,EAAAA,oBAbF;AAcEC,EAAAA,cAAc,GAAG,SAdnB;AAeEC,EAAAA,eAAe,GAAG,MAfpB;AAgBEC,EAAAA,mBAhBF;AAiBEC,EAAAA,OAAO,GAAG,SAjBZ;AAkBEC,EAAAA,aAlBF;AAmBEC,EAAAA,IAnBF;AAoBEC,EAAAA,OApBF;AAqBEC,EAAAA,MArBF;AAsBEC,EAAAA,KAtBF;AAuBEC,EAAAA,WAvBF;AAwBE,KAAGC;AAxBL,CADF,EA2BEC,GA3BF,KA4BK;AACH,QAAMC,KAAK,GAAGR,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAES,UAArB;AAA2B,IAAA,IAAI,EAAER,IAAjC;AAAuC,IAAA,OAAO,EAAEF;AAAhD,IADF;;AAGA,QAAM;AAAEW,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CV,OAD2C,EAE3CC,MAF2C,EAG3C,CAACX,QAH0C,CAA7C;AAMA,QAAMqB,aAAmC,GAAG;AAAEC,IAAAA,SAAS,EAAE,wBAAQ,EAAR,CAAb;AAA0B,OAAG;AAAEhB,MAAAA;AAAF;AAA7B,GAA5C;AACA,QAAMiB,SAAS,GAAGhC,KAAK,IAAI,CAACsB,WAA5B;AAEA,SACE,6BAAC,iBAAD,QACE,6BAAC,yBAAD;AACE,IAAA,KAAK,EAAED,KAAK,GAAGrB,KAAH,GAAWiC,SADzB;AAEE,IAAA,UAAU,EAAEhC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEoB,UARlB;AASE,IAAA,aAAa,EAAEnB,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEkB,aAbvB;AAcE,IAAA,OAAO,EAAEH,OAdX;AAeE,IAAA,QAAQ,EAAElB,QAfZ;AAgBE,IAAA,OAAO,EAAEO;AAhBX,KAkBE,6BAAC,yBAAD,eACMO,IADN;AAEE,IAAA,WAAW,EAAES,SAAS,GAAGhC,KAAH,GAAWsB,WAFnC;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,GAAG,EAAEG,GAJP;AAKE,IAAA,SAAS,EAAEX,cALb;AAME,IAAA,UAAU,EAAEC,eANd;AAOE,IAAA,QAAQ,EAAEL,QAPZ;AAQE,IAAA,OAAO,EAAEoB,WARX;AASE,IAAA,MAAM,EAAED;AATV,KAlBF,CADF,EA+BGV,IAAI,IAAIO,KA/BX,CADF;AAmCD,CA7EiC,CAApC;;AAgFA5B,KAAK,CAACqC,WAAN,GAAoB,OAApB;eAEerC,K","sourcesContent":["import {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElementProps,\n  RFValue,\n  useInputFocus\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\nimport { Text } from '../Text';\nimport { StyledNativeInput } from './styled';\n\nexport interface InputNativeProps\n  extends Omit<InputElementProps, 'style'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n}\n\nconst Input: FC<InputNativeProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputFontStack = 'default',\n      inputFontWeight = 'bold',\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      value,\n      placeholder,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || (\n      <Hint TextComponent={Text} text={hint} variant={variant} />\n    );\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const internalStyle: StyleProp<ViewStyle> = { minHeight: RFValue(50), ...{ inputContainerStyle }}\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View>\n        <InputContainer\n          label={value ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          LabelComponent={Text}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={internalStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledNativeInput\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref}\n            fontStack={inputFontStack}\n            fontWeight={inputFontWeight}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"Input.js"}

package/dist/components/atoms/Input/styled.d.ts

@@ -1,5 +1 @@
-/// <reference types="react" />
-export declare const StyledInputContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
 export declare const StyledNativeInput: import("@emotion/native").StyledComponent<any, {}, {}>;

package/dist/components/atoms/Input/styled.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.StyledNativeInput = exports.StyledInputContainer = void 0;
+exports.StyledNativeInput = void 0;
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
@@ -11,10 +11,6 @@ var _styled = require("../Text/styled");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
-  min-height: ${(0, _reactCore.RFValueStr)('50px')};
-`;
-exports.StyledInputContainer = StyledInputContainer;
 const StyledNativeInputBase = (0, _native.default)(_reactCore.InputElement)`
   height: ${({
   theme

package/dist/components/atoms/Input/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputBase","InputElement","theme","typography","h5","lineHeight","StyledNativeInput","fontStyles"],"mappings":";;;;;AAAA;;AACA;;AAMA;;;;AAGO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF,gBAAgB,2BAAW,MAAX,CAAmB;AACnC,CAFO;;AAIP,MAAMC,qBAAqB,GAAG,qBAAOC,uBAAP,CAE5B;AACF,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,EAAjB,CAAoBC,UAAW;AAC1D;AACA;AACA,CANA;AAQO,MAAMC,iBAAiB,GAAG,qBAAON,qBAAP,EAE/BO,kBAF+B,CAA1B","sourcesContent":["import styled from '@emotion/native';\nimport {\n  InputContainer,\n  InputElement,\n  RFValueStr,\n  StyleProps\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputNativeProps } from './Input';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: ${RFValueStr('50px')};\n`;\n\nconst StyledNativeInputBase = styled(InputElement)<\n  Partial<InputNativeProps> & Partial<StyleProps>\n>`\n  height: ${({ theme }) => theme.typography.h5.lineHeight};\n  width: 100%;\n  padding: 0;\n`;\n\nexport const StyledNativeInput = styled(StyledNativeInputBase)<\n  Font & Partial<InputNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["StyledNativeInputBase","InputElement","theme","typography","h5","lineHeight","StyledNativeInput","fontStyles"],"mappings":";;;;;AAAA;;AACA;;AAGA;;;;AAGA,MAAMA,qBAAqB,GAAG,qBAAOC,uBAAP,CAE5B;AACF,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,EAAjB,CAAoBC,UAAW;AAC1D;AACA;AACA,CANA;AAQO,MAAMC,iBAAiB,GAAG,qBAAON,qBAAP,EAE/BO,kBAF+B,CAA1B","sourcesContent":["import styled from '@emotion/native';\nimport {\n  InputElement, StyleProps\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputNativeProps } from './Input';\n\nconst StyledNativeInputBase = styled(InputElement)<\n  Partial<InputNativeProps> & Partial<StyleProps>\n>`\n  height: ${({ theme }) => theme.typography.h5.lineHeight};\n  width: 100%;\n  padding: 0;\n`;\n\nexport const StyledNativeInput = styled(StyledNativeInputBase)<\n  Font & Partial<InputNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}

package/dist/components/molecules/Select/Modal.js

@@ -56,16 +56,13 @@ const Component = ({
   React.useEffect(() => {
     setSelectedValues(value ? type === 'multi' ? value : [value] : []);
   }, [value, focused, setSelectedValues]);
-
-  const getData = options => {
+  const getData = React.useCallback(options => {
     return options == null ? void 0 : options.map((option, index) => ({ ...option,
       _checked: type === 'multi' ? !!selectedValues.find(value => keyExtractor(option, index) == keyExtractor(value, index)) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
     }));
-  };
-
-  const data = typeof options !== 'function' ? getData(options) : [];
-
-  const handlePressItem = option => () => {
+  }, [keyExtractor, selectedValues, type]);
+  const data = React.useMemo(() => typeof options !== 'function' ? getData(options) : [], [options, getData]);
+  const handlePressItem = React.useCallback(option => {
     setSelectedValues(selectedValues => {
       if (type === 'multi') {
         const newArr = [];
@@ -81,23 +78,41 @@ const Component = ({
 
       return keyExtractor(selectedValues[0] || {}) === keyExtractor(option) ? [] : [option];
     });
-  };
-
+  }, [selectedValues, setSelectedValues, keyExtractor, type]);
   React.useEffect(() => {
     if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
       handleConfirm();
     }
   }, [selectedValues[0], value, closeOnPick]);
-
-  const handleConfirm = () => {
+  const handleConfirm = React.useCallback(() => {
     onSelect(type === 'single' ? selectedValues[0] : selectedValues);
     close == null ? void 0 : close();
-  };
-
-  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : selectModalTitle ? React.createElement(_Text.Text, {
+  }, [selectedValues]);
+  const optionBuilder = React.useCallback(({
+    item
+  }) => React.createElement(MemoizedOption, {
+    item: item,
+    type: type,
+    handlePressItem: handlePressItem,
+    labelExtractor: labelExtractor
+  }), []);
+  const anyChecked = data.filter(item => item._checked).length;
+  const dataLengthChanged = data.length;
+  const memoizedFlatlist = React.useMemo(() => React.createElement(_reactNative.FlatList, {
+    data: data,
+    keyExtractor: keyExtractor,
+    fadingEdgeLength: 200,
+    renderItem: optionBuilder
+  }), [selectedValues, anyChecked, dataLengthChanged]);
+  const titleTextModal = selectModalTitle ? React.createElement(_styled.TextTitleModal, {
     typography: "h4",
-    fontWeight: "bold"
+    fontWeight: "bold",
+    numberOfLines: 3,
+    style: {
+      maxWidth: (0, _reactCore.RFValue)(250)
+    }
   }, selectModalTitle) : null;
+  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : titleTextModal;
   return React.createElement(_Modal.ModalView, _extends({}, others, {
     BoxComponent: ModalComponent,
     showCloseBar: false
@@ -123,14 +138,27 @@ const Component = ({
     animating: true,
     color: 'grey',
     size: 'large'
-  }), React.createElement(_reactNative.FlatList, {
-    data: data,
-    keyExtractor: keyExtractor,
-    fadingEdgeLength: 200,
-    renderItem: ({
-      item
-    }) => React.createElement(_styled.ListItem, {
-      onPress: handlePressItem(item)
+  }), memoizedFlatlist, !_closeOnPick && React.createElement(_styled.ModalFooter, null, React.createElement(_Button.Button, {
+    variant: 'filled',
+    color: 'primary',
+    onPress: handleConfirm,
+    disabled: loading
+  }, React.createElement(_Text.Text, {
+    fontColor: 'light',
+    fontWeight: "bold"
+  }, confirmButtonText))));
+};
+
+const MemoizedOption = ({
+  handlePressItem,
+  labelExtractor,
+  item,
+  type
+}) => {
+  return React.useMemo(() => {
+    const label = labelExtractor(item);
+    return React.createElement(_styled.ListItem, {
+      onPress: () => handlePressItem(item)
     }, React.createElement(_reactNative.View, {
       pointerEvents: 'none'
     }, type === 'multi' ? React.createElement(_reactCore.Checkbox, {
@@ -139,22 +167,14 @@ const Component = ({
       checked: item._checked
     }, React.createElement(_Text.Text, {
       fontWeight: item._checked ? 'bold' : 'regular'
-    }, labelExtractor(item))) : React.createElement(_reactCore.RadioButton, {
+    }, label)) : React.createElement(_reactCore.RadioButton, {
       color: 'primary',
       labelPosition: 'right',
       checked: item._checked
     }, React.createElement(_Text.Text, {
       fontWeight: item._checked ? 'bold' : 'regular'
-    }, labelExtractor(item)))))
-  }), !_closeOnPick && React.createElement(_styled.ModalFooter, null, React.createElement(_Button.Button, {
-    variant: 'filled',
-    color: 'primary',
-    onPress: handleConfirm,
-    disabled: loading
-  }, React.createElement(_Text.Text, {
-    fontColor: 'light',
-    fontWeight: "bold"
-  }, confirmButtonText))));
+    }, label))));
+  }, [item._checked]);
 };
 
 const Modal = Component;

package/dist/components/molecules/Select/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Select/Modal.tsx"],"names":["Component","options","keyExtractor","labelExtractor","groupKeyExtractor","hideSearchBar","searchBarPlaceholder","focused","type","value","onSelect","onSearch","selectModalTitle","selectModalTitleComponent","confirmButtonText","loading","close","closeOnPick","others","selectedValues","setSelectedValues","React","useState","searchArg","setSearchArg","ModalComponent","useMemo","_closeOnPick","useEffect","getData","map","option","index","_checked","find","data","handlePressItem","newArr","found","push","handleConfirm","headerContent","onPress","icon","name","fontColor","text","item","Modal"],"mappings":"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","sourcesContent":["import { Checkbox, getStatusBarHeight, RadioButton, useDebouncedState } from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, StatusBar, View } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Header } from '../../atoms/Header';\nimport { Input } from '../../atoms/Input';\nimport { IBaseModal, ModalView } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { SelectNativeProps } from './Select';\nimport {\n  FetchIndicator, getStyledModal, ListItem, ModalFooter, SearchBarContainer,\n  SelectIcon\n} from './styled';\n\ninterface LoadingProps {\n  loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n  options,\n  keyExtractor,\n  labelExtractor,\n  groupKeyExtractor,\n  hideSearchBar,\n  searchBarPlaceholder,\n  focused,\n  type,\n  value,\n  onSelect,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  confirmButtonText,\n  loading,\n  close,\n  closeOnPick,\n  ...others\n}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {\n  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const ModalComponent = React.useMemo(() => getStyledModal(getStatusBarHeight(true)), [])\n  const _closeOnPick = closeOnPick && type === 'single'\n\n  // Resets the temporary state to the initial state whenever the\n  // modal is reopened or the value changes\n  React.useEffect(() => {\n    setSelectedValues(\n      (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n    );\n  }, [value, focused, setSelectedValues]);\n\n  const getData = (options: Data[]) => {\n    return options?.map((option, index) => ({\n      ...option,\n      _checked:\n        type === 'multi'\n          ? !!selectedValues.find(\n              value => keyExtractor(option, index) == keyExtractor(value, index)\n            )\n          : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n            keyExtractor(option, index),\n    }));\n  };\n\n  const data = typeof options !== 'function' ? getData(options) : [];\n\n  const handlePressItem = (option: Data) => () => {\n    setSelectedValues(selectedValues => {\n      if (type === 'multi') {\n        const newArr: Data[] = [];\n        let found = false;\n        for (const value of selectedValues) {\n          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n          else found = true;\n        }\n        if (!found) newArr.push(option);\n        return newArr;\n      }\n      return keyExtractor((selectedValues[0] || {}) as Data) ===\n        keyExtractor(option)\n        ? []\n        : [option];\n    });\n  };\n\n  React.useEffect(() => {\n    if (_closeOnPick && selectedValues[0] && (selectedValues[0] !== value)) {\n      handleConfirm()\n    }\n  }, [selectedValues[0], value, closeOnPick])\n\n  const handleConfirm = () => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    onSelect(\n      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n    );\n    close?.()\n  };\n\n  const headerContent = selectModalTitleComponent ? (\n    selectModalTitleComponent\n  ) : selectModalTitle ? (\n    <Text typography=\"h4\" fontWeight=\"bold\">\n      {selectModalTitle}\n    </Text>\n  ) : null;\n\n  return (\n    <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>\n        <Header\n          rightButton={{\n            onPress: close,\n            icon: {\n              name: 'close',\n              type: 'material-community',\n              fontColor: 'light',\n            },\n          }}\n        >\n          {headerContent}\n        </Header>\n\n        {!hideSearchBar && (\n          <SearchBarContainer>\n            <Input\n              placeholder={searchBarPlaceholder}\n              value={searchArg}\n              onChange={text => setSearchArg(text)}\n              leftComponent={\n                <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n              }\n            />\n          </SearchBarContainer>\n        )}\n\n        {loading && (\n          <FetchIndicator animating={true} color={'grey'} size={'large'} />\n        )}\n\n        <FlatList\n          data={data}\n          keyExtractor={keyExtractor}\n          fadingEdgeLength={200}\n          renderItem={({ item }) => (\n            <ListItem onPress={handlePressItem(item)}>\n              <View pointerEvents={'none'}>\n                {type === 'multi' ? (\n                  <Checkbox\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </Checkbox>\n                ) : (\n                  <RadioButton\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </RadioButton>\n                )}\n              </View>\n            </ListItem>\n          )}\n        />\n        \n        { !_closeOnPick && <ModalFooter>\n          <Button\n            variant={'filled'}\n            color={'primary'}\n            onPress={handleConfirm}\n            disabled={loading}\n          >\n            <Text fontColor={'light'} fontWeight=\"bold\">\n              {confirmButtonText}\n            </Text>\n          </Button>\n        </ModalFooter>}\n    </ModalView>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Select/Modal.tsx"],"names":["Component","options","keyExtractor","labelExtractor","groupKeyExtractor","hideSearchBar","searchBarPlaceholder","focused","type","value","onSelect","onSearch","selectModalTitle","selectModalTitleComponent","confirmButtonText","loading","close","closeOnPick","others","selectedValues","setSelectedValues","React","useState","searchArg","setSearchArg","ModalComponent","useMemo","_closeOnPick","useEffect","getData","useCallback","map","option","index","_checked","find","data","handlePressItem","newArr","found","push","handleConfirm","optionBuilder","item","anyChecked","filter","length","dataLengthChanged","memoizedFlatlist","titleTextModal","maxWidth","headerContent","onPress","icon","name","fontColor","text","MemoizedOption","label","Modal"],"mappings":"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","sourcesContent":["import {\n  Checkbox,\n  getStatusBarHeight,\n  RadioButton,\n  RFValue,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, ListRenderItemInfo, View } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Header } from '../../atoms/Header';\nimport { Input } from '../../atoms/Input';\nimport { IBaseModal, ModalView } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { SelectNativeProps } from './Select';\nimport {\n  FetchIndicator,\n  getStyledModal,\n  ListItem,\n  ModalFooter,\n  SearchBarContainer,\n  SelectIcon,\n  TextTitleModal,\n} from './styled';\n\ninterface LoadingProps {\n  loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n  options,\n  keyExtractor,\n  labelExtractor,\n  groupKeyExtractor,\n  hideSearchBar,\n  searchBarPlaceholder,\n  focused,\n  type,\n  value,\n  onSelect,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  confirmButtonText,\n  loading,\n  close,\n  closeOnPick,\n  ...others\n}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {\n  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const ModalComponent = React.useMemo(\n    () => getStyledModal(getStatusBarHeight(true)),\n    []\n  );\n  const _closeOnPick = closeOnPick && type === 'single';\n\n  // Resets the temporary state to the initial state whenever the\n  // modal is reopened or the value changes\n  React.useEffect(() => {\n    setSelectedValues(\n      (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n    );\n  }, [value, focused, setSelectedValues]);\n\n  const getData = React.useCallback((options: Data[]) => {\n    return options?.map((option, index) => ({\n      ...option,\n      _checked:\n        type === 'multi'\n          ? !!selectedValues.find(\n              value => keyExtractor(option, index) == keyExtractor(value, index)\n            )\n          : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n            keyExtractor(option, index),\n    }));\n  }, [keyExtractor, selectedValues, type])\n\n  const data = React.useMemo(() => typeof options !== 'function' ? getData(options) : [], [options, getData]);\n\n  const handlePressItem = React.useCallback((option: Data) => {\n    setSelectedValues(selectedValues => {\n      if (type === 'multi') {\n        const newArr: Data[] = [];\n        let found = false;\n        for (const value of selectedValues) {\n          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n          else found = true;\n        }\n        if (!found) newArr.push(option);\n        return newArr;\n      }\n      return keyExtractor((selectedValues[0] || {}) as Data) ===\n        keyExtractor(option)\n        ? []\n        : [option];\n    });\n  }, [selectedValues, setSelectedValues, keyExtractor, type])\n\n  React.useEffect(() => {\n    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {\n      handleConfirm();\n    }\n  }, [selectedValues[0], value, closeOnPick]);\n\n  const handleConfirm = React.useCallback(() => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    onSelect(\n      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n    );\n    close?.()\n  }, [selectedValues]);\n\n  const optionBuilder = React.useCallback(({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (\n    <MemoizedOption\n      item={item}\n      type={type}\n      handlePressItem={handlePressItem}\n      labelExtractor={labelExtractor}\n    />\n  ), [])\n\n  const anyChecked = data.filter(item => item._checked).length\n  const dataLengthChanged = data.length\n\n  const memoizedFlatlist = React.useMemo(() => (\n    <FlatList\n      data={data}\n      keyExtractor={keyExtractor}\n      fadingEdgeLength={200}\n      renderItem={optionBuilder}\n    />\n  ), [selectedValues, anyChecked, dataLengthChanged])\n\n  const titleTextModal = selectModalTitle ? (\n    <TextTitleModal\n      typography=\"h4\"\n      fontWeight=\"bold\"\n      numberOfLines={3}\n      style={{ maxWidth: RFValue(250) }}\n    >\n      {selectModalTitle}\n    </TextTitleModal>\n  ) : null;\n\n  const headerContent = selectModalTitleComponent\n    ? selectModalTitleComponent\n    : titleTextModal;\n\n  return (\n    <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>\n      <Header\n        rightButton={{\n          onPress: close,\n          icon: {\n            name: 'close',\n            type: 'material-community',\n            fontColor: 'light',\n          },\n        }}\n      >\n        {headerContent}\n      </Header>\n\n      {!hideSearchBar && (\n        <SearchBarContainer>\n          <Input\n            placeholder={searchBarPlaceholder}\n            value={searchArg}\n            onChange={text => setSearchArg(text)}\n            leftComponent={\n              <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n            }\n          />\n        </SearchBarContainer>\n      )}\n\n      {loading && (\n        <FetchIndicator animating={true} color={'grey'} size={'large'} />\n      )}\n\n        {memoizedFlatlist}\n\n        { !_closeOnPick && <ModalFooter>\n          <Button\n            variant={'filled'}\n            color={'primary'}\n            onPress={handleConfirm}\n            disabled={loading}\n          >\n            <Text fontColor={'light'} fontWeight=\"bold\">\n              {confirmButtonText}\n            </Text>\n          </Button>\n        </ModalFooter>}\n    </ModalView>\n  );\n};\n\ninterface IOption<T> {\n  item: T & { _checked: boolean }\n  type: 'single' | 'multi'\n  labelExtractor: (option: T) => string\n  handlePressItem: (option: T) => void\n}\n\nconst MemoizedOption: React.FC<IOption<any>> = ({ handlePressItem, labelExtractor, item, type }) => {\n  return React.useMemo(() => {\n    const label = labelExtractor(item)\n    return (\n      <ListItem onPress={() => handlePressItem(item)}>\n        <View pointerEvents={'none'}>\n          {type === 'multi' ? (\n            <Checkbox\n              color={'primary'}\n              labelPosition={'right'}\n              checked={item._checked}\n            >\n              <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                {label}\n              </Text>\n            </Checkbox>\n          ) : (\n            <RadioButton\n              color={'primary'}\n              labelPosition={'right'}\n              checked={item._checked}\n            >\n              <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                {label}\n              </Text>\n            </RadioButton>\n          )}\n        </View>\n      </ListItem>\n    )\n  }, [item._checked])\n}\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/molecules/Select/Select.d.ts

@@ -2,7 +2,7 @@ import { InputContainerProps } from '@tecsinapse/react-core';
 export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
     options: ((searchInput?: string) => Promise<Data[]>) | Data[];
     onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
-    value: Type extends 'single' ? Data | undefined : Data[];
+    value: Type extends 'single' ? Data | null | undefined : Data[];
     type: Type;
     keyExtractor: (t: Data, index?: number) => string;
     labelExtractor: (t: Data) => string;

package/dist/components/molecules/Select/Select.js

@@ -61,15 +61,7 @@ function Select({
       setSelectOptions(options);
     }
   }, [options]);
-  (0, React.useEffect)(() => {
-    if (typeof options === 'function') {
-      if (value) {
-        if (type === 'single') setSelectOptions([value]);else setSelectOptions([...value]);
-      } else setSelectOptions([]);
-    }
-  }, [value]);
-
-  const handleLazyFocus = async () => {
+  const handleLazyFocus = React.useCallback(async () => {
     if (typeof options === 'function') {
       setLoading(true);
 
@@ -85,8 +77,7 @@ function Select({
         setLoading(false);
       }
     }
-  };
-
+  }, [options, value, setSelectOptions]);
   const handleOnSearch = React.useCallback(async searchInput => {
     if (searchInput !== undefined && onSearch) {
       setLoading(true);
@@ -114,8 +105,7 @@ function Select({
       }
     }
   }, [options, value, keyExtractor]);
-
-  const getDisplayValue = () => {
+  const getDisplayValue = React.useCallback(() => {
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;else {
         return selectOptions == null ? void 0 : selectOptions.reduce((acc, option, index) => value.find(key => keyExtractor(option, index) == keyExtractor(key, index)) ? acc + labelExtractor(option) + ', ' : acc, '').slice(0, -2);
@@ -125,8 +115,7 @@ function Select({
       const selectedOption = selectOptions == null ? void 0 : selectOptions.find((option, index) => keyExtractor(option, index) == keyExtractor(value, index));
       return selectedOption ? labelExtractor(selectedOption) : placeholder;
     }
-  };
-
+  }, [placeholder, value, selectOptions]);
   modal.sync(React.createElement(_Modal2.Modal, {
     options: selectOptions || [],
     focused: true,

package/dist/components/molecules/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","handleLazyFocus","result","find","v","e","handleOnSearch","React","useCallback","searchInput","undefined","length","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n  HintInputContainer,\n  InputContainerProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n  options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  value: Type extends 'single' ? Data | undefined : Data[];\n  type: Type;\n\n  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  groupKeyExtractor?: (t: Data) => string;\n\n  hideSearchBar?: boolean;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  confirmButtonText?: string;\n  selectModalTitle?: string;\n  selectModalTitleComponent?: JSX.Element;\n  closeOnPick?: boolean;\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n  /** Select props */\n  value,\n  options,\n  keyExtractor,\n  groupKeyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  searchBarPlaceholder,\n  hideSearchBar,\n  confirmButtonText,\n  rightComponent,\n  variant = 'default',\n  hintComponent,\n  hint,\n  style,\n  controlComponent,\n  closeOnPick = type === 'single',\n  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const modal = useLazyModalManager();\n\n  // TODO: Add Skeleton to modal height when loading is true\n  const [loading, setLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  useEffect(() => {\n    if (typeof options === 'function') {\n      if (value) {\n        if (type === 'single') setSelectOptions([value as Data]);\n        else setSelectOptions([...(value as Data[])]);\n      } else setSelectOptions([]);\n    }\n  }, [value]);\n\n  const handleLazyFocus = async () => {\n    if (typeof options === 'function') {\n      setLoading(true);\n      try {\n        const result = await options();\n        if (result) {\n          if (\n            value &&\n            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n          ) {\n            setSelectOptions([value as Data, ...result]);\n          } else setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      } finally {\n        setLoading(false);\n      }\n    }\n  };\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        setLoading(true);\n        try {\n          const result = await onSearch(searchInput);\n          if (result) {\n            if (type === 'single') {\n              if (\n                value &&\n                !result.find(\n                  v => keyExtractor(value as Data) === keyExtractor(v)\n                )\n              ) {\n                setSelectOptions([value as Data, ...result]);\n              } else setSelectOptions(result);\n            } else {\n              if ((value as Data[]).length > 0) {\n                const selectedValues =\n                  (value as Data[]).filter(\n                    v =>\n                      !result.find(\n                        current =>\n                          keyExtractor(v as Data) === keyExtractor(current)\n                      )\n                  ) || [];\n                setSelectOptions([...selectedValues, ...result]);\n              } else {\n                setSelectOptions(result);\n              }\n            }\n          }\n        } catch (e) {\n          // TODO: Catch error\n        } finally {\n          modal.requestUpdate();\n          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const getDisplayValue = () => {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return placeholder;\n      else {\n        return selectOptions\n          ?.reduce(\n            (acc, option, index) =>\n              value.find(\n                key => keyExtractor(option, index) == keyExtractor(key, index)\n              )\n                ? acc + labelExtractor(option) + ', '\n                : acc,\n            ''\n          )\n          .slice(0, -2);\n      }\n    } else {\n      if (value === undefined) return placeholder;\n      const selectedOption = selectOptions?.find(\n        (option, index) =>\n          keyExtractor(option, index) == keyExtractor(value as Data, index)\n      );\n      return selectedOption ? labelExtractor(selectedOption) : placeholder;\n    }\n  };\n\n  modal.sync(\n    <Modal\n      options={selectOptions || []}\n      focused={true}\n      keyExtractor={keyExtractor}\n      labelExtractor={labelExtractor}\n      groupKeyExtractor={groupKeyExtractor}\n      searchBarPlaceholder={searchBarPlaceholder}\n      type={type}\n      onSelect={onSelect}\n      value={value}\n      hideSearchBar={hideSearchBar}\n      onSearch={handleOnSearch}\n      selectModalTitle={selectModalTitle}\n      selectModalTitleComponent={selectModalTitleComponent}\n      confirmButtonText={confirmButtonText}\n      loading={loading}\n      onClose={handleBlur}\n      closeOnPick={closeOnPick}\n    />\n  );\n\n  const handlePressInput = async () => {\n    modal.show();\n    handleFocus();\n    await handleLazyFocus();\n  };\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue() || '')\n      ) : (\n        <HintInputContainer\n          viewStyle={style}\n          onPress={handlePressInput}\n          focused={focused}\n          disabled={disabled}\n          LabelComponent={Text}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledSelectionText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledSelectionText>\n        </HintInputContainer>\n      )}\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","undefined","length","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n  HintInputContainer,\n  InputContainerProps,\n  useInputFocus\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n  options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  value: Type extends 'single' ? Data | null | undefined : Data[];\n  type: Type;\n\n  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  groupKeyExtractor?: (t: Data) => string;\n\n  hideSearchBar?: boolean;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  confirmButtonText?: string;\n  selectModalTitle?: string;\n  selectModalTitleComponent?: JSX.Element;\n  closeOnPick?: boolean;\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n  /** Select props */\n  value,\n  options,\n  keyExtractor,\n  groupKeyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  searchBarPlaceholder,\n  hideSearchBar,\n  confirmButtonText,\n  rightComponent,\n  variant = 'default',\n  hintComponent,\n  hint,\n  style,\n  controlComponent,\n  closeOnPick = type === 'single',\n  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const modal = useLazyModalManager();\n\n  // TODO: Add Skeleton to modal height when loading is true\n  const [loading, setLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  const handleLazyFocus = React.useCallback(async () => {\n    if (typeof options === 'function') {\n      setLoading(true);\n      try {\n        const result = await options();\n        if (result) {\n          if (\n            value &&\n            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n          ) {\n            setSelectOptions([value as Data, ...result]);\n          } else setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      } finally {\n        setLoading(false);\n      }\n    }\n  }, [options, value, setSelectOptions])\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        setLoading(true);\n        try {\n          const result = await onSearch(searchInput);\n          if (result) {\n            if (type === 'single') {\n              if (\n                value &&\n                !result.find(\n                  v => keyExtractor(value as Data) === keyExtractor(v)\n                )\n              ) {\n                setSelectOptions([value as Data, ...result]);\n              } else setSelectOptions(result);\n            } else {\n              if ((value as Data[]).length > 0) {\n                const selectedValues =\n                  (value as Data[]).filter(\n                    v =>\n                      !result.find(\n                        current =>\n                          keyExtractor(v as Data) === keyExtractor(current)\n                      )\n                  ) || [];\n                setSelectOptions([...selectedValues, ...result]);\n              } else {\n                setSelectOptions(result);\n              }\n            }\n          }\n        } catch (e) {\n          // TODO: Catch error\n        } finally {\n          modal.requestUpdate();\n          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const getDisplayValue = React.useCallback(() => {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return placeholder;\n      else {\n        return selectOptions\n          ?.reduce(\n            (acc, option, index) =>\n              value.find(\n                key => keyExtractor(option, index) == keyExtractor(key, index)\n              )\n                ? acc + labelExtractor(option) + ', '\n                : acc,\n            ''\n          )\n          .slice(0, -2);\n      }\n    } else {\n      if (value === undefined) return placeholder;\n      const selectedOption = selectOptions?.find(\n        (option, index) =>\n          keyExtractor(option, index) == keyExtractor(value as Data, index)\n      );\n      return selectedOption ? labelExtractor(selectedOption) : placeholder;\n    }\n  }, [placeholder, value, selectOptions]);\n\n  modal.sync(\n    <Modal\n      options={selectOptions || []}\n      focused={true}\n      keyExtractor={keyExtractor}\n      labelExtractor={labelExtractor}\n      groupKeyExtractor={groupKeyExtractor}\n      searchBarPlaceholder={searchBarPlaceholder}\n      type={type}\n      onSelect={onSelect}\n      value={value}\n      hideSearchBar={hideSearchBar}\n      onSearch={handleOnSearch}\n      selectModalTitle={selectModalTitle}\n      selectModalTitleComponent={selectModalTitleComponent}\n      confirmButtonText={confirmButtonText}\n      loading={loading}\n      onClose={handleBlur}\n      closeOnPick={closeOnPick}\n    />\n  );\n\n  const handlePressInput = async () => {\n    modal.show();\n    handleFocus();\n    await handleLazyFocus();\n  };\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue() || '')\n      ) : (\n        <HintInputContainer\n          viewStyle={style}\n          onPress={handlePressInput}\n          focused={focused}\n          disabled={disabled}\n          LabelComponent={Text}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledSelectionText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledSelectionText>\n        </HintInputContainer>\n      )}\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}

package/dist/components/molecules/Select/styled.d.ts

@@ -38,3 +38,4 @@ export declare const FetchIndicator: import("@emotion/native").StyledComponent<i
 }, {}, {
     ref?: import("react").Ref<ActivityIndicator> | undefined;
 }>;
+export declare const TextTitleModal: import("@emotion/native").StyledComponent<any, {}, {}>;

package/dist/components/molecules/Select/styled.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.FetchIndicator = exports.SelectIcon = exports.ModalFooter = exports.ListItem = exports.SearchBar = exports.SearchBarContainer = exports.CloseButton = exports.Header = exports.StyledPressableSurface = exports.Dummy = exports.StyledSelectionText = exports.getStyledModal = void 0;
+exports.TextTitleModal = exports.FetchIndicator = exports.SelectIcon = exports.ModalFooter = exports.ListItem = exports.SearchBar = exports.SearchBarContainer = exports.CloseButton = exports.Header = exports.StyledPressableSurface = exports.Dummy = exports.StyledSelectionText = exports.getStyledModal = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
@@ -115,4 +115,8 @@ const FetchIndicator = (0, _native.default)(_reactNative.ActivityIndicator)`
   align-self: center;
 `;
 exports.FetchIndicator = FetchIndicator;
+const TextTitleModal = (0, _native.default)(_Text.Text)`
+  text-align: center;
+`;
+exports.TextTitleModal = TextTitleModal;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/Select/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Select/styled.ts"],"names":["getStyledModal","safeTop","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ModalFooter","SelectIcon","Icon","centi","medium","FetchIndicator","ActivityIndicator"],"mappings":";;;;;AAAA;;AACA;;AAYA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAc,GAAG,CAACC,OAAe,GAAG,CAAnB,KAAyB;AACrD,SAAO,qBAAOC,iBAAP,CAA+C;AACxD,mBAAoB,GAAE,wBAAQD,OAAR,CAAiB,IAAI;AAC3C,wBAAwB,CAAC;AAAEE,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACrE;AACA,GAJE;AAKD,CANM;;;AAQA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,qBACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,YAAY,2BAAW,MAAX,CAAmB;AAC/B,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CAHO;;AAKA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF,yBAAyB,2BAAW,KAAX,CAAkB;AAC3C,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,WAAW,GAAG,qBAAO1B,iBAAP,CAAkC;AAC7D;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CANO;;AAQA,MAAMY,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE3B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAce,KAAM;AAChD,WAAW,CAAC;AAAE5B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBO,MAAO;AACvD,CAHO;;AAKA,MAAMC,cAAc,GAAG,qBAAOC,8BAAP,CAA0B;AACxD;AACA,CAFO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  RFValue,\n  RFValueStr,\n  StyleProps\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../../atoms/Input';\nimport { Text } from '../../atoms/Text';\n\nexport const getStyledModal = (safeTop: number = 0) => {\n  return styled(View)<ModalProps & Partial<StyleProps>>`\n    padding-top: ${`${RFValue(safeTop)}px`};\n    background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n    height: 100%;\n  `\n}\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: ${RFValueStr('75px')};\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: ${RFValueStr('1px')};\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Select/styled.ts"],"names":["getStyledModal","safeTop","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ModalFooter","SelectIcon","Icon","centi","medium","FetchIndicator","ActivityIndicator","TextTitleModal"],"mappings":";;;;;AAAA;;AACA;;AAYA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAc,GAAG,CAACC,OAAO,GAAG,CAAX,KAAiB;AAC7C,SAAO,qBAAOC,iBAAP,CAA+C;AACxD,mBAAoB,GAAE,wBAAQD,OAAR,CAAiB,IAAI;AAC3C,wBAAwB,CAAC;AAAEE,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACrE;AACA,GAJE;AAKD,CANM;;;AAQA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,qBACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,YAAY,2BAAW,MAAX,CAAmB;AAC/B,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CAHO;;AAKA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF,yBAAyB,2BAAW,KAAX,CAAkB;AAC3C,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,WAAW,GAAG,qBAAO1B,iBAAP,CAAkC;AAC7D;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CANO;;AAQA,MAAMY,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE3B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAce,KAAM;AAChD,WAAW,CAAC;AAAE5B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBO,MAAO;AACvD,CAHO;;AAKA,MAAMC,cAAc,GAAG,qBAAOC,8BAAP,CAA0B;AACxD;AACA,CAFO;;AAIA,MAAMC,cAAc,GAAG,qBAAO5B,UAAP,CAAkC;AAChE;AACA,CAFO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  RFValue,\n  RFValueStr,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../../atoms/Input';\nimport { Text } from '../../atoms/Text';\n\nexport const getStyledModal = (safeTop = 0) => {\n  return styled(View)<ModalProps & Partial<StyleProps>>`\n    padding-top: ${`${RFValue(safeTop)}px`};\n    background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n    height: 100%;\n  `;\n};\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: ${RFValueStr('75px')};\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: ${RFValueStr('1px')};\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n\nexport const TextTitleModal = styled(Text)<Partial<StyleProps>>`\n  text-align: center;\n`;\n"],"file":"styled.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.17.6",
+  "version": "1.17.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.16.4",
+    "@tecsinapse/react-core": "^1.16.5",
     "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
@@ -39,5 +39,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "ab944cad9dc3a840ebf3ebc9ed525926ebe3a436"
+  "gitHead": "41a7cd4c1031d3561019af3afffdc549f185ac02"
 }

package/src/components/atoms/Input/Input.tsx

@@ -2,14 +2,16 @@ import {
   FontStackType,
   FontWeightType,
   Hint,
+  InputContainer,
   InputContainerProps,
   InputElementProps,
-  useInputFocus,
+  RFValue,
+  useInputFocus
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
-import { View } from 'react-native';
+import { StyleProp, View, ViewStyle } from 'react-native';
 import { Text } from '../Text';
-import { StyledInputContainer, StyledNativeInput } from './styled';
+import { StyledNativeInput } from './styled';
 
 export interface InputNativeProps
   extends Omit<InputElementProps, 'style'>,
@@ -57,11 +59,12 @@ const Input: FC<InputNativeProps> = React.forwardRef(
       !disabled
     );
 
+    const internalStyle: StyleProp<ViewStyle> = { minHeight: RFValue(50), ...{ inputContainerStyle }}
     const onlyLabel = label && !placeholder;
 
     return (
-      <View style={style}>
-        <StyledInputContainer
+      <View>
+        <InputContainer
           label={value ? label : undefined}
           labelColor={labelColor}
           labelColorVariant={labelColorVariant}
@@ -74,7 +77,7 @@ const Input: FC<InputNativeProps> = React.forwardRef(
           rightComponent={rightComponent}
           borderColor={borderColor}
           borderColorGradation={borderColorGradation}
-          inputContainerStyle={inputContainerStyle}
+          inputContainerStyle={internalStyle}
           focused={focused}
           disabled={disabled}
           variant={variant}
@@ -90,7 +93,7 @@ const Input: FC<InputNativeProps> = React.forwardRef(
             onFocus={handleFocus}
             onBlur={handleBlur}
           />
-        </StyledInputContainer>
+        </InputContainer>
         {hint && _hint}
       </View>
     );

package/src/components/atoms/Input/styled.ts

@@ -1,17 +1,10 @@
 import styled from '@emotion/native';
 import {
-  InputContainer,
-  InputElement,
-  RFValueStr,
-  StyleProps
+  InputElement, StyleProps
 } from '@tecsinapse/react-core';
 import { Font, fontStyles } from '../Text/styled';
 import { InputNativeProps } from './Input';
 
-export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: ${RFValueStr('50px')};
-`;
-
 const StyledNativeInputBase = styled(InputElement)<
   Partial<InputNativeProps> & Partial<StyleProps>
 >`

package/src/components/molecules/Select/Modal.tsx

@@ -1,6 +1,12 @@
-import { Checkbox, getStatusBarHeight, RadioButton, useDebouncedState } from '@tecsinapse/react-core';
+import {
+  Checkbox,
+  getStatusBarHeight,
+  RadioButton,
+  RFValue,
+  useDebouncedState,
+} from '@tecsinapse/react-core';
 import * as React from 'react';
-import { FlatList, StatusBar, View } from 'react-native';
+import { FlatList, ListRenderItemInfo, View } from 'react-native';
 import { Button } from '../../atoms/Button';
 import { Header } from '../../atoms/Header';
 import { Input } from '../../atoms/Input';
@@ -8,8 +14,13 @@ import { IBaseModal, ModalView } from '../../atoms/Modal';
 import { Text } from '../../atoms/Text';
 import { SelectNativeProps } from './Select';
 import {
-  FetchIndicator, getStyledModal, ListItem, ModalFooter, SearchBarContainer,
-  SelectIcon
+  FetchIndicator,
+  getStyledModal,
+  ListItem,
+  ModalFooter,
+  SearchBarContainer,
+  SelectIcon,
+  TextTitleModal,
 } from './styled';
 
 interface LoadingProps {
@@ -38,8 +49,11 @@ const Component = <Data, Type extends 'single' | 'multi'>({
 }: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {
   const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);
   const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
-  const ModalComponent = React.useMemo(() => getStyledModal(getStatusBarHeight(true)), [])
-  const _closeOnPick = closeOnPick && type === 'single'
+  const ModalComponent = React.useMemo(
+    () => getStyledModal(getStatusBarHeight(true)),
+    []
+  );
+  const _closeOnPick = closeOnPick && type === 'single';
 
   // Resets the temporary state to the initial state whenever the
   // modal is reopened or the value changes
@@ -49,7 +63,7 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     );
   }, [value, focused, setSelectedValues]);
 
-  const getData = (options: Data[]) => {
+  const getData = React.useCallback((options: Data[]) => {
     return options?.map((option, index) => ({
       ...option,
       _checked:
@@ -60,11 +74,11 @@ const Component = <Data, Type extends 'single' | 'multi'>({
           : keyExtractor((selectedValues[0] || {}) as Data, index) ==
             keyExtractor(option, index),
     }));
-  };
+  }, [keyExtractor, selectedValues, type])
 
-  const data = typeof options !== 'function' ? getData(options) : [];
+  const data = React.useMemo(() => typeof options !== 'function' ? getData(options) : [], [options, getData]);
 
-  const handlePressItem = (option: Data) => () => {
+  const handlePressItem = React.useCallback((option: Data) => {
     setSelectedValues(selectedValues => {
       if (type === 'multi') {
         const newArr: Data[] = [];
@@ -81,96 +95,93 @@ const Component = <Data, Type extends 'single' | 'multi'>({
         ? []
         : [option];
     });
-  };
+  }, [selectedValues, setSelectedValues, keyExtractor, type])
 
   React.useEffect(() => {
-    if (_closeOnPick && selectedValues[0] && (selectedValues[0] !== value)) {
-      handleConfirm()
+    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
+      handleConfirm();
     }
-  }, [selectedValues[0], value, closeOnPick])
+  }, [selectedValues[0], value, closeOnPick]);
 
-  const handleConfirm = () => {
+  const handleConfirm = React.useCallback(() => {
     // TS Workaround since TS won't infer the ternary operator's result type correctly
     type OnSelectArg = Parameters<typeof onSelect>[0];
     onSelect(
       (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg
     );
     close?.()
-  };
+  }, [selectedValues]);
+
+  const optionBuilder = React.useCallback(({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (
+    <MemoizedOption
+      item={item}
+      type={type}
+      handlePressItem={handlePressItem}
+      labelExtractor={labelExtractor}
+    />
+  ), [])
+
+  const anyChecked = data.filter(item => item._checked).length
+  const dataLengthChanged = data.length
 
-  const headerContent = selectModalTitleComponent ? (
-    selectModalTitleComponent
-  ) : selectModalTitle ? (
-    <Text typography="h4" fontWeight="bold">
+  const memoizedFlatlist = React.useMemo(() => (
+    <FlatList
+      data={data}
+      keyExtractor={keyExtractor}
+      fadingEdgeLength={200}
+      renderItem={optionBuilder}
+    />
+  ), [selectedValues, anyChecked, dataLengthChanged])
+
+  const titleTextModal = selectModalTitle ? (
+    <TextTitleModal
+      typography="h4"
+      fontWeight="bold"
+      numberOfLines={3}
+      style={{ maxWidth: RFValue(250) }}
+    >
       {selectModalTitle}
-    </Text>
+    </TextTitleModal>
   ) : null;
 
+  const headerContent = selectModalTitleComponent
+    ? selectModalTitleComponent
+    : titleTextModal;
+
   return (
     <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>
-        <Header
-          rightButton={{
-            onPress: close,
-            icon: {
-              name: 'close',
-              type: 'material-community',
-              fontColor: 'light',
-            },
-          }}
-        >
-          {headerContent}
-        </Header>
-
-        {!hideSearchBar && (
-          <SearchBarContainer>
-            <Input
-              placeholder={searchBarPlaceholder}
-              value={searchArg}
-              onChange={text => setSearchArg(text)}
-              leftComponent={
-                <SelectIcon name="search" type="ionicon" size="centi" />
-              }
-            />
-          </SearchBarContainer>
-        )}
-
-        {loading && (
-          <FetchIndicator animating={true} color={'grey'} size={'large'} />
-        )}
-
-        <FlatList
-          data={data}
-          keyExtractor={keyExtractor}
-          fadingEdgeLength={200}
-          renderItem={({ item }) => (
-            <ListItem onPress={handlePressItem(item)}>
-              <View pointerEvents={'none'}>
-                {type === 'multi' ? (
-                  <Checkbox
-                    color={'primary'}
-                    labelPosition={'right'}
-                    checked={item._checked}
-                  >
-                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>
-                      {labelExtractor(item)}
-                    </Text>
-                  </Checkbox>
-                ) : (
-                  <RadioButton
-                    color={'primary'}
-                    labelPosition={'right'}
-                    checked={item._checked}
-                  >
-                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>
-                      {labelExtractor(item)}
-                    </Text>
-                  </RadioButton>
-                )}
-              </View>
-            </ListItem>
-          )}
-        />
-        
+      <Header
+        rightButton={{
+          onPress: close,
+          icon: {
+            name: 'close',
+            type: 'material-community',
+            fontColor: 'light',
+          },
+        }}
+      >
+        {headerContent}
+      </Header>
+
+      {!hideSearchBar && (
+        <SearchBarContainer>
+          <Input
+            placeholder={searchBarPlaceholder}
+            value={searchArg}
+            onChange={text => setSearchArg(text)}
+            leftComponent={
+              <SelectIcon name="search" type="ionicon" size="centi" />
+            }
+          />
+        </SearchBarContainer>
+      )}
+
+      {loading && (
+        <FetchIndicator animating={true} color={'grey'} size={'large'} />
+      )}
+
+        {memoizedFlatlist}
+
         { !_closeOnPick && <ModalFooter>
           <Button
             variant={'filled'}
@@ -187,4 +198,44 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   );
 };
 
+interface IOption<T> {
+  item: T & { _checked: boolean }
+  type: 'single' | 'multi'
+  labelExtractor: (option: T) => string
+  handlePressItem: (option: T) => void
+}
+
+const MemoizedOption: React.FC<IOption<any>> = ({ handlePressItem, labelExtractor, item, type }) => {
+  return React.useMemo(() => {
+    const label = labelExtractor(item)
+    return (
+      <ListItem onPress={() => handlePressItem(item)}>
+        <View pointerEvents={'none'}>
+          {type === 'multi' ? (
+            <Checkbox
+              color={'primary'}
+              labelPosition={'right'}
+              checked={item._checked}
+            >
+              <Text fontWeight={item._checked ? 'bold' : 'regular'}>
+                {label}
+              </Text>
+            </Checkbox>
+          ) : (
+            <RadioButton
+              color={'primary'}
+              labelPosition={'right'}
+              checked={item._checked}
+            >
+              <Text fontWeight={item._checked ? 'bold' : 'regular'}>
+                {label}
+              </Text>
+            </RadioButton>
+          )}
+        </View>
+      </ListItem>
+    )
+  }, [item._checked])
+}
+
 export const Modal = Component;

package/src/components/molecules/Select/Select.tsx

@@ -1,7 +1,7 @@
 import {
   HintInputContainer,
   InputContainerProps,
-  useInputFocus,
+  useInputFocus
 } from '@tecsinapse/react-core';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   onSelect: (
     option: Type extends 'single' ? Data | undefined : Data[]
   ) => never | void;
-  value: Type extends 'single' ? Data | undefined : Data[];
+  value: Type extends 'single' ? Data | null | undefined : Data[];
   type: Type;
 
   keyExtractor: (t: Data, index?: number) => string;
@@ -88,16 +88,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
     }
   }, [options]);
 
-  useEffect(() => {
-    if (typeof options === 'function') {
-      if (value) {
-        if (type === 'single') setSelectOptions([value as Data]);
-        else setSelectOptions([...(value as Data[])]);
-      } else setSelectOptions([]);
-    }
-  }, [value]);
-
-  const handleLazyFocus = async () => {
+  const handleLazyFocus = React.useCallback(async () => {
     if (typeof options === 'function') {
       setLoading(true);
       try {
@@ -116,7 +107,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
         setLoading(false);
       }
     }
-  };
+  }, [options, value, setSelectOptions])
 
   const handleOnSearch = React.useCallback(
     async (searchInput: string | undefined) => {
@@ -161,7 +152,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
     [options, value, keyExtractor]
   );
 
-  const getDisplayValue = () => {
+  const getDisplayValue = React.useCallback(() => {
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;
       else {
@@ -185,7 +176,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
       );
       return selectedOption ? labelExtractor(selectedOption) : placeholder;
     }
-  };
+  }, [placeholder, value, selectOptions]);
 
   modal.sync(
     <Modal

package/src/components/molecules/Select/styled.ts

@@ -9,19 +9,19 @@ import {
   PressableSurfaceProps,
   RFValue,
   RFValueStr,
-  StyleProps
+  StyleProps,
 } from '@tecsinapse/react-core';
 import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
 import { Input, InputNativeProps } from '../../atoms/Input';
 import { Text } from '../../atoms/Text';
 
-export const getStyledModal = (safeTop: number = 0) => {
+export const getStyledModal = (safeTop = 0) => {
   return styled(View)<ModalProps & Partial<StyleProps>>`
     padding-top: ${`${RFValue(safeTop)}px`};
     background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
     height: 100%;
-  `
-}
+  `;
+};
 
 export const StyledSelectionText = styled(Text)(
   (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`
@@ -91,3 +91,7 @@ export const SelectIcon = styled(Icon)<Partial<StyleProps>>`
 export const FetchIndicator = styled(ActivityIndicator)`
   align-self: center;
 `;
+
+export const TextTitleModal = styled(Text)<Partial<StyleProps>>`
+  text-align: center;
+`;