@planningcenter/tapestry-react 2.7.0 → 2.8.1

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _dateFns = require("date-fns");
+
+var _parse = require("./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((0, _parse.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((0, _parse.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((0, _dateFns.format)((0, _parse.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((0, _parse.parseMonth)(month)).toBe(expected);
+    });
+  });
+});

package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useArrowKeysToNavigateCalendar = void 0;
+
+var _react = require("react");
+
+var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
+  var date = _ref.date,
+      calendarIsOpen = _ref.calendarIsOpen,
+      openCalendar = _ref.openCalendar,
+      onChange = _ref.onChange;
+  var incrementDate = (0, _react.useCallback)(function (by) {
+    if (!date) return;
+    var newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + by);
+    onChange(newDate);
+  }, [date, onChange]);
+  var handleInputKeyDown = (0, _react.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;
+};
+
+exports.useArrowKeysToNavigateCalendar = useArrowKeysToNavigateCalendar;

package/dist/cjs/DateField/useEditableDate.js

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

package/dist/cjs/Select/Select.test.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _ThemeProvider = require("../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__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useFakeTimers();
+          (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ThemeProvider.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+            onChange: selectMock
+          }, people.map(function (p) {
+            return /*#__PURE__*/_react["default"].createElement(_["default"].Option, {
+              value: p.twitter,
+              key: p.twitter
+            }, p.first, " ", p.last);
+          }))));
+
+          _userEvent["default"].click(_react2.screen.getByRole('button'));
+
+          jest.runAllTimers();
+
+          _userEvent["default"].click(_react2.screen.getByText('Travis Arnold'));
+
+          expect(selectMock).toHaveBeenCalledWith({
+            selectedValue: 'souporserious',
+            value: 'souporserious'
+          });
+          jest.useRealTimers();
+
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

package/dist/esm/Button/Button.js

@@ -172,21 +172,18 @@ export function Button(_ref) {
 
   if (disabled) {
     buttonProps.opacity = 0.65;
+    buttonProps['aria-disabled'] = true;
+    buttonProps.cursor = 'not-allowed';
 
-    if (buttonProps.type === "button" || buttonProps.type === "reset") {
-      buttonProps.disabled = true;
-    } else if (buttonProps.type === "submit") {
-      buttonProps['aria-disabled'] = true;
-      buttonProps.cursor = 'not-allowed';
-
-      buttonProps.onClick = function (event) {
-        return event.preventDefault();
-      };
+    buttonProps.onClick = function (event) {
+      return event.preventDefault();
+    };
 
-      buttonProps.onKeyDown = function (event) {
-        return event.preventDefault();
-      };
-    }
+    buttonProps.onKeyDown = function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+      }
+    };
   } // don't apply hover/active styles or events when disabled or spinner is present
 
 

package/dist/esm/Button/Button.test.js

@@ -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';
 
 var _ref = /*#__PURE__*/React.createElement(Button, null);
@@ -28,70 +28,102 @@ var _ref3 = /*#__PURE__*/React.createElement(Button, {
   disabled: true
 });
 
