@atlaskit/calendar

Version:
An interactive calendar for date selection experiences.
105 lines (102 loc) • 4.95 kB
JavaScript
/* date.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./date.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Grid } from '@atlaskit/primitives/compiled';
var dateCellSiblingStyle = null;
var dateCellTodayStyle = null;
var dateCellPrevSelectedStyle = null;
var dateCellSelectedStyle = null;

// platform-dst-tokens-finesse cleanup: merge into dateCellSelectedStyle after rollout
var dateCellSelectedFinesseStyle = null;
var dateCellDisabledStyle = null;
var dateCellStyles = null;

// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, fold these
// transitions into the styles above and drop the gate in the `css` array below.
var dateCellMotionStyles = null;
var dateCellSelectedMotionStyles = null;
var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, _ref) {
  var day = _ref2.children,
    _ref2$isDisabled = _ref2.isDisabled,
    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
    _ref2$isFocused = _ref2.isFocused,
    isFocused = _ref2$isFocused === void 0 ? false : _ref2$isFocused,
    _ref2$isToday = _ref2.isToday,
    isToday = _ref2$isToday === void 0 ? false : _ref2$isToday,
    dayLong = _ref2.dayLong,
    month = _ref2.month,
    monthLong = _ref2.monthLong,
    _ref2$onClick = _ref2.onClick,
    onClick = _ref2$onClick === void 0 ? noop : _ref2$onClick,
    _ref2$isPreviouslySel = _ref2.isPreviouslySelected,
    isPreviouslySelected = _ref2$isPreviouslySel === void 0 ? false : _ref2$isPreviouslySel,
    _ref2$isSelected = _ref2.isSelected,
    isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
    _ref2$isSibling = _ref2.isSibling,
    isSibling = _ref2$isSibling === void 0 ? false : _ref2$isSibling,
    year = _ref2.year,
    shouldSetFocus = _ref2.shouldSetFocus,
    tabIndex = _ref2.tabIndex,
    testId = _ref2.testId;
  var dateRef = useRef({
    day: day,
    month: month,
    year: year,
    isDisabled: isDisabled
  });
  useEffect(function () {
    dateRef.current = {
      day: day,
      month: month,
      year: year,
      isDisabled: isDisabled
    };
  }, [day, month, year, isDisabled]);
  var focusRef = useRef(null);
  useEffect(function () {
    if (isFocused && shouldSetFocus && focusRef.current) {
      focusRef.current.focus();
    }
  }, [isFocused, shouldSetFocus]);
  var handleClick = useCallback(function () {
    var _dateRef$current = dateRef.current,
      dayValue = _dateRef$current.day,
      monthValue = _dateRef$current.month,
      yearValue = _dateRef$current.year,
      isDisabledValue = _dateRef$current.isDisabled;
    if (!isDisabledValue) {
      onClick({
        day: dayValue,
        month: monthValue,
        year: yearValue
      });
    }
  }, [onClick]);
  return /*#__PURE__*/React.createElement(Grid, {
    role: "gridcell",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement("button", {
    "aria-current": isToday ? 'date' : undefined,
    "aria-disabled": isDisabled || undefined,
    "aria-label": "".concat(day, ", ").concat(dayLong, " ").concat(monthLong, " ").concat(year),
    "aria-pressed": isSelected ? 'true' : 'false',
    tabIndex: isFocused ? tabIndex : -1,
    type: "button",
    onClick: handleClick,
    ref: focusRef,
    "data-disabled": isDisabled || undefined,
    "data-focused": isFocused || undefined,
    "data-prev-selected": isPreviouslySelected || undefined,
    "data-selected": isSelected || undefined,
    "data-sibling": isSibling || undefined,
    "data-today": isToday || undefined,
    "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
    className: ax(["_kkk2n7od _2rko1qi0 _11c8fhey _v564hxmd _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1ggl87vo _1di6fcek _9h8hi7uo", isSibling && "_v564hxmd _syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_v564hxmd _bfhk15s3 _syazazsu _30l3azsu", isSelected && "_v564hxmd _bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isSelected && fg('platform-dst-tokens-finesse') && "_v564hxmd _bfhkjmqp _syaz15cr _irr31q28 _30l315cr _1ggl87vo _1di612kk _9h8h15cr", isDisabled && "_v564hxmd _syaz1gmx _80om13gf _irr31j28 _30l31gmx", fg('platform-dst-motion-uplift-list-item') && "_v564hxmd _1gk4glyw _o7kshxmd _1ggl87vo", (isSelected || isPreviouslySelected) && fg('platform-dst-motion-uplift-list-item') && "_v5641rrn"])
  }, day));
}));
Date.displayName = 'Date';

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Date;