@tecsinapse/react-native-kit 1.17.5 → 1.17.8

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
 ## [1.17.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.4...@tecsinapse/react-native-kit@1.17.5) (2022-06-22)
 
 

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

@@ -94,10 +94,11 @@ const Component = ({
     close == null ? void 0 : close();
   };
 
-  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : selectModalTitle ? React.createElement(_Text.Text, {
+  const titleTextModal = selectModalTitle ? React.createElement(_styled.TextTitleModal, {
     typography: "h4",
     fontWeight: "bold"
   }, selectModalTitle) : null;
+  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : titleTextModal;
   return React.createElement(_Modal.ModalView, _extends({}, others, {
     BoxComponent: ModalComponent,
     showCloseBar: false

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":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AASA,MAAMA,SAAS,GAAG,CAAwC;AACxDC,EAAAA,OADwD;AAExDC,EAAAA,YAFwD;AAGxDC,EAAAA,cAHwD;AAIxDC,EAAAA,iBAJwD;AAKxDC,EAAAA,aALwD;AAMxDC,EAAAA,oBANwD;AAOxDC,EAAAA,OAPwD;AAQxDC,EAAAA,IARwD;AASxDC,EAAAA,KATwD;AAUxDC,EAAAA,QAVwD;AAWxDC,EAAAA,QAXwD;AAYxDC,EAAAA,gBAZwD;AAaxDC,EAAAA,yBAbwD;AAcxDC,EAAAA,iBAdwD;AAexDC,EAAAA,OAfwD;AAgBxDC,EAAAA,KAhBwD;AAiBxDC,EAAAA,WAjBwD;AAkBxD,KAAGC;AAlBqD,CAAxC,KAmB4D;AAC5E,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAA5C;AACA,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,kCAA0B,EAA1B,EAA8Bb,QAA9B,CAAlC;AACA,QAAMc,cAAc,GAAGJ,KAAK,CAACK,OAAN,CAAc,MAAM,4BAAe,mCAAmB,IAAnB,CAAf,CAApB,EAA8D,EAA9D,CAAvB;;AACA,QAAMC,YAAY,GAAGV,WAAW,IAAIT,IAAI,KAAK,QAA7C;;AAIAa,EAAAA,KAAK,CAACO,SAAN,CAAgB,MAAM;AACpBR,IAAAA,iBAAiB,CACdX,KAAK,GAAID,IAAI,KAAK,OAAT,GAAmBC,KAAnB,GAA2B,CAACA,KAAD,CAA/B,GAA0C,EADjC,CAAjB;AAGD,GAJD,EAIG,CAACA,KAAD,EAAQF,OAAR,EAAiBa,iBAAjB,CAJH;;AAMA,QAAMS,OAAO,GAAI5B,OAAD,IAAqB;AACnC,WAAOA,OAAP,oBAAOA,OAAO,CAAE6B,GAAT,CAAa,CAACC,MAAD,EAASC,KAAT,MAAoB,EACtC,GAAGD,MADmC;AAEtCE,MAAAA,QAAQ,EACNzB,IAAI,KAAK,OAAT,GACI,CAAC,CAACW,cAAc,CAACe,IAAf,CACAzB,KAAK,IAAIP,YAAY,CAAC6B,MAAD,EAASC,KAAT,CAAZ,IAA+B9B,YAAY,CAACO,KAAD,EAAQuB,KAAR,CADpD,CADN,GAII9B,YAAY,CAAEiB,cAAc,CAAC,CAAD,CAAd,IAAqB,EAAvB,EAAoCa,KAApC,CAAZ,IACA9B,YAAY,CAAC6B,MAAD,EAASC,KAAT;AARoB,KAApB,CAAb,CAAP;AAUD,GAXD;;AAaA,QAAMG,IAAI,GAAG,OAAOlC,OAAP,KAAmB,UAAnB,GAAgC4B,OAAO,CAAC5B,OAAD,CAAvC,GAAmD,EAAhE;;AAEA,QAAMmC,eAAe,GAAIL,MAAD,IAAkB,MAAM;AAC9CX,IAAAA,iBAAiB,CAACD,cAAc,IAAI;AAClC,UAAIX,IAAI,KAAK,OAAb,EAAsB;AACpB,cAAM6B,MAAc,GAAG,EAAvB;AACA,YAAIC,KAAK,GAAG,KAAZ;;AACA,aAAK,MAAM7B,KAAX,IAAoBU,cAApB,EAAoC;AAClC,cAAIjB,YAAY,CAACO,KAAD,CAAZ,IAAuBP,YAAY,CAAC6B,MAAD,CAAvC,EAAiDM,MAAM,CAACE,IAAP,CAAY9B,KAAZ,EAAjD,KACK6B,KAAK,GAAG,IAAR;AACN;;AACD,YAAI,CAACA,KAAL,EAAYD,MAAM,CAACE,IAAP,CAAYR,MAAZ;AACZ,eAAOM,MAAP;AACD;;AACD,aAAOnC,YAAY,CAAEiB,cAAc,CAAC,CAAD,CAAd,IAAqB,EAAvB,CAAZ,KACLjB,YAAY,CAAC6B,MAAD,CADP,GAEH,EAFG,GAGH,CAACA,MAAD,CAHJ;AAID,KAfgB,CAAjB;AAgBD,GAjBD;;AAmBAV,EAAAA,KAAK,CAACO,SAAN,CAAgB,MAAM;AACpB,QAAID,YAAY,IAAIR,cAAc,CAAC,CAAD,CAA9B,IAAsCA,cAAc,CAAC,CAAD,CAAd,KAAsBV,KAAhE,EAAwE;AACtE+B,MAAAA,aAAa;AACd;AACF,GAJD,EAIG,CAACrB,cAAc,CAAC,CAAD,CAAf,EAAoBV,KAApB,EAA2BQ,WAA3B,CAJH;;AAMA,QAAMuB,aAAa,GAAG,MAAM;AAG1B9B,IAAAA,QAAQ,CACLF,IAAI,KAAK,QAAT,GAAoBW,cAAc,CAAC,CAAD,CAAlC,GAAwCA,cADnC,CAAR;AAGAH,IAAAA,KAAK,QAAL,YAAAA,KAAK;AACN,GAPD;;AASA,QAAMyB,aAAa,GAAG5B,yBAAyB,GAC7CA,yBAD6C,GAE3CD,gBAAgB,GAClB,oBAAC,UAAD;AAAM,IAAA,UAAU,EAAC,IAAjB;AAAsB,IAAA,UAAU,EAAC;AAAjC,KACGA,gBADH,CADkB,GAIhB,IANJ;AAQA,SACE,oBAAC,gBAAD,eAAeM,MAAf;AAAuB,IAAA,YAAY,EAAEO,cAArC;AAAqD,IAAA,YAAY,EAAE;AAAnE,MACI,oBAAC,cAAD;AACE,IAAA,WAAW,EAAE;AACXiB,MAAAA,OAAO,EAAE1B,KADE;AAEX2B,MAAAA,IAAI,EAAE;AACJC,QAAAA,IAAI,EAAE,OADF;AAEJpC,QAAAA,IAAI,EAAE,oBAFF;AAGJqC,QAAAA,SAAS,EAAE;AAHP;AAFK;AADf,KAUGJ,aAVH,CADJ,EAcK,CAACpC,aAAD,IACC,oBAAC,0BAAD,QACE,oBAAC,YAAD;AACE,IAAA,WAAW,EAAEC,oBADf;AAEE,IAAA,KAAK,EAAEiB,SAFT;AAGE,IAAA,QAAQ,EAAEuB,IAAI,IAAItB,YAAY,CAACsB,IAAD,CAHhC;AAIE,IAAA,aAAa,EACX,oBAAC,kBAAD;AAAY,MAAA,IAAI,EAAC,QAAjB;AAA0B,MAAA,IAAI,EAAC,SAA/B;AAAyC,MAAA,IAAI,EAAC;AAA9C;AALJ,IADF,CAfN,EA2BK/B,OAAO,IACN,oBAAC,sBAAD;AAAgB,IAAA,SAAS,EAAE,IAA3B;AAAiC,IAAA,KAAK,EAAE,MAAxC;AAAgD,IAAA,IAAI,EAAE;AAAtD,IA5BN,EA+BI,oBAAC,qBAAD;AACE,IAAA,IAAI,EAAEoB,IADR;AAEE,IAAA,YAAY,EAAEjC,YAFhB;AAGE,IAAA,gBAAgB,EAAE,GAHpB;AAIE,IAAA,UAAU,EAAE,CAAC;AAAE6C,MAAAA;AAAF,KAAD,KACV,oBAAC,gBAAD;AAAU,MAAA,OAAO,EAAEX,eAAe,CAACW,IAAD;AAAlC,OACE,oBAAC,iBAAD;AAAM,MAAA,aAAa,EAAE;AAArB,OACGvC,IAAI,KAAK,OAAT,GACC,oBAAC,mBAAD;AACE,MAAA,KAAK,EAAE,SADT;AAEE,MAAA,aAAa,EAAE,OAFjB;AAGE,MAAA,OAAO,EAAEuC,IAAI,CAACd;AAHhB,OAKE,oBAAC,UAAD;AAAM,MAAA,UAAU,EAAEc,IAAI,CAACd,QAAL,GAAgB,MAAhB,GAAyB;AAA3C,OACG9B,cAAc,CAAC4C,IAAD,CADjB,CALF,CADD,GAWC,oBAAC,sBAAD;AACE,MAAA,KAAK,EAAE,SADT;AAEE,MAAA,aAAa,EAAE,OAFjB;AAGE,MAAA,OAAO,EAAEA,IAAI,CAACd;AAHhB,OAKE,oBAAC,UAAD;AAAM,MAAA,UAAU,EAAEc,IAAI,CAACd,QAAL,GAAgB,MAAhB,GAAyB;AAA3C,OACG9B,cAAc,CAAC4C,IAAD,CADjB,CALF,CAZJ,CADF;AALJ,IA/BJ,EAgEM,CAACpB,YAAD,IAAiB,oBAAC,mBAAD,QACjB,oBAAC,cAAD;AACE,IAAA,OAAO,EAAE,QADX;AAEE,IAAA,KAAK,EAAE,SAFT;AAGE,IAAA,OAAO,EAAEa,aAHX;AAIE,IAAA,QAAQ,EAAEzB;AAJZ,KAME,oBAAC,UAAD;AAAM,IAAA,SAAS,EAAE,OAAjB;AAA0B,IAAA,UAAU,EAAC;AAArC,KACGD,iBADH,CANF,CADiB,CAhEvB,CADF;AA+ED,CAzKD;;AA2KO,MAAMkC,KAAK,GAAGhD,SAAd","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","map","option","index","_checked","find","data","handlePressItem","newArr","found","push","handleConfirm","titleTextModal","headerContent","onPress","icon","name","fontColor","text","item","Modal"],"mappings":"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","sourcesContent":["import {\n  Checkbox,\n  getStatusBarHeight,\n  RadioButton,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, 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 = (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 titleTextModal = selectModalTitle ? (\n    <TextTitleModal typography=\"h4\" fontWeight=\"bold\">\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      <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 && (\n        <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      )}\n    </ModalView>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.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,9 @@ const FetchIndicator = (0, _native.default)(_reactNative.ActivityIndicator)`
   align-self: center;
 `;
 exports.FetchIndicator = FetchIndicator;
+const TextTitleModal = (0, _native.default)(_Text.Text)`
+  max-width: ${(0, _reactCore.RFValue)(250)};
+  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,eAAe,wBAAQ,GAAR,CAAa;AAC5B;AACA,CAHO","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  max-width: ${RFValue(250)};\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.5",
+  "version": "1.17.8",
   "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.3",
+    "@tecsinapse/react-core": "^1.16.4",
     "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
@@ -39,5 +39,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "190dab1b92539a51f19411f1102bdd9ee67c9959"
+  "gitHead": "213c34dd451202b14e9343f7e3f30d6e8f77f5f9"
 }

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

@@ -1,6 +1,11 @@
-import { Checkbox, getStatusBarHeight, RadioButton, useDebouncedState } from '@tecsinapse/react-core';
+import {
+  Checkbox,
+  getStatusBarHeight,
+  RadioButton,
+  useDebouncedState,
+} from '@tecsinapse/react-core';
 import * as React from 'react';
-import { FlatList, StatusBar, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 import { Button } from '../../atoms/Button';
 import { Header } from '../../atoms/Header';
 import { Input } from '../../atoms/Input';
@@ -8,8 +13,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 +48,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
@@ -84,10 +97,10 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   };
 
   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 = () => {
     // TS Workaround since TS won't infer the ternary operator's result type correctly
@@ -95,83 +108,86 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     onSelect(
       (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg
     );
-    close?.()
+    close?.();
   };
 
-  const headerContent = selectModalTitleComponent ? (
-    selectModalTitleComponent
-  ) : selectModalTitle ? (
-    <Text typography="h4" fontWeight="bold">
+  const titleTextModal = selectModalTitle ? (
+    <TextTitleModal typography="h4" fontWeight="bold">
       {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>
-        )}
+      <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'} />
+      )}
 
-        {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>
         )}
+      />
 
-        <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>
-          )}
-        />
-        
-        { !_closeOnPick && <ModalFooter>
+      {!_closeOnPick && (
+        <ModalFooter>
           <Button
             variant={'filled'}
             color={'primary'}
@@ -182,7 +198,8 @@ const Component = <Data, Type extends 'single' | 'multi'>({
               {confirmButtonText}
             </Text>
           </Button>
-        </ModalFooter>}
+        </ModalFooter>
+      )}
     </ModalView>
   );
 };

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,8 @@ export const SelectIcon = styled(Icon)<Partial<StyleProps>>`
 export const FetchIndicator = styled(ActivityIndicator)`
   align-self: center;
 `;
+
+export const TextTitleModal = styled(Text)<Partial<StyleProps>>`
+  max-width: ${RFValue(250)};
+  text-align: center;
+`;