@gympass/yoga 7.65.0 → 7.66.1

package/esm/Dialog/web/Dialog.js

@@ -1,4 +1,4 @@
-var _excluded = ["isOpen", "hideCloseButton", "children", "onClose"];
+var _excluded = ["isOpen", "hideCloseButton", "children", "onClose", "zIndex"];
 
 var _templateObject, _templateObject2;
 
@@ -11,7 +11,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import React, { useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { func, bool, node } from 'prop-types';
+import { func, bool, node, number } from 'prop-types';
 import { Close } from '@gympass/yoga-icons';
 import { usePortal } from '../../hooks';
 import { Button, Card, Box } from '../..';
@@ -21,15 +21,17 @@ export var StyledDialog = styled(Card)(_templateObject || (_templateObject = _ta
   return "\n  padding: " + (onClose ? dialog.padding.withCloseButton : dialog.padding.top) + "px \n  " + dialog.padding["default"] + "px \n  " + dialog.padding["default"] + "px;\n\n  width: " + dialog.width["default"] + "px;\n  min-height: " + dialog.height.min + "px;\n  border-radius: " + dialog.border.radius + "px;\n  ";
 });
 var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var dialog = _ref2.theme.yoga.components.dialog;
-  return "\n  display: flex;\n  z-index: 3;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
+  var zIndex = _ref2.zIndex,
+      dialog = _ref2.theme.yoga.components.dialog;
+  return "\n  display: flex;\n  z-index: " + zIndex + ";\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
 
-var Dialog = function Dialog(_ref3) {
+function Dialog(_ref3) {
   var isOpen = _ref3.isOpen,
       hideCloseButton = _ref3.hideCloseButton,
       children = _ref3.children,
       onClose = _ref3.onClose,
+      zIndex = _ref3.zIndex,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
   var dialogRef = useRef(null);
@@ -58,7 +60,8 @@ var Dialog = function Dialog(_ref3) {
   return isOpen ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Overlay, {
     onClick: closeDialog,
     onClose: onClose,
-    ref: dialogRef
+    ref: dialogRef,
+    zIndex: zIndex
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
     onClose: onClose
   }, props), isCloseButtonVisible && /*#__PURE__*/React.createElement(Box, {
@@ -70,7 +73,7 @@ var Dialog = function Dialog(_ref3) {
     inverted: true,
     onClick: onClose
   })), children)), dialogElement) : /*#__PURE__*/React.createElement(React.Fragment, null);
-};
+}
 
 Dialog.propTypes = {
   /** Control the dialog visibility. */
@@ -81,12 +84,14 @@ Dialog.propTypes = {
 
   /** Function to close the dialog. */
   onClose: func,
+  zIndex: number,
   children: node.isRequired
 };
 Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
-  onClose: undefined
+  onClose: undefined,
+  zIndex: 3
 };
 Dialog.displayName = 'Dialog';
 export default Dialog;

package/esm/Dialog/web/Dialog.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeProvider, Button } from '../..';
+import Dialog from '.';
+describe('<Dialog />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should match snapshot with close button', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      onClose: jest.fn()
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render2.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal dialog', function () {
+    var onActionMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+    screen.getByText('Title');
+    screen.getByText('Subtitle');
+    var button = screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+    fireEvent.click(button);
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+  it('should render with close button', function () {
+    var onCloseMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      onClose: onCloseMock
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
+    var button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+  it('should hide the close button when hideCloseButton prop is true', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      hideCloseButton: true,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});

package/esm/Divider/index.native.js

@@ -0,0 +1,2 @@
+import Divider from './native';
+export default Divider;

package/esm/Divider/native/Divider.js

@@ -0,0 +1,29 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import { bool } from 'prop-types';
+import React from 'react';
+import styled, { css, withTheme } from 'styled-components';
+var StyledDivider = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var _ref$theme$yoga = _ref.theme.yoga,
+      borders = _ref$theme$yoga.borders,
+      colors = _ref$theme$yoga.colors,
+      vertical = _ref.vertical;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n\n      border-color: ", ";\n    "])), vertical ? 'height: auto' : 'width: auto', vertical ? "border-left-width: " + borders.small : "border-bottom-width: " + borders.small, colors.text.disabled);
+});
+var Divider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var vertical = _ref2.vertical;
+  return /*#__PURE__*/React.createElement(StyledDivider, {
+    vertical: vertical,
+    ref: ref
+  });
+});
+Divider.propTypes = {
+  /** If this value is defined, the divider will be in vertical when the flexDirection is row type */
+  vertical: bool
+};
+Divider.defaultProps = {
+  vertical: false
+};
+export default withTheme(Divider);

