@planningcenter/tapestry-react 2.7.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/cjs/Button/Button.js +10 -13
  2. package/dist/cjs/Button/Button.test.js +53 -21
  3. package/dist/cjs/Calendar/Calendar.js +30 -25
  4. package/dist/cjs/Combobox/ComboboxInput.js +41 -37
  5. package/dist/cjs/DateField/DateField.js +74 -47
  6. package/dist/cjs/DateField/parse.js +106 -0
  7. package/dist/cjs/DateField/parse.test.js +46 -0
  8. package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js +44 -0
  9. package/dist/cjs/DateField/useEditableDate.js +72 -0
  10. package/dist/cjs/Select/Select.test.js +74 -0
  11. package/dist/esm/Button/Button.js +10 -13
  12. package/dist/esm/Button/Button.test.js +58 -26
  13. package/dist/esm/Calendar/Calendar.js +30 -25
  14. package/dist/esm/Combobox/ComboboxInput.js +40 -37
  15. package/dist/esm/DateField/DateField.js +75 -48
  16. package/dist/esm/DateField/parse.js +93 -0
  17. package/dist/esm/DateField/parse.test.js +42 -0
  18. package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js +36 -0
  19. package/dist/esm/DateField/useEditableDate.js +62 -0
  20. package/dist/esm/Select/Select.test.js +59 -0
  21. package/dist/types/Button/Button.d.ts +1 -1
  22. package/dist/types/DateField/DateField.d.ts +48 -0
  23. package/dist/types/DateField/parse.d.ts +17 -0
  24. package/dist/types/DateField/parse.test.d.ts +1 -0
  25. package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts +8 -0
  26. package/dist/types/DateField/useEditableDate.d.ts +25 -0
  27. package/dist/types/Select/Select.test.d.ts +1 -0
  28. package/package.json +3 -3
  29. package/src/Button/Button.test.tsx +32 -8
  30. package/src/Button/Button.tsx +8 -9
  31. package/src/Calendar/Calendar.js +22 -17
  32. package/src/Combobox/ComboboxInput.js +76 -62
  33. package/src/DateField/DateField.mdx +15 -0
  34. package/src/DateField/{DateField.js → DateField.tsx} +96 -52
  35. package/src/DateField/parse.test.ts +76 -0
  36. package/src/DateField/parse.ts +92 -0
  37. package/src/DateField/useArrowKeysToNavigateCalendar.ts +54 -0
  38. package/src/DateField/useEditableDate.ts +81 -0
  39. package/src/Select/Select.test.tsx +58 -0
@@ -179,21 +179,18 @@ function Button(_ref) {
179
179
 
180
180
  if (disabled) {
181
181
  buttonProps.opacity = 0.65;
182
+ buttonProps['aria-disabled'] = true;
183
+ buttonProps.cursor = 'not-allowed';
182
184
 
183
- if (buttonProps.type === "button" || buttonProps.type === "reset") {
184
- buttonProps.disabled = true;
185
- } else if (buttonProps.type === "submit") {
186
- buttonProps['aria-disabled'] = true;
187
- buttonProps.cursor = 'not-allowed';
188
-
189
- buttonProps.onClick = function (event) {
190
- return event.preventDefault();
191
- };
185
+ buttonProps.onClick = function (event) {
186
+ return event.preventDefault();
187
+ };
192
188
 
193
- buttonProps.onKeyDown = function (event) {
194
- return event.preventDefault();
195
- };
196
- }
189
+ buttonProps.onKeyDown = function (event) {
190
+ if (event.key === 'Enter' || event.key === ' ') {
191
+ event.preventDefault();
192
+ }
193
+ };
197
194
  } // don't apply hover/active styles or events when disabled or spinner is present
198
195
 
199
196
 
@@ -24,60 +24,92 @@ it("should render as <button> with type=\"submit\"", function () {
24
24
  var button = container.querySelector('button');
25
25
  expect(button.getAttribute('type')).toEqual('submit');
26
26
  });
27
- it("should render \"disabled\" attribute, if <button> is disabled", function () {
27
+ it("if \"disabled\" prop is provided, set \"aria-disabled\" attribute", function () {
28
28
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
29
29
  disabled: true
30
30
  })),
31
31
  container = _render3.container;
32
32
 
33
33
  var button = container.querySelector('button');
34
- expect(button.getAttribute("aria-disabled")).toEqual(null);
35
- expect(button.disabled).toBe(true);
34
+ expect(button.getAttribute("aria-disabled")).toEqual("true");
35
+ expect(button.disabled).toBe(false);
36
36
  });
