New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@atlaskit/datetime-picker

Package Overview
Dependencies
Maintainers
0
Versions
342
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/datetime-picker - npm Package Compare versions

Comparing version 15.5.0 to 15.5.1

dist/cjs/components/date-time-picker-class.js
dist/cjs/components/date-time-picker-fc.js
dist/cjs/internal/indicators-container.js
dist/es2019/components/date-time-picker-class.js
dist/es2019/components/date-time-picker-fc.js
dist/es2019/internal/indicators-container.js
dist/esm/components/date-time-picker-class.js
dist/esm/components/date-time-picker-fc.js
dist/esm/internal/indicators-container.js
dist/types-ts4.5/components/date-time-picker-class.d.ts
dist/types-ts4.5/components/date-time-picker-fc.d.ts
dist/types-ts4.5/internal/indicators-container.d.ts
dist/types/components/date-time-picker-class.d.ts
dist/types/components/date-time-picker-fc.d.ts
dist/types/internal/indicators-container.d.ts

14

dist/cjs/components/date-picker-class.js

@@ -30,2 +30,3 @@ "use strict";

var _datePickerMigration = require("../internal/date-picker-migration");
var _indicatorsContainer = require("../internal/indicators-container");
var _menu = require("../internal/menu");

@@ -47,3 +48,3 @@ var _parseDate = require("../internal/parse-date");

