glints-aries 4.1.3 → 4.1.5

package/lib/Input/Datepicker/Datepicker.js

@@ -0,0 +1,359 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _DatepickerStyle = require("./DatepickerStyle");
+var _TextField = _interopRequireDefault(require("../TextField"));
+var _components = require("../../General/Icon/components");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable no-plusplus */
+
+var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+var Datepicker = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2["default"])(Datepicker, _React$Component);
+  function Datepicker(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.handleOnFocus = function (e) {
+      var isFocus = e.currentTarget === document.activeElement;
+      _this.setState({
+        isOpen: isFocus,
+        showMonths: false
+      });
+    };
+    _this.handleOnInputBlur = function (e) {
+      var isBlur = e.currentTarget === document.activeElement;
+      _this.setState({
+        isOpen: isBlur
+      });
+    };
+    _this.handleOnDateBlur = function (e) {
+      var isBlur = e.currentTarget === document.activeElement;
+      _this.setState({
+        isOpen: isBlur,
+        isDatepickerFocus: false
+      });
+    };
+    _this.handleMouseDownDate = function (e) {
+      e.currentTarget.focus();
+      _this.setState({
+        isDatepickerFocus: true
+      });
+    };
+    _this.handleClickToday = function () {
+      _this.setState({
+        getFullDate: (0, _moment["default"])(new Date()).format('LL'),
+        isOpen: false
+      });
+    };
+    _this.handleOnClickSelectedDate = function (date) {
+      var _this$state = _this.state,
+        monthValue = _this$state.monthValue,
+        currentYear = _this$state.currentYear;
+      var tempDate = Number(date.toString().length) === 1 ? "0" + date : "" + date;
+      var tempMonth = Number((monthValue + 1).toString().length) === 1 ? "0" + (monthValue + 1) : "" + (monthValue + 1);
+      var activeDate = "" + currentYear + monthValue + date;
+      _this.setState({
+        getFullDate: (0, _moment["default"])(currentYear + "-" + tempMonth + "-" + tempDate).format('LL'),
+        currentActiveDate: activeDate,
+        isOpen: false
+      });
+    };
+    _this.handleShowMonths = function (e) {
+      e.preventDefault();
+      _this.setState({
+        showMonths: true
+      });
+    };
+    _this.handleChooseMonth = function (e, month, tempMonth) {
+      e.preventDefault();
+      _this.setState({
+        monthValue: tempMonth.indexOf(month),
+        showMonths: false
+      });
+    };
+    _this.setYearBack = function () {
+      var currentYear = _this.state.currentYear;
+      var currentMonth = new Date().getMonth();
+      _this.setState({
+        currentYear: Number(currentYear) - 1,
+        firstDay: new Date(Number(currentYear) - 1, currentMonth, 1).getDay(),
+        lastDate: new Date(Number(currentYear) - 1, currentMonth, 0).getDate()
+      });
+    };
+    _this.setYearNext = function () {
+      var currentYear = _this.state.currentYear;
+      var currentMonth = new Date().getMonth();
+      _this.setState({
+        currentYear: Number(currentYear) + 1,
+        firstDay: new Date(Number(currentYear) + 1, currentMonth, 1).getDay(),
+        lastDate: new Date(Number(currentYear) + 1, currentMonth, 0).getDate()
+      });
+    };
+    _this.setMonthBack = function () {
+      var _this$state2 = _this.state,
+        monthValue = _this$state2.monthValue,
+        currentYear = _this$state2.currentYear;
+      var checkCurrentMonth = monthValue;
+      if (checkCurrentMonth > 0) {
+        _this.setState({
+          monthValue: monthValue - 1,
+          firstDay: new Date(currentYear, monthValue, 1).getDay(),
+          lastDate: new Date(currentYear, monthValue, 0).getDate()
+        });
+      } else {
+        _this.setYearBack();
+        _this.setState({
+          monthValue: 11
+        });
+      }
+    };
+    _this.setMonthNext = function () {
+      var _this$state3 = _this.state,
+        monthValue = _this$state3.monthValue,
+        currentYear = _this$state3.currentYear;
+      var checkCurrentMonth = monthValue;
+      if (checkCurrentMonth < 11) {
+        _this.setState({
+          monthValue: monthValue + 1,
+          firstDay: new Date(currentYear, monthValue + 2, 1).getDay(),
+          lastDate: new Date(currentYear, monthValue + 2, 0).getDate()
+        });
+      } else {
+        _this.setYearNext();
+        _this.setState({
+          monthValue: 0
+        });
+      }
+    };
+    _this.renderTHead = function () {
+      var days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+      return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+        role: "row"
+      }, days.map(function (day) {
+        return /*#__PURE__*/React.createElement(_DatepickerStyle.Th, {
+          key: day,
+          role: "columnheader",
+          title: day
+        }, /*#__PURE__*/React.createElement(_DatepickerStyle.HoverContent, null, day));
+      })));
+    };
+    _this.renderTBody = function () {
+      var content = [];
+      content.push(_this.renderFirstWeekRow());
+      content.push(_this.renderDayRow());
+      return /*#__PURE__*/React.createElement("tbody", null, content);
+    };
+    _this.renderFirstWeekRow = function () {
+      var _this$state4 = _this.state,
+        firstDay = _this$state4.firstDay,
+        currentMonth = _this$state4.currentMonth,
+        currentYear = _this$state4.currentYear,
+        currentActiveDate = _this$state4.currentActiveDate;
+      var tempArray = [];
+      tempArray = _this.renderOffSetDay();
+      var _loop = function _loop(i) {
+        tempArray.push( /*#__PURE__*/React.createElement(_DatepickerStyle.Td, {
+          role: "gridcell",
+          key: i,
+          onMouseDown: function onMouseDown() {
+            return _this.handleOnClickSelectedDate(i);
+          }
+        }, /*#__PURE__*/React.createElement(_DatepickerStyle.HoverContent, {
+          index: "" + currentYear + currentMonth + i,
+          currentActiveDate: "" + currentYear + currentMonth + i === currentActiveDate && currentActiveDate,
+          hoverAble: true
+        }, i)));
+      };
+      for (var i = 1; i <= 7 - firstDay; i++) {
+        _loop(i);
+      }
+      return /*#__PURE__*/React.createElement("tr", {
+        role: "row",
+        key: "row1"
+      }, tempArray);
+    };
+    _this.renderDayRow = function (array, startingCount) {
+      if (array === void 0) {
+        array = [];
+      }
+      if (startingCount === void 0) {
+        startingCount = 0;
+      }
+      var _this$state5 = _this.state,
+        firstDay = _this$state5.firstDay,
+        lastDate = _this$state5.lastDate,
+        currentMonth = _this$state5.currentMonth,
+        currentYear = _this$state5.currentYear,
+        currentActiveDate = _this$state5.currentActiveDate;
+      var functionArray = array;
+      var functionStartingCount = startingCount === 0 ? 8 - firstDay : startingCount;
+      var tempArray = [];
+      var isLastDate = false;
+      var _loop2 = function _loop2(i) {
+        if (i <= lastDate) {
+          tempArray.push( /*#__PURE__*/React.createElement(_DatepickerStyle.Td, {
+            role: "gridcell",
+            key: i,
+            onMouseDown: function onMouseDown() {
+              return _this.handleOnClickSelectedDate(i);
+            }
+          }, /*#__PURE__*/React.createElement(_DatepickerStyle.HoverContent, {
+            index: "" + currentYear + currentMonth + i,
+            currentActiveDate: "" + currentYear + currentMonth + i === currentActiveDate && currentActiveDate,
+            hoverAble: true
+          }, i)));
+        } else {
+          tempArray.push( /*#__PURE__*/React.createElement(_DatepickerStyle.Td, {
+            key: i
+          }));
+          isLastDate = true;
+        }
+      };
+      for (var i = functionStartingCount; i < functionStartingCount + 7; i++) {
+        _loop2(i);
+      }
+      functionArray.push( /*#__PURE__*/React.createElement("tr", {
+        role: "row",
+        key: "row" + functionArray.length
+      }, tempArray));
+      if (isLastDate) {
+        return functionArray;
+      }
+      return _this.renderDayRow(functionArray, functionStartingCount + 7);
+    };
+    _this.renderOffSetDay = function () {
+      var firstDay = _this.state.firstDay;
+      var tempArray = [];
+      for (var i = firstDay; i >= 1; i--) {
+        tempArray.push( /*#__PURE__*/React.createElement(_DatepickerStyle.Td, {
+          key: "offset" + i
+        }));
+      }
+      return tempArray;
+    };
+    _this.renderLeftSideIcon = function (showMonths) {
+      return /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerNavigation, null, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerIconWrapper, {
+        onMouseDown: _this.setYearBack
+      }, /*#__PURE__*/React.createElement(_components.ArrowBackDoubleIcon, {
+        color: "grey"
+      })), !showMonths && /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerIconWrapper, {
+        needMargin: true,
+        onMouseDown: _this.setMonthBack
+      }, /*#__PURE__*/React.createElement(_components.ArrowBackIcon, {
+        color: "grey"
+      })));
+    };
+    _this.renderRightSideIcon = function (showMonths) {
+      return /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerNavigation, null, !showMonths && /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerIconWrapper, {
+        needMargin: true,
+        onMouseDown: _this.setMonthNext
+      }, /*#__PURE__*/React.createElement(_components.ArrowNextIcon, {
+        color: "grey"
+      })), /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerIconWrapper, {
+        onMouseDown: _this.setYearNext
+      }, /*#__PURE__*/React.createElement(_components.ArrowNextDoubleIcon, {
+        color: "grey"
+      })));
+    };
+    _this.renderShowMonths = function () {
+      var tempMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      var rows = [];
+      for (var i = 0; i < 4; i++) {
+        rows.push( /*#__PURE__*/React.createElement("tr", {
+          role: "row",
+          key: tempMonth[i]
+        }, tempMonth.slice(i * 3, 3 + i * 3).map(function (data) {
+          return /*#__PURE__*/React.createElement(_DatepickerStyle.Td, {
+            role: "gridcell",
+            key: data
+          }, /*#__PURE__*/React.createElement(_DatepickerStyle.HoverContent, {
+            hoverAble: true,
+            biggerSize: true,
+            onMouseDown: function onMouseDown(e) {
+              return _this.handleChooseMonth(e, data, tempMonth);
+            }
+          }, data));
+        })));
+      }
+      return /*#__PURE__*/React.createElement("tbody", null, rows);
+    };
+    var _currentYear = new Date().getFullYear();
+    var _currentMonth = new Date().getMonth();
+    _this.state = {
+      previousFullDate: '',
+      getFullDate: '',
+      currentActiveDate: '',
+      currentYear: _currentYear,
+      currentMonth: _currentMonth,
+      monthValue: _currentMonth,
+      firstDay: new Date(_currentYear, _currentMonth + 1, 1).getDay(),
+      lastDate: new Date(_currentYear, _currentMonth + 1, 0).getDate(),
+      isOpen: false,
+      isDatepickerFocus: false,
+      showMonths: false
+    };
+    return _this;
+  }
+  Datepicker.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.isDatepickerFocus && prevState.previousFullDate === prevState.getFullDate) {
+      return {
+        isOpen: true
+      };
+    }
+    if (prevState.previousFullDate !== prevState.getFullDate) {
+      return {
+        previousFullDate: prevState.getFullDate
+      };
+    }
+    return null;
+  };
+  var _proto = Datepicker.prototype;
+  _proto.render = function render() {
+    var label = this.props.label;
+    var _this$state6 = this.state,
+      getFullDate = _this$state6.getFullDate,
+      currentYear = _this$state6.currentYear,
+      monthValue = _this$state6.monthValue,
+      isOpen = _this$state6.isOpen,
+      showMonths = _this$state6.showMonths;
+    return /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerContainer, {
+      className: "aries-datepicker"
+    }, /*#__PURE__*/React.createElement(_TextField["default"], {
+      type: "text",
+      label: label || 'Select date',
+      value: getFullDate,
+      removeFloatingLabel: true,
+      disableTyping: true,
+      onFocus: this.handleOnFocus,
+      onBlur: this.handleOnInputBlur
+    }), /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerWrapper, {
+      isOpen: isOpen,
+      onBlur: this.handleOnDateBlur,
+      onMouseDown: this.handleMouseDownDate,
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerSection, {
+      border: true
+    }, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerContent, {
+      justify: "space-between"
+    }, this.renderLeftSideIcon(showMonths), /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerContent, null, !showMonths && /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerMonthYearBtn, {
+      onMouseDown: this.handleShowMonths
+    }, months[monthValue]), /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerMonthYearBtn, null, currentYear)), this.renderRightSideIcon(showMonths))), /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerSection, {
+      border: true
+    }, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerContent, null, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerTable, {
+      cellSpacing: "0",
+      role: "grid"
+    }, !showMonths ? /*#__PURE__*/React.createElement(React.Fragment, null, this.renderTHead(), this.renderTBody()) : this.renderShowMonths()))), /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerSection, null, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerContent, null, /*#__PURE__*/React.createElement(_DatepickerStyle.DatepickerTodayBtn, {
+      type: "button",
+      onMouseDown: this.handleClickToday
+    }, "Today")))));
+  };
+  return Datepicker;
+}(React.Component);
+var _default = Datepicker;
+exports["default"] = _default;