37
- it("should render \"aria-disabled\" attribute, if <button type=\"submit\"> is disabled", function () {
37
+ it("if \"disabled\" prop is provided, prevent \"Click\" event from firing", function () {
38
38
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
39
- type: "submit",
40
39
  disabled: true
41
40
  })),
42
41
  container = _render4.container;
43
42
 
44
43
  var button = container.querySelector('button');
45
- expect(button.getAttribute("aria-disabled")).toEqual("true");
46
- expect(button.disabled).toBe(false);
44
+
45
+ var clickEvent = _react2.createEvent.click(button);
46
+
47
+ (0, _react2.fireEvent)(button, clickEvent);
48
+ expect(clickEvent.defaultPrevented).toBe(true);
49
+ });
50
+ it("if \"disabled\" prop is provided, prevent keyDown \"Enter\" event from firing", function () {
51
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
52
+ disabled: true
53
+ })),
54
+ container = _render5.container;
55
+
56
+ var button = container.querySelector('button');
57
+
58
+ var keyDownEvent = _react2.createEvent.keyDown(button, {
59
+ key: 'Enter'
60
+ });
61
+
62
+ (0, _react2.fireEvent)(button, keyDownEvent);
63
+ expect(keyDownEvent.defaultPrevented).toBe(true);
64
+ });
65
+ it("if \"disabled\" prop is provided, prevent keyDown \"Space\" event from firing", function () {
66
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
67
+ disabled: true
68
+ })),
69
+ container = _render6.container;
70
+
71
+ var button = container.querySelector('button');
72
+
73
+ var keyDownEvent = _react2.createEvent.keyDown(button, {
74
+ key: ' '
75
+ });
76
+
77
+ (0, _react2.fireEvent)(button, keyDownEvent);
78
+ expect(keyDownEvent.defaultPrevented).toBe(true);
47
79
  });
48
80
  it("should render title", function () {
49
81
  var title = 'Hello';
50
82
 
51
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
83
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
52
84
  title: title
53
85
  })),
54
- getByText = _render5.getByText;
86
+ getByText = _render7.getByText;
55
87
 
56
88
  getByText(title);
57
89
  });
58
90
  it("should render <a> without a type if \"to\" is provided", function () {
59
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
91
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
60
92
  to: "#"
61
93
  })),
62
- container = _render6.container;
94
+ container = _render8.container;
63
95
 
64
96
  var button = container.querySelector('a');
65
97
  expect(button.getAttribute('type')).toBeNull();
66
98
  });
67
99
  it("should render <a> without a type if \"href\" is provided", function () {
68
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
100
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
69
101
  href: "#"
70
102
  })),
71
- container = _render7.container;
103
+ container = _render9.container;
72
104
 
73
105
  var button = container.querySelector('a');
74
106
  expect(button.getAttribute('type')).toBeNull();
75
107
  });
76
108
  it("should render <a> with \"href\" if \"to\" is specifed", function () {
77
- var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
109
+ var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
78
110
  to: "#"
79
111
  })),
80
- container = _render8.container;
112
+ container = _render10.container;
81
113
 
82
114
  var button = container.querySelector('a');
83
115
  expect(button.getAttribute('href')).toEqual('#');
@@ -85,12 +117,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
85
117
  it("should render href and external link values", function () {
86
118
  var title = 'Hello';
87
119
 
88
- var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
120
+ var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
89
121
  external: true,
90
122
  title: title,
91
123
  to: "https://www.planningcenter.com"
92
124
  })),
