@spaced-out/ui-design-system 0.1.92 → 0.1.93-beta.0

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateRangeWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Card = require("../Card");
+var _Dropdown = require("../Dropdown");
+var _FocusManager = require("../FocusManager");
+var _Icon = require("../Icon");
+var _Calendar = require("./Calendar.js");
+var _utils = require("./utils");
+var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const CalendarHeader = _ref => {
+  let {
+    date,
+    marker,
+    setDate,
+    rangeStartMonth,
+    rangeEndMonth,
+    onClickNext,
+    nextDisabled,
+    prevDisabled,
+    onClickPrevious
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DateRangeWrapperModule.default.calendarHeader
+  }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
+    size: "small",
+    name: "chevron-left",
+    className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
+      [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
+    }),
+    onClick: onClickPrevious,
+    color: prevDisabled ? 'disabled' : 'secondary'
+  }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    size: "small",
+    menu: {
+      options: (0, _utils.getAvailableMonths)(_utils.MONTHS, rangeStartMonth, rangeEndMonth, marker),
+      selectedKeys: [(0, _momentTimezone.default)(date).month().toString()]
+    },
+    onChange: event => {
+      setDate((0, _utils.formatIsoDate)((0, _momentTimezone.default)(date).set('M', event.key)));
+    },
+    dropdownInputText: _utils.MONTHS[(0, _momentTimezone.default)(date).month()].label,
+    openMenuAtBottom: true
+  }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    menu: {
+      selectedKeys: [(0, _momentTimezone.default)(date).year().toString()],
+      options: (0, _utils.generateAvailableYears)(45, rangeStartMonth, rangeEndMonth, marker)
+    },
+    size: "small",
+    onChange: event => {
+      setDate((0, _utils.formatIsoDate)((0, _momentTimezone.default)(date).set('y', event.key)));
+    },
+    dropdownInputText: (0, _momentTimezone.default)(date).year(),
+    openMenuAtBottom: true
+  }), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
+    size: "small",
+    name: "chevron-right",
+    className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
+      [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
+    }),
+    onClick: onClickNext,
+    color: nextDisabled ? 'disabled' : 'secondary'
+  }));
+};
+const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    onApply,
+    onCancel,
+    handlers,
+    hoverDay,
+    timeZone,
+    dateRange,
+    rangeStartMonth,
+    setTimeZone,
+    rangeEndMonth,
+    inHoverRange,
+    setRangeStartMonth,
+    setRangeEndMonth,
+    cardWrapperClass
+  } = _ref2;
+  const canNavigateCloser = (0, _momentTimezone.default)(rangeStartMonth).year() !== (0, _momentTimezone.default)(rangeEndMonth).year() || Math.abs((0, _momentTimezone.default)(rangeStartMonth).month() - (0, _momentTimezone.default)(rangeEndMonth).month()) > 1;
+  const handleApplyClick = () => {
+    const {
+      startDate,
+      endDate
+    } = dateRange;
+    const startDateUTC = startDate && (0, _utils.addTimeZone)(startDate, timeZone);
+    const endDateUTC = endDate && (0, _utils.addTimeZone)(endDate, timeZone);
+    onApply({
+      startDate,
+      endDate,
+      startDateUTC,
+      endDateUTC,
+      timeZone
+    });
+  };
+  const {
+    onMonthNavigate
+  } = handlers;
+  const commonProps = {
+    inHoverRange,
+    handlers,
+    hoverDay,
+    dateRange
+  };
+  return /*#__PURE__*/React.createElement(_FocusManager.FocusManager, null, /*#__PURE__*/React.createElement(_Card.Card, {
+    classNames: {
+      wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
+    },
+    ref: ref
+  }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
+    className: _DateRangeWrapperModule.default.cardHeader
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    marker: _utils.MARKERS.DATE_RANGE_START,
+    rangeStartMonth: rangeStartMonth,
+    rangeEndMonth: rangeEndMonth,
+    date: rangeStartMonth,
+    setDate: setRangeStartMonth,
+    nextDisabled: !canNavigateCloser,
+    prevDisabled: false,
+    onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
+    onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
+  }), /*#__PURE__*/React.createElement(CalendarHeader, {
+    marker: _utils.MARKERS.DATE_RANGE_END,
+    rangeStartMonth: rangeStartMonth,
+    rangeEndMonth: rangeEndMonth,
+    date: rangeEndMonth,
+    setDate: setRangeEndMonth,
+    nextDisabled: (0, _momentTimezone.default)((0, _utils.getAddedDate)(rangeEndMonth, 1, 'M')).isAfter((0, _momentTimezone.default)()),
+    prevDisabled: !canNavigateCloser,
+    onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
+    onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
+  })), /*#__PURE__*/React.createElement(_Card.CardContent, {
+    className: _DateRangeWrapperModule.default.dateRangeCalendars
+  }, /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
+    marker: _utils.MARKERS.DATE_RANGE_START,
+    value: rangeStartMonth
+  }, commonProps)), /*#__PURE__*/React.createElement("div", {
+    className: _DateRangeWrapperModule.default.divider
+  }), /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
+    marker: _utils.MARKERS.DATE_RANGE_END,
+    value: rangeEndMonth
+  }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, null, /*#__PURE__*/React.createElement(_Card.CardTitle, {
+    className: _DateRangeWrapperModule.default.timezoneDropdownContainer
+  }, /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
+    options: (0, _utils.getTimeZones)(),
+    classNames: {
+      box: _DateRangeWrapperModule.default.timezoneDropdown
+    },
+    selectedKeys: [timeZone],
+    onChange: event => setTimeZone(event.key),
+    size: "small",
+    allowSearch: true
+  })), /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    onClick: onCancel,
+    size: "small"
+  }, "Cancel"), /*#__PURE__*/React.createElement(_Button.Button, {
+    onClick: handleApplyClick,
+    size: "small",
+    disabled: !(dateRange.startDate && dateRange.endDate)
+  }, "Apply")))));
+});
+exports.DateRangeWrapper = DateRangeWrapper;

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -0,0 +1,282 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import moment from 'moment-timezone';
+
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../Card';
+import {Dropdown, SimpleDropdown} from '../Dropdown';
+import {FocusManager} from '../FocusManager';
+import {ClickableIcon} from '../Icon';
+
+import {Calendar} from './Calendar.js';
+import {
+  type DatePickerSelectedRange,
+  type DateRange,
+  addTimeZone,
+  formatIsoDate,
+  generateAvailableYears,
+  getAddedDate,
+  getAvailableMonths,
+  getTimeZones,
+  MARKERS,
+  MONTHS,
+  NAVIGATION_ACTION,
+} from './utils';
+
+import css from './DateRangeWrapper.module.css';
+
+
+type HeaderProps = {
+  date: string,
+  rangeStartMonth: string,
+  rangeEndMonth: string,
+  nextDisabled: boolean,
+  prevDisabled: boolean,
+  onClickNext: () => void,
+  onClickPrevious: () => void,
+  marker: $Values<typeof MARKERS>,
+  setDate: (date: string) => void,
+};
+
+type DateRangeWrapperProps = {
+  dateRange: DateRange,
+  hoverDay: string,
+  rangeStartMonth: string,
+  rangeEndMonth: string,
+  cardWrapperClass: ?string,
+  setRangeStartMonth: (string) => void,
+  setRangeEndMonth: (string) => void,
+  setTimeZone: (string) => void,
+  timeZone: string,
+  onApply: (datePickerSelectedRange: DatePickerSelectedRange) => void,
+  onCancel: () => void,
+  inHoverRange: (day: string) => boolean,
+  handlers: {
+    onDayClick: (day: string) => void,
+    onDayHover: (day: string) => void,
+    onMonthNavigate: (
+      marker: $Values<typeof MARKERS>,
+      action: $Values<typeof NAVIGATION_ACTION>,
+    ) => void,
+  },
+};
+
+const CalendarHeader = ({
+  date,
+  marker,
+  setDate,
+  rangeStartMonth,
+  rangeEndMonth,
+  onClickNext,
+  nextDisabled,
+  prevDisabled,
+  onClickPrevious,
+}: HeaderProps): React.Node => (
+  <div className={css.calendarHeader}>
+    <ClickableIcon
+      size="small"
+      name="chevron-left"
+      className={classify(css.headerIcon, {
+        [css.disabledIcon]: prevDisabled,
+      })}
+      onClick={onClickPrevious}
+      color={prevDisabled ? 'disabled' : 'secondary'}
+    />
+    <Dropdown
+      size="small"
+      menu={{
+        options: getAvailableMonths(
+          MONTHS,
+          rangeStartMonth,
+          rangeEndMonth,
+          marker,
+        ),
+        selectedKeys: [moment(date).month().toString()],
+      }}
+      onChange={(event) => {
+        setDate(formatIsoDate(moment(date).set('M', event.key)));
+      }}
+      dropdownInputText={MONTHS[moment(date).month()].label}
+      openMenuAtBottom
+    />
+    <Dropdown
+      menu={{
+        selectedKeys: [moment(date).year().toString()],
+        options: generateAvailableYears(
+          45,
+          rangeStartMonth,
+          rangeEndMonth,
+          marker,
+        ),
+      }}
+      size="small"
+      onChange={(event) => {
+        setDate(formatIsoDate(moment(date).set('y', event.key)));
+      }}
+      dropdownInputText={moment(date).year()}
+      openMenuAtBottom
+    />
+    <ClickableIcon
+      size="small"
+      name="chevron-right"
+      className={classify(css.headerIcon, {
+        [css.disabledIcon]: nextDisabled,
+      })}
+      onClick={onClickNext}
+      color={nextDisabled ? 'disabled' : 'secondary'}
+    />
+  </div>
+);
+
+export const DateRangeWrapper: React$AbstractComponent<
+  DateRangeWrapperProps,
+  HTMLDivElement,
+> = React.forwardRef<DateRangeWrapperProps, HTMLDivElement>(
+  (
+    {
+      onApply,
+      onCancel,
+      handlers,
+      hoverDay,
+      timeZone,
+      dateRange,
+      rangeStartMonth,
+      setTimeZone,
+      rangeEndMonth,
+      inHoverRange,
+      setRangeStartMonth,
+      setRangeEndMonth,
+      cardWrapperClass,
+    }: DateRangeWrapperProps,
+    ref,
+  ): React.Node => {
+    const canNavigateCloser =
+      moment(rangeStartMonth).year() !== moment(rangeEndMonth).year() ||
+      Math.abs(
+        moment(rangeStartMonth).month() - moment(rangeEndMonth).month(),
+      ) > 1;
+
+    const handleApplyClick = () => {
+      const {startDate, endDate} = dateRange;
+      const startDateUTC = startDate && addTimeZone(startDate, timeZone);
+      const endDateUTC = endDate && addTimeZone(endDate, timeZone);
+      onApply({
+        startDate,
+        endDate,
+        startDateUTC,
+        endDateUTC,
+        timeZone,
+      });
+    };
+
+    const {onMonthNavigate} = handlers;
+
+    const commonProps = {
+      inHoverRange,
+      handlers,
+      hoverDay,
+      dateRange,
+    };
+
+    return (
+      <FocusManager>
+        <Card
+          classNames={{
+            wrapper: classify(css.dateRangeWrapper, cardWrapperClass),
+          }}
+          ref={ref}
+        >
+          <CardHeader className={css.cardHeader}>
+            <CalendarHeader
+              marker={MARKERS.DATE_RANGE_START}
+              rangeStartMonth={rangeStartMonth}
+              rangeEndMonth={rangeEndMonth}
+              date={rangeStartMonth}
+              setDate={setRangeStartMonth}
+              nextDisabled={!canNavigateCloser}
+              prevDisabled={false}
+              onClickNext={() =>
+                onMonthNavigate(
+                  MARKERS.DATE_RANGE_START,
+                  NAVIGATION_ACTION.NEXT,
+                )
+              }
+              onClickPrevious={() =>
+                onMonthNavigate(
+                  MARKERS.DATE_RANGE_START,
+                  NAVIGATION_ACTION.PREV,
+                )
+              }
+            />
+            <CalendarHeader
+              marker={MARKERS.DATE_RANGE_END}
+              rangeStartMonth={rangeStartMonth}
+              rangeEndMonth={rangeEndMonth}
+              date={rangeEndMonth}
+              setDate={setRangeEndMonth}
+              nextDisabled={moment(getAddedDate(rangeEndMonth, 1, 'M')).isAfter(
+                moment(),
+              )}
+              prevDisabled={!canNavigateCloser}
+              onClickNext={() =>
+                onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.NEXT)
+              }
+              onClickPrevious={() =>
+                onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
+              }
+            />
+          </CardHeader>
+          <CardContent className={css.dateRangeCalendars}>
+            <Calendar
+              marker={MARKERS.DATE_RANGE_START}
+              value={rangeStartMonth}
+              {...commonProps}
+            />
+            <div className={css.divider} />
+            <Calendar
+              marker={MARKERS.DATE_RANGE_END}
+              value={rangeEndMonth}
+              {...commonProps}
+            />
+          </CardContent>
+          <CardFooter>
+            <CardTitle className={css.timezoneDropdownContainer}>
+              <SimpleDropdown
+                options={getTimeZones()}
+                classNames={{
+                  box: css.timezoneDropdown,
+                }}
+                selectedKeys={[timeZone]}
+                onChange={(event) => setTimeZone(event.key)}
+                size="small"
+                allowSearch
+              />
+            </CardTitle>
+            <CardActions>
+              <Button type="ghost" onClick={onCancel} size="small">
+                Cancel
+              </Button>
+              <Button
+                onClick={handleApplyClick}
+                size="small"
+                disabled={!(dateRange.startDate && dateRange.endDate)}
+              >
+                Apply
+              </Button>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      </FocusManager>
+    );
+  },
+);

