@planningcenter/tapestry-react 2.7.0 → 2.8.1

package/dist/esm/DateField/DateField.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useCallback, useRef } from 'react';
-import { format } from 'date-fns';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
 import Card from '../Card';
 import Calendar from '../Calendar';
 import FocusGroup from '../FocusGroup';
@@ -10,11 +9,8 @@ import Input from '../Input/Input';
 import Popover from '../Popover';
 import { generateId } from '../utils';
 import { useThemeProps } from '../system';
-
-var _ref3 = /*#__PURE__*/React.createElement(Icon, {
-  name: "general.calendar",
-  color: "foregroundTertiary"
-});
+import { useArrowKeysToNavigateCalendar } from './useArrowKeysToNavigateCalendar';
+import { useEditableDate } from './useEditableDate';
 
 function DateField(_ref) {
   var _ref$formatValue = _ref.formatValue,
@@ -40,8 +36,6 @@ function DateField(_ref) {
       trackColor = _useThemeProps.trackColor,
       restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
 
-  var canClosePopover = true;
-
   var _useState = useState(defaultOpen),
       isPopoverOpen = _useState[0],
       setIsPopoverOpen = _useState[1];
@@ -49,36 +43,77 @@ function DateField(_ref) {
   var id = generateId('datefield');
   var popover = useRef(null);
   var inputWrapper = useRef(null);
-  var openPopover = useCallback(function () {
-    setIsPopoverOpen(true);
-  });
-  var closePopover = useCallback(function () {
-    if (canClosePopover) {
-      setIsPopoverOpen(false);
-    }
-  });
-  var togglePopover = useCallback(function () {
-    if (isPopoverOpen) {
-      closePopover();
-    } else {
-      openPopover();
-    }
-  });
-  var handleDateSelect = useCallback(function (date) {
+  var focusInput = useCallback(function () {
     var input = inputWrapper.current.querySelector('input');
 
     if (input.focus) {
       input.focus();
     }
+  }, []);
+  var openPopover = useCallback(function () {
+    setIsPopoverOpen(true);
+  }, []);
+  var closePopover = useCallback(function () {
+    setIsPopoverOpen(false);
+  }, []);
+  var dateValidator = useCallback(function (date) {
+    if (!date) return false;
+    if (minDate && date < minDate) return false;
+    if (maxDate && date > maxDate) return false;
+    return true;
+  }, [minDate, maxDate]);
 
-    if (onChange) {
-      onChange(date);
-    }
+  var _useEditableDate = useEditableDate({
+    date: value,
+    dateFormat: formatValue,
+    dateValidator: dateValidator,
+    onChange: onChange
+  }),
+      formattedDate = _useEditableDate.formattedDate,
+      setDate = _useEditableDate.setDate,
+      clearKeyBuffer = _useEditableDate.clearKeyBuffer,
+      invalidKeyBuffer = _useEditableDate.invalidKeyBuffer;
 
+  var handleDateSelectedFromCalendar = useCallback(function (date) {
+    focusInput();
+    setDate(date);
     closePopover();
+  }, [focusInput, setDate, closePopover]);
+  var handleNavigationChangeFromCalendar = useCallback(function (date) {
+    setDate(date);
+  }, [setDate]);
+  var navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
+    date: value,
+    calendarIsOpen: isPopoverOpen,
+    openCalendar: openPopover,
+    onChange: setDate
   });
+  var handleInputOnChange = useCallback(function (event) {
+    setDate(event.currentTarget.value);
+  }, [setDate]);
+  var handleOnBlur = useCallback(function () {
+    clearKeyBuffer();
+    closePopover();
+  }, [clearKeyBuffer, closePopover]);
+  var inputColors = useMemo(function () {
+    if (invalidKeyBuffer) {
+      return {
+        color: 'error-darker',
+        backgroundColor: 'error-lighter'
+      };
+    } else {
+      return {};
+    }
+  }, [invalidKeyBuffer]);
+
+  var _ref3 = /*#__PURE__*/React.createElement(Icon, {
+    name: "general.calendar",
+    color: "foregroundTertiary",
+    onClick: openPopover
+  });
+
   return /*#__PURE__*/React.createElement(FocusGroup, {
-    onBlur: closePopover
+    onBlur: handleOnBlur
   }, function (_ref2) {
     var requestBlur = _ref2.requestBlur,
         setRef = _ref2.setRef;
@@ -86,44 +121,40 @@ function DateField(_ref) {
       ref: function ref(component) {
         popover.current = component;
       },
+      as: Card,
+      elevation: 2,
       innerRef: function innerRef(node) {
         popover.current = node;
         setRef(id + "-popover")(node);
       },
-      as: Card,
-      tabIndex: -1,
-      elevation: 2,
-      onBlur: requestBlur,
       keepInView: keepInView,
       lockScrollWhileOpen: lockScrollWhileOpen,
-      placement: placement,
-      open: isPopoverOpen,
+      onBlur: requestBlur,
       onRequestClose: closePopover,
+      open: isPopoverOpen,
+      placement: placement,
+      tabIndex: -1,
       anchorElement: /*#__PURE__*/React.createElement(Input, _extends({
         innerRef: function innerRef(node) {
           inputWrapper.current = node;
           setRef(id + "-input")(node);
         },
-        readOnly: true,
-        value: value ? format(value, formatValue) : '',
-        renderRight: _ref3,
-        onClick: togglePopover,
         onBlur: requestBlur,
-        onKeyDown: function onKeyDown(event) {
-          if (event.key === ' ') {
-            event.preventDefault();
-            togglePopover();
-          }
-        }
-      }, restProps))
+        onFocus: openPopover,
+        onChange: handleInputOnChange,
+        onKeyDown: navigateCalendarWithArrowKeys,
+        value: formattedDate,
+        renderRight: _ref3
+      }, inputColors, restProps))
     }), /*#__PURE__*/React.createElement(Calendar, _extends({
       size: "sm"
     }, calendarProps, {
-      initialDate: value,
+      date: value,
       selected: value,
       minDate: minDate,
       maxDate: maxDate,
-      onDateSelect: handleDateSelect
+      onDateSelect: handleDateSelectedFromCalendar,
+      onDateChange: handleNavigationChangeFromCalendar
     })));
   });
 }

