@sproutsocial/seeds-react-datepicker 1.0.51 → 1.1.0

package/src/datepicker.css

@@ -0,0 +1,262 @@
+/**
+ * Seeds Datepicker component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * This file has two halves, and they are deliberately in different cascade
+ * positions.
+ *
+ *
+ * 1. react-dates overrides — UNLAYERED (approved exception)
+ * ---------------------------------------------------------------------------
+ * The block below restyles react-dates' own DOM. It is the static port of the
+ * `ReactDatesCssOverrides` createGlobalStyle in styles.ts, which used to be
+ * injected at runtime whenever a picker mounted.
+ *
+ * It is emitted OUTSIDE `@layer components`, which is an explicit, approved
+ * exception to the repository's Tailwind delivery convention. react-dates ships
+ * `react-dates/lib/css/_datepicker.css` with zero cascade layers, and an
+ * unlayered declaration beats every layered one no matter how specific. A
+ * layered port would silently lose the .DayPicker__horizontal box-shadow reset,
+ * the .CalendarDay__default color and hover reset, and the .CalendarMonth_caption
+ * padding — only the one !important rule would survive.
+ *
+ * Two unlayered rules of equal specificity fall back to source order, and a
+ * consuming bundler decides whether this file lands before or after
+ * _datepicker.css. So every override that contests a react-dates declaration is
+ * qualified with the .DayPicker ancestor (or, for the root element itself, with
+ * its own base class), which outranks react-dates' plain single-class rules
+ * whatever the stylesheet order.
+ *
+ * react-dates ALSO ships pseudo-class rules — .CalendarDay__default:hover and
+ * .CalendarDay__selected:hover among them — and a pseudo-class counts toward the
+ * same specificity component as a class, so those sit at (0,2,0) and tie with a
+ * plain .DayPicker-qualified override. That is why the two CalendarDay :hover
+ * variants below are written out at (0,3,0). They are load-bearing, NOT redundant
+ * copies of their base rules: delete them and the hover background and border
+ * resets become stylesheet-order-dependent again.
+ *
+ * The nav-button :hover rule is different. It is simply the hover state carried
+ * over from the styled implementation. react-dates ships no rule for
+ * .DayPickerNavigation_button__horizontal at all, only __horizontalDefault at
+ * (0,1,0), and its .DayPickerNavigation_button__default rules never apply here
+ * because Seeds always supplies navPrev and navNext, so react-dates marks the
+ * buttons non-default. Nothing contests it.
+ *
+ * NOT covered: react-dates' :active variants — .CalendarDay__selected:active and
+ * its blocked, hovered_span and highlighted_calendar siblings — also sit at
+ * (0,2,0) and therefore TIE with the overrides below, leaving the winner to
+ * stylesheet order in the consuming bundle. The styled implementation's
+ * unqualified single-class rules lost those contests outright, so this is
+ * same-or-better everywhere and never a regression, but a pressed day may still
+ * flash react-dates' own palette. Closing it means adding
+ * .DayPicker .CalendarDay:active to the transparent-background group and
+ * .DayPicker .CalendarDay__default:active to the border-reset group, which is a
+ * deliberate visual change and was not authorized for Phase A.
+ *
+ * The magic numbers are carried over verbatim from the styled implementation.
+ * They are tuned against react-dates' own layout — do not "normalize" them to
+ * theme tokens. In particular `line-height: 21.333px` is NOT --line-height-200,
+ * and `top: 26px` on the week header is still a magic number aligning it with
+ * .CalendarMonth_caption.
+ *
+ * One magic number was deliberately NOT carried over: `width: 230px` on the week
+ * header, along with the two rules that compensated for it. It assumed
+ * content-box and broke once Tailwind's preflight made everything border-box.
+ * The header now shrink-wraps to the month. See the comment on that rule.
+ *
+ *
+ * 2. Day cell — LAYERED, as usual
+ * ---------------------------------------------------------------------------
+ * `.seeds-datepicker-day*` styles a node this package renders itself, so it
+ * follows the normal convention and lives in `@layer components`, letting
+ * consumer Tailwind utilities override it.
+ *
+ * Usage (applied by CalendarDayTailwind.tsx):
+ *   <div class="seeds-datepicker-day seeds-datepicker-day-selected
+ *               seeds-datepicker-day-pill-left">17</div>
+ */
+
+/* ========================================================================== */
+/* react-dates overrides (unlayered — see note 1 above)                       */
+/* ========================================================================== */
+
+/* The one override left unqualified, at (0,1,0). It therefore ties with
+   react-dates' own `.DayPicker` rule and the winner is load order — where the
+   styled version, injected last at runtime, always won. Harmless today because
+   the two declaration sets are disjoint (this rule sets box-sizing, font-weight
+   and font-family; react-dates sets background, position and text-align), so
+   there is nothing to contest. Qualify it as `.DayPicker.DayPicker` if react-dates
+   ever adds one of these properties. */
+.DayPicker {
+  box-sizing: content-box;
+  font-weight: var(--font-weight-normal);
+  font-family: var(--font-family);
+}
+
+/* Override react-dates' height to better reflect how tall the component
+   actually is. Adding margin/padding is truer to the Seeds system, because the
+   calendar height adds an extra row of padding if we do not override it.
+   !important is required because react-dates sets height on the element. */
+.DayPicker .DayPicker_transitionContainer {
+  height: 228px !important;
+}
+
+/* No `width` here on purpose. The styled implementation pinned `width: 230px`
+   to stretch the underline the full month width, which only held while the
+   element was content-box. Tailwind's preflight sets `* { box-sizing:
+   border-box }`, so react-dates' own inline `padding: 0 13px` started
+   subtracting from that 230px: 230 - 26 - 10 = 194px of content against the
+   7 x 30px = 210px the day columns need, which wrapped Saturday onto a second
+   line and dropped the border-bottom through the first row of dates. Letting
+   the header shrink-wrap to the month makes it track `daySize` instead of a
+   magic number, and gives the same result under either box-sizing.
+   Deleting the width also means react-dates' own `.DayPicker_weekHeaders__horizontal`
+   margin-left and `.DayPicker_weekHeader_ul` padding-left must be left alone —
+   the styled version overrode both to compensate for the pinned width. */
+.DayPicker .DayPicker_weekHeader {
+  color: var(--color-text-headline);
+  border-bottom: 1px solid var(--color-container-border-base);
+
+  /* Magic number to match position of .CalendarMonth_caption */
+  top: 26px;
+}
+
+.DayPicker .DayPicker_weekHeader_li {
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  color: var(--color-text-subtext);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+
+.DayPicker.DayPicker__horizontal {
+  box-shadow: none;
+  background: var(--color-container-bg-base);
+}
+
+.DayPicker .CalendarDay {
+  background-color: transparent;
+}
+
+.DayPicker .CalendarDay__selected,
+.DayPicker .CalendarDay__selected_span,
+.DayPicker .CalendarDay:hover {
+  background-color: transparent;
+}
+
+.DayPicker .CalendarDay__default,
+.DayPicker .CalendarDay__default:hover {
+  border: none;
+  color: var(--color-text-body);
+}
+
+.DayPicker .CalendarMonth {
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  background: var(--color-container-bg-base);
+
+  /* spacing between visible months and months off canvas */
+  padding: 0 15px;
+}
+
+.DayPicker .CalendarMonth_caption {
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  color: var(--color-text-headline);
+  padding-top: 0;
+  background: var(--color-container-bg-base);
+}
+
+.DayPicker .CalendarMonth_caption strong {
+  font-weight: var(--font-weight-semibold);
+}
+
+.DayPicker .CalendarMonth_table {
+  line-height: 21.333px;
+}
+
+.DayPicker .CalendarMonth_table tr {
+  vertical-align: middle;
+}
+
+.DayPicker .CalendarMonth_table td {
+  padding: 0;
+  border-bottom: none;
+}
+
+.DayPicker .CalendarMonthGrid {
+  background: var(--color-container-bg-base);
+}
+
+/* Left and Right Arrow Buttons to navigate months */
+.DayPicker .DayPickerNavigation_button__horizontal {
+  color: var(--color-button-pill-text-base);
+  top: -4px;
+  padding: 7px 8px;
+  position: absolute;
+  line-height: 0.78;
+  border-radius: 9999px;
+  border: none;
+  background: var(--color-button-pill-bg-base);
+}
+
+.DayPicker .DayPickerNavigation_button__horizontal:nth-child(1) {
+  left: 22px;
+}
+
+.DayPicker .DayPickerNavigation_button__horizontal:nth-child(2) {
+  right: 22px;
+}
+
+.DayPicker .DayPickerNavigation_button__horizontal:hover {
+  background: var(--color-button-pill-bg-hover);
+}
+
+/* ========================================================================== */
+/* Day cell (layered — see note 2 above)                                      */
+/* ========================================================================== */
+
+@layer components {
+  /* Baseline inherited from Box, which the legacy day cell extended. Box ships
+     no CSS of its own, so the static cell has to reproduce it here. */
+  .seeds-datepicker-day {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
+
+  .seeds-datepicker-day-selected {
+    background-color: var(--color-container-bg-selected);
+    color: var(--color-text-inverse);
+  }
+
+  /* The pill edges are separate classes on purpose. The legacy implementation
+     interpolated `margin-left: ${condition && space}`, which emits NO
+     declaration when the condition is false — writing a `0` fallback here would
+     square off the ends of every selected range. */
+  .seeds-datepicker-day-pill-left {
+    margin-left: var(--space-200);
+    border-top-left-radius: var(--radius-pill);
+    border-bottom-left-radius: var(--radius-pill);
+  }
+
+  .seeds-datepicker-day-pill-right {
+    margin-right: var(--space-200);
+    border-top-right-radius: var(--radius-pill);
+    border-bottom-right-radius: var(--radius-pill);
+  }
+
+  .seeds-datepicker-day-hovered {
+    margin: 0 var(--space-200);
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--color-container-border-selected);
+  }
+
+  /* Mirrors the `disabled` mixin from seeds-react-mixins. */
+  .seeds-datepicker-day-out-of-range {
+    color: var(--color-text-subtext);
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}

package/src/dayModifiers.ts

@@ -0,0 +1,71 @@
+import moment from "moment";
+import type { ModifiersShape } from "react-dates";
+
+/*
+ * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
+ *
+ * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,
+ * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,
+ * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,
+ * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,
+ * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,
+ * selected-end-no-selected-start
+ *
+ * These predicates are the single source of truth for which visual state a day
+ * cell is in. Both the static day cell (CalendarDayTailwind) and the preserved
+ * styled one (styles.ts) read them, so the two paths cannot drift apart.
+ */
+
+export const isSelected = (modifiers: ModifiersShape) =>
+  modifiers.has("selected-span") ||
+  modifiers.has("selected") ||
+  modifiers.has("selected-start") ||
+  modifiers.has("selected-end") ||
+  modifiers.has("hovered-span") ||
+  modifiers.has("after-hovered-start");
+
+export const isOutOfRange = (modifiers: ModifiersShape) =>
+  modifiers.has("blocked-out-of-range");
+
+export const isHoveredAndInRange = (modifiers: ModifiersShape) =>
+  modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
+
+export const shouldHaveLeftPill = (
+  modifiers: ModifiersShape,
+  day: moment.Moment
+) => {
+  if (!isSelected(modifiers)) {
+    return false;
+  }
+
+  if (
+    modifiers.has("selected") ||
+    modifiers.has("selected-start") ||
+    modifiers.has("first-day-of-week") ||
+    day.isSame(moment(day).startOf("month"), "day")
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const shouldHaveRightPill = (
+  modifiers: ModifiersShape,
+  day: moment.Moment
+) => {
+  if (!isSelected(modifiers)) {
+    return false;
+  }
+
+  if (
+    modifiers.has("selected") ||
+    modifiers.has("selected-end") ||
+    modifiers.has("last-day-of-week") ||
+    day.isSame(moment(day).endOf("month"), "day")
+  ) {
+    return true;
+  }
+
+  return false;
+};

package/src/styles.ts

@@ -3,65 +3,32 @@ import moment from "moment";
 import type { ModifiersShape } from "react-dates";
 import { disabled } from "@sproutsocial/seeds-react-mixins";
 import Box from "@sproutsocial/seeds-react-box";
+import {
+  isHoveredAndInRange,
+  isOutOfRange,
+  isSelected,
+  shouldHaveLeftPill,
+  shouldHaveRightPill,
+} from "./dayModifiers";
 
 /*
- * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
+ * PHASE A NOTE — this module is the legacy styled-components implementation.
  *
- * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,
- * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,
- * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,
- * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,
- * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,
- * selected-end-no-selected-start
+ * Nothing imports it any more: the day cell is rendered by CalendarDayTailwind
+ * and the react-dates overrides ship statically from datepicker.css. It is
+ * unreachable from src/index.ts and is tree-shaken out of dist. It is kept at
+ * source because Phase A does not remove styled-components, and because the
+ * permanent contract tests use it as the reference implementation the static
+ * path must match.
  *
+ * The state predicates now live in ./dayModifiers so that this implementation
+ * and the static one cannot drift apart.
+ *
+ * Consequently the shipped bundle no longer uses seeds-react-box or
+ * seeds-react-mixins (still in `dependencies`) or styled-components (still a
+ * peer). That is correct for Phase A — this module still needs them at source —
+ * and is a Phase B cleanup item.
  */
-const isSelected = (modifiers: ModifiersShape) =>
-  modifiers.has("selected-span") ||
-  modifiers.has("selected") ||
-  modifiers.has("selected-start") ||
-  modifiers.has("selected-end") ||
-  modifiers.has("hovered-span") ||
-  modifiers.has("after-hovered-start");
-
-const isOutOfRange = (modifiers: ModifiersShape) =>
-  modifiers.has("blocked-out-of-range");
-
-const isHoveredAndInRange = (modifiers: ModifiersShape) =>
-  modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
-
-const shouldHaveLeftPill = (modifiers: ModifiersShape, day: moment.Moment) => {
-  if (!isSelected(modifiers)) {
-    return false;
-  }
-
-  if (
-    modifiers.has("selected") ||
-    modifiers.has("selected-start") ||
-    modifiers.has("first-day-of-week") ||
-    day.isSame(moment(day).startOf("month"), "day")
-  ) {
-    return true;
-  }
-
-  return false;
-};
-
-const shouldHaveRightPill = (modifiers: ModifiersShape, day: moment.Moment) => {
-  if (!isSelected(modifiers)) {
-    return false;
-  }
-
-  if (
-    modifiers.has("selected") ||
-    modifiers.has("selected-end") ||
-    modifiers.has("last-day-of-week") ||
-    day.isSame(moment(day).endOf("month"), "day")
-  ) {
-    return true;
-  }
-
-  return false;
-};
 
 export const CalendarDay = styled(Box)<{
   modifiers: ModifiersShape;