package/lib/Input/Datepicker/DatepickerStyle.d.ts

@@ -0,0 +1,31 @@
+export declare const DatepickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DatepickerWrapper: import("styled-components").StyledComponent<"div", any, DatepickerWrapperProps, never>;
+interface DatepickerWrapperProps {
+    isOpen: boolean;
+}
+export declare const DatepickerSection: import("styled-components").StyledComponent<"div", any, DatepickerSectionProps, never>;
+interface DatepickerSectionProps {
+    border?: boolean;
+}
+export declare const DatepickerContent: import("styled-components").StyledComponent<"div", any, DatepickerContentProps, never>;
+interface DatepickerContentProps {
+    justify?: string;
+}
+export declare const DatepickerMonthYearBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const DatepickerTodayBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const DatepickerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DatepickerIconWrapper: import("styled-components").StyledComponent<"div", any, DatepickerIconWrapperProps, never>;
+interface DatepickerIconWrapperProps {
+    needMargin?: boolean;
+}
+export declare const DatepickerTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const Td: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const Th: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const HoverContent: import("styled-components").StyledComponent<"div", any, HoverContentProps, never>;
+interface HoverContentProps {
+    biggerSize?: boolean;
+    currentActiveDate?: string;
+    index?: string;
+    hoverAble?: boolean;
+}
+export {};

