@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,96 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import React, { useLayoutEffect, useState } from 'react';
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
+import merge from 'deepmerge';
+import defaultTheme from '../system/default-theme';
+import { flattenPalette } from '../system';
+import { objectToCSSProperties, shallowEqual } from '../utils';
+import { setRootStyles, styleReset } from './styles';
+var STORAGE_KEY = 'ui-kit-theme';
+export var cache = createCache({
+  key: 'uikit',
+  prefix: function prefix(key) {
+    switch (key) {
+      case 'appearance':
+      case 'user-select':
+      case 'position':
+      case ':placeholder':
+        return true;
+
+      default:
+        return false;
+    }
+  }
+});
+export var themeStorage = {
+  get: function get() {
+    return window.localStorage.getItem(STORAGE_KEY);
+  },
+  set: function set(value) {
+    return window.localStorage.setItem(STORAGE_KEY, value);
+  }
+};
+export var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.body.dataset.theme = theme\n  }\n} catch (e) {}\n";
+var emptyTheme = {};
+
+function mergeThemes(a, b) {
+  var _a$button, _b$button, _a$spinner, _b$spinner, _a$spinner2, _b$spinner2;
+
+  if (a === void 0) {
+    a = {};
+  }
+
+  if (b === void 0) {
+    b = {};
+  }
+
+  return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
+    button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
+      themes: merge(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+    }),
+    colors: merge(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
+    spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
+      sizes: merge(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: merge(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+    })
+  });
+}
+
+export function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
+      children = _ref.children;
+
+  var _useState = useState(function () {
+    return mergeThemes(defaultTheme, theme);
+  }),
+      mergedTheme = _useState[0],
+      setMergedTheme = _useState[1];
+
+  useLayoutEffect(function () {
+    var nextTheme = mergeThemes(defaultTheme, theme);
+    setRootStyles(objectToCSSProperties('colors', nextTheme.colors));
+
+    if (!shallowEqual(mergedTheme, nextTheme)) {
+      setMergedTheme(nextTheme);
+    }
+  }, [theme]);
+  return /*#__PURE__*/React.createElement(CacheProvider, {
+    value: cache
+  }, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
+    theme: mergedTheme
+  }, children));
+}
+ThemeProvider.cache = cache;
+ThemeProvider.setRootStyles = setRootStyles;
+ThemeProvider.styleReset = styleReset;
+ThemeProvider.themeInitializerScript = themeInitializerScript;
+ThemeProvider.themeStorage = themeStorage;
+export { setRootStyles, styleReset };

package/dist/esm/ThemeProvider/index.js

@@ -0,0 +1,2 @@
+export * from './ThemeProvider';
+export { ThemeProvider as default } from './ThemeProvider';

package/dist/esm/ThemeProvider/styles.js