package/dist/esm/DateField/parse.js

@@ -0,0 +1,93 @@
+var monthDayYearFormat = /^(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|\s)(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|,\s)(\d{4})$/i;
+var dayMonthYearFormat = /^(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|\s)(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|,\s)(\d{4})$/i;
+var yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/;
+export var parseDate = function parseDate(_ref) {
+  var date = _ref.date,
+      format = _ref.format;
+
+  try {
+    var _parseDateIntoObject = parseDateIntoObject(date, format),
+        year = _parseDateIntoObject.year,
+        month = _parseDateIntoObject.month,
+        day = _parseDateIntoObject.day;
+
+    return new Date(year, month - 1, day);
+  } catch (e) {
+    return null;
+  }
+};
+export var isValidDate = function isValidDate(date) {
+  return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date);
+};
+export var parseMonth = function parseMonth(monthString) {
+  var months = {
+    jan: 1,
+    feb: 2,
+    mar: 3,
+    apr: 4,
+    may: 5,
+    jun: 6,
+    jul: 7,
+    aug: 8,
+    sep: 9,
+    oct: 10,
+    nov: 11,
+    dec: 12
+  };
+  var normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3);
+
+  if (/^\d+$/.test(normalizedString)) {
+    var month = parseInt(normalizedString, 10);
+
+    if (month >= 1 && month <= 12) {
+      return month;
+    }
+  } else if (normalizedString in months) {
+    return months[normalizedString];
+  }
+
+  throw new Error("Invalid month string: " + monthString);
+};
+
+var parseDateIntoObject = function parseDateIntoObject(date, format) {
+  if (format != null && format.match(/d.*M/) && dayMonthYearFormat.test(date)) {
+    var _dayMonthYearFormat$e = dayMonthYearFormat.exec(date),
+        day = _dayMonthYearFormat$e[1],
+        month = _dayMonthYearFormat$e[2],
+        year = _dayMonthYearFormat$e[3];
+
+    return {
+      year: parseInt(year, 10),
+      month: parseMonth(month),
+      day: parseInt(day, 10)
+    };
+  }
+
+  if (monthDayYearFormat.test(date)) {
+    var _monthDayYearFormat$e = monthDayYearFormat.exec(date),
+        _month = _monthDayYearFormat$e[1],
+        _day = _monthDayYearFormat$e[2],
+        _year = _monthDayYearFormat$e[3];
+
+    return {
+      year: parseInt(_year, 10),
+      month: parseMonth(_month),
+      day: parseInt(_day, 10)
+    };
+  }
+
+  if (yearMonthDayFormat.test(date)) {
+    var _yearMonthDayFormat$e = yearMonthDayFormat.exec(date),
+        _year2 = _yearMonthDayFormat$e[1],
+        _month2 = _yearMonthDayFormat$e[2],
+        _day2 = _yearMonthDayFormat$e[3];
+
+    return {
+      year: parseInt(_year2, 10),
+      month: parseMonth(_month2),
+      day: parseInt(_day2, 10)
+    };
+  }
+
+  throw new Error("Invalid date: " + date);
+};