package/esm/Divider/native/Divider.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Divider, Box, Text } from '../..';
+describe('<Divider />', function () {
+  it('should create a divider component', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      minWidth: 300,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Text.H4, null, "First Content"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text.H4, null, "Second Content")))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should create vertical divider component', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "row",
+      minWidth: 300,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Text.H4, null, "First Content"), /*#__PURE__*/React.createElement(Divider, {
+      vertical: true
+    }), /*#__PURE__*/React.createElement(Text.H4, null, "Second Content")))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Divider/native/index.js

@@ -0,0 +1,2 @@
+import Divider from './Divider';
+export default Divider;

package/esm/Divider/web/Divider.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Divider, Box, Text } from '../..';
+describe('<Divider />', function () {
+  it('should create a divider component', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 50
+    }, /*#__PURE__*/React.createElement(Text.Regular, null, "First Content"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text.Regular, null, "Second Content")))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should create a vertical divider component', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      display: "flex",
+      flexDirection: "row",
+      minHeight: 50
+    }, /*#__PURE__*/React.createElement(Text.Regular, null, "First Content"), /*#__PURE__*/React.createElement(Divider, {
+      vertical: true
+    }), /*#__PURE__*/React.createElement(Text.Regular, null, "Second Content")))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Drawer/web/Drawer.js

@@ -4,7 +4,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 import React from 'react';
 import styled from 'styled-components';
-import { node } from 'prop-types';
+import { node, number } from 'prop-types';
 import Dialog from '../../Dialog';
 var StyledDrawer = styled(Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  border-radius: 0!important;\n  height: 100%;\n  align-self: flex-end;\n  position: absolute;\n  right: 0;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  transition: 0.25s ease-in-out;\n  @keyframes content {\n    0% {\n      transform: translate3d(100%, 0, 0);\n    }\n  }\n"])), function (_ref) {
   var drawer = _ref.theme.yoga.components.drawer;
@@ -16,6 +16,10 @@ function Drawer(props) {
 }
 
 Drawer.propTypes = {
-  children: node.isRequired
+  children: node.isRequired,
+  zIndex: number
+};
+Drawer.defaultProps = {
+  zIndex: 3
 };
 export default Drawer;

package/esm/Drawer/web/Drawer.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeProvider, Button } from '../..';
+import Drawer from '.';
+describe('<Drawer />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal drawer', function () {
+    var onActionMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+    screen.getByText('Title');
+    screen.getByText('Subtitle');
+    var button = screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+    fireEvent.click(button);
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+});

package/esm/Dropdown/index.native.js

@@ -0,0 +1,2 @@
+import Dropdown from './native';
+export default Dropdown;

package/esm/Dropdown/native/Backdrop.js

