@simplybusiness/mobius-datepicker 5.0.1 → 6.0.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.
- package/CHANGELOG.md +27 -0
- package/dist/cjs/components/DatePicker/DatePicker.js +4 -4
- package/dist/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/DatePicker/DatePickerModal.js +16 -16
- package/dist/cjs/components/DatePicker/DatePickerModal.js.map +1 -1
- package/dist/cjs/tsconfig.tsbuildinfo +1 -0
- package/dist/esm/components/DatePicker/DatePicker.js +4 -4
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePickerModal.js +16 -16
- package/dist/esm/components/DatePicker/DatePickerModal.js.map +1 -1
- package/package.json +4 -3
- package/src/components/DatePicker/DatePicker.css +181 -0
- package/src/components/DatePicker/DatePicker.mdx +26 -30
- package/src/components/DatePicker/DatePicker.tsx +4 -4
- package/src/components/DatePicker/DatePickerModal.tsx +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 6.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 8525e04: Use BEM for CSS classes
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [4631011]
|
|
12
|
+
- Updated dependencies [61126b3]
|
|
13
|
+
- Updated dependencies [7e166e1]
|
|
14
|
+
- Updated dependencies [93b9c39]
|
|
15
|
+
- Updated dependencies [27ff678]
|
|
16
|
+
- Updated dependencies [8525e04]
|
|
17
|
+
- Updated dependencies [6c2d415]
|
|
18
|
+
- Updated dependencies [5cfd1e7]
|
|
19
|
+
- @simplybusiness/icons@4.14.0
|
|
20
|
+
- @simplybusiness/mobius@5.0.0
|
|
21
|
+
|
|
22
|
+
## 5.0.2
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- 2e7ab01: Colocate CSS files and component source
|
|
27
|
+
- Updated dependencies [2e7ab01]
|
|
28
|
+
- @simplybusiness/mobius@4.16.1
|
|
29
|
+
|
|
3
30
|
## 5.0.1
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
|
@@ -91,11 +91,11 @@ const DatePicker = (props)=>{
|
|
|
91
91
|
validationState,
|
|
92
92
|
isInvalid: isInvalidProp
|
|
93
93
|
});
|
|
94
|
-
const containerClasses = (0, _dedupe.default)("mobius
|
|
94
|
+
const containerClasses = (0, _dedupe.default)("mobius-date-picker__container", {
|
|
95
95
|
"--is-disabled": isDisabled,
|
|
96
96
|
"--is-touch-device": touchDevice
|
|
97
97
|
}, validationClasses);
|
|
98
|
-
const popoverToggleClasses = (0, _dedupe.default)("mobius
|
|
98
|
+
const popoverToggleClasses = (0, _dedupe.default)("mobius-date-picker__field-button", validationClasses);
|
|
99
99
|
const togglePopoverVisibility = ()=>{
|
|
100
100
|
setIsValid(true);
|
|
101
101
|
setIsOpen(!isOpen);
|
|
@@ -153,7 +153,7 @@ const DatePicker = (props)=>{
|
|
|
153
153
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.TextField, {
|
|
154
154
|
ref: inputRef,
|
|
155
155
|
type: "date",
|
|
156
|
-
className: "mobius
|
|
156
|
+
className: "mobius-date-picker",
|
|
157
157
|
// @ts-expect-error event type
|
|
158
158
|
onBlur: handleBlur,
|
|
159
159
|
onChange: handleTextFieldChange,
|
|
@@ -172,7 +172,7 @@ const DatePicker = (props)=>{
|
|
|
172
172
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.TextField, {
|
|
173
173
|
ref: inputRef,
|
|
174
174
|
type: "date",
|
|
175
|
-
className: "mobius
|
|
175
|
+
className: "mobius-date-picker",
|
|
176
176
|
// @ts-expect-error event type
|
|
177
177
|
onBlur: handleBlur,
|
|
178
178
|
onChange: handleTextFieldChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Button,\n TextField,\n TextFieldElementType,\n TextFieldProps,\n VisuallyHidden,\n Validation,\n useValidationClasses,\n Icon,\n} from \"@simplybusiness/mobius\";\nimport { calendarDay } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n ChangeEvent,\n FocusEvent,\n Suspense,\n lazy,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nexport interface GetValidationStateProps {\n validationState?: Validation[\"validationState\"];\n isInvalid?: Validation[\"isInvalid\"];\n}\n\nconst getValidationState = (props: GetValidationStateProps) => {\n const { validationState, isInvalid } = props;\n\n if (isInvalid || validationState === \"invalid\") {\n return true;\n }\n\n if (isInvalid === false || validationState === \"valid\") {\n return false;\n }\n\n return undefined;\n};\n\nexport interface DatePickerProps\n extends 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 validationState,\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({\n validationState,\n isInvalid: isValid === false || isInvalid,\n });\n const errorMessageText = isInvalidProp\n ? // eslint-disable-next-line react/destructuring-assignment\n formatErrorMessageText(textFieldVal, props.min, props.max)\n : errorMessage;\n const touchDevice = isTouchDevice();\n\n const validationClasses = useValidationClasses({\n validationState,\n isInvalid: isInvalidProp,\n });\n\n const containerClasses = classNames(\n \"mobius
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Button,\n TextField,\n TextFieldElementType,\n TextFieldProps,\n VisuallyHidden,\n Validation,\n useValidationClasses,\n Icon,\n} from \"@simplybusiness/mobius\";\nimport { calendarDay } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n ChangeEvent,\n FocusEvent,\n Suspense,\n lazy,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nexport interface GetValidationStateProps {\n validationState?: Validation[\"validationState\"];\n isInvalid?: Validation[\"isInvalid\"];\n}\n\nconst getValidationState = (props: GetValidationStateProps) => {\n const { validationState, isInvalid } = props;\n\n if (isInvalid || validationState === \"invalid\") {\n return true;\n }\n\n if (isInvalid === false || validationState === \"valid\") {\n return false;\n }\n\n return undefined;\n};\n\nexport interface DatePickerProps\n extends 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 validationState,\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({\n validationState,\n isInvalid: isValid === false || isInvalid,\n });\n const errorMessageText = isInvalidProp\n ? // eslint-disable-next-line react/destructuring-assignment\n formatErrorMessageText(textFieldVal, props.min, props.max)\n : errorMessage;\n const touchDevice = isTouchDevice();\n\n const validationClasses = useValidationClasses({\n validationState,\n isInvalid: isInvalidProp,\n });\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 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 validate = () => {\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 };\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\n setIsOpen(false);\n };\n\n // User has interacted with the component and navigated away\n const handleBlur = (event: FocusEvent<TextFieldElementType>) => {\n validate();\n\n // User hasn't entered a date OR\n // entered an invalid date\n if (!textFieldVal) {\n setIsValid(false);\n }\n\n onChange?.(event.target.value);\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]);\n\n if (touchDevice) {\n return (\n <div className={containerClasses}>\n <TextField\n ref={inputRef}\n type=\"date\"\n className=\"mobius-date-picker\"\n // @ts-expect-error event type\n onBlur={handleBlur}\n onChange={handleTextFieldChange}\n value={textFieldVal}\n isDisabled={isDisabled}\n isInvalid={isInvalidProp}\n {...otherProps}\n 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 // @ts-expect-error event type\n onBlur={handleBlur}\n onChange={handleTextFieldChange}\n value={textFieldVal}\n isDisabled={isDisabled}\n isInvalid={isInvalidProp}\n {...otherProps}\n 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 // eslint-disable-next-line react/destructuring-assignment\n min={props.min}\n // eslint-disable-next-line react/destructuring-assignment\n max={props.max}\n />\n </Suspense>\n )}\n </div>\n );\n};\n"],"names":["DatePicker","DatePickerModal","lazy","getValidationState","props","validationState","isInvalid","undefined","onChange","defaultValue","isDisabled","errorMessage","otherProps","containerRef","useRef","top","setTop","useState","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","validateDateFormat","isValid","setIsValid","isInvalidProp","errorMessageText","formatErrorMessageText","min","max","touchDevice","isTouchDevice","validationClasses","useValidationClasses","containerClasses","classNames","popoverToggleClasses","togglePopoverVisibility","handleTextFieldChange","event","target","value","validate","isValidInput","current","checkValidity","onDateSelected","selectedDate","handleBlur","useEffect","getBoundingClientRect","height","div","className","TextField","ref","type","onBlur","suffixOutside","Button","onClick","size","Icon","icon","calendarDay","VisuallyHidden","Suspense","date","onSelected"],"mappings":"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"}
|
|
@@ -58,7 +58,7 @@ const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
|
58
58
|
handleSelected();
|
|
59
59
|
}
|
|
60
60
|
});
|
|
61
|
-
const modalClasses = (0, _dedupe.default)("mobius
|
|
61
|
+
const modalClasses = (0, _dedupe.default)("mobius-date-picker__modal", {
|
|
62
62
|
"--is-open": isOpen
|
|
63
63
|
});
|
|
64
64
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_useFocusTrap.default, {
|
|
@@ -98,21 +98,21 @@ const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
|
98
98
|
Chevron: ChevronComponent
|
|
99
99
|
},
|
|
100
100
|
classNames: {
|
|
101
|
-
root: "mobius
|
|
102
|
-
months: "mobius
|
|
103
|
-
month: "mobius
|
|
104
|
-
nav: "mobius
|
|
105
|
-
button_previous: "mobius
|
|
106
|
-
button_next: "mobius
|
|
107
|
-
month_caption: "mobius
|
|
108
|
-
caption_label: "mobius
|
|
109
|
-
month_grid: "mobius
|
|
110
|
-
weekdays: "mobius
|
|
111
|
-
weekday: "mobius
|
|
112
|
-
weeks: "mobius
|
|
113
|
-
week: "mobius
|
|
114
|
-
day: "mobius
|
|
115
|
-
day_button: "mobius
|
|
101
|
+
root: "mobius-date-picker__root",
|
|
102
|
+
months: "mobius-date-picker__months",
|
|
103
|
+
month: "mobius-date-picker__month",
|
|
104
|
+
nav: "mobius-date-picker__nav",
|
|
105
|
+
button_previous: "mobius-date-picker__nav-button --previous",
|
|
106
|
+
button_next: "mobius-date-picker__nav-button --next",
|
|
107
|
+
month_caption: "mobius-date-picker__caption",
|
|
108
|
+
caption_label: "mobius-date-picker__caption-label",
|
|
109
|
+
month_grid: "mobius-date-picker__month-grid",
|
|
110
|
+
weekdays: "mobius-date-picker__weekdays",
|
|
111
|
+
weekday: "mobius-date-picker__weekday",
|
|
112
|
+
weeks: "mobius-date-picker__weeks",
|
|
113
|
+
week: "mobius-date-picker__week",
|
|
114
|
+
day: "mobius-date-picker__day",
|
|
115
|
+
day_button: "mobius-date-picker__day-button",
|
|
116
116
|
selected: "--is-selected",
|
|
117
117
|
disabled: "--is-disabled",
|
|
118
118
|
outside: "--is-outside",
|
|
@@ -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 { useId, useRef } from \"react\";\nimport { chevronLeft, chevronRight } from \"@simplybusiness/icons\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\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 ? new Date(date) : undefined;\n const minDate = min ? new Date(min) : undefined;\n const maxDate = max ? 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
|
|
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 { useId, useRef } from \"react\";\nimport { chevronLeft, chevronRight } from \"@simplybusiness/icons\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\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 ? new Date(date) : undefined;\n const minDate = min ? new Date(min) : undefined;\n const maxDate = max ? 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 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","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","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","disabled","outside","hidden","today","focused"],"mappings":"AAAA;;;;;+BAqIA;;;eAAA;;;;wBA/HO;+DACgB;uBACO;uBACY;gCAChB;qEACJ;uBAC8B;iCACpB;;;;;;IAwBKA;AAtBrC,MAAMC,cAAc,OAAOC,aAAa,eAAeA,SAASC,IAAI;AAWpE,MAAMC,mBAAmB,CAAC,EACxBC,WAAW,EAGZ;IACC,IAAIA,gBAAgB,QAAQ;QAC1B,qBAAO,qBAACC,YAAI;YAACC,MAAMC,kBAAW;;IAChC;IACA,qBAAO,qBAACF,YAAI;QAACC,MAAME,mBAAY;;AACjC;AAEA,MAAMC,eAAeC,IAAAA,gCAAe,GAACX,aAAAA,uBAAAA,iCAAAA,WAAWY,QAAQ;AAExD,MAAMC,kBAAkB,CAAC,EACvBC,IAAI,EACJC,MAAM,EACNC,UAAU,EACVC,GAAG,EACHC,GAAG,EACHC,GAAG,EACkB;IACrB,MAAMC,WAAWC,IAAAA,aAAM,EAAiB;IACxC,MAAMC,cAAcR,OAAO,IAAIS,KAAKT,QAAQU;IAC5C,MAAMC,UAAUP,MAAM,IAAIK,KAAKL,OAAOM;IACtC,MAAME,UAAUP,MAAM,IAAII,KAAKJ,OAAOK;IACtC,MAAMG,WAAW,CAAC,oBAAoB,EAAEC,IAAAA,YAAK,IAAG,CAAC;IAEjD,IAAIb,UAAUd,aAAa;QACzBA,wBAAAA,kCAAAA,YAAa4B,YAAY,CAAC,eAAe;IAC3C;IAEA,MAAMC,iBAAiB,CAACC;QACtB,IAAI9B,aAAaA,wBAAAA,kCAAAA,YAAa+B,eAAe,CAAC;QAC9ChB,WAAWe;IACb;IAEA,MAAME,wBAAwB,CAACF;QAC7B,IAAI,CAACA,cAAc;QAEnBD,eAAeI,IAAAA,sBAAe,EAACH;IACjC;IAEAI,IAAAA,yBAAiB,EAACf,UAAU;QAC1B,IAAIA,SAASgB,OAAO,IAAIrB,QAAQ;YAC9Be;QACF;IACF;IAEA,MAAMO,eAAeC,IAAAA,eAAU,EAAC,6BAA6B;QAC3D,aAAavB;IACf;IAEA,qBACE,qBAACwB,qBAAS;kBACR,cAAA,sBAACC;YACCC,KAAKrB;YACLsB,WAAWL;YACXM,OAAO;gBAAE1B;YAAI;YACb2B,oBAAkBjB;YAClBkB,eAAY;;8BAEZ,qBAACC,sBAAc;8BACb,cAAA,qBAACN;wBAAIO,IAAIpB;kCAAU;;;8BAErB,qBAACqB,yBAAS;oBACRC,MAAK;oBACJ,GAAIxB,WAAW;wBAAEyB,YAAYzB;oBAAQ,CAAC;oBACtC,GAAIC,WAAW;wBAAEyB,UAAUzB;oBAAQ,CAAC;oBACrC0B,UAAU9B;oBACV+B,cAAc/B;oBACdgC,UAAUrB;oBACVsB,eAAe;oBACfC,eAAe;oBACfC,cAAc/C;oBACdgD,YAAY;wBAAEC,mBAAmBC,yBAAkB;oBAAC;oBACpDC,YAAY;wBACVC,SAAS1D;oBACX;oBACAkC,YAAY;wBACVyB,MAAM;wBACNC,QAAQ;wBACRC,OAAO;wBACPC,KAAK;wBACLC,iBAAiB;wBACjBC,aAAa;wBACbC,eAAe;wBACfC,eAAe;wBACfC,YAAY;wBACZC,UAAU;wBACVC,SAAS;wBACTC,OAAO;wBACPC,MAAM;wBACNC,KAAK;wBACLC,YAAY;wBACZzB,UAAU;wBACV0B,UAAU;wBACVC,SAAS;wBACTC,QAAQ;wBACRC,OAAO;wBACPC,SAAS;oBACX;;;;;AAKV;MAEA,WAAerE"}
|