93
- getByText = _render9.getByText;
125
+ getByText = _render11.getByText;
94
126
 
95
127
  var button = getByText(title);
96
128
  expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -100,18 +132,18 @@ it("should render href and external link values", function () {
100
132
  it("should call onClick when clicked or Enter or Space key is pressed", function () {
101
133
  var onClick = jest.fn();
102
134
 
103
- var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
135
+ var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
104
136
  onClick: onClick
105
137
  })),
106
- container = _render10.container;
138
+ container = _render12.container;
107
139
 
108
140
  _react2.fireEvent.click(container.firstChild);
109
141
 
110
142
  expect(onClick).toHaveBeenCalledTimes(1);
111
143
  });
112
144
  it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
113
- var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
114
- container = _render11.container;
145
+ var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
146
+ container = _render13.container;
115
147
 
116
148
  _react2.fireEvent.keyDown(container.firstChild, {
117
149
  key: 'Enter'
@@ -167,35 +167,37 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
167
167
  axis: "horizontal",
168
168
  spacing: 0.5
169
169
  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
170
- as: "button",
171
170
  "aria-label": isMonthsView ? 'Choose dates' : 'Choose month',
172
- padding: 0.25,
173
- fontSize: headerFontSize,
174
- lineHeight: 3,
175
- radius: 3,
176
- cursor: "pointer",
171
+ as: "button",
177
172
  backgroundColor: hover ? 'highlight' : 'transparent',
173
+ cursor: "pointer",
174
+ fontSize: headerFontSize,
178
175
  hover: {
179
176
  backgroundColor: 'highlightSecondary'
180
177
  },
178
+ lineHeight: 3,
181
179
  onClick: function onClick() {
182
180
  setCurrentView(isMonthsView ? 'calendar' : 'months');
183
- }
184
- }, (0, _dateFns.format)(currentDate, 'MMMM')), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
185
- as: "button",
186
- "aria-label": isYearsView ? 'Choose dates' : 'Choose year',
181
+ },
187
182
  padding: 0.25,
188
- fontSize: headerFontSize,
189
- lineHeight: 3,
190
183
  radius: 3,
191
- cursor: "pointer",
184
+ tabIndex: -1
185
+ }, (0, _dateFns.format)(currentDate, 'MMMM')), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
186
+ "aria-label": isYearsView ? 'Choose dates' : 'Choose year',
187
+ as: "button",
192
188
  backgroundColor: hover ? 'highlight' : 'transparent',
189
+ cursor: "pointer",
190
+ fontSize: headerFontSize,
193
191
  hover: {
194
192
  backgroundColor: 'highlightSecondary'
195
193
  },
194
+ lineHeight: 3,
196
195
  onClick: function onClick() {
197
196
  setCurrentView(isYearsView ? 'calendar' : 'years');
198
- }
197
+ },
198
+ padding: 0.25,
199
+ radius: 3,
200
+ tabIndex: -1
199
201
  }, currentYear)), /*#__PURE__*/_react["default"].createElement(_Group["default"], {
200
202
  marginRight: 0.5,
201
203
  childProps: {
@@ -203,35 +205,38 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
203
205
  size: buttonSize
204
206
  }
205
207
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
206
- title: "Previous month",
208
+ disabled: isYearsView ? currentYear <= minYear : (0, _dateFns.isSameMonth)(currentDate, minDate),
207
209
  icon: {
208
210
  name: 'general.leftChevron',
209
- size: "xxs"
211
+ size: 'xxs'
210
212
  },
211
- disabled: isYearsView ? currentYear <= minYear : (0, _dateFns.isSameMonth)(currentDate, minDate),
212
213
  onClick: function onClick() {
213
214
  return navigateCalendar(-1);
214
- }
215
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
216
- tooltip: {
217
- title: 'Today'
218
215
  },
216
+ tabIndex: -1,
217
+ title: "Previous month"
218
+ }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
219
219
  icon: {
220
220
  name: 'tapestry.radio1'
221
221
  },
222
222
  onClick: function onClick() {
223
223
  return setDate(_utils.TODAY, true);
224
+ },
225
+ tabIndex: -1,
226
+ tooltip: {
227
+ title: 'Today'
224
228
  }
225
229
  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
226
- title: "Next month",
230
+ disabled: isYearsView ? currentYear >= maxYear : (0, _dateFns.isSameMonth)(currentDate, maxDate),
227
231
  icon: {
228
232
  name: 'general.rightChevron',
229
- size: "xxs"
233
+ size: 'xxs'
230
234
  },
231
- disabled: isYearsView ? currentYear >= maxYear : (0, _dateFns.isSameMonth)(currentDate, maxDate),
232
235
  onClick: function onClick() {
233
236
  return navigateCalendar(1);
234
- }
237
+ },
238
+ tabIndex: -1,
239
+ title: "Next month"
235
240
  }))), isMonthsView && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