package/dist/esm/DateField/parse.test.js

@@ -0,0 +1,42 @@
+import { format } from 'date-fns';
+import { parseDate, isValidDate, parseMonth } from './parse';
+describe('isValidDate', function () {
+  var validDates = ['jun 6, 2022', 'June-06-2022', '6-6-2022', '6/6/2022', '06-06-2022', '2022-06-26', // year, month, day
+  '2022/6/1' // year, month, day
+  ];
+  validDates.forEach(function (date) {
+    it("returns true for \"" + date + "\"", function () {
+      expect(isValidDate(date)).toBe(true);
+    });
+  });
+  var invalidDates = ['June-06-22', '13-6-2022', 'June 6 2022', '2022/6/1/1', '2022-15-06'];
+  invalidDates.forEach(function (date) {
+    it("returns false for \"" + date + "\"", function () {
+      expect(isValidDate(date)).toBe(false);
+    });
+  });
+});
+describe('parseDate', function () {
+  var dates = [['January 31, 2022', 'January 31, 2022'], ['jun 9, 2022', 'June 09, 2022'], ['June-09-2022', 'June 09, 2022'], ['6-9-2022', 'June 09, 2022'], ['6/9/2022', 'June 09, 2022'], ['06-09-2022', 'June 09, 2022'], ['2022-06-26', 'June 26, 2022'], ['2022/6/1', 'June 01, 2022', 'MMMM dd, yyyy'], ['15/6/2022', 'June 15, 2022', 'dd/MM/YYYY'], ['1/6/2022', 'June 01, 2022', 'dd MMMM, yyyy'], ['15-aug-2023', 'August 15, 2023', 'dd MMMM, yyyy'], ['15 August, 2023', 'August 15, 2023', 'dd MMMM, yyyy']];
+  dates.forEach(function (_ref) {
+    var date = _ref[0],
+        expected = _ref[1],
+        dateFormat = _ref[2];
+    it("returns " + expected + " for \"" + date + "\"", function () {
+      expect(format(parseDate({
+        date: date,
+        format: dateFormat
+      }), 'MMMM dd, yyyy')).toEqual(expected);
+    });
+  });
+});
+describe('parseMonth', function () {
+  var months = [['jan', 1], ['feb', 2], ['December', 12], ['2', 2], ['12', 12], ['05', 5]];
+  months.forEach(function (_ref2) {
+    var month = _ref2[0],
+        expected = _ref2[1];
+    it("returns " + expected + " for \"" + month + "\"", function () {
+      expect(parseMonth(month)).toBe(expected);
+    });
+  });
+});

package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
+  var date = _ref.date,
+      calendarIsOpen = _ref.calendarIsOpen,
+      openCalendar = _ref.openCalendar,
+      onChange = _ref.onChange;
+  var incrementDate = useCallback(function (by) {
+    if (!date) return;
+    var newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + by);
+    onChange(newDate);
+  }, [date, onChange]);
+  var handleInputKeyDown = useCallback(function (event) {
+    if (calendarIsOpen) {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        incrementDate(-7);
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        incrementDate(7);
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        incrementDate(-1);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        incrementDate(1);
+      }
+    } else {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        openCalendar();
+      }
+    }
+  }, [calendarIsOpen, openCalendar, incrementDate]);
+  return handleInputKeyDown;
+};

package/dist/esm/DateField/useEditableDate.js

