@tecsinapse/react-web-kit 1.21.1 → 1.22.0-beta.11

package/esm/hooks/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","names":["React","useWindowSize","useState","width","undefined","height","windowSize","setWindowSize","useEffect","handleResize","window","innerWidth","innerHeight","addEventListener","removeEventListener"],"sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import React from 'react';\n\ntype WindowSize = {\n  width: number | undefined;\n  height: number | undefined;\n};\n\nexport const useWindowSize = (): WindowSize => {\n  const [windowSize, setWindowSize] = React.useState<WindowSize>({\n    width: undefined,\n    height: undefined,\n  });\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  return windowSize;\n};\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAOA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAkB;EAC7C,sBAAoCD,KAAK,CAACE,QAAN,CAA2B;IAC7DC,KAAK,EAAEC,SADsD;IAE7DC,MAAM,EAAED;EAFqD,CAA3B,CAApC;EAAA;EAAA,IAAOE,UAAP;EAAA,IAAmBC,aAAnB;;EAIAP,KAAK,CAACQ,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzBF,aAAa,CAAC;QACZJ,KAAK,EAAEO,MAAM,CAACC,UADF;QAEZN,MAAM,EAAEK,MAAM,CAACE;MAFH,CAAD,CAAb;IAID,CALD;;IAMAF,MAAM,CAACG,gBAAP,CAAwB,QAAxB,EAAkCJ,YAAlC;IACAA,YAAY;IACZ,OAAO;MAAA,OAAMC,MAAM,CAACI,mBAAP,CAA2B,QAA3B,EAAqCL,YAArC,CAAN;IAAA,CAAP;EACD,CAVD,EAUG,EAVH;EAWA,OAAOH,UAAP;AACD,CAjBM"}
+{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import React from 'react';\n\ntype WindowSize = {\n  width: number | undefined;\n  height: number | undefined;\n};\n\nexport const useWindowSize = (): WindowSize => {\n  const [windowSize, setWindowSize] = React.useState<WindowSize>({\n    width: undefined,\n    height: undefined,\n  });\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  return windowSize;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,gBAAgB,MAAkB;AAC7C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,MAAM,QAAqB,CAAA;AAAA,IAC7D,KAAO,EAAA,KAAA,CAAA;AAAA,IACP,MAAQ,EAAA,KAAA,CAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAc,aAAA,CAAA;AAAA,QACZ,OAAO,MAAO,CAAA,UAAA;AAAA,QACd,QAAQ,MAAO,CAAA,WAAA;AAAA,OAChB,CAAA,CAAA;AAAA,KACH,CAAA;AACA,IAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA,CAAA;AAC9C,IAAa,YAAA,EAAA,CAAA;AACb,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AAAA,GAChE,EAAG,EAAE,CAAA,CAAA;AACL,EAAO,OAAA,UAAA,CAAA;AACT;;;;"}

package/esm/index.js

@@ -1,25 +1,29 @@
 export * from '@tecsinapse/react-core';
 export { Icon, Text } from '@tecsinapse/react-core';
-export { Accordion } from "./components/atoms/Accordion";
-export { default as Badge } from "./components/atoms/Badge/Badge";
-export { Button, useMouseHover } from "./components/atoms/Button";
-export { Input } from "./components/atoms/Input";
-export { InputMask } from "./components/atoms/InputMask";
-export { Modal } from "./components/atoms/Modal";
-export { Skeleton } from "./components/atoms/Skeleton";
-export { Tag } from "./components/atoms/Tag";
-export { Tooltip } from "./components/atoms/Tooltip";
-export { Breadcrumbs } from "./components/molecules/Breadcrumbs";
-export { DatePicker } from "./components/molecules/DatePicker";
-export { DateTimePicker } from "./components/molecules/DateTimePicker";
-export { Drawer } from "./components/molecules/Drawer";
-export { Grid, GridItem } from "./components/molecules/Grid";
-export { InputPassword } from "./components/molecules/InputPassword";
-export { LabeledSwitch } from "./components/molecules/LabeledSwitch";
-export { Menubar } from "./components/molecules/Menubar";
-export { Select } from "./components/molecules/Select";
-export { Snackbar } from "./components/molecules/Snackbar";
-export { TextArea } from "./components/molecules/TextArea";
-export { DataGrid } from "./components/organisms/DataGrid";
-export * from "./hooks";
-//# sourceMappingURL=index.js.map
+export { default as Accordion } from './components/atoms/Accordion/Accordion.js';
+export { default as Badge } from './components/atoms/Badge/Badge.js';
+export { default as Button } from './components/atoms/Button/Button.js';
+export { useMouseHover } from './components/atoms/Button/hooks/useMouseHover.js';
+export { default as Input } from './components/atoms/Input/Input.js';
+export { default as InputMask } from './components/atoms/InputMask/InputMask.js';
+export { default as Modal } from './components/atoms/Modal/Modal.js';
+export { default as Skeleton } from './components/atoms/Skeleton/Skeleton.js';
+export { default as Tag } from './components/atoms/Tag/Tag.js';
+export { default as Tooltip } from './components/atoms/Tooltip/Tooltip.js';
+export { default as Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs.js';
+export { DatePicker } from './components/molecules/DatePicker/DatePicker.js';
+export { DateTimePicker } from './components/molecules/DateTimePicker/DateTimePicker.js';
+export { default as Drawer } from './components/molecules/Drawer/Drawer.js';
+export { default as GridItem } from './components/molecules/Grid/Item/Item.js';
+export { default as Grid } from './components/molecules/Grid/Grid.js';
+export { default as InputPassword } from './components/molecules/InputPassword/InputPassword.js';
+export { default as LabeledSwitch } from './components/molecules/LabeledSwitch/LabeledSwitch.js';
+export { default as Menubar } from './components/molecules/Menubar/Menubar.js';
+export { default as Select } from './components/molecules/Select/Select.js';
+export { default as Snackbar } from './components/molecules/Snackbar/Snackbar.js';
+export { default as TextArea } from './components/molecules/TextArea/TextArea.js';
+export { default as DataGrid } from './components/organisms/DataGrid/DataGrid.js';
+export { useBreakpoints } from './hooks/useBreakpoints.js';
+export { useClickAwayListener } from './hooks/useClickAwayListener.js';
+export { useWindowSize } from './hooks/useWindowSize.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","Text","Accordion","default","Badge","Button","useMouseHover","Input","InputMask","Modal","Skeleton","Tag","Tooltip","Breadcrumbs","DatePicker","DateTimePicker","Drawer","Grid","GridItem","InputPassword","LabeledSwitch","Menubar","Select","Snackbar","TextArea","DataGrid"],"sources":["../src/index.ts"],"sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Icon, Text } from '@tecsinapse/react-core';\nexport { Accordion } from './components/atoms/Accordion';\nexport type { AccordionProps } from './components/atoms/Accordion';\nexport { default as Badge } from './components/atoms/Badge/Badge';\nexport type { BadgeWebProps } from './components/atoms/Badge/Badge';\nexport { Button, useMouseHover } from './components/atoms/Button';\nexport type { WebButtonProps } from './components/atoms/Button';\nexport { Input } from './components/atoms/Input';\nexport type { InputWebProps } from './components/atoms/Input';\nexport { InputMask } from './components/atoms/InputMask';\nexport type { InputMaskWebProps } from './components/atoms/InputMask';\nexport { Modal } from './components/atoms/Modal';\nexport type { ModalProps } from './components/atoms/Modal';\nexport { Skeleton } from './components/atoms/Skeleton';\nexport type { SkeletonProps } from './components/atoms/Skeleton';\nexport { Tag } from './components/atoms/Tag';\nexport type { TagProps } from './components/atoms/Tag';\nexport { Tooltip } from './components/atoms/Tooltip';\nexport type { ITooltip } from './components/atoms/Tooltip';\nexport { Breadcrumbs } from './components/molecules/Breadcrumbs';\nexport type {\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { DatePicker } from './components/molecules/DatePicker';\nexport type { WebDatePickerProps } from './components/molecules/DatePicker';\nexport { DateTimePicker } from './components/molecules/DateTimePicker';\nexport type { WebDateTimePickerProps } from './components/molecules/DateTimePicker';\nexport { Drawer } from './components/molecules/Drawer';\nexport type { DrawerProps } from './components/molecules/Drawer';\nexport { Grid, GridItem } from './components/molecules/Grid';\nexport type { IGridWeb, IGridItemWeb } from './components/molecules/Grid';\nexport { InputPassword } from './components/molecules/InputPassword';\nexport type { InputPasswordWebProps } from './components/molecules/InputPassword';\nexport { LabeledSwitch } from './components/molecules/LabeledSwitch';\nexport type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';\nexport { Menubar } from './components/molecules/Menubar';\nexport type {\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n  MenubarOptionsType,\n  MenubarProps,\n} from './components/molecules/Menubar';\nexport { Select } from './components/molecules/Select';\nexport type { SelectProps } from './components/molecules/Select';\nexport { Snackbar } from './components/molecules/Snackbar';\nexport type { SnackbarWebProps } from './components/molecules/Snackbar';\nexport { TextArea } from './components/molecules/TextArea';\nexport type { TextAreaProps } from './components/molecules/TextArea';\nexport { DataGrid } from './components/organisms/DataGrid';\nexport type {\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport * from './hooks';\n"],"mappings":"AAAA,cAAc,wBAAd;AACA,SAASA,IAAT,EAAeC,IAAf,QAA2B,wBAA3B;AACA,SAASC,SAAT;AAEA,SAASC,OAAO,IAAIC,KAApB;AAEA,SAASC,MAAT,EAAiBC,aAAjB;AAEA,SAASC,KAAT;AAEA,SAASC,SAAT;AAEA,SAASC,KAAT;AAEA,SAASC,QAAT;AAEA,SAASC,GAAT;AAEA,SAASC,OAAT;AAEA,SAASC,WAAT;AAKA,SAASC,UAAT;AAEA,SAASC,cAAT;AAEA,SAASC,MAAT;AAEA,SAASC,IAAT,EAAeC,QAAf;AAEA,SAASC,aAAT;AAEA,SAASC,aAAT;AAEA,SAASC,OAAT;AAOA,SAASC,MAAT;AAEA,SAASC,QAAT;AAEA,SAASC,QAAT;AAEA,SAASC,QAAT;AAKA"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.21.1",
+  "version": "1.22.0-beta.11+cb2e0a1",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "scripts": {
     "start": "yarn build:es --watch",
-    "build:es": "yarn build:cjs && yarn build:esm",
-    "build:cjs": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "build:esm": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir esm --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments --config-file ./babel.config.esm.js",
-    "build:declaration": "yarn build:declaration:cjs && yarn build:declaration:esm",
+    "build:es": "yarn rollup --config",
+    "build:declaration": "run-p build:declaration:cjs build:declaration:esm",
     "build:declaration:cjs": "tsc --project tsconfig.build.json",
     "build:declaration:esm": "tsc --project tsconfig.build.esm.json",
     "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
@@ -22,7 +20,7 @@
     "@emotion/native": "^11.10.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@tecsinapse/react-core": "^1.20.0",
+    "@tecsinapse/react-core": "^1.21.0-beta.13+cb2e0a1",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^9.2.0",
     "react-transition-group": "^4.4.2"
@@ -41,5 +39,5 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native-web": "^0.17.1 || ^0.18.0"
   },
-  "gitHead": "2062ee0d597c89feb63e3a2025e7238353c21fe4"
+  "gitHead": "cb2e0a1873cfc3f45e793b5443297fb6fffce1b5"
 }

package/rollup.config.js

@@ -0,0 +1,44 @@
+import esbuild from 'rollup-plugin-esbuild';
+import alias from '@rollup/plugin-alias';
+
+const outputDefaultConfig = {
+  preserveModules: true,
+  preserveModulesRoot: 'src',
+  sourcemap: true,
+};
+
+export default [
+  {
+    input: ['./src/index.ts'],
+    output: [
+      {
+        dir: 'esm',
+        format: 'esm',
+        ...outputDefaultConfig,
+      },
+      {
+        dir: 'dist',
+        format: 'cjs',
+        exports: 'auto',
+        ...outputDefaultConfig,
+      },
+    ],
+    plugins: [
+      alias({
+        entries: [{ find: 'react-native', replacement: 'react-native-web' }],
+      }),
+      esbuild({ tsconfig: 'tsconfig.build.json' }),
+    ],
+    external: [
+      'react',
+      'react-dom',
+      'react-native-web',
+      '@emotion/native',
+      '@emotion/react',
+      '@emotion/styled',
+      '@tecsinapse/react-core',
+      'react-native-vector-icons',
+      'react-transition-group',
+    ],
+  },
+];

package/src/components/atoms/Dropdown/index.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { StyledContainerDropdown } from './styled';
 import { Transition } from 'react-transition-group';
 import { defaultStyles, transition } from '../../molecules/Select/animations';
-import { Dispatch, SetStateAction } from 'react';
-import { useClickAwayListener } from '@tecsinapse/react-web-kit';
+import { useClickAwayListener } from '../../../hooks';
 
 export interface DropdownProps {
   visible: boolean;

package/src/components/atoms/Table/Body/TBody.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const TBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+const TBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
   children,
   ...rest
 }) => {

package/src/components/atoms/Table/Footer/TFoot.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TFooter } from './styled';
 
-export const TFoot: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+const TFoot: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
   children,
   ...rest
 }) => {

package/src/components/atoms/Table/Header/THead.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HeaderBackground, THeadStyled } from './styled';
-import { Tr } from '../Row/Tr';
+import Tr from '../Row/Tr';
 
 const THead: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
   children,

