@simplybusiness/mobius-datepicker 9.0.9 → 9.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/components/DatePicker/CustomComponents/CaptionLabel.js +30 -0
  3. package/dist/cjs/components/DatePicker/CustomComponents/CaptionLabel.js.map +7 -0
  4. package/dist/cjs/components/DatePicker/CustomComponents/ChevronComponent.js +35 -0
  5. package/dist/cjs/components/DatePicker/CustomComponents/ChevronComponent.js.map +7 -0
  6. package/dist/cjs/components/DatePicker/CustomComponents/index.js +44 -0
  7. package/dist/cjs/components/DatePicker/CustomComponents/index.js.map +7 -0
  8. package/dist/cjs/components/DatePicker/DatePicker.js +547 -0
  9. package/dist/cjs/components/DatePicker/DatePicker.js.map +7 -0
  10. package/dist/cjs/components/DatePicker/DatePickerIcon.js +28 -0
  11. package/dist/cjs/components/DatePicker/DatePickerIcon.js.map +7 -0
  12. package/dist/{esm/DatePickerModal-RVUBO5DW.js → cjs/components/DatePicker/DatePickerModal.js} +63 -33
  13. package/dist/{esm/DatePickerModal-RVUBO5DW.js.map → cjs/components/DatePicker/DatePickerModal.js.map} +3 -3
  14. package/dist/cjs/components/DatePicker/constants.js +31 -0
  15. package/dist/cjs/components/DatePicker/constants.js.map +7 -0
  16. package/dist/cjs/components/DatePicker/index.js +548 -0
  17. package/dist/cjs/components/DatePicker/index.js.map +7 -0
  18. package/dist/cjs/components/DatePicker/utils/dateObjToString.js +32 -0
  19. package/dist/cjs/components/DatePicker/utils/dateObjToString.js.map +7 -0
  20. package/dist/cjs/components/DatePicker/utils/formatErrorMessageText.js +45 -0
  21. package/dist/cjs/components/DatePicker/utils/formatErrorMessageText.js.map +7 -0
  22. package/dist/cjs/components/DatePicker/utils/getStartWeekday.js +41 -0
  23. package/dist/cjs/components/DatePicker/utils/getStartWeekday.js.map +7 -0
  24. package/dist/cjs/components/DatePicker/utils/index.js +86 -0
  25. package/dist/cjs/components/DatePicker/utils/index.js.map +7 -0
  26. package/dist/cjs/components/DatePicker/utils/timezoneOffset.js +37 -0
  27. package/dist/cjs/components/DatePicker/utils/timezoneOffset.js.map +7 -0
  28. package/dist/cjs/components/DatePicker/utils/validateDateFormat.js +40 -0
  29. package/dist/cjs/components/DatePicker/utils/validateDateFormat.js.map +7 -0
  30. package/dist/cjs/components/DatePicker/utils/weekdayAsOneLetter.js +38 -0
  31. package/dist/cjs/components/DatePicker/utils/weekdayAsOneLetter.js.map +7 -0
  32. package/dist/cjs/hooks/index.js +19 -0
  33. package/dist/cjs/hooks/index.js.map +7 -0
  34. package/dist/cjs/hooks/useFocusTrap/index.js +19 -0
  35. package/dist/cjs/hooks/useFocusTrap/index.js.map +7 -0
  36. package/dist/cjs/hooks/useFocusTrap/useFocusTrap.js +65 -0
  37. package/dist/cjs/hooks/useFocusTrap/useFocusTrap.js.map +7 -0
  38. package/dist/cjs/index.js +4 -3
  39. package/dist/cjs/index.js.map +2 -2
  40. package/dist/cjs/meta.json +993 -5
  41. package/dist/cjs/utils/StoryContainer.js +46 -0
  42. package/dist/cjs/utils/StoryContainer.js.map +7 -0
  43. package/dist/cjs/utils/excludeControls.js +30 -0
  44. package/dist/cjs/utils/excludeControls.js.map +7 -0
  45. package/dist/cjs/utils/index.js +41 -0
  46. package/dist/cjs/utils/index.js.map +7 -0
  47. package/dist/cjs/utils/isTouchDevice.js +32 -0
  48. package/dist/cjs/utils/isTouchDevice.js.map +7 -0
  49. package/dist/cjs/utils/mockMatchMedia.js +50 -0
  50. package/dist/cjs/utils/mockMatchMedia.js.map +7 -0
  51. package/dist/esm/chunk-24MISPYQ.js +1 -0
  52. package/dist/esm/chunk-24MISPYQ.js.map +7 -0
  53. package/dist/esm/chunk-4UUTCJ7P.js +11 -0
  54. package/dist/esm/chunk-4UUTCJ7P.js.map +7 -0
  55. package/dist/esm/chunk-52KEWVWB.js +12 -0
  56. package/dist/esm/chunk-52KEWVWB.js.map +7 -0
  57. package/dist/esm/chunk-5CHWCZUP.js +1 -0
  58. package/dist/esm/chunk-5CHWCZUP.js.map +7 -0
  59. package/dist/esm/chunk-6TTD4G74.js +20 -0
  60. package/dist/esm/chunk-6TTD4G74.js.map +7 -0
  61. package/dist/esm/chunk-A62CZFEQ.js +17 -0
  62. package/dist/esm/chunk-A62CZFEQ.js.map +7 -0
  63. package/dist/esm/chunk-AOSXRXGA.js +20 -0
  64. package/dist/esm/chunk-AOSXRXGA.js.map +7 -0
  65. package/dist/esm/chunk-CH3KSJSE.js +12 -0
  66. package/dist/esm/chunk-CH3KSJSE.js.map +7 -0
  67. package/dist/esm/chunk-E5XSED6Z.js +1 -0
  68. package/dist/esm/chunk-E5XSED6Z.js.map +7 -0
  69. package/dist/esm/chunk-GKDMKCFX.js +15 -0
  70. package/dist/esm/chunk-GKDMKCFX.js.map +7 -0
  71. package/dist/esm/chunk-IDU2FHOY.js +10 -0
  72. package/dist/esm/chunk-IDU2FHOY.js.map +7 -0
  73. package/dist/esm/chunk-IVRD2PA6.js +17 -0
  74. package/dist/esm/chunk-IVRD2PA6.js.map +7 -0
  75. package/dist/esm/chunk-KW6EFBPT.js +10 -0
  76. package/dist/esm/chunk-KW6EFBPT.js.map +7 -0
  77. package/dist/esm/chunk-LR7ML4HC.js +45 -0
  78. package/dist/esm/chunk-LR7ML4HC.js.map +7 -0
  79. package/dist/esm/chunk-TAURHEHL.js +193 -0
  80. package/dist/esm/chunk-TAURHEHL.js.map +7 -0
  81. package/dist/esm/chunk-UJQXNOUG.js +25 -0
  82. package/dist/esm/chunk-UJQXNOUG.js.map +7 -0
  83. package/dist/esm/chunk-UNC7C5OV.js +1 -0
  84. package/dist/esm/chunk-UNC7C5OV.js.map +7 -0
  85. package/dist/esm/components/DatePicker/CustomComponents/CaptionLabel.js +7 -0
  86. package/dist/esm/components/DatePicker/CustomComponents/CaptionLabel.js.map +7 -0
  87. package/dist/esm/components/DatePicker/CustomComponents/ChevronComponent.js +7 -0
  88. package/dist/esm/components/DatePicker/CustomComponents/ChevronComponent.js.map +7 -0
  89. package/dist/esm/components/DatePicker/CustomComponents/index.js +12 -0
  90. package/dist/esm/components/DatePicker/CustomComponents/index.js.map +7 -0
  91. package/dist/esm/components/DatePicker/DatePicker.js +15 -0
  92. package/dist/esm/components/DatePicker/DatePicker.js.map +7 -0
  93. package/dist/esm/components/DatePicker/DatePickerIcon.js +7 -0
  94. package/dist/esm/components/DatePicker/DatePickerIcon.js.map +7 -0
  95. package/dist/esm/components/DatePicker/DatePickerModal.js +134 -0
  96. package/dist/esm/components/DatePicker/DatePickerModal.js.map +7 -0
  97. package/dist/esm/components/DatePicker/constants.js +11 -0
  98. package/dist/esm/components/DatePicker/constants.js.map +7 -0
  99. package/dist/esm/components/DatePicker/index.js +15 -0
  100. package/dist/esm/components/DatePicker/index.js.map +7 -0
  101. package/dist/esm/components/DatePicker/utils/dateObjToString.js +7 -0
  102. package/dist/esm/components/DatePicker/utils/dateObjToString.js.map +7 -0
  103. package/dist/esm/components/DatePicker/utils/formatErrorMessageText.js +13 -0
  104. package/dist/esm/components/DatePicker/utils/formatErrorMessageText.js.map +7 -0
  105. package/dist/esm/components/DatePicker/utils/getStartWeekday.js +8 -0
  106. package/dist/esm/components/DatePicker/utils/getStartWeekday.js.map +7 -0
  107. package/dist/esm/components/DatePicker/utils/index.js +29 -0
  108. package/dist/esm/components/DatePicker/utils/index.js.map +7 -0
  109. package/dist/esm/components/DatePicker/utils/timezoneOffset.js +9 -0
  110. package/dist/esm/components/DatePicker/utils/timezoneOffset.js.map +7 -0
  111. package/dist/esm/components/DatePicker/utils/validateDateFormat.js +9 -0
  112. package/dist/esm/components/DatePicker/utils/validateDateFormat.js.map +7 -0
  113. package/dist/esm/components/DatePicker/utils/weekdayAsOneLetter.js +8 -0
  114. package/dist/esm/components/DatePicker/utils/weekdayAsOneLetter.js.map +7 -0
  115. package/dist/esm/hooks/index.js +3 -0
  116. package/dist/esm/hooks/index.js.map +7 -0
  117. package/dist/esm/hooks/useFocusTrap/index.js +3 -0
  118. package/dist/esm/hooks/useFocusTrap/index.js.map +7 -0
  119. package/dist/esm/hooks/useFocusTrap/useFocusTrap.js +7 -0
  120. package/dist/esm/hooks/useFocusTrap/useFocusTrap.js.map +7 -0
  121. package/dist/esm/index.js +10 -219
  122. package/dist/esm/index.js.map +3 -3
  123. package/dist/esm/meta.json +1146 -102
  124. package/dist/esm/utils/StoryContainer.js +25 -0
  125. package/dist/esm/utils/StoryContainer.js.map +7 -0
  126. package/dist/esm/utils/excludeControls.js +7 -0
  127. package/dist/esm/utils/excludeControls.js.map +7 -0
  128. package/dist/esm/utils/index.js +11 -0
  129. package/dist/esm/utils/index.js.map +7 -0
  130. package/dist/esm/utils/isTouchDevice.js +7 -0
  131. package/dist/esm/utils/isTouchDevice.js.map +7 -0
  132. package/dist/esm/utils/mockMatchMedia.js +29 -0
  133. package/dist/esm/utils/mockMatchMedia.js.map +7 -0
  134. package/dist/tsconfig.build.tsbuildinfo +1 -1
  135. package/dist/types/components/DatePicker/DatePicker.d.ts +1 -0
  136. package/package.json +4 -3
  137. package/src/components/DatePicker/DatePicker.tsx +1 -0
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ import {
2
+ toLocal,
3
+ toUTC
4
+ } from "../../../chunk-IVRD2PA6.js";
5
+ export {
6
+ toLocal,
7
+ toUTC
8
+ };
9
+ //# sourceMappingURL=timezoneOffset.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ import {
2
+ DATE_FORMAT,
3
+ validateDateFormat
4
+ } from "../../../chunk-AOSXRXGA.js";
5
+ export {
6
+ DATE_FORMAT,
7
+ validateDateFormat
8
+ };
9
+ //# sourceMappingURL=validateDateFormat.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,8 @@
1
+ import {
2
+ weekdayAsOneLetter
3
+ } from "../../../chunk-A62CZFEQ.js";
4
+ import "../../../chunk-4UUTCJ7P.js";
5
+ export {
6
+ weekdayAsOneLetter
7
+ };
8
+ //# sourceMappingURL=weekdayAsOneLetter.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,3 @@
1
+ import "../chunk-UNC7C5OV.js";
2
+ import "../chunk-LR7ML4HC.js";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,3 @@
1
+ import "../../chunk-UNC7C5OV.js";
2
+ import "../../chunk-LR7ML4HC.js";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ import {
2
+ FocusTrap
3
+ } from "../../chunk-LR7ML4HC.js";
4
+ export {
5
+ FocusTrap as default
6
+ };
7
+ //# sourceMappingURL=useFocusTrap.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
package/dist/esm/index.js CHANGED
@@ -1,223 +1,14 @@
1
- // src/components/DatePicker/DatePicker.tsx
2
- import { calendarDay } from "@simplybusiness/icons";
1
+ import "./chunk-5CHWCZUP.js";
3
2
  import {
4
- Button,
5
- Icon,
6
- TextField,
7
- VisuallyHidden,
8
- useValidationClasses
9
- } from "@simplybusiness/mobius";
10
- import classNames from "classnames/dedupe";
11
- import {
12
- Suspense,
13
- lazy,
14
- useCallback,
15
- useEffect,
16
- useRef,
17
- useState
18
- } from "react";
19
-
20
- // src/utils/isTouchDevice.ts
21
- var isTouchDevice = () => {
22
- if (typeof window !== "undefined") {
23
- return window.matchMedia("(hover: none), (pointer: coarse)").matches;
24
- }
25
- return void 0;
26
- };
27
-
28
- // src/components/DatePicker/utils/formatErrorMessageText.ts
29
- import { isAfter, isBefore } from "date-fns";
30
- var DEFAULT_INVALID_DATE_MESSAGE = "Please enter a valid date";
31
- var DEFAULT_BEFORE_MIN = "The date you selected is before the earliest allowed date";
32
- var DEFAULT_AFTER_MAX = "The date you selected is after the latest allowed date";
33
- var formatErrorMessageText = (actual, min, max) => {
34
- const actualDate = new Date(actual);
35
- const minDate = min && new Date(min);
36
- const maxDate = max && new Date(max);
37
- if (minDate && isBefore(actualDate, minDate)) {
38
- return DEFAULT_BEFORE_MIN;
39
- }
40
- if (maxDate && isAfter(actualDate, maxDate)) {
41
- return DEFAULT_AFTER_MAX;
42
- }
43
- return DEFAULT_INVALID_DATE_MESSAGE;
44
- };
45
-
46
- // src/components/DatePicker/utils/validateDateFormat.ts
47
- import { isMatch } from "date-fns";
48
- var DATE_FORMAT = "yyyy-MM-dd";
49
- var validateDateFormat = (date) => {
50
- if (date === "") {
51
- return "";
52
- }
53
- if (isMatch(date, DATE_FORMAT)) {
54
- return date;
55
- }
56
- throw Error(
57
- `DatePicker defaultValue '${date}' is invalid. The expected format is '${DATE_FORMAT}' `
58
- );
59
- };
60
-
61
- // src/components/DatePicker/DatePicker.tsx
62
- import { jsx, jsxs } from "react/jsx-runtime";
63
- var DatePickerModal = lazy(() => import("./DatePickerModal-RVUBO5DW.js"));
64
- var getValidationState = (isInvalid) => {
65
- if (isInvalid) {
66
- return true;
67
- }
68
- if (isInvalid === false) {
69
- return false;
70
- }
71
- return void 0;
72
- };
73
- var DatePicker = (props) => {
74
- const {
75
- onChange,
76
- defaultValue = "",
77
- isDisabled,
78
- isInvalid,
79
- errorMessage = "",
80
- ...otherProps
81
- } = props;
82
- const containerRef = useRef(null);
83
- const [top, setTop] = useState(0);
84
- const inputRef = useRef(null);
85
- const [isOpen, setIsOpen] = useState(false);
86
- const [textFieldVal, setTextFieldVal] = useState(
87
- validateDateFormat(defaultValue)
88
- );
89
- const [isValid, setIsValid] = useState(void 0);
90
- const isInvalidProp = getValidationState(isValid === false || isInvalid);
91
- const errorMessageText = isInvalidProp ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
92
- const touchDevice = isTouchDevice();
93
- const validationClasses = useValidationClasses({ isInvalid: isInvalidProp });
94
- const containerClasses = classNames(
95
- "mobius-date-picker__container",
96
- {
97
- "--is-disabled": isDisabled,
98
- "--is-touch-device": touchDevice
99
- },
100
- validationClasses
101
- );
102
- const popoverToggleClasses = classNames(
103
- "mobius-date-picker__field-button",
104
- validationClasses
105
- );
106
- const validate = useCallback(() => {
107
- if (isOpen) return;
108
- const isValidInput = inputRef.current?.checkValidity();
109
- if (!isValidInput) {
110
- setIsValid(false);
111
- }
112
- }, [isOpen]);
113
- useEffect(() => {
114
- if (!inputRef.current) return;
115
- const validatedValue = validateDateFormat(defaultValue);
116
- setTextFieldVal(validatedValue);
117
- inputRef.current.value = validatedValue;
118
- setIsValid(true);
119
- validate();
120
- }, [defaultValue, validate]);
121
- const togglePopoverVisibility = () => {
122
- setIsValid(true);
123
- setIsOpen(!isOpen);
124
- };
125
- const handleTextFieldChange = (event) => {
126
- setTextFieldVal(event.target.value);
127
- setIsValid(true);
128
- };
129
- const onDateSelected = (selectedDate) => {
130
- if (selectedDate) {
131
- setTextFieldVal(selectedDate);
132
- setIsValid(true);
133
- onChange?.(selectedDate);
134
- }
135
- inputRef.current?.focus();
136
- setIsOpen(false);
137
- };
138
- const handleBlur = (event) => {
139
- const target = event.target;
140
- if (isOpen && event.relatedTarget && containerRef.current?.contains(event.relatedTarget)) {
141
- return;
142
- }
143
- validate();
144
- if (!textFieldVal) {
145
- setIsValid(false);
146
- }
147
- onChange?.(target.value);
148
- };
149
- const handleClick = (event) => {
150
- event.preventDefault();
151
- togglePopoverVisibility();
152
- };
153
- useEffect(() => {
154
- if (isOpen) {
155
- setTop(containerRef.current?.getBoundingClientRect().height || 0);
156
- setIsValid(true);
157
- return;
158
- }
159
- validate();
160
- }, [isOpen, validate]);
161
- if (touchDevice) {
162
- return /* @__PURE__ */ jsx("div", { className: containerClasses, children: /* @__PURE__ */ jsx(
163
- TextField,
164
- {
165
- ref: inputRef,
166
- type: "date",
167
- className: "mobius-date-picker",
168
- onBlur: handleBlur,
169
- onChange: handleTextFieldChange,
170
- value: textFieldVal,
171
- isDisabled,
172
- isInvalid: isInvalidProp,
173
- ...otherProps,
174
- errorMessage: errorMessage || errorMessageText
175
- }
176
- ) });
177
- }
178
- return /* @__PURE__ */ jsxs("div", { className: containerClasses, ref: containerRef, children: [
179
- /* @__PURE__ */ jsx(
180
- TextField,
181
- {
182
- ref: inputRef,
183
- type: "date",
184
- className: "mobius-date-picker",
185
- onBlur: handleBlur,
186
- onChange: handleTextFieldChange,
187
- onClick: handleClick,
188
- value: textFieldVal,
189
- isDisabled,
190
- isInvalid: isInvalidProp,
191
- ...otherProps,
192
- errorMessage: errorMessage || errorMessageText,
193
- suffixOutside: /* @__PURE__ */ jsxs(
194
- Button,
195
- {
196
- className: popoverToggleClasses,
197
- onClick: togglePopoverVisibility,
198
- isDisabled,
199
- size: "sm",
200
- children: [
201
- /* @__PURE__ */ jsx(Icon, { size: "sm", icon: calendarDay }),
202
- /* @__PURE__ */ jsx(VisuallyHidden, { children: "Pick date" })
203
- ]
204
- }
205
- )
206
- }
207
- ),
208
- isOpen && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
209
- DatePickerModal,
210
- {
211
- date: textFieldVal,
212
- isOpen,
213
- top,
214
- onSelected: onDateSelected,
215
- min: props.min,
216
- max: props.max
217
- }
218
- ) })
219
- ] });
220
- };
3
+ DatePicker
4
+ } from "./chunk-TAURHEHL.js";
5
+ import "./chunk-E5XSED6Z.js";
6
+ import "./chunk-AOSXRXGA.js";
7
+ import "./chunk-A62CZFEQ.js";
8
+ import "./chunk-4UUTCJ7P.js";
9
+ import "./chunk-CH3KSJSE.js";
10
+ import "./chunk-UJQXNOUG.js";
11
+ import "./chunk-52KEWVWB.js";
221
12
  export {
222
13
  DatePicker
223
14
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/components/DatePicker/DatePicker.tsx", "../../src/utils/isTouchDevice.ts", "../../src/components/DatePicker/utils/formatErrorMessageText.ts", "../../src/components/DatePicker/utils/validateDateFormat.ts"],
4
- "sourcesContent": ["\"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", "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"],
5
- "mappings": "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",
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
6
  "names": []
7
7
  }