@atlaskit/calendar/dist/es2019/internal/components/date.js

An interactive calendar for date selection experiences.

/* 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';
const dateCellSiblingStyle = null;
const dateCellTodayStyle = null;
const dateCellPrevSelectedStyle = null;
const dateCellSelectedStyle = null;

// platform-dst-tokens-finesse cleanup: merge into dateCellSelectedStyle after rollout
const dateCellSelectedFinesseStyle = null;
const dateCellDisabledStyle = null;
const 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.
const dateCellMotionStyles = null;
const dateCellSelectedMotionStyles = null;
const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
  children: day,
  isDisabled = false,
  isFocused = false,
  isToday = false,
  dayLong,
  month,
  monthLong,
  onClick = noop,
  isPreviouslySelected = false,
  isSelected = false,
  isSibling = false,
  year,
  shouldSetFocus,
  tabIndex,
  testId
}, _ref) => {
  const dateRef = useRef({
    day,
    month,
    year,
    isDisabled
  });
  useEffect(() => {
    dateRef.current = {
      day,
      month,
      year,
      isDisabled
    };
  }, [day, month, year, isDisabled]);
  const focusRef = useRef(null);
  useEffect(() => {
    if (isFocused && shouldSetFocus && focusRef.current) {
      focusRef.current.focus();
    }
  }, [isFocused, shouldSetFocus]);
  const handleClick = useCallback(() => {
    const {
      day: dayValue,
      month: monthValue,
      year: yearValue,
      isDisabled: isDisabledValue
    } = dateRef.current;
    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": `${day}, ${dayLong} ${monthLong} ${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 ? `${testId}--selected-day` : `${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;