@tecsinapse/react-web-kit 1.21.1 → 1.21.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.21.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.21.1...@tecsinapse/react-web-kit@1.21.2) (2022-09-16)
+
+
+### Features
+
+* added lazy select ([9d68ea9](https://github.com/tecsinapse/design-system/commit/9d68ea9137ab273255d1a899a7d3489c2842ea4d))
+
+
+
+
+
 ## [1.21.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.21.0...@tecsinapse/react-web-kit@1.21.1) (2022-09-05)
 
 

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","useDebouncedState","lengthOptions","React","useMemo","length","checkedAll","setCheckedAll","useState","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n  PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n  anchor,\n  selectAllLabel,\n  searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = React.useMemo(() => options.length, [options]);\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      lengthOptions === (value as Data[])?.length\n        ? setCheckedAll(true)\n        : setCheckedAll(false);\n    }\n  }, [value, type, lengthOptions]);\n\n  const onClickCheckAll = React.useCallback(() => {\n    const items = options.map(option => option);\n    let aux;\n    setCheckedAll(prev => {\n      aux = !prev;\n      return !prev;\n    });\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  }, [options, setCheckedAll, onSelect]);\n\n  const onChange = React.useCallback(\n    text => setSearchArg(text),\n    [setSearchArg]\n  );\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <SearchInput\n                searchArg={searchArg}\n                onChange={onChange}\n                fullWidth={fullWidth}\n                placeholder={searchBarPlaceholder}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>{selectAllLabel}</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      {type === 'single' && !hideSearchBar && (\n        <PaddedContainer>\n          <SearchInput\n            searchArg={searchArg}\n            onChange={onChange}\n            fullWidth={fullWidth}\n            placeholder={searchBarPlaceholder}\n          />\n        </PaddedContainer>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {options.map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={keyExtractor(item)}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={lengthOptions}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","useDebouncedState","lengthOptions","React","useMemo","length","checkedAll","setCheckedAll","useState","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n  PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n  anchor,\n  selectAllLabel,\n  searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = React.useMemo(() => options.length, [options]);\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      lengthOptions === (value as Data[])?.length\n        ? setCheckedAll(true)\n        : setCheckedAll(false);\n    }\n  }, [value, type, lengthOptions]);\n\n  const onClickCheckAll = React.useCallback(() => {\n    const items = (options as Data[]).map(option => option);\n    let aux;\n    setCheckedAll(prev => {\n      aux = !prev;\n      return !prev;\n    });\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  }, [options, setCheckedAll, onSelect]);\n\n  const onChange = React.useCallback(\n    text => setSearchArg(text),\n    [setSearchArg]\n  );\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <SearchInput\n                searchArg={searchArg}\n                onChange={onChange}\n                fullWidth={fullWidth}\n                placeholder={searchBarPlaceholder}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>{selectAllLabel}</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      {type === 'single' && !hideSearchBar && (\n        <PaddedContainer>\n          <SearchInput\n            searchArg={searchArg}\n            onChange={onChange}\n            fullWidth={fullWidth}\n            placeholder={searchBarPlaceholder}\n          />\n        </PaddedContainer>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {(options as Data[]).map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={keyExtractor(item)}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={lengthOptions}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { TextProps } from '@tecsinapse/react-core';
 import React from 'react';
 export interface SelectProps<Data, Type extends 'single' | 'multi'> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    options: Data[];
+    options: ((searchInput?: string) => Promise<Data[]>) | Data[];
     onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
     value: Type extends 'single' ? Data | undefined : Data[];
     type: Type;
     keyExtractor: (t: Data, index?: number) => string;
     labelExtractor: (t: Data) => string;
     placeholder?: string;
-    onSearch?: (searchArg: string) => void | never;
+    onSearch?: ((searchArg: string) => void) | ((searchInput?: string) => Promise<Data[]>) | never;
     searchBarPlaceholder?: string;
     hideSearchBar?: boolean;
     selectAllLabel?: string;

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

@@ -7,7 +7,7 @@ exports.default = exports.Select = void 0;
 
 var _reactCore = require("@tecsinapse/react-core");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
@@ -21,7 +21,9 @@ var _functions = require("./functions");
 
 var _styled = require("./styled");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -47,9 +49,16 @@ const Select = _ref => {
 
   const [dropDownVisible, setDropDownVisible] = _react.default.useState(false);
 
+  const [selectOptions, setSelectOptions] = (0, _react.useState)([]);
+
   const refDropDown = _react.default.useRef(null);
 
   (0, _hooks.useClickAwayListener)(refDropDown, setDropDownVisible);
+  (0, _react.useEffect)(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
   const onlyLabel = label && !placeholder;
   const hasValue = type === 'single' ? !!value : (value || []).length > 0;
 
@@ -57,25 +66,72 @@ const Select = _ref => {
 
   const _label = hasValue ? label : undefined;
 
-  const displayValue = (0, _functions.getDisplayValue)(type, value, options, _placeholder, keyExtractor, labelExtractor);
+  const displayValue = (0, _functions.getDisplayValue)(type, value, selectOptions, _placeholder, keyExtractor, labelExtractor);
+  (0, _react.useEffect)(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+
+  const handleLazyFocus = _react.default.useCallback(async () => {
+    if (!dropDownVisible && typeof options === 'function') {
+      try {
+        const result = await options();
+
+        if (result) {
+          setSelectOptions(result);
+        }
+      } catch (e) {}
+    }
+  }, [options, value, setSelectOptions, dropDownVisible]);
+
+  const handleOnSearch = _react.default.useCallback(async searchInput => {
+    if (searchInput !== undefined && onSearch) {
+      try {
+        const result = await onSearch(searchInput);
+
+        if (result) {
+          if (type === 'single') {
+            if (value && !result.find(v => keyExtractor(value) === keyExtractor(v))) {
+              setSelectOptions([value, ...result]);
+            } else setSelectOptions(result);
+          } else {
+            if (value.length > 0) {
+              const selectedValues = value.filter(v => !result.find(current => keyExtractor(v) === keyExtractor(current))) || [];
+              setSelectOptions([...selectedValues, ...result]);
+            } else {
+              setSelectOptions(result);
+            }
+          }
+        }
+      } catch (e) {}
+    }
+  }, [options, value, keyExtractor]);
+
+  const handlePressInput = async () => {
+    await handleLazyFocus();
+  };
 
   const onPress = _react.default.useCallback(() => setDropDownVisible(prev => !prev), [setDropDownVisible]);
 
   return _react.default.createElement(_styled.StyledContainer, _extends({
     ref: refDropDown
-  }, rest), _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_reactCore.PressableInputContainer, {
+  }, rest), _react.default.createElement(_styled.StyledInputContainer, {
+    onFocus: handlePressInput
+  }, _react.default.createElement(_reactCore.PressableInputContainer, {
     label: _label,
     onPress: onPress,
     disabled: disabled,
     rightComponent: _styled.RightComponent
   }, _react.default.createElement(_reactCore.Text, _extends({}, displayTextProps, {
     ellipsizeMode: "tail",
-    numberOfLines: 1
+    numberOfLines: 1,
+    fontWeight: 'bold'
   }), displayValue))), _react.default.createElement(_reactTransitionGroup.Transition, {
     in: dropDownVisible,
     timeout: 300
   }, state => _react.default.createElement(_Dropdown.Dropdown, {
-    options: options,
+    options: selectOptions !== null && selectOptions !== void 0 ? selectOptions : [],
     onSelect: onSelect,
     value: value,
     type: type,
@@ -83,7 +139,7 @@ const Select = _ref => {
     labelExtractor: labelExtractor,
     hideSearchBar: hideSearchBar,
     searchBarPlaceholder: searchBarPlaceholder,
-    onSearch: onSearch,
+    onSearch: handleOnSearch,
     style: { ..._animations.defaultStyles,
       ..._animations.transition[anchor][state]
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","React","useState","refDropDown","useRef","useClickAwayListener","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","getDisplayValue","onPress","useCallback","prev","RightComponent","state","defaultStyles","transition"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n  PressableInputContainer,\n  Text,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n  RightComponent,\n  StyledContainer,\n  StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  options: 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  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  placeholder?: string;\n  onSearch?: (searchArg: string) => void | never;\n  searchBarPlaceholder?: string;\n  hideSearchBar?: boolean;\n  selectAllLabel?: string;\n  disabled?: boolean;\n  label?: string;\n  anchor?: 'top' | 'bottom';\n  displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n  value,\n  options,\n  keyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onSearch,\n  searchBarPlaceholder = 'Busque a opção desejada',\n  hideSearchBar = true,\n  label,\n  disabled = false,\n  anchor = 'bottom',\n  displayTextProps,\n  selectAllLabel = 'Selecionar todos',\n  ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setDropDownVisible);\n\n  const onlyLabel = label && !placeholder;\n  const hasValue =\n    type === 'single' ? !!value : ((value || []) as []).length > 0;\n  const _placeholder = onlyLabel ? label : placeholder;\n  const _label = hasValue ? label : undefined;\n\n  const displayValue = getDisplayValue<Data>(\n    type,\n    value,\n    options,\n    _placeholder,\n    keyExtractor,\n    labelExtractor\n  );\n\n  const onPress = React.useCallback(\n    () => setDropDownVisible(prev => !prev),\n    [setDropDownVisible]\n  );\n\n  return (\n    <StyledContainer ref={refDropDown} {...rest}>\n      <StyledInputContainer>\n        <PressableInputContainer\n          label={_label}\n          onPress={onPress}\n          disabled={disabled}\n          rightComponent={RightComponent}\n        >\n          <Text {...displayTextProps} ellipsizeMode=\"tail\" numberOfLines={1}>\n            {displayValue}\n          </Text>\n        </PressableInputContainer>\n      </StyledInputContainer>\n      <Transition in={dropDownVisible} timeout={300}>\n        {state => (\n          <Dropdown\n            options={options}\n            onSelect={onSelect}\n            value={value}\n            type={type}\n            keyExtractor={keyExtractor}\n            labelExtractor={labelExtractor}\n            hideSearchBar={hideSearchBar}\n            searchBarPlaceholder={searchBarPlaceholder}\n            onSearch={onSearch}\n            style={{ ...defaultStyles, ...transition[anchor][state] }}\n            setDropDownVisible={setDropDownVisible}\n            anchor={anchor}\n            selectAllLabel={selectAllLabel}\n          />\n        )}\n      </Transition>\n    </StyledContainer>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AA4BO,MAAMA,MAAM,GAAG,QAiBsB;EAAA,IAjBkB;IAC5DC,KAD4D;IAE5DC,OAF4D;IAG5DC,YAH4D;IAI5DC,QAJ4D;IAK5DC,IAL4D;IAM5DC,cAN4D;IAO5DC,WAP4D;IAQ5DC,QAR4D;IAS5DC,oBAAoB,GAAG,yBATqC;IAU5DC,aAAa,GAAG,IAV4C;IAW5DC,KAX4D;IAY5DC,QAAQ,GAAG,KAZiD;IAa5DC,MAAM,GAAG,QAbmD;IAc5DC,gBAd4D;IAe5DC,cAAc,GAAG,kBAf2C;IAgB5D,GAAGC;EAhByD,CAiBlB;;EAC1C,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCC,cAAA,CAAMC,QAAN,CAAwB,KAAxB,CAA9C;;EACA,MAAMC,WAAW,GAAGF,cAAA,CAAMG,MAAN,CAAa,IAAb,CAApB;;EACA,IAAAC,2BAAA,EAAqBF,WAArB,EAAkCH,kBAAlC;EAEA,MAAMM,SAAS,GAAGb,KAAK,IAAI,CAACJ,WAA5B;EACA,MAAMkB,QAAQ,GACZpB,IAAI,KAAK,QAAT,GAAoB,CAAC,CAACJ,KAAtB,GAA8B,CAAEA,KAAK,IAAI,EAAX,EAAsByB,MAAtB,GAA+B,CAD/D;;EAEA,MAAMC,YAAY,GAAGH,SAAS,GAAGb,KAAH,GAAWJ,WAAzC;;EACA,MAAMqB,MAAM,GAAGH,QAAQ,GAAGd,KAAH,GAAWkB,SAAlC;;EAEA,MAAMC,YAAY,GAAG,IAAAC,0BAAA,EACnB1B,IADmB,EAEnBJ,KAFmB,EAGnBC,OAHmB,EAInByB,YAJmB,EAKnBxB,YALmB,EAMnBG,cANmB,CAArB;;EASA,MAAM0B,OAAO,GAAGb,cAAA,CAAMc,WAAN,CACd,MAAMf,kBAAkB,CAACgB,IAAI,IAAI,CAACA,IAAV,CADV,EAEd,CAAChB,kBAAD,CAFc,CAAhB;;EAKA,OACE,6BAAC,uBAAD;IAAiB,GAAG,EAAEG;EAAtB,GAAuCL,IAAvC,GACE,6BAAC,4BAAD,QACE,6BAAC,kCAAD;IACE,KAAK,EAAEY,MADT;IAEE,OAAO,EAAEI,OAFX;IAGE,QAAQ,EAAEpB,QAHZ;IAIE,cAAc,EAAEuB;EAJlB,GAME,6BAAC,eAAD,eAAUrB,gBAAV;IAA4B,aAAa,EAAC,MAA1C;IAAiD,aAAa,EAAE;EAAhE,IACGgB,YADH,CANF,CADF,CADF,EAaE,6BAAC,gCAAD;IAAY,EAAE,EAAEb,eAAhB;IAAiC,OAAO,EAAE;EAA1C,GACGmB,KAAK,IACJ,6BAAC,kBAAD;IACE,OAAO,EAAElC,OADX;IAEE,QAAQ,EAAEE,QAFZ;IAGE,KAAK,EAAEH,KAHT;IAIE,IAAI,EAAEI,IAJR;IAKE,YAAY,EAAEF,YALhB;IAME,cAAc,EAAEG,cANlB;IAOE,aAAa,EAAEI,aAPjB;IAQE,oBAAoB,EAAED,oBARxB;IASE,QAAQ,EAAED,QATZ;IAUE,KAAK,EAAE,EAAE,GAAG6B,yBAAL;MAAoB,GAAGC,sBAAA,CAAWzB,MAAX,EAAmBuB,KAAnB;IAAvB,CAVT;IAWE,kBAAkB,EAAElB,kBAXtB;IAYE,MAAM,EAAEL,MAZV;IAaE,cAAc,EAAEE;EAblB,EAFJ,CAbF,CADF;AAmCD,CA7EM;;;eA+EQf,M"}
+{"version":3,"file":"Select.js","names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","React","useState","selectOptions","setSelectOptions","refDropDown","useRef","useClickAwayListener","useEffect","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","getDisplayValue","handleLazyFocus","useCallback","result","e","handleOnSearch","searchInput","find","v","selectedValues","filter","current","handlePressInput","onPress","prev","RightComponent","state","defaultStyles","transition"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n  PressableInputContainer,\n  Text,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n  RightComponent,\n  StyledContainer,\n  StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  placeholder?: string;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  hideSearchBar?: boolean;\n  selectAllLabel?: string;\n  disabled?: boolean;\n  label?: string;\n  anchor?: 'top' | 'bottom';\n  displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n  value,\n  options,\n  keyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onSearch,\n  searchBarPlaceholder = 'Busque a opção desejada',\n  hideSearchBar = true,\n  label,\n  disabled = false,\n  anchor = 'bottom',\n  displayTextProps,\n  selectAllLabel = 'Selecionar todos',\n  ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setDropDownVisible);\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  // TODO: Add Skeleton to modal height when loading is true\n\n  const onlyLabel = label && !placeholder;\n  const hasValue =\n    type === 'single' ? !!value : ((value || []) as []).length > 0;\n  const _placeholder = onlyLabel ? label : placeholder;\n  const _label = hasValue ? label : undefined;\n\n  const displayValue = getDisplayValue<Data>(\n    type,\n    value,\n    selectOptions,\n    _placeholder,\n    keyExtractor,\n    labelExtractor\n  );\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  const handleLazyFocus = React.useCallback(async () => {\n    if (!dropDownVisible && typeof options === 'function') {\n      try {\n        const result = await options();\n        if (result) {\n          setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      }\n    }\n  }, [options, value, setSelectOptions, dropDownVisible]);\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        try {\n          //TODO: Remove code duplicated below (Select in react-native-kit)\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        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const handlePressInput = async () => {\n    await handleLazyFocus();\n  };\n\n  const onPress = React.useCallback(\n    () => setDropDownVisible(prev => !prev),\n    [setDropDownVisible]\n  );\n\n  return (\n    <StyledContainer ref={refDropDown} {...rest}>\n      <StyledInputContainer onFocus={handlePressInput}>\n        <PressableInputContainer\n          label={_label}\n          onPress={onPress}\n          disabled={disabled}\n          rightComponent={RightComponent}\n        >\n          <Text\n            {...displayTextProps}\n            ellipsizeMode=\"tail\"\n            numberOfLines={1}\n            fontWeight={'bold'}\n          >\n            {displayValue}\n          </Text>\n        </PressableInputContainer>\n      </StyledInputContainer>\n      <Transition in={dropDownVisible} timeout={300}>\n        {state => (\n          <Dropdown\n            options={selectOptions ?? []}\n            onSelect={onSelect}\n            value={value}\n            type={type}\n            keyExtractor={keyExtractor}\n            labelExtractor={labelExtractor}\n            hideSearchBar={hideSearchBar}\n            searchBarPlaceholder={searchBarPlaceholder}\n            onSearch={handleOnSearch}\n            style={{ ...defaultStyles, ...transition[anchor][state] }}\n            setDropDownVisible={setDropDownVisible}\n            anchor={anchor}\n            selectAllLabel={selectAllLabel}\n          />\n        )}\n      </Transition>\n    </StyledContainer>\n  );\n};\n\nexport default Select;\n"],"mappings":"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"}

package/esm/components/molecules/Select/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["React","Checkbox","Text","useDebouncedState","ItemSelect","SearchBarContainer","StyledContainerCheckAll","StyledContainerDropdown","StyledContainerTextLabel","StyledSpan","OptionsContainer","PaddedContainer","SearchInput","fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","lengthOptions","useMemo","length","useState","checkedAll","setCheckedAll","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n  PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n  anchor,\n  selectAllLabel,\n  searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = React.useMemo(() => options.length, [options]);\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      lengthOptions === (value as Data[])?.length\n        ? setCheckedAll(true)\n        : setCheckedAll(false);\n    }\n  }, [value, type, lengthOptions]);\n\n  const onClickCheckAll = React.useCallback(() => {\n    const items = options.map(option => option);\n    let aux;\n    setCheckedAll(prev => {\n      aux = !prev;\n      return !prev;\n    });\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  }, [options, setCheckedAll, onSelect]);\n\n  const onChange = React.useCallback(\n    text => setSearchArg(text),\n    [setSearchArg]\n  );\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <SearchInput\n                searchArg={searchArg}\n                onChange={onChange}\n                fullWidth={fullWidth}\n                placeholder={searchBarPlaceholder}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>{selectAllLabel}</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      {type === 'single' && !hideSearchBar && (\n        <PaddedContainer>\n          <SearchInput\n            searchArg={searchArg}\n            onChange={onChange}\n            fullWidth={fullWidth}\n            placeholder={searchBarPlaceholder}\n          />\n        </PaddedContainer>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {options.map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={keyExtractor(item)}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={lengthOptions}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["React","Checkbox","Text","useDebouncedState","ItemSelect","SearchBarContainer","StyledContainerCheckAll","StyledContainerDropdown","StyledContainerTextLabel","StyledSpan","OptionsContainer","PaddedContainer","SearchInput","fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","lengthOptions","useMemo","length","useState","checkedAll","setCheckedAll","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n  PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n  anchor,\n  selectAllLabel,\n  searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = React.useMemo(() => options.length, [options]);\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      lengthOptions === (value as Data[])?.length\n        ? setCheckedAll(true)\n        : setCheckedAll(false);\n    }\n  }, [value, type, lengthOptions]);\n\n  const onClickCheckAll = React.useCallback(() => {\n    const items = (options as Data[]).map(option => option);\n    let aux;\n    setCheckedAll(prev => {\n      aux = !prev;\n      return !prev;\n    });\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  }, [options, setCheckedAll, onSelect]);\n\n  const onChange = React.useCallback(\n    text => setSearchArg(text),\n    [setSearchArg]\n  );\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <SearchInput\n                searchArg={searchArg}\n                onChange={onChange}\n                fullWidth={fullWidth}\n                placeholder={searchBarPlaceholder}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>{selectAllLabel}</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      {type === 'single' && !hideSearchBar && (\n        <PaddedContainer>\n          <SearchInput\n            searchArg={searchArg}\n            onChange={onChange}\n            fullWidth={fullWidth}\n            placeholder={searchBarPlaceholder}\n          />\n        </PaddedContainer>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {(options as Data[]).map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={keyExtractor(item)}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={lengthOptions}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { TextProps } from '@tecsinapse/react-core';
 import React from 'react';
 export interface SelectProps<Data, Type extends 'single' | 'multi'> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    options: Data[];
+    options: ((searchInput?: string) => Promise<Data[]>) | Data[];
     onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
     value: Type extends 'single' ? Data | undefined : Data[];
     type: Type;
     keyExtractor: (t: Data, index?: number) => string;
     labelExtractor: (t: Data) => string;
     placeholder?: string;
-    onSearch?: (searchArg: string) => void | never;
+    onSearch?: ((searchArg: string) => void) | ((searchInput?: string) => Promise<Data[]>) | never;
     searchBarPlaceholder?: string;
     hideSearchBar?: boolean;
     selectAllLabel?: string;

package/esm/components/molecules/Select/Select.js

@@ -1,3 +1,5 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 var _excluded = ["value", "options", "keyExtractor", "onSelect", "type", "labelExtractor", "placeholder", "onSearch", "searchBarPlaceholder", "hideSearchBar", "label", "disabled", "anchor", "displayTextProps", "selectAllLabel"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -8,6 +10,20 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _regeneratorRuntime() { "use strict"; _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,7 +41,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { PressableInputContainer, Text } from '@tecsinapse/react-core';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import { useClickAwayListener } from "../../../hooks";
 import { defaultStyles, transition } from "./animations";
@@ -60,8 +76,18 @@ export var Select = function Select(_ref) {
       dropDownVisible = _React$useState2[0],
       setDropDownVisible = _React$useState2[1];
 
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectOptions = _useState2[0],
+      setSelectOptions = _useState2[1];
+
   var refDropDown = React.useRef(null);
   useClickAwayListener(refDropDown, setDropDownVisible);
+  useEffect(function () {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
   var onlyLabel = label && !placeholder;
   var hasValue = type === 'single' ? !!value : (value || []).length > 0;
 
@@ -69,7 +95,130 @@ export var Select = function Select(_ref) {
 
   var _label = hasValue ? label : undefined;
 
-  var displayValue = getDisplayValue(type, value, options, _placeholder, keyExtractor, labelExtractor);
+  var displayValue = getDisplayValue(type, value, selectOptions, _placeholder, keyExtractor, labelExtractor);
+  useEffect(function () {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+  var handleLazyFocus = React.useCallback(_asyncToGenerator(_regeneratorRuntime().mark(function _callee() {
+    var result;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!dropDownVisible && typeof options === 'function')) {
+              _context.next = 10;
+              break;
+            }
+
+            _context.prev = 1;
+            _context.next = 4;
+            return options();
+
+          case 4:
+            result = _context.sent;
+
+            if (result) {
+              setSelectOptions(result);
+            }
+
+            _context.next = 10;
+            break;
+
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 8]]);
+  })), [options, value, setSelectOptions, dropDownVisible]);
+  var handleOnSearch = React.useCallback(function () {
+    var _ref3 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee2(searchInput) {
+      var result, selectedValues;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(searchInput !== undefined && onSearch)) {
+                _context2.next = 10;
+                break;
+              }
+
+              _context2.prev = 1;
+              _context2.next = 4;
+              return onSearch(searchInput);
+
+            case 4:
+              result = _context2.sent;
+
+              if (result) {
+                if (type === 'single') {
+                  if (value && !result.find(function (v) {
+                    return keyExtractor(value) === keyExtractor(v);
+                  })) {
+                    setSelectOptions([value].concat(_toConsumableArray(result)));
+                  } else setSelectOptions(result);
+                } else {
+                  if (value.length > 0) {
+                    selectedValues = value.filter(function (v) {
+                      return !result.find(function (current) {
+                        return keyExtractor(v) === keyExtractor(current);
+                      });
+                    }) || [];
+                    setSelectOptions([].concat(_toConsumableArray(selectedValues), _toConsumableArray(result)));
+                  } else {
+                    setSelectOptions(result);
+                  }
+                }
+              }
+
+              _context2.next = 10;
+              break;
+
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](1);
+
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 8]]);
+    }));
+
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [options, value, keyExtractor]);
+
+  var handlePressInput = function () {
+    var _ref4 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee3() {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return handleLazyFocus();
+
+            case 2:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function handlePressInput() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
   var onPress = React.useCallback(function () {
     return setDropDownVisible(function (prev) {
       return !prev;
@@ -77,20 +226,23 @@ export var Select = function Select(_ref) {
   }, [setDropDownVisible]);
   return React.createElement(StyledContainer, _extends({
     ref: refDropDown
-  }, rest), React.createElement(StyledInputContainer, null, React.createElement(PressableInputContainer, {
+  }, rest), React.createElement(StyledInputContainer, {
+    onFocus: handlePressInput
+  }, React.createElement(PressableInputContainer, {
     label: _label,
     onPress: onPress,
     disabled: disabled,
     rightComponent: RightComponent
   }, React.createElement(Text, _extends({}, displayTextProps, {
     ellipsizeMode: "tail",
-    numberOfLines: 1
+    numberOfLines: 1,
+    fontWeight: 'bold'
   }), displayValue))), React.createElement(Transition, {
     "in": dropDownVisible,
     timeout: 300
   }, function (state) {
     return React.createElement(Dropdown, {
-      options: options,
+      options: selectOptions !== null && selectOptions !== void 0 ? selectOptions : [],
       onSelect: onSelect,
       value: value,
       type: type,
@@ -98,7 +250,7 @@ export var Select = function Select(_ref) {
       labelExtractor: labelExtractor,
       hideSearchBar: hideSearchBar,
       searchBarPlaceholder: searchBarPlaceholder,
-      onSearch: onSearch,
+      onSearch: handleOnSearch,
       style: _objectSpread(_objectSpread({}, defaultStyles), transition[anchor][state]),
       setDropDownVisible: setDropDownVisible,
       anchor: anchor,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["PressableInputContainer","Text","React","Transition","useClickAwayListener","defaultStyles","transition","Dropdown","getDisplayValue","RightComponent","StyledContainer","StyledInputContainer","Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","useState","dropDownVisible","setDropDownVisible","refDropDown","useRef","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","onPress","useCallback","prev","state"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n  PressableInputContainer,\n  Text,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n  RightComponent,\n  StyledContainer,\n  StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  options: 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  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  placeholder?: string;\n  onSearch?: (searchArg: string) => void | never;\n  searchBarPlaceholder?: string;\n  hideSearchBar?: boolean;\n  selectAllLabel?: string;\n  disabled?: boolean;\n  label?: string;\n  anchor?: 'top' | 'bottom';\n  displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n  value,\n  options,\n  keyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onSearch,\n  searchBarPlaceholder = 'Busque a opção desejada',\n  hideSearchBar = true,\n  label,\n  disabled = false,\n  anchor = 'bottom',\n  displayTextProps,\n  selectAllLabel = 'Selecionar todos',\n  ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setDropDownVisible);\n\n  const onlyLabel = label && !placeholder;\n  const hasValue =\n    type === 'single' ? !!value : ((value || []) as []).length > 0;\n  const _placeholder = onlyLabel ? label : placeholder;\n  const _label = hasValue ? label : undefined;\n\n  const displayValue = getDisplayValue<Data>(\n    type,\n    value,\n    options,\n    _placeholder,\n    keyExtractor,\n    labelExtractor\n  );\n\n  const onPress = React.useCallback(\n    () => setDropDownVisible(prev => !prev),\n    [setDropDownVisible]\n  );\n\n  return (\n    <StyledContainer ref={refDropDown} {...rest}>\n      <StyledInputContainer>\n        <PressableInputContainer\n          label={_label}\n          onPress={onPress}\n          disabled={disabled}\n          rightComponent={RightComponent}\n        >\n          <Text {...displayTextProps} ellipsizeMode=\"tail\" numberOfLines={1}>\n            {displayValue}\n          </Text>\n        </PressableInputContainer>\n      </StyledInputContainer>\n      <Transition in={dropDownVisible} timeout={300}>\n        {state => (\n          <Dropdown\n            options={options}\n            onSelect={onSelect}\n            value={value}\n            type={type}\n            keyExtractor={keyExtractor}\n            labelExtractor={labelExtractor}\n            hideSearchBar={hideSearchBar}\n            searchBarPlaceholder={searchBarPlaceholder}\n            onSearch={onSearch}\n            style={{ ...defaultStyles, ...transition[anchor][state] }}\n            setDropDownVisible={setDropDownVisible}\n            anchor={anchor}\n            selectAllLabel={selectAllLabel}\n          />\n        )}\n      </Transition>\n    </StyledContainer>\n  );\n};\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["PressableInputContainer","Text","React","useEffect","useState","Transition","useClickAwayListener","defaultStyles","transition","Dropdown","getDisplayValue","RightComponent","StyledContainer","StyledInputContainer","Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","selectOptions","setSelectOptions","refDropDown","useRef","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","handleLazyFocus","useCallback","result","handleOnSearch","searchInput","find","v","selectedValues","filter","current","handlePressInput","onPress","prev","state"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n  PressableInputContainer,\n  Text,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n  RightComponent,\n  StyledContainer,\n  StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  placeholder?: string;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  hideSearchBar?: boolean;\n  selectAllLabel?: string;\n  disabled?: boolean;\n  label?: string;\n  anchor?: 'top' | 'bottom';\n  displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n  value,\n  options,\n  keyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onSearch,\n  searchBarPlaceholder = 'Busque a opção desejada',\n  hideSearchBar = true,\n  label,\n  disabled = false,\n  anchor = 'bottom',\n  displayTextProps,\n  selectAllLabel = 'Selecionar todos',\n  ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setDropDownVisible);\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  // TODO: Add Skeleton to modal height when loading is true\n\n  const onlyLabel = label && !placeholder;\n  const hasValue =\n    type === 'single' ? !!value : ((value || []) as []).length > 0;\n  const _placeholder = onlyLabel ? label : placeholder;\n  const _label = hasValue ? label : undefined;\n\n  const displayValue = getDisplayValue<Data>(\n    type,\n    value,\n    selectOptions,\n    _placeholder,\n    keyExtractor,\n    labelExtractor\n  );\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  const handleLazyFocus = React.useCallback(async () => {\n    if (!dropDownVisible && typeof options === 'function') {\n      try {\n        const result = await options();\n        if (result) {\n          setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      }\n    }\n  }, [options, value, setSelectOptions, dropDownVisible]);\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        try {\n          //TODO: Remove code duplicated below (Select in react-native-kit)\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        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const handlePressInput = async () => {\n    await handleLazyFocus();\n  };\n\n  const onPress = React.useCallback(\n    () => setDropDownVisible(prev => !prev),\n    [setDropDownVisible]\n  );\n\n  return (\n    <StyledContainer ref={refDropDown} {...rest}>\n      <StyledInputContainer onFocus={handlePressInput}>\n        <PressableInputContainer\n          label={_label}\n          onPress={onPress}\n          disabled={disabled}\n          rightComponent={RightComponent}\n        >\n          <Text\n            {...displayTextProps}\n            ellipsizeMode=\"tail\"\n            numberOfLines={1}\n            fontWeight={'bold'}\n          >\n            {displayValue}\n          </Text>\n        </PressableInputContainer>\n      </StyledInputContainer>\n      <Transition in={dropDownVisible} timeout={300}>\n        {state => (\n          <Dropdown\n            options={selectOptions ?? []}\n            onSelect={onSelect}\n            value={value}\n            type={type}\n            keyExtractor={keyExtractor}\n            labelExtractor={labelExtractor}\n            hideSearchBar={hideSearchBar}\n            searchBarPlaceholder={searchBarPlaceholder}\n            onSearch={handleOnSearch}\n            style={{ ...defaultStyles, ...transition[anchor][state] }}\n            setDropDownVisible={setDropDownVisible}\n            anchor={anchor}\n            selectAllLabel={selectAllLabel}\n          />\n        )}\n      </Transition>\n    </StyledContainer>\n  );\n};\n\nexport default Select;\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.21.1",
+  "version": "1.21.2",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "types": "dist/index.d.ts",
@@ -41,5 +41,5 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native-web": "^0.17.1 || ^0.18.0"
   },
-  "gitHead": "2062ee0d597c89feb63e3a2025e7238353c21fe4"
+  "gitHead": "fc41b0bbabd900145562a1b741dd3d0afb5dd8e8"
 }

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

@@ -48,7 +48,7 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
   }, [value, type, lengthOptions]);
 
   const onClickCheckAll = React.useCallback(() => {
-    const items = options.map(option => option);
+    const items = (options as Data[]).map(option => option);
     let aux;
     setCheckedAll(prev => {
       aux = !prev;
@@ -104,7 +104,7 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
         </PaddedContainer>
       )}
       <OptionsContainer lengthOptions={options.length}>
-        {options.map((item, index) => (
+        {(options as Data[]).map((item, index) => (
           <ItemSelect
             type={type}
             key={keyExtractor(item)}

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

@@ -28,7 +28,7 @@ const TemplateSingle: Story<SelectProps<Option, 'single'>> = ({
   ...args
 }) => {
   const [singleValue, setSingleValue] = useState(undefined);
-  const [options, setOptions] = useState(_options);
+  const [options, setOptions] = useState(_options as Option[]);
 
   const handleSelectSingleValue = React.useCallback(
     key => setSingleValue(key),
@@ -40,7 +40,9 @@ const TemplateSingle: Story<SelectProps<Option, 'single'>> = ({
 
   const handleSearch = React.useCallback((searchArg: string) => {
     setOptions(
-      _options.filter(item => new RegExp(searchArg, 'ig').test(item.label))
+      (_options as Option[]).filter(item =>
+        new RegExp(searchArg, 'ig').test(item.label)
+      )
     );
   }, []);
 
@@ -76,7 +78,7 @@ const TemplateMulti: Story<SelectProps<Option, 'multi'>> = ({
   ...args
 }) => {
   const [multiValue, setMultiValue] = useState([]);
-  const [options, setOptions] = useState(_options);
+  const [options, setOptions] = useState(_options as Option[]);
 
   const handleSelectMultipleValues = React.useCallback(
     keys => setMultiValue(keys),
@@ -88,7 +90,9 @@ const TemplateMulti: Story<SelectProps<Option, 'multi'>> = ({
 
   const handleSearch = React.useCallback((searchArg: string) => {
     setOptions(
-      _options.filter(item => new RegExp(searchArg, 'ig').test(item.label))
+      (_options as Option[]).filter(item =>
+        new RegExp(searchArg, 'ig').test(item.label)
+      )
     );
   }, []);
 
@@ -119,6 +123,70 @@ Multi.args = {
   hideSearchBar: false,
 };
 
+const TemplateMultiLazy: Story<SelectProps<Option, 'multi'>> = ({
+  options: _options,
+  ...args
+}) => {
+  const fetchUsers = async () => {
+    return await fetch('https://jsonplaceholder.typicode.com/users', {
+      method: 'GET',
+    }).then(data => data.json());
+  };
+
+  const fetchPromise: (
+    searchInput: string | undefined
+  ) => Promise<{ value: string; label: string }[]> = React.useCallback(
+    async (searchInput: string | undefined) => {
+      const dataTest = await fetchUsers();
+      return (dataTest || [])
+        .map(item => ({
+          value: item.id,
+          label: item.name,
+        }))
+        .filter(value => {
+          if (searchInput) return value.label.includes(searchInput);
+          else return true;
+        });
+    },
+    []
+  );
+
+  const [multiValue, setMultiValue] = useState([]);
+
+  const handleSelectMultipleValues = React.useCallback(
+    keys => setMultiValue(keys),
+    [setMultiValue]
+  );
+
+  const labelExtractor = React.useCallback(item => item.label, []);
+  const keyExtractor = React.useCallback(item => String(item.value), []);
+
+  return (
+    <Container>
+      <ContainerSelect>
+        <Select
+          {...args}
+          options={fetchPromise}
+          value={multiValue}
+          type="multi"
+          onSelect={handleSelectMultipleValues}
+          labelExtractor={labelExtractor}
+          keyExtractor={keyExtractor}
+          onSearch={fetchPromise}
+        />
+      </ContainerSelect>
+    </Container>
+  );
+};
+
+export const Lazy = TemplateMultiLazy.bind({});
+
+Lazy.args = {
+  placeholder: 'Placeholder do select',
+  label: 'Label',
+  hideSearchBar: false,
+};
+
 const Container = styled('div')`
   width: 100%;
   height: 100%;

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

@@ -3,7 +3,7 @@ import {
   Text,
   TextProps,
 } from '@tecsinapse/react-core';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import { useClickAwayListener } from '../../../hooks';
 import { defaultStyles, transition } from './animations';
@@ -17,7 +17,7 @@ import {
 
 export interface SelectProps<Data, Type extends 'single' | 'multi'>
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  options: Data[];
+  options: ((searchInput?: string) => Promise<Data[]>) | Data[];
   onSelect: (
     option: Type extends 'single' ? Data | undefined : Data[]
   ) => never | void;
@@ -26,7 +26,10 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'>
   keyExtractor: (t: Data, index?: number) => string;
   labelExtractor: (t: Data) => string;
   placeholder?: string;
-  onSearch?: (searchArg: string) => void | never;
+  onSearch?:
+    | ((searchArg: string) => void)
+    | ((searchInput?: string) => Promise<Data[]>)
+    | never;
   searchBarPlaceholder?: string;
   hideSearchBar?: boolean;
   selectAllLabel?: string;
@@ -56,9 +59,18 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
   ...rest
 }: SelectProps<Data, Type>): JSX.Element => {
   const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);
+  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
   const refDropDown = React.useRef(null);
   useClickAwayListener(refDropDown, setDropDownVisible);
 
+  useEffect(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+
+  // TODO: Add Skeleton to modal height when loading is true
+
   const onlyLabel = label && !placeholder;
   const hasValue =
     type === 'single' ? !!value : ((value || []) as []).length > 0;
@@ -68,12 +80,75 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
   const displayValue = getDisplayValue<Data>(
     type,
     value,
-    options,
+    selectOptions,
     _placeholder,
     keyExtractor,
     labelExtractor
   );
 
+  useEffect(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+
+  const handleLazyFocus = React.useCallback(async () => {
+    if (!dropDownVisible && typeof options === 'function') {
+      try {
+        const result = await options();
+        if (result) {
+          setSelectOptions(result);
+        }
+      } catch (e) {
+        // TODO: Catch error
+      }
+    }
+  }, [options, value, setSelectOptions, dropDownVisible]);
+
+  const handleOnSearch = React.useCallback(
+    async (searchInput: string | undefined) => {
+      if (searchInput !== undefined && onSearch) {
+        try {
+          //TODO: Remove code duplicated below (Select in react-native-kit)
+          const result = await onSearch(searchInput);
+          if (result) {
+            if (type === 'single') {
+              if (
+                value &&
+                !result.find(
+                  v => keyExtractor(value as Data) === keyExtractor(v)
+                )
+              ) {
+                setSelectOptions([value as Data, ...result]);
+              } else setSelectOptions(result);
+            } else {
+              if ((value as Data[]).length > 0) {
+                const selectedValues =
+                  (value as Data[]).filter(
+                    v =>
+                      !result.find(
+                        current =>
+                          keyExtractor(v as Data) === keyExtractor(current)
+                      )
+                  ) || [];
+                setSelectOptions([...selectedValues, ...result]);
+              } else {
+                setSelectOptions(result);
+              }
+            }
+          }
+        } catch (e) {
+          // TODO: Catch error
+        }
+      }
+    },
+    [options, value, keyExtractor]
+  );
+
+  const handlePressInput = async () => {
+    await handleLazyFocus();
+  };
+
   const onPress = React.useCallback(
     () => setDropDownVisible(prev => !prev),
     [setDropDownVisible]
@@ -81,14 +156,19 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
 
   return (
     <StyledContainer ref={refDropDown} {...rest}>
-      <StyledInputContainer>
+      <StyledInputContainer onFocus={handlePressInput}>
         <PressableInputContainer
           label={_label}
           onPress={onPress}
           disabled={disabled}
           rightComponent={RightComponent}
         >
-          <Text {...displayTextProps} ellipsizeMode="tail" numberOfLines={1}>
+          <Text
+            {...displayTextProps}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            fontWeight={'bold'}
+          >
             {displayValue}
           </Text>
         </PressableInputContainer>
@@ -96,7 +176,7 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
       <Transition in={dropDownVisible} timeout={300}>
         {state => (
           <Dropdown
-            options={options}
+            options={selectOptions ?? []}
             onSelect={onSelect}
             value={value}
             type={type}
@@ -104,7 +184,7 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
             labelExtractor={labelExtractor}
             hideSearchBar={hideSearchBar}
             searchBarPlaceholder={searchBarPlaceholder}
-            onSearch={onSearch}
+            onSearch={handleOnSearch}
             style={{ ...defaultStyles, ...transition[anchor][state] }}
             setDropDownVisible={setDropDownVisible}
             anchor={anchor}