package/lib/Input/Datepicker/DatepickerStyle.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Th = exports.Td = exports.HoverContent = exports.DatepickerWrapper = exports.DatepickerTodayBtn = exports.DatepickerTable = exports.DatepickerSection = exports.DatepickerNavigation = exports.DatepickerMonthYearBtn = exports.DatepickerIconWrapper = exports.DatepickerContent = exports.DatepickerContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+var DatepickerContainer = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__DatepickerContainer",
+  componentId: "sc-t24o7e-0"
+})(["flex-grow:1;position:relative;"]);
+exports.DatepickerContainer = DatepickerContainer;
+var DatepickerWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__DatepickerWrapper",
+  componentId: "sc-t24o7e-1"
+})(["position:absolute;visibility:", ";opacity:", ";transform:", ";transform-origin:center top;transition:", ";background:", ";width:280px;box-shadow:0 2px 8px rgba(0,0,0,0.15);margin-top:0.5em;outline:none;z-index:1000;"], function (_ref) {
+  var isOpen = _ref.isOpen;
+  return isOpen ? 'visible' : 'hidden';
+}, function (_ref2) {
+  var isOpen = _ref2.isOpen;
+  return isOpen ? '1' : '0';
+}, function (_ref3) {
+  var isOpen = _ref3.isOpen;
+  return isOpen ? 'scaleY(1)' : 'scaleY(0.9)';
+}, function (_ref4) {
+  var isOpen = _ref4.isOpen;
+  return isOpen ? 'all .2s ease' : 'all .1s ease';
+}, _Colors.Greyscale.white);
+exports.DatepickerWrapper = DatepickerWrapper;
+var DatepickerSection = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__DatepickerSection",
+  componentId: "sc-t24o7e-2"
+})(["padding:10px;border-bottom:", ";"], function (_ref5) {
+  var border = _ref5.border;
+  return border && '1px solid #E8E8E8';
+});
+exports.DatepickerSection = DatepickerSection;
+var DatepickerContent = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__DatepickerContent",
+  componentId: "sc-t24o7e-3"
+})(["display:flex;justify-content:", ";align-items:center;"], function (_ref6) {
+  var justify = _ref6.justify;
+  return justify || 'center';
+});
+exports.DatepickerContent = DatepickerContent;
+var DatepickerMonthYearBtn = _styledComponents["default"].button.withConfig({
+  displayName: "DatepickerStyle__DatepickerMonthYearBtn",
+  componentId: "sc-t24o7e-4"
+})(["border:none;background:", ";padding:0;cursor:pointer;margin:0 4px;&:hover{color:", ";}"], _Colors.Greyscale.white, _Colors.SecondaryColor.actionblue);
+exports.DatepickerMonthYearBtn = DatepickerMonthYearBtn;
+var DatepickerTodayBtn = _styledComponents["default"].button.withConfig({
+  displayName: "DatepickerStyle__DatepickerTodayBtn",
+  componentId: "sc-t24o7e-5"
+})(["display:flex;align-items:center;justify-content:center;border:none;outline:none;cursor:pointer;padding:0;&:hover{color:", ";}"], _Colors.SecondaryColor.actionblue);
+exports.DatepickerTodayBtn = DatepickerTodayBtn;
+var DatepickerNavigation = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__DatepickerNavigation",
+  componentId: "sc-t24o7e-6"
+})(["display:flex;"]);
+exports.DatepickerNavigation = DatepickerNavigation;
+var DatepickerIconWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__DatepickerIconWrapper",
+  componentId: "sc-t24o7e-7"
+})(["display:flex;font-size:8px;cursor:pointer;margin:", ";"], function (_ref7) {
+  var needMargin = _ref7.needMargin;
+  return needMargin && '0 8px';
+});
+exports.DatepickerIconWrapper = DatepickerIconWrapper;
+var DatepickerTable = _styledComponents["default"].table.withConfig({
+  displayName: "DatepickerStyle__DatepickerTable",
+  componentId: "sc-t24o7e-8"
+})(["width:100%;max-width:100%;"]);
+exports.DatepickerTable = DatepickerTable;
+var Td = _styledComponents["default"].td.withConfig({
+  displayName: "DatepickerStyle__Td",
+  componentId: "sc-t24o7e-9"
+})(["padding:0;"]);
+exports.Td = Td;
+var Th = _styledComponents["default"].th.withConfig({
+  displayName: "DatepickerStyle__Th",
+  componentId: "sc-t24o7e-10"
+})(["padding:0;"]);
+exports.Th = Th;
+var HoverContent = _styledComponents["default"].div.withConfig({
+  displayName: "DatepickerStyle__HoverContent",
+  componentId: "sc-t24o7e-11"
+})(["display:flex;justify-content:center;align-items:center;width:", ";height:", ";border-radius:2px;transition:background 0.3s ease;background-color:transparent;line-height:22px;", " ", ""], function (_ref8) {
+  var biggerSize = _ref8.biggerSize;
+  return !biggerSize ? '35px' : 'auto';
+}, function (_ref9) {
+  var biggerSize = _ref9.biggerSize;
+  return !biggerSize ? '35px' : '50px';
+}, function (_ref10) {
+  var currentActiveDate = _ref10.currentActiveDate,
+    index = _ref10.index;
+  return currentActiveDate && currentActiveDate === index ? "\n      background-color: #1890ff;\n      color: white;\n  " : null;
+}, function (_ref11) {
+  var hoverAble = _ref11.hoverAble;
+  return hoverAble ? "\n      cursor: pointer;\n      &:hover { \n          background-color: #E5F7FF;\n      }\n  " : null;
+});
+exports.HoverContent = HoverContent;

