@elliemae/ds-form-date-time-picker 3.70.0-next.7 → 3.70.0-next.71
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.map +2 -2
- package/dist/cjs/config/useGetReferences.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/ControlledDateTimePickerContent.js +2 -2
- package/dist/cjs/parts/ControlledDateTimePickerContent.js.map +2 -2
- package/dist/cjs/parts/DateInputs/DDInput.js +2 -3
- package/dist/cjs/parts/DateInputs/DDInput.js.map +2 -2
- package/dist/cjs/parts/DateInputs/DateInputs.js +0 -4
- package/dist/cjs/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/cjs/parts/DateInputs/MMInput.js +2 -3
- package/dist/cjs/parts/DateInputs/MMInput.js.map +2 -2
- package/dist/cjs/parts/DateInputs/YYYYInput.js +2 -3
- package/dist/cjs/parts/DateInputs/YYYYInput.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarWrapper.js +3 -20
- package/dist/cjs/parts/Pickers/Calendar/CalendarWrapper.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js +5 -1
- package/dist/cjs/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js.map +2 -2
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js +4 -21
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js +4 -4
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js +4 -4
- package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js +4 -4
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js +3 -20
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map +2 -2
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/HHInput.js +2 -3
- package/dist/cjs/parts/TimeInputs/HHInput.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/MeridiemInput.js +1 -2
- package/dist/cjs/parts/TimeInputs/MeridiemInput.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/MinutesInput.js +2 -3
- package/dist/cjs/parts/TimeInputs/MinutesInput.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/TimeInputs.js +0 -4
- package/dist/cjs/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/esm/config/useFocusTracker.js.map +2 -2
- package/dist/esm/config/useGetReferences.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/ControlledDateTimePickerContent.js +2 -2
- package/dist/esm/parts/ControlledDateTimePickerContent.js.map +2 -2
- package/dist/esm/parts/DateInputs/DDInput.js +2 -3
- package/dist/esm/parts/DateInputs/DDInput.js.map +2 -2
- package/dist/esm/parts/DateInputs/DateInputs.js +0 -4
- package/dist/esm/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/esm/parts/DateInputs/MMInput.js +2 -3
- package/dist/esm/parts/DateInputs/MMInput.js.map +2 -2
- package/dist/esm/parts/DateInputs/YYYYInput.js +2 -3
- package/dist/esm/parts/DateInputs/YYYYInput.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js +4 -21
- package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js +5 -1
- package/dist/esm/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js.map +2 -2
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js +4 -21
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js +4 -4
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js +4 -4
- package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js +4 -4
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelWrapper.js +3 -20
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map +2 -2
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/dist/esm/parts/TimeInputs/HHInput.js +2 -3
- package/dist/esm/parts/TimeInputs/HHInput.js.map +2 -2
- package/dist/esm/parts/TimeInputs/MeridiemInput.js +1 -2
- package/dist/esm/parts/TimeInputs/MeridiemInput.js.map +2 -2
- package/dist/esm/parts/TimeInputs/MinutesInput.js +2 -3
- package/dist/esm/parts/TimeInputs/MinutesInput.js.map +2 -2
- package/dist/esm/parts/TimeInputs/TimeInputs.js +0 -4
- package/dist/esm/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/types/parts/DateInputs/DDInput.d.ts +1 -2
- package/dist/types/parts/DateInputs/MMInput.d.ts +1 -2
- package/dist/types/parts/DateInputs/YYYYInput.d.ts +1 -2
- package/dist/types/parts/Pickers/Calendar/Calendar.d.ts +3 -2
- package/dist/types/parts/Pickers/Calendar/CalendarBody.d.ts +1 -1
- package/dist/types/parts/Pickers/Calendar/CalendarWeekDays.d.ts +1 -1
- package/dist/types/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.d.ts +2 -1
- package/dist/types/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.d.ts +2 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheel.d.ts +2 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheelContent.d.ts +1 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheelWrapper.d.ts +2 -1
- package/dist/types/parts/TimeInputs/HHInput.d.ts +1 -2
- package/dist/types/parts/TimeInputs/MeridiemInput.d.ts +1 -2
- package/dist/types/parts/TimeInputs/MinutesInput.d.ts +1 -2
- package/package.json +15 -15
- package/dist/types/tests/DSControlledDateTimePicker.PUI-16014.test.d.ts +0 -1
- package/dist/types/tests/DSControlledDateTimePicker.PUI-17323.test.d.ts +0 -1
- package/dist/types/tests/DSControlledDateTimePicker.data-testid.test.d.ts +0 -1
- package/dist/types/tests/DSControlledDateTimePicker.exports.test.d.ts +0 -1
- package/dist/types/tests/custom-props/customProps.d.ts +0 -397
- package/dist/types/tests/custom-props/date-time-picker.date-custom-props.test.d.ts +0 -1
- package/dist/types/tests/custom-props/date-time-picker.date-time-custom-props.test.d.ts +0 -1
- package/dist/types/tests/custom-props/date-time-picker.time-custom-props.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.a11y.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.applyAriaDisabled.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.auto-advance.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.clear-button.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard-focus.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.data-entry-typing.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.fill-with-now.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.regressive-backspace.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.shortcut-clear.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.manual-delete-values.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.onChange-meta-info.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.readOnly.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.types-button.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.types-dom.test.d.ts +0 -1
- package/dist/types/tests/playwright-tests/full/ControlledTestRenderer.d.ts +0 -2
- package/dist/types/tests/playwright-tests/full/DSControlledDateTimePicker.full.navigation.test.playwright.d.ts +0 -1
- package/dist/types/typescript-testing/slot-arguments-engine.d.ts +0 -95
- package/dist/types/typescript-testing/slot-props.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-date-time-picker-valid.d.ts +0 -1
|
@@ -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 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, isControllerOnly } = 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 (e: React.FocusEvent<HTMLElement>) => {\n /**\n * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n * this is because in controller only mode we don't have a portal that we need to account for,\n * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n */\n if (isControllerOnly) {\n const relatedTarget = e.relatedTarget as HTMLElement | null;\n if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n return;\n }\n trackFocusResetter();\n return;\n }\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 },\n [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n );\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAA+C;
|
|
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' | 'calendar-head' | 'timewheel' | 'date-inputs' | 'time-inputs' | 'clear-btn' | 'picker-icon' | '';\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, isControllerOnly } = 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 (e: React.FocusEvent<HTMLElement>) => {\n /**\n * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n * this is because in controller only mode we don't have a portal that we need to account for,\n * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n */\n if (isControllerOnly) {\n const relatedTarget = e.relatedTarget as HTMLElement | null;\n if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n return;\n }\n trackFocusResetter();\n return;\n }\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 },\n [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n );\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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useGetReferences.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useRef, useMemo, useState } from 'react';\nimport type { useGetFlags } from './useGetFlags.js';\ntype FirstSegment =\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA0C;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useRef, useMemo, useState } from 'react';\nimport type { useGetFlags } from './useGetFlags.js';\ntype FirstSegment =\n 'month-input' | 'hour-input' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';\ntype LastSegment =\n 'year-input' | 'meridiem-input' | 'clear-btn' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';\nexport const useGetReferences = ({\n isWithDateInputs,\n isWithTimeInputs,\n isDateSelector,\n isTimeSelector,\n isDateTimeSelector,\n withAnyPicker,\n withClearBtn,\n}: ReturnType<typeof useGetFlags>) => {\n // those 2 states are needed for focus tracking\n const [firstSegment, setFirstSegment] = useState<FirstSegment>('');\n const [lastSegment, setLastSegment] = useState<LastSegment>('');\n // refs are used for \"auto-advance\" feature\n const monthInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const dayInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const yearInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const hourInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const minutesInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const meridiemInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const clearButtonRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const pickerButtonRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n\n const prevYearBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMonthBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const nextMonthBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const nextYearBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const calendarDaysWrapperRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n\n const prevHourBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currHourBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextHourBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMinutesBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currMinutesBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextMinutesBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMeridiemBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currMeridiemBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextMeridiemBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n\n let firstSegmentRef = useRef<HTMLInputElement | HTMLButtonElement>(null) as React.MutableRefObject<\n HTMLInputElement | HTMLButtonElement\n >;\n if (isWithDateInputs) {\n firstSegmentRef = monthInputRef;\n if (firstSegment !== 'month-input') setFirstSegment('month-input');\n } else if (isWithTimeInputs) {\n firstSegmentRef = hourInputRef;\n if (firstSegment !== 'hour-input') setFirstSegment('hour-input');\n } else if (withAnyPicker) {\n firstSegmentRef = pickerButtonRef;\n if (isDateSelector && firstSegment !== 'date-picker-icon') setFirstSegment('date-picker-icon');\n if (isTimeSelector && firstSegment !== 'time-picker-icon') setFirstSegment('time-picker-icon');\n if (isDateTimeSelector && firstSegment !== 'datetime-picker-icon') setFirstSegment('datetime-picker-icon');\n }\n\n let lastSegmentRef = useRef<HTMLInputElement | HTMLButtonElement>(null) as React.MutableRefObject<\n HTMLInputElement | HTMLButtonElement\n >;\n if (withAnyPicker) {\n lastSegmentRef = pickerButtonRef;\n if (isDateSelector && lastSegment !== 'date-picker-icon') setLastSegment('date-picker-icon');\n if (isTimeSelector && lastSegment !== 'time-picker-icon') setLastSegment('time-picker-icon');\n if (isDateTimeSelector && lastSegment !== 'datetime-picker-icon') setLastSegment('datetime-picker-icon');\n } else if (withClearBtn) {\n lastSegmentRef = clearButtonRef;\n if (lastSegment !== 'clear-btn') setLastSegment('clear-btn');\n } else if (isWithTimeInputs) {\n lastSegmentRef = meridiemInputRef;\n if (lastSegment !== 'meridiem-input') setLastSegment('meridiem-input');\n } else if (isWithDateInputs) {\n lastSegmentRef = yearInputRef;\n if (lastSegment !== 'year-input') setLastSegment('year-input');\n }\n\n return useMemo(\n () => ({\n monthInputRef,\n dayInputRef,\n yearInputRef,\n hourInputRef,\n minutesInputRef,\n meridiemInputRef,\n clearButtonRef,\n pickerButtonRef,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n calendarDaysWrapperRef,\n prevHourBtnRef,\n currHourBtnRef,\n nextHourBtnRef,\n prevMinutesBtnRef,\n currMinutesBtnRef,\n nextMinutesBtnRef,\n prevMeridiemBtnRef,\n currMeridiemBtnRef,\n nextMeridiemBtnRef,\n firstSegmentRef,\n lastSegmentRef,\n firstSegment,\n lastSegment,\n }),\n [firstSegment, lastSegment],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -34,7 +34,6 @@ module.exports = __toCommonJS(ControlledDateTimePickerContent_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
37
|
-
var import_lodash_es = require("lodash-es");
|
|
38
37
|
var import_react = require("react");
|
|
39
38
|
var import_constants = require("../constants/index.js");
|
|
40
39
|
var import_ControlledDateTimePickerCTX = require("../ControlledDateTimePickerCTX.js");
|
|
@@ -72,6 +71,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
72
71
|
if (shouldPreserveClearableSpace) rightControlCols.push("28px");
|
|
73
72
|
if (withAnyPicker) rightControlCols.push("auto");
|
|
74
73
|
const onlyPicker = hideDate && hideTime;
|
|
74
|
+
const { tabIndex, autoFocus, ...globalAttrsWithoutFocus } = globalAttrs;
|
|
75
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
76
76
|
import_Styleds.StyledInputsWrapperGrid,
|
|
77
77
|
{
|
|
@@ -86,7 +86,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
86
86
|
onlyPicker,
|
|
87
87
|
$readOnlyStyles: readOnly || applyAriaDisabled,
|
|
88
88
|
...styledsAttrs,
|
|
89
|
-
...
|
|
89
|
+
...globalAttrsWithoutFocus,
|
|
90
90
|
...xstyledAttrs,
|
|
91
91
|
children: [
|
|
92
92
|
hideDate ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DateInputs.DateInputs, {}),
|
|
@@ -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 { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled, readOnly, applyAriaDisabled },\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 const onlyPicker = hideDate && hideTime;\n\n const { tabIndex, autoFocus, ...globalAttrsWithoutFocus } = globalAttrs;\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 onlyPicker={onlyPicker}\n $readOnlyStyles={readOnly || applyAriaDisabled}\n {...styledsAttrs}\n {...globalAttrsWithoutFocus}\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
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,qBAAqB;AACrB,mBAA2B;AAC3B,uBAAmD;AACnD,yCAAgD;AAChD,yBAA4B;AAC5B,wBAA2B;AAC3B,0BAA6B;AAC7B,qBAAwC;AACxC,wBAA2B;AAEpB,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,UAAU,UAAU,kBAAkB;AAAA,IACzD;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,SAAU,UAAS,KAAK,MAAM;AACnC,MAAI,CAAC,SAAU,UAAS,KAAK,MAAM;AACnC,MAAI,uBAAwB,UAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI,6BAA8B,kBAAiB,KAAK,MAAM;AAC9D,MAAI,cAAe,kBAAiB,KAAK,MAAM;AAE/C,QAAM,aAAa,YAAY;AAE/B,QAAM,EAAE,UAAU,WAAW,GAAG,wBAAwB,IAAI;AAE5D,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,oDAAmC;AAAA,MAChD,eAAe;AAAA,MACf;AAAA,MACA,iBAAiB,YAAY;AAAA,MAC5B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,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
|
}
|
|
@@ -57,7 +57,6 @@ const DDInput = import_react.default.memo(
|
|
|
57
57
|
contextRef,
|
|
58
58
|
tabIndex,
|
|
59
59
|
placeholder,
|
|
60
|
-
ariaCurrentValueForInputs,
|
|
61
60
|
isFocused,
|
|
62
61
|
getProps,
|
|
63
62
|
readOnly
|
|
@@ -87,7 +86,7 @@ const DDInput = import_react.default.memo(
|
|
|
87
86
|
},
|
|
88
87
|
tabIndex,
|
|
89
88
|
placeholder,
|
|
90
|
-
"aria-label":
|
|
89
|
+
"aria-label": "day",
|
|
91
90
|
"data-testid": import_constants.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
|
|
92
91
|
disabled,
|
|
93
92
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -97,7 +96,7 @@ const DDInput = import_react.default.memo(
|
|
|
97
96
|
role: "spinbutton",
|
|
98
97
|
"aria-valuemin": 1,
|
|
99
98
|
"aria-valuemax": 31,
|
|
100
|
-
"aria-valuenow": dayNum === -1 ?
|
|
99
|
+
"aria-valuenow": dayNum === -1 ? 1 : dayNum,
|
|
101
100
|
"aria-valuetext": dayNum === -1 ? "empty" : import_constants2.announcableCardinalDays[dayNum]
|
|
102
101
|
}
|
|
103
102
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DateInputs/DDInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledDateInput } from '../Styleds.js';\nimport { announcableCardinalDays } from '../../utils/constants.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n if (day === '') return false;\n const numberOnly = regExpNumbers.test(day);\n return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n placeholder: string;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledDateInput } from '../Styleds.js';\nimport { announcableCardinalDays } from '../../utils/constants.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n if (day === '') return false;\n const numberOnly = regExpNumbers.test(day);\n return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n placeholder: string;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n isFocused: boolean;\n getProps: ControlledDateTimePickerContextT['getProps'];\n readOnly: boolean;\n}\nexport const DDInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n hasError,\n contextRef,\n tabIndex,\n placeholder,\n isFocused,\n getProps,\n readOnly,\n }: DDInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (isInvalidDay(e?.currentTarget?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [onChange],\n );\n const dayNum = convertToPositiveNumberIfPossible(value) as DSControlledDateTimePickerInternalsT.DateDay | -1;\n\n return (\n <StyledDateInput\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={(DomElem: HTMLInputElement) => {\n (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n if (isFocused) DomElem?.focus?.();\n }}\n tabIndex={tabIndex}\n placeholder={placeholder}\n aria-label=\"day\"\n data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n aria-invalid={hasError}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={1}\n aria-valuemax={31}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={dayNum === -1 ? 1 : dayNum}\n aria-valuetext={dayNum === -1 ? 'empty' : announcableCardinalDays[dayNum]}\n />\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DjB;AA7DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,IAAAA,oBAAwC;AACxC,2BAAkD;AAElD,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAkBO,MAAM,UAAU,aAAAC,QAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,aAAa,GAAG,eAAe,KAAK,GAAG;AACzC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS,wDAAkC,KAAK;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACX,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,WAAW,KAAK,IAAI;AAAA,QACnC,kBAAgB,WAAW,KAAK,UAAU,0CAAwB,MAAM;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["import_constants", "React"]
|
|
7
7
|
}
|
|
@@ -68,7 +68,6 @@ const DateInputs = () => {
|
|
|
68
68
|
monthInputRef,
|
|
69
69
|
dayInputRef,
|
|
70
70
|
yearInputRef,
|
|
71
|
-
ariaCurrentValueForInputs,
|
|
72
71
|
latestInteractionRegion,
|
|
73
72
|
currFocusDescriber,
|
|
74
73
|
getProps,
|
|
@@ -98,7 +97,6 @@ const DateInputs = () => {
|
|
|
98
97
|
tabIndex,
|
|
99
98
|
autoFocusMonthInput,
|
|
100
99
|
placeholder: "MM",
|
|
101
|
-
ariaCurrentValueForInputs,
|
|
102
100
|
disabled,
|
|
103
101
|
applyAriaDisabled,
|
|
104
102
|
hasError,
|
|
@@ -119,7 +117,6 @@ const DateInputs = () => {
|
|
|
119
117
|
contextRef: dayInputRef,
|
|
120
118
|
tabIndex,
|
|
121
119
|
placeholder: "DD",
|
|
122
|
-
ariaCurrentValueForInputs,
|
|
123
120
|
disabled,
|
|
124
121
|
applyAriaDisabled,
|
|
125
122
|
hasError,
|
|
@@ -140,7 +137,6 @@ const DateInputs = () => {
|
|
|
140
137
|
contextRef: yearInputRef,
|
|
141
138
|
tabIndex,
|
|
142
139
|
placeholder: "YYYY",
|
|
143
|
-
ariaCurrentValueForInputs,
|
|
144
140
|
disabled,
|
|
145
141
|
applyAriaDisabled,
|
|
146
142
|
hasError,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DateInputs/DateInputs.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { MMInput } from './MMInput.js';\nimport { DDInput } from './DDInput.js';\nimport { YYYYInput } from './YYYYInput.js';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds.js';\nimport { useDateInputs } from './useDateInputs.js';\nimport { fixedValues } from '../config.js';\n\nexport const DateInputs = (): JSX.Element => {\n const {\n month,\n day,\n year,\n autoFocusMonthInput,\n innerRefMonthInput,\n onMonthChange,\n onDayChange,\n onYearChange,\n onMonthBlur,\n onDayBlur,\n onYearBlur,\n onMonthFocus,\n onDayFocus,\n onYearFocus,\n onMonthKeyDown,\n onDayKeyDown,\n onYearKeyDown,\n disabled,\n applyAriaDisabled,\n } = useDateInputs();\n // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n const {\n monthInputRef,\n dayInputRef,\n yearInputRef,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { MMInput } from './MMInput.js';\nimport { DDInput } from './DDInput.js';\nimport { YYYYInput } from './YYYYInput.js';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds.js';\nimport { useDateInputs } from './useDateInputs.js';\nimport { fixedValues } from '../config.js';\n\nexport const DateInputs = (): JSX.Element => {\n const {\n month,\n day,\n year,\n autoFocusMonthInput,\n innerRefMonthInput,\n onMonthChange,\n onDayChange,\n onYearChange,\n onMonthBlur,\n onDayBlur,\n onYearBlur,\n onMonthFocus,\n onDayFocus,\n onYearFocus,\n onMonthKeyDown,\n onDayKeyDown,\n onYearKeyDown,\n disabled,\n applyAriaDisabled,\n } = useDateInputs();\n // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n const {\n monthInputRef,\n dayInputRef,\n yearInputRef,\n latestInteractionRegion,\n currFocusDescriber,\n getProps,\n props: { tabIndex, hasError, readOnly },\n } = useContext(ControlledDateTimePickerContext);\n\n return (\n <Grid\n cols={[\n fixedValues.smallInputWidth,\n fixedValues.separatorWidth,\n fixedValues.smallInputWidth,\n fixedValues.separatorWidth,\n fixedValues.largeInputWidth,\n ]}\n >\n <StyledFocusWithIn>\n <MMInput\n onChange={onMonthChange}\n onBlur={onMonthBlur}\n onFocus={onMonthFocus}\n onKeyDown={onMonthKeyDown}\n value={month}\n contextRef={monthInputRef}\n innerRef={innerRefMonthInput}\n tabIndex={tabIndex}\n autoFocusMonthInput={autoFocusMonthInput}\n placeholder=\"MM\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n <StyledFocusWithIn>\n <DDInput\n onChange={onDayChange}\n onBlur={onDayBlur}\n onFocus={onDayFocus}\n onKeyDown={onDayKeyDown}\n value={day}\n contextRef={dayInputRef}\n tabIndex={tabIndex}\n placeholder=\"DD\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n <StyledFocusWithIn>\n <YYYYInput\n onChange={onYearChange}\n onBlur={onYearBlur}\n onFocus={onYearFocus}\n onKeyDown={onYearKeyDown}\n value={year}\n contextRef={yearInputRef}\n tabIndex={tabIndex}\n placeholder=\"YYYY\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CnB;AA5CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,qBAAwB;AACxB,uBAA0B;AAC1B,qBAAmD;AACnD,2BAA8B;AAC9B,oBAA4B;AAErB,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,UAAU,SAAS;AAAA,EACxC,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,kCAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,kCAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -60,7 +60,6 @@ const MMInput = import_react.default.memo(
|
|
|
60
60
|
innerRef,
|
|
61
61
|
tabIndex,
|
|
62
62
|
autoFocusMonthInput,
|
|
63
|
-
ariaCurrentValueForInputs,
|
|
64
63
|
isFocused,
|
|
65
64
|
getProps,
|
|
66
65
|
readOnly
|
|
@@ -101,7 +100,7 @@ const MMInput = import_react.default.memo(
|
|
|
101
100
|
innerRef: currentRef,
|
|
102
101
|
tabIndex,
|
|
103
102
|
placeholder,
|
|
104
|
-
"aria-label":
|
|
103
|
+
"aria-label": "month",
|
|
105
104
|
"data-testid": import_constants.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
|
|
106
105
|
disabled,
|
|
107
106
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -111,7 +110,7 @@ const MMInput = import_react.default.memo(
|
|
|
111
110
|
role: "spinbutton",
|
|
112
111
|
"aria-valuemin": 1,
|
|
113
112
|
"aria-valuemax": 12,
|
|
114
|
-
"aria-valuenow": monthNum === -1 ?
|
|
113
|
+
"aria-valuenow": monthNum === -1 ? 1 : monthNum,
|
|
115
114
|
"aria-valuetext": monthNum === -1 ? "empty" : import_constants2.monthNames[monthNum - 1]
|
|
116
115
|
}
|
|
117
116
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DateInputs/MMInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { setMultipleRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { monthNames } from '../../utils/constants.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n if (month === '') return false;\n const numberOnly = regExpNumbers.test(month);\n return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n autoFocusMonthInput: boolean;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n placeholder: string;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { setMultipleRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { monthNames } from '../../utils/constants.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n if (month === '') return false;\n const numberOnly = regExpNumbers.test(month);\n return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n autoFocusMonthInput: boolean;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n placeholder: string;\n isFocused: boolean;\n innerRef?:\n | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n getProps: ControlledDateTimePickerContextT['getProps'];\n readOnly: boolean;\n}\nexport const MMInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n hasError,\n placeholder,\n contextRef,\n innerRef,\n tabIndex,\n autoFocusMonthInput,\n isFocused,\n getProps,\n readOnly,\n }: MMInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (isInvalidMonth(e?.target?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [onChange],\n );\n\n const handleRef = useCallback(\n (DomElem: HTMLInputElement) => {\n (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n if (isFocused) DomElem?.focus?.();\n },\n [contextRef, isFocused],\n );\n\n const currentRef = useMemo(() => {\n if (innerRef) {\n return setMultipleRefs([handleRef, innerRef]);\n }\n return handleRef;\n }, [handleRef, innerRef]);\n\n const monthNum = convertToPositiveNumberIfPossible(value);\n\n return (\n <StyledMonthInput\n autoFocus={autoFocusMonthInput}\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={currentRef}\n tabIndex={tabIndex}\n placeholder={placeholder}\n aria-label=\"month\"\n data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n aria-invalid={hasError}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={1}\n aria-valuemax={12}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={monthNum === -1 ? 1 : monthNum}\n aria-valuetext={monthNum === -1 ? 'empty' : monthNames[monthNum - 1]}\n />\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoFjB;AApFN,uBAAgC;AAEhC,mBAA4C;AAE5C,uBAAmD;AAEnD,qBAAiC;AACjC,2BAAkD;AAClD,IAAAA,oBAA2B;AAE3B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAqBO,MAAM,UAAU,aAAAC,QAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,eAAe,GAAG,QAAQ,KAAK,GAAG;AACpC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,gBAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI,UAAW,UAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,mBAAO,kCAAgB,CAAC,WAAW,QAAQ,CAAC;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,UAAM,eAAW,wDAAkC,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACX,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,aAAa,KAAK,IAAI;AAAA,QACrC,kBAAgB,aAAa,KAAK,UAAU,6BAAW,WAAW,CAAC;AAAA;AAAA,IACrE;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["import_constants", "React"]
|
|
7
7
|
}
|
|
@@ -57,7 +57,6 @@ const YYYYInput = import_react.default.memo(
|
|
|
57
57
|
placeholder,
|
|
58
58
|
contextRef,
|
|
59
59
|
tabIndex,
|
|
60
|
-
ariaCurrentValueForInputs,
|
|
61
60
|
isFocused,
|
|
62
61
|
getProps,
|
|
63
62
|
readOnly
|
|
@@ -88,7 +87,7 @@ const YYYYInput = import_react.default.memo(
|
|
|
88
87
|
tabIndex,
|
|
89
88
|
"data-testid": import_constants.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
|
|
90
89
|
placeholder,
|
|
91
|
-
"aria-label":
|
|
90
|
+
"aria-label": "year",
|
|
92
91
|
disabled,
|
|
93
92
|
"aria-disabled": applyAriaDisabled,
|
|
94
93
|
"aria-invalid": hasError,
|
|
@@ -97,7 +96,7 @@ const YYYYInput = import_react.default.memo(
|
|
|
97
96
|
role: "spinbutton",
|
|
98
97
|
"aria-valuemin": 0,
|
|
99
98
|
"aria-valuemax": 9999,
|
|
100
|
-
"aria-valuenow": yearNum === -1 ?
|
|
99
|
+
"aria-valuenow": yearNum === -1 ? 0 : yearNum,
|
|
101
100
|
"aria-valuetext": yearNum === -1 ? "empty" : (0, import_stringHelpers.fillStringWithPlaceHolders)(`${yearNum}`, 4, "0")
|
|
102
101
|
}
|
|
103
102
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DateInputs/YYYYInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledYearInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n if (year === '') return false;\n const numberOnly = regExpNumbers.test(year);\n return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n placeholder: string;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledYearInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n if (year === '') return false;\n const numberOnly = regExpNumbers.test(year);\n return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n placeholder: string;\n isFocused: boolean;\n getProps: ControlledDateTimePickerContextT['getProps'];\n readOnly: boolean;\n}\nexport const YYYYInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n hasError,\n placeholder,\n contextRef,\n tabIndex,\n isFocused,\n getProps,\n readOnly,\n }: YYYYInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (isInvalidYear(e?.currentTarget?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [onChange],\n );\n\n const yearNum = convertToPositiveNumberIfPossible(value);\n\n return (\n <StyledYearInput\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={(DomElem: HTMLInputElement) => {\n (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n if (isFocused) DomElem?.focus?.();\n }}\n tabIndex={tabIndex}\n data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n placeholder={placeholder}\n aria-label=\"year\"\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n aria-invalid={hasError}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={0}\n aria-valuemax={9999}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={yearNum === -1 ? 0 : yearNum}\n aria-valuetext={yearNum === -1 ? 'empty' : fillStringWithPlaceHolders(`${yearNum}`, 4, '0')}\n />\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DjB;AA7DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,2BAAkD;AAClD,2BAA2C;AAC3C,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAiB;AACtC,MAAI,SAAS,GAAI,QAAO;AACxB,QAAM,aAAa,cAAc,KAAK,IAAI;AAC1C,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,EAAE,IAAI;AACvE;AAkBO,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAqC;AACnC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,GAAG,eAAe,KAAK,GAAG;AAC1C,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,cAAU,wDAAkC,KAAK;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,YAAY,KAAK,IAAI;AAAA,QACpC,kBAAgB,YAAY,KAAK,cAAU,iDAA2B,GAAG,OAAO,IAAI,GAAG,GAAG;AAAA;AAAA,IAC5F;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -54,28 +54,11 @@ const CalendarWrapper = () => {
|
|
|
54
54
|
isOpen: isFloatingOpen
|
|
55
55
|
} = (0, import_ds_floating_context.useFloatingContext)({
|
|
56
56
|
externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
|
|
57
|
+
externalReferenceElement: referenceElement,
|
|
57
58
|
withoutAnimation: true,
|
|
58
|
-
customOffset: [0, 0]
|
|
59
|
+
customOffset: [0, 0],
|
|
60
|
+
onClickOutside: isControllerOnly ? void 0 : closeCalendar
|
|
59
61
|
});
|
|
60
|
-
(0, import_react.useEffect)(() => {
|
|
61
|
-
refs.setReference(referenceElement);
|
|
62
|
-
}, [referenceElement, refs]);
|
|
63
|
-
const floatingEl = refs.floating;
|
|
64
|
-
(0, import_react.useEffect)(() => {
|
|
65
|
-
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
66
|
-
};
|
|
67
|
-
const listener = (event) => {
|
|
68
|
-
const target = event.target;
|
|
69
|
-
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
70
|
-
closeCalendar();
|
|
71
|
-
};
|
|
72
|
-
document.addEventListener("mousedown", listener, true);
|
|
73
|
-
document.addEventListener("touchstart", listener, true);
|
|
74
|
-
return () => {
|
|
75
|
-
document.removeEventListener("mousedown", listener, true);
|
|
76
|
-
document.removeEventListener("touchstart", listener, true);
|
|
77
|
-
};
|
|
78
|
-
}, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);
|
|
79
62
|
if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarContent.CalendarContent, {});
|
|
80
63
|
if (!referenceElement) return null;
|
|
81
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\n\nexport const CalendarWrapper = (): JSX.Element | null => {\n const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarContent />\n </StyledFloatingWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCQ;AAlC/B,iCAAoD;AACpD,uBAAuB;AACvB,mBAAkC;AAClC,uBAIO;AACP,yCAAgD;AAChD,6BAAgC;AAChC,6BAAgC;AAEhC,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,QAAI,yBAAW,kEAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,QAAI,yBAAW,sCAAe;AAEtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,4CAAC,0CAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,oDAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,0CAAgB;AAAA;AAAA,EACnB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(useCurrentDisplayedMonthYearLogic_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_useGetMonthYearFromDateStringOrEmptyStartingMonth = require("../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js");
|
|
37
|
+
var import_useGetStartingFocusedDay = require("../../../utils/hooks/useGetStartingFocusedDay.js");
|
|
37
38
|
var import_dateHelpers = require("../../../utils/dateHelpers.js");
|
|
38
39
|
function sliceIntoChunks(arr, chunkSize) {
|
|
39
40
|
const res = [];
|
|
@@ -72,7 +73,10 @@ const getDaysArrays = (currentMonth, currentYear) => {
|
|
|
72
73
|
return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];
|
|
73
74
|
};
|
|
74
75
|
const useCurrentDisplayedMonthYearLogic = () => {
|
|
75
|
-
const { month:
|
|
76
|
+
const { month: monthFromDateStringFallback, year: yearFromDateStringFallback } = (0, import_useGetMonthYearFromDateStringOrEmptyStartingMonth.useGetMonthYearFromDateStringOrEmptyStartingMonth)();
|
|
77
|
+
const { startFocusedDate } = (0, import_useGetStartingFocusedDay.useGetStartingFocusedDay)();
|
|
78
|
+
const monthFromDateString = startFocusedDate ? startFocusedDate.getMonth() : monthFromDateStringFallback;
|
|
79
|
+
const yearFromDateString = startFocusedDate ? startFocusedDate.getFullYear() : yearFromDateStringFallback;
|
|
76
80
|
const [currentMonth, setCurrentMonth] = (0, import_react.useState)(monthFromDateString);
|
|
77
81
|
const [currentYear, setCurrentYear] = (0, import_react.useState)(yearFromDateString);
|
|
78
82
|
const daysArraysRef = (0, import_react.useRef)([]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useEffect, createRef, useRef } from 'react';\n// eslint-disable-next-line max-len\nimport { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';\nimport {\n getSixBySevenCurrentMonthDaysMatrix,\n sumFromDateValues,\n sumValuesToDate,\n getDateStringFromDay,\n} from '../../../utils/dateHelpers.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sliceIntoChunks<T = any>(arr: Array<T>, chunkSize: number): Array<Array<T>> {\n const res = [];\n for (let i = 0; i < arr.length; i += chunkSize) {\n const chunk = arr.slice(i, i + chunkSize);\n res.push(chunk);\n }\n return res;\n}\ninterface UseCurrentDisplayedMonthYearLogicT {\n currentMonth: DSControlledDateTimePickerInternalsT.DateMonth;\n currentYear: number;\n daysArray: DSControlledDateTimePickerT.MetaMonthDay[];\n invisibleFirstDay?: DSControlledDateTimePickerT.MetaMonthDay;\n daysMatrixByWeekday: DSControlledDateTimePickerT.MetaMonthDay[][];\n invisibleLastDay?: DSControlledDateTimePickerT.MetaMonthDay;\n handlePrevMonth: () => void;\n handlePrevYear: () => void;\n handleNextMonth: () => void;\n handleNextYear: () => void;\n daysArraysRef: React.MutableRefObject<DSControlledDateTimePickerT.MetaMonthDay[]>;\n resetMonthYear: () => void;\n}\n\nconst getDaysArrays = (currentMonth: DSControlledDateTimePickerInternalsT.DateMonth, currentYear: number) => {\n const newDaysArray = getSixBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);\n const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {\n daysToSum: -1,\n });\n const hiddenPrevMetaday = {\n day: hiddenPrevDay,\n dayAsString: getDateStringFromDay(hiddenPrevDay),\n isPrevMonthDay: true,\n isNextMonthDay: false,\n isCurrMonthDay: false,\n dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n isHidden: true,\n };\n const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {\n daysToSum: 1,\n });\n const hiddenNextMetaday = {\n day: hiddenNextDay,\n dayAsString: getDateStringFromDay(hiddenNextDay),\n isPrevMonthDay: false,\n isNextMonthDay: true,\n isCurrMonthDay: false,\n dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n isHidden: true,\n };\n return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];\n};\nexport const useCurrentDisplayedMonthYearLogic = (): UseCurrentDisplayedMonthYearLogicT => {\n const { month:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA6E;AAE7E,+DAAkE;AAClE,yBAKO;AAKP,SAAS,gBAAyB,KAAe,WAAoC;AACnF,QAAM,MAAM,CAAC;AACb,WAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK,WAAW;AAC9C,UAAM,QAAQ,IAAI,MAAM,GAAG,IAAI,SAAS;AACxC,QAAI,KAAK,KAAK;AAAA,EAChB;AACA,SAAO;AACT;AAgBA,MAAM,gBAAgB,CAAC,cAA8D,gBAAwB;AAC3G,QAAM,mBAAe,wDAAoC,cAAc,WAAW;AAClF,QAAM,oBAAgB,oCAAgB,aAAa,CAAC,EAAE,KAAK;AAAA,IACzD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,oBAAoB;AAAA,IACxB,KAAK;AAAA,IACL,iBAAa,yCAAqB,aAAa;AAAA,IAC/C,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,eAAW,wBAA6B;AAAA,IACxC,UAAU;AAAA,EACZ;AACA,QAAM,oBAAgB,oCAAgB,aAAa,aAAa,SAAS,CAAC,EAAE,KAAK;AAAA,IAC/E,WAAW;AAAA,EACb,CAAC;AACD,QAAM,oBAAoB;AAAA,IACxB,KAAK;AAAA,IACL,iBAAa,yCAAqB,aAAa;AAAA,IAC/C,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,eAAW,wBAA6B;AAAA,IACxC,UAAU;AAAA,EACZ;AACA,SAAO,CAAC,mBAAmB,GAAG,cAAc,iBAAiB;AAC/D;AACO,MAAM,oCAAoC,MAA0C;AACzF,QAAM,EAAE,OAAO,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useEffect, createRef, useRef } from 'react';\n// eslint-disable-next-line max-len\nimport { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';\nimport { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';\nimport {\n getSixBySevenCurrentMonthDaysMatrix,\n sumFromDateValues,\n sumValuesToDate,\n getDateStringFromDay,\n} from '../../../utils/dateHelpers.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sliceIntoChunks<T = any>(arr: Array<T>, chunkSize: number): Array<Array<T>> {\n const res = [];\n for (let i = 0; i < arr.length; i += chunkSize) {\n const chunk = arr.slice(i, i + chunkSize);\n res.push(chunk);\n }\n return res;\n}\ninterface UseCurrentDisplayedMonthYearLogicT {\n currentMonth: DSControlledDateTimePickerInternalsT.DateMonth;\n currentYear: number;\n daysArray: DSControlledDateTimePickerT.MetaMonthDay[];\n invisibleFirstDay?: DSControlledDateTimePickerT.MetaMonthDay;\n daysMatrixByWeekday: DSControlledDateTimePickerT.MetaMonthDay[][];\n invisibleLastDay?: DSControlledDateTimePickerT.MetaMonthDay;\n handlePrevMonth: () => void;\n handlePrevYear: () => void;\n handleNextMonth: () => void;\n handleNextYear: () => void;\n daysArraysRef: React.MutableRefObject<DSControlledDateTimePickerT.MetaMonthDay[]>;\n resetMonthYear: () => void;\n}\n\nconst getDaysArrays = (currentMonth: DSControlledDateTimePickerInternalsT.DateMonth, currentYear: number) => {\n const newDaysArray = getSixBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);\n const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {\n daysToSum: -1,\n });\n const hiddenPrevMetaday = {\n day: hiddenPrevDay,\n dayAsString: getDateStringFromDay(hiddenPrevDay),\n isPrevMonthDay: true,\n isNextMonthDay: false,\n isCurrMonthDay: false,\n dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n isHidden: true,\n };\n const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {\n daysToSum: 1,\n });\n const hiddenNextMetaday = {\n day: hiddenNextDay,\n dayAsString: getDateStringFromDay(hiddenNextDay),\n isPrevMonthDay: false,\n isNextMonthDay: true,\n isCurrMonthDay: false,\n dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n isHidden: true,\n };\n return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];\n};\nexport const useCurrentDisplayedMonthYearLogic = (): UseCurrentDisplayedMonthYearLogicT => {\n const { month: monthFromDateStringFallback, year: yearFromDateStringFallback } =\n useGetMonthYearFromDateStringOrEmptyStartingMonth();\n const { startFocusedDate } = useGetStartingFocusedDay();\n\n /*\n * PUI-15900 https://jira.elliemae.io/browse/PUI-15900\n *\n * The displayed month must stay aligned with the day the calendar will focus on open\n * (see useFocusLogic / useGetStartingFocusedDay). When the input holds a partial date\n * (e.g. a month with no day/year), `useGetMonthYearFromDateStringOrEmptyStartingMonth`\n * would drive the grid to that partial month, while the starting focused day resolves\n * to `onCalendarOpenFocusedDay` \u2014 a day in a different month that is then not rendered,\n * so focus is lost.\n *\n * Whenever a starting focused day is resolved (a complete valid input date, or\n * `onCalendarOpenFocusedDay` when the input is incomplete) the grid follows THAT day's\n * month/year, so the focused day is always visible. Only when there is no starting\n * focused day do we fall back to the input/emptyPickerStartingMonth month.\n */\n const monthFromDateString = startFocusedDate\n ? (startFocusedDate.getMonth() as DSControlledDateTimePickerInternalsT.DateMonth)\n : monthFromDateStringFallback;\n const yearFromDateString = startFocusedDate ? startFocusedDate.getFullYear() : yearFromDateStringFallback;\n\n const [currentMonth, setCurrentMonth] = useState(monthFromDateString);\n const [currentYear, setCurrentYear] = useState(yearFromDateString);\n\n const daysArraysRef = useRef<DSControlledDateTimePickerT.MetaMonthDay[]>([]);\n\n const resetMonthYear = useCallback(() => {\n setCurrentMonth(monthFromDateString);\n setCurrentYear(yearFromDateString);\n }, [monthFromDateString, yearFromDateString]);\n // side-effects are really really controlled in this case so use-effect should be fine\n // don't add 200 side-effects to those or else Chaos would hunt us for the years to come\n useEffect(() => {\n setCurrentMonth(monthFromDateString);\n }, [monthFromDateString]);\n useEffect(() => {\n setCurrentYear(yearFromDateString);\n }, [yearFromDateString]);\n\n const daysArray = useMemo(() => getDaysArrays(currentMonth, currentYear), [currentMonth, currentYear]);\n\n daysArraysRef.current = daysArray;\n\n const handlePrevYear = useCallback(() => {\n const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: -1 });\n setCurrentYear(newYear);\n }, [currentMonth, currentYear]);\n\n const handlePrevMonth = useCallback(() => {\n const { month: newMonth, year: newYear } = sumFromDateValues(\n { month: currentMonth, year: currentYear },\n { monthsToSum: -1 },\n );\n setCurrentMonth(newMonth);\n setCurrentYear(newYear);\n daysArraysRef.current = getDaysArrays(newMonth, newYear);\n }, [currentMonth, currentYear]);\n\n const handleNextMonth = useCallback(() => {\n const { month: newMonth, year: newYear } = sumFromDateValues(\n { month: currentMonth, year: currentYear },\n { monthsToSum: 1 },\n );\n setCurrentMonth(newMonth);\n setCurrentYear(newYear);\n daysArraysRef.current = getDaysArrays(newMonth, newYear);\n }, [currentMonth, currentYear]);\n\n const handleNextYear = useCallback(() => {\n const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: 1 });\n setCurrentYear(newYear);\n }, [currentMonth, currentYear]);\n\n const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay } = useMemo(() => {\n const [invisible1stDay, ...otherDays] = [...daysArray];\n const invisibleDayLast = otherDays.pop();\n return {\n invisibleFirstDay: invisible1stDay,\n daysMatrixByWeekday: sliceIntoChunks<DSControlledDateTimePickerT.MetaMonthDay>(otherDays, 7),\n invisibleLastDay: invisibleDayLast,\n };\n }, [daysArray]);\n\n return useMemo(\n () => ({\n currentMonth,\n currentYear,\n daysArray,\n invisibleFirstDay,\n daysMatrixByWeekday,\n invisibleLastDay,\n handlePrevYear,\n handlePrevMonth,\n handleNextMonth,\n handleNextYear,\n daysArraysRef,\n resetMonthYear,\n }),\n [\n currentMonth,\n currentYear,\n daysArray,\n daysMatrixByWeekday,\n handleNextMonth,\n handleNextYear,\n handlePrevMonth,\n handlePrevYear,\n invisibleFirstDay,\n invisibleLastDay,\n resetMonthYear,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|