@usefragments/ui 1.3.0 → 1.3.1
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.
|
@@ -74,7 +74,7 @@ export interface DatePickerPresetProps extends React.ButtonHTMLAttributes<HTMLBu
|
|
|
74
74
|
declare const DatePickerRoot: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
75
75
|
declare function DatePickerTrigger({ children, placeholder, className, type, ...htmlProps }: DatePickerTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
76
76
|
declare function DatePickerContent({ children, className, sideOffset, align, ...htmlProps }: DatePickerContentProps): import("react/jsx-runtime").JSX.Element;
|
|
77
|
-
declare function DatePickerCalendar({ numberOfMonths: numberOfMonthsProp, className, }: DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
declare function DatePickerCalendar({ numberOfMonths: numberOfMonthsProp, className, }: DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element | null;
|
|
78
78
|
declare function DatePickerPreset({ children, date, range, className, onClick, ...htmlProps }: DatePickerPresetProps): import("react/jsx-runtime").JSX.Element;
|
|
79
79
|
export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>> & {
|
|
80
80
|
Trigger: typeof DatePickerTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/datepicker.cjs
CHANGED
|
@@ -3,8 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const popover = require("@base-ui/react/popover");
|
|
6
|
-
const reactDayPicker = require("react-day-picker");
|
|
7
|
-
const dateFns = require("date-fns");
|
|
8
6
|
const aria = require("./utils/aria.cjs");
|
|
9
7
|
const index = require("./components/ComponentDefaults/index.cjs");
|
|
10
8
|
const DatePicker_module = require("./components/DatePicker/DatePicker.module.scss.cjs");
|
|
@@ -92,13 +90,23 @@ function useDatePickerContext() {
|
|
|
92
90
|
}
|
|
93
91
|
return context;
|
|
94
92
|
}
|
|
93
|
+
const longDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
94
|
+
month: "long",
|
|
95
|
+
day: "numeric",
|
|
96
|
+
year: "numeric"
|
|
97
|
+
});
|
|
98
|
+
const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
99
|
+
month: "short",
|
|
100
|
+
day: "2-digit",
|
|
101
|
+
year: "numeric"
|
|
102
|
+
});
|
|
95
103
|
function defaultFormatDate(date) {
|
|
96
|
-
return
|
|
104
|
+
return longDateFormatter.format(date);
|
|
97
105
|
}
|
|
98
106
|
function defaultFormatRange(range) {
|
|
99
107
|
if (!range.from) return "";
|
|
100
|
-
if (!range.to) return
|
|
101
|
-
return `${
|
|
108
|
+
if (!range.to) return mediumDateFormatter.format(range.from);
|
|
109
|
+
return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
|
|
102
110
|
}
|
|
103
111
|
function formatDateForHiddenInput(date) {
|
|
104
112
|
if (!date) return "";
|
|
@@ -107,32 +115,54 @@ function formatDateForHiddenInput(date) {
|
|
|
107
115
|
const day = String(date.getDate()).padStart(2, "0");
|
|
108
116
|
return `${year}-${month}-${day}`;
|
|
109
117
|
}
|
|
118
|
+
let _DayPicker = null;
|
|
119
|
+
let _UI = null;
|
|
120
|
+
let _SelectionState = null;
|
|
121
|
+
let _DayFlag = null;
|
|
122
|
+
let _rdpLoaded = false;
|
|
123
|
+
let _rdpFailed = false;
|
|
124
|
+
function loadDayPickerDeps() {
|
|
125
|
+
if (_rdpLoaded) return;
|
|
126
|
+
_rdpLoaded = true;
|
|
127
|
+
try {
|
|
128
|
+
const rdp = require("react-day-picker");
|
|
129
|
+
_DayPicker = rdp.DayPicker;
|
|
130
|
+
_UI = rdp.UI;
|
|
131
|
+
_SelectionState = rdp.SelectionState;
|
|
132
|
+
_DayFlag = rdp.DayFlag;
|
|
133
|
+
} catch {
|
|
134
|
+
_rdpFailed = true;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
110
137
|
function getCalendarClassNames() {
|
|
138
|
+
const UI = _UI;
|
|
139
|
+
const SelectionState = _SelectionState;
|
|
140
|
+
const DayFlag = _DayFlag;
|
|
111
141
|
return {
|
|
112
|
-
[
|
|
113
|
-
[
|
|
114
|
-
[
|
|
115
|
-
[
|
|
116
|
-
[
|
|
117
|
-
[
|
|
118
|
-
[
|
|
119
|
-
[
|
|
120
|
-
[
|
|
121
|
-
[
|
|
122
|
-
[
|
|
123
|
-
[
|
|
124
|
-
[
|
|
125
|
-
[
|
|
126
|
-
[
|
|
127
|
-
[
|
|
128
|
-
[
|
|
129
|
-
[
|
|
130
|
-
[
|
|
131
|
-
[
|
|
132
|
-
[
|
|
133
|
-
[
|
|
134
|
-
[
|
|
135
|
-
[
|
|
142
|
+
[UI.Root]: DatePicker_module.default.calendar,
|
|
143
|
+
[UI.Months]: DatePicker_module.default.months,
|
|
144
|
+
[UI.Month]: DatePicker_module.default.month,
|
|
145
|
+
[UI.MonthCaption]: DatePicker_module.default.monthCaption,
|
|
146
|
+
[UI.CaptionLabel]: DatePicker_module.default.captionLabel,
|
|
147
|
+
[UI.Nav]: DatePicker_module.default.nav,
|
|
148
|
+
[UI.PreviousMonthButton]: DatePicker_module.default.navButton,
|
|
149
|
+
[UI.NextMonthButton]: DatePicker_module.default.navButton,
|
|
150
|
+
[UI.MonthGrid]: DatePicker_module.default.monthGrid,
|
|
151
|
+
[UI.Weekdays]: DatePicker_module.default.weekdays,
|
|
152
|
+
[UI.Weekday]: DatePicker_module.default.weekday,
|
|
153
|
+
[UI.Weeks]: DatePicker_module.default.weeks,
|
|
154
|
+
[UI.Week]: DatePicker_module.default.week,
|
|
155
|
+
[UI.Day]: DatePicker_module.default.day,
|
|
156
|
+
[UI.DayButton]: DatePicker_module.default.dayButton,
|
|
157
|
+
[UI.Chevron]: DatePicker_module.default.chevron,
|
|
158
|
+
[SelectionState.selected]: DatePicker_module.default.selected,
|
|
159
|
+
[SelectionState.range_start]: DatePicker_module.default.rangeStart,
|
|
160
|
+
[SelectionState.range_middle]: DatePicker_module.default.rangeMiddle,
|
|
161
|
+
[SelectionState.range_end]: DatePicker_module.default.rangeEnd,
|
|
162
|
+
[DayFlag.today]: DatePicker_module.default.today,
|
|
163
|
+
[DayFlag.outside]: DatePicker_module.default.outside,
|
|
164
|
+
[DayFlag.disabled]: DatePicker_module.default.disabled,
|
|
165
|
+
[DayFlag.focused]: DatePicker_module.default.focused
|
|
136
166
|
};
|
|
137
167
|
}
|
|
138
168
|
const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
|
|
@@ -339,12 +369,18 @@ function DatePickerCalendar({
|
|
|
339
369
|
}),
|
|
340
370
|
[]
|
|
341
371
|
);
|
|
372
|
+
loadDayPickerDeps();
|
|
373
|
+
if (_rdpFailed || !_DayPicker || !_UI) {
|
|
374
|
+
return null;
|
|
375
|
+
}
|
|
376
|
+
const DayPicker = _DayPicker;
|
|
377
|
+
const UI = _UI;
|
|
342
378
|
const calendarClassNames = getCalendarClassNames();
|
|
343
|
-
const calendarClasses = className ? { ...calendarClassNames, [
|
|
379
|
+
const calendarClasses = className ? { ...calendarClassNames, [UI.Root]: [DatePicker_module.default.calendar, className].join(" ") } : calendarClassNames;
|
|
344
380
|
if (ctx.mode === "range") {
|
|
345
381
|
const rangeSelected = ctx.selectedRange ? { from: ctx.selectedRange.from ?? void 0, to: ctx.selectedRange.to ?? void 0 } : void 0;
|
|
346
382
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
347
|
-
|
|
383
|
+
DayPicker,
|
|
348
384
|
{
|
|
349
385
|
mode: "range",
|
|
350
386
|
selected: rangeSelected,
|
|
@@ -364,7 +400,7 @@ function DatePickerCalendar({
|
|
|
364
400
|
);
|
|
365
401
|
}
|
|
366
402
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
367
|
-
|
|
403
|
+
DayPicker,
|
|
368
404
|
{
|
|
369
405
|
mode: "single",
|
|
370
406
|
selected: ctx.selected ?? void 0,
|
package/dist/datepicker.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { Popover } from "@base-ui/react/popover";
|
|
4
|
-
import { UI, DayPicker, DayFlag, SelectionState } from "react-day-picker";
|
|
5
|
-
import { format } from "date-fns";
|
|
6
4
|
import { useFormFieldIds } from "./utils/aria.js";
|
|
7
5
|
import { useResolvedControlSize } from "./components/ComponentDefaults/index.js";
|
|
8
6
|
import styles from "./components/DatePicker/DatePicker.module.scss.js";
|
|
@@ -73,13 +71,23 @@ function useDatePickerContext() {
|
|
|
73
71
|
}
|
|
74
72
|
return context;
|
|
75
73
|
}
|
|
74
|
+
const longDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
75
|
+
month: "long",
|
|
76
|
+
day: "numeric",
|
|
77
|
+
year: "numeric"
|
|
78
|
+
});
|
|
79
|
+
const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
80
|
+
month: "short",
|
|
81
|
+
day: "2-digit",
|
|
82
|
+
year: "numeric"
|
|
83
|
+
});
|
|
76
84
|
function defaultFormatDate(date) {
|
|
77
|
-
return format(date
|
|
85
|
+
return longDateFormatter.format(date);
|
|
78
86
|
}
|
|
79
87
|
function defaultFormatRange(range) {
|
|
80
88
|
if (!range.from) return "";
|
|
81
|
-
if (!range.to) return format(range.from
|
|
82
|
-
return `${format(range.from
|
|
89
|
+
if (!range.to) return mediumDateFormatter.format(range.from);
|
|
90
|
+
return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
|
|
83
91
|
}
|
|
84
92
|
function formatDateForHiddenInput(date) {
|
|
85
93
|
if (!date) return "";
|
|
@@ -88,7 +96,29 @@ function formatDateForHiddenInput(date) {
|
|
|
88
96
|
const day = String(date.getDate()).padStart(2, "0");
|
|
89
97
|
return `${year}-${month}-${day}`;
|
|
90
98
|
}
|
|
99
|
+
let _DayPicker = null;
|
|
100
|
+
let _UI = null;
|
|
101
|
+
let _SelectionState = null;
|
|
102
|
+
let _DayFlag = null;
|
|
103
|
+
let _rdpLoaded = false;
|
|
104
|
+
let _rdpFailed = false;
|
|
105
|
+
function loadDayPickerDeps() {
|
|
106
|
+
if (_rdpLoaded) return;
|
|
107
|
+
_rdpLoaded = true;
|
|
108
|
+
try {
|
|
109
|
+
const rdp = require("react-day-picker");
|
|
110
|
+
_DayPicker = rdp.DayPicker;
|
|
111
|
+
_UI = rdp.UI;
|
|
112
|
+
_SelectionState = rdp.SelectionState;
|
|
113
|
+
_DayFlag = rdp.DayFlag;
|
|
114
|
+
} catch {
|
|
115
|
+
_rdpFailed = true;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
91
118
|
function getCalendarClassNames() {
|
|
119
|
+
const UI = _UI;
|
|
120
|
+
const SelectionState = _SelectionState;
|
|
121
|
+
const DayFlag = _DayFlag;
|
|
92
122
|
return {
|
|
93
123
|
[UI.Root]: styles.calendar,
|
|
94
124
|
[UI.Months]: styles.months,
|
|
@@ -320,6 +350,12 @@ function DatePickerCalendar({
|
|
|
320
350
|
}),
|
|
321
351
|
[]
|
|
322
352
|
);
|
|
353
|
+
loadDayPickerDeps();
|
|
354
|
+
if (_rdpFailed || !_DayPicker || !_UI) {
|
|
355
|
+
return null;
|
|
356
|
+
}
|
|
357
|
+
const DayPicker = _DayPicker;
|
|
358
|
+
const UI = _UI;
|
|
323
359
|
const calendarClassNames = getCalendarClassNames();
|
|
324
360
|
const calendarClasses = className ? { ...calendarClassNames, [UI.Root]: [styles.calendar, className].join(" ") } : calendarClassNames;
|
|
325
361
|
if (ctx.mode === "range") {
|
package/package.json
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { Popover as BasePopover } from "@base-ui/react/popover";
|
|
5
|
-
import { DayFlag, DayPicker, SelectionState, UI } from "react-day-picker";
|
|
6
|
-
import { format as formatDateWithPattern } from "date-fns";
|
|
7
5
|
import { useFormFieldIds, type FormFieldProps } from "../../utils/aria";
|
|
8
6
|
import { useResolvedControlSize } from "../ComponentDefaults";
|
|
9
7
|
import styles from "./DatePicker.module.scss";
|
|
@@ -186,15 +184,30 @@ function useDatePickerContext() {
|
|
|
186
184
|
// ============================================
|
|
187
185
|
// Default formatters
|
|
188
186
|
// ============================================
|
|
187
|
+
//
|
|
188
|
+
// Zero-dependency `Intl.DateTimeFormat` so the default trigger label needs no
|
|
189
|
+
// optional peer. `date-fns` remains an optional peer only for consumers who pass
|
|
190
|
+
// their own `formatDate`/`formatRange`; the default path never imports it, so a
|
|
191
|
+
// bundler that pulls DatePicker into the graph does not fail on a missing peer.
|
|
192
|
+
const longDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
193
|
+
month: "long",
|
|
194
|
+
day: "numeric",
|
|
195
|
+
year: "numeric",
|
|
196
|
+
});
|
|
197
|
+
const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
198
|
+
month: "short",
|
|
199
|
+
day: "2-digit",
|
|
200
|
+
year: "numeric",
|
|
201
|
+
});
|
|
189
202
|
|
|
190
203
|
function defaultFormatDate(date: Date): string {
|
|
191
|
-
return
|
|
204
|
+
return longDateFormatter.format(date);
|
|
192
205
|
}
|
|
193
206
|
|
|
194
207
|
function defaultFormatRange(range: DateRange): string {
|
|
195
208
|
if (!range.from) return "";
|
|
196
|
-
if (!range.to) return
|
|
197
|
-
return `${
|
|
209
|
+
if (!range.to) return mediumDateFormatter.format(range.from);
|
|
210
|
+
return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
|
|
198
211
|
}
|
|
199
212
|
|
|
200
213
|
function formatDateForHiddenInput(date?: Date): string {
|
|
@@ -205,11 +218,48 @@ function formatDateForHiddenInput(date?: Date): string {
|
|
|
205
218
|
return `${year}-${month}-${day}`;
|
|
206
219
|
}
|
|
207
220
|
|
|
221
|
+
// ============================================
|
|
222
|
+
// Lazy-loaded dependency (react-day-picker)
|
|
223
|
+
// ============================================
|
|
224
|
+
//
|
|
225
|
+
// Loaded on demand via require() so the barrel never statically references the
|
|
226
|
+
// optional `react-day-picker` peer. Importing anything else from
|
|
227
|
+
// @usefragments/ui must not drag the calendar (or its transitive `date-fns`
|
|
228
|
+
// dependency) into a consumer's build graph. Mirrors the Chart/recharts pattern.
|
|
229
|
+
|
|
230
|
+
type DayPickerComponent = React.ComponentType<Record<string, unknown>>;
|
|
231
|
+
type RdpEnum = Record<string, string>;
|
|
232
|
+
|
|
233
|
+
let _DayPicker: DayPickerComponent | null = null;
|
|
234
|
+
let _UI: RdpEnum | null = null;
|
|
235
|
+
let _SelectionState: RdpEnum | null = null;
|
|
236
|
+
let _DayFlag: RdpEnum | null = null;
|
|
237
|
+
let _rdpLoaded = false;
|
|
238
|
+
let _rdpFailed = false;
|
|
239
|
+
|
|
240
|
+
function loadDayPickerDeps(): void {
|
|
241
|
+
if (_rdpLoaded) return;
|
|
242
|
+
_rdpLoaded = true;
|
|
243
|
+
try {
|
|
244
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
245
|
+
const rdp = require("react-day-picker");
|
|
246
|
+
_DayPicker = rdp.DayPicker as DayPickerComponent;
|
|
247
|
+
_UI = rdp.UI as RdpEnum;
|
|
248
|
+
_SelectionState = rdp.SelectionState as RdpEnum;
|
|
249
|
+
_DayFlag = rdp.DayFlag as RdpEnum;
|
|
250
|
+
} catch {
|
|
251
|
+
_rdpFailed = true;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
208
255
|
// ============================================
|
|
209
256
|
// ClassNames mapping (built lazily)
|
|
210
257
|
// ============================================
|
|
211
258
|
|
|
212
259
|
function getCalendarClassNames() {
|
|
260
|
+
const UI = _UI!;
|
|
261
|
+
const SelectionState = _SelectionState!;
|
|
262
|
+
const DayFlag = _DayFlag!;
|
|
213
263
|
return {
|
|
214
264
|
[UI.Root]: styles.calendar,
|
|
215
265
|
[UI.Months]: styles.months,
|
|
@@ -517,6 +567,15 @@ function DatePickerCalendar({
|
|
|
517
567
|
[]
|
|
518
568
|
);
|
|
519
569
|
|
|
570
|
+
loadDayPickerDeps();
|
|
571
|
+
if (_rdpFailed || !_DayPicker || !_UI) {
|
|
572
|
+
// react-day-picker is an optional peer: render nothing rather than crash
|
|
573
|
+
// when a consumer mounts <DatePicker> without installing the calendar dep.
|
|
574
|
+
return null;
|
|
575
|
+
}
|
|
576
|
+
const DayPicker = _DayPicker;
|
|
577
|
+
const UI = _UI;
|
|
578
|
+
|
|
520
579
|
const calendarClassNames = getCalendarClassNames();
|
|
521
580
|
|
|
522
581
|
const calendarClasses = className
|