@atlaskit/datetime-picker 18.7.3 → 19.0.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.
- package/CHANGELOG.md +31 -0
- package/dist/cjs/components/date-picker.js +52 -11
- package/dist/cjs/components/date-time-picker.js +1 -1
- package/dist/cjs/components/time-picker.js +3 -3
- package/dist/cjs/internal/fixed-layer-menu-top-layer.js +1 -1
- package/dist/cjs/internal/fixed-layer.js +1 -1
- package/dist/cjs/internal/parse-date.js +2 -2
- package/dist/es2019/components/date-picker.js +47 -7
- package/dist/es2019/components/date-time-picker.js +1 -1
- package/dist/es2019/components/time-picker.js +3 -3
- package/dist/es2019/index.js +1 -0
- package/dist/es2019/internal/fixed-layer-menu-top-layer.js +1 -1
- package/dist/es2019/internal/fixed-layer.js +1 -1
- package/dist/es2019/internal/parse-date.js +2 -2
- package/dist/esm/components/date-picker.js +53 -12
- package/dist/esm/components/date-time-picker.js +1 -1
- package/dist/esm/components/time-picker.js +3 -3
- package/dist/esm/index.js +1 -0
- package/dist/esm/internal/fixed-layer-menu-top-layer.js +1 -1
- package/dist/esm/internal/fixed-layer.js +1 -1
- package/dist/esm/internal/parse-date.js +2 -2
- package/dist/types/internal/parse-date.d.ts +1 -1
- package/package.json +12 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 19.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`0c7c7be927bde`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c7c7be927bde) -
|
|
8
|
+
Remove deprecated Volt re-export shims from public package entry points. Consumers should import
|
|
9
|
+
from the replacement subpaths or implementation entry points instead.
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`bf2d0b438b71e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf2d0b438b71e) -
|
|
14
|
+
Cleanup `feature_gate` `platform-dst-dp-parse-date-format`. Typed input is now always parsed with
|
|
15
|
+
the configured `dateFormat` before falling back to locale parsing.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
18
|
+
## 18.7.4
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- [`38dbf5a2b937f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38dbf5a2b937f) -
|
|
23
|
+
Use a manual popover for Select's built-in menu on the platform-dst-top-layer path so input and
|
|
24
|
+
menu interactions do not dismiss it. The menu owns Escape dismissal even when focus is outside
|
|
25
|
+
Select, and leaves already-cancelled Escape events alone. Custom menu portals retain ownership of
|
|
26
|
+
their dismissal. DatePicker defers top-layer Escape dismissal to Select, then restores focus after
|
|
27
|
+
the menu closes so an enclosing popup remains open.
|
|
28
|
+
|
|
29
|
+
Add `additionalInsideElementRefs` to Select and `useSimpleLightDismiss` so detached controls can
|
|
30
|
+
participate in a menu's light-dismiss boundary.
|
|
31
|
+
|
|
32
|
+
- Updated dependencies
|
|
33
|
+
|
|
3
34
|
## 18.7.3
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
|
@@ -24,8 +24,8 @@ var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
|
|
|
24
24
|
var _localizationProvider = require("@atlaskit/locale/localization-provider");
|
|
25
25
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
26
26
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
27
|
-
var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
|
|
28
27
|
var _styles = require("@atlaskit/react-select/styles");
|
|
28
|
+
var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
|
|
29
29
|
var _emptyComponent = require("../internal/empty-component");
|
|
30
30
|
var _formatDate = require("../internal/format-date");
|
|
31
31
|
var _getParsedIso = require("../internal/get-parsed-iso");
|
|
@@ -38,14 +38,16 @@ var _menu = require("../internal/menu");
|
|
|
38
38
|
var _menuTopLayer = require("../internal/menu-top-layer");
|
|
39
39
|
var _parseDate = require("../internal/parse-date");
|
|
40
40
|
var _singleValue = require("../internal/single-value");
|
|
41
|
-
var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"]
|
|
41
|
+
var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"],
|
|
42
|
+
_excluded2 = ["MenuPortal"],
|
|
43
|
+
_excluded3 = ["menuRenderMode"]; /// <reference types="node" />
|
|
42
44
|
// for typing `process`
|
|
43
45
|
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
44
46
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
45
47
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
46
48
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
47
49
|
var packageName = "@atlaskit/datetime-picker";
|
|
48
|
-
var packageVersion = "18.7.
|
|
50
|
+
var packageVersion = "18.7.4";
|
|
49
51
|
var styles = {
|
|
50
52
|
pickerContainerStyle: "_kqswh2mm",
|
|
51
53
|
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -69,12 +71,14 @@ var analyticsAttributes = {
|
|
|
69
71
|
* - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
|
|
70
72
|
*/
|
|
71
73
|
var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwardedRef) {
|
|
74
|
+
var _selectProps$componen;
|
|
72
75
|
var containerRef = (0, _react.useRef)(null);
|
|
73
76
|
var calendarRef = (0, _react.useRef)(null);
|
|
74
77
|
var calendarButtonRef = (0, _react.useRef)(null);
|
|
75
78
|
// Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
|
|
76
79
|
// opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
|
|
77
80
|
var isPointerInteractionRef = (0, _react.useRef)(false);
|
|
81
|
+
var focusRestorationTargetRef = (0, _react.useRef)(null);
|
|
78
82
|
var _props$appearance = props.appearance,
|
|
79
83
|
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
|
|
80
84
|
_props$autoFocus = props.autoFocus,
|
|
@@ -179,10 +183,23 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
179
183
|
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
180
184
|
isKeyDown = _useState18[0],
|
|
181
185
|
setIsKeyDown = _useState18[1];
|
|
186
|
+
var isTopLayerEnabled = (0, _fg.fg)('platform-dst-top-layer');
|
|
187
|
+
var _ref = (_selectProps$componen = selectProps.components) !== null && _selectProps$componen !== void 0 ? _selectProps$componen : {},
|
|
188
|
+
customMenuPortal = _ref.MenuPortal,
|
|
189
|
+
selectComponentOverrides = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
|
|
190
|
+
var _menuRenderMode = selectProps.menuRenderMode,
|
|
191
|
+
selectPropsWithoutMenuRenderMode = (0, _objectWithoutProperties2.default)(selectProps, _excluded3);
|
|
192
|
+
if (process.env.NODE_ENV !== 'production' && isTopLayerEnabled && (selectProps.menuRenderMode === 'inline' || customMenuPortal)) {
|
|
193
|
+
throw new Error('DatePicker does not support selectProps.menuRenderMode="inline" or selectProps.components.MenuPortal when platform-dst-top-layer is enabled.');
|
|
194
|
+
}
|
|
195
|
+
var selectPropsForSelect = isTopLayerEnabled ? selectPropsWithoutMenuRenderMode : selectProps;
|
|
182
196
|
var _useState19 = (0, _react.useState)(false),
|
|
183
197
|
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
|
184
198
|
wasOpenedFromCalendarButton = _useState20[0],
|
|
185
199
|
setWasOpenedFromCalendarButton = _useState20[1];
|
|
200
|
+
var additionalInsideElementRefs = (0, _react.useMemo)(function () {
|
|
201
|
+
return [calendarButtonRef];
|
|
202
|
+
}, [calendarButtonRef]);
|
|
186
203
|
|
|
187
204
|
// Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
|
|
188
205
|
var _useReducer = (0, _react.useReducer)(function (x) {
|
|
@@ -217,14 +234,14 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
217
234
|
var getIsOpen = function getIsOpen() {
|
|
218
235
|
return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
|
|
219
236
|
};
|
|
220
|
-
var onCalendarChange = function onCalendarChange(
|
|
221
|
-
var iso =
|
|
237
|
+
var onCalendarChange = function onCalendarChange(_ref2) {
|
|
238
|
+
var iso = _ref2.iso;
|
|
222
239
|
setCalendarValue((0, _getParsedIso.getParsedISO)({
|
|
223
240
|
iso: iso
|
|
224
241
|
}));
|
|
225
242
|
};
|
|
226
|
-
var onCalendarSelect = function onCalendarSelect(
|
|
227
|
-
var iso =
|
|
243
|
+
var onCalendarSelect = function onCalendarSelect(_ref3) {
|
|
244
|
+
var iso = _ref3.iso;
|
|
228
245
|
setSelectInputValue('');
|
|
229
246
|
setIsOpen(false);
|
|
230
247
|
setCalendarValue(iso);
|
|
@@ -325,6 +342,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
325
342
|
setIsOpen(true);
|
|
326
343
|
setWasOpenedFromCalendarButton(false);
|
|
327
344
|
}
|
|
345
|
+
var shouldDeferEscapeHandling = event.key === 'Escape' && isTopLayerEnabled && getIsOpen();
|
|
346
|
+
if (shouldDeferEscapeHandling) {
|
|
347
|
+
var _containerRef$current4, _containerRef$current5;
|
|
348
|
+
// Select owns Escape cancellation and dismissal for its default top-layer popup.
|
|
349
|
+
// Defer DatePicker's focus and state cleanup until the menu has closed.
|
|
350
|
+
var focusRestorationTarget = wasOpenedFromCalendarButton ? calendarButtonRef.current : (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.querySelector('[role="combobox"]')) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : null;
|
|
351
|
+
focusRestorationTargetRef.current = event.defaultPrevented ? null : focusRestorationTarget;
|
|
352
|
+
return;
|
|
353
|
+
}
|
|
328
354
|
switch (keyPressed) {
|
|
329
355
|
case 'escape':
|
|
330
356
|
// Restore focus because it may have moved from the input into the calendar.
|
|
@@ -332,8 +358,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
332
358
|
var _calendarButtonRef$cu2;
|
|
333
359
|
(_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
|
|
334
360
|
} else {
|
|
335
|
-
var _containerRef$
|
|
336
|
-
var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$
|
|
361
|
+
var _containerRef$current6;
|
|
362
|
+
var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.querySelector('[role="combobox"]');
|
|
337
363
|
innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
|
|
338
364
|
}
|
|
339
365
|
setIsOpen(false);
|
|
@@ -387,6 +413,18 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
387
413
|
break;
|
|
388
414
|
}
|
|
389
415
|
};
|
|
416
|
+
var onMenuClose = function onMenuClose() {
|
|
417
|
+
var _selectProps$onMenuCl;
|
|
418
|
+
var focusTarget = focusRestorationTargetRef.current;
|
|
419
|
+
focusRestorationTargetRef.current = null;
|
|
420
|
+
if ((0, _fg.fg)('platform-dst-top-layer') && focusTarget) {
|
|
421
|
+
focusTarget.focus();
|
|
422
|
+
setIsOpen(false);
|
|
423
|
+
setShouldSetFocusOnCurrentDay(false);
|
|
424
|
+
setWasOpenedFromCalendarButton(false);
|
|
425
|
+
}
|
|
426
|
+
(_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 || _selectProps$onMenuCl.call(selectProps);
|
|
427
|
+
};
|
|
390
428
|
var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
|
|
391
429
|
// Don't allow an arrow up or down to open the menu, since the input key
|
|
392
430
|
// down handler is actually on the parent.
|
|
@@ -471,7 +509,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
471
509
|
id: valueId,
|
|
472
510
|
lang: propLocale
|
|
473
511
|
});
|
|
474
|
-
var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
|
|
512
|
+
var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, isTopLayerEnabled ? selectComponentOverrides : selectProps.components), {}, {
|
|
475
513
|
DropdownIndicator: shouldShowCalendarButton ? _emptyComponent.EmptyComponent : dropDownIcon
|
|
476
514
|
}, shouldShowCalendarButton ? {
|
|
477
515
|
IndicatorsContainer: function IndicatorsContainer(props) {
|
|
@@ -595,13 +633,16 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
|
|
|
595
633
|
,
|
|
596
634
|
styles: mergedStyles,
|
|
597
635
|
value: initialValue
|
|
598
|
-
},
|
|
636
|
+
}, selectPropsForSelect, {
|
|
637
|
+
additionalInsideElementRefs: isTopLayerEnabled ? additionalInsideElementRefs : undefined,
|
|
638
|
+
onMenuClose: onMenuClose
|
|
599
639
|
// For some reason, this and the below `styles` type error _only_ show
|
|
600
640
|
// up when you alter some of the properties in the `selectComponents`
|
|
601
641
|
// object. These errors are still present, and I suspect have always
|
|
602
642
|
// been present, without changing the unrelated code. Ignoring as the
|
|
603
643
|
// component still works as expected despite this error. And also
|
|
604
644
|
// because the select refresh team may solve it later.
|
|
645
|
+
,
|
|
605
646
|
components: selectComponents
|
|
606
647
|
// These are below the spread because I don't know what is in
|
|
607
648
|
// selectProps or not and what wil be overwritten
|
|
@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
33
33
|
// for typing `process`
|
|
34
34
|
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
35
35
|
var packageName = "@atlaskit/datetime-picker";
|
|
36
|
-
var packageVersion = "18.7.
|
|
36
|
+
var packageVersion = "18.7.4";
|
|
37
37
|
var analyticsAttributes = {
|
|
38
38
|
componentName: 'dateTimePicker',
|
|
39
39
|
packageName: packageName,
|
|
@@ -16,9 +16,9 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
|
|
|
16
16
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
17
17
|
var _localizationProvider = require("@atlaskit/locale/localization-provider");
|
|
18
18
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
19
|
-
var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
|
|
20
|
-
var _creatableSelect = _interopRequireDefault(require("@atlaskit/select/creatable-select"));
|
|
21
19
|
var _styles = require("@atlaskit/react-select/styles");
|
|
20
|
+
var _creatableSelect = _interopRequireDefault(require("@atlaskit/select/creatable-select"));
|
|
21
|
+
var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
|
|
22
22
|
var _defaultTimes = require("../internal/default-times");
|
|
23
23
|
var _emptyComponent = require("../internal/empty-component");
|
|
24
24
|
var _fixedLayerMenu = require("../internal/fixed-layer-menu");
|
|
@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
32
32
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
33
33
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
34
34
|
var packageName = "@atlaskit/datetime-picker";
|
|
35
|
-
var packageVersion = "18.7.
|
|
35
|
+
var packageVersion = "18.7.4";
|
|
36
36
|
var defaultTimeFormat = 'h:mma';
|
|
37
37
|
var menuStyles = {
|
|
38
38
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
@@ -14,8 +14,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
14
14
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
15
|
var _components = require("@atlaskit/react-select/components");
|
|
16
16
|
var _index = require("@atlaskit/top-layer/placement-map/index");
|
|
17
|
-
var _popover = require("@atlaskit/top-layer/popover/popover");
|
|
18
17
|
var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
|
|
18
|
+
var _popover = require("@atlaskit/top-layer/popover/popover");
|
|
19
19
|
var _useAnchoredPopover = require("@atlaskit/top-layer/use-anchored-popover");
|
|
20
20
|
var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
|
|
21
21
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -17,8 +17,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
18
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
19
19
|
var _default = require("@atlaskit/icon/constants/default");
|
|
20
|
-
var _manager = require("@atlaskit/popper/manager");
|
|
21
20
|
var _main = require("@atlaskit/popper/main");
|
|
21
|
+
var _manager = require("@atlaskit/popper/manager");
|
|
22
22
|
var _reference = require("@atlaskit/popper/reference");
|
|
23
23
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
24
24
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
@@ -31,7 +31,7 @@ var _parseTokens = require("./parse-tokens");
|
|
|
31
31
|
* There are props that can change how the date is parsed.
|
|
32
32
|
* The priority of props used is:
|
|
33
33
|
* 1. `parseInputValue`
|
|
34
|
-
* 2. `dateFormat`
|
|
34
|
+
* 2. `dateFormat`
|
|
35
35
|
* 3. `locale`
|
|
36
36
|
*
|
|
37
37
|
* `dateFormat` only wins when the input actually parses against it, otherwise
|
|
@@ -44,7 +44,7 @@ var parseDate = exports.parseDate = function parseDate(date, di) {
|
|
|
44
44
|
if (parseInputValue) {
|
|
45
45
|
return parseInputValue(date, dateFormat || _defaultDateFormat.defaultDateFormat);
|
|
46
46
|
}
|
|
47
|
-
if (dateFormat
|
|
47
|
+
if (dateFormat) {
|
|
48
48
|
// date-fns uses the reference year to resolve two-digit years and fill
|
|
49
49
|
// omitted years. Use the current local date rather than the Unix epoch.
|
|
50
50
|
var referenceDate = (0, _fg.fg)('platform-dst-dp-current-reference-date') ? new Date() : new Date(0);
|
|
@@ -5,7 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
6
|
/// <reference types="node" />
|
|
7
7
|
// for typing `process`
|
|
8
|
-
import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
|
|
8
|
+
import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
|
|
9
9
|
|
|
10
10
|
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
11
11
|
import { isValid, parseISO } from 'date-fns';
|
|
@@ -17,8 +17,8 @@ import CalendarIcon from '@atlaskit/icon/core/calendar';
|
|
|
17
17
|
import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
|
|
18
18
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
19
19
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
20
|
-
import Select from '@atlaskit/select/default';
|
|
21
20
|
import { mergeStyles } from '@atlaskit/react-select/styles';
|
|
21
|
+
import Select from '@atlaskit/select/default';
|
|
22
22
|
import { EmptyComponent } from '../internal/empty-component';
|
|
23
23
|
import { formatDate } from '../internal/format-date';
|
|
24
24
|
import { getParsedISO } from '../internal/get-parsed-iso';
|
|
@@ -32,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
|
|
|
32
32
|
import { parseDate } from '../internal/parse-date';
|
|
33
33
|
import { makeSingleValue } from '../internal/single-value';
|
|
34
34
|
const packageName = "@atlaskit/datetime-picker";
|
|
35
|
-
const packageVersion = "18.7.
|
|
35
|
+
const packageVersion = "18.7.4";
|
|
36
36
|
const styles = {
|
|
37
37
|
pickerContainerStyle: "_kqswh2mm",
|
|
38
38
|
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -56,12 +56,14 @@ const analyticsAttributes = {
|
|
|
56
56
|
* - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
|
|
57
57
|
*/
|
|
58
58
|
const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
59
|
+
var _selectProps$componen;
|
|
59
60
|
const containerRef = useRef(null);
|
|
60
61
|
const calendarRef = useRef(null);
|
|
61
62
|
const calendarButtonRef = useRef(null);
|
|
62
63
|
// Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
|
|
63
64
|
// opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
|
|
64
65
|
const isPointerInteractionRef = useRef(false);
|
|
66
|
+
const focusRestorationTargetRef = useRef(null);
|
|
65
67
|
const {
|
|
66
68
|
appearance = 'default',
|
|
67
69
|
autoFocus = false,
|
|
@@ -114,7 +116,21 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
|
114
116
|
const [locale, setLocale] = useState(propLocale);
|
|
115
117
|
const [shouldSetFocusOnCurrentDay, setShouldSetFocusOnCurrentDay] = useState(false);
|
|
116
118
|
const [isKeyDown, setIsKeyDown] = useState(false);
|
|
119
|
+
const isTopLayerEnabled = fg('platform-dst-top-layer');
|
|
120
|
+
const {
|
|
121
|
+
MenuPortal: customMenuPortal,
|
|
122
|
+
...selectComponentOverrides
|
|
123
|
+
} = (_selectProps$componen = selectProps.components) !== null && _selectProps$componen !== void 0 ? _selectProps$componen : {};
|
|
124
|
+
const {
|
|
125
|
+
menuRenderMode: _menuRenderMode,
|
|
126
|
+
...selectPropsWithoutMenuRenderMode
|
|
127
|
+
} = selectProps;
|
|
128
|
+
if (process.env.NODE_ENV !== 'production' && isTopLayerEnabled && (selectProps.menuRenderMode === 'inline' || customMenuPortal)) {
|
|
129
|
+
throw new Error('DatePicker does not support selectProps.menuRenderMode="inline" or selectProps.components.MenuPortal when platform-dst-top-layer is enabled.');
|
|
130
|
+
}
|
|
131
|
+
const selectPropsForSelect = isTopLayerEnabled ? selectPropsWithoutMenuRenderMode : selectProps;
|
|
117
132
|
const [wasOpenedFromCalendarButton, setWasOpenedFromCalendarButton] = useState(false);
|
|
133
|
+
const additionalInsideElementRefs = useMemo(() => [calendarButtonRef], [calendarButtonRef]);
|
|
118
134
|
|
|
119
135
|
// Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
|
|
120
136
|
const [, forceUpdate] = useReducer(x => !x, true);
|
|
@@ -252,6 +268,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
|
252
268
|
setIsOpen(true);
|
|
253
269
|
setWasOpenedFromCalendarButton(false);
|
|
254
270
|
}
|
|
271
|
+
const shouldDeferEscapeHandling = event.key === 'Escape' && isTopLayerEnabled && getIsOpen();
|
|
272
|
+
if (shouldDeferEscapeHandling) {
|
|
273
|
+
var _containerRef$current4, _containerRef$current5;
|
|
274
|
+
// Select owns Escape cancellation and dismissal for its default top-layer popup.
|
|
275
|
+
// Defer DatePicker's focus and state cleanup until the menu has closed.
|
|
276
|
+
const focusRestorationTarget = wasOpenedFromCalendarButton ? calendarButtonRef.current : (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.querySelector('[role="combobox"]')) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : null;
|
|
277
|
+
focusRestorationTargetRef.current = event.defaultPrevented ? null : focusRestorationTarget;
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
255
280
|
switch (keyPressed) {
|
|
256
281
|
case 'escape':
|
|
257
282
|
// Restore focus because it may have moved from the input into the calendar.
|
|
@@ -259,8 +284,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
|
259
284
|
var _calendarButtonRef$cu2;
|
|
260
285
|
(_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 ? void 0 : _calendarButtonRef$cu2.focus();
|
|
261
286
|
} else {
|
|
262
|
-
var _containerRef$
|
|
263
|
-
const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$
|
|
287
|
+
var _containerRef$current6;
|
|
288
|
+
const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.querySelector('[role="combobox"]');
|
|
264
289
|
innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
|
|
265
290
|
}
|
|
266
291
|
setIsOpen(false);
|
|
@@ -314,6 +339,18 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
|
314
339
|
break;
|
|
315
340
|
}
|
|
316
341
|
};
|
|
342
|
+
const onMenuClose = () => {
|
|
343
|
+
var _selectProps$onMenuCl;
|
|
344
|
+
const focusTarget = focusRestorationTargetRef.current;
|
|
345
|
+
focusRestorationTargetRef.current = null;
|
|
346
|
+
if (fg('platform-dst-top-layer') && focusTarget) {
|
|
347
|
+
focusTarget.focus();
|
|
348
|
+
setIsOpen(false);
|
|
349
|
+
setShouldSetFocusOnCurrentDay(false);
|
|
350
|
+
setWasOpenedFromCalendarButton(false);
|
|
351
|
+
}
|
|
352
|
+
(_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 ? void 0 : _selectProps$onMenuCl.call(selectProps);
|
|
353
|
+
};
|
|
317
354
|
const onCalendarButtonKeyDown = e => {
|
|
318
355
|
// Don't allow an arrow up or down to open the menu, since the input key
|
|
319
356
|
// down handler is actually on the parent.
|
|
@@ -397,7 +434,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
|
397
434
|
lang: propLocale
|
|
398
435
|
});
|
|
399
436
|
const selectComponents = {
|
|
400
|
-
...selectProps.components,
|
|
437
|
+
...(isTopLayerEnabled ? selectComponentOverrides : selectProps.components),
|
|
401
438
|
DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
|
|
402
439
|
// Only use this new container component if the calendar button is shown.
|
|
403
440
|
// Otherwise, it throws errors downstream for some reason
|
|
@@ -523,13 +560,16 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
|
|
|
523
560
|
,
|
|
524
561
|
styles: mergedStyles,
|
|
525
562
|
value: initialValue
|
|
526
|
-
},
|
|
563
|
+
}, selectPropsForSelect, {
|
|
564
|
+
additionalInsideElementRefs: isTopLayerEnabled ? additionalInsideElementRefs : undefined,
|
|
565
|
+
onMenuClose: onMenuClose
|
|
527
566
|
// For some reason, this and the below `styles` type error _only_ show
|
|
528
567
|
// up when you alter some of the properties in the `selectComponents`
|
|
529
568
|
// object. These errors are still present, and I suspect have always
|
|
530
569
|
// been present, without changing the unrelated code. Ignoring as the
|
|
531
570
|
// component still works as expected despite this error. And also
|
|
532
571
|
// because the select refresh team may solve it later.
|
|
572
|
+
,
|
|
533
573
|
components: selectComponents
|
|
534
574
|
// These are below the spread because I don't know what is in
|
|
535
575
|
// selectProps or not and what wil be overwritten
|
|
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
20
20
|
import DatePicker from './date-picker';
|
|
21
21
|
import TimePicker from './time-picker';
|
|
22
22
|
const packageName = "@atlaskit/datetime-picker";
|
|
23
|
-
const packageVersion = "18.7.
|
|
23
|
+
const packageVersion = "18.7.4";
|
|
24
24
|
const analyticsAttributes = {
|
|
25
25
|
componentName: 'dateTimePicker',
|
|
26
26
|
packageName,
|
|
@@ -7,9 +7,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
|
|
|
7
7
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
8
8
|
import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
|
|
9
9
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
10
|
-
import Select from '@atlaskit/select/default';
|
|
11
|
-
import CreatableSelect from '@atlaskit/select/creatable-select';
|
|
12
10
|
import { mergeStyles } from '@atlaskit/react-select/styles';
|
|
11
|
+
import CreatableSelect from '@atlaskit/select/creatable-select';
|
|
12
|
+
import Select from '@atlaskit/select/default';
|
|
13
13
|
import { defaultTimes } from '../internal/default-times';
|
|
14
14
|
import { EmptyComponent } from '../internal/empty-component';
|
|
15
15
|
import { FixedLayerMenu } from '../internal/fixed-layer-menu';
|
|
@@ -19,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
19
19
|
import { placeholderDatetime } from '../internal/placeholder-date-time';
|
|
20
20
|
import { makeSingleValue } from '../internal/single-value';
|
|
21
21
|
const packageName = "@atlaskit/datetime-picker";
|
|
22
|
-
const packageVersion = "18.7.
|
|
22
|
+
const packageVersion = "18.7.4";
|
|
23
23
|
const defaultTimeFormat = 'h:mma';
|
|
24
24
|
const menuStyles = {
|
|
25
25
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
package/dist/es2019/index.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* @deprecated Use `import DatePicker from '@atlaskit/datetime-picker/date-picker'` instead.
|
|
4
4
|
*/
|
|
5
|
+
|
|
5
6
|
export { default as DatePicker } from './components/date-picker';
|
|
6
7
|
/**
|
|
7
8
|
* @deprecated Use `import TimePicker from '@atlaskit/datetime-picker/time-picker'` instead.
|
|
@@ -5,8 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import { useRef } from 'react';
|
|
6
6
|
import { components } from '@atlaskit/react-select/components';
|
|
7
7
|
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
|
|
8
|
-
import { Popover } from '@atlaskit/top-layer/popover/popover';
|
|
9
8
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
9
|
+
import { Popover } from '@atlaskit/top-layer/popover/popover';
|
|
10
10
|
import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
|
|
11
11
|
|
|
12
12
|
/**
|
|
@@ -5,8 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import noop from '@atlaskit/ds-lib/noop';
|
|
7
7
|
import { sizes } from '@atlaskit/icon/constants/default';
|
|
8
|
-
import { Manager } from '@atlaskit/popper/manager';
|
|
9
8
|
import { Popper } from '@atlaskit/popper/main';
|
|
9
|
+
import { Manager } from '@atlaskit/popper/manager';
|
|
10
10
|
import { Reference } from '@atlaskit/popper/reference';
|
|
11
11
|
const styles = {
|
|
12
12
|
root: "_bfhk1j28 _kqswstnw _152tze3t",
|
|
@@ -25,7 +25,7 @@ import { convertTokens } from './parse-tokens';
|
|
|
25
25
|
* There are props that can change how the date is parsed.
|
|
26
26
|
* The priority of props used is:
|
|
27
27
|
* 1. `parseInputValue`
|
|
28
|
-
* 2. `dateFormat`
|
|
28
|
+
* 2. `dateFormat`
|
|
29
29
|
* 3. `locale`
|
|
30
30
|
*
|
|
31
31
|
* `dateFormat` only wins when the input actually parses against it, otherwise
|
|
@@ -40,7 +40,7 @@ export const parseDate = (date, di) => {
|
|
|
40
40
|
if (parseInputValue) {
|
|
41
41
|
return parseInputValue(date, dateFormat || defaultDateFormat);
|
|
42
42
|
}
|
|
43
|
-
if (dateFormat
|
|
43
|
+
if (dateFormat) {
|
|
44
44
|
// date-fns uses the reference year to resolve two-digit years and fill
|
|
45
45
|
// omitted years. Use the current local date rather than the Unix epoch.
|
|
46
46
|
const referenceDate = fg('platform-dst-dp-current-reference-date') ? new Date() : new Date(0);
|
|
@@ -3,7 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
6
|
-
var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"]
|
|
6
|
+
var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"],
|
|
7
|
+
_excluded2 = ["MenuPortal"],
|
|
8
|
+
_excluded3 = ["menuRenderMode"];
|
|
7
9
|
import "./date-picker.compiled.css";
|
|
8
10
|
import * as React from 'react';
|
|
9
11
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -11,7 +13,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
11
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
14
|
/// <reference types="node" />
|
|
13
15
|
// for typing `process`
|
|
14
|
-
import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
|
|
16
|
+
import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
|
|
15
17
|
|
|
16
18
|
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
17
19
|
import { isValid, parseISO } from 'date-fns';
|
|
@@ -23,8 +25,8 @@ import CalendarIcon from '@atlaskit/icon/core/calendar';
|
|
|
23
25
|
import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
|
|
24
26
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
25
27
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
26
|
-
import Select from '@atlaskit/select/default';
|
|
27
28
|
import { mergeStyles } from '@atlaskit/react-select/styles';
|
|
29
|
+
import Select from '@atlaskit/select/default';
|
|
28
30
|
import { EmptyComponent } from '../internal/empty-component';
|
|
29
31
|
import { formatDate } from '../internal/format-date';
|
|
30
32
|
import { getParsedISO } from '../internal/get-parsed-iso';
|
|
@@ -38,7 +40,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
|
|
|
38
40
|
import { parseDate } from '../internal/parse-date';
|
|
39
41
|
import { makeSingleValue } from '../internal/single-value';
|
|
40
42
|
var packageName = "@atlaskit/datetime-picker";
|
|
41
|
-
var packageVersion = "18.7.
|
|
43
|
+
var packageVersion = "18.7.4";
|
|
42
44
|
var styles = {
|
|
43
45
|
pickerContainerStyle: "_kqswh2mm",
|
|
44
46
|
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -62,12 +64,14 @@ var analyticsAttributes = {
|
|
|
62
64
|
* - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
|
|
63
65
|
*/
|
|
64
66
|
var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
67
|
+
var _selectProps$componen;
|
|
65
68
|
var containerRef = useRef(null);
|
|
66
69
|
var calendarRef = useRef(null);
|
|
67
70
|
var calendarButtonRef = useRef(null);
|
|
68
71
|
// Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
|
|
69
72
|
// opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
|
|
70
73
|
var isPointerInteractionRef = useRef(false);
|
|
74
|
+
var focusRestorationTargetRef = useRef(null);
|
|
71
75
|
var _props$appearance = props.appearance,
|
|
72
76
|
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
|
|
73
77
|
_props$autoFocus = props.autoFocus,
|
|
@@ -172,10 +176,23 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
172
176
|
_useState18 = _slicedToArray(_useState17, 2),
|
|
173
177
|
isKeyDown = _useState18[0],
|
|
174
178
|
setIsKeyDown = _useState18[1];
|
|
179
|
+
var isTopLayerEnabled = fg('platform-dst-top-layer');
|
|
180
|
+
var _ref = (_selectProps$componen = selectProps.components) !== null && _selectProps$componen !== void 0 ? _selectProps$componen : {},
|
|
181
|
+
customMenuPortal = _ref.MenuPortal,
|
|
182
|
+
selectComponentOverrides = _objectWithoutProperties(_ref, _excluded2);
|
|
183
|
+
var _menuRenderMode = selectProps.menuRenderMode,
|
|
184
|
+
selectPropsWithoutMenuRenderMode = _objectWithoutProperties(selectProps, _excluded3);
|
|
185
|
+
if (process.env.NODE_ENV !== 'production' && isTopLayerEnabled && (selectProps.menuRenderMode === 'inline' || customMenuPortal)) {
|
|
186
|
+
throw new Error('DatePicker does not support selectProps.menuRenderMode="inline" or selectProps.components.MenuPortal when platform-dst-top-layer is enabled.');
|
|
187
|
+
}
|
|
188
|
+
var selectPropsForSelect = isTopLayerEnabled ? selectPropsWithoutMenuRenderMode : selectProps;
|
|
175
189
|
var _useState19 = useState(false),
|
|
176
190
|
_useState20 = _slicedToArray(_useState19, 2),
|
|
177
191
|
wasOpenedFromCalendarButton = _useState20[0],
|
|
178
192
|
setWasOpenedFromCalendarButton = _useState20[1];
|
|
193
|
+
var additionalInsideElementRefs = useMemo(function () {
|
|
194
|
+
return [calendarButtonRef];
|
|
195
|
+
}, [calendarButtonRef]);
|
|
179
196
|
|
|
180
197
|
// Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
|
|
181
198
|
var _useReducer = useReducer(function (x) {
|
|
@@ -210,14 +227,14 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
210
227
|
var getIsOpen = function getIsOpen() {
|
|
211
228
|
return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
|
|
212
229
|
};
|
|
213
|
-
var onCalendarChange = function onCalendarChange(
|
|
214
|
-
var iso =
|
|
230
|
+
var onCalendarChange = function onCalendarChange(_ref2) {
|
|
231
|
+
var iso = _ref2.iso;
|
|
215
232
|
setCalendarValue(getParsedISO({
|
|
216
233
|
iso: iso
|
|
217
234
|
}));
|
|
218
235
|
};
|
|
219
|
-
var onCalendarSelect = function onCalendarSelect(
|
|
220
|
-
var iso =
|
|
236
|
+
var onCalendarSelect = function onCalendarSelect(_ref3) {
|
|
237
|
+
var iso = _ref3.iso;
|
|
221
238
|
setSelectInputValue('');
|
|
222
239
|
setIsOpen(false);
|
|
223
240
|
setCalendarValue(iso);
|
|
@@ -318,6 +335,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
318
335
|
setIsOpen(true);
|
|
319
336
|
setWasOpenedFromCalendarButton(false);
|
|
320
337
|
}
|
|
338
|
+
var shouldDeferEscapeHandling = event.key === 'Escape' && isTopLayerEnabled && getIsOpen();
|
|
339
|
+
if (shouldDeferEscapeHandling) {
|
|
340
|
+
var _containerRef$current4, _containerRef$current5;
|
|
341
|
+
// Select owns Escape cancellation and dismissal for its default top-layer popup.
|
|
342
|
+
// Defer DatePicker's focus and state cleanup until the menu has closed.
|
|
343
|
+
var focusRestorationTarget = wasOpenedFromCalendarButton ? calendarButtonRef.current : (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.querySelector('[role="combobox"]')) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : null;
|
|
344
|
+
focusRestorationTargetRef.current = event.defaultPrevented ? null : focusRestorationTarget;
|
|
345
|
+
return;
|
|
346
|
+
}
|
|
321
347
|
switch (keyPressed) {
|
|
322
348
|
case 'escape':
|
|
323
349
|
// Restore focus because it may have moved from the input into the calendar.
|
|
@@ -325,8 +351,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
325
351
|
var _calendarButtonRef$cu2;
|
|
326
352
|
(_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
|
|
327
353
|
} else {
|
|
328
|
-
var _containerRef$
|
|
329
|
-
var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$
|
|
354
|
+
var _containerRef$current6;
|
|
355
|
+
var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.querySelector('[role="combobox"]');
|
|
330
356
|
innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
|
|
331
357
|
}
|
|
332
358
|
setIsOpen(false);
|
|
@@ -380,6 +406,18 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
380
406
|
break;
|
|
381
407
|
}
|
|
382
408
|
};
|
|
409
|
+
var onMenuClose = function onMenuClose() {
|
|
410
|
+
var _selectProps$onMenuCl;
|
|
411
|
+
var focusTarget = focusRestorationTargetRef.current;
|
|
412
|
+
focusRestorationTargetRef.current = null;
|
|
413
|
+
if (fg('platform-dst-top-layer') && focusTarget) {
|
|
414
|
+
focusTarget.focus();
|
|
415
|
+
setIsOpen(false);
|
|
416
|
+
setShouldSetFocusOnCurrentDay(false);
|
|
417
|
+
setWasOpenedFromCalendarButton(false);
|
|
418
|
+
}
|
|
419
|
+
(_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 || _selectProps$onMenuCl.call(selectProps);
|
|
420
|
+
};
|
|
383
421
|
var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
|
|
384
422
|
// Don't allow an arrow up or down to open the menu, since the input key
|
|
385
423
|
// down handler is actually on the parent.
|
|
@@ -464,7 +502,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
464
502
|
id: valueId,
|
|
465
503
|
lang: propLocale
|
|
466
504
|
});
|
|
467
|
-
var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
|
|
505
|
+
var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, isTopLayerEnabled ? selectComponentOverrides : selectProps.components), {}, {
|
|
468
506
|
DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
|
|
469
507
|
}, shouldShowCalendarButton ? {
|
|
470
508
|
IndicatorsContainer: function IndicatorsContainer(props) {
|
|
@@ -588,13 +626,16 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
|
|
|
588
626
|
,
|
|
589
627
|
styles: mergedStyles,
|
|
590
628
|
value: initialValue
|
|
591
|
-
},
|
|
629
|
+
}, selectPropsForSelect, {
|
|
630
|
+
additionalInsideElementRefs: isTopLayerEnabled ? additionalInsideElementRefs : undefined,
|
|
631
|
+
onMenuClose: onMenuClose
|
|
592
632
|
// For some reason, this and the below `styles` type error _only_ show
|
|
593
633
|
// up when you alter some of the properties in the `selectComponents`
|
|
594
634
|
// object. These errors are still present, and I suspect have always
|
|
595
635
|
// been present, without changing the unrelated code. Ignoring as the
|
|
596
636
|
// component still works as expected despite this error. And also
|
|
597
637
|
// because the select refresh team may solve it later.
|
|
638
|
+
,
|
|
598
639
|
components: selectComponents
|
|
599
640
|
// These are below the spread because I don't know what is in
|
|
600
641
|
// selectProps or not and what wil be overwritten
|
|
@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
27
27
|
import DatePicker from './date-picker';
|
|
28
28
|
import TimePicker from './time-picker';
|
|
29
29
|
var packageName = "@atlaskit/datetime-picker";
|
|
30
|
-
var packageVersion = "18.7.
|
|
30
|
+
var packageVersion = "18.7.4";
|
|
31
31
|
var analyticsAttributes = {
|
|
32
32
|
componentName: 'dateTimePicker',
|
|
33
33
|
packageName: packageName,
|
|
@@ -13,9 +13,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
|
|
|
13
13
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
14
14
|
import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
|
|
15
15
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
16
|
-
import Select from '@atlaskit/select/default';
|
|
17
|
-
import CreatableSelect from '@atlaskit/select/creatable-select';
|
|
18
16
|
import { mergeStyles } from '@atlaskit/react-select/styles';
|
|
17
|
+
import CreatableSelect from '@atlaskit/select/creatable-select';
|
|
18
|
+
import Select from '@atlaskit/select/default';
|
|
19
19
|
import { defaultTimes } from '../internal/default-times';
|
|
20
20
|
import { EmptyComponent } from '../internal/empty-component';
|
|
21
21
|
import { FixedLayerMenu } from '../internal/fixed-layer-menu';
|
|
@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
25
25
|
import { placeholderDatetime } from '../internal/placeholder-date-time';
|
|
26
26
|
import { makeSingleValue } from '../internal/single-value';
|
|
27
27
|
var packageName = "@atlaskit/datetime-picker";
|
|
28
|
-
var packageVersion = "18.7.
|
|
28
|
+
var packageVersion = "18.7.4";
|
|
29
29
|
var defaultTimeFormat = 'h:mma';
|
|
30
30
|
var menuStyles = {
|
|
31
31
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
package/dist/esm/index.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* @deprecated Use `import DatePicker from '@atlaskit/datetime-picker/date-picker'` instead.
|
|
4
4
|
*/
|
|
5
|
+
|
|
5
6
|
export { default as DatePicker } from './components/date-picker';
|
|
6
7
|
/**
|
|
7
8
|
* @deprecated Use `import TimePicker from '@atlaskit/datetime-picker/time-picker'` instead.
|
|
@@ -7,8 +7,8 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
7
7
|
import { useRef } from 'react';
|
|
8
8
|
import { components } from '@atlaskit/react-select/components';
|
|
9
9
|
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
|
|
10
|
-
import { Popover } from '@atlaskit/top-layer/popover/popover';
|
|
11
10
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
11
|
+
import { Popover } from '@atlaskit/top-layer/popover/popover';
|
|
12
12
|
import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -12,8 +12,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import noop from '@atlaskit/ds-lib/noop';
|
|
14
14
|
import { sizes } from '@atlaskit/icon/constants/default';
|
|
15
|
-
import { Manager } from '@atlaskit/popper/manager';
|
|
16
15
|
import { Popper } from '@atlaskit/popper/main';
|
|
16
|
+
import { Manager } from '@atlaskit/popper/manager';
|
|
17
17
|
import { Reference } from '@atlaskit/popper/reference';
|
|
18
18
|
var styles = {
|
|
19
19
|
root: "_bfhk1j28 _kqswstnw _152tze3t",
|
|
@@ -25,7 +25,7 @@ import { convertTokens } from './parse-tokens';
|
|
|
25
25
|
* There are props that can change how the date is parsed.
|
|
26
26
|
* The priority of props used is:
|
|
27
27
|
* 1. `parseInputValue`
|
|
28
|
-
* 2. `dateFormat`
|
|
28
|
+
* 2. `dateFormat`
|
|
29
29
|
* 3. `locale`
|
|
30
30
|
*
|
|
31
31
|
* `dateFormat` only wins when the input actually parses against it, otherwise
|
|
@@ -38,7 +38,7 @@ export var parseDate = function parseDate(date, di) {
|
|
|
38
38
|
if (parseInputValue) {
|
|
39
39
|
return parseInputValue(date, dateFormat || defaultDateFormat);
|
|
40
40
|
}
|
|
41
|
-
if (dateFormat
|
|
41
|
+
if (dateFormat) {
|
|
42
42
|
// date-fns uses the reference year to resolve two-digit years and fill
|
|
43
43
|
// omitted years. Use the current local date rather than the Unix epoch.
|
|
44
44
|
var referenceDate = fg('platform-dst-dp-current-reference-date') ? new Date() : new Date(0);
|
|
@@ -3,7 +3,7 @@ import type { LocalizationProvider } from '@atlaskit/locale/localization-provide
|
|
|
3
3
|
* There are props that can change how the date is parsed.
|
|
4
4
|
* The priority of props used is:
|
|
5
5
|
* 1. `parseInputValue`
|
|
6
|
-
* 2. `dateFormat`
|
|
6
|
+
* 2. `dateFormat`
|
|
7
7
|
* 3. `locale`
|
|
8
8
|
*
|
|
9
9
|
* `dateFormat` only wins when the input actually parses against it, otherwise
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "19.0.0",
|
|
4
4
|
"description": "A date time picker allows the user to select an associated date and time.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@atlaskit/analytics-next": "^12.5.0",
|
|
38
|
-
"@atlaskit/button": "^25.
|
|
38
|
+
"@atlaskit/button": "^25.4.0",
|
|
39
39
|
"@atlaskit/calendar": "^19.3.0",
|
|
40
40
|
"@atlaskit/css": "^1.1.0",
|
|
41
41
|
"@atlaskit/ds-lib": "^8.0.0",
|
|
42
|
-
"@atlaskit/icon": "^
|
|
43
|
-
"@atlaskit/layering": "^
|
|
42
|
+
"@atlaskit/icon": "^38.0.0",
|
|
43
|
+
"@atlaskit/layering": "^6.0.0",
|
|
44
44
|
"@atlaskit/locale": "^5.3.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
46
46
|
"@atlaskit/popper": "^9.4.0",
|
|
47
47
|
"@atlaskit/primitives": "^22.5.0",
|
|
48
48
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
49
|
-
"@atlaskit/react-select": "^4.
|
|
50
|
-
"@atlaskit/select": "^
|
|
51
|
-
"@atlaskit/tokens": "^
|
|
52
|
-
"@atlaskit/top-layer": "^
|
|
49
|
+
"@atlaskit/react-select": "^4.10.0",
|
|
50
|
+
"@atlaskit/select": "^23.0.0",
|
|
51
|
+
"@atlaskit/tokens": "^20.0.0",
|
|
52
|
+
"@atlaskit/top-layer": "^6.0.0",
|
|
53
53
|
"@babel/runtime": "^7.0.0",
|
|
54
54
|
"@compiled/react": "^1.0.2",
|
|
55
55
|
"date-fns": "^2.17.0"
|
|
@@ -61,13 +61,13 @@
|
|
|
61
61
|
"@af/accessibility-testing": "workspace:^",
|
|
62
62
|
"@af/integration-testing": "workspace:^",
|
|
63
63
|
"@af/visual-regression": "workspace:^",
|
|
64
|
-
"@atlaskit/code": "^
|
|
64
|
+
"@atlaskit/code": "^20.0.0",
|
|
65
65
|
"@atlaskit/codemod-utils": "^5.1.0",
|
|
66
66
|
"@atlaskit/docs": "^12.2.0",
|
|
67
|
-
"@atlaskit/form": "^
|
|
68
|
-
"@atlaskit/heading": "^
|
|
67
|
+
"@atlaskit/form": "^18.0.0",
|
|
68
|
+
"@atlaskit/heading": "^8.0.0",
|
|
69
69
|
"@atlaskit/link": "^5.1.0",
|
|
70
|
-
"@atlaskit/modal-dialog": "^
|
|
70
|
+
"@atlaskit/modal-dialog": "^17.0.0",
|
|
71
71
|
"@atlaskit/popup": "^6.3.0",
|
|
72
72
|
"@atlaskit/range": "^12.2.0",
|
|
73
73
|
"@atlaskit/section-message": "^10.2.0",
|
|
@@ -94,9 +94,6 @@
|
|
|
94
94
|
"platform-dst-dp-current-reference-date": {
|
|
95
95
|
"type": "boolean"
|
|
96
96
|
},
|
|
97
|
-
"platform-dst-dp-parse-date-format": {
|
|
98
|
-
"type": "boolean"
|
|
99
|
-
},
|
|
100
97
|
"platform-dst-locale-week-start-day": {
|
|
101
98
|
"type": "boolean"
|
|
102
99
|
}
|