@gympass/yoga 7.48.0 → 7.50.0

package/esm/Datepicker/web/Calendar.js

@@ -0,0 +1,334 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Icon, Text, Box } from '@gympass/yoga';
+import { ChevronLeft, ChevronRight } from '@gympass/yoga-icons';
+import { oneOf, func, instanceOf, bool } from 'prop-types';
+import _ from 'lodash';
+var CalendarWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var spacing = _ref.theme.yoga.spacing;
+  return "\n    padding: " + spacing.xsmall + "px " + spacing.xsmall + "px " + spacing.small + "px " + spacing.xsmall + "px;\n  ";
+});
+var DaysWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var spacing = _ref2.theme.yoga.spacing;
+  return "\n    display: flex;\n    justify-content: space-between;\n    margin: " + spacing.xxsmall + "px " + spacing.zero + "px " + spacing.xsmall + "px " + spacing.zero + "px;\n  ";
+});
+var Day = styled(Text.SectionTitle)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var colors = _ref3.theme.yoga.colors;
+  return "\n    width: 40px;\n    color: " + colors.medium + ";\n    text-align: center;\n  ";
+});
+
+var getDayFieldColor = function getDayFieldColor(selected, disabled, colors, aux) {
+  if (selected && !disabled) {
+    return colors.white;
+  }
+
+  if (disabled) {
+    return colors.text.disabled;
+  }
+
+  var currentDate = new Date();
+  var val = aux.val,
+      year = aux.year,
+      month = aux.month;
+
+  if ( // if current date
+  new Date(Date.UTC(year, month, val)).getTime() === new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())).getTime()) {
+    return colors.primary;
+  }
+
+  return colors.stamina;
+};
+
+var toUTCDate = function toUTCDate(date) {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).getTime();
+};
+
+var getDayFieldRadius = function getDayFieldRadius(aux, radii) {
+  var _Date;
+
+  var val = aux.val,
+      startDate = aux.startDate,
+      endDate = aux.endDate,
+      year = aux.year,
+      month = aux.month;
+  var currentDate = (_Date = new Date(Date.UTC(year, month, val))) == null ? void 0 : _Date.getTime();
+
+  if (currentDate === toUTCDate(startDate) && endDate) {
+    return radii.circle + "px " + radii.sharp + "px " + radii.sharp + "px " + radii.circle + "px";
+  }
+
+  if (currentDate === toUTCDate(endDate) && startDate) {
+    return radii.sharp + "px " + radii.circle + "px " + radii.circle + "px " + radii.sharp + "px";
+  }
+
+  return radii.sharp + "px";
+};
+
+var DayField = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
+  var selected = _ref4.selected,
+      inRange = _ref4.inRange,
+      disabled = _ref4.disabled,
+      aux = _ref4.aux,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      colors = _ref4$theme$yoga.colors,
+      radii = _ref4$theme$yoga.radii,
+      spacing = _ref4$theme$yoga.spacing,
+      datepicker = _ref4$theme$yoga.components.datepicker;
+  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        }" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          }" : "") + "\n";
+});
+var Row = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
+  var _ref5$theme$yoga = _ref5.theme.yoga,
+      radii = _ref5$theme$yoga.radii,
+      spacing = _ref5$theme$yoga.spacing;
+  return "\n    display: flex;\n    div:first-child {\n        border-radius: " + radii.regular + "px 0 0 " + radii.regular + "px;\n    }\n    div:last-child {\n        border-radius: 0 " + radii.regular + "px " + radii.regular + "px 0;\n    }\n    padding: " + spacing.xxxsmall + "px 0px;\n";
+});
+
+function Calendar(_ref6) {
+  var type = _ref6.type,
+      startDate = _ref6.startDate,
+      endDate = _ref6.endDate,
+      onSelectSingle = _ref6.onSelectSingle,
+      onSelectRange = _ref6.onSelectRange,
+      disablePastDates = _ref6.disablePastDates,
+      disableFutureDates = _ref6.disableFutureDates;
+
+  var _useState = useState(new Date().getUTCMonth()),
+      month = _useState[0],
+      setMonth = _useState[1];
+
+  var _useState2 = useState(new Date().getUTCFullYear()),
+      year = _useState2[0],
+      setYear = _useState2[1];
+
+  useEffect(function () {
+    if (startDate) {
+      setMonth(startDate.getUTCMonth());
+      setYear(startDate.getUTCFullYear());
+    }
+  }, [startDate]);
+
+  var getDayOfWeek = function getDayOfWeek(day) {
+    return new Date(Date.UTC(year, month, day)).getUTCDay();
+  };
+
+  var getDaysInMonth = function getDaysInMonth() {
+    return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+  };
+
+  var getDaysInMonthBefore = function getDaysInMonthBefore() {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate();
+  };
+
+  var toUTCDateDay = function toUTCDateDay(day) {
+    return new Date(Date.UTC(year, month, day)).getTime();
+  };
+
+  var isEqual = function isEqual(day) {
+    return startDate && toUTCDate(startDate) === toUTCDateDay(day) || endDate && toUTCDate(endDate) === toUTCDateDay(day);
+  };
+
+  var inRange = function inRange(day) {
+    return startDate && toUTCDate(startDate) <= toUTCDateDay(day) && endDate && toUTCDate(endDate) >= toUTCDateDay(day);
+  };
+
+  var isDisabled = function isDisabled(day) {
+    var local = new Date(Date.UTC(year, month, day));
+    var now = new Date();
+    var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
+    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC;
+    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC;
+    return pastDatesDisabled || futureDateDisabled;
+  };
+
+  var _onClick = function onClick(day) {
+    var selectedDate = new Date(Date.UTC(year, month, day));
+    if (isDisabled(day) || startDate && selectedDate.getTime() === toUTCDate(startDate)) return;
+
+    if (type === 'single') {
+      onSelectSingle(selectedDate);
+    } else if (type === 'range') {
+      onSelectRange(selectedDate);
+    }
+  };
+
+  var getFirstWeek = function getFirstWeek() {
+    var day = getDayOfWeek(1);
+
+    var week = _.range(1, 7 - day + 1);
+
+    var lastDayBefore = getDaysInMonthBefore();
+    var daysBefore = [];
+
+    for (var i = lastDayBefore - (day - 1); i <= lastDayBefore; i += 1) {
+      daysBefore.push(i);
+    }
+
+    week = _.concat(daysBefore, week);
+    return week.map(function (val) {
+      return /*#__PURE__*/React.createElement(DayField, {
+        key: val,
+        disabled: val > 7 || isDisabled(val),
+        selected: isEqual(val),
+        onClick: function onClick() {
+          return val <= 7 && _onClick(val);
+        },
+        inRange: type === 'range' && val <= 7 && inRange(val),
+        aux: {
+          val: val,
+          startDate: startDate,
+          endDate: endDate,
+          year: year,
+          month: month
+        }
+      }, /*#__PURE__*/React.createElement(Text.Small, null, val));
+    });
+  };
+
+  var getMiddleWeeks = function getMiddleWeeks() {
+    var day = getDayOfWeek(1);
+    var firstDay = 7 - day + 1;
+    var weeks = [];
+
+    while (firstDay + 7 <= getDaysInMonth()) {
+      weeks.push(_.range(firstDay, firstDay + 7));
+      firstDay += 7;
+    }
+
+    return weeks.map(function (week, i) {
+      var days = week.map(function (val) {
+        return /*#__PURE__*/React.createElement(DayField, {
+          selected: isEqual(val),
+          onClick: function onClick() {
+            return _onClick(val);
+          },
+          inRange: type === 'range' && inRange(val),
+          key: val,
+          disabled: isDisabled(val),
+          aux: {
+            val: val,
+            startDate: startDate,
+            endDate: endDate,
+            year: year,
+            month: month
+          }
+        }, /*#__PURE__*/React.createElement(Text.Small, null, val));
+      });
+      /* eslint-disable-next-line react/no-array-index-key */
+
+      return /*#__PURE__*/React.createElement(Row, {
+        key: i
+      }, days);
+    });
+  };
+
+  var getLastWeek = function getLastWeek() {
+    var lastDay = getDaysInMonth();
+    var day = getDayOfWeek(lastDay);
+
+    var week = _.range(lastDay - day, lastDay + 1);
+
+    week = _.concat(week, _.range(1, 7 - day));
+    return week.map(function (val) {
+      return /*#__PURE__*/React.createElement(DayField, {
+        key: val,
+        disabled: val < 7 || isDisabled(val),
+        selected: isEqual(val),
+        onClick: function onClick() {
+          return val > 7 && _onClick(val);
+        },
+        inRange: type === 'range' && val > 7 && inRange(val),
+        aux: {
+          val: val,
+          startDate: startDate,
+          endDate: endDate,
+          year: year,
+          month: month
+        }
+      }, /*#__PURE__*/React.createElement(Text.Small, null, val));
+    });
+  };
+
+  var getDays = function getDays() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, null, getFirstWeek()), getMiddleWeeks(), /*#__PURE__*/React.createElement(Row, null, getLastWeek()));
+  };
+
+  var prior = function prior() {
+    var local = month - 1;
+
+    if (local < 0) {
+      local = 11;
+      setYear(year - 1);
+    }
+
+    setMonth(local);
+  };
+
+  var next = function next() {
+    var local = month + 1;
+
+    if (local > 11) {
+      local = 0;
+      setYear(year + 1);
+    }
+
+    setMonth(local);
+  };
+
+  return /*#__PURE__*/React.createElement(CalendarWrapper, null, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    justifyContent: "space-between",
+    m: "xxsmall",
+    mb: "zero",
+    pb: "small"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    style: {
+      cursor: 'pointer'
+    },
+    as: ChevronLeft,
+    width: "large",
+    height: "large",
+    onClick: prior,
+    fill: "primary",
+    "data-testid": "previous-month-arrow"
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      alignSelf: 'center'
+    }
+  }, new Intl.DateTimeFormat('en-US', {
+    month: 'long',
+    year: 'numeric'
+  }).format(new Date(year, month, 1, 0, 0, 0))), /*#__PURE__*/React.createElement(Icon, {
+    style: {
+      cursor: 'pointer'
+    },
+    as: ChevronRight,
+    width: "large",
+    height: "large",
+    onClick: next,
+    fill: "primary",
+    "data-testid": "next-month-arrow"
+  })), /*#__PURE__*/React.createElement(DaysWrapper, null, /*#__PURE__*/React.createElement(Day, null, "S"), /*#__PURE__*/React.createElement(Day, null, "M"), /*#__PURE__*/React.createElement(Day, null, "T"), /*#__PURE__*/React.createElement(Day, null, "W"), /*#__PURE__*/React.createElement(Day, null, "T"), /*#__PURE__*/React.createElement(Day, null, "F"), /*#__PURE__*/React.createElement(Day, null, "S")), /*#__PURE__*/React.createElement(Box, null, getDays()));
+}
+
+Calendar.propTypes = {
+  type: oneOf(['single', 'range']).isRequired,
+  startDate: instanceOf(Date),
+  endDate: instanceOf(Date),
+  onSelectSingle: func,
+  onSelectRange: func,
+  disablePastDates: bool,
+  disableFutureDates: bool
+};
+Calendar.defaultProps = {
+  startDate: undefined,
+  endDate: undefined,
+  onSelectSingle: null,
+  onSelectRange: null,
+  disablePastDates: false,
+  disableFutureDates: false
+};
+export default Calendar;

