@atlaskit/datetime-picker
Version:
A date time picker allows the user to select an associated date and time.
649 lines (640 loc) • 31.8 kB
JavaScript
/* date-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.default = void 0;
require("./date-picker.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _dateFns = require("date-fns");
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
var _css = require("@atlaskit/css");
var _useId = require("@atlaskit/ds-lib/use-id");
var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
var _localizationProvider = require("@atlaskit/locale/localization-provider");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _compiled = require("@atlaskit/primitives/compiled");
var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
var _styles = require("@atlaskit/react-select/styles");
var _emptyComponent = require("../internal/empty-component");
var _formatDate = require("../internal/format-date");
var _getParsedIso = require("../internal/get-parsed-iso");
var _getPlaceholder = require("../internal/get-placeholder");
var _getSafeCalendarValue = require("../internal/get-safe-calendar-value");
var _getShortIsoString = require("../internal/get-short-iso-string");
var _indicatorsContainer = require("../internal/indicators-container");
var _isDateDisabled = require("../internal/is-date-disabled");
var _menu = require("../internal/menu");
var _menuTopLayer = require("../internal/menu-top-layer");
var _parseDate = require("../internal/parse-date");
var _singleValue = require("../internal/single-value");
var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"]; /// <reference types="node" />
// for typing `process`
// oxlint-disable-next-line @atlassian/no-restricted-imports
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; }
var packageName = "@atlaskit/datetime-picker";
var packageVersion = "18.7.2";
var styles = {
pickerContainerStyle: "_kqswh2mm",
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz1rpy _152tze3t _rjxpze3t _30l3azsu",
iconSpacingWithClearButtonStyles: "_12l2xy5q",
iconSpacingWithoutClearButtonStyles: "_12l21b66"
};
var analyticsAttributes = {
componentName: 'datePicker',
packageName: packageName,
packageVersion: packageVersion
};
/**
* __Date picker__
*
* A date picker allows the user to select a particular date.
*
* - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
* - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
* - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
*/
var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwardedRef) {
var containerRef = (0, _react.useRef)(null);
var calendarRef = (0, _react.useRef)(null);
var calendarButtonRef = (0, _react.useRef)(null);
// Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
// opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
var isPointerInteractionRef = (0, _react.useRef)(false);
var _props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
_props$autoFocus = props.autoFocus,
autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
_props$clearControlLa = props.clearControlLabel,
clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
_props$hideIcon = props.hideIcon,
hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
_props$openCalendarLa = props.openCalendarLabel,
openCalendarLabel = _props$openCalendarLa === void 0 ? 'Open calendar' : _props$openCalendarLa,
_props$defaultIsOpen = props.defaultIsOpen,
defaultIsOpen = _props$defaultIsOpen === void 0 ? false : _props$defaultIsOpen,
_props$defaultValue = props.defaultValue,
defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? [] : _props$disabled,
_props$disabledDateFi = props.disabledDateFilter,
disabledDateFilter = _props$disabledDateFi === void 0 ? function (_) {
return false;
} : _props$disabledDateFi,
_props$icon = props.icon,
Icon = _props$icon === void 0 ? _calendar.default : _props$icon,
_props$id = props.id,
id = _props$id === void 0 ? '' : _props$id,
_props$innerProps = props.innerProps,
innerProps = _props$innerProps === void 0 ? {} : _props$innerProps,
_props$inputLabel = props.inputLabel,
inputLabel = _props$inputLabel === void 0 ? 'Date picker' : _props$inputLabel,
inputLabelId = props.inputLabelId,
_props$isDisabled = props.isDisabled,
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
_props$isInvalid = props.isInvalid,
isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
_props$isRequired = props.isRequired,
isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
_props$label = props.label,
label = _props$label === void 0 ? '' : _props$label,
_props$name = props.name,
name = _props$name === void 0 ? '' : _props$name,
_props$onBlur = props.onBlur,
onBlur = _props$onBlur === void 0 ? function (_event) {} : _props$onBlur,
_props$onChange = props.onChange,
onChangeProp = _props$onChange === void 0 ? function (_value) {} : _props$onChange,
_props$onFocus = props.onFocus,
onFocus = _props$onFocus === void 0 ? function (_event) {} : _props$onFocus,
_props$selectProps = props.selectProps,
selectProps = _props$selectProps === void 0 ? {} : _props$selectProps,
shouldShowCalendarButton = props.shouldShowCalendarButton,
_props$spacing = props.spacing,
spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
_props$locale = props.locale,
propLocale = _props$locale === void 0 ? 'en-US' : _props$locale,
propValue = props.value,
isOpenProp = props.isOpen,
maxDate = props.maxDate,
minDate = props.minDate,
weekStartDay = props.weekStartDay,
formatDisplayLabel = props.formatDisplayLabel,
testId = props.testId,
ariaDescribedBy = props['aria-describedby'],
placeholder = props.placeholder,
nextMonthLabel = props.nextMonthLabel,
previousMonthLabel = props.previousMonthLabel,
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
var _useState = (0, _react.useState)(defaultIsOpen),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
_ = _useState4[0],
setIsFocused = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
clearingFromIcon = _useState6[0],
setClearingFromIcon = _useState6[1];
var _useState7 = (0, _react.useState)(selectProps.inputValue),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
selectInputValue = _useState8[0],
setSelectInputValue = _useState8[1];
var _useState9 = (0, _react.useState)(propValue || defaultValue),
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
value = _useState0[0],
setValue = _useState0[1];
var _useState1 = (0, _react.useState)(propValue || defaultValue || (0, _getShortIsoString.getShortISOString)(new Date())),
_useState10 = (0, _slicedToArray2.default)(_useState1, 2),
calendarValue = _useState10[0],
setCalendarValue = _useState10[1];
var _useState11 = (0, _react.useState)((0, _localizationProvider.createLocalizationProvider)(propLocale)),
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
l10n = _useState12[0],
setL10n = _useState12[1];
var _useState13 = (0, _react.useState)(propLocale),
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
locale = _useState14[0],
setLocale = _useState14[1];
var _useState15 = (0, _react.useState)(false),
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
shouldSetFocusOnCurrentDay = _useState16[0],
setShouldSetFocusOnCurrentDay = _useState16[1];
var _useState17 = (0, _react.useState)(false),
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
isKeyDown = _useState18[0],
setIsKeyDown = _useState18[1];
var _useState19 = (0, _react.useState)(false),
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
wasOpenedFromCalendarButton = _useState20[0],
setWasOpenedFromCalendarButton = _useState20[1];
// Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
var _useReducer = (0, _react.useReducer)(function (x) {
return !x;
}, true),
_useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
forceUpdate = _useReducer2[1];
var onChangePropWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onChangeProp,
action: 'selectedDate',
actionSubject: 'datePicker'
}, analyticsAttributes));
if (propLocale !== locale) {
setL10n((0, _localizationProvider.createLocalizationProvider)(propLocale));
setLocale(propLocale);
}
(0, _react.useEffect)(function () {
// Only move focus when the dedicated calendar button opened the menu.
if (!isKeyDown) {
return;
}
if (isOpen && wasOpenedFromCalendarButton) {
var _calendarRef$current;
setIsKeyDown(false);
// Focus on the first button within the calendar
calendarRef === null || calendarRef === void 0 || (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 || (_calendarRef$current = _calendarRef$current.querySelector('button')) === null || _calendarRef$current === void 0 || _calendarRef$current.focus();
}
}, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
var getValue = function getValue() {
return propValue !== null && propValue !== void 0 ? propValue : value;
};
var getIsOpen = function getIsOpen() {
return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
};
var onCalendarChange = function onCalendarChange(_ref) {
var iso = _ref.iso;
setCalendarValue((0, _getParsedIso.getParsedISO)({
iso: iso
}));
};
var onCalendarSelect = function onCalendarSelect(_ref2) {
var iso = _ref2.iso;
setSelectInputValue('');
setIsOpen(false);
setCalendarValue(iso);
setValue(iso);
setWasOpenedFromCalendarButton(false);
onChangePropWithAnalytics(iso);
// When using top-layer, PopupContent handles focus restoration automatically
// on close based on the role. Only manually restore focus for the legacy path.
if (!(0, _fg.fg)('platform-dst-top-layer')) {
if (wasOpenedFromCalendarButton) {
var _calendarButtonRef$cu;
(_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
} else {
var _containerRef$current;
var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
}
}
setIsOpen(false);
};
var onInputClick = function onInputClick() {
if (!isDisabled && !getIsOpen()) {
setIsOpen(true);
setWasOpenedFromCalendarButton(false);
}
};
var onContainerBlur = function onContainerBlur(event) {
var _containerRef$current2;
var newlyFocusedElement = event.relatedTarget;
isPointerInteractionRef.current = false;
if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
setIsOpen(false);
setShouldSetFocusOnCurrentDay(false);
setWasOpenedFromCalendarButton(false);
onBlur(event);
}
};
var onContainerFocus = function onContainerFocus() {
setShouldSetFocusOnCurrentDay(false);
};
var onSelectBlur = function onSelectBlur(event) {
var _containerRef$current3;
var newlyFocusedElement = event.relatedTarget;
if (clearingFromIcon) {
// Don't close menu if blurring after the user has clicked clear
setClearingFromIcon(false);
} else if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(newlyFocusedElement))) {
// Don't close menu if focus is staying within the date picker's
// container. Makes keyboard accessibility of calendar possible
setIsOpen(false);
setIsFocused(false);
setWasOpenedFromCalendarButton(false);
}
};
var onSelectFocus = function onSelectFocus(event) {
var value = getValue();
if (clearingFromIcon) {
// Don't open menu if focussing after the user has clicked clear
setClearingFromIcon(false);
} else {
// Opening an auto popover during pointer focus allows the matching pointerup
// to immediately light-dismiss it. Let the subsequent click open it instead.
if (!(0, _fg.fg)('platform-dst-top-layer') || !isPointerInteractionRef.current) {
// Don't open when focused into via keyboard if the calendar button is present
setIsOpen(!shouldShowCalendarButton);
}
setCalendarValue(value);
setIsFocused(true);
setWasOpenedFromCalendarButton(false);
}
onFocus(event);
};
var onTextInput = function onTextInput(event) {
var inputValue = event.target.value;
if (inputValue) {
var parsed = (0, _parseDate.parseDate)(inputValue, {
parseInputValue: rest === null || rest === void 0 ? void 0 : rest.parseInputValue,
dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
l10n: l10n
});
// Only try to set the date if we have month & day
if (parsed && (0, _dateFns.isValid)(parsed)) {
// We format the parsed date to YYYY-MM-DD here because
// this is the format expected by the @atlaskit/calendar component
setCalendarValue((0, _getShortIsoString.getShortISOString)(parsed));
}
}
setIsOpen(true);
setWasOpenedFromCalendarButton(false);
};
var onInputKeyDown = function onInputKeyDown(event) {
var value = getValue();
var keyPressed = event.key.toLowerCase();
// If the input is focused and the calendar is not visible, handle space and enter clicks
if (!isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
setIsOpen(true);
setWasOpenedFromCalendarButton(false);
}
switch (keyPressed) {
case 'escape':
// Restore focus because it may have moved from the input into the calendar.
if (wasOpenedFromCalendarButton) {
var _calendarButtonRef$cu2;
(_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
} else {
var _containerRef$current4;
var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
}
setIsOpen(false);
setShouldSetFocusOnCurrentDay(false);
setWasOpenedFromCalendarButton(false);
break;
case 'backspace':
case 'delete':
{
var inputCount = 0;
if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
// If being cleared from keyboard, don't change behaviour
setClearingFromIcon(false);
setValue('');
}
break;
}
case 'enter':
if (!isOpen) {
return;
}
// Prevent form submission when a date is selected
// using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
// for more details.
event.preventDefault();
if (!(0, _isDateDisabled.isDateDisabled)(calendarValue, {
disabled: disabled
})) {
// Get a safe `calendarValue` in case the value exceeds the maximum
// allowed by ISO 8601
var safeCalendarValue = (0, _getSafeCalendarValue.getSafeCalendarValue)(calendarValue);
var valueChanged = safeCalendarValue !== value;
setSelectInputValue('');
setIsOpen(false);
setValue(safeCalendarValue);
setCalendarValue(safeCalendarValue);
setWasOpenedFromCalendarButton(wasOpenedFromCalendarButton);
if (valueChanged) {
onChangePropWithAnalytics(safeCalendarValue);
}
}
break;
case 'arrowdown':
case 'arrowup':
if (!shouldSetFocusOnCurrentDay) {
setIsOpen(true);
setShouldSetFocusOnCurrentDay(true);
}
break;
default:
break;
}
};
var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
// Don't allow an arrow up or down to open the menu, since the input key
// down handler is actually on the parent.
if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
e.stopPropagation();
}
// We want to stop this from triggering other keydown events, particularly
// for space and enter presses. Otherwise, it opens and then closes
// immediately.
if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
e.stopPropagation();
setIsKeyDown(true);
setWasOpenedFromCalendarButton(true);
}
};
// This event handler is triggered from both keydown and click. It's weird.
var onCalendarButtonClick = function onCalendarButtonClick(e) {
if (!getIsOpen() && (0, _fg.fg)('platform-dst-top-layer')) {
setIsKeyDown(true);
}
setIsOpen(function (isOpen) {
if (isOpen) {
var _props$selectProps2, _props$selectProps2$o;
(_props$selectProps2 = props.selectProps) === null || _props$selectProps2 === void 0 || (_props$selectProps2$o = _props$selectProps2.onMenuClose) === null || _props$selectProps2$o === void 0 || _props$selectProps2$o.call(_props$selectProps2);
return false;
} else {
var _props$selectProps3, _props$selectProps3$o;
(_props$selectProps3 = props.selectProps) === null || _props$selectProps3 === void 0 || (_props$selectProps3$o = _props$selectProps3.onMenuOpen) === null || _props$selectProps3$o === void 0 || _props$selectProps3$o.call(_props$selectProps3);
return true;
}
});
setWasOpenedFromCalendarButton(true);
e.stopPropagation();
};
var onClear = function onClear() {
setValue('');
setCalendarValue(defaultValue || (0, _getShortIsoString.getShortISOString)(new Date()));
if (!hideIcon) {
setClearingFromIcon(true);
}
onChangePropWithAnalytics('');
};
// `unknown` is used because `value` is unused so it does not matter.
var onSelectChange = function onSelectChange(_value, action) {
// Used for native clear event in React Select
// Triggered when clicking ClearIndicator or backspace with no value
if (action.action === 'clear') {
onClear();
}
};
var handleSelectInputChange = function handleSelectInputChange(selectInputValue, actionMeta) {
if (selectProps.onInputChange) {
selectProps.onInputChange(selectInputValue, actionMeta);
}
setSelectInputValue(selectInputValue);
};
var getContainerRef = (0, _react.useCallback)(function (ref) {
var oldRef = containerRef.current;
containerRef.current = ref;
// Cause a re-render if we're getting the container ref for the first time
// as the layered menu requires it for dimension calculation
if (oldRef == null && ref != null) {
forceUpdate();
}
}, [containerRef]);
var getterValue = getValue();
var actualSelectInputValue;
actualSelectInputValue = selectInputValue;
var menuIsOpen = getIsOpen() && !isDisabled;
var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
var clearIndicator = function clearIndicator(props) {
return /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.dropdownIndicatorStyles
}, /*#__PURE__*/React.createElement(Icon, props));
};
var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
var valueId = (0, _useId.useId)();
var SingleValue = (0, _singleValue.makeSingleValue)({
id: valueId,
lang: propLocale
});
var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
DropdownIndicator: shouldShowCalendarButton ? _emptyComponent.EmptyComponent : dropDownIcon
}, shouldShowCalendarButton ? {
IndicatorsContainer: function IndicatorsContainer(props) {
return /*#__PURE__*/React.createElement(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
showClearIndicator: showClearIndicator
}));
}
} : {}), {}, {
Menu: (0, _fg.fg)('platform-dst-top-layer') ? _menuTopLayer.MenuTopLayer : _menu.Menu,
SingleValue: SingleValue
}, !showClearIndicator && {
ClearIndicator: _emptyComponent.EmptyComponent
});
var _selectProps$styles = selectProps.styles,
selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
var disabledStyle = isDisabled ? {
pointerEvents: 'none',
color: "var(--ds-icon-disabled, #080F214A)"
} : {};
var calendarProps = {
calendarContainerRef: containerRef.current,
calendarDisabled: disabled,
calendarDisabledDateFilter: disabledDateFilter,
calendarMaxDate: maxDate,
calendarMinDate: minDate,
calendarRef: calendarRef,
calendarValue: getterValue && (0, _getShortIsoString.getShortISOString)((0, _dateFns.parseISO)(getterValue)),
calendarView: calendarValue,
onCalendarChange: onCalendarChange,
onCalendarSelect: onCalendarSelect,
calendarLocale: locale,
calendarWeekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : (0, _fg.fg)('platform-dst-locale-week-start-day') ? l10n.getFirstDayOfWeek() : undefined,
shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay,
/**
* This overrides the inner wrapper the Calendar.
* @private Please use this with extreme caution, this API may be changed in the future.
*/
menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
};
var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
control: function control(base) {
return _objectSpread(_objectSpread({}, base), disabledStyle);
},
indicatorsContainer: function indicatorsContainer(base) {
return _objectSpread(_objectSpread({}, base), {}, {
paddingLeft: "var(--ds-space-025, 2px)",
// ICON_PADDING = 2
paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
});
}
});
var initialValue = getterValue ? {
label: (0, _formatDate.formatDate)(getterValue, {
formatDisplayLabel: formatDisplayLabel,
dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
l10n: l10n
}),
value: getterValue
} : null;
// `label` takes precedence of the `inputLabel`
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
"data-testid": testId && "".concat(testId, "--container"),
onBlur: onContainerBlur
// Reset before descendant click handlers run: click happens after native light-dismiss, so
// any focus they move is safe to treat as non-pointer focus. Capture also guarantees cleanup
// when a descendant stops the bubbling click.
,
onClickCapture: function onClickCapture() {
isPointerInteractionRef.current = false;
},
onFocus: onContainerFocus,
onClick: onInputClick,
onInput: onTextInput,
onKeyDown: onInputKeyDown
// A cancelled pointer produces no click, so clear the tracking state here instead.
,
onPointerCancelCapture: function onPointerCancelCapture() {
isPointerInteractionRef.current = false;
}
// Capture pointerdown before it moves focus into a descendant Select control.
,
onPointerDownCapture: function onPointerDownCapture() {
isPointerInteractionRef.current = true;
},
ref: getContainerRef
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
,
role: "presentation",
className: (0, _runtime.ax)([styles.pickerContainerStyle])
}), /*#__PURE__*/React.createElement("input", {
name: name,
type: "hidden",
value: getterValue,
"data-testid": testId && "".concat(testId, "--input")
}), /*#__PURE__*/React.createElement(_default2.default, (0, _extends2.default)({
appearance: appearance,
"aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
label: label || undefined,
autoFocus: autoFocus,
clearControlLabel: clearControlLabel,
closeMenuOnSelect: true,
enableAnimation: false,
inputId: id,
inputValue: actualSelectInputValue,
isDisabled: isDisabled,
isRequired: isRequired,
menuIsOpen: menuIsOpen,
onBlur: onSelectBlur,
onChange: onSelectChange,
onFocus: onSelectFocus,
onInputChange: handleSelectInputChange,
placeholder: (0, _getPlaceholder.getPlaceholder)({
placeholder: placeholder,
l10n: l10n
})
// @ts-ignore -- Type 'OptionType' is not assignable to type '{ label: string; value: string; }'
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
,
styles: mergedStyles,
value: initialValue
}, selectProps, {
// For some reason, this and the below `styles` type error _only_ show
// up when you alter some of the properties in the `selectComponents`
// object. These errors are still present, and I suspect have always
// been present, without changing the unrelated code. Ignoring as the
// component still works as expected despite this error. And also
// because the select refresh team may solve it later.
components: selectComponents
// These are below the spread because I don't know what is in
// selectProps or not and what wil be overwritten
,
isClearable: true,
isInvalid: isInvalid,
spacing: spacing,
testId: testId
// These aren't part of `Select`'s API, but we're using them here.
,
calendarContainerRef: calendarProps.calendarContainerRef,
calendarDisabled: calendarProps.calendarDisabled,
calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
calendarLocale: calendarProps.calendarLocale,
calendarMaxDate: calendarProps.calendarMaxDate,
calendarMinDate: calendarProps.calendarMinDate,
calendarRef: calendarProps.calendarRef,
calendarValue: calendarProps.calendarValue,
calendarView: calendarProps.calendarView,
calendarWeekStartDay: calendarProps.calendarWeekStartDay,
nextMonthLabel: nextMonthLabel,
onCalendarChange: calendarProps.onCalendarChange,
onCalendarSelect: calendarProps.onCalendarSelect,
previousMonthLabel: previousMonthLabel,
shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
menuInnerWrapper: calendarProps.menuInnerWrapper
})), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.iconContainerStyles, getterValue && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
}, /*#__PURE__*/React.createElement(_button.default, {
appearance: "subtle",
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
"aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
id: openCalendarLabelId,
icon: function icon(iconProps) {
return /*#__PURE__*/React.createElement(_calendar.default, (0, _extends2.default)({}, iconProps, {
color: "var(--ds-icon, #292A2E)"
}));
},
onClick: onCalendarButtonClick,
onKeyDown: onCalendarButtonKeyDown,
ref: calendarButtonRef,
testId: testId && "".concat(testId, "--open-calendar-button")
})) : null);
});
var _default = exports.default = DatePicker;