@gympass/yoga 7.36.0 → 7.37.2

package/esm/Input/native/Tel.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Input from './Input';
+var Tel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
+    keyboardType: "phone-pad",
+    autoCompleteType: "tel",
+    textContentType: "telephoneNumber"
+  }));
+});
+export default Tel;

package/esm/Input/native/Tel.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Tel />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Tel, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/index.js

@@ -0,0 +1,6 @@
+import Input from './Input';
+import Password from './Password';
+import InputNumber from './Number';
+import Tel from './Tel';
+import Email from './Email';
+export { Input, Password, InputNumber, Tel, Email };

package/esm/Input/web/Email.js

@@ -2,11 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import Input from './Input';
-
-var Email = function Email(props) {
-  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+var Email = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
     type: "email"
   }));
-};
-
+});
 export default Email;

package/esm/Input/web/Email.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Email />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Email, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/web/Field.js

@@ -21,6 +21,6 @@ var Field = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplate
       colors = _ref2$theme$yoga.colors,
       baseFont = _ref2$theme$yoga.baseFont,
       input = _ref2$theme$yoga.components.input;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-bottom: ", "px;\n    padding-left: ", "px;\n\n    color: ", ";\n    font-family: ", ", sans-serif;\n    font-size: ", "px;\n    font-weight: ", ";\n\n    &:focus {\n      color: ", ";\n\n      & ~ legend {\n        max-width: max-content;\n        transition-property: max-width;\n        transition-duration: ", "ms;\n      }\n\n      & ~ label {\n        ", "\n\n        font-weight: ", ";\n        color: ", ";\n\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    ", "\n\n    ", "\n  "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, placeholder && label ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n            &::placeholder {\n              color: transparent;\n            }\n          "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n            &::placeholder {\n              color: ", ";\n            }\n          "])), input.label.color["default"]), value && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        & ~ legend {\n          max-width: max-content;\n        }\n\n        & ~ label {\n          color: ", ";\n          ", "\n        }\n      "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-bottom: ", "px;\n    padding-left: ", "px;\n\n    color: ", ";\n    font-family: ", ", sans-serif;\n    font-size: ", "px;\n    font-weight: ", ";\n\n    &:focus {\n      color: ", ";\n\n      & ~ legend {\n        max-width: max-content;\n        transition-property: max-width;\n        transition-duration: ", "ms;\n      }\n\n      & ~ label {\n        ", "\n\n        font-weight: ", ";\n        color: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    ", "\n\n    ", "\n  "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, placeholder && label ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: transparent;\n          }\n        "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: ", ";\n          }\n        "])), input.label.color["default"]), value && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      & ~ legend {\n        max-width: max-content;\n      }\n\n      & ~ label {\n        color: ", ";\n        ", "\n      }\n    "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
 });
 export default Field;

package/esm/Input/web/Input.test.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with label', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input"
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        disabled: true
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with error', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        error: "Error message"
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with helper text and max length', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        helper: "Helper text",
+        maxLength: 20
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with helper text, max length and hideMaxLength', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        helper: "Helper text",
+        maxLength: 20,
+        hideMaxLength: true
+      }))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Label",
+        full: true
+      }))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange', function () {
+      var onChangeMock = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        onChange: onChangeMock,
+        "data-testid": "input"
+      })));
+      fireEvent.change(screen.getByTestId('input'), {
+        target: {
+          value: 'foo'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        "data-testid": "input",
+        onFocus: onFocusMock
+      })));
+      fireEvent.focus(screen.getByTestId('input'));
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        "data-testid": "input",
+        onBlur: onBlurMock
+      })));
+      fireEvent.focus(screen.getByTestId('input'));
+      fireEvent.blur(screen.getByTestId('input'));
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('maxLength', function () {
+    it('should update maxLength counter when add character', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        maxLength: 10
+      }))),
+          rerender = _render8.rerender;
+
+      expect(screen.getByText('0/10').textContent).toBe('0/10');
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo",
+        maxLength: 10
+      })));
+      expect(screen.getByText('3/10').textContent).toBe('3/10');
+    });
+  });
+  describe('clean button', function () {
+    it('should call onClean when press clean button', function () {
+      var onClean = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo",
+        onClean: onClean
+      })));
+      fireEvent.click(screen.queryByRole('button'));
+      expect(onClean).toHaveBeenCalled();
+    });
+    it('should test if clean button is present', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input"
+      }))),
+          rerender = _render9.rerender; // closeButton
+
+
+      expect(screen.queryByRole('button')).toBeNull();
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo"
+      })));
+      expect(screen.queryByRole('button')).not.toBeNull();
+    });
+  });
+});

