<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://github.com";
	_AN_base_path = "https://github.com/selvagsz/react-power-select/compare/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From 8cc86282cee69f32e6a6108275c14ec719aa1ab6 Mon Sep 17 00:00:00 2001
From: selvagsz <selvaganeshbsg@gmail.com>
Date: Mon, 9 Apr 2018 23:49:32 +0800
Subject: [PATCH 1/5] selectionOptionComponent as render props

---
 src/DefaultOption.js |  5 +++++
 src/Select.js        |  3 ++-
 src/SelectTrigger.js | 13 ++++---------
 3 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 src/DefaultOption.js

diff --git a/src/DefaultOption.js b/src/DefaultOption.js
new file mode 100644
index 0000000..b7aedda
--- /dev/null
+++ b/src/DefaultOption.js
@@ -0,0 +1,5 @@
+import React, { Component } from 'react';
+
+export default function SelectedOption({ option, select }) {
+  return option;
+}
diff --git a/src/Select.js b/src/Select.js
index c2f14c8..d770697 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import Dropdown from './Dropdown';
 import SelectTrigger from './SelectTrigger';
 import DropdownMenu from './DropdownMenu';
+import DefaultOption from './DefaultOption';
 import {
   matcher,
   isOptGroup,
@@ -434,7 +435,7 @@ Select.defaultProps = {
   triggerComponent: SelectTrigger,
   triggerLHSComponent: null,
   triggerRHSComponent: null,
-  selectedOptionComponent: null,
+  selectedOptionComponent: DefaultOption,
   beforeOptionsComponent: null,
   afterOptionsComponent: null,
   matcher: matcher,
diff --git a/src/SelectTrigger.js b/src/SelectTrigger.js
index 3e5c9fb..6b0fa7f 100644
--- a/src/SelectTrigger.js
+++ b/src/SelectTrigger.js
@@ -3,7 +3,7 @@ import RenderOption from './RenderOption';
 import TriggerWrapper from './TriggerWrapper';
 
 export default function Trigger({
-  selectedOption,
+  selectedOption: option,
   optionLabelPath,
   selectedOptionComponent,
   placeholder,
@@ -11,15 +11,10 @@ export default function Trigger({
   ...rest
 }) {
   return (
-    <TriggerWrapper value="{selectedOption}" select="{select}" {...rest>
+    <TriggerWrapper value="{option}" select="{select}" {...rest>
       <div className="PowerSelect__TriggerLabel">
-        {selectedOption ? (
-          <RenderOption - option="{selectedOption}" - optionLabelPath="{optionLabelPath}" - optionComponent="{selectedOptionComponent}" - select="{select}" - />
+        {option ? (
+          selectedOptionComponent({ option, select })
         ) : (
           <span className="PowerSelect__Placeholder">{placeholder}</span>
         )}

From 2c2449c5e9f38991e82eb1bb4fd74608c7ebedfb Mon Sep 17 00:00:00 2001
From: selvagsz <selvaganeshbsg@gmail.com>
Date: Tue, 10 Apr 2018 01:03:41 +0800
Subject: [PATCH 2/5] render function as children pattern for <Options />

---
 src/DropdownMenu.js |  4 +--
 src/Option.js       | 58 ++++++++++++++----------------
 src/Options.js      | 88 +++++++++++++++++++++++++++------------------
 src/Select.js       | 14 ++++++--
 src/index.js        |  3 +-
 5 files changed, 96 insertions(+), 71 deletions(-)

diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
index 92faa16..4c1c72a 100644
--- a/src/DropdownMenu.js
+++ b/src/DropdownMenu.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import cx from 'classnames';
 import { renderComponent } from './utils';
-import Options from './Options';
 
 export default class DropdownMenu extends Component {
   componentWillMount() {
@@ -21,6 +20,7 @@ export default class DropdownMenu extends Component {
 
   render() {
     let {
+      children,
       className,
       select,
       handleKeyDown,
@@ -43,7 +43,7 @@ export default class DropdownMenu extends Component {
       >
         {beforeOptionsComponent && renderComponent(beforeOptionsComponent, { select })}
 
-        <Options select="{select}" highlightedOption="{highlightedOption}" {...otherProps />
+        {children}
 
         {afterOptionsComponent && renderComponent(afterOptionsComponent, { select })}
       </div>
diff --git a/src/Option.js b/src/Option.js
index 09ddc82..bfff081 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -1,36 +1,30 @@
 import React, { Component } from 'react';
 import cx from 'classnames';
-import RenderOption from './RenderOption';
 
-export default class Option extends Component {
-  render() {
-    let {
-      option,
-      select,
-      disabled,
-      optionIndex,
-      optionLabelPath,
-      optionComponent,
-      isHighlighted,
-      onOptionClick,
-    } = this.props;
-    let isDisabled = disabled || option.disabled;
-    return (
-      <div - className="{cx('PowerSelect__Option'," { - PowerSelect__Option--disabled : isDisabled - PowerSelect__Option--highlighted : isHighlighted - } - data-option-index="{optionIndex}" - onClick="{isDisabled" ? null : onOptionClick ->
-        <RenderOption - option="{option}" - optionLabelPath="{optionLabelPath}" - optionComponent="{optionComponent}" - select="{select}" - />
-      </div>
-    );
-  }
+export default function Option({
+  option,
+  disabled,
+  isHighlighted,
+  optionIndex,
+  onOptionClick,
+  children,
+}) {
+  return (
+    <div + className="{cx('PowerSelect__Option'," { + PowerSelect__Option--disabled : disabled + PowerSelect__Option--highlighted : isHighlighted + } + data-option-index="{optionIndex}" + onClick="{" + disabled ? null : ( + (=""> {
+            onOptionClick(option);
+          }
+        )
+      }
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/src/Options.js b/src/Options.js
index c6ed9a7..2c0c85c 100644
--- a/src/Options.js
+++ b/src/Options.js
@@ -38,47 +38,67 @@ export default class Options extends Component {
     }
   }
 
-  renderOptions(options, optGroupDisabled = false) {
-    let { select, optionLabelPath, optionComponent, highlightedOption, onOptionClick } = this.props;
-    return options.map((option, index) => {
-      let optionIndex = getOptionIndex(this.props.options, option);
-      if (isOptGroup(option)) {
-        return (
-          <div - key="{index}" - data-group-index="{optionIndex}" - className="{cx('PowerSelect__OptGroup'," { - PowerSelect__OptGroup--disabled : !!option.disabled - } ->
-            <div className="PowerSelect__OptGroup__Label">{option.label}</div>
-            {this.renderOptions(option.options, option.disabled)}
-          </div>
-        );
+  // renderOptions(options, optGroupDisabled = false) {
+  //   let { select, optionLabelPath, optionComponent, highlightedOption, onOptionClick } = this.props;
+  //   return options.map((option, index) => {
+  //     let optionIndex = getOptionIndex(this.props.options, option);
+  //     if (isOptGroup(option)) {
+  //       return (
+  //         <div + key="{index}" + data-group-index="{optionIndex}" + className="{cx('PowerSelect__OptGroup'," { + PowerSelect__OptGroup--disabled : !!option.disabled + } + />
+  //           <div className="PowerSelect__OptGroup__Label">{option.label}</div>
+  //           {this.renderOptions(option.options, option.disabled)}
+  //         </div>
+  //       );
+  //     }
+  //     return (
+  //       <Option + key="{index}" + optionIndex="{optionIndex}" + option="{option}" + select="{select}" + disabled="{optGroupDisabled}" + optionLabelPath="{optionLabelPath}" + optionComponent="{optionComponent}" + isHighlighted="{option" highlightedOption + onOptionClick="{()" /> {
+  //           onOptionClick(option);
+  //         }}
+  //       />
+  //     );
+  //   });
+  // }
+
+  renderOptions() {
+    let { children, options, highlightedOption, onOptionClick } = this.props;
+    return React.Children.map(children, (child, index) => {
+      let optionIndex = getOptionIndex(options, options[index]);
+      if (child === null) {
+        return null;
+      }
+
+      if (child.type === Option) {
+        return React.cloneElement(child, {
+          ...child.props,
+          isHighlighted: child.props.option === highlightedOption,
+          optionIndex,
+          onOptionClick,
+        });
       }
-      return (
-        <Option - key="{index}" - optionIndex="{optionIndex}" - option="{option}" - select="{select}" - disabled="{optGroupDisabled}" - optionLabelPath="{optionLabelPath}" - optionComponent="{optionComponent}" - isHighlighted="{option" highlightedOption - onOptionClick="{()"> {
-            onOptionClick(option);
-          }}
-        />
-      );
+
+      return child;
     });
   }
 
   render() {
-    let { options } = this.props;
     return (
       <div className="PowerSelect__Options" ref="{optionsList"> (this.optionsList = optionsList)}>
-        {this.renderOptions(options)}
+        {this.renderOptions()}
       </div>
     );
   }
diff --git a/src/Select.js b/src/Select.js
index d770697..8777762 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Dropdown from './Dropdown';
 import SelectTrigger from './SelectTrigger';
+import Dropdown from './Dropdown';
 import DropdownMenu from './DropdownMenu';
+import Options from './Options';
 import DefaultOption from './DefaultOption';
 import {
   matcher,
@@ -337,6 +338,7 @@ export default class Select extends Component {
 
   render() {
     let {
+      children,
       className,
       tabIndex,
       selected,
@@ -411,7 +413,15 @@ export default class Select extends Component {
             select={selectApi}
             beforeOptionsComponent={beforeOptionsComponent}
             afterOptionsComponent={afterOptionsComponent}
-          />
+          >
+            <Options + options="{options}" + highlightedOption="{highlightedOption}" + onOptionClick="{this.handleOptionClick}" +>
+              {children({ results: options, select: selectApi })}
+            </Options>
+          </DropdownMenu>
         )}
       </Dropdown>
     );
diff --git a/src/index.js b/src/index.js
index 2403e3a..df63dbf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,8 @@ import PowerSelect from './PowerSelect';
 import TypeAhead from './TypeAhead';
 import TypeAheadSelectTrigger from './TypeAhead/SelectTrigger';
 import PowerSelectMultiple from './PowerSelectMultiple';
+import Option from './Option';
 
 TypeAhead.Trigger = TypeAheadSelectTrigger;
 
-export { PowerSelect, TypeAhead, PowerSelectMultiple };
+export { PowerSelect, TypeAhead, PowerSelectMultiple, Option };

From 2d09e89072782b61cd8c2316548e031de738fe4c Mon Sep 17 00:00:00 2001
From: selvagsz <selvaganeshbsg@gmail.com>
Date: Thu, 3 May 2018 12:39:43 +0800
Subject: [PATCH 3/5] Remove optionLabelPath for power select

---
 src/Select.js        | 6 +-----
 src/SelectTrigger.js | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index 8777762..f85859e 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -160,7 +160,7 @@ export default class Select extends Component {
   };
 
   search = (searchTerm, callback) => {
-    let { options, optionLabelPath, matcher, searchIndices = optionLabelPath } = this.props;
+    let { options, matcher, searchIndices } = this.props;
     let filteredOptions = filterOptions({
       options,
       searchTerm: searchTerm || '',
@@ -343,7 +343,6 @@ export default class Select extends Component {
       tabIndex,
       selected,
       showClear,
-      optionLabelPath,
       optionComponent,
       placeholder,
       disabled,
@@ -382,7 +381,6 @@ export default class Select extends Component {
           <Trigger selectedOption="{selected}" highlightedOption="{highlightedOption}" - optionLabelPath="{optionLabelPath}" selectedOptionLabelPath="{selectedOptionLabelPath}" selectedOptionComponent="{selectedOptionComponent}" triggerLHSComponent="{triggerLHSComponent}" @ -405,7 +403,6 @ export default class Select extends Component { minWidth="{this.powerselect.offsetWidth}" options="{options}" selected="{selected}" - optionLabelPath="{optionLabelPath}" optionComponent="{optionComponent}" onOptionClick="{this.handleOptionClick}" handleKeyDown="{this.handleKeyDown}" @ -440,7 +437,6 @ Select.defaultProps="{" tabIndex 0 showClear true closeOnSelect true - optionLabelPath null optionComponent null triggerComponent SelectTrigger triggerLHSComponent null diff --git a/src/SelectTrigger.js b/src/SelectTrigger.js index 6b0fa7f..7336566 100644 - a/src/SelectTrigger.js + b/src/SelectTrigger.js @ -4,7 +4,6 @ import TriggerWrapper from ./TriggerWrapper ; export default function Trigger selectedOption option - optionLabelPath selectedOptionComponent placeholder select From bf95b9b7556f9ebf316eae7146926bfa08612e7d Mon Sep 17 00:00:00 2001 From selvagsz><selvaganeshbsg@gmail.com>
Date: Thu, 3 May 2018 12:40:26 +0800
Subject: [PATCH 4/5] Make RPS#ArrayOfObjectsDemo example to use new api

---
 .../Demos/PowerSelect/ArrayOfObjectsDemo.js   | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js b/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
index bf6c2b4..1a461ae 100644
--- a/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
+++ b/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import PowerSelect from 'src/PowerSelect';
+import { PowerSelect, Option } from 'src';
 import { countries } from '../constants';
 
 export default class ArrayOfObjectsDemo extends Component {
   state = {
-    selectedCountry: null,
+    selectedCountry: 'BRA',
   };
 
-  handleChange = ({ option }) => {
-    this.setState({ selectedCountry: option });
+  handleChange = ({ value }) => {
+    this.setState({ selectedCountry: value });
   };
 
   render() {
@@ -18,10 +18,24 @@ export default class ArrayOfObjectsDemo extends Component {
         <PowerSelect options="{countries}" selected="{this.state.selectedCountry}" - optionLabelPath="name" onChange="{this.handleChange}" placeholder="Select your country" - />
+          searchIndices={['name']}
+          selectedOptionComponent={({ value }) => {
+            let selectedOption = countries.find(country => country.code === value);
+            return selectedOption.name;
+          }}
+        >
+          {({ results }) => {
+            return results.map(option => {
+              return (
+                <Option key="{option.code}" value="{option.code}">
+                  {option.name}
+                </Option>
+              );
+            });
+          }}
+        </PowerSelect>
       </div>
     );
   }

From 0e084e21d209d5e21981c713ba7476fcd8c158d8 Mon Sep 17 00:00:00 2001
From: selvagsz <selvaganeshbsg@gmail.com>
Date: Thu, 3 May 2018 12:40:52 +0800
Subject: [PATCH 5/5] Make Option component to accept

---
 src/Option.js  | 12 ++++++------
 src/Options.js |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Option.js b/src/Option.js
index bfff081..e43f110 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import cx from 'classnames';
 
 export default function Option({
-  option,
+  value,
   disabled,
   isHighlighted,
   optionIndex,
@@ -17,11 +17,11 @@ export default function Option({
       })}
       data-option-index={optionIndex}
       onClick={
-        disabled ? null : (
-          () => {
-            onOptionClick(option);
-          }
-        )
+        disabled
+          ? null
+          : () => {
+              onOptionClick(value);
+            }
       }
     >
       {children}
diff --git a/src/Options.js b/src/Options.js
index 2c0c85c..b1aeb91 100644
--- a/src/Options.js
+++ b/src/Options.js
@@ -85,7 +85,7 @@ export default class Options extends Component {
       if (child.type === Option) {
         return React.cloneElement(child, {
           ...child.props,
-          isHighlighted: child.props.option === highlightedOption,
+          isHighlighted: child.props.value === highlightedOption,
           optionIndex,
           onOptionClick,
         });
