@sproutsocial/seeds-react-datepicker 1.0.51 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +54 -0
  3. package/dist/datepicker.css +262 -0
  4. package/dist/esm/index.js +76 -174
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/index.js +74 -172
  7. package/dist/index.js.map +1 -1
  8. package/package.json +10 -10
  9. package/src/CalendarDayTailwind.tsx +76 -0
  10. package/src/DateRangePicker/DateRangePicker.tsx +6 -2
  11. package/src/DateRangePicker/__tests__/DateRangePicker.test.tsx +1 -2
  12. package/src/SingleDatePicker/SingleDatePicker.tsx +6 -2
  13. package/src/SingleDatePicker/__tests__/SingleDatePicker.test.tsx +1 -2
  14. package/src/__tests__/DatepickerContract.test.tsx +269 -0
  15. package/src/__tests__/DatepickerRouting.test.tsx +501 -0
  16. package/src/cn.ts +28 -0
  17. package/src/common.tsx +1 -1
  18. package/src/datepicker.css +262 -0
  19. package/src/dayModifiers.ts +71 -0
  20. package/src/styles.ts +21 -54
package/dist/index.js CHANGED
@@ -42,11 +42,35 @@ var import_react2 = __toESM(require("react"));
42
42
  var import_moment2 = __toESM(require("moment"));
43
43
  var import_DayPickerSingleDateController = __toESM(require("react-dates/lib/components/DayPickerSingleDateController"));
44
44
 
45
- // src/styles.ts
46
- var import_styled_components = __toESM(require("styled-components"));
45
+ // src/common.tsx
46
+ var import_initialize = require("react-dates/initialize");
47
+ var import_datepicker = require("react-dates/lib/css/_datepicker.css");
48
+ var import_react = require("react");
49
+ var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
50
+
51
+ // src/CalendarDayTailwind.tsx
52
+ var React = __toESM(require("react"));
53
+
54
+ // src/cn.ts
55
+ function cn(...inputs) {
56
+ const classes = [];
57
+ for (const input of inputs) {
58
+ if (!input) continue;
59
+ if (typeof input === "string") {
60
+ classes.push(input);
61
+ } else if (typeof input === "object") {
62
+ for (const [key, value] of Object.entries(input)) {
63
+ if (value) {
64
+ classes.push(key);
65
+ }
66
+ }
67
+ }
68
+ }
69
+ return classes.join(" ");
70
+ }
71
+
72
+ // src/dayModifiers.ts
47
73
  var import_moment = __toESM(require("moment"));
48
- var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
49
- var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
50
74
  var isSelected = (modifiers) => modifiers.has("selected-span") || modifiers.has("selected") || modifiers.has("selected-start") || modifiers.has("selected-end") || modifiers.has("hovered-span") || modifiers.has("after-hovered-start");
51
75
  var isOutOfRange = (modifiers) => modifiers.has("blocked-out-of-range");
52
76
  var isHoveredAndInRange = (modifiers) => modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
@@ -68,175 +92,55 @@ var shouldHaveRightPill = (modifiers, day) => {
68
92
  }
69
93
  return false;
70
94
  };
71
- var CalendarDay = (0, import_styled_components.default)(import_seeds_react_box.default)`
72
- ${({ modifiers, day, theme }) => {
95
+
96
+ // src/CalendarDayTailwind.tsx
97
+ var import_jsx_runtime = require("react/jsx-runtime");
98
+ var dayStateClasses = (modifiers, day) => {
73
99
  if (isSelected(modifiers)) {
74
- return import_styled_components.css`
75
- background-color: ${theme.colors.container.background.selected};
76
- color: ${theme.colors.text.inverse};
77
- margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};
78
- margin-right: ${shouldHaveRightPill(modifiers, day) && theme.space[200]};
79
- border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
80
- border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
81
- border-top-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
82
- border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
83
- `;
100
+ return {
101
+ "seeds-datepicker-day-selected": true,
102
+ "seeds-datepicker-day-pill-left": shouldHaveLeftPill(modifiers, day),
103
+ "seeds-datepicker-day-pill-right": shouldHaveRightPill(modifiers, day)
104
+ };
84
105
  }
85
106
  if (isHoveredAndInRange(modifiers)) {
86
- return import_styled_components.css`
87
- margin: 0 ${theme.space[200]};
88
- border-radius: ${theme.radii.pill};
89
- border: 1px solid ${theme.colors.container.border.selected};
90
- `;
91
- } else if (isOutOfRange(modifiers)) {
92
- return import_styled_components.css`
93
- color: ${theme.colors.text.subtext};
94
- ${import_seeds_react_mixins.disabled};
95
- `;
107
+ return { "seeds-datepicker-day-hovered": true };
96
108
  }
97
- }};
98
- `;
99
- var ReactDatesCssOverrides = import_styled_components.createGlobalStyle`
100
- .DayPicker {
101
- box-sizing: content-box;
102
- font-weight: ${({ theme }) => theme.fontWeights.normal};
103
- font-family: ${(props) => props.theme.fontFamily};
104
-
105
- /* override react-dates height to better reflect how tall the component actually is */
106
- /* adding margin/padding will be more truer to our seeds system because the height */
107
- /* of the calendar adds an extra row of padding if we do not override it */
108
- &_transitionContainer {
109
- /* need !important because react-dates sets height on the element itself */
110
- height: 228px !important;
111
- }
112
-
113
- &_weekHeader {
114
- color: ${({ theme }) => theme.colors.text.headline};
115
- border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
116
-
117
- /* Magic number to match position of .CalendarMonth_caption */
118
- top: 26px;
119
-
120
- /* Magic number to make the bottom border line stretch the full width */
121
- width: 230px;
122
-
123
- &_ul {
124
- /* Magic number to line up day name headings over the correct numbers */
125
- padding-left: 10px;
126
- }
127
- }
128
-
129
- &_weekHeaders__horizontal {
130
- margin-left: 0
131
- }
132
-
133
- &_weekHeader_li {
134
- ${({ theme }) => theme.typography[200]}
135
- color: ${({ theme }) => theme.colors.text.subtext};
136
- font-weight: ${({ theme }) => theme.fontWeights.semibold};
137
- margin: 0;
138
- }
139
-
140
- &__horizontal {
141
- box-shadow: none;
142
- background: ${({ theme }) => theme.colors.container.background.base};
143
- }
144
- }
145
-
146
- .CalendarDay {
147
- background-color: transparent;
148
-
149
- &__selected, &__selected_span, &:hover {
150
- background-color: transparent;
151
- }
152
-
153
- &__default {
154
- color: ${({ theme }) => theme.colors.text.body};
155
- }
156
- &__default,
157
- &__default:hover {
158
- border: none;
159
- color: ${({ theme }) => theme.colors.text.body};
160
- }
161
- }
162
-
163
- .CalendarMonth {
164
- ${({ theme }) => theme.typography[200]}
165
- background: ${({ theme }) => theme.colors.container.background.base};
166
-
167
- /* spacing between visible months and months off canvas */
168
- padding: 0 15px;
169
-
170
- &_caption {
171
- ${({ theme }) => theme.typography[200]}
172
- color: ${({ theme }) => theme.colors.text.headline};
173
- padding-top: 0;
174
- background: ${({ theme }) => theme.colors.container.background.base};
175
-
176
- strong {
177
- font-weight: ${({ theme }) => theme.fontWeights.semibold};
178
- }
179
-
180
- }
181
- &_table {
182
- line-height: 21.333px;
183
- tr {
184
- vertical-align: middle;
185
- }
186
- td {
187
- padding: 0;
188
- border-bottom: none;
189
- }
190
- }
191
- }
192
-
193
- .CalendarMonthGrid {
194
- background: ${({ theme }) => theme.colors.container.background.base};
195
- }
196
-
197
- /* Left and Right Arrow Buttons to navigate months */
198
- .DayPickerNavigation_button__horizontal {
199
- color: ${({ theme }) => theme.colors.button.pill.text.base};
200
- top: -4px;
201
- padding: 7px 8px;
202
- position: absolute;
203
- line-height: 0.78;
204
- border-radius: 9999px;
205
- border: none;
206
- background: ${({ theme }) => theme.colors.button.pill.background.base};
207
-
208
- &:nth-child(1) {
209
- left: 22px;
210
- }
211
- &:nth-child(2) {
212
- right: 22px;
213
- }
214
-
215
- &:hover {
216
- background: ${({ theme }) => theme.colors.button.pill.background.hover};
217
- }
218
- }
219
- `;
109
+ if (isOutOfRange(modifiers)) {
110
+ return { "seeds-datepicker-day-out-of-range": true };
111
+ }
112
+ return {};
113
+ };
114
+ var CalendarDayTailwind = React.forwardRef(({ modifiers, day, className, children }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
+ "div",
116
+ {
117
+ ref,
118
+ className: cn(
119
+ "seeds-datepicker-day",
120
+ dayStateClasses(modifiers, day),
121
+ className
122
+ ),
123
+ children
124
+ }
125
+ ));
126
+ CalendarDayTailwind.displayName = "CalendarDay";
127
+ var CalendarDayTailwind_default = CalendarDayTailwind;
220
128
 