@@ -0,0 +1,62 @@
+import { useCallback, useMemo, useState } from "react";
+import { format } from 'date-fns';
+import { parseDate } from "./parse";
+export var useEditableDate = function useEditableDate(_ref) {
+  var date = _ref.date,
+      dateFormat = _ref.dateFormat,
+      dateValidator = _ref.dateValidator,
+      onChange = _ref.onChange;
+
+  var _useState = useState(),
+      keyBuffer = _useState[0],
+      setKeyBuffer = _useState[1];
+
+  var _useState2 = useState(false),
+      invalidKeyBuffer = _useState2[0],
+      setInvalidKeyBuffer = _useState2[1];
+
+  var formattedDate = useMemo(function () {
+    if (keyBuffer !== undefined) {
+      return keyBuffer;
+    } else {
+      return date ? format(date, dateFormat) : '';
+    }
+  }, [date, dateFormat, keyBuffer]);
+  var setKeyBufferAndValidate = useCallback(function (value) {
+    setKeyBuffer(value);
+
+    if (value && !dateValidator(parseDate({
+      date: value,
+      format: dateFormat
+    }))) {
+      setInvalidKeyBuffer(true);
+    } else {
+      setInvalidKeyBuffer(false);
+    }
+  }, [dateFormat, dateValidator]);
+  var setDate = useCallback(function (date) {
+    var newDate;
+
+    if (typeof date === 'string') {
+      setKeyBufferAndValidate(date);
+      newDate = parseDate({
+        date: date,
+        format: dateFormat
+      });
+    } else {
+      setKeyBufferAndValidate(undefined);
+      newDate = date;
+    }
+
+    if (dateValidator(newDate) && onChange) onChange(newDate);
+  }, [onChange, setKeyBufferAndValidate, dateValidator, dateFormat]);
+  var clearKeyBuffer = useCallback(function () {
+    setKeyBufferAndValidate(undefined);
+  }, []);
+  return {
+    formattedDate: formattedDate,
+    setDate: setDate,
+    clearKeyBuffer: clearKeyBuffer,
+    invalidKeyBuffer: invalidKeyBuffer
+  };
+};

package/dist/esm/Select/Select.test.js

@@ -0,0 +1,59 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Select from '.';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+var people = [{
+  first: 'Charlie',
+  last: 'Brown',
+  twitter: 'dancounsell',
+  active: true
+}, {
+  first: 'Charlotte',
+  last: 'White',
+  twitter: 'mtnmissy',
+  active: true
+}, {
+  first: 'John',
+  last: 'James',
+  twitter: 'miller',
+  active: false
+}, {
+  first: 'Travis',
+  last: 'Arnold',
+  twitter: 'souporserious',
+  active: true
+}];
+var selectMock = jest.fn();
+test('can click to select item from list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useFakeTimers();
+          render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Select, {
+            onChange: selectMock
+          }, people.map(function (p) {
+            return /*#__PURE__*/React.createElement(Select.Option, {
+              value: p.twitter,
+              key: p.twitter
+            }, p.first, " ", p.last);
+          }))));
+          userEvent.click(screen.getByRole('button'));
+          jest.runAllTimers();
+          userEvent.click(screen.getByText('Travis Arnold'));
+          expect(selectMock).toHaveBeenCalledWith({
+            selectedValue: 'souporserious',
+            value: 'souporserious'
+          });
+          jest.useRealTimers();
+
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

package/dist/types/Button/Button.d.ts

@@ -4,7 +4,7 @@ import { StackViewProps } from '../StackView';
 declare type ButtonProps = {
     children?: any;
     /**
-     * Disables button by removing click handlers and making the button transparent.
+     * "Soft disables" button by adding an `aria-disabled` attribute and preventing `onClick` and `keyDown` events for "space" / "enter". This approach allows composing components (such as `Tooltip`) to still bubble up their events, while ensuring that clicking the button or submitting a form is prevented.
      */
     disabled?: boolean;
     /**

package/dist/types/DateField/DateField.d.ts

@@ -0,0 +1,48 @@
+export declare type DateFieldProps = {
+    /**
+     * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
+     */
+    formatValue: string;
+    /**
+     * Controls the initial Popover state: open or closed (default).
+     */
+    defaultOpen: boolean;
+    /**
+     * The minimum date that can be chosen.
+     */
+    minDate: Date;
+    /**
+     * The maximum date that can be chosen.
+     */
+    maxDate: Date;
+    /**
+     * Called when a date has been selected.
+     */
+    onChange: (date: Date) => null;
+    /**
+     * Determines where the popover is placed.
+     */
+    placement: string;
+    /**
+     * The date that will be selected.
+     */
+    value: Date;
+    /**
+     * Locks external scrollbars when open.
+     */
+    lockScrollWhileOpen?: boolean;
+    /**
+     * Attempts to keep popover in view clipping edges if too large.
+     */
+    keepInView?: boolean;
+    /**
+     * Accepts any valid [Calendar](/calendar) props.
+     */
+    calendarProps?: object;
+    /**
+     * Accepts any valid [Popover](/popover) props.
+     */
+    popoverProps?: object;
+};
+declare function DateField({ formatValue, defaultOpen, keepInView, lockScrollWhileOpen, minDate, maxDate, onChange, placement, value, ...props }: DateFieldProps): JSX.Element;
+export default DateField;