-it("should render \"disabled\" attribute, if <button> is disabled", function () {
+it("if \"disabled\" prop is provided, set \"aria-disabled\" attribute", function () {
   var _render3 = render(_ref3),
       container = _render3.container;
 
   var button = container.querySelector('button');
-  expect(button.getAttribute("aria-disabled")).toEqual(null);
-  expect(button.disabled).toBe(true);
+  expect(button.getAttribute("aria-disabled")).toEqual("true");
+  expect(button.disabled).toBe(false);
 });
 
 var _ref4 = /*#__PURE__*/React.createElement(Button, {
-  type: "submit",
   disabled: true
 });
 
-it("should render \"aria-disabled\" attribute, if <button type=\"submit\"> is disabled", function () {
+it("if \"disabled\" prop is provided, prevent \"Click\" event from firing", function () {
   var _render4 = render(_ref4),
       container = _render4.container;
 
   var button = container.querySelector('button');
-  expect(button.getAttribute("aria-disabled")).toEqual("true");
-  expect(button.disabled).toBe(false);
+  var clickEvent = createEvent.click(button);
+  fireEvent(button, clickEvent);
+  expect(clickEvent.defaultPrevented).toBe(true);
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, {
+  disabled: true
+});
+
+it("if \"disabled\" prop is provided, prevent keyDown \"Enter\" event from firing", function () {
+  var _render5 = render(_ref5),
+      container = _render5.container;
+
+  var button = container.querySelector('button');
+  var keyDownEvent = createEvent.keyDown(button, {
+    key: 'Enter'
+  });
+  fireEvent(button, keyDownEvent);
+  expect(keyDownEvent.defaultPrevented).toBe(true);
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(Button, {
+  disabled: true
+});
+
+it("if \"disabled\" prop is provided, prevent keyDown \"Space\" event from firing", function () {
+  var _render6 = render(_ref6),
+      container = _render6.container;
+
+  var button = container.querySelector('button');
+  var keyDownEvent = createEvent.keyDown(button, {
+    key: ' '
+  });
+  fireEvent(button, keyDownEvent);
+  expect(keyDownEvent.defaultPrevented).toBe(true);
 });
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render5 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render7 = render( /*#__PURE__*/React.createElement(Button, {
     title: title
   })),
-      getByText = _render5.getByText;
+      getByText = _render7.getByText;
 
   getByText(title);
 });
 
-var _ref5 = /*#__PURE__*/React.createElement(Button, {
+var _ref7 = /*#__PURE__*/React.createElement(Button, {
   to: "#"
 });
 
 it("should render <a> without a type if \"to\" is provided", function () {
-  var _render6 = render(_ref5),
-      container = _render6.container;
+  var _render8 = render(_ref7),
+      container = _render8.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('type')).toBeNull();
 });
 
-var _ref6 = /*#__PURE__*/React.createElement(Button, {
+var _ref8 = /*#__PURE__*/React.createElement(Button, {
   href: "#"
 });
 
 it("should render <a> without a type if \"href\" is provided", function () {
-  var _render7 = render(_ref6),
-      container = _render7.container;
+  var _render9 = render(_ref8),
+      container = _render9.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('type')).toBeNull();
 });
 
-var _ref7 = /*#__PURE__*/React.createElement(Button, {
+var _ref9 = /*#__PURE__*/React.createElement(Button, {
   to: "#"
 });
 
 it("should render <a> with \"href\" if \"to\" is specifed", function () {
-  var _render8 = render(_ref7),
-      container = _render8.container;
+  var _render10 = render(_ref9),
+      container = _render10.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('href')).toEqual('#');
@@ -99,12 +131,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render9 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render11 = render( /*#__PURE__*/React.createElement(Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render9.getByText;
+      getByText = _render11.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -114,20 +146,20 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render10 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render12 = render( /*#__PURE__*/React.createElement(Button, {
     onClick: onClick
   })),
-      container = _render10.container;
+      container = _render12.container;
 
   fireEvent.click(container.firstChild);
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 
-var _ref8 = /*#__PURE__*/React.createElement(Button, null);
+var _ref10 = /*#__PURE__*/React.createElement(Button, null);
 
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render11 = render(_ref8),
-      container = _render11.container;
+  var _render13 = render(_ref10),
+      container = _render13.container;
 
   fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/esm/Calendar/Calendar.js

@@ -141,35 +141,37 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, calendarRef) {
     axis: "horizontal",
     spacing: 0.5
   }, /*#__PURE__*/React.createElement(Box, {
-    as: "button",
     "aria-label": isMonthsView ? 'Choose dates' : 'Choose month',
-    padding: 0.25,
-    fontSize: headerFontSize,
-    lineHeight: 3,
-    radius: 3,
-    cursor: "pointer",
+    as: "button",
     backgroundColor: hover ? 'highlight' : 'transparent',
+    cursor: "pointer",
+    fontSize: headerFontSize,
     hover: {
       backgroundColor: 'highlightSecondary'
     },
+    lineHeight: 3,
     onClick: function onClick() {
       setCurrentView(isMonthsView ? 'calendar' : 'months');
-    }
-  }, format(currentDate, 'MMMM')), /*#__PURE__*/React.createElement(Box, {
-    as: "button",
-    "aria-label": isYearsView ? 'Choose dates' : 'Choose year',
+    },
     padding: 0.25,
-    fontSize: headerFontSize,
-    lineHeight: 3,
     radius: 3,
-    cursor: "pointer",
+    tabIndex: -1
+  }, format(currentDate, 'MMMM')), /*#__PURE__*/React.createElement(Box, {
+    "aria-label": isYearsView ? 'Choose dates' : 'Choose year',
+    as: "button",
     backgroundColor: hover ? 'highlight' : 'transparent',
+    cursor: "pointer",
+    fontSize: headerFontSize,
     hover: {
       backgroundColor: 'highlightSecondary'
     },
+    lineHeight: 3,
     onClick: function onClick() {
       setCurrentView(isYearsView ? 'calendar' : 'years');
-    }
+    },
+    padding: 0.25,
+    radius: 3,
+    tabIndex: -1
   }, currentYear)), /*#__PURE__*/React.createElement(Group, {
     marginRight: 0.5,
     childProps: {
@@ -177,35 +179,38 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, calendarRef) {
       size: buttonSize
     }
   }, /*#__PURE__*/React.createElement(Button, {
-    title: "Previous month",
+    disabled: isYearsView ? currentYear <= minYear : isSameMonth(currentDate, minDate),
     icon: {
       name: 'general.leftChevron',
-      size: "xxs"
+      size: 'xxs'
     },
-    disabled: isYearsView ? currentYear <= minYear : isSameMonth(currentDate, minDate),
     onClick: function onClick() {
       return navigateCalendar(-1);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    tooltip: {
-      title: 'Today'
     },
+    tabIndex: -1,
+    title: "Previous month"
+  }), /*#__PURE__*/React.createElement(Button, {
     icon: {
       name: 'tapestry.radio1'
     },
     onClick: function onClick() {
       return setDate(TODAY, true);
+    },
+    tabIndex: -1,
+    tooltip: {
+      title: 'Today'
     }
   }), /*#__PURE__*/React.createElement(Button, {
-    title: "Next month",
+    disabled: isYearsView ? currentYear >= maxYear : isSameMonth(currentDate, maxDate),
     icon: {
       name: 'general.rightChevron',
-      size: "xxs"
+      size: 'xxs'
     },
-    disabled: isYearsView ? currentYear >= maxYear : isSameMonth(currentDate, maxDate),
     onClick: function onClick() {
       return navigateCalendar(1);
-    }
+    },
+    tabIndex: -1,
+    title: "Next month"
   }))), isMonthsView && /*#__PURE__*/React.createElement(StackView, {
     axis: "horizontal",
     width: cellSize * 7,

package/dist/esm/Combobox/ComboboxInput.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useContext, useEffect } from 'react';
 import Input from '../Input';
 import ItemListContext from '../ItemList/ItemListContext';
+import { ItemListController } from '../ItemList';
 import { useThemeProps } from '../system';
 
 function ComboboxInput(props, ref) {
@@ -42,13 +43,11 @@ function ComboboxInput(props, ref) {
     };
   });
   var itemList = useContext(ItemListContext);
-  var highlightedItemId = itemList.highlightedItemId,
-      id = itemList.id;
   useEffect(function () {
     setTimeout(function () {
       itemList.setHighlightedIndex(0);
     });
-  }, [itemList.items]);
+  }, [itemList]);
   var handleKeyDown = useCallback(function (e) {
     if (e.key === 'ArrowUp') {
       e.preventDefault();
@@ -76,45 +75,49 @@ function ComboboxInput(props, ref) {
     if (onClose && e.key === 'Tab') {
       onClose();
     }
-  });
+  }, [itemList, onClose, onKeyDown]);
   var handleDocumentKeyDown = useCallback(function (e) {
     if (onClear && e.key === 'Escape') {
       onClear();
     }
+  }, [onClear]);
+  return /*#__PURE__*/React.createElement(ItemListController, null, function (itemList) {
+    var highlightedItemId = itemList.highlightedItemId,
+        id = itemList.id;
+    return /*#__PURE__*/React.createElement(Input.InputBox, _extends({
+      innerRef: innerRef,
+      size: size,
+      disabled: disabled,
+      isLoading: isLoading,
+      onClear: onClear
+    }, restProps, {
+      grow: 1
+    }), /*#__PURE__*/React.createElement(Input.InputField, {
+      innerRef: function innerRef(node) {
+        inputNode.current = node;
+      },
+      grow: 1,
+      role: "combobox",
+      autoComplete: "off",
+      "aria-autocomplete": "list",
+      "aria-controls": id,
+      "aria-expanded": isOpen,
+      "aria-activedescendant": highlightedItemId,
+      autoFocus: autoFocus,
+      type: type,
+      name: name,
+      disabled: disabled,
+      readOnly: readOnly,
+      placeholder: placeholder,
+      defaultValue: defaultValue,
+      value: value,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: handleKeyDown,
+      onKeyUp: onKeyUp
+    }));
   });
-  return /*#__PURE__*/React.createElement(Input.InputBox, _extends({
-    innerRef: innerRef,
-    size: size,
-    disabled: disabled,
-    isLoading: isLoading,
-    onClear: onClear
-  }, restProps, {
-    grow: 1
-  }), /*#__PURE__*/React.createElement(Input.InputField, {
-    innerRef: function innerRef(node) {
-      inputNode.current = node;
-    },
-    grow: 1,
-    role: "combobox",
-    autoComplete: "off",
-    "aria-autocomplete": "list",
-    "aria-controls": id,
-    "aria-expanded": isOpen,
-    "aria-activedescendant": highlightedItemId,
-    autoFocus: autoFocus,
-    type: type,
-    name: name,
-    disabled: disabled,
-    readOnly: readOnly,
-    placeholder: placeholder,
-    defaultValue: defaultValue,
-    value: value,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onKeyDown: handleKeyDown,
-    onKeyUp: onKeyUp
-  }));
 }
 
 ComboboxInput = /*#__PURE__*/forwardRef(ComboboxInput);