221
129
  // src/common.tsx
222
- var import_initialize = require("react-dates/initialize");
223
- var import_datepicker = require("react-dates/lib/css/_datepicker.css");
224
- var import_react = require("react");
225
- var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
226
- var import_jsx_runtime = require("react/jsx-runtime");
130
+ var import_jsx_runtime2 = require("react/jsx-runtime");
227
131
  var iconNames = {
228
132
  left: "arrow-left-solid",
229
133
  right: "arrow-right-solid"
230
134
  };
231
135
  var CalendarNavButton = ({
232
136
  type
233
- }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { size: "mini", name: iconNames[type], "aria-hidden": true });
137
+ }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon.default, { size: "mini", name: iconNames[type], "aria-hidden": true });
234
138
  var commonDatePickerProps = {
235
139
  hideKeyboardShortcutsPanel: true,
236
140
  daySize: 30,
237
- navPrev: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarNavButton, { type: "left" }),
238
- navNext: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarNavButton, { type: "right" }),
239
- renderDayContents: (day, modifiers) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarDay, { day, modifiers, children: day.format("D") }),
141
+ navPrev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarNavButton, { type: "left" }),
142
+ navNext: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarNavButton, { type: "right" }),
143
+ renderDayContents: (day, modifiers) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarDayTailwind_default, { day, modifiers, children: day.format("D") }),
240
144
  initialVisibleMonth: null
241
145
  };
242
146
  var formatDateAsCalendarHeader = (date) => date.format("MMMM YYYY");
@@ -251,7 +155,7 @@ var DefaultSetStatusText = (dates) => dates.map(formatDateAsCalendarHeader).join
251
155
 
252
156
  // src/SingleDatePicker/SingleDatePicker.tsx
253
157
  var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
254
- var import_jsx_runtime2 = require("react/jsx-runtime");
158
+ var import_jsx_runtime3 = require("react/jsx-runtime");
255
159
  var noop = () => {
256
160
  };
257
161
  var SingleDatePicker = ({
@@ -287,10 +191,9 @@ var SingleDatePicker = ({
287
191
  },
288
192
  [onBlur, onFocusChange]
289
193
  );
290
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
291
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReactDatesCssOverrides, {}),
292
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "status", children: statusText }) }),
293
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
194
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
195
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "status", children: statusText }) }),
196
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
294
197
  import_DayPickerSingleDateController.default,
295
198
  {
296
199
  ...commonDatePickerProps,
@@ -312,7 +215,7 @@ var SingleDatePicker_default = import_react2.default.memo(SingleDatePicker);
312
215
 
313
216
  // src/SingleDatePicker/StatefulSingleDatePicker.tsx
314
217
  var import_react3 = require("react");
315
- var import_jsx_runtime3 = require("react/jsx-runtime");
218
+ var import_jsx_runtime4 = require("react/jsx-runtime");
316
219
  var StatefulSingleDatePicker = ({
317
220
  date,
318
221
  onDateChange,
@@ -323,7 +226,7 @@ var StatefulSingleDatePicker = ({
323
226
  onDateChange && onDateChange(date2);
324
227
  setDate(date2);
325
228
  };
326
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
229
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
327
230
  SingleDatePicker_default,
328
231
  {
329
232
  date: stateDate,
@@ -338,7 +241,7 @@ var import_react4 = require("react");
338
241
  var import_moment3 = __toESM(require("moment"));
339
242
  var import_DayPickerRangeController = __toESM(require("react-dates/lib/components/DayPickerRangeController"));
340
243
  var import_seeds_react_visually_hidden2 = require("@sproutsocial/seeds-react-visually-hidden");
341
- var import_jsx_runtime4 = require("react/jsx-runtime");
244
+ var import_jsx_runtime5 = require("react/jsx-runtime");
342
245
  var DateRangePicker = ({
343
246
  startDate = null,
344
247
  endDate = null,
@@ -375,10 +278,9 @@ var DateRangePicker = ({
375
278
  },
376
279
  [onBlur, onFocusChange]
377
280
  );
378
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
379
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReactDatesCssOverrides, {}),
380
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_visually_hidden2.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { role: "status", children: statusText }) }),
381
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
281
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
282
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_visually_hidden2.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "status", children: statusText }) }),
283
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
382
284
  import_DayPickerRangeController.default,