236
241
  axis: "horizontal",
237
242
  width: cellSize * 7,
@@ -17,6 +17,8 @@ var _Input = _interopRequireDefault(require("../Input"));
17
17
 
18
18
  var _ItemListContext = _interopRequireDefault(require("../ItemList/ItemListContext"));
19
19
 
20
+ var _ItemList = require("../ItemList");
21
+
20
22
  var _system = require("../system");
21
23
 
22
24
  function ComboboxInput(props, ref) {
@@ -56,13 +58,11 @@ function ComboboxInput(props, ref) {
56
58
  };
57
59
  });
58
60
  var itemList = (0, _react.useContext)(_ItemListContext["default"]);
59
- var highlightedItemId = itemList.highlightedItemId,
60
- id = itemList.id;
61
61
  (0, _react.useEffect)(function () {
62
62
  setTimeout(function () {
63
63
  itemList.setHighlightedIndex(0);
64
64
  });
65
- }, [itemList.items]);
65
+ }, [itemList]);
66
66
  var handleKeyDown = (0, _react.useCallback)(function (e) {
67
67
  if (e.key === 'ArrowUp') {
68
68
  e.preventDefault();
@@ -90,45 +90,49 @@ function ComboboxInput(props, ref) {
90
90
  if (onClose && e.key === 'Tab') {
91
91
  onClose();
92
92
  }
93
- });
93
+ }, [itemList, onClose, onKeyDown]);
94
94
  var handleDocumentKeyDown = (0, _react.useCallback)(function (e) {
95
95
  if (onClear && e.key === 'Escape') {
96
96
  onClear();
97
97
  }
98
+ }, [onClear]);
99
+ return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListController, null, function (itemList) {
100
+ var highlightedItemId = itemList.highlightedItemId,
101
+ id = itemList.id;
102
+ return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
103
+ innerRef: innerRef,
104
+ size: size,
105
+ disabled: disabled,
106
+ isLoading: isLoading,
107
+ onClear: onClear
108
+ }, restProps, {
109
+ grow: 1
110
+ }), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
111
+ innerRef: function innerRef(node) {
112
+ inputNode.current = node;
113
+ },
114
+ grow: 1,
115
+ role: "combobox",
116
+ autoComplete: "off",
117
+ "aria-autocomplete": "list",
118
+ "aria-controls": id,
119
+ "aria-expanded": isOpen,
120
+ "aria-activedescendant": highlightedItemId,
121
+ autoFocus: autoFocus,
122
+ type: type,
123
+ name: name,
124
+ disabled: disabled,
125
+ readOnly: readOnly,
126
+ placeholder: placeholder,
127
+ defaultValue: defaultValue,
128
+ value: value,
129
+ onChange: onChange,
130
+ onFocus: onFocus,
131
+ onBlur: onBlur,
132
+ onKeyDown: handleKeyDown,
133
+ onKeyUp: onKeyUp
134
+ }));
98
135
  });
