@commercetools-uikit/calendar-utils
Version:
Utilities to work with values for a calendar.
589 lines (573 loc) • 33.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _Number$isNaN = require('@babel/runtime-corejs3/core-js-stable/number/is-nan');
var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
var moment = require('moment');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var react$1 = require('react');
var icons = require('@commercetools-uikit/icons');
var Inline = require('@commercetools-uikit/spacings-inline');
var hooks = require('@commercetools-uikit/hooks');
var AccessibleButton = require('@commercetools-uikit/accessible-button');
var react = require('@emotion/react');
var designSystem = require('@commercetools-uikit/design-system');
var inputUtils = require('@commercetools-uikit/input-utils');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var _styled = require('@emotion/styled/base');
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
var reactIntl = require('react-intl');
var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
var Text = require('@commercetools-uikit/text');
var Tooltip = require('@commercetools-uikit/tooltip');
var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _Number$isNaN__default = /*#__PURE__*/_interopDefault(_Number$isNaN);
var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
var moment__default = /*#__PURE__*/_interopDefault(moment);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var Inline__default = /*#__PURE__*/_interopDefault(Inline);
var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
var Text__default = /*#__PURE__*/_interopDefault(Text);
var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
const getDaysInMonth = day => moment__default["default"](day).daysInMonth();
const getDateInMonth = day => moment__default["default"](day).date();
const getToday = () => moment__default["default"]().format('YYYY-MM-DD');
const formatDate = (day, locale) => day ? moment__default["default"](day, 'YYYY-MM-DD', locale).format('L') : '';
const changeMonth = (day, delta) => moment__default["default"](day).add(delta, 'month').format('YYYY-MM-DD');
const getNextDay = day => moment__default["default"](day).add(1, 'day').format('YYYY-MM-DD');
const getPreviousDay = day => moment__default["default"](day).subtract(1, 'day').format('YYYY-MM-DD');
const getPaddingDayCount = (day, locale) => {
const firstDayOfWeek = moment__default["default"].localeData(locale).firstDayOfWeek();
const firstDayOfMonth = moment__default["default"](day).startOf('month').day();
const paddingDayCount = (firstDayOfMonth - firstDayOfWeek + 7) % 7;
return _Number$isNaN__default["default"](paddingDayCount) ? 0 : paddingDayCount;
};
const getWeekdayNames = locale => {
const weekDays = moment__default["default"].localeData(locale).weekdaysMin();
const firstDay = moment__default["default"].localeData(locale).firstDayOfWeek();
return [..._sliceInstanceProperty__default["default"](weekDays).call(weekDays, firstDay), ..._sliceInstanceProperty__default["default"](weekDays).call(weekDays, 0, firstDay)];
};
const getMonthCalendarLabel = (day, locale) => moment__default["default"](day, 'YYYY-MM-DD', locale).format('MMMM');
const getYearCalendarLabel = (day, locale) => moment__default["default"](day, 'YYYY-MM-DD', locale).format('YYYY');
const isSameDay = (a, b) => moment__default["default"](a).isSame(b, 'day');
const getCalendarDayLabel = day => moment__default["default"](day).format('D');
const isBetween = (item, start, end) => {
const itemDate = moment__default["default"](item);
const startDate = moment__default["default"](start);
const endDate = moment__default["default"](end);
return itemDate.isBetween(startDate, endDate) || itemDate.isBetween(endDate, startDate);
};
const changeDateInMonth = (day, dayOfMonth) => moment__default["default"](day).date(dayOfMonth).format('YYYY-MM-DD');
const createCalendarItems = day => {
var _context;
return _mapInstanceProperty__default["default"](_context = _Array$from__default["default"]({
length: getDaysInMonth(day)
})).call(_context, (_, i) => {
const dayOfMonth = i + 1;
const date = changeDateInMonth(day, dayOfMonth);
return date;
});
};
const createItemRangeToString = locale => item => _Array$isArray__default["default"](item) ? _mapInstanceProperty__default["default"](item).call(item, i => i ? formatDate(i, locale) : '').join(' - ') : formatDate(item, locale);
const createItemToString = locale => item => item ? formatDate(item, locale) : '';
const formatRange = (range, locale) => {
var _context2;
return _mapInstanceProperty__default["default"](_context2 = _sortInstanceProperty__default["default"](range).call(range)).call(_context2, item => formatDate(item, locale)).join(' - ');
};
const parseInputToDate = (text, locale) => {
const localeDate = moment__default["default"](text, moment__default["default"].localeData(locale).longDateFormat('L'), locale);
if (localeDate.isValid()) return localeDate.format('YYYY-MM-DD');
return '';
};
const getIsDateInRange = (item, min, max) => {
const itemDate = moment__default["default"](item);
if (min && max) {
return itemDate.isBetween(min, max, null, '[]');
}
if (min && !max) {
return itemDate.isSameOrAfter(min);
}
if (!min && max) {
return itemDate.isSameOrBefore(max);
}
return true;
};
const getExampleDateStrings = () => ({
currentDate: moment__default["default"]().format('YYYY-MM-DD'),
preselectedDate: moment__default["default"]().add(3, 'days').format('YYYY-MM-DD'),
minDate: moment__default["default"]().format('YYYY-MM-DD'),
maxDate: moment__default["default"]().add(1, 'year').format('YYYY-MM-DD')
});
// NOTE: order is important here
// * a disabled-field currently does not display warning/error-states so it takes precedence
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
// how you can interact with the field is controlled separately by the props, this only influences visuals
const getClearSectionStyles = () => {
return /*#__PURE__*/react.css("align-items:center;box-sizing:border-box;display:flex;margin-right:", designSystem.designTokens.spacing10, ";cursor:pointer;transition:color ", designSystem.designTokens.transitionStandard, ",border-color ", designSystem.designTokens.transitionStandard, ";& svg *:not([fill='none']){fill:", designSystem.designTokens.colorNeutral40, ";}&:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + ("" ), "" );
};
const getIconBorderColor = (props, state) => {
if (props.appearance === 'filter') {
return designSystem.designTokens.colorTransparent;
}
if (props.isDisabled) {
return designSystem.designTokens.borderColorForInputWhenDisabled;
}
if (props.hasError) {
return designSystem.designTokens.borderColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.borderColorForInputWhenWarning;
}
if (props.isReadOnly) {
return designSystem.designTokens.borderColorForInputWhenReadonly;
}
if (props.isOpen || state.isFocused) {
return designSystem.designTokens.borderColorForInputWhenFocused;
}
return designSystem.designTokens.borderColorForInput;
};
const getIconFontColor = props => {
if (props.isDisabled) {
return designSystem.designTokens.fontColorForInputWhenDisabled;
}
if (props.hasError) {
return designSystem.designTokens.fontColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.fontColorForInputWhenWarning;
}
if (props.isReadOnly) {
return designSystem.designTokens.fontColorForInputWhenReadonly;
}
return 'initial';
};
const getCalendarIconContainerStyles = (props, state) => {
return [/*#__PURE__*/react.css("align-items:center;box-sizing:border-box;background:none;border:0;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-color:", getIconBorderColor(props, state), ";color:", getIconFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:100%;display:flex;padding:", designSystem.designTokens.spacing10, ";outline:0;transition:color ", designSystem.designTokens.transitionStandard, ",border-color ", designSystem.designTokens.transitionStandard, ";&:active,&:hover:not(:disabled)&:not(:read-only),&:focus{border-color:", props.appearance === 'filter' ? designSystem.designTokens.colorTransparent : designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
};
const getInputBorderColor = (props, state) => {
if (props.isDisabled) {
return designSystem.designTokens.borderColorForInputWhenDisabled;
}
if (props.hasError) {
return designSystem.designTokens.borderColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.borderColorForInputWhenWarning;
}
if (props.isReadOnly) {
return designSystem.designTokens.borderColorForInputWhenReadonly;
}
if (props.isOpen || state.isFocused) {
return designSystem.designTokens.borderColorForInputWhenFocused;
}
return designSystem.designTokens.borderColorForInput;
};
const getInputFontColor = props => {
if (props.isDisabled) {
return designSystem.designTokens.fontColorForInputWhenDisabled;
}
if (props.hasError) {
return designSystem.designTokens.fontColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.fontColorForInputWhenWarning;
}
if (props.isReadOnly) {
return designSystem.designTokens.fontColorForInputWhenReadonly;
}
return designSystem.designTokens.fontColorForInput;
};
const getInputContainerBackgroundColor = props => {
if (props.appearance === 'filter') {
return designSystem.designTokens.colorTransparent;
}
if (props.isDisabled) {
return designSystem.designTokens.backgroundColorForInputWhenDisabled;
}
if (props.isReadOnly) {
return designSystem.designTokens.backgroundColorForInputWhenReadonly;
}
return designSystem.designTokens.backgroundColorForInput;
};
var _ref$2 = {
name: "64hrqb",
styles: "box-shadow:inset 0 0 0 1px"
} ;
const getInputContainerStyles = (props, state) => {
return [/*#__PURE__*/react.css("appearance:none;background-color:", getInputContainerBackgroundColor(props), ";border:1px solid ", getInputBorderColor(props, state), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";width:100%;height:", props.isCondensed ? `${designSystem.designTokens.heightForInputAsSmall}` : `${designSystem.designTokens.heightForInput}`, ";align-items:center;display:flex;font-size:", designSystem.designTokens.fontSize30, ";font-family:inherit;min-width:", designSystem.designTokens.constraint5, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";&:hover:not(:focus){background-color:", !props.isDisabled && !props.isReadOnly ? props.appearance === 'filter' ? designSystem.designTokens.colorTransparent : designSystem.designTokens.backgroundColorForInputWhenHovered : null, ";}&:focus{border-color:", props.isDisabled || props.hasError || props.hasWarning || props.isReadOnly || (props.isOpen || state.isFocused) && !props.isReadOnly ? '' : props.appearance === 'filter' ? designSystem.designTokens.colorTransparent : designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !props.isReadOnly && props.appearance !== 'filter' && /*#__PURE__*/react.css("&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 1px ", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{background-color:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), (props.hasError || props.hasWarning) && props.appearance !== 'filter' && _ref$2];
};
const getDateTimeInputStyles = props => {
const baseStyles = [inputUtils.getInputStyles(props), /*#__PURE__*/react.css("border:none;background:none!important;&,&:focus:not(:read-only){box-shadow:none;}font-size:", props.isCondensed ? `${designSystem.designTokens.fontSize20}` : `${designSystem.designTokens.fontSize30}`, ";" + ("" ), "" )];
return baseStyles;
};
const _excluded$2 = ["isClearable"];
function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const ClearSection = props => {
return jsxRuntime.jsx(AccessibleButton__default["default"], {
css: getClearSectionStyles(),
label: "clear",
onClick: props.onClear,
"aria-label": "clear",
children: jsxRuntime.jsx(icons.CloseIcon, {
size: props.isCondensed ? 'small' : 'medium'
})
});
};
ClearSection.displayName = 'ClearSection';
const CalendarBody = _ref => {
let _ref$isClearable = _ref.isClearable,
isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
props = _objectWithoutProperties(_ref, _excluded$2);
const _useToggleState = hooks.useToggleState(false),
_useToggleState2 = _slicedToArray(_useToggleState, 2),
isFocused = _useToggleState2[0],
toggleIsFocused = _useToggleState2[1];
const onInputFocus = props.inputProps?.onFocus;
const handleInputFocus = react$1.useCallback(event => {
toggleIsFocused(true);
if (onInputFocus) onInputFocus(event);
}, [onInputFocus, toggleIsFocused]);
const onInputBlur = props.inputProps?.onBlur;
const handleInputBlur = react$1.useCallback(event => {
toggleIsFocused(false);
if (onInputBlur) onInputBlur(event);
}, [onInputBlur, toggleIsFocused]);
const onToggleFocus = props.toggleButtonProps?.onFocus;
const handleToggleFocus = react$1.useCallback(event => {
toggleIsFocused(true);
if (onToggleFocus) onToggleFocus(event);
}, [onToggleFocus, toggleIsFocused]);
const onToggleBlur = props.toggleButtonProps?.onBlur;
const handleToggleBlur = react$1.useCallback(event => {
toggleIsFocused(false);
if (onToggleBlur) onToggleBlur(event);
}, [onToggleBlur, toggleIsFocused]);
const disabledOrReadOnly = props.isDisabled || props.isReadOnly;
return jsxRuntime.jsx(Inline__default["default"], {
alignItems: "center",
children: jsxRuntime.jsxs("div", {
css: getInputContainerStyles(_objectSpread$2({
isClearable
}, props), {
isFocused
}),
children: [jsxRuntime.jsx("input", _objectSpread$2(_objectSpread$2({
ref: props.inputRef
}, props.inputProps), {}, {
disabled: props.isDisabled,
readOnly: props.isReadOnly,
css: getDateTimeInputStyles(_objectSpread$2({
isClearable
}, props)),
onFocus: handleInputFocus,
onBlur: handleInputBlur,
"aria-readonly": props.isReadOnly
})), !disabledOrReadOnly && props.hasSelection && isClearable && props.appearance !== 'filter' && jsxRuntime.jsx(ClearSection, {
isCondensed: props.isCondensed,
hasError: props.hasError,
hasWarning: props.hasWarning,
isFocused: isFocused,
isOpen: props.isOpen,
onClear: props.onClear
}), props.appearance !== 'filter' && jsxRuntime.jsx("button", _objectSpread$2(_objectSpread$2({
type: "button",
css: getCalendarIconContainerStyles(_objectSpread$2({
isClearable
}, props), {
isFocused
})
}, props.toggleButtonProps), {}, {
onFocus: handleToggleFocus,
onBlur: handleToggleBlur,
disabled: disabledOrReadOnly,
onKeyDown: props.inputProps?.onKeyDown
/* keyboard users don't need this button */,
tabIndex: -1,
children: props.icon === 'clock' ? jsxRuntime.jsx(icons.ClockIcon, {
color: "neutral60"
}) : jsxRuntime.jsx(icons.CalendarIcon, {
color: "neutral60",
size: props.isCondensed ? 'medium' : 'big'
})
}))]
})
});
};
CalendarBody.displayName = 'CalendarBody';
var CalendarBody$1 = CalendarBody;
const CalendarContent = /*#__PURE__*/_styled__default["default"]("ul", {
target: "e17zfb0v0"
} )({
name: "1en5ct5",
styles: "margin:0;padding:0 1%"
} );
var CalendarContent$1 = CalendarContent;
const _excluded$1 = ["isHighlighted", "isSelected", "isRangeStart", "isRangeBetween", "isRangeEnd", "isToday"];
function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$1(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getStyles = props => {
var _context, _context2;
const styles = [];
if (!_includesInstanceProperty__default["default"](_context = ['heading', 'spacing']).call(_context, props.type || '')) {
styles.push(/*#__PURE__*/react.css("text-align:center;padding:", designSystem.designTokens.spacing20, " 0;cursor:default;border-radius:", designSystem.designTokens.borderRadius4, ";" + ("" ), "" ));
}
if (_includesInstanceProperty__default["default"](_context2 = ['heading', 'spacing']).call(_context2, props.type || '')) {
styles.push(/*#__PURE__*/react.css("text-align:center;padding:", designSystem.designTokens.spacing20, " 0;cursor:default;color:", designSystem.designTokens.colorNeutral60, ";" + ("" ), "" ));
}
if (props.isHighlighted) {
styles.push(/*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ));
}
if (props.isSelected) {
styles.push(/*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ));
}
if (props.isRangeStart || props.isRangeEnd) {
styles.push(/*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary40, ";color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ));
}
if (props.isRangeBetween) {
styles.push(/*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorNeutral90, ";color:", designSystem.designTokens.fontColorForInput, ";" + ("" ), "" ));
}
if (!props.isSelected && !props.isRangeStart && !props.isRangeEnd && props.isToday) {
styles.push(/*#__PURE__*/react.css("color:", designSystem.designTokens.colorInfo, ";font-weight:bold;" + ("" ), "" ));
}
if (props.disabled) {
styles.push(/*#__PURE__*/react.css("color:", designSystem.designTokens.fontColorForInputWhenDisabled, ";cursor:not-allowed;" + ("" ), "" ));
}
return styles;
};
var _ref$1 = {
name: "9xt9sg",
styles: "list-style-type:none;display:inline-block;margin:2px 1%;width:12%"
} ;
const CalendarDay = props => {
props.isHighlighted;
props.isSelected;
props.isRangeStart;
props.isRangeBetween;
props.isRangeEnd;
props.isToday;
const rest = _objectWithoutProperties(props, _excluded$1);
return jsxRuntime.jsx("li", {
css: _ref$1,
children: jsxRuntime.jsx("div", _objectSpread$1({
css: getStyles(props)
}, rest))
});
};
CalendarDay.displayName = 'CalendarDay';
var CalendarDay$1 = CalendarDay;
var messages = reactIntl.defineMessages({
todayTooltip: {
id: 'UIKit.CalendarHeader.todayTooltip',
description: 'Tooltip title when user hovers the today button',
defaultMessage: 'Today'
},
previousMonthTooltip: {
id: 'UIKit.CalendarHeader.previousMonthTooltip',
description: 'Tooltip title when user hovers the previous month button',
defaultMessage: 'Previous month'
},
nextMonthTooltip: {
id: 'UIKit.CalendarHeader.nextMonthTooltip',
description: 'Tooltip title when user hovers the next month button',
defaultMessage: 'Next month'
},
previousYearTooltip: {
id: 'UIKit.CalendarHeader.previousYearTooltip',
description: 'Tooltip title when user hovers the previous year button',
defaultMessage: 'Previous year'
},
nextYearTooltip: {
id: 'UIKit.CalendarHeader.nextYearTooltip',
description: 'Tooltip title when user hovers the next year button',
defaultMessage: 'Next year'
}
});
const WrapperComponent = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1q1nv850"
} )({
name: "zjik7",
styles: "display:flex"
} );
const CalendarHeader = props => {
const intl = reactIntl.useIntl();
// https://codepen.io/mudassir0909/pen/eIHqB
// we prevent all our defined onClicks inside of the CalendarHeader
// from blurring our input.
const onMouseDown = react$1.useCallback(event => {
event.preventDefault();
}, []);
return jsxRuntime.jsxs("div", {
onMouseDown: onMouseDown,
css: /*#__PURE__*/react.css("display:flex;padding:10px 2% 6px;margin-bottom:", designSystem.designTokens.spacing10, ";justify-content:space-between;border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
children: [jsxRuntime.jsxs(Inline__default["default"], {
scale: "xs",
alignItems: "center",
children: [jsxRuntime.jsx(Tooltip__default["default"], {
title: intl.formatMessage(messages.previousMonthTooltip),
components: {
WrapperComponent
},
children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: "show prev month",
onClick: props.onPrevMonthClick,
icon: jsxRuntime.jsx(icons.AngleLeftIcon, {}),
size: "30"
})
}), jsxRuntime.jsx(Tooltip__default["default"], {
title: intl.formatMessage(messages.todayTooltip),
components: {
WrapperComponent
},
children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: "show today",
onClick: props.onTodayClick,
icon: jsxRuntime.jsx(icons.CircleIcon, {}),
size: "30"
})
}), jsxRuntime.jsx(Tooltip__default["default"], {
title: intl.formatMessage(messages.nextMonthTooltip),
components: {
WrapperComponent
},
children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: "show next month",
onClick: props.onNextMonthClick,
icon: jsxRuntime.jsx(icons.AngleRightIcon, {}),
size: "30"
})
}), jsxRuntime.jsx(Text__default["default"].Body, {
as: "span",
fontWeight: "bold",
children: props.monthLabel
})]
}), jsxRuntime.jsxs(Inline__default["default"], {
scale: "xs",
alignItems: "center",
children: [jsxRuntime.jsx(Tooltip__default["default"], {
title: intl.formatMessage(messages.previousYearTooltip),
components: {
WrapperComponent
},
children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: "show prev year",
onClick: props.onPrevYearClick,
icon: jsxRuntime.jsx(icons.AngleLeftIcon, {}),
size: "30"
})
}), jsxRuntime.jsx(Text__default["default"].Body, {
fontWeight: "bold",
children: props.yearLabel
}), jsxRuntime.jsx(Tooltip__default["default"], {
title: intl.formatMessage(messages.nextYearTooltip),
components: {
WrapperComponent
},
children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: "show next year",
onClick: props.onNextYearClick,
icon: jsxRuntime.jsx(icons.AngleRightIcon, {}),
size: "30"
})
})]
})]
});
};
CalendarHeader.displayName = 'CalendarHeader';
var CalendarHeader$1 = CalendarHeader;
const _excluded = ["hasFooter", "hasWarning", "hasError", "appearance"];
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
var _ref = {
name: "1yaiq4p",
styles: "padding-bottom:10px"
} ;
let CalendarMenu = /*#__PURE__*/function (_Component) {
function CalendarMenu() {
_classCallCheck(this, CalendarMenu);
return _callSuper(this, CalendarMenu, arguments);
}
_inherits(CalendarMenu, _Component);
return _createClass(CalendarMenu, [{
key: "render",
value: function render() {
const _this$props = this.props,
hasFooter = _this$props.hasFooter,
hasWarning = _this$props.hasWarning,
hasError = _this$props.hasError,
_this$props$appearanc = _this$props.appearance,
appearance = _this$props$appearanc === void 0 ? 'default' : _this$props$appearanc,
rest = _objectWithoutProperties(_this$props, _excluded);
return jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, rest), {}, {
css: [/*#__PURE__*/react.css("overflow-y:scroll;color:", designSystem.designTokens.colorSolid, ";font-family:inherit;border:none;box-shadow:", appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)', ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";margin-top:", designSystem.designTokens.spacing10, ";font-size:", designSystem.designTokens.fontSize30, ";position:", appearance === 'filter' ? 'inherit' : 'absolute', ";box-sizing:border-box;width:100%;background-color:", designSystem.designTokens.colorSurface, ";min-width:", designSystem.designTokens.constraint5, ";z-index:", appearance === 'filter' ? 'inherit' : '99999', ";" + ("" ), "" ), !hasFooter && _ref, hasError && /*#__PURE__*/react.css("border-color:", designSystem.designTokens.borderColorForInputWhenError, ";" + ("" ), "" ), hasWarning && /*#__PURE__*/react.css("border-color:", designSystem.designTokens.borderColorForInputWhenWarning, ";" + ("" ), "" ), "" , "" ],
children: [this.props.children, this.props.footer]
}));
}
}]);
}(react$1.Component);
CalendarMenu.displayName = 'CalendarMenu';
// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.3";
exports.CalendarBody = CalendarBody$1;
exports.CalendarContent = CalendarContent$1;
exports.CalendarDay = CalendarDay$1;
exports.CalendarHeader = CalendarHeader$1;
exports.CalendarMenu = CalendarMenu;
exports.changeMonth = changeMonth;
exports.createCalendarItems = createCalendarItems;
exports.createItemRangeToString = createItemRangeToString;
exports.createItemToString = createItemToString;
exports.formatDate = formatDate;
exports.formatRange = formatRange;
exports.getCalendarDayLabel = getCalendarDayLabel;
exports.getDateInMonth = getDateInMonth;
exports.getDaysInMonth = getDaysInMonth;
exports.getExampleDateStrings = getExampleDateStrings;
exports.getIsDateInRange = getIsDateInRange;
exports.getMonthCalendarLabel = getMonthCalendarLabel;
exports.getNextDay = getNextDay;
exports.getPaddingDayCount = getPaddingDayCount;
exports.getPreviousDay = getPreviousDay;
exports.getToday = getToday;
exports.getWeekdayNames = getWeekdayNames;
exports.getYearCalendarLabel = getYearCalendarLabel;
exports.isBetween = isBetween;
exports.isSameDay = isSameDay;
exports.parseInputToDate = parseInputToDate;
exports.version = version;