@planningcenter/tapestry-react 2.6.2 → 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 (46) hide show
  1. package/dist/cjs/Button/Button.js +12 -3
  2. package/dist/cjs/Button/Button.test.js +67 -14
  3. package/dist/cjs/Calendar/Calendar.js +30 -25
  4. package/dist/cjs/Combobox/ComboboxInput.js +41 -37
  5. package/dist/cjs/DataTable/DataTable.js +3 -2
  6. package/dist/cjs/DateField/DateField.js +74 -47
  7. package/dist/cjs/DateField/parse.js +106 -0
  8. package/dist/cjs/DateField/parse.test.js +46 -0
  9. package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js +44 -0
  10. package/dist/cjs/DateField/useEditableDate.js +72 -0
  11. package/dist/cjs/Select/Select.test.js +74 -0
  12. package/dist/cjs/system/colors/colors.js +18 -15
  13. package/dist/esm/Button/Button.js +12 -3
  14. package/dist/esm/Button/Button.test.js +78 -19
  15. package/dist/esm/Calendar/Calendar.js +30 -25
  16. package/dist/esm/Combobox/ComboboxInput.js +40 -37
  17. package/dist/esm/DataTable/DataTable.js +3 -2
  18. package/dist/esm/DateField/DateField.js +75 -48
  19. package/dist/esm/DateField/parse.js +93 -0
  20. package/dist/esm/DateField/parse.test.js +42 -0
  21. package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js +36 -0
  22. package/dist/esm/DateField/useEditableDate.js +62 -0
  23. package/dist/esm/Select/Select.test.js +59 -0
  24. package/dist/esm/system/colors/colors.js +18 -15
  25. package/dist/types/Button/Button.d.ts +1 -1
  26. package/dist/types/DateField/DateField.d.ts +48 -0
  27. package/dist/types/DateField/parse.d.ts +17 -0
  28. package/dist/types/DateField/parse.test.d.ts +1 -0
  29. package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts +8 -0
  30. package/dist/types/DateField/useEditableDate.d.ts +25 -0
  31. package/dist/types/Select/Select.test.d.ts +1 -0
  32. package/package.json +5 -6
  33. package/src/Button/Button.test.tsx +39 -1
  34. package/src/Button/Button.tsx +8 -3
  35. package/src/Calendar/Calendar.js +22 -17
  36. package/src/Combobox/ComboboxInput.js +76 -62
  37. package/src/DataTable/DataTable.js +2 -1
  38. package/src/DateField/DateField.mdx +15 -0
  39. package/src/DateField/{DateField.js → DateField.tsx} +96 -52
  40. package/src/DateField/parse.test.ts +76 -0
  41. package/src/DateField/parse.ts +92 -0
  42. package/src/DateField/useArrowKeysToNavigateCalendar.ts +54 -0
  43. package/src/DateField/useEditableDate.ts +81 -0
  44. package/src/Icon/Icon.mdx +12 -11
  45. package/src/Select/Select.test.tsx +58 -0
  46. package/src/system/colors/colors.js +18 -15
@@ -175,13 +175,22 @@ function Button(_ref) {
175
175
  if (iconRight) {
176
176
  iconRight['color'] = 'transparent';
177
177
  }
178
- } // don't allow interacting with button when disabled
179
-
178
+ }
180
179
 
181
180
  if (disabled) {
181
+ buttonProps.opacity = 0.65;
182
182
  buttonProps['aria-disabled'] = true;
183
183
  buttonProps.cursor = 'not-allowed';
184
- buttonProps.opacity = 0.65;
184
+
185
+ buttonProps.onClick = function (event) {
186
+ return event.preventDefault();
187
+ };
188
+
189
+ buttonProps.onKeyDown = function (event) {
190
+ if (event.key === 'Enter' || event.key === ' ') {
191
+ event.preventDefault();
192
+ }
193
+ };
185
194
  } // don't apply hover/active styles or events when disabled or spinner is present
186
195
 
187
196
 