package/esm/Datepicker/web/Datepicker.js

@@ -0,0 +1,246 @@
+var _excluded = ["_disabled", "inputFilled"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+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; }
+
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Booking, BookingFilled } from '@gympass/yoga-icons';
+import { Text } from '@gympass/yoga';
+import styled, { css } from 'styled-components';
+import { bool, oneOf, func, instanceOf, string } from 'prop-types';
+import moment from 'moment';
+import { theme } from '../../Theme';
+import Calendar from './Calendar';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: ", ";\n"])), function (props) {
+  return props.fullWidth ? '100%' : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), theme.components.input.width);
+});
+
+var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, colors, input) {
+  if (error) {
+    return colors.feedback.attention[1];
+  }
+
+  if (disabled) {
+    return colors.elements.backgroundAndDisabled;
+  }
+
+  if (open) {
+    return colors.deep;
+  }
+
+  return input.border.color["default"];
+};
+
+var Selector = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var open = _ref.open,
+      error = _ref.error,
+      disabled = _ref.disabled,
+      _ref$theme$yoga = _ref.theme.yoga,
+      components = _ref$theme$yoga.components,
+      colors = _ref$theme$yoga.colors,
+      spacing = _ref$theme$yoga.spacing;
+  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, colors, components.input) + "\n    color: " + components.input.font.color.focus + ";\n  ";
+});
+var Input = styled(Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+      colors = _ref2.theme.yoga.colors;
+  return "\n    width: 100%;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: " + (!disabled ? colors.text.primary : colors.text.disabled) + "\n  ";
+});
+var InputPlaceholder = styled(Text.Small)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var disabled = _ref3.disabled,
+      colors = _ref3.theme.yoga.colors;
+  return "\n    color: " + (!disabled ? colors.text.secondary : colors.text.disabled) + "\n  ";
+});
+var TButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: flex-end;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  background-color: transparent;\n  cursor: pointer;\n"])));
+var Panel = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
+  var _ref4$theme$yoga = _ref4.theme.yoga,
+      components = _ref4$theme$yoga.components,
+      colors = _ref4$theme$yoga.colors,
+      radii = _ref4$theme$yoga.radii,
+      borders = _ref4$theme$yoga.borders,
+      spacing = _ref4$theme$yoga.spacing;
+  return "\n    position: absolute;\n    background-color: " + colors.white + ";\n    border: " + borders.small + "px solid " + colors.elements.lineAndBorders + ";\n    z-index: 1;\n    width: " + components.input.width + "px;\n    left: 0;\n    border-radius: " + radii.regular + "px;\n    margin-top: " + spacing.xxsmall + "px;\n  ";
+});
+var CalendarIcon = styled(function (_ref5) {
+  var _disabled = _ref5._disabled,
+      inputFilled = _ref5.inputFilled,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+
+  return !inputFilled ? /*#__PURE__*/React.createElement(Booking, _extends({
+    width: 20,
+    height: 20
+  }, props)) : /*#__PURE__*/React.createElement(BookingFilled, _extends({
+    width: 20,
+    height: 20
+  }, props));
+})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
+  var disabled = _ref6.disabled,
+      _ref6$theme$yoga = _ref6.theme.yoga,
+      colors = _ref6$theme$yoga.colors,
+      spacing = _ref6$theme$yoga.spacing;
+  return "\n    fill: " + (disabled ? colors.text.disabled : colors.text.primary) + ";\n    margin-right: " + spacing.xxsmall + "px;\n  ";
+});
+var ErrorWrapper = styled(Text.Small)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
+  var _ref7$theme$yoga = _ref7.theme.yoga,
+      colors = _ref7$theme$yoga.colors,
+      components = _ref7$theme$yoga.components;
+  return "\n    margin-top: " + components.input.helper.margin.top + "px;\n    font-size: " + components.input.helper.font.size + "px;\n    color: " + colors.feedback.attention[1] + ";\n    position: absolute;\n  ";
+});
+export var toUTC = function toUTC(date) {
+  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+};
+
+function Datepicker(_ref8) {
+  var fullWidth = _ref8.fullWidth,
+      type = _ref8.type,
+      placeholder = _ref8.placeholder,
+      startDate = _ref8.startDate,
+      endDate = _ref8.endDate,
+      onSelectSingle = _ref8.onSelectSingle,
+      disabled = _ref8.disabled,
+      onSelectRange = _ref8.onSelectRange,
+      disablePastDates = _ref8.disablePastDates,
+      disableFutureDates = _ref8.disableFutureDates,
+      error = _ref8.error,
+      onOpen = _ref8.onOpen;
+
+  var _useState = useState(),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState(startDate),
+      startD = _useState2[0],
+      setStartDate = _useState2[1];
+
+  var _useState3 = useState(endDate),
+      endD = _useState3[0],
+      setEndDate = _useState3[1];
+
+  var ref = useRef(null);
+
+  var _useState4 = useState(false),
+      inputFilled = _useState4[0],
+      setInputFilled = _useState4[1];
+
+  var triggerOnOpen = useCallback(function () {
+    if (onOpen) onOpen(open === 'true');
+  }, [open]);
+
+  var onBlur = function onBlur() {
+    setOpen(false.toString());
+    triggerOnOpen();
+  };
+
+  useEffect(function () {
+    if (type === 'single' && onSelectSingle) {
+      onSelectSingle(startD);
+      setOpen(false.toString());
+    } else if (type === 'range' && onSelectRange) {
+      onSelectRange(startD, endD);
+    }
+
+    setInputFilled(!!startD);
+  }, [startD, endD]);
+
+  var onDateSingleSelect = function onDateSingleSelect(startLocal) {
+    setStartDate(startLocal);
+  };
+
+  useEffect(function () {
+    if (open === 'true') ref.current.focus();
+  }, [open]);
+
+  var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
+    if (!endD) {
+      if (!startD) {
+        setStartDate(selectedDate);
+      } else if (selectedDate < startD) {
+        setStartDate(selectedDate);
+        setEndDate(undefined);
+      } else setEndDate(selectedDate);
+    } else {
+      setStartDate(selectedDate);
+      setEndDate(undefined);
+    }
+  };
+
+  var renderInput = function renderInput() {
+    if (!startD && !endD) {
+      return /*#__PURE__*/React.createElement(InputPlaceholder, {
+        disabled: disabled
+      }, placeholder != null ? placeholder : "Select Date");
+    }
+
+    var dateFormat = 'MMM D, YYYY';
+    return startD && /*#__PURE__*/React.createElement(Input, {
+      disabled: disabled
+    }, moment(startD).format(dateFormat), endD && " - " + moment(endD).format(dateFormat));
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    fullWidth: fullWidth,
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    open: open === 'true',
+    disabled: disabled,
+    error: error
+  }, renderInput(), /*#__PURE__*/React.createElement(TButton, {
+    onClick: function onClick() {
+      if (!disabled) {
+        setOpen((open !== 'true').toString());
+      }
+
+      triggerOnOpen();
+    }
+  }, /*#__PURE__*/React.createElement(CalendarIcon, {
+    disabled: disabled,
+    inputFilled: inputFilled
+  }))), error && /*#__PURE__*/React.createElement(ErrorWrapper, null, error), open === 'true' && /*#__PURE__*/React.createElement(Panel, {
+    tabIndex: -1,
+    ref: ref,
+    onBlur: onBlur
+  }, /*#__PURE__*/React.createElement(Calendar, {
+    type: type,
+    startDate: startD,
+    endDate: endD,
+    onSelectSingle: onDateSingleSelect,
+    onSelectRange: onDateRangeSelect,
+    disablePastDates: disablePastDates,
+    disableFutureDates: disableFutureDates
+  })));
+}
+
+Datepicker.propTypes = {
+  fullWidth: bool,
+  type: oneOf(['single', 'range']).isRequired,
+  placeholder: string,
+  startDate: instanceOf(Date),
+  endDate: instanceOf(Date),
+  disabled: bool,
+  onSelectSingle: func,
+  onSelectRange: func,
+  disablePastDates: bool,
+  disableFutureDates: bool,
+  error: string,
+  onOpen: func
+};
+Datepicker.defaultProps = {
+  fullWidth: false,
+  placeholder: undefined,
+  startDate: undefined,
+  endDate: undefined,
+  disabled: false,
+  onSelectSingle: undefined,
+  onSelectRange: undefined,
+  disablePastDates: false,
+  disableFutureDates: false,
+  error: undefined,
+  onOpen: undefined
+};
+export default Datepicker;