@atlaskit/datetime-picker 17.4.5 → 17.5.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 (33) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/date-picker.js +614 -8
  3. package/dist/cjs/components/date-time-picker-class.js +2 -8
  4. package/dist/cjs/components/date-time-picker-fc.js +2 -8
  5. package/dist/es2019/components/date-picker.js +546 -6
  6. package/dist/es2019/components/date-time-picker-class.js +1 -5
  7. package/dist/es2019/components/date-time-picker-fc.js +1 -5
  8. package/dist/esm/components/date-picker.js +613 -8
  9. package/dist/esm/components/date-time-picker-class.js +1 -7
  10. package/dist/esm/components/date-time-picker-fc.js +1 -7
  11. package/dist/types/components/date-picker.d.ts +18 -3
  12. package/dist/types/components/date-time-picker-class.d.ts +10 -10
  13. package/dist/types/components/date-time-picker.d.ts +8 -8
  14. package/dist/types-ts4.5/components/date-picker.d.ts +18 -3
  15. package/dist/types-ts4.5/components/date-time-picker-class.d.ts +10 -10
  16. package/dist/types-ts4.5/components/date-time-picker.d.ts +8 -8
  17. package/package.json +1 -1
  18. package/dist/cjs/components/date-picker-class.js +0 -658
  19. package/dist/cjs/components/date-picker-fc.js +0 -622
  20. package/dist/es2019/components/date-picker-class.js +0 -623
  21. package/dist/es2019/components/date-picker-fc.compiled.css +0 -16
  22. package/dist/es2019/components/date-picker-fc.js +0 -547
  23. package/dist/esm/components/date-picker-class.compiled.css +0 -16
  24. package/dist/esm/components/date-picker-class.js +0 -652
  25. package/dist/esm/components/date-picker-fc.compiled.css +0 -16
  26. package/dist/esm/components/date-picker-fc.js +0 -614
  27. package/dist/types/components/date-picker-class.d.ts +0 -109
  28. package/dist/types/components/date-picker-fc.d.ts +0 -19
  29. package/dist/types-ts4.5/components/date-picker-class.d.ts +0 -109
  30. package/dist/types-ts4.5/components/date-picker-fc.d.ts +0 -19
  31. /package/dist/cjs/components/{date-picker-class.compiled.css → date-picker.compiled.css} +0 -0
  32. /package/dist/{cjs/components/date-picker-fc.compiled.css → es2019/components/date-picker.compiled.css} +0 -0
  33. /package/dist/{es2019/components/date-picker-class.compiled.css → esm/components/date-picker.compiled.css} +0 -0
