@gympass/yoga 7.66.0 → 7.67.0

package/esm/Chips/native/Chips.js

@@ -0,0 +1,104 @@
+var _excluded = ["children", "selected", "counter", "icons", "disabled", "onToggle", "onPress", "theme"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 from 'react';
+import { number, arrayOf, bool, func, node } from 'prop-types';
+import styled, { css, withTheme } from 'styled-components';
+import { TouchableWithoutFeedback } from 'react-native';
+import Counter from './Counter';
+import { theme } from '../../Theme';
+import Text from '../../Text';
+import Icon from '../../Icon';
+var Wrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 32px;\n  max-width: 216px;\n\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n\n  margin-right: ", "px;\n  padding: ", "px;\n\n  border-style: solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  border-width: ", "px;\n\n  background-color: ", ";\n\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), theme.spacing.xxsmall, theme.spacing.xxsmall, theme.colors.elements.lineAndBorders, theme.radii.small, theme.borders.small, theme.colors.white, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n          color: ", ";\n\n          border-color: ", ";\n        "])), theme.colors.elements.backgroundAndDisabled, theme.colors.elements.selectionAndIcons, theme.colors.elements.lineAndBorders) : '';
+}, function (_ref2) {
+  var selected = _ref2.selected;
+  return selected ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n          border-color: transparent;\n        "])), theme.colors.yoga) : '';
+});
+var StyledChips = styled(Text)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  line-height: ", "px;\n\n  flex-shrink: 1;\n\n  ", "\n"])), theme.fontSizes.xsmall, theme.lineHeights.xxsmall, function (_ref3) {
+  var selected = _ref3.selected;
+  return selected ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.colors.primary) : '';
+});
+var Chips = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+      selected = _ref4.selected,
+      counter = _ref4.counter,
+      icons = _ref4.icons,
+      disabled = _ref4.disabled,
+      onToggle = _ref4.onToggle,
+      _ref4$onPress = _ref4.onPress,
+      onPress = _ref4$onPress === void 0 ? onToggle : _ref4$onPress,
+      spacing = _ref4.theme.yoga.spacing,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+  var FirstIcon = icons[0],
+      SecondIcon = icons[1];
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({
+    onPress: onPress,
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(Wrapper, {
+    disabled: disabled,
+    selected: selected
+  }, SecondIcon && /*#__PURE__*/React.createElement(Icon, {
+    as: SecondIcon,
+    fill: selected ? 'primary' : 'secondary',
+    width: "small",
+    height: "small",
+    style: {
+      marginRight: children ? spacing.xxxsmall : undefined
+    }
+  }), /*#__PURE__*/React.createElement(StyledChips, {
+    as: selected ? Text.Medium : Text,
+    selected: selected,
+    numberOfLines: 1
+  }, children), selected && counter && !disabled && /*#__PURE__*/React.createElement(Counter, {
+    value: counter
+  }), FirstIcon && /*#__PURE__*/React.createElement(Icon, {
+    as: FirstIcon,
+    fill: selected ? 'primary' : 'secondary',
+    width: "small",
+    height: "small",
+    style: {
+      marginLeft: children ? spacing.xxxsmall : undefined
+    }
+  })));
+});
+Chips.propTypes = {
+  /** text to be displayed */
+  children: node,
+
+  /** if the chip is selected */
+  selected: bool,
+
+  /** will display a three digit number, if the value is greater than 999 a plus
+   * sign will be displayed instead. ex: "+999" */
+  counter: number,
+
+  /** disable chip */
+  disabled: bool,
+
+  /** a list of max two icons from @gympass/yoga-icons package */
+  icons: arrayOf(func),
+
+  /** onPress event */
+  onToggle: func,
+  onPress: func
+};
+Chips.defaultProps = {
+  children: undefined,
+  selected: false,
+  disabled: false,
+  counter: undefined,
+  icons: [],
+  onToggle: undefined,
+  onPress: undefined
+};
+export default withTheme(Chips);

