@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/TimeField/TimeField.test.js

@@ -0,0 +1,273 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _TimeField = _interopRequireDefault(require("./TimeField"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var TestApp = function TestApp(_ref) {
+  var initialValue = _ref.value,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value"]);
+
+  var _useState = (0, _react.useState)(initialValue),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_TimeField["default"], (0, _extends2["default"])({}, props, {
+    value: value,
+    onChange: setValue
+  }));
+};
+
+var setup = function setup(_ref2) {
+  var hours = _ref2.hours,
+      minutes = _ref2.minutes,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["hours", "minutes"]);
+  var testApp = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestApp, (0, _extends2["default"])({}, props, {
+    value: [hours, minutes]
+  })));
+  var hourInput = testApp.queryByLabelText('Hours');
+  var minuteInput = testApp.queryByLabelText('Minutes');
+  var meridiemInput = testApp.queryByLabelText('AM/PM');
+  return _objectSpread({
+    hourInput: hourInput,
+    minuteInput: minuteInput,
+    meridiemInput: meridiemInput
+  }, testApp);
+}; // 0 padding
+
+
+it('left pads 0 for single digit hours', function () {
+  var _setup = setup({
+    hours: 1
+  }),
+      hourInput = _setup.hourInput;
+
+  expect(hourInput).toHaveValue('01');
+});
+it('doesnt pad double digit hours', function () {
+  var _setup2 = setup({
+    hours: 11
+  }),
+      hourInput = _setup2.hourInput;
+
+  expect(hourInput).toHaveValue('11');
+});
+it('left pads 0 for single digit minutes', function () {
+  var _setup3 = setup({
+    minutes: 3
+  }),
+      minuteInput = _setup3.minuteInput;
+
+  expect(minuteInput).toHaveValue('03');
+});
+it('doesnt pad double digit minutes', function () {
+  var _setup4 = setup({
+    minutes: 35
+  }),
+      minuteInput = _setup4.minuteInput;
+
+  expect(minuteInput).toHaveValue('35');
+}); // hour display
+
+it('displays 13 hours as 01 hours for 12 hour clock', function () {
+  var _setup5 = setup({
+    hours: 13
+  }),
+      hourInput = _setup5.hourInput;
+
+  expect(hourInput).toHaveValue('01');
+});
+it('displays 0 hours as 12 hours for 12 hour clock', function () {
+  var _setup6 = setup({
+    hours: 13
+  }),
+      hourInput = _setup6.hourInput;
+
+  expect(hourInput).toHaveValue('01');
+});
+it('displays 13 hours as 13 hours for 24 hour clock', function () {
+  var _setup7 = setup({
+    hours: 13,
+    twelveHourClock: false
+  }),
+      hourInput = _setup7.hourInput;
+
+  expect(hourInput).toHaveValue('13');
+}); // meridiem
+
+it('displays the meridiem for 12 hour clock', function () {
+  var _setup8 = setup({
+    hours: 13
+  }),
+      meridiemInput = _setup8.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('does not display the meridiem for 24 hour clock', function () {
+  var _setup9 = setup({
+    hours: 13,
+    twelveHourClock: false
+  }),
+      meridiemInput = _setup9.meridiemInput;
+
+  expect(meridiemInput).not.toBeInTheDocument();
+}); // arrow key events
+
+it('changes focus to minutes from hours on arrow right', function () {
+  var _setup10 = setup({
+    hours: 1,
+    minutes: 30
+  }),
+      hourInput = _setup10.hourInput,
+      minuteInput = _setup10.minuteInput;
+
+  _userEvent["default"].type(hourInput, '{arrowright}');
+
+  expect(minuteInput).toHaveFocus();
+});
+it('changes focus to hours from minutes on arrow left', function () {
+  var _setup11 = setup({
+    hours: 1,
+    minutes: 30
+  }),
+      hourInput = _setup11.hourInput,
+      minuteInput = _setup11.minuteInput;
+
+  _userEvent["default"].type(minuteInput, '{arrowleft}');
+
+  expect(hourInput).toHaveFocus();
+});
+it('changes focus to meridiem from minutes on arrow right for 12 hour clock', function () {
+  var _setup12 = setup({
+    hours: 1,
+    minutes: 30
+  }),
+      minuteInput = _setup12.minuteInput,
+      meridiemInput = _setup12.meridiemInput;
+
+  _userEvent["default"].type(minuteInput, '{arrowright}');
+
+  expect(meridiemInput).toHaveFocus();
+});
+it('changes the meridiem on arrow key', function () {
+  var _setup13 = setup({
+    hours: 13,
+    minutes: 42
+  }),
+      meridiemInput = _setup13.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('PM');
+
+  _userEvent["default"].type(meridiemInput, '{arrowdown}');
+
+  expect(meridiemInput).toHaveValue('AM');
+
+  _userEvent["default"].type(meridiemInput, '{arrowup}');
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('does not change the meridiem on arrow key if arrow keys are ignored', function () {
+  var _setup14 = setup({
+    hours: 13,
+    minutes: 42,
+    ignoredKeys: ['ArrowUp', 'ArrowDown']
+  }),
+      meridiemInput = _setup14.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('PM');
+
+  _userEvent["default"].type(meridiemInput, '{arrowdown}');
+
+  expect(meridiemInput).toHaveValue('PM');
+
+  _userEvent["default"].type(meridiemInput, '{arrowup}');
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('changes the value of hours on arrow up or arrow down', function () {
+  var _setup15 = setup({
+    hours: 1,
+    minutes: 42
+  }),
+      hourInput = _setup15.hourInput;
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("02");
+});
+it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+  var _setup16 = setup({
+    hours: 1,
+    minutes: 42,
+    ignoredKeys: ['ArrowUp', 'ArrowDown']
+  }),
+      hourInput = _setup16.hourInput;
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
+  var _setup17 = setup({
+    hours: 1,
+    minutes: 42,
+    ignoredKeys: ['ArrowUp', 'ArrowDown']
+  }),
+      minuteInput = _setup17.minuteInput;
+
+  expect(minuteInput).toHaveValue("42");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(minuteInput).toHaveValue("42");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(minuteInput).toHaveValue("42");
+}); // ios
+
+it('renders iOS as a single input', function () {
+  var _setup18 = setup({
+    isIOS: true,
+    hours: 13,
+    minutes: 42
+  }),
+      container = _setup18.container,
+      hourInput = _setup18.hourInput,
+      minuteInput = _setup18.minuteInput,
+      meridiemInput = _setup18.meridiemInput;
+
+  var singleTimeInput = container.querySelector('[type=time]');
+  expect(singleTimeInput).toHaveValue('13:42');
+  expect(hourInput).not.toBeInTheDocument();
+  expect(minuteInput).not.toBeInTheDocument();
+  expect(meridiemInput).not.toBeInTheDocument();
+});

package/dist/cjs/TimeField/index.js

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

package/dist/cjs/TimeField/utils.js

@@ -0,0 +1,61 @@
+"use strict";
+
+exports.__esModule = true;
+exports.addHoursToTime = addHoursToTime;
+exports.addMinutesToTime = addMinutesToTime;
+exports.addTimeToDate = addTimeToDate;
+exports.getMeridiem = getMeridiem;
+exports.getTimeFromDate = getTimeFromDate;
+exports.modulo = modulo;
+exports.MINUTES_IN_HOUR = exports.HOURS_TO_NOON = exports.HOURS_IN_DAY = void 0;
+
+var _dateFns = require("date-fns");
+
+var HOURS_IN_DAY = 24;
+exports.HOURS_IN_DAY = HOURS_IN_DAY;
+var HOURS_TO_NOON = HOURS_IN_DAY / 2;
+exports.HOURS_TO_NOON = HOURS_TO_NOON;
+var MINUTES_IN_HOUR = 60;
+exports.MINUTES_IN_HOUR = MINUTES_IN_HOUR;
+
+function addHoursToTime(time, hoursToAdd) {
+  var hours = time[0],
+      minutes = time[1];
+  return [modulo(hours + hoursToAdd, HOURS_IN_DAY), minutes];
+}
+
+function addMinutesToTime(time, minutesToAdd) {
+  var hours = time[0],
+      minutes = time[1];
+  var nextMinutes = minutes + minutesToAdd;
+  var remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR);
+
+  if (remainderMinutes >= 0) {
+    var nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR);
+    hours = modulo(nextHours, HOURS_IN_DAY);
+    minutes = remainderMinutes;
+  } else {
+    minutes = nextMinutes;
+  }
+
+  return [hours, minutes];
+}
+
+function addTimeToDate(date, time) {
+  var hours = time[0],
+      minutes = time[1];
+  return (0, _dateFns.addHours)((0, _dateFns.addMinutes)(date, minutes), hours);
+}
+
+function getMeridiem(time) {
+  var hours = time[0];
+  return hours <= 11 ? 'AM' : 'PM';
+}
+
+function getTimeFromDate(date) {
+  return [(0, _dateFns.getHours)(date), (0, _dateFns.getMinutes)(date)];
+}
+
+function modulo(n, m) {
+  return (n % m + m) % m;
+}

package/dist/cjs/TokenInput/DefaultToken.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Badge = _interopRequireDefault(require("../Badge"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+function DefaultToken(_ref) {
+  var keyboardControls = _ref.keyboardControls,
+      removeToken = _ref.removeToken,
+      selectFirstToken = _ref.selectFirstToken,
+      selectLastToken = _ref.selectLastToken,
+      selectPreviousToken = _ref.selectPreviousToken,
+      selectNextToken = _ref.selectNextToken,
+      token = _ref.token,
+      tokenIndex = _ref.tokenIndex,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["keyboardControls", "removeToken", "selectFirstToken", "selectLastToken", "selectPreviousToken", "selectNextToken", "token", "tokenIndex"]);
+  return /*#__PURE__*/_react["default"].createElement(_Badge["default"], (0, _extends2["default"])({
+    size: "sm",
+    renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "close",
+      size: "xs",
+      cursor: "pointer",
+      onClick: function onClick() {
+        return removeToken(false);
+      }
+    })
+  }, keyboardControls, restProps), token);
+}
+
+var _default = DefaultToken;
+exports["default"] = _default;

package/dist/cjs/TokenInput/TokenInput.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _system = require("../system");
+
+var _InputBox = _interopRequireDefault(require("../Input/InputBox"));
+
+var _WrapView = _interopRequireDefault(require("../WrapView"));
+
+var _defaultRenders = require("./default-renders");
+
+var _DefaultToken = _interopRequireDefault(require("./DefaultToken"));
+
+var TokenInput = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(TokenInput, _Component);
+
+  function TokenInput() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      inputValue: ''
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearInputValue", function () {
+      _this.setState({
+        inputValue: ''
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addToken", function (token) {
+      var newTokens = [].concat(_this.props.tokens);
+      var tokenIndex = newTokens.indexOf(token);
+
+      if (tokenIndex > -1) {
+        var removed = newTokens.splice(tokenIndex, 1);
+        newTokens.push(removed[0]);
+      } else {
+        newTokens.push(token);
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange({
+          token: token,
+          tokenIndex: tokenIndex,
+          tokens: newTokens,
+          added: true
+        });
+      }
+
+      _this.clearInputValue();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeToken", function (token, focusIndex) {
+      var newTokens = [].concat(_this.props.tokens);
+      var tokenIndex = -1;
+
+      if (token.constructor === Array) {
+        token.some(function (val) {
+          tokenIndex = newTokens.indexOf(val);
+
+          if (tokenIndex > -1) {
+            newTokens.splice(tokenIndex, 1);
+            return true;
+          }
+
+          return false;
+        });
+      } else {
+        tokenIndex = newTokens.indexOf(token);
+
+        if (tokenIndex > -1) {
+          newTokens.splice(tokenIndex, 1);
+        }
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange({
+          token: token,
+          tokenIndex: tokenIndex,
+          tokens: newTokens,
+          added: false
+        });
+      }
+
+      if (typeof focusIndex === 'number') {
+        setTimeout(function () {
+          _this.focus(focusIndex >= newTokens.length ? undefined : focusIndex);
+        });
+      } else {
+        _this.blur();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputKeyDown", function (e) {
+      var _e$target = e.target,
+          selectionStart = _e$target.selectionStart,
+          selectionEnd = _e$target.selectionEnd;
+      var canMoveFocusBackward = selectionStart === 0 && selectionEnd === 0;
+
+      if (_this.props.tokens.length > 0 && canMoveFocusBackward && (e.key === 'Backspace' || e.key === 'ArrowLeft')) {
+        e.preventDefault();
+
+        _this.focusLastToken();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputChange", function (e) {
+      _this.setState({
+        inputValue: e.target.value
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+      _this.inputBox.blur();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function (index) {
+      _this.inputBox.focus(index);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusFirstToken", function () {
+      _this.focus(0);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusLastToken", function () {
+      _this.focus(_this.props.tokens.length - 1);
+    });
+    return _this;
+  }
+
+  var _proto = TokenInput.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.tokens.length !== this.props.tokens.length) {
+      this.clearInputValue();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        onChange = _this$props.onChange,
+        renderInput = _this$props.renderInput,
+        renderToken = _this$props.renderToken,
+        tokens = _this$props.tokens,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["onChange", "renderInput", "renderToken", "tokens"]);
+    var inputProps = {
+      size: (0, _system.navigateSize)(restProps.size, -1),
+      stroke: false,
+      strokeWeight: 0,
+      grow: 1,
+      shrink: 1,
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingVertical: 0,
+      onKeyDown: this.handleInputKeyDown,
+      onChange: this.handleInputChange,
+      value: this.state.inputValue
+    };
+
+    var _getBoxSize = (0, _system.getBoxSize)(restProps.size),
+        paddingVertical = _getBoxSize.paddingVertical;
+
+    return /*#__PURE__*/_react["default"].createElement(_WrapView["default"], (0, _extends2["default"])({
+      as: _InputBox["default"],
+      innerRef: function innerRef(c) {
+        return _this2.inputBox = c;
+      },
+      role: "group",
+      focusChildIndex: tokens.length,
+      evenPadding: true,
+      spacing: paddingVertical
+    }, restProps), tokens.map(function (token, tokenIndex) {
+      var removeToken = _this2.removeToken.bind(_this2, token);
+
+      var selectFirstToken = _this2.focusFirstToken;
+      var selectLastToken = _this2.focusLastToken;
+
+      var selectNextToken = _this2.focus.bind(_this2, tokenIndex + 1);
+
+      var selectPreviousToken = _this2.focus.bind(_this2, tokenIndex - 1);
+
+      var tokenToRender = renderToken(token, {
+        keyboardControls: {
+          tabIndex: 0,
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === 'Backspace') {
+              e.preventDefault();
+              removeToken(tokenIndex);
+            }
+
+            if (e.key === 'ArrowLeft') {
+              e.preventDefault();
+              selectPreviousToken();
+            }
+
+            if (e.key === 'ArrowRight') {
+              e.preventDefault();
+              selectNextToken();
+            }
+          }
+        },
+        removeToken: removeToken,
+        selectFirstToken: selectFirstToken,
+        selectLastToken: selectLastToken,
+        selectNextToken: selectNextToken,
+        selectPreviousToken: selectPreviousToken,
+        tokenIndex: tokenIndex
+      });
+      return typeof tokenToRender === 'string' ? /*#__PURE__*/_react["default"].createElement(_DefaultToken["default"], {
+        key: tokenToRender,
+        removeToken: removeToken,
+        selectFirstToken: selectFirstToken,
+        selectLastToken: selectLastToken,
+        selectNextToken: selectNextToken,
+        selectPreviousToken: selectPreviousToken,
+        token: tokenToRender,
+        tokenIndex: tokenIndex
+      }) : /*#__PURE__*/(0, _react.cloneElement)(tokenToRender, {
+        key: JSON.stringify(token)
+      });
+    }), renderInput(inputProps, {
+      clearInputValue: this.clearInputValue,
+      addToken: this.addToken,
+      removeToken: this.removeToken,
+      selectFirstToken: this.focusFirstToken,
+      selectLastToken: this.focusLastToken
+    }));
+  };
+
+  return TokenInput;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(TokenInput, "Token", _DefaultToken["default"]);
+(0, _defineProperty2["default"])(TokenInput, "defaultProps", {
+  tokens: null,
+  renderToken: _defaultRenders.defaultRenderToken,
+  renderInput: _defaultRenders.defaultRenderInput,
+  size: 'md'
+});
+var _default = TokenInput;
+exports["default"] = _default;

package/dist/cjs/TokenInput/default-renders.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.defaultRenderToken = defaultRenderToken;
+exports.defaultRenderInput = defaultRenderInput;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputField = _interopRequireDefault(require("../Input/InputField"));
+
+var _DefaultToken = _interopRequireDefault(require("./DefaultToken"));
+
+function defaultRenderToken(token, _ref) {
+  var keyboardControls = _ref.keyboardControls,
+      removeToken = _ref.removeToken,
+      selectFirstToken = _ref.selectFirstToken,
+      selectLastToken = _ref.selectLastToken,
+      selectNextToken = _ref.selectNextToken,
+      selectPreviousToken = _ref.selectPreviousToken,
+      tokenIndex = _ref.tokenIndex;
+  return /*#__PURE__*/_react["default"].createElement(_DefaultToken["default"], {
+    keyboardControls: keyboardControls,
+    removeToken: removeToken,
+    selectFirstToken: selectFirstToken,
+    selectLastToken: selectLastToken,
+    selectNextToken: selectNextToken,
+    selectPreviousToken: selectPreviousToken,
+    token: token,
+    tokenIndex: tokenIndex
+  });
+}
+
+function defaultRenderInput(_ref2, _ref3) {
+  var addToken = _ref3.addToken;
+  var _onKeyDown = _ref2.onKeyDown,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["onKeyDown"]);
+  return /*#__PURE__*/_react["default"].createElement(_InputField["default"], (0, _extends2["default"])({
+    onKeyDown: function onKeyDown(e) {
+      if (e.target.value !== '' && e.key === 'Enter') {
+        addToken(e.target.value);
+      }
+
+      if (_onKeyDown) {
+        _onKeyDown(e);
+      }
+    }
+  }, restProps));
+}