From 17867b293d02e16f06f84c80bc9194acbefe3c4c Mon Sep 17 00:00:00 2001
From: Yuri Victor Munayev <yvmunayev@gmail.com>
Date: Mon, 20 Jul 2020 14:09:10 -0400
Subject: [PATCH] fix: option component accept number on name prop (#1712)

* fix: option component accept number on name prop

* test: add test to name prop accept string and number

Co-authored-by: Tahimi <tahimileon@gmail.com>
---
 src/components/MultiSelect/index.d.ts         |  2 +-
 src/components/MultiSelect/index.js           |  2 +-
 src/components/Option/__test__/option.spec.js | 14 ++++++++
 src/components/Option/index.d.ts              |  2 +-
 src/components/Option/index.js                |  4 +--
 src/components/Option/readme.md               | 36 +++++++++++++++++++
 src/components/Picklist/index.d.ts            |  2 +-
 src/components/Picklist/index.js              |  2 +-
 8 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/components/MultiSelect/index.d.ts b/src/components/MultiSelect/index.d.ts
index 770408447..2e7a44387 100644
--- a/src/components/MultiSelect/index.d.ts
+++ b/src/components/MultiSelect/index.d.ts
@@ -2,7 +2,7 @@ import { ReactNode, FocusEvent } from 'react';
 import { BaseProps } from '../types';
 
 export interface MultiSelectOption {
-    name?: string;
+    name?: string | number;
     label?: string;
     value?: any;
 }
diff --git a/src/components/MultiSelect/index.js b/src/components/MultiSelect/index.js
index 74edf8dc9..3a1a97ffe 100644
--- a/src/components/MultiSelect/index.js
+++ b/src/components/MultiSelect/index.js
@@ -297,7 +297,7 @@ MultiSelect.propTypes = {
     /** Specifies the value of an input element. */
     value: PropTypes.arrayOf(
         PropTypes.shape({
-            name: PropTypes.string,
+            name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             label: PropTypes.string,
             value: PropTypes.any,
         }),
diff --git a/src/components/Option/__test__/option.spec.js b/src/components/Option/__test__/option.spec.js
index 5fa3789f7..a06b22416 100644
--- a/src/components/Option/__test__/option.spec.js
+++ b/src/components/Option/__test__/option.spec.js
@@ -32,6 +32,20 @@ describe('<Option />', () => {
         const component = mount(<Option label="option 1" name="option1" />);
         expect(component.find(StyledItem).exists()).toBe(true);
     });
+    it('should render a regular option when type name is string or number', () => {
+        const names = ['option 1', 1];
+        names.forEach(name => {
+            const component = mount(<Option label="option 1" name={name} />);
+            expect(component.find(StyledItem).exists()).toBe(true);
+        });
+    });
+    it('should return null when type name is not string or number', () => {
+        const names = [{}, [], undefined, null, true, new Date()];
+        names.forEach(name => {
+            const component = mount(<Option label="option 1" name={name} />);
+            expect(component).toEqual({});
+        });
+    });
     it('should not register when is disabled', () => {
         mount(<Option disabled />);
         expect(optionRegisterFn).not.toHaveBeenCalled();
diff --git a/src/components/Option/index.d.ts b/src/components/Option/index.d.ts
index fcbdb24d8..03a76cd8c 100644
--- a/src/components/Option/index.d.ts
+++ b/src/components/Option/index.d.ts
@@ -3,7 +3,7 @@ import { BaseProps, IconPosition } from '../types';
 
 export interface OptionProps extends BaseProps {
     label?: string;
-    name?: string;
+    name?: string | number;
     variant?: 'default' | 'header';
     icon?: ReactNode;
     iconPosition?: IconPosition;
diff --git a/src/components/Option/index.js b/src/components/Option/index.js
index 00a213b64..fb5005a2a 100644
--- a/src/components/Option/index.js
+++ b/src/components/Option/index.js
@@ -28,7 +28,7 @@ class OptionItem extends Component {
     componentDidMount() {
         const { disabled, variant, name } = this.props;
         const isHeader = variant === 'header';
-        if (disabled || isHeader || typeof name !== 'string') {
+        if (disabled || isHeader || (typeof name !== 'string' && typeof name !== 'number')) {
             return null;
         }
         return this.register();
@@ -201,7 +201,7 @@ Option.propTypes = {
     /** Text of the PicklistOption. */
     label: PropTypes.string,
     /** The name of the PicklistOption. */
-    name: PropTypes.string,
+    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** The variant changes the type of PicklistOption.
      * Accepted variants include default and header.
      * This value defaults to default. */
diff --git a/src/components/Option/readme.md b/src/components/Option/readme.md
index b20fe5359..227898594 100644
--- a/src/components/Option/readme.md
+++ b/src/components/Option/readme.md
@@ -69,3 +69,39 @@ initialState = { value: null };
     </GlobalHeader>
 </div>
 ```
+
+##### Option accept number on name prop
+
+```js
+import React from 'react';
+import { Picklist, Option } from 'react-rainbow-components';
+
+const containerStyles = {
+    width: '200px',
+};
+
+initialState = { value: { name: 1, label: 'Experimental Building' } };
+
+<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
+    <GlobalHeader
+        src="images/user/user2.jpg"
+        className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
+    >
+        <div className="rainbow-flex rainbow-align_right">
+            <Picklist
+                style={containerStyles}
+                onChange={value => setState({ value })}
+                value={state.value}
+                label="Select Building"
+                hideLabel
+            >
+                <Option name="header" label="Your Buildings" variant="header" />
+                <Option name={1} label="Experimental Building" />
+                <Option name={2} label="Empire State" />
+                <Option name={3} label="Plaza" />
+                <Option name={4} label="Central Park" />
+            </Picklist>
+        </div>
+    </GlobalHeader>
+</div>
+```
\ No newline at end of file
diff --git a/src/components/Picklist/index.d.ts b/src/components/Picklist/index.d.ts
index 5ac7ea765..f0e09fb33 100644
--- a/src/components/Picklist/index.d.ts
+++ b/src/components/Picklist/index.d.ts
@@ -3,7 +3,7 @@ import { BaseProps } from '../types';
 
 interface PicklistValue {
     label?: string;
-    name?: string;
+    name?: string | number;
     icon?: ReactNode;
     value?: any;
 }
diff --git a/src/components/Picklist/index.js b/src/components/Picklist/index.js
index cb923e2e7..9d8da25d6 100644
--- a/src/components/Picklist/index.js
+++ b/src/components/Picklist/index.js
@@ -303,7 +303,7 @@ Picklist.propTypes = {
     value: PropTypes.oneOfType([
         PropTypes.shape({
             label: PropTypes.string,
-            name: PropTypes.string,
+            name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             icon: PropTypes.node,
             value: PropTypes.any,
         }),