feat(select): add option component (#826)

Author: Matt Goo

package-lock.json

@@ -82,7 +82,7 @@
     "@material/notched-outline": "^1.1.1",
     "@material/radio": "^1.1.0",
     "@material/ripple": "^1.0.0",
-    "@material/select": "^0.40.1",
+    "@material/select": "^1.1.1",
     "@material/snackbar": "^1.0.0",
     "@material/switch": "^1.0.0",
     "@material/tab": "^1.0.0",

package.json

@@ -0,0 +1,67 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import * as React from 'react';
+import {MenuListItem, MenuListItemProps} from '@material/react-menu'; // eslint-disable-line no-unused-vars
+
+export type OptionProps<T extends HTMLElement = HTMLElement>
+  = BaseOptionProps & (T extends HTMLOptionElement ? React.HTMLProps<HTMLOptionElement> : MenuListItemProps<T>);
+
+interface BaseOptionProps {
+  enhanced?: boolean;
+}
+
+class Option<T extends HTMLElement = HTMLElement> extends React.Component<OptionProps<T>, {}> {
+  static defaultProps = {
+    enhanced: false,
+  };
+
+  render() {
+    const {
+      value,
+      enhanced,
+      children,
+      ...otherProps
+    } = this.props;
+
+    if (enhanced) {
+      return (
+        <MenuListItem
+          data-value={value}
+          {...otherProps}
+        >
+          {children}
+        </MenuListItem>
+      );
+    }
+    return (
+      <option
+        value={value}
+        {...otherProps}
+      >
+        {children}
+      </option>
+    );
+  }
+}
+
+export default Option;

packages/select/Option.tsx

@@ -18,8 +18,9 @@
   "dependencies": {
     "@material/react-floating-label": "^0.11.0",
     "@material/react-line-ripple": "^0.11.0",
+    "@material/react-menu": "^0.0.0",
     "@material/react-notched-outline": "^0.11.0",
-    "@material/select": "^0.40.1",
+    "@material/select": "^1.1.1",
     "classnames": "^2.2.6",
     "react": "^16.4.2"
   },

packages/select/package.json

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {assert} from 'chai';
+import {shallow, mount} from 'enzyme';
+import Option from '../../../packages/select/Option';
+import {MenuListItem} from '../../../packages/menu/index';
+
+suite('Select Options');
+
+test('renders an option tag if not enhanced', () => {
+  const wrapper = shallow(<Option />);
+  assert.equal(wrapper.find('option').length, 1);
+});
+
+test('renders an MenuListItem if enhanced', () => {
+  const wrapper = shallow(<Option enhanced />);
+  assert.equal(wrapper.find(MenuListItem).length, 1);
+});
+
+test('renders an a value attribute if not enhanced', () => {
+  const wrapper = mount(<Option value='test' />);
+  assert.equal(wrapper.find('option').getDOMNode().getAttribute('value'), 'test');
+});
+
+test('renders an a data-value attribute if enhanced', () => {
+  const wrapper = mount(<Option enhanced data-value='test' />);
+  assert.equal(wrapper.find(MenuListItem).getDOMNode().getAttribute('data-value'), 'test');
+});
+