@elliemae/ds-form-date-time-picker 3.12.0-rc.18 → 3.12.0-rc.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js +7 -2
  2. package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map +2 -2
  3. package/dist/cjs/parts/Styleds.js +2 -1
  4. package/dist/cjs/parts/Styleds.js.map +2 -2
  5. package/dist/esm/parts/Pickers/TimeWheel/useKeyboardHandlers.js +7 -2
  6. package/dist/esm/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map +2 -2
  7. package/dist/esm/parts/Styleds.js +2 -1
  8. package/dist/esm/parts/Styleds.js.map +2 -2
  9. package/package.json +8 -8
package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js CHANGED
@@ -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)(
package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map CHANGED
@@ -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": "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",
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
  }
package/dist/cjs/parts/Styleds.js CHANGED
@@ -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 ? "" : "0"};
101
+ padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
102
+
102
103
  position: relative;
103
104
  ${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
104
105
  `;
package/dist/cjs/parts/Styleds.js.map CHANGED
@@ -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 ? '' : '0')};\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,IAE5D,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;",
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
  }
package/dist/esm/parts/Pickers/TimeWheel/useKeyboardHandlers.js CHANGED
@@ -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(
package/dist/esm/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map CHANGED
@@ -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": "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",
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
  }
package/dist/esm/parts/Styleds.js CHANGED
@@ -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 ? "" : "0"};
63
+ padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
64
+
64
65
  position: relative;
65
66
  ${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
66
67
  `;
package/dist/esm/parts/Styleds.js.map CHANGED
@@ -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 ? '' : '0')};\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,IAE5D,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;",
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.12.0-rc.18",
3
+ "version": "3.12.0-rc.19",
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-button": "3.12.0-rc.18",
39
- "@elliemae/ds-grid": "3.12.0-rc.18",
40
- "@elliemae/ds-system": "3.12.0-rc.18",
41
- "@elliemae/ds-popperjs": "3.12.0-rc.18",
42
- "@elliemae/ds-icon": "3.12.0-rc.18",
43
- "@elliemae/ds-utilities": "3.12.0-rc.18",
44
- "@elliemae/ds-icons": "3.12.0-rc.18"
38
+ "@elliemae/ds-button": "3.12.0-rc.19",
39
+ "@elliemae/ds-grid": "3.12.0-rc.19",
40
+ "@elliemae/ds-icon": "3.12.0-rc.19",
41
+ "@elliemae/ds-icons": "3.12.0-rc.19",
42
+ "@elliemae/ds-popperjs": "3.12.0-rc.19",
43
+ "@elliemae/ds-system": "3.12.0-rc.19",
44
+ "@elliemae/ds-utilities": "3.12.0-rc.19"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@elliemae/pui-theme": "~2.6.0",