@@ -0,0 +1,93 @@
+var _excluded = ["visible", "title", "children", "onClose", "theme"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
+
+import React, { useEffect, useState } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { node, string, func, bool } from 'prop-types';
+import { Animated, TouchableWithoutFeedback, Easing, Modal } from 'react-native';
+import Text from '../../Text';
+var ClosableArea = styled(Animated.View)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var colors = _ref.theme.yoga.colors;
+  return "\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    background-color: " + colors.text.primary + ";\n  ";
+});
+var ContentWrapper = styled(Animated.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  justify-content: flex-end;\n\n  width: 100%;\n"])));
+var Content = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var dropdown = _ref2.theme.yoga.components.dropdown;
+  return "\n    justify-content: center;\n    width: 100%;\n\n    background-color: " + dropdown.backdrop.content.backgroundColor + ";\n    border-top-left-radius: " + dropdown.backdrop.content.border.radius.topLeft + "px;\n    border-top-right-radius: " + dropdown.backdrop.content.border.radius.topRight + "px;\n  ";
+});
+var Title = styled(Text.Bold)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var dropdown = _ref3.theme.yoga.components.dropdown;
+  return "\n    width: 100%;\n    padding:\n      " + dropdown.backdrop.content.title.padding.top + "px\n      " + dropdown.backdrop.content.title.padding.right + "px\n      " + dropdown.backdrop.content.title.padding.bottom + "px\n      " + dropdown.backdrop.content.title.padding.left + "px;\n\n    font-size: " + dropdown.backdrop.content.title.font.size + "px;\n\n    text-align: center;\n  ";
+});
+
+var Backdrop = function Backdrop(_ref4) {
+  var visible = _ref4.visible,
+      title = _ref4.title,
+      children = _ref4.children,
+      onClose = _ref4.onClose,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      transition = _ref4$theme$yoga.transition,
+      dropdown = _ref4$theme$yoga.components.dropdown,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+  var _useState = useState(visible),
+      isOpen = _useState[0],
+      toggleIsOpen = _useState[1];
+
+  var _useState2 = useState(new Animated.Value(0)),
+      backgroundAnimation = _useState2[0];
+
+  var _useState3 = useState(new Animated.Value(-dropdown.backdrop.content.height)),
+      contentAnimation = _useState3[0];
+
+  var animate = function animate(animation, toValue) {
+    return Animated.timing(animation, {
+      toValue: toValue,
+      duration: transition.duration[0],
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start(function () {
+      return !visible && toggleIsOpen(false);
+    });
+  };
+
+  useEffect(function () {
+    if (visible) toggleIsOpen(true);
+    animate(backgroundAnimation, visible ? 0.5 : 0);
+    animate(contentAnimation, visible ? 0 : -dropdown.backdrop.content.height);
+  }, [visible]);
+  return isOpen && /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    transparent: true,
+    animationType: "none"
+  }), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(ClosableArea, {
+    style: {
+      opacity: backgroundAnimation
+    }
+  })), /*#__PURE__*/React.createElement(ContentWrapper, {
+    style: {
+      bottom: contentAnimation
+    }
+  }, /*#__PURE__*/React.createElement(Content, null, title && /*#__PURE__*/React.createElement(Title, null, title), children)));
+};
+
+Backdrop.propTypes = {
+  visible: bool,
+  title: string,
+  children: node.isRequired,
+  onClose: func
+};
+Backdrop.defaultProps = {
+  visible: false,
+  title: null,
+  onClose: function onClose() {}
+};
+export default withTheme(Backdrop);

package/esm/Dropdown/native/Backdrop.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '../..';
+import Backdrop from './Backdrop';
+jest.useFakeTimers();
+describe('<Backdrop />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Backdrop, {
+        title: "Find an Activity"
+      }, "Some Content"))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot when visible', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Backdrop, {
+        visible: true,
+        title: "Find an Activity"
+      }, "Some Content"))),
+          toJSON = _render2.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Dropdown/native/Dropdown.js