@@ -0,0 +1,29 @@
+import { defaultTheme, flattenPalette } from '../system';
+import { objectToCSSProperties } from '../utils';
+
+var getRootStyles = function getRootStyles(styles) {
+  var styleString = Object.keys(styles).map(function (key) {
+    return key + ": " + styles[key];
+  }).join('; ');
+  return ":root { " + styleString + " }";
+};
+
+export var setRootStyles = function setRootStyles(styles) {
+  var styleElement = document.getElementById('uikit-style');
+  var sheet = styleElement.sheet;
+  var styleString = getRootStyles(styles);
+  sheet.deleteRule(0);
+  sheet.insertRule(styleString, 0);
+};
+export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
+export var styleReset = ("\n" + getRootStyles(defaultColorProperties) + "\n\n.uikit-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.uikit-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.uikit-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
+// so we can have more control over when styles are injected since multiple
+// Providers can be used on a page
+
+if (typeof window !== 'undefined' && !document.getElementById('uikit-style')) {
+  var styleElement = document.createElement('style');
+  styleElement.id = 'uikit-style';
+  styleElement.innerHTML = styleReset;
+  document.head.insertAdjacentElement('afterbegin', styleElement);
+}

package/dist/esm/TileView/TileView.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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) { _defineProperty(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; }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import * as React from 'react';
+import splitStyles from '../system/split-styles';
+import { spacingValue } from '../system';
+import { useVariant } from '../VariantProvider';
+var tileViewPlugin = {
+  styleProps: ['minCellWidth', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var minCellWidth = _ref.minCellWidth,
+        spacing = _ref.spacing,
+        styles = _objectWithoutPropertiesLoose(_ref, ["minCellWidth", "spacing"]);
+
+    var parsedMinCellWidth = spacingValue(minCellWidth);
+
+    if (parsedMinCellWidth) {
+      styles.gridTemplateColumns = "repeat(auto-fill, minmax(" + parsedMinCellWidth + ", 1fr))";
+    }
+
+    if (spacing !== undefined) {
+      styles.gridGap = spacingValue(spacing);
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+export function TileView(_ref2) {
+  var as = _ref2.as,
+      innerRef = _ref2.innerRef,
+      props = _objectWithoutPropertiesLoose(_ref2, ["as", "innerRef"]);
+
+  var Element = as || defaultElement;
+  var variant = useVariant();
+  return jsx(Element, _extends({
+    ref: innerRef
+  }, splitStyles(_objectSpread({
+    display: 'grid',
+    grow: 1,
+    shrink: 1,
+    plugin: tileViewPlugin,
+    variant: variant
+  }, props))));
+}

package/dist/esm/TileView/index.js

@@ -0,0 +1,2 @@
+export * from './TileView';
+export { TileView as default } from './TileView';

package/dist/esm/TimeField/TimeField.js

@@ -0,0 +1,237 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import Box from '../Box';
+import Input from '../Input/Input';
+import InputBox from '../Input/InputBox';
+import InputField from '../Input/InputField';
+import NumberField from '../NumberField';
+import { isIOS, noop, padNumber } from '../utils';
+import { HOURS_TO_NOON, HOURS_IN_DAY, addHoursToTime, addMinutesToTime, addTimeToDate, getMeridiem, getTimeFromDate } from './utils';
+
+var _ref = /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  width: 0.5,
+  textAlign: "center",
+  userSelect: "none"
+}, ":");
+
+var TimeField = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TimeField, _Component);
+
+  function TimeField(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "setInputBoxRef", function (component) {
+      _this.inputBox = component;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateTime", function (time) {
+      if (time === void 0) {
+        time = {};
+      }
+
+      var _this$props$value = _this.props.value,
+          hours = _this$props$value[0],
+          minutes = _this$props$value[1];
+
+      if (time.hours !== undefined) {
+        hours = time.hours;
+      }
+
+      if (time.minutes !== undefined) {
+        minutes = time.minutes;
+      }
+
+      if (_this.props.twelveHourClock && !_this.props.isIOS) {
+        if (hours > 11 && _this.state.meridiem === 'AM') {
+          hours -= 12;
+        } else if (hours < 12 && _this.state.meridiem === 'PM') {
+          hours += 12;
+        }
+      }
+
+      _this.props.onChange([hours, minutes]);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateHours", function (amount) {
+      _this.props.onChange(addHoursToTime(_this.props.value, amount));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateMinutes", function (amount) {
+      _this.props.onChange(addMinutesToTime(_this.props.value, amount));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toggleMeridiem", function () {
+      _this.setState(function (state) {
+        return {
+          meridiem: state.meridiem === 'AM' ? 'PM' : 'AM'
+        };
+      }, _this.updateTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleHoursChange", function (hours) {
+      _this.updateTime({
+        hours: hours
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleHoursKeyDown", function (event) {
+      if (event.key === 'ArrowRight') {
+        _this.inputBox.focus(1);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMinutesChange", function (minutes) {
+      _this.updateTime({
+        minutes: minutes
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMinutesKeyDown", function (event) {
+      if (_this.props.ignoredKeys.includes(event.key)) {
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        _this.inputBox.focus(0);
+      }
+
+      if (event.key === 'ArrowRight') {
+        _this.inputBox.focus(2);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleAMPMKeyDown", function (event) {
+      if (_this.props.ignoredKeys.includes(event.key)) {
+        return;
+      }
+
+      if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+        event.preventDefault();
+      }
+
+      if (event.key === 'ArrowLeft') {
+        _this.inputBox.focus(1);
+      }
+
+      if (event.key.toLowerCase() === 'a' && _this.state.meridiem === 'PM' || event.key.toLowerCase() === 'p' && _this.state.meridiem === 'AM' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        _this.toggleMeridiem();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleIOSChange", function (event) {
+      var _event$target$value$s = event.target.value.split(':'),
+          hours = _event$target$value$s[0],
+          minutes = _event$target$value$s[1];
+
+      _this.updateTime({
+        hours: +hours,
+        minutes: +minutes
+      });
+    });
+
+    _this.state = {
+      meridiem: getMeridiem(props.value)
+    };
+    return _this;
+  }
+
+  var _proto = TimeField.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.value[0] !== this.props.value[0]) {
+      this.setState({
+        meridiem: getMeridiem(this.props.value)
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        ignoredKeys = _this$props.ignoredKeys,
+        value = _this$props.value,
+        min = _this$props.min,
+        max = _this$props.max,
+        interval = _this$props.interval,
+        onChange = _this$props.onChange,
+        twelveHourClock = _this$props.twelveHourClock,
+        isIOS = _this$props.isIOS,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["ignoredKeys", "value", "min", "max", "interval", "onChange", "twelveHourClock", "isIOS"]);
+
+    var hours = value[0],
+        minutes = value[1];
+    return isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+      type: "time",
+      autoWidth: hours + ":" + padNumber(minutes, 2) + " " + this.state.meridiem,
+      value: padNumber(hours, 2) + ":" + padNumber(minutes, 2),
+      onChange: this.handleIOSChange
+    })) : /*#__PURE__*/React.createElement(InputBox, _extends({
+      ref: this.setInputBoxRef,
+      inline: true
+    }, restProps), /*#__PURE__*/React.createElement(NumberField, {
+      autoWidth: false,
+      fontVariantNumeric: "tabular-nums",
+      moveFocusOnMax: true,
+      value: twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours,
+      min: twelveHourClock ? 1 : 0,
+      max: twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1,
+      pad: 2,
+      grow: 0,
+      width: "2ch",
+      textAlign: "center",
+      "aria-label": "Hours",
+      onChange: this.handleHoursChange,
+      onKeyDown: this.handleHoursKeyDown,
+      ignoredKeys: ignoredKeys
+    }), _ref, /*#__PURE__*/React.createElement(NumberField, {
+      autoWidth: false,
+      fontVariantNumeric: "tabular-nums",
+      moveFocusOnMax: true,
+      value: minutes,
+      min: 0,
+      max: 59,
+      pad: 2,
+      grow: 0,
+      width: "2ch",
+      textAlign: "center",
+      "aria-label": "Minutes",
+      onChange: this.handleMinutesChange,
+      onKeyDown: this.handleMinutesKeyDown,
+      ignoredKeys: ignoredKeys
+    }), twelveHourClock && /*#__PURE__*/React.createElement(InputField, {
+      highlightOnInteraction: true,
+      value: this.state.meridiem,
+      grow: 0,
+      width: 3,
+      textAlign: "center",
+      "aria-label": "AM/PM",
+      onChange: noop // prevent React warnings
+      ,
+      onKeyDown: this.handleAMPMKeyDown
+    }));
+  };
+
+  return TimeField;
+}(Component);
+
+_defineProperty(TimeField, "addHoursToTime", addHoursToTime);
+
+_defineProperty(TimeField, "addMinutesToTime", addMinutesToTime);
+
+_defineProperty(TimeField, "addTimeToDate", addTimeToDate);
+
+_defineProperty(TimeField, "getTimeFromDate", getTimeFromDate);
+
+_defineProperty(TimeField, "defaultProps", {
+  twelveHourClock: true,
+  ignoredKeys: [],
+  isIOS: isIOS
+});
+
+export default TimeField;

package/dist/esm/TimeField/TimeField.test.js

@@ -0,0 +1,241 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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) { _defineProperty(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; }
+
+import React, { useState } from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import TimeField from './TimeField';
+
+var TestApp = function TestApp(_ref) {
+  var initialValue = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, ["value"]);
+
+  var _useState = useState(initialValue),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return /*#__PURE__*/React.createElement(TimeField, _extends({}, props, {
+    value: value,
+    onChange: setValue
+  }));
+};
+
+var setup = function setup(_ref2) {
+  var hours = _ref2.hours,
+      minutes = _ref2.minutes,
+      props = _objectWithoutPropertiesLoose(_ref2, ["hours", "minutes"]);
+
+  var testApp = render( /*#__PURE__*/React.createElement(TestApp, _extends({}, 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.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.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.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.type(meridiemInput, '{arrowdown}');
+  expect(meridiemInput).toHaveValue('AM');
+  userEvent.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.type(meridiemInput, '{arrowdown}');
+  expect(meridiemInput).toHaveValue('PM');
+  userEvent.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.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.type(hourInput, '{arrowup}');
+  expect(hourInput).toHaveValue("01");
+  userEvent.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.type(minuteInput, '{arrowup}');
+  expect(minuteInput).toHaveValue("42");
+  userEvent.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/esm/TimeField/index.js

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