@@ -24,39 +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("if \"disabled\" prop is provided, set \"aria-disabled\" attribute", function () {
28
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
29
+ disabled: true
30
+ })),
31
+ container = _render3.container;
32
+
33
+ var button = container.querySelector('button');
34
+ expect(button.getAttribute("aria-disabled")).toEqual("true");
35
+ expect(button.disabled).toBe(false);
36
+ });
37
+ it("if \"disabled\" prop is provided, prevent \"Click\" event from firing", function () {
38
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
39
+ disabled: true
40
+ })),
41
+ container = _render4.container;
42
+
43
+ var button = container.querySelector('button');
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);
79
+ });
27
80
  it("should render title", function () {
28
81
  var title = 'Hello';
29
82
 
30
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
83
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
31
84
  title: title
32
85
  })),
33
- getByText = _render3.getByText;
86
+ getByText = _render7.getByText;
34
87
 
35
88
  getByText(title);
36
89
  });
37
90
  it("should render <a> without a type if \"to\" is provided", function () {
38
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
91
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
39
92
  to: "#"
40
93
  })),
41
- container = _render4.container;
94
+ container = _render8.container;
42
95
 
43
96
  var button = container.querySelector('a');
44
97
  expect(button.getAttribute('type')).toBeNull();
45
98
  });
46
99
  it("should render <a> without a type if \"href\" is provided", function () {
47
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
100
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
48
101
  href: "#"
49
102
  })),
50
- container = _render5.container;
103
+ container = _render9.container;
51
104
 
52
105
  var button = container.querySelector('a');
53
106
  expect(button.getAttribute('type')).toBeNull();
54
107
  });
55
108
  it("should render <a> with \"href\" if \"to\" is specifed", function () {
56
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
109
+ var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
57
110
  to: "#"
58
111
  })),
59
- container = _render6.container;
112
+ container = _render10.container;
60
113
 
61
114
  var button = container.querySelector('a');
62
115
  expect(button.getAttribute('href')).toEqual('#');
@@ -64,12 +117,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
64
117
  it("should render href and external link values", function () {
65
118
  var title = 'Hello';
66
119
 
67
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
120
+ var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
68
121
  external: true,
69
122
  title: title,
70
123
  to: "https://www.planningcenter.com"
71
124
  })),
72
- getByText = _render7.getByText;
125
+ getByText = _render11.getByText;
73
126
 
74
127
  var button = getByText(title);
75
128
  expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -79,18 +132,18 @@ it("should render href and external link values", function () {
79
132
  it("should call onClick when clicked or Enter or Space key is pressed", function () {
80
133
  var onClick = jest.fn();
81
134
 
82
- var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
135
+ var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
83
136
  onClick: onClick
84
137
  })),
85
- container = _render8.container;
138
+ container = _render12.container;
86
139
 
87
140
  _react2.fireEvent.click(container.firstChild);
88
141
 
89
142
  expect(onClick).toHaveBeenCalledTimes(1);
90
143
  });
91
144
  it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
92
- var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
93
- container = _render9.container;
145
+ var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
146
+ container = _render13.container;
94
147
 
95
148
  _react2.fireEvent.keyDown(container.firstChild, {
96
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);
@@ -171,12 +171,13 @@ var DataTable = function DataTable(props) {
171
171
  onDrop: onDrop
172
172
  }, function (provided) {
173
173
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
174
+ className: css(getVariant('body')),
175
+ "data-dnd-ignore-scrollable": true,
174
176
  ref: function ref(_ref2) {
175
177
  bodyRef.current = _ref2;
176
178
  provided.innerRef(_ref2);
177
179
  },
178
- role: "rowgroup",
179
- className: css(getVariant('body'))
180
+ role: "rowgroup"
180
181
  }, provided.droppableProps), /*#__PURE__*/_react["default"].createElement(_components.BodyRows, bodyRowsProps), provided.placeholder);
181
182
  }));
182
183
  } else {
@@ -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
+ };