package/esm/Chips/native/Chips.test.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { MapPin, ChevronDown } from '@gympass/yoga-icons';
+import { ThemeProvider, Chips } from '../..';
+describe('<Chips />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"))),
+          container = _render.container,
+          toJSON = _render.toJSON;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled prop', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        disabled: true
+      }, "Classes"))),
+          container = _render2.container,
+          toJSON = _render2.toJSON;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with more than one Chip', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, null, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, null, "Personal trainers"))),
+          container = _render3.container,
+          toJSON = _render3.toJSON;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with a long text', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes with a very long text"))),
+          container = _render4.container,
+          toJSON = _render4.toJSON;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    describe('selected', function () {
+      it('should match snapshot', function () {
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Classes"))),
+            container = _render5.container,
+            toJSON = _render5.toJSON;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Personal trainers"))),
+            container = _render6.container,
+            toJSON = _render6.toJSON;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+    });
+    describe('counter', function () {
+      it('should match snapshot', function () {
+        var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"))),
+            container = _render7.container,
+            toJSON = _render7.toJSON;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 52,
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 1732,
+          selected: true
+        }, "Personal trainers"))),
+            container = _render8.container,
+            toJSON = _render8.toJSON;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+    });
+    describe('icon', function () {
+      it('should match selected snapshot', function () {
+        var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin]
+        }, "Location"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin, ChevronDown]
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin, ChevronDown]
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin]
+        }, "Personal trainers"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin]
+        }, "Activities"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Language"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Categories"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin]
+        }, "Availability"))),
+            container = _render9.container,
+            toJSON = _render9.toJSON;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+    });
+  });
+  describe('Events', function () {
+    it('should toggle using onPress', function () {
+      var toggleMock = jest.fn();
+
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onPress: toggleMock
+      }, "Classes"))),
+          getByText = _render10.getByText;
+
+      fireEvent.press(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+    it('should toggle using onToggle', function () {
+      var toggleMock = jest.fn();
+
+      var _render11 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onToggle: toggleMock
+      }, "Classes"))),
+          getByText = _render11.getByText;
+
+      fireEvent.press(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Chips/native/Counter.js

@@ -0,0 +1,20 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled from 'styled-components';
+import { number, oneOfType, string } from 'prop-types';
+import { theme } from '../../Theme';
+import Text from '../../Text';
+var Wrapper = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  height: 16px;\n  min-width: 16px;\n\n  padding-right: 5px;\n  padding-left: 5px;\n  margin-left: ", "px;\n\n  color: ", ";\n  font-size: ", "px;\n  line-height: ", "px;\n\n  border-radius: ", "px;\n  background-color: ", ";\n\n  overflow: hidden;\n"])), theme.spacing.xxxsmall, theme.colors.white, theme.fontSizes.xsmall, theme.lineHeights.xsmall, theme.radii.small, theme.colors.primary);
+
+var Counter = function Counter(_ref) {
+  var value = _ref.value;
+  return /*#__PURE__*/React.createElement(Wrapper, null, Number(value) > 999 ? '+999' : value);
+};
+
+Counter.propTypes = {
+  value: oneOfType([number, string]).isRequired
+};
+export default Counter;

package/esm/Chips/native/index.js

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

package/esm/Chips/web/Chips.test.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { MapPin, ChevronDown } from '@gympass/yoga-icons';
+import { ThemeProvider, Chips } from '../..';
+describe('<Chips />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled prop', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        disabled: true
+      }, "Classes"))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with more than one Chip', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, null, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, null, "Personal trainers"))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    describe('selected', function () {
+      it('should match snapshot', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Classes"))),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Personal trainers"))),
+            container = _render5.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('counter', function () {
+      it('should match snapshot', function () {
+        var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"))),
+            container = _render6.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 52,
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 1732,
+          selected: true
+        }, "Personal trainers"))),
+            container = _render7.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('icon', function () {
+      it('should match selected snapshot', function () {
+        var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin]
+        }, "Location"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin, ChevronDown]
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin, ChevronDown]
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin]
+        }, "Personal trainers"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin]
+        }, "Activities"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Language"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Categories"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin]
+        }, "Availability"))),
+            container = _render8.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
+  describe('Events', function () {
+    it('should toggle', function () {
+      var toggleMock = jest.fn();
+
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onClick: toggleMock
+      }, "Classes"))),
+          getByText = _render9.getByText;
+
+      fireEvent.click(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+    it('should toggle using onToggle', function () {
+      var toggleMock = jest.fn();
+
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onToggle: toggleMock
+      }, "Classes"))),
+          getByText = _render10.getByText;
+
+      fireEvent.click(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Datepicker/web/Datepicker.test.js

@@ -0,0 +1,247 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { format } from 'date-fns';
+import { ThemeProvider, Datepicker } from '../..';
+import { toUTC } from './Datepicker';
+describe('<Datepicker />', function () {
+  var testDate = new Date(2022, 7, 3, 14, 0, 0);
+  describe('Snapshots', function () {
+    it('should match with single Datepicker', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single"
+      }))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with range Datepicker', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range"
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected date single Datepicker', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: testDate
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected dates range Datepicker', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var endDate = new Date();
+      endDate.setDate(testDate.getDate() + 15);
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        startDate: testDate,
+        endDate: endDate
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with custom placeholder single Datepicker', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled past dates Datepicker', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastDates: true
+      }))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled future dates Datepicker', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disableFutureDates: true
+      }))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled Datepicker', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disabled: true
+      }))),
+          container = _render8.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with error Datepicker', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        error: "This is an error"
+      }))),
+          container = _render9.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Unit', function () {
+    var dateFormat = 'MMM d, yyyy';
+    it('should call onSelectSingle function on single Datepicker', function () {
+      var onSelectSingle = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        onSelectSingle: onSelectSingle
+      })));
+      expect(onSelectSingle).not.toHaveBeenCalled();
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      fireEvent.click(day10);
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+    });
+    it('should call onSelectRange function on range Datepicker', function () {
+      var onSelectRange = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        onSelectRange: onSelectRange
+      })));
+      expect(onSelectRange).not.toHaveBeenCalled();
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      var day20 = screen.queryAllByText('20')[0];
+      fireEvent.click(day10);
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      fireEvent.click(day20);
+      expect(onSelectRange).toHaveBeenCalledTimes(2);
+    });
+    it('should call onCustomSelectRange function on range Datepicker', function () {
+      var onCustomSelectRange = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        onSelectRange: onCustomSelectRange
+      })));
+      expect(onCustomSelectRange).not.toHaveBeenCalled();
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      var day20 = screen.queryAllByText('20')[0];
+      fireEvent.click(day10);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(1);
+      fireEvent.click(day20);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(2);
+    });
+    it('should display default date on single Datepicker', function () {
+      var currentDate = new Date();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: currentDate
+      })));
+      var formattedDate = format(toUTC(currentDate), dateFormat);
+      expect(screen.getByText(formattedDate)).toBeVisible();
+    });
+    it('should display default date range on range Datepicker', function () {
+      var currentDate = new Date();
+      var end = new Date();
+      end.setDate(currentDate.getDate() + 15);
+      var formattedStartDate = format(toUTC(currentDate), dateFormat);
+      var formattedEndDate = format(toUTC(end), dateFormat);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        startDate: currentDate,
+        endDate: end
+      })));
+      expect(screen.getByText(formattedStartDate + " - " + formattedEndDate)).toBeVisible();
+    });
+    it('should display custom placeholder and "Select Date" if none is provided', function () {
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          rerender = _render10.rerender;
+
+      expect(screen.getByText('This is a custom placeholder :)')).toBeVisible();
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single"
+      })));
+      expect(screen.getByText('Select Date')).toBeVisible();
+    });
+    it('should disable past dates', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastDates: true
+      })));
+      fireEvent.click(screen.getByRole('button'));
+      var previousMonthArrow = screen.getByTestId('previous-month-arrow');
+      fireEvent.click(previousMonthArrow);
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should disable future dates', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disableFutureDates: true
+      })));
+      fireEvent.click(screen.getByRole('button'));
+      var nextMonthArrow = screen.getByTestId('next-month-arrow');
+      fireEvent.click(nextMonthArrow);
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should disable past dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastFrom: date
+      })));
+      fireEvent.click(screen.getByRole('button'));
+
+      for (var i = 1; i <= 17; i++) {
+        expect(screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
+    it('should disable future dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disableFutureFrom: date
+      })));
+      fireEvent.click(screen.getByRole('button'));
+
+      for (var i = 19; i <= 31; i++) {
+        expect(screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
+    it('should be disabled', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disabled: true
+      })));
+      var formattedDate = format(toUTC(testDate), dateFormat);
+      var datepickerInput = screen.getByText(formattedDate);
+      expect(datepickerInput).toHaveAttribute('disabled');
+      expect(datepickerInput.closest('div')).toHaveAttribute('disabled');
+    });
+    it('should display an error', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        error: "This is an error"
+      })));
+      expect(screen.getByText('This is an error')).toBeVisible();
+    });
+  });
+});