@bigbinary/neetoui-rn 0.0.105 → 0.0.106

package/lib/components/Select.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _=require("./");var _excluded=["data","label","value","placeholder","onSelect","isLoading","isSearchable","labelStyle","containerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","selectedItemContainerStyle","selectedItemTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(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;}var Select=function Select(_ref){var _data$selectedItemInd;var data=_ref.data,label=_ref.label,value=_ref.value,placeholder=_ref.placeholder,onSelect=_ref.onSelect,isLoading=_ref.isLoading,isSearchable=_ref.isSearchable,labelStyle=_ref.labelStyle,containerStyle=_ref.containerStyle,dropdownContainerStyle=_ref.dropdownContainerStyle,itemContainerStyle=_ref.itemContainerStyle,itemTextStyle=_ref.itemTextStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,selectedItemTextStyle=_ref.selectedItemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(data),_useState2=(0,_slicedToArray2.default)(_useState,2),options=_useState2[0],setOptions=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),showDropdown=_useState4[0],setShowDropdown=_useState4[1];var containerRef=(0,_react.useRef)(null);var theme=(0,_react.useContext)(_native.ThemeContext);var selectedItemIndex=data==null?void 0:data.findIndex(function(item){return(item==null?void 0:item.value)===value;});var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var handleItemSelection=function handleItemSelection(item,index){setShowDropdown(false);onSelect(item,index);};var handleSearchOption=(0,_react.useCallback)(function(searchTerm){var qualifiedOptions=data==null?void 0:data.filter(function(option){var _option$label,_option$label$toLower,_option$label$toLower2,_searchTerm$toLowerCa;return option==null?void 0:(_option$label=option.label)==null?void 0:(_option$label$toLower=_option$label.toLowerCase())==null?void 0:(_option$label$toLower2=_option$label$toLower.trim())==null?void 0:_option$label$toLower2.includes(searchTerm==null?void 0:(_searchTerm$toLowerCa=searchTerm.toLowerCase())==null?void 0:_searchTerm$toLowerCa.trim());});setOptions(qualifiedOptions);},[data]);var DropdownItem=function DropdownItem(_ref2){var item=_ref2.item,index=_ref2.index;var isSelectedItem=index===selectedItemIndex;return _react.default.createElement(_.Touchable,{key:index,bg:isSelectedItem?"background.base":"background.white",onPress:function onPress(){handleItemSelection(item,index);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:isSelectedItem?"font.white":"font.grey"},itemTextStyle,isSelectedItem&&selectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:11}}),item==null?void 0:item.label)));};DropdownItem.propTypes={item:_propTypes.default.object,index:_propTypes.default.number};return _react.default.createElement(_.Container,{elevation:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:5}},_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:7}}),label),_react.default.createElement(_.Touchable,{disabled:isLoading,onPress:function onPress(){return setShowDropdown(!showDropdown);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:containerRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:9}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},containerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:146,columnNumber:11}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:13}},(data==null?void 0:(_data$selectedItemInd=data[selectedItemIndex])==null?void 0:_data$selectedItemInd.label)||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:15}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:15}})))),showDropdown&&_react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",position:"absolute",left:0,right:0,top:"100%",maxHeight:defaultDropdownItemHeight*6,shadowOpacity:0.25,shadowRadius:3.84,"shadow-color":"#000",shadowOffset:{width:0,height:2},elevation:5},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:9}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:handleSearchOption,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:15}})),_react.default.createElement(_reactNative.ScrollView,{nestedScrollEnabled:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:11}},options.map(function(item,index){return _react.default.createElement(DropdownItem,{key:index,item:item,index:index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:22}});}))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,data:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired})).isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.string,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object};Select.defaultProps={label:null,placeholder:"Select Option",value:null,onSelect:function onSelect(){},isLoading:false,isSearchable:false};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "assets"
   ],
   "lint-staged": {
-    "src/**/*.{js,es6,jsx,ts,tsx}|storybook/stories**/*.js": [
+    "src/**/*.{js,es6,jsx,ts,tsx}|storybook/stories**/*.js|.storybook/preview.js|.storybook/main.js|.storybook/Storybook.js": [
       "./node_modules/prettier/bin-prettier.js --write",
       "prettier --write",
       "eslint --fix"
@@ -48,10 +48,12 @@
   "dependencies": {
     "@react-native-community/hooks": "^2.8.1",
     "@styled-system/prop-types": "^5.1.5",
+    "react-native-gesture-handler": "^2.4.0",
     "react-native-material-ripple": "^0.9.1",
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-popover-view": "^4.1.0",
+    "react-native-reanimated": "^2.7.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-switch-toggle": "^2.2.1",

package/src/components/Select.js

@@ -0,0 +1,285 @@
+import React, { useState, useContext, useCallback, useRef } from "react";
+import Icon from "react-native-remix-icon";
+import PropTypes from "prop-types";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import { ThemeContext } from "styled-components/native";
+
+import { Container, Input, Touchable, Typography } from "@components";
+
+/**
+ *
+ * Select can be used to select an option from a list of options.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/select/select1.png" />
+ *   <img src="screenshots/select/select2.png" />
+ * </div>
+ *
+ *  ## Usage
+ *
+ * ```js
+ * import * as React, { useState } from 'react';
+ * import { Select, Container } from '@bigbinary/neetoui-rn';
+ *
+ * const OPTIONS = [
+ *  {
+ *    label: "Option 1",
+ *    value: "option_1"
+ *  },
+ *  {
+ *    label: "Option 2",
+ *    value: "option_2"
+ *  },
+ * ]
+ *
+ * export default function Main() {
+ *  const [selectedOption, setSelectedOption] = useState(null)
+ *
+ *  return (
+ *    <Container>
+ *      <Select
+ *        label="Select"
+ *        data={OPTIONS}
+ *        value={selectedOption?.value}
+ *        onSelect={setSelectedOption}
+ *      />
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const Select = ({
+  data,
+  label,
+  value,
+  placeholder,
+  onSelect,
+  isLoading,
+  isSearchable,
+  labelStyle,
+  containerStyle,
+  dropdownContainerStyle,
+  itemContainerStyle,
+  itemTextStyle,
+  selectedItemContainerStyle,
+  selectedItemTextStyle,
+  ...rest
+}) => {
+  const [options, setOptions] = useState(data);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const containerRef = useRef(null);
+  const theme = useContext(ThemeContext);
+  const selectedItemIndex = data?.findIndex(item => item?.value === value);
+  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
+
+  const handleItemSelection = (item, index) => {
+    setShowDropdown(false);
+    onSelect(item, index);
+  };
+
+  const handleSearchOption = useCallback(
+    searchTerm => {
+      const qualifiedOptions = data?.filter(option =>
+        option?.label
+          ?.toLowerCase()
+          ?.trim()
+          ?.includes(searchTerm?.toLowerCase()?.trim())
+      );
+      setOptions(qualifiedOptions);
+    },
+    [data]
+  );
+
+  const DropdownItem = ({ item, index }) => {
+    const isSelectedItem = index === selectedItemIndex;
+    return (
+      <Touchable
+        key={index}
+        bg={isSelectedItem ? "background.base" : "background.white"}
+        onPress={() => {
+          handleItemSelection(item, index);
+        }}
+      >
+        <Container
+          height={defaultDropdownItemHeight}
+          p={2}
+          {...itemContainerStyle}
+          {...(isSelectedItem && selectedItemContainerStyle)}
+        >
+          <Typography
+            fontFamily="inter400"
+            fontSize="s"
+            color={isSelectedItem ? "font.white" : "font.grey"}
+            {...itemTextStyle}
+            {...(isSelectedItem && selectedItemTextStyle)}
+          >
+            {item?.label}
+          </Typography>
+        </Container>
+      </Touchable>
+    );
+  };
+
+  DropdownItem.propTypes = {
+    item: PropTypes.object,
+    index: PropTypes.number,
+  };
+
+  return (
+    <Container elevation={0}>
+      <Typography
+        fontFamily="inter400"
+        mb={1}
+        fontSize="s"
+        color="font.base"
+        {...labelStyle}
+      >
+        {label}
+      </Typography>
+      <Touchable
+        disabled={isLoading}
+        onPress={() => setShowDropdown(!showDropdown)}
+      >
+        <View ref={containerRef}>
+          <Container
+            borderWidth={1}
+            borderColor="border.grey400"
+            p={2}
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            {...containerStyle}
+            {...rest}
+          >
+            <Typography fontFamily="inter400" fontSize="s" color="font.grey">
+              {data?.[selectedItemIndex]?.label || placeholder}
+            </Typography>
+            {isLoading ? (
+              <ActivityIndicator
+                size="small"
+                color={theme.colors.background.base}
+              />
+            ) : (
+              <Icon
+                name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
+                size="20"
+                color="grey"
+              />
+            )}
+          </Container>
+        </View>
+      </Touchable>
+      {showDropdown && (
+        <Container
+          bg="background.white"
+          borderWidth={1}
+          borderColor="border.grey400"
+          position="absolute"
+          left={0}
+          right={0}
+          top="100%"
+          maxHeight={defaultDropdownItemHeight * 6}
+          shadowOpacity={0.25}
+          shadowRadius={3.84}
+          shadow-color="#000"
+          shadowOffset={{
+            width: 0,
+            height: 2,
+          }}
+          elevation={5}
+          {...dropdownContainerStyle}
+        >
+          {isSearchable && (
+            <Container p={1}>
+              <Input
+                placeholder="Search"
+                onChangeText={handleSearchOption}
+                fontSize="s"
+              />
+            </Container>
+          )}
+          <ScrollView nestedScrollEnabled={true}>
+            {options.map((item, index) => {
+              return <DropdownItem key={index} item={item} index={index} />;
+            })}
+          </ScrollView>
+        </Container>
+      )}
+    </Container>
+  );
+};
+
+Select.propTypes = {
+  /**
+   * The text to use for the floating label.
+   */
+  label: PropTypes.string,
+  /**
+   * Data to populate the options dropdown.
+   */
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  /**
+   * The text to be displayed if no option is selected.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * The selected value to show for the Select input.
+   */
+  value: PropTypes.string,
+  /**
+   * Callback function when an option is selected, receives the select option object.
+   */
+  onSelect: PropTypes.func,
+  /**
+   * Used to show if the dropdown is loading state, while loading Select input will be disabled.
+   */
+  isLoading: PropTypes.bool,
+  /**
+   * Toggle Search bar within the options dropdown to search through the options.
+   */
+  isSearchable: PropTypes.bool,
+  /**
+   * To customise floating label styles.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * To customise Select input container styles.
+   */
+  containerStyle: PropTypes.object,
+  /**
+   * To customise dropdown container styles.
+   */
+  dropdownContainerStyle: PropTypes.object,
+  /**
+   * To customise dropdown item container styles.
+   */
+  itemContainerStyle: PropTypes.object,
+  /**
+   * To customise dropdown item text styles.
+   */
+  itemTextStyle: PropTypes.object,
+  /**
+   * To customise dropdown item container styles for selected item.
+   */
+  selectedItemContainerStyle: PropTypes.object,
+  /**
+   * To customise dropdown item text styles for selected item.
+   */
+  selectedItemTextStyle: PropTypes.object,
+};
+
+Select.defaultProps = {
+  label: null,
+  placeholder: "Select Option",
+  value: null,
+  onSelect: () => {},
+  isLoading: false,
+  isSearchable: false,
+};

package/src/components/index.js

@@ -20,3 +20,4 @@ export { Card } from "./Card";
 export { TopBar } from "./TopBar";
 export { RadioButton } from "./RadioButton";
 export { CheckBox } from "./CheckBox";
+export { Select } from "./Select";