@elliemae/ds-form-date-time-picker 3.70.0-next.54 → 3.70.0-next.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useFocusTracker.js.map +2 -2
- package/dist/cjs/config/useGetReferences.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/esm/config/useFocusTracker.js.map +2 -2
- package/dist/esm/config/useGetReferences.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/dist/types/parts/Pickers/Calendar/Calendar.d.ts +3 -2
- package/dist/types/parts/Pickers/Calendar/CalendarBody.d.ts +1 -1
- package/dist/types/parts/Pickers/Calendar/CalendarWeekDays.d.ts +1 -1
- package/dist/types/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.d.ts +2 -1
- package/dist/types/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.d.ts +2 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheel.d.ts +2 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheelContent.d.ts +1 -1
- package/dist/types/parts/Pickers/TimeWheel/TimeWheelWrapper.d.ts +2 -1
- package/package.json +14 -14
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useFocusTracker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n | 'calendar-days'\n | 'calendar-head'\n | 'timewheel'\n | 'date-inputs'\n | 'time-inputs'\n | 'clear-btn'\n | 'picker-icon'\n | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector, isControllerOnly } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the first segment can be:\n - month-input (when date inputs are present)\n - hour-input (when ONLY time inputs are present)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the last segment can be:\n - year-input (when ONLY date inputs are present)\n - meridiem-input (when time inputs are present)\n - clear-btn (when clearable is true and there is no picker)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n const trackFocusResetter = useCallback(() => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n }, [currFocusDescriber, latestInteractionRegion]);\n\n const handleComponentBlurs = useCallback(\n (e: React.FocusEvent<HTMLElement>) => {\n /**\n * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n * this is because in controller only mode we don't have a portal that we need to account for,\n * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n */\n if (isControllerOnly) {\n const relatedTarget = e.relatedTarget as HTMLElement | null;\n if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n return;\n }\n trackFocusResetter();\n return;\n }\n /* our code base is trying to avoid side-effects and we also try to be imperative\n due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n we need to distinguish between\n - a blur that is caused by a portal opening\n vs\n - a blur that is caused by a user moving focus to another element\n we can do this by checking the currFocusDescriber and latestInteractionRegion\n we know that blur is triggered by portal opening when:\n - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n (this is the case when we open any timewheel ONLY)\n */\n let shouldShortCircuit = false;\n // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n shouldShortCircuit = true;\n // empty date value AND no onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n shouldShortCircuit = true;\n\n // only time wheel is present in the contextual region\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n shouldShortCircuit = true;\n\n if (shouldShortCircuit) return;\n trackFocusResetter();\n },\n [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n );\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter,\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n }),\n [\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusResetter,\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAA+C;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n 'calendar-days' | 'calendar-head' | 'timewheel' | 'date-inputs' | 'time-inputs' | 'clear-btn' | 'picker-icon' | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector, isControllerOnly } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the first segment can be:\n - month-input (when date inputs are present)\n - hour-input (when ONLY time inputs are present)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the last segment can be:\n - year-input (when ONLY date inputs are present)\n - meridiem-input (when time inputs are present)\n - clear-btn (when clearable is true and there is no picker)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n const trackFocusResetter = useCallback(() => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n }, [currFocusDescriber, latestInteractionRegion]);\n\n const handleComponentBlurs = useCallback(\n (e: React.FocusEvent<HTMLElement>) => {\n /**\n * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n * this is because in controller only mode we don't have a portal that we need to account for,\n * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n */\n if (isControllerOnly) {\n const relatedTarget = e.relatedTarget as HTMLElement | null;\n if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n return;\n }\n trackFocusResetter();\n return;\n }\n /* our code base is trying to avoid side-effects and we also try to be imperative\n due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n we need to distinguish between\n - a blur that is caused by a portal opening\n vs\n - a blur that is caused by a user moving focus to another element\n we can do this by checking the currFocusDescriber and latestInteractionRegion\n we know that blur is triggered by portal opening when:\n - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n (this is the case when we open any timewheel ONLY)\n */\n let shouldShortCircuit = false;\n // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n shouldShortCircuit = true;\n // empty date value AND no onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n shouldShortCircuit = true;\n\n // only time wheel is present in the contextual region\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n shouldShortCircuit = true;\n\n if (shouldShortCircuit) return;\n trackFocusResetter();\n },\n [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n );\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter,\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n }),\n [\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusResetter,\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useGetReferences.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useRef, useMemo, useState } from 'react';\nimport type { useGetFlags } from './useGetFlags.js';\ntype FirstSegment =\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA0C;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useRef, useMemo, useState } from 'react';\nimport type { useGetFlags } from './useGetFlags.js';\ntype FirstSegment =\n 'month-input' | 'hour-input' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';\ntype LastSegment =\n 'year-input' | 'meridiem-input' | 'clear-btn' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';\nexport const useGetReferences = ({\n isWithDateInputs,\n isWithTimeInputs,\n isDateSelector,\n isTimeSelector,\n isDateTimeSelector,\n withAnyPicker,\n withClearBtn,\n}: ReturnType<typeof useGetFlags>) => {\n // those 2 states are needed for focus tracking\n const [firstSegment, setFirstSegment] = useState<FirstSegment>('');\n const [lastSegment, setLastSegment] = useState<LastSegment>('');\n // refs are used for \"auto-advance\" feature\n const monthInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const dayInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const yearInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const hourInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const minutesInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const meridiemInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const clearButtonRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const pickerButtonRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n\n const prevYearBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMonthBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const nextMonthBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const nextYearBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const calendarDaysWrapperRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n\n const prevHourBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currHourBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextHourBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMinutesBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currMinutesBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextMinutesBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMeridiemBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currMeridiemBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextMeridiemBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n\n let firstSegmentRef = useRef<HTMLInputElement | HTMLButtonElement>(null) as React.MutableRefObject<\n HTMLInputElement | HTMLButtonElement\n >;\n if (isWithDateInputs) {\n firstSegmentRef = monthInputRef;\n if (firstSegment !== 'month-input') setFirstSegment('month-input');\n } else if (isWithTimeInputs) {\n firstSegmentRef = hourInputRef;\n if (firstSegment !== 'hour-input') setFirstSegment('hour-input');\n } else if (withAnyPicker) {\n firstSegmentRef = pickerButtonRef;\n if (isDateSelector && firstSegment !== 'date-picker-icon') setFirstSegment('date-picker-icon');\n if (isTimeSelector && firstSegment !== 'time-picker-icon') setFirstSegment('time-picker-icon');\n if (isDateTimeSelector && firstSegment !== 'datetime-picker-icon') setFirstSegment('datetime-picker-icon');\n }\n\n let lastSegmentRef = useRef<HTMLInputElement | HTMLButtonElement>(null) as React.MutableRefObject<\n HTMLInputElement | HTMLButtonElement\n >;\n if (withAnyPicker) {\n lastSegmentRef = pickerButtonRef;\n if (isDateSelector && lastSegment !== 'date-picker-icon') setLastSegment('date-picker-icon');\n if (isTimeSelector && lastSegment !== 'time-picker-icon') setLastSegment('time-picker-icon');\n if (isDateTimeSelector && lastSegment !== 'datetime-picker-icon') setLastSegment('datetime-picker-icon');\n } else if (withClearBtn) {\n lastSegmentRef = clearButtonRef;\n if (lastSegment !== 'clear-btn') setLastSegment('clear-btn');\n } else if (isWithTimeInputs) {\n lastSegmentRef = meridiemInputRef;\n if (lastSegment !== 'meridiem-input') setLastSegment('meridiem-input');\n } else if (isWithDateInputs) {\n lastSegmentRef = yearInputRef;\n if (lastSegment !== 'year-input') setLastSegment('year-input');\n }\n\n return useMemo(\n () => ({\n monthInputRef,\n dayInputRef,\n yearInputRef,\n hourInputRef,\n minutesInputRef,\n meridiemInputRef,\n clearButtonRef,\n pickerButtonRef,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n calendarDaysWrapperRef,\n prevHourBtnRef,\n currHourBtnRef,\n nextHourBtnRef,\n prevMinutesBtnRef,\n currMinutesBtnRef,\n nextMinutesBtnRef,\n prevMeridiemBtnRef,\n currMeridiemBtnRef,\n nextMeridiemBtnRef,\n firstSegmentRef,\n lastSegmentRef,\n firstSegment,\n lastSegment,\n }),\n [firstSegment, lastSegment],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n $isTheItemVisuallyInTheCenter?: boolean;\n $selected?: boolean;\n $isNotAValidSelection?: boolean;\n $readOnly?: boolean;\n $isUnset?: boolean;\n $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n return css<StyledWheelListItemPropsT>`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${theme.colors.brand[700]};\n }\n `;\n return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n if (!$isNotAValidSelection) return css``;\n\n let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n return css<StyledWheelListItemPropsT>`\n cursor: not-allowed;\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${beforeBgColor};\n }\n `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n let color = theme.colors.neutral[700]; // default\n if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n }\n\n // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n // Matches focus ring: always brand when interactive, no change when readOnly or selected\n const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n return css<StyledWheelListItemPropsT>`\n color: ${color};\n &:hover {\n color: ${hoverColor};\n }\n &:focus {\n color: ${focusColor};\n }\n `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n// readOnly \u2192 selected: neutral-700 | not-selected: neutral-100\n// invalid \u2192 selected: danger-950 | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n// valid \u2192 selected: brand-800 | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n // Rest background: only selected items have a non-transparent background.\n let bgColor = '';\n if ($selected) {\n bgColor = theme.colors.brand[600];\n if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n }\n\n // When the wheel column is active (focused), drive the selected centre item to the\n // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n // meridiem visual items can't receive :focus at all.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n if ($readOnly) bgColor = theme.colors.neutral[700];\n else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n else bgColor = theme.colors.brand[800];\n }\n\n // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n let hoverBgColor: string;\n if ($readOnly) {\n hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n } else if ($isNotAValidSelection) {\n // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n } else {\n hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n }\n\n return css`\n background-color: ${bgColor};\n &:hover {\n background-color: ${hoverBgColor};\n }\n `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n return css`\n cursor: ${cursorStyle};\n `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected } = props;\n if ($selected) {\n return css`\n font-weight: ${theme.fontWeights.semibold};\n `;\n }\n return css`\n &:hover {\n font-weight: ${theme.fontWeights.semibold};\n }\n `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n width: 100%;\n height: 100%;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n width: 100%;\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral['300']};\n }\n }\n\n > *:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n outline: none;\n }\n ${cursor}\n ${fontColor}\n ${diagonalLine}\n ${btnBgColorPerStatus}\n ${focusBorder}\n ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n padding: ${({ theme }) => theme.space.xxs2};\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n $isTheItemVisuallyInTheCenter?: boolean;\n $selected?: boolean;\n $isNotAValidSelection?: boolean;\n $readOnly?: boolean;\n $isUnset?: boolean;\n $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n return css<StyledWheelListItemPropsT>`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${theme.colors.brand[700]};\n }\n `;\n return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n if (!$isNotAValidSelection) return css``;\n\n let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n return css<StyledWheelListItemPropsT>`\n cursor: not-allowed;\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${beforeBgColor};\n }\n `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n let color = theme.colors.neutral[700]; // default\n if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n }\n\n // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n // Matches focus ring: always brand when interactive, no change when readOnly or selected\n const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n return css<StyledWheelListItemPropsT>`\n color: ${color};\n &:hover {\n color: ${hoverColor};\n }\n &:focus {\n color: ${focusColor};\n }\n `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n// readOnly \u2192 selected: neutral-700 | not-selected: neutral-100\n// invalid \u2192 selected: danger-950 | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n// valid \u2192 selected: brand-800 | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n // Rest background: only selected items have a non-transparent background.\n let bgColor = '';\n if ($selected) {\n bgColor = theme.colors.brand[600];\n if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n }\n\n // When the wheel column is active (focused), drive the selected centre item to the\n // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n // meridiem visual items can't receive :focus at all.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n if ($readOnly) bgColor = theme.colors.neutral[700];\n else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n else bgColor = theme.colors.brand[800];\n }\n\n // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n let hoverBgColor: string;\n if ($readOnly) {\n hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n } else if ($isNotAValidSelection) {\n // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n } else {\n hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n }\n\n return css`\n background-color: ${bgColor};\n &:hover {\n background-color: ${hoverBgColor};\n }\n `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n return css`\n cursor: ${cursorStyle};\n `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected } = props;\n if ($selected) {\n return css`\n font-weight: ${theme.fontWeights.semibold};\n `;\n }\n return css`\n &:hover {\n font-weight: ${theme.fontWeights.semibold};\n }\n `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n width: 100%;\n height: 100%;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n width: 100%;\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral['300']};\n }\n }\n\n > *:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n outline: none;\n }\n ${cursor}\n ${fontColor}\n ${diagonalLine}\n ${btnBgColorPerStatus}\n ${focusBorder}\n ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n padding: ${({ theme }) => theme.space.xxs2};\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Styleds.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\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 :disabled {\n cursor: not-allowed;\n }\n padding-top: 2px;\n\n color: ${th.color('neutral-700')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\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, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n isControllerOnly: boolean;\n onlyPicker: boolean;\n hasError: boolean;\n justPicker: boolean;\n disabled: boolean;\n $readOnlyStyles?: boolean;\n}>`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 2.153rem; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError }) => {\n if (hasError) return theme.colors.danger[900];\n return theme.colors.neutral[400];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n !onlyPicker &&\n `\n border-left: 1px solid ${theme.colors.neutral['080']};\n border-top: 1px solid ${theme.colors.neutral['080']};\n border-right: 1px solid ${theme.colors.neutral['080']};\n\n `}\n ${({ $readOnlyStyles, hasError, theme }) =>\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA2B;AAC3B,uBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBzB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,uBAAmB,yBAAO,oBAAoB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,wBAAoB,yBAAO,oBAAoB;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,0BAAsB,yBAAO,oBAAoB;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,iDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA,GAIL;AAAA;AAAA,kBAEe,CAAC,EAAE,OAAO,SAAS,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC,CAAC;AAAA;AAAA;AAAA,kBAGe,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM,KAAM;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA,IAC5F,CAAC,EAAE,iBAAiB,UAAU,YAAY,MAAM,MAChD,mBACA,CAAC,YACD,CAAC,cACD;AAAA,6BACyB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAC5B,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,8BACzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,GAEtD;AAAA,KACE,CAAC,EAAE,iBAAiB,UAAU,MAAM,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\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 :disabled {\n cursor: not-allowed;\n }\n padding-top: 2px;\n\n color: ${th.color('neutral-700')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\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, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n isControllerOnly: boolean;\n onlyPicker: boolean;\n hasError: boolean;\n justPicker: boolean;\n disabled: boolean;\n $readOnlyStyles?: boolean;\n}>`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 2.153rem; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError }) => {\n if (hasError) return theme.colors.danger[900];\n return theme.colors.neutral[400];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n !onlyPicker &&\n `\n border-left: 1px solid ${theme.colors.neutral['080']};\n border-top: 1px solid ${theme.colors.neutral['080']};\n border-right: 1px solid ${theme.colors.neutral['080']};\n\n `}\n ${({ $readOnlyStyles, hasError, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n `\n background-color: ${theme.colors.neutral['050']};\n `}\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; hasError: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n // this shoudnt be rounded as specified in the design\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[400]}\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})<{ shouldDisplay: boolean }>`\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useFocusTracker.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n | 'calendar-days'\n | 'calendar-head'\n | 'timewheel'\n | 'date-inputs'\n | 'time-inputs'\n | 'clear-btn'\n | 'picker-icon'\n | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector, isControllerOnly } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the first segment can be:\n - month-input (when date inputs are present)\n - hour-input (when ONLY time inputs are present)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the last segment can be:\n - year-input (when ONLY date inputs are present)\n - meridiem-input (when time inputs are present)\n - clear-btn (when clearable is true and there is no picker)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n const trackFocusResetter = useCallback(() => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n }, [currFocusDescriber, latestInteractionRegion]);\n\n const handleComponentBlurs = useCallback(\n (e: React.FocusEvent<HTMLElement>) => {\n /**\n * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n * this is because in controller only mode we don't have a portal that we need to account for,\n * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n */\n if (isControllerOnly) {\n const relatedTarget = e.relatedTarget as HTMLElement | null;\n if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n return;\n }\n trackFocusResetter();\n return;\n }\n /* our code base is trying to avoid side-effects and we also try to be imperative\n due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n we need to distinguish between\n - a blur that is caused by a portal opening\n vs\n - a blur that is caused by a user moving focus to another element\n we can do this by checking the currFocusDescriber and latestInteractionRegion\n we know that blur is triggered by portal opening when:\n - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n (this is the case when we open any timewheel ONLY)\n */\n let shouldShortCircuit = false;\n // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n shouldShortCircuit = true;\n // empty date value AND no onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n shouldShortCircuit = true;\n\n // only time wheel is present in the contextual region\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n shouldShortCircuit = true;\n\n if (shouldShortCircuit) return;\n trackFocusResetter();\n },\n [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n );\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter,\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n }),\n [\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusResetter,\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n ],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,SAAS,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n 'calendar-days' | 'calendar-head' | 'timewheel' | 'date-inputs' | 'time-inputs' | 'clear-btn' | 'picker-icon' | '';\ntype CurrFocusDescriber =\n | 'first-segment'\n | 'month-input'\n | 'day-input'\n | 'year-input'\n | 'hour-input'\n | 'minute-input'\n | 'meridiem-input'\n | 'last-segment'\n | 'clear-btn'\n | 'date-picker-icon'\n | 'time-picker-icon'\n | 'datetime-picker-icon'\n | 'calendar-prev-month'\n | 'calendar-next-month'\n | 'calendar-prev-year'\n | 'calendar-next-year'\n | 'calendar-metafocused-day'\n | 'timewheel-curr-hour'\n | 'timewheel-curr-minute'\n | 'timewheel-curr-meridiem'\n | '';\n\ninterface Config {\n DOMRefs: ReturnType<typeof useGetReferences>;\n flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n const { firstSegment, lastSegment } = DOMRefs;\n const { isDateSelector, isTimeSelector, isControllerOnly } = flags;\n\n const trackFocusPicker = useCallback(() => {\n let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n if (isDateSelector) picker = 'date-picker-icon';\n if (isTimeSelector) picker = 'time-picker-icon';\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the first segment can be:\n - month-input (when date inputs are present)\n - hour-input (when ONLY time inputs are present)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusFirstSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (firstSegment === 'hour-input') region = 'time-inputs';\n if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n /*\n depending on the polymorphic props, the last segment can be:\n - year-input (when ONLY date inputs are present)\n - meridiem-input (when time inputs are present)\n - clear-btn (when clearable is true and there is no picker)\n - datetime-picker-icon (when picker is present and we are selecting both date and time)\n - date-picker-icon (when picker is present and no time selection is involved)\n - time-picker-icon (when picker is present and no date selection is involved)\n */\n const trackFocusLastSegment = useCallback(() => {\n let region = 'date-inputs' as LatestInteractionRegion;\n if (lastSegment === 'meridiem-input') region = 'time-inputs';\n if (lastSegment === 'clear-btn') region = 'clear-btn';\n if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n const trackFocusResetter = useCallback(() => {\n if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n if (currFocusDescriber !== '') setCurrFocusDescriber('');\n }, [currFocusDescriber, latestInteractionRegion]);\n\n const handleComponentBlurs = useCallback(\n (e: React.FocusEvent<HTMLElement>) => {\n /**\n * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n * this is because in controller only mode we don't have a portal that we need to account for,\n * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n */\n if (isControllerOnly) {\n const relatedTarget = e.relatedTarget as HTMLElement | null;\n if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n return;\n }\n trackFocusResetter();\n return;\n }\n /* our code base is trying to avoid side-effects and we also try to be imperative\n due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n we need to distinguish between\n - a blur that is caused by a portal opening\n vs\n - a blur that is caused by a user moving focus to another element\n we can do this by checking the currFocusDescriber and latestInteractionRegion\n we know that blur is triggered by portal opening when:\n - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n (this is the case when we open any timewheel ONLY)\n */\n let shouldShortCircuit = false;\n // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n shouldShortCircuit = true;\n // empty date value AND no onCalendarOpenFocusedDay is present\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n shouldShortCircuit = true;\n\n // only time wheel is present in the contextual region\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n shouldShortCircuit = true;\n\n if (shouldShortCircuit) return;\n trackFocusResetter();\n },\n [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n );\n\n return useMemo(\n () => ({\n latestInteractionRegion,\n setLatestInteractionRegion,\n currFocusDescriber,\n setCurrFocusDescriber,\n trackFocusResetter,\n trackFocusMonthInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n },\n trackFocusDayInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n },\n trackFocusYearInput: () => {\n if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n },\n trackFocusHourInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n },\n trackFocusMinuteInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n },\n trackFocusMeridiemInput: () => {\n if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n },\n trackFocusClearBtn: () => {\n if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n },\n trackFocusDatePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n },\n trackFocusTimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n },\n trackFocusDatetimePickerIcon: () => {\n if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n },\n trackFocusCalendarPrevMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n },\n trackFocusCalendarNextMonth: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n },\n trackFocusCalendarPrevYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n },\n trackFocusCalendarNextYear: () => {\n if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n },\n trackFocusCalendarMetafocusedDay: () => {\n if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n },\n trackFocusTimewheelCurrHour: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n },\n trackFocusTimewheelCurrMinute: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n },\n trackFocusTimewheelCurrMeridiem: () => {\n if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n },\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n }),\n [\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusResetter,\n trackFocusPicker,\n trackFocusFirstSegment,\n trackFocusLastSegment,\n handleComponentBlurs,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGetReferences.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useRef, useMemo, useState } from 'react';\nimport type { useGetFlags } from './useGetFlags.js';\ntype FirstSegment =\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,SAAS,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useRef, useMemo, useState } from 'react';\nimport type { useGetFlags } from './useGetFlags.js';\ntype FirstSegment =\n 'month-input' | 'hour-input' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';\ntype LastSegment =\n 'year-input' | 'meridiem-input' | 'clear-btn' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';\nexport const useGetReferences = ({\n isWithDateInputs,\n isWithTimeInputs,\n isDateSelector,\n isTimeSelector,\n isDateTimeSelector,\n withAnyPicker,\n withClearBtn,\n}: ReturnType<typeof useGetFlags>) => {\n // those 2 states are needed for focus tracking\n const [firstSegment, setFirstSegment] = useState<FirstSegment>('');\n const [lastSegment, setLastSegment] = useState<LastSegment>('');\n // refs are used for \"auto-advance\" feature\n const monthInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const dayInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const yearInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const hourInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const minutesInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const meridiemInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;\n const clearButtonRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const pickerButtonRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n\n const prevYearBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMonthBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const nextMonthBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const nextYearBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const calendarDaysWrapperRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n\n const prevHourBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currHourBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextHourBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMinutesBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currMinutesBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextMinutesBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const prevMeridiemBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n const currMeridiemBtnRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>;\n const nextMeridiemBtnRef = useRef<HTMLButtonElement>(null) as React.MutableRefObject<HTMLButtonElement>;\n\n let firstSegmentRef = useRef<HTMLInputElement | HTMLButtonElement>(null) as React.MutableRefObject<\n HTMLInputElement | HTMLButtonElement\n >;\n if (isWithDateInputs) {\n firstSegmentRef = monthInputRef;\n if (firstSegment !== 'month-input') setFirstSegment('month-input');\n } else if (isWithTimeInputs) {\n firstSegmentRef = hourInputRef;\n if (firstSegment !== 'hour-input') setFirstSegment('hour-input');\n } else if (withAnyPicker) {\n firstSegmentRef = pickerButtonRef;\n if (isDateSelector && firstSegment !== 'date-picker-icon') setFirstSegment('date-picker-icon');\n if (isTimeSelector && firstSegment !== 'time-picker-icon') setFirstSegment('time-picker-icon');\n if (isDateTimeSelector && firstSegment !== 'datetime-picker-icon') setFirstSegment('datetime-picker-icon');\n }\n\n let lastSegmentRef = useRef<HTMLInputElement | HTMLButtonElement>(null) as React.MutableRefObject<\n HTMLInputElement | HTMLButtonElement\n >;\n if (withAnyPicker) {\n lastSegmentRef = pickerButtonRef;\n if (isDateSelector && lastSegment !== 'date-picker-icon') setLastSegment('date-picker-icon');\n if (isTimeSelector && lastSegment !== 'time-picker-icon') setLastSegment('time-picker-icon');\n if (isDateTimeSelector && lastSegment !== 'datetime-picker-icon') setLastSegment('datetime-picker-icon');\n } else if (withClearBtn) {\n lastSegmentRef = clearButtonRef;\n if (lastSegment !== 'clear-btn') setLastSegment('clear-btn');\n } else if (isWithTimeInputs) {\n lastSegmentRef = meridiemInputRef;\n if (lastSegment !== 'meridiem-input') setLastSegment('meridiem-input');\n } else if (isWithDateInputs) {\n lastSegmentRef = yearInputRef;\n if (lastSegment !== 'year-input') setLastSegment('year-input');\n }\n\n return useMemo(\n () => ({\n monthInputRef,\n dayInputRef,\n yearInputRef,\n hourInputRef,\n minutesInputRef,\n meridiemInputRef,\n clearButtonRef,\n pickerButtonRef,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n calendarDaysWrapperRef,\n prevHourBtnRef,\n currHourBtnRef,\n nextHourBtnRef,\n prevMinutesBtnRef,\n currMinutesBtnRef,\n nextMinutesBtnRef,\n prevMeridiemBtnRef,\n currMeridiemBtnRef,\n nextMeridiemBtnRef,\n firstSegmentRef,\n lastSegmentRef,\n firstSegment,\n lastSegment,\n }),\n [firstSegment, lastSegment],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,SAAS,gBAAgB;AAMnC,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsC;AAEpC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAuB,EAAE;AACjE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB,EAAE;AAE9D,QAAM,gBAAgB,OAAyB,IAAI;AACnD,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,kBAAkB,OAAyB,IAAI;AACrD,QAAM,mBAAmB,OAAyB,IAAI;AACtD,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,kBAAkB,OAA0B,IAAI;AAEtD,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,kBAAkB,OAA0B,IAAI;AACtD,QAAM,kBAAkB,OAA0B,IAAI;AACtD,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,yBAAyB,OAAuB,IAAI;AAE1D,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,oBAAoB,OAA0B,IAAI;AACxD,QAAM,oBAAoB,OAAuB,IAAI;AACrD,QAAM,oBAAoB,OAA0B,IAAI;AACxD,QAAM,qBAAqB,OAA0B,IAAI;AACzD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,MAAI,kBAAkB,OAA6C,IAAI;AAGvE,MAAI,kBAAkB;AACpB,sBAAkB;AAClB,QAAI,iBAAiB,cAAe,iBAAgB,aAAa;AAAA,EACnE,WAAW,kBAAkB;AAC3B,sBAAkB;AAClB,QAAI,iBAAiB,aAAc,iBAAgB,YAAY;AAAA,EACjE,WAAW,eAAe;AACxB,sBAAkB;AAClB,QAAI,kBAAkB,iBAAiB,mBAAoB,iBAAgB,kBAAkB;AAC7F,QAAI,kBAAkB,iBAAiB,mBAAoB,iBAAgB,kBAAkB;AAC7F,QAAI,sBAAsB,iBAAiB,uBAAwB,iBAAgB,sBAAsB;AAAA,EAC3G;AAEA,MAAI,iBAAiB,OAA6C,IAAI;AAGtE,MAAI,eAAe;AACjB,qBAAiB;AACjB,QAAI,kBAAkB,gBAAgB,mBAAoB,gBAAe,kBAAkB;AAC3F,QAAI,kBAAkB,gBAAgB,mBAAoB,gBAAe,kBAAkB;AAC3F,QAAI,sBAAsB,gBAAgB,uBAAwB,gBAAe,sBAAsB;AAAA,EACzG,WAAW,cAAc;AACvB,qBAAiB;AACjB,QAAI,gBAAgB,YAAa,gBAAe,WAAW;AAAA,EAC7D,WAAW,kBAAkB;AAC3B,qBAAiB;AACjB,QAAI,gBAAgB,iBAAkB,gBAAe,gBAAgB;AAAA,EACvE,WAAW,kBAAkB;AAC3B,qBAAiB;AACjB,QAAI,gBAAgB,aAAc,gBAAe,YAAY;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;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,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,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n $isTheItemVisuallyInTheCenter?: boolean;\n $selected?: boolean;\n $isNotAValidSelection?: boolean;\n $readOnly?: boolean;\n $isUnset?: boolean;\n $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n return css<StyledWheelListItemPropsT>`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${theme.colors.brand[700]};\n }\n `;\n return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n if (!$isNotAValidSelection) return css``;\n\n let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n return css<StyledWheelListItemPropsT>`\n cursor: not-allowed;\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${beforeBgColor};\n }\n `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n let color = theme.colors.neutral[700]; // default\n if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n }\n\n // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n // Matches focus ring: always brand when interactive, no change when readOnly or selected\n const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n return css<StyledWheelListItemPropsT>`\n color: ${color};\n &:hover {\n color: ${hoverColor};\n }\n &:focus {\n color: ${focusColor};\n }\n `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n// readOnly \u2192 selected: neutral-700 | not-selected: neutral-100\n// invalid \u2192 selected: danger-950 | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n// valid \u2192 selected: brand-800 | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n // Rest background: only selected items have a non-transparent background.\n let bgColor = '';\n if ($selected) {\n bgColor = theme.colors.brand[600];\n if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n }\n\n // When the wheel column is active (focused), drive the selected centre item to the\n // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n // meridiem visual items can't receive :focus at all.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n if ($readOnly) bgColor = theme.colors.neutral[700];\n else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n else bgColor = theme.colors.brand[800];\n }\n\n // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n let hoverBgColor: string;\n if ($readOnly) {\n hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n } else if ($isNotAValidSelection) {\n // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n } else {\n hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n }\n\n return css`\n background-color: ${bgColor};\n &:hover {\n background-color: ${hoverBgColor};\n }\n `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n return css`\n cursor: ${cursorStyle};\n `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected } = props;\n if ($selected) {\n return css`\n font-weight: ${theme.fontWeights.semibold};\n `;\n }\n return css`\n &:hover {\n font-weight: ${theme.fontWeights.semibold};\n }\n `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n width: 100%;\n height: 100%;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n width: 100%;\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral['300']};\n }\n }\n\n > *:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n outline: none;\n }\n ${cursor}\n ${fontColor}\n ${diagonalLine}\n ${btnBgColorPerStatus}\n ${focusBorder}\n ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n padding: ${({ theme }) => theme.space.xxs2};\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n $isTheItemVisuallyInTheCenter?: boolean;\n $selected?: boolean;\n $isNotAValidSelection?: boolean;\n $readOnly?: boolean;\n $isUnset?: boolean;\n $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n return css<StyledWheelListItemPropsT>`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${theme.colors.brand[700]};\n }\n `;\n return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n if (!$isNotAValidSelection) return css``;\n\n let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n return css<StyledWheelListItemPropsT>`\n cursor: not-allowed;\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${beforeBgColor};\n }\n `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n let color = theme.colors.neutral[700]; // default\n if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n }\n\n // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n // Matches focus ring: always brand when interactive, no change when readOnly or selected\n const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n return css<StyledWheelListItemPropsT>`\n color: ${color};\n &:hover {\n color: ${hoverColor};\n }\n &:focus {\n color: ${focusColor};\n }\n `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n// readOnly \u2192 selected: neutral-700 | not-selected: neutral-100\n// invalid \u2192 selected: danger-950 | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n// valid \u2192 selected: brand-800 | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n // Rest background: only selected items have a non-transparent background.\n let bgColor = '';\n if ($selected) {\n bgColor = theme.colors.brand[600];\n if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n }\n\n // When the wheel column is active (focused), drive the selected centre item to the\n // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n // meridiem visual items can't receive :focus at all.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n if ($readOnly) bgColor = theme.colors.neutral[700];\n else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n else bgColor = theme.colors.brand[800];\n }\n\n // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n let hoverBgColor: string;\n if ($readOnly) {\n hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n } else if ($isNotAValidSelection) {\n // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n } else {\n hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n }\n\n return css`\n background-color: ${bgColor};\n &:hover {\n background-color: ${hoverBgColor};\n }\n `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n return css`\n cursor: ${cursorStyle};\n `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected } = props;\n if ($selected) {\n return css`\n font-weight: ${theme.fontWeights.semibold};\n `;\n }\n return css`\n &:hover {\n font-weight: ${theme.fontWeights.semibold};\n }\n `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n width: 100%;\n height: 100%;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n width: 100%;\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral['300']};\n }\n }\n\n > *:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n outline: none;\n }\n ${cursor}\n ${fontColor}\n ${diagonalLine}\n ${btnBgColorPerStatus}\n ${focusBorder}\n ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n padding: ${({ theme }) => theme.space.xxs2};\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../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 { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\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 :disabled {\n cursor: not-allowed;\n }\n padding-top: 2px;\n\n color: ${th.color('neutral-700')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\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, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n isControllerOnly: boolean;\n onlyPicker: boolean;\n hasError: boolean;\n justPicker: boolean;\n disabled: boolean;\n $readOnlyStyles?: boolean;\n}>`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 2.153rem; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError }) => {\n if (hasError) return theme.colors.danger[900];\n return theme.colors.neutral[400];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n !onlyPicker &&\n `\n border-left: 1px solid ${theme.colors.neutral['080']};\n border-top: 1px solid ${theme.colors.neutral['080']};\n border-right: 1px solid ${theme.colors.neutral['080']};\n\n `}\n ${({ $readOnlyStyles, hasError, theme }) =>\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBzB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,mBAAmB,OAAO,oBAAoB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,oBAAoB,OAAO,oBAAoB;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAsB,OAAO,oBAAoB;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA,GAIL;AAAA;AAAA,kBAEe,CAAC,EAAE,OAAO,SAAS,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC,CAAC;AAAA;AAAA;AAAA,kBAGe,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM,KAAM;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA,IAC5F,CAAC,EAAE,iBAAiB,UAAU,YAAY,MAAM,MAChD,mBACA,CAAC,YACD,CAAC,cACD;AAAA,6BACyB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAC5B,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,8BACzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,GAEtD;AAAA,KACE,CAAC,EAAE,iBAAiB,UAAU,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\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 :disabled {\n cursor: not-allowed;\n }\n padding-top: 2px;\n\n color: ${th.color('neutral-700')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\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, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n isControllerOnly: boolean;\n onlyPicker: boolean;\n hasError: boolean;\n justPicker: boolean;\n disabled: boolean;\n $readOnlyStyles?: boolean;\n}>`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 2.153rem; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError }) => {\n if (hasError) return theme.colors.danger[900];\n return theme.colors.neutral[400];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n !onlyPicker &&\n `\n border-left: 1px solid ${theme.colors.neutral['080']};\n border-top: 1px solid ${theme.colors.neutral['080']};\n border-right: 1px solid ${theme.colors.neutral['080']};\n\n `}\n ${({ $readOnlyStyles, hasError, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n `\n background-color: ${theme.colors.neutral['050']};\n `}\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; hasError: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n // this shoudnt be rounded as specified in the design\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[400]}\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})<{ shouldDisplay: boolean }>`\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,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBzB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,mBAAmB,OAAO,oBAAoB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,oBAAoB,OAAO,oBAAoB;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAsB,OAAO,oBAAoB;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA,GAIL;AAAA;AAAA,kBAEe,CAAC,EAAE,OAAO,SAAS,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC,CAAC;AAAA;AAAA;AAAA,kBAGe,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM,KAAM;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA,IAC5F,CAAC,EAAE,iBAAiB,UAAU,YAAY,MAAM,MAChD,mBACA,CAAC,YACD,CAAC,cACD;AAAA,6BACyB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAC5B,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,8BACzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,GAEtD;AAAA,KACE,CAAC,EAAE,iBAAiB,UAAU,MAAM,MACpC,mBACA,CAAC,YACD;AAAA,wBACmB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,GAChD;AAAA;AAGI,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,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUjE,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KACvF;AAAA;AAAA;AAIE,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export declare const WrappedCalendarContext: ({ children }: {
|
|
2
3
|
children: JSX.Element;
|
|
3
|
-
}) =>
|
|
4
|
-
export declare const Calendar: () =>
|
|
4
|
+
}) => React.JSX.Element;
|
|
5
|
+
export declare const Calendar: () => React.JSX.Element;
|
|
@@ -2,5 +2,5 @@ import React from 'react';
|
|
|
2
2
|
interface CalendarBodyPropsT {
|
|
3
3
|
weekRowsNum: number;
|
|
4
4
|
}
|
|
5
|
-
export declare const CalendarBody: React.MemoExoticComponent<({ weekRowsNum }: CalendarBodyPropsT) =>
|
|
5
|
+
export declare const CalendarBody: React.MemoExoticComponent<({ weekRowsNum }: CalendarBodyPropsT) => React.JSX.Element>;
|
|
6
6
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const CalendarWeekDays: React.MemoExoticComponent<() =>
|
|
2
|
+
export declare const CalendarWeekDays: React.MemoExoticComponent<() => React.JSX.Element>;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const CalendarWithTimeWheel: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const CalendarWithTimeWheelWrapper: () => React.JSX.Element | null;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const TimeWheelContent: React.MemoExoticComponent<() =>
|
|
2
|
+
export declare const TimeWheelContent: React.MemoExoticComponent<() => React.JSX.Element>;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const TimeWheelWrapper: () => React.JSX.Element | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-date-time-picker",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.59",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
|
|
6
6
|
"files": [
|
|
@@ -37,28 +37,28 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-floating-context": "3.70.0-next.
|
|
42
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.70.0-next.59",
|
|
41
|
+
"@elliemae/ds-floating-context": "3.70.0-next.59",
|
|
42
|
+
"@elliemae/ds-grid": "3.70.0-next.59",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.59",
|
|
44
|
+
"@elliemae/ds-icons": "3.70.0-next.59",
|
|
45
|
+
"@elliemae/ds-system": "3.70.0-next.59",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.59"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@elliemae/pui-theme": "~2.13.0",
|
|
50
|
-
"@playwright/experimental-ct-react": "
|
|
50
|
+
"@playwright/experimental-ct-react": "1.61.1",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
|
-
"styled-components": "~5.3.
|
|
52
|
+
"styled-components": "~5.3.11",
|
|
53
53
|
"styled-system": "^5.1.5",
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.59",
|
|
55
|
+
"@elliemae/ds-test-utils": "3.70.0-next.59"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@elliemae/pui-theme": "~2.13.0",
|
|
59
59
|
"react": "^18.3.1",
|
|
60
60
|
"react-dom": "^18.3.1",
|
|
61
|
-
"styled-components": "~5.3.
|
|
61
|
+
"styled-components": "~5.3.11",
|
|
62
62
|
"styled-system": "^5.1.5"
|
|
63
63
|
},
|
|
64
64
|
"publishConfig": {
|
|
@@ -74,4 +74,4 @@
|
|
|
74
74
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
75
75
|
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
76
76
|
}
|
|
77
|
-
}
|
|
77
|
+
}
|