99
- return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
100
- innerRef: innerRef,
101
- size: size,
102
- disabled: disabled,
103
- isLoading: isLoading,
104
- onClear: onClear
105
- }, restProps, {
106
- grow: 1
107
- }), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
108
- innerRef: function innerRef(node) {
109
- inputNode.current = node;
110
- },
111
- grow: 1,
112
- role: "combobox",
113
- autoComplete: "off",
114
- "aria-autocomplete": "list",
115
- "aria-controls": id,
116
- "aria-expanded": isOpen,
117
- "aria-activedescendant": highlightedItemId,
118
- autoFocus: autoFocus,
119
- type: type,
120
- name: name,
121
- disabled: disabled,
122
- readOnly: readOnly,
123
- placeholder: placeholder,
124
- defaultValue: defaultValue,
125
- value: value,
126
- onChange: onChange,
127
- onFocus: onFocus,
128
- onBlur: onBlur,
129
- onKeyDown: handleKeyDown,
130
- onKeyUp: onKeyUp
131
- }));
132
136
  }
133
137
 
134
138
  ComboboxInput = /*#__PURE__*/(0, _react.forwardRef)(ComboboxInput);
@@ -13,8 +13,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
13
13
 
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
 
16
- var _dateFns = require("date-fns");
17
-
18
16
  var _Card = _interopRequireDefault(require("../Card"));
19
17
 
20
18
  var _Calendar = _interopRequireDefault(require("../Calendar"));
@@ -31,6 +29,10 @@ var _utils = require("../utils");
31
29
 
32
30
  var _system = require("../system");
33
31
 
