@sproutsocial/seeds-react-datepicker 1.0.52 → 1.1.0

package/src/CalendarDayTailwind.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import type moment from "moment";
+import type { ModifiersShape } from "react-dates";
+import { cn } from "./cn";
+import {
+  isHoveredAndInRange,
+  isOutOfRange,
+  isSelected,
+  shouldHaveLeftPill,
+  shouldHaveRightPill,
+} from "./dayModifiers";
+
+export interface TypeCalendarDayProps {
+  modifiers: ModifiersShape;
+  day: moment.Moment;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Static day cell. Renders the semantic `seeds-datepicker-day*` classes from
+ * datepicker.css with no runtime CSS-in-JS.
+ *
+ * The legacy cell was `styled(Box)`, and Box ships no CSS of its own, so
+ * `.seeds-datepicker-day` reproduces Box's baseline (box-sizing + font-family)
+ * and this component reproduces Box's forwardRef.
+ *
+ * The visual states are mutually exclusive, exactly as in the styled version's
+ * if / else-if chain: a selected day never also picks up the hovered or
+ * out-of-range treatment. Pill edges are modifier classes rather than values,
+ * so an absent edge emits no declaration at all.
+ */
+const dayStateClasses = (
+  modifiers: ModifiersShape,
+  day: moment.Moment
+): Record<string, boolean> => {
+  if (isSelected(modifiers)) {
+    return {
+      "seeds-datepicker-day-selected": true,
+      "seeds-datepicker-day-pill-left": shouldHaveLeftPill(modifiers, day),
+      "seeds-datepicker-day-pill-right": shouldHaveRightPill(modifiers, day),
+    };
+  }
+
+  if (isHoveredAndInRange(modifiers)) {
+    return { "seeds-datepicker-day-hovered": true };
+  }
+
+  if (isOutOfRange(modifiers)) {
+    return { "seeds-datepicker-day-out-of-range": true };
+  }
+
+  return {};
+};
+
+const CalendarDayTailwind = React.forwardRef<
+  HTMLDivElement,
+  TypeCalendarDayProps
+>(({ modifiers, day, className, children }, ref) => (
+  <div
+    ref={ref}
+    // Semantic classes come before the consumer className so consumer utilities
+    // can override the layered base styles.
+    className={cn(
+      "seeds-datepicker-day",
+      dayStateClasses(modifiers, day),
+      className
+    )}
+  >
+    {children}
+  </div>
+));
+
+CalendarDayTailwind.displayName = "CalendarDay";
+
+export default CalendarDayTailwind;

package/src/DateRangePicker/DateRangePicker.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState, type KeyboardEvent } from "react";
 import moment from "moment";
 import DayPickerRangeController from "react-dates/lib/components/DayPickerRangeController";