@@ -1,623 +0,0 @@
1
- /* date-picker-class.tsx generated by @compiled/babel-plugin v0.38.1 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
- import "./date-picker-class.compiled.css";
5
- import * as React from 'react';
6
- import { ax, ix } from "@compiled/react/runtime";
7
- /// <reference types="node" />
8
- import { Component, createRef } from 'react';
9
- import { isValid, parseISO } from 'date-fns';
10
- import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
11
- import { IconButton } from '@atlaskit/button/new';
12
- import { cx } from '@atlaskit/css';
13
- import { IdProvider } from '@atlaskit/ds-lib/use-id';
14
- import CalendarIcon from '@atlaskit/icon/core/calendar';
15
- import { createLocalizationProvider } from '@atlaskit/locale';
16
- import { Box } from '@atlaskit/primitives/compiled';
17
- import Select, { mergeStyles } from '@atlaskit/select';
18
- import { EmptyComponent } from '../internal';
19
- import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
20
- import { IndicatorsContainer } from '../internal/indicators-container';
21
- import { Menu } from '../internal/menu';
22
- import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
23
- import { makeSingleValue } from '../internal/single-value';
24
- const packageName = "@atlaskit/datetime-picker";
25
- const packageVersion = "0.0.0-development";
26
- const datePickerDefaultProps = {
27
- defaultIsOpen: false,
28
- defaultValue: '',
29
- disabled: [],
30
- disabledDateFilter: _ => false,
31
- locale: 'en-US',
32
- // These disables are here for proper typing when used as defaults. They
33
- // should *not* use the `noop` function.
34
- /* eslint-disable @repo/internal/react/use-noop */
35
- onBlur: _event => {},
36
- onChange: _value => {},
37
- onFocus: _event => {}
38
- /* eslint-enable @repo/internal/react/use-noop */
39
- // Not including a default prop for value as it will
40
- // Make the component a controlled component
41
- };
42
- const styles = {
43
- pickerContainerStyles: "_kqswh2mm",
44
- iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz1rpy _152tze3t _rjxpze3t _30l3azsu",
45
- iconSpacingWithClearButtonStyles: "_12l2xy5q",
46
- iconSpacingWithoutClearButtonStyles: "_12l21b66",
47
- dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o"
48
- };
49
-
50
- // eslint-disable-next-line @repo/internal/react/no-class-components
51
- class DatePickerComponent extends Component {
52
- constructor(props) {
53
- var _this$props$selectPro2;
54
- super(props);
55
- _defineProperty(this, "containerRef", null);
56
- _defineProperty(this, "calendarRef", /*#__PURE__*/createRef());
57
- _defineProperty(this, "calendarButtonRef", /*#__PURE__*/createRef());
58
- // All state needs to be accessed via this function so that the state is mapped from props
59
- // correctly to allow controlled/uncontrolled usage.
60
- _defineProperty(this, "getValue", () => {
61
- var _this$props$value;
62
- return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
63
- });
64
- _defineProperty(this, "getIsOpen", () => {
65
- var _this$props$isOpen;
66
- return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
67
- });
68
- _defineProperty(this, "onCalendarChange", ({
69
- iso
70
- }) => {
71
- this.setState({
72
- calendarValue: getParsedISO({
73
- iso
74
- })
75
- });
76
- });
77
- _defineProperty(this, "onCalendarSelect", ({
78
- iso
79
- }) => {
80
- this.setState({
81
- selectInputValue: '',
82
- isOpen: false,
83
- calendarValue: iso,
84
- value: iso,
85
- wasOpenedFromCalendarButton: false
86
- });
87
- this.props.onChange(iso);
88
-
89
- // Yes, this is not ideal. The alternative is to be able to place a ref
90
- // on the inner input of Select itself, which would require a lot of
91
- // extra stuff in the Select component for only this one thing. While
92
- // this would be more "React-y", it doesn't seem to pose any other
93
- // benefits. Performance-wise, we are only searching within the
94
- // container, so it's quick.
95
- if (this.state.wasOpenedFromCalendarButton) {
96
- var _this$calendarButtonR;
97
- (_this$calendarButtonR = this.calendarButtonRef.current) === null || _this$calendarButtonR === void 0 ? void 0 : _this$calendarButtonR.focus();
98
- } else {
99
- var _this$containerRef;
100
- const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
101
- innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
102
- }
103
- this.setState({
104
- isOpen: false
105
- });
106
- });
107
- _defineProperty(this, "onInputClick", () => {
108
- if (!this.props.isDisabled && !this.getIsOpen()) {
109
- this.setState({
110
- isOpen: true,
111
- wasOpenedFromCalendarButton: false
112
- });
113
- }
114
- });
115
- _defineProperty(this, "onContainerBlur", event => {
116
- var _this$containerRef2;
117
- const newlyFocusedElement = event.relatedTarget;
118
- if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
119
- this.setState({
120
- isOpen: false,
121
- shouldSetFocusOnCurrentDay: false,
122
- wasOpenedFromCalendarButton: false
123
- });
124
- this.props.onBlur(event);
125
- }
126
- });
127
- _defineProperty(this, "onContainerFocus", () => {
128
- this.setState({
129
- shouldSetFocusOnCurrentDay: false
130
- });
131
- });
132
- _defineProperty(this, "onSelectBlur", event => {
133
- var _this$containerRef3;
134
- const newlyFocusedElement = event.relatedTarget;
135
- if (this.state.clearingFromIcon) {
136
- // Don't close menu if blurring after the user has clicked clear
137
- this.setState({
138
- clearingFromIcon: false
139
- });
140
- } else if (!((_this$containerRef3 = this.containerRef) !== null && _this$containerRef3 !== void 0 && _this$containerRef3.contains(newlyFocusedElement))) {
141
- // Don't close menu if focus is staying within the date picker's
142
- // container. Makes keyboard accessibility of calendar possible
143
- this.setState({
144
- isOpen: false,
145
- isFocused: false,
146
- wasOpenedFromCalendarButton: false
147
- });
148
- }
149
- });
150
- _defineProperty(this, "onSelectFocus", event => {
151
- const {
152
- clearingFromIcon
153
- } = this.state;
154
- const value = this.getValue();
155
- if (clearingFromIcon) {
156
- // Don't open menu if focussing after the user has clicked clear
157
- this.setState({
158
- clearingFromIcon: false
159
- });
160
- } else {
161
- this.setState({
162
- // Don't open when focused into via keyboard if the calendar button is present
163
- isOpen: !this.props.shouldShowCalendarButton,
164
- calendarValue: value,
165
- isFocused: true,
166
- wasOpenedFromCalendarButton: false
167
- });
168
- }
169
- this.props.onFocus(event);
170
- });
171
- _defineProperty(this, "onTextInput", event => {
172
- const inputValue = event.target.value;
173
- if (inputValue) {
174
- const parsed = parseDate(inputValue, {
175
- parseInputValue: this.props.parseInputValue,
176
- dateFormat: this.props.dateFormat,
177
- l10n: this.state.l10n
178
- });
179
- // Only try to set the date if we have month & day
180
- if (parsed && isValid(parsed)) {
181
- // We format the parsed date to YYYY-MM-DD here because
182
- // this is the format expected by the @atlaskit/calendar component
183
- this.setState({
184
- calendarValue: getShortISOString(parsed)
185
- });
186
- }
187
- }
188
- this.setState({
189
- isOpen: true,
190
- wasOpenedFromCalendarButton: false
191
- });
192
- });
193
- _defineProperty(this, "onInputKeyDown", event => {
194
- const {
195
- calendarValue
196
- } = this.state;
197
- const value = this.getValue();
198
- const keyPressed = event.key.toLowerCase();
199
-
200
- // If the input is focused and the calendar is not visible, handle space and enter clicks
201
- if (!this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
202
- this.setState({
203
- isOpen: true,
204
- wasOpenedFromCalendarButton: false
205
- });
206
- }
207
- switch (keyPressed) {
208
- case 'escape':
209
- // Yes, this is not ideal. The alternative is to be able to place a ref
210
- // on the inner input of Select itself, which would require a lot of
211
- // extra stuff in the Select component for only this one thing. While
212
- // this would be more "React-y", it doesn't seem to pose any other
213
- // benefits. Performance-wise, we are only searching within the
214
- // container, so it's quick.
215
- if (this.state.wasOpenedFromCalendarButton) {
216
- var _this$calendarButtonR2;
217
- (_this$calendarButtonR2 = this.calendarButtonRef.current) === null || _this$calendarButtonR2 === void 0 ? void 0 : _this$calendarButtonR2.focus();
218
- } else {
219
- var _this$containerRef4;
220
- const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
221
- innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
222
- }
223
- this.setState({
224
- isOpen: false,
225
- shouldSetFocusOnCurrentDay: false,
226
- wasOpenedFromCalendarButton: false
227
- });
228
- break;
229
- case 'backspace':
230
- case 'delete':
231
- {
232
- const inputCount = 0;
233
- if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
234
- // If being cleared from keyboard, don't change behaviour
235
- this.setState({
236
- clearingFromIcon: false,
237
- value: ''
238
- });
239
- }
240
- break;
241
- }
242
- case 'enter':
243
- if (!this.state.isOpen) {
244
- return;
245
- }
246
- // Prevent form submission when a date is selected
247
- // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
248
- // for more details.
249
- event.preventDefault();
250
- if (!isDateDisabled(calendarValue, {
251
- disabled: this.props.disabled
252
- })) {
253
- // Get a safe `calendarValue` in case the value exceeds the maximum
254
- // allowed by ISO 8601
255
- const safeCalendarValue = getSafeCalendarValue(calendarValue);
256
- const valueChanged = safeCalendarValue !== value;
257
- this.setState({
258
- selectInputValue: '',
259
- isOpen: false,
260
- value: safeCalendarValue,
261
- calendarValue: safeCalendarValue,
262
- wasOpenedFromCalendarButton: false
263
- });
264
- if (valueChanged) {
265
- this.props.onChange(safeCalendarValue);
266
- }
267
- }
268
- break;
269
- case 'arrowdown':
270
- case 'arrowup':
271
- if (!this.state.shouldSetFocusOnCurrentDay) {
272
- this.setState({
273
- isOpen: true,
274
- shouldSetFocusOnCurrentDay: true
275
- });
276
- }
277
- break;
278
- default:
279
- break;
280
- }
281
- });
282
- _defineProperty(this, "onCalendarButtonKeyDown", e => {
283
- // Don't allow an arrow up or down to open the menu, since the input key
284
- // down handler is actually on the parent.
285
- if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
286
- e.stopPropagation();
287
- }
288
- // We want to stop this from triggering other keydown events, particularly
289
- // for space and enter presses. Otherwise, it opens and then closes
290
- // immediately.
291
- if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
292
- e.stopPropagation();
293
- this.setState({
294
- isKeyDown: true,
295
- wasOpenedFromCalendarButton: true
296
- });
297
- }
298
- });
299
- // This event handler is triggered from both keydown and click. It's weird.
300
- _defineProperty(this, "onCalendarButtonClick", e => {
301
- this.setState({
302
- isOpen: !this.state.isOpen,
303
- wasOpenedFromCalendarButton: true
304
- }, () => {
305
- var _this$calendarRef, _this$calendarRef$cur, _this$calendarRef$cur2;
306
- // We don't want the focus to move if this is a click event
307
- if (!this.state.isKeyDown) {
308
- return;
309
- }
310
- this.setState({
311
- isKeyDown: false
312
- });
313
-
314
- // Focus on the first button within the calendar
315
- (_this$calendarRef = this.calendarRef) === null || _this$calendarRef === void 0 ? void 0 : (_this$calendarRef$cur = _this$calendarRef.current) === null || _this$calendarRef$cur === void 0 ? void 0 : (_this$calendarRef$cur2 = _this$calendarRef$cur.querySelector('button')) === null || _this$calendarRef$cur2 === void 0 ? void 0 : _this$calendarRef$cur2.focus();
316
- });
317
- e.stopPropagation();
318
- });
319
- _defineProperty(this, "onClear", () => {
320
- let changedState = {
321
- value: '',
322
- calendarValue: this.props.defaultValue || getShortISOString(new Date())
323
- };
324
- if (!this.props.hideIcon) {
325
- changedState = {
326
- ...changedState,
327
- clearingFromIcon: true
328
- };
329
- }
330
- this.setState(changedState);
331
- this.props.onChange('');
332
- });
333
- // `unknown` is used because `value` is unused so it does not matter.
334
- _defineProperty(this, "onSelectChange", (_value, action) => {
335
- // Used for native clear event in React Select
336
- // Triggered when clicking ClearIndicator or backspace with no value
337
- if (action.action === 'clear') {
338
- this.onClear();
339
- }
340
- });
341
- _defineProperty(this, "handleSelectInputChange", (selectInputValue, actionMeta) => {
342
- var _this$props$selectPro;
343
- const onInputChange = (_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.onInputChange;
344
- if (onInputChange) {
345
- onInputChange(selectInputValue, actionMeta);
346
- }
347
- this.setState({
348
- selectInputValue
349
- });
350
- });
351
- _defineProperty(this, "getContainerRef", ref => {
352
- const oldRef = this.containerRef;
353
- this.containerRef = ref;
354
- // Cause a re-render if we're getting the container ref for the first time
355
- // as the layered menu requires it for dimension calculation
356
- if (oldRef == null && ref != null) {
357
- this.forceUpdate();
358
- }
359
- });
360
- this.state = {
361
- isKeyDown: false,
362
- isOpen: this.props.defaultIsOpen,
363
- isFocused: false,
364
- clearingFromIcon: false,
365
- selectInputValue: ((_this$props$selectPro2 = this.props.selectProps) === null || _this$props$selectPro2 === void 0 ? void 0 : _this$props$selectPro2.inputValue) || '',
366
- value: this.props.value || this.props.defaultValue,
367
- calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
368
- l10n: createLocalizationProvider(this.props.locale),
369
- locale: this.props.locale,
370
- shouldSetFocusOnCurrentDay: false,
371
- wasOpenedFromCalendarButton: false
372
- };
373
- }
374
- static getDerivedStateFromProps(nextProps, prevState) {
375
- if (nextProps.locale !== prevState.locale) {
376
- return {
377
- l10n: createLocalizationProvider(nextProps.locale),
378
- locale: nextProps.locale
379
- };
380
- } else {
381
- return null;
382
- }
383
- }
384
- render() {
385
- const {
386
- appearance = 'default',
387
- 'aria-describedby': ariaDescribedBy,
388
- autoFocus = false,
389
- clearControlLabel = 'Clear',
390
- hideIcon = false,
391
- openCalendarLabel = 'Open calendar',
392
- disabled,
393
- disabledDateFilter,
394
- icon: Icon = CalendarIcon,
395
- id = '',
396
- innerProps = {},
397
- inputLabel = 'Date picker',
398
- inputLabelId,
399
- isDisabled = false,
400
- isInvalid = false,
401
- isRequired = false,
402
- label = '',
403
- locale,
404
- maxDate,
405
- minDate,
406
- name = '',
407
- nextMonthLabel,
408
- previousMonthLabel,
409
- selectProps = {},
410
- shouldShowCalendarButton,
411
- spacing = 'default',
412
- testId,
413
- weekStartDay
414
- } = this.props;
415
- const {
416
- calendarValue,
417
- selectInputValue
418
- } = this.state;
419
- const value = this.getValue();
420
- let actualSelectInputValue;
421
- actualSelectInputValue = selectInputValue;
422
- const menuIsOpen = this.getIsOpen() && !isDisabled;
423
- const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
424
- let clearIndicator = props => /*#__PURE__*/React.createElement(Box, {
425
- xcss: styles.dropdownIndicatorStyles
426
- }, /*#__PURE__*/React.createElement(Icon, props));
427
- const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
428
- const selectComponents = {
429
- DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
430
- // Only use this new container component if the calendar button is shown.
431
- // Otherwise, it throws errors downstream for some reason
432
- ...(shouldShowCalendarButton ? {
433
- IndicatorsContainer: props => /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, props, {
434
- showClearIndicator: showClearIndicator
435
- }))
436
- } : {}),
437
- Menu,
438
- // SingleValue is defined in the render because of UI generator limitations
439
- ...(!showClearIndicator && {
440
- ClearIndicator: EmptyComponent
441
- }),
442
- ...selectProps.components
443
- };
444
- const {
445
- styles: selectStyles = {}
446
- } = selectProps;
447
- const disabledStyle = isDisabled ? {
448
- pointerEvents: 'none',
449
- color: "var(--ds-icon-disabled, inherit)"
450
- } : {};
451
- const calendarProps = {
452
- calendarContainerRef: this.containerRef,
453
- calendarDisabled: disabled,
454
- calendarDisabledDateFilter: disabledDateFilter,
455
- calendarMaxDate: maxDate,
456
- calendarMinDate: minDate,
457
- calendarRef: this.calendarRef,
458
- calendarValue: value && getShortISOString(parseISO(value)),
459
- calendarView: calendarValue,
460
- onCalendarChange: this.onCalendarChange,
461
- onCalendarSelect: this.onCalendarSelect,
462
- calendarLocale: locale,
463
- calendarWeekStartDay: weekStartDay,
464
- shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay,
465
- menuInnerWrapper: this.props.menuInnerWrapper
466
- };
467
-
468
- // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
469
- const mergedStyles = mergeStyles(selectStyles, {
470
- control: base => ({
471
- ...base,
472
- ...disabledStyle
473
- }),
474
- indicatorsContainer: base => ({
475
- ...base,
476
- paddingLeft: "var(--ds-space-025, 2px)",
477
- // ICON_PADDING = 2
478
- paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
479
- })
480
- });
481
- const initialValue = value ? {
482
- label: formatDate(value, {
483
- formatDisplayLabel: this.props.formatDisplayLabel,
484
- dateFormat: this.props.dateFormat,
485
- l10n: this.state.l10n
486
- }),
487
- value
488
- } : null;
489
-
490
- // `label` takes precedence of the `inputLabel`
491
- const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}, ${openCalendarLabel}` : openCalendarLabel;
492
- return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
493
- // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
494
- role: "presentation",
495
- onBlur: this.onContainerBlur,
496
- onFocus: this.onContainerFocus,
497
- onClick: this.onInputClick,
498
- onInput: this.onTextInput,
499
- onKeyDown: this.onInputKeyDown,
500
- ref: this.getContainerRef,
501
- "data-testid": testId && `${testId}--container`,
502
- className: ax([styles.pickerContainerStyles])
503
- }), /*#__PURE__*/React.createElement("input", {
504
- name: name,
505
- type: "hidden",
506
- value: value,
507
- "data-testid": testId && `${testId}--input`
508
- }), /*#__PURE__*/React.createElement(IdProvider, null, ({
509
- id: valueId
510
- }) => /*#__PURE__*/React.createElement(Select, _extends({
511
- appearance: this.props.appearance,
512
- "aria-describedby": ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId,
513
- label: label || undefined,
514
- autoFocus: autoFocus,
515
- clearControlLabel: clearControlLabel,
516
- closeMenuOnSelect: true,
517
- enableAnimation: false,
518
- inputId: id,
519
- inputValue: actualSelectInputValue,
520
- isDisabled: isDisabled,
521
- isRequired: isRequired,
522
- menuIsOpen: menuIsOpen,
523
- onBlur: this.onSelectBlur,
524
- onChange: this.onSelectChange,
525
- onFocus: this.onSelectFocus,
526
- onInputChange: this.handleSelectInputChange,
527
- placeholder: getPlaceholder({
528
- placeholder: this.props.placeholder,
529
- l10n: this.state.l10n
530
- })
531
- // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'
532
- ,
533
- styles: mergedStyles,
534
- value: initialValue
535
- }, selectProps, {
536
- // For some reason, this and the below `styles` type error _only_ show
537
- // up when you alter some of the properties in the `selectComponents`
538
- // object. These errors are still present, and I suspect have always
539
- // been present, without changing the unrelated code. Ignoring as the
540
- // component still works as expected despite this error. And also
541
- // because the select refresh team may solve it later.
542
- components: {
543
- ...selectComponents,
544
- SingleValue: makeSingleValue({
545
- id: valueId,
546
- lang: this.props.locale
547
- })
548
- }
549
- // These are below the spread because I don't know what is in
550
- // selectProps or not and what wil be overwritten
551
- ,
552
- isClearable: true,
553
- isInvalid: isInvalid,
554
- spacing: spacing,
555
- testId: testId
556
- // These aren't part of `Select`'s API, but we're using them here.
557
- // @ts-ignore -- Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
558
- ,
559
- calendarContainerRef: calendarProps.calendarContainerRef,
560
- calendarDisabled: calendarProps.calendarDisabled,
561
- calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
562
- calendarLocale: calendarProps.calendarLocale,
563
- calendarMaxDate: calendarProps.calendarMaxDate,
564
- calendarMinDate: calendarProps.calendarMinDate,
565
- calendarRef: calendarProps.calendarRef,
566
- calendarValue: calendarProps.calendarValue,
567
- calendarView: calendarProps.calendarView,
568
- calendarWeekStartDay: calendarProps.calendarWeekStartDay,
569
- nextMonthLabel: nextMonthLabel,
570
- onCalendarChange: calendarProps.onCalendarChange,
571
- onCalendarSelect: calendarProps.onCalendarSelect,
572
- previousMonthLabel: previousMonthLabel,
573
- shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
574
- menuInnerWrapper: calendarProps.menuInnerWrapper
575
- }))), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
576
- prefix: "open-calendar-label--"
577
- }, ({
578
- id: openCalendarLabelId
579
- }) => /*#__PURE__*/React.createElement(Box, {
580
- xcss: cx(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
581
- }, /*#__PURE__*/React.createElement(IconButton, {
582
- appearance: "subtle",
583
- label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
584
- "aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
585
- id: openCalendarLabelId,
586
- icon: iconProps => /*#__PURE__*/React.createElement(CalendarIcon, _extends({}, iconProps, {
587
- color: "var(--ds-icon, #292A2E)"
588
- })),
589
- onClick: this.onCalendarButtonClick,
590
- onKeyDown: this.onCalendarButtonKeyDown,
591
- ref: this.calendarButtonRef,
592
- testId: testId && `${testId}--open-calendar-button`
593
- }))) : null);
594
- }
595
- }
596
- _defineProperty(DatePickerComponent, "defaultProps", datePickerDefaultProps);
597
- export { DatePickerComponent as DatePickerWithoutAnalytics };
598
-
599
- /**
600
- * __Date picker__
601
- *
602
- * A date picker allows the user to select a particular date.
603
- *
604
- * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
605
- * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
606
- * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
607
- */
608
- const DatePicker = withAnalyticsContext({
609
- componentName: 'datePicker',
610
- packageName,
611
- packageVersion
612
- })(withAnalyticsEvents({
613
- onChange: createAndFireEvent('atlaskit')({
614
- action: 'selectedDate',
615
- actionSubject: 'datePicker',
616
- attributes: {
617
- componentName: 'datePicker',
618
- packageName,
619
- packageVersion
620
- }
621
- })
622
- })(DatePickerComponent));
623
- export default DatePicker;
@@ -1,16 +0,0 @@
1
-
2
- ._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
3
- ._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
4
- ._152tze3t{inset-block-start:var(--ds-space-0,0)}
5
- ._1bah1h6o{justify-content:center}
6
- ._1e0c1txw{display:flex}
7
- ._1tke1k8s{min-height:1.5rem}
8
- ._1ul91k8s{min-width:1.5rem}
9
- ._4cvr1h6o{align-items:center}
10
- ._4t3i1osq{height:100%}
11
- ._i0dl1kw7{flex-basis:inherit}
12
- ._kqswh2mm{position:relative}
13
- ._kqswstnw{position:absolute}
14
- ._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
15
- ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
16
- ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}