@atlaskit/datetime-picker
Version:
A date time picker allows the user to select an associated date and time.
540 lines (531 loc) • 25.8 kB
JavaScript
/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = void 0;
require("./date-time-picker.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _dateFns = require("date-fns");
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _compiled = require("@atlaskit/primitives/compiled");
var _styles = require("@atlaskit/react-select/styles");
var _dateTimePickerContainer = require("../internal/date-time-picker-container");
var _formatDateTimeZoneIntoIso = require("../internal/format-date-time-zone-into-iso");
var _parseTokens = require("../internal/parse-tokens");
var _datePicker = _interopRequireDefault(require("./date-picker"));
var _timePicker = _interopRequireDefault(require("./time-picker"));
var _excluded = ["selectProps"],
_excluded2 = ["selectProps"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; } /// <reference types="node" />
// for typing `process`
// oxlint-disable-next-line @atlassian/no-restricted-imports
var packageName = "@atlaskit/datetime-picker";
var packageVersion = "19.0.1";
var analyticsAttributes = {
componentName: 'dateTimePicker',
packageName: packageName,
packageVersion: packageVersion
};
var compiledStyles = {
datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
};
var innerCornerRadius = "calc(".concat("var(--ds-radius-medium, 6px)", " - ", "var(--ds-border-width, 1px)", ")");
var cornerRadiusStyles = {
start: {
borderStartStartRadius: innerCornerRadius,
borderEndStartRadius: innerCornerRadius
},
end: {
borderStartEndRadius: innerCornerRadius,
borderEndEndRadius: innerCornerRadius
},
none: {}
};
// react-select overrides (via @atlaskit/select).
var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
return {
control: function control(style, _ref) {
var isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused;
return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), isInputMotionEnabled && !isDisabled ? {
transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
} : {}), {}, {
backgroundColor: 'transparent',
border: 2,
borderRadius: 0
}, isInputMotionEnabled ? _objectSpread(_objectSpread({}, cornerRadiusStyles[roundedCorners]), {}, {
boxShadow: isFocused ? "0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)", ", inset 0 0 0 ", "var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)") : 'none'
}) : {}), {}, {
paddingLeft: 0,
':hover': {
backgroundColor: 'transparent',
cursor: 'inherit'
}
});
}
};
};
/**
* Two action types keep the reducer focused:
*
* - APPLY: used by user-interaction handlers. The handler computes the full
* next state (including the new ISO value) and applies it atomically. This
* guarantees a single re-render with no cascades regardless of React version.
*
* - SET_VALUE: used by the `providedValue` prop effect. The reducer owns all
* parsing logic for external value changes, including the empty-string case
* that the previous useState approach missed.
*/
var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
/**
* __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 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
var ariaDescribedBy = _ref2['aria-describedby'],
_ref2$appearance = _ref2.appearance,
appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
_ref2$autoFocus = _ref2.autoFocus,
autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
_ref2$clearControlLab = _ref2.clearControlLabel,
clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
_ref2$datePickerProps = _ref2.datePickerProps,
datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
_ref2$defaultValue = _ref2.defaultValue,
defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
_ref2$id = _ref2.id,
id = _ref2$id === void 0 ? '' : _ref2$id,
_ref2$innerProps = _ref2.innerProps,
innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
_ref2$isDisabled = _ref2.isDisabled,
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
_ref2$isInvalid = _ref2.isInvalid,
isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
_ref2$isRequired = _ref2.isRequired,
isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
_ref2$name = _ref2.name,
name = _ref2$name === void 0 ? '' : _ref2$name,
_ref2$onBlur = _ref2.onBlur,
onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
_ref2$onChange = _ref2.onChange,
onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
_ref2$onFocus = _ref2.onFocus,
onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
providedParseValue = _ref2.parseValue,
_ref2$spacing = _ref2.spacing,
spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
_ref2$locale = _ref2.locale,
locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
testId = _ref2.testId,
_ref2$timePickerProps = _ref2.timePickerProps,
timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
providedValue = _ref2.value;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isFocused = _useState2[0],
setIsFocused = _useState2[1];
var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
/**
* Defined inside the component so the reducer closes over `providedParseValue`
* without needing to smuggle it through every action payload. React always
* calls the reducer from the latest render, so stale-closure is not a concern.
*/
var reducer = function reducer(state, action) {
switch (action.type) {
case 'APPLY':
return action.payload;
case 'SET_VALUE':
{
var newValue = action.payload;
// Explicit empty-string handling: clear all sub-fields so the date
// and time pickers visually reset when a controlled value is cleared.
if (!newValue) {
return {
value: '',
dateValue: '',
timeValue: '',
zoneValue: ''
};
}
if (providedParseValue) {
var _parsed = providedParseValue(newValue, state.dateValue, state.timeValue, state.zoneValue);
return _parsed ? _objectSpread({
value: newValue
}, _parsed) : {
value: newValue,
dateValue: state.dateValue,
timeValue: state.timeValue,
zoneValue: state.zoneValue
};
}
var parsed = (0, _dateFns.parseISO)(newValue);
return (0, _dateFns.isValid)(parsed) ? {
value: newValue,
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'))
} : {
value: newValue,
dateValue: '',
timeValue: '',
zoneValue: ''
};
}
default:
return state;
}
};
var _useReducer = (0, _react.useReducer)(reducer, null, function () {
var _ref3;
var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
if (!initialValue) {
return {
value: '',
dateValue: initialDate,
timeValue: initialTime,
zoneValue: ''
};
}
if (providedParseValue) {
var _parsed2 = providedParseValue(initialValue, initialDate, initialTime, '');
return _parsed2 ? _objectSpread({
value: initialValue
}, _parsed2) : {
value: initialValue,
dateValue: initialDate,
timeValue: initialTime,
zoneValue: ''
};
}
var parsed = (0, _dateFns.parseISO)(initialValue);
return (0, _dateFns.isValid)(parsed) ? {
value: initialValue,
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'))
} : {
value: initialValue,
dateValue: initialDate,
timeValue: initialTime,
zoneValue: ''
};
}),
_useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
dtState = _useReducer2[0],
dispatch = _useReducer2[1];
// if a previously controlled value becomes undefined, it clears the reducer
// state so the hidden input no longer keeps the stale ISO timestamp.
// Without this, components that try to clear their components by providing
// `undefined` to the `value` prop will not clear the hidden input and will
// cause unexpected issues.
var hasReceivedProvidedValue = (0, _react.useRef)(providedValue !== undefined);
// We don't want to set the state on the first render, as it would
// needlessly be a duplicate.
var isFirstRender = (0, _react.useRef)(true);
(0, _react.useEffect)(function () {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
if (providedValue !== undefined) {
hasReceivedProvidedValue.current = true;
dispatch({
type: 'SET_VALUE',
payload: providedValue
});
} else if (hasReceivedProvidedValue.current) {
hasReceivedProvidedValue.current = false;
dispatch({
type: 'SET_VALUE',
payload: ''
});
}
}, [providedValue]);
var parseValue = (0, _react.useCallback)(function (value, providedDateValue, providedTimeValue, providedZoneValue) {
if (providedParseValue) {
var parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
// 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: providedDateValue,
timeValue: providedTimeValue,
zoneValue: providedZoneValue
};
}
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: dtState.dateValue,
timeValue: dtState.timeValue,
zoneValue: dtState.zoneValue
};
}, [providedParseValue, dtState.dateValue, dtState.timeValue, dtState.zoneValue]);
var onDateBlur = function onDateBlur(event) {
setIsFocused(false);
onBlur(event);
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
datePickerPropsWithSelectProps.onBlur(event);
}
};
var onTimeBlur = function onTimeBlur(event) {
setIsFocused(false);
onBlur(event);
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
timePickerPropsWithSelectProps.onBlur(event);
}
};
var onDateFocus = function onDateFocus(event) {
setIsFocused(false);
onFocus(event);
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
datePickerPropsWithSelectProps.onFocus(event);
}
};
var onTimeFocus = function onTimeFocus(event) {
setIsFocused(false);
onFocus(event);
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
timePickerPropsWithSelectProps.onFocus(event);
}
};
var onDateChange = function onDateChange(newDateValue) {
var parsedValues = parseValue(dtState.value, newDateValue, dtState.timeValue, dtState.zoneValue);
onValueChange({
providedDateValue: newDateValue,
providedTimeValue: parsedValues.timeValue,
providedZoneValue: parsedValues.zoneValue
});
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
datePickerPropsWithSelectProps.onChange(newDateValue);
}
};
var onTimeChange = function onTimeChange(newTimeValue) {
var parsedValues = parseValue(dtState.value, dtState.dateValue, newTimeValue, dtState.zoneValue);
onValueChange({
providedDateValue: parsedValues.dateValue,
providedTimeValue: newTimeValue,
providedZoneValue: parsedValues.zoneValue
});
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
timePickerPropsWithSelectProps.onChange(newTimeValue);
}
};
var onClear = function onClear() {
var parsedValues = parseValue(dtState.value, dtState.dateValue, dtState.timeValue, dtState.zoneValue);
onValueChange({
providedDateValue: '',
providedTimeValue: '',
providedZoneValue: parsedValues.zoneValue
});
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
datePickerPropsWithSelectProps.onChange('');
}
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
timePickerPropsWithSelectProps.onChange('');
}
};
var onChangePropWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onChangeProp,
action: 'selectedDate',
actionSubject: 'dateTimePicker'
}, analyticsAttributes));
var onValueChange = function onValueChange(_ref4) {
var providedDateValue = _ref4.providedDateValue,
providedTimeValue = _ref4.providedTimeValue,
providedZoneValue = _ref4.providedZoneValue;
if (providedDateValue && providedTimeValue) {
var isoValue = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
parsedZone = _parseValue.zoneValue;
var valueWithValidZone = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, parsedZone);
dispatch({
type: 'APPLY',
payload: {
value: valueWithValidZone,
dateValue: providedDateValue,
timeValue: providedTimeValue,
zoneValue: parsedZone
}
});
onChangePropWithAnalytics(valueWithValidZone);
// If the date or time value was cleared when there is an existing datetime value, then clear the value.
} else if (dtState.value) {
dispatch({
type: 'APPLY',
payload: {
value: '',
dateValue: providedDateValue,
timeValue: providedTimeValue,
zoneValue: providedZoneValue
}
});
onChangePropWithAnalytics('');
} else {
dispatch({
type: 'APPLY',
payload: {
value: '',
dateValue: providedDateValue,
timeValue: providedTimeValue,
zoneValue: providedZoneValue
}
});
}
};
// 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(dtState.dateValue || dtState.timeValue);
var hasClearButton = isClearable && !isDisabled;
var dateStyles = (0, _react.useMemo)(function () {
return getStyles(isInputMotionEnabled, 'start');
}, [isInputMotionEnabled]);
var timeStyles = (0, _react.useMemo)(function () {
return getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end');
}, [isInputMotionEnabled, hasClearButton]);
var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
datePickerProps = (0, _objectWithoutProperties2.default)(datePickerPropsWithSelectProps, _excluded);
var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
var datePickerLabel = datePickerProps.label || 'Date';
var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
styles: (0, _styles.mergeStyles)(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
});
var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
timePickerProps = (0, _objectWithoutProperties2.default)(timePickerPropsWithSelectProps, _excluded2);
var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
var timePickerLabel = timePickerProps.label || 'Time';
var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
styles: (0, _styles.mergeStyles)(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
});
return /*#__PURE__*/_react.default.createElement(_dateTimePickerContainer.DateTimePickerContainer, {
appearance: appearance,
isDisabled: isDisabled,
isFocused: isFocused,
isInvalid: isInvalid,
testId: testId,
innerProps: innerProps,
ref: ref
}, /*#__PURE__*/_react.default.createElement("input", {
name: name,
type: "hidden",
value: dtState.value,
"data-testid": testId && "".concat(testId, "--input")
}), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: compiledStyles.datePickerContainerStyles
}, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
appearance: appearance,
"aria-describedby": datePickerAriaDescribedBy,
autoFocus: datePickerProps.autoFocus || autoFocus,
calendarLabel: datePickerProps.calendarLabel,
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,
inputLabel: datePickerProps.inputLabel,
inputLabelId: datePickerProps.inputLabelId,
isDisabled: datePickerProps.isDisabled || isDisabled,
isInvalid: datePickerProps.isInvalid || isInvalid,
isOpen: datePickerProps.isOpen,
isRequired: datePickerProps.isRequired || isRequired,
label: datePickerLabel,
locale: datePickerProps.locale || locale,
maxDate: datePickerProps.maxDate,
minDate: datePickerProps.minDate,
name: datePickerProps.name,
nextMonthLabel: datePickerProps.nextMonthLabel,
onBlur: onDateBlur,
onChange: onDateChange,
onFocus: onDateFocus,
openCalendarLabel: datePickerProps.openCalendarLabel,
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: dtState.dateValue,
weekStartDay: datePickerProps.weekStartDay
})), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: compiledStyles.timePickerContainerStyles
}, /*#__PURE__*/_react.default.createElement(_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: onTimeBlur,
onChange: onTimeChange,
onFocus: 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: dtState.timeValue
})), hasClearButton ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
xcss: compiledStyles.iconContainerStyles
}, /*#__PURE__*/_react.default.createElement(_button.default, {
appearance: "subtle",
label: clearControlLabel,
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_crossCircle.default, (0, _extends2.default)({}, iconProps, {
color: "var(--ds-text-subtlest, #6B6E76)",
size: "small"
}));
},
onClick: onClear,
testId: testId && "".concat(testId, "--icon--container"),
tabIndex: -1
})) : null);
});
var _default = exports.default = DateTimePicker;