@atlaskit/datetime-picker 13.0.4 → 13.0.5
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 +6 -0
- package/dist/cjs/components/date-picker.js +2 -5
- package/dist/cjs/components/date-time-picker.js +11 -9
- package/dist/cjs/components/time-picker.js +2 -5
- package/dist/es2019/components/date-picker.js +2 -5
- package/dist/es2019/components/date-time-picker.js +11 -9
- package/dist/es2019/components/time-picker.js +2 -5
- package/dist/esm/components/date-picker.js +2 -5
- package/dist/esm/components/date-time-picker.js +11 -9
- package/dist/esm/components/time-picker.js +2 -5
- package/dist/types/components/date-picker.d.ts +2 -2
- package/dist/types/components/date-time-picker.d.ts +2 -2
- package/dist/types/components/time-picker.d.ts +2 -2
- package/dist/types-ts4.5/components/date-picker.d.ts +2 -2
- package/dist/types-ts4.5/components/date-time-picker.d.ts +2 -2
- package/dist/types-ts4.5/components/time-picker.d.ts +2 -2
- package/package.json +3 -3
- package/dist/cjs/internal/clear-button.js +0 -47
- package/dist/cjs/internal/clear-indicator.js +0 -37
- package/dist/es2019/internal/clear-button.js +0 -38
- package/dist/es2019/internal/clear-indicator.js +0 -31
- package/dist/esm/internal/clear-button.js +0 -39
- package/dist/esm/internal/clear-indicator.js +0 -32
- package/dist/types/internal/clear-button.d.ts +0 -17
- package/dist/types/internal/clear-indicator.d.ts +0 -10
- package/dist/types-ts4.5/internal/clear-button.d.ts +0 -17
- package/dist/types-ts4.5/internal/clear-indicator.d.ts +0 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 13.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#61141](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61141) [`57a79a328287`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57a79a328287) - Revert the solution with the hidden span in the Label which was merged in scope of DST-11061.
|
|
8
|
+
|
|
3
9
|
## 13.0.4
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -29,7 +29,6 @@ var _select = _interopRequireWildcard(require("@atlaskit/select"));
|
|
|
29
29
|
var _colors = require("@atlaskit/theme/colors");
|
|
30
30
|
var _constants = require("@atlaskit/theme/constants");
|
|
31
31
|
var _internal = require("../internal");
|
|
32
|
-
var _clearIndicator = _interopRequireDefault(require("../internal/clear-indicator"));
|
|
33
32
|
var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
|
|
34
33
|
var _singleValue = require("../internal/single-value");
|
|
35
34
|
var _utils = require("./utils");
|
|
@@ -40,7 +39,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
40
39
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
41
40
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
42
41
|
var packageName = "@atlaskit/datetime-picker";
|
|
43
|
-
var packageVersion = "13.0.
|
|
42
|
+
var packageVersion = "13.0.5";
|
|
44
43
|
function getValidDate(iso) {
|
|
45
44
|
var date = (0, _dateFns.parseISO)(iso);
|
|
46
45
|
return (0, _dateFns.isValid)(date) ? {
|
|
@@ -440,9 +439,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
440
439
|
DropdownIndicator: dropDownIcon,
|
|
441
440
|
Menu: Menu,
|
|
442
441
|
SingleValue: SingleValue
|
|
443
|
-
}, showClearIndicator
|
|
444
|
-
ClearIndicator: _clearIndicator.default
|
|
445
|
-
} : {
|
|
442
|
+
}, !showClearIndicator && {
|
|
446
443
|
ClearIndicator: _internal.EmptyComponent
|
|
447
444
|
});
|
|
448
445
|
var _selectProps$styles = selectProps.styles,
|
|
@@ -18,11 +18,11 @@ var _react2 = require("@emotion/react");
|
|
|
18
18
|
var _dateFns = require("date-fns");
|
|
19
19
|
var _pick = _interopRequireDefault(require("lodash/pick"));
|
|
20
20
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
21
|
+
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
|
|
21
22
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
23
|
var _select = require("@atlaskit/select");
|
|
23
24
|
var _colors = require("@atlaskit/theme/colors");
|
|
24
25
|
var _internal = require("../internal");
|
|
25
|
-
var _clearButton = _interopRequireDefault(require("../internal/clear-button"));
|
|
26
26
|
var _datePicker = _interopRequireDefault(require("./date-picker"));
|
|
27
27
|
var _timePicker = _interopRequireDefault(require("./time-picker"));
|
|
28
28
|
var _utils = require("./utils");
|
|
@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
31
31
|
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; }
|
|
32
32
|
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; } /** @jsx jsx */
|
|
33
33
|
var packageName = "@atlaskit/datetime-picker";
|
|
34
|
-
var packageVersion = "13.0.
|
|
34
|
+
var packageVersion = "13.0.5";
|
|
35
35
|
var isInvalidBorderStyles = (0, _react2.css)({
|
|
36
36
|
borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
|
|
37
37
|
});
|
|
@@ -305,11 +305,9 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
|
|
|
305
305
|
// Don't use Date or TimePicker's because they can't be customised
|
|
306
306
|
var isClearable = Boolean(dateValue || timeValue);
|
|
307
307
|
var notFocusedOrIsDisabled = !(isFocused || isDisabled);
|
|
308
|
-
var ariaLabelledbyId = id && "label--".concat(id);
|
|
309
308
|
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
310
309
|
css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
|
|
311
310
|
}, innerProps, {
|
|
312
|
-
"aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
|
|
313
311
|
"data-testid": testId
|
|
314
312
|
}), (0, _react2.jsx)("input", {
|
|
315
313
|
name: name,
|
|
@@ -340,13 +338,17 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
|
|
|
340
338
|
timeFormat: timeFormat,
|
|
341
339
|
locale: locale,
|
|
342
340
|
testId: testId && "".concat(testId, "--timepicker")
|
|
343
|
-
}, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)(
|
|
344
|
-
|
|
345
|
-
buttonStyles: iconContainerStyles,
|
|
341
|
+
}, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
|
|
342
|
+
css: iconContainerStyles,
|
|
346
343
|
onClick: this.onClear,
|
|
347
344
|
"data-testid": testId && "".concat(testId, "--icon--container"),
|
|
348
|
-
|
|
349
|
-
|
|
345
|
+
tabIndex: -1,
|
|
346
|
+
type: "button"
|
|
347
|
+
}, (0, _react2.jsx)(_selectClear.default, {
|
|
348
|
+
size: "small",
|
|
349
|
+
primaryColor: "inherit",
|
|
350
|
+
label: "clear"
|
|
351
|
+
})) : null);
|
|
350
352
|
}
|
|
351
353
|
}]);
|
|
352
354
|
return DateTimePicker;
|
|
@@ -23,7 +23,6 @@ var _locale = require("@atlaskit/locale");
|
|
|
23
23
|
var _select = _interopRequireWildcard(require("@atlaskit/select"));
|
|
24
24
|
var _constants = require("@atlaskit/theme/constants");
|
|
25
25
|
var _internal = require("../internal");
|
|
26
|
-
var _clearIndicator = _interopRequireDefault(require("../internal/clear-indicator"));
|
|
27
26
|
var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
|
|
28
27
|
var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
|
|
29
28
|
var _singleValue = require("../internal/single-value");
|
|
@@ -38,7 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
38
37
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
39
38
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
40
39
|
var packageName = "@atlaskit/datetime-picker";
|
|
41
|
-
var packageVersion = "13.0.
|
|
40
|
+
var packageVersion = "13.0.5";
|
|
42
41
|
var menuStyles = {
|
|
43
42
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
44
43
|
position: 'static',
|
|
@@ -280,10 +279,8 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
|
|
|
280
279
|
DropdownIndicator: _internal.EmptyComponent,
|
|
281
280
|
Menu: FixedLayerMenu,
|
|
282
281
|
SingleValue: SingleValue
|
|
283
|
-
}, hideIcon
|
|
282
|
+
}, hideIcon && {
|
|
284
283
|
ClearIndicator: _internal.EmptyComponent
|
|
285
|
-
} : {
|
|
286
|
-
ClearIndicator: _clearIndicator.default
|
|
287
284
|
});
|
|
288
285
|
var renderIconContainer = Boolean(!hideIcon && value);
|
|
289
286
|
var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
|
|
@@ -15,12 +15,11 @@ import Select, { mergeStyles } from '@atlaskit/select';
|
|
|
15
15
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
16
16
|
import { layers } from '@atlaskit/theme/constants';
|
|
17
17
|
import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
|
|
18
|
-
import ClearIndicator from '../internal/clear-indicator';
|
|
19
18
|
import FixedLayer from '../internal/fixed-layer';
|
|
20
19
|
import { makeSingleValue } from '../internal/single-value';
|
|
21
20
|
import { convertTokens } from './utils';
|
|
22
21
|
const packageName = "@atlaskit/datetime-picker";
|
|
23
|
-
const packageVersion = "13.0.
|
|
22
|
+
const packageVersion = "13.0.5";
|
|
24
23
|
function getValidDate(iso) {
|
|
25
24
|
const date = parseISO(iso);
|
|
26
25
|
return isValid(date) ? {
|
|
@@ -438,9 +437,7 @@ class DatePicker extends Component {
|
|
|
438
437
|
DropdownIndicator: dropDownIcon,
|
|
439
438
|
Menu,
|
|
440
439
|
SingleValue,
|
|
441
|
-
...(showClearIndicator
|
|
442
|
-
ClearIndicator: ClearIndicator
|
|
443
|
-
} : {
|
|
440
|
+
...(!showClearIndicator && {
|
|
444
441
|
ClearIndicator: EmptyComponent
|
|
445
442
|
})
|
|
446
443
|
};
|
|
@@ -6,16 +6,16 @@ import { css, jsx } from '@emotion/react';
|
|
|
6
6
|
import { format, isValid, parseISO } from 'date-fns';
|
|
7
7
|
import pick from 'lodash/pick';
|
|
8
8
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
9
|
+
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
9
10
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { mergeStyles } from '@atlaskit/select';
|
|
11
12
|
import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
|
|
12
13
|
import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
|
|
13
|
-
import ClearButton from '../internal/clear-button';
|
|
14
14
|
import DatePicker from './date-picker';
|
|
15
15
|
import TimePicker from './time-picker';
|
|
16
16
|
import { convertTokens } from './utils';
|
|
17
17
|
const packageName = "@atlaskit/datetime-picker";
|
|
18
|
-
const packageVersion = "13.0.
|
|
18
|
+
const packageVersion = "13.0.5";
|
|
19
19
|
const isInvalidBorderStyles = css({
|
|
20
20
|
borderColor: `var(--ds-border-danger, ${R400})`
|
|
21
21
|
});
|
|
@@ -291,11 +291,9 @@ class DateTimePicker extends React.Component {
|
|
|
291
291
|
// Don't use Date or TimePicker's because they can't be customised
|
|
292
292
|
const isClearable = Boolean(dateValue || timeValue);
|
|
293
293
|
const notFocusedOrIsDisabled = !(isFocused || isDisabled);
|
|
294
|
-
const ariaLabelledbyId = id && `label--${id}`;
|
|
295
294
|
return jsx("div", _extends({
|
|
296
295
|
css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
|
|
297
296
|
}, innerProps, {
|
|
298
|
-
"aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
|
|
299
297
|
"data-testid": testId
|
|
300
298
|
}), jsx("input", {
|
|
301
299
|
name: name,
|
|
@@ -326,13 +324,17 @@ class DateTimePicker extends React.Component {
|
|
|
326
324
|
timeFormat: timeFormat,
|
|
327
325
|
locale: locale,
|
|
328
326
|
testId: testId && `${testId}--timepicker`
|
|
329
|
-
}, timePickerProps))), isClearable && !isDisabled ? jsx(
|
|
330
|
-
|
|
331
|
-
buttonStyles: iconContainerStyles,
|
|
327
|
+
}, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
|
|
328
|
+
css: iconContainerStyles,
|
|
332
329
|
onClick: this.onClear,
|
|
333
330
|
"data-testid": testId && `${testId}--icon--container`,
|
|
334
|
-
|
|
335
|
-
|
|
331
|
+
tabIndex: -1,
|
|
332
|
+
type: "button"
|
|
333
|
+
}, jsx(SelectClearIcon, {
|
|
334
|
+
size: "small",
|
|
335
|
+
primaryColor: "inherit",
|
|
336
|
+
label: "clear"
|
|
337
|
+
})) : null);
|
|
336
338
|
}
|
|
337
339
|
}
|
|
338
340
|
_defineProperty(DateTimePicker, "defaultProps", dateTimePickerDefaultProps);
|
|
@@ -11,13 +11,12 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
|
|
|
11
11
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
12
12
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
13
13
|
import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
|
|
14
|
-
import ClearIndicator from '../internal/clear-indicator';
|
|
15
14
|
import FixedLayer from '../internal/fixed-layer';
|
|
16
15
|
import parseTime from '../internal/parse-time';
|
|
17
16
|
import { makeSingleValue } from '../internal/single-value';
|
|
18
17
|
import { convertTokens } from './utils';
|
|
19
18
|
const packageName = "@atlaskit/datetime-picker";
|
|
20
|
-
const packageVersion = "13.0.
|
|
19
|
+
const packageVersion = "13.0.5";
|
|
21
20
|
const menuStyles = {
|
|
22
21
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
23
22
|
position: 'static',
|
|
@@ -255,10 +254,8 @@ class TimePicker extends React.Component {
|
|
|
255
254
|
DropdownIndicator: EmptyComponent,
|
|
256
255
|
Menu: FixedLayerMenu,
|
|
257
256
|
SingleValue,
|
|
258
|
-
...(hideIcon
|
|
257
|
+
...(hideIcon && {
|
|
259
258
|
ClearIndicator: EmptyComponent
|
|
260
|
-
} : {
|
|
261
|
-
ClearIndicator: ClearIndicator
|
|
262
259
|
})
|
|
263
260
|
};
|
|
264
261
|
const renderIconContainer = Boolean(!hideIcon && value);
|
|
@@ -26,12 +26,11 @@ import Select, { mergeStyles } from '@atlaskit/select';
|
|
|
26
26
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
27
27
|
import { layers } from '@atlaskit/theme/constants';
|
|
28
28
|
import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
|
|
29
|
-
import ClearIndicator from '../internal/clear-indicator';
|
|
30
29
|
import FixedLayer from '../internal/fixed-layer';
|
|
31
30
|
import { makeSingleValue } from '../internal/single-value';
|
|
32
31
|
import { convertTokens } from './utils';
|
|
33
32
|
var packageName = "@atlaskit/datetime-picker";
|
|
34
|
-
var packageVersion = "13.0.
|
|
33
|
+
var packageVersion = "13.0.5";
|
|
35
34
|
function getValidDate(iso) {
|
|
36
35
|
var date = parseISO(iso);
|
|
37
36
|
return isValid(date) ? {
|
|
@@ -431,9 +430,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
431
430
|
DropdownIndicator: dropDownIcon,
|
|
432
431
|
Menu: Menu,
|
|
433
432
|
SingleValue: SingleValue
|
|
434
|
-
}, showClearIndicator
|
|
435
|
-
ClearIndicator: ClearIndicator
|
|
436
|
-
} : {
|
|
433
|
+
}, !showClearIndicator && {
|
|
437
434
|
ClearIndicator: EmptyComponent
|
|
438
435
|
});
|
|
439
436
|
var _selectProps$styles = selectProps.styles,
|
|
@@ -16,16 +16,16 @@ import { css, jsx } from '@emotion/react';
|
|
|
16
16
|
import { format, isValid, parseISO } from 'date-fns';
|
|
17
17
|
import pick from 'lodash/pick';
|
|
18
18
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
19
|
+
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
19
20
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
20
21
|
import { mergeStyles } from '@atlaskit/select';
|
|
21
22
|
import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
|
|
22
23
|
import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
|
|
23
|
-
import ClearButton from '../internal/clear-button';
|
|
24
24
|
import DatePicker from './date-picker';
|
|
25
25
|
import TimePicker from './time-picker';
|
|
26
26
|
import { convertTokens } from './utils';
|
|
27
27
|
var packageName = "@atlaskit/datetime-picker";
|
|
28
|
-
var packageVersion = "13.0.
|
|
28
|
+
var packageVersion = "13.0.5";
|
|
29
29
|
var isInvalidBorderStyles = css({
|
|
30
30
|
borderColor: "var(--ds-border-danger, ".concat(R400, ")")
|
|
31
31
|
});
|
|
@@ -299,11 +299,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
299
299
|
// Don't use Date or TimePicker's because they can't be customised
|
|
300
300
|
var isClearable = Boolean(dateValue || timeValue);
|
|
301
301
|
var notFocusedOrIsDisabled = !(isFocused || isDisabled);
|
|
302
|
-
var ariaLabelledbyId = id && "label--".concat(id);
|
|
303
302
|
return jsx("div", _extends({
|
|
304
303
|
css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
|
|
305
304
|
}, innerProps, {
|
|
306
|
-
"aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
|
|
307
305
|
"data-testid": testId
|
|
308
306
|
}), jsx("input", {
|
|
309
307
|
name: name,
|
|
@@ -334,13 +332,17 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
334
332
|
timeFormat: timeFormat,
|
|
335
333
|
locale: locale,
|
|
336
334
|
testId: testId && "".concat(testId, "--timepicker")
|
|
337
|
-
}, timePickerProps))), isClearable && !isDisabled ? jsx(
|
|
338
|
-
|
|
339
|
-
buttonStyles: iconContainerStyles,
|
|
335
|
+
}, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
|
|
336
|
+
css: iconContainerStyles,
|
|
340
337
|
onClick: this.onClear,
|
|
341
338
|
"data-testid": testId && "".concat(testId, "--icon--container"),
|
|
342
|
-
|
|
343
|
-
|
|
339
|
+
tabIndex: -1,
|
|
340
|
+
type: "button"
|
|
341
|
+
}, jsx(SelectClearIcon, {
|
|
342
|
+
size: "small",
|
|
343
|
+
primaryColor: "inherit",
|
|
344
|
+
label: "clear"
|
|
345
|
+
})) : null);
|
|
344
346
|
}
|
|
345
347
|
}]);
|
|
346
348
|
return DateTimePicker;
|
|
@@ -24,13 +24,12 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
|
|
|
24
24
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
25
25
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
26
26
|
import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
|
|
27
|
-
import ClearIndicator from '../internal/clear-indicator';
|
|
28
27
|
import FixedLayer from '../internal/fixed-layer';
|
|
29
28
|
import parseTime from '../internal/parse-time';
|
|
30
29
|
import { makeSingleValue } from '../internal/single-value';
|
|
31
30
|
import { convertTokens } from './utils';
|
|
32
31
|
var packageName = "@atlaskit/datetime-picker";
|
|
33
|
-
var packageVersion = "13.0.
|
|
32
|
+
var packageVersion = "13.0.5";
|
|
34
33
|
var menuStyles = {
|
|
35
34
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
36
35
|
position: 'static',
|
|
@@ -272,10 +271,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
272
271
|
DropdownIndicator: EmptyComponent,
|
|
273
272
|
Menu: FixedLayerMenu,
|
|
274
273
|
SingleValue: SingleValue
|
|
275
|
-
}, hideIcon
|
|
274
|
+
}, hideIcon && {
|
|
276
275
|
ClearIndicator: EmptyComponent
|
|
277
|
-
} : {
|
|
278
|
-
ClearIndicator: ClearIndicator
|
|
279
276
|
});
|
|
280
277
|
var renderIconContainer = Boolean(!hideIcon && value);
|
|
281
278
|
var mergedStyles = mergeStyles(selectStyles, {
|
|
@@ -267,7 +267,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
267
267
|
render(): jsx.JSX.Element;
|
|
268
268
|
}
|
|
269
269
|
export { DatePicker as DatePickerWithoutAnalytics };
|
|
270
|
-
declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "
|
|
270
|
+
declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
|
|
271
271
|
appearance: Appearance;
|
|
272
272
|
autoFocus: boolean;
|
|
273
273
|
defaultIsOpen: boolean;
|
|
@@ -287,5 +287,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
|
|
|
287
287
|
selectProps: {};
|
|
288
288
|
spacing: Spacing;
|
|
289
289
|
locale: string;
|
|
290
|
-
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "
|
|
290
|
+
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
|
|
291
291
|
export default _default;
|
|
@@ -193,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
|
|
|
193
193
|
render(): jsx.JSX.Element;
|
|
194
194
|
}
|
|
195
195
|
export { DateTimePicker as DateTimePickerWithoutAnalytics };
|
|
196
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "
|
|
196
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
|
|
197
197
|
appearance: string;
|
|
198
198
|
autoFocus: boolean;
|
|
199
199
|
isDisabled: boolean;
|
|
@@ -213,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
|
|
|
213
213
|
times: string[];
|
|
214
214
|
spacing: string;
|
|
215
215
|
locale: string;
|
|
216
|
-
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "
|
|
216
|
+
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
|
|
217
217
|
export default _default;
|
|
@@ -189,7 +189,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
|
|
|
189
189
|
render(): JSX.Element;
|
|
190
190
|
}
|
|
191
191
|
export { TimePicker as TimePickerWithoutAnalytics };
|
|
192
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "
|
|
192
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
|
|
193
193
|
appearance: Appearance;
|
|
194
194
|
autoFocus: boolean;
|
|
195
195
|
defaultIsOpen: boolean;
|
|
@@ -209,5 +209,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
|
|
|
209
209
|
times: string[];
|
|
210
210
|
timeIsEditable: boolean;
|
|
211
211
|
locale: string;
|
|
212
|
-
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "
|
|
212
|
+
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
|
|
213
213
|
export default _default;
|
|
@@ -267,7 +267,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
267
267
|
render(): jsx.JSX.Element;
|
|
268
268
|
}
|
|
269
269
|
export { DatePicker as DatePickerWithoutAnalytics };
|
|
270
|
-
declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "
|
|
270
|
+
declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
|
|
271
271
|
appearance: Appearance;
|
|
272
272
|
autoFocus: boolean;
|
|
273
273
|
defaultIsOpen: boolean;
|
|
@@ -287,5 +287,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
|
|
|
287
287
|
selectProps: {};
|
|
288
288
|
spacing: Spacing;
|
|
289
289
|
locale: string;
|
|
290
|
-
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "
|
|
290
|
+
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
|
|
291
291
|
export default _default;
|
|
@@ -193,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
|
|
|
193
193
|
render(): jsx.JSX.Element;
|
|
194
194
|
}
|
|
195
195
|
export { DateTimePicker as DateTimePickerWithoutAnalytics };
|
|
196
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "
|
|
196
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
|
|
197
197
|
appearance: string;
|
|
198
198
|
autoFocus: boolean;
|
|
199
199
|
isDisabled: boolean;
|
|
@@ -213,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
|
|
|
213
213
|
times: string[];
|
|
214
214
|
spacing: string;
|
|
215
215
|
locale: string;
|
|
216
|
-
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "
|
|
216
|
+
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
|
|
217
217
|
export default _default;
|
|
@@ -189,7 +189,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
|
|
|
189
189
|
render(): JSX.Element;
|
|
190
190
|
}
|
|
191
191
|
export { TimePicker as TimePickerWithoutAnalytics };
|
|
192
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "
|
|
192
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
|
|
193
193
|
appearance: Appearance;
|
|
194
194
|
autoFocus: boolean;
|
|
195
195
|
defaultIsOpen: boolean;
|
|
@@ -209,5 +209,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
|
|
|
209
209
|
times: string[];
|
|
210
210
|
timeIsEditable: boolean;
|
|
211
211
|
locale: string;
|
|
212
|
-
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "
|
|
212
|
+
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
|
|
213
213
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.5",
|
|
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/"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@atlaskit/popper": "^5.5.0",
|
|
43
43
|
"@atlaskit/select": "^17.0.3",
|
|
44
44
|
"@atlaskit/theme": "^12.6.0",
|
|
45
|
-
"@atlaskit/tokens": "^1.
|
|
45
|
+
"@atlaskit/tokens": "^1.30.0",
|
|
46
46
|
"@babel/runtime": "^7.0.0",
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"date-fns": "^2.17.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@af/accessibility-testing": "*",
|
|
57
57
|
"@af/integration-testing": "*",
|
|
58
|
-
"@atlaskit/button": "^
|
|
58
|
+
"@atlaskit/button": "^17.1.0",
|
|
59
59
|
"@atlaskit/docs": "*",
|
|
60
60
|
"@atlaskit/form": "^9.0.3",
|
|
61
61
|
"@atlaskit/modal-dialog": "^12.10.0",
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = require("@emotion/react");
|
|
9
|
-
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
|
|
10
|
-
/** @jsx jsx */
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* __Clear button__
|
|
14
|
-
*/
|
|
15
|
-
var ClearButton = function ClearButton(_ref) {
|
|
16
|
-
var inputId = _ref.inputId,
|
|
17
|
-
_ref$iconSize = _ref.iconSize,
|
|
18
|
-
iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize,
|
|
19
|
-
_ref$label = _ref.label,
|
|
20
|
-
label = _ref$label === void 0 ? 'Clear' : _ref$label,
|
|
21
|
-
primaryColor = _ref.primaryColor,
|
|
22
|
-
buttonStyles = _ref.buttonStyles,
|
|
23
|
-
dataTestId = _ref.dataTestId,
|
|
24
|
-
onClick = _ref.onClick;
|
|
25
|
-
var labelId = inputId && "label--".concat(inputId);
|
|
26
|
-
var clearButtonId = inputId && "clear-btn--".concat(inputId);
|
|
27
|
-
return (0, _react.jsx)("button", {
|
|
28
|
-
"aria-labelledby": inputId ? "".concat(clearButtonId, " ").concat(labelId) : "".concat(clearButtonId),
|
|
29
|
-
css: buttonStyles,
|
|
30
|
-
type: "button",
|
|
31
|
-
tabIndex: -1,
|
|
32
|
-
"data-testid": "".concat(dataTestId, "--clear--btn"),
|
|
33
|
-
onClick: onClick
|
|
34
|
-
}, (0, _react.jsx)("span", {
|
|
35
|
-
hidden: true,
|
|
36
|
-
id: clearButtonId
|
|
37
|
-
}, "Clear"), (0, _react.jsx)("span", {
|
|
38
|
-
style: {
|
|
39
|
-
display: 'flex'
|
|
40
|
-
}
|
|
41
|
-
}, (0, _react.jsx)(_selectClear.default, {
|
|
42
|
-
size: iconSize,
|
|
43
|
-
label: inputId ? '' : label,
|
|
44
|
-
primaryColor: primaryColor
|
|
45
|
-
})));
|
|
46
|
-
};
|
|
47
|
-
var _default = exports.default = ClearButton;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _select = require("@atlaskit/select");
|
|
11
|
-
var _clearButton = _interopRequireDefault(require("./clear-button"));
|
|
12
|
-
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; }
|
|
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) { (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; } /** @jsx jsx */
|
|
14
|
-
var buttonStyles = (0, _react.css)({
|
|
15
|
-
display: 'flex',
|
|
16
|
-
alignItems: 'center',
|
|
17
|
-
all: 'unset',
|
|
18
|
-
outline: 'revert'
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* __Clear indicator__
|
|
23
|
-
* Overwrites the default `ClearIndicator` button with custom styles and attributes
|
|
24
|
-
*
|
|
25
|
-
*/
|
|
26
|
-
var ClearIndicator = function ClearIndicator(props) {
|
|
27
|
-
return (0, _react.jsx)(_select.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
|
|
28
|
-
innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
|
|
29
|
-
'aria-hidden': 'false'
|
|
30
|
-
})
|
|
31
|
-
}), (0, _react.jsx)(_clearButton.default, {
|
|
32
|
-
buttonStyles: buttonStyles,
|
|
33
|
-
inputId: props.selectProps.inputId,
|
|
34
|
-
dataTestId: props.selectProps.testId
|
|
35
|
-
}));
|
|
36
|
-
};
|
|
37
|
-
var _default = exports.default = ClearIndicator;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
3
|
-
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
4
|
-
/**
|
|
5
|
-
* __Clear button__
|
|
6
|
-
*/
|
|
7
|
-
const ClearButton = ({
|
|
8
|
-
inputId,
|
|
9
|
-
iconSize = 'small',
|
|
10
|
-
label = 'Clear',
|
|
11
|
-
primaryColor,
|
|
12
|
-
buttonStyles,
|
|
13
|
-
dataTestId,
|
|
14
|
-
onClick
|
|
15
|
-
}) => {
|
|
16
|
-
const labelId = inputId && `label--${inputId}`;
|
|
17
|
-
const clearButtonId = inputId && `clear-btn--${inputId}`;
|
|
18
|
-
return jsx("button", {
|
|
19
|
-
"aria-labelledby": inputId ? `${clearButtonId} ${labelId}` : `${clearButtonId}`,
|
|
20
|
-
css: buttonStyles,
|
|
21
|
-
type: "button",
|
|
22
|
-
tabIndex: -1,
|
|
23
|
-
"data-testid": `${dataTestId}--clear--btn`,
|
|
24
|
-
onClick: onClick
|
|
25
|
-
}, jsx("span", {
|
|
26
|
-
hidden: true,
|
|
27
|
-
id: clearButtonId
|
|
28
|
-
}, "Clear"), jsx("span", {
|
|
29
|
-
style: {
|
|
30
|
-
display: 'flex'
|
|
31
|
-
}
|
|
32
|
-
}, jsx(SelectClearIcon, {
|
|
33
|
-
size: iconSize,
|
|
34
|
-
label: inputId ? '' : label,
|
|
35
|
-
primaryColor: primaryColor
|
|
36
|
-
})));
|
|
37
|
-
};
|
|
38
|
-
export default ClearButton;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
/** @jsx jsx */
|
|
3
|
-
|
|
4
|
-
import { css, jsx } from '@emotion/react';
|
|
5
|
-
import { components } from '@atlaskit/select';
|
|
6
|
-
import ClearButton from './clear-button';
|
|
7
|
-
const buttonStyles = css({
|
|
8
|
-
display: 'flex',
|
|
9
|
-
alignItems: 'center',
|
|
10
|
-
all: 'unset',
|
|
11
|
-
outline: 'revert'
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* __Clear indicator__
|
|
16
|
-
* Overwrites the default `ClearIndicator` button with custom styles and attributes
|
|
17
|
-
*
|
|
18
|
-
*/
|
|
19
|
-
const ClearIndicator = props => {
|
|
20
|
-
return jsx(components.ClearIndicator, _extends({}, props, {
|
|
21
|
-
innerProps: {
|
|
22
|
-
...props.innerProps,
|
|
23
|
-
'aria-hidden': 'false'
|
|
24
|
-
}
|
|
25
|
-
}), jsx(ClearButton, {
|
|
26
|
-
buttonStyles: buttonStyles,
|
|
27
|
-
inputId: props.selectProps.inputId,
|
|
28
|
-
dataTestId: props.selectProps.testId
|
|
29
|
-
}));
|
|
30
|
-
};
|
|
31
|
-
export default ClearIndicator;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
3
|
-
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
4
|
-
/**
|
|
5
|
-
* __Clear button__
|
|
6
|
-
*/
|
|
7
|
-
var ClearButton = function ClearButton(_ref) {
|
|
8
|
-
var inputId = _ref.inputId,
|
|
9
|
-
_ref$iconSize = _ref.iconSize,
|
|
10
|
-
iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize,
|
|
11
|
-
_ref$label = _ref.label,
|
|
12
|
-
label = _ref$label === void 0 ? 'Clear' : _ref$label,
|
|
13
|
-
primaryColor = _ref.primaryColor,
|
|
14
|
-
buttonStyles = _ref.buttonStyles,
|
|
15
|
-
dataTestId = _ref.dataTestId,
|
|
16
|
-
onClick = _ref.onClick;
|
|
17
|
-
var labelId = inputId && "label--".concat(inputId);
|
|
18
|
-
var clearButtonId = inputId && "clear-btn--".concat(inputId);
|
|
19
|
-
return jsx("button", {
|
|
20
|
-
"aria-labelledby": inputId ? "".concat(clearButtonId, " ").concat(labelId) : "".concat(clearButtonId),
|
|
21
|
-
css: buttonStyles,
|
|
22
|
-
type: "button",
|
|
23
|
-
tabIndex: -1,
|
|
24
|
-
"data-testid": "".concat(dataTestId, "--clear--btn"),
|
|
25
|
-
onClick: onClick
|
|
26
|
-
}, jsx("span", {
|
|
27
|
-
hidden: true,
|
|
28
|
-
id: clearButtonId
|
|
29
|
-
}, "Clear"), jsx("span", {
|
|
30
|
-
style: {
|
|
31
|
-
display: 'flex'
|
|
32
|
-
}
|
|
33
|
-
}, jsx(SelectClearIcon, {
|
|
34
|
-
size: iconSize,
|
|
35
|
-
label: inputId ? '' : label,
|
|
36
|
-
primaryColor: primaryColor
|
|
37
|
-
})));
|
|
38
|
-
};
|
|
39
|
-
export default ClearButton;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
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; }
|
|
3
|
-
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; }
|
|
4
|
-
/** @jsx jsx */
|
|
5
|
-
|
|
6
|
-
import { css, jsx } from '@emotion/react';
|
|
7
|
-
import { components } from '@atlaskit/select';
|
|
8
|
-
import ClearButton from './clear-button';
|
|
9
|
-
var buttonStyles = css({
|
|
10
|
-
display: 'flex',
|
|
11
|
-
alignItems: 'center',
|
|
12
|
-
all: 'unset',
|
|
13
|
-
outline: 'revert'
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* __Clear indicator__
|
|
18
|
-
* Overwrites the default `ClearIndicator` button with custom styles and attributes
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
|
-
var ClearIndicator = function ClearIndicator(props) {
|
|
22
|
-
return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
|
|
23
|
-
innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
|
|
24
|
-
'aria-hidden': 'false'
|
|
25
|
-
})
|
|
26
|
-
}), jsx(ClearButton, {
|
|
27
|
-
buttonStyles: buttonStyles,
|
|
28
|
-
inputId: props.selectProps.inputId,
|
|
29
|
-
dataTestId: props.selectProps.testId
|
|
30
|
-
}));
|
|
31
|
-
};
|
|
32
|
-
export default ClearIndicator;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx, SerializedStyles } from '@emotion/react';
|
|
3
|
-
import { Size } from '@atlaskit/icon';
|
|
4
|
-
interface ClearButtonProps {
|
|
5
|
-
inputId?: string;
|
|
6
|
-
iconSize?: Size;
|
|
7
|
-
primaryColor?: string;
|
|
8
|
-
label?: string;
|
|
9
|
-
buttonStyles?: SerializedStyles;
|
|
10
|
-
dataTestId?: string;
|
|
11
|
-
onClick?: () => void;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* __Clear button__
|
|
15
|
-
*/
|
|
16
|
-
declare const ClearButton: ({ inputId, iconSize, label, primaryColor, buttonStyles, dataTestId, onClick, }: ClearButtonProps) => jsx.JSX.Element;
|
|
17
|
-
export default ClearButton;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
import { ClearIndicatorProps } from '@atlaskit/select';
|
|
4
|
-
/**
|
|
5
|
-
* __Clear indicator__
|
|
6
|
-
* Overwrites the default `ClearIndicator` button with custom styles and attributes
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
|
|
10
|
-
export default ClearIndicator;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx, SerializedStyles } from '@emotion/react';
|
|
3
|
-
import { Size } from '@atlaskit/icon';
|
|
4
|
-
interface ClearButtonProps {
|
|
5
|
-
inputId?: string;
|
|
6
|
-
iconSize?: Size;
|
|
7
|
-
primaryColor?: string;
|
|
8
|
-
label?: string;
|
|
9
|
-
buttonStyles?: SerializedStyles;
|
|
10
|
-
dataTestId?: string;
|
|
11
|
-
onClick?: () => void;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* __Clear button__
|
|
15
|
-
*/
|
|
16
|
-
declare const ClearButton: ({ inputId, iconSize, label, primaryColor, buttonStyles, dataTestId, onClick, }: ClearButtonProps) => jsx.JSX.Element;
|
|
17
|
-
export default ClearButton;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
import { ClearIndicatorProps } from '@atlaskit/select';
|
|
4
|
-
/**
|
|
5
|
-
* __Clear indicator__
|
|
6
|
-
* Overwrites the default `ClearIndicator` button with custom styles and attributes
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
|
|
10
|
-
export default ClearIndicator;
|