@elliemae/ds-form-date-time-picker 3.30.0-rc.1 → 3.30.0-rc.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/dist/cjs/config/useFocusTracker.js +30 -8
- package/dist/cjs/config/useFocusTracker.js.map +2 -2
- package/dist/cjs/parts/ControlledDateTimePickerContent.js +2 -2
- package/dist/cjs/parts/ControlledDateTimePickerContent.js.map +1 -1
- package/dist/esm/config/useFocusTracker.js +30 -8
- package/dist/esm/config/useFocusTracker.js.map +2 -2
- package/dist/esm/parts/ControlledDateTimePickerContent.js +2 -2
- package/dist/esm/parts/ControlledDateTimePickerContent.js.map +1 -1
- package/dist/types/ControlledDateTimePicker.d.ts +0 -1
- package/dist/types/config/useFocusTracker.d.ts +1 -0
- package/dist/types/parts/ClearButton/ClearButton.d.ts +0 -1
- package/dist/types/parts/ControlledDateTimePickerContent.d.ts +0 -1
- package/dist/types/parts/DateInputs/DateInputs.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/Calendar.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/CalendarContent.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/CalendarHead.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/CalendarIconTrigger.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/CalendarMonthDays.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/CalendarWrapper.d.ts +0 -1
- package/dist/types/parts/Pickers/Calendar/Day.d.ts +0 -1
- package/dist/types/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.d.ts +0 -1
- package/dist/types/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.d.ts +0 -1
- package/dist/types/parts/Pickers/PickersIcons.d.ts +0 -1
- package/dist/types/parts/Pickers/TimeWheel/HoursList.d.ts +0 -1
- package/dist/types/parts/Pickers/TimeWheel/MeridiemList.d.ts +0 -1
- package/dist/types/parts/Pickers/TimeWheel/MinutesList.d.ts +0 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheel.d.ts +0 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheelIconTrigger.d.ts +0 -1
- package/dist/types/parts/TimeInputs/TimeInputs.d.ts +0 -1
- package/package.json +10 -10
|
@@ -81,18 +81,31 @@ const useFocusTracker = ({ DOMRefs, flags }) => {
|
|
|
81
81
|
if (lastSegment !== currFocusDescriber)
|
|
82
82
|
setCurrFocusDescriber(lastSegment);
|
|
83
83
|
}, [currFocusDescriber, lastSegment, latestInteractionRegion]);
|
|
84
|
+
const trackFocusResetter = (0, import_react.useCallback)(() => {
|
|
85
|
+
if (latestInteractionRegion !== "")
|
|
86
|
+
setLatestInteractionRegion("");
|
|
87
|
+
if (currFocusDescriber !== "")
|
|
88
|
+
setCurrFocusDescriber("");
|
|
89
|
+
}, [currFocusDescriber, latestInteractionRegion]);
|
|
90
|
+
const handleComponentBlurs = (0, import_react.useCallback)(() => {
|
|
91
|
+
let shouldShortCircuit = false;
|
|
92
|
+
if (latestInteractionRegion === "calendar-days" && currFocusDescriber === "calendar-metafocused-day")
|
|
93
|
+
shouldShortCircuit = true;
|
|
94
|
+
if (latestInteractionRegion === "calendar-head" && currFocusDescriber === "calendar-prev-month")
|
|
95
|
+
shouldShortCircuit = true;
|
|
96
|
+
if (latestInteractionRegion === "timewheel" && currFocusDescriber === "timewheel-curr-hour")
|
|
97
|
+
shouldShortCircuit = true;
|
|
98
|
+
if (shouldShortCircuit)
|
|
99
|
+
return;
|
|
100
|
+
trackFocusResetter();
|
|
101
|
+
}, [currFocusDescriber, latestInteractionRegion, trackFocusResetter]);
|
|
84
102
|
return (0, import_react.useMemo)(
|
|
85
103
|
() => ({
|
|
86
104
|
latestInteractionRegion,
|
|
87
105
|
setLatestInteractionRegion,
|
|
88
106
|
currFocusDescriber,
|
|
89
107
|
setCurrFocusDescriber,
|
|
90
|
-
trackFocusResetter
|
|
91
|
-
if (latestInteractionRegion !== "")
|
|
92
|
-
setLatestInteractionRegion("");
|
|
93
|
-
if (currFocusDescriber !== "")
|
|
94
|
-
setCurrFocusDescriber("");
|
|
95
|
-
},
|
|
108
|
+
trackFocusResetter,
|
|
96
109
|
trackFocusMonthInput: () => {
|
|
97
110
|
if (latestInteractionRegion !== "date-inputs")
|
|
98
111
|
setLatestInteractionRegion("date-inputs");
|
|
@@ -203,9 +216,18 @@ const useFocusTracker = ({ DOMRefs, flags }) => {
|
|
|
203
216
|
},
|
|
204
217
|
trackFocusPicker,
|
|
205
218
|
trackFocusFirstSegment,
|
|
206
|
-
trackFocusLastSegment
|
|
219
|
+
trackFocusLastSegment,
|
|
220
|
+
handleComponentBlurs
|
|
207
221
|
}),
|
|
208
|
-
[
|
|
222
|
+
[
|
|
223
|
+
latestInteractionRegion,
|
|
224
|
+
currFocusDescriber,
|
|
225
|
+
trackFocusResetter,
|
|
226
|
+
trackFocusPicker,
|
|
227
|
+
trackFocusFirstSegment,
|
|
228
|
+
trackFocusLastSegment,
|
|
229
|
+
handleComponentBlurs
|
|
230
|
+
]
|
|
209
231
|
);
|
|
210
232
|
};
|
|
211
233
|
//# sourceMappingURL=useFocusTracker.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useFocusTracker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n | 'calendar-days'\n | 'calendar-head'\n | 'timewheel'\n | 'date-inputs'\n | 'time-inputs'\n | 'clear-btn'\n | 'picker-icon'\n | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter: () => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n },\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n }),\n [currFocusDescriber, latestInteractionRegion, trackFocusPicker, trackFocusFirstSegment, trackFocusLastSegment],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n | 'calendar-days'\n | 'calendar-head'\n | 'timewheel'\n | 'date-inputs'\n | 'time-inputs'\n | 'clear-btn'\n | 'picker-icon'\n | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the first segment can be:\n - month-input (when date inputs are present)\n - hour-input (when ONLY time inputs are present)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the last segment can be:\n - year-input (when ONLY date inputs are present)\n - meridiem-input (when time inputs are present)\n - clear-btn (when clearable is true and there is no picker)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n const trackFocusResetter = useCallback(() => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n }, [currFocusDescriber, latestInteractionRegion]);\n\n const handleComponentBlurs = useCallback(() => {\n /* our code base is trying to avoid side-effects and we also try to be imperative\n due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n we need to distinguish between\n - a blur that is caused by a portal opening\n vs\n - a blur that is caused by a user moving focus to another element\n we can do this by checking the currFocusDescriber and latestInteractionRegion\n we know that blur is triggered by portal opening when:\n - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n (this is the case when we open any timewheel ONLY)\n */\n let shouldShortCircuit = false;\n // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n shouldShortCircuit = true;\n // empty date value AND no onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n shouldShortCircuit = true;\n\n // only time wheel is present in the contextual region\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n shouldShortCircuit = true;\n\n if (shouldShortCircuit) return;\n trackFocusResetter();\n }, [currFocusDescriber, latestInteractionRegion, trackFocusResetter]);\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter,\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n }),\n [\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusResetter,\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,7 +56,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
56
56
|
globalAttrs,
|
|
57
57
|
xstyledAttrs,
|
|
58
58
|
onGlobalKeyDown,
|
|
59
|
-
|
|
59
|
+
handleComponentBlurs
|
|
60
60
|
} = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
61
61
|
const styledsAttrs = {
|
|
62
62
|
justPicker: hideDate && hideTime,
|
|
@@ -84,7 +84,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
84
84
|
pr: !withAnyRightController ? "2px" : "0px",
|
|
85
85
|
onKeyDown: onGlobalKeyDown,
|
|
86
86
|
disabled,
|
|
87
|
-
onBlur:
|
|
87
|
+
onBlur: handleComponentBlurs,
|
|
88
88
|
"data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTAINER,
|
|
89
89
|
getOwnerProps: getProps,
|
|
90
90
|
...styledsAttrs,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ControlledDateTimePickerContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid.js';\nimport { omit } from 'lodash';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n getProps,\n hideDate,\n hideTime,\n withAnyPicker,\n withAnyRightController,\n shouldPreserveClearableSpace,\n isControllerOnly,\n globalAttrs,\n xstyledAttrs,\n onGlobalKeyDown,\n
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid.js';\nimport { omit } from 'lodash';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n getProps,\n hideDate,\n hideTime,\n withAnyPicker,\n withAnyRightController,\n shouldPreserveClearableSpace,\n isControllerOnly,\n globalAttrs,\n xstyledAttrs,\n onGlobalKeyDown,\n handleComponentBlurs,\n } = useContext(ControlledDateTimePickerContext);\n\n const styledsAttrs = {\n justPicker: hideDate && hideTime,\n withAnyPicker,\n hasError,\n isControllerOnly,\n };\n\n const mainCols = [];\n if (!hideDate) mainCols.push('auto');\n if (!hideTime) mainCols.push('auto');\n if (withAnyRightController) mainCols.push('auto');\n\n const rightControlCols = [];\n if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n if (withAnyPicker) rightControlCols.push('auto');\n\n return (\n <>\n {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n {/* eslint-disable-next-line max-len */}\n {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <StyledInputsWrapperGrid\n cols={mainCols}\n gutter=\"xxs\"\n pr={!withAnyRightController ? '2px' : '0px'}\n onKeyDown={onGlobalKeyDown}\n disabled={disabled}\n onBlur={handleComponentBlurs}\n data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n getOwnerProps={getProps}\n {...styledsAttrs}\n {...omit(globalAttrs, 'tabIndex', 'autoFocus')}\n {...xstyledAttrs}\n >\n {hideDate ? null : <DateInputs />}\n {hideTime ? null : <TimeInputs />}\n {withAnyRightController ? (\n <Grid cols={rightControlCols}>\n {shouldPreserveClearableSpace ? <ClearButton /> : null}\n {withAnyPicker ? <PickersIcons /> : null}\n </Grid>\n ) : null}\n </StyledInputsWrapperGrid>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CnB;AA5CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwC;AACxC,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,yBAA4B;AAC5B,gDAAmD;AACnD,oBAAqB;AAEd,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,CAAC,yBAAyB,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,6EAAmC;AAAA,MAChD,eAAe;AAAA,MACd,GAAG;AAAA,MACH,OAAG,oBAAK,aAAa,YAAY,WAAW;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,WAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,yBACC,6CAAC,uBAAK,MAAM,kBACT;AAAA,yCAA+B,4CAAC,kCAAY,IAAK;AAAA,UACjD,gBAAgB,4CAAC,oCAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,18 +48,31 @@ const useFocusTracker = ({ DOMRefs, flags }) => {
|
|
|
48
48
|
if (lastSegment !== currFocusDescriber)
|
|
49
49
|
setCurrFocusDescriber(lastSegment);
|
|
50
50
|
}, [currFocusDescriber, lastSegment, latestInteractionRegion]);
|
|
51
|
+
const trackFocusResetter = useCallback(() => {
|
|
52
|
+
if (latestInteractionRegion !== "")
|
|
53
|
+
setLatestInteractionRegion("");
|
|
54
|
+
if (currFocusDescriber !== "")
|
|
55
|
+
setCurrFocusDescriber("");
|
|
56
|
+
}, [currFocusDescriber, latestInteractionRegion]);
|
|
57
|
+
const handleComponentBlurs = useCallback(() => {
|
|
58
|
+
let shouldShortCircuit = false;
|
|
59
|
+
if (latestInteractionRegion === "calendar-days" && currFocusDescriber === "calendar-metafocused-day")
|
|
60
|
+
shouldShortCircuit = true;
|
|
61
|
+
if (latestInteractionRegion === "calendar-head" && currFocusDescriber === "calendar-prev-month")
|
|
62
|
+
shouldShortCircuit = true;
|
|
63
|
+
if (latestInteractionRegion === "timewheel" && currFocusDescriber === "timewheel-curr-hour")
|
|
64
|
+
shouldShortCircuit = true;
|
|
65
|
+
if (shouldShortCircuit)
|
|
66
|
+
return;
|
|
67
|
+
trackFocusResetter();
|
|
68
|
+
}, [currFocusDescriber, latestInteractionRegion, trackFocusResetter]);
|
|
51
69
|
return useMemo(
|
|
52
70
|
() => ({
|
|
53
71
|
latestInteractionRegion,
|
|
54
72
|
setLatestInteractionRegion,
|
|
55
73
|
currFocusDescriber,
|
|
56
74
|
setCurrFocusDescriber,
|
|
57
|
-
trackFocusResetter
|
|
58
|
-
if (latestInteractionRegion !== "")
|
|
59
|
-
setLatestInteractionRegion("");
|
|
60
|
-
if (currFocusDescriber !== "")
|
|
61
|
-
setCurrFocusDescriber("");
|
|
62
|
-
},
|
|
75
|
+
trackFocusResetter,
|
|
63
76
|
trackFocusMonthInput: () => {
|
|
64
77
|
if (latestInteractionRegion !== "date-inputs")
|
|
65
78
|
setLatestInteractionRegion("date-inputs");
|
|
@@ -170,9 +183,18 @@ const useFocusTracker = ({ DOMRefs, flags }) => {
|
|
|
170
183
|
},
|
|
171
184
|
trackFocusPicker,
|
|
172
185
|
trackFocusFirstSegment,
|
|
173
|
-
trackFocusLastSegment
|
|
186
|
+
trackFocusLastSegment,
|
|
187
|
+
handleComponentBlurs
|
|
174
188
|
}),
|
|
175
|
-
[
|
|
189
|
+
[
|
|
190
|
+
latestInteractionRegion,
|
|
191
|
+
currFocusDescriber,
|
|
192
|
+
trackFocusResetter,
|
|
193
|
+
trackFocusPicker,
|
|
194
|
+
trackFocusFirstSegment,
|
|
195
|
+
trackFocusLastSegment,
|
|
196
|
+
handleComponentBlurs
|
|
197
|
+
]
|
|
176
198
|
);
|
|
177
199
|
};
|
|
178
200
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useFocusTracker.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n | 'calendar-days'\n | 'calendar-head'\n | 'timewheel'\n | 'date-inputs'\n | 'time-inputs'\n | 'clear-btn'\n | 'picker-icon'\n | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter: () => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n },\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n }),\n [currFocusDescriber, latestInteractionRegion, trackFocusPicker, trackFocusFirstSegment, trackFocusLastSegment],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n | 'calendar-days'\n | 'calendar-head'\n | 'timewheel'\n | 'date-inputs'\n | 'time-inputs'\n | 'clear-btn'\n | 'picker-icon'\n | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the first segment can be:\n - month-input (when date inputs are present)\n - hour-input (when ONLY time inputs are present)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the last segment can be:\n - year-input (when ONLY date inputs are present)\n - meridiem-input (when time inputs are present)\n - clear-btn (when clearable is true and there is no picker)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n const trackFocusResetter = useCallback(() => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n }, [currFocusDescriber, latestInteractionRegion]);\n\n const handleComponentBlurs = useCallback(() => {\n /* our code base is trying to avoid side-effects and we also try to be imperative\n due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n we need to distinguish between\n - a blur that is caused by a portal opening\n vs\n - a blur that is caused by a user moving focus to another element\n we can do this by checking the currFocusDescriber and latestInteractionRegion\n we know that blur is triggered by portal opening when:\n - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n (this is the case when we open any timewheel ONLY)\n */\n let shouldShortCircuit = false;\n // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n shouldShortCircuit = true;\n // empty date value AND no onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n shouldShortCircuit = true;\n\n // only time wheel is present in the contextual region\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n shouldShortCircuit = true;\n\n if (shouldShortCircuit) return;\n trackFocusResetter();\n }, [currFocusDescriber, latestInteractionRegion, trackFocusResetter]);\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter,\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n }),\n [\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusResetter,\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
23
23
|
globalAttrs,
|
|
24
24
|
xstyledAttrs,
|
|
25
25
|
onGlobalKeyDown,
|
|
26
|
-
|
|
26
|
+
handleComponentBlurs
|
|
27
27
|
} = useContext(ControlledDateTimePickerContext);
|
|
28
28
|
const styledsAttrs = {
|
|
29
29
|
justPicker: hideDate && hideTime,
|
|
@@ -51,7 +51,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
51
51
|
pr: !withAnyRightController ? "2px" : "0px",
|
|
52
52
|
onKeyDown: onGlobalKeyDown,
|
|
53
53
|
disabled,
|
|
54
|
-
onBlur:
|
|
54
|
+
onBlur: handleComponentBlurs,
|
|
55
55
|
"data-testid": ControlledDateTimePickerDatatestid.CONTAINER,
|
|
56
56
|
getOwnerProps: getProps,
|
|
57
57
|
...styledsAttrs,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledDateTimePickerContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid.js';\nimport { omit } from 'lodash';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n getProps,\n hideDate,\n hideTime,\n withAnyPicker,\n withAnyRightController,\n shouldPreserveClearableSpace,\n isControllerOnly,\n globalAttrs,\n xstyledAttrs,\n onGlobalKeyDown,\n
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid.js';\nimport { omit } from 'lodash';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n getProps,\n hideDate,\n hideTime,\n withAnyPicker,\n withAnyRightController,\n shouldPreserveClearableSpace,\n isControllerOnly,\n globalAttrs,\n xstyledAttrs,\n onGlobalKeyDown,\n handleComponentBlurs,\n } = useContext(ControlledDateTimePickerContext);\n\n const styledsAttrs = {\n justPicker: hideDate && hideTime,\n withAnyPicker,\n hasError,\n isControllerOnly,\n };\n\n const mainCols = [];\n if (!hideDate) mainCols.push('auto');\n if (!hideTime) mainCols.push('auto');\n if (withAnyRightController) mainCols.push('auto');\n\n const rightControlCols = [];\n if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n if (withAnyPicker) rightControlCols.push('auto');\n\n return (\n <>\n {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n {/* eslint-disable-next-line max-len */}\n {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <StyledInputsWrapperGrid\n cols={mainCols}\n gutter=\"xxs\"\n pr={!withAnyRightController ? '2px' : '0px'}\n onKeyDown={onGlobalKeyDown}\n disabled={disabled}\n onBlur={handleComponentBlurs}\n data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n getOwnerProps={getProps}\n {...styledsAttrs}\n {...omit(globalAttrs, 'tabIndex', 'autoFocus')}\n {...xstyledAttrs}\n >\n {hideDate ? null : <DateInputs />}\n {hideTime ? null : <TimeInputs />}\n {withAnyRightController ? (\n <Grid cols={rightControlCols}>\n {shouldPreserveClearableSpace ? <ClearButton /> : null}\n {withAnyPicker ? <PickersIcons /> : null}\n </Grid>\n ) : null}\n </StyledInputsWrapperGrid>\n </>\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;AC6CnB,mBAkBuB,KAGjB,YArBN;AA5CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0CAA0C;AACnD,SAAS,YAAY;AAEd,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,SACE,gCAKE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,CAAC,yBAAyB,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,mCAAmC;AAAA,MAChD,eAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG,KAAK,aAAa,YAAY,WAAW;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,WAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,yBACC,qBAAC,QAAK,MAAM,kBACT;AAAA,yCAA+B,oBAAC,eAAY,IAAK;AAAA,UACjD,gBAAgB,oBAAC,gBAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-date-time-picker",
|
|
3
|
-
"version": "3.30.0-rc.
|
|
3
|
+
"version": "3.30.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
|
|
6
6
|
"files": [
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button-v2": "3.30.0-rc.
|
|
39
|
-
"@elliemae/ds-grid": "3.30.0-rc.
|
|
40
|
-
"@elliemae/ds-icons": "3.30.0-rc.
|
|
41
|
-
"@elliemae/ds-popperjs": "3.30.0-rc.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.30.0-rc.
|
|
43
|
-
"@elliemae/ds-system": "3.30.0-rc.
|
|
44
|
-
"@elliemae/ds-typescript-helpers": "3.30.0-rc.
|
|
45
|
-
"@elliemae/ds-utilities": "3.30.0-rc.
|
|
38
|
+
"@elliemae/ds-button-v2": "3.30.0-rc.2",
|
|
39
|
+
"@elliemae/ds-grid": "3.30.0-rc.2",
|
|
40
|
+
"@elliemae/ds-icons": "3.30.0-rc.2",
|
|
41
|
+
"@elliemae/ds-popperjs": "3.30.0-rc.2",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.30.0-rc.2",
|
|
43
|
+
"@elliemae/ds-system": "3.30.0-rc.2",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.30.0-rc.2",
|
|
45
|
+
"@elliemae/ds-utilities": "3.30.0-rc.2"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
49
49
|
"@elliemae/pui-theme": "~2.7.0",
|
|
50
50
|
"styled-components": "~5.3.9",
|
|
51
51
|
"styled-system": "~5.1.5",
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.30.0-rc.
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.30.0-rc.2"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@elliemae/pui-theme": "~2.7.0",
|