package/src/components/atoms/Table/Header/Th.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ThStyled } from './styled';
 
-export const Th: React.FC<
-  React.ThHTMLAttributes<HTMLTableHeaderCellElement>
-> = ({ children, ...rest }) => {
+const Th: React.FC<React.ThHTMLAttributes<HTMLTableHeaderCellElement>> = ({
+  children,
+  ...rest
+}) => {
   return <ThStyled {...rest}>{children}</ThStyled>;
 };
 

package/src/components/atoms/Table/Row/Tr.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TRow } from './styled';
 
-export const Tr: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
+const Tr: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
   children,
   ...rest
 }) => {

package/src/components/atoms/Table/Table.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TableStyled } from './styled';
 
-export const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement>> = ({
+const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement>> = ({
   children,
   ...rest
 }) => {

package/src/components/molecules/Grid/Item/Item.tsx

@@ -6,7 +6,7 @@ import {
   getGridItemColumSpan,
   getGridItemPadding,
 } from '@tecsinapse/react-core';
-import { useBreakpoints } from '@tecsinapse/react-web-kit';
+import { useBreakpoints } from '../../../../hooks';
 import { getSpan } from './functions';
 
 export type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;

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;
@@ -37,7 +40,7 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'>
 }
 
 /** NOTE: For better performance, you should memoize options and handlers */
-export const Select = <Data, Type extends 'single' | 'multi'>({
+const Select = <Data, Type extends 'single' | 'multi'>({
   value,
   options,
   keyExtractor,
@@ -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}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Story } from '@storybook/react';
-import { Snackbar, SnackbarWebProps } from './Snackbar';
+import { default as Snackbar, SnackbarWebProps } from './Snackbar';
 
 export default {
   title: 'Hybrid/Snackbar',

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -11,7 +11,7 @@ export interface SnackbarWebProps extends Omit<SnackPropsCore, 'children'> {
   textProps?: TextProps;
 }
 
-export const Snackbar: React.FC<SnackbarWebProps> = ({
+const Snackbar: React.FC<SnackbarWebProps> = ({
   value,
   textProps = { colorVariant: 'primary', colorTone: 'medium' },
   ...rest

package/src/components/organisms/DataGrid/Footer/Footer.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';
+import { Button } from '../../../atoms/Button';
+import { Icon, Text } from '@tecsinapse/react-core';
+import { Select } from '../../../molecules/Select';
 import { TFoot, Tr } from '../../../atoms/Table';
 import {
   FooterContainer,

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { default as nativeStyled } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { Text } from '@tecsinapse/react-web-kit';
+import { StyleProps, Text } from '@tecsinapse/react-core';
 import { Td } from '../../../atoms/Table';
 import { Button } from '../../../atoms/Button';
 

package/babel.config.esm.js

@@ -1,44 +0,0 @@
-module.exports = api => {
-  api.cache(true);
-
-  return {
-    plugins: [
-      [
-        'module-resolver',
-        {
-          alias: {
-            '^react-native$': 'react-native-web',
-          },
-        },
-      ],
-    ],
-    presets: [
-      [
-        '@babel/env',
-        {
-          modules: false,
-        },
-      ],
-      [
-        '@babel/preset-react',
-        {
-          development: process.env.BABEL_ENV !== 'build',
-        },
-      ],
-      '@babel/preset-typescript',
-    ],
-    env: {
-      build: {
-        ignore: [
-          '**/*.test.tsx',
-          '**/*.test.ts',
-          '**/*.stories.tsx',
-          '__snapshots__',
-          '__tests__',
-          '__stories__',
-        ],
-      },
-    },
-    ignore: ['node_modules'],
-  };
-};