var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
var packageVersion = "15.5.1";
var datePickerDefaultProps = {

@@ -475,4 +476,11 @@ defaultIsOpen: false,

});
var selectComponents = _objectSpread({
DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon,
var selectComponents = _objectSpread(_objectSpread({
DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
}, shouldShowCalendarButton ? {
IndicatorsContainer: function IndicatorsContainer(props) {
return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
showClearIndicator: showClearIndicator
}));
}
} : {}), {}, {
Menu: _menu.Menu,

@@ -479,0 +487,0 @@ SingleValue: SingleValue

14

dist/cjs/components/date-picker-fc.js

@@ -26,2 +26,3 @@ "use strict";

var _datePickerMigration = require("../internal/date-picker-migration");
var _indicatorsContainer = require("../internal/indicators-container");
var _menu = require("../internal/menu");

@@ -44,3 +45,3 @@ var _parseDate = require("../internal/parse-date");

var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
var packageVersion = "15.5.1";
var analyticsAttributes = {

@@ -466,4 +467,11 @@ componentName: 'datePicker',

});
var selectComponents = _objectSpread({
DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon,
var selectComponents = _objectSpread(_objectSpread({
DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
}, shouldShowCalendarButton ? {
IndicatorsContainer: function IndicatorsContainer(props) {
return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
showClearIndicator: showClearIndicator
}));
}
} : {}), {}, {
Menu: _menu.Menu,

@@ -470,0 +478,0 @@ SingleValue: SingleValue

437

dist/cjs/components/date-time-picker.js

@@ -7,434 +7,11 @@ "use strict";

});
exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = exports.DateTimePickerWithoutAnalytics = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _dateFns = require("date-fns");
var _analyticsNext = require("@atlaskit/analytics-next");
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
exports.default = void 0;
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _select = require("@atlaskit/select");
var _colors = require("@atlaskit/theme/colors");
var _internal = require("../internal");
var _dateTimePickerContainer = require("../internal/date-time-picker-container");
var _ffComponent = require("../internal/ff-component");
var _parseTokens = require("../internal/parse-tokens");
var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
var _timePicker = _interopRequireDefault(require("./time-picker"));
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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; }
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; } /**
* @jsxRuntime classic
* @jsx jsx
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
}, _datePickerFc.default, _datePickerClass.default);
var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
// Make DatePicker 50% the width of DateTimePicker
// If rendering an icon container, shrink the TimePicker
var datePickerContainerStyles = (0, _react2.css)({
flexBasis: '50%',
flexGrow: 1,
flexShrink: 0
});
var timePickerContainerStyles = (0, _react2.css)({
flexBasis: '50%',
flexGrow: 1
});
var iconContainerStyles = (0, _react2.css)({
display: 'flex',
margin: "var(--ds-border-width, 1px)",
alignItems: 'center',
flexBasis: 'inherit',
backgroundColor: 'inherit',
border: 'none',
color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
paddingBlockEnd: "var(--ds-space-075, 6px)",
paddingBlockStart: "var(--ds-space-075, 6px)",
paddingInlineEnd: "var(--ds-space-100, 8px)",
paddingInlineStart: "var(--ds-space-050, 4px)",
transition: "color 150ms",
'&:hover': {
color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
}
});
// react-select overrides (via @atlaskit/select).
var styles = {
control: function control(style) {
return _objectSpread(_objectSpread({}, style), {}, {
backgroundColor: 'transparent',
border: 2,
borderRadius: 0,
paddingLeft: 0,
':hover': {
backgroundColor: 'transparent',
cursor: 'inherit'
}
});
}
};
var dateTimePickerDefaultProps = {
// These disables are here for proper typing when used as defaults. They
// should *not* use the `noop` function.
/* eslint-disable @repo/internal/react/use-noop */
onBlur: function onBlur(_event) {},
onChange: function onChange(_value) {},
onFocus: function onFocus(_event) {}
/* eslint-enable @repo/internal/react/use-noop */
// Not including a default prop for value as it will
// Make the component a controlled component
};
var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(DateTimePickerComponent, _React$Component);
var _super = _createSuper(DateTimePickerComponent);
function DateTimePickerComponent() {
var _this$props$datePicke, _this$props$timePicke;
var _this;
(0, _classCallCheck2.default)(this, DateTimePickerComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
dateValue: ((_this$props$datePicke = _this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
isFocused: false,
timeValue: ((_this$props$timePicke = _this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
value: _this.props.defaultValue || '',
zoneValue: ''
});
// All state needs to be accessed via this function so that the state is mapped from props
// correctly to allow controlled/uncontrolled usage.
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getParsedValues", function () {
return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getValue", function () {
var _this$props$value;
return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateBlur", function (event) {
var _this$props$onBlur, _this$props, _this$props$datePicke2;
_this.setState({
isFocused: false
});
(_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 || _this$props$onBlur.call(_this$props, event);
if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
_this.props.datePickerProps.onBlur(event);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeBlur", function (event) {
var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
_this.setState({
isFocused: false
});
(_this$props$onBlur2 = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 || _this$props$onBlur2.call(_this$props2, event);
if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
_this.props.timePickerProps.onBlur(event);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateFocus", function (event) {
var _this$props$onFocus, _this$props3, _this$props$datePicke3;
_this.setState({
isFocused: true
});
(_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props3, event);
if ((_this$props$datePicke3 = _this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
_this.props.datePickerProps.onFocus(event);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeFocus", function (event) {
var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
_this.setState({
isFocused: true
});
(_this$props$onFocus2 = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus2 === void 0 || _this$props$onFocus2.call(_this$props4, event);
if ((_this$props$timePicke3 = _this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
_this.props.timePickerProps.onFocus(event);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateChange", function (dateValue) {
var _this$props$datePicke4;
var parsedValues = _this.getParsedValues();
_this.onValueChange({
dateValue: dateValue,
timeValue: parsedValues.timeValue,
zoneValue: parsedValues.zoneValue
});
if ((_this$props$datePicke4 = _this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
_this.props.datePickerProps.onChange(dateValue);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChange", function (timeValue) {
var _this$props$timePicke4;
var parsedValues = _this.getParsedValues();
_this.onValueChange({
dateValue: parsedValues.dateValue,
timeValue: timeValue,
zoneValue: parsedValues.zoneValue
});
if ((_this$props$timePicke4 = _this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
_this.props.timePickerProps.onChange(timeValue);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
var _this$props$datePicke5, _this$props$timePicke5;
var parsedValues = _this.getParsedValues();
_this.onValueChange({
dateValue: '',
timeValue: '',
zoneValue: parsedValues.zoneValue
});
if ((_this$props$datePicke5 = _this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
_this.props.datePickerProps.onChange('');
}
if ((_this$props$timePicke5 = _this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
_this.props.timePickerProps.onChange('');
}
});
return _this;
}
(0, _createClass2.default)(DateTimePickerComponent, [{
key: "parseValue",
value: function parseValue(value, dateValue, timeValue, zoneValue) {
if (this.props.parseValue) {
var parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
// This handles cases found in Jira where the parse function actually does
// nothing and returns undefined. The previous `getSafeState` function
// just spread the values over the state, but if it returned `undefined`,
// it would just rely on the previous state values. Considering this is
// what is input to this function anyway, this is a safe way to handle
// this, colocate the behavior, and not rely on `getSafeState`.
return parsedFromFn || {
dateValue: dateValue,
timeValue: timeValue,
zoneValue: zoneValue
};
}
var parsed = (0, _dateFns.parseISO)(value);
return (0, _dateFns.isValid)(parsed) ? {
dateValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('YYYY-MM-DD')),
timeValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('HH:mm')),
zoneValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('ZZ'))
} : {
dateValue: dateValue,
timeValue: timeValue,
zoneValue: zoneValue
};
}
}, {
key: "onValueChange",
value: function onValueChange(_ref) {
var dateValue = _ref.dateValue,
timeValue = _ref.timeValue,
zoneValue = _ref.zoneValue;
this.setState({
dateValue: dateValue,
timeValue: timeValue,
zoneValue: zoneValue
});
if (dateValue && timeValue) {
var _this$props$onChange, _this$props5;
var value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
parsedZone = _this$parseValue.zoneValue;
var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, parsedZone);
this.setState({
value: valueWithValidZone
});
(_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props5, valueWithValidZone);
// If the date or time value was cleared when there is an existing datetime value, then clear the value.
} else if (this.getValue()) {
var _this$props$onChange2, _this$props6;
this.setState({
value: ''
});
(_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props6, '');
}
}
}, {
key: "render",
value: function render() {
var _this$props7 = this.props,
ariaDescribedBy = _this$props7['aria-describedby'],
_this$props7$appearan = _this$props7.appearance,
appearance = _this$props7$appearan === void 0 ? 'default' : _this$props7$appearan,
_this$props7$autoFocu = _this$props7.autoFocus,
autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
_this$props7$clearCon = _this$props7.clearControlLabel,
clearControlLabel = _this$props7$clearCon === void 0 ? 'clear' : _this$props7$clearCon,
_this$props7$datePick = _this$props7.datePickerProps,
datePickerProps = _this$props7$datePick === void 0 ? {} : _this$props7$datePick,
_this$props7$id = _this$props7.id,
id = _this$props7$id === void 0 ? '' : _this$props7$id,
_this$props7$innerPro = _this$props7.innerProps,
innerProps = _this$props7$innerPro === void 0 ? {} : _this$props7$innerPro,
_this$props7$isDisabl = _this$props7.isDisabled,
isDisabled = _this$props7$isDisabl === void 0 ? false : _this$props7$isDisabl,
_this$props7$isInvali = _this$props7.isInvalid,
isInvalid = _this$props7$isInvali === void 0 ? false : _this$props7$isInvali,
_this$props7$isRequir = _this$props7.isRequired,
isRequired = _this$props7$isRequir === void 0 ? false : _this$props7$isRequir,
_this$props7$locale = _this$props7.locale,
locale = _this$props7$locale === void 0 ? 'en-US' : _this$props7$locale,
_this$props7$name = _this$props7.name,
name = _this$props7$name === void 0 ? '' : _this$props7$name,
_this$props7$spacing = _this$props7.spacing,
spacing = _this$props7$spacing === void 0 ? 'default' : _this$props7$spacing,
testId = _this$props7.testId,
_this$props7$timePick = _this$props7.timePickerProps,
timePickerProps = _this$props7$timePick === void 0 ? {} : _this$props7$timePick;
var value = this.getValue();
var isFocused = this.state.isFocused;
var parsedValues = this.getParsedValues();
var dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
var datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
styles: (0, _select.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
});
var timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
styles: (0, _select.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
});
// Render DateTimePicker's IconContainer when a value has been filled
// Don't use Date or TimePicker's because they can't be customised
var isClearable = Boolean(dateValue || timeValue);
return (0, _react2.jsx)(_dateTimePickerContainer.DateTimePickerContainer, {
appearance: appearance,
isDisabled: isDisabled,
isFocused: isFocused,
isInvalid: isInvalid,
testId: testId,
innerProps: innerProps
}, (0, _react2.jsx)("input", {
name: name,
type: "hidden",
value: value,
"data-testid": testId && "".concat(testId, "--input")
}), (0, _react2.jsx)("div", {
css: datePickerContainerStyles
}, (0, _react2.jsx)(DatePicker, {
appearance: appearance,
"aria-describedby": datePickerAriaDescribedBy,
autoFocus: datePickerProps.autoFocus || autoFocus,
dateFormat: datePickerProps.dateFormat,
defaultIsOpen: datePickerProps.defaultIsOpen,
defaultValue: datePickerProps.defaultValue,
disabled: datePickerProps.disabled,
disabledDateFilter: datePickerProps.disabledDateFilter,
formatDisplayLabel: datePickerProps.formatDisplayLabel,
hideIcon: datePickerProps.hideIcon || true,
icon: datePickerProps.icon,
id: datePickerProps.id || id,
innerProps: datePickerProps.innerProps,
isDisabled: datePickerProps.isDisabled || isDisabled,
isInvalid: datePickerProps.isInvalid || isInvalid,
isRequired: datePickerProps.isRequired || isRequired,
isOpen: datePickerProps.isOpen,
label: datePickerLabel,
locale: datePickerProps.locale || locale,
maxDate: datePickerProps.maxDate,
minDate: datePickerProps.minDate,
name: datePickerProps.name,
nextMonthLabel: datePickerProps.nextMonthLabel,
onBlur: this.onDateBlur,
onChange: this.onDateChange,
onFocus: this.onDateFocus,
parseInputValue: datePickerProps.parseInputValue,
placeholder: datePickerProps.placeholder,
previousMonthLabel: datePickerProps.previousMonthLabel,
selectProps: mergedDatePickerSelectProps,
shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
spacing: datePickerProps.spacing || spacing,
testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
value: dateValue,
weekStartDay: datePickerProps.weekStartDay
})), (0, _react2.jsx)("div", {
css: timePickerContainerStyles
}, (0, _react2.jsx)(_timePicker.default, {
appearance: timePickerProps.appearance || appearance,
"aria-describedby": timePickerAriaDescribedBy,
autoFocus: timePickerProps.autoFocus,
defaultIsOpen: timePickerProps.defaultIsOpen,
defaultValue: timePickerProps.defaultValue,
formatDisplayLabel: timePickerProps.formatDisplayLabel,
hideIcon: timePickerProps.hideIcon || true,
id: timePickerProps.id,
innerProps: timePickerProps.innerProps,
isDisabled: timePickerProps.isDisabled || isDisabled,
isInvalid: timePickerProps.isInvalid || isInvalid,
isOpen: timePickerProps.isOpen,
isRequired: timePickerProps.isRequired || isRequired,
label: timePickerLabel,
locale: timePickerProps.locale || locale,
name: timePickerProps.name,
onBlur: this.onTimeBlur,
onChange: this.onTimeChange,
onFocus: this.onTimeFocus,
parseInputValue: timePickerProps.parseInputValue,
placeholder: timePickerProps.placeholder,
selectProps: mergedTimePickerSelectProps,
spacing: timePickerProps.spacing || spacing,
testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
timeFormat: timePickerProps.timeFormat,
timeIsEditable: timePickerProps.timeIsEditable,
times: timePickerProps.times,
value: timeValue
})), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
css: iconContainerStyles,
onClick: this.onClear,
"data-testid": testId && "".concat(testId, "--icon--container"),
tabIndex: -1,
type: "button"
}, (0, _react2.jsx)(_selectClear.default, {
size: "small",
primaryColor: "inherit",
label: clearControlLabel
})) : null);
}
}]);
return DateTimePickerComponent;
}(_react.default.Component);
(0, _defineProperty2.default)(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
/**
* __Date time picker__
*
* A date time picker allows the user to select an associated date and time.
*
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
* - [Code](https://atlassian.design/components/datetime-picker/code)
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
*/
var DateTimePicker = (0, _analyticsNext.withAnalyticsContext)({
componentName: 'dateTimePicker',
packageName: packageName,
packageVersion: packageVersion
})((0, _analyticsNext.withAnalyticsEvents)({
onChange: (0, _analyticsNext.createAndFireEvent)('atlaskit')({
action: 'changed',
actionSubject: 'dateTimePicker',
attributes: {
componentName: 'dateTimePicker',
packageName: packageName,
packageVersion: packageVersion
}
})
})(DateTimePickerComponent));
var _dateTimePickerClass = _interopRequireDefault(require("./date-time-picker-class"));
var _dateTimePickerFc = _interopRequireDefault(require("./date-time-picker-fc"));
var DateTimePicker = (0, _ffComponent.componentWithCondition)(function () {
return (0, _platformFeatureFlags.fg)('dst-date-time-picker-use-functional-component');
}, _dateTimePickerFc.default, _dateTimePickerClass.default);
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = DateTimePicker;

2

dist/cjs/components/time-picker.js

@@ -30,3 +30,3 @@ "use strict";

var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
var packageVersion = "15.5.1";
var menuStyles = {

@@ -33,0 +33,0 @@ /* Need to remove default absolute positioning as that causes issues with position fixed */

41

dist/cjs/internal/date-time-picker-container.js

@@ -9,3 +9,4 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("@emotion/react");
var _react = require("react");
var _react2 = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");

@@ -18,21 +19,21 @@ /**

var isInvalidBorderStyles = (0, _react.css)({
var isInvalidBorderStyles = (0, _react2.css)({
borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
});
var isFocusedBorderStyles = (0, _react.css)({
var isFocusedBorderStyles = (0, _react2.css)({
borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))
});
var isFocusedStyles = (0, _react.css)({
var isFocusedStyles = (0, _react2.css)({
backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")")
});
var subtleBgStyles = (0, _react.css)({
var subtleBgStyles = (0, _react2.css)({
backgroundColor: 'transparent',
borderColor: 'transparent'
});
var subtleFocusedBgStyles = (0, _react.css)({
var subtleFocusedBgStyles = (0, _react2.css)({
backgroundColor: "var(--ds-background-input-pressed, transparent)",
borderColor: 'transparent'
});
var noBgStyles = (0, _react.css)({
var noBgStyles = (0, _react2.css)({
backgroundColor: 'transparent',

@@ -45,3 +46,3 @@ borderColor: 'transparent',

});
var hoverStyles = (0, _react.css)({
var hoverStyles = (0, _react2.css)({
'&:hover': {

@@ -52,3 +53,3 @@ backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),

});
var isInvalidHoverStyles = (0, _react.css)({
var isInvalidHoverStyles = (0, _react2.css)({
'&:hover': {

@@ -59,3 +60,3 @@ backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N0, ")"),

});
var isDisabledStyles = (0, _react.css)({
var isDisabledStyles = (0, _react2.css)({
'&:hover': {

@@ -65,6 +66,6 @@ cursor: 'default'

});
var newBorderStyles = (0, _react.css)({
var newBorderStyles = (0, _react2.css)({
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(_colors.N100, ")"))
});
var baseContainerStyles = (0, _react.css)({
var baseContainerStyles = (0, _react2.css)({
display: 'flex',

@@ -79,8 +80,8 @@ backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),

});
/**
* This is the container for the datetime picker component.
*/
var DateTimePickerContainer = exports.DateTimePickerContainer = function DateTimePickerContainer(_ref) {
var isDisabled = _ref.isDisabled,
var DateTimePickerContainer = exports.DateTimePickerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var children = _ref.children,
isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused,

@@ -90,10 +91,10 @@ appearance = _ref.appearance,

innerProps = _ref.innerProps,
testId = _ref.testId,
children = _ref.children;
testId = _ref.testId;
var notFocusedOrIsDisabled = !(isFocused || isDisabled);
return (0, _react.jsx)("div", (0, _extends2.default)({
return (0, _react2.jsx)("div", (0, _extends2.default)({
css: [baseContainerStyles, newBorderStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
}, innerProps, {
"data-testid": testId
"data-testid": testId,
ref: ref
}), children);
};
});

10

dist/es2019/components/date-picker-class.js

@@ -25,2 +25,3 @@ import _extends from "@babel/runtime/helpers/extends";

import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
import { IndicatorsContainer } from '../internal/indicators-container';
import { Menu } from '../internal/menu';

@@ -30,3 +31,3 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';

const packageName = "@atlaskit/datetime-picker";
const packageVersion = "15.5.0";
const packageVersion = "15.5.1";
const datePickerDefaultProps = {

@@ -454,2 +455,9 @@ defaultIsOpen: false,

DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
// Only use this new container component if the calendar button is shown.
// Otherwise, it throws errors downstream for some reason
...(shouldShowCalendarButton ? {
IndicatorsContainer: props => jsx(IndicatorsContainer, _extends({}, props, {
showClearIndicator: showClearIndicator
}))
} : {}),
Menu,

@@ -456,0 +464,0 @@ SingleValue,

10

dist/es2019/components/date-picker-fc.js

@@ -24,2 +24,3 @@ import _extends from "@babel/runtime/helpers/extends";

import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
import { IndicatorsContainer } from '../internal/indicators-container';
import { Menu } from '../internal/menu';

@@ -29,3 +30,3 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';

const packageName = "@atlaskit/datetime-picker";
const packageVersion = "15.5.0";
const packageVersion = "15.5.1";
const analyticsAttributes = {

@@ -395,2 +396,9 @@ componentName: 'datePicker',

DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
// Only use this new container component if the calendar button is shown.
// Otherwise, it throws errors downstream for some reason
...(shouldShowCalendarButton ? {
IndicatorsContainer: props => jsx(IndicatorsContainer, _extends({}, props, {
showClearIndicator: showClearIndicator
}))
} : {}),
Menu,

@@ -397,0 +405,0 @@ SingleValue,

401

dist/es2019/components/date-time-picker.js

@@ -1,400 +0,7 @@

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { format, isValid, parseISO } from 'date-fns';
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
import { fg } from '@atlaskit/platform-feature-flags';
import { mergeStyles } from '@atlaskit/select';
import { N500, N70 } from '@atlaskit/theme/colors';
import { formatDateTimeZoneIntoIso } from '../internal';
import { DateTimePickerContainer } from '../internal/date-time-picker-container';
import { componentWithCondition } from '../internal/ff-component';
import { convertTokens } from '../internal/parse-tokens';
import DatePickerOld from './date-picker-class';
import DatePickerNew from './date-picker-fc';
import TimePicker from './time-picker';
const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
const packageName = "@atlaskit/datetime-picker";
const packageVersion = "15.5.0";
// Make DatePicker 50% the width of DateTimePicker
// If rendering an icon container, shrink the TimePicker
const datePickerContainerStyles = css({
flexBasis: '50%',
flexGrow: 1,
flexShrink: 0
});
const timePickerContainerStyles = css({
flexBasis: '50%',
flexGrow: 1
});
const iconContainerStyles = css({
display: 'flex',
margin: "var(--ds-border-width, 1px)",
alignItems: 'center',
flexBasis: 'inherit',
backgroundColor: 'inherit',
border: 'none',
color: `var(--ds-text-subtlest, ${N70})`,
paddingBlockEnd: "var(--ds-space-075, 6px)",
paddingBlockStart: "var(--ds-space-075, 6px)",
paddingInlineEnd: "var(--ds-space-100, 8px)",
paddingInlineStart: "var(--ds-space-050, 4px)",
transition: `color 150ms`,
'&:hover': {
color: `var(--ds-text-subtle, ${N500})`
}
});
// react-select overrides (via @atlaskit/select).
const styles = {
control: style => ({
...style,
backgroundColor: 'transparent',
border: 2,
borderRadius: 0,
paddingLeft: 0,
':hover': {
backgroundColor: 'transparent',
cursor: 'inherit'
}
})
};
const dateTimePickerDefaultProps = {
// These disables are here for proper typing when used as defaults. They
// should *not* use the `noop` function.
/* eslint-disable @repo/internal/react/use-noop */
onBlur: _event => {},
onChange: _value => {},
onFocus: _event => {}
/* eslint-enable @repo/internal/react/use-noop */
// Not including a default prop for value as it will
// Make the component a controlled component
};
export const datePickerDefaultAriaLabel = 'Date';
export const timePickerDefaultAriaLabel = 'Time';
class DateTimePickerComponent extends React.Component {
constructor(...args) {
var _this$props$datePicke, _this$props$timePicke;
super(...args);
_defineProperty(this, "state", {
dateValue: ((_this$props$datePicke = this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
isFocused: false,
timeValue: ((_this$props$timePicke = this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
value: this.props.defaultValue || '',
zoneValue: ''
});
// All state needs to be accessed via this function so that the state is mapped from props
// correctly to allow controlled/uncontrolled usage.
_defineProperty(this, "getParsedValues", () => this.parseValue(this.getValue(), this.state.dateValue, this.state.timeValue, this.state.zoneValue));
_defineProperty(this, "getValue", () => {
var _this$props$value;
return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
});
_defineProperty(this, "onDateBlur", event => {
var _this$props$onBlur, _this$props, _this$props$datePicke2;
this.setState({
isFocused: false
});
(_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
this.props.datePickerProps.onBlur(event);
}
});
_defineProperty(this, "onTimeBlur", event => {
var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
this.setState({
isFocused: false
});
(_this$props$onBlur2 = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props2, event);
if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
this.props.timePickerProps.onBlur(event);
}
});
_defineProperty(this, "onDateFocus", event => {
var _this$props$onFocus, _this$props3, _this$props$datePicke3;
this.setState({
isFocused: true
});
(_this$props$onFocus = (_this$props3 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, event);
if ((_this$props$datePicke3 = this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
this.props.datePickerProps.onFocus(event);
}
});
_defineProperty(this, "onTimeFocus", event => {
var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
this.setState({
isFocused: true
});
(_this$props$onFocus2 = (_this$props4 = this.props).onFocus) === null || _this$props$onFocus2 === void 0 ? void 0 : _this$props$onFocus2.call(_this$props4, event);
if ((_this$props$timePicke3 = this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
this.props.timePickerProps.onFocus(event);
}
});
_defineProperty(this, "onDateChange", dateValue => {
var _this$props$datePicke4;
const parsedValues = this.getParsedValues();
this.onValueChange({
dateValue,
timeValue: parsedValues.timeValue,
zoneValue: parsedValues.zoneValue
});
if ((_this$props$datePicke4 = this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
this.props.datePickerProps.onChange(dateValue);
}
});
_defineProperty(this, "onTimeChange", timeValue => {
var _this$props$timePicke4;
const parsedValues = this.getParsedValues();
this.onValueChange({
dateValue: parsedValues.dateValue,
timeValue,
zoneValue: parsedValues.zoneValue
});
if ((_this$props$timePicke4 = this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
this.props.timePickerProps.onChange(timeValue);
}
});
_defineProperty(this, "onClear", () => {
var _this$props$datePicke5, _this$props$timePicke5;
const parsedValues = this.getParsedValues();
this.onValueChange({
dateValue: '',
timeValue: '',
zoneValue: parsedValues.zoneValue
});
if ((_this$props$datePicke5 = this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
this.props.datePickerProps.onChange('');
}
if ((_this$props$timePicke5 = this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
this.props.timePickerProps.onChange('');
}
});
}
parseValue(value, dateValue, timeValue, zoneValue) {
if (this.props.parseValue) {
const parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
// This handles cases found in Jira where the parse function actually does
// nothing and returns undefined. The previous `getSafeState` function
// just spread the values over the state, but if it returned `undefined`,
// it would just rely on the previous state values. Considering this is
// what is input to this function anyway, this is a safe way to handle
// this, colocate the behavior, and not rely on `getSafeState`.
return parsedFromFn || {
dateValue,
timeValue,
zoneValue
};
}
const parsed = parseISO(value);
return isValid(parsed) ? {
dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
timeValue: format(parsed, convertTokens('HH:mm')),
zoneValue: format(parsed, convertTokens('ZZ'))
} : {
dateValue,
timeValue,
zoneValue
};
}
onValueChange({
dateValue,
timeValue,
zoneValue
}) {
this.setState({
dateValue,
timeValue,
zoneValue
});
if (dateValue && timeValue) {
var _this$props$onChange, _this$props5;
const value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
const {
zoneValue: parsedZone
} = this.parseValue(value, dateValue, timeValue, zoneValue);
const valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
this.setState({
value: valueWithValidZone
});
(_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props5, valueWithValidZone);
// If the date or time value was cleared when there is an existing datetime value, then clear the value.
} else if (this.getValue()) {
var _this$props$onChange2, _this$props6;
this.setState({
value: ''
});
(_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props6, '');
}
}
render() {
const {
'aria-describedby': ariaDescribedBy,
appearance = 'default',
autoFocus = false,
clearControlLabel = 'clear',
datePickerProps = {},
id = '',
innerProps = {},
isDisabled = false,
isInvalid = false,
isRequired = false,
locale = 'en-US',
name = '',
spacing = 'default',
testId,
timePickerProps = {}
} = this.props;
const value = this.getValue();
const {
isFocused
} = this.state;
const parsedValues = this.getParsedValues();
const dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
const timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
const datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
const datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
const mergedDatePickerSelectProps = {
...datePickerSelectProps,
styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
};
const timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
const timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
const timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
const mergedTimePickerSelectProps = {
...timePickerSelectProps,
styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
};
// Render DateTimePicker's IconContainer when a value has been filled
// Don't use Date or TimePicker's because they can't be customised
const isClearable = Boolean(dateValue || timeValue);
return jsx(DateTimePickerContainer, {
appearance: appearance,
isDisabled: isDisabled,
isFocused: isFocused,
isInvalid: isInvalid,
testId: testId,
innerProps: innerProps
}, jsx("input", {
name: name,
type: "hidden",
value: value,
"data-testid": testId && `${testId}--input`
}), jsx("div", {
css: datePickerContainerStyles
}, jsx(DatePicker, {
appearance: appearance,
"aria-describedby": datePickerAriaDescribedBy,
autoFocus: datePickerProps.autoFocus || autoFocus,
dateFormat: datePickerProps.dateFormat,
defaultIsOpen: datePickerProps.defaultIsOpen,
defaultValue: datePickerProps.defaultValue,
disabled: datePickerProps.disabled,
disabledDateFilter: datePickerProps.disabledDateFilter,
formatDisplayLabel: datePickerProps.formatDisplayLabel,
hideIcon: datePickerProps.hideIcon || true,
icon: datePickerProps.icon,
id: datePickerProps.id || id,
innerProps: datePickerProps.innerProps,
isDisabled: datePickerProps.isDisabled || isDisabled,
isInvalid: datePickerProps.isInvalid || isInvalid,
isRequired: datePickerProps.isRequired || isRequired,
isOpen: datePickerProps.isOpen,
label: datePickerLabel,
locale: datePickerProps.locale || locale,
maxDate: datePickerProps.maxDate,
minDate: datePickerProps.minDate,
name: datePickerProps.name,
nextMonthLabel: datePickerProps.nextMonthLabel,
onBlur: this.onDateBlur,
onChange: this.onDateChange,
onFocus: this.onDateFocus,
parseInputValue: datePickerProps.parseInputValue,
placeholder: datePickerProps.placeholder,
previousMonthLabel: datePickerProps.previousMonthLabel,
selectProps: mergedDatePickerSelectProps,
shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
spacing: datePickerProps.spacing || spacing,
testId: testId && `${testId}--datepicker` || datePickerProps.testId,
value: dateValue,
weekStartDay: datePickerProps.weekStartDay
})), jsx("div", {
css: timePickerContainerStyles
}, jsx(TimePicker, {
appearance: timePickerProps.appearance || appearance,
"aria-describedby": timePickerAriaDescribedBy,
autoFocus: timePickerProps.autoFocus,
defaultIsOpen: timePickerProps.defaultIsOpen,
defaultValue: timePickerProps.defaultValue,
formatDisplayLabel: timePickerProps.formatDisplayLabel,
hideIcon: timePickerProps.hideIcon || true,
id: timePickerProps.id,
innerProps: timePickerProps.innerProps,
isDisabled: timePickerProps.isDisabled || isDisabled,
isInvalid: timePickerProps.isInvalid || isInvalid,
isOpen: timePickerProps.isOpen,
isRequired: timePickerProps.isRequired || isRequired,
label: timePickerLabel,
locale: timePickerProps.locale || locale,
name: timePickerProps.name,
onBlur: this.onTimeBlur,
onChange: this.onTimeChange,
onFocus: this.onTimeFocus,
parseInputValue: timePickerProps.parseInputValue,
placeholder: timePickerProps.placeholder,
selectProps: mergedTimePickerSelectProps,
spacing: timePickerProps.spacing || spacing,
testId: timePickerProps.testId || testId && `${testId}--timepicker`,
timeFormat: timePickerProps.timeFormat,
timeIsEditable: timePickerProps.timeIsEditable,
times: timePickerProps.times,
value: timeValue
})), isClearable && !isDisabled ? jsx("button", {
css: iconContainerStyles,
onClick: this.onClear,
"data-testid": testId && `${testId}--icon--container`,
tabIndex: -1,
type: "button"
}, jsx(SelectClearIcon, {
size: "small",
primaryColor: "inherit",
label: clearControlLabel
})) : null);
}
}
_defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
/**
* __Date time picker__
*
* A date time picker allows the user to select an associated date and time.
*
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
* - [Code](https://atlassian.design/components/datetime-picker/code)
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
*/
const DateTimePicker = withAnalyticsContext({
componentName: 'dateTimePicker',
packageName,
packageVersion
})(withAnalyticsEvents({
onChange: createAndFireEvent('atlaskit')({
action: 'changed',
actionSubject: 'dateTimePicker',
attributes: {
componentName: 'dateTimePicker',
packageName,
packageVersion
}
})
})(DateTimePickerComponent));
import DateTimePickerOld from './date-time-picker-class';
import DateTimePickerNew from './date-time-picker-fc';
const DateTimePicker = componentWithCondition(() => fg('dst-date-time-picker-use-functional-component'), DateTimePickerNew, DateTimePickerOld);
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default DateTimePicker;

2

dist/es2019/components/time-picker.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/extends";

const packageName = "@atlaskit/datetime-picker";
const packageVersion = "15.5.0";
const packageVersion = "15.5.1";
const menuStyles = {

@@ -17,0 +17,0 @@ /* Need to remove default absolute positioning as that causes issues with position fixed */

15

dist/es2019/internal/date-time-picker-container.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/extends";

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { forwardRef } from 'react';
import { css, jsx } from '@emotion/react';

@@ -66,7 +67,7 @@ import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';

});
/**
* This is the container for the datetime picker component.
*/
export const DateTimePickerContainer = ({
export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
children,
isDisabled,

@@ -77,5 +78,4 @@ isFocused,

innerProps,
testId,
children
}) => {
testId
}, ref) => {
const notFocusedOrIsDisabled = !(isFocused || isDisabled);

@@ -85,4 +85,5 @@ return jsx("div", _extends({

}, innerProps, {
"data-testid": testId
"data-testid": testId,
ref: ref
}), children);
};
});

14

dist/esm/components/date-picker-class.js

@@ -35,2 +35,3 @@ import _extends from "@babel/runtime/helpers/extends";

import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
import { IndicatorsContainer as _IndicatorsContainer } from '../internal/indicators-container';
import { Menu } from '../internal/menu';

@@ -40,3 +41,3 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';

var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
var packageVersion = "15.5.1";
var datePickerDefaultProps = {

@@ -468,4 +469,11 @@ defaultIsOpen: false,

});
var selectComponents = _objectSpread({
DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
var selectComponents = _objectSpread(_objectSpread({
DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
}, shouldShowCalendarButton ? {
IndicatorsContainer: function IndicatorsContainer(props) {
return jsx(_IndicatorsContainer, _extends({}, props, {
showClearIndicator: showClearIndicator
}));
}
} : {}), {}, {
Menu: Menu,

@@ -472,0 +480,0 @@ SingleValue: SingleValue

14

dist/esm/components/date-picker-fc.js

@@ -30,2 +30,3 @@ import _extends from "@babel/runtime/helpers/extends";

import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
import { IndicatorsContainer as _IndicatorsContainer } from '../internal/indicators-container';
import { Menu } from '../internal/menu';

@@ -35,3 +36,3 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';

var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
var packageVersion = "15.5.1";
var analyticsAttributes = {

@@ -457,4 +458,11 @@ componentName: 'datePicker',

});
var selectComponents = _objectSpread({
DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
var selectComponents = _objectSpread(_objectSpread({
DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
}, shouldShowCalendarButton ? {
IndicatorsContainer: function IndicatorsContainer(props) {
return jsx(_IndicatorsContainer, _extends({}, props, {
showClearIndicator: showClearIndicator
}));
}
} : {}), {}, {
Menu: Menu,

@@ -461,0 +469,0 @@ SingleValue: SingleValue

440

dist/esm/components/date-time-picker.js

@@ -1,437 +0,9 @@

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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; }
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; }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { format, isValid, parseISO } from 'date-fns';
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
import { fg } from '@atlaskit/platform-feature-flags';
import { mergeStyles } from '@atlaskit/select';
import { N500, N70 } from '@atlaskit/theme/colors';
import { formatDateTimeZoneIntoIso } from '../internal';
import { DateTimePickerContainer } from '../internal/date-time-picker-container';
import { componentWithCondition } from '../internal/ff-component';
import { convertTokens } from '../internal/parse-tokens';
import DatePickerOld from './date-picker-class';
import DatePickerNew from './date-picker-fc';
import TimePicker from './time-picker';
var DatePicker = componentWithCondition(function () {
return fg('dst-date-picker-use-functional-component');
}, DatePickerNew, DatePickerOld);
var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
// Make DatePicker 50% the width of DateTimePicker
// If rendering an icon container, shrink the TimePicker
var datePickerContainerStyles = css({
flexBasis: '50%',
flexGrow: 1,
flexShrink: 0
});
var timePickerContainerStyles = css({
flexBasis: '50%',
flexGrow: 1
});
var iconContainerStyles = css({
display: 'flex',
margin: "var(--ds-border-width, 1px)",
alignItems: 'center',
flexBasis: 'inherit',
backgroundColor: 'inherit',
border: 'none',
color: "var(--ds-text-subtlest, ".concat(N70, ")"),
paddingBlockEnd: "var(--ds-space-075, 6px)",
paddingBlockStart: "var(--ds-space-075, 6px)",
paddingInlineEnd: "var(--ds-space-100, 8px)",
paddingInlineStart: "var(--ds-space-050, 4px)",
transition: "color 150ms",
'&:hover': {
color: "var(--ds-text-subtle, ".concat(N500, ")")
}
});
// react-select overrides (via @atlaskit/select).
var styles = {
control: function control(style) {
return _objectSpread(_objectSpread({}, style), {}, {
backgroundColor: 'transparent',
border: 2,
borderRadius: 0,
paddingLeft: 0,
':hover': {
backgroundColor: 'transparent',
cursor: 'inherit'
}
});
}
};
var dateTimePickerDefaultProps = {
// These disables are here for proper typing when used as defaults. They
// should *not* use the `noop` function.
/* eslint-disable @repo/internal/react/use-noop */
onBlur: function onBlur(_event) {},
onChange: function onChange(_value) {},
onFocus: function onFocus(_event) {}
/* eslint-enable @repo/internal/react/use-noop */
// Not including a default prop for value as it will
// Make the component a controlled component
};
export var datePickerDefaultAriaLabel = 'Date';
export var timePickerDefaultAriaLabel = 'Time';
var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
_inherits(DateTimePickerComponent, _React$Component);
var _super = _createSuper(DateTimePickerComponent);
function DateTimePickerComponent() {
var _this$props$datePicke, _this$props$timePicke;
var _this;
_classCallCheck(this, DateTimePickerComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
dateValue: ((_this$props$datePicke = _this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
isFocused: false,
timeValue: ((_this$props$timePicke = _this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
value: _this.props.defaultValue || '',
zoneValue: ''
});
// All state needs to be accessed via this function so that the state is mapped from props
// correctly to allow controlled/uncontrolled usage.
_defineProperty(_assertThisInitialized(_this), "getParsedValues", function () {
return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
});
_defineProperty(_assertThisInitialized(_this), "getValue", function () {
var _this$props$value;
return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
});
_defineProperty(_assertThisInitialized(_this), "onDateBlur", function (event) {
var _this$props$onBlur, _this$props, _this$props$datePicke2;
_this.setState({
isFocused: false
});
(_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 || _this$props$onBlur.call(_this$props, event);
if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
_this.props.datePickerProps.onBlur(event);
}
});
_defineProperty(_assertThisInitialized(_this), "onTimeBlur", function (event) {
var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
_this.setState({
isFocused: false
});
(_this$props$onBlur2 = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 || _this$props$onBlur2.call(_this$props2, event);
if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
_this.props.timePickerProps.onBlur(event);
}
});
_defineProperty(_assertThisInitialized(_this), "onDateFocus", function (event) {
var _this$props$onFocus, _this$props3, _this$props$datePicke3;
_this.setState({
isFocused: true
});
(_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props3, event);
if ((_this$props$datePicke3 = _this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
_this.props.datePickerProps.onFocus(event);
}
});
_defineProperty(_assertThisInitialized(_this), "onTimeFocus", function (event) {
var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
_this.setState({
isFocused: true
});
(_this$props$onFocus2 = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus2 === void 0 || _this$props$onFocus2.call(_this$props4, event);
if ((_this$props$timePicke3 = _this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
_this.props.timePickerProps.onFocus(event);
}
});
_defineProperty(_assertThisInitialized(_this), "onDateChange", function (dateValue) {
var _this$props$datePicke4;
var parsedValues = _this.getParsedValues();
_this.onValueChange({
dateValue: dateValue,
timeValue: parsedValues.timeValue,
zoneValue: parsedValues.zoneValue
});
if ((_this$props$datePicke4 = _this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
_this.props.datePickerProps.onChange(dateValue);
}
});
_defineProperty(_assertThisInitialized(_this), "onTimeChange", function (timeValue) {
var _this$props$timePicke4;
var parsedValues = _this.getParsedValues();
_this.onValueChange({
dateValue: parsedValues.dateValue,
timeValue: timeValue,
zoneValue: parsedValues.zoneValue
});
if ((_this$props$timePicke4 = _this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
_this.props.timePickerProps.onChange(timeValue);
}
});
_defineProperty(_assertThisInitialized(_this), "onClear", function () {
var _this$props$datePicke5, _this$props$timePicke5;
var parsedValues = _this.getParsedValues();
_this.onValueChange({
dateValue: '',
timeValue: '',
zoneValue: parsedValues.zoneValue
});
if ((_this$props$datePicke5 = _this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
_this.props.datePickerProps.onChange('');
}
if ((_this$props$timePicke5 = _this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
_this.props.timePickerProps.onChange('');
}
});
return _this;
}
_createClass(DateTimePickerComponent, [{
key: "parseValue",
value: function parseValue(value, dateValue, timeValue, zoneValue) {
if (this.props.parseValue) {
var parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
// This handles cases found in Jira where the parse function actually does
// nothing and returns undefined. The previous `getSafeState` function
// just spread the values over the state, but if it returned `undefined`,
// it would just rely on the previous state values. Considering this is
// what is input to this function anyway, this is a safe way to handle
// this, colocate the behavior, and not rely on `getSafeState`.
return parsedFromFn || {
dateValue: dateValue,
timeValue: timeValue,
zoneValue: zoneValue
};
}
var parsed = parseISO(value);
return isValid(parsed) ? {
dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
timeValue: format(parsed, convertTokens('HH:mm')),
zoneValue: format(parsed, convertTokens('ZZ'))
} : {
dateValue: dateValue,
timeValue: timeValue,
zoneValue: zoneValue
};
}
}, {
key: "onValueChange",
value: function onValueChange(_ref) {
var dateValue = _ref.dateValue,
timeValue = _ref.timeValue,
zoneValue = _ref.zoneValue;
this.setState({
dateValue: dateValue,
timeValue: timeValue,
zoneValue: zoneValue
});
if (dateValue && timeValue) {
var _this$props$onChange, _this$props5;
var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
parsedZone = _this$parseValue.zoneValue;
var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
this.setState({
value: valueWithValidZone
});
(_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props5, valueWithValidZone);
// If the date or time value was cleared when there is an existing datetime value, then clear the value.
} else if (this.getValue()) {
var _this$props$onChange2, _this$props6;
this.setState({
value: ''
});
(_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props6, '');
}
}
}, {
key: "render",
value: function render() {
var _this$props7 = this.props,
ariaDescribedBy = _this$props7['aria-describedby'],
_this$props7$appearan = _this$props7.appearance,
appearance = _this$props7$appearan === void 0 ? 'default' : _this$props7$appearan,
_this$props7$autoFocu = _this$props7.autoFocus,
autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
_this$props7$clearCon = _this$props7.clearControlLabel,
clearControlLabel = _this$props7$clearCon === void 0 ? 'clear' : _this$props7$clearCon,
_this$props7$datePick = _this$props7.datePickerProps,
datePickerProps = _this$props7$datePick === void 0 ? {} : _this$props7$datePick,
_this$props7$id = _this$props7.id,
id = _this$props7$id === void 0 ? '' : _this$props7$id,
_this$props7$innerPro = _this$props7.innerProps,
innerProps = _this$props7$innerPro === void 0 ? {} : _this$props7$innerPro,
_this$props7$isDisabl = _this$props7.isDisabled,
isDisabled = _this$props7$isDisabl === void 0 ? false : _this$props7$isDisabl,
_this$props7$isInvali = _this$props7.isInvalid,
isInvalid = _this$props7$isInvali === void 0 ? false : _this$props7$isInvali,
_this$props7$isRequir = _this$props7.isRequired,
isRequired = _this$props7$isRequir === void 0 ? false : _this$props7$isRequir,
_this$props7$locale = _this$props7.locale,
locale = _this$props7$locale === void 0 ? 'en-US' : _this$props7$locale,
_this$props7$name = _this$props7.name,
name = _this$props7$name === void 0 ? '' : _this$props7$name,
_this$props7$spacing = _this$props7.spacing,
spacing = _this$props7$spacing === void 0 ? 'default' : _this$props7$spacing,
testId = _this$props7.testId,
_this$props7$timePick = _this$props7.timePickerProps,
timePickerProps = _this$props7$timePick === void 0 ? {} : _this$props7$timePick;
var value = this.getValue();
var isFocused = this.state.isFocused;
var parsedValues = this.getParsedValues();
var dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
var datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
});
var timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
});
// Render DateTimePicker's IconContainer when a value has been filled
// Don't use Date or TimePicker's because they can't be customised
var isClearable = Boolean(dateValue || timeValue);
return jsx(DateTimePickerContainer, {
appearance: appearance,
isDisabled: isDisabled,
isFocused: isFocused,
isInvalid: isInvalid,
testId: testId,
innerProps: innerProps
}, jsx("input", {
name: name,
type: "hidden",
value: value,
"data-testid": testId && "".concat(testId, "--input")
}), jsx("div", {
css: datePickerContainerStyles
}, jsx(DatePicker, {
appearance: appearance,
"aria-describedby": datePickerAriaDescribedBy,
autoFocus: datePickerProps.autoFocus || autoFocus,
dateFormat: datePickerProps.dateFormat,
defaultIsOpen: datePickerProps.defaultIsOpen,
defaultValue: datePickerProps.defaultValue,
disabled: datePickerProps.disabled,
disabledDateFilter: datePickerProps.disabledDateFilter,
formatDisplayLabel: datePickerProps.formatDisplayLabel,
hideIcon: datePickerProps.hideIcon || true,
icon: datePickerProps.icon,
id: datePickerProps.id || id,
innerProps: datePickerProps.innerProps,
isDisabled: datePickerProps.isDisabled || isDisabled,
isInvalid: datePickerProps.isInvalid || isInvalid,
isRequired: datePickerProps.isRequired || isRequired,
isOpen: datePickerProps.isOpen,
label: datePickerLabel,
locale: datePickerProps.locale || locale,
maxDate: datePickerProps.maxDate,
minDate: datePickerProps.minDate,
name: datePickerProps.name,
nextMonthLabel: datePickerProps.nextMonthLabel,
onBlur: this.onDateBlur,
onChange: this.onDateChange,
onFocus: this.onDateFocus,
parseInputValue: datePickerProps.parseInputValue,
placeholder: datePickerProps.placeholder,
previousMonthLabel: datePickerProps.previousMonthLabel,
selectProps: mergedDatePickerSelectProps,
shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
spacing: datePickerProps.spacing || spacing,
testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
value: dateValue,
weekStartDay: datePickerProps.weekStartDay
})), jsx("div", {
css: timePickerContainerStyles
}, jsx(TimePicker, {
appearance: timePickerProps.appearance || appearance,
"aria-describedby": timePickerAriaDescribedBy,
autoFocus: timePickerProps.autoFocus,
defaultIsOpen: timePickerProps.defaultIsOpen,
defaultValue: timePickerProps.defaultValue,
formatDisplayLabel: timePickerProps.formatDisplayLabel,
hideIcon: timePickerProps.hideIcon || true,
id: timePickerProps.id,
innerProps: timePickerProps.innerProps,
isDisabled: timePickerProps.isDisabled || isDisabled,
isInvalid: timePickerProps.isInvalid || isInvalid,
isOpen: timePickerProps.isOpen,
isRequired: timePickerProps.isRequired || isRequired,
label: timePickerLabel,
locale: timePickerProps.locale || locale,
name: timePickerProps.name,
onBlur: this.onTimeBlur,
onChange: this.onTimeChange,
onFocus: this.onTimeFocus,
parseInputValue: timePickerProps.parseInputValue,
placeholder: timePickerProps.placeholder,
selectProps: mergedTimePickerSelectProps,
spacing: timePickerProps.spacing || spacing,
testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
timeFormat: timePickerProps.timeFormat,
timeIsEditable: timePickerProps.timeIsEditable,
times: timePickerProps.times,
value: timeValue
})), isClearable && !isDisabled ? jsx("button", {
css: iconContainerStyles,
onClick: this.onClear,
"data-testid": testId && "".concat(testId, "--icon--container"),
tabIndex: -1,
type: "button"
}, jsx(SelectClearIcon, {
size: "small",
primaryColor: "inherit",
label: clearControlLabel
})) : null);
}
}]);
return DateTimePickerComponent;
}(React.Component);
_defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
/**
* __Date time picker__
*
* A date time picker allows the user to select an associated date and time.
*
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
* - [Code](https://atlassian.design/components/datetime-picker/code)
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
*/
var DateTimePicker = withAnalyticsContext({
componentName: 'dateTimePicker',
packageName: packageName,
packageVersion: packageVersion
})(withAnalyticsEvents({
onChange: createAndFireEvent('atlaskit')({
action: 'changed',
actionSubject: 'dateTimePicker',
attributes: {
componentName: 'dateTimePicker',
packageName: packageName,
packageVersion: packageVersion
}
})
})(DateTimePickerComponent));
import DateTimePickerOld from './date-time-picker-class';
import DateTimePickerNew from './date-time-picker-fc';
var DateTimePicker = componentWithCondition(function () {
return fg('dst-date-time-picker-use-functional-component');
}, DateTimePickerNew, DateTimePickerOld);
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default DateTimePicker;

2

dist/esm/components/time-picker.js

@@ -20,3 +20,3 @@ import _extends from "@babel/runtime/helpers/extends";

var packageName = "@atlaskit/datetime-picker";
var packageVersion = "15.5.0";
var packageVersion = "15.5.1";
var menuStyles = {

@@ -23,0 +23,0 @@ /* Need to remove default absolute positioning as that causes issues with position fixed */

15

dist/esm/internal/date-time-picker-container.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/extends";

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { forwardRef } from 'react';
import { css, jsx } from '@emotion/react';

@@ -66,8 +67,8 @@ import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';

});
/**
* This is the container for the datetime picker component.
*/
export var DateTimePickerContainer = function DateTimePickerContainer(_ref) {
var isDisabled = _ref.isDisabled,
export var DateTimePickerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused,

@@ -77,4 +78,3 @@ appearance = _ref.appearance,

innerProps = _ref.innerProps,
testId = _ref.testId,
children = _ref.children;
testId = _ref.testId;
var notFocusedOrIsDisabled = !(isFocused || isDisabled);

@@ -84,4 +84,5 @@ return jsx("div", _extends({

}, innerProps, {
"data-testid": testId
"data-testid": testId,
ref: ref
}), children);
};
});

4

dist/types-ts4.5/components/date-picker-class.d.ts

@@ -100,3 +100,3 @@ /**

onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
defaultIsOpen: boolean;

@@ -119,3 +119,3 @@ defaultValue: string;

onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
export default DatePicker;

2

dist/types-ts4.5/components/date-picker-fc.d.ts

@@ -29,3 +29,3 @@ /// <reference types="react" />

}) | undefined;
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
export default DatePicker;

6

dist/types-ts4.5/components/date-picker.d.ts

@@ -12,3 +12,3 @@ /// <reference types="react" />

}) | undefined;
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
defaultIsOpen: boolean;

@@ -22,3 +22,3 @@ defaultValue: string;

onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
defaultIsOpen: boolean;

@@ -41,3 +41,3 @@ defaultValue: string;

onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
export default DatePicker;

57

dist/types-ts4.5/components/date-time-picker.d.ts

@@ -1,56 +0,3 @@

/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
import { jsx } from '@emotion/react';
import { type DateTimePickerBaseProps } from '../types';
interface State {
dateValue: string;
isFocused: boolean;
timeValue: string;
value: string;
zoneValue: string;
}
export declare const datePickerDefaultAriaLabel = "Date";
export declare const timePickerDefaultAriaLabel = "Time";
declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
static defaultProps: DateTimePickerBaseProps;
state: State;
getParsedValues: () => {
dateValue: string;
timeValue: string;
zoneValue: string;
};
getValue: () => string;
parseValue(value: string, dateValue: string, timeValue: string, zoneValue: string): {
dateValue: string;
timeValue: string;
zoneValue: string;
};
onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
onDateChange: (dateValue: string) => void;
onTimeChange: (timeValue: string) => void;
onClear: () => void;
onValueChange({ dateValue, timeValue, zoneValue, }: {
dateValue: string;
timeValue: string;
zoneValue: string;
}): void;
render(): jsx.JSX.Element;
}
export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
/**
* __Date time picker__
*
* A date time picker allows the user to select an associated date and time.
*
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
* - [Code](https://atlassian.design/components/datetime-picker/code)
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
*/
declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
/// <reference types="react" />
declare const DateTimePicker: import("react").FC<Pick<Pick<import("..").DateTimePickerProps, "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<unknown>, "key" | "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & Pick<Pick<Pick<Pick<Omit<import("..").DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<import("..").DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<import("..").DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<any>, "key" | "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<any>>;
export default DateTimePicker;

2

dist/types-ts4.5/components/time-picker.d.ts

@@ -12,3 +12,3 @@ import React from 'react';

*/
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "label" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "label" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
export default TimePicker;

22

dist/types-ts4.5/internal/date-time-picker-container.d.ts

@@ -1,11 +0,5 @@

/**
* @jsxRuntime classic
* @jsx jsx
*/
import { jsx } from '@emotion/react';
/// <reference types="react" />
import { type Appearance } from '../types';
/**
* This is the container for the datetime picker component.
*/
export declare const DateTimePickerContainer: ({ isDisabled, isFocused, appearance, isInvalid, innerProps, testId, children, }: {
type DateTimePickerContainerProps = {
children?: React.ReactNode;
isDisabled: boolean;

@@ -16,4 +10,8 @@ isFocused: boolean;

innerProps: React.AllHTMLAttributes<HTMLElement>;
testId?: string | undefined;
children: React.ReactNode;
}) => jsx.JSX.Element;
testId?: string;
};
/**
* This is the container for the datetime picker component.
*/
export declare const DateTimePickerContainer: import("react").ForwardRefExoticComponent<DateTimePickerContainerProps & import("react").RefAttributes<HTMLDivElement>>;
export {};

4

dist/types/components/date-picker-class.d.ts

@@ -100,3 +100,3 @@ /**

onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
defaultIsOpen: boolean;

@@ -119,3 +119,3 @@ defaultValue: string;

onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
export default DatePicker;

2

dist/types/components/date-picker-fc.d.ts

@@ -29,3 +29,3 @@ /// <reference types="react" />

}) | undefined;
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
export default DatePicker;

6

dist/types/components/date-picker.d.ts

@@ -12,3 +12,3 @@ /// <reference types="react" />

}) | undefined;
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
defaultIsOpen: boolean;

@@ -22,3 +22,3 @@ defaultValue: string;

onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
defaultIsOpen: boolean;

@@ -41,3 +41,3 @@ defaultValue: string;

onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
export default DatePicker;

57

dist/types/components/date-time-picker.d.ts

@@ -1,56 +0,3 @@

/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
import { jsx } from '@emotion/react';
import { type DateTimePickerBaseProps } from '../types';
interface State {
dateValue: string;
isFocused: boolean;
timeValue: string;
value: string;
zoneValue: string;
}
export declare const datePickerDefaultAriaLabel = "Date";
export declare const timePickerDefaultAriaLabel = "Time";
declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
static defaultProps: DateTimePickerBaseProps;
state: State;
getParsedValues: () => {
dateValue: string;
timeValue: string;
zoneValue: string;
};
getValue: () => string;
parseValue(value: string, dateValue: string, timeValue: string, zoneValue: string): {
dateValue: string;
timeValue: string;
zoneValue: string;
};
onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
onDateChange: (dateValue: string) => void;
onTimeChange: (timeValue: string) => void;
onClear: () => void;
onValueChange({ dateValue, timeValue, zoneValue, }: {
dateValue: string;
timeValue: string;
zoneValue: string;
}): void;
render(): jsx.JSX.Element;
}
export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
/**
* __Date time picker__
*
* A date time picker allows the user to select an associated date and time.
*
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
* - [Code](https://atlassian.design/components/datetime-picker/code)
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
*/
declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
/// <reference types="react" />
declare const DateTimePicker: import("react").FC<Pick<Pick<import("..").DateTimePickerProps, "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<unknown>, "key" | "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & Pick<Pick<Pick<Pick<Omit<import("..").DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<import("..").DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<import("..").DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<any>, "key" | "appearance" | "isDisabled" | "innerProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "datePickerProps" | "timePickerProps" | "parseValue"> & import("react").RefAttributes<any>>;
export default DateTimePicker;

2

dist/types/components/time-picker.d.ts

@@ -12,3 +12,3 @@ import React from 'react';

*/
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "label" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "label" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "locale" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
export default TimePicker;

22

dist/types/internal/date-time-picker-container.d.ts

@@ -1,11 +0,5 @@

/**
* @jsxRuntime classic
* @jsx jsx
*/
import { jsx } from '@emotion/react';
/// <reference types="react" />
import { type Appearance } from '../types';
/**
* This is the container for the datetime picker component.
*/
export declare const DateTimePickerContainer: ({ isDisabled, isFocused, appearance, isInvalid, innerProps, testId, children, }: {
type DateTimePickerContainerProps = {
children?: React.ReactNode;
isDisabled: boolean;

@@ -16,4 +10,8 @@ isFocused: boolean;

innerProps: React.AllHTMLAttributes<HTMLElement>;
testId?: string | undefined;
children: React.ReactNode;
}) => jsx.JSX.Element;
testId?: string;
};
/**
* This is the container for the datetime picker component.
*/
export declare const DateTimePickerContainer: import("react").ForwardRefExoticComponent<DateTimePickerContainerProps & import("react").RefAttributes<HTMLDivElement>>;
export {};

5

package.json
{
"name": "@atlaskit/datetime-picker",
"version": "15.5.0",
"version": "15.5.1",
"description": "A date time picker allows the user to select an associated date and time.",

@@ -106,2 +106,5 @@ "publishConfig": {

"type": "boolean"
},
"dst-date-time-picker-use-functional-component": {
"type": "boolean"
}

@@ -108,0 +111,0 @@ },

CHANGELOG.md

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc