@sproutsocial/seeds-react-datepicker 1.0.51 → 1.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/datepicker.css dist/datepicker.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     15.14 KB
-CJS dist/index.js.map 22.85 KB
-CJS ⚡️ Build success in 20ms
-ESM dist/esm/index.js     12.23 KB
-ESM dist/esm/index.js.map 22.71 KB
-ESM ⚡️ Build success in 21ms
+CJS dist/index.js     11.97 KB
+CJS dist/index.js.map 20.36 KB
+CJS ⚡️ Build success in 21ms
+ESM dist/esm/index.js     9.30 KB
+ESM dist/esm/index.js.map 20.24 KB
+ESM ⚡️ Build success in 22ms
 DTS Build start
-DTS ⚡️ Build success in 2065ms
+DTS ⚡️ Build success in 1656ms
 DTS dist/index.d.ts  3.01 KB
 DTS dist/index.d.mts 3.01 KB
-Done in 3.15s.
+Done in 2.38s.

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @sproutsocial/seeds-react-datepicker
 
+## 1.1.0
+
+### Minor Changes
+
+- 899c48b: Add a Tailwind static-CSS rendering path to `SingleDatePicker` and
+  `DateRangePicker`, and fix the weekday header layout.
+
+  The day cell now renders semantic `seeds-datepicker-day*` classes and the
+  react-dates overrides that were previously injected at runtime by
+  `createGlobalStyle` now ship as `datepicker.css`, so mounting a picker emits no
+  runtime CSS-in-JS. Public exports, types, prop-spread order, and rendered
+  structure and semantics are preserved.
+
+  **Rendering fix:** the weekday header no longer wraps `Sa` onto a second line,
+  and its underline now aligns with the month instead of cutting through the first
+  row of dates. The header had a hardcoded `width: 230px` that only worked while
+  it was `content-box`; once Tailwind's preflight made everything `border-box`,
+  react-dates' own horizontal padding started subtracting from that width, leaving
+  less room than the seven day columns need. The width and the two rules that
+  compensated for it are gone, so the header shrink-wraps to the month and tracks
+  `daySize` rather than a magic number. This was already broken on `main` from the
+  moment the Tailwind preflight landed — it is not a regression introduced by the
+  hybrid.
+
+  Consuming apps must import `@sproutsocial/racine/css/components` (alongside
+  `@sproutsocial/seeds-react-theme/css/theme-all`) for the pickers to be styled.
+  The react-dates override rules are emitted **unlayered** and qualified with the
+  `.DayPicker` ancestor, so they outrank `react-dates/lib/css/_datepicker.css`
+  regardless of cascade layer, and for every state except `:active`, regardless of
+  stylesheet order. react-dates' `:active` rules tie on specificity, so import
+  `@sproutsocial/racine/css/components` **after** react-dates' CSS to win those
+  too. These rules now load for every consumer of the aggregated component CSS
+  rather than only while a picker is mounted.
+
+### Patch Changes
+
+- Updated dependencies [db4415c]
+  - @sproutsocial/seeds-react-theme@4.7.0
+  - @sproutsocial/seeds-react-box@1.1.34
+  - @sproutsocial/seeds-react-icon@2.5.4
+  - @sproutsocial/seeds-react-mixins@4.3.18
+  - @sproutsocial/seeds-react-visually-hidden@1.0.35
+
+## 1.0.52
+
+### Patch Changes
+
+- Updated dependencies [57372fe]
+  - @sproutsocial/seeds-react-theme@4.6.0
+  - @sproutsocial/seeds-react-box@1.1.33
+  - @sproutsocial/seeds-react-icon@2.5.3
+  - @sproutsocial/seeds-react-mixins@4.3.17
+  - @sproutsocial/seeds-react-visually-hidden@1.0.34
+
 ## 1.0.51
 
 ### Patch Changes

package/dist/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;
+  }
+}