32
+ var _useArrowKeysToNavigateCalendar = require("./useArrowKeysToNavigateCalendar");
33
+
34
+ var _useEditableDate2 = require("./useEditableDate");
35
+
34
36
  function DateField(_ref) {
35
37
  var _ref$formatValue = _ref.formatValue,
36
38
  formatValue = _ref$formatValue === void 0 ? 'MMMM dd, yyyy' : _ref$formatValue,
@@ -55,8 +57,6 @@ function DateField(_ref) {
55
57
  trackColor = _useThemeProps.trackColor,
56
58
  restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
57
59
 
58
- var canClosePopover = true;
59
-
60
60
  var _useState = (0, _react.useState)(defaultOpen),
61
61
  isPopoverOpen = _useState[0],
62
62
  setIsPopoverOpen = _useState[1];
@@ -64,36 +64,67 @@ function DateField(_ref) {
64
64
  var id = (0, _utils.generateId)('datefield');
65
65
  var popover = (0, _react.useRef)(null);
66
66
  var inputWrapper = (0, _react.useRef)(null);
67
- var openPopover = (0, _react.useCallback)(function () {
68
- setIsPopoverOpen(true);
69
- });
70
- var closePopover = (0, _react.useCallback)(function () {
71
- if (canClosePopover) {
72
- setIsPopoverOpen(false);
73
- }
74
- });
75
- var togglePopover = (0, _react.useCallback)(function () {
76
- if (isPopoverOpen) {
77
- closePopover();
78
- } else {
79
- openPopover();
80
- }
81
- });
82
- var handleDateSelect = (0, _react.useCallback)(function (date) {
67
+ var focusInput = (0, _react.useCallback)(function () {
83
68
  var input = inputWrapper.current.querySelector('input');
84
69
 
85
70
  if (input.focus) {
86
71
  input.focus();
87
72
  }
88
-
89
- if (onChange) {
90
- onChange(date);
91
- }
92
-
73
+ }, []);
74
+ var openPopover = (0, _react.useCallback)(function () {
75
+ setIsPopoverOpen(true);
76
+ }, []);
77
+ var closePopover = (0, _react.useCallback)(function () {
78
+ setIsPopoverOpen(false);
79
+ }, []);
80
+ var dateValidator = (0, _react.useCallback)(function (date) {
81
+ if (!date) return false;
82
+ if (minDate && date < minDate) return false;
83
+ if (maxDate && date > maxDate) return false;
84
+ return true;
85
+ }, [minDate, maxDate]);
86
+
87
+ var _useEditableDate = (0, _useEditableDate2.useEditableDate)({
88
+ date: value,
89
+ dateFormat: formatValue,
90
+ dateValidator: dateValidator,
91
+ onChange: onChange
92
+ }),
93
+ formattedDate = _useEditableDate.formattedDate,
94
+ setDate = _useEditableDate.setDate,
95
+ clearKeyBuffer = _useEditableDate.clearKeyBuffer,
96
+ invalidKeyBuffer = _useEditableDate.invalidKeyBuffer;
97
+
98
+ var handleDateSelectedFromCalendar = (0, _react.useCallback)(function (date) {
99
+ focusInput();
100
+ setDate(date);
93
101
  closePopover();
102
+ }, [focusInput, setDate, closePopover]);
103
+ var navigateCalendarWithArrowKeys = (0, _useArrowKeysToNavigateCalendar.useArrowKeysToNavigateCalendar)({
104
+ date: value,
105
+ calendarIsOpen: isPopoverOpen,
106
+ openCalendar: openPopover,
107
+ onChange: setDate
94
108
  });
109
+ var handleInputOnChange = (0, _react.useCallback)(function (event) {
110
+ setDate(event.currentTarget.value);
111
+ }, [setDate]);
112
+ var handleOnBlur = (0, _react.useCallback)(function () {
113
+ clearKeyBuffer();
114
+ closePopover();
115
+ }, [clearKeyBuffer, closePopover]);
116
+ var inputColors = (0, _react.useMemo)(function () {
117
+ if (invalidKeyBuffer) {
118
+ return {
119
+ color: 'error-darker',
120
+ backgroundColor: 'error-lighter'
121
+ };
122
+ } else {
123
+ return {};
124
+ }
125
+ }, [invalidKeyBuffer]);
95
126
  return /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], {
96
- onBlur: closePopover
127
+ onBlur: handleOnBlur
97
128
  }, function (_ref2) {
98
129
  var requestBlur = _ref2.requestBlur,
99
130
  setRef = _ref2.setRef;
@@ -101,47 +132,43 @@ function DateField(_ref) {
101
132
  ref: function ref(component) {
102
133
  popover.current = component;
103
134
  },
135
+ as: _Card["default"],
136
+ elevation: 2,
104
137
  innerRef: function innerRef(node) {
105
138
  popover.current = node;
106
139
  setRef(id + "-popover")(node);
107
140
  },
108
- as: _Card["default"],
109
- tabIndex: -1,
110
- elevation: 2,
111
- onBlur: requestBlur,
112
141
  keepInView: keepInView,
113
142
  lockScrollWhileOpen: lockScrollWhileOpen,
114
- placement: placement,
115
- open: isPopoverOpen,
143
+ onBlur: requestBlur,
116
144
  onRequestClose: closePopover,
145
+ open: isPopoverOpen,
146
+ placement: placement,
147
+ tabIndex: -1,
117
148
  anchorElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
118
149
  innerRef: function innerRef(node) {
119
150
  inputWrapper.current = node;
120
151
  setRef(id + "-input")(node);
121
152
  },
122
- readOnly: true,
123
- value: value ? (0, _dateFns.format)(value, formatValue) : '',
153
+ onBlur: requestBlur,
154
+ onFocus: openPopover,
155
+ onChange: handleInputOnChange,
156
+ onKeyDown: navigateCalendarWithArrowKeys,
157
+ value: formattedDate,
124
158
  renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
125
159
  name: "general.calendar",
126
- color: "foregroundTertiary"
127
- }),
128
- onClick: togglePopover,
129
- onBlur: requestBlur,
130
- onKeyDown: function onKeyDown(event) {
131
- if (event.key === ' ') {
132
- event.preventDefault();
133
- togglePopover();
134
- }
135
- }
136
- }, restProps))
160
+ color: "foregroundTertiary",
161
+ onClick: openPopover
162
+ })
163
+ }, inputColors, restProps))
137
164
  }), /*#__PURE__*/_react["default"].createElement(_Calendar["default"], (0, _extends2["default"])({
138
165
  size: "sm"
139
166
  }, calendarProps, {
140
- initialDate: value,
167
+ date: value,
141
168
  selected: value,
142
169
  minDate: minDate,
143
170
  maxDate: maxDate,
144
- onDateSelect: handleDateSelect
171
+ onDateSelect: handleDateSelectedFromCalendar
145
172
  })));