package/esm/Input/web/Legend.js

@@ -2,6 +2,8 @@ var _excluded = ["children"];
 
 var _templateObject, _templateObject2;
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
@@ -17,14 +19,14 @@ var HiddenSpan = styled.span(_templateObject2 || (_templateObject2 = _taggedTemp
   var input = _ref2.theme.yoga.components.input;
   return "\n    padding-left: " + input.label.padding.left + "px;\n    padding-right: " + input.label.padding.right + "px;\n  ";
 });
-
-var Legend = function Legend(_ref3) {
+var Legend = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var children = _ref3.children,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
-  return /*#__PURE__*/React.createElement(StyledLegend, props, /*#__PURE__*/React.createElement(HiddenSpan, null, children));
-};
-
+  return /*#__PURE__*/React.createElement(StyledLegend, _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(HiddenSpan, null, children));
+});
 Legend.propTypes = {
   children: node.isRequired
 };

package/esm/Input/web/Number.js

@@ -2,11 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import Input from './Input';
-
-var InputNumber = function InputNumber(props) {
-  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
-    type: "number"
+var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
+    keyboardType: "numeric"
   }));
-};
-
+});
 export default InputNumber;

package/esm/Input/web/Number.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Number />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Number, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/web/Password.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Password />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        disabled: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Label",
+        full: true
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange', function () {
+      var onChangeMock = jest.fn();
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onChange: onChangeMock
+      }))),
+          getByTestId = _render4.getByTestId;
+
+      fireEvent.change(getByTestId('input'), {
+        target: {
+          value: 'foo'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onFocus: onFocusMock
+      }))),
+          getByTestId = _render5.getByTestId;
+
+      fireEvent.focus(getByTestId('input'));
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onBlur: onBlurMock
+      }))),
+          getByTestId = _render6.getByTestId;
+
+      fireEvent.focus(getByTestId('input'));
+      fireEvent.blur(getByTestId('input'));
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('visibility button', function () {
+    it('should toggle password visibility when click visibility button', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input"
+      }))),
+          getByRole = _render7.getByRole,
+          getByTestId = _render7.getByTestId;
+
+      expect(getByTestId('input').type).toBe('password');
+      fireEvent.click(getByRole('button'));
+      expect(getByTestId('input').type).toBe('text');
+    });
+  });
+});

package/esm/Input/web/Tel.js

@@ -2,11 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import Input from './Input';
-
-var Tel = function Tel(props) {
-  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+var Tel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
     type: "tel"
   }));
-};
-
+});
 export default Tel;

package/esm/Input/web/Tel.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Tel />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Tel, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/List/index.native.js

@@ -0,0 +1,3 @@
+import { List, ListItem } from './native';
+List.Item = ListItem;
+export default List;

package/esm/List/native/List.js

@@ -0,0 +1,22 @@
+var _templateObject;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled from 'styled-components';
+var StyledFlatList = styled.FlatList(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+/** Lists are a continuous group of text or images. They are composed of items
+containing primary and supplemental actions, which are represented by icons and
+text. */
+
+var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var rest = _extends({}, _ref);
+
+  return /*#__PURE__*/React.createElement(StyledFlatList, _extends({
+    ref: ref
+  }, rest));
+});
+List.displayName = 'List';
+export default List;

