@planningcenter/tapestry-react 2.10.0-rc.2 → 2.10.0-rc.4

package/dist/esm/Modal/Modal.test.js

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import Dropdown from '../Dropdown';
+import Select from '../Select';
+import { Button, Heading, Modal, ThemeProvider } from '../';
+import noop from 'lodash/noop';
+
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  "data-testid": "modal-header"
+}, "Hello");
+
+describe('Modal', function () {
+  var TestModal = function TestModal() {
+    var _useState = useState(false),
+        open = _useState[0],
+        setOpen = _useState[1];
+
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "modal-toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      title: "Toggle modal"
+    }), /*#__PURE__*/React.createElement(Modal, {
+      open: open,
+      onRequestClose: function onRequestClose() {
+        return setOpen(false);
+      }
+    }, _ref, /*#__PURE__*/React.createElement(Dropdown, null, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/React.createElement(Dropdown.Item, {
+        "data-testid": "dropdown-item-" + n,
+        key: n
+      }, n);
+    })), /*#__PURE__*/React.createElement(Select, {
+      onChange: noop
+    }, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        "data-testid": "select-option-" + n,
+        key: n,
+        value: n
+      }, n);
+    })))));
+  };
+
+  var _ref2 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref3 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref4 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref5 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref6 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref7 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  describe('Keyboard navigation', function () {
+    it('should close modal on escape keypress (dropdown button has focus)', function () {
+      render(_ref2);
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should not close modal when escape key closes a dropdown within modal', function () {
+      render(_ref3);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+
+      var _screen$getAllByRole = screen.getAllByRole('button'),
+          dropdown = _screen$getAllByRole[1];
+
+      expect(dropdown).toHaveFocus();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should close dropdown on escape & close modal on subsequent escape', function () {
+      render(_ref4);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should hide select popover on escape, but select remains in dom', function () {
+      render(_ref5);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, persist modal', function () {
+      render(_ref6);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeNull();
+      expect(screen.queryByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, close modal on subsequent escape', function () {
+      render(_ref7);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeNull();
+      expect(screen.queryByTestId('modal-header')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+    });
+  });
+});

package/dist/esm/Modal/index.js

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

package/dist/esm/NumberField/NumberField.js

