@simplybusiness/mobius-datepicker 9.0.0 → 9.0.2
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.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/index.js +546 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/meta.json +463 -0
- package/package.json +11 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 9.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d98e605: Restore CJS builds (`dist/cjs/`) for downstream consumers using `require()`.
|
|
8
|
+
- Updated dependencies [d98e605]
|
|
9
|
+
- @simplybusiness/mobius@8.0.2
|
|
10
|
+
- @simplybusiness/icons@5.0.2
|
|
11
|
+
|
|
12
|
+
## 9.0.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- 6621ab0: Rebuild packages to pick up latest build-scripts changes.
|
|
17
|
+
- Updated dependencies [6621ab0]
|
|
18
|
+
- @simplybusiness/mobius@8.0.1
|
|
19
|
+
- @simplybusiness/icons@5.0.1
|
|
20
|
+
|
|
3
21
|
## 9.0.0
|
|
4
22
|
|
|
5
23
|
### Major Changes
|
|
@@ -0,0 +1,546 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __esm = (fn, res) => function __init() {
|
|
9
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
10
|
+
};
|
|
11
|
+
var __export = (target, all) => {
|
|
12
|
+
for (var name in all)
|
|
13
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
31
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
|
+
|
|
33
|
+
// src/components/DatePicker/utils/dateObjToString.ts
|
|
34
|
+
var dateObjToString;
|
|
35
|
+
var init_dateObjToString = __esm({
|
|
36
|
+
"src/components/DatePicker/utils/dateObjToString.ts"() {
|
|
37
|
+
"use strict";
|
|
38
|
+
dateObjToString = (date) => {
|
|
39
|
+
const year = date.getFullYear();
|
|
40
|
+
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
41
|
+
const day = String(date.getDate()).padStart(2, "0");
|
|
42
|
+
return `${year}-${month}-${day}`;
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
// src/components/DatePicker/utils/formatErrorMessageText.ts
|
|
48
|
+
var import_date_fns, DEFAULT_INVALID_DATE_MESSAGE, DEFAULT_BEFORE_MIN, DEFAULT_AFTER_MAX, formatErrorMessageText;
|
|
49
|
+
var init_formatErrorMessageText = __esm({
|
|
50
|
+
"src/components/DatePicker/utils/formatErrorMessageText.ts"() {
|
|
51
|
+
"use strict";
|
|
52
|
+
import_date_fns = require("date-fns");
|
|
53
|
+
DEFAULT_INVALID_DATE_MESSAGE = "Please enter a valid date";
|
|
54
|
+
DEFAULT_BEFORE_MIN = "The date you selected is before the earliest allowed date";
|
|
55
|
+
DEFAULT_AFTER_MAX = "The date you selected is after the latest allowed date";
|
|
56
|
+
formatErrorMessageText = (actual, min, max) => {
|
|
57
|
+
const actualDate = new Date(actual);
|
|
58
|
+
const minDate = min && new Date(min);
|
|
59
|
+
const maxDate = max && new Date(max);
|
|
60
|
+
if (minDate && (0, import_date_fns.isBefore)(actualDate, minDate)) {
|
|
61
|
+
return DEFAULT_BEFORE_MIN;
|
|
62
|
+
}
|
|
63
|
+
if (maxDate && (0, import_date_fns.isAfter)(actualDate, maxDate)) {
|
|
64
|
+
return DEFAULT_AFTER_MAX;
|
|
65
|
+
}
|
|
66
|
+
return DEFAULT_INVALID_DATE_MESSAGE;
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
// src/components/DatePicker/utils/validateDateFormat.ts
|
|
72
|
+
var import_date_fns2, DATE_FORMAT, validateDateFormat;
|
|
73
|
+
var init_validateDateFormat = __esm({
|
|
74
|
+
"src/components/DatePicker/utils/validateDateFormat.ts"() {
|
|
75
|
+
"use strict";
|
|
76
|
+
import_date_fns2 = require("date-fns");
|
|
77
|
+
DATE_FORMAT = "yyyy-MM-dd";
|
|
78
|
+
validateDateFormat = (date) => {
|
|
79
|
+
if (date === "") {
|
|
80
|
+
return "";
|
|
81
|
+
}
|
|
82
|
+
if ((0, import_date_fns2.isMatch)(date, DATE_FORMAT)) {
|
|
83
|
+
return date;
|
|
84
|
+
}
|
|
85
|
+
throw Error(
|
|
86
|
+
`DatePicker defaultValue '${date}' is invalid. The expected format is '${DATE_FORMAT}' `
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// src/components/DatePicker/constants.ts
|
|
93
|
+
var SUNDAY_AS_NUMBER, MONDAY_AS_NUMBER, DEFAULT_LOCALE;
|
|
94
|
+
var init_constants = __esm({
|
|
95
|
+
"src/components/DatePicker/constants.ts"() {
|
|
96
|
+
"use strict";
|
|
97
|
+
SUNDAY_AS_NUMBER = 0;
|
|
98
|
+
MONDAY_AS_NUMBER = 1;
|
|
99
|
+
DEFAULT_LOCALE = "en-GB";
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// src/components/DatePicker/utils/weekdayAsOneLetter.ts
|
|
104
|
+
var weekdayAsOneLetter;
|
|
105
|
+
var init_weekdayAsOneLetter = __esm({
|
|
106
|
+
"src/components/DatePicker/utils/weekdayAsOneLetter.ts"() {
|
|
107
|
+
"use strict";
|
|
108
|
+
init_constants();
|
|
109
|
+
weekdayAsOneLetter = (date) => {
|
|
110
|
+
const locale = navigator.language || DEFAULT_LOCALE;
|
|
111
|
+
const oneLetter = date.toLocaleString(locale, {
|
|
112
|
+
weekday: "narrow"
|
|
113
|
+
});
|
|
114
|
+
return oneLetter;
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
// src/components/DatePicker/utils/index.ts
|
|
120
|
+
var init_utils = __esm({
|
|
121
|
+
"src/components/DatePicker/utils/index.ts"() {
|
|
122
|
+
"use strict";
|
|
123
|
+
init_dateObjToString();
|
|
124
|
+
init_formatErrorMessageText();
|
|
125
|
+
init_validateDateFormat();
|
|
126
|
+
init_weekdayAsOneLetter();
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
// src/hooks/useFocusTrap/useFocusTrap.tsx
|
|
131
|
+
function FocusTrap({ children }) {
|
|
132
|
+
const focusRef = useFocusTrap();
|
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trap", ref: focusRef, children });
|
|
134
|
+
}
|
|
135
|
+
var import_react, import_jsx_runtime, useFocusTrap;
|
|
136
|
+
var init_useFocusTrap = __esm({
|
|
137
|
+
"src/hooks/useFocusTrap/useFocusTrap.tsx"() {
|
|
138
|
+
"use strict";
|
|
139
|
+
import_react = require("react");
|
|
140
|
+
import_jsx_runtime = require("react/jsx-runtime");
|
|
141
|
+
useFocusTrap = () => {
|
|
142
|
+
const containerRef = (0, import_react.useRef)(null);
|
|
143
|
+
(0, import_react.useEffect)(() => {
|
|
144
|
+
if (containerRef.current) {
|
|
145
|
+
const element = containerRef.current;
|
|
146
|
+
const focusableElements = containerRef.current.querySelectorAll(
|
|
147
|
+
'[tabindex="0"], .mobius-date-picker__nav-button'
|
|
148
|
+
);
|
|
149
|
+
const firstElement = focusableElements[0];
|
|
150
|
+
const lastElement = focusableElements[focusableElements.length - 1];
|
|
151
|
+
const handleTabKeyPress = (event) => {
|
|
152
|
+
if (event.key === "Tab") {
|
|
153
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
154
|
+
event.preventDefault();
|
|
155
|
+
lastElement.focus();
|
|
156
|
+
} else if (!event.shiftKey && document.activeElement && document.activeElement.className.indexOf(
|
|
157
|
+
"mobius-date-picker__day-button"
|
|
158
|
+
) > -1) {
|
|
159
|
+
event.preventDefault();
|
|
160
|
+
firstElement.focus();
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
element.addEventListener("keydown", handleTabKeyPress);
|
|
165
|
+
return () => {
|
|
166
|
+
element.removeEventListener("keydown", handleTabKeyPress);
|
|
167
|
+
};
|
|
168
|
+
}
|
|
169
|
+
return () => {
|
|
170
|
+
};
|
|
171
|
+
}, []);
|
|
172
|
+
return containerRef;
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
// src/components/DatePicker/utils/getStartWeekday.ts
|
|
178
|
+
var getStartWeekday;
|
|
179
|
+
var init_getStartWeekday = __esm({
|
|
180
|
+
"src/components/DatePicker/utils/getStartWeekday.ts"() {
|
|
181
|
+
"use strict";
|
|
182
|
+
init_constants();
|
|
183
|
+
getStartWeekday = (locale) => {
|
|
184
|
+
switch (locale || DEFAULT_LOCALE) {
|
|
185
|
+
case "en-US":
|
|
186
|
+
return SUNDAY_AS_NUMBER;
|
|
187
|
+
default:
|
|
188
|
+
return MONDAY_AS_NUMBER;
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
|
|
194
|
+
// src/components/DatePicker/utils/timezoneOffset.ts
|
|
195
|
+
function toLocal(utcDateString) {
|
|
196
|
+
const utcDate = new Date(utcDateString);
|
|
197
|
+
if (Number.isNaN(utcDate.getTime())) {
|
|
198
|
+
throw new Error("Invalid date string");
|
|
199
|
+
}
|
|
200
|
+
return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 6e4);
|
|
201
|
+
}
|
|
202
|
+
var init_timezoneOffset = __esm({
|
|
203
|
+
"src/components/DatePicker/utils/timezoneOffset.ts"() {
|
|
204
|
+
"use strict";
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
|
|
208
|
+
// src/components/DatePicker/CustomComponents/CaptionLabel.tsx
|
|
209
|
+
var import_jsx_runtime2, CaptionLabel;
|
|
210
|
+
var init_CaptionLabel = __esm({
|
|
211
|
+
"src/components/DatePicker/CustomComponents/CaptionLabel.tsx"() {
|
|
212
|
+
"use strict";
|
|
213
|
+
import_jsx_runtime2 = require("react/jsx-runtime");
|
|
214
|
+
CaptionLabel = (props) => {
|
|
215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { ...props });
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
// src/components/DatePicker/CustomComponents/ChevronComponent.tsx
|
|
221
|
+
var import_icons, import_mobius, import_jsx_runtime3, ChevronComponent;
|
|
222
|
+
var init_ChevronComponent = __esm({
|
|
223
|
+
"src/components/DatePicker/CustomComponents/ChevronComponent.tsx"() {
|
|
224
|
+
"use strict";
|
|
225
|
+
import_icons = require("@simplybusiness/icons");
|
|
226
|
+
import_mobius = require("@simplybusiness/mobius");
|
|
227
|
+
import_jsx_runtime3 = require("react/jsx-runtime");
|
|
228
|
+
ChevronComponent = ({ orientation }) => {
|
|
229
|
+
if (orientation === "left") {
|
|
230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobius.Icon, { icon: import_icons.chevronLeft });
|
|
231
|
+
}
|
|
232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobius.Icon, { icon: import_icons.chevronRight });
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
});
|
|
236
|
+
|
|
237
|
+
// src/components/DatePicker/CustomComponents/index.tsx
|
|
238
|
+
var init_CustomComponents = __esm({
|
|
239
|
+
"src/components/DatePicker/CustomComponents/index.tsx"() {
|
|
240
|
+
"use strict";
|
|
241
|
+
init_CaptionLabel();
|
|
242
|
+
init_ChevronComponent();
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
// src/components/DatePicker/DatePickerModal.tsx
|
|
247
|
+
var DatePickerModal_exports = {};
|
|
248
|
+
__export(DatePickerModal_exports, {
|
|
249
|
+
default: () => DatePickerModal_default
|
|
250
|
+
});
|
|
251
|
+
var import_mobius2, import_dedupe, import_date_fns3, import_react2, import_react_day_picker, import_jsx_runtime4, startWeekday, DatePickerModal, DatePickerModal_default;
|
|
252
|
+
var init_DatePickerModal = __esm({
|
|
253
|
+
"src/components/DatePicker/DatePickerModal.tsx"() {
|
|
254
|
+
"use strict";
|
|
255
|
+
"use client";
|
|
256
|
+
import_mobius2 = require("@simplybusiness/mobius");
|
|
257
|
+
import_dedupe = __toESM(require("classnames/dedupe"));
|
|
258
|
+
import_date_fns3 = require("date-fns");
|
|
259
|
+
import_react2 = require("react");
|
|
260
|
+
import_react_day_picker = require("react-day-picker");
|
|
261
|
+
init_useFocusTrap();
|
|
262
|
+
init_utils();
|
|
263
|
+
init_getStartWeekday();
|
|
264
|
+
init_timezoneOffset();
|
|
265
|
+
init_CustomComponents();
|
|
266
|
+
import_jsx_runtime4 = require("react/jsx-runtime");
|
|
267
|
+
startWeekday = getStartWeekday(
|
|
268
|
+
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
|
|
269
|
+
typeof navigator !== "undefined" ? navigator?.language : void 0
|
|
270
|
+
);
|
|
271
|
+
DatePickerModal = ({
|
|
272
|
+
date,
|
|
273
|
+
isOpen,
|
|
274
|
+
onSelected,
|
|
275
|
+
top,
|
|
276
|
+
min,
|
|
277
|
+
max
|
|
278
|
+
}) => {
|
|
279
|
+
const modalRef = (0, import_react2.useRef)(null);
|
|
280
|
+
const initialDate = date ? toLocal(date) : void 0;
|
|
281
|
+
const minDate = min ? toLocal(min) : void 0;
|
|
282
|
+
const maxDate = max ? toLocal(max) : void 0;
|
|
283
|
+
const hiddenId = `screen-reader-title-${(0, import_react2.useId)()}`;
|
|
284
|
+
const handleSelected = (selectedDate) => {
|
|
285
|
+
onSelected(selectedDate);
|
|
286
|
+
};
|
|
287
|
+
const handleDayPickerSelect = (selectedDate) => {
|
|
288
|
+
if (!selectedDate) return;
|
|
289
|
+
handleSelected(dateObjToString(selectedDate));
|
|
290
|
+
};
|
|
291
|
+
(0, import_mobius2.useOnClickOutside)(modalRef, () => {
|
|
292
|
+
if (modalRef.current && isOpen) {
|
|
293
|
+
handleSelected();
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
const modalClasses = (0, import_dedupe.default)("mobius-date-picker__modal", {
|
|
297
|
+
"--is-open": isOpen
|
|
298
|
+
});
|
|
299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
300
|
+
"div",
|
|
301
|
+
{
|
|
302
|
+
ref: modalRef,
|
|
303
|
+
className: modalClasses,
|
|
304
|
+
style: { top },
|
|
305
|
+
"aria-describedby": hiddenId,
|
|
306
|
+
"data-testid": "modal-container",
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mobius2.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: hiddenId, children: "Please select a date from the calendar" }) }),
|
|
309
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
310
|
+
import_react_day_picker.DayPicker,
|
|
311
|
+
{
|
|
312
|
+
autoFocus: true,
|
|
313
|
+
mode: "single",
|
|
314
|
+
...minDate && { startMonth: minDate },
|
|
315
|
+
...maxDate && { endMonth: maxDate },
|
|
316
|
+
disabled: {
|
|
317
|
+
...min && { before: (0, import_date_fns3.parseISO)(min) },
|
|
318
|
+
...max && { after: (0, import_date_fns3.parseISO)(max) }
|
|
319
|
+
},
|
|
320
|
+
selected: initialDate,
|
|
321
|
+
defaultMonth: initialDate,
|
|
322
|
+
onSelect: handleDayPickerSelect,
|
|
323
|
+
pagedNavigation: true,
|
|
324
|
+
showOutsideDays: true,
|
|
325
|
+
weekStartsOn: startWeekday,
|
|
326
|
+
formatters: { formatWeekdayName: weekdayAsOneLetter },
|
|
327
|
+
components: {
|
|
328
|
+
Chevron: ChevronComponent,
|
|
329
|
+
CaptionLabel
|
|
330
|
+
},
|
|
331
|
+
classNames: {
|
|
332
|
+
root: "mobius-date-picker__root",
|
|
333
|
+
months: "mobius-date-picker__months",
|
|
334
|
+
month: "mobius-date-picker__month",
|
|
335
|
+
nav: "mobius-date-picker__nav",
|
|
336
|
+
button_previous: "mobius-date-picker__nav-button --previous",
|
|
337
|
+
button_next: "mobius-date-picker__nav-button --next",
|
|
338
|
+
month_caption: "mobius-date-picker__caption",
|
|
339
|
+
caption_label: "mobius-date-picker__caption-label",
|
|
340
|
+
month_grid: "mobius-date-picker__month-grid",
|
|
341
|
+
weekdays: "mobius-date-picker__weekdays",
|
|
342
|
+
weekday: "mobius-date-picker__weekday",
|
|
343
|
+
weeks: "mobius-date-picker__weeks",
|
|
344
|
+
week: "mobius-date-picker__week",
|
|
345
|
+
day: "mobius-date-picker__day",
|
|
346
|
+
day_button: "mobius-date-picker__day-button",
|
|
347
|
+
selected: "--is-selected",
|
|
348
|
+
disabled: "--is-disabled",
|
|
349
|
+
outside: "--is-outside",
|
|
350
|
+
hidden: "--is-hidden",
|
|
351
|
+
today: "--is-today",
|
|
352
|
+
focused: "--is-focused"
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
)
|
|
356
|
+
]
|
|
357
|
+
}
|
|
358
|
+
) });
|
|
359
|
+
};
|
|
360
|
+
DatePickerModal_default = DatePickerModal;
|
|
361
|
+
}
|
|
362
|
+
});
|
|
363
|
+
|
|
364
|
+
// index.tsx
|
|
365
|
+
var index_exports = {};
|
|
366
|
+
__export(index_exports, {
|
|
367
|
+
DatePicker: () => DatePicker
|
|
368
|
+
});
|
|
369
|
+
module.exports = __toCommonJS(index_exports);
|
|
370
|
+
|
|
371
|
+
// src/components/DatePicker/DatePicker.tsx
|
|
372
|
+
var import_icons2 = require("@simplybusiness/icons");
|
|
373
|
+
var import_mobius3 = require("@simplybusiness/mobius");
|
|
374
|
+
var import_dedupe2 = __toESM(require("classnames/dedupe"));
|
|
375
|
+
var import_react3 = require("react");
|
|
376
|
+
|
|
377
|
+
// src/utils/isTouchDevice.ts
|
|
378
|
+
var isTouchDevice = () => {
|
|
379
|
+
if (typeof window !== "undefined") {
|
|
380
|
+
return window.matchMedia("(hover: none), (pointer: coarse)").matches;
|
|
381
|
+
}
|
|
382
|
+
return void 0;
|
|
383
|
+
};
|
|
384
|
+
|
|
385
|
+
// src/components/DatePicker/DatePicker.tsx
|
|
386
|
+
init_utils();
|
|
387
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
388
|
+
var DatePickerModal2 = (0, import_react3.lazy)(() => Promise.resolve().then(() => (init_DatePickerModal(), DatePickerModal_exports)));
|
|
389
|
+
var getValidationState = (isInvalid) => {
|
|
390
|
+
if (isInvalid) {
|
|
391
|
+
return true;
|
|
392
|
+
}
|
|
393
|
+
if (isInvalid === false) {
|
|
394
|
+
return false;
|
|
395
|
+
}
|
|
396
|
+
return void 0;
|
|
397
|
+
};
|
|
398
|
+
var DatePicker = (props) => {
|
|
399
|
+
const {
|
|
400
|
+
onChange,
|
|
401
|
+
defaultValue = "",
|
|
402
|
+
isDisabled,
|
|
403
|
+
isInvalid,
|
|
404
|
+
errorMessage = "",
|
|
405
|
+
...otherProps
|
|
406
|
+
} = props;
|
|
407
|
+
const containerRef = (0, import_react3.useRef)(null);
|
|
408
|
+
const [top, setTop] = (0, import_react3.useState)(0);
|
|
409
|
+
const inputRef = (0, import_react3.useRef)(null);
|
|
410
|
+
const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
|
|
411
|
+
const [textFieldVal, setTextFieldVal] = (0, import_react3.useState)(
|
|
412
|
+
validateDateFormat(defaultValue)
|
|
413
|
+
);
|
|
414
|
+
const [isValid, setIsValid] = (0, import_react3.useState)(void 0);
|
|
415
|
+
const isInvalidProp = getValidationState(isValid === false || isInvalid);
|
|
416
|
+
const errorMessageText = isInvalidProp ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
|
|
417
|
+
const touchDevice = isTouchDevice();
|
|
418
|
+
const validationClasses = (0, import_mobius3.useValidationClasses)({ isInvalid: isInvalidProp });
|
|
419
|
+
const containerClasses = (0, import_dedupe2.default)(
|
|
420
|
+
"mobius-date-picker__container",
|
|
421
|
+
{
|
|
422
|
+
"--is-disabled": isDisabled,
|
|
423
|
+
"--is-touch-device": touchDevice
|
|
424
|
+
},
|
|
425
|
+
validationClasses
|
|
426
|
+
);
|
|
427
|
+
const popoverToggleClasses = (0, import_dedupe2.default)(
|
|
428
|
+
"mobius-date-picker__field-button",
|
|
429
|
+
validationClasses
|
|
430
|
+
);
|
|
431
|
+
const validate = (0, import_react3.useCallback)(() => {
|
|
432
|
+
if (isOpen) return;
|
|
433
|
+
const isValidInput = inputRef.current?.checkValidity();
|
|
434
|
+
if (!isValidInput) {
|
|
435
|
+
setIsValid(false);
|
|
436
|
+
}
|
|
437
|
+
}, [isOpen]);
|
|
438
|
+
(0, import_react3.useEffect)(() => {
|
|
439
|
+
if (!inputRef.current) return;
|
|
440
|
+
const validatedValue = validateDateFormat(defaultValue);
|
|
441
|
+
setTextFieldVal(validatedValue);
|
|
442
|
+
inputRef.current.value = validatedValue;
|
|
443
|
+
setIsValid(true);
|
|
444
|
+
validate();
|
|
445
|
+
}, [defaultValue, validate]);
|
|
446
|
+
const togglePopoverVisibility = () => {
|
|
447
|
+
setIsValid(true);
|
|
448
|
+
setIsOpen(!isOpen);
|
|
449
|
+
};
|
|
450
|
+
const handleTextFieldChange = (event) => {
|
|
451
|
+
setTextFieldVal(event.target.value);
|
|
452
|
+
setIsValid(true);
|
|
453
|
+
};
|
|
454
|
+
const onDateSelected = (selectedDate) => {
|
|
455
|
+
if (selectedDate) {
|
|
456
|
+
setTextFieldVal(selectedDate);
|
|
457
|
+
setIsValid(true);
|
|
458
|
+
onChange?.(selectedDate);
|
|
459
|
+
}
|
|
460
|
+
inputRef.current?.focus();
|
|
461
|
+
setIsOpen(false);
|
|
462
|
+
};
|
|
463
|
+
const handleBlur = (event) => {
|
|
464
|
+
const target = event.target;
|
|
465
|
+
if (isOpen && event.relatedTarget && containerRef.current?.contains(event.relatedTarget)) {
|
|
466
|
+
return;
|
|
467
|
+
}
|
|
468
|
+
validate();
|
|
469
|
+
if (!textFieldVal) {
|
|
470
|
+
setIsValid(false);
|
|
471
|
+
}
|
|
472
|
+
onChange?.(target.value);
|
|
473
|
+
};
|
|
474
|
+
const handleClick = (event) => {
|
|
475
|
+
event.preventDefault();
|
|
476
|
+
togglePopoverVisibility();
|
|
477
|
+
};
|
|
478
|
+
(0, import_react3.useEffect)(() => {
|
|
479
|
+
if (isOpen) {
|
|
480
|
+
setTop(containerRef.current?.getBoundingClientRect().height || 0);
|
|
481
|
+
setIsValid(true);
|
|
482
|
+
return;
|
|
483
|
+
}
|
|
484
|
+
validate();
|
|
485
|
+
}, [isOpen, validate]);
|
|
486
|
+
if (touchDevice) {
|
|
487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: containerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
488
|
+
import_mobius3.TextField,
|
|
489
|
+
{
|
|
490
|
+
ref: inputRef,
|
|
491
|
+
type: "date",
|
|
492
|
+
className: "mobius-date-picker",
|
|
493
|
+
onBlur: handleBlur,
|
|
494
|
+
onChange: handleTextFieldChange,
|
|
495
|
+
value: textFieldVal,
|
|
496
|
+
isDisabled,
|
|
497
|
+
isInvalid: isInvalidProp,
|
|
498
|
+
...otherProps,
|
|
499
|
+
errorMessage: errorMessage || errorMessageText
|
|
500
|
+
}
|
|
501
|
+
) });
|
|
502
|
+
}
|
|
503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: containerClasses, ref: containerRef, children: [
|
|
504
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
505
|
+
import_mobius3.TextField,
|
|
506
|
+
{
|
|
507
|
+
ref: inputRef,
|
|
508
|
+
type: "date",
|
|
509
|
+
className: "mobius-date-picker",
|
|
510
|
+
onBlur: handleBlur,
|
|
511
|
+
onChange: handleTextFieldChange,
|
|
512
|
+
onClick: handleClick,
|
|
513
|
+
value: textFieldVal,
|
|
514
|
+
isDisabled,
|
|
515
|
+
isInvalid: isInvalidProp,
|
|
516
|
+
...otherProps,
|
|
517
|
+
errorMessage: errorMessage || errorMessageText,
|
|
518
|
+
suffixOutside: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
519
|
+
import_mobius3.Button,
|
|
520
|
+
{
|
|
521
|
+
className: popoverToggleClasses,
|
|
522
|
+
onClick: togglePopoverVisibility,
|
|
523
|
+
isDisabled,
|
|
524
|
+
size: "sm",
|
|
525
|
+
children: [
|
|
526
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mobius3.Icon, { size: "sm", icon: import_icons2.calendarDay }),
|
|
527
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mobius3.VisuallyHidden, { children: "Pick date" })
|
|
528
|
+
]
|
|
529
|
+
}
|
|
530
|
+
)
|
|
531
|
+
}
|
|
532
|
+
),
|
|
533
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
534
|
+
DatePickerModal2,
|
|
535
|
+
{
|
|
536
|
+
date: textFieldVal,
|
|
537
|
+
isOpen,
|
|
538
|
+
top,
|
|
539
|
+
onSelected: onDateSelected,
|
|
540
|
+
min: props.min,
|
|
541
|
+
max: props.max
|
|
542
|
+
}
|
|
543
|
+
) })
|
|
544
|
+
] });
|
|
545
|
+
};
|
|
546
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/DatePicker/utils/dateObjToString.ts", "../../src/components/DatePicker/utils/formatErrorMessageText.ts", "../../src/components/DatePicker/utils/validateDateFormat.ts", "../../src/components/DatePicker/constants.ts", "../../src/components/DatePicker/utils/weekdayAsOneLetter.ts", "../../src/components/DatePicker/utils/index.ts", "../../src/hooks/useFocusTrap/useFocusTrap.tsx", "../../src/components/DatePicker/utils/getStartWeekday.ts", "../../src/components/DatePicker/utils/timezoneOffset.ts", "../../src/components/DatePicker/CustomComponents/CaptionLabel.tsx", "../../src/components/DatePicker/CustomComponents/ChevronComponent.tsx", "../../src/components/DatePicker/CustomComponents/index.tsx", "../../src/components/DatePicker/DatePickerModal.tsx", "../../index.tsx", "../../src/components/DatePicker/DatePicker.tsx", "../../src/utils/isTouchDevice.ts"],
|
|
4
|
+
"sourcesContent": ["export const dateObjToString = (date: Date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\");\n const day = String(date.getDate()).padStart(2, \"0\");\n\n // Extract the date part from the Date object\n return `${year}-${month}-${day}`;\n};\n", "import { isAfter, isBefore } from \"date-fns\";\n\nexport const DEFAULT_INVALID_DATE_MESSAGE = \"Please enter a valid date\";\nexport const DEFAULT_BEFORE_MIN =\n \"The date you selected is before the earliest allowed date\";\nexport const DEFAULT_AFTER_MAX =\n \"The date you selected is after the latest allowed date\";\n\nexport const formatErrorMessageText = (\n actual: string,\n min?: string,\n max?: string,\n) => {\n const actualDate = new Date(actual);\n const minDate = min && new Date(min);\n const maxDate = max && new Date(max);\n\n if (minDate && isBefore(actualDate, minDate)) {\n return DEFAULT_BEFORE_MIN;\n }\n\n if (maxDate && isAfter(actualDate, maxDate)) {\n return DEFAULT_AFTER_MAX;\n }\n\n return DEFAULT_INVALID_DATE_MESSAGE;\n};\n", "import { isMatch } from \"date-fns\";\n\n// eg 2023-12-31\nexport const DATE_FORMAT = \"yyyy-MM-dd\";\n\nexport const validateDateFormat = (date: string) => {\n if (date === \"\") {\n return \"\";\n }\n\n if (isMatch(date, DATE_FORMAT)) {\n return date;\n }\n\n throw Error(\n `DatePicker defaultValue '${date}' is invalid. The expected format is '${DATE_FORMAT}' `,\n );\n};\n", "export const SUNDAY_AS_NUMBER = 0;\nexport const MONDAY_AS_NUMBER = 1;\nexport const DEFAULT_LOCALE = \"en-GB\";\n", "import { DEFAULT_LOCALE } from \"../constants\";\n\nexport const weekdayAsOneLetter = (date: Date) => {\n const locale = navigator.language || DEFAULT_LOCALE;\n const oneLetter = date.toLocaleString(locale, {\n weekday: \"narrow\",\n });\n\n return oneLetter;\n};\n", "export * from \"./dateObjToString\";\nexport * from \"./formatErrorMessageText\";\nexport * from \"./validateDateFormat\";\nexport * from \"./weekdayAsOneLetter\";\n", "import type { ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\n\nconst useFocusTrap = () => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n const element = containerRef.current;\n const focusableElements =\n containerRef.current.querySelectorAll<HTMLElement>(\n '[tabindex=\"0\"], .mobius-date-picker__nav-button',\n );\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n const handleTabKeyPress = (event: KeyboardEvent) => {\n if (event.key === \"Tab\") {\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n } else if (\n !event.shiftKey &&\n document.activeElement &&\n document.activeElement.className.indexOf(\n \"mobius-date-picker__day-button\",\n ) > -1\n ) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n element.addEventListener(\"keydown\", handleTabKeyPress);\n return () => {\n element.removeEventListener(\"keydown\", handleTabKeyPress);\n };\n }\n return () => {};\n }, []);\n\n return containerRef;\n};\n\nexport type FocusTrapProps = {\n children: ReactNode;\n};\n\nexport default function FocusTrap({ children }: FocusTrapProps) {\n const focusRef = useFocusTrap();\n\n return (\n <div className=\"trap\" ref={focusRef}>\n {children}\n </div>\n );\n}\n", "import {\n DEFAULT_LOCALE,\n MONDAY_AS_NUMBER,\n SUNDAY_AS_NUMBER,\n} from \"../constants\";\n\ntype WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;\n\n// Calculates start of week for calendar in UK and US locales\n// Add more to the switch statement as needed\nexport const getStartWeekday = (locale?: string): WeekStart => {\n switch (locale || DEFAULT_LOCALE) {\n case \"en-US\":\n return SUNDAY_AS_NUMBER;\n\n default:\n return MONDAY_AS_NUMBER;\n }\n};\n", "/**\n * Converts a local date-time to UTC\n * @param localDate - Date object in local timezone\n * @returns Date object in UTC\n */\nexport function toUTC(localDate: Date): Date {\n return new Date(localDate.getTime() - localDate.getTimezoneOffset() * 60000);\n}\n\nexport function toLocal(utcDateString: string): Date {\n const utcDate = new Date(utcDateString);\n if (Number.isNaN(utcDate.getTime())) {\n throw new Error(\"Invalid date string\");\n }\n // Convert UTC date to local date\n // by adding the timezone offset in milliseconds\n return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);\n}\n", "import { type HTMLAttributes } from \"react\";\n\n/**\n *\n * This component is used to render the caption label for the date picker.\n * We are overriding the standard span with an h2 for accessibility reasons.\n */\nexport const CaptionLabel = (props: HTMLAttributes<HTMLSpanElement>) => {\n return <h2 {...props} />;\n};\n", "import { chevronLeft, chevronRight } from \"@simplybusiness/icons\";\nimport { Icon } from \"@simplybusiness/mobius\";\n\ntype ChevronComponentProps = {\n orientation?: \"up\" | \"down\" | \"left\" | \"right\";\n};\n\nexport const ChevronComponent = ({ orientation }: ChevronComponentProps) => {\n if (orientation === \"left\") {\n return <Icon icon={chevronLeft} />;\n }\n return <Icon icon={chevronRight} />;\n};\n", "export * from \"./CaptionLabel\";\nexport * from \"./ChevronComponent\";\n", "\"use client\";\n\nimport { VisuallyHidden, useOnClickOutside } from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport { parseISO } from \"date-fns\";\nimport { useId, useRef } from \"react\";\nimport type { Matcher } from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\nimport { toLocal } from \"./utils/timezoneOffset\";\nimport { ChevronComponent, CaptionLabel } from \"./CustomComponents\";\n\nexport type DatePickerModalProps = {\n date?: string; // yyyy-mm-dd\n isOpen: boolean;\n top: number;\n onSelected: (date?: string) => void;\n min?: string;\n max?: string;\n};\n\nconst startWeekday = getStartWeekday(\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n typeof navigator !== \"undefined\" ? navigator?.language : undefined,\n);\n\nconst DatePickerModal = ({\n date,\n isOpen,\n onSelected,\n top,\n min,\n max,\n}: DatePickerModalProps) => {\n const modalRef = useRef<HTMLDivElement>(null);\n const initialDate = date ? toLocal(date) : undefined;\n const minDate = min ? toLocal(min) : undefined;\n const maxDate = max ? toLocal(max) : undefined;\n const hiddenId = `screen-reader-title-${useId()}`;\n\n const handleSelected = (selectedDate?: string) => {\n onSelected(selectedDate);\n };\n\n const handleDayPickerSelect = (selectedDate: Date | undefined) => {\n if (!selectedDate) return;\n\n handleSelected(dateObjToString(selectedDate));\n };\n\n useOnClickOutside(modalRef, () => {\n if (modalRef.current && isOpen) {\n handleSelected();\n }\n });\n\n const modalClasses = classNames(\"mobius-date-picker__modal\", {\n \"--is-open\": isOpen,\n });\n\n return (\n <FocusTrap>\n <div\n ref={modalRef}\n className={modalClasses}\n style={{ top }}\n aria-describedby={hiddenId}\n data-testid=\"modal-container\"\n >\n <VisuallyHidden>\n <div id={hiddenId}>Please select a date from the calendar</div>\n </VisuallyHidden>\n <DayPicker\n autoFocus\n mode=\"single\"\n {...(minDate && { startMonth: minDate })}\n {...(maxDate && { endMonth: maxDate })}\n disabled={\n {\n ...(min && { before: parseISO(min) }),\n ...(max && { after: parseISO(max) }),\n } as Matcher\n }\n selected={initialDate}\n defaultMonth={initialDate}\n onSelect={handleDayPickerSelect}\n pagedNavigation\n showOutsideDays\n weekStartsOn={startWeekday}\n formatters={{ formatWeekdayName: weekdayAsOneLetter }}\n components={{\n Chevron: ChevronComponent,\n CaptionLabel,\n }}\n classNames={{\n root: \"mobius-date-picker__root\",\n months: \"mobius-date-picker__months\",\n month: \"mobius-date-picker__month\",\n nav: \"mobius-date-picker__nav\",\n button_previous: \"mobius-date-picker__nav-button --previous\",\n button_next: \"mobius-date-picker__nav-button --next\",\n month_caption: \"mobius-date-picker__caption\",\n caption_label: \"mobius-date-picker__caption-label\",\n month_grid: \"mobius-date-picker__month-grid\",\n weekdays: \"mobius-date-picker__weekdays\",\n weekday: \"mobius-date-picker__weekday\",\n weeks: \"mobius-date-picker__weeks\",\n week: \"mobius-date-picker__week\",\n day: \"mobius-date-picker__day\",\n day_button: \"mobius-date-picker__day-button\",\n selected: \"--is-selected\",\n disabled: \"--is-disabled\",\n outside: \"--is-outside\",\n hidden: \"--is-hidden\",\n today: \"--is-today\",\n focused: \"--is-focused\",\n }}\n />\n </div>\n </FocusTrap>\n );\n};\n\nexport default DatePickerModal;\n", "export * from \"./src\";\n", "\"use client\";\n\nimport { calendarDay } from \"@simplybusiness/icons\";\nimport type {\n TextFieldElementType,\n TextFieldProps,\n Validation,\n} from \"@simplybusiness/mobius\";\nimport {\n Button,\n Icon,\n TextField,\n VisuallyHidden,\n useValidationClasses,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport {\n Suspense,\n lazy,\n useCallback,\n useEffect,\n useRef,\n useState,\n type MouseEvent,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nconst getValidationState = (isInvalid: boolean | undefined) => {\n if (isInvalid) {\n return true;\n }\n\n if (isInvalid === false) {\n return false;\n }\n\n return undefined;\n};\n\nexport interface DatePickerProps\n extends\n Validation,\n Omit<TextFieldProps, \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"> {\n onChange?: (date: string | undefined) => void;\n defaultValue?: string;\n min?: string;\n max?: string;\n id?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n const {\n onChange,\n defaultValue = \"\",\n isDisabled,\n isInvalid,\n errorMessage = \"\",\n ...otherProps\n } = props;\n const containerRef = useRef<HTMLDivElement | null>(null);\n const [top, setTop] = useState<number>(0);\n const inputRef = useRef<TextFieldElementType | null>(null);\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [textFieldVal, setTextFieldVal] = useState<string>(\n validateDateFormat(defaultValue),\n );\n const [isValid, setIsValid] = useState<boolean | undefined>(undefined);\n const isInvalidProp = getValidationState(isValid === false || isInvalid);\n const errorMessageText = isInvalidProp\n ? formatErrorMessageText(textFieldVal, props.min, props.max)\n : errorMessage;\n const touchDevice = isTouchDevice();\n\n const validationClasses = useValidationClasses({ isInvalid: isInvalidProp });\n\n const containerClasses = classNames(\n \"mobius-date-picker__container\",\n {\n \"--is-disabled\": isDisabled,\n \"--is-touch-device\": touchDevice,\n },\n validationClasses,\n );\n\n const popoverToggleClasses = classNames(\n \"mobius-date-picker__field-button\",\n validationClasses,\n );\n\n const validate = useCallback(() => {\n if (isOpen) return;\n\n // If 'min' or 'max' values are provided, checkValidity() will\n // validate the date and return a boolean\n const isValidInput = inputRef.current?.checkValidity();\n\n if (!isValidInput) {\n setIsValid(false);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (!inputRef.current) return;\n const validatedValue = validateDateFormat(defaultValue);\n setTextFieldVal(validatedValue);\n inputRef.current.value = validatedValue;\n setIsValid(true);\n validate();\n }, [defaultValue, validate]);\n\n const togglePopoverVisibility = () => {\n setIsValid(true);\n setIsOpen(!isOpen);\n };\n\n const handleTextFieldChange = (event: ChangeEvent<TextFieldElementType>) => {\n setTextFieldVal(event.target.value);\n // onChange only triggers on a valid date\n // so this clears the error\n setIsValid(true);\n };\n\n const onDateSelected = (selectedDate: string | undefined) => {\n // Handle null callback from useOnClickOutside\n if (selectedDate) {\n setTextFieldVal(selectedDate);\n setIsValid(true);\n // Add other callback events here\n onChange?.(selectedDate);\n }\n // Focus the input\n inputRef.current?.focus();\n setIsOpen(false);\n };\n\n // User has interacted with the component and navigated away\n const handleBlur = (event: FocusEvent) => {\n const target = event.target as TextFieldElementType;\n // If the blur is caused by focusing on the DayPicker modal, do nothing\n // The modal is rendered after the input in the DOM,\n // so check if the relatedTarget is inside the modal\n if (\n isOpen &&\n event.relatedTarget &&\n containerRef.current?.contains(event.relatedTarget as HTMLElement)\n ) {\n return;\n }\n validate();\n\n // User hasn't entered a date, or entered an invalid date\n if (!textFieldVal) {\n setIsValid(false);\n }\n\n onChange?.(target.value);\n };\n\n const handleClick = (event: MouseEvent<TextFieldElementType>) => {\n event.preventDefault();\n togglePopoverVisibility();\n };\n\n useEffect(() => {\n if (isOpen) {\n setTop(containerRef.current?.getBoundingClientRect().height || 0);\n // Disable validation when day picker is open\n setIsValid(true);\n return;\n }\n\n validate();\n }, [isOpen, validate]);\n\n if (touchDevice) {\n return (\n <div className={containerClasses}>\n <TextField\n ref={inputRef}\n type=\"date\"\n className=\"mobius-date-picker\"\n onBlur={handleBlur}\n onChange={handleTextFieldChange}\n value={textFieldVal}\n isDisabled={isDisabled}\n isInvalid={isInvalidProp}\n {...otherProps}\n errorMessage={errorMessage || errorMessageText}\n />\n </div>\n );\n }\n\n return (\n <div className={containerClasses} ref={containerRef}>\n <TextField\n ref={inputRef}\n type=\"date\"\n className=\"mobius-date-picker\"\n onBlur={handleBlur}\n onChange={handleTextFieldChange}\n // @ts-expect-error onClick is not in TextField's props but is passed through via otherProps spread\n onClick={handleClick}\n value={textFieldVal}\n isDisabled={isDisabled}\n isInvalid={isInvalidProp}\n {...otherProps}\n errorMessage={errorMessage || errorMessageText}\n suffixOutside={\n <Button\n className={popoverToggleClasses}\n onClick={togglePopoverVisibility}\n isDisabled={isDisabled}\n size=\"sm\"\n >\n <Icon size=\"sm\" icon={calendarDay} />\n <VisuallyHidden>Pick date</VisuallyHidden>\n </Button>\n }\n />\n {isOpen && (\n <Suspense>\n <DatePickerModal\n date={textFieldVal}\n isOpen={isOpen}\n top={top}\n onSelected={onDateSelected}\n min={props.min}\n max={props.max}\n />\n </Suspense>\n )}\n </div>\n );\n};\n", "export const isTouchDevice = (): boolean | undefined => {\n if (typeof window !== \"undefined\") {\n return window.matchMedia(\"(hover: none), (pointer: coarse)\").matches;\n }\n\n return undefined;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_date_fns", "import_jsx_runtime", "import_jsx_runtime", "import_mobius", "import_date_fns", "import_react", "import_jsx_runtime", "classNames", "import_icons", "import_mobius", "import_dedupe", "import_react", "import_jsx_runtime", "DatePickerModal", "classNames"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,463 @@
|
|
|
1
|
+
{
|
|
2
|
+
"inputs": {
|
|
3
|
+
"src/utils/isTouchDevice.ts": {
|
|
4
|
+
"bytes": 199,
|
|
5
|
+
"imports": [],
|
|
6
|
+
"format": "esm"
|
|
7
|
+
},
|
|
8
|
+
"src/components/DatePicker/utils/dateObjToString.ts": {
|
|
9
|
+
"bytes": 289,
|
|
10
|
+
"imports": [],
|
|
11
|
+
"format": "esm"
|
|
12
|
+
},
|
|
13
|
+
"src/components/DatePicker/utils/formatErrorMessageText.ts": {
|
|
14
|
+
"bytes": 740,
|
|
15
|
+
"imports": [
|
|
16
|
+
{
|
|
17
|
+
"path": "date-fns",
|
|
18
|
+
"kind": "import-statement",
|
|
19
|
+
"external": true
|
|
20
|
+
}
|
|
21
|
+
],
|
|
22
|
+
"format": "esm"
|
|
23
|
+
},
|
|
24
|
+
"src/components/DatePicker/utils/validateDateFormat.ts": {
|
|
25
|
+
"bytes": 366,
|
|
26
|
+
"imports": [
|
|
27
|
+
{
|
|
28
|
+
"path": "date-fns",
|
|
29
|
+
"kind": "import-statement",
|
|
30
|
+
"external": true
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"format": "esm"
|
|
34
|
+
},
|
|
35
|
+
"src/components/DatePicker/constants.ts": {
|
|
36
|
+
"bytes": 109,
|
|
37
|
+
"imports": [],
|
|
38
|
+
"format": "esm"
|
|
39
|
+
},
|
|
40
|
+
"src/components/DatePicker/utils/weekdayAsOneLetter.ts": {
|
|
41
|
+
"bytes": 258,
|
|
42
|
+
"imports": [
|
|
43
|
+
{
|
|
44
|
+
"path": "src/components/DatePicker/constants.ts",
|
|
45
|
+
"kind": "import-statement",
|
|
46
|
+
"original": "../constants"
|
|
47
|
+
}
|
|
48
|
+
],
|
|
49
|
+
"format": "esm"
|
|
50
|
+
},
|
|
51
|
+
"src/components/DatePicker/utils/index.ts": {
|
|
52
|
+
"bytes": 153,
|
|
53
|
+
"imports": [
|
|
54
|
+
{
|
|
55
|
+
"path": "src/components/DatePicker/utils/dateObjToString.ts",
|
|
56
|
+
"kind": "import-statement",
|
|
57
|
+
"original": "./dateObjToString"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"path": "src/components/DatePicker/utils/formatErrorMessageText.ts",
|
|
61
|
+
"kind": "import-statement",
|
|
62
|
+
"original": "./formatErrorMessageText"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"path": "src/components/DatePicker/utils/validateDateFormat.ts",
|
|
66
|
+
"kind": "import-statement",
|
|
67
|
+
"original": "./validateDateFormat"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"path": "src/components/DatePicker/utils/weekdayAsOneLetter.ts",
|
|
71
|
+
"kind": "import-statement",
|
|
72
|
+
"original": "./weekdayAsOneLetter"
|
|
73
|
+
}
|
|
74
|
+
],
|
|
75
|
+
"format": "esm"
|
|
76
|
+
},
|
|
77
|
+
"src/hooks/useFocusTrap/useFocusTrap.tsx": {
|
|
78
|
+
"bytes": 1599,
|
|
79
|
+
"imports": [
|
|
80
|
+
{
|
|
81
|
+
"path": "react",
|
|
82
|
+
"kind": "import-statement",
|
|
83
|
+
"external": true
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"path": "react/jsx-runtime",
|
|
87
|
+
"kind": "import-statement",
|
|
88
|
+
"external": true
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"format": "esm"
|
|
92
|
+
},
|
|
93
|
+
"src/components/DatePicker/utils/getStartWeekday.ts": {
|
|
94
|
+
"bytes": 460,
|
|
95
|
+
"imports": [
|
|
96
|
+
{
|
|
97
|
+
"path": "src/components/DatePicker/constants.ts",
|
|
98
|
+
"kind": "import-statement",
|
|
99
|
+
"original": "../constants"
|
|
100
|
+
}
|
|
101
|
+
],
|
|
102
|
+
"format": "esm"
|
|
103
|
+
},
|
|
104
|
+
"src/components/DatePicker/utils/timezoneOffset.ts": {
|
|
105
|
+
"bytes": 610,
|
|
106
|
+
"imports": [],
|
|
107
|
+
"format": "esm"
|
|
108
|
+
},
|
|
109
|
+
"src/components/DatePicker/CustomComponents/CaptionLabel.tsx": {
|
|
110
|
+
"bytes": 314,
|
|
111
|
+
"imports": [
|
|
112
|
+
{
|
|
113
|
+
"path": "react",
|
|
114
|
+
"kind": "import-statement",
|
|
115
|
+
"external": true
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"path": "react/jsx-runtime",
|
|
119
|
+
"kind": "import-statement",
|
|
120
|
+
"external": true
|
|
121
|
+
}
|
|
122
|
+
],
|
|
123
|
+
"format": "esm"
|
|
124
|
+
},
|
|
125
|
+
"src/components/DatePicker/CustomComponents/ChevronComponent.tsx": {
|
|
126
|
+
"bytes": 396,
|
|
127
|
+
"imports": [
|
|
128
|
+
{
|
|
129
|
+
"path": "@simplybusiness/icons",
|
|
130
|
+
"kind": "import-statement",
|
|
131
|
+
"external": true
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"path": "@simplybusiness/mobius",
|
|
135
|
+
"kind": "import-statement",
|
|
136
|
+
"external": true
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"path": "react/jsx-runtime",
|
|
140
|
+
"kind": "import-statement",
|
|
141
|
+
"external": true
|
|
142
|
+
}
|
|
143
|
+
],
|
|
144
|
+
"format": "esm"
|
|
145
|
+
},
|
|
146
|
+
"src/components/DatePicker/CustomComponents/index.tsx": {
|
|
147
|
+
"bytes": 68,
|
|
148
|
+
"imports": [
|
|
149
|
+
{
|
|
150
|
+
"path": "src/components/DatePicker/CustomComponents/CaptionLabel.tsx",
|
|
151
|
+
"kind": "import-statement",
|
|
152
|
+
"original": "./CaptionLabel"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"path": "src/components/DatePicker/CustomComponents/ChevronComponent.tsx",
|
|
156
|
+
"kind": "import-statement",
|
|
157
|
+
"original": "./ChevronComponent"
|
|
158
|
+
}
|
|
159
|
+
],
|
|
160
|
+
"format": "esm"
|
|
161
|
+
},
|
|
162
|
+
"src/components/DatePicker/DatePickerModal.tsx": {
|
|
163
|
+
"bytes": 3988,
|
|
164
|
+
"imports": [
|
|
165
|
+
{
|
|
166
|
+
"path": "@simplybusiness/mobius",
|
|
167
|
+
"kind": "import-statement",
|
|
168
|
+
"external": true
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"path": "classnames/dedupe",
|
|
172
|
+
"kind": "import-statement",
|
|
173
|
+
"external": true
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"path": "date-fns",
|
|
177
|
+
"kind": "import-statement",
|
|
178
|
+
"external": true
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"path": "react",
|
|
182
|
+
"kind": "import-statement",
|
|
183
|
+
"external": true
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"path": "react-day-picker",
|
|
187
|
+
"kind": "import-statement",
|
|
188
|
+
"external": true
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"path": "src/hooks/useFocusTrap/useFocusTrap.tsx",
|
|
192
|
+
"kind": "import-statement",
|
|
193
|
+
"original": "../../hooks/useFocusTrap/useFocusTrap"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"path": "src/components/DatePicker/utils/index.ts",
|
|
197
|
+
"kind": "import-statement",
|
|
198
|
+
"original": "./utils"
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"path": "src/components/DatePicker/utils/getStartWeekday.ts",
|
|
202
|
+
"kind": "import-statement",
|
|
203
|
+
"original": "./utils/getStartWeekday"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"path": "src/components/DatePicker/utils/timezoneOffset.ts",
|
|
207
|
+
"kind": "import-statement",
|
|
208
|
+
"original": "./utils/timezoneOffset"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"path": "src/components/DatePicker/CustomComponents/index.tsx",
|
|
212
|
+
"kind": "import-statement",
|
|
213
|
+
"original": "./CustomComponents"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"path": "react/jsx-runtime",
|
|
217
|
+
"kind": "import-statement",
|
|
218
|
+
"external": true
|
|
219
|
+
}
|
|
220
|
+
],
|
|
221
|
+
"format": "esm"
|
|
222
|
+
},
|
|
223
|
+
"src/components/DatePicker/DatePicker.tsx": {
|
|
224
|
+
"bytes": 6361,
|
|
225
|
+
"imports": [
|
|
226
|
+
{
|
|
227
|
+
"path": "@simplybusiness/icons",
|
|
228
|
+
"kind": "import-statement",
|
|
229
|
+
"external": true
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"path": "@simplybusiness/mobius",
|
|
233
|
+
"kind": "import-statement",
|
|
234
|
+
"external": true
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"path": "classnames/dedupe",
|
|
238
|
+
"kind": "import-statement",
|
|
239
|
+
"external": true
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"path": "react",
|
|
243
|
+
"kind": "import-statement",
|
|
244
|
+
"external": true
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"path": "src/utils/isTouchDevice.ts",
|
|
248
|
+
"kind": "import-statement",
|
|
249
|
+
"original": "../../utils/isTouchDevice"
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"path": "src/components/DatePicker/utils/index.ts",
|
|
253
|
+
"kind": "import-statement",
|
|
254
|
+
"original": "./utils"
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"path": "src/components/DatePicker/DatePickerModal.tsx",
|
|
258
|
+
"kind": "dynamic-import",
|
|
259
|
+
"original": "./DatePickerModal"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"path": "react/jsx-runtime",
|
|
263
|
+
"kind": "import-statement",
|
|
264
|
+
"external": true
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"format": "esm"
|
|
268
|
+
},
|
|
269
|
+
"src/components/DatePicker/index.tsx": {
|
|
270
|
+
"bytes": 30,
|
|
271
|
+
"imports": [
|
|
272
|
+
{
|
|
273
|
+
"path": "src/components/DatePicker/DatePicker.tsx",
|
|
274
|
+
"kind": "import-statement",
|
|
275
|
+
"original": "./DatePicker"
|
|
276
|
+
}
|
|
277
|
+
],
|
|
278
|
+
"format": "esm"
|
|
279
|
+
},
|
|
280
|
+
"src/index.tsx": {
|
|
281
|
+
"bytes": 41,
|
|
282
|
+
"imports": [
|
|
283
|
+
{
|
|
284
|
+
"path": "src/components/DatePicker/index.tsx",
|
|
285
|
+
"kind": "import-statement",
|
|
286
|
+
"original": "./components/DatePicker"
|
|
287
|
+
}
|
|
288
|
+
],
|
|
289
|
+
"format": "esm"
|
|
290
|
+
},
|
|
291
|
+
"index.tsx": {
|
|
292
|
+
"bytes": 23,
|
|
293
|
+
"imports": [
|
|
294
|
+
{
|
|
295
|
+
"path": "src/index.tsx",
|
|
296
|
+
"kind": "import-statement",
|
|
297
|
+
"original": "./src"
|
|
298
|
+
}
|
|
299
|
+
],
|
|
300
|
+
"format": "esm"
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
"outputs": {
|
|
304
|
+
"dist/cjs/index.js.map": {
|
|
305
|
+
"imports": [],
|
|
306
|
+
"exports": [],
|
|
307
|
+
"inputs": {},
|
|
308
|
+
"bytes": 25892
|
|
309
|
+
},
|
|
310
|
+
"dist/cjs/index.js": {
|
|
311
|
+
"imports": [
|
|
312
|
+
{
|
|
313
|
+
"path": "date-fns",
|
|
314
|
+
"kind": "require-call",
|
|
315
|
+
"external": true
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"path": "date-fns",
|
|
319
|
+
"kind": "require-call",
|
|
320
|
+
"external": true
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"path": "react",
|
|
324
|
+
"kind": "require-call",
|
|
325
|
+
"external": true
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"path": "react/jsx-runtime",
|
|
329
|
+
"kind": "require-call",
|
|
330
|
+
"external": true
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
"path": "react/jsx-runtime",
|
|
334
|
+
"kind": "require-call",
|
|
335
|
+
"external": true
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
"path": "@simplybusiness/icons",
|
|
339
|
+
"kind": "require-call",
|
|
340
|
+
"external": true
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"path": "@simplybusiness/mobius",
|
|
344
|
+
"kind": "require-call",
|
|
345
|
+
"external": true
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"path": "react/jsx-runtime",
|
|
349
|
+
"kind": "require-call",
|
|
350
|
+
"external": true
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
"path": "@simplybusiness/mobius",
|
|
354
|
+
"kind": "require-call",
|
|
355
|
+
"external": true
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"path": "classnames/dedupe",
|
|
359
|
+
"kind": "require-call",
|
|
360
|
+
"external": true
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"path": "date-fns",
|
|
364
|
+
"kind": "require-call",
|
|
365
|
+
"external": true
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
"path": "react",
|
|
369
|
+
"kind": "require-call",
|
|
370
|
+
"external": true
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"path": "react-day-picker",
|
|
374
|
+
"kind": "require-call",
|
|
375
|
+
"external": true
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"path": "react/jsx-runtime",
|
|
379
|
+
"kind": "require-call",
|
|
380
|
+
"external": true
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"path": "@simplybusiness/icons",
|
|
384
|
+
"kind": "require-call",
|
|
385
|
+
"external": true
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"path": "@simplybusiness/mobius",
|
|
389
|
+
"kind": "require-call",
|
|
390
|
+
"external": true
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
"path": "classnames/dedupe",
|
|
394
|
+
"kind": "require-call",
|
|
395
|
+
"external": true
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"path": "react",
|
|
399
|
+
"kind": "require-call",
|
|
400
|
+
"external": true
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"path": "react/jsx-runtime",
|
|
404
|
+
"kind": "require-call",
|
|
405
|
+
"external": true
|
|
406
|
+
}
|
|
407
|
+
],
|
|
408
|
+
"exports": [],
|
|
409
|
+
"entryPoint": "index.tsx",
|
|
410
|
+
"inputs": {
|
|
411
|
+
"src/components/DatePicker/utils/dateObjToString.ts": {
|
|
412
|
+
"bytesInOutput": 386
|
|
413
|
+
},
|
|
414
|
+
"src/components/DatePicker/utils/formatErrorMessageText.ts": {
|
|
415
|
+
"bytesInOutput": 991
|
|
416
|
+
},
|
|
417
|
+
"src/components/DatePicker/utils/validateDateFormat.ts": {
|
|
418
|
+
"bytesInOutput": 569
|
|
419
|
+
},
|
|
420
|
+
"src/components/DatePicker/constants.ts": {
|
|
421
|
+
"bytesInOutput": 240
|
|
422
|
+
},
|
|
423
|
+
"src/components/DatePicker/utils/weekdayAsOneLetter.ts": {
|
|
424
|
+
"bytesInOutput": 389
|
|
425
|
+
},
|
|
426
|
+
"src/components/DatePicker/utils/index.ts": {
|
|
427
|
+
"bytesInOutput": 225
|
|
428
|
+
},
|
|
429
|
+
"src/hooks/useFocusTrap/useFocusTrap.tsx": {
|
|
430
|
+
"bytesInOutput": 1742
|
|
431
|
+
},
|
|
432
|
+
"src/components/DatePicker/utils/getStartWeekday.ts": {
|
|
433
|
+
"bytesInOutput": 365
|
|
434
|
+
},
|
|
435
|
+
"src/components/DatePicker/utils/timezoneOffset.ts": {
|
|
436
|
+
"bytesInOutput": 360
|
|
437
|
+
},
|
|
438
|
+
"src/components/DatePicker/CustomComponents/CaptionLabel.tsx": {
|
|
439
|
+
"bytesInOutput": 339
|
|
440
|
+
},
|
|
441
|
+
"src/components/DatePicker/CustomComponents/ChevronComponent.tsx": {
|
|
442
|
+
"bytesInOutput": 700
|
|
443
|
+
},
|
|
444
|
+
"src/components/DatePicker/CustomComponents/index.tsx": {
|
|
445
|
+
"bytesInOutput": 177
|
|
446
|
+
},
|
|
447
|
+
"src/components/DatePicker/DatePickerModal.tsx": {
|
|
448
|
+
"bytesInOutput": 4810
|
|
449
|
+
},
|
|
450
|
+
"index.tsx": {
|
|
451
|
+
"bytesInOutput": 131
|
|
452
|
+
},
|
|
453
|
+
"src/components/DatePicker/DatePicker.tsx": {
|
|
454
|
+
"bytesInOutput": 5372
|
|
455
|
+
},
|
|
456
|
+
"src/utils/isTouchDevice.ts": {
|
|
457
|
+
"bytesInOutput": 165
|
|
458
|
+
}
|
|
459
|
+
},
|
|
460
|
+
"bytes": 19358
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplybusiness/mobius-datepicker",
|
|
3
3
|
"license": "UNLICENSED",
|
|
4
|
-
"version": "9.0.
|
|
4
|
+
"version": "9.0.2",
|
|
5
5
|
"description": "Mobius date picker component",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"simplyBusiness": {
|
|
11
11
|
"publishToPublicNpm": true
|
|
12
12
|
},
|
|
13
|
-
"main": "dist/
|
|
13
|
+
"main": "dist/cjs/index.js",
|
|
14
14
|
"types": "./dist/types/index.d.ts",
|
|
15
15
|
"files": [
|
|
16
16
|
"src",
|
|
@@ -19,19 +19,20 @@
|
|
|
19
19
|
"exports": {
|
|
20
20
|
".": {
|
|
21
21
|
"types": "./dist/types/index.d.ts",
|
|
22
|
+
"require": "./dist/cjs/index.js",
|
|
22
23
|
"import": "./dist/esm/index.js",
|
|
23
24
|
"default": "./dist/esm/index.js"
|
|
24
25
|
},
|
|
25
26
|
"./src/*.css": "./src/*.css"
|
|
26
27
|
},
|
|
27
28
|
"publishConfig": {
|
|
28
|
-
"
|
|
29
|
-
"main": "dist/esm/index.js",
|
|
29
|
+
"main": "dist/cjs/index.js",
|
|
30
30
|
"module": "dist/esm/index.js",
|
|
31
31
|
"types": "./dist/types/index.d.ts",
|
|
32
32
|
"exports": {
|
|
33
33
|
".": {
|
|
34
34
|
"types": "./dist/types/index.d.ts",
|
|
35
|
+
"require": "./dist/cjs/index.js",
|
|
35
36
|
"import": "./dist/esm/index.js",
|
|
36
37
|
"default": "./dist/esm/index.js"
|
|
37
38
|
},
|
|
@@ -42,8 +43,9 @@
|
|
|
42
43
|
"clean": "rm -rf dist",
|
|
43
44
|
"build": "yarn run -T turbo run turbo:build",
|
|
44
45
|
"prepack": "yarn run build",
|
|
45
|
-
"turbo:build": "yarn build:esm && yarn build:types",
|
|
46
|
+
"turbo:build": "yarn build:esm && yarn build:cjs && yarn build:types",
|
|
46
47
|
"build:esm": "build-package esm",
|
|
48
|
+
"build:cjs": "build-package cjs",
|
|
47
49
|
"build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
|
|
48
50
|
"lint": "eslint",
|
|
49
51
|
"lint:fix": "eslint --fix",
|
|
@@ -58,8 +60,8 @@
|
|
|
58
60
|
"@eslint/compat": "^2.0.2",
|
|
59
61
|
"@eslint/eslintrc": "^3.3.3",
|
|
60
62
|
"@eslint/js": "^9.39.2",
|
|
61
|
-
"@simplybusiness/build-scripts": "^2.0.
|
|
62
|
-
"@simplybusiness/eslint-config": "^2.0.
|
|
63
|
+
"@simplybusiness/build-scripts": "^2.0.1",
|
|
64
|
+
"@simplybusiness/eslint-config": "^2.0.1",
|
|
63
65
|
"@swc/core": "^1.12.5",
|
|
64
66
|
"@swc/jest": "^0.2.39",
|
|
65
67
|
"@testing-library/dom": "^10.4.1",
|
|
@@ -96,8 +98,8 @@
|
|
|
96
98
|
"react-dom": "^19.2.0"
|
|
97
99
|
},
|
|
98
100
|
"dependencies": {
|
|
99
|
-
"@simplybusiness/icons": "^5.0.
|
|
100
|
-
"@simplybusiness/mobius": "^8.0.
|
|
101
|
+
"@simplybusiness/icons": "^5.0.2",
|
|
102
|
+
"@simplybusiness/mobius": "^8.0.2",
|
|
101
103
|
"classnames": "^2.5.1",
|
|
102
104
|
"date-fns": "^4.1.0",
|
|
103
105
|
"react-day-picker": "^9.13.0"
|
|
@@ -105,6 +107,5 @@
|
|
|
105
107
|
"lint-staged": {
|
|
106
108
|
"*.{js,ts,jsx,tsx}": "eslint --fix"
|
|
107
109
|
},
|
|
108
|
-
"type": "module",
|
|
109
110
|
"module": "dist/esm/index.js"
|
|
110
111
|
}
|