@atlaskit/calendar/dist/esm/calendar.js

An interactive calendar for date selection experiences.

/* calendar.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./calendar.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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; }
import { forwardRef, memo, useState } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import noop from '@atlaskit/ds-lib/noop';
import { useId } from '@atlaskit/ds-lib/use-id';
import { Box, Stack } from '@atlaskit/primitives/compiled';
import Header from './internal/components/header';
import WeekDaysComponent from './internal/components/week-days';
import WeekHeaderComponent from './internal/components/week-header';
import { blankStringArray } from './internal/constants';
import useControlledDateState from './internal/hooks/use-controlled-date-state';
import useFocusing from './internal/hooks/use-focusing';
import useGetWeeks from './internal/hooks/use-get-weeks';
import useHandleDateChange from './internal/hooks/use-handle-date-change';
import useHandleDateSelect from './internal/hooks/use-handle-date-select';
import useLocale from './internal/hooks/use-locale';
var styles = {
  box: "_1e0c1o8l _uiztglyw"
};
var analyticsAttributes = {
  componentName: 'calendar',
  packageName: "@atlaskit/calendar",
  packageVersion: "17.1.8"
};
var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
  var day = _ref.day,
    _ref$defaultDay = _ref.defaultDay,
    defaultDay = _ref$defaultDay === void 0 ? 0 : _ref$defaultDay,
    _ref$defaultMonth = _ref.defaultMonth,
    defaultMonth = _ref$defaultMonth === void 0 ? 0 : _ref$defaultMonth,
    _ref$defaultPreviousl = _ref.defaultPreviouslySelected,
    defaultPreviouslySelected = _ref$defaultPreviousl === void 0 ? blankStringArray : _ref$defaultPreviousl,
    _ref$defaultSelected = _ref.defaultSelected,
    defaultSelected = _ref$defaultSelected === void 0 ? blankStringArray : _ref$defaultSelected,
    _ref$defaultYear = _ref.defaultYear,
    defaultYear = _ref$defaultYear === void 0 ? 0 : _ref$defaultYear,
    disabled = _ref.disabled,
    disabledDateFilter = _ref.disabledDateFilter,
    minDate = _ref.minDate,
    maxDate = _ref.maxDate,
    month = _ref.month,
    nextMonthLabel = _ref.nextMonthLabel,
    _ref$onBlur = _ref.onBlur,
    onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
    _ref$onFocus = _ref.onFocus,
    onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus,
    _ref$onSelect = _ref.onSelect,
    onSelect = _ref$onSelect === void 0 ? noop : _ref$onSelect,
    previouslySelected = _ref.previouslySelected,
    previousMonthLabel = _ref.previousMonthLabel,
    selected = _ref.selected,
    _ref$shouldSetFocusOn = _ref.shouldSetFocusOnCurrentDay,
    shouldSetFocusOnCurrentDay = _ref$shouldSetFocusOn === void 0 ? false : _ref$shouldSetFocusOn,
    today = _ref.today,
    _ref$locale = _ref.locale,
    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
    year = _ref.year,
    analyticsContext = _ref.analyticsContext,
    _ref$weekStartDay = _ref.weekStartDay,
    weekStartDay = _ref$weekStartDay === void 0 ? 0 : _ref$weekStartDay,
    testId = _ref.testId,
    className = _ref.className,
    style = _ref.style,
    _ref$tabIndex = _ref.tabIndex,
    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
  var _useControlledDateSta = useControlledDateState({
      day: day,
      defaultDay: defaultDay,
      month: month,
      defaultMonth: defaultMonth,
      year: year,
      defaultYear: defaultYear,
      today: today,
      selected: selected,
      defaultSelected: defaultSelected,
      previouslySelected: previouslySelected,
      defaultPreviouslySelected: defaultPreviouslySelected
    }),
    _useControlledDateSta2 = _slicedToArray(_useControlledDateSta.day, 2),
    dayValue = _useControlledDateSta2[0],
    setDayValue = _useControlledDateSta2[1],
    _useControlledDateSta3 = _slicedToArray(_useControlledDateSta.month, 2),
    monthValue = _useControlledDateSta3[0],
    setMonthValue = _useControlledDateSta3[1],
    _useControlledDateSta4 = _slicedToArray(_useControlledDateSta.year, 2),
    yearValue = _useControlledDateSta4[0],
    setYearValue = _useControlledDateSta4[1],
    _useControlledDateSta5 = _slicedToArray(_useControlledDateSta.today, 1),
    todayValue = _useControlledDateSta5[0],
    _useControlledDateSta6 = _slicedToArray(_useControlledDateSta.selected, 2),
    selectedValue = _useControlledDateSta6[0],
    setSelectedValue = _useControlledDateSta6[1],
    _useControlledDateSta7 = _slicedToArray(_useControlledDateSta.previous, 2),
    previouslySelectedValue = _useControlledDateSta7[0],
    setPreviouslySelectedValue = _useControlledDateSta7[1];
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    shouldSetFocus = _useState2[0],
    setShouldSetFocus = _useState2[1];
  var onChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
    fn: onChange,
    action: 'changed',
    analyticsData: analyticsContext
  }, analyticsAttributes));
  var _useHandleDateChange = useHandleDateChange({
      day: [dayValue, setDayValue],
      month: [monthValue, setMonthValue],
      year: [yearValue, setYearValue],
      shouldSetFocus: [shouldSetFocus, setShouldSetFocus],
      onChange: onChangeWithAnalytics
    }),
    navigate = _useHandleDateChange.navigate,
    handleClickNextMonth = _useHandleDateChange.handleClickNextMonth,
    handleClickNextYear = _useHandleDateChange.handleClickNextYear,
    handleClickPrevMonth = _useHandleDateChange.handleClickPrevMonth,
    handleClickPrevYear = _useHandleDateChange.handleClickPrevYear;
  var onSelectWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
    fn: onSelect,
    action: 'selected',
    analyticsData: analyticsContext
  }, analyticsAttributes));
  var _useHandleDateSelect = useHandleDateSelect({
      day: [dayValue, setDayValue],
      month: [monthValue, setMonthValue],
      year: [yearValue, setYearValue],
      selected: [selectedValue, setSelectedValue],
      previous: [, setPreviouslySelectedValue],
      onSelect: onSelectWithAnalytics,
      navigate: navigate
    }),
    handleClickDay = _useHandleDateSelect.handleClickDay,
    handleContainerKeyDown = _useHandleDateSelect.handleContainerKeyDown;
  var _useFocusing = useFocusing({
      onFocus: onFocus,
      onBlur: onBlur
    }),
    handleContainerBlur = _useFocusing.handleContainerBlur,
    handleContainerFocus = _useFocusing.handleContainerFocus;
  var _useLocale = useLocale({
      locale: locale,
      weekStartDay: weekStartDay
    }),
    monthsLong = _useLocale.monthsLong,
    daysShort = _useLocale.daysShort,
    daysLong = _useLocale.daysLong;
  var weeks = useGetWeeks({
    day: dayValue,
    month: monthValue,
    year: yearValue,
    today: todayValue,
    selected: selectedValue,
    previouslySelected: previouslySelectedValue,
    disabled: disabled,
    disabledDateFilter: disabledDateFilter,
    minDate: minDate,
    maxDate: maxDate,
    daysLong: daysLong,
    weekStartDay: weekStartDay
  });
  var getNextMonthHeading = function getNextMonthHeading() {
    // Next month is (currentMonth - 1) + 1, or just currentMonth in this
    // instance.
    var nextMonth = monthValue % 12;
    var showNextYear = monthValue === 12;
    return "".concat(monthsLong[nextMonth], " ").concat(showNextYear ? yearValue + 1 : yearValue);
  };
  var getNextYearHeading = function getNextYearHeading() {
    // Months are held in Date object as zero-indexed
    var thisMonth = (monthValue - 1) % 12;
    var nextYear = yearValue + 1;
    return "".concat(monthsLong[thisMonth], " ").concat(nextYear);
  };
  var getPreviousMonthHeading = function getPreviousMonthHeading() {
    // Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
    // works as expected and stays positive.
    var previousMonth = (monthValue + 12 - 2) % 12;
    var showPreviousYear = monthValue === 1;
    return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
  };
  var getPreviousYearHeading = function getPreviousYearHeading() {
    // Months are held in Date object as zero-indexed
    var thisMonth = (monthValue - 1) % 12;
    var previousYear = yearValue - 1;
    return "".concat(monthsLong[thisMonth], " ").concat(previousYear);
  };
  var headerId = useId();
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    React.createElement("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      className: className
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      ,
      style: style,
      onBlur: handleContainerBlur,
      onFocus: handleContainerFocus,
      "data-testid": testId && "".concat(testId, "--container"),
      ref: ref
    }, /*#__PURE__*/React.createElement(Box, {
      xcss: styles.box,
      padding: "space.200",
      "aria-label": "calendar",
      testId: testId && "".concat(testId, "--calendar")
    }, /*#__PURE__*/React.createElement(Stack, {
      space: "space.150"
    }, /*#__PURE__*/React.createElement(Header
    // The month number needs to be translated to index in the month
    // name array e.g. 1 (January) -> 0
    , {
      monthLongTitle: monthsLong[monthValue - 1],
      year: yearValue,
      nextMonthLabel: nextMonthLabel,
      previousMonthLabel: previousMonthLabel,
      nextMonthHeading: getNextMonthHeading(),
      nextYearHeading: getNextYearHeading(),
      previousMonthHeading: getPreviousMonthHeading(),
      previousYearHeading: getPreviousYearHeading(),
      handleClickNextMonth: handleClickNextMonth,
      handleClickNextYear: handleClickNextYear,
      handleClickPrevMonth: handleClickPrevMonth,
      handleClickPrevYear: handleClickPrevYear,
      headerId: headerId,
      tabIndex: tabIndex,
      testId: testId
    }), /*#__PURE__*/React.createElement(Box, {
      role: "grid",
      onKeyDown: handleContainerKeyDown,
      "aria-labelledby": headerId,
      testId: testId && "".concat(testId, "--calendar-dates")
    }, /*#__PURE__*/React.createElement(WeekHeaderComponent, {
      daysShort: daysShort,
      testId: testId
    }), /*#__PURE__*/React.createElement(WeekDaysComponent, {
      weeks: weeks,
      handleClickDay: handleClickDay,
      monthsLong: monthsLong,
      shouldSetFocus: shouldSetFocus || shouldSetFocusOnCurrentDay,
      tabIndex: tabIndex,
      testId: testId
    })))))
  );
});

/**
 * __Calendar__
 *
 * A calendar is used for date selection.
 *
 * - [Examples](https://atlassian.design/components/calendar/examples)
 * - [Code](https://atlassian.design/components/calendar/code)
 * - [Usage](https://atlassian.design/components/calendar/usage)
 */
var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
  return /*#__PURE__*/React.createElement(InnerCalendar, _extends({}, props, {
    ref: ref
  }));
}));
Calendar.displayName = 'Calendar';
export default Calendar;