package/esm/List/native/List.test.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import ThemeProvider from '../../Theme';
+import List from '..';
+var data = [{
+  key: 'Devin'
+}, {
+  key: 'Dan'
+}, {
+  key: 'Dominic'
+}, {
+  key: 'Jackson'
+}, {
+  key: 'James'
+}, {
+  key: 'Joel'
+}, {
+  key: 'John'
+}, {
+  key: 'Jillian'
+}, {
+  key: 'Jimmy'
+}, {
+  key: 'Julie'
+}];
+describe('<List />', function () {
+  describe('Snapshots', function () {
+    describe('Without props', function () {
+      it('should match snapshot with a default list', function () {
+        var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: data,
+          renderItem: function renderItem(_ref) {
+            var item = _ref.item;
+            return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a small list', function () {
+        var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: data,
+          renderItem: function renderItem(_ref2) {
+            var item = _ref2.item;
+            return /*#__PURE__*/React.createElement(List.Item, {
+              small: true
+            }, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render2.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a list without divisors', function () {
+        var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: data,
+          renderItem: function renderItem(_ref3) {
+            var item = _ref3.item;
+            return /*#__PURE__*/React.createElement(List.Item, {
+              divided: false
+            }, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render3.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a horizontal list', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          horizontal: true,
+          data: data,
+          renderItem: function renderItem(_ref4) {
+            var item = _ref4.item;
+            return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should call onPress when selectable item is pressed', function () {
+        var a = {
+          key: 'Devin',
+          onPress: jest.fn()
+        };
+
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: [a],
+          renderItem: function renderItem(_ref5) {
+            var item = _ref5.item;
+            return /*#__PURE__*/React.createElement(List.Item, {
+              onPress: item.onPress
+            }, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            getByText = _render5.getByText;
+
+        var selectableItem = getByText(a.key);
+        fireEvent.press(selectableItem);
+        expect(a.onPress).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/esm/List/native/ListItem.js

@@ -0,0 +1,51 @@
+var _excluded = ["theme", "small", "divided", "onPress"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { TouchableHighlight } from 'react-native';
+import PropTypes from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+var StyledView = styled.View(function (_ref) {
+  var divided = _ref.divided,
+      small = _ref.small,
+      list = _ref.theme.yoga.components.list;
+  return "\n  " + (divided ? "\n          border-bottom-width: " + list.border.width + "px;\n          border-bottom-color: " + list.border.color + ";\n        " : '') + "\n\n  " + (small ? "\n          padding:\n            " + list.listItem.small.padding.top + "px\n            " + list.listItem.small.padding.right + "px\n            " + list.listItem.small.padding.bottom + "px\n            " + list.listItem.small.padding.left + "px;\n        " : "\n          padding:\n            " + list.listItem.padding.top + "px\n            " + list.listItem.padding.right + "px\n            " + list.listItem.padding.bottom + "px\n            " + list.listItem.padding.left + "px;\n        ") + "\n  ";
+});
+
+var ListItem = function ListItem(_ref2) {
+  var listItem = _ref2.theme.yoga.components.list.listItem,
+      small = _ref2.small,
+      divided = _ref2.divided,
+      onPress = _ref2.onPress,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var Component = /*#__PURE__*/React.createElement(StyledView, _extends({
+    small: small,
+    divided: divided
+  }, rest));
+
+  if (onPress) {
+    return /*#__PURE__*/React.createElement(TouchableHighlight, {
+      onPress: onPress,
+      underlayColor: listItem.selectable.color
+    }, Component);
+  }
+
+  return Component;
+};
+
+ListItem.propTypes = {
+  small: PropTypes.bool,
+  divided: PropTypes.bool,
+  onPress: PropTypes.func
+};
+ListItem.defaultProps = {
+  small: false,
+  divided: true,
+  onPress: undefined
+};
+ListItem.displayName = 'List.Item';
+export default withTheme(ListItem);

package/esm/List/native/index.js

@@ -0,0 +1,3 @@
+import ListItem from './ListItem';
+import List from './List';
+export { List, ListItem };

package/esm/List/web/List.js

@@ -21,17 +21,17 @@ var StyledList = styled.ul(_templateObject || (_templateObject = _taggedTemplate
 containing primary and supplemental actions, which are represented by icons and
 text. */
 
-var List = function List(_ref2) {
+var List = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var horizontal = _ref2.horizontal,
       divided = _ref2.divided,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledList, _extends({
     horizontal: horizontal,
-    divided: divided
+    divided: divided,
+    ref: ref
   }, rest));
-};
-
+});
 List.propTypes = {
   horizontal: PropTypes.bool,
   divided: PropTypes.bool