@simplybusiness/mobius-datepicker 6.4.4 → 6.4.6
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 +13 -0
- package/dist/cjs/components/DatePicker/DatePickerModal.js +6 -5
- package/dist/cjs/components/DatePicker/DatePickerModal.js.map +1 -1
- package/dist/cjs/components/DatePicker/utils/dateObjToString.js +2 -1
- package/dist/cjs/components/DatePicker/utils/dateObjToString.js.map +1 -1
- package/dist/cjs/components/DatePicker/utils/timezoneOffset.js +30 -0
- package/dist/cjs/components/DatePicker/utils/timezoneOffset.js.map +1 -0
- package/dist/cjs/components/DatePicker/utils/weekdayAsOneLetter.js +2 -1
- package/dist/cjs/components/DatePicker/utils/weekdayAsOneLetter.js.map +1 -1
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/DatePicker/DatePickerModal.js +6 -5
- package/dist/esm/components/DatePicker/DatePickerModal.js.map +1 -1
- package/dist/esm/components/DatePicker/utils/dateObjToString.js +2 -1
- package/dist/esm/components/DatePicker/utils/dateObjToString.js.map +1 -1
- package/dist/esm/components/DatePicker/utils/timezoneOffset.js +12 -0
- package/dist/esm/components/DatePicker/utils/timezoneOffset.js.map +1 -0
- package/dist/esm/components/DatePicker/utils/weekdayAsOneLetter.js +2 -1
- package/dist/esm/components/DatePicker/utils/weekdayAsOneLetter.js.map +1 -1
- package/dist/types/components/DatePicker/utils/timezoneOffset.d.ts +7 -0
- package/package.json +2 -2
- package/src/components/DatePicker/DatePickerModal.tsx +6 -5
- package/src/components/DatePicker/utils/dateObjToString.ts +3 -1
- package/src/components/DatePicker/utils/timezoneOffset.ts +12 -0
- package/src/components/DatePicker/utils/weekdayAsOneLetter.ts +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,15 +10,16 @@ Object.defineProperty(exports, "default", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
const _jsxruntime = require("react/jsx-runtime");
|
|
13
|
+
const _icons = require("@simplybusiness/icons");
|
|
13
14
|
const _mobius = require("@simplybusiness/mobius");
|
|
14
15
|
const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
|
|
16
|
+
const _datefns = require("date-fns");
|
|
15
17
|
const _react = require("react");
|
|
16
|
-
const _icons = require("@simplybusiness/icons");
|
|
17
18
|
const _reactdaypicker = require("react-day-picker");
|
|
18
|
-
const _datefns = require("date-fns");
|
|
19
19
|
const _useFocusTrap = /*#__PURE__*/ _interop_require_default(require("../../hooks/useFocusTrap/useFocusTrap"));
|
|
20
20
|
const _utils = require("./utils");
|
|
21
21
|
const _getStartWeekday = require("./utils/getStartWeekday");
|
|
22
|
+
const _timezoneOffset = require("./utils/timezoneOffset");
|
|
22
23
|
function _interop_require_default(obj) {
|
|
23
24
|
return obj && obj.__esModule ? obj : {
|
|
24
25
|
default: obj
|
|
@@ -39,9 +40,9 @@ const ChevronComponent = ({ orientation })=>{
|
|
|
39
40
|
const startWeekday = (0, _getStartWeekday.getStartWeekday)((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.language);
|
|
40
41
|
const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
41
42
|
const modalRef = (0, _react.useRef)(null);
|
|
42
|
-
const initialDate = date ? new Date(date) : undefined;
|
|
43
|
-
const minDate = min ? new Date(min) : undefined;
|
|
44
|
-
const maxDate = max ? new Date(max) : undefined;
|
|
43
|
+
const initialDate = date ? (0, _timezoneOffset.toLocal)(new Date(date)) : undefined;
|
|
44
|
+
const minDate = min ? (0, _timezoneOffset.toLocal)(new Date(min)) : undefined;
|
|
45
|
+
const maxDate = max ? (0, _timezoneOffset.toLocal)(new Date(max)) : undefined;
|
|
45
46
|
const hiddenId = `screen-reader-title-${(0, _react.useId)()}`;
|
|
46
47
|
if (isOpen && PARENT_NODE) {
|
|
47
48
|
PARENT_NODE === null || PARENT_NODE === void 0 ? void 0 : PARENT_NODE.setAttribute("aria-hidden", "true");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Icon,\n VisuallyHidden,\n useOnClickOutside,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronLeft, chevronRight } from \"@simplybusiness/icons\";\nimport {\n Icon,\n VisuallyHidden,\n useOnClickOutside,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport { parseISO } from \"date-fns\";\nimport { useId, useRef } from \"react\";\nimport { DayPicker, Matcher } 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\";\n\nconst PARENT_NODE = typeof document !== \"undefined\" && document.body;\n\nexport type DatePickerModalProps = {\n date?: string; // yyyy-mm-dd\n isOpen: boolean;\n top: number;\n onSelected: (date?: string | undefined) => void;\n min?: string;\n max?: string;\n};\n\nconst ChevronComponent = ({\n orientation,\n}: {\n orientation?: \"up\" | \"down\" | \"left\" | \"right\";\n}) => {\n if (orientation === \"left\") {\n return <Icon icon={chevronLeft} />;\n }\n return <Icon icon={chevronRight} />;\n};\n\nconst startWeekday = getStartWeekday(navigator?.language);\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(new Date(date)) : undefined;\n const minDate = min ? toLocal(new Date(min)) : undefined;\n const maxDate = max ? toLocal(new Date(max)) : undefined;\n const hiddenId = `screen-reader-title-${useId()}`;\n\n if (isOpen && PARENT_NODE) {\n PARENT_NODE?.setAttribute(\"aria-hidden\", \"true\");\n }\n\n const handleSelected = (selectedDate?: string | undefined) => {\n if (PARENT_NODE) PARENT_NODE?.removeAttribute(\"aria-hidden\");\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 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 }}\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"],"names":["navigator","PARENT_NODE","document","body","ChevronComponent","orientation","Icon","icon","chevronLeft","chevronRight","startWeekday","getStartWeekday","language","DatePickerModal","date","isOpen","onSelected","top","min","max","modalRef","useRef","initialDate","toLocal","Date","undefined","minDate","maxDate","hiddenId","useId","setAttribute","handleSelected","selectedDate","removeAttribute","handleDayPickerSelect","dateObjToString","useOnClickOutside","current","modalClasses","classNames","FocusTrap","div","ref","className","style","aria-describedby","data-testid","VisuallyHidden","id","DayPicker","mode","startMonth","endMonth","disabled","before","parseISO","after","selected","defaultMonth","onSelect","pagedNavigation","showOutsideDays","weekStartsOn","formatters","formatWeekdayName","weekdayAsOneLetter","components","Chevron","root","months","month","nav","button_previous","button_next","month_caption","caption_label","month_grid","weekdays","weekday","weeks","week","day","day_button","outside","hidden","today","focused"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "dateObjToString", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _datefns = require("date-fns");
|
|
12
|
-
const
|
|
12
|
+
const _timezoneOffset = require("./timezoneOffset");
|
|
13
|
+
const dateObjToString = (date)=>(0, _datefns.format)((0, _timezoneOffset.toLocal)(date), "yyyy-MM-dd");
|
|
13
14
|
|
|
14
15
|
//# sourceMappingURL=dateObjToString.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/DatePicker/utils/dateObjToString.ts"],"sourcesContent":["import { format } from \"date-fns\";\n\nexport const dateObjToString = (date: Date)
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/DatePicker/utils/dateObjToString.ts"],"sourcesContent":["import { format } from \"date-fns\";\nimport { toLocal } from \"./timezoneOffset\";\n\nexport const dateObjToString = (date: Date) =>\n format(toLocal(date), \"yyyy-MM-dd\");\n"],"names":["dateObjToString","date","format","toLocal"],"mappings":";;;;+BAGaA;;;eAAAA;;;yBAHU;gCACC;AAEjB,MAAMA,kBAAkB,CAACC,OAC9BC,IAAAA,eAAM,EAACC,IAAAA,uBAAO,EAACF,OAAO"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Converts a local date-time to UTC
|
|
3
|
+
* @param localDate - Date object in local timezone
|
|
4
|
+
* @returns Date object in UTC
|
|
5
|
+
*/ "use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
function _export(target, all) {
|
|
10
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: all[name]
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
_export(exports, {
|
|
16
|
+
toLocal: function() {
|
|
17
|
+
return toLocal;
|
|
18
|
+
},
|
|
19
|
+
toUTC: function() {
|
|
20
|
+
return toUTC;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
function toUTC(localDate) {
|
|
24
|
+
return new Date(localDate.getTime() - localDate.getTimezoneOffset() * 60000);
|
|
25
|
+
}
|
|
26
|
+
function toLocal(utcDate) {
|
|
27
|
+
return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=timezoneOffset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/DatePicker/utils/timezoneOffset.ts"],"sourcesContent":["/**\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(utcDate: Date): Date {\n return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);\n}\n"],"names":["toLocal","toUTC","localDate","Date","getTime","getTimezoneOffset","utcDate"],"mappings":"AAAA;;;;CAIC;;;;;;;;;;;IAKeA,OAAO;eAAPA;;IAJAC,KAAK;eAALA;;;AAAT,SAASA,MAAMC,SAAe;IACnC,OAAO,IAAIC,KAAKD,UAAUE,OAAO,KAAKF,UAAUG,iBAAiB,KAAK;AACxE;AAEO,SAASL,QAAQM,OAAa;IACnC,OAAO,IAAIH,KAAKG,QAAQF,OAAO,KAAKE,QAAQD,iBAAiB,KAAK;AACpE"}
|
|
@@ -9,9 +9,10 @@ Object.defineProperty(exports, "weekdayAsOneLetter", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _constants = require("../constants");
|
|
12
|
+
const _timezoneOffset = require("./timezoneOffset");
|
|
12
13
|
const weekdayAsOneLetter = (date)=>{
|
|
13
14
|
const locale = navigator.language || _constants.DEFAULT_LOCALE;
|
|
14
|
-
const oneLetter = date.toLocaleString(locale, {
|
|
15
|
+
const oneLetter = (0, _timezoneOffset.toLocal)(date).toLocaleString(locale, {
|
|
15
16
|
weekday: "narrow"
|
|
16
17
|
});
|
|
17
18
|
return oneLetter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/DatePicker/utils/weekdayAsOneLetter.ts"],"sourcesContent":["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"],"names":["weekdayAsOneLetter","date","locale","navigator","language","DEFAULT_LOCALE","oneLetter","toLocaleString","weekday"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/DatePicker/utils/weekdayAsOneLetter.ts"],"sourcesContent":["import { DEFAULT_LOCALE } from \"../constants\";\nimport { toLocal } from \"./timezoneOffset\";\n\nexport const weekdayAsOneLetter = (date: Date) => {\n const locale = navigator.language || DEFAULT_LOCALE;\n const oneLetter = toLocal(date).toLocaleString(locale, {\n weekday: \"narrow\",\n });\n\n return oneLetter;\n};\n"],"names":["weekdayAsOneLetter","date","locale","navigator","language","DEFAULT_LOCALE","oneLetter","toLocal","toLocaleString","weekday"],"mappings":";;;;+BAGaA;;;eAAAA;;;2BAHkB;gCACP;AAEjB,MAAMA,qBAAqB,CAACC;IACjC,MAAMC,SAASC,UAAUC,QAAQ,IAAIC,yBAAc;IACnD,MAAMC,YAAYC,IAAAA,uBAAO,EAACN,MAAMO,cAAc,CAACN,QAAQ;QACrDO,SAAS;IACX;IAEA,OAAOH;AACT"}
|