package/dist/types/DateField/parse.d.ts

@@ -0,0 +1,17 @@
+interface Params {
+    /**
+     * The string we want to parse into a date object
+     */
+    date: string;
+    /**
+     * Format hint for parser
+     * Helps us know if we should parse day/month/year or month/day/year
+     *
+     * Should adhere to [date-fns spec](https://date-fns.org/v2.0.0-alpha.9/docs/format).
+     */
+    format?: string;
+}
+export declare const parseDate: ({ date, format }: Params) => Date | null;
+export declare const isValidDate: (date: string) => boolean;
+export declare const parseMonth: (monthString: string) => number;
+export {};

package/dist/types/DateField/parse.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    date: Date;
+    calendarIsOpen: boolean;
+    openCalendar: () => void;
+    onChange: (date: Date) => void;
+}
+export declare const useArrowKeysToNavigateCalendar: ({ date, calendarIsOpen, openCalendar, onChange, }: Props) => (event: React.KeyboardEvent<HTMLInputElement>) => void;
+export {};

package/dist/types/DateField/useEditableDate.d.ts

@@ -0,0 +1,25 @@
+interface Params {
+    /**
+     * The currently selected date
+     */
+    date: Date;
+    /**
+     * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
+     */
+    dateFormat: string;
+    /**
+     * Custom function that validates date
+     */
+    dateValidator: (date: Date) => boolean;
+    /**
+     * Called when a valid date is entered
+     */
+    onChange: (date: Date) => void;
+}
+export declare const useEditableDate: ({ date, dateFormat, dateValidator, onChange }: Params) => {
+    formattedDate: string;
+    setDate: (date: Date | string) => void;
+    clearKeyBuffer: () => void;
+    invalidKeyBuffer: boolean;
+};
+export {};

package/dist/types/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -38,8 +38,8 @@
   "peerDependencies": {
     "@emotion/cache": "10.x",
     "@emotion/react": "^11.10.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": ">=16.8.0 <19",
+    "react-dom": ">=16.8.0 <19"
   },
   "devDependencies": {
     "@babel/cli": "7.12.17",

package/src/Button/Button.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, createEvent } from '@testing-library/react'
 import { Button } from './Button'
 
 it(`should render as <button> with type="button" by default`, () => {
@@ -14,20 +14,44 @@ it(`should render as <button> with type="submit"`, () => {
   expect(button.getAttribute('type')).toEqual('submit')
 })
 
-it(`should render "disabled" attribute, if <button> is disabled`, () => {
+it(`if "disabled" prop is provided, set "aria-disabled" attribute`, () => {
   const { container } = render(<Button disabled />)
   const button = container.querySelector('button')
-  expect(button.getAttribute("aria-disabled")).toEqual(null)
-  expect(button.disabled).toBe(true)
-})
 
-it(`should render "aria-disabled" attribute, if <button type="submit"> is disabled`, () => {
-  const { container } = render(<Button type="submit" disabled />)
-  const button = container.querySelector('button')
   expect(button.getAttribute("aria-disabled")).toEqual("true")
   expect(button.disabled).toBe(false)
 })
 
+it(`if "disabled" prop is provided, prevent "Click" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const clickEvent = createEvent.click(button)
+  fireEvent(button, clickEvent)
+
+  expect(clickEvent.defaultPrevented).toBe(true)
+})
+
+it(`if "disabled" prop is provided, prevent keyDown "Enter" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const keyDownEvent = createEvent.keyDown(button, { key: 'Enter' })
+  fireEvent(button, keyDownEvent)
+
+  expect(keyDownEvent.defaultPrevented).toBe(true)
+})
+
+it(`if "disabled" prop is provided, prevent keyDown "Space" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const keyDownEvent = createEvent.keyDown(button, { key: ' ' })
+  fireEvent(button, keyDownEvent)
+
+  expect(keyDownEvent.defaultPrevented).toBe(true)
+})
+
 it(`should render title`, () => {
   const title = 'Hello'
   const { getByText } = render(<Button title={title} />)