@@ -0,0 +1,323 @@
+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";
+
+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, { createElement, Component } from 'react';
+import InputField from '../Input/InputField';
+import StackView from '../StackView';
+import Button from '../Button';
+import { padNumber, getTabbableSiblings } from '../utils';
+var MIN_VALUE = -Infinity;
+var MAX_VALUE = Infinity;
+var ACCEPTED_KEYS = ['Backspace', 'Delete', 'Tab', 'Enter', 'Home', 'End', 'ArrowLeft', 'ArrowRight', '-', '.'];
+
+function getPadStringSize(pad) {
+  var str = '';
+
+  for (var i = 0; i < pad; i++) {
+    str += '0';
+  }
+
+  return str;
+}
+
+function isNotAcceptedNumberKey(event) {
+  return !event.metaKey && event.key !== 'v' && isNaN(parseInt(event.key, 10)) && ACCEPTED_KEYS.indexOf(event.key) === -1;
+}
+
+var NumberField = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(NumberField, _Component);
+
+  function NumberField() {
+    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;
+
+    _defineProperty(_assertThisInitialized(_this), "firstTouch", true);
+
+    _defineProperty(_assertThisInitialized(_this), "getParsedValues", function (value) {
+      return {
+        value: Number.parseFloat(value),
+        minValue: _this.props.min,
+        maxValue: _this.props.max
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clampValue", function (valueToCheck) {
+      var _this$getParsedValues = _this.getParsedValues(valueToCheck),
+          value = _this$getParsedValues.value,
+          minValue = _this$getParsedValues.minValue;
+
+      return isNaN(value) ? minValue === MIN_VALUE ? 0 : minValue : value;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isValueValid", function (valueToCheck) {
+      var _this$getParsedValues2 = _this.getParsedValues(valueToCheck),
+          value = _this$getParsedValues2.value,
+          minValue = _this$getParsedValues2.minValue,
+          maxValue = _this$getParsedValues2.maxValue;
+
+      return value >= minValue && value <= maxValue;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "changeIfValid", function (value) {
+      if (_this.isValueValid(value)) {
+        _this.props.onChange(value);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
+      var _this$getParsedValues3 = _this.getParsedValues(event.target.value),
+          minValue = _this$getParsedValues3.minValue,
+          maxValue = _this$getParsedValues3.maxValue;
+
+      var value = Number.parseFloat(event.target.value);
+
+      if (value < minValue) {
+        _this.props.onChange(minValue.toString());
+      } else if (value > maxValue) {
+        _this.props.onChange(maxValue.toString());
+      } else if (isNaN(value)) {
+        value = _this.clampValue(value);
+
+        _this.props.onChange(value.toString());
+      }
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+
+      _this.firstTouch = true;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "stepValue", function (baseValue, step) {
+      var nextValue = _this.clampValue(baseValue + step);
+
+      var parsedValue = Number.parseFloat(baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue.toString());
+
+      if (_this.isValueValid(parsedValue)) {
+        _this.props.onChange(parsedValue.toString());
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "incrementValue", function () {
+      return _this.stepValue(_this.props.value, _this.props.step);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "decrementValue", function () {
+      return _this.stepValue(_this.props.value, -_this.props.step);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      if (_this.props.ignoredKeys.includes(event.key)) {
+        return;
+      }
+
+      var _this$props = _this.props,
+          pad = _this$props.pad,
+          step = _this$props.step;
+
+      var _this$getParsedValues4 = _this.getParsedValues(event.target.value),
+          value = _this$getParsedValues4.value;
+
+      if (isNotAcceptedNumberKey(event) || pad && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        event.preventDefault();
+      }
+
+      if (event.key === 'ArrowUp') {
+        _this.incrementValue();
+      } else if (event.key === 'ArrowDown') {
+        _this.decrementValue();
+      }
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleInput", function (event) {
+      var _this$getParsedValues5 = _this.getParsedValues(event.target.value),
+          maxValue = _this$getParsedValues5.maxValue;
+
+      if (_this.props.pad) {
+        var deleteKeyPressed = event.target.value === '';
+        var targetValue = deleteKeyPressed ? event.target.value : parseFloat(event.target.value);
+
+        if (deleteKeyPressed) {
+          var nextValue = ("" + _this.props.value).slice(0, -1);
+
+          _this.props.onChange(padNumber(nextValue, _this.props.pad));
+        } else {
+          var _nextValue = _this.clampValue(targetValue);
+
+          var paddedValue = parseFloat("" + _this.props.value + targetValue);
+
+          if (!_this.firstTouch && !isNaN(targetValue) && _this.isValueValid(paddedValue)) {
+            _nextValue = paddedValue;
+          }
+
+          _this.firstTouch = false;
+
+          if (_this.props.moveFocusOnMax && _nextValue / maxValue > 0.1) {
+            var _getTabbableSiblings = getTabbableSiblings(event.target),
+                next = _getTabbableSiblings.next;
+
+            if (next) {
+              setTimeout(function () {
+                return next.focus();
+              });
+            }
+          }
+
+          _this.changeIfValid(_nextValue);
+        }
+      } else {
+        _this.props.onChange(event.target.value);
+      }
+    });
+
+    return _this;
+  }
+
+  var _proto = NumberField.prototype;
+
+  _proto.getAutoWidthValue = function getAutoWidthValue(value) {
+    var _this$props2 = this.props,
+        autoWidth = _this$props2.autoWidth,
+        pad = _this$props2.pad,
+        placeholder = _this$props2.placeholder;
+    var isValueEmpty = value === '';
+    return autoWidth || (pad && isValueEmpty ? getPadStringSize(pad) : isValueEmpty && placeholder !== undefined ? placeholder : value);
+  };
+
+  _proto.renderInput = function renderInput(restProps) {
+    var _this$props3 = this.props,
+        as = _this$props3.as,
+        highlightOnInteraction = _this$props3.highlightOnInteraction,
+        pad = _this$props3.pad,
+        value = _this$props3.value;
+    var parsed = this.getParsedValues(value);
+    var numberValue = value === null ? '' : value;
+
+    if (pad && numberValue !== '') {
+      numberValue = padNumber(numberValue, pad);
+    }
+
+    if (parsed.minValue !== MIN_VALUE) {
+      restProps.min = this.props.min;
+    }
+
+    if (parsed.maxValue !== MAX_VALUE) {
+      restProps.max = this.props.max;
+    }
+
+    if (this.props.autoWidth !== false) {
+      restProps.autoWidth = this.getAutoWidthValue(numberValue);
+
+      if (restProps.autoWidth === undefined) {
+        restProps.autoWidth = true;
+      }
+    }
+
+    return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, restProps), {}, {
+      textOverflow: undefined,
+      autoComplete: 'off',
+      value: numberValue,
+      highlightOnInteraction: highlightOnInteraction || pad,
+      onBlur: this.handleBlur,
+      onInput: this.handleInput,
+      onKeyDown: this.handleKeyDown
+    }));
+  };
+
+  _proto.renderInputWithControls = function renderInputWithControls(restProps) {
+    var _this2 = this;
+
+    var inputElement = this.renderInput(restProps);
+
+    if (this.props.hasControls) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, inputElement, /*#__PURE__*/React.createElement(StackView, {
+        marginRight: -1,
+        marginLeft: 1
+      }, /*#__PURE__*/React.createElement(Button, {
+        icon: {
+          name: 'general.upCaret'
+        },
+        hover: {
+          backgroundColor: 'grey-1'
+        },
+        minHeight: 1,
+        onClick: function onClick() {
+          return _this2.incrementValue();
+        },
+        paddingVertical: 0.25 // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+        ,
+        size: "xs",
+        title: "Increment by 1",
+        theme: "naked"
+      }), /*#__PURE__*/React.createElement(Button, {
+        icon: {
+          name: 'general.downCaret'
+        },
+        hover: {
+          backgroundColor: 'grey-1'
+        },
+        minHeight: 1,
+        onClick: function onClick() {
+          return _this2.decrementValue();
+        },
+        paddingVertical: 0.25 // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+        ,
+        size: "xs",
+        title: "Decrement by 1",
+        theme: "naked"
+      })));
+    }
+
+    return inputElement;
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        autoWidth = _this$props4.autoWidth,
+        as = _this$props4.as,
+        hasControls = _this$props4.hasControls,
+        highlightOnInteraction = _this$props4.highlightOnInteraction,
+        ignoredKeys = _this$props4.ignoredKeys,
+        min = _this$props4.min,
+        max = _this$props4.max,
+        moveFocusOnMax = _this$props4.moveFocusOnMax,
+        onChange = _this$props4.onChange,
+        onBlur = _this$props4.onBlur,
+        onInput = _this$props4.onInput,
+        onKeyDown = _this$props4.onKeyDown,
+        pad = _this$props4.pad,
+        value = _this$props4.value,
+        restProps = _objectWithoutPropertiesLoose(_this$props4, ["autoWidth", "as", "hasControls", "highlightOnInteraction", "ignoredKeys", "min", "max", "moveFocusOnMax", "onChange", "onBlur", "onInput", "onKeyDown", "pad", "value"]);
+
+    return this.props.hasControls ? this.renderInputWithControls(restProps) : this.renderInput(restProps);
+  };
+
+  return NumberField;
+}(Component);
+
+_defineProperty(NumberField, "defaultProps", {
+  as: InputField,
+  hasControls: false,
+  ignoredKeys: [],
+  min: MIN_VALUE,
+  max: MAX_VALUE,
+  step: 1,
+  moveFocusOnMax: false
+});
+
+export default NumberField;

package/dist/esm/NumberField/NumberField.test.js

@@ -0,0 +1,206 @@
+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; }
+
+import React, { useState } from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import NumberField from './NumberField';
+describe('value', function () {
+  var TestApp = function TestApp(_ref) {
+    var initialValue = _ref.value,
+        props = _objectWithoutPropertiesLoose(_ref, ["value"]);
+
+    var _useState = useState(initialValue),
+        value = _useState[0],
+        setValue = _useState[1];
+
+    var defaultProps = _objectSpread({
+      pad: 0,
+      highlightOnInteraction: false,
+      placeholder: '',
+      autoWidth: false
+    }, props);
+
+    return /*#__PURE__*/React.createElement(NumberField, _extends({
+      "data-testid": "test",
+      value: value,
+      onChange: function onChange(newValue) {
+        setValue(newValue);
+        return null;
+      }
+    }, defaultProps));
+  };
+
+  var setup = function setup(props) {
+    var _render = render( /*#__PURE__*/React.createElement(TestApp, props)),
+        getByTestId = _render.getByTestId;
+
+    return getByTestId('test');
+  };
+
+  it('renders', function () {
+    var numberField = setup({
+      value: 5
+    });
+    expect(numberField).toHaveValue('5');
+  });
+  it('pads if asked to', function () {
+    var numberField = setup({
+      value: 5,
+      pad: 2
+    });
+    expect(numberField).toHaveValue('05');
+  });
+  it('uses placeholder when empty', function () {
+    var placeholder = 'pick something!';
+    var numberField = setup({
+      placeholder: placeholder
+    });
+    expect(numberField).toHaveAttribute('placeholder', placeholder);
+  });
+  describe('min', function () {
+    it('is used if typed value is lower after blur', function () {
+      var numberField = setup({
+        value: 2,
+        min: 1
+      });
+      userEvent.type(numberField, '{backspace}0');
+      userEvent.tab();
+      expect(numberField).toHaveValue('1');
+    });
+    it('prevents arrow down from going below', function () {
+      var numberField = setup({
+        value: 1,
+        min: 1
+      });
+      userEvent.type(numberField, '{arrowdown}');
+      expect(numberField).toHaveValue('1');
+    });
+  });
+  describe('max', function () {
+    it('is used if typed value is higher after blur', function () {
+      var numberField = setup({
+        value: 0,
+        max: 1
+      });
+      userEvent.type(numberField, '2');
+      userEvent.tab();
+      expect(numberField).toHaveValue('1');
+    });
+    it('prevents arrow up from going above', function () {
+      var numberField = setup({
+        value: 1,
+        max: 1
+      });
+      userEvent.type(numberField, '{arrowup}');
+      expect(numberField).toHaveValue('1');
+    });
+  });
+  describe('pad', function () {
+    it('add appropriate pad', function () {
+      var numberField = setup({
+        value: 0,
+        pad: 2
+      });
+      userEvent.type(numberField, '12{backspace}');
+      expect(numberField).toHaveValue('01');
+    });
+  });
+});
+
+var _ref2 = /*#__PURE__*/React.createElement("input", {
+  "data-testid": "test-b"
+});
+
+describe('moveFocusOnMax', function () {
+  var TestApp = function TestApp(props) {
+    var _useState2 = useState(0),
+        value = _useState2[0],
+        setValue = _useState2[1];
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumberField, _extends({}, props, {
+      "data-testid": "test-a",
+      value: value,
+      onChange: setValue
+    })), _ref2);
+  };
+
+  var setup = function setup() {
+    var props = {
+      max: 12,
+      pad: 2,
+      moveFocusOnMax: true
+    };
+
+    var _render2 = render( /*#__PURE__*/React.createElement(TestApp, props)),
+        getByTestId = _render2.getByTestId;
+
+    return [getByTestId('test-a'), getByTestId('test-b')];
+  };
+
+  it('moves focus when any further input would exceed max', function () {
+    var _setup = setup(),
+        numberField = _setup[0],
+        nextTabbable = _setup[1];
+
+    userEvent.type(numberField, '2');
+    jest.runAllTimers();
+    expect(nextTabbable).toHaveFocus();
+  });
+  it('does not move focus when some further input is possible without exceeding max', function () {
+    var _setup2 = setup(),
+        numberField = _setup2[0],
+        nextTabbable = _setup2[1];
+
+    userEvent.type(numberField, '1'); // (10, 11, 12) are still possible
+
+    jest.runAllTimers();
+    expect(numberField).toHaveFocus();
+  });
+});
+describe('ignoredKeys', function () {
+  var TestApp = function TestApp(props) {
+    var _useState3 = useState(1),
+        value = _useState3[0],
+        setValue = _useState3[1];
+
+    return /*#__PURE__*/React.createElement(NumberField, _extends({}, props, {
+      "data-testid": "test",
+      value: value,
+      onChange: setValue
+    }));
+  };
+
+  var setup = function setup() {
+    var props = {
+      ignoredKeys: ['ArrowUp', 'ArrowDown']
+    };
+
+    var _render3 = render( /*#__PURE__*/React.createElement(TestApp, props)),
+        getByTestId = _render3.getByTestId;
+
+    return getByTestId('test');
+  };
+
+  it('prevents specified keys from changing values', function () {
+    var numberField = setup();
+    userEvent.type(numberField, '{arrowup}');
+    jest.runAllTimers();
+    expect(numberField).toHaveValue('1');
+    userEvent.type(numberField, '{arrowdown}');
+    jest.runAllTimers();
+    expect(numberField).toHaveValue('1');
+  });
+  it('allows other keys from change the value', function () {
+    var numberField = setup();
+    userEvent.type(numberField, '2');
+    jest.runAllTimers();
+    expect(numberField).toHaveValue('12');
+  });
+});

package/dist/esm/NumberField/index.js

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

package/dist/esm/Page/PageActions.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import StackView from '../StackView';
+
+function PageActions(props) {
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    alignSelf: "end",
+    axis: "horizontal",
+    distribution: "end",
+    flex: "1",
+    paddingBottom: 2,
+    spacing: 1
+  }, props));
+}
+
+export default PageActions;