@@ -0,0 +1,142 @@
+var _excluded = ["error", "label", "disabled", "full", "options", "cancelActionLabel", "confirmActionLabel", "onChange", "theme"];
+
+var _templateObject, _templateObject2;
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
+
+import React, { useState } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { arrayOf, func, shape, number, string, bool, oneOfType } from 'prop-types';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { ChevronDown } from '@gympass/yoga-icons';
+import Options from './Options';
+import Backdrop from './Backdrop';
+import Text from '../../Text';
+import Helper from '../../Input/native/Helper';
+var Selector = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var disabled = _ref.disabled,
+      selected = _ref.selected,
+      error = _ref.error,
+      full = _ref.full,
+      _ref$theme$yoga = _ref.theme.yoga,
+      colors = _ref$theme$yoga.colors,
+      dropdown = _ref$theme$yoga.components.dropdown;
+  return "\n    position: relative;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n    padding: " + dropdown.selector.padding.top + "px\n      " + dropdown.selector.padding.right + "px\n      " + dropdown.selector.padding.bottom + "px\n      " + dropdown.selector.padding.left + "px;\n\n    background-color: " + dropdown.selector.background + ";\n    border-radius: " + dropdown.selector.border.radius + "px;\n    border-width: " + dropdown.selector.border.width + "px;\n    border-style: solid;\n    border-color: " + (error ? colors.feedback.attention[1] : dropdown.selector.border.color) + ";\n\n    " + (disabled ? "border-color: " + dropdown.disabled.selector.border.color + ";" : '') + ";\n    " + (selected ? "border-color: " + dropdown.selected.selector.border.color + ";" : '') + ";\n  ";
+});
+var Label = styled(Text)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+      selected = _ref2.selected,
+      dropdown = _ref2.theme.yoga.components.dropdown;
+  return "\n    color: " + dropdown.input.font.color + ";\n    " + (disabled ? "color: " + dropdown.disabled.input.font.color + ";" : '') + "\n    " + (selected ? "color: " + dropdown.selected.input.font.color + ";" : '') + "\n  ";
+});
+
+var getSelectedOption = function getSelectedOption(options) {
+  return options.find(function (item) {
+    return item.selected === true;
+  });
+};
+/** Gympass Dropdown is a multiple choice type of menu. */
+
+
+var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var error = _ref3.error,
+      label = _ref3.label,
+      disabled = _ref3.disabled,
+      full = _ref3.full,
+      options = _ref3.options,
+      cancelActionLabel = _ref3.cancelActionLabel,
+      confirmActionLabel = _ref3.confirmActionLabel,
+      onChange = _ref3.onChange,
+      dropdown = _ref3.theme.yoga.components.dropdown,
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+
+  var _useState = useState(getSelectedOption(options)),
+      selected = _useState[0],
+      toggleIsSelected = _useState[1];
+
+  var _useState2 = useState(false),
+      isOpen = _useState2[0],
+      toggleIsOpen = _useState2[1];
+
+  var iconColor = function iconColor() {
+    if (disabled) return dropdown.disabled.arrow.fill;
+    if (selected) return dropdown.selected.arrow.fill;
+    return dropdown.arrow.fill;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    accessibilityRole: "button",
+    onPress: function onPress() {
+      return !disabled && toggleIsOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Selector, _extends({
+    full: full,
+    disabled: disabled,
+    selected: selected,
+    error: error
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Label, {
+    disabled: disabled,
+    selected: selected
+  }, selected && selected.label || label), /*#__PURE__*/React.createElement(ChevronDown, {
+    width: 20,
+    height: 20,
+    fill: iconColor()
+  })), error && !selected && /*#__PURE__*/React.createElement(Helper, {
+    error: error
+  }))), /*#__PURE__*/React.createElement(Backdrop, {
+    visible: isOpen,
+    title: label,
+    onClose: function onClose() {
+      return toggleIsOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement(Options, {
+    options: options,
+    selectedOption: selected,
+    cancelActionLabel: cancelActionLabel,
+    confirmActionLabel: confirmActionLabel,
+    onClose: function onClose() {
+      return toggleIsOpen(false);
+    },
+    onSelect: function onSelect(item) {
+      toggleIsSelected(item);
+      onChange(item);
+      toggleIsOpen(false);
+    }
+  })));
+});
+Dropdown.propTypes = {
+  label: string,
+  disabled: bool,
+  error: string,
+  full: bool,
+
+  /** { label (string), value (string or number), selected: (boolean) } */
+  options: arrayOf(shape({
+    label: string,
+    value: oneOfType([string, number]),
+    selected: bool
+  })).isRequired,
+
+  /** Cancel label that will be shown in iOS option chooser */
+  cancelActionLabel: string,
+
+  /** Confirm label that will be shown in iOS option chooser */
+  confirmActionLabel: string,
+  onChange: func
+};
+Dropdown.defaultProps = {
+  label: '',
+  error: undefined,
+  full: false,
+  cancelActionLabel: 'Cancel',
+  confirmActionLabel: 'Confirm',
+  disabled: false,
+  onChange: function onChange() {}
+};
+export default withTheme(Dropdown);

package/esm/Dropdown/native/Dropdown.test.js

@@ -0,0 +1,78 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { render } from '@testing-library/react-native';
+import { ThemeProvider, Dropdown } from '../..';
+jest.useFakeTimers();
+var dropdownProps = {
+  label: 'Find an activity to love',
+  options: [{
+    label: 'Yoga',
+    value: 'yoga'
+  }, {
+    label: 'Crossfit',
+    value: 'crossfit'
+  }, {
+    label: 'Tenis',
+    value: 'tenis'
+  }, {
+    label: 'Soccer',
+    value: 'soccer'
+  }, {
+    label: 'Pilates',
+    value: 'pilates'
+  }, {
+    label: 'Run',
+    value: 'running'
+  }]
+};
+describe('<Dropdown />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, dropdownProps))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot when disabled', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+        disabled: true
+      }, dropdownProps)))),
+          toJSON = _render2.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot when full', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+        full: true
+      }, dropdownProps)))),
+          toJSON = _render3.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot when has a selected value', function () {
+      var selectedOption = {
+        label: 'Swimming',
+        value: 'swimming',
+        selected: true
+      };
+      var props = dropdownProps;
+      props.options.push(selectedOption);
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+        disabled: true
+      }, props)))),
+          toJSON = _render4.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot with error', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
+        error: "Please, select one activity"
+      })))),
+          toJSON = _render5.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});