package/lib/components/DateRangePicker/DateRangeWrapper.module.css

@@ -0,0 +1,64 @@
+@value (
+  size180, 
+  size580,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+@value (
+  spaceNone, 
+  spaceSmall,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.dateRangeWrapper {
+  display: flex;
+  width: size580;
+}
+
+.cardHeader {
+  width: sizeFluid;
+  padding: spaceXSmall;
+  gap: spaceSmall;
+}
+
+.calendarHeader {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+}
+
+.divider {
+  height: sizeFluid;
+  width: spaceNone;
+  composes: borderRightPrimary from '../../styles/border.module.css';
+}
+
+.dateRangeCalendars {
+  display: flex;
+  padding: spaceNone;
+  width: sizeFluid;
+}
+
+.headerIcon {
+  margin: spaceXSmall;
+}
+
+.disabledIcon {
+  pointer-events: none;
+  outline: none;
+}
+
+.timezoneDropdownContainer {
+  width: sizeFluid;
+}
+
+.timezoneDropdown {
+  width: size180;
+}
+
+.timezoneDropdown input {
+  text-overflow: ellipsis;
+}
+
+.mainContainer {
+  width: sizeFluid;
+}

package/lib/components/DateRangePicker/Day.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Day = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Text = require("../Text");
+var _DayModule = _interopRequireDefault(require("./Day.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// $FlowFixMe[untyped-import]
+
+const getTextColor = (disabled, filled) => {
+  if (disabled) {
+    return _Text.TEXT_COLORS.disabled;
+  } else if (filled) {
+    return _Text.TEXT_COLORS.inversePrimary;
+  } else {
+    return _Text.TEXT_COLORS.secondary;
+  }
+};
+const Day = _ref => {
+  let {
+    date,
+    value,
+    filled,
+    onHover,
+    onClick,
+    disabled,
+    hoverDay,
+    outlined,
+    endOfRange,
+    highlighted,
+    startOfRange
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+    tabIndex: disabled ? -1 : 0,
+    className: (0, _classify.default)(_DayModule.default.calendarItemButton, {
+      [_DayModule.default.calendarRowItemDisabled]: disabled,
+      [_DayModule.default.calendarRowItemBorderLeft]: !disabled && filled && endOfRange,
+      [_DayModule.default.calendarRowItemBorderRight]: !disabled && !(0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(hoverDay)) && (filled || highlighted) && startOfRange,
+      [_DayModule.default.calendarRowItemHighlighted]: !disabled && !filled && highlighted
+    }),
+    onMouseOver: onHover,
+    onClick: onClick,
+    onKeyUp: onHover
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    type: "ghost",
+    color: getTextColor(disabled, filled),
+    className: (0, _classify.default)(_DayModule.default.calendarRowItem, {
+      [_DayModule.default.calendarRowItemHover]: !disabled && !filled,
+      [_DayModule.default.calendarRowItemFilled]: !disabled && filled,
+      [_DayModule.default.calendarRowItemOutlined]: !disabled && outlined
+    }),
+    onMouseOver: onHover,
+    onClick: onClick
+  }, value));
+};
+exports.Day = Day;

package/lib/components/DateRangePicker/Day.js.flow

@@ -0,0 +1,80 @@
+// @flow strict
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import moment from 'moment-timezone';
+
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {BodyMedium, TEXT_COLORS} from '../Text';
+
+import css from './Day.module.css';
+
+
+type DayProps = {
+  date: string,
+  value: string,
+  filled: boolean,
+  hoverDay: string,
+  outlined: boolean,
+  disabled: boolean,
+  endOfRange: boolean,
+  highlighted: boolean,
+  startOfRange: boolean,
+  onClick: () => void,
+  onHover: () => void,
+};
+
+const getTextColor = (disabled: boolean, filled: boolean) => {
+  if (disabled) {
+    return TEXT_COLORS.disabled;
+  } else if (filled) {
+    return TEXT_COLORS.inversePrimary;
+  } else {
+    return TEXT_COLORS.secondary;
+  }
+};
+
+export const Day = ({
+  date,
+  value,
+  filled,
+  onHover,
+  onClick,
+  disabled,
+  hoverDay,
+  outlined,
+  endOfRange,
+  highlighted,
+  startOfRange,
+}: DayProps): React.Node => (
+  <UnstyledButton
+    tabIndex={disabled ? -1 : 0}
+    className={classify(css.calendarItemButton, {
+      [css.calendarRowItemDisabled]: disabled,
+      [css.calendarRowItemBorderLeft]: !disabled && filled && endOfRange,
+      [css.calendarRowItemBorderRight]:
+        !disabled &&
+        !moment(date).isSame(moment(hoverDay)) &&
+        (filled || highlighted) &&
+        startOfRange,
+      [css.calendarRowItemHighlighted]: !disabled && !filled && highlighted,
+    })}
+    onMouseOver={onHover}
+    onClick={onClick}
+    onKeyUp={onHover}
+  >
+    <BodyMedium
+      type="ghost"
+      color={getTextColor(disabled, filled)}
+      className={classify(css.calendarRowItem, {
+        [css.calendarRowItemHover]: !disabled && !filled,
+        [css.calendarRowItemFilled]: !disabled && filled,
+        [css.calendarRowItemOutlined]: !disabled && outlined,
+      })}
+      onMouseOver={onHover}
+      onClick={onClick}
+    >
+      {value}
+    </BodyMedium>
+  </UnstyledButton>
+);