383
285
  {
384
286
  ...commonDatePickerProps,
@@ -403,7 +305,7 @@ var DateRangePicker_default = DateRangePicker;
403
305
  // src/DateRangePicker/StatefulDateRangePicker.tsx
404
306
  var import_react5 = __toESM(require("react"));
405
307
  var import_constants = require("react-dates/constants");
406
- var import_jsx_runtime5 = require("react/jsx-runtime");
308
+ var import_jsx_runtime6 = require("react/jsx-runtime");
407
309
  var StatefulDateRangePicker = ({
408
310
  startDate,
409
311
  endDate,
@@ -429,7 +331,7 @@ var StatefulDateRangePicker = ({
429
331
  nextFocusedInput === null ? import_constants.START_DATE : nextFocusedInput
430
332
  );
431
333
  };
432
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
334
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
433
335
  DateRangePicker_default,
434
336
  {
435
337
  startDate: dates.startDate,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/SingleDatePicker/SingleDatePicker.tsx","../src/styles.ts","../src/common.tsx","../src/SingleDatePicker/StatefulSingleDatePicker.tsx","../src/DateRangePicker/DateRangePicker.tsx","../src/DateRangePicker/StatefulDateRangePicker.tsx"],"sourcesContent":["export * from \"./SingleDatePicker\";\nexport * from \"./DateRangePicker\";\n","import React, { useCallback, useState } from \"react\";\nimport moment from \"moment\";\nimport DayPickerSingleDateController from \"react-dates/lib/components/DayPickerSingleDateController\";\nimport { ReactDatesCssOverrides } from \"../styles\";\nimport {\n commonDatePickerProps,\n DefaultSetStatusText,\n getVisibleMonths,\n} from \"../common\";\nimport type { TypeSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nconst noop = () => {};\n\nconst SingleDatePicker = ({\n onDateChange,\n setStatusText = DefaultSetStatusText,\n date = null,\n focused = false,\n onFocusChange = noop,\n initialVisibleMonth,\n numberOfMonths = 1,\n onBlur,\n ...rest\n}: TypeSingleDatePickerProps) => {\n const [statusText, updateStatusText] = useState(() =>\n setStatusText(\n getVisibleMonths(\n moment(initialVisibleMonth?.() || date || undefined),\n numberOfMonths\n )\n )\n );\n\n const handleMonthClick = useCallback(\n // @ts-ignore unknown types\n (date) => {\n updateStatusText(setStatusText(getVisibleMonths(date, numberOfMonths)));\n },\n [numberOfMonths, setStatusText]\n );\n const wrappedOnBlur = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n onFocusChange?.({ focused: false });\n onBlur?.(event);\n },\n [onBlur, onFocusChange]\n );\n\n return (\n <>\n <ReactDatesCssOverrides />\n <VisuallyHidden>\n <div role=\"status\">{statusText}</div>\n </VisuallyHidden>\n <DayPickerSingleDateController\n {...commonDatePickerProps}\n date={date}\n numberOfMonths={numberOfMonths}\n onDateChange={onDateChange}\n initialVisibleMonth={initialVisibleMonth || null}\n focused={focused}\n onBlur={wrappedOnBlur}\n onFocusChange={onFocusChange}\n onPrevMonthClick={handleMonthClick}\n onNextMonthClick={handleMonthClick}\n {...rest}\n />\n </>\n );\n};\n\nexport default React.memo<TypeSingleDatePickerProps>(SingleDatePicker);\n","import styled, { createGlobalStyle, css } from \"styled-components\";\nimport moment from \"moment\";\nimport type { ModifiersShape } from \"react-dates\";\nimport { disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\n/*\n * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.\n *\n * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,\n * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,\n * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,\n * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,\n * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,\n * selected-end-no-selected-start\n *\n */\nconst isSelected = (modifiers: ModifiersShape) =>\n modifiers.has(\"selected-span\") ||\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-start\") ||\n modifiers.has(\"selected-end\") ||\n modifiers.has(\"hovered-span\") ||\n modifiers.has(\"after-hovered-start\");\n\nconst isOutOfRange = (modifiers: ModifiersShape) =>\n modifiers.has(\"blocked-out-of-range\");\n\nconst isHoveredAndInRange = (modifiers: ModifiersShape) =>\n modifiers.has(\"hovered\") && !modifiers.has(\"blocked-out-of-range\");\n\nconst shouldHaveLeftPill = (modifiers: ModifiersShape, day: moment.Moment) => {\n if (!isSelected(modifiers)) {\n return false;\n }\n\n if (\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-start\") ||\n modifiers.has(\"first-day-of-week\") ||\n day.isSame(moment(day).startOf(\"month\"), \"day\")\n ) {\n return true;\n }\n\n return false;\n};\n\nconst shouldHaveRightPill = (modifiers: ModifiersShape, day: moment.Moment) => {\n if (!isSelected(modifiers)) {\n return false;\n }\n\n if (\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-end\") ||\n modifiers.has(\"last-day-of-week\") ||\n day.isSame(moment(day).endOf(\"month\"), \"day\")\n ) {\n return true;\n }\n\n return false;\n};\n\nexport const CalendarDay = styled(Box)<{\n modifiers: ModifiersShape;\n day: moment.Moment;\n}>`\n ${({ modifiers, day, theme }) => {\n if (isSelected(modifiers)) {\n return css`\n background-color: ${theme.colors.container.background.selected};\n color: ${theme.colors.text.inverse};\n margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};\n margin-right: ${shouldHaveRightPill(modifiers, day) &&\n theme.space[200]};\n border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) &&\n theme.radii.pill};\n border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) &&\n theme.radii.pill};\n border-top-right-radius: ${shouldHaveRightPill(modifiers, day) &&\n theme.radii.pill};\n border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) &&\n theme.radii.pill};\n `;\n }\n\n if (isHoveredAndInRange(modifiers)) {\n return css`\n margin: 0 ${theme.space[200]};\n border-radius: ${theme.radii.pill};\n border: 1px solid ${theme.colors.container.border.selected};\n `;\n } else if (isOutOfRange(modifiers)) {\n return css`\n color: ${theme.colors.text.subtext};\n ${disabled};\n `;\n }\n }};\n`;\n\nexport const ReactDatesCssOverrides = createGlobalStyle`\n\t.DayPicker {\n\t\tbox-sizing: content-box;\n\t\tfont-weight: ${({ theme }) => theme.fontWeights.normal};\n\t\tfont-family: ${(props) => props.theme.fontFamily};\n\n\t\t/* override react-dates height to better reflect how tall the component actually is */\n\t\t/* adding margin/padding will be more truer to our seeds system because the height */\n\t\t/* of the calendar adds an extra row of padding if we do not override it */\n\t\t&_transitionContainer {\n\t\t\t/* need !important because react-dates sets height on the element itself */\n\t\t\theight: 228px !important;\n\t\t}\n\n\t\t&_weekHeader {\n\t\t\tcolor: ${({ theme }) => theme.colors.text.headline};\n\t\t\tborder-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};\n\n \t\t\t/* Magic number to match position of .CalendarMonth_caption */\n\t\t\ttop: 26px;\n\n\t\t\t/* Magic number to make the bottom border line stretch the full width */\n\t\t\twidth: 230px;\n\n\t\t\t&_ul {\n \t\t\t\t/* Magic number to line up day name headings over the correct numbers */\n\t\t\t\tpadding-left: 10px;\n\t\t\t}\n\t\t}\n\n\t\t&_weekHeaders__horizontal {\n\t\t\tmargin-left: 0\n\t\t}\n\n\t\t&_weekHeader_li {\n\t\t\t${({ theme }) => theme.typography[200]}\n\t\t\tcolor: ${({ theme }) => theme.colors.text.subtext};\n\t\t\tfont-weight: ${({ theme }) => theme.fontWeights.semibold};\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&__horizontal {\n\t\t\tbox-shadow: none;\n\t\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\t\t}\n\t}\n\n .CalendarDay {\n\t\tbackground-color: transparent;\n\n &__selected, &__selected_span, &:hover {\n background-color: transparent;\n\t\t}\n\n\t\t&__default {\n\t\t\tcolor: ${({ theme }) => theme.colors.text.body};\n\t\t}\n\t\t&__default,\n\t\t&__default:hover {\n\t\t\tborder: none;\n\t\t\tcolor: ${({ theme }) => theme.colors.text.body};\n\t\t}\n\t}\n\n .CalendarMonth {\n\t\t${({ theme }) => theme.typography[200]}\n\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\n \t\t/* spacing between visible months and months off canvas */\n\t\tpadding: 0 15px;\n\n\t\t&_caption {\n\t\t\t${({ theme }) => theme.typography[200]}\n\t\t\tcolor: ${({ theme }) => theme.colors.text.headline};\n\t\t\tpadding-top: 0;\n\t\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\n\t\t\tstrong {\n\t\t\t\tfont-weight: ${({ theme }) => theme.fontWeights.semibold};\n\t\t\t}\n\n\t\t}\n\t\t&_table {\n\t\t\tline-height: 21.333px;\n\t\t\ttr {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t\ttd {\n\t\t\t\tpadding: 0;\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.CalendarMonthGrid {\n\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\t}\n\n\t/* Left and Right Arrow Buttons to navigate months */\n\t.DayPickerNavigation_button__horizontal {\n\t\tcolor: ${({ theme }) => theme.colors.button.pill.text.base};\n\t\ttop: -4px;\n\t\tpadding: 7px 8px;\n\t\tposition: absolute;\n\t\tline-height: 0.78;\n\t\tborder-radius: 9999px;\n\t\tborder: none;\n\t\tbackground: ${({ theme }) => theme.colors.button.pill.background.base};\n\n\t\t&:nth-child(1) {\n\t\t\tleft: 22px;\n\t\t}\n\t\t&:nth-child(2) {\n\t\t\tright: 22px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: ${({ theme }) => theme.colors.button.pill.background.hover};\n\t\t}\n\t}\n`;\n","import \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport type { Moment } from \"moment\";\nimport React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { CalendarDay } from \"./styles\";\nimport type { TypeCommonDatePickerProps } from \"./types\";\n\ntype TypeCalendarNavButtonType = \"left\" | \"right\";\n\nconst iconNames: { [key in TypeCalendarNavButtonType]: TypeIconName } = {\n left: \"arrow-left-solid\",\n right: \"arrow-right-solid\",\n};\n\nexport const CalendarNavButton = ({\n type,\n}: {\n type: TypeCalendarNavButtonType;\n}) => <Icon size=\"mini\" name={iconNames[type]} aria-hidden />;\n\nexport const commonDatePickerProps: TypeCommonDatePickerProps = {\n hideKeyboardShortcutsPanel: true,\n daySize: 30,\n navPrev: <CalendarNavButton type=\"left\" />,\n navNext: <CalendarNavButton type=\"right\" />,\n renderDayContents: (day, modifiers) => (\n <CalendarDay day={day} modifiers={modifiers}>\n {day.format(\"D\")}\n </CalendarDay>\n ),\n initialVisibleMonth: null,\n};\n// Testing utilities\n\nexport const formatDateAsCalendarHeader = (date: Moment): string =>\n date.format(\"MMMM YYYY\");\n\nexport const formatDateAsCalendarDay = (date: Moment): string =>\n date.format(\"dddd, MMMM D, YYYY\");\n\nexport const getVisibleMonthWithReactDatesInternalApi = (\n container: HTMLElement\n): string =>\n container.querySelector(\"[data-visible=true] strong\")?.textContent ?? \"\";\n\n// Receives a single Moment and returns an array of Moments, one for each currently visible month.\n// @ts-ignore unknown types\nexport const getVisibleMonths = (initialMonth, numberOfMonths) => {\n const months = [initialMonth];\n for (let i = 1; i < numberOfMonths; i++) {\n months.push(initialMonth.clone().add(i, \"month\"));\n }\n return months;\n};\n\n// Default setStatusText prop for both SingleDatePicker and DateRangePicker\n// @ts-ignore unknown types\nexport const DefaultSetStatusText = (dates) =>\n dates.map(formatDateAsCalendarHeader).join(\", \");\n","import React, { useState } from \"react\";\nimport type { TypeStatefulSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport SingleDatePicker from \"./SingleDatePicker\";\n\nexport const StatefulSingleDatePicker = ({\n date,\n onDateChange,\n ...rest\n}: TypeStatefulSingleDatePickerProps) => {\n const [stateDate, setDate] = useState(date);\n\n // @ts-ignore unknown types\n const handleDateChange = (date) => {\n onDateChange && onDateChange(date);\n setDate(date);\n };\n\n return (\n <SingleDatePicker\n date={stateDate}\n onDateChange={handleDateChange}\n {...rest}\n />\n );\n};\n","import React, { useCallback, useState, type KeyboardEvent } from \"react\";\nimport moment from \"moment\";\nimport DayPickerRangeController from \"react-dates/lib/components/DayPickerRangeController\";\nimport { ReactDatesCssOverrides } from \"../styles\";\nimport {\n commonDatePickerProps,\n DefaultSetStatusText,\n getVisibleMonths,\n} from \"../common\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeDateRangePickerProps } from \"./DateRangePickerTypes\";\n\nconst DateRangePicker = ({\n startDate = null,\n endDate = null,\n onDatesChange,\n setStatusText = DefaultSetStatusText,\n initialVisibleMonth,\n numberOfMonths = 2,\n onFocusChange,\n onBlur,\n focusedInput,\n ...rest\n}: TypeDateRangePickerProps) => {\n const [statusText, updateStatusText] = useState(() =>\n setStatusText(\n getVisibleMonths(\n moment(initialVisibleMonth?.() ?? startDate ?? undefined),\n numberOfMonths\n )\n )\n );\n interface HandleMonthClick {\n (month: moment.Moment): void;\n }\n\n const handleMonthClick: HandleMonthClick = useCallback(\n (month) => {\n updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));\n },\n [numberOfMonths, setStatusText]\n );\n const wrappedOnBlur = useCallback<\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n (event: undefined | KeyboardEvent<HTMLDivElement>) => void\n >(\n (event) => {\n // for some reason onBlur is called with no event on day selection 🤷\n if (!event) {\n return;\n }\n onFocusChange?.(null);\n onBlur?.(event);\n },\n [onBlur, onFocusChange]\n );\n\n return (\n <>\n <ReactDatesCssOverrides />\n <VisuallyHidden>\n <div role=\"status\">{statusText}</div>\n </VisuallyHidden>\n <DayPickerRangeController\n {...commonDatePickerProps}\n startDate={startDate}\n endDate={endDate}\n onDatesChange={onDatesChange}\n numberOfMonths={numberOfMonths}\n initialVisibleMonth={initialVisibleMonth || null}\n focusedInput={focusedInput}\n isFocused={focusedInput !== null}\n onBlur={wrappedOnBlur}\n onFocusChange={onFocusChange}\n onPrevMonthClick={handleMonthClick}\n onNextMonthClick={handleMonthClick}\n {...rest}\n />\n </>\n );\n};\n\nexport default DateRangePicker;\n","import React, { useState } from \"react\";\n// @ts-ignore unknown types\nimport { START_DATE } from \"react-dates/constants\";\nimport type { TypeStatefulDateRangePickerProps } from \"./DateRangePickerTypes\";\nimport DateRangePicker from \"./DateRangePicker\";\n\nexport const StatefulDateRangePicker = ({\n startDate,\n endDate,\n onDatesChange,\n onFocusChange,\n ...rest\n}: TypeStatefulDateRangePickerProps) => {\n const [dates, setDate] = useState({\n startDate,\n endDate,\n });\n const [focusedInput, setFocusedInput] = React.useState(START_DATE);\n\n // @ts-ignore unknown types\n const handleDatesChange = (nextDates) => {\n onDatesChange && onDatesChange(nextDates);\n setDate(nextDates);\n };\n\n // @ts-ignore unknown types\n const handleFocusChange = (nextFocusedInput) => {\n onFocusChange && onFocusChange(nextFocusedInput);\n setFocusedInput(\n // null means that we've selected an end date. we want to go back to START_DATE\n // so the user can modify their selection. if focusedInput === null then it won't\n // respond to click or keyboard events\n nextFocusedInput === null ? START_DATE : nextFocusedInput\n );\n };\n\n return (\n <DateRangePicker\n startDate={dates.startDate}\n endDate={dates.endDate}\n focusedInput={focusedInput}\n onDatesChange={handleDatesChange}\n onFocusChange={handleFocusChange}\n {...rest}\n />\n );\n};\n"],"mappings":"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","names":["import_react","import_moment","moment","styled","Box","Icon","import_jsx_runtime","moment","date","DayPickerSingleDateController","React","import_react","import_jsx_runtime","date","import_react","import_moment","import_seeds_react_visually_hidden","import_jsx_runtime","moment","DayPickerRangeController","import_react","import_jsx_runtime","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/SingleDatePicker/SingleDatePicker.tsx","../src/common.tsx","../src/CalendarDayTailwind.tsx","../src/cn.ts","../src/dayModifiers.ts","../src/SingleDatePicker/StatefulSingleDatePicker.tsx","../src/DateRangePicker/DateRangePicker.tsx","../src/DateRangePicker/StatefulDateRangePicker.tsx"],"sourcesContent":["export * from \"./SingleDatePicker\";\nexport * from \"./DateRangePicker\";\n","import React, { useCallback, useState } from \"react\";\nimport moment from \"moment\";\nimport DayPickerSingleDateController from \"react-dates/lib/components/DayPickerSingleDateController\";\nimport {\n commonDatePickerProps,\n DefaultSetStatusText,\n getVisibleMonths,\n} from \"../common\";\nimport type { TypeSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nconst noop = () => {};\n\nconst SingleDatePicker = ({\n onDateChange,\n setStatusText = DefaultSetStatusText,\n date = null,\n focused = false,\n onFocusChange = noop,\n initialVisibleMonth,\n numberOfMonths = 1,\n onBlur,\n ...rest\n}: TypeSingleDatePickerProps) => {\n const [statusText, updateStatusText] = useState(() =>\n setStatusText(\n getVisibleMonths(\n moment(initialVisibleMonth?.() || date || undefined),\n numberOfMonths\n )\n )\n );\n\n const handleMonthClick = useCallback(\n // @ts-ignore unknown types\n (date) => {\n updateStatusText(setStatusText(getVisibleMonths(date, numberOfMonths)));\n },\n [numberOfMonths, setStatusText]\n );\n const wrappedOnBlur = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n onFocusChange?.({ focused: false });\n onBlur?.(event);\n },\n [onBlur, onFocusChange]\n );\n\n /*\n * The react-dates overrides that ReactDatesCssOverrides used to inject at\n * runtime now ship statically in datepicker.css, aggregated into\n * @sproutsocial/racine/css/components. styles.ts keeps the styled source for\n * Phase A, but nothing imports it, so it is tree-shaken out of the bundle.\n */\n return (\n <>\n <VisuallyHidden>\n <div role=\"status\">{statusText}</div>\n </VisuallyHidden>\n <DayPickerSingleDateController\n {...commonDatePickerProps}\n date={date}\n numberOfMonths={numberOfMonths}\n onDateChange={onDateChange}\n initialVisibleMonth={initialVisibleMonth || null}\n focused={focused}\n onBlur={wrappedOnBlur}\n onFocusChange={onFocusChange}\n onPrevMonthClick={handleMonthClick}\n onNextMonthClick={handleMonthClick}\n {...rest}\n />\n </>\n );\n};\n\nexport default React.memo<TypeSingleDatePickerProps>(SingleDatePicker);\n","import \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport type { Moment } from \"moment\";\nimport React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport CalendarDay from \"./CalendarDayTailwind\";\nimport type { TypeCommonDatePickerProps } from \"./types\";\n\ntype TypeCalendarNavButtonType = \"left\" | \"right\";\n\nconst iconNames: { [key in TypeCalendarNavButtonType]: TypeIconName } = {\n left: \"arrow-left-solid\",\n right: \"arrow-right-solid\",\n};\n\nexport const CalendarNavButton = ({\n type,\n}: {\n type: TypeCalendarNavButtonType;\n}) => <Icon size=\"mini\" name={iconNames[type]} aria-hidden />;\n\nexport const commonDatePickerProps: TypeCommonDatePickerProps = {\n hideKeyboardShortcutsPanel: true,\n daySize: 30,\n navPrev: <CalendarNavButton type=\"left\" />,\n navNext: <CalendarNavButton type=\"right\" />,\n renderDayContents: (day, modifiers) => (\n <CalendarDay day={day} modifiers={modifiers}>\n {day.format(\"D\")}\n </CalendarDay>\n ),\n initialVisibleMonth: null,\n};\n// Testing utilities\n\nexport const formatDateAsCalendarHeader = (date: Moment): string =>\n date.format(\"MMMM YYYY\");\n\nexport const formatDateAsCalendarDay = (date: Moment): string =>\n date.format(\"dddd, MMMM D, YYYY\");\n\nexport const getVisibleMonthWithReactDatesInternalApi = (\n container: HTMLElement\n): string =>\n container.querySelector(\"[data-visible=true] strong\")?.textContent ?? \"\";\n\n// Receives a single Moment and returns an array of Moments, one for each currently visible month.\n// @ts-ignore unknown types\nexport const getVisibleMonths = (initialMonth, numberOfMonths) => {\n const months = [initialMonth];\n for (let i = 1; i < numberOfMonths; i++) {\n months.push(initialMonth.clone().add(i, \"month\"));\n }\n return months;\n};\n\n// Default setStatusText prop for both SingleDatePicker and DateRangePicker\n// @ts-ignore unknown types\nexport const DefaultSetStatusText = (dates) =>\n dates.map(formatDateAsCalendarHeader).join(\", \");\n","import * as React from \"react\";\nimport type moment from \"moment\";\nimport type { ModifiersShape } from \"react-dates\";\nimport { cn } from \"./cn\";\nimport {\n isHoveredAndInRange,\n isOutOfRange,\n isSelected,\n shouldHaveLeftPill,\n shouldHaveRightPill,\n} from \"./dayModifiers\";\n\nexport interface TypeCalendarDayProps {\n modifiers: ModifiersShape;\n day: moment.Moment;\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * Static day cell. Renders the semantic `seeds-datepicker-day*` classes from\n * datepicker.css with no runtime CSS-in-JS.\n *\n * The legacy cell was `styled(Box)`, and Box ships no CSS of its own, so\n * `.seeds-datepicker-day` reproduces Box's baseline (box-sizing + font-family)\n * and this component reproduces Box's forwardRef.\n *\n * The visual states are mutually exclusive, exactly as in the styled version's\n * if / else-if chain: a selected day never also picks up the hovered or\n * out-of-range treatment. Pill edges are modifier classes rather than values,\n * so an absent edge emits no declaration at all.\n */\nconst dayStateClasses = (\n modifiers: ModifiersShape,\n day: moment.Moment\n): Record<string, boolean> => {\n if (isSelected(modifiers)) {\n return {\n \"seeds-datepicker-day-selected\": true,\n \"seeds-datepicker-day-pill-left\": shouldHaveLeftPill(modifiers, day),\n \"seeds-datepicker-day-pill-right\": shouldHaveRightPill(modifiers, day),\n };\n }\n\n if (isHoveredAndInRange(modifiers)) {\n return { \"seeds-datepicker-day-hovered\": true };\n }\n\n if (isOutOfRange(modifiers)) {\n return { \"seeds-datepicker-day-out-of-range\": true };\n }\n\n return {};\n};\n\nconst CalendarDayTailwind = React.forwardRef<\n HTMLDivElement,\n TypeCalendarDayProps\n>(({ modifiers, day, className, children }, ref) => (\n <div\n ref={ref}\n // Semantic classes come before the consumer className so consumer utilities\n // can override the layered base styles.\n className={cn(\n \"seeds-datepicker-day\",\n dayStateClasses(modifiers, day),\n className\n )}\n >\n {children}\n </div>\n));\n\nCalendarDayTailwind.displayName = \"CalendarDay\";\n\nexport default CalendarDayTailwind;\n","/**\n * Minimal className combiner, mirroring the local copies in seeds-react-list,\n * seeds-react-profile and seeds-react-tree —\n * @sproutsocial/seeds-react-utilities does NOT export a `cn` helper.\n *\n * Falsy inputs are dropped; object inputs contribute each truthy key.\n */\nexport function cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n","import moment from \"moment\";\nimport type { ModifiersShape } from \"react-dates\";\n\n/*\n * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.\n *\n * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,\n * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,\n * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,\n * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,\n * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,\n * selected-end-no-selected-start\n *\n * These predicates are the single source of truth for which visual state a day\n * cell is in. Both the static day cell (CalendarDayTailwind) and the preserved\n * styled one (styles.ts) read them, so the two paths cannot drift apart.\n */\n\nexport const isSelected = (modifiers: ModifiersShape) =>\n modifiers.has(\"selected-span\") ||\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-start\") ||\n modifiers.has(\"selected-end\") ||\n modifiers.has(\"hovered-span\") ||\n modifiers.has(\"after-hovered-start\");\n\nexport const isOutOfRange = (modifiers: ModifiersShape) =>\n modifiers.has(\"blocked-out-of-range\");\n\nexport const isHoveredAndInRange = (modifiers: ModifiersShape) =>\n modifiers.has(\"hovered\") && !modifiers.has(\"blocked-out-of-range\");\n\nexport const shouldHaveLeftPill = (\n modifiers: ModifiersShape,\n day: moment.Moment\n) => {\n if (!isSelected(modifiers)) {\n return false;\n }\n\n if (\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-start\") ||\n modifiers.has(\"first-day-of-week\") ||\n day.isSame(moment(day).startOf(\"month\"), \"day\")\n ) {\n return true;\n }\n\n return false;\n};\n\nexport const shouldHaveRightPill = (\n modifiers: ModifiersShape,\n day: moment.Moment\n) => {\n if (!isSelected(modifiers)) {\n return false;\n }\n\n if (\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-end\") ||\n modifiers.has(\"last-day-of-week\") ||\n day.isSame(moment(day).endOf(\"month\"), \"day\")\n ) {\n return true;\n }\n\n return false;\n};\n","import React, { useState } from \"react\";\nimport type { TypeStatefulSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport SingleDatePicker from \"./SingleDatePicker\";\n\nexport const StatefulSingleDatePicker = ({\n date,\n onDateChange,\n ...rest\n}: TypeStatefulSingleDatePickerProps) => {\n const [stateDate, setDate] = useState(date);\n\n // @ts-ignore unknown types\n const handleDateChange = (date) => {\n onDateChange && onDateChange(date);\n setDate(date);\n };\n\n return (\n <SingleDatePicker\n date={stateDate}\n onDateChange={handleDateChange}\n {...rest}\n />\n );\n};\n","import React, { useCallback, useState, type KeyboardEvent } from \"react\";\nimport moment from \"moment\";\nimport DayPickerRangeController from \"react-dates/lib/components/DayPickerRangeController\";\nimport {\n commonDatePickerProps,\n DefaultSetStatusText,\n getVisibleMonths,\n} from \"../common\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeDateRangePickerProps } from \"./DateRangePickerTypes\";\n\nconst DateRangePicker = ({\n startDate = null,\n endDate = null,\n onDatesChange,\n setStatusText = DefaultSetStatusText,\n initialVisibleMonth,\n numberOfMonths = 2,\n onFocusChange,\n onBlur,\n focusedInput,\n ...rest\n}: TypeDateRangePickerProps) => {\n const [statusText, updateStatusText] = useState(() =>\n setStatusText(\n getVisibleMonths(\n moment(initialVisibleMonth?.() ?? startDate ?? undefined),\n numberOfMonths\n )\n )\n );\n interface HandleMonthClick {\n (month: moment.Moment): void;\n }\n\n const handleMonthClick: HandleMonthClick = useCallback(\n (month) => {\n updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));\n },\n [numberOfMonths, setStatusText]\n );\n const wrappedOnBlur = useCallback<\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n (event: undefined | KeyboardEvent<HTMLDivElement>) => void\n >(\n (event) => {\n // for some reason onBlur is called with no event on day selection 🤷\n if (!event) {\n return;\n }\n onFocusChange?.(null);\n onBlur?.(event);\n },\n [onBlur, onFocusChange]\n );\n\n /*\n * The react-dates overrides that ReactDatesCssOverrides used to inject at\n * runtime now ship statically in datepicker.css, aggregated into\n * @sproutsocial/racine/css/components. styles.ts keeps the styled source for\n * Phase A, but nothing imports it, so it is tree-shaken out of the bundle.\n */\n return (\n <>\n <VisuallyHidden>\n <div role=\"status\">{statusText}</div>\n </VisuallyHidden>\n <DayPickerRangeController\n {...commonDatePickerProps}\n startDate={startDate}\n endDate={endDate}\n onDatesChange={onDatesChange}\n numberOfMonths={numberOfMonths}\n initialVisibleMonth={initialVisibleMonth || null}\n focusedInput={focusedInput}\n isFocused={focusedInput !== null}\n onBlur={wrappedOnBlur}\n onFocusChange={onFocusChange}\n onPrevMonthClick={handleMonthClick}\n onNextMonthClick={handleMonthClick}\n {...rest}\n />\n </>\n );\n};\n\nexport default DateRangePicker;\n","import React, { useState } from \"react\";\n// @ts-ignore unknown types\nimport { START_DATE } from \"react-dates/constants\";\nimport type { TypeStatefulDateRangePickerProps } from \"./DateRangePickerTypes\";\nimport DateRangePicker from \"./DateRangePicker\";\n\nexport const StatefulDateRangePicker = ({\n startDate,\n endDate,\n onDatesChange,\n onFocusChange,\n ...rest\n}: TypeStatefulDateRangePickerProps) => {\n const [dates, setDate] = useState({\n startDate,\n endDate,\n });\n const [focusedInput, setFocusedInput] = React.useState(START_DATE);\n\n // @ts-ignore unknown types\n const handleDatesChange = (nextDates) => {\n onDatesChange && onDatesChange(nextDates);\n setDate(nextDates);\n };\n\n // @ts-ignore unknown types\n const handleFocusChange = (nextFocusedInput) => {\n onFocusChange && onFocusChange(nextFocusedInput);\n setFocusedInput(\n // null means that we've selected an end date. we want to go back to START_DATE\n // so the user can modify their selection. if focusedInput === null then it won't\n // respond to click or keyboard events\n nextFocusedInput === null ? START_DATE : nextFocusedInput\n );\n };\n\n return (\n <DateRangePicker\n startDate={dates.startDate}\n endDate={dates.endDate}\n focusedInput={focusedInput}\n onDatesChange={handleDatesChange}\n onFocusChange={handleFocusChange}\n {...rest}\n />\n );\n};\n"],"mappings":"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","names":["import_react","import_moment","moment","import_jsx_runtime","Icon","import_jsx_runtime","moment","date","DayPickerSingleDateController","React","import_react","import_jsx_runtime","date","import_react","import_moment","import_seeds_react_visually_hidden","import_jsx_runtime","moment","DayPickerRangeController","import_react","import_jsx_runtime","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-datepicker",
3
- "version": "1.0.51",
3
+ "version": "1.1.0",
4
4
  "description": "Seeds React Datepicker",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -8,8 +8,8 @@
8
8
  "module": "dist/esm/index.js",
9
9
  "types": "dist/index.d.ts",
10
10
  "scripts": {
11
- "build": "tsup --dts",
12
- "build:debug": "tsup --dts --metafile",
11
+ "build": "tsup --dts && cp src/datepicker.css dist/datepicker.css",
12
+ "build:debug": "tsup --dts --metafile && cp src/datepicker.css dist/datepicker.css",
13
13
  "dev": "tsup --watch --dts",
14
14
  "clean": "rm -rf .turbo dist",
15
15
  "clean:modules": "rm -rf node_modules",
@@ -18,12 +18,12 @@
18
18
  "test:watch": "jest --watch --coverage=false"
19
19
  },
20
20
  "dependencies": {
21
- "@sproutsocial/seeds-react-theme": "^4.5.1",
21
+ "@sproutsocial/seeds-react-theme": "^4.7.0",
22
22
  "@sproutsocial/seeds-react-system-props": "^3.2.1",
23
- "@sproutsocial/seeds-react-visually-hidden": "^1.0.33",
24
- "@sproutsocial/seeds-react-icon": "^2.5.2",
25
- "@sproutsocial/seeds-react-box": "^1.1.32",
26
- "@sproutsocial/seeds-react-mixins": "^4.3.16"
23
+ "@sproutsocial/seeds-react-visually-hidden": "^1.0.35",
24
+ "@sproutsocial/seeds-react-icon": "^2.5.4",
25
+ "@sproutsocial/seeds-react-box": "^1.1.34",
26
+ "@sproutsocial/seeds-react-mixins": "^4.3.18"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react": "^18.0.0",
@@ -39,8 +39,8 @@
39
39
  "react-dates": "^21.8.0",
40
40
  "@types/react-dates": "^21.8.3",
41
41
  "moment": "^2.29.4",
42
- "@sproutsocial/seeds-react-button": "^2.3.9",
43
- "@sproutsocial/seeds-react-popout": "^2.5.23"
42
+ "@sproutsocial/seeds-react-button": "^2.3.11",
43
+ "@sproutsocial/seeds-react-popout": "^2.5.26"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "styled-components": "^5.2.3",
package/src/CalendarDayTailwind.tsx ADDED
@@ -0,0 +1,76 @@
1
+ import * as React from "react";
2
+ import type moment from "moment";
3
+ import type { ModifiersShape } from "react-dates";
4
+ import { cn } from "./cn";
5
+ import {
6
+ isHoveredAndInRange,
7
+ isOutOfRange,
8
+ isSelected,
9
+ shouldHaveLeftPill,
10
+ shouldHaveRightPill,
11
+ } from "./dayModifiers";
12
+
13
+ export interface TypeCalendarDayProps {
14
+ modifiers: ModifiersShape;
15
+ day: moment.Moment;
16
+ children?: React.ReactNode;
17
+ className?: string;
18
+ }
19
+
20
+ /**
21
+ * Static day cell. Renders the semantic `seeds-datepicker-day*` classes from
22
+ * datepicker.css with no runtime CSS-in-JS.
23
+ *
24
+ * The legacy cell was `styled(Box)`, and Box ships no CSS of its own, so
25
+ * `.seeds-datepicker-day` reproduces Box's baseline (box-sizing + font-family)
26
+ * and this component reproduces Box's forwardRef.
27
+ *
28
+ * The visual states are mutually exclusive, exactly as in the styled version's
29
+ * if / else-if chain: a selected day never also picks up the hovered or
30
+ * out-of-range treatment. Pill edges are modifier classes rather than values,
31
+ * so an absent edge emits no declaration at all.
32
+ */
33
+ const dayStateClasses = (
34
+ modifiers: ModifiersShape,
35
+ day: moment.Moment
36
+ ): Record<string, boolean> => {
37
+ if (isSelected(modifiers)) {
38
+ return {
39
+ "seeds-datepicker-day-selected": true,
40
+ "seeds-datepicker-day-pill-left": shouldHaveLeftPill(modifiers, day),
41
+ "seeds-datepicker-day-pill-right": shouldHaveRightPill(modifiers, day),
42
+ };
43
+ }
44
+
45
+ if (isHoveredAndInRange(modifiers)) {
46
+ return { "seeds-datepicker-day-hovered": true };
47
+ }
48
+
49
+ if (isOutOfRange(modifiers)) {
50
+ return { "seeds-datepicker-day-out-of-range": true };
51
+ }
52
+
53
+ return {};
54
+ };
55
+
56
+ const CalendarDayTailwind = React.forwardRef<
57
+ HTMLDivElement,
58
+ TypeCalendarDayProps
59
+ >(({ modifiers, day, className, children }, ref) => (
60
+ <div
61
+ ref={ref}
62
+ // Semantic classes come before the consumer className so consumer utilities
63
+ // can override the layered base styles.
64
+ className={cn(
65
+ "seeds-datepicker-day",
66
+ dayStateClasses(modifiers, day),
67
+ className
68
+ )}
69
+ >
70
+ {children}
71
+ </div>
72
+ ));
73
+
74
+ CalendarDayTailwind.displayName = "CalendarDay";
75
+
76
+ export default CalendarDayTailwind;
package/src/DateRangePicker/DateRangePicker.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { useCallback, useState, type KeyboardEvent } from "react";
2
2
  import moment from "moment";
3
3
  import DayPickerRangeController from "react-dates/lib/components/DayPickerRangeController";
4
- import { ReactDatesCssOverrides } from "../styles";
5
4
  import {
6
5
  commonDatePickerProps,
7
6
  DefaultSetStatusText,
@@ -55,9 +54,14 @@ const DateRangePicker = ({
55
54
  [onBlur, onFocusChange]
56
55
  );
57
56
 
57
+ /*
58
+ * The react-dates overrides that ReactDatesCssOverrides used to inject at
59
+ * runtime now ship statically in datepicker.css, aggregated into
60
+ * @sproutsocial/racine/css/components. styles.ts keeps the styled source for
61
+ * Phase A, but nothing imports it, so it is tree-shaken out of the bundle.
62
+ */
58
63
  return (
59
64
  <>
60
- <ReactDatesCssOverrides />
61
65
  <VisuallyHidden>
62
66
  <div role="status">{statusText}</div>
63
67
  </VisuallyHidden>
package/src/DateRangePicker/__tests__/DateRangePicker.test.tsx CHANGED
@@ -153,8 +153,7 @@ describe("date range picker", () => {
153
153
  });
154
154
  });
155
155
 
156
- // TODO: This test times out. We'll come back to fix later
157
- xtest("should close on escape key press", async () => {
156
+ test("should close on escape key press", async () => {
158
157
  const buttonText = "Date Picker";
159
158
  const initialDate = moment("2020-01-01");
160
159
 
package/src/SingleDatePicker/SingleDatePicker.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { useCallback, useState } from "react";
2
2
  import moment from "moment";
3
3
  import DayPickerSingleDateController from "react-dates/lib/components/DayPickerSingleDateController";
4
- import { ReactDatesCssOverrides } from "../styles";
5
4
  import {
6
5
  commonDatePickerProps,
7
6
  DefaultSetStatusText,
@@ -47,9 +46,14 @@ const SingleDatePicker = ({
47
46
  [onBlur, onFocusChange]
48
47
  );
49
48
 
49
+ /*
50
+ * The react-dates overrides that ReactDatesCssOverrides used to inject at
51
+ * runtime now ship statically in datepicker.css, aggregated into
52
+ * @sproutsocial/racine/css/components. styles.ts keeps the styled source for
53
+ * Phase A, but nothing imports it, so it is tree-shaken out of the bundle.
54
+ */
50
55
  return (
51
56
  <>
52
- <ReactDatesCssOverrides />
53
57
  <VisuallyHidden>
54
58
  <div role="status">{statusText}</div>
55
59
  </VisuallyHidden>
package/src/SingleDatePicker/__tests__/SingleDatePicker.test.tsx CHANGED
@@ -101,8 +101,7 @@ describe("SingleDatePicker", () => {
101
101
  });
102
102
  });
103
103
 
104
- // TODO: This test times out. We'll come back to fix later
105
- xtest("should close on escape key press", async () => {
104
+ test("should close on escape key press", async () => {
106
105
  const buttonText = "Date Picker";
107
106
  const initialDate = moment("2020-01-01");
108
107