146
173
  });
147
174
  }
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.parseMonth = exports.isValidDate = exports.parseDate = void 0;
5
+ 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;
6
+ 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;
7
+ var yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/;
8
+
9
+ var parseDate = function parseDate(_ref) {
10
+ var date = _ref.date,
11
+ format = _ref.format;
12
+
13
+ try {
14
+ var _parseDateIntoObject = parseDateIntoObject(date, format),
15
+ year = _parseDateIntoObject.year,
16
+ month = _parseDateIntoObject.month,
17
+ day = _parseDateIntoObject.day;
18
+
19
+ return new Date(year, month - 1, day);
20
+ } catch (e) {
21
+ return null;
22
+ }
23
+ };
24
+
25
+ exports.parseDate = parseDate;
26
+
27
+ var isValidDate = function isValidDate(date) {
28
+ return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date);
29
+ };
30
+
31
+ exports.isValidDate = isValidDate;
32
+
33
+ var parseMonth = function parseMonth(monthString) {
34
+ var months = {
35
+ jan: 1,
36
+ feb: 2,
37
+ mar: 3,
38
+ apr: 4,
39
+ may: 5,
40
+ jun: 6,
41
+ jul: 7,
42
+ aug: 8,
43
+ sep: 9,
44
+ oct: 10,
45
+ nov: 11,
46
+ dec: 12
47
+ };
48
+ var normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3);
49
+
50
+ if (/^\d+$/.test(normalizedString)) {
51
+ var month = parseInt(normalizedString, 10);
52
+
53
+ if (month >= 1 && month <= 12) {
54
+ return month;
55
+ }
56
+ } else if (normalizedString in months) {
57
+ return months[normalizedString];
58
+ }
59
+
60
+ throw new Error("Invalid month string: " + monthString);
61
+ };
62
+
63
+ exports.parseMonth = parseMonth;
64
+
65
+ var parseDateIntoObject = function parseDateIntoObject(date, format) {
66
+ if (format != null && format.match(/d.*M/) && dayMonthYearFormat.test(date)) {
67
+ var _dayMonthYearFormat$e = dayMonthYearFormat.exec(date),
68
+ day = _dayMonthYearFormat$e[1],
69
+ month = _dayMonthYearFormat$e[2],
70
+ year = _dayMonthYearFormat$e[3];
71
+
72
+ return {
73
+ year: parseInt(year, 10),
74
+ month: parseMonth(month),
75
+ day: parseInt(day, 10)
76
+ };
77
+ }
78
+
79
+ if (monthDayYearFormat.test(date)) {
80
+ var _monthDayYearFormat$e = monthDayYearFormat.exec(date),
81
+ _month = _monthDayYearFormat$e[1],
82
+ _day = _monthDayYearFormat$e[2],
83
+ _year = _monthDayYearFormat$e[3];
84
+
85
+ return {
86
+ year: parseInt(_year, 10),
87
+ month: parseMonth(_month),
88
+ day: parseInt(_day, 10)
89
+ };
90
+ }
91
+
92
+ if (yearMonthDayFormat.test(date)) {
93
+ var _yearMonthDayFormat$e = yearMonthDayFormat.exec(date),
94
+ _year2 = _yearMonthDayFormat$e[1],
95
+ _month2 = _yearMonthDayFormat$e[2],
96
+ _day2 = _yearMonthDayFormat$e[3];
97
+
98
+ return {
99
+ year: parseInt(_year2, 10),
100
+ month: parseMonth(_month2),
101
+ day: parseInt(_day2, 10)
102
+ };
103
+ }
104
+
105
+ throw new Error("Invalid date: " + date);
106
+ };