package/lib/Input/Datepicker/index.d.ts

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

package/lib/Input/Datepicker/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+var _default = _Datepicker["default"];
+exports["default"] = _default;

package/lib/Input/DownshiftSelect/Select.d.ts

@@ -0,0 +1,101 @@
+import React, { HTMLProps } from 'react';
+import { UseComboboxProps } from 'downshift';
+import * as internalComponents from './SelectStyle';
+export interface Item {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    [x: string]: any;
+}
+export declare const defaultTransformFunction: (items: Item[], inputValue: string) => Item[];
+export declare const itemToString: (item: Item) => string;
+export declare const defaultEmptyListText = "No results found. Try another keyword to search for.";
+export declare type ItemProps = {
+    item: Item;
+};
+declare type ContainerType = HTMLProps<HTMLDivElement>;
+declare type LabelType = HTMLProps<HTMLLabelElement>;
+declare type ComboboxType = HTMLProps<HTMLDivElement>;
+declare type InputType = HTMLProps<HTMLInputElement>;
+declare type IndicatorsContainerType = HTMLProps<HTMLDivElement>;
+declare type LoadingIndicatorType = HTMLProps<HTMLDivElement>;
+declare type ClearButtonType = HTMLProps<HTMLButtonElement>;
+declare type ToggleButtonType = HTMLProps<HTMLButtonElement>;
+declare type MenuType = HTMLProps<HTMLUListElement>;
+declare type ItemType = ItemProps & HTMLProps<HTMLLIElement>;
+declare type EmptyListType = HTMLProps<HTMLLIElement>;
+declare type HelperTextType = HTMLProps<HTMLSpanElement>;
+declare type GroupContainerType = HTMLProps<HTMLLIElement>;
+declare type GroupType = HTMLProps<HTMLUListElement>;
+declare type GroupHeadingType = HTMLProps<HTMLLIElement>;
+export interface Components {
+    Container: React.ComponentType<ContainerType>;
+    Label: React.ComponentType<LabelType>;
+    Combobox: React.ComponentType<ComboboxType>;
+    Input: React.ComponentType<InputType>;
+    IndicatorsContainer: React.ComponentType<IndicatorsContainerType>;
+    LoadingIndicator: React.ComponentType<LoadingIndicatorType>;
+    ClearButton: React.ComponentType<ClearButtonType>;
+    ToggleButton: React.ComponentType<ToggleButtonType>;
+    Menu: React.ComponentType<MenuType>;
+    Item: React.ComponentType<ItemType>;
+    EmptyList: React.ComponentType<EmptyListType>;
+    HelperText: React.ComponentType<HelperTextType>;
+    GroupContainer: React.ComponentType<GroupContainerType>;
+    Group: React.ComponentType<GroupType>;
+    GroupHeading: React.ComponentType<GroupHeadingType>;
+}
+export declare const SubComponents: typeof internalComponents;
+export interface Props {
+    /** The items to choose from. */
+    items: Item[];
+    /** Transforms items to final list of items that will be shown, based on the search string and your custom requirements. */
+    transformFunction?: (items: Item[], inputValue: string) => Item[];
+    /** Overrides for built-in components */
+    components?: Partial<Components>;
+    /** Sets the Select into a loading state */
+    isLoading?: boolean;
+    /** Set to true to open the menu when the component initializes */
+    isOpenInitially?: boolean;
+    /** Text to display below the Select */
+    helperText?: string;
+    /** Props forwarded to internal downshift hook */
+    downshift?: Partial<UseComboboxProps<Item>>;
+    /** Text to be displayed in the input before the user types or selects an
+     * option */
+    placeholder?: string;
+    /** Text to be displayed above the Select component */
+    label?: string;
+    /** Disables the select. Changes styles and prevents any actions/events. */
+    disabled?: boolean;
+    /** Sets the internal input to readonly. Good for small lists that don't need to be filtered */
+    disableTyping?: boolean;
+    /** If true, the Select component will be set into an error state */
+    invalid?: boolean;
+    /** Control prop for controlling whether the menu is open or not */
+    isOpen?: boolean;
+    /** Called each time the menu is open or closed */
+    onIsOpenChange?: (isOpen: boolean) => void;
+    /** Control prop for controlling which item is selected */
+    selectedItem?: Item;
+    /** Called each time the selected item was changed */
+    onSelectedItemChange?: (selectedItem: Item) => void;
+    /** Control prop for controlling the value in the text input */
+    inputValue?: string;
+    /** Called each time the value in the input text changes */
+    onInputValueChange?: (inputValue: string) => void;
+    /** Called each time the Select is reset */
+    onClear?: () => void;
+    /** Called each time the text input gains focus */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Called each time the text input loses focus */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Text to be displayed in EmptyList when transformFunction returns an empty list */
+    emptyListText?: string;
+    /** Key by which to group items. Also used as group */
+    groupKey?: string;
+}
+export declare const Select: React.FC<Props> & {
+    Components: Components;
+};
+export {};