@elliemae/ds-form-date-time-picker 3.13.0-next.1 → 3.13.0-next.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/useGlobalKeyHandlers.js +11 -4
- package/dist/cjs/config/useGlobalKeyHandlers.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js +7 -2
- package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map +2 -2
- package/dist/cjs/parts/Styleds.js +2 -1
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/esm/config/useGlobalKeyHandlers.js +11 -4
- package/dist/esm/config/useGlobalKeyHandlers.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/useKeyboardHandlers.js +7 -2
- package/dist/esm/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map +2 -2
- package/dist/esm/parts/Styleds.js +2 -1
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/package.json +8 -8
|
@@ -32,7 +32,7 @@ var import_react = require("react");
|
|
|
32
32
|
var import_dateHelpers = require("../utils/dateHelpers");
|
|
33
33
|
var import_timeHelpers = require("../utils/timeHelpers");
|
|
34
34
|
var import_stringHelpers = require("../utils/stringHelpers");
|
|
35
|
-
const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers }) => {
|
|
35
|
+
const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }) => {
|
|
36
36
|
const {
|
|
37
37
|
getIsOutOfRangeDay,
|
|
38
38
|
getIsDisabledDay,
|
|
@@ -45,7 +45,8 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
|
|
|
45
45
|
appOnMeridiemChange
|
|
46
46
|
} = propsBasedOnType;
|
|
47
47
|
const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;
|
|
48
|
-
const { trackFocusLastSegment } = focusTrackers;
|
|
48
|
+
const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;
|
|
49
|
+
const { withAnyPicker, shouldPreserveClearableSpace } = flags;
|
|
49
50
|
const onFillWithCurrentDateKeys = (0, import_react.useCallback)(
|
|
50
51
|
(e, metaInfo = { isAutomaticFillTrigger: true }) => {
|
|
51
52
|
const now = new Date();
|
|
@@ -66,7 +67,10 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
|
|
|
66
67
|
appOnMinuteChange(minutes, e, metaInfo);
|
|
67
68
|
appOnMeridiemChange(meridiem, e, metaInfo);
|
|
68
69
|
handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
|
|
69
|
-
|
|
70
|
+
if (shouldPreserveClearableSpace && !withAnyPicker)
|
|
71
|
+
trackFocusClearBtn();
|
|
72
|
+
else
|
|
73
|
+
trackFocusLastSegment();
|
|
70
74
|
},
|
|
71
75
|
[
|
|
72
76
|
appOnDayChange,
|
|
@@ -79,7 +83,10 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
|
|
|
79
83
|
getIsDisabledTime,
|
|
80
84
|
getIsOutOfRangeDay,
|
|
81
85
|
handleChangeComposedDateTimeString,
|
|
82
|
-
|
|
86
|
+
shouldPreserveClearableSpace,
|
|
87
|
+
trackFocusClearBtn,
|
|
88
|
+
trackFocusLastSegment,
|
|
89
|
+
withAnyPicker
|
|
83
90
|
]
|
|
84
91
|
);
|
|
85
92
|
const onGlobalKeyDown = (0, import_react.useCallback)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useGlobalKeyHandlers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo } from 'react';\nimport type { useChangeHandlers } from './useChangeHandlers';\nimport type { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport type { useGetReferences } from './useGetReferences';\nimport type { useGetFlags } from './useGetFlags';\nimport type { useFocusTracker } from './useFocusTracker';\nimport { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers';\nimport { getValidationTimeStringMetaInfo } from '../utils/timeHelpers';\nimport { deconstructValuesFromDateString, deconstructValuesFromTimeString } from '../utils/stringHelpers';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\ninterface Config {\n propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;\n changeHandlers: ReturnType<typeof useChangeHandlers>;\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n focusTrackers: ReturnType<typeof useFocusTracker>;\n}\n\nexport const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers }: Config) => {\n const {\n getIsOutOfRangeDay,\n getIsDisabledDay,\n getIsDisabledTime,\n appOnMonthChange,\n appOnDayChange,\n appOnYearChange,\n appOnHourChange,\n appOnMinuteChange,\n appOnMeridiemChange,\n } = propsBasedOnType;\n const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;\n const { trackFocusLastSegment } = focusTrackers;\n\n const onFillWithCurrentDateKeys = useCallback(\n (\n e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>,\n metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo> = { isAutomaticFillTrigger: true },\n ) => {\n const now = new Date();\n const nowDateString = getDateStringFromDay(now);\n const nowTimeString = getTimeStringFromDay(now);\n const finalMetaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo = {\n ...metaInfo,\n ...getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay),\n ...getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime),\n newDateString: nowDateString,\n };\n const { month, day, year } = deconstructValuesFromDateString(nowDateString);\n appOnMonthChange(month, e, metaInfo);\n appOnDayChange(day, e, metaInfo);\n appOnYearChange(year, e, metaInfo);\n const { hours, minutes, meridiem } = deconstructValuesFromTimeString(nowTimeString);\n appOnHourChange(hours, e, metaInfo);\n appOnMinuteChange(minutes, e, metaInfo);\n appOnMeridiemChange(meridiem, e, metaInfo);\n handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);\n trackFocusLastSegment();\n },\n [\n appOnDayChange,\n appOnHourChange,\n appOnMeridiemChange,\n appOnMinuteChange,\n appOnMonthChange,\n appOnYearChange,\n getIsDisabledDay,\n getIsDisabledTime,\n getIsOutOfRangeDay,\n handleChangeComposedDateTimeString,\n trackFocusLastSegment,\n ],\n );\n\n const onGlobalKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n const { key, ctrlKey, metaKey } = e;\n if ((ctrlKey || metaKey) && key === ';') {\n onFillWithCurrentDateKeys(e);\n }\n if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);\n },\n [handleClearAll, onFillWithCurrentDateKeys],\n );\n\n return useMemo(\n () => ({\n onFillWithCurrentDateKeys,\n onGlobalKeyDown,\n }),\n [onFillWithCurrentDateKeys, onGlobalKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAqC;AAMrC,yBAA4F;AAC5F,yBAAgD;AAChD,2BAAiF;AAW1E,MAAM,uBAAuB,CAAC,EAAE,kBAAkB,gBAAgB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo } from 'react';\nimport type { useChangeHandlers } from './useChangeHandlers';\nimport type { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport type { useGetReferences } from './useGetReferences';\nimport type { useGetFlags } from './useGetFlags';\nimport type { useFocusTracker } from './useFocusTracker';\nimport { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers';\nimport { getValidationTimeStringMetaInfo } from '../utils/timeHelpers';\nimport { deconstructValuesFromDateString, deconstructValuesFromTimeString } from '../utils/stringHelpers';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\ninterface Config {\n propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;\n changeHandlers: ReturnType<typeof useChangeHandlers>;\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n focusTrackers: ReturnType<typeof useFocusTracker>;\n}\n\nexport const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }: Config) => {\n const {\n getIsOutOfRangeDay,\n getIsDisabledDay,\n getIsDisabledTime,\n appOnMonthChange,\n appOnDayChange,\n appOnYearChange,\n appOnHourChange,\n appOnMinuteChange,\n appOnMeridiemChange,\n } = propsBasedOnType;\n const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;\n const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;\n const { withAnyPicker, shouldPreserveClearableSpace } = flags;\n\n const onFillWithCurrentDateKeys = useCallback(\n (\n e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>,\n metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo> = { isAutomaticFillTrigger: true },\n ) => {\n const now = new Date();\n const nowDateString = getDateStringFromDay(now);\n const nowTimeString = getTimeStringFromDay(now);\n const finalMetaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo = {\n ...metaInfo,\n ...getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay),\n ...getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime),\n newDateString: nowDateString,\n };\n const { month, day, year } = deconstructValuesFromDateString(nowDateString);\n appOnMonthChange(month, e, metaInfo);\n appOnDayChange(day, e, metaInfo);\n appOnYearChange(year, e, metaInfo);\n const { hours, minutes, meridiem } = deconstructValuesFromTimeString(nowTimeString);\n appOnHourChange(hours, e, metaInfo);\n appOnMinuteChange(minutes, e, metaInfo);\n appOnMeridiemChange(meridiem, e, metaInfo);\n handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);\n // trackFocusLastSegment is not enough here,\n // after this key combination the value may change from empty to non-empty\n // when non empty the last segment may become the clear-btn (clear btn only appears when non empty)\n // as such this must be micro-managed here\n if (shouldPreserveClearableSpace && !withAnyPicker) trackFocusClearBtn();\n else trackFocusLastSegment();\n },\n [\n appOnDayChange,\n appOnHourChange,\n appOnMeridiemChange,\n appOnMinuteChange,\n appOnMonthChange,\n appOnYearChange,\n getIsDisabledDay,\n getIsDisabledTime,\n getIsOutOfRangeDay,\n handleChangeComposedDateTimeString,\n shouldPreserveClearableSpace,\n trackFocusClearBtn,\n trackFocusLastSegment,\n withAnyPicker,\n ],\n );\n\n const onGlobalKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n const { key, ctrlKey, metaKey } = e;\n if ((ctrlKey || metaKey) && key === ';') {\n onFillWithCurrentDateKeys(e);\n }\n if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);\n },\n [handleClearAll, onFillWithCurrentDateKeys],\n );\n\n return useMemo(\n () => ({\n onFillWithCurrentDateKeys,\n onGlobalKeyDown,\n }),\n [onFillWithCurrentDateKeys, onGlobalKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAqC;AAMrC,yBAA4F;AAC5F,yBAAgD;AAChD,2BAAiF;AAW1E,MAAM,uBAAuB,CAAC,EAAE,kBAAkB,gBAAgB,eAAe,MAAM,MAAc;AAC1G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,oCAAoC,eAAe,IAAI;AAC/D,QAAM,EAAE,uBAAuB,mBAAmB,IAAI;AACtD,QAAM,EAAE,eAAe,6BAA6B,IAAI;AAExD,QAAM,gCAA4B;AAAA,IAChC,CACE,GACA,WAA8E,EAAE,wBAAwB,KAAK,MAC1G;AACH,YAAM,MAAM,IAAI,KAAK;AACrB,YAAM,oBAAgB,yCAAqB,GAAG;AAC9C,YAAM,oBAAgB,yCAAqB,GAAG;AAC9C,YAAM,gBAA0E;AAAA,QAC9E,GAAG;AAAA,QACH,OAAG,oDAAgC,eAAe,oBAAoB,gBAAgB;AAAA,QACtF,OAAG,oDAAgC,eAAe,iBAAiB;AAAA,QACnE,eAAe;AAAA,MACjB;AACA,YAAM,EAAE,OAAO,KAAK,KAAK,QAAI,sDAAgC,aAAa;AAC1E,uBAAiB,OAAO,GAAG,QAAQ;AACnC,qBAAe,KAAK,GAAG,QAAQ;AAC/B,sBAAgB,MAAM,GAAG,QAAQ;AACjC,YAAM,EAAE,OAAO,SAAS,SAAS,QAAI,sDAAgC,aAAa;AAClF,sBAAgB,OAAO,GAAG,QAAQ;AAClC,wBAAkB,SAAS,GAAG,QAAQ;AACtC,0BAAoB,UAAU,GAAG,QAAQ;AACzC,yCAAmC,eAAe,eAAe,aAAa;AAK9E,UAAI,gCAAgC,CAAC;AAAe,2BAAmB;AAAA;AAClE,8BAAsB;AAAA,IAC7B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAiE;AAChE,YAAM,EAAE,KAAK,SAAS,QAAQ,IAAI;AAClC,WAAK,WAAW,YAAY,QAAQ,KAAK;AACvC,kCAA0B,CAAC;AAAA,MAC7B;AACA,WAAK,WAAW,aAAa,QAAQ,YAAY,QAAQ;AAAc,uBAAe,CAAC;AAAA,IACzF;AAAA,IACA,CAAC,gBAAgB,yBAAyB;AAAA,EAC5C;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,eAAe;AAAA,EAC7C;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,7 +44,8 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
|
|
|
44
44
|
trackFocusTimewheelCurrMeridiem,
|
|
45
45
|
trackFocusFirstSegment,
|
|
46
46
|
trackFocusMeridiemInput,
|
|
47
|
-
trackFocusYearInput
|
|
47
|
+
trackFocusYearInput,
|
|
48
|
+
trackFocusCalendarMetafocusedDay
|
|
48
49
|
} = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
49
50
|
const onHomeKeyDownInsideTimeWheel = (0, import_react.useCallback)(() => {
|
|
50
51
|
if (isWithCalendarToo)
|
|
@@ -114,6 +115,9 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
|
|
|
114
115
|
trackFocusTimewheelCurrMeridiem();
|
|
115
116
|
}
|
|
116
117
|
}
|
|
118
|
+
if (key === "Tab" && shiftKey && isWithCalendarToo) {
|
|
119
|
+
trackFocusCalendarMetafocusedDay();
|
|
120
|
+
}
|
|
117
121
|
},
|
|
118
122
|
[
|
|
119
123
|
handleNextHour,
|
|
@@ -124,7 +128,8 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
|
|
|
124
128
|
onHomeKeyDownInsideTimeWheel,
|
|
125
129
|
trackFocusTimewheelCurrHour,
|
|
126
130
|
trackFocusTimewheelCurrMeridiem,
|
|
127
|
-
trackFocusTimewheelCurrMinute
|
|
131
|
+
trackFocusTimewheelCurrMinute,
|
|
132
|
+
trackFocusCalendarMetafocusedDay
|
|
128
133
|
]
|
|
129
134
|
);
|
|
130
135
|
const handleCurrMinutesOnKeyDown = (0, import_react.useCallback)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/useKeyboardHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nimport type { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic';\ninterface UseKeyboardHandlersArgs {\n currentDisplayedTimeWheelLogic: ReturnType<typeof useCurrentDisplayedWheelsLogic>;\n}\ninterface KeyboardHandlersT {\n handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }: UseKeyboardHandlersArgs): KeyboardHandlersT => {\n const { handlePrevHour, handleNextHour, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMeridiem } =\n currentDisplayedTimeWheelLogic;\n const {\n withAnyInputs,\n isWithTimeInputs,\n isWithDateInputs,\n isWithCalendarToo,\n isControllerOnly,\n\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMinute,\n trackFocusTimewheelCurrMeridiem,\n trackFocusFirstSegment,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n } = useContext(ControlledDateTimePickerContext);\n const onHomeKeyDownInsideTimeWheel = useCallback(() => {\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);\n const onEndKeyDownInsideTimeWheel = useCallback(() => {\n trackFocusTimewheelCurrMeridiem();\n }, [trackFocusTimewheelCurrMeridiem]);\n\n const onHomeKeyDownTriggerIcon = useCallback(() => {\n trackFocusFirstSegment();\n }, [trackFocusFirstSegment]);\n const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End'].includes(key)) e.preventDefault();\n if (['Home', 'End'].includes(key)) e.stopPropagation();\n if (key === 'Home') onHomeKeyDownTriggerIcon();\n if (key === 'Backspace' && withAnyInputs) {\n if (isWithTimeInputs) trackFocusMeridiemInput();\n else if (isWithDateInputs) trackFocusYearInput();\n }\n },\n [\n isWithDateInputs,\n isWithTimeInputs,\n onHomeKeyDownTriggerIcon,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n withAnyInputs,\n ],\n );\n\n const handleCurrHourOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerHourChange = false;\n if (key === 'ArrowUp') {\n handlePrevHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerHourChange) trackFocusTimewheelCurrHour();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && shiftKey && !isWithCalendarToo) {\n e.preventDefault();\n trackFocusTimewheelCurrMeridiem();\n }\n },\n [\n handleNextHour,\n handlePrevHour,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n const handleCurrMinutesOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMinuteChange = false;\n if (key === 'ArrowUp') {\n handlePrevMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrHour();\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMeridiem();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();\n },\n [\n onHomeKeyDownInsideTimeWheel,\n onEndKeyDownInsideTimeWheel,\n handlePrevMinute,\n handleNextMinute,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n const handleCurrMeridiemOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMeridiemChange = false;\n if (key === 'ArrowUp') {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowDown') {\n handleTimeWheelBtnChangeMeridiem('PM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && !shiftKey) {\n e.preventDefault();\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }\n },\n [\n handleTimeWheelBtnChangeMeridiem,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n\n return useMemo(\n () => ({\n handleCurrHourOnKeyDown,\n handleCurrMinutesOnKeyDown,\n handleCurrMeridiemOnKeyDown,\n handlePickerIconKeyDown,\n }),\n [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAiD;AACjD,yCAAgD;AAYzC,MAAM,sBAAsB,CAAC,EAAE,+BAA+B,MAAkD;AACrH,QAAM,EAAE,gBAAgB,gBAAgB,kBAAkB,kBAAkB,iCAAiC,IAC3G;AACF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nimport type { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic';\ninterface UseKeyboardHandlersArgs {\n currentDisplayedTimeWheelLogic: ReturnType<typeof useCurrentDisplayedWheelsLogic>;\n}\ninterface KeyboardHandlersT {\n handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }: UseKeyboardHandlersArgs): KeyboardHandlersT => {\n const { handlePrevHour, handleNextHour, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMeridiem } =\n currentDisplayedTimeWheelLogic;\n const {\n withAnyInputs,\n isWithTimeInputs,\n isWithDateInputs,\n isWithCalendarToo,\n isControllerOnly,\n\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMinute,\n trackFocusTimewheelCurrMeridiem,\n trackFocusFirstSegment,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n trackFocusCalendarMetafocusedDay,\n } = useContext(ControlledDateTimePickerContext);\n\n // const tryToFocusDayRegion = useCallback(() => {\n // if (!focusedDay) {\n // const newFocusDay = daysArray.find(({ isCurrMonthDay }) => isCurrMonthDay);\n // if (newFocusDay) handleFocusMetaDay(newFocusDay);\n // }\n // trackFocusCalendarMetafocusedDay();\n // }, [daysArray, focusedDay, handleFocusMetaDay, trackFocusCalendarMetafocusedDay]);\n\n const onHomeKeyDownInsideTimeWheel = useCallback(() => {\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);\n const onEndKeyDownInsideTimeWheel = useCallback(() => {\n trackFocusTimewheelCurrMeridiem();\n }, [trackFocusTimewheelCurrMeridiem]);\n\n const onHomeKeyDownTriggerIcon = useCallback(() => {\n trackFocusFirstSegment();\n }, [trackFocusFirstSegment]);\n const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End'].includes(key)) e.preventDefault();\n if (['Home', 'End'].includes(key)) e.stopPropagation();\n if (key === 'Home') onHomeKeyDownTriggerIcon();\n if (key === 'Backspace' && withAnyInputs) {\n if (isWithTimeInputs) trackFocusMeridiemInput();\n else if (isWithDateInputs) trackFocusYearInput();\n }\n },\n [\n isWithDateInputs,\n isWithTimeInputs,\n onHomeKeyDownTriggerIcon,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n withAnyInputs,\n ],\n );\n\n const handleCurrHourOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerHourChange = false;\n if (key === 'ArrowUp') {\n handlePrevHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerHourChange) trackFocusTimewheelCurrHour();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && shiftKey && !isWithCalendarToo) {\n e.preventDefault();\n trackFocusTimewheelCurrMeridiem();\n }\n\n if (key === 'Tab' && shiftKey && isWithCalendarToo) {\n trackFocusCalendarMetafocusedDay();\n }\n },\n [\n handleNextHour,\n handlePrevHour,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n trackFocusCalendarMetafocusedDay,\n ],\n );\n const handleCurrMinutesOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMinuteChange = false;\n if (key === 'ArrowUp') {\n handlePrevMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrHour();\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMeridiem();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();\n },\n [\n onHomeKeyDownInsideTimeWheel,\n onEndKeyDownInsideTimeWheel,\n handlePrevMinute,\n handleNextMinute,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n const handleCurrMeridiemOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMeridiemChange = false;\n if (key === 'ArrowUp') {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowDown') {\n handleTimeWheelBtnChangeMeridiem('PM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && !shiftKey) {\n e.preventDefault();\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }\n },\n [\n handleTimeWheelBtnChangeMeridiem,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n\n return useMemo(\n () => ({\n handleCurrHourOnKeyDown,\n handleCurrMinutesOnKeyDown,\n handleCurrMeridiemOnKeyDown,\n handlePickerIconKeyDown,\n }),\n [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -98,7 +98,8 @@ const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
|
98
98
|
|
|
99
99
|
border-radius: 2px;
|
|
100
100
|
padding-left: ${({ justPicker }) => justPicker ? "0" : "2px"};
|
|
101
|
-
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "
|
|
101
|
+
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
|
|
102
|
+
|
|
102
103
|
position: relative;
|
|
103
104
|
${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
|
|
104
105
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Styleds.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,cAAc,MAAO,gBAAgB,KAAK;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 48px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n ${({ theme, isControllerOnly, hasError }) =>\n isControllerOnly\n ? ``\n : `\n border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n `}\n }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n position: relative;\n &:focus-within {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: -5px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 10px);\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})`\n height: 26px;\n position: relative;\n visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n &:focus {\n &:after {\n z-index: 1;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,cAAc,MAAO,gBAAgB,KAAK;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGtF,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,oCAAgC,yBAAO,mBAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
|
|
|
3
3
|
import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from "../utils/dateHelpers";
|
|
4
4
|
import { getValidationTimeStringMetaInfo } from "../utils/timeHelpers";
|
|
5
5
|
import { deconstructValuesFromDateString, deconstructValuesFromTimeString } from "../utils/stringHelpers";
|
|
6
|
-
const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers }) => {
|
|
6
|
+
const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }) => {
|
|
7
7
|
const {
|
|
8
8
|
getIsOutOfRangeDay,
|
|
9
9
|
getIsDisabledDay,
|
|
@@ -16,7 +16,8 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
|
|
|
16
16
|
appOnMeridiemChange
|
|
17
17
|
} = propsBasedOnType;
|
|
18
18
|
const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;
|
|
19
|
-
const { trackFocusLastSegment } = focusTrackers;
|
|
19
|
+
const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;
|
|
20
|
+
const { withAnyPicker, shouldPreserveClearableSpace } = flags;
|
|
20
21
|
const onFillWithCurrentDateKeys = useCallback(
|
|
21
22
|
(e, metaInfo = { isAutomaticFillTrigger: true }) => {
|
|
22
23
|
const now = new Date();
|
|
@@ -37,7 +38,10 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
|
|
|
37
38
|
appOnMinuteChange(minutes, e, metaInfo);
|
|
38
39
|
appOnMeridiemChange(meridiem, e, metaInfo);
|
|
39
40
|
handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
|
|
40
|
-
|
|
41
|
+
if (shouldPreserveClearableSpace && !withAnyPicker)
|
|
42
|
+
trackFocusClearBtn();
|
|
43
|
+
else
|
|
44
|
+
trackFocusLastSegment();
|
|
41
45
|
},
|
|
42
46
|
[
|
|
43
47
|
appOnDayChange,
|
|
@@ -50,7 +54,10 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
|
|
|
50
54
|
getIsDisabledTime,
|
|
51
55
|
getIsOutOfRangeDay,
|
|
52
56
|
handleChangeComposedDateTimeString,
|
|
53
|
-
|
|
57
|
+
shouldPreserveClearableSpace,
|
|
58
|
+
trackFocusClearBtn,
|
|
59
|
+
trackFocusLastSegment,
|
|
60
|
+
withAnyPicker
|
|
54
61
|
]
|
|
55
62
|
);
|
|
56
63
|
const onGlobalKeyDown = useCallback(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGlobalKeyHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo } from 'react';\nimport type { useChangeHandlers } from './useChangeHandlers';\nimport type { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport type { useGetReferences } from './useGetReferences';\nimport type { useGetFlags } from './useGetFlags';\nimport type { useFocusTracker } from './useFocusTracker';\nimport { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers';\nimport { getValidationTimeStringMetaInfo } from '../utils/timeHelpers';\nimport { deconstructValuesFromDateString, deconstructValuesFromTimeString } from '../utils/stringHelpers';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\ninterface Config {\n propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;\n changeHandlers: ReturnType<typeof useChangeHandlers>;\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n focusTrackers: ReturnType<typeof useFocusTracker>;\n}\n\nexport const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers }: Config) => {\n const {\n getIsOutOfRangeDay,\n getIsDisabledDay,\n getIsDisabledTime,\n appOnMonthChange,\n appOnDayChange,\n appOnYearChange,\n appOnHourChange,\n appOnMinuteChange,\n appOnMeridiemChange,\n } = propsBasedOnType;\n const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;\n const { trackFocusLastSegment } = focusTrackers;\n\n const onFillWithCurrentDateKeys = useCallback(\n (\n e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>,\n metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo> = { isAutomaticFillTrigger: true },\n ) => {\n const now = new Date();\n const nowDateString = getDateStringFromDay(now);\n const nowTimeString = getTimeStringFromDay(now);\n const finalMetaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo = {\n ...metaInfo,\n ...getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay),\n ...getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime),\n newDateString: nowDateString,\n };\n const { month, day, year } = deconstructValuesFromDateString(nowDateString);\n appOnMonthChange(month, e, metaInfo);\n appOnDayChange(day, e, metaInfo);\n appOnYearChange(year, e, metaInfo);\n const { hours, minutes, meridiem } = deconstructValuesFromTimeString(nowTimeString);\n appOnHourChange(hours, e, metaInfo);\n appOnMinuteChange(minutes, e, metaInfo);\n appOnMeridiemChange(meridiem, e, metaInfo);\n handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);\n trackFocusLastSegment();\n },\n [\n appOnDayChange,\n appOnHourChange,\n appOnMeridiemChange,\n appOnMinuteChange,\n appOnMonthChange,\n appOnYearChange,\n getIsDisabledDay,\n getIsDisabledTime,\n getIsOutOfRangeDay,\n handleChangeComposedDateTimeString,\n trackFocusLastSegment,\n ],\n );\n\n const onGlobalKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n const { key, ctrlKey, metaKey } = e;\n if ((ctrlKey || metaKey) && key === ';') {\n onFillWithCurrentDateKeys(e);\n }\n if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);\n },\n [handleClearAll, onFillWithCurrentDateKeys],\n );\n\n return useMemo(\n () => ({\n onFillWithCurrentDateKeys,\n onGlobalKeyDown,\n }),\n [onFillWithCurrentDateKeys, onGlobalKeyDown],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,eAAe;AAMrC,SAAS,iCAAiC,sBAAsB,4BAA4B;AAC5F,SAAS,uCAAuC;AAChD,SAAS,iCAAiC,uCAAuC;AAW1E,MAAM,uBAAuB,CAAC,EAAE,kBAAkB,gBAAgB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo } from 'react';\nimport type { useChangeHandlers } from './useChangeHandlers';\nimport type { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport type { useGetReferences } from './useGetReferences';\nimport type { useGetFlags } from './useGetFlags';\nimport type { useFocusTracker } from './useFocusTracker';\nimport { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers';\nimport { getValidationTimeStringMetaInfo } from '../utils/timeHelpers';\nimport { deconstructValuesFromDateString, deconstructValuesFromTimeString } from '../utils/stringHelpers';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\ninterface Config {\n propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;\n changeHandlers: ReturnType<typeof useChangeHandlers>;\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n focusTrackers: ReturnType<typeof useFocusTracker>;\n}\n\nexport const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }: Config) => {\n const {\n getIsOutOfRangeDay,\n getIsDisabledDay,\n getIsDisabledTime,\n appOnMonthChange,\n appOnDayChange,\n appOnYearChange,\n appOnHourChange,\n appOnMinuteChange,\n appOnMeridiemChange,\n } = propsBasedOnType;\n const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;\n const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;\n const { withAnyPicker, shouldPreserveClearableSpace } = flags;\n\n const onFillWithCurrentDateKeys = useCallback(\n (\n e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>,\n metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo> = { isAutomaticFillTrigger: true },\n ) => {\n const now = new Date();\n const nowDateString = getDateStringFromDay(now);\n const nowTimeString = getTimeStringFromDay(now);\n const finalMetaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo = {\n ...metaInfo,\n ...getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay),\n ...getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime),\n newDateString: nowDateString,\n };\n const { month, day, year } = deconstructValuesFromDateString(nowDateString);\n appOnMonthChange(month, e, metaInfo);\n appOnDayChange(day, e, metaInfo);\n appOnYearChange(year, e, metaInfo);\n const { hours, minutes, meridiem } = deconstructValuesFromTimeString(nowTimeString);\n appOnHourChange(hours, e, metaInfo);\n appOnMinuteChange(minutes, e, metaInfo);\n appOnMeridiemChange(meridiem, e, metaInfo);\n handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);\n // trackFocusLastSegment is not enough here,\n // after this key combination the value may change from empty to non-empty\n // when non empty the last segment may become the clear-btn (clear btn only appears when non empty)\n // as such this must be micro-managed here\n if (shouldPreserveClearableSpace && !withAnyPicker) trackFocusClearBtn();\n else trackFocusLastSegment();\n },\n [\n appOnDayChange,\n appOnHourChange,\n appOnMeridiemChange,\n appOnMinuteChange,\n appOnMonthChange,\n appOnYearChange,\n getIsDisabledDay,\n getIsDisabledTime,\n getIsOutOfRangeDay,\n handleChangeComposedDateTimeString,\n shouldPreserveClearableSpace,\n trackFocusClearBtn,\n trackFocusLastSegment,\n withAnyPicker,\n ],\n );\n\n const onGlobalKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n const { key, ctrlKey, metaKey } = e;\n if ((ctrlKey || metaKey) && key === ';') {\n onFillWithCurrentDateKeys(e);\n }\n if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);\n },\n [handleClearAll, onFillWithCurrentDateKeys],\n );\n\n return useMemo(\n () => ({\n onFillWithCurrentDateKeys,\n onGlobalKeyDown,\n }),\n [onFillWithCurrentDateKeys, onGlobalKeyDown],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,eAAe;AAMrC,SAAS,iCAAiC,sBAAsB,4BAA4B;AAC5F,SAAS,uCAAuC;AAChD,SAAS,iCAAiC,uCAAuC;AAW1E,MAAM,uBAAuB,CAAC,EAAE,kBAAkB,gBAAgB,eAAe,MAAM,MAAc;AAC1G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,oCAAoC,eAAe,IAAI;AAC/D,QAAM,EAAE,uBAAuB,mBAAmB,IAAI;AACtD,QAAM,EAAE,eAAe,6BAA6B,IAAI;AAExD,QAAM,4BAA4B;AAAA,IAChC,CACE,GACA,WAA8E,EAAE,wBAAwB,KAAK,MAC1G;AACH,YAAM,MAAM,IAAI,KAAK;AACrB,YAAM,gBAAgB,qBAAqB,GAAG;AAC9C,YAAM,gBAAgB,qBAAqB,GAAG;AAC9C,YAAM,gBAA0E;AAAA,QAC9E,GAAG;AAAA,QACH,GAAG,gCAAgC,eAAe,oBAAoB,gBAAgB;AAAA,QACtF,GAAG,gCAAgC,eAAe,iBAAiB;AAAA,QACnE,eAAe;AAAA,MACjB;AACA,YAAM,EAAE,OAAO,KAAK,KAAK,IAAI,gCAAgC,aAAa;AAC1E,uBAAiB,OAAO,GAAG,QAAQ;AACnC,qBAAe,KAAK,GAAG,QAAQ;AAC/B,sBAAgB,MAAM,GAAG,QAAQ;AACjC,YAAM,EAAE,OAAO,SAAS,SAAS,IAAI,gCAAgC,aAAa;AAClF,sBAAgB,OAAO,GAAG,QAAQ;AAClC,wBAAkB,SAAS,GAAG,QAAQ;AACtC,0BAAoB,UAAU,GAAG,QAAQ;AACzC,yCAAmC,eAAe,eAAe,aAAa;AAK9E,UAAI,gCAAgC,CAAC;AAAe,2BAAmB;AAAA;AAClE,8BAAsB;AAAA,IAC7B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAiE;AAChE,YAAM,EAAE,KAAK,SAAS,QAAQ,IAAI;AAClC,WAAK,WAAW,YAAY,QAAQ,KAAK;AACvC,kCAA0B,CAAC;AAAA,MAC7B;AACA,WAAK,WAAW,aAAa,QAAQ,YAAY,QAAQ;AAAc,uBAAe,CAAC;AAAA,IACzF;AAAA,IACA,CAAC,gBAAgB,yBAAyB;AAAA,EAC5C;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,eAAe;AAAA,EAC7C;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,7 +15,8 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
|
|
|
15
15
|
trackFocusTimewheelCurrMeridiem,
|
|
16
16
|
trackFocusFirstSegment,
|
|
17
17
|
trackFocusMeridiemInput,
|
|
18
|
-
trackFocusYearInput
|
|
18
|
+
trackFocusYearInput,
|
|
19
|
+
trackFocusCalendarMetafocusedDay
|
|
19
20
|
} = useContext(ControlledDateTimePickerContext);
|
|
20
21
|
const onHomeKeyDownInsideTimeWheel = useCallback(() => {
|
|
21
22
|
if (isWithCalendarToo)
|
|
@@ -85,6 +86,9 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
|
|
|
85
86
|
trackFocusTimewheelCurrMeridiem();
|
|
86
87
|
}
|
|
87
88
|
}
|
|
89
|
+
if (key === "Tab" && shiftKey && isWithCalendarToo) {
|
|
90
|
+
trackFocusCalendarMetafocusedDay();
|
|
91
|
+
}
|
|
88
92
|
},
|
|
89
93
|
[
|
|
90
94
|
handleNextHour,
|
|
@@ -95,7 +99,8 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
|
|
|
95
99
|
onHomeKeyDownInsideTimeWheel,
|
|
96
100
|
trackFocusTimewheelCurrHour,
|
|
97
101
|
trackFocusTimewheelCurrMeridiem,
|
|
98
|
-
trackFocusTimewheelCurrMinute
|
|
102
|
+
trackFocusTimewheelCurrMinute,
|
|
103
|
+
trackFocusCalendarMetafocusedDay
|
|
99
104
|
]
|
|
100
105
|
);
|
|
101
106
|
const handleCurrMinutesOnKeyDown = useCallback(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/useKeyboardHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nimport type { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic';\ninterface UseKeyboardHandlersArgs {\n currentDisplayedTimeWheelLogic: ReturnType<typeof useCurrentDisplayedWheelsLogic>;\n}\ninterface KeyboardHandlersT {\n handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }: UseKeyboardHandlersArgs): KeyboardHandlersT => {\n const { handlePrevHour, handleNextHour, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMeridiem } =\n currentDisplayedTimeWheelLogic;\n const {\n withAnyInputs,\n isWithTimeInputs,\n isWithDateInputs,\n isWithCalendarToo,\n isControllerOnly,\n\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMinute,\n trackFocusTimewheelCurrMeridiem,\n trackFocusFirstSegment,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n } = useContext(ControlledDateTimePickerContext);\n const onHomeKeyDownInsideTimeWheel = useCallback(() => {\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);\n const onEndKeyDownInsideTimeWheel = useCallback(() => {\n trackFocusTimewheelCurrMeridiem();\n }, [trackFocusTimewheelCurrMeridiem]);\n\n const onHomeKeyDownTriggerIcon = useCallback(() => {\n trackFocusFirstSegment();\n }, [trackFocusFirstSegment]);\n const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End'].includes(key)) e.preventDefault();\n if (['Home', 'End'].includes(key)) e.stopPropagation();\n if (key === 'Home') onHomeKeyDownTriggerIcon();\n if (key === 'Backspace' && withAnyInputs) {\n if (isWithTimeInputs) trackFocusMeridiemInput();\n else if (isWithDateInputs) trackFocusYearInput();\n }\n },\n [\n isWithDateInputs,\n isWithTimeInputs,\n onHomeKeyDownTriggerIcon,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n withAnyInputs,\n ],\n );\n\n const handleCurrHourOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerHourChange = false;\n if (key === 'ArrowUp') {\n handlePrevHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerHourChange) trackFocusTimewheelCurrHour();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && shiftKey && !isWithCalendarToo) {\n e.preventDefault();\n trackFocusTimewheelCurrMeridiem();\n }\n },\n [\n handleNextHour,\n handlePrevHour,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n const handleCurrMinutesOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMinuteChange = false;\n if (key === 'ArrowUp') {\n handlePrevMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrHour();\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMeridiem();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();\n },\n [\n onHomeKeyDownInsideTimeWheel,\n onEndKeyDownInsideTimeWheel,\n handlePrevMinute,\n handleNextMinute,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n const handleCurrMeridiemOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMeridiemChange = false;\n if (key === 'ArrowUp') {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowDown') {\n handleTimeWheelBtnChangeMeridiem('PM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && !shiftKey) {\n e.preventDefault();\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }\n },\n [\n handleTimeWheelBtnChangeMeridiem,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n\n return useMemo(\n () => ({\n handleCurrHourOnKeyDown,\n handleCurrMinutesOnKeyDown,\n handleCurrMeridiemOnKeyDown,\n handlePickerIconKeyDown,\n }),\n [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,aAAa,kBAAkB;AACjD,SAAS,uCAAuC;AAYzC,MAAM,sBAAsB,CAAC,EAAE,+BAA+B,MAAkD;AACrH,QAAM,EAAE,gBAAgB,gBAAgB,kBAAkB,kBAAkB,iCAAiC,IAC3G;AACF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nimport type { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic';\ninterface UseKeyboardHandlersArgs {\n currentDisplayedTimeWheelLogic: ReturnType<typeof useCurrentDisplayedWheelsLogic>;\n}\ninterface KeyboardHandlersT {\n handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }: UseKeyboardHandlersArgs): KeyboardHandlersT => {\n const { handlePrevHour, handleNextHour, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMeridiem } =\n currentDisplayedTimeWheelLogic;\n const {\n withAnyInputs,\n isWithTimeInputs,\n isWithDateInputs,\n isWithCalendarToo,\n isControllerOnly,\n\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMinute,\n trackFocusTimewheelCurrMeridiem,\n trackFocusFirstSegment,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n trackFocusCalendarMetafocusedDay,\n } = useContext(ControlledDateTimePickerContext);\n\n // const tryToFocusDayRegion = useCallback(() => {\n // if (!focusedDay) {\n // const newFocusDay = daysArray.find(({ isCurrMonthDay }) => isCurrMonthDay);\n // if (newFocusDay) handleFocusMetaDay(newFocusDay);\n // }\n // trackFocusCalendarMetafocusedDay();\n // }, [daysArray, focusedDay, handleFocusMetaDay, trackFocusCalendarMetafocusedDay]);\n\n const onHomeKeyDownInsideTimeWheel = useCallback(() => {\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);\n const onEndKeyDownInsideTimeWheel = useCallback(() => {\n trackFocusTimewheelCurrMeridiem();\n }, [trackFocusTimewheelCurrMeridiem]);\n\n const onHomeKeyDownTriggerIcon = useCallback(() => {\n trackFocusFirstSegment();\n }, [trackFocusFirstSegment]);\n const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End'].includes(key)) e.preventDefault();\n if (['Home', 'End'].includes(key)) e.stopPropagation();\n if (key === 'Home') onHomeKeyDownTriggerIcon();\n if (key === 'Backspace' && withAnyInputs) {\n if (isWithTimeInputs) trackFocusMeridiemInput();\n else if (isWithDateInputs) trackFocusYearInput();\n }\n },\n [\n isWithDateInputs,\n isWithTimeInputs,\n onHomeKeyDownTriggerIcon,\n trackFocusMeridiemInput,\n trackFocusYearInput,\n withAnyInputs,\n ],\n );\n\n const handleCurrHourOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerHourChange = false;\n if (key === 'ArrowUp') {\n handlePrevHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextHour(e);\n didTriggerHourChange = true;\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerHourChange) trackFocusTimewheelCurrHour();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && shiftKey && !isWithCalendarToo) {\n e.preventDefault();\n trackFocusTimewheelCurrMeridiem();\n }\n\n if (key === 'Tab' && shiftKey && isWithCalendarToo) {\n trackFocusCalendarMetafocusedDay();\n }\n },\n [\n handleNextHour,\n handlePrevHour,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n trackFocusCalendarMetafocusedDay,\n ],\n );\n const handleCurrMinutesOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMinuteChange = false;\n if (key === 'ArrowUp') {\n handlePrevMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowDown') {\n handleNextMinute(e);\n didTriggerMinuteChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrHour();\n }\n if (key === 'ArrowRight') {\n trackFocusTimewheelCurrMeridiem();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();\n },\n [\n onHomeKeyDownInsideTimeWheel,\n onEndKeyDownInsideTimeWheel,\n handlePrevMinute,\n handleNextMinute,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n const handleCurrMeridiemOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const { key, shiftKey } = e;\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n let didTriggerMeridiemChange = false;\n if (key === 'ArrowUp') {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowDown') {\n handleTimeWheelBtnChangeMeridiem('PM', e);\n didTriggerMeridiemChange = true;\n }\n if (key === 'ArrowLeft') {\n trackFocusTimewheelCurrMinute();\n }\n if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n // ensure the focus is in the correct button after up/down arrow\n if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem();\n\n // TAB CYCLE IMPLEMENTATION\n if (!isControllerOnly)\n if (key === 'Tab' && !shiftKey) {\n e.preventDefault();\n if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n else trackFocusTimewheelCurrHour();\n }\n },\n [\n handleTimeWheelBtnChangeMeridiem,\n isControllerOnly,\n isWithCalendarToo,\n onEndKeyDownInsideTimeWheel,\n onHomeKeyDownInsideTimeWheel,\n trackFocusCalendarPrevMonth,\n trackFocusTimewheelCurrHour,\n trackFocusTimewheelCurrMeridiem,\n trackFocusTimewheelCurrMinute,\n ],\n );\n\n return useMemo(\n () => ({\n handleCurrHourOnKeyDown,\n handleCurrMinutesOnKeyDown,\n handleCurrMeridiemOnKeyDown,\n handlePickerIconKeyDown,\n }),\n [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown],\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -60,7 +60,8 @@ const StyledInputsWrapperGrid = styled(Grid, {
|
|
|
60
60
|
|
|
61
61
|
border-radius: 2px;
|
|
62
62
|
padding-left: ${({ justPicker }) => justPicker ? "0" : "2px"};
|
|
63
|
-
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "
|
|
63
|
+
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
|
|
64
|
+
|
|
64
65
|
position: relative;
|
|
65
66
|
${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
|
|
66
67
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,cAAc,MAAO,gBAAgB,KAAK;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 48px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n ${({ theme, isControllerOnly, hasError }) =>\n isControllerOnly\n ? ``\n : `\n border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n `}\n }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n position: relative;\n &:focus-within {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: -5px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 10px);\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})`\n height: 26px;\n position: relative;\n visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n &:focus {\n &:after {\n z-index: 1;\n }\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,cAAc,MAAO,gBAAgB,KAAK;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGtF,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,gCAAgC,OAAO,IAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
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.13.0-next.
|
|
3
|
+
"version": "3.13.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
|
|
6
6
|
"files": [
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-utilities": "3.13.0-next.
|
|
38
|
+
"@elliemae/ds-icons": "3.13.0-next.2",
|
|
39
|
+
"@elliemae/ds-icon": "3.13.0-next.2",
|
|
40
|
+
"@elliemae/ds-popperjs": "3.13.0-next.2",
|
|
41
|
+
"@elliemae/ds-system": "3.13.0-next.2",
|
|
42
|
+
"@elliemae/ds-button": "3.13.0-next.2",
|
|
43
|
+
"@elliemae/ds-grid": "3.13.0-next.2",
|
|
44
|
+
"@elliemae/ds-utilities": "3.13.0-next.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-theme": "~2.6.0",
|