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,7 +2,7 @@ import { ReactNode, FocusEvent } from 'react';
 import { BaseProps } from '../types';
 
 export interface MultiSelectOption {
-    name?: string;
+    name?: string | number;
     label?: string;
     value?: any;
 }

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,
         }),

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();

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;

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. */

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>
+```

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;
 }

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,
         }),