-import { ReactDatesCssOverrides } from "../styles";
 import {
   commonDatePickerProps,
   DefaultSetStatusText,
@@ -55,9 +54,14 @@ const DateRangePicker = ({
     [onBlur, onFocusChange]
   );
 
+  /*
+   * The react-dates overrides that ReactDatesCssOverrides used to inject at
+   * runtime now ship statically in datepicker.css, aggregated into
+   * @sproutsocial/racine/css/components. styles.ts keeps the styled source for
+   * Phase A, but nothing imports it, so it is tree-shaken out of the bundle.
+   */
   return (
     <>
-      <ReactDatesCssOverrides />
       <VisuallyHidden>
         <div role="status">{statusText}</div>
       </VisuallyHidden>

package/src/DateRangePicker/__tests__/DateRangePicker.test.tsx

@@ -153,8 +153,7 @@ describe("date range picker", () => {
     });
   });
 
-  // TODO: This test times out. We'll come back to fix later
-  xtest("should close on escape key press", async () => {
+  test("should close on escape key press", async () => {
     const buttonText = "Date Picker";
     const initialDate = moment("2020-01-01");
 

package/src/SingleDatePicker/SingleDatePicker.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
 import moment from "moment";
 import DayPickerSingleDateController from "react-dates/lib/components/DayPickerSingleDateController";
-import { ReactDatesCssOverrides } from "../styles";
 import {
   commonDatePickerProps,
   DefaultSetStatusText,
@@ -47,9 +46,14 @@ const SingleDatePicker = ({
     [onBlur, onFocusChange]
   );
 
+  /*
+   * The react-dates overrides that ReactDatesCssOverrides used to inject at
+   * runtime now ship statically in datepicker.css, aggregated into
+   * @sproutsocial/racine/css/components. styles.ts keeps the styled source for
+   * Phase A, but nothing imports it, so it is tree-shaken out of the bundle.
+   */
   return (
     <>
-      <ReactDatesCssOverrides />
       <VisuallyHidden>
         <div role="status">{statusText}</div>
       </VisuallyHidden>

package/src/SingleDatePicker/__tests__/SingleDatePicker.test.tsx

@@ -101,8 +101,7 @@ describe("SingleDatePicker", () => {
     });
   });
 
-  // TODO: This test times out. We'll come back to fix later
-  xtest("should close on escape key press", async () => {
+  test("should close on escape key press", async () => {
     const buttonText = "Date Picker";
     const initialDate = moment("2020-01-01");
 

package/src/__tests__/DatepickerContract.test.tsx

@@ -0,0 +1,269 @@
+import React from "react";
+import moment, { type Moment } from "moment";
+import {
+  render,
+  screen,
+  within,
+} from "@sproutsocial/seeds-react-testing-library";
+import { theme } from "@sproutsocial/seeds-react-theme";
+import { CalendarDay } from "../styles";
+import {
+  SingleDatePicker,
+  StatefulSingleDatePicker,
+} from "../SingleDatePicker";
+import { DateRangePicker, StatefulDateRangePicker } from "../DateRangePicker";
+
+/**
+ * Permanent contract tests for the Datepicker package.
+ *
+ * These freeze the observable public behavior of SingleDatePicker,
+ * DateRangePicker, and the day-cell styling contract, and must stay GREEN
+ * across the styled-components -> Tailwind hybrid migration.
+ *
+ * Determinism: the visible month, the day-of-week modifiers that decide the
+ * pill radii, and react-dates' English aria phrases all depend on ambient
+ * state. Pin a mid-month noon-UTC instant (no timezone offset can move it out
+ * of June 2026, and +/- a week stays inside the visible month) and the "en"
+ * locale.
+ */
+
+const FIXED_NOW = new Date("2026-06-15T12:00:00Z");
+
+// A Wednesday in the middle of June 2026: not the first day of the week, not
+// the first or last day of the month. Every pill-edge predicate is false for
+// it unless a modifier forces one, which is what makes it the right probe for
+// the "no declaration emitted" contract below.
+const MID_WEEK_DAY = moment("2026-06-17");
+
+const noop = () => {};
+
+const renderCalendarDay = (modifiers: string[], day = MID_WEEK_DAY) => {
+  const { container } = render(
+    <CalendarDay day={day} modifiers={new Set(modifiers)}>
+      {day.format("D")}
+    </CalendarDay>
+  );
+  return container.firstChild as HTMLElement;
+};
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(FIXED_NOW);
+  moment.locale("en");
+});
+
+describe("CalendarDay styling contract", () => {
+  it("renders the day contents in a single element", () => {
+    const day = renderCalendarDay([]);
+    expect(day.tagName).toBe("DIV");
+    expect(day).toHaveTextContent("17");
+  });
+
+  it("does not paint an unmodified day", () => {
+    const day = renderCalendarDay([]);
+    expect(day).toHaveStyleRule("background-color", undefined);
+    expect(day).toHaveStyleRule("color", undefined);
+  });
+
+  it("paints a selected day and gives it both pill edges", () => {
+    const day = renderCalendarDay(["selected"]);
+    expect(day).toHaveStyleRule(
+      "background-color",
+      theme.colors.container.background.selected
+    );
+    expect(day).toHaveStyleRule("color", theme.colors.text.inverse);
+    expect(day).toHaveStyleRule("margin-left", theme.space[200]);
+    expect(day).toHaveStyleRule("margin-right", theme.space[200]);
+    expect(day).toHaveStyleRule("border-top-left-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule("border-bottom-left-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule("border-top-right-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule("border-bottom-right-radius", theme.radii.pill);
+  });
+
+  /**
+   * The interior of a selection emits NO margin/radius declaration at all —
+   * styled-components drops `margin-left: ${false && ...}` rather than writing
+   * `margin-left: 0`. A port that writes a zero fallback is a silent
+   * regression, so this asserts absence, not a zero value.
+   */
+  it("emits no edge declarations for the interior of a selected span", () => {
+    const day = renderCalendarDay(["selected-span"]);
+    expect(day).toHaveStyleRule(
+      "background-color",
+      theme.colors.container.background.selected
+    );
+    for (const property of [
+      "margin-left",
+      "margin-right",
+      "border-top-left-radius",
+      "border-bottom-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+    ]) {
+      expect(day).toHaveStyleRule(property, undefined);
+    }
+  });
+
+  it("gives a selected span a left pill on the first day of the week only", () => {
+    const day = renderCalendarDay(["selected-span", "first-day-of-week"]);
+    expect(day).toHaveStyleRule("margin-left", theme.space[200]);
+    expect(day).toHaveStyleRule("margin-right", undefined);
+  });
+
+  it("gives a selected span a right pill on the last day of the week only", () => {
+    const day = renderCalendarDay(["selected-span", "last-day-of-week"]);
+    expect(day).toHaveStyleRule("margin-right", theme.space[200]);
+    expect(day).toHaveStyleRule("margin-left", undefined);
+  });
+
+  it("pills the first and last day of the month inside a span", () => {
+    expect(
+      renderCalendarDay(["selected-span"], moment("2026-06-01"))
+    ).toHaveStyleRule("margin-left", theme.space[200]);
+    expect(
+      renderCalendarDay(["selected-span"], moment("2026-06-30"))
+    ).toHaveStyleRule("margin-right", theme.space[200]);
+  });
+
+  it("outlines a hovered in-range day", () => {
+    const day = renderCalendarDay(["hovered"]);
+    expect(day).toHaveStyleRule("margin", `0 ${theme.space[200]}`);
+    expect(day).toHaveStyleRule("border-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule(
+      "border",
+      `1px solid ${theme.colors.container.border.selected}`
+    );
+  });
+
+  it("does not outline a hovered day that is out of range", () => {
+    const day = renderCalendarDay(["hovered", "blocked-out-of-range"]);
+    expect(day).toHaveStyleRule("border-radius", undefined);
+    expect(day).toHaveStyleRule("color", theme.colors.text.subtext);
+    expect(day).toHaveStyleRule("opacity", "0.4");
+    expect(day).toHaveStyleRule("pointer-events", "none");
+  });
+
+  it("dims an out-of-range day", () => {
+    const day = renderCalendarDay(["blocked-out-of-range"]);
+    expect(day).toHaveStyleRule("color", theme.colors.text.subtext);
+    expect(day).toHaveStyleRule("opacity", "0.4");
+    expect(day).toHaveStyleRule("pointer-events", "none");
+  });
+
+  it("prefers the selected treatment over out-of-range", () => {
+    const day = renderCalendarDay(["selected", "blocked-out-of-range"]);
+    expect(day).toHaveStyleRule("color", theme.colors.text.inverse);
+    expect(day).toHaveStyleRule("pointer-events", undefined);
+  });
+});
+
+describe("SingleDatePicker contract", () => {
+  it("announces the visible month in a live status region", () => {
+    render(<SingleDatePicker date={moment()} onDateChange={noop} />);
+    expect(screen.getByRole("status")).toHaveTextContent("June 2026");
+  });
+
+  it("renders one month of day cells carrying the day number", () => {
+    const { container } = render(
+      <SingleDatePicker date={moment()} onDateChange={noop} />
+    );
+    expect(container.querySelectorAll("[data-visible=true]")).toHaveLength(1);
+    expect(
+      within(screen.getByLabelText("Wednesday, June 17, 2026")).getByText("17")
+    ).toBeInTheDocument();
+  });
+
+  it("renders both month navigation controls with decorative icons", () => {
+    const { container } = render(
+      <SingleDatePicker date={moment()} onDateChange={noop} />
+    );
+    const previous = screen.getByLabelText(
+      "Move backward to switch to the previous month."
+    );
+    const next = screen.getByLabelText(
+      "Move forward to switch to the next month."
+    );
+    expect(previous).toHaveClass("DayPickerNavigation_button__horizontal");
+    expect(next).toHaveClass("DayPickerNavigation_button__horizontal");
+    expect(container.querySelectorAll(".seeds-icon[aria-hidden]")).toHaveLength(
+      2
+    );
+  });
+
+  it("hides the keyboard shortcuts panel by default", () => {
+    render(<SingleDatePicker date={moment()} onDateChange={noop} />);
+    expect(
+      screen.queryByLabelText("Open the keyboard shortcuts panel.")
+    ).toBeNull();
+  });
+
+  /**
+   * `commonDatePickerProps` is spread BEFORE `...rest`, so every default it
+   * supplies is overridable by the caller. That spread order is observable
+   * contract, not an implementation detail.
+   */
+  it("lets a caller override a default supplied by commonDatePickerProps", () => {
+    render(
+      <StatefulSingleDatePicker
+        date={moment()}
+        hideKeyboardShortcutsPanel={false}
+      />
+    );
+    expect(
+      screen.getByLabelText("Open the keyboard shortcuts panel.")
+    ).toBeInTheDocument();
+  });
+
+  it("lets a caller replace renderDayContents entirely", () => {
+    render(
+      <StatefulSingleDatePicker
+        date={moment()}
+        renderDayContents={(day: Moment) => <b>{`d${day.format("D")}`}</b>}
+      />
+    );
+    const cell = screen.getByLabelText("Wednesday, June 17, 2026");
+    expect(within(cell).getByText("d17")).toBeInTheDocument();
+    expect(cell.querySelector("b")).toBeInTheDocument();
+  });
+});
+
+describe("DateRangePicker contract", () => {
+  it("announces both visible months in a live status region", () => {
+    render(
+      <DateRangePicker
+        startDate={moment()}
+        focusedInput="startDate"
+        onDatesChange={noop}
+        onFocusChange={noop}
+      />
+    );
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "June 2026, July 2026"
+    );
+  });
+
+  it("renders two months by default", () => {
+    const { container } = render(
+      <DateRangePicker
+        startDate={moment()}
+        focusedInput="startDate"
+        onDatesChange={noop}
+        onFocusChange={noop}
+      />
+    );
+    expect(container.querySelectorAll("[data-visible=true]")).toHaveLength(2);
+  });
+
+  it("lets a caller override the month count", () => {
+    const { container } = render(
+      <DateRangePicker
+        startDate={moment()}
+        focusedInput="startDate"
+        onDatesChange={noop}
+        onFocusChange={noop}
+        numberOfMonths={1}
+      />
+    );
+    expect(container.querySelectorAll("[data-visible=